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

body {
  font-family: 'Inter', sans-serif;
  background-color: #000;
  color: #ffffff;
}
* {
  margin: 0;
   box-sizing: border-box !important;
   transition: ease all 0.50s;

 }

 html {
   scroll-behavior: smooth;
   position: relative;
 }

/* cart slide--------------- */
.cart-overlay {
  position: fixed;
  top: 105px;
  left: 0;
  width: 100%;
  height: calc(100vh - 105px); /* dynamic height below navbar */
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: none;
  
}

.cart-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 602px;
  height: 100%;
  background: #141516;
  padding: 40px;
  color: #fff;
  font-family: Inter, sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* enable scroll if content overflows */
}

/* HEADER */
.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 84px;
  flex-shrink: 0;
}

.cart-header h2 {
  font-size: 50px;
  font-weight: 700;
  line-height: 55px;
  padding-top: 20px;
}

.close-icon {
  width: 52.72px;
  height: 52.72px;
  cursor: pointer;
  margin-bottom: 15px;
}

/* DIVIDER */
.cart-divider {
  width: 100%;
  border-bottom: 1px solid #484848;
  margin: 20px 0;
  flex-shrink: 0;
}

/* CART CONTENT */
.cart-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-grow: 1;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-image {
  width: 194px;
  height: 126.5px;
  object-fit: contain;
}

.product-details {
  flex-grow: 1;
}

.product-title,
.product-price {
  font-size: 25px;
  font-weight: 400;
  line-height: 28px;
}

.product-price {
  margin-top: 10px;
}
.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid #fff;
  height: 45px;
  width: 130px;
  border-radius: 30px;
  overflow: hidden;
  font-family: Inter, sans-serif;
}

.qty-btn {
  width: 40px;
  height: 100%;
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  border-right: 1px solid #fff;
}

.qty-btn:last-of-type {
  border-right: none;
  border-left: 1px solid #fff;
}

.qty-value {
  flex-grow: 1;
  text-align: center;
  color: #2C98E9; /* blue */
  font-size: 20px;
  font-weight: 500;
}

.cart-note {
  font-size: 25px;
  font-weight: 400;
  line-height: 28px;
  margin-top: 20px;
}

/* FOOTER WRAPPER */
.cart-footer-wrapper {
  flex-shrink: 0;
}

.cart-footer {
  display: flex;
  flex-direction: column;
}

.order-summary {
  display: flex;
  justify-content: space-between;
  font-size: 25px;
  line-height: 28px;
  margin-top: 30px;
}

.checkout-btn {
  width: 100%;
  max-width: 521px;
  height: 75px;
  background: #2C98E9;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  border-radius: 15px;
  border: none;
  cursor: pointer;
  margin-top: 30px;
}
/* 🔒 Prevent background scroll */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none;
}


/* 🔹 Initially off-screen */
.cart-container {
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

/* 🔹 When active (slide in) */
.cart-overlay.show .cart-container {
  transform: translateX(0);
}

/* Optional: Fade in background */
.cart-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
  display: block; /* Always block so animation can happen */
  pointer-events: none; /* Prevent clicks until shown */
}

.cart-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* navbar cart btn */
.cart-icon-wrapper {
  position: relative;
}

.cart-qty-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: red;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 50%;
  min-width: 20px;
  text-align: center;
}


/* ✅ When cart is open and screen is desktop/laptop */
@media (min-width: 1024px) {
.cart-overlay.show ~ .hero-section .left-hero img {
  width: 80% !important;
  height: 80% !important;
  object-fit: cover;
  object-position: left center !important; /* 👈 Pushes image to the left */
}

  .cart-overlay.show ~ .hero-section .left-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  .cart-overlay.show ~ .hero-section .left-hero .arrow-right {
    right: 230px !important;
  }
  .cart-overlay.show ~ .hero-section .left-hero .arrow-btn {
    display: block;
    position: absolute;
    top: 40% !important;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: white;
    font-size: 22px;
    border-radius: 50%;
    cursor: pointer;
    padding: 6px 12px !important;
    
  }
}

/* ✅ When cart is open and screen is desktop/laptop */
@media (min-width: 1600px) {
.cart-overlay.show ~ .hero-section .left-hero img {
  width: 95% !important;
  height: 90% !important;
  object-fit: cover;
  object-position: left center !important; /* 👈 Pushes image to the left */
}

  .cart-overlay.show ~ .hero-section .left-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  .cart-overlay.show ~ .hero-section .left-hero .arrow-right {
    right: 75px !important;
  }
  .cart-overlay.show ~ .hero-section .left-hero .arrow-btn {
    display: block;
    position: absolute;
    top: 40% !important;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: white;
    font-size: 22px;
    border-radius: 50%;
    cursor: pointer;
    padding: 6px 12px !important;
    
  }
}
@media (max-width: 1440px) {
  .cart-container {
    max-width: 540px;
    padding: 35px;
  }

  .cart-header h2 {
    font-size: 42px;
  }

  .checkout-btn {
    font-size: 28px;
    height: 70px;
  }

  .product-title,
  .product-price,
  .cart-note,
  .order-summary {
    font-size: 22px;
  }
}

@media (max-width: 1200px) {
  .cart-container {
    max-width: 480px;
    padding: 30px;
  }
.cart-overlay{
  margin-top: -10px !important;
}
  .cart-header h2 {
    font-size: 36px;
  }

  .checkout-btn {
    font-size: 24px;
    height: 65px;
  }

.product-image {
  width: 154px;
  height: 116.5px;
  object-fit: contain;
}
  .product-title,
  .product-price,
  .cart-note,
  .order-summary {
    font-size: 20px;
  }
}

@media (max-width: 992px) {
  .cart-container {
    max-width: 480px;
    padding: 25px;
  }

  .cart-header h2 {
    font-size: 30px;
  }
.cart-overlay{
  margin-top: -17px !important;
  width: 100% !important;
  height: 91% !important;
}
  .checkout-btn {
    font-size: 22px;
    height: 60px;
  }

  .product-title,
  .product-price,
  .cart-note,
  .order-summary {
    font-size: 18px;
  }

  .close-icon {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 768px) {
  .cart-container {
    width: 100%;
    max-width: 100%;
    padding: 20px;
  }
.cart-overlay{
  margin-top: -40px !important;
}
  .cart-header h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .checkout-btn {
    font-size: 20px;
    height: 55px;
  }

  .product-title,
  .product-price,
  .cart-note,
  .order-summary {
    font-size: 16px;
  }

  .product-image {
    width: 150px;
    height: auto;
  }

  .quantity-control {
    height: 40px;
    width: 110px;
  }

  .close-icon {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 480px) {
  .cart-container {
    padding: 15px;
  }

.product-image {
  width: 100px;
  height: 88.5px;
  object-fit: contain;
}
  .checkout-btn {
    font-size: 18px;
    height: 50px;
  }

  .cart-header h2 {
    font-size: 22px;
  }

  .product-title,
  .product-price,
  .cart-note,
  .order-summary {
    font-size: 15px;
  }
  
}


/* MAIN CONTAINER */
.hero-section {
  max-width: 1600px; /* Limit total width */
  margin: auto;
  padding: 60px clamp(30px, 2vw, 40px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 100px; /* Exact gap from Figma */
}

/* LEFT SECTION */
.left-hero {
  flex: 0 0 auto;
  width: 1082px; /* Fixed width from Figma */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Laptop L: 1440px–1599px */
@media (max-width: 1599px) and (min-width: 1440px) {
  .hero-section {
    transform: scale(0.9);
    transform-origin: top center;
     margin-bottom: -150px;
      gap: 30px; /* Exact gap from Figma */
  }
}


/* Laptop M: 1280px–1439px */
@media (max-width: 1439px) and (min-width: 1354px) {
  .hero-section {
    transform: scale(0.83);
    transform-origin: top center;
     margin-bottom: -250px;
     gap: 30px;
  }
}

/* Laptop S: 1024px–1279px */
@media (max-width: 1354px) and (min-width: 1168px) {
  .hero-section {
    transform: scale(0.7);
    transform-origin: top center;
     margin-bottom: -400px;
  }
}
@media (max-width: 1168px) and (min-width: 1104px) {
  .hero-section {
    transform: scale(0.65);
    transform-origin: top center;
     margin-bottom: -400px;
  }
}
@media (max-width: 1104px) and (min-width: 1023px) {
  .hero-section {
    transform: scale(0.6);
    transform-origin: top center;
     margin-bottom: -500px;
  }
}
/* Hide or modify on mobile/tablet */
@media (max-width: 1023px) {
  .hero-section {
    flex-direction: column;
    gap: 24px;
    transform: none !important;
    padding: 20px;
  }

  .left-hero,
  .right-hero {
    width: 100%;
  }

  .right-hero {
    padding: 0 10px;
  }
}


/* === MAIN IMAGE WRAPPER === */
.main-image {
  position: relative;
  width: 100%;
  height: 775px;
  border-radius: 35px;
  overflow: hidden;
}

/* === DESKTOP IMAGE STYLES === */
.desktop-img {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  top: 0;
  left: 0;
  z-index: 1;
}

/* === MOBILE IMAGE STYLES === */
.mobile-img {
  display: none;
  position: absolute;
  object-fit: cover;
  border-radius: 25px;
  opacity: 0.75;
  top: 107px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 367.49px;
  height: 437px;
}

/* === ACTIVE IMAGE CLASS === */
.desktop-img.active,
.mobile-img.active {
  display: block;
}

/* === ARROW BUTTONS === */
.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  font-size: 30px;
  background: rgba(35, 36, 38, 1);
  color: white;
  cursor: pointer;
  z-index: 2;
}

.arrow-left {
  left: 20px;
}

.arrow-right {
  right: 20px;
}

/* === SWIPER DOTS === */
.mobile-dots {
  display: none;
  text-align: center;
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  z-index: 5;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ffffff;
  opacity: 0.5;
  border-radius: 50%;
  margin: 0 4px;
  cursor: pointer;
}

.dot.active {
  background: #2C98E9;
  opacity: 1;
}

/* === RESPONSIVE MEDIA QUERY === */
@media (max-width: 768px) {
  .main-image {
    position: relative;
    width: 100%;
    max-width: 390px;       /* Optional: Lock for consistency */
    height: 500px;
    margin: 0 auto;
    border-radius: 25px;
    overflow: hidden;
  }

  .desktop-img {
    display: none !important;
  }

  .arrow-btn {
    display: none;
  }

  .mobile-img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    opacity: 1;
    z-index: 1;
  }

  .mobile-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 5;
    gap: 8px;
  }

  .dot {
    width: 10px;
    height: 10px;
    background: #ffffff;
    opacity: 0.5;
    border-radius: 50%;
  }

  .dot.active {
    background: #2C98E9;
    opacity: 1;
  }
}


@media (min-width: 769px) {
  .mobile-img {
    display: none !important;
  }

  .mobile-dots {
    display: none;
  }
}


/* === THUMBNAILS === */
.thumbnail-wrapper {
  width: 100%;
  margin-top: 30px;
}

.thumbnail-row {
  display: flex;
  gap: 2%;
  justify-content: center;
  flex-wrap: nowrap;
}

.thumbnail-row img {
  width: 32%;
  aspect-ratio: 335.65 / 295;
  border-radius: 20px;
  opacity: 0.75;
  object-fit: cover;
  cursor: pointer;
}

/* Mobile Slider default hidden */
.mobile-thumbnail-slider {
  display: none;
  position: relative;
  margin-top: 20px;
  width: 100%;
}

/* Slider inner wrapper */
.mobile-slider-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 5px;
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

/* Each slide */
.slide {
  flex: 0 0 auto;
  scroll-snap-align: center;
  border-radius: 20px;
}

.slide img {
  width: clamp(100px, 30vw, 120px);
  height: auto;
  /* maintain aspect ratio automatically */
  border-radius: 10px;
  object-fit: cover;
  opacity: 0.75;
}

/* Navigation buttons */
.mobile-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #232426;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  /* icon size ko adjust karne ke liye */
  cursor: pointer;
  width: 40px;
  /* slightly larger to make perfect circle with padding */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Extra class for customization */
.mobile-prev {
  left: -20px;
  transform: translateY(-50%) rotate(180deg);
  /* Figma angle applied here */
}

.mobile-next {
  right: -20px;
}

/* === MOBILE THUMBNAIL SLIDER === */
.mobile-thumbnail-slider {
  display: none;
}

@media (max-width: 768px) {
  .thumbnail-wrapper {
    display: none !important;
  }

   .thumbnail-row {
    display: none;
  }

  .mobile-thumbnail-slider {
    display: block;
  }

  /* Mobile Slider default show */
  .mobile-thumbnail-slider {
    display: block;
    position: relative;
    margin-top: 20px;
    width: 100%;
    min-height: auto;
    /* Extra safe to avoid layout shift */
  }

  /* Each slide */
  .slide {
    width: 32%;
  }

  .slide img {
    width: 100%;
  }

  /* Navigation buttons */
  .mobile-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #232426;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 8px;
    cursor: pointer;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  /* Extra class for customization */
  .mobile-prev {
    left: -20px;
    /* transform: translateY(-50%) rotate(180deg); */
  }

  .mobile-next {
    right: -20px;
  }
}
@media (max-width: 400px) {
  .mobile-thumb-slide {
    flex: 0 0 30%; /* Smaller thumbnails */
  }

  .mobile-thumb-wrapper {
    gap: 2vw;
  }
}


/* RIGHT SECTION */
.right-hero {
  flex: 0 0 auto;
  width: 467px; /* Fixed from Figma */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Main Heading */
.right-hero h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 55px;
}

/* Subheading */
.subtext {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  margin-top: 10px;
}

/* What's Included Box */
.info-box {
  background: rgba(56, 56, 56, 1);
  padding: 20px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.info-box h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 35px;
  margin: 0;
  
  
  
}

.info-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-box li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.03em;
  margin-top: 10px;
}

.info-box li img {
  width: 32px;
  height: 33px;
  
}

/* PRICE AREA */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 30px;
}

.price {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: #2C98E9;
}

.small-note {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: white;
}

/* CHECKBOX AREA */
.checkbox-area {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 20px;
  margin-top: 10px;
  color: white;
  line-height: 1.4;
  width: 441.0005187988281px;
height: 101px;

border-radius: 2px;
border-width: 1px;

}

/* Style checkbox to match transparent look with only border */
.checkbox-area input[type="checkbox"] {
  width: 47px;
  height: 17px;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1.5px solid #888;
  border-radius: 3px;
  margin-top: 4px;
  cursor: pointer;
  position: relative;
}

/* Show a checkmark when selected */
.checkbox-area input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* ADD TO CART BUTTON */
.add-to-cart {
    width: 100%;
    max-width: 447px;
    height: 75px;
    border-radius: 15px;
    font-weight: 700;
    font-size: clamp(20px, 3vw, 32px);
    margin-bottom: 15px;
    margin-top: 45px;
    border: 1px solid #383838;
    background-color: #383838; /* default white */
    color: black;
    cursor: not-allowed;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* When button is enabled (after checkbox is checked) */
  .add-to-cart:enabled {
    background-color: #2C98E9;
    color: white;
    cursor: pointer;
    border: none;
  }


/* TERMS UNDER BUTTON */
.terms {
  
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
  margin-top: 20px;
}
.terms a{
font-family: 'Inter', sans-serif; 
font-weight: 600;
font-size: 20px;
line-height: 100%;
letter-spacing: 0%;
color: white;
text-decoration: none;

}

/* FEATURE BOX */
.feature-box {
  border: 2px solid #5C5C5C;
  border-radius: 15px;
  padding: 20px;
  margin-top: 30px;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  line-height: 30px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

  

@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 20px;
    box-sizing: border-box;
  }

  .left-hero,
  .right-hero {
    width: 100%;
    box-sizing: border-box;
  }

  .right-hero h1 {
    width: 100%;
    font-weight: 700;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.2;
    margin-top: 30px;
  }

  .subtext {
    width: 100%;
    font-family: Inter;
    font-weight: 400;
    font-size: clamp(18px, 5.5vw, 25px);
    line-height: 1.3;
    margin-top: 10px;
  }

  .info-box {
    width: 100%;
    opacity: 0.75;
    border-radius: 25px;
    margin-top: 20px;
    padding: 15px;
    box-sizing: border-box;
  }

  .info-box h3 {
    font-family: Inter;
    font-weight: 700;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.3;
    padding-top: 5px;
  }

  .info-box li {
    font-family: Inter;
    font-weight: 400;
    font-size: clamp(12px, 4vw, 15px);
    line-height: 1.4;
    padding-top: 5px;
  }

  .info-box li img {
    width: clamp(30px, 10vw, 42px);
    height: clamp(30px, 10vw, 42px);
  }

  .price-row {
    margin-top: 40px;
  }

  .price {
    opacity: 0.75;
    font-family: Inter;
    font-weight: 700;
    font-size: clamp(35px, 12vw, 55px);
    line-height: 1;
  }

  .small-note {
    opacity: 0.75;
    font-family: Inter;
    font-weight: 400;
    font-size: clamp(12px, 4vw, 15px);
    line-height: 1.2;
  }

  .checkbox-area {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    margin-top: 25px;
    align-items: flex-start;
  }

  .checkbox-area p {
    flex: 1 1 200px;
    font-family: Inter;
    font-weight: 400;
    font-size: clamp(16px, 5.5vw, 20px);
    line-height: 1.4;
  }

  .checkbox-area input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 4px;
  }

  .add-to-cart {
    width: 100%;
    height: 60px;
    font-family: Helvetica;
    font-weight: 700;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 60px;
    text-align: center;
    margin-top: 80px;
    border-radius: 6px;
  }

  .terms {
    width: 100%;
    padding-top: 20px;
    font-family: Inter;
    font-weight: 400;
    font-size: clamp(16px, 5.5vw, 20px);
    line-height: 1.4;
  }

  .terms a {
    font-family: Inter;
    font-weight: 600;
    font-size: clamp(16px, 5.5vw, 20px);
    line-height: 1.4;
  }

  .feature-box {
    width: 100%;
    font-family: Inter;
    font-weight: 400;
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.6;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }
}



/* ----------------- box section-------------------------- */
.box-section {
  text-align: center;
  padding: clamp(20px, 5vw, 60px);
  max-width: 100%;
}

.box-section h2 {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 50px);
  line-height: clamp(36px, 6vw, 75px);
  margin-bottom: 40px;
}

.box-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.box-item {
  max-width: 517px;
  width: 100%;
}

.box-item img {
  width: 100%;
  height: auto;
  max-height: 429px;
  border-radius: 35px;
  object-fit: cover;
}

.box-item p {
  font-family: Inter, sans-serif;
  margin-top: 10px;
  font-weight: 400;
  font-size: 25px;
  text-align: center;
}

/* By default desktop view visible */
.box-items {
  display: flex;
}

/* By default mobile swiper hidden */
.box-swiper {
  display: none;
}

/* Mobile View */
@media (max-width: 768px) {
  .box-items {
    display: none;
  }
  .box-swiper {
    display: block;
    width: 100%;
  }

  .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px; /* add some padding inside slide */
  }

  .swiper-slide img {
    width: 100%;
    max-height: 400px;
    border-radius: 35px;
    object-fit: cover;
  }

  .swiper-slide p {
    margin-top: 10px;
    font-size: 20px;
  }
}

/* Laptop sizes control - keep desktop layout same in laptops */

@media (max-width: 1600px) {
  .box-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
  }

  .box-item {
    flex: 1 1 30%;
    max-width: 500px;
  }
}

@media (max-width: 1400px) {
  .box-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(15px, 2vw, 30px);
  }

  .box-item {
    flex: 1 1 32%;
    max-width: 450px;
  }
}

@media (max-width: 1200px) {
  .box-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(10px, 2vw, 20px);
  }

  .box-item {
    flex: 1 1 33%;
    max-width: 400px;
  }
}

@media (max-width: 992px) {
  .box-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(8px, 2vw, 15px);
  }

  .box-item {
    flex: 1 1 33%;
    max-width: 350px;
  }
}
/* 1600px to 1919px range ka control: pure desktop layout maintain */

@media (min-width: 1600px) and (max-width: 1919px) {
  .box-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(25px, 3vw, 50px);
  }

  .box-item {
    flex: 1 1 30%;
    max-width: 520px;
  }
}


/* --------------------------------------------------Tech section-3 */
.tech-section {
  text-align: center;
  padding: clamp(20px, 5vw, 60px);
  max-width: 100%;
}

.tech-section h2 {
  font-family: Inter;
  font-weight: 700;
  font-size: 50px;
  line-height: 75px;
}

.tech-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: 70px;
}

.tech-item {
  width: 306px;
  height: 175px;
  background-color: #383838;
  border-radius: 20px;
}

.tech-item img {
  width: 43px;
  height: 42px;
  margin-top: 30px;
  object-fit: contain;
}

.tech-item p {
  font-family: Inter;
  font-weight: 400;
  font-size: 25px;
  text-align: center;
}

/* Hide mobile swiper in desktop */
.tech-swiper {
  display: none;
}

/* Swiper Mobile View */
@media (max-width: 768px) {
  .tech-items {
    display: none;
  }

  .tech-section h2 {
    font-size: 30px;
    text-align: left;
  }

  .tech-swiper {
    display: block;
    padding-bottom: 40px;
  }

  .tech-swiper .swiper-slide {
    width: 295px !important;
    background-color: #333;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto;
  }

  .tech-swiper .swiper-slide img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }

  .tech-swiper .swiper-slide p {
    font-size: 16px;
    color: #fff;
  }
}
/* Laptop sizes control - keep desktop layout same in laptops for tech-section */

@media (max-width: 1600px) {
  .tech-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
  }

  .tech-item {
    width: 300px;
    height: 175px;
  }
}

@media (max-width: 1400px) {
  .tech-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(15px, 2vw, 30px);
  }

  .tech-item {
    width: 290px;
    height: 175px;
  }
}

@media (max-width: 1200px) {
  .tech-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(10px, 2vw, 20px);
  }

  .tech-item {
    width: 280px;
    height: 175px;
  }
}

@media (max-width: 992px) {
  .tech-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(8px, 2vw, 15px);
  }

  .tech-item {
    width: 270px;
    height: 175px;
  }
}

/* 1600px to 1919px ka media query - Tech Section */

@media (min-width: 1600px) and (max-width: 1919px) {
  .tech-items {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
  }

  .tech-item {
    width: 310px;
    height: 180px;
  }

  .tech-item img {
    width: 43px;
    height: 42px;
    margin-top: 30px;
    object-fit: contain;
  }

  .tech-item p {
    font-size: 25px;
  }
}



/* ----------------------------------------------sectionnn-4 */

.tech-specs {
  background-color: #000;
  color: #fff;
  padding: 40px 20px;
  max-width: 90%;
  margin: auto;
  font-family: inter;
}

.spec-title {
  text-align: center;
  font-family: Inter;
font-weight: 700;
font-size: 50px;
line-height: 75px;
letter-spacing: 0%;


  margin-bottom: 40px;
}
.spec-item span{

  font-family: Inter;
font-weight: 400;
font-size: 25px;
line-height: 80px;
letter-spacing: 0%;

}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #545556;
  padding: 10px 0;
  font-size: 16px;
}

@media (max-width: 768px) {
  .spec-grid {
    grid-template-columns: 6fr;
  }

  .spec-title {
    text-align: left;
    font-family: Inter;
font-weight: 700;
font-size: 30px;
line-height: 100%;
letter-spacing: -2%;

  }

  .spec-item span{
    font-family: Inter;
font-weight: 400;
font-size: 15px;
line-height: 55px;
letter-spacing: 0%;

  }
}


/* last section */

    /* Common H2 */
    h2 {
      text-align: center;
      font-size: clamp(24px, 5vw, 50px);
      margin-bottom: 40px;
      max-width: 100%;
    }

    /* Desktop Container */
    .faq-container {
      max-width: 900px;
      margin: 0 auto;
      max-width: 90%;
    }

    .faq-tabs {
     border: 3px solid #383838;
      border-radius: 15px;
      overflow: hidden;
      width: 1599;
height: 537;


    }

    .tab-headers {
      display: flex;
      background-color: #111;
    }

    .tab-headers button {
      flex: 1;
      padding: 15px;
      border: none;
      background: none;
      color: #fff;
      font-weight: 500;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s;
      border-bottom: 2px solid transparent;
    }

    .tab-headers button.active {
      color: #2196f3;
      border-bottom: 2px solid #2196f3;
    }

    .tab-content-desktop {
      display: none;
      background-color: #111;
      padding: 20px;
    }

    .tab-content-desktop.active {
      display: block;
    }

    .accordion-item-desktop {
      border-bottom: 1px solid #333;
    }

    .accordion-header-desktop {
      padding: 15px 10px;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }

    .accordion-body-desktop {
      display: none;
      padding: 10px 10px 20px;
      font-size: 16px;
      color: #ccc;
    }

    .accordion-item-desktop.active .accordion-body-desktop {
      display: block;
    }

    .arrow-desktop {
      transition: transform 0.3s;
    }

    .accordion-item-desktop.active .arrow-desktop {
      transform: rotate(180deg);
    }

    /* MOBILE DESIGN */
    .mobile-container {
      display: none;
    }

    .tab-section-mobile {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .tab-btn-mobile {
      background-color: #1c1c1c;
      color: #fff;
      padding: 15px 20px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 18px;
      border: none;
      text-align: left;
      position: relative;
      cursor: pointer;
    }

    .tab-btn-mobile.active {
      
background: linear-gradient(0deg, #2C98E9, #2C98E9);

    }

    .tab-btn-mobile .arrow-mobile {
      position: absolute;
      right: 20px;
      transition: transform 0.3s;
    }

    .tab-btn-mobile.active .arrow-mobile {
      transform: rotate(180deg);
    }

    .tab-content-mobile {
      display: none;
      background-color:transparent;
      padding: 15px;
      border-radius: 10px;
    }

    .tab-content-mobile.active { display: block; }

    .accordion-item-mobile {
      border-bottom: 1.5px solid #333;
      padding: 10px 0;
    }

    .accordion-header-mobile {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
    }

    .accordion-body-mobile {
      display: none;
      padding: 10px 0 0 0;
      font-size: 14px;
      color: #ccc;
    }

    .accordion-item-mobile.active .accordion-body-mobile { display: block; }
    .accordion-item-mobile.active .acc-arrow-mobile { transform: rotate(180deg); }

    .acc-arrow-mobile {
      transition: transform 0.3s;
    }

    /* MEDIA QUERIES */
    @media (max-width: 767px) {
      .faq-container { display: none; }
      .mobile-container { display: block; }
    }

    @media (min-width: 768px) {
      .faq-container { display: block; }
      .mobile-container { display: none; }
    }