/* ========== GLOBAL FONT SETUP ========== */

   /* Body text, paragraphs, buttons, nav, etc */
   /* ========== GLOBAL FONT SETUP ========== */

   /* PURE WEBSITE KA DEFAULT FONT */
   /* *{
    font-family: "Playfair Display", serif !important;
} */
   body {
     /* font-family:"Playfair Display", serif !important; */
     font-size: 15px;
     line-height: 1.5;
     color: #222;

   }

   a {
     text-decoration: none !important;
   }

   :root {
     --primary: #e64b41;
   }


   .squre-effect {
     position: relative;
     overflow: hidden;
     z-index: 2;
   }

   .squre-effect::after {
     position: absolute;
     height: 200%;
     width: 0%;
     content: "";
     left: 47%;
     top: -45%;
     transition: all 0.5s ease;
     transform: rotate(45deg);
     opacity: 1;
     background-color: rgba(255, 255, 255, 0.3);

   }

   .squre-effect:hover::after {
     width: 152%;
     left: -39%;
     top: -68%;
     opacity: 0;
   }

   body,
   html {
     overflow-x: hidden;

   }

   .jah-slider-nav {
     display: flex;
     gap: 10px;
   }

   .jah-slider-nav-btn {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: none;
     background: var(--primary);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: 0.2s ease;
   }

   /* Navbar, dropdown, buttons, offcanvas text, etc. sab same font le */
   .navbar-brand,
   .nav-link,
   .dropdown-item,
   .btn,
   small,
   .input-group-text,
   .offcanvas-title,
   .offcanvas .nav-link,
   .carousel-caption,
   .hero-content,
   p,
   span {
     font-family: inherit;
   }

   .sub-head {
     color: var(--primary);
     color: var(--primary);
     font-size: 18px;
     font-weight: 600;
   }

   .heading {
     font-family: "Playfair Display", serif !important;
     font-size: 30px;
     font-weight: 700;
     text-transform: capitalize;
     margin-bottom: 20px;

   }

   .heading-sec {
     font-family: "Playfair Display", serif !important;
     text-transform: capitalize;
     margin-bottom: 30px;
     font-size: 40px;
     font-weight: 800;
   }

   .space {
     padding: 50px 100px;
   }

   #home-banner.home-banner-1 {
     display: block !important;
   }

   #home-banner.home-banner-2 {
     display: none !important;
   }


   /* ========== HEADER STYLES ========== */
   /* Logo styling */
   .logo-box {
     background: #2b2e33 !important;
     padding: 0 20px !important;
     height: 90px;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
   }

   .logo-box .navbar-brand {
     color: #fff !important;
     font-size: 28px !important;
     font-family: 'Georgia', serif !important;
     white-space: nowrap !important;
   }

   /* Header Scroll Hide/Show */
   /* Header Scroll Hide/Show */
   .navbar {
     /* position: fixed !important; */
     top: 0;
     left: 0;
     width: 100%;
     z-index: 99999;
     transition: transform 0.35s ease;
     padding: 0;
   }

   .navbar.hide-header {
     transform: translateY(-100%);
   }


   .img-img {
     height: 89px;
   }



   /* Force Font Awesome icons to use correct font */
   .fa-solid,
   .fa-regular,
   .fa-light,
   .fa-thin,
   .fa-duotone,
   .fa-brands,
   .fas,
   .far,
   .fab {
     font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
     font-weight: 900;
   }

   /* Brands ke liye specifically */
   .fa-brands {
     font-family: "Font Awesome 6 Brands" !important;
     font-weight: 400;
   }

   /* ===== Layout & Base ===== */
   .jah-family-section {
     padding: 40px 40px 60px;
   }

   .jah-family-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
   }

   .jah-family-title {
     font-size: 28px;
     font-weight: 600;
     margin: 0;
     color: #111827;
   }





   /* ===== Product Card ===== */
   .jah-product-card {
     background: transparent;
     border-radius: 16px;
     overflow: visible;
     padding: 0;
   }

   .jah-product-media {
     background: #f8f5f0;
     border-radius: 18px;
     padding: 0px 2px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 14px;
   }

   /* Wrapper parent */
   .jah-product-media {
     position: relative;
     display: inline-block;
     overflow: hidden;
   }

   /* Product Image */
   .jah-product-img {
     max-width: 100%;
     height: auto;
     display: block;
   }

   /* Glossy Shine Layer */
   .jah-product-media::after {
     content: "";
     position: absolute;
     width: 60px;
     height: 160%;
     background: linear-gradient(120deg, rgba(255, 255, 255, 0.8), transparent);
     top: -30%;
     left: -90%;
     transform: rotate(15deg);
     pointer-events: none;
   }

   /* Hover Animation Start */
   .jah-product-media:hover::after {
     animation: sweep 0.7s ease-out forwards;
   }

   /* Sweep Keyframes */
   @keyframes sweep {
     0% {
       left: -90%;
     }

     100% {
       left: 140%;
     }
   }

   /* ===== Sale Badge ===== */
   .jah-badge-sale {
     display: none;
     position: absolute;
     top: 14px;
     left: 14px;
     padding: 4px 12px;
     border-radius: 30px;
     font-size: 11px;
     font-weight: 600;
     background: #ef4444;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: 0.4px;
   }

   /* ===== Hover Side Social Icons ===== */
   .jah-product-actions {
     position: absolute;
     top: 12px;
     right: 12px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     opacity: 0;
     transform: translateX(16px);
     pointer-events: none;
     transition: 0.25s ease;
   }

   .jah-product-media:hover .jah-product-actions {
     opacity: 1;
     transform: translateX(0);
     pointer-events: auto;
   }

   .jah-action-btn {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: none;
     background: #fff;
     color: #111827;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     cursor: pointer;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     transition: 0.2s ease;
   }

   .jah-action-btn:hover {
     transform: translateY(-2px);
     background: #eb2128;
     color: #fff;
   }

   /* ===== Text Details ===== */
   .jah-product-rating {
     font-size: 12px;
     color: #f59e0b;
     margin-bottom: 4px;
   }

   .jah-product-name {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 4px;
     color: #111827;
     text-align: center;
     margin-bottom: 10px;
     font-family: "Playfair Display", serif !important;
   }

   .jah-product-price {
     font-size: 16px;
     font-weight: 600;
     color: #e11d48;
   }

   .jah-product-price del {
     font-size: 12px;
     color: #6b7280;
     margin-left: 6px;
   }

   .jah-product-meta {
     margin-top: 6px;
     font-size: 11px;
     color: #6b7280;
     display: flex;
     align-items: center;
     gap: 6px;
   }

   /* ---------------------------------------- */
   /* Carousel container */
   #customCarousel {
     overflow: hidden;
   }

   /* Zoom effect on active slide */
   #customCarousel .carousel-item img {
     object-fit: cover;
     height: 100%;
     transition: transform 0.5s ease;
   }

   #customCarousel .carousel-item.active img {
     transform: scale(1.05);
   }

   /* Indicators */
   #customCarousel .carousel-indicators button {
     background-color: rgba(255, 255, 255, 0.5);
     width: 12px;
     height: 12px;
     border-radius: 50%;
   }

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

   /* Controls */
   #customCarousel .carousel-control-prev,
   #customCarousel .carousel-control-next {
     width: 50px;
     height: 50px;
     top: 50%;
     transform: translateY(-50%);
     background-color: rgba(0, 0, 0, 0.4);
     border-radius: 50%;
   }

   #customCarousel .carousel-control-prev-icon,
   #customCarousel .carousel-control-next-icon {
     background-size: 50%, 50%;
   }


   /* Navigation styling */
   #header {
     padding: 0 100px;
     /* background: #dfdfff; */
   }

   .navbar-nav .nav-link {
     color: black !important;
     padding: 8px !important;
     font-size: 18px !important;
     font-weight: 600;
     transition: 0.5s;
     border-radius: 20px;

   }

   .navbar-nav .nav-link:hover {
     color: #b74c3a !important;
   }

   .home-pill {
     background: #eb2128 !important;
     color: #fff !important;
     border-radius: 6px !important;
     padding: 6px 16px !important;
   }

   /* Icon styling */
   .icon-box {
     border-left: 1px solid #ddd !important;
     padding: 10px 15px !important;
     text-align: center !important;
   }

   .icon-box i {
     font-size: 20px !important;
     display: block !important;
   }

   .icon-box small {
     font-size: 10px !important;
     letter-spacing: 1px !important;
   }

   .badge-custom {
     position: absolute !important;
     top: -6px !important;
     right: -10px !important;
     background: #b74c3a !important;
     color: #fff !important;
     font-size: 10px !important;
     padding: 2px 6px !important;
     border-radius: 10px !important;
   }

   .icon-wrapper {
     position: relative !important;
     display: inline-block !important;
   }

   .navbar-toggler {
     border: none;
   }

   /* Mobile toggler styling */

   .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(183,76,58,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
   }



   /* ========== HERO SLIDER STYLES ========== */
   /* Banner Height */
   /* Hero Carousel Full Height */
   #heroCarousel {
     position: relative;
   }

   /* Hero slide image */
   /* .hero-slide {
   height: 100vh; 
   min-height: 650px; 
   position: relative; 
   background-size: cover; 
   background-position: center; 
  } */

   /* Hero content positioning */
   .hero-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
     text-align: center;
     padding: 0 15px;
   }

   /* Buttons */


   /* Dark Overlay */
   .hero-slide::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.35);
   }

   /* Text box */
   .hero-content {
     position: absolute;
     top: 50%;
     left: 15%;
     z-index: 10;
     transform: translateY(-50%);
     color: #fff;
     max-width: 550px;
     animation: zoomOut 0.9s ease;
     opacity: 0;
     animation-fill-mode: forwards;
   }

   /* Zoom-Out Animation */
   @keyframes zoomOut {
     0% {
       transform: translateY(-50%) scale(1.2);
       opacity: 0;
     }

     100% {
       transform: translateY(-50%) scale(1);
       opacity: 1;
     }
   }



   /* Carousel indicators */
   .carousel-indicators {
     bottom: 30px;
   }

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

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

   .offcanvas {
     width: 300px !important;
   }

   .offcanvas .nav-link {
     font-size: 18px;
     padding: 12px 5px;
     border-bottom: 1px solid #f0f0f0;
   }

   .offcanvas-header {
     border-bottom: 1px solid #eee;
     background: #2b2e33;
     padding: 3px 20px;
   }

   .input-group-text {
     background: #fff !important;
   }



   /* second section */
   /* ================= BENEFITS STRIP ================= */

   .benefits-strip {
     background-color: #f8efe5;
     /* halka cream bg jaisa reference me */
     padding: 25px 0;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
       sans-serif;
   }

   .benefit-item {
     display: flex;
     align-items: flex-start;
     gap: 6px;

   }

   /* Icon Hover 360° rotation + red color */
   .benefit-icon i {
     display: inline-block;
     transition: color 0.4s ease;
   }

   .benefit-item:hover .benefit-icon i {
     animation: spin360 0.8s linear forwards;
   }

   @keyframes spin360 {
     0% {
       transform: rotateY(0deg);
       color: inherit;
     }

     50% {
       transform: rotateY(180deg);
     }

     100% {
       transform: rotateY(360deg);

     }
   }

   .benefit-icon {
     font-size: 40px;
     color: var(--primary);
     /* same warm red tone */
     line-height: 1;
     flex-shrink: 0;
   }

   /* .benefit-content {
 
} */

   .benefit-title {
     font-size: 20px;
     font-weight: 500;
     color: #111111;
     font-family: "Playfair Display", serif !important;
   }

   .benefit-text {
     font-size: 15px;
     color: #6b7280;
     /* soft grey text */
   }



   /* second section off */

   /* third section */
   /* --- ROOM COLLECTION: force single row slide --- */

   .category-card {
     background: #ffffff;
     border-radius: 6px;
     overflow: hidden;
     /* box-shadow: 0 4px 12px rgba(0,0,0,0.12); */
     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }

   /* .category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  } */

   .category-img-box {
     position: relative;
     overflow: hidden;
     border-radius: 20px;
     transition: 0.5s;
   }

   .category-card:hover .category-img-box {
     border-radius: 40%;

   }

   .category-img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
   }

   /* white sweeping effect */
   .category-img-box::after {
     content: "";
     position: absolute;
     width: 80px;
     height: 180%;
     background: linear-gradient(120deg, rgba(255, 255, 255, 0.8), transparent);
     top: -40%;
     left: -120%;
     transform: rotate(15deg);
   }

   .category-card:hover .category-img-box::after {
     animation: sweep 0.7s ease-out forwards;
   }

   @keyframes sweep {
     0% {
       left: -120%;
     }

     100% {
       left: 150%;
     }
   }

   .category-card:hover img {
     transform: scale(1.08);
   }

   .category-title {
     text-align: center;
     font-size: 18px;
     font-weight: 700;
     padding: 12px 0px;
     background: #fff;
     text-transform: capitalize !important;
     font-family: "Playfair Display", serif !important;
   }

   /* center row content */
   .category-row {
     justify-content: center;
   }


   /* third section off */


   /* fourth section----------- */
   /* ===== HERO LAYOUT WRAPPER ===== */
   .hero-wrapper {
     position: relative;
     min-height: 80vh;
     overflow: hidden;
   }

   /* LEFT SIDE */
   .hero-left {
     background: #2b2e33;
     padding: 90px 70px;
     color: #fff;
   }

   .hero-kicker {
     text-transform: uppercase;
     letter-spacing: 0.18em;
     font-size: 14px;
     color: #fff;
     margin-bottom: 22px;
   }

   .hero-title {
     font-family: "Georgia", "Times New Roman", serif;
     font-size: 35px;
     line-height: 1.2;
     margin-bottom: 26px;
   }

   .hero-sub {
     max-width: 360px;
     color: var(--text-off);
     font-size: 17px;
     margin-bottom: 28px;
   }

   .hero-timer-label {
     font-size: 13px;
     margin-bottom: 14px;
     color: #f3e6d5;
     font-weight: 500;
   }

   .hero-timer {
     display: flex;
     gap: 34px;
     margin-bottom: 40px;
     flex-wrap: wrap;
   }

   .hero-timer-item span {
     display: block;
     text-align: left;
   }

   .hero-timer-number {
     font-size: 30px;
     font-weight: 600;
     color: var(--accent-red);
   }

   .hero-timer-text {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: #e0d3c0;
   }

   .btn-custom {
     background: transparent;
     color: #fff;
     border-radius: 999px;
     padding: 11px 32px;
     font-weight: 700;
     font-size: 16px;
     border: 1px solid #fff;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: all 0.3s ease;
     text-decoration: none;
     position: relative;
     overflow: hidden;
   }


   .btn-custom:hover {
     color: white !important;
     border: 1px solid var(--primary);
   }

   .btn-custom:hover i {
     color: white;
   }

   .btn-custom::after {
     content: "";
     position: absolute;
     left: -100%;
     top: 0;
     height: 100%;
     transition: 0.5s;
     width: 100%;
     background-color: var(--primary);
     border: 1px solid var(--primary);

     z-index: -1;
   }

   .btn-custom:hover::after {
     left: 0%;
   }

   /* RIGHT SIDE (BIG BG IMAGE) */
   .hero-right {
     position: relative;
     min-height: 100%;
   }

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

   /* CENTER ROUND IMAGE */
   .hero-circle {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 305px;
     height: 387px;
     border-radius: 35%;
     overflow: hidden;
     box-shadow: 0 30px 55px rgba(0, 0, 0, 0.55);
     z-index: 2;
   }

   .hero-circle img {
     width: 100%;
     height: 100%;
     /* object-fit: cover; */
   }

   /* ===== 50% STICKER WITH ROTATING BACKGROUND ONLY ===== */
   .hero-badge {
     position: absolute;
     top: 32%;
     left: 39%;
     transform: translate(-50%, -50%);
     width: 150px;
     height: 150px;
     z-index: 3;
   }

   /* rotating image / shape */
   .hero-badge-rotor {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background-image: url("./img/sticker.png");
     background-size: cover;
     /* image ko poora round me fit karega */
     background-position: center;
     /* center focus */
     background-repeat: no-repeat;
     /* repeat na ho */

     animation: spinSticker 12s linear infinite;
   }

   /* non-rotating text layer */
   .hero-badge-content {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: #fff;
     pointer-events: none;
   }

   .hero-badge-title {
     font-size: 12px;
     letter-spacing: 0.16em;
     text-transform: uppercase;
   }

   .hero-badge-percent {
     margin-top: 6px;
     font-size: 40px;
     font-weight: 700;
   }

   @keyframes spinSticker {
     from {
       transform: rotate(0deg);
     }

     to {
       transform: rotate(360deg);
     }
   }


   /* fourth section--------------- */

   /* five  */
   /* ========== SECTION HEADER ========== */
   .section-heading {
     font-size: 32px;
     font-weight: 600;
     color: #000 !important;
     font-family: Georgia, serif;
   }

   .section-link {
     color: #d73f3f;
     font-size: 15px;
     font-weight: 500;
     cursor: pointer;
   }

   /* ========== DEAL BANNER CARDS ========== */
   .deal-card {
     padding: 12px;
   }

   .deal-card-inner {
     position: relative;
     overflow: hidden;
     border-radius: 24px;
   }

   .deal-card-inner img {
     width: 100%;
     height: 260px;
     object-fit: cover;
     border-radius: 24px;
   }

   /* Dark gradient overlay */
   .deal-card-inner::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.6) 100%);
     z-index: 1;
   }

   /* Overlay content text box */
   .deal-content-overlay {
     position: absolute;
     top: 20px;
     left: 20px;
     z-index: 2;
     color: #fff;
     max-width: 80%;
     z-index: 2;
   }

   /* Badges themes */
   .badge-green {
     background: #056c5f;
     padding: 4px 10px;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 500;
     color: #fff;
   }

   .badge-red {
     background: #b52b2b;
     padding: 4px 10px;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 500;
     color: #fff;
   }

   .badge-purple {
     background: #5a3ab5;
     padding: 4px 10px;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 500;
     color: #fff;
   }

   /* Banner subtitle */
   .deal-subtitle {
     font-size: 13px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.6px;
     margin-bottom: 4px;
     position: relative;
     z-index: 2;
   }

   /* Banner heading */
   .deal-title {
     font-size: 26px;
     font-weight: 500;
     line-height: 1.2;
     margin-bottom: 6px;
     font-family: Georgia, serif;
     position: relative;
     z-index: 2;
   }

   /* Banner description */
   .deal-desc {
     font-size: 14px;
     opacity: 0.85;
     margin-bottom: 14px;
     position: relative;
     z-index: 2;
   }

   /* Buttons */
   .deal-btn {
     border: 1.6px solid rgba(255, 255, 255, 0.35);
     padding: 6px 18px;
     border-radius: 18px;
     font-size: 14px;
     background: transparent;
     color: #fff;
     font-weight: 500;
     position: relative;
     z-index: 2;
   }

   .deal-btn:hover {
     background: rgba(255, 255, 255, 0.15);
   }

   /* five off */

   /* dhfh. */

   /* ===== PAGE BASE ===== */

   /* ===== DUAL BANNER WRAPPER ===== */
   .dualBannerJah {
     max-width: 100%;
   }

   /* ===== BANNER CARD ===== */
   .bannerCardJah {
     position: relative;
     border-radius: 24px;
     overflow: hidden;
     height: 100%;
     min-height: 480px;
     /* 👈 IMAGE KI HEIGHT BADI */
     background: #000;
   }

   /* ===== BANNER IMAGE ===== */
   .bannerImgJah {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   /* ===== COMMON CONTENT ===== */
   .bannerContentJah {
     position: absolute;
     color: #fff;
     z-index: 2;
   }

   /* ===== BUTTON ===== */
   .bannerBtnJah {
     margin-top: 18px;
     padding: 10px 26px;
     border-radius: 30px;
     border: none;
     background: #ffffff;
     color: #111827;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
   }

   .bannerBtnJah i {
     margin-left: 8px;
     font-size: 12px;
   }

   /* ===== RED STRIP (Moving Text) ===== */
   .bannerLeftStripJah {
     position: absolute;
     left: 0;
     right: 0;
     top: 166px;
     z-index: 2;
     background: #2b2e33;
     color: #fff;
     font-size: 21px;
     font-weight: 600;
     overflow: hidden;
     padding: 12px 0;
   }

   .stripTrackJah {
     display: inline-flex;
     gap: 50px;
     white-space: nowrap;
     padding-left: 100%;
     animation: stripMove 12s linear infinite;
     min-width: max-content;
   }

   @keyframes stripMove {
     from {
       transform: translateX(0);
     }

     to {
       transform: translateX(-100%);
     }
   }

   /* ===== LEFT BOTTOM CONTENT ===== */
   .bannerLeftContentJah {
     left: 48px;
     bottom: 48px;
     max-width: 60%;
     text-align: left;
   }

   .bannerLeftContentJah h2 {
     font-size: 60px;
     line-height: 1;
     margin: 0 0 10px;
     font-weight: 600;
   }

   .bannerLeftContentJah p {
     font-size: 15px;
     max-width: 300px;
     margin: 0 0 18px;
     opacity: 0.95;
   }

   /* ===== RIGHT BANNER TOP-LEFT CONTENT ===== */
   .bannerRightContentJah {
     left: 48px;
     top: 48px;
     max-width: 60%;
     text-align: left;
   }

   .bannerRightContentJah .bannerRightLabelJah {
     font-size: 13px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     margin-bottom: 12px;
     opacity: 0.9;
   }

   .bannerRightContentJah h2 {
     font-size: 38px;
     line-height: 1.2;
     font-weight: 600;
     margin: 0 0 16px;
   }

   /* djhf */
   .brand-card {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     padding: 5px;
     text-align: center;
     cursor: pointer;
   }

   .brand-card img {
     width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: 18px;
   }

   /* Image ke andar bottom center me heading button */
   .img-heading-btn {
     position: absolute;
     bottom: 12px;
     left: 50%;
     transform: translateX(-50%);

     background: rgba(255, 255, 255, 0.85);
     color: #000;
     font-size: 14px;
     font-weight: 600;

     padding: 6px 16px;
     border-radius: 24px;
     border: none;
     transition: 0.4s ease;
     white-space: nowrap;
   }

   /* Hover se color change */
   .brand-card:hover .img-heading-btn {
     background: #b54c3a;
     color: #fff;
   }

   /* jshgdjhgj */

   /* uwahgdi */

   .testimonials-section {
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 20px;
     padding-top: 20px;
   }

   .testi-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
     gap: 16px;
   }

   .testi-title {
     font-size: 28px;
     font-weight: 600;
     margin: 0;
     color: #111827;
   }

   .testi-header-right {
     display: flex;
     align-items: center;
     gap: 16px;
   }

   .testi-rating-block {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 12px;
     border-radius: 20px;
     background: #f5f5f5;
   }

   .testi-rating-stars {
     display: flex;
     gap: 2px;
     font-size: 14px;
     color: #f97316;
     /* orange-ish for stars */
   }

   .storyHeadingJah {
     text-align: justify;
   }

   .testi-rating-score {
     font-size: 16px;
     font-weight: 500;
     padding: 2px 8px;
     border-radius: 999px;
     background: #111827;
     color: #fff;
   }

   .testi-rating-text {
     font-size: 16px;
     color: #6b7280;
     white-space: nowrap;
   }

   .testi-nav {
     display: flex;
     gap: 8px;
   }

   .testi-nav-btn {
     width: 32px;
     height: 32px;
     border-radius: 999px;
     border: 1px solid #e5e7eb;
     background: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.2s, border-color 0.2s, transform 0.2s;
   }

   .testi-nav-btn i {
     font-size: 14px;
     color: #111827;
   }

   .testi-nav-btn:hover {
     background: #111827;
     border-color: #111827;
     transform: translateY(-1px);
   }

   .testi-nav-btn:hover i {
     color: #ffffff;
   }

   /* ===== Card Styles ===== */
   .testi-card {
     border-radius: 12px;
     border: 1px solid #e5e7eb;
     padding: 20px 18px;
     background: #ffffff;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }

   .testi-stars {
     font-size: 14px;
     color: #f97316;
     margin-bottom: 8px;
   }

   .testi-name {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 12px;
     color: #111827;
   }

   .testi-text {
     font-size: 18px;
     line-height: 1.5;
     color: #4b5563;
     margin-bottom: 18px;
   }

   .testi-divider {
     height: 1px;
     background: #e5e7eb;
     margin: 8px 0 18px;
   }

   .testi-product {
     display: flex;
     align-items: center;
     gap: 10px;
   }

   .testi-product-img {
     width: 38px;
     height: 38px;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
     object-fit: cover;
     background: #f3f4f6;
   }

   .testi-product-info {
     display: flex;
     flex-direction: column;
     font-size: 12px;
   }

   .testi-product-name {
     margin-bottom: 4px;
     color: black;
     font-size: 16px;
     font-weight: bold;
   }


   .testi-product-price {
     font-size: 13px;
     display: flex;
     align-items: center;
     gap: 6px;
   }

   .testi-product-price span.current {
     color: #dc2626;
     font-weight: 600;
   }

   .testi-product-price span.old {
     color: #9ca3af;
     text-decoration: line-through;
     font-size: 11px;
   }

   /* Swiper: remove default shadow/overflow */
   .swiper {
     padding-bottom: 4px;
   }

   /* hdsge */

   /* ===== FULL WIDTH STORY SECTION ===== */
   .sectionStoryJah {
     background-color: #2b2e33;
     padding: 60px 45px;
     color: #ffffff;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }

   .sectionSpacingTBJah {
     padding-top: 70px;
     padding-bottom: 70px;
   }

   /* ===== IMAGE FULL WIDTH NO GAP ===== */
   .storyImgLeftJah img {
     width: 100%;
     object-fit: cover;
     height: 100%;
   }

   /* ===== QUOTE BIG TEXT ===== */
   .storyQuoteJah {
     font-size: 26px;
     font-weight: 600;
     font-style: italic;
     line-height: 1.4;
     margin: 20px 0 32px;
     text-align: justify;
   }

   /* ===== WHY CHOOSE ===== */
   .storyWhyChooseJah {
     font-size: 18px;
     line-height: 1.6;
     margin-bottom: 35px;
     max-width: 90%;
   }

   /* ===== POINTS COLUMN ===== */
   .storyPointsColJah {
     font-size: 16px;
   }

   .storyPointsColJah li {
     margin-bottom: 14px;
   }

   .storyPointsColJah i {
     color: var(--primary);
     margin-right: 8px;
   }


   /* hef/gzl */

   /* uwghd */
   .instaStripJah {
     display: flex;
     width: 100%;
     overflow: hidden;
   }

   /* Each image box */
   .instaBoxJah {
     position: relative;
     flex: 0 0 16.66%;
     /* 6 images in one row (desktop) */
     max-width: 16.66%;
     aspect-ratio: 1 / 1;
     /* perfect square */
     overflow: hidden;
   }

   /* Image */
   .instaBoxJah img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }

   /* Instagram icon */
   .instaIconJah {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 32px;
     opacity: 0;
     color: #fff;
     transition: opacity .3s ease;
     pointer-events: none;
   }

   /* Hover effect (desktop) */
   .instaBoxJah:hover .instaIconJah {
     opacity: 1;
   }

   .instaBoxJah:hover img {
     filter: brightness(.55);
     transition: .3s ease;
   }

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

   /* Tablets */
   @media (max-width: 991px) {
     .instaStripJah {
       flex-wrap: wrap;
     }

     .instaBoxJah {
       flex: 0 0 33.33%;
       max-width: 33.33%;
     }
   }

   /* Mobile */
   @media (max-width: 576px) {
     .instaBoxJah {
       flex: 0 0 50%;
       max-width: 50%;
     }

     /* Always show icon on mobile */
     .instaIconJah {
       opacity: 1;
       font-size: 26px;
     }

     .instaBoxJah img {
       filter: brightness(.7);
     }
   }



   /* footer start */

   .footerJah {
     background-color: white;
     color: black;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   }

   .footerJah .footer-topJah img {
     width: 50%;
   }

   .footerJah a {
     color: var(--primary-dark);
     text-decoration: none;
     font-size: 14px;
     transition: 0.5s;
   }

   .footerJah a:hover {
     color: white;
     background-color: var(--primary);
   }

   /* Top row */
   .footer-topJah {
     border-bottom: 1px solid rgba(148, 163, 184, 0.2);
     padding-bottom: 30px;
     margin-bottom: 30px;
   }

   .footerJah li a {
     color: black;
     font-size: 16px;
     position: relative;
   }

   .footerJah li a::after {
     position: absolute;
     content: '';
     bottom: -20%;
     height: 2px;
     width: 0%;
     left: 0;
     background-color: var(--primary);
     transition: 0.5s;
   }

   .footerJah li a:hover::after {
     width: 100%;
   }

   .footerJah li:hover a {
     color: var(--primary);
     background-color: transparent;
   }


   .footer-logoJah {
     display: flex;
     align-items: center;
     gap: 10px;
     width: 50%;
   }

   .footer-logoIconJah {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     border: 1px solid #4b5563;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
   }

   .footer-logoTextJah {
     font-size: 22px;
     font-weight: 600;
   }


   .footer-socialsTitleJah {
     font-size: 20px;
     font-weight: 500;
     margin-bottom: 10px;
     text-align: right;
     margin-right: 10px;

   }

   .footer-socialsJah {
     display: flex;
     justify-content: flex-end;
     gap: 12px;
   }

   .footer-socialsJah a {
     width: 38px;
     height: 38px;
     border-radius: 999px;
     background-color: white;
     /* border: 1px solid var(--primary-dark); */
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
   }

   /* Column headings */
   .footer-headingJah {
     text-transform: uppercase;
     font-size: 20px;
     font-weight: 800;
     margin-bottom: 18px;
     color: var(--primary);
     font-family: "Playfair Display", serif !important;
   }

   .footer-linksJah {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .footer-linksJah li {
     margin-bottom: 12px;
     font-size: 14px;
   }

   /* Contact */
   .footer-contactItemJah {
     display: flex;
     gap: 12px;
     margin-bottom: 14px;
     font-size: 16px;
   }

   .footer-contactIconJah {
     width: 32px;
     height: 32px;
     border-radius: 999px;
     border: 1px solid #4b5563;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     flex-shrink: 0;
   }

   .footerJah .footer-contactItemJah a {
     color: black !important;
     font-size: 16px;
     transition: 0.5s;
   }

   .footerJah .footer-contactItemJah a:hover {
     color: var(--primary) !important;
     background-color: transparent;
   }

   /* Newsletter */
   .footer-newsTextJah {
     font-size: 16px;
     margin-bottom: 20px;
     color: black;
   }

   .footer-inputWrapJah {
     position: relative;
   }

   .footer-inputJah {
     width: 100%;
     /* border-radius: 999px; */
     border: 1px solid #ba4b40;
     padding: 15px 42px 15px 16px;
     font-size: 14px;
     color: white;
     background: var(--primary);
     border-radius: 33px;
   }

   .footer-inputJah i {
     color: black !important;
   }

   .footer-inputJah::placeholder {
     color: white !important;
     font-size: 16px;
   }


   .footer-inputArrowJah {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 16px;
     color: white;
   }

   .footer-inputArrowJah i {
     color: white;
   }

   /* Bottom */
   .footer-bottomJah {
     border-top: 1px solid rgba(148, 163, 184, 0.15);
     margin-top: 30px;
     padding-top: 15px;
     text-align: center;
     font-size: 14px;
     color: black;
   }

   .footer-bottomJah a {
     color: black;
   }

   .footer-bottomJah a:hover {
     color: var(--primary);
     background-color: transparent;
   }

   @media (max-width: 767.98px) {
     .footer-socialsTitleJah {
       text-align: left;
       font-size: 16px;
     }

     .footer-socialsJah {
       justify-content: flex-start;
     }

     .footer-bottomJah {
       margin-top: 20px;
     }
   }

   /* footer end */

   /* footer---------------------------------------------- */
   /* btn-slide start */

   /* Slide Animation */
   .btn-slide {
     padding: 10px 18px;
     border: none;
     color: #fff;
     font-weight: 600;
     cursor: pointer;
     border-radius: 6px;
     background: #2b2e33;
     transition: 0.3s ease;
     position: relative;
     overflow: hidden;
     z-index: 1;
     text-decoration: none;
     display: inline-block;
          isolation: isolate;
   }

   .btn-slide::before {
     content: "";
     position: absolute;
     inset: 0;
     background: var(--primary);
     width: 0;
     transition: 0.4s ease;
     z-index: -1;
   }

   .btn-slide:hover::before {
     width: 100%;
     background-color: var(--primary);
   }

   /* btn-slide end */

   /* btn-slide-2 start */


   /* Slide Animation */
   .btn-slide-2 {
     padding: 10px 18px;
     border: none;
     color: #fff;
     font-weight: 600;
     cursor: pointer;
     border-radius: 6px;
     /* background: #2b2e33; */
     background-color: var(--primary);
     transition: 0.3s ease;
     position: relative;
     overflow: hidden;
     z-index: 1;
     text-decoration: none;
        isolation: isolate;
         display: inline-block;
   }

   .btn-slide-2::before {
     content: "";
     position: absolute;
     inset: 0;
     /* background: var(--primary); */
     background: #2b2e33;
     width: 0;
     transition: 0.4s ease;
     z-index: -1;
   }

   .btn-slide-2:hover::before {
     width: 100%;
     background-color: #2b2e33;
   }

   /* btn-slide-3 end */

   /* Slide Animation */
   .btn-slide-3 {
     padding: 10px 18px;
     border: none;
     color: #2b2e33;
     font-weight: 600;
     cursor: pointer;
     border-radius: 6px;
     /* background: #2b2e33; */
     background-color: transparent;
     transition: 0.3s ease;
     position: relative;
     overflow: hidden;
     z-index: 1;
     border: 2px solid #2b2e33;
     text-decoration: none;
   }

   .btn-slide-3:hover {
     color: white;
   }

   .btn-slide-3::before {
     content: "";
     position: absolute;
     inset: 0;
     background: var(--primary);
     /* background: #2b2e33; */
     width: 0;
     transition: 0.4s ease;
     z-index: -1;
   }

   .btn-slide-3:hover::before {
     width: 100%;
     background-color: #2b2e33;
     color: white;
   }

   /* btn-slide-3 end */

   /* Button Center Fix */
   .jah-product-info {
     text-align: center;
     margin-bottom: 15px;
   }

   .position-relative {
     background-color: #f8f5f0;
     border-radius: 8px;
   }

   /* Shine wrapper */
   .product-img-box {
     position: relative;
     overflow: hidden;
   }

   /* Shine effect layer */
   .product-img-box::after {
     content: "";
     position: absolute;
     width: 80px;
     height: 180%;
     background: linear-gradient(120deg, rgba(255, 255, 255, 0.8), transparent);
     top: -40%;
     left: -120%;
     transform: rotate(15deg);
     pointer-events: none;
   }

   /* On hover → play shine animation */
   .jah-product-card:hover .product-img-box::after {
     animation: sweep 0.7s ease-out forwards;
   }

   /* Sweep animation */
   @keyframes sweep {
     0% {
       left: -120%;
     }

     100% {
       left: 150%;
     }
   }

   /* 
   #slide1 {
     width: 261px !important;
     margin-right: 80px !important;
   } */

   /* about page====================================================== */
   .about-us {
     padding-bottom: 100px;

   }

   /* First Image Crop */
   .img-main-box {
     width: 100%;
     height: 350px;
     overflow: hidden;
     border-radius: 15px;
     position: relative;
   }

   .img-main {
     width: 100%;
     height: 100%;
     object-fit: cover;
     padding-right: 150px;
   }

   /* Second Image Overlay */
   .img-overlay {
     width: 52%;
     position: absolute;
     bottom: -94px;
     left: 325px;
     border-radius: 15px;
     /* filter: brightness(60%); */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   }

   /* ANIMATION - FLOAT UP DOWN */
   @keyframes floatUpDown {
     0% {
       transform: translateY(0);
     }

     50% {
       transform: translateY(-18px);
     }

     100% {
       transform: translateY(0);
     }
   }

   /* 5+ BOX */
   .experience-box {
     position: absolute;
     top: 100px;
     right: 7px;
     background: #0c1b36;
     padding: 14px 20px;
     border-radius: 10px;
     color: #fff;
     z-index: 10;
     animation: floatUpDown 3s ease-in-out infinite;
   }

   /* DOTS */
   .dots-pattern {
     position: absolute;
     top: 36px;
     right: 6px;
     width: 120px;
     height: 120px;
     background-image: radial-gradient(#ff5252 2px, transparent 2px);
     background-size: 15px 15px;
     opacity: .4;
     z-index: 5;
     /* SAME ANIMATION */
     animation: floatUpDown 3s ease-in-out infinite;
     animation-delay: .2s;
     /* थोड़ा अलग smooth look */
   }

   /* ueryhious */

   .why-choose-section {
     background-color: #f8fafc;
   }

   .why-choose-title-small {
     letter-spacing: 2px;
     font-size: 17px;
     text-transform: uppercase;
     color: #eb2128;
     font-weight: 600;
     /* font-family: "Great Vibes", cursive !important; */
   }

   .why-choose-title-main {
     font-weight: 700;
     font-size: 28px;
     color: #111827;
   }

   .why-choose-card {
     background-color: #ffffff;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
     padding: 18px 20px;
     display: flex;
     align-items: center;
     height: 100%;
     transition: all 0.2s ease-in-out;
   }

   .why-choose-card:hover {
     box-shadow: 0 10px 25px rgba(15, 23, 42, 0.09);
     transform: translateY(-3px);
   }

   .why-choose-text h5 {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 6px;
     color: #111827;
   }

   .why-choose-text p {
     font-size: 16px;
     margin-bottom: 0;
     color: #6b7280;
     line-height: 1.5;
   }

   /* Hover pe icon pehle paltega, fir 360° right se left rotate karega */
   .why-choose-icon i {
     font-size: 45px;
     color: var(--primary);
     display: inline-block;
     transition: transform 0.4s ease-in-out;
   }

   .why-choose-card:hover .why-choose-icon i {
     animation: spin360 0.8s linear forwards;
   }

   .para-main {
     padding: 10px 100px;
   }

   @keyframes spin360 {
     0% {
       transform: rotateY(0deg);
       color: inherit;
     }

     50% {
       transform: rotateY(180deg);
     }

     100% {
       transform: rotateY(360deg);

     }
   }


   /* PAGE BASE STYLING */
   .about-page {
     padding: 0px 0;
     background: #f9fafb;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
   }


   /* SECTION HEADER */
   #header .navbar-nav .nav-link {
     position: relative;
   }

   #header .navbar-nav .nav-link::after {
     position: absolute;
     content: '';
     bottom: 0%;
     height: 2px;
     width: 0%;
     left: 0;
     background-color: var(--primary);
     transition: 0.5s;
   }

   #header .navbar-nav .nav-link:hover::after {
     width: 100%;
   }

   #header .navbar-nav .nav-link.active::after {
     width: 100%;
   }

   #header .navbar-nav .nav-link {
     position: relative;
     padding-bottom: 6px;
   }

   #header .navbar-nav .nav-link::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0%;
     height: 2px;
     background-color: var(--primary);
     transition: width 0.3s ease;
   }

   #header .navbar-nav .nav-link:hover::after,
   #header .navbar-nav .nav-link.active::after {
     width: 100%;
   }

   /* #header .navbar-nav .nav-link:hover {
     background-color: #ba4b40 !important;
     color: white !important;
     border-radius: 20px;
   }

   #header .navbar-nav .nav-link.active {
     background-color: #ba4b40 !important;
     color: white !important;
     border-radius: 20px;
   } */

   #header .navbar-nav .nav-item {
     margin: 10px 5px;
   }

   /* Sub dropdown base */
   .dropdown-submenu {
     position: relative;
   }

   .nav-link:focus-visible {
     box-shadow: none;
   }

   #header .dropdown-item {
     color: black;
     font-size: 17px !important;
     font-weight: 500 !important;
     padding: 8px 12px !important;
     position: relative;
     transition: 0.5s;
   }

   #header .dropdown-item::after {
     position: absolute;
     content: '';
     bottom: 0%;
     height: 2px;
     width: 0%;
     left: 0;
     background-color: var(--primary);
     transition: 0.5s;
   }

   #header .dropdown-toggle::after {
     display: none !important;
   }

   .dropdown-menu[data-bs-popper] {
     top: 147% !important;
     border: none !important;
     background-color: white !important;
   }

   .dropdown-item:focus::after,
   .dropdown-item:hover::after {
     width: 100% !important;
   }

   .dropdown-item:focus::after,
   .dropdown-item:hover::after {
     width: 100% !important;
   }

   .dropdown-item:focus,
   .dropdown-item:hover {
     color: var(--primary) !important;
     background-color: white !important;
   }

   .dropdown-item:focus,
   .dropdown-item:hover {
     color: var(--primary) !important;
     background-color: white !important;
   }



   /* new */


   /* Desktop submenu */
   @media (min-width: 992px) {
     .dropdown-submenu>.dropdown-menu {
       top: 0;
       left: 100%;
       margin-left: .1rem;
       display: none;
     }

     .dropdown-submenu:hover>.dropdown-menu {
       display: block;
     }
   }

   /* Mobile submenu */
   @media (max-width: 991px) {
     .dropdown-submenu>.dropdown-menu {
       position: static;
       margin-left: 15px;
       display: none;
     }

     .dropdown-submenu.show>.dropdown-menu {
       display: block;
     }
   }


   .section-header {
     text-align: center;
     margin-bottom: 36px;
   }

   .section-badge {
     font-size: 17px;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-weight: 600;
     color: #eb2128;
     margin-bottom: 8px;
   }

   .section-heading {
     font-size: 30px;
     font-weight: 700;
     color: #111827;
     margin-bottom: 8px;
   }

   .section-subtext {
     font-size: 15px;
     color: #6b7280;
     max-width: 640px;
     margin: 0 auto;
     line-height: 1.6;
   }

   /* MISSION & VISION BLOCK */
   .mv-block {
     background: linear-gradient(135deg, #e5f0ff 0%, #ffffff 100%);
     border-radius: 20px;
     padding: 28px 24px;
     border: 1px solid #e5e7eb;
     box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
   }

   .mv-card {
     background: rgba(255, 255, 255, 0.9);
     border-radius: 16px;
     padding: 20px 18px;
     height: 100%;
     border: 1px solid rgba(226, 232, 240, 0.7);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }

   .mv-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
   }

   .mv-title {
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 6px;
     color: #111827;
   }

   .mv-text {
     font-size: 16px;
     color: #6b7280;
     line-height: 1.7;
     margin-bottom: 0;
   }

   /* CENTER ICON FOR MV */
   .mv-center {
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .mv-icon-circle {
     width: 84px;
     height: 84px;
     border-radius: 999px;
     background: #0f172a;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0 12px 32px rgba(15, 23, 42, 0.6);
   }

   .mv-icon-circle i {
     font-size: 36px;
     color: #e5f0ff;
     display: inline-block;
     transform-origin: center;
     transition: color 0.3s ease;
   }

   .mv-icon-circle:hover i {
     animation: iosFlip 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     color: #ff3b30;
   }

   @keyframes iosFlip {
     0% {
       transform: rotate(0deg) scaleX(1);
     }

     60% {
       transform: rotate(-200deg) scaleX(-1.12);
     }

     100% {
       transform: rotate(-360deg) scaleX(-1);
     }
   }

   /* INFRASTRUCTURE SECTION */
   .infra-block {
     margin-top: 44px;
     background: #ffffff;
     border-radius: 20px;
     padding: 28px 24px;
     border: 1px solid #e5e7eb;
     box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 20px;
   }

   .infra-content {
     flex: 1;
     min-width: 260px;
   }

   .infra-icon-box {
     width: 132px;
     height: 132px;
     border-radius: 24px;
     background: radial-gradient(circle at 20% 20%, #dbeafe, #1d4ed8);
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
     box-shadow: 0 16px 38px rgba(15, 23, 42, 0.25);
     position: relative;
     overflow: hidden;
   }

   .infra-icon-box::after {
     content: "";
     position: absolute;
     width: 60px;
     height: 160%;
     background: linear-gradient(120deg, rgba(255, 255, 255, 0.8), transparent);
     top: -30%;
     left: -90%;
     transform: rotate(15deg);
   }

   .infra-icon-box:hover::after {
     animation: sweep 0.7s ease-out forwards;
   }

   @keyframes sweep {
     0% {
       left: -90%;
     }

     100% {
       left: 140%;
     }
   }

   .infra-icon-box i {
     font-size: 48px;
     color: #ffffff;
     transition: color 0.35s ease;
   }

   .infra-icon-box:hover i {
     animation: spin360 0.5s ease-out forwards;
     color: #ef4444;
   }

   /* @keyframes spin360 {
  0%   { transform: rotate(0deg) scaleX(1); }
  100% { transform: rotate(-360deg) scaleX(-1); }
} */

   .infra-heading {
     font-size: 22px;
     font-weight: 700;
     color: #111827;
     margin-bottom: 8px;
   }

   .infra-text {
     font-size: 16px;
     color: #6b7280;
     margin-bottom: 14px;
     line-height: 1.7;
   }

   .infra-list {
     list-style: none;
     padding-left: 0;
     margin: 0;
   }

   .infra-list li {
     font-size: 15px;
     margin-bottom: 8px;
     color: #111827;
     display: flex;
     align-items: center;
     gap: 8px;
   }

   .infra-list li i {
     font-size: 18px;
     color: #2b2e33;
   }


   /* jdhvjklbhlkd */

   .why-section {
     margin-top: 10px !important;
     /* width: 90%; */
     /* max-width: 1300px; */
     margin: auto;
     display: flex;
     gap: 40px;
     align-items: flex-start;
   }

   /* Container relative for pseudo-element */
   .why-left {
     position: relative;
     overflow: hidden;
     /* ensure pseudo-element doesn't go outside */
   }

   /* ::after for sweep effect */
   .why-left::after {
     content: "";
     position: absolute;
     width: 60px;
     height: 160%;
     background: linear-gradient(120deg, rgba(255, 255, 255, 0.8), transparent);
     top: -30%;
     left: -90%;
     transform: rotate(15deg);
     pointer-events: none;
     /* hover passes through */
     transition: all 0.10s ease-out;
   }

   /* Hover animation */
   .why-left:hover::after {
     animation: sweep 0.9s ease-out forwards;
   }

   @keyframes sweep {
     0% {
       left: -90%;
     }

     100% {
       left: 140%;
     }
   }


   /* Optional: make image responsive */
   .sweep-image {
     width: 100%;
     display: block;
   }

   .why-left img {
     width: 100%;
     /* border-radius: 6px; */
     height: 525px;
     box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
   }

   /* RIGHT CONTENT */
   .why-right {
     padding-right: 20px;
   }

   .why-right h5 {
     color: #003a78;
     margin-bottom: 5px;
     font-size: 15px;
     letter-spacing: 1px;
   }

   .why-right h2 {
     font-size: 36px;
     margin: 0 0 15px 0;
     font-weight: 700;
     color: #0d1c3d;
   }

   .why-right .top-text {
     color: #555;
     font-size: 16px;
     margin-bottom: 30px;
     line-height: 1.7;
     max-width: 650px;
   }

   /* GRID BOX (2 COLUMN) */
   .why-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 25px 40px;
   }

   .why-box {
     display: flex;
     gap: 15px;
     align-items: flex-start;
   }

   .why-icon {
     font-size: 24px;
     min-width: 30px;
     color: #0b5ed7;
   }

   .why-box h4 {
     font-size: 18px;
     margin: 0;
     font-weight: 600;
   }

   .why-box p {
     font-size: 14.5px;
     color: #555;
     line-height: 1.6;
     margin-top: 4px;
   }


   /* ===========================about page off============================= */

   /* =================contact page============== */
   .contact-page {
     padding: 53px 0;
   }

   .jah-section-header {
     text-align: center;
     margin-bottom: 36px;
   }

   .jah-small-title {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #eb2128;
     font-weight: 600;
     margin-bottom: 6px;
   }

   .jah-main-title {
     font-size: 34px;
     font-weight: 800;
     color: #13233a;
     margin-bottom: 8px;
   }

   .jah-subtitle {
     font-size: 14px;
     color: #6b7280;
     max-width: 560px;
     margin: 0 auto;
   }

   .jah-card-input {
     width: 100%;
     border-radius: 6px;
     border: 1px solid #edf0f5;
     background: #f6f8fc;
     padding: 12px 14px;
     font-size: 16px;
     color: #374151;
     outline: none;
     margin-bottom: 14px;
   }

   .jah-card-input:focus {
     border-color: #33a86b;
     background: #ffffff;
     box-shadow: 0 0 0 2px rgba(51, 168, 107, .15);
   }

   .jah-info-block {
     display: flex;
     flex-direction: column;
     gap: 24px;
   }

   .jah-info-row {
     display: flex;
     gap: 14px;
     align-items: flex-start;
   }

   .jah-icon-box {
     width: 60px;
     height: 60px;
     background: var(--primary);
     border-radius: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
   }

   .jah-icon-box:hover {
     background: var(--primary);

   }

   .jah-icon-box i {
     font-size: 26px;
     color: #ffffff;
   }

   .jah-icon-box i:hover {
     color: #000;
   }

   .faq-sec {
     margin-top: 50px;
   }

   .faq-sec .jah-small-title {
     text-align: center;
   }

   .faq-title {
     font-size: 22px;
     font-weight: 800;
     text-align: center;
     margin-bottom: 16px;
     color: #13233a;
   }

   .faq-item {
     border: 1px solid #e5e7eb;
     border-radius: 14px;
     padding: 14px 18px;
     margin-bottom: 12px;
     background: #ffffff;
     cursor: pointer;
     transition: all 0.2s ease;
   }

   .faq-item:hover {
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
     border-color: #bfdbfe;
     transform: translateY(-1px);
   }

   .faq-ques {
     font-size: 17px;
     font-weight: 700;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   .faq-ans {
     font-size: 15px;
     color: #6b7280;
     line-height: 1.6;
     margin-top: 6px;
     display: none;
   }

   .faq-item.open .faq-ans {
     display: block;
   }

   .faq-item.open .toggle i {
     transform: rotate(180deg);
   }

   .toggle i {
     transition: transform 0.25s ease;
   }

   .jah-info-text {
     font-size: 18px;
     text-decoration: none;
     color: black;
   }

   .support-hours {
     font-size: 22px;
     color: #000;
     margin-top: 4px;
     font-weight: 600;
   }



   /* 📍 Full width map wrapper */
   .embed-map-fixed {
     width: 100%;
     height: 500px;
     /* jaisi tumhari height thi */
     position: relative;
   }

   .embed-map-container {
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: none !important;
   }

   .embed-map-frame {
     width: 100% !important;
     height: 100% !important;
     border: 0;
     display: block;
   }

   .jah-main-title {
     font-size: clamp(1.6rem, 2.2vw, 2.8rem);
     line-height: 1.2;
   }

   .jah-subtitle {
     font-size: clamp(0.95rem, 1.3vw, 1.2rem);
   }

   .jah-small-title {
     font-size: clamp(0.9rem, 1.4vw, 1.1rem);
     letter-spacing: 0.5px;
   }

   /* .support-hours {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
} */
   .contact-page .container {
     max-width: 1200px;
     width: 95%;
     /* responsive for all screens + zoom levels */
   }

   .footer .footer-content .footer-links ul i {
     padding-right: 2px;
     color: rgb(216, 27, 27);
     font-size: 12px;
     line-height: 1;
   }

   .footer-link {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 5px;
     /* space between text and icon */
     color: #000;
     /* or your desired color */
     text-decoration: none;
     transition: color 0.3s ease;
   }

   .footer-link i {
     transition: transform 0.3s ease;
   }

   /* On hover: move icon to the right */
   .footer-link:hover i {
     transform: translateX(5px);
     /* moves icon 5px to the right */
     color: #eb2128;
     /* optional: change icon color on hover */
   }

   .footer-link:hover {
     color: #eb2128;
     /* optional: change text color on hover */
   }

   /* ===============contact page off===================== */


   /* breadcrumb start */
   #breadcrumb {
     background-image: url("img/breadcrumb.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     padding: 100px 0;
     background-position: right;
     background-color: #d8b79185;

   }

   .breadcrumb-item h2 {
     color: black !important;
     font-size: 50px;
     font-weight: bold;
     font-family: popins;
   }

   .breadcrumb-item a {
     color: black;
     font-size: 20px;
     transition: 0.5s;
     text-decoration: none;
   }

   .breadcrumb-item a:hover {
     color: var(--primary) !important;
     font-size: 20px;
   }

   .breadcrumb-item.active {
     color: black !important;
     font-size: 20px;
   }

   .section {
     margin-top: 50px;
     margin-bottom: 50px;
     padding-bottom: 50px;
     padding-top: 50px;
   }

   /* breadcrumb end */

   /* product-sec start */
   .product-sec .card .card-title {
     text-align: center;
   }


   /* product-sec end */

   /* This is the whatsapp section */
   /* whatsapp */
   .whatsapp {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: .1s all ease-in-out;
     border-radius: 50%;
     font-size: 2rem;
     color: white;
     box-shadow: 0 0 .75rem #18d26e;
     background-color: #18d26e;
     z-index: 23;
   }

   .whatsapp:hover {
     background-color: white;
     color: #18d26e;
   }

   .call {
     position: fixed;
     bottom: 20px;
     left: 20px;
     width: 60px;
     transition: .1s all ease-in-out;
     height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     font-size: 2rem;
     color: white;
     background-color: #222222;
     box-shadow: 0 0 .5rem #eee;
     z-index: 23;
   }

   .call:hover {
     background-color: white;
     color: #222222;
   }

   /* End whatsapp section */

   /* back-to-top start */
   .back-to-top {
     position: fixed;
     /* display: none; */
     right: 25px;
     bottom: 100px;
     z-index: 99;
     background-color: black;
     transition: 0.5s;
   }

   .back-to-top i {
     color: white;
   }

   .back-to-top:hover {
     background-color: var(--primary);
   }

   /* top-header start */
   #top-header {
     display: none;
     background-color: var(--primary);
   }


   /* blog section start */
   /* .blog .card {
    border-radius: 0 0 10px 10px !important;
} */

   #blog .card .card-title {
     color: black;
   }

   #blog .card .card-body {
     padding: 20px 0;
   }

   #blog .card .card-title:hover {
     color: var(--primary);
     transition: 0.5s;
   }

   #blog a {
     text-decoration: none;
   }

   #blog .other-det a {
     text-decoration: none;
     color: black;
     margin-left: 5px;

   }

   #blog .other-det a:hover {
     color: var(--primary);
     transition: 0.5s;
   }

   /* blog section end */

   /* blog-page start */

   .blog-page .blog-card {
     border-radius: 12px;
     padding: 35px 10px;
     /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #eee; */
   }

   .blog-page .heading {
     font-size: 40px;
     margin-top: 20px;
   }

   .blog-page .blog-badge {
     font-size: 13px;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     font-weight: 600;
     color: #888;
   }

   .blog-page .blog-title {
     font-size: 30px;
     font-weight: 700;
     margin: 10px 0 15px;
     color: #222;
   }

   .blog-page .blog-subtitle {
     font-size: 16px;
     color: #666;
     margin-bottom: 25px;
   }

   .blog-page .blog-meta {
     font-size: 13px;
     color: #999;
     margin-bottom: 25px;
   }

   .blog-page .blog-meta span {
     margin-right: 15px;
   }

   .blog-page .blog-content h2,
   .blog-page .blog-content h3 {
     font-weight: 600;
     color: #222;
     margin-top: 28px;
     margin-bottom: 5px;
     font-size: 22px;
     font-family: popins;
   }

   .blog-page .blog-content h3 {
     font-size: 18px;
   }

   .blog-page .blog-content p {
     margin-bottom: 12px;
   }

   .blog-page .blog-content ul {
     padding-left: 20px;
     margin-bottom: 12px;
   }

   .blog-page .highlight-box {
     background: #b4861b1a;
     border-left: 4px solid #b4861b;
     padding: 14px 16px;
     border-radius: 8px;
     font-size: 16px;
     margin-bottom: 18px;
   }

   .blog-page .section-divider {
     border-top: 1px dashed #ddd;
     margin: 30px 0;
   }

   .blog-page .right .recent-title {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 20px;
     color: #222;
   }

   .blog-page .right .main-box {
     padding: 18px 0;
     border-bottom: 1px solid #eee;
     cursor: pointer;
     transition: 0.3s;
   }

   .blog-page .right .main-box:last-child {
     border-bottom: none;
   }


   .blog-page .right {
     padding: 35px 10px;
   }

   .blog-page .right .img-box {
     width: 120px;
     height: 100px;
     overflow: hidden;
     flex-shrink: 0;
   }

   .blog-page .right .img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .blog-page .right .date {
     font-size: 16px;
     margin-bottom: 4px;
     color: black;
   }

   .blog-page .left img {
     border-radius: 10px;
   }

   .blog-page .right img {
     border-radius: 10px;
   }

   .blog-page .right .post-title {
     font-size: 16px;
     font-weight: 600;
     color: #333;
     margin: 0;
     line-height: 1.3;
   }

   .blog-page .right .main-box:hover .post-title {
     color: #000;
     transition: 0.5s;
   }

   .blog-page .right .main-box:hover .post-title:hover {
     color: var(--primary);
   }

   .blog-page .right .main-box:hover img {
     transform: scale(1.1);
     transition: 0.5s;
   }

   /* .blog-icon-box{
 background-color: var(--primary);
} */

   /* blog-page end */