@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
nav a {text-transform: uppercase;color:#fff}



#home {
  background-color:#bbc0c0;background-image: url("../img/bg.jpg");background-position:center -200px;background-repeat:no-repeat;
}
#main-banner {
  
  background-image: url("../img/trailer.png");
  background-repeat: no-repeat;
  width:80%;
  margin:auto;
  background-position: center bottom;
  background-size:100%;
  color:#fff;
}
.section-title {font-family: "Saira Condensed", sans-serif;font-size:30px;letter-spacing: .2em;font-weight: bold;text-transform: uppercase;}
.section-title-note {}
.section-subtitle {font-weight: bold;letter-spacing: .1em;text-transform: uppercase;text-align: center;}
.wrapper {width:100%;padding:50px 20px;margin:auto;}


#about {color:#fff}

#key-benefits {min-height:810px;background-image: url("../img/bg-layers.png");background-position:center bottom;background-repeat: no-repeat;}
#key-benefits .benefit-card {background-color:rgba(132, 148, 153, 0.3);box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 0.15);}
#key-benefits .benefit-card:hover {background-color:rgba(132, 148, 153, 0.7);}
#key-benefits .benefit-card .title {margin-bottom:10px;font-size:16px;}
#key-benefits .benefit-card .desc {font-size:14px;}


#structure tbody {background-color:#fff}

.color-swatch {border:1px solid #D9D3D3;box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 0.15);}
.spec-table {margin-top:50px;background: #fff;box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 0.15);}
#contact form {background-color: #fff;border:1px solid #eee;box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 0.15);padding:50px;}
header {background-color:#161a1e;z-index:9999}
footer {background:#fff;}
section {}




#application .section-subtitle {margin-bottom:20px;}
.tab-wrapper {width:100%;margin:auto;position:relative;z-index: 999}




/* Main slider sizing */
.mainSwiper {
  width: 100%;
  height: 800px;            /* adjust */
}
.mainSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbs strip sizing */
.thumbsSwiper {
  width: 100%;
  height: 90px;             /* thumbnail strip height */
  margin-top: 12px;
  box-sizing: border-box;
  padding: 8px 0;
}

.thumbsSwiper .swiper-slide {
  width: 120px;             /* force thumbnail width */
  height: 74px;             /* force thumbnail height */
  opacity: 0.55;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
}

.thumbsSwiper .swiper-slide-thumb-active {
  opacity: 1;
  outline: 2px solid #2f7f7a; /* highlight active thumb */
  outline-offset: 2px;
}

.thumbsSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}






    /* Tabs */
    .tabs {
      
      display: grid;
      max-width: 100%;
      grid-template-columns: 1fr;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.08);
      
    }

    .tab {
      position: relative;
      padding: 36px 30px;
      min-height: 160px;
      cursor: pointer;
      border-right: 1px solid rgba(0,0,0,0.08);
      background: #fff;
    }

    .tab:last-child {
      border-right: none;
    }

    .tab-icon {
      width: 52px;
      height: 52px;
      margin-bottom: 18px;
      display: block;
    }

    .tab-text {
      font-weight: 800;
      letter-spacing: 0.06em;
      line-height: 1.1;
    }

    .tab-arrow {
      position: absolute;
      right: 18px;
      bottom: 16px;
      opacity: 0.4;
    }

    /* Selected (green) */
    .tab.active {
      background: #2f7f7a;
      color: #fff;
    }

    .tab.active .tab-icon {
      filter: invert(1);
    }

    .tab.active .tab-arrow {
      opacity: 0.9;
    }

    /* Hover */
    .tab:not(.active):hover {
      background: #f7f7f7;
    }


    /* Slider */
    .slider-wrap {
      max-width: 900px;
      margin: 0 auto;
    }

    .splide__slide img {
      width: 100%;
      height: 480px;
      object-fit: cover;
      display: block;
      margin:auto;
    }


  .slider {
    width:100%;
    margin:auto;
    position:relative;
  }


  .splide {
    width: 100%;
  }

  .splide__slide img {
    width: 100%;
    height: auto; /* or whatever height you want */
    object-fit: cover;
  }




@media (min-width: 1200px) {
  .wrapper {max-width:1200px;margin:auto;}

  .section-subtitle {padding:20px 0;margin-top:20px;}
  #home {background-position:center -200px;}
  #main-banner {
    
    background-position: center right;
    background-size:auto;
  }
  #about .section-title {text-align: left;}
  #main-banner {
    background-image: url("../img/trailer.png");background-position: center right;background-repeat: no-repeat;
    height:700px;
    width:1200px;
    margin:auto;
  }

  #key-benefits {
    background-position:center top;
  }

  .slider {
    margin-top:-100px;
  }



  .splide {
    max-width: 1440px;
    margin: 0 auto;
  }
  .tabs {
    grid-template-columns: repeat(4, 1fr);
    max-width: 980px;
  }

}