:root{
  --col-primary-text: rgba(0,0,0,1);
  --col-primary-text-1: rgba(0,0,0,0.9);
  --col-primary-text-white-1: rgba(255,255,255,0.9);

  --col-primary-blue: rgba(11,78,162,1);
  --col-primary-green: rgba(41,114,7,1);
  

  --col-secondary-blue: rgba(63,140,223,1);
  --col-secondary-green: rgba(80,215,49,1);

  --col-complimentary-green: #29b84a;

  --col-hover-green: #5fd61a;
}

/*
* Sections
*/ 

.section-full {
  margin:0;
  padding:0;

  width:100%;
  height:70vh; 
  min-height:850px;

  background:rgba(64,64,64,1);
  overflow:hidden;
}

.section-full-wrapper {
  width: 100%;
  height: 100%;

  display: flex; 

  color:#fff;
}

.section-split-1 {
  /*margin:2rem 0;*/
  padding:0;

  min-height:900px;

  width:100%;height:50vh;
  background:rgba(64,64,64,1);
  overflow:hidden;
}

.section-split-1-wrapper {
  width: 100%;
  height: 100%;

  display: flex; 

  color:#fff;
}

.section-split-1-content {
  padding:0;
  width: 65%;
  height: 100%;

  position:relative;z-index: 90;
  /*display: flex; */

  color:#fff;
}

.section-split-1-side {
  padding:0;

  position:relative;z-index: 80;

  width: 35%;
  height: 100%;

  display: flex; 

  color:#fff;
  background:#e1e1e1;
}

.section-certs {
  min-height:750px;
}


/*
* Headers
*/

.section-header-regular-1 {
  padding:0.3rem;
}

.contet-header-wrapper  {
  display:flex;
  flex-wrap: wrap;
  align-items: center;
}

.shr-1-title-wrapper {
  display:flex; align-items: center;
}

.shr-1-subtitle-wrapper {
  padding-left:25px;
  margin-top:0.3rem;
  margin-left:0.3rem;
}

.shr1-img {
  height:50px;
  display:block;
}

.shr1-img img {
  height:100%; width:auto;
}

.shr-1-title {
  position:relative; left:-25px; top:12px;
}

.shr-1-title h1 {
  padding:0;margin:0;
  font-size:2rem;
  line-height:2rem;
  font-weight:800;
  letter-spacing: 1px;

  color:rgba(255,255,255,1);

  text-shadow:
  -5px -5px 0 #323232,  0px -5px 0 #323232,  5px -5px 0 #323232,
  -5px  0px 0 #323232,                      5px  0px 0 #323232,
  -5px  5px 0 #323232,  0px  5px 0 #323232,  5px  5px 0 #323232;
}

.shr-1-subtitle-wrapper h2 {
  padding:0;margin:0;
  margin-top:0.3rem;
  font-size:0.8rem;
  line-height:1.2rem;
  font-weight:400;
  letter-spacing: 1px;

  color:rgba(255,255,255,1);
}


.section-header-split-regular-left {

}


.container-ov-hero-scene {  
  width:100%; 
  height:100%;
  
  display:flex;flex-direction: column;
  justify-content: space-between;
}

.coh-content-header {
  margin-top:2rem;
}

.coh-content-image {
  width:100%;
  height:65%;

  overflow: hidden;
}

.coh-content-image img {
  width:auto;height:90%;
  display:block;
}

.section-header-split-regular-left h1 {
  padding:0;margin:0;
  font-size:2vw;
  line-height:2.3vw;
  font-weight:400;

  color:rgba(255,255,255,1);

  text-align:center;
  text-shadow: 4px 4px 6px rgba(35, 35, 35, 1);
}

.section-header-split-regular-left h2 {
  padding:0;margin:0;
  font-size:2vw;
  line-height:2.3vw;
  font-weight:400;

  color:rgba(255,255,255,1);

  text-align:center;
  text-shadow: 4px 4px 6px rgba(35, 35, 35, 1);
}

/*
* Content 
*/

.content-container {
  padding:1.5rem 1rem;
  height:calc(100% - 3rem);
}

.content-container-ov-flex {
  width:100%; height:100%;
  display:flex;
  align-items:center; justify-content: center;
}

.content-text {
  padding-left:25px;
  height:80%;
  overflow-y: auto;

  display:flex; 
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.content-text-no-height {
  display:flex; flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.container-actions {
  margin:1rem 0;
}

.container-ov-3d-grid{
  position:absolute;bottom:-30px;
}

.content-infographic {
  margin-top:2rem;
  width:100%;

  display:flex;
  align-items: center;justify-content: center;
}

.content-infographics-typy-konstrukcji img {
  width:100%; max-width:700px;
  height:auto;

  display:block;
}

/*
* Content custom grids
*/

/*
* Grid - system konstrukcji
*/

.content-infographics-systemy-konstrukcji{
  min-height: 450px;
}

/* grid */
.grid-isk{
  width: clamp(200px, 18vw, 450px);
  display: grid;
  gap: 18px;

  /* 2 columns */
  grid-template-columns: 2fr 1fr;

  /* 2 rows */
  grid-template-rows: auto auto;

  grid-template-areas:
    "a b"
    "c d";
}

/* areas */
.grid-isk .isk-1{ grid-area: a; }
.grid-isk .isk-2{ grid-area: b; }
.grid-isk .isk-3{ grid-area: c; }
.grid-isk .isk-4{ grid-area: d; }

.grid-isk > div{
  /*background: #d9d9d9;
  border: 1px solid #555;*/
  display: grid;
  place-items: center;
}

/* squares: make 2/3/4 same size */
.grid-isk .isk-2,
.grid-isk .isk-3,
.grid-isk .isk-4{
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* make 1 a bigger square */
.grid-isk .isk-1{
  aspect-ratio: 1 / 1;
  width: 100%;
}

.img-isk-50{
  width: 90%;
  height: 90%;

  border:5px solid var(--col-primary-green);
  
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;

  background-color: var(--col-primary-green);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;

  -webkit-box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
  box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
}

.img-isk-35{
  width: 75%;
  height: 75%;

  border:5px solid var(--col-primary-green);
  
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;

  background-color: var(--col-primary-green);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;

  -webkit-box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
  box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
}

.img-isk-30{
  width: 80%;
  height: 80%;

  border:5px solid var(--col-primary-green);
  
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;

  background-color: var(--col-primary-green);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;

  -webkit-box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
  box-shadow: 0px 0px 10px -1px rgba(66, 68, 90, 1);
}

.img-isk-1-bg {
  background-image: url('../../img/img-isk-1.jpg');
}

.img-isk-2-bg {
  background-image: url('../../img/img-isk-2.jpg');
}

.img-isk-3-bg {
  background-image: url('../../img/img-isk-3.jpg');
}

.img-isk-4-bg {
  background-image: url('../../img/img-isk-3.jpg');
}


/*
* Grid - zalety naszego systemu
*/

/* container takes available space */
.container-zns{
  width: 100%;
  height: 60vh;
  min-height: 420px; /* optional */
}

/* MAIN GRID */
.grid-zns{
  width: 100%;
  height: 100%;
  padding: 14px;
  box-sizing: border-box;

  display: grid;
  gap: 18px;

  /* thin | wide | wide | thin  (middle row needs this) */
  grid-template-columns: clamp(60px, 10%, 120px) 1fr 1fr clamp(60px, 10%, 120px);

  /* top | middle | bottom */
  grid-template-rows: minmax(70px, 18%) 1fr minmax(70px, 18%);

  /* bottom row becomes one full-width wrapper so it can be 50/50 inside */
  grid-template-areas:
    "tleft  tleft   tright tright"
    "mleft  mcenter mcenter mright"
    "bbot   bbot    bbot   bbot";

  min-width: 0;
  min-height: 0;
}

/* tiles */
.zns-cell{
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

/* place items */
.zns-top-left   { 
  grid-area: tleft; 

  display:flex; justify-content: center;
}
.zns-top-right  { 
  grid-area: tright; 
  display:flex; justify-content: center;
}

.zns-mid-left   { grid-area: mleft; }
.zns-mid-center { grid-area: mcenter; }
.zns-mid-right  { grid-area: mright; }

/* BOTTOM WRAPPER: 2 equal halves */
.zns-bottom{
  grid-area: bbot;

  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 18px;

  min-width: 0;
  min-height: 0;
}

/* image center */
.container-main-image-zns{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* (was justify-self) */
}

.cmi-zns{
  max-width: 80%;
  height: auto;
  display: block;
}


/*
* Texts
*/

.text-paragraph {
  margin:0.5rem 0;
}

.text-hero {
  font-size:2rem;
  line-height:2.4rem;
  font-weight:300;

  color:rgba(255,255,255,0.9);
}

.text-bold {
  font-size: clamp(18px, min(2vw, 3.8vh), 24px);
  line-height:clamp(20px, min(2.2vw, 4.0vh), 26px);
  font-weight:500;

}


.text-regular {
  /*
  font-size:1.2rem;
  line-height:1.2rem;
  */
  /*
  font-size: clamp(16px, min(2vw, 3.8vh), 20px);
  line-height:clamp(18px, min(2.2vw, 4.0vh), 22px);
  font-weight:300;
  */

  color:rgba(255,255,255,0.9);
}

.text-semi-small {
  font-size:1rem;
  line-height:1.2rem;
  font-weight:300;

  color:rgba(255,255,255,0.9);
}

.container-ov-content {
  width:12vw;min-width:180px; max-width:190px;
  height:auto;
  position:absolute; z-index:9999;
  bottom:50px; left:-190px;
}

.container-ov-content-right {
  width:15vw;min-width:220px;
  height:auto;
  position:absolute; bottom:-3px; right:-80px;
}

.container-ov-content img{
  max-width:100%; height:auto;
  display:block;
}

.container-ov-content-right img{
  max-width:100%; height:auto;
  display:block;
}


.text-primary-blue {
  color:var(--col-primary-blue);
}

.text-primary-green {
  color:var(--col-primary-green);
}

.text-secondary-blue {
  color:var(--col-secondary-blue)
}

.text-secondary-green {
  color:var(--col-secondary-green);
}

.text-cw-90-kompozyt{
  position:absolute;top:40%;left:-80px;

  font-size:1.4rem;
  line-height: 1.6rem;

  color:rgba(255,255,255,0.9);

  transform: rotate(-90deg);  /* 90° counter-clockwise */
  transform-origin: center;   /* or: top left, etc. */
}

/*
* Backgrounds for sections
*/

.split-section-blue {
  background: #004A99;
  background: linear-gradient(152deg,rgba(0, 74, 153, 1) 37%, rgba(14, 50, 87, 1) 100%);
}

.split-section-green {
  background: #0E7C0E;
  background: linear-gradient(152deg, rgba(14, 124, 14, 1) 37%, rgba(7, 69, 7, 1) 100%);
}

.section-bg-carousel {
  background-image: url('../../img/bg-img-carousel-dark.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section-bg-bubbles-1 {
  background-image: url('../../img/bg-bubbles-1.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: left center;
}

.section-bg-abstract-glyph-1 {
  background-image: url('../../img/img-bg-abstract-sign-1.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

/*
.section-bg-o-firmie { 
  background-image: url('../../img/img-bg-o-firmie.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}
*/

.section-bg-home-1 {
  background-image: url('../../img/img-bg-home-1.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section-bg-home-2 {
  background-image: url('../../img/img-bg-home-2.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section-bg-home-3 {
  background-image: url('../../img/img-bg-home-3.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section-bg-home-4 {
  background-image: url('../../img/img-bg-home-4.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}


.section-bg-kompozyt-1 {
  background-image: url('../../img/img-bg-kompozyt-1.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section-bg-kompozyt-2 {
  background-image: url('../../img/img-bg-kompozyt-2.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section-bg-kontakt-1 {
  background-image: url('../../img/img-bg-kontakt-1.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}


.section-bg-typy-konstrukcji {
  /*
  background-image: url('../../img/bg-img-typy-konstrukcji.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  */
}



/*
* Boxes
*/

/*
* Info box
*/

.box-info-1 {
  max-width:450px;
}

.box-info-1-title {
  display:flex; align-items: center;
}

.bit-1-icon {
  margin-right:0.6rem;

  width:2.3rem;height:2.3rem;

  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;

  background-color: var(--col-primary-green);
}

.bit-1-title {
  flex:0 0 70%;
}

.box-info-1-text {
  margin:0.6rem auto 0 auto;
  width:80%;

  font-size:1.2rem;
  line-height: 1.2rem;
  font-weight: 300;
}



/*
* Info box - 2
*/
.container-info-2-imagebox{
  --width:clamp(350px, 40vw, 650px);
  --height:clamp(290px, 12vw, 350px);

  margin:0.5rem;
  
  min-height:330px;

  position:relative;

  border-radius: 15px;
  border:3px solid var(--col-primary-green);
  background-color: var(--col-primary-blue);
}


.cii-2-title {
  --fontSize:clamp(0.9rem, 1.5vw, 1.1rem);

  padding:0.5rem 1rem;
  font-size:min(var(--fontSize));

  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
}

.cii-2-title-left {
  margin-right:auto;
  max-width: 65%;
  min-height:1.2rem;

  position:relative; top:-15px; left:-15px;
  
  color:rgba(255,255,255,1);

  background-color:var(--col-primary-green);
  
}

.cii-2-title-right {
  margin-left:auto;
  max-width: 65%;
  min-height:1.2rem;

  position:relative; top:-15px; right:-15px;
  
  color:rgba(255,255,255,1);

  background-color:var(--col-primary-green);
  
}


.cii-2-image-container {
  width:100%; height:40%;
  
  position:relative;

  
  border-radius: 15px 15px 0 0;

  -webkit-box-shadow: 0px 8px 15px 0px rgba(66, 68, 90, 0.2);
  -moz-box-shadow: 0px 8px 15px 0px rgba(66, 68, 90, 0.2);
  box-shadow: 0px 8px 15px 0px rgba(66, 68, 90, 0.2);
}

.cii-2-content-container {
  width:100%; height:60%;
}

.cii-2-content {
  padding:1rem;
  width:calc(100% - 2rem); 
  height:calc(100% - 4rem); max-height:calc(100% - 4rem); overflow-y: auto;

  --fontSize:clamp(0.8rem, 1.3vw, 1rem);

  font-size:min(var(--fontSize));
  font-weight:300;
}


.cii-2-image-container-overlay-1 {
  background-image: url('../../img/img-korz-1.jpg');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.cii-2-image-container-overlay-2 {
  background-image: url('../../img/img-korz-2.jpg');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}


.cii-2-image-container-overlay-3 {
  background-image: url('../../img/img-korz-3.jpg');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.cii-2-image-container-overlay-4 {
  background-image: url('../../img/img-korz-4.jpg');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

/*
* Hero image box
*/

.container-hero-image-1 {
  width:100%;
  height:100%;min-height:550px;

  position:relative;
  display:flex;align-items: center;justify-content: center;
}

.container-hero-image-1-image-container {
  width:100%; max-width:18vw;
  height:100%; max-height:22vw;

  border:3px solid var(--col-primary-blue);
  border-bottom-left-radius: 35px;
  border-top-right-radius: 35px;

  background:#000;
}

.container-hero-sub-image-1-image-container {
  width:60%; max-width:10vw;
  height:60%; max-height:13vw;

  position:absolute;right:0;top:10%;

  border:3px solid var(--col-primary-blue);
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;

  background:#e1e1e1;
}

.background-image-company-1 {
  background-image: url('../../img/img-company-1.jpg');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

/*
* Image Info box
*/
.container-info-1-imagebox{
  
  --width:clamp(350px, 40vw, 650px);
  --height:clamp(290px, 12vw, 350px);

  margin:1rem 0;
  padding:24px;

  width:min(var(--width));
  height:min(var(--height));

  position:relative;

  border-radius: 15px;
  border:3px solid var(--col-primary-green);
  background-color: var(--col-primary-blue);
}

.ci-1-img-title {
  --fontSize:clamp(0.9rem, 1.5vw, 1.1rem);

  padding:0.5rem 1rem;
  font-size:min(var(--fontSize));

  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
}

.ci-1-img-title-left {
  margin-right:auto;
  max-width: 65%;
  height:1.2rem;

  position:relative; top:-35px; left:-35px;
  
  background-color:var(--col-primary-green);
  
}

.ci-1-img-title-right {
  margin-left:auto;
  max-width: 65%;
  height:1.2rem;

  position:relative; top:-35px; right:-35px;
  
  background-color:var(--col-primary-green);
  
}

.ci-1-img-content {
  --fontSize:clamp(0.8rem, 1.3vw, 1rem);

  padding:1rem;
  max-width:72%;
  height:70%; overflow-y: auto;

  font-size:min(var(--fontSize));
  font-weight:300;
}

/* floating image */
.ci-1-img-container-float-image-right{
  --height:clamp(200px, 12vw, 250px);
  --bottom:clamp(80px, 20vw, 50px);

  --borderWidth:clamp(3px, 3vw, 5px);

  width:auto;
  height:min(var(--height));
  aspect-ratio: 18/24;

  position:absolute;
  right:-50px;
  bottom:min(var(--bottom));

  
  border:min(var(--borderWidth)) solid var(--col-primary-blue);

  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;

  -webkit-box-shadow: -3px 3px 15px 1px rgb(0,0, 0,0.3);
  -moz-box-shadow: -3px 3px 15px 1px rgb(0,0, 0,0.3);
  box-shadow: -3px 3px 15px 1px rgb(0,0, 0,0.3);
}

.ci-1-img-container-float-image-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
}

.ci-1-img-container-float-image-left{
  --height:clamp(200px, 12vw, 250px);
  --bottom:clamp(80px, 20vw, 50px);

  --borderWidth:clamp(3px, 3vw, 5px);

  width:auto;
  height:min(var(--height));
  aspect-ratio: 18/24;

  position:absolute;
  left:-50px;
  bottom:min(var(--bottom));

  
  border:min(var(--borderWidth)) solid var(--col-primary-blue);

  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;

  -webkit-box-shadow: -3px 3px 15px 1px rgb(0,0, 0,0.3);
  -moz-box-shadow: -3px 3px 15px 1px rgb(0,0, 0,0.3);
  box-shadow: -3px 3px 15px 1px rgb(0,0, 0,0.3);
}

.ci-1-img-container-float-image-left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
}

/*
* List points #1
*/
.list-points-1 {
  width:100%; 
  height:100%; overflow-y: auto;

  display:flex;flex-direction:row;flex-wrap:wrap;
}

.list-points-1-item {
  max-width:450px;
  display:flex; flex-direction:row;
  align-items: flex-start;
  justify-content: flex-start;
}

.list-point-image {
  --width: clamp(80px, 10vw, 100px);
  
  padding:1rem;
  width:min(var(--width));
  
  /*background-color:var(--col-primary-green);*/
}

.list-point-content {
  padding:1rem;
  flex:0 0 70%;
}

.list-point-image-img {
  width:100%; height:auto;
  display:block;

  border:3px solid var(--col-complimentary-green);
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.lpc-title {
  font-size:1.2rem;
  font-weight:600;
  color:rgba(255,255,255,1);
}

.lpc-text {

  font-size:1rem;
  font-weight:300;
  color:rgba(255,255,255,0.9);
}

@media screen and (max-width:1450px){
  .list-points-1 {
    margin:auto;
    height:75vh;overflow-y: auto;
    width:80%;
  }
}

@media screen and (max-width:1023px){
  .list-points-1 {
    margin:auto;
    height:auto;
    width:100%;
    
  }

  .content-text {
    overflow-y: visible;
  }
}

/*
* Particular sections styles
*/

/* #quote section */
.container-quote {
  width:100%;
  height:100%;

  display:flex;
  flex-direction: column;
}

.text-quote-glyph {
  font-size:3rem;
  line-height:3.2rem;
}

.text-quote-regular {
  font-size:3rem;
  line-height:3.2rem;
}

.container-float-quote-left {
  width:50px;height:50px;
  position:absolute;top:0;left:-80px;
}

.container-float-quote-right {
  width:50px;height:50px;
  position:absolute;bottom:0;right:-80px;
}

.container-float-quote-left svg,
.container-float-quote-right svg 
{
  width:100%;height:auto;
  display:block;
}

.container-subquote {
  margin:3rem auto 0 auto;
  width:100%;

  display:flex;
  justify-content: center;
}

.subquote-text {
  padding-top:1rem;
  padding-bottom:1rem;
  max-width:60%;

  font-size:clamp(18px, 1.8vw, 20px);
  color:rgba(255,255,255,0.85);
  text-align:center;

  border-top:1px solid rgba(255,255,255,0.2);
  border-bottom:1px solid rgba(255,255,255,0.2);
}

.word-quote {
  font-weight:600;
  color:rgba(255,255,255,1);

  text-shadow:0px 0px 5px #000;
}



.wrapper-gm-outer {
  width:100%;height:auto;
  display:flex;align-items: center;justify-content: center;
}

.wrapper-gm {
  width:80%;height:80%;
  /*display:flex;align-items: center;justify-content: center;*/
}

.embed-map-frame {
  width:100%!important;
  height:auto!important;
  min-height:450px!important;

  filter: grayscale(70%) contrast(90%);

  border:1px solid rgba(255,255,255,0.2);
}

/*
* Contact form section
*/

.container-contact-form {

}

.ccf-row {
  display:flex; justify-content: space-around;
}

.ccf-item {
  width:25%;
  display: flex;
  flex-direction: column;
}

/*
* Showcase for typy konstrukcji
*/ 

.container-tp-showcase {

}

.ctss-wrapper-content {
  
}

.ctss-header {
  padding:clamp(0.5rem, 1vw, 0.8rem);
  margin-bottom:1rem;

  width:100%;
  min-height:80px;

  border-bottom: 1px solid rgba(100,100,100,1);
  /*box-shadow: 0px 10px 25px rgba(0,0,0,0.5);*/
  
  /*
  border:1px solid rgba(100,100,100,1);
  background:rgba(80,80,80,1);
  */
}

.container-ctss-header {
  width:100%;
  height:100%;

  display:flex;
  align-items: center;
}

.ctss-header .icon-container {
  margin-right:1rem;
  width:clamp(1.6rem, 2.5vw, 3rem);
  height: clamp(1.6rem, 2.5vw, 3rem);

  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;

  background:var(--col-primary-green);
}

.ctss-header .icon img {
  width:100%; height:auto;
  display:block;
}

.ctss-header #typeCategoryName{
  padding:0.3rem;

 
}


.ctss-header #typeCategorySubtitle {
  padding:0.3rem;

}

.ctss-content {
  min-height:550px;

  display:flex; 
  justify-content: space-between;
}


.ctss-col-info-item {
  margin:1rem 0;
  padding:0.5rem;
  width:calc(30% - 2rem);
  height:auto;
  min-height:100%;

  position:relative;

  border:1px solid rgba(100,100,100,1);
  background:rgba(80,80,80,1);
}


.ctss-col-info-actions {
  position:absolute;
  right:5px;top:5px;
}


.ctss-info-header {
  height:150px;
}

.container-basic-data-rows {
  margin:auto;
  max-width:95%;
}

.container-basic-data-rows > div:nth-child(odd) {
  padding:0.2rem;
  line-height:1.6rem;
  background:rgba(0, 0, 0, 0.05);
}

.container-basic-data-rows > div:nth-child(even) {
  padding:0.2rem;
  line-height:1.6rem;
  background:rgba(255, 255, 255, 0.08);
}

.ct-stage-normal-image, 
.ct-stage-tech-image
{
  width:100%;
  height:100%;

  position:relative;

  display:flex;align-items: center;justify-self: center;
}

.ct-stage-normal-image img, 
.ct-stage-tech-image img
{
  width:90%;
  height:auto;

  display:block;
}

.csi-flot-container {
  position:absolute;
  bottom:10px;
  right:10px;
}

.ctss-content #typeBasicData > div  {

}

.ctss-content #typeBasicData > div > div:nth-child(1)  {
  font-size:clamp(14px, 1.2vw, 18px);
  font-weight:500;
}

.ctss-content #typeBasicData > div > div:nth-child(2)  {
  font-size:clamp(14px, 1.2vw, 18px);
  
}

.ctss-content #typeDescription {
  height:200px;
  font-size:clamp(14px, 1.2vw, 18px);
}


/*
* Kontakt section - switching off sections address underline
*/

/* Remove underline from any auto-linked content on iOS/Safari */
.itgc-1-text-container a,
.itgc-1-text-container a:link,
.itgc-1-text-container a:visited,
.itgc-1-text-container a:hover,
.itgc-1-text-container a:active {
  text-decoration: none !important;
  color: inherit !important;
}

/* iOS Safari sometimes uses a special attribute for detected links */
.itgc-1-text-container a[x-apple-data-detectors],
.itgc-1-text-container a[x-apple-data-detectors]:link,
.itgc-1-text-container a[x-apple-data-detectors]:visited,
.itgc-1-text-container a[x-apple-data-detectors]:hover,
.itgc-1-text-container a[x-apple-data-detectors]:active {
  text-decoration: none !important;
  color: inherit !important;
}


/*
* Infographic systemy konstrukcji
* MOBILE version breakpoint: 1023px
* (CSS-only changes, layout kept the same idea: 2 columns on desktop, stacked on mobile)
*
* Your current code is kept, only enhanced with @media (max-width: 1023px)
*/

:root{
  /* Card + typography */
  --bg: #f3f5f8;
  --card: #ffffff;
  --text: #20242c;
  --muted: #7b8496;

  /* Only these colors */
  --green: #2db24a;
  --blue:  #0a4aa6;

  /* Bullet size */
  --dotSize: clamp(24px, 3vw, 48px);

  /* Arc width (horizontal swing) */
  --arc: clamp(14px, 5vw, 56px);

  /* Base indent for bullets */
  --indent: clamp(24px, 4vw, 40px);

  /* Left placeholder width */
  --leftCol: clamp(170px, 22vw, 240px);

  /* Dynamic vertical spacing */
  --gap: clamp(10px, 1.2vw, 18px);
}

.card{
  padding: 0;
  margin: auto;
  height: 100%;
  min-height: 50vh;
  width: min(980px, 100%);
  max-width: 80%;
}

/* Layout (desktop) */
.layout{
  min-height: 50vh;
  display: grid;
  grid-template-columns: var(--leftCol) 1fr;
  gap: clamp(16px, 3vw, 34px);
  align-items: stretch;
}

/* LEFT */
.brand{
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: start;
  min-height: 100%;
}

.brand__logo{
  width: 15vw;
  max-height: 280px;
 
  display: grid;
  place-items: center;
  color: rgba(40, 50, 70, .55);
  font-weight: 700;
  letter-spacing: .3px;
  user-select: none;
}

.brand__caption{
  margin: 0;
  width: 100%;
  color: var(--muted);
  font-size: clamp(13px, 1.6vw, 24px);
  line-height: 1.4;
  text-align: center;
}

/* RIGHT: steps */
.steps{
  position: relative;
  display: grid;
  padding-left: var(--indent);

  height: 100%;
  min-height: 100%;

  align-content: space-between;
  justify-items: start;
}

.step{
  --shift: 0px;
  position: relative;
  min-height: var(--dotSize);
  padding-left: calc(var(--indent) + var(--shift));
  display: grid;
  align-content: center;
  gap:0;
}

/* Arc offsets (5 items) */
.step:nth-child(1){ --shift: calc(var(--arc) * 0.05); }
.step:nth-child(2){ --shift: calc(var(--arc) * 0.55); }
.step:nth-child(3){ --shift: calc(var(--arc) * 1.00); }
.step:nth-child(4){ --shift: calc(var(--arc) * 0.55); }
.step:nth-child(5){ --shift: calc(var(--arc) * 0.05); }

/* Bullet (circles only) */
.step__dot{
  position: absolute;
  left: calc(-1 * var(--indent) + var(--shift));
  top: 50%;
  transform: translateY(-50%);
  width: var(--dotSize);
  height: var(--dotSize);
  border-radius: 999px;

  /* keep your site variables; fallback to our palette */
  background: var(--col-primary-blue, var(--blue));
  border: clamp(1px, 0.3vw, 2px) solid var(--col-primary-green, var(--green));

  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 850;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: .45px;

  z-index: 2;
  isolation: isolate;
}

.step__title{
  margin: 0;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 800;
  line-height: 1.2;
  color:var(--col-primary-green);
}
.step__text{
  margin: 0;
  color: var(--muted);
  font-size: clamp(12.5px, 1.5vw, 16px);
  line-height: 1.45;
  max-width: 54ch;
}


.mhi-image {
  display:flex;justify-content: flex-end;
}

/* -----------------------------------------
   MOBILE / TABLET: <= 1023px
   CSS-only, stacks brand above steps and
   makes the timeline compact + readable.
------------------------------------------ */
@media (max-width: 1023px){

  .content-infographics-systemy-konstrukcji{
    margin: auto;
    max-width: 80%;
  }

  /* card should breathe on mobile */
  .card{
    max-width: 100%;
    min-height: 0;
  }

  /* stack */
  .layout{
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
    align-items: start;
  }

  /* center brand block */
  .brand{
    justify-items: center;
    text-align: center;
    align-content: center;
    min-height: auto;
  }

  /* logo scales down nicely */
  .brand__logo{
    width: clamp(84px, 24vw, 240px);
    max-height: none;
  }

  .brand__caption{
    font-size: clamp(13px, 3.4vw, 24px);
    max-width: 46ch;
  }

  /* timeline becomes content-driven (no full-height distribution) */
  .steps{
    margin: auto;
    width: 50%;
    max-width: 380px;

    height: auto;
    min-height: 0;
    align-content: start;
    gap: clamp(12px, 2.6vw, 18px);
    padding-left: clamp(26px, 6vw, 46px);
  }

  /* ---- REMOVE ARC ON MOBILE ----
     Force all items to be in a straight vertical line.
  */
  :root{
    --arc: 0px; /* disables your nth-child arc offsets */
    --indent: clamp(26px, 6vw, 46px);
    --dotSize: clamp(26px, 6.2vw, 42px);
  }

  .step{
    --shift: 0px; /* hard override in case anything else sets it */
    padding-left: var(--indent);
  }

  .step__dot{
    left: calc(-1 * var(--indent));
  }

  /* slightly tighter text widths */
  .step__text{
    max-width: 48ch;
  }
}



/* Optional extra-small tuning (keeps it neat on very narrow devices) */
@media (max-width: 520px){
  :root{
    --arc: clamp(4px, 3vw, 14px);
    --indent: clamp(22px, 7vw, 40px);
    --dotSize: clamp(24px, 7vw, 38px);
  }

  .steps{
    gap: 12px;
  }

  .step__title{
    font-size: 16px;
  }
}













@media (max-width: 1023px) {

  .section-split-1,
  .section-full {
    min-height: auto;
    height: auto;
  }

  .container-ov-content,
  .container-ov-content-right {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    min-width: 0;
    margin: 1rem auto 0;
  }

  .container-float-quote-left,
  .container-float-quote-right {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 0;
    right: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    transform: translateX(-50%);
  }

  .container-float-quote-left {
    top: -8px;
  }

  .container-float-quote-right {
    bottom: -8px;
  }
}


@media screen and (max-width: 1023px) {

    
  /*
  * Headers
  */

  .section-header-regular-1 {
    padding:0;
  }

  .shr-1-title-wrapper {
    display:flex; align-items: center;
  }

  .shr-1-subtitle-wrapper {
    padding-left:0;
  }

  .shr1-img {
    height:50px;
    display:block;
  }

  .shr1-img img {
    height:100%; width:auto;
  }

  .shr-1-title {
    position:relative; left:-25px; top:12px;
  }

  .shr-1-title h1 {
    padding:0;margin:0;
    font-size:2rem;
    line-height:2rem;
    font-weight:800;
    letter-spacing: 1px;

    color:rgba(255,255,255,1);

    text-shadow:
    -5px -5px 0 #323232,  0px -5px 0 #323232,  5px -5px 0 #323232,
    -5px  0px 0 #323232,                      5px  0px 0 #323232,
    -5px  5px 0 #323232,  0px  5px 0 #323232,  5px  5px 0 #323232;
  }

  .shr-1-subtitle-wrapper h2 {
    padding:0;margin:0;
    font-size:0.8rem;
    line-height:1.2rem;
    font-weight:400;
    letter-spacing: 1px;

    color:rgba(255,255,255,1);
  }


  .section-header-split-regular-left {

  }

  .section-header-split-regular-left h1 {
    padding:0;margin:0;
    font-size:1.4rem;
    line-height:1.5rem;
    font-weight:400;

    color:rgba(255,255,255,1);

    text-shadow: 4px 4px 6px rgba(35, 35, 35, 1);
  }



    /*
    * Content 
    */

    .content-container {
      padding:0;
    }


    .content-text {
      padding-left:0;
    }

    .container-actions {
      margin:0;
    }

    .container-ov-3d-grid{
      position:absolute;
      bottom:-50px;
      left:50%;
      transform: translateX(-50%);
      max-width: 100vw;
    }

    .container-ov-3d-grid img {
      width:120%;
    }

    .content-infographic {
      width:100%;

      display:flex;
      align-items: center;justify-content: center;
    }

    .content-infographics-typy-konstrukcji img {

      width:100%; max-width:550px;
      height:auto;

      display:block;
    }


    /* #quote section */
    .container-quote {
      margin:1rem 0;
      width:100%;
      height:100%;min-height:270px;
      display:flex;flex-direction: column;

      justify-content: flex-start!important;

      color:rgba(255,255,255,1);
    }

    .text-quote-glyph {
      font-size:1.5rem;
      line-height:2.2rem;
    }

    .text-quote-regular {
      font-size:2rem;
      line-height:2.2rem;
    }

    .container-float-quote-left {
      width:30px;height:30px;
      position:absolute;top:0;left:25px;
    }

    .container-float-quote-right {
      width:30px;height:30px;
      position:absolute;bottom:0;right:25;
      margin-left:auto;
    }

    .container-float-quote-left svg,
    .container-float-quote-right svg 
    {
      width:100%;height:auto;
      display:block;
    }


    .ci-1-img-title-left {
      max-width:unset;
    }

    .ci-1-img-content {
      font-size:1rem;
      color:rgba(255,255,255,0.9);
    }

    /*
    * Typy konstrukcji
    */

    .icon {
      width:2rem!important;height:2rem!important;

      border-bottom-right-radius: 10px!important;
      border-top-left-radius: 10px!important;
    }

    #typeCategoryName {
      font-size:1.3rem;
      color:rgba(255,255,255,1);
    }

    #typeCategorySubtitle {
      font-size:1.2rem;
      color:rgba(255,255,255,1);
    }

    .section-bg-abstract-glyph-1 {
      margin:1.5rem 0;
      min-height:300px!important;
    }
}

@media screen and (max-width:1023px){

  .section-bg-abstract-glyph-1 {
    margin:auto;
    width:90%;
  }

  .content-text {
    height:unset!important;
  }
}

@media screen and (max-width:730px){
  .ci-1-img-container-float-image-left,
  .ci-1-img-container-float-image-right
  {
    display:none!important;
  }

  .ci-1-img-content {
    max-width:unset;
    height:auto!important;

    font-size:1rem;
    color:rgba(255,255,255,0.9);
  }

  .ci-1-img-title {
    color:rgba(255,255,255,1);
  }

  .content-text {
    height:unset;
    overflow-y: visible;
  }
}

@media screen and (max-width:660px){
  .container-float-quote-right svg { display:none!important; }
  .container-float-quote-left svg { display:none!important; }
}

@media screen and (max-width:520px){

  .list-points-1 {
    overflow-y: visible;
  }

  .list-points-1-item {
    width:100%;
    flex-direction: column;
  }

  .lpc-title { text-align:center; }
  .lpc-text  { text-align:center; }

  .grid-info-1-row-cell-1,
  .grid-info-1-row-cell-2
  { width:100%; }

  .shr1-img {
    height:40px;
  }

  .shr-1-title {
    left:-15px;
    top:8px;
  }

  .shr-1-title h1 {
    padding:0;margin:0;
    font-size:1.3rem;
    line-height:1.1rem;
    font-weight:800;
    letter-spacing: 1px;

    color:var(--col-text-dark-1);

    text-shadow:
    -2px -2px 0 #323232,  0px -2px 0 #323232,  2px -2px 0 #323232,
    -2px  0px 0 #323232,                      2px  0px 0 #323232,
    -2px  2px 0 #323232,  0px  2px 0 #323232,  2px  2px 0 #323232;
  }
}