*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}



body{
  font-family:Arial, sans-serif;
  background:#000;
  color:white;
  overflow-x:hidden;
  
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar{
  position:fixed;
  top:0;
  width:100%;

  padding:10px 50px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  z-index:1000;

  background:rgba(0,0,0,0.35);

  backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(255,255,255,0.05);

  transition:0.4s;
  flex-wrap: wrap;
}

.navbar.scrolled{

  background:rgba(0,0,0,0.75);

  backdrop-filter:blur(18px);

  box-shadow:0 10px 30px rgba(0,0,0,0.4);

  padding:8px 50px;
}

/* LOGO */

.logo img{
  height:55px;
  width:auto;
  object-fit:contain;

  transition:0.4s;
}

.logo img:hover{

  transform:scale(1.05);

  filter:drop-shadow(
    0 0 15px rgba(247,181,0,0.35)
  );
}

@media(max-width:900px){

  .logo img{
    height: 40px;
  }
}


/* ========================= */
/* DESKTOP NAV */
/* ========================= */

.desktop-nav{

  display:flex;

  align-items:center;

  gap:45px;

  margin-left:auto;

  margin-right:40px;
}

.desktop-nav a{

  color:#fff;

  text-decoration:none;

  font-size:18px;

  font-weight:500;

  letter-spacing:0.5px;

  position:relative;

  transition:0.3s;
}

.desktop-nav a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-6px;

  width:0%;

  height:2px;

  background:#f7b500;

  transition:0.3s;
}

.desktop-nav a:hover{

  color:#f7b500;
}

.desktop-nav a:hover::after{

  width:100%;
}

/* MOBILE */

@media(max-width:900px){

  .desktop-nav{

    display:none !important;
  }

}


/* BUTTON */

.navbar > button:not(.menu-toggle){

  background:#f7b500;

  color:black;

  border:none;

  padding:14px 28px;

  border-radius:10px;

  cursor:pointer;

  font-weight:bold;

  transition:0.3s;
}

.navbar > button:not(.menu-toggle):hover{

  transform:translateY(-3px);

  box-shadow:
  0 10px 30px rgba(247,181,0,0.3);
}

@media(max-width:900px){

 .navbar > button:not(.menu-toggle){
  display:none;
}
}





/* ========================= */
/* SUCCESS POPUP */
/* ========================= */

.success-popup{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100vh;

  background:rgba(0,0,0,0.7);

  backdrop-filter:blur(10px);

  display:flex;

  justify-content:center;
  align-items:center;

  opacity:0;

  visibility:hidden;

  transition:0.4s;

  z-index:9999999;
}

/* ACTIVE */

.success-popup.active{

  opacity:1;

  visibility:visible;
}

/* BOX */

.success-box{

  width:420px;

  background:#111;

  border:1px solid rgba(255,255,255,0.08);

  border-radius:30px;

  padding:60px 40px;

  text-align:center;

  transform:scale(0.8);

  transition:0.4s;

  box-shadow:
  0 30px 80px rgba(255,191,0,0.15);
}

/* ANIMATE */

.success-popup.active .success-box{

  transform:scale(1);
}

/* ICON */

.success-icon{

  width:90px;
  height:90px;

  margin:auto;

  margin-bottom:30px;

  border-radius:50%;

  background:#ffbf00;

  color:black;

  display:flex;

  justify-content:center;
  align-items:center;

  font-size:42px;

  font-weight:bold;

  box-shadow:
  0 0 40px rgba(255,191,0,0.4);
}

/* TEXT */

.success-box h2{

  font-size:34px;

  margin-bottom:18px;
}

.success-box p{

  color:#aaa;

  font-size:17px;

  line-height:1.7;
}


/* ========================= */
/* QUOTE SECTION */
/* ========================= */

.quote-section{

  padding:140px 90px;

  background:#050505;
}

.quote-container{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  align-items:center;
}

/* LEFT */

.quote-text span{

  color:#ffbf00;

  letter-spacing:3px;

  font-size:15px;

  font-weight:600;
}

.quote-text h2{

  font-size:60px;

  margin-top:20px;

  margin-bottom:30px;

  line-height:1.2;
}

.quote-text p{

  color:#aaa;

  font-size:18px;

  line-height:1.9;
}

/* FORM */

.quote-form{

  display:flex;

  flex-direction:column;

  gap:20px;
}

.quote-form input,
.quote-form textarea{

  width:100%;

  padding:18px 22px;

  background:#111;

  border:1px solid rgba(255,255,255,0.08);

  border-radius:14px;

  color:white;

  font-size:16px;

  outline:none;

  transition:0.3s;
}

.quote-form input:focus,
.quote-form textarea:focus{

  border-color:#ffbf00;

  box-shadow:
  0 0 20px rgba(255,191,0,0.12);
}

.quote-form textarea{

  min-height:160px;

  resize:none;
}

/* BUTTON */

.quote-form button{

  padding:18px;

  border:none;

  background:#ffbf00;

  color:black;

  font-size:16px;

  font-weight:700;

  border-radius:14px;

  cursor:pointer;

  transition:0.3s;
}

.quote-form button:hover{

  transform:translateY(-5px);
}

/* RESPONSIVE */

@media(max-width:900px){

  .quote-container{

    grid-template-columns:1fr;
  }

  .quote-section{

    padding:100px 25px;
  }

  .quote-text h2{

    font-size:42px;
  }

}



/* ========================= */
/* HERO */
/* ========================= */

.hero{

  height:100vh;

  position:relative;

  overflow:hidden;
}

/* VIDEO */

.bg-video{

  position:absolute;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.15);

  filter:
  brightness(0.75)
  contrast(1.15)
  saturate(1.2);
}

/* OVERLAY */

.overlay{

  position:absolute;

  width:100%;
  height:100%;

  background:
  linear-gradient(
    to right,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.7)
  );
}

/* HERO CONTENT */

.hero-content{

  position:relative;

  z-index:2;

  height:100%;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding-left:90px;

  max-width:800px;
}

.hero-content h1{

  font-size:78px;

  line-height:1.1;

  letter-spacing:-2px;

  text-shadow:
  0 0 20px rgba(247,181,0,0.15);
}

.hero-content span{

  color:#ffbf00;
}

.hero-content p{

  margin-top:25px;

  font-size:22px;

  color:#ddd;

  max-width:650px;
}

/* BUTTON */

.hero-content button{

  margin-top:35px;

  width:220px;

  padding:16px;

  border:none;

  background:#ffbf00;

  border-radius:12px;

  font-size:17px;

  font-weight:600;

  cursor:pointer;

  transition:0.3s;
}

.hero-content button:hover{

  transform:translateY(-5px);
}

/* BOTTOM FADE */

.hero::after{

  content:"";

  position:absolute;

  bottom:0;
  left:0;

  width:100%;
  height:200px;

  background:
  linear-gradient(
    to top,
    #050505,
    transparent
  );
}


/* ========================= */
/* PRODUCTS SLIDER */
/* ========================= */

.slider-section{

  padding:120px 0;

  background:#050505;
}

/* HEADING */

.section-heading{

  text-align:center;

  margin-bottom:70px;
}

.section-heading h2{

  font-size:65px;

  margin-bottom:15px;
}

.section-heading p{

  color:#999;

  font-size:18px;
}

/* SLIDER */

.slider{

  width:100%;

  overflow-x:auto;

  overflow-y:hidden;

  cursor:default;

  scroll-behavior:auto;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;

  user-select:none;
}
@media(min-width:769px){
  .slider{
    cursor:grab;
  }
}

.slider::-webkit-scrollbar{

  display:none;
}

.slider.active{

  cursor:grabbing;
}

/* TRACK */

.slide-track{

  display:flex;

  gap:25px;

  width:max-content;

  padding:10px 40px;
}

/* CARD */

.card{

  width:360px;

  min-height:470px;

  flex-shrink:0;

  background:
  linear-gradient(
    180deg,
    #151515,
    #0c0c0c
  );

  border-radius:28px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,0.06);

  transition:
  transform 0.25s ease,
  box-shadow 0.25s ease;

  cursor:pointer;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.35);
}

/* HOVER */

@media(hover:hover){

  .card:hover{

    transform:translateY(-12px);
  }

  .card:hover img{

    transform:scale(1.05);
  }

}

/* IMAGE */

.card img{

  width:100%;

  height:260px;

  object-fit:cover;

  display:block;

  transition:0.5s;
}



/* TITLE */

.card h3{

  padding:28px 25px 10px;

  font-size:24px;

  line-height:1.4;

  color:#fff;
}

/* TEXT */

.card p{

  padding:0 25px 30px;

  color:#999;

  line-height:1.7;

  font-size:15px;
}

/* ========================= */
/* PRODUCT MODAL */
/* ========================= */

.product-modal{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100vh;

  background:rgba(0,0,0,0.82);

  backdrop-filter:blur(10px);

  display:flex;

  justify-content:center;

  align-items:flex-start;

  padding:40px 0;

  overflow-y:auto;

  opacity:0;

  visibility:hidden;

  transition:0.4s;

  z-index:999999;
}
.product-modal.active{

  opacity:1;

  visibility:visible;
}

/* MODAL BOX */

.modal-content{

  width:88%;
  margin:auto;

  max-width:1150px;

  background:#111;

  border-radius:30px;

  overflow:hidden;

  display:grid;

  grid-template-columns:1fr 1fr;

  position:relative;

  transform:scale(0.9);

  transition:0.4s;
}

.product-modal.active .modal-content{

  transform:scale(1);
}

/* MODAL IMAGE */

.modal-content img{

  width:100%;

  height:100%;

  max-height:750px;

  object-fit:contain;

  background:#000;
}

/* TEXT */

.modal-text{

  padding:60px;

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.modal-text h2{

  font-size:48px;

  margin-bottom:25px;
}

.modal-text p{

  color:#bbb;

  line-height:1.9;

  font-size:18px;

  margin-bottom:35px;
}

/* BUTTON */

.modal-text button{

  width:220px;

  padding:18px;

  border:none;

  background:#ffbf00;

  color:black;

  border-radius:14px;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

  transition:0.3s;
}

.modal-text button:hover{

  transform:translateY(-5px);
}

/* CLOSE */

.close-btn{

  position:absolute;

  top:18px;
  right:30px;

  font-size:45px;

  color:white;

  cursor:pointer;

  z-index:5;
}

/* ========================= */
/* MOBILE */
/* ========================= */



/* MOBILE */

@media(max-width:900px){

  .modal-content{
    grid-template-columns:1fr;
    width:95%;
  }

  .modal-text{
    padding:25px;
  }

  .modal-text h2{
    font-size:28px;
  }

}



/* ========================= */
/* STATS */
/* ========================= */

.stats-section{

  padding:120px 80px;

  background:#0a0a0a;
}

.stats-container{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:30px;
}

.stat-box{

  background:#111;

  padding:50px 30px;

  border-radius:25px;

  text-align:center;

  border:1px solid rgba(255,255,255,0.08);

  transition:0.4s;
}

.stat-box:hover{

  transform:translateY(-10px);

  box-shadow:
  0 20px 50px rgba(247,181,0,0.15);
}

.stat-box h2{

  font-size:60px;

  color:#f7b500;

  margin-bottom:15px;
}

.stat-box p{

  color:#bbb;

  font-size:20px;
}

/* ========================= */
/* ABOUT */
/* ========================= */

.about-section{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:center;

  padding:140px 90px;

  background:#0a0a0a;
}

.about-image img{

  width:100%;

  border-radius:30px;

  transition:0.4s;
}

.about-image img:hover{

  transform:scale(1.03);

  box-shadow:
  0 25px 60px rgba(247,181,0,0.15);
}

.about-content span{

  color:#ffbf00;

  font-size:15px;

  letter-spacing:3px;

  font-weight:600;
}

.about-content h2{

  font-size:60px;

  line-height:1.2;

  margin-top:20px;

  margin-bottom:30px;
}

.about-content p{

  color:#bcbcbc;

  font-size:18px;

  line-height:1.9;

  margin-bottom:25px;
}

.about-content button{

  margin-top:20px;

  padding:18px 35px;

  background:#ffbf00;

  color:black;

  border:none;

  border-radius:12px;

  font-size:16px;

  font-weight:600;

  cursor:pointer;

  transition:0.3s;
}

/* ========================= */
/* FOOTER */
/* ========================= */

.footer{

  background:#050505;

  padding-top:100px;

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

.footer-container{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:50px;

  padding:0 90px 70px;
}

.footer-logo{

  height:70px;

  margin-bottom:25px;
}

.footer-col h3{

  color:#ffbf00;

  margin-bottom:25px;

  font-size:22px;
}

.footer-col p,
.footer-col a{

  color:#bcbcbc;

  line-height:1.8;

  text-decoration:none;

  margin-bottom:15px;

  display:block;
}

.footer-col a:hover{

  color:#ffbf00;
}

.footer-bottom{

  border-top:1px solid rgba(255,255,255,0.05);

  padding:25px;

  text-align:center;
}

.footer-bottom p{

  color:#888;
}


/* ========================= */
/* WHATSAPP BUTTON */
/* ========================= */

.whatsapp-btn{

  position:fixed;

  right:18px;

  bottom:18px;

  width:60px;

  height:60px;

  background:#25D366;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  color:white;

  font-size:34px;

  text-decoration:none;

  box-shadow:
  0 10px 30px rgba(37,211,102,0.4);

  z-index:999;

  transition:0.3s ease;
}

.whatsapp-btn:hover{

  transform:translateY(-5px);

  box-shadow:
  0 20px 40px rgba(37,211,102,0.5);
}

/* MOBILE */

@media(max-width:768px){

  .whatsapp-btn{

    width:56px;

    height:56px;

    right:14px;

    bottom:14px;

    font-size:30px;
  }

}






/* ========================= */
/* LOADER */
/* ========================= */

.loader{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100vh;

  background:#000;

  display:flex;

  flex-direction:column;

  justify-content:center;
  align-items:center;

  z-index:9999999;

  transition:1s ease;
}

.loader.hide{

  opacity:0;

  visibility:hidden;
}

.loader img{

  width:140px;

  margin-bottom:30px;
}

.loader-line{

  width:220px;
  height:4px;

  background:rgba(255,255,255,0.08);

  border-radius:50px;

  overflow:hidden;

  position:relative;
}

.loader-line::before{

  content:"";

  position:absolute;

  top:0;
  left:-100%;

  width:100%;
  height:100%;

  background:#ffbf00;

  animation:loading 2s infinite;
}

@keyframes loading{

  100%{
    left:100%;
  }

}


/* ========================= */
/* RESPONSIVE */




  .hero-content{
    padding:30px;
  }

  .hero-content h1{
    font-size:48px;
  }

  .hero-content p{
    font-size:18px;
  }

  .section-heading h2{
    font-size:42px;
  }

 
  .stats-section{
    padding:80px 20px;
  }

  .footer-container{
    padding:0 25px 50px;
  }

  .slide-btn{

    width:50px;
    height:50px;

    font-size:22px;
  }




/* ========================= */
/* MOBILE MENU */
/* ========================= */

.menu-toggle{

  display:none;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  gap:6px;

  cursor:pointer;

  z-index:100001;

  background:transparent;

  border:none;

  padding:8px;

  width:50px;

  height:50px;
}

.menu-toggle span{

  width:28px;

  height:3px;

  background:#fff;

  border-radius:10px;

  transition:0.4s;

  display:block;
}
/* ACTIVE ICON */

.menu-toggle.active span:nth-child(1){

  transform:
  rotate(45deg)
  translate(6px, 6px);
}

.menu-toggle.active span:nth-child(2){

  opacity:0;
}

.menu-toggle.active span:nth-child(3){

  transform:
  rotate(-45deg)
  translate(7px, -7px);
}

/* MOBILE NAV */

.mobile-nav{

  position:fixed;

  top:0;

  right:-100%;

  width:280px;

  height:100vh;

  background:#0b0b0b;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  justify-content:flex-start;

  padding:120px 40px;

  gap:30px;

  transition:0.5s ease;

  z-index:100000;
}

/* ACTIVE */

.mobile-nav.active{

  right:0;
}

/* LINKS */

.mobile-nav a{

  color:#fff;

  font-size:22px;

  text-decoration:none;

  font-weight:600;

  transition:0.3s;
}

.mobile-nav a:hover{

  color:#ffbf00;
}

@media(max-width:900px){

  .navbar{
    padding: 6px 12px;
  }

  .navbar.scrolled{
    padding: 5px 12px;
  }

  .menu-toggle{

    display:flex;
  }

  
}

@media(max-width:768px){

  .navbar{
    padding: 5px 10px;
  }

  .navbar.scrolled{
    padding: 4px 10px;
  }

  .menu-toggle{

    display:flex;
  }
}

@media(max-width:480px){

  .navbar{
    padding: 4px 8px;
  }

  .navbar.scrolled{
    padding: 3px 8px;
  }

  .menu-toggle{

    display:flex;
  }
}
/* ========================= */
/* Explore Products */

/* ========================= */
/* HERO BUTTON */
/* ========================= */

.hero-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  margin-top:25px;

  padding:18px 42px;

  background:#ffbf00;

  color:#000;

  border-radius:14px;

  text-decoration:none;

  font-size:16px;

  font-weight:700;

  letter-spacing:0.5px;

  transition:0.4s ease;

  box-shadow:
  0 10px 30px rgba(255,191,0,0.2);
}

.hero-btn:hover{

  transform:
  translateY(-5px);

  box-shadow:
  0 20px 50px rgba(255,191,0,0.35);
}



/* ========================= */
/* FULL MOBILE OPTIMIZATION */
/* ========================= */

@media(max-width:768px){

  /* BODY */

  body{

    overflow-x:hidden;
  }

  /* NAVBAR */

  .navbar{

    padding:18px 20px;
  }

  .logo img{

    height:45px;
  }

 
  
  .navbar > button:not(.menu-toggle){

    display:none;
  }

  /* HERO */

  .hero{

    height:100vh;
  }

  .hero-content{

    padding:25px;

    justify-content:center;

    text-align:left;
  }

  .hero-content h1{

    font-size:42px;

    line-height:1.15;

    letter-spacing:-1px;
  }

  .hero-content p{

    font-size:17px;

    line-height:1.7;

    margin-top:18px;
  }

 


  /* SECTION HEADINGS */

  .section-heading{

    padding:0 20px;
  }

  .section-heading h2{

    font-size:38px;
  }

  .section-heading p{

    font-size:16px;
  }

} 
 /* MOBILE CARD SCROLL FIX */

@media(max-width:768px){

  .slider{

    overflow-x:auto;
    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    scroll-snap-type:x mandatory;

    scroll-behavior:auto;

    touch-action:pan-x;

    padding-left:12px;

    scrollbar-width:none;
  }

  .slider::-webkit-scrollbar{
    display:none;
  }

  .slide-track{

    display:flex;

    gap:18px;

    width:max-content;

    padding:10px 15px;
  }

  .card{

    flex:0 0 85%;

    width:85vw;

    max-width:300px;

    min-height:420px;

    scroll-snap-align:center;
  }

  .card img{

    height:210px;
  }

  .card h3{

    font-size:20px;
  }

  .card p{

    font-size:14px;
  }

  /* STATS */

  .stats-section{

    padding:80px 20px;
  }

  .stats-container{

    grid-template-columns:1fr;

    gap:20px;
  }

  .stat-box{

    padding:40px 25px;
  }

  .stat-box h2{

    font-size:42px;
  }

  .stat-box p{

    font-size:17px;
  }

  /* ABOUT */

  .about-section{

    grid-template-columns:1fr;

    padding:80px 20px;

    gap:40px;
  }

  .about-content{

    text-align:left;
  }

  .about-content h2{

    font-size:38px;
  }

  .about-content p{

    font-size:16px;
  }

  /* QUOTE SECTION */

  .quote-section{

    padding:80px 20px;
  }

  .quote-container{

    grid-template-columns:1fr;

    gap:50px;
  }

  .quote-text h2{

    font-size:38px;
  }

  .quote-text p{

    font-size:16px;
  }

  .quote-form input,
  .quote-form textarea{

    padding:16px 18px;

    font-size:15px;
  }

  .quote-form button{

    padding:16px;
  }

  /* FOOTER */

  .footer{

    padding-top:70px;
  }

  .footer-container{

    padding:0 20px 40px;

    gap:40px;
  }

  .footer-col h3{

    font-size:20px;
  }

  /* PRODUCTS PAGE */

  .products-page-section{

    padding:80px 20px;
  }

  .products-grid{

    grid-template-columns:1fr;

    gap:25px;
  }

  .product-card img{

    height:220px;
  }

  .product-content{

    padding:22px;
  }

  .product-content h3{

    font-size:22px;
  }

  .product-content p{

    font-size:15px;
  }

  .product-content a{

    width:100%;

    text-align:center;
  }

  /* WHATSAPP */

  .whatsapp-btn{

    width:58px;
    height:58px;

    right:18px;
    bottom:18px;
  }

  .whatsapp-btn i{

    font-size:30px;
  }

}
/* ========================= */
/* MOBILE ANIMATION FIX */
/* ========================= */

@media(max-width:768px){

  .card:hover,
  .product-card:hover,
  .stat-box:hover,
  .about-image img:hover,
  .hero-btn:hover,
  .quote-form button:hover{

    transform:none !important;
  }

}

/* ========================= */
/* PRODUCTS PAGE GRID */
/* ========================= */

.products-page-section{

  padding:140px 80px;

  background:#050505;

  min-height:100vh;
}

/* GRID */

.products-grid{

  display:grid;

  grid-template-columns:
  repeat(3, 1fr);

  gap:35px;
}

/* PRODUCT CARD */

.product-card{

  background:#111;

  border-radius:28px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,0.06);

  transition:0.4s ease;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.3);

  display:flex;

  flex-direction:column;
}

/* HOVER */

.product-card:hover{

  transform:
  translateY(-10px);

  box-shadow:
  0 25px 60px rgba(255,191,0,0.15);

  border-color:
  rgba(255,191,0,0.25);
}

/* IMAGE */

.product-card img{

  width:100%;

  height:260px;

  object-fit:cover;

  display:block;
}

/* CONTENT */

.product-content{

  padding:28px;

  display:flex;

  flex-direction:column;

  flex:1;
}

/* TITLE */

.product-content h3{

  font-size:24px;

  line-height:1.4;

  margin-bottom:18px;

  color:#fff;
}

/* TEXT */

.product-content p{

  color:#aaa;

  line-height:1.8;

  font-size:15px;

  margin-bottom:28px;

  flex:1;
}

/* BUTTON */

.product-content a{

  display:flex;

  justify-content:center;

  align-items:center;

  width:100%;

  padding:15px;

  background:#ffbf00;

  color:#000;

  text-decoration:none;

  border-radius:12px;

  font-weight:700;

  transition:0.3s;
}

.product-content a:hover{

  transform:translateY(-4px);
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:1100px){

  .products-grid{

    grid-template-columns:
    repeat(2, 1fr);
  }

}

@media(max-width:768px){

  .products-page-section{

    padding:100px 20px;
  }

  .products-grid{

    grid-template-columns:1fr;

    gap:25px;
  }

  .product-card img{

    height:220px;
  }

  .product-content{

    padding:22px;
  }

  .product-content h3{

    font-size:22px;
  }

}



/* MOBILE */

@media(max-width:768px){

  .hero-btn{

    width:fit-content !important;

    min-width:200px !important;

    max-width:220px !important;

    padding:15px 24px !important;
  }

}


/* ========================= */

/* ========================= */
/* LENIS FIX */
/* ========================= */

html.lenis,
html.lenis body{

  height:auto;
}

.lenis.lenis-smooth{

  scroll-behavior:auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent]{

  overscroll-behavior:contain;
}

.lenis.lenis-stopped{

  overflow:hidden;
}
/* ========================= */
/* DISABLE CARD ANIMATION WHILE SWIPING */

.slider.dragging .card,
.slider.dragging .card img{

  transition:none !important;

  transform:none !important;
}
/* ========================= */
/* PRODUCT BUTTONS */
/* ========================= */

.product-buttons{

  display:flex;

  gap:12px;

  margin-top:25px;
}

.details-btn,
.enquiry-btn{

  flex:1;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:14px;

  border:none;

  border-radius:12px;

  font-weight:700;

  cursor:pointer;

  text-decoration:none;

  transition:0.3s;
}

.details-btn{

  background:#ffbf00;

  color:#000;
}

.enquiry-btn{

  background:#1a1a1a;

  color:#fff;

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

.details-btn:hover,
.enquiry-btn:hover{

  transform:translateY(-3px);
}

/* ========================= */
/* PRODUCT IMAGE */
/* ========================= */

.product-image{

  overflow:hidden;
}

.product-image img{

  transition:0.4s ease;
}

.product-card:hover .product-image img{

  transform:scale(1.04);
}

/* ========================= */
/* MODAL FEATURES */
/* ========================= */

.modal-features{

  margin-top:25px;

  padding-left:20px;

  color:#ddd;

  line-height:2;
}

.modal-features li{

  margin-bottom:10px;
}

/* ========================= */
/* MODAL ENQUIRY */
/* ========================= */

.modal-enquiry-btn{

  margin-top:35px;

  display:inline-flex;

  justify-content:center;

  align-items:center;

  width:220px;

  padding:16px;

  background:#ffbf00;

  color:#000;

  text-decoration:none;

  border-radius:14px;

  font-weight:700;
}

/* ========================= */
/* MOBILE */
/* ========================= */

@media(max-width:768px){

  .product-buttons{

    flex-direction:column;
  }

  .modal-enquiry-btn{

    width:100%;
  }

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

  .slider{

    scroll-snap-type:none;
  }

}