.hero-carousel{position: relative; max-height: 100vh;}
.hero-carousel:after{content: ''; position: absolute; left: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(10, 10, 10, 0) 5%, rgba(0, 0, 0, 0.8) 100%); z-index: 1; width: 100%;}
.hero-carousel button.owl-prev{position: absolute; top: 45%; left: 15px; background-color: rgba(0, 0, 0, 0.7) !important; width: 45px; height: 45px; border-radius: 50% !important;}
.hero-carousel button.owl-prev:hover{background-color: rgba(0, 0, 0, 1) !important;}
.hero-carousel button.owl-next{position: absolute; top: 45%; right: 15px; background-color: rgba(0, 0, 0, 0.7) !important; width: 45px; height: 45px; border-radius: 50% !important;}
.hero-carousel button.owl-next:hover{background-color: rgba(0, 0, 0, 1) !important;}
.hero-carousel .before-after-banner-btn{position: absolute; left: 50%; transform: translateX(-50%); bottom: 80px; z-index: 10; display: inline-block;}
.hero-carousel .before-after-banner-btn{position: relative;display: inline-block; width: 264px; height: 50px; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); border-radius: 25px; padding: 8px; color: transparent;}
.hero-carousel .before-after-banner-btn button.show-before{position: absolute; z-index: 2; left: 2px; top: 2px; bottom: 2px; border-radius: 25px; width: 130px; height: auto; background-color: transparent; color: #FDFCFF; transition: 0.4s; text-transform: uppercase; display: flex; justify-content: center; align-items: center; font-weight: 300;}
.hero-carousel .before-after-banner-btn button.show-after{position: absolute; z-index: 2; left: 130px; top: 2px; bottom: 2px; border-radius: 25px; width: 130px; height: auto; background-color: transparent; color: #FDFCFF; transition: 0.4s; text-transform: uppercase; display: flex; justify-content: center; align-items: center; font-weight: 300;}
.hero-carousel .before-after-banner-btn button.active{background-color: rgba(253, 252, 255, 0.8) !important; color: #121212; box-shadow: 4px 0px 4px 0px #7F7F8033; opacity: 1; border: none !important;}
.hero-carousel .owl-carousel, .hero-carousel .owl-carousel .item img{height: 100vh;}
.video-carousel-details, .video-carousel-details video {height: 70vh;object-fit: cover;}
.product-details-for-carousel {min-height: 60vh;}
.sun-into-room-bottom .owl-item .product-details-for-carousel h3 {bottom: -75px;}
.client-area{height: 90vh; position: relative;}
.shop-right{position: relative;}
/*#testimonials{height: 95vh; background: linear-gradient(0deg, #121212 2%, #FDFCFF 80%);}*/
.testi-heading{padding: 80px 0;}
#testimonials iframe{height: 95vh; width: 100%;}
/*.video-wrapper-founder, #yutube-video-founder{height: 85vh;}*/
.video-wrapper-founder img{object-fit: cover;}
.beyond-library-carousel #video-toggle{border: none !important; outline: none !important; box-shadow: none !important; position: absolute; background-color: rgba(18, 18, 18, 0.5)!important; bottom: -54.5px; left: 44%; z-index: 2; width: 45px; height: 45px; border-radius: 50%;}
#testimonials .video-slide img{max-height: 70vh;}
#lighting {height: 350vh;}
#videoModal{background: rgba(0, 0, 0, 0.8); z-index: 999999;}
.left-menu ul li:first-child a{font-size: 13px;}
/*.hero-carousel:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1;}*/

.banner-info h1{text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);}
/*progress bar*/
.custom-dots {
  display: flex;
 background: rgba(18, 18, 18, 0.5); border-radius: 30px; height: 32px; justify-content: center; align-items: center; padding: 22px 30px;
position: absolute;
    border: 0;
    left: 48%;
    z-index: 2; bottom: -54px;
  gap: 8px;
}

.custom-dots .dot {
  width: 10px;
  height: 10px;
  background: #A6A6A6;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-dots .dot.active {
  width: 36px;
  border-radius: 20px;
  background: #A6A6A6;
}

.custom-dots .dot .progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #DAD9D9;
 transition: width linear; /* Needed for animation */
}

.custom-dots .dot .progress.paused {
  animation-play-state: paused;
}
.modal iframe{width: 100%; height: 100%;}
.btn-close {
    
    --bs-btn-close-bg: url('') !important; border: none !important; outline: none !important;}
@keyframes progressAnim {
  from { width: 0%; }
  to { width: 100%; }
}

.lightingg-txt{padding: 120px 0 200px;}
    .lightingg-txt p{padding-top: 80px;}
    .space-area{padding-top: 150px;}

    #lighting .lighting-txt h2, #lighting .lighting-txt p {
      transform: translateY(100px);
      opacity: 0;
    }

   /* body.lock-scroll {
    overflow: hidden;
  }*/


  /* gallery */
  .gallery-wrapperr {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
/*      grid-auto-rows: 200px;*/
      gap: 10px;
      padding: 10px;
      transform: scale(1);
    }

    .gallery div {
      overflow: hidden; height: 32vh;
    }

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

    .gallery .item-big {
      grid-column: span 2;
      grid-row: span 2;
    }
    

    @media (max-width: 768px) {
      .gallery {
        grid-template-columns: repeat(2, 1fr);
      }
    }
#sticky {
  position: sticky;
  position: -webkit-sticky;
  background-image: url('../assets/images/bg-desktop.webp'); background-size: cover; background-position: center; background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.extra,
#wrapper {
  width: 100%;
  margin: auto;
  background-color: #121212; position: relative;
}
/*#wrapper {
  height: 200vh;
}*/
#wrapper:after{content: '';position: absolute;left: 0;top: -1px;width: 100%;height: 200px;background-image: linear-gradient(#121212, transparent);z-index: 1;}
.extra {
  height: 100px;
}
#wrapper .container{min-height: 80vh;}
/*@media (min-height: 768px) {
  #wrapper{
    height: 2000px;
  }
}*/



@media(min-width: 1920px){

#lighting {height: 310vh;}
}
@media(max-width: 1440px){

 #lighting{height: 340vh;}
 .gallery #comparison {padding-bottom: 37vh;}

}
@media(max-width: 1366px){

 #lighting{height: 330vh;}
     .gallery #comparison {padding-bottom: 38vh;}

}