body {
     margin: 0;
     padding: 0;
     font-family: "Poppins", sans-serif;;
     overflow-x: hidden;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

 .navbar-transparent :hover {
     background-color: white;
     color: black;
 }

 .navbar-transparent :hover .nav-item {
     color: black;
 }

.nav-item{
    text-transform:uppercase;
}

  /* make close icon visually similar size to toggler */
  /*.navbar-toggler { position: relative; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }*/
  /*.navbar-toggler .close-icon { font-size: 1.6rem; line-height: 1; cursor: pointer; color: #fff; }
   { /* keep bootstrap default icon visible when needed */ }
  /*.navbar-toggler:focus { outline: none; box-shadow: none; }*/
  
/* Hide the cross by default */
.navbar-toggler .icon-close {
  display: none;
}

/* When button has .collapsed → show hamburger */
.navbar-toggler.collapsed .icon-hamburger {
  display: inline;
}
.navbar-toggler.collapsed .icon-close {
  display: none;
}

/* When menu is open (no .collapsed) → show cross */
.navbar-toggler:not(.collapsed) .icon-hamburger {
  display: none;
}
.navbar-toggler:not(.collapsed) .icon-close {
  display: inline;
}


 

 /* .navbar {
    margin-left: 200px;
 } */


  .navbar-brand img {
      max-height: 70px;
    }

    .nav-link {
      font-size: 14px;
      padding: 1rem;
      position: relative;
    }
    /* .mega-menu{
             position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     width: 70vw;
     background-color: #fff;
     border-top: 1px solid #ddd;
     display: none;
     z-index: 999;
    } */

    /*.dropdown-menu.mega-menu {*/
    /*  width:max-content;*/
    /*  left: 0;*/
    /*  right: 0;*/
    /*  top: 100%;*/
    /*  padding: 2rem;*/
    /*  background: #f8f9fa;*/
    /*  border: none;*/
    /*  display: none;*/
    /*}*/

    /*.dropdown-menu h6{*/
    /*    font-weight: bold;*/
    /*}*/

    /*.dropdown:hover .dropdown-menu {*/
    /*  display: block;*/
    /*}*/
    /*.mega-menu h6{*/
    /*    border-bottom: 2px solid black;*/
    /*        display: inline;*/
    /*white-space: nowrap;*/
    /*}*/
    /*.mega-menu a{*/
    /*    text-decoration: none;*/
    /*    color: black;*/
    /*    white-space: nowrap;*/
    /*    text-transform:capitalize;*/
    /*}*/

    /*.mega-menu a:hover{*/
    /*    color: #004225;*/
        /* transform: translateX(-50%); */
    /*}*/

    /*.mega-menu .row > div {*/
    /*  margin-bottom: 1rem;*/
    /*}*/

    .form-control::placeholder {
      color: #666;
    }

    @media (max-width: 991px) {
      .dropdown-menu.mega-menu {
        position: static;
        width: 100%;
      }
    }

 /*   
  header .sticky-top {
    background-color: white; /* or any solid background 
    z-index: 1030;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  }
  
  /* Optional: Make background visible on hover */
 header:hover {
     background-color: white;
     /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
 }


 /* .sticky-top {
     /* background-color: white; */

 /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
 } */
 
 
 
#customCarousel {
  position: relative;
  width: 100%;
  height: 530px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navigation arrows */
/*

/* Dots */
.dots {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 3;
}

.dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.dots button.active {
  background: white;
}

 .navbar-logo img {
     height: 80px;
     width: 80px;
 }

 .top-row {
     font-size: 14px;
 }

 .form-control {
     border-radius: 20px;
 }

 .form-control:focus {
     box-shadow: none;
     border-color: #ccc;
 }

 .nav-categories a {
     margin: 0 10px;
     font-weight: 500;
     color: #000;
     text-decoration: none;
 }


 .custom-search {
     max-width: 200px;
     width: 100%;
 }

 .search-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
 }

 .circle-category {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: auto;
     padding: 1rem 0;
     background-color: white;
 }

 .circle-category .circle-item {
     flex: 0 0 auto;
     width: 100px;
     text-align: center;
     margin-right: 1rem;
 }

 .circle-item img {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #ddd;
 }

 .circle-item p {
     font-size: 0.8rem;
     margin-top: 0.5rem;
 }

 /* Mega Menu Styles */
 .megamenu {
     position: relative;
 }

 .nav-item.megamenu {
     position: static;
     /* Important to keep the dropdown centered */
 }

 .megamenu-content {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     width: 70vw;
     background-color: #fff;
     border-top: 1px solid #ddd;
     display: none;
     z-index: 999;
 }

 .megamenu:hover .megamenu-content {
     display: block;
 }

 .megamenu-content ul li a {
     display: block;
     padding: 5px 0;
     color: #000;
     text-decoration: none;
     font-size: 14px;
 }

 .megamenu-content ul li a:hover {
     text-decoration: underline;
 }

 /* .slider {
     position: relative;
     width: 100%;
     max-width: 1000px;
     margin: auto;
     overflow: hidden;
 }

 .slides {
     display: flex;
     transition: transform 0.5s ease-in-out;
     /* width: 500%; */
 /* 5 slides 
 } */
 .indicators-bottom-right {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 10;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
}

.carousel-indicators .active {
    background-color: #fff;
}

 .carousel-control-prev,
 .carousel-control-next {
     display: none;
 }


 .carousel-item img {
     object-fit: cover;
     height:500px;
     width: 100%;
 }

 .carousel-caption {
     top: 20%;
     bottom: auto;
     left: 10%;
     right: 50%;
     text-align: left;
 }

 .carousel-caption h1 {
     font-size: 48px;
     font-weight: 700;
     color: #fff;
 }

 .carousel-caption p {
     font-size: 18px;
     color: #eee;
     margin-top: 15px;
 }

 .carousel-caption .btn {
     background-color: #ff0080;
     border: none;
     padding: 10px 24px;
     margin-top: 20px;
     font-weight: 600;
 }

 .carousel-indicators [data-bs-target] {
     background-color: #fff;
     width: 12px;
     height: 12px;
     border-radius: 50%;
 }

 @media (max-width: 768px) {
     .carousel-caption h1 {
         font-size: 28px;
     }

     .carousel-caption p {
         font-size: 14px;
     }
 }

 /* .slide {
     width: 100%;
     flex-shrink: 0;
 }

 .slide img {
     width: 100%;
     height: 500px;
     display: block;
     object-fit: contain;

 }

 .dots {
     text-align: center;
     padding: 10px 0;
 }

 .dot {
     height: 12px;
     width: 12px;
     margin: 0 5px;
     background-color: #bbb;
     display: inline-block;
     border-radius: 50%;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }

 .dot.active {
     background-color: #555;
 } */



 .section-title {
     text-align: center;
     text-transform: uppercase;
     font-size: 13px;
     margin-bottom: 8px;
     color: #666;
 }

 .tab-bar {
     text-align: center;
     font-size: 24px;
     /*font-weight: 600;*/
     margin-bottom: 30px;
 }

 .tab-bar span {
     margin: 0 20px;
     /* border-bottom: 2px solid #000; */
     padding-bottom: 6px;
 }

 .carousel-wrapper {
     position: relative;
     max-width: 100%;
     overflow: hidden;
 }

 .carousel {
     display: flex;
     transition: transform 0.5s ease-in-out;
      /*gap: 16px;*/
 }

 .prooduct-card {
     flex: 0 0 25%;
     /* 4 items per row */
     box-sizing: border-box;
     padding: 8px;
     text-align: center;
     margin-bottom: 50px;
     /*scroll-snap-align: start;*/
 }

 .prooduct-card img {
     width: 315px;
     height: 315px;
     border: 1px solid #ddd;
 }

 .product-title {
     margin: 15px 0 15px;
     font-size: 18px;
     font-weight: 300;
     text-transform:capitalize;
 }

 .product-price {
     font-weight: bold;
     margin-bottom: 15px;
 }

 .reviews {
     font-size: 12px;
     margin-bottom: 15px;
     color: #555;
 }

 .add-to-cart {
     position: relative;
     padding: 7px;
     width: 70%;
     background: black;
     color: white;
     text-transform: uppercase;
     font-weight: 00;
     border: 1px solid #000;
     overflow: hidden;
     z-index: 1;
     cursor: pointer;
     font-size:14px;
 }

 .add-to-cart::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: white;
     z-index: -1;
     transition: left 0.4s ease;
 }

 .add-to-cart:hover::before {
     left: 0;
 }

 .add-to-cart:hover {
     color: black;
 }


 .nav-btn {
     position: absolute;
     top: 40%;
     transform: translateY(-50%);
     font-size: 18px;
     background: rgba(255, 255, 255, 0.8);
     border: none;
     padding: 10px;
     cursor: pointer;
     display: none;
     z-index: 10;
 }

 .carousel-wrapper:hover .nav-btn {
     display: block;
 }

 .prev-btn {
     left: 0;
 }

 .next-btn {
     right: 0;
 }

 @media (max-width: 1024px) {
     .product-card {
         flex: 0 0 33.33%;
     }
      .search-bar input::placeholder {
    font-size: 10px;
  }
   .search-bar input {
    height: 30px;;
  }
 }

 @media (max-width: 768px) {
     .product-card {
         flex: 0 0 50%;
     }
 }

 @media (max-width: 480px) {
     .product-card {
         flex: 0 0 100%;
     }
 }


 .top-picks-title {
     text-align: center;
     font-size: 2rem;
     font-weight: bold;
     margin-bottom: 30px;
     color: #093b1b;
 }

 /*.swiper-slide {*/
 /*    width: auto;*/
 /*    max-width: 180px;*/
 /*    flex-shrink: 0;*/
 /*}*/

 .card {
     border-radius: 15px;
     /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
     overflow: hidden;
 }

 .card img {
     height: 200px;
     object-fit: cover;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
 }

 .card-body {
     padding: 10px;
 }
 
 .card-body h5{
     text-transform:uppercase;
 }

 .price {
     color: green;
     font-weight: 600;
 }

 .original-price {
     text-decoration: line-through;
     color: #999;
     font-size: 0.9rem;
 }

 .slider-wrapper {
     display: flex;
     align-items: stretch;
     gap: 15px;
     /* overflow-x: hidden; */
     position: relative;
 }

 .fixed-card {
     flex: 0 0 200px;
 }

 .fixed-card img {
     height: 400px;
     width: 250px;
     border-radius: 10px;
 }
 
 

 .carousel {
     width: 100%;
     overflow: hidden;
 }

 .carousel-inner {
     display: flex;
     transition: transform 0.5s ease;
     /*gap: 15px;*/
 }

 .carousel-item {
     display: flex;
     gap: 15px;
 }

 /*.product-card {*/
 /*    width: 190px;*/
 /*    flex-shrink: 0;*/
 /*    margin-right: 20px;*/
 /*}*/

 /*.product-card .card {*/
 /*    height: 100%;*/
 /*}*/

 /*.product-card .card-body {*/
 /*    padding: 10px;*/
 /*}*/

 .price {
     font-weight: bold;
     color: green;
 }

 .cut-price {
     text-decoration: line-through;
     color: gray;
     font-size: 14px;
 }

 .offer {
     background-color: #d1e7dd;
     color: green;
     padding: 2px 6px;
     font-size: 12px;
     border-radius: 12px;
 }

 .contactt-btn {
     background-color: black;
     color: white;
     font-size: 14px;
     width: 100%;
     margin-top: 5px;
     border-radius: 0px;
 }

 .contactt-btn:hover {
     border: 1px solid black;
 }

 .carousel-control-next {
     position: absolute;
     top: 50%;
     right: -20px;
     transform: translateY(-50%);
     z-index: 2;
 }

 .carousel-control-next-icon {
     background-color: black;
     color: white;
     border-radius: 50%;
     width: 35px;
     height: 35px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 22px;
 }

 .promo-card {
     /* border-radius: 15px; */
     overflow: hidden;
     position: relative;
     background-size: cover;
     background-position: center;
     height: 100%;
     min-height: 500px;
 }

 .promo-content {
     position: absolute;
     top: 50%;
     left: 10%;
     transform: translateY(-50%);
     color: white;
     z-index: 2;
 }

 .promo-content h2 {
     font-size: 2rem;
     font-weight: bold;
 }

 .promo-content p {
     font-size: 1.25rem;
 }

 .promo-btn {
     background-color: black;
     color: white;
     border: none;
     padding: 6px 16px;
     font-weight: bold;
     margin-top: 10px;
     border-radius: 5px;
 }

 .promo-overlay {
     position: absolute;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.4);
     z-index: 1;
 }

 .right-promo .promo-card {
     height: 50%;
     min-height: 250px;
 }




 .tab-nav .nav-link {
     color: black;
     background: #f8f9fa;
     margin-right: 10px;
     border-radius: 10px;
     padding: 5px 15px;
     display: flex;
     align-items: center;
     width: 230px;
     /* ⬅️ Increase width */
     height: 100px;
     /* ⬅️ Increase height */
 }

 .tab-nav .nav-link img {
     width: 80px;
     height: 80px;
     border-radius: 10px;
     margin-right: 10px;
 }

 .tab-nav .nav-link.active {
     background: linear-gradient(0deg, #666565, rgb(238, 237, 237));
    border-bottom: 4px solid black;
     color: white;
 }

 .productt-card {
     position: relative;
     overflow: hidden;
     /* border-radius: 15px; */
     margin-bottom: 30px;
     width: 100%;
     height: 260px;
 }

 .product-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }

 .product-card-wrapper {
     flex: 0 0 calc(20% - 16px);
     /* 5 per row with spacing */
 }

 @media (max-width: 992px) {
     .product-card-wrapper {
         flex: 0 0 calc(33.33% - 16px);
         /* 3 per row on tablets */
     }
 }

 @media (max-width: 768px) {
     .product-card-wrapper {
         flex: 0 0 calc(50% - 16px);
         /* 2 per row on mobile */
     }
 }

 @media (max-width: 576px) {
     .product-card-wrapper {
         flex: 0 0 100%;
         /* 1 per row on small screens */
     }
 }

 .productt-card img {
     width: 100%;
     height: 100%;
     /* border-radius: 15px; */
     object-fit: cover;
 }

 .contact-btn {
     position: absolute;
     top: 45%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: black;
     color: white;
     border: none;
     padding: 10px 20px;
     /* border-radius: 5px; */
     display: none;
     z-index: 2;
     width: 170px;
     height: 40px;
 }

 .productt-card:hover .contact-btn {
     display: block;
 }

 .price-tag {
     position: absolute;
     bottom: 10px;
     left: 15px;
     color: white;
     font-weight: bold;
     font-size: 16px;
 }

 .price-tag del {
     color: #ccc;
     font-weight: normal;
     margin-left: 10px;
 }

 /* Gift Sets */


 .carrd {
     /* border-radius: 16px; */
     /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); */
     overflow: hidden;
 }

 .carrd-img-top {
     height: 275px;
     width: 290px;
     object-fit: cover;
     /* border-radius: 12px; */
 }

 .tab-content {
     margin-top: 2rem;
 }

 .slider-wrapper {
       display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding: 10px 0;
     /* Firefox */
 }

 .slider-wrapper::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari, Opera */
 }

 .slider-card {
     flex: 0 0 290px; /* fixed width */
    scroll-snap-align: start;
 }

 .tab-layout {
     display: flex;
     flex-direction: row;
     gap: 1.5rem;
     flex-wrap: nowrap;
 }

 .fixedd-card {
     min-width: 370px;
     flex-shrink: 0;
     object-fit: cover;
 }

 @media (max-width: 768px) {
     .tab-layout {
         flex-direction: column;
     }

     .fixed-card {
         min-width: 100%;
     }

     .slider-wrapper {
         padding-top: 1rem;
     }
 }

 .nav-tabs .nav-link {
     font-weight: 500;
 }

 .slider-card .nav-btn {
     position: absolute;
     bottom: 250px;
     background-color: black;
     color: white;
     border: none;
     padding: 6px 12px;
     border-radius: 50%;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: 5;
     font-size: 0.9rem;
     width: 40px;
     height: 40px;
 }

 .slider-card.first-card:hover .prev-btn,
 .slider-card.last-card:hover .next-btn {
     opacity: 1;
 }

 .prev-btn {
     left: 15px;
 }

 .next-btn {
     right: 10px;
 }





 /* .gift-tab-nav .nav-link.active {
     background: linear-gradient(90deg, #FF0080, #FF8C00);
     color: white;
 }

 .gift-product-card img {
     width: 275px;
     height: 275px;
     object-fit: cover;
     border-radius: 10px;
 }

 .tab-pane {
     display: none;
 }

 .tab-pane.active {
     display: block;
 }

 .carousel-wrapper {
     position: relative;
     overflow: hidden;
 }

 .carousel-items {
     display: flex;
     transition: transform 0.5s ease;
 }

 .carousel-card {
     flex: 0 0 calc(33.333% - 1rem);
     margin-right: 1rem;
 }

 .carousel-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: #fff;
     border: none;
     font-weight: bold;
     padding: 10px;
     z-index: 10;
 }

 .carousel-prev {
     left: -40px;
 }

 .carousel-next {
     right: -40px;
 } */



 
  .vibe-banner {

     /* fallback in case image fails */
     background-image: url('./../images/diwali_banner.webp');
     /* Replace with actual image path */
     background-size: cover;
     background-position: center;
     border-radius: 10px;
     padding: 40px 30px;
     color: #000;
     display: flex;
     align-items: center;
     height: 300px;
 }

 .vibe-text h2 {
     font-weight: 700;
     font-size: 28px;
     margin-bottom: 5px;
 }

 .vibe-text p {
     font-size: 16px;
     margin-bottom: 20px;
 }

 .vibe-button {
     background-color: black;
     color: #fff;
     font-weight: 600;
     padding: 10px 25px;
     border: none;
     /* border-radius: 6px; */
     text-transform: uppercase;
 }

 @media (max-width: 768px) {
     /*.vibe-banner {*/
     /*    flex-direction: column;*/
     /*    text-align: center;*/
     /*    padding: 30px 15px;*/
     /*}*/

     .vibe-image {
         margin-top: 20px;
     }
 }


 .testimonial-section {
     text-align: center;
     padding: 50px 0;
     background: #fff;
 }

 .testimonial-title {
     color: #e6007e;
     font-weight: bold;
     font-size: 2.5rem;
 }

 .testimonial-stars i {
     color: #fbc634;
     font-size: 24px;
 }

 .testimonial-desc {
     color: #555;
     max-width: 800px;
     margin: 20px auto;
     font-size: 16px;
     min-height: 60px;
 }

 .testimonial-thumbs {
     display: flex;
     justify-content: center;
     gap: 40px;
     margin-top: 40px;
     flex-wrap: wrap;
 }

 .testimonial-thumbs .thumb {
     text-align: center;
     transition: 0.3s;
 }

 .testimonial-thumbs img {
     width: 120px;
     height: 120px;
     object-fit: cover;
     border-radius: 50%;
     opacity: 0.4;
     filter: grayscale(100%);
     transition: 0.3s ease;
 }

 .testimonial-thumbs .active img {
     opacity: 1;
     filter: grayscale(0%);
     transform: scale(1.1);
 }

 .testimonial-thumbs .name {
     font-size: 14px;
     margin-top: 8px;
     color: #aaa;
     font-weight: normal;
 }

 .testimonial-thumbs .active .name {
     color: #000;
     font-weight: bold;
 }

 .testimonial-thumbs .active .name {
     color: #000;
     font-weight: bold;
 }

 .footer {
     background-color: #171515;
     color: #fff;
     padding: 60px 20px 20px;
 }

 .footer h5 {
     color: #fff;
     font-weight: 600;
     margin-bottom: 20px;
 }

 .footer p,
 .footer a {
     color: #bbb;
     font-size: 14px;
     margin: 0;
     text-decoration: none;
 }

 .footer p {
     margin-bottom: 10px;
 }


 .footer a:hover {
     color: #fff;
     text-decoration: none;
 }

 .footer .logo {
     font-size: 32px;
     font-weight: bold;
     margin-bottom: 20px;
 }

 .footer .social-icons a {
     color: #fff;
     font-size: 18px;
     margin-right: 15px;
     display: inline-block;
 }

 .footer .icon-text {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
 }

 .footer .icon-text i {
     font-size: 18px;
     margin-right: 10px;
 }

 .footer-bottom {
     border-top: 1px solid #3a3a3a;
     margin-top: 40px;
     padding-top: 15px;
     text-align: center;
     font-size: 13px;
     color: #999;
 }
 
 .whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  background-color: #20b955;
  transform: scale(1.1);
  text-decoration: none;
  color: #fff;
}

.whatsapp-float::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  animation: pulse 1.5s infinite;
  z-index: -1;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}


 /*.swiper-button-prev,*/
 /*.swiper-button-next {*/
 /*    color: #000;*/
 /*    font-weight: bold;*/
 /*}*/

 .swiper-vertical-buttons {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /*.swiper-button-prev,*/
 /*.swiper-button-next {*/
 /*    position: static !important;*/
 /*    margin: 5px 0;*/
 /*}*/

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 2px;
  cursor: pointer;
}

 .thumbnail-img.swiper-slide-thumb-active {
     border-color: #000;
 }
 
 #thumbsSwiper {
  height: 350px; /* Adjust based on desired height */
  width: 80px;   /* Adjust as needed */
  overflow: hidden;
}

#thumbsSwiper .swiper-wrapper {
  flex-direction: column !important; /* Force vertical layout */
}

.thumb-slide {
  height: 70px;
  margin-bottom: 10px;
}

 .main-image {
     height: 550px;
     width: 100%;
     border-radius: 10px;
 }

 .price-old {
     text-decoration: line-through;
     color: gray;
     margin-left: 20px;
 }

 .color-circle {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: inline-block;
     border: 1px solid #ccc;
     margin-right: 10px;
 }

 .color-selected {
     border: 2px solid black;
 }

 .qty-box {
     width: 60px;
     text-align: center;
 }

 .personalize-btn {
     background-color: #e91e63;
     color: white;
     font-weight: 500;
     font-size: 22px;
 }

 .personalize-btn:hover {
     background-color: white;
     color: #e91e63;
     border: 1px solid #e91e63;
 }

 .swiper-container {
     height: 450px;
     margin: 15px 0;
 }

 /*.swiper-slide img {*/
 /*    width: 100%;*/
 /*    border-radius: 6px;*/
 /*}*/

 .tab-button {
     border-radius: 10px;
     padding: 8px 20px;
     font-weight: 500;
 }

 .tab-button.active {
     background-color: black;
     color: white;
 }

 .description-box {
     background-color: #f5f5f5;
     padding: 25px;
     border-radius: 12px;
     margin-bottom: 40px;
 }

 .features-list li {
     margin-bottom: 15px;
 }

 .features-list strong {
     font-weight: 500;
 }

 .reviews-section h2 {
     color: #004225;
     font-weight: 700;
 }

 .rating-bar {
     height: 8px;
     background-color: #ddd;
     border-radius: 5px;
     overflow: hidden;
 }

 .rating-bar-fill {
     background-color: #f5a623;
     height: 100%;
 }

 .review-btn {
     background-color: #ec008c;
     color: white;
     font-weight: 500;
     font-size: 14px;
 }

 .review-btn:hover {
     background-color: #d50078;
 }

 .ask-btn {
     border: 1px solid black;
     font-weight: 500;
     font-size: 14px;
 }

 .ask-btn:hover {
     background-color: #f2f2f2;
 }

 .rating-stars {
     color: #f5a623;
 }

 .rating-breakdown {
     font-size: 14px;
     color: #333;
 }

 .rating-text {
     font-size: 15px;
 }

 .filter-btn {
     margin-top: 30px;
     background-color: black;
     color: #fff;
     padding: 8px 24px;
     border-radius: 8px;
     font-weight: 500;
     border: none;
 }

 .filter-btn:hover {
     background-color: #ed028c;
     color: white;
 }

 @media (max-width: 768px) {
     .right-promo {
         flex-direction: column;
     }

     .right-promo .promo-card {
         height: 200px;
     }
 }

 @media (max-width: 1200px) {
     .product-card {
         width: 180px;
     }
 }

 @media (max-width: 992px) {
     .product-card {
         width: 160px;
     }
 }

 @media (max-width: 768px) {
     .product-card {
         width: 140px;
     }
 }

 /* Responsive */
 @media (max-width: 992px) {
     .product-card {
         flex: 0 0 33.33%;
     }
 }

 @media (max-width: 768px) {
     .product-card {
         flex: 0 0 50%;
     }
 }

 @media (max-width: 576px) {
     .product-card {
         flex: 0 0 100%;
     }
 }

 /* Responsive */
 @media (max-width: 992px) {
     .product-card {
         flex: 0 0 33.33%;
     }
 }

 @media (max-width: 768px) {
     .product-card {
         flex: 0 0 50%;
     }
 }

 @media (max-width: 576px) {
     .product-card {
         flex: 0 0 100%;
     }
 }


 @media (max-width: 768px) {
     .top-row {
         flex-direction: column;
         align-items: flex-start !important;
         gap: 10px;
     }

     .nav-categories {
         flex-wrap: wrap;
         gap: 10px;
         justify-content: start !important;
     }

     .circle-category {
         padding-left: 0.5rem;
     }
 }


 .banner {
     background: url('../images/inner.webp') no-repeat center center/cover;
     height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: black;
     text-align: center;
     font-size: 2rem;
     font-weight: bold;
 }

 .filter-section {
     background: #f8f9fa;
     padding: 15px;
     border-radius: 5px;
 }

 .prodduct-card {
     
     text-align: center;
     margin-bottom:30px;
 }

 .prodduct-card img {
      height: 350px; 
     width: 100%;
     border: 1px solid #0000005e;
     transition: transform 0.4s ease;
     /*padding: 10px;*/
     /*object-fit: contain;*/
 }
 


 .promo-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
 }


 .video-container {
     position: relative;
     width: 100%;
     height: 700px;
     overflow: hidden;
 }

 .bg-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .carousel-caption {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: start;
     padding-left: 5%;
     color: white;
     text-align: left;
 }

 .modal-overlay {
       top: 0;
  left: 0;
     display: none;
     position: fixed;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.6);
     z-index: 999;
     overflow: auto;
 }

 /* Modal Box */
 .modal-box {
     background: white;
     width: 500px;
     margin: 5% auto;
     padding: 30px;
     /*border-radius: 10px;*/
     position: relative;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     overflow-y: auto;
     
 }

 /* Close Button */
 .modal-close {
     position: absolute;
     top: 15px;
     right: 20px;
     font-size: 24px;
     color: #333;
     cursor: pointer;
 }

 /* Inputs and Textarea */
 .modal-box input,
 .modal-box textarea {
     width: 100%;
     margin-top: 8px;
     margin-bottom: 8px;
     padding: 10px 10px;
     font-size: 14px;
     border: 1px solid #ddd;
     /*border-radius: 6px;*/
 }

 .send-button {
     background-color: black;
     color: white;
     width: 150px;
      margin: 20px auto 0;
 }
 
 .modal-box .button-wrapper {
  display: flex;
  justify-content: center; /* center horizontally */
  /*margin-top: 20px;*/
}

 .story-section {
     padding: 60px 0;
     /* font-family: 'Segoe UI', sans-serif; */
 }

 .story-image {
     border-radius: 20px;
     width: 100%;
     height: auto;
     object-fit: cover;
     margin-bottom: 20px;
 }

 .story-title {
     font-size: 14px;
     color: #111;
     font-weight: 500;
 }

 .story-heading {
     font-size: 32px;
     font-weight: 700;
     line-height: 1.4;
     color: #000;
 }

 .story-buttons .btn {
     border-radius: 30px;
     padding: 8px 14px;
     margin-right: 10px;
     /*margin-top: 10px;*/
     font-size: 14px;
     font-weight: 500;
     display: inline-flex;
     align-items: center;
 }

 .story-buttons .btn i {
     margin-right: 8px;
 }

 .btn-brand {
     background-color: black;
     color: #fff;
     border: none;
 }

 .btn-outline-secondary {
     border: 1px solid #ccc;
     background-color: #fff;
     color: #000;
 }

 .story-description p {
     font-size: 16px;
     color: #333;
     margin-bottom: 10px;
     
 }

 .image-stack {
     position: relative;
     width: 100%;
     padding-right: 20px;
 }

 .image-stack img {
     border-radius: 20px;
     width: 100%;
     object-fit: cover;
 }

 .image-main {
     width: 300px;
     height: 100%;
     object-fit: cover;
 }

 .image-overlay {
     position: absolute;
     width: 60%;
     bottom: -30px;
     right: 0;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     z-index: 2;
 }

 @media (max-width: 767px) {
     .image-overlay {
         position: relative;
         bottom: 0;
         right: 0;
         margin-top: 20px;
         width: 100%;
     }
 }


 .stats-section {
     background-color: #ff2da0;
     color: white;
     padding: 30px 0;
 }

 .stat-item {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 30px;
 }

 .stat-icon {
     font-size: 2rem;
     border: 3px solid white;
     border-radius: 50%;
     padding: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 100px;
     min-height: 100px;
     background-color: #160E4B;
 }

 .stat-text h3 {
     margin: 0;
     font-size: 1.8rem;
     font-weight: bold;
 }

 .stat-text p {
     margin: 0;
     font-size: 1rem;
 }

 .why-us-card {
     background-color: #f2f6fb;
     border-radius: 12px;
     padding: 30px;
     text-align: center;
     height: 100%;
     position: relative;
 }

 .why-us-icon {
     width: 100px;
     height: 100px;
     border: 3px solid #ff2da0;
     border-radius: 50%;
     display: flex;
     position: relative;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px auto;
      /* Half of icon height */
   
 }

 /*.why-us-icon img {*/
 /*    width: 40px;*/
 /*}*/

 .why-us-section h2 {
    color: black;
    font-size: 35px;
    /* font-weight: 200; */
    /*font-family: 'Roboto', sans-serif;*/
    /*text-transform: uppercase;*/
    /*letter-spacing: 1.5px;*/
    /*font-variant: all-petite-caps;*/
    text-align: center;
 }
 
 .contact-section h2 {
    color: black;
    font-size: 35px;
    /* font-weight: 200; */
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-variant: all-petite-caps;
    text-align: center;
 }
 
 
 
 /*Blog Page*/
 /* MAIN BLOG SECTION */
.main-blog-container {
  padding: 20px 0;
}

/* LEFT SECTION */
.blog-left-section {
  padding: 15px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
}

.blog-left-head h4 {
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #007bff;
  display: inline-block;
  margin-bottom: 15px;
  padding-bottom: 5px;
}

.resent-articles .row,
.blog-categories-contain li {
  margin-bottom: 15px;
}

.b-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.blog-categories-contain li {
  list-style: none;
}

.blog-categories-contain a {
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}

.blog-categories-contain a:hover {
  color: #007bff;
}

/* BLOG CARD GRID */
.blog-card {
  background: #fff;
  /*border-radius: 8px;*/
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.card-content h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.card-meta {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.card-tags {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.read-more-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 6px 15px;
  background-color: black;
  color: #fff;
  text-decoration: none;
  /*border-radius: 4px;*/
  font-size: 14px;
  transition: background 0.3s ease;
}

.read-more-btn:hover {
  background-color: white;
  color:black;
  border:1px solid black;
}

/* PAGINATION */
.blog-nav {
  text-align: center;
  margin-top: 30px;
}

.product-button-nav nav {
  display: inline-block;
}

.product-button-nav nav .pagination {
  justify-content: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .card-image img {
    height: 180px;
  }

  .blog-left-section {
    margin-bottom: 30px;
  }
  .image-stack{
  padding-right: 0px;
  }
}



input[type="range"].form-range {
  width: 100%;
  height: 6px;
  background: transparent;
  appearance: none;
}

/* WebKit browsers (Chrome, Safari) */
input[type="range"].form-range::-webkit-slider-runnable-track {
  height: 6px;
  background: black;
  border-radius: 3px;
}

input[type="range"].form-range::-webkit-slider-thumb {
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid black;
  margin-top: -5px;
  cursor: pointer;
}

/* Firefox */
input[type="range"].form-range::-moz-range-track {
  height: 6px;
  background: black;
  border-radius: 3px;
}

input[type="range"].form-range::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid black;
  cursor: pointer;
}

/* Internet Explorer / Edge (old versions) */
input[type="range"].form-range::-ms-track {
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"].form-range::-ms-fill-lower {
  background: black;
}

input[type="range"].form-range::-ms-fill-upper {
  background: black;
}

input[type="range"].form-range::-ms-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid black;
  cursor: pointer;
}



/*New Design Styles*/



.search-bar input {
     border: none;
     border-radius: 5px 0 0 5px;
     height: 40px;
     background-color: #e8e8e8;
 }

 .search-bar input:focus {
     background-color: #e8e8e8;
 }

 .search-bar button {
     border-radius: 0 5px 5px 0;
     background-color: #000;
     color: white;
 }

 .quick-order-btn {
     width:auto;
     background: #e31592;
     color: white;
     border: 1px solid #e31592;
     padding: 8px 16px;
     font-weight: 500;
     border-radius: 4px;
 }

 .quick-order-btn:hover {
     color: #e31592;
 }
 /*.mega-menu {*/
 /*    width: 250px;*/
 /*    background: #fff;*/
 /*    border: 1px solid #ccc;*/
 /*    display: none;*/
 /*    position: absolute;*/
 /*    left: 0;*/
 /*    top: 100%;*/
 /*    z-index: 1000;*/
 /*}*/

 /*.nav-item.dropdown:hover .mega-menu {*/
 /*    display: block;*/
 /*}*/

 /*.mega-menu .dropdown-item {*/
 /*    padding: 5px 15px;*/
 /*    white-space: nowrap;*/
 /*}*/

 @media (max-width: 991px) {
     .dropdown-mega {
         position: static;
         display: none;
         flex-wrap: wrap;
     }

     .nav-item.dropdown.show .dropdown-mega {
         display: flex;
     }
 }

/* Base nav-link */
.navbar-nav > .nav-item > .nav-link {
  color: black;
  font-weight: 400;
  font-size: 14px;
  padding: 10px 16px;
  text-transform: capitalize;
  text-decoration: none;
}

/* Inner span for underline */
.navbar-nav > .nav-item > .nav-link .link-text {
  position: relative;
  display: inline-block; /* restrict underline to text width */
}

/* Underline effect */
.navbar-nav > .nav-item > .nav-link .link-text::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* adjust as needed */
  width: 0%;
  height: 3px;
  background-color: black;
  transition: width 0.3s ease-in-out;
}

/* Hover */
.navbar-nav > .nav-item > .nav-link:hover {
  color: black;
}
.navbar-nav > .nav-item > .nav-link:hover .link-text::before {
  width: 100%;
}

/* Keep Bootstrap dropdown arrow intact */
.navbar-nav .dropdown-toggle::after {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  content: "";
  border-top: 0.35em solid;
  border-right: 0.35em solid transparent;
  border-left: 0.35em solid transparent;
}



 /* Mega Menu */
 .dropdown-mega {
     position: static;
 }

 .dropdown-menu.megamenu {
     width: 100%;
     left: 0;
     right: 0;
     top: 100%;
     padding: 1rem;
     background-color: #f8f9fa;
     border-top: 3px solid #e31592;
 }

 @media (max-width: 991px) {
     .dropdown-menu.megamenu {
         position: static !important;
     }
 }

 .navbar-dark {
     background-color: white;
 }
 
  .about-banner {
     background-image: url('./../images/4.jpg') ; 
     background-size: cover;
     color: white;
     text-align: center;
     padding: 200px 0;
 }

 .contact-banner {
     background-image: url('./../images/4.jpg') ; 
     background-size: cover;
     color: white;
     text-align: center;
     padding: 200px 0;
 }

 .contact-banner h1 {
     font-size: 48px;
     font-weight: 600;
 }

 .contact-banner p {
     font-size: 18px;
 }

 .contact-box {
     background: #f5f5f5;
     padding: 10px 20px;
     border-radius: 10px;
     text-align: center;
     transition: all 0.3s;
     height: 100%;
 }

 .contact-box:hover {
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 }

 .contact-icon {
     font-size: 35px;
     color: #000;
     /* background: #fff; */
     padding: 12px;
     /* border-radius: 50%; */
     /* border: 2px solid #000; */
     margin-bottom: 8px;
     display: inline-block;
 }

 @media (max-width: 767px) {
     .contact-banner h1 {
         font-size: 32px;
     }
 }

 .contact-section {
     padding: 60px 0;
 }

 .contact-img {
     width: 100%;
     max-height: 500px;
     border-radius: 12px;
     object-fit: cover;
     height: 500px;
 }

 .form-control {
     border-radius: 6px;
     /*padding: 14px;*/
 }

 .form-textarea {
     height: 150px;
 }

 .btn-send {
     background-color: #000;
     color: #fff;
     font-weight: 600;
     padding: 12px 30px;
     border-radius: 4px;
     transition: 0.3s ease;
 }

 .btn-send:hover {
     background-color: #222;
     color: white;
 }
 
 
 .video-card {
     position: relative;
     border-radius: 10px;
     overflow: hidden;
     height: 400px;
 }

 .video-card img {
     width: 100%;
     height: auto;
     display: block;
 }

 .play-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     /* background: rgba(255, 255, 255, 0.8); */
     border: 5px solid white;
     width: 70px;
     height: 70px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: transform 0.3s;
 }

 .play-button:hover {
     transform: translate(-50%, -50%) scale(1.1);
 }

 .play-button i {
     font-size: 30px;
     color: white;
 }

.swiper-button-prev,
.swiper-button-next {
    background: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    top: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Correct arrow color */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px;
    color: black !important; /* force black arrow */
}

/* Replace Swiper’s mask icons with text arrows */
.swiper-button-prev::after,
.swiper-button-next::after {
    content: ''; /* remove default */
}

.swiper-button-prev::before {
    content: '‹';  /* left arrow */
    font-size: 30px;
    color: black;
}

.swiper-button-next::before {
    content: '›';  /* right arrow */
    font-size: 30px;
    color: black;
}

 /*.swiper {*/
 /*    padding-bottom: 40px;*/
 /*}*/

 .partner-slide {
     /*border: 1px solid #ccc;*/
     border-radius: 4px;
     /*padding: 20px;*/
     text-align: center;
     background-color: #fff;
 }

 .partner-slide img {
     max-width: 100%;
     max-height: 50px;
     object-fit: contain;
 }

 .swiper.partners-swiper {
     padding-bottom: 50px;
     position: relative;
 }

 .partner-navigation {
     position: absolute;
     bottom: 10px;
     right: 10px;
     display: flex;
     gap: 10px;
     z-index: 10;
 }

 .partners-prev,
 .partners-next {
     position: static;
     width: 32px;
     height: 32px;
     background: #fff;
     border-radius: 50%;
     border: 1px solid #ddd;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .partners-prev::after,
 .partners-next::after {
     font-size: 20px;
     color: #000;
 }


 .credentials-section {
     background-image: url('./../images/credentials.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     padding: 40px 0;
     position: relative;

 }

 .cred-box {
     padding: 20px 10px;
 }

 .cred-content {
     display: flex;
     /* flex-direction: column; */
     align-items: center;
     text-align: center;
     gap: 8px;
 }

 .cred-icon {
     width: 60px;
     height: 60px;
     object-fit: contain;
     margin-bottom: 10px;
 }

 .cred-value {
     font-size: 35px;
     font-weight: bold;
     margin: 0;
 }

 .cred-label {
     margin: 0;
     font-size: 0.9rem;
 }


.product-card {
  text-align: center;
  margin-bottom: 15px;
}

.product-img {
  border: 1px solid #0000005e;   /* border only around image */
  overflow: hidden;              /* keeps zoom inside */
}

.product-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.product-img:hover img {
  transform: scale(1.08);  /* smooth zoom inside border */
}


 .product-title {
      font-weight: 600; 
     margin: 10px 0;
     font-size: 15px;
     white-space: nowrap;      /* stay on one line */
  overflow: hidden;         /* hide overflow text */
  text-overflow: ellipsis;
 }

 .product-size {

     font-weight: 500;
     margin-bottom: 10px;
 }

 .enquiry-btn {
     background-color: #000;
     color: #fff;
     border: none;
     padding: 10px 20px;
     margin-top: 10px;
 }

 .show-more-btn {
     background-color: #000;
     color: #fff;
     border: none;
     padding: 10px 30px;
     margin: 20px auto;
     display: block;
 }

 .hidden-card {
     display: none;
 }


 /* .swiper {
     padding: 30px 50px;
     position: relative;
 } */

 .swiper-slide {
     width: auto;
     text-align: center;
 }

 .category-img {
     width: 100%;
     height: 350px;
     /*object-fit: cover;*/
     border-radius: 16px;
 }

 .category-title {
     margin-top: 10px;
     font-size: 1rem;
     font-weight: 600;
 }

/* Navigation buttons */
.nav-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 18px;
    
    box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 10;
    
}

.productCategorySwiper:hover .nav-button {
  opacity: 1;               /* show on hover */
  visibility: visible;
}



/* Left button – half out, half in */
.swiper-button-prev-category {
    left: 8px;  /* half width = 25px goes outside */
}

/* Right button – half out, half in */
.swiper-button-next-category {
    right: 10px;
}

/* Hover effect */
/*.nav-button:hover {*/
/*    background: #f44336;*/
/*    color: #fff;*/
/*    transform: translateY(-50%) scale(1.1);*/
/*    box-shadow: 0px 6px 18px rgba(0,0,0,0.3);*/
/*}*/



 @media (max-width: 576px) {
     .category-img {
         width: 100%;
         height: 100%;
     }
 }

 .footer {
     background-color: #1a1a1a;
     color: #fff;
     padding: 40px 20px 20px;
 }

 .footer h6 {
     font-weight: bold;
     margin-bottom: 15px;
 }

 .footer a {
     color: #fff;
     text-decoration: none;
     display: block;
     margin-bottom: 8px;
     font-size: 15px;
 }
 
 .footer p a {
  display: inline;   /* keeps it on the same line */
}

 /* .footer a:hover {
     text-decoration: underline;
 } */

 .footer .social-icons a {
     margin-right: 10px;
     font-size: 18px;
     color: #fff;
 }

 .footer .form-control {
     background-color: transparent;
     border: 1px solid #fff;
     color: #fff;
     border-radius: 10px;
 }

 .footer .form-control::placeholder {
     color: #ccc;
 }

 .footer .btn-submit {
     background-color: #fff;
     color: #000;
     font-weight: bold;
     border: none;
     width: 100%;
     border-radius: 10px;
 }

 .footer-logo {
     width: 150px;
     margin-bottom: 20px;
 }

 .footer small {
     font-size: 14px;
     color: #ccc;
 }
 
  .filter-bar {
     gap: 10px;
     flex-wrap: wrap;
 }
 
  .filter-button {
     border: 1px solid #ddd;
     background-color: #fff;
     color: #000;
     font-weight: 500;
     padding: 6px 16px;
     border-radius: 6px;
     font-size: 14px;
     white-space: nowrap;
     transition: all 0.2s ease;
 }

 .filter-button.active {
     background-color: #000;
     color: #fff;
 }

 .filter-button span.icon {
     font-size: 12px;
     margin-left: 6px;
 }
 
 .scrollable-dropdown {
  max-height: 250px;   /* set height limit */
  overflow-y: auto;    /* enable vertical scrolling */
}

.mega-menu {
    width: 100%;
    left: 0;
    right: 0;
    top: 100%;
    border: none;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
}

.mega-menu .col-md-3 h6 {
    font-weight: 600;
    margin-bottom: 10px;
}

.mega-menu .dropdown-item {
    padding: 5px 0;
    font-size: 12px;
    color: #555;
    text-transform:capitalize;
    white-space: break-spaces !important; 
}

.mega-menu.show {
    display: block; /* allow Bootstrap JS to toggle */
}

.mega-menu .dropdown-item:hover {
    color: #000;
}

.mega-menu  h6{
    font-size: 12px;
}

@media (min-width: 992px) {
    .navbar .dropdown:hover>.dropdown-menu {
        display: block;
    }
}

.section-title {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  display: block;
  color: black; /* dark navy blue */
}

.section-title span {
  color: #00b2ed; /* yellow */
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #00b2ed;
  margin: 6px auto 0;
  border-radius: 2px;
  position: relative;
}

.section-title::before {
  /*content: "···";*/
  display: block;
  font-size: 20px;
  color: #f6a800;
  margin-bottom: -8px;
}

.price-circle-section {
  background-color: #fff; /* change if needed */
}

.circle-img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.circle-img:hover {
  transform: scale(1.1);
  /*box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);*/
}

 .contact-form h3{
        margin-bottom: 22px;
        margin-left: 12px;
    }
    
    .contact-form p{
        margin-bottom: 22px;
        margin-left: 12px;
    }
    
    .search-btn:hover{
        background-color: #e31592;
    }


@media (max-width: 500px) {
    .vibe-banner {
        height: auto;;
    }
    .testimonial-desc{
    margin-left: 20px;
    margin-right: 20px;
    }
    
    .partner-slide img{
        height: 80px;
    }
    
    .footer-bottom{
         border-top: none !important;
         margin-top: 20px;
    }
   .navbar-nav .dropdown:hover .dropdown-menu{
        width: 300px;
    }
    
    .mega-menu .dropdown-item{
        font-size: 12px;
    }
    .story-buttons{
        margin: 0 4px;
    }
    .story-description p{
        font-size:14px ;
       margin: 0 15px;
    }
    
    .image-stack{
        display: none;
    }
    .story-section{
        padding: 20px 0;
    }
    .contact-img{
        display: none;
    }c
    .contact-form{
        margin:0 15px;
        width: fit-content;;
    }
    .contact-section {
    padding: 20px 0;
}
.search-input{
    margin-bottom: 15px;
}
.search-btn{
    margin-bottom: 15px;
}
.why-us-card p{
    font-size:14px ;
}
}


@media (max-width: 992px) and (min-width:768px) {
    .category-img{
        width: 300px;
        height: auto;
    }
    .contact-img{
        height: 500px;
    }
    .contact-form h3{
        margin-bottom: 5px;
    }
      .contact-form p{
        margin-bottom: 22px;
    }
    .information{
        font-size: 12px;
    }
    .why-us-card p{
        font-size: 12px;
    }
    .search-tab{
        display: none;
    }
}


    .carousel-item img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    /* Optional: set fixed height if needed */
    @media (min-width: 992px) {
      .carousel-item img {
        height: 500px;
      }
    }
    @media (min-width: 768px) and (max-width: 991px) {
      .carousel-item img {
        height: 400px;
      }
    }
    @media (max-width: 767px) {
      .carousel-item img {
        height: 300px;
      }
    }
    
    @media (min-width: 1100px) and (max-width:1440px){
        .contact-img{
            height: 470px;
        }
    }
    
    /* Tablet (≤ 768px) */
@media (max-width: 768px) {
    .banner {
        height: 350px; /* smaller height */
        font-size: 1.5rem; /* reduce font size */
        padding: 0 15px; /* add padding for text */
    }
  .search-bar input::placeholder {
    font-size: 10px;
  }
  .search-bar{
      display: none;
  }
}

/* Mobile (≤ 576px) */
@media (max-width: 576px) {
    .banner {
        height: 250px; /* even smaller height */
        font-size: 1.2rem; /* readable on small screens */
        padding: 0 10px;
    }
}
@media (max-width: 430px) {
  .banner_res {
    background-image: url('../images/inner_mob.webp') !important;
    height: 530px !important;
  }
  .vibe_banner_res{
      background-image: url('../images/diwali_banner_tab.webp') !important;
  }
}
@media (min-width: 880px) and (max-width: 1024px) {
  .banner_res {
    background-image: url('../images/inner_laptop.webp') !important;
    /*height: 530px !important;*/
  }
  .vibe_banner_res{
      background-image: url('../images/diwali_banner_tab.webp') !important;
  }
  .phone{
      font-size: 11px;
  }
  .quick-order-btn{
      font-size: 10px;
  }
}

.announcement-bar {
  font-size: 14px;
  letter-spacing: 0.5px;
  overflow: hidden;        /* important to hide overflow */
  width: 100%;
  position: relative;
}

.announcement-wrapper {
  width: 100%;
  overflow: hidden;        /* hides text outside container */
}

.announcement-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;       /* ensures it starts off-screen on the right */
  animation: scroll-left 15s linear infinite;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}



@media (min-width: 995px) and (max-width: 1199px){
    .navbar-nav > .nav-item > .nav-link{
        font-size: 11px;
    }
}

@media (min-width: 1000px) and (max-width: 1199px) {
.story-description p {
    font-size: 14px;
}
.image-main{
    height: 450px;
}
}

@media (min-width: 768px) and (max-width: 1199px) {
  .cred-box:nth-child(2) {
    border-right: none !important; /* removes the right border */
  }
}

@media  (max-width: 767px) {
  .cred-box:nth-child(1) {
    border-right: none !important; /* removes the right border */
  }
   .cred-box:nth-child(2) {
    border-right: none !important; /* removes the right border */
  }
   .cred-box:nth-child(3) {
    border-right: none !important; /* removes the right border */
  }
}


.tick-icon {
  font-size: 16px;        /* fixed size for all screens */
  min-width: 20px;        /* reserve space so it doesn’t shift with text */
  height: 20px;
  line-height: 24px;      /* vertically centers the checkmark */
  display: inline-flex;   /* makes it align nicely */
  align-items: center;
  justify-content: center;
  margin-right: 8px;      /* spacing before text */
  color: white;           /* optional: color */
  flex-shrink: 0; 
  border-radius: 50%;
  background-color: black;
}

#vision p {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.story-description{
    margin-top: 20px;
}



.fade-slide-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 1s ease forwards;
}

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

@media  (max-width: 767px){
.email-res{
    padding: 0;
}