*{margin: 0; padding: 0; box-sizing: border-box;}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@font-face {
    font-family: 'Original';
    src: url('fonts/Original-Thin.woff2') format('woff2'),
        url('fonts/Original-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Original';
    src: url('fonts/Original-Regular.woff2') format('woff2'),
        url('fonts/Original-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Original';
    src: url('fonts/Original-Black.woff2') format('woff2'),
        url('fonts/Original-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Original';
    src: url('fonts/Original-Light.woff2') format('woff2'),
        url('fonts/Original-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Original';
    src: url('fonts/Original-Bold.woff2') format('woff2'),
        url('fonts/Original-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/*common*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


  .loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #121212;
    z-index: 99999;
}

.loader {
    position: relative;
    
}
.loader lottie-player{height: 100vh;}
a, button{transition: 0.4s; text-decoration: none;}
/*img{max-width: 100%;}*/
body {font-family: "DM Sans", sans-serif;}
.none-ul{list-style: none;}
.uppercase{text-transform: uppercase;}
.dark-bg{background: #464d51;}
.z-index{z-index: 2;}
.mobile-visible{display: none;}
.o-hidden{overflow: hidden;}
/*	fonts   */
.original{font-family: 'Original'; font-weight: 300;}

/*	color 	*/
.dark{color: #121212;}
.dark2{color: #3B3C4A;}
.white{color: #FDFCFF;}
.gray{color: rgba(0, 0, 0, 0.5);}
.semibold{font-weight:  500;}
.bold{font-weight:  700;}



/*	font-size 	*/
.common-font{font-size: 20px;}
.common-font2{font-size: 14px;}
.common-font3{font-size: 24px;}
.common-font4{font-size: 28px;}
.common-font5{font-size: 18px;}
.common-font6{font-size: 14px;}
.common-font7{font-size: 12px;}
.header-one{font-size: 40px;}
.header-two{font-size: 60px;}
.line1{line-height: 1;}
.line2{line-height: 1.2;}
.line3{line-height: 1.3;}
.lite{font-weight: 300;}
.lite2{font-weight: 200;}
.common-btn{font-size: 14px; color: #FDFCFF; text-transform: uppercase; padding: 5px 15px; position: relative;}
.common-btn:after{content: ''; position: absolute; left: 0; bottom: 0; right: 0; width: auto; height: 1px; z-index: 1; transition: 0.4s; background: #FDFCFF;}
.common-btn:hover:after{left: 20%; right: 20%; width: auto;}
.common-btn2{font-size: 14px; color: #FDFCFF; text-transform: uppercase; padding: 5px 15px; position: relative;}
.common-btn2:after{content: ''; position: absolute; left: 0; bottom: 0; right: 0; width: auto; height: 1px; z-index: 1; transition: 0.4s; background: #FFD342;}
.common-btn2:hover:after{left: 20%; right: 20%; width: auto;}
.common-btn3{font-size: 14px; color: #121212; text-transform: uppercase; padding: 5px 15px; position: relative;}
.common-btn3:after{content: ''; position: absolute; left: 0; bottom: 0; right: 0; width: auto; height: 1px; z-index: 1; transition: 0.4s; background: #121212;}
.common-btn3:hover:after{left: 20%; right: 20%; width: auto;}



/*	about page*/
.content {
  display: flex;
}

.main {
 width: 60%;
}
.side {
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 40%;
  height: 100vh;
}
header{position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; padding: 20px 50px; background: rgba(255, 255, 255, 1);}
header nav ul li{padding: 0 18px; transition: 0.4s;}
header nav ul li a.common-font, header nav ul li.common-font{font-size: 14px;}
header nav ul li span{margin-left: 8px;}
header.fixed{background: rgba(255, 255, 255, 1);}
header.fixed li, header.fixed li a{color: #121212;}
header.fixed ul{margin-bottom: 0;}
.left-menu ul li:first-child{padding-left: 0;}
.left-menu ul li a{background: #121212;color: #FDFCFF;padding: 8px 12px; border: 1px solid #121212;}
.left-menu ul li a:hover{background: #FDFCFF;color: #121212;}
.right-menu ul li a{position: relative; display: block;}
.right-menu ul li a:after{content: ''; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background-color: #121212; transition: 0.4s;}
.right-menu ul li a:hover:after{width: 100%;}
.side h1{width: 450px;}
.side h1 p{margin-bottom: 2px; line-height: 1.4;}
#hero{position: relative; overflow: hidden;}
#hero video{width: 100%;object-fit: cover; height: 100vh;}
.hero-img img{width: 100%; }
.hero-txt{padding: 50px 0; width: 70%;}
.hero-counter .row{margin-left: 0 !important; margin-right: 0 !important;}
.hero-counter{padding: 15px 50px 100px 0;}
.hero-counter-right label{margin:  15px 0 5px;}
.video-section video{height:  65vh; width: 100%; object-fit: cover;}
.video-section p{position: absolute; top: 10%; left: 50%; transform: translateX(-50%); z-index: 2;}
.team-top{position: relative; width: 700px; padding: 0px 70px 0px;}
.team-top h2{margin-top: 25px;}
.team-top h2 p{margin: 0;}
.team-section{position: relative; padding: 50px 0px 100px;}
.team-slider{margin: 0px 0 50px 0;}
.team-slider img{margin-bottom: 10px;}
.workspace-div-right{padding-top: 80px;}
.workspace-div-right h2{margin: 25px 0 18px;}
.workspace-div-right p{width: 65%; margin-bottom: 15px;}
.workspace-div-right a{ padding: 4px 15px;}
.workspace .row{margin-left: 0 !important; margin-right: 0 !important;}
footer{position: relative;  margin-top: 100px; overflow: hidden; padding: 180px 0 50px; min-height: 100vh; background: radial-gradient(59.37% 20.97% at 54.09% 105.92%, rgba(85, 98, 109, 0.83) 3.85%, rgba(85, 108, 109, 0.83) 33.17%, rgba(85, 108, 109, 0.47) 62.98%, rgba(85, 108, 109, 0.00) 100%), radial-gradient(118.56% 115.06% at 23.5% 124.29%, #556B6B 0%, #BF9736 13.46%, #AC7F39 22.89%, #9F6930 43.27%, #885B2D 49.52%, #624327 59.7%, #37291C 76.77%, rgba(18, 18, 18, 0.00) 100%), #121212;}
#form-area{position: relative; background-color: #121212; padding-top: 120px;}
footer img{position: absolute; bottom: 0; left: 0; width: 100%; height: auto; max-height: 85%;}
.footer-frm{width: 100%; display: block; padding: 7px 6px; font-size: 16px; color: #9D9FA1;border: none; outline: none !important; border-bottom: 1px solid #9D9FA1; margin-bottom: 20px; background: transparent;}
.footer-frm::placeholder { color: #9D9FA1; }
.form{margin-top: 50px;}
.foter-top-right{padding-left: 150px; padding-top: 100px;}
.address{margin-bottom: 20px;}
.social-link ul li a img{width: 20px; position: relative;}
.footer-links{padding: 140px 0;}
.footer-links ul li a, .footer-bottom ul li a{font-size: 14px; text-transform: uppercase; color: #FDFCFF;}
.footer-links ul li a:hover{color: #fff;}
.footer-links-left ul li{padding-right: 25px;}
.footer-links ul li{margin-bottom: 10px;}
.social-link ul li{display: inline-block; padding-left: 5px;}
.back-top p img, .footer-logo img{width: auto; position: relative;}
.footer-bottom-bottom{margin-top: 180px;}
.footer-bottom-top{margin-top: 50px;}
.back-top p{cursor: pointer; display: inline-block;}
.workspace-div-left img{max-width: 100%;}
.banner-info{position: absolute; top: 80%; left: 50%; width: auto; height: auto; transform: translate(-50%,-50%); z-index: 2;  display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0px;}
.div2 div.video-section {width: 100%; margin: 0;}
.video-section video{width: 100%;}
hr{border-bottom: 1px solid #9D9FA1;height: 2px; background-color: #9D9FA1;}

/*faq page*/
.faq-page{background-color: #121212;}
.faq-top{padding: 160px 0 80px;}
.sunroof-tab ul li{width: 33%; text-align: center; border-bottom: 1px solid rgba(18, 18, 18, 0.5); color: #121212 !important;}
.sunroof-tab ul li button{width: 100%; border: none !important; outline: none !important; color: #FDFCFF!important; font-size: 20px; background: transparent !important; text-transform: uppercase;}
.sunroof-tab .nav-link:focus, .sunroof-tab .nav-link:hover, .sunroof-tab ul li button:hover {color: #FDFCFF!important;}
.sunroof-tab ul li button.active{background: radial-gradient(46.89% 71.67% at 50% 105%, rgba(255, 211, 66, 0.5) 0%, rgba(255, 211, 66, 0) 100%) !important /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;}
.accordion-item{border: none !important; border-bottom: 1px solid #787878 !important; border-radius: 0 !important}
.faq-page .accordion-button:not(.collapsed),.faq-page .accordion-collapse.show {color: #FDFCFF!important;box-shadow: none !important;background: rgba(23, 23, 23, 0.5) !important;}
.faq-page .accordion-item{background-color: transparent !important;}
.faq-page .accordion-header{background: #121212; color:#FDFCFF!important;}
.faq-page .accordion-header button{color:#FDFCFF!important;}
.faq-page .accordion-body{ color:rgba(255, 255, 255, 0.5)!important; }
.accordion-button{border: none !important; outline: none !important;}
.tab-pane .accordion-item:last-child{border: none !important; border-bottom: none !important;}
.accordion-item,.accordion-button{font-size: 20px;}
.sunroof-tab .nav{margin-bottom: 70px;}
.more-question{margin-top: 50px;}
.sitebar li{margin: 6px 2px; padding: 0 8px;}
.sitebar li img{width: 18px; transition: 0.4s}
.sitebar li img:hover{scale: 1.1;}
.sitebar {
  position: fixed;
  top: 100px; background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px);
  right: 0;
  z-index: 9999;
  border-left: 2px solid #121212;
  border-image-slice: 1; border-top-left-radius: 15px; border-bottom-left-radius: 15px;
}

.sitebar.sitebar-gray{border-left: 1px solid #121212; background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); background-color: rgba(0, 0, 0, 0.4);}
/*.slide-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}*/
.slide-up {
  opacity: 0;
  transform: translateY(40px);
  animation: slideUp 0.8s ease forwards;
}
.workspace-div-right .slide-up, .team-top .slide-up, .experience-right .slide-up {
  opacity: 0;
  transform: translateY(40px); animation: none;}
  .workspace-div-right .slide-up.slide-up.in-view, .team-top .slide-up.in-view, .experience-right .slide-up.in-view {
    animation: slideUp 0.8s ease forwards;
  }

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Delay classes */
.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

.delay-3 {
  animation-delay: 0.6s;
}

.side h1 div{overflow: hidden;}

/*gallery*/
.gallery-page{background-color: #121212;}
.main-filters{padding-top: 120px;}
.masonry-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 40px 25px;
  margin-bottom: 30px;
}

.masonry-grid.active-grid {
  display: grid;
}

.grid-item {
  overflow: hidden;
 
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.4s ease;
}

.grid-item.show {
  opacity: 1;
  transform: scale(1);
}

.grid-item img {
  width: 100%;
  display: block;
  
}

.main-filters {
  margin-bottom: 20px;
}

.main-filters a, .main-filters h2 {
  font-size: 45px; font-family: 'Original'; font-weight: 300; color: #FDFCFF; background: transparent; border: none !important; outline: none !important; opacity: 1;
}
.main-filters a:hover{opacity: 1;}
/*a.inactive {
  opacity: 0.5;
}*/
a.inactive{ background: linear-gradient(91.29deg, #FDFCFF 0%, #989799 21.06%, #6E6E6E 34.46%, #F9F9F9 40.2%, #ADADAD 50.25%, #383838 68.91%, #FFFFFF 93.32%);
      background-size: 200% auto;
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      animation: gradientMove 2s linear infinite;
    }

    @keyframes gradientMove {
      0% {
        background-position: 0% 50%;
      }
      100% {
        background-position: 100% 50%;
      }
    }
.grid-img{overflow: hidden;}
.grid-item p{margin-top: 12px; margin-bottom: 12px;}
.footer-links-right div{width: 100%;}
.grid-img img{transition: 0.4s;}
.grid-img img:hover{scale: 1.1;}

/*litebox*/
.glightbox-container {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.glightbox-open .glightbox-container {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 991px) {
  .tab-content>.tab-pane {
    display: block;
    opacity: 1;
  }
}
  .gallery-page-main .masonry {
      column-count: 3; /* changed from 3 to 4 */
      column-gap: 25px;
      /*padding: 20px;
      max-width: 1200px;*/
      margin: auto;
    }

    .gallery-page-main .gallery-item {
      display: inline-block;
      margin-bottom: 15px;
      width: 100%;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }

    .gallery-page-main .gallery-item:hover {
      transform: scale(1.02);
    }

    .gallery-page-main .gallery-item img {
      width: 100%;
      display: block;
      height: auto;
    }

    @media (max-width: 1024px) {
      .gallery-page-main .masonry {
        column-count: 3;
      }
    }

    @media (max-width: 768px) {
      .gallery-page-main .masonry {
        column-count: 2;
      }
    }

    @media (max-width: 480px) {
      .gallery-page-main .masonry {
        column-count: 2;
      }
    }

  /* animation   */
  .hero-counter-left img {
  transition: transform 0.8s ease, opacity 0.8s ease;
  will-change: transform; width: 200px;
}

/* Animation class */
.animate-hero-image {
  transform: translateY(535px) scale(9); /* adjust as needed */
  opacity: 1; width: 100vw;
}
#video{cursor: pointer; overflow: hidden;}
#myVideo{transition: opacity 0.8s ease-in-out;}
.accordion-body{font-size: 16px !important; transition: 0.4s;}
.accordion-item button{font-size: 18px !important;}

/*listing*/
.listing{scroll-behavior: smooth; overflow: hidden}
/*.listing section{
  height: 100vh;
}*/
.listing-top{margin: 150px 0 80px;}
.listing-top h1, .listing-top h1 p{line-height: 1; margin-bottom: 5px;}
.product-img img{width: 100%; height: 100vh; object-fit: cover;}
.product-row .col-md-6{padding: 0 7px!important; margin-top: 15px;}
.product-row{padding: 0 7px 25px;}
/*.product-row .col-md-6:nth-child(odd) {
  padding-right: 7px !important;
  margin-top: 15px;
}

.product-row .col-md-6:nth-child(even) {
  padding-left: 7px !important;
  margin-top: 15px;
}*/
.product-info{position: absolute; left: 50px; bottom: 30px; z-index: 2;}
.product-details{position: relative; height: 80vh; overflow: hidden;}
.product-info h2{line-height: 1.6; text-transform: uppercase;}
.product-info a{text-transform: uppercase;padding: 5px 2px;  position: relative;}
.product-info a:after{content: '';position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 1px; z-index: 1; transition: 0.4s; background-color:#FFD342;}
.product-info a:hover:after{;left: 20%; right: 20%;}
.product-details:after{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 35vh; background: linear-gradient(180.23deg, rgba(18, 18, 18, 0) 0.2%, #121212 130.01%); z-index: 1;}
.product-row{margin-top: 15px;}
.filter-button img{display: block; margin: 0 auto 10px;}
.filter-button{font-size: 24px; color: #000; font-weight: 300; cursor: pointer;}
.filter-button.active {font-weight: 500;}
.filter-button.active span{border-bottom: 1px solid #FFD342}
.filter-button span{padding: 5px 15px;}
.one-scroll{margin-top: 15px;}
#product-faq{position: relative; background-color: #121212; margin-top: 15px; padding: 85px 0 20px;}
.product-faq-top{margin-bottom: 35px;}
#product-faq .accordion-item{background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; padding: 10px 0 !important;}
.accordion-button:not(.collapsed), .accordion-collapse.show {color: #FDFCFF !important;background-color: transparent !important;}
.accordion-item button {font-size: 18px !important;background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important;}
#product-faq .accordion-item button{font-family: 'Original'; font-size: 30px !important; font-weight: 300; color: #fff; padding-left: 0 !important;}
#product-faq .accordion-body{padding-left: 0 !important;}
.listing footer{margin-top: 0;}
.more-questions ul li{display: inline-block; padding: 10px;}
.more-questions ul li a{color: #fff; font-weight: 500; font-size: 16px; padding: 5px 10px; text-transform: uppercase;}
.more-questions{margin-top: 35px;}
.product-details-two{padding: 70px 35px;}
.product-details-two h2{margin-bottom: 20px;}
.product-details-two p{line-height: 1.2; width: 70%;}
.product-details-two a{color: #121212; font-weight: 700; font-size: 16px; text-transform: uppercase; padding: 10px 10px 5px;}

/*  product details page */
#product-banner img{width: 100%; height: 100vh; object-fit: cover;}
#details-page-area{position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100vh;
background: linear-gradient(180deg, #121212 0%, #6D5845 24.54%, #7990A5 43.19%, #927962 50.43%, #121212 98%), #121212;

}
.details-page-area{position: absolute;left: 0; bottom: 0; width: 100%; background-color: #121212;}
#product-banner .details-page-area img{width: 16px; height: auto; object-fit: contain; margin-left: 12px}
/*  pop up */
.pop-up{position: fixed; top: -120vh; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; backdrop-filter: blur(4px); z-index: 9999; transition: 0.4s ease;}
.pop-up.open{top: 0vh;}
.pop-up button{border: none !important; outline: none !important; background: transparent !important; color: #121212; padding-top: 20px; margin-bottom: 10px;}
.pop-up-main{padding: 20px; background-color: #fff; width: 515px;}
.pop-up-input{display: block; width: 100%; border: none !important; border-bottom: 1px solid #D0D5DD !important; font-size: 16px; padding: 30px 5px 10px; outline: none !important;}
.pop-up-input::placeholder{color: #9D9FA1;}
.pop-up-main h2{font-size: 40px; font-weight: 600;}
.submit-btn{border: none !important; outline: none; border-bottom: 1px solid #FFD342 !important; font-size: 14px; padding: 35px 15px 10px; text-transform: uppercase; display: inline-block; color: #121212; text-align: center;}
.product-details-page{background-color: #121212;}
.frames ul li{display: inline-block; margin-right: 15px; vertical-align: middle; opacity: 0.8;}
.frames ul li div{display: flex; align-items: center;}
.frames ul li span{width: 17px; height: 17px; border-radius: 50%; margin-right: 10px; display: inline-block;}
.details-page-area{padding-top: 8px;}
.product-details-top-heading{width: 450px;}
.product-details-top-details p{line-height: 1.5; width: 50%; font-weight: 200; opacity: 0.8;}
.product-details-top{padding: 135px 0 60px;}
.similar-product-img{max-height: 100vh; overflow: hidden;}
.similar-product-img img{width: 100%;}
.similar-product{padding: 0 10px;}

.slider-wrapper {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      
    }

    .slider-img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }

    .slider-after {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 50%;
      overflow: hidden;
      transition: width 0.1s;
    }

    .slider-handle {
      position: absolute;
      top: 0;
      left: 50%;
      width: 4px;
      height: 100%;
      background: #fff;
      cursor: ew-resize;
      z-index: 10;
    }

    .slider-handle::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -10px;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background: yellow;
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
    }
    .before-after{position: relative; margin: 300px 0 0; overflow: hidden;}
    .b-f-tab ul li{font-size: 20px; text-transform: uppercase; font-weight: 300; border-bottom: 2px solid #FDFCFF; margin: 0; padding: 5px 12px; cursor: pointer;}
    .b-f-tab ul li.active{font-weight: 500; border-bottom: 2px solid #FFD342;}
    .b-f-tab{margin-top: 20px;}
    .tags-b-f ul li{text-transform: uppercase; font-weight: 300; padding: 4px 12px; margin-right: 6px;}
    .tags-b-f{margin-top: 15px;}
    .b-f-txt{width: 450px; position: absolute; left: 50px; bottom: 0;}
    .b-f-details{height: 100%; padding-left: 50px;}
    .image-one-light,.image-two-light{margin-bottom: 180px;}
    .light-query {padding: 50px 0 150px; background-color: #121212;}
    .light-query a{padding:   15px 2px 5px; display: inline-block; border-bottom:  1px solid #FFD342; margin-bottom:  15px;}
    #beyond-library{position: relative; border-top: 1px solid #121212;}
    .carousel-area-details{position: relative;  padding-top: 135px;}
    .carousel-area-details:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 300px; background-image: linear-gradient(#121212,transparent); z-index: 2;}
    .product-details-corousel{position: relative; background: #121212; display: flex; justify-content: center; align-items: center;}
    /*    .product-details-corousel img{width: 600px !important;}*/
    .product-details-corousel p{position: absolute; bottom: 50px; left: 50px; width: 250px; margin-bottom: 0;}
    .product-details-bottom-1{margin-top: 0px;}
    .product-details-bottom-2, .product-details-bottom-3{margin-top: 125px;}
    .product-details-bottom-3{padding-bottom: 135px;}
    .product-details-bottom-2 p, .product-details-bottom-3 p{width: 450px;}
    .product-details-bottom-3 p{margin: 0 0 0 auto;}
    #schematic{padding: 85px 0 50px; background-color: #FFD342;}
    .schematic-div a {padding: 15px 2px 5px;display: inline-block;border-bottom: 1px solid #121212; color: #121212;}
    .steps{margin: 100px auto 150px;}
    .features .col-md-4{text-align: left; padding-right: 50px;}
    .features .col-md-4 h3, .features .col-md-4 p{font-size: 16px; text-transform: uppercase; color: #121212; }
    .features .col-md-4 h3 span, .features .col-md-4 p span{font-weight: 500;}
    .features .col-md-4 h3{margin-bottom: 20px;}
    .member-details{text-align: left;}
    .team-bottom{ text-align: left; width: 70%; margin-top: 5px;}
    #similar-product .similar-header{margin-bottom: 35px;}

    /*  hero  */
    #hero{position: relative; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('../assets/images/modern-after.webp'); position: relative;}
    #hero:after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1;}
    #hero h1, #hero a{position: relative; z-index: 2;}
    #hero a{display: inline-block; color: #D7CDB8; font-size: 16px; padding: 5px 15px; margin: 10px 20px; border-bottom: 2px solid #FFD342; backdrop-filter: blur(4px); background-color: rgba(255, 211, 66, 0.2);}
    #hero a:hover{background: #FFD342; color: #fff;}
    .carousel-area-details-home{position: relative;}
    .carousel-area-details-home h2, .carousel-area-details-home label{padding-left: 117px;}
    .beyond-library-home-heading{padding: 120px 0 20px 0px;}
    .product-details-page .beyond-library-home-heading{padding: 0px 0 60px 0px; position: relative; z-index: 5;}
/*    #lighting{position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url('../assets/images/home-light.png'); min-height: 100vh;}*/
    #lighting{position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; height: 100%; background: linear-gradient(to bottom,#FDFCFF 0%,#e5dbb9 20%,#f9de5d 40%,#e59d4e 60%, #2d1d11 85%,#0a0a0a 100%);}
    #beyond-library-home{background-color: #FDFCFF;}
    #beyond-library #beyond-library-home{background-color: transparent;}
    .home-lighting-top {padding: 170px 0 0px;}
    .sun-one{margin: 220px 0 270px;}
    .sun-two-img{max-width: 100%;}
    .sun-two-info{width: 470px; margin: 85px auto 0;}
    .sun-two-info h2{margin-bottom: 20px;}
/*    .sun-two .sun-two-info{margin: 70px 100px;}*/
    .sun-three-sun-img{position: absolute; top: 50%; left: 0; width: 100%;}
    .sun-three .sun-three-sun-img{position: absolute; top: -15%; left: 0; width: 100%;}
    .sun-two{margin: 0px; padding-bottom: 200px;}
    .sun-three{padding-bottom: 220px;}
    .space a{margin: 30px 15px 15px; display: inline-block;}
    .space{padding-bottom: 220px;}
    #home-page-gallery-one{position: relative; background-color: #FDFCFF; padding: 7px;}
    #home-page-gallery-one .col-md-4{padding: 0 7px !important;}
    .gal-home-one img{width: 100%;}
    .gal-home-one {margin-bottom: 15px; display: flex; justify-content: center; height: 100%; align-items: center;}
    .gal-home-one p, .gal-home-one h2{width: 75%; margin: 0 auto;}
    #sun-into-room{background-color: #121212;}
    .sun-into-room-top{padding: 120px 0px;}
    .sun-into-room-top h2{width: 450px; margin: 0 auto 80px;}
    .sun-four{position: absolute; left: 70%; top: 170px; transition: 1s; z-index: 1;}
    .sun-four.move{ left:35%; top: 300px;}
    .sun-into-room-top .row .window-room-one{position: relative; z-index: 2;}
    .window-room-one a img{opacity: 0.5; transition: 0.4s;}
    .window-room-one a{cursor: url(../assets/images/cursor.png) 0 0, auto;}
    .window-room-one a:hover img{opacity: 1;}
    .window-details label{display: block; line-height:1.8;}
    .sun-into-room-middle{height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;}
    #trusted{padding: 180px 0 130px;}
    #trusted h2{width:  450px;}
    #trusted p{width:  400px; margin: 0 0 0 auto;}
    .trusted-people{width:  1000px; margin: 80px auto 25px;}
    .trusted-people-info p{color: #1E1E1E; font-size: 17px;}
    .trusted-people-info p span{font-size: 15px; font-weight: 300;}
    .sun-into-room-middle p{font-weight:  200; line-height: 1.4}
    .trusted-people-info{padding: 8px 0 12px;}
    .trusted-people .col-md-3{padding: 0 7px !important;}
    .node{margin-top: 100px;}
    .node ul li{display:  inline-block; margin: 50px 20px 0px;}
    .light-up-top{background-color: #121212; padding: 50px 0 100px;}
    .light-up-btn{height: 100%; display: flex; justify-content: flex-end; align-items: center;}
    .light-up-btn a{margin-left: 35px;}
    .sun-five{position: absolute; top: 40%; left: 42%; z-index: 1; width: 500px;}
    .client-left, .experience-right{width: 75%; margin: 70px;}
    .client-right{position: relative; z-index:  2;}
    .client-left label{font-size: 13px; color: #121212; font-weight: 300; margin-bottom: 30px;}
    .author p{color: #1E1E1E; margin-top: 25px;}
    .client-left a, .experience-right a{color: #121212; margin-top: 4px; display: inline-block;}
    .client-right img{width: 100%;}
    .experience-right h2{width: 300px; text-align: right; margin: 0 0 0 auto;}
    .experience-right a{text-align: right;}
    .our-address{margin-top: 75px;}
    .sun-six{position: absolute; top: 0%; left: 20%; z-index: 1; width: 800px; transition: 0.4s; scale: 0.5;}
    .sun-six.move{scale: 1;}
    .shop-right{position: absolute; z-index: 2; bottom: 0;}
    .toggle-btn{position: relative; background-color: #FDFCFF; border-radius: 50px; overflow: hidden; display:inline-block; margin: 20px 0 60px;}
    /*.toggle-btnc:after{content: 'Founder’s Note'; position: absolute; top: 0; left: 0; background-color: #FDFCFF; padding: 5px 6px; color: #121212; font-size: 16px; border-radius: 50px; border: 1px solid #121212; right: auto; transition: 0.4s; z-index: 2;}
    .toggle-btnc:checked:after{content: 'Instagram'; position: absolute; top: 0; right: 0; background-color: #FDFCFF; padding: 5px 6px; color: #121212; font-size: 16px; border-radius: 50px; border: 1px solid #121212; left: auto; transition: 0.4s; z-index: 2;}*/
    .toggle-btn ul li{padding: 5px 14px; font-size: 16px; display: inline-block; color: #FDFCFF; border: 1px solid #121212; transition: 0.4s; cursor: pointer;}
    .toggle-btn ul li.active{background-color: #FDFCFF; color: #121212; border-radius: 50px;}
    .toggle-btn ul{ background-color:#121212;}
    .vision-div{padding: 140px 0 60px; text-align: center;}
    .video-section{margin-top: 0;}
    #light-up{position: relative; overflow: hidden; margin-top: -7px;}
    .home-page{overflow: hidden;}
    .blog-left a{color: #121212; border-bottom: 1px solid #121212; display: inline-block; margin-top: 15px;}
    .blog-details{width: 400px; margin: 33% 0 0px auto;}

    .blog-left{margin: 70px 35px 0 70px; position: relative; height: 100%;}
    .blog-left label{font-size: 12px; font-weight: 200;}
    .blog-left h3{margin: 15px 0 20px; line-height: 1.3;}
    .blog-author{margin-top: 15px;}
    .space-gallery-div{margin-top: 120px;}
    .space-gallery-div h2{margin-bottom: 20px;}
    .space-gallery-div a{color: #121212;}
    .gallery-carousel{margin-top: 100px;}

  /*  contact page  */
  .contact-page{position: relative; background-color: #121212;}
  .contact-page-top{padding: 135px 0 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
  .address-box label{margin-bottom: 15px;}
  .address-box a.d-block, .address-box p{width: 65%; opacity: 0.5; margin-bottom: 15px;}
  .address-box a{opacity: 0.5;}
  .address-box a:hover{opacity:1;}
  .address-box{min-height: 200px; padding-top: 30px;}
  .contact-page-top h1{width: 300px;}
  .footer-img img{width: 80%;}
  .book-visit{margin-top: 15px;}
  .footer-frm2 {
    width: 48.7%;
    display: inline-block;
    padding: 7px 6px;
    font-size: 16px;
    color: #9D9FA1;
    border: none;
    outline: none !important;
    border-bottom: 1px solid #9D9FA1;
    margin-bottom: 20px;
    background: transparent;}
  .m1{margin-right: 1.5%;}
  .call-back-right button{background: transparent !important; outline: none !important; border: none !important; padding: 5px 20px; margin-top: 8px;}
  .call-back{padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
  .call-back-left h2{opacity: 0.5;}
  .call-back-center{padding-right: 60px;}
  .call-back-right .form{margin: 0;}
  .team{background-color: #FFFFFF; }
  .member-flex{display: flex; justify-content: center; height: 100%; flex-direction: column; padding-left: 50px;}
  .product-details-page #similar-product .similar-header{margin-bottom: 0;}
  .product-details-page #similar-product{padding-top: 80px;}
  .product-img img{transition: 0.4s;}
  .product-img{overflow: hidden;}
  .product-img img:hover{scale: 1.2;}
  #product-faq .accordion-item .accordion-item button { font-size: 20px !important; font-family: "DM Sans", sans-serif;}
  #product-faq .accordion-body .accordion-body{padding-top: 0 !important;}
  #product-faq .accordion-item .accordion-item:last-child{border-bottom: none !important; padding-bottom: 0 !important;}
  #product-faq .accordion-item .accordion-item:last-child .accordion-body{padding-bottom: 0 !important;}
  .accordion-button:not(.collapsed)::after {background-image: url("../assets/images/carrot.svg") !important;}
.accordion-button::after {background-image: url("../assets/images/carrot.svg") !important;}

/*  menu */
 /* Menu Button 1 */
    .menu-btn-1 {
        
        cursor: pointer; width: 75px; color: #121212; 
    }
    .header.open .menu-btn-1 {color: #FDFCFF;}

        .menu-btn-1 span,
        .menu-btn-1 span::before,
        .menu-btn-1 span::after {
            background: #121212;
            border-radius: 3px;
            content: '';
            position: absolute;
            width: 15px;
            height: 2px;         
            margin-top: 9px; 
            -webkit-transition: .3s ease-in-out;
            -moz-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .menu-btn-1 span::before,
        .menu-btn-1 span::after {width: 20px;}
        .menu-btn-1 span{margin-left: 10px;}

        .menu-btn-1 span::before {
            margin-top:-5px;
        }

        .menu-btn-1 span::after {
            margin-top:5px;
        }

        .menu-btn-1.active span {
            background: transparent;
        }

        .menu-btn-1.active span::before {
            margin-top: 0;

            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .menu-btn-1.active span::after {
            margin-top: 0;

            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .main-menu{position: fixed; top: -120vh; left: 0; width: 100%; height: calc(100vh - 60px); background-color: #121212; display: flex; justify-content: center; align-items: center; transition: 0.4s; z-index: 9; padding: 0 75px;}
        .main-menu.open{top: 60px;}
        .menu-center img{max-width: 100%; margin-bottom:  30px;}
        .menu-left ul{text-align: left;}
        .menu-left ul li{margin-bottom: 5px;}
        .menu-left ul li:last-child{margin-top: 30px;}
        .social-links ul{display: flex; text-align: center; justify-content: center; align-items: center;}
        .social-links ul li{display: inline-block; width:  20%; text-align: center;}
        .social-links{padding-top: 50px;}
        .menu-right{display: flex; justify-content: flex-end; align-items: center; height: 100%;}
        .menu-right ul li a{font-weight: 200;}
        .header.open ul li,.header.open ul li a{color: #FDFCFF;} 
        .header.fixed.open,.header.open{background: #121212; color: #FDFCFF;}
        .header.open .menu-btn-1 span::before,.header.open .menu-btn-1 span::after{background: #FDFCFF;}
        .main-menu a{position: relative; display:   inline-block;}
        .main-menu a:after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #FFD342; transition: 0.4s;}
        .main-menu a:hover:after{width: 100%;}
        .grid-img a, .gallery-item a{position: relative;}
        .grid-img a:hover{hover: 1.2;}
        .grid-img a:after, .gallery-item a:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: 0.4s;}
        .grid-img a:hover:after, .gallery-item a:hover:after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); transition: 0.4s;}
        .grid-img a img, .gallery-item a img{transition: 0.4s;}
        .grid-img a:hover img, .gallery-item a:hover img{scale: 1.2;}
        .faq-page .accordion-button::after {background-image: url(../assets/images/carrot.svg) !important;}
        .main-menu .menu-right ul li .common-font3{font-size: 20px;}

        /*  light animation   */
            .image-stack {
          height: 100vh;
          position: relative;
        }

        .image-container {
          position: sticky;
          top: 0;
          height: 100vh;
          width: 100%;
          overflow: hidden;
        }

        .img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 850px;
          transition: opacity 0.3s ease;
        }

        .img1, .img2, .img3 {
          top: 100%;
        }

        .img4 {
          top: 30%;
    /*      transform: translate(-50%, -50%);*/
          opacity: 0;
          z-index: 10;
          width: 1000px;
          pointer-events: none;
          left: 50%;
          transform: translateX(-50%);
        }
        .img1{z-index: 11;}

        /*  before after      */
        #comparison {
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
}

figure {
  position: absolute;
  background-image: url('../assets/images/after.webp');
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

#divisor {
  background-image: url('../assets/images/before.webp');
  background-size: cover;
  position: absolute;
  width: 50%;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  bottom: 0;
  height: 100%;
}
#divisor::before, #divisor::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
}
#divisor::before {
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
}
#divisor::after {
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
}

#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1; background-color: #FFD342; border-radius: 50%;
}
#handle::before, #handle::after {
  content: "";
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
#handle::before {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px; background-color: #FFD342;
}
#handle::after {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px; background-color: #FFD342;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;
}
input[type=range]:focus, input[type=range]:active {
  border: none;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
}

input[type=range]::-moz-range-track {
  -moz-appearance: none;
  height: 15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;
}
       
.footer-top-left{height: 100%; display: flex; justify-content: center; align-items: flex-start; flex-direction: column;}
.footer-top-left p{width: 350px; margin-top: 5px;}

/*  home page hori scroll*/
 .div1 {
  height: 100vh;
  width: 60vw;
  background: #95ffe7;
  background-image: url(http://Wallpaper-House.com/data/out/7/wallpaper2you_152521.jpg);
  background-position: 0% -50%;
  background-size: cover;
}

.div2 {
  display: flex;
  height: 80vh;
  width: 100vw;
  position: relative;
}
.div2 div {
  width: 72vw;
  height: 60vh;
  background-size: cover;
  background-position: center; margin-right: 20px;
}
/*.div2 .div21 {
  background-color: #f3ff3e;
  background-image: url(http://Wallpaper-House.com/data/out/7/wallpaper2you_152536.jpg);
}
.div2 .div22 {
  background-color: #ff7dff;
  background-image: url(http://Wallpaper-House.com/data/out/7/wallpaper2you_152549.jpg);
}
.div2 .div23 {
  background-color: #00ff72;
  background-image: url(http://Wallpaper-House.com/data/out/7/wallpaper2you_152576.jpg);
}*/

.div3 {
  height: 100vh;
  width: 72vw;
  background: #39adff;
  background-image: url(http://Wallpaper-House.com/data/out/7/wallpaper2you_152580.jpg);
  background-position: center;
  background-size: cover;
}
.home-lighting-top {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-lighting-top h2,
.home-lighting-top p {
  opacity: 0;
  transform: translateY(100px);
}
.lighting-txt h2{padding-bottom: 30px;}
.lighting-txt {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

#home-page-gallery-one.stuck {
   /* position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;*/
  }
  /*.zoom-img {
    transition: transform 0.1s ease-out;
    transform-origin: center center; position: absolute; top: 0%; left: 0;width: 100%; height: 100%;
  }*/
  .zoom-img img{max-width: 100%;}
  .gal-home-one.zoom-img img{width: auto;}
  .lighting-shadow{background: linear-gradient(to bottom, #fff 0%, transparent 100%); height: 100px;}
/*  .product-details-page{overflow-x: hidden;}*/
  .product-details-page .carousel-area-details .owl-carousel .owl-item img{width: auto !important; padding: 35px 0;}
  .product-details-page .carousel-area-details .product-details-corousel{margin-top: 0px;}
  #home-page-gallery-one {
    transition: transform 0.4s ease;
  }
  .filter-buttons{margin-bottom: 35px;}
  .workspace-div-right a{margin-top: 10px; display: inline-block;}
  #home-page-gallery-one {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.2s ease-out;
}
.hero-counter-left video {
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin: center center;
  will-change: transform;
  position: relative;
  z-index: 2;
}

#product-faq .accordion-body .accordion-body{color: rgba(255, 255, 255, 0.5);}
.product-details-for-carousel{position: relative;margin: 0 auto; min-height: 80vh; display: flex; justify-content:   center ; align-items: center ; flex-direction: column;}
.sun-into-room-bottom .owl-item .product-details-for-carousel h3{position: absolute; bottom: -50px; z-index: 1; display: none;}
.product-details-for-carousel img{max-width: 200px; max-height: 60vh; }
.product-carousel .owl-carousel .owl-stage-outer{overflow: visible;}
.sun-into-room-bottom{position: relative; padding: 0px 0 100px; transition: 0.4s;}
/*.sun-into-room-bottom.bg-added {
  background: linear-gradient(135deg, #121212, #121212);
  animation-name: gradientChange;
  animation-duration: 4s;
  animation-fill-mode: forwards; /* keeps final state */
}

/*@keyframes gradientChange {
  from {
    background: linear-gradient(35deg, #FFD342, #121212);
  }
  to {
    background: linear-gradient(135deg, #FF6200, #121212);
  }
}*/

.sun-into-room-bottom {
  position: relative;
  
  overflow: hidden;
}

/* Initial gradient layer */
.sun-into-room-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #121212, #121212);
  z-index: 1;
  transition: opacity 2s ease;
  opacity: 1;
}

/* Final gradient layer to fade in */
.sun-into-room-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
/*  background: linear-gradient(0deg, #FF6200, #121212);*/
background: radial-gradient(167.86% 105.91% at 52.34% 115.67%, #455765 0%, #503526 34.11%, #251D18 65.02%, #121212 100%);
  z-index: 2;
  transition: opacity 2s ease;
  opacity: 0;
}

/* Add this class to start the smooth transition */
.sun-into-room-bottom.bg-added::after {
  opacity: 1;
}




.zoom-wrapper {
  transform-origin: center center;
  transition: transform 0.1s linear;
  will-change: transform; position: relative; z-index: 5;
}
.sun-into-room-bottom .owl-carousel .owl-nav button.owl-next{position: absolute; bottom: -50px; right: 50px; border: none !important; outline: none !important; background: transparent !important;}
.sun-into-room-bottom .owl-carousel .owl-nav button.owl-prev{position: absolute; bottom: -50px; left: 50px; border: none !important; outline: none !important; background: transparent !important;}
.sun-into-room-bottom .owl-carousel .owl-nav button span{font-size: 35px; color: #FFD342;}
.trusted-people ul li{display: inline-block; width: 22%; margin: 0 10px 32px;}
.trusted-people ul{text-align: center;}
.trusted-people ul li img{width: 100%;}
.trusted-people-info p span{display: block;}
.trusted-people-info{text-align: left;}
.trusted-people .node ul li img{width: 150px;}
.trusted-people .node ul li{width: auto;}
.trusted-people .node ul{margin-top: 35px !important;}
.div2 .product-details-corousel img{max-width: 600px;}
.shop-right .address p{width: 250px;}
.shop-right .address{margin-bottom: 25px;}
#blog .owl-carousel .owl-nav button.owl-next{position: absolute; bottom: -80px; right: 0px; border: none !important; outline: none !important; background: transparent !important;}
#blog .owl-carousel .owl-nav button.owl-prev{position: absolute; bottom: -80px; right: 35px; border: none !important; outline: none !important; background: transparent !important;}
#blog .owl-carousel .owl-nav button span{font-size: 50px; color: #121212;}
.player{height: 100vh;}
.play-btn, .play-btn2{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5; background: #D9D9D91A; backdrop-filter: blur(20px); width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.video-thumbnail {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;background-size: cover;background-position: center;z-index: 3;}
.video-thumbnail .desktop-visible{height: 100%;}
.video-thumbnail img {width: 100%;height: 100%;object-fit: cover;}
.video-thumbnail .play-btn img, .video-thumbnail .play-btn2 img{width: auto; height: auto; object-fit: contain; cursor: pointer;}

/*  Blog page */
.blog-page .blog-left{margin: 120px 35px 0 70px;position: relative;}
.blog-page .blog-details {max-width: 400px; margin: 20% 0 0px auto;}
.blog-page #blog .owl-carousel .owl-nav button.owl-next{bottom: -80px; left: 30px; position: relative;}
.blog-page #blog .owl-carousel .owl-nav button.owl-prev{bottom: -80px; left: 0; position: relative;}
.blog-page .owl-theme .owl-nav{text-align: left;}
.blog-page .blog-right img{height: 100vh; object-fit: cover;}
.blog-page .blog-card .blog-details {max-width: 100%;margin: 15px 0 0px;}
.blog-card label {font-size: 12px;font-weight: 200; margin-bottom: 15px;}
.blog-card p{margin: 10px 0 20px;}
.blog-author p span{margin-right: 5px;}
#blog-list{position: relative; padding-top: 100px;}
.blog-card{padding-bottom: 10px;}
.blog-item {transition: all 0.3s ease;}
.load-more button{background: transparent !important; outline: none !important; border: none !important; border-bottom: 1px solid #121212 !important; text-transform: uppercase;}

/*blog detail*/
.blog-details-page .content {
  display: flex;
  padding: 20px 0;
}

.main-blog {
  flex: 1 0 auto;
 width: 800px; margin: 0 0 0 auto; padding-left: 15px;
}

.side-fix {
  
  position: sticky;
  top: 100px;
  width: 350px;
  height: 140px; padding-right: 15px;
 
}
.blog-details-top-div{padding: 120px 0 50px;}
.blog-details-top-div-txt{width: 70%;}
.blog-details-top-div-txt label{font-size: 12px; margin-bottom: 5px;}
.blog-heading ul li{color: #181A2A; margin-bottom: 10px;}
.blog-heading p span{margin-right: 5px; display: inline-block;}
.main-blog div{margin-bottom:  25px;}
.main-blog div img{max-width: 100%; margin: 10px 0 20px;}
#blog-details-content{position: relative; padding-bottom: 35px;}
.main-blog div h3{margin-bottom: 15px;}
.call-bck-div{padding-top: 60px;}
.footer-links-left .d-inline-block {vertical-align: text-top;}
.sun-into-room-bottom .owl-item.center .product-details-for-carousel img{scale: 1.1; transition: 0.4s;}
.sun-into-room-bottom .owl-item.center h3{ display: inline-block;}
.drag-container-fluid {position: absolute;top: 0;left: 0;z-index: 10; /* Above the gallery */width: 100%; height: 100%;opacity: 0; /* Initially hidden */pointer-events: none; /* Prevent accidental interactions */}
.fadeup-drag img{height: 100vh; width: 100%;}

/*  video animation */
.spacer {
  height: 10000px; position: relative;
}

.video {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 0;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}


/*  home gallery */
#collage-section {
      position: relative;
      height: 100%
      background: #fff;
      overflow: hidden;
    }

    #collage-section .collage-wrapper {
      position: relative;
      height: 100vh;
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    #collage-section .background-section {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0; opacity: 0; display: none;
    }

    #collage-section .background-section img {
      max-width: 100%;
      height: 33vh;
      display: block;
      transform-origin: center center;
    }

    #collage-section .scale-section {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      transform-origin: center center;
      z-index: 2;
      background-color: transparent;
    }

    #collage-section .collage-item {
      opacity: 1;
      transform: scale(1);
      background: #fff;
      height: 30.6vh;
      overflow: hidden; 
    }

    #collage-section .collage-item img {
      width: 100%;
      height: 100%;
      display: block;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    

    #collage-section .gal-img-details .row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    #collage-section .gal-img-details .col-md-6 {
      flex: 1 1 45%;
    }

    @media (max-width: 768px) {
      #collage-section .scale-section { grid-template-columns: repeat(2, 1fr); }
      #collage-section .gal-img-details .col-md-6 { flex: 1 1 100%; }
    }

    @media (max-width: 480px) {
      #collage-section .scale-section { grid-template-columns: 1fr; }
    }

    #collage-section .container {
      max-width: 100%;
      position: relative;
      height: 100%;
      overflow: hidden; padding: 0;
    }

    #collage-section #comparison {
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
      position: relative;
    }

    #collage-section figure {
      position: absolute;
      background-image: url('../assets/images/gal-home-one2.jpg');
      background-size: cover;
      font-size: 0;
      width: 100%;
      height: 33vh;
      margin: 0;
    }

    #collage-section #divisor {
      background-image: url('../assets/images/drag.png');
      background-size: cover;
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 33vh;
      box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
    }

    #collage-section #divisor::before, #collage-section #divisor::after {
      content: "";
      position: absolute;
      right: -2px;
      width: 4px;
      background: white;
      z-index: 3;
    }

    #collage-section #divisor::before {
      top: 0;
      height: 50%;
      box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3);
    }

    #collage-section #divisor::after {
      bottom: 0;
      height: 50%;
      box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
    }

    #collage-section #handle {
      position: absolute;
      height: 50px;
      width: 50px;
      top: 50%;
      left: 100%;
      transform: translateY(-50%) translateX(-50%);
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      transition: all 0.5s ease; background: transparent;
    }

   #collage-section #handle::before,#collage-section #handle::after {
      content: "";
      width: 0;
      height: 0;
      border: 6px inset transparent;
      position: absolute;
      top: 50%;
      margin-top: -6px;
    }

    #collage-section #handle::before {
      border-right: 6px solid white;
      left: 50%;
      margin-left: -17px;
    }

    #collage-section #handle::after {
      border-left: 6px solid white;
      right: 50%;
      margin-right: -17px;
    }

    #collage-section input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      position: absolute;
      top: 25.5%;
      left: -27px;
      transform: translateY(-50%);
      background-color: transparent;
      width: calc(100% + 50px);
      z-index: 10;
      pointer-events: none;
      opacity: 0 !important;
    }

    #collage-section input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      border: 3px solid white;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
      background: #FFD342;
    }
    #collage-section #handle::after,#collage-section #handle::before {background: transparent; opacity: 1;}
    .gal-img-details{background-color: rgba(255, 255, 255, 1); padding: 40px 50px; z-index: 1; width: 100%; z-index: 3;}
/*    .gal-img-details .tags-b-f ul li{border: 1px solid #121212;}*/
    .gal-img-details .b-f-tab{margin-top: 0;}
    #instagram .play-btn{cursor: pointer;}
    .vision-div .player{height: 90vh;}
    .tag-box{border: 1px solid rgba(255, 255, 255, 0.5); padding: 2px 5px; display: inline-block; transition: 0.4s;}
    .tag-box a{line-height: 1;}
    .opacity05{opacity: 0.5;}
    .team-section {padding: 100px 0;overflow: hidden; width: 100%;}
    .tag-box:hover{border: 1px solid rgba(255, 255, 255, 1);}
     .tag-box a:hover{color: #FFD342; opacity: 1;}

     .video-wrapper-founder{position: relative; width: 100%;}
     .video-wrapper-founder iframe{width: 100%; height: 90vh;}

.team-slider {overflow: hidden;}

.scroll-track {display: flex;flex-wrap: nowrap;gap: 20px; will-change: transform; }

.scroll-track .item {flex: 0 0 auto;width: 300px;}
.scroll-track .item img {width: 100%;display: block;}
.workspace-div-right {padding-left: 50px;}
.scroll-track-beyond {
  display: flex;
  height: 80vh;
  will-change: transform; width: 150vw;
}

.scroll-track-beyond .item {
  flex: 0 0 70vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#beyond-lighting .video-section video{height: 70vh;}
.product-details-corousel{width: 100%; background: transparent;}
#beyond-lighting .video-section{width: 100%;}
#beyond-library-home .owl-carousel .owl-dots{text-align: center;}
#beyond-library-home .owl-carousel button.owl-dot{width: 15px !important; height: 15px !important; background-color: #121212 !important; margin-right: 5px; margin-top: 15px; border-radius: 50%; opacity: 0.5 !important; transition: 0.4s; position: relative; overflow: hidden; border: 1px solid #121212;}
#beyond-library-home .owl-carousel button.owl-dot.active {width: 50px !important; border-radius: 20px!important; opacity: 1 !important; background-color: #fff !important;}
#beyond-library-home .owl-carousel.visible button.owl-dot:after{content: ''; width: 0%; height: 100%; background-color: #121212; z-index: 1; position: absolute; top: 0; left: 0; transition: 5.3s; border-radius: 20px;}
#beyond-library-home .owl-carousel.visible button.owl-dot:nth-child(1):after{transition: 7.3s;}
#beyond-library-home .owl-carousel.visible button.owl-dot:nth-child(2):after{transition: 5.3s;}
#beyond-library-home .owl-carousel.visible button.owl-dot:nth-child(3):after{transition: 14s;}
#beyond-library-home .owl-carousel.visible button.owl-dot.active:after{width: 100%;}
.video-carousel-details p{position: absolute; left: 30px; top: 30px; width: auto; z-index: 2;}

.gal-img-details,.gallery-top-head {padding: 44px 50px 36px;}
.sun-into-room-top{cursor: url(../assets/images/cursor.png) 0 0, auto;}
.sun-wrapper {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      opacity: 0;
      z-index: 10;
      pointer-events: none; border-radius: 50%; overflow: hidden;
    }

    .sun {
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, #FFD700 0%, #FFA500 60%, #FF8C00 100%);
      border-radius: 50%;
      box-shadow: 0 0 30px rgba(255, 200, 0, 0.6), 0 0 60px rgba(255, 160, 0, 0.4);
      z-index: 1;
    }

    .sun-overlay {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: yellow;
      z-index: 2; border-radius: 50%;
    }
    
    .address a{width: 300px; text-align: left;}

.choices__item--selectable:hover {
  
}
.choices__item--selected {
  background-color: rgba(0, 0, 0, 0.7); /* selected color */
}
.choices__inner{background-color: #121212; border: none; color: #9D9FA1; border-bottom: 1px solid #9D9FA1 !important; }
.choices__list--dropdown, .choices__list[aria-expanded]{background-color: #121212 !important; color: #9D9FA1; position: absolute; z-index: 2;}
.pb-10{padding-bottom: 150px;}
.pop-up .choices__inner{background-color: transparent; border: none; color: #9D9FA1; border-bottom: 1px solid #D0D5DD !important; padding: 30px 5px 10px; font-size: 16px;}
.pop-up .col-3 img{cursor: pointer;}
.video-carousel-details, .video-carousel-details video{height: 80vh; object-fit: cover;}
.video-carousel-details:after{content:''; position: absolute; left: 0; top: 0; width: 100%; height: 25vh; z-index:  1; background-image: linear-gradient(#000000, transparent);}
.m-15{margin-top: 100px;}
.carousel-stag-head{margin:0 auto 30px; width: 515px;}
.thum-txt{position: absolute; left: 50px; bottom: 50px;}
.thum-txt p{color: #BBBBBB;}



/*test*/
.collage-item .img-compare-container {
      position: relative;
      width: 100%;
      cursor: ew-resize;
    }

    .collage-item .img-layer {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }

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

     .collage-item .img-layer.after {
      width: 50%;
      overflow: hidden;
      z-index: 2;
    }

     .collage-item .img-layer.after img {
      position: absolute;
      top: 0;
      left: 0;
    }

     .collage-item .slider-handle {
      position: absolute;
      top: 0;
      left: 50%;
      width: 4px;
      height: 100%;
      background-color: #fff;
      z-index: 3;
      transform: translateX(0px);
      cursor: grab;
    }
    .drag-btn {
  position: absolute;  top: 50%;  left: 50%;  width: 50px;  height: 50px;  background-color: #FFD342;  border-radius: 50%;  z-index: 3;  transform: translate(-50%); font-size: 10px; display: flex; justify-content: center; align-items: center; color: #121212;
}
     .collage-item .container {
      width: 100%;
      max-width: 100% !important;
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      cursor: grab;
    }

     .collage-item .container img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      top: 0;
      left: 0;
    }

     .collage-item .img-left {
      z-index: 1;
      clip-path: inset(0 50% 0 0);
    }

     .collage-item .img-right {
      z-index: 2;
      clip-path: inset(0 0 0 50%);
    }

     .collage-item .slider {
      position: absolute;
      top: 0;
      left: 50%;
      width: 4px;
      height: 100%;
      background-color: #FFD342;
      transform: translateX(-2px);
      z-index: 3;
    }
    #instagram .owl-carousel img{width: auto !important;}
    #team-scroll,
.scroll-track {
  will-change: transform;
  transform: translateZ(0); /* GPU acceleration to prevent layout jumps */
}
#instagram .owl-carousel .owl-nav button span {font-size: 35px;color: #FFD342;}
#instagram .owl-carousel .owl-nav button{border: none !important; outline: none !important; background: rgba(0, 0, 0, 0.5);width: 45px;height: 45px;border-radius: 50%;}
#instagram .owl-carousel .owl-nav button.owl-next{position: absolute; right: 0; top: 45%; z-index: 9}
#instagram .owl-carousel .owl-nav button.owl-prev{position: absolute; left: 0; top: 45%; z-index: 9}
.team-section {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .team-slider {
      height: 100%;
      width: 100%;
    }

    .scroll-track {
      display: flex;
      gap: 50px;
      height: 100%;
      padding: 50px;
      box-sizing: border-box;
    }

    

    .team-section .item img {
      width: 100%;
      height: auto;
      /*border-radius: 10px;
      margin-bottom: 15px;*/
    }


    .video-wrapper {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background: #000;
    }
    .video-wrapper iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .custom-play-btn {
      position: absolute;
      width: 50px;
      height: 50px;
      background: url('../assets/images/play-btn.png') no-repeat center center;
      background-size: 16px;
      background-color: #D9D9D91A;
      backdrop-filter: blur(20px);
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 2;
    }
    .custom-overlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
     
      transition: opacity 0.4s ease;
    }

    .video-wrapper.playing .custom-overlay,
    .video-wrapper.playing .custom-play-btn {
      opacity: 0;
      pointer-events: none;
    }
    .custom-overlay img{width: 100%; height: 100%; object-fit: cover;}
    .home-page-drag #comparison{padding-bottom: 116vh;}
    .gallery #comparison{padding-bottom: 42vh;}
    /*.gallery #handle {position: absolute;height: 15px;width: 15px;}
    .gallery #handle::before {
    border-right: 2px solid white;
    left: 50%;
    margin-left: -7px;
    background-color: #FFD342;
    }
    .gallery input[type=range]{opacity: 0;}
    .gallery #handle::after {
    border-left: 6px solid white;
    right: 50%;
    margin-right: -5px;}
    .gallery #handle::before, .gallery #handle::after {
    content: "";
    width: 0;
    height: 0;
    border: 2px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -3px;}*/
    .gallery input[type=range]{opacity: 0;}
    .gallery #handle {position: absolute;height: 20px;width: 20px; border: 2px solid #fff; cursor: pointer;}
    .gallery #handle::before {
    border-right: 3px solid white !important;
    left: 50%;
    margin-left: -8px;
    background-color: #FFD342;
}
.gallery #handle::after {
  border-left: 3px solid white !important; margin-right: -8px;
}
.gallery #handle::before, .gallery #handle::after {
    content: "";
    width: 0;
    height: 0;
    border: 3px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -3px;
}
.gallery #divisor::before, .gallery #divisor::after {height: calc(50% - 9px);}
    #beyond-library #beyond-library-home .owl-carousel button.owl-dot { background-color: #FDFCFF !important;}
    #beyond-library #beyond-library-home .owl-carousel button.owl-dot:after{background-color: #FDFCFF;}
    #beyond-library #beyond-library-home .owl-carousel .owl-dots{padding-bottom: 20px !important;}
    #beyond-library #beyond-library-home .owl-carousel button.owl-dot.active:after{width: 100%;}


    .scroll-area{ height: 150vh; /* Total scroll height (2 extra screens) */}
    .scrubber-wrapper {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      background: black;
    }

    .scroll-area video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    .spacer {
      height: 50vh; /* This is what creates the scroll space */ 
    }

    #full-video-product-page video{width: 100%; margin: 0 auto; text-align: center;}
    #product-banner{height: 100vh; overflow: hidden; position: relative;}
    #product-banner:after{content: '';position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #121212; z-index: 1;}
    #full-video-product-page{text-align: center;}
    #testimonials button img{width: 10px !important;}
    .custom-overlay:after{content:''; position:absolute; left:0; bottom:0; height: 100px; width: 100%; z-index: 1; background-image: linear-gradient(transparent, #121212);}
    .back-top p img{width: 20px; margin-right: 8px;}

    .choices[data-type*=select-one]::after {
    content: "";
    height: 0;
    width: 0;
    border-style: solid;
    border-color: #fff transparent}
    
    .thumbnail-txt{position: absolute; left: 60px; bottom: 25px; z-index: 10; text-align: left;}
    .product-details-bottom .container{position: absolute; top: 250px; z-index: 2; left: 50%; transform: translateX(-50%);}
    .product-details-bottom:after{content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 200px; background-image: linear-gradient( #121212, transparent); z-index: 1;}

    /* dropdown  */
   
    .custom-select-wrapper {
      position: relative;
      display: inline-block; width:   100%;
      user-select: none;
      margin-bottom: 20px;
     
    }

    .custom-select {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .custom-select__trigger {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 7px 6px;
      font-size: 16px;
      color: #9D9FA1; border-bottom: 1px solid #9D9FA1;
    }

    .arrow {
      position: relative;
      height: 10px;
      width: 10px;
    }

    .arrow::before,
    .arrow::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 0.15rem;
      height: 100%;
      transition: all 0.3s ease;
    }

    .arrow::before {
      left: -4px;
      transform: rotate(-45deg);
      background-color: #FDFCFF;
    }

    .arrow::after {
      left: 3px;
      transform: rotate(45deg);
      background-color: #FDFCFF;
    }

    .open .arrow::before {
      transform: rotate(45deg);
    }

    .open .arrow::after {
      transform: rotate(-45deg);
    }

    .custom-options {
      position: absolute;
      display: none;
      top: 100%;
      left: 0;
      right: 0;
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: white;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      z-index: 999;
    }

    .custom-select.open .custom-options {
      display: block;
    }

    .custom-option {
      padding: 12px 20px;
      cursor: pointer;
      transition: background 0.2s; width: 100%; display: block;
    }

    .custom-option:hover {
      background: #f2f2f2;
    }

    .custom-option.selected {
      background: #e9e9e9;
    }
    #testimonials{position: relative; height: 100vh; overflow: hidden; background-color: #121212;}
    #testimonials .owl-carousel .owl-nav button.owl-next {position: absolute; right: -50px;top: 50%;z-index: 9; transform: translateY(-50%);}
    #testimonials .owl-carousel .owl-nav button.owl-prev {position: absolute; left: -50px;top: 50%;z-index: 9; transform: translateY(-50%);}
    #testimonials .owl-carousel .owl-nav button {border: none !important;outline: none !important;width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.6) !important; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
    #testimonials iframe{width: 100vw; height: 100vh; position: relative; z-index: 5;}
    .video-section iframe{width: 100%;}
    #testimonials .video-slide img{max-height: 100vh; object-fit: cover;}
    .video-slide:after {content: '';position: absolute;left: 0;bottom: 0;height: 130px;width: 100%;z-index: 1;background-image: linear-gradient(transparent, #121212);}
    .trams-page{min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column;}

    .controll-video{
  height: 6000px;
  background: #121212; text-align: center;
}

.controll-video video{
  position: sticky;
  top: 0;
  left: 0%;
  width: 100%;
  
}

.accordion-body iframe{width: 100%;}

/*h1{
  z-index: 1;
  position: relative;
  text-align: center;
  font-family: arial;
  font-size: 16px;
  color: #333333; 
}*/

#loader {
    text-align: center;
    padding: 10px;
    font-weight: bold;
  }

  .thank-you-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .popup-content {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
  }

  .popup-content p {
    margin-bottom: 20px;
    font-size: 18px;
  }

  .popup-content .close-popup {
    padding: 10px 20px;
    background: #222 !important;
    color: #fff !important;
    border: none;
    cursor: pointer;
  }
  .custom-select-wrapper2{width: 48.7%;}