:root{
  --navy:#003E7E;
  --navy-deep:#00284f;
  --navy-glass:rgba(0,62,126,0.08);
  --orange:#e53030;
  --orange-deep:#d96c0f;
  --bg:#FFFFFF;
  --bg-light:#F7F9FC;
  --footer:#0B1525;
  --text:#1A1A1A;
  --gray:#6B7280;
  --success:#2FA84F;
  --radius:18px;
  --shadow-soft:0 20px 50px -20px rgba(0,40,80,0.18);
  --shadow-card:0 10px 30px -12px rgba(0,40,80,0.14);
  --ff-head:'Poppins',sans-serif;
  --ff-body:'Manrope',sans-serif;
  --ff-mono:'DM Mono',monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  font-size:16px;
  line-height:1.7;
}
h1,h2,h3,h4,h5,.font-head{font-family:var(--ff-head);font-weight:700;letter-spacing:-0.01em;}
.mono{font-family:var(--ff-mono);letter-spacing:0.02em;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container-x{
    width: min(94%, 1600px);
    margin-inline: auto;
    padding-inline: 24px;
}

@media (max-width: 1600px){
    .container-x{
        width: min(94%, 1440px);
    }
}

@media (max-width: 1440px){
    .container-x{
        width: min(94%, 1320px);
    }
}

@media (max-width: 992px){
    .container-x{
        width: calc(100% - 48px);
        padding-inline: 0;
    }
}

@media (max-width: 576px){
    .container-x{
        width: calc(100% - 32px);
    }
}




.eyebrow{
  font-family:var(--ff-mono);
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);display:inline-block;}
.section{padding:27px 0;position:relative;}
.section-light{background:var(--bg-light);}
@media(max-width:768px){.section{padding:70px 0;}}

/* ============ BLUEPRINT SIGNATURE ELEMENT ============ */
.blueprint-frame{position:relative;padding:14px;}
.blueprint-frame::before,.blueprint-frame::after,
.blueprint-frame .bp-tl,.blueprint-frame .bp-tr,.blueprint-frame .bp-bl,.blueprint-frame .bp-br{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--orange);z-index:2;}
.blueprint-frame::before{top:0;left:0;border-right:none;border-bottom:none;}
.blueprint-frame::after{bottom:0;right:0;border-left:none;border-top:none;}
.bp-tr{top:0;right:0;border-left:none;border-bottom:none;}
.bp-bl{bottom:0;left:0;border-right:none;border-top:none;}
.blueprint-frame .bp-inner{position:relative;overflow:hidden;border-radius:6px;}

.dim-divider{display:flex;align-items:center;gap:10px;color:var(--gray);font-family:var(--ff-mono);font-size:12px;margin:8px 0 28px;}
.dim-divider::before,.dim-divider::after{content:"";flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--navy) 0 6px,transparent 6px 10px);}
.grid-bg{
  background-image:linear-gradient(rgba(0,62,126,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,62,126,0.05) 1px, transparent 1px);
  background-size:42px 42px;
}

/* ============ HEADER ============ */
  .topbar{background:var(--navy-deep);color:#cfe0f2;font-size:13px;padding:8px 0;}
  .topbar a{color:#fff;}
  .topbar a:hover{color:var(--orange);opacity:1;}
  .topbar .divider{width:1px;height:14px;background:rgba(255,255,255,.2);}
  .topbar .iso-badge{background:rgba(245,130,32,.18);color:var(--orange);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.04em;}

  header.main-nav{
    position:sticky;top:0;z-index:1000;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border-bottom:1px solid rgba(0,62,126,.08);
    transition:all .35s ease;
  }
  header.main-nav.scrolled{box-shadow:0 8px 30px -10px rgba(0,40,80,.18);}
  .navbar-brand-custom{display:flex;align-items:center;gap:12px;}
  .navbar-brand-custom img{height:85px;}
  .brand-text{font-family:var(--ff-head);font-weight:800;color:var(--navy);font-size:19px;line-height:1.1;}
  .brand-text span{display:block;font-family:var(--ff-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;}
  .nav-link-custom{font-weight:600;font-size:14.5px;color:var(--text);padding:10px 16px !important;position:relative;}
  .nav-link-custom:hover{color:var(--navy);}
  .nav-link-custom::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .3s ease;transform-origin:left;}
  .nav-link-custom:hover::after{transform:scaleX(1);}
  .dropdown-menu-mega{border:none;box-shadow:var(--shadow-soft);border-radius:14px;padding:14px;}
  .btn-quote{
    background:var(--orange);color:#fff !important;font-weight:700;font-size:14px;
    padding:11px 26px;border-radius:50px;border:none;transition:all .3s ease;
    box-shadow:0 10px 22px -8px rgba(245,130,32,.5);
  }
  .btn-quote:hover{background:var(--orange-deep);transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(245,130,32,.6);}
  .btn-outline-navy{border:1.5px solid var(--navy);color:var(--navy);font-weight:700;padding:10px 24px;border-radius:50px;transition:all .3s ease;display:inline-block;}
  .btn-outline-navy:hover{background:var(--navy);color:#fff;}


 /* ============ BRAND LOGO, NAV LINKS & RIGHT STAMP (RESPONSIVE) ============ */

/* 1. Default (Mobile / Tablet) */
.navbar-brand-custom img {
  height: 85px; 
  transition: height 0.3s ease; 
}

/* Navlinks base style */
.nav-link-custom {
  font-weight: 600;
  font-size: 15px; 
  color: var(--text);
  padding: 10px 16px !important;
  position: relative;
  transition: all 0.3s ease;
}

/* Right side Industrial Stamp (Mobile) */
.industrial-stamp {
  height: 55px; /* Mobile par chota rahega */
  transition: height 0.3s ease;
}

/* Hover effects */
.nav-link-custom:hover { color: var(--navy); }
.nav-link-custom::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform .3s ease;
  transform-origin: left;
}
.nav-link-custom:hover::after { transform: scaleX(1); }


/* 2. Desktop (Large Screens) - Bada aur Bold Size */
@media (min-width: 992px) {
  .navbar-brand-custom img {
    height: 150px; /* Bada Main Logo */
  }
  
  .nav-link-custom {
    font-size: 16.5px; /* Client ke kehne par text bada kiya */
    font-weight: 800; /* Extra Bold kar diya taaki premium lage */
    padding: 10px 24px !important; 
    letter-spacing: 0.5px; 
  }
  
  .industrial-stamp {
    height: 120px; /* Right side logo ko bada kiya */
    margin-left: 15px; 
  }
}

/* ============ HERO ============ */
/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-bg{
  width:100%;height:100%;object-fit:cover;
  animation:heroKenBurns 22s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.12) translate(-1%, -1%);}
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(115deg, rgba(0,20,45,.94) 10%, rgba(0,45,88,.82) 45%, rgba(0,62,126,.55) 100%),
    linear-gradient(0deg, rgba(0,16,36,.95) 0%, rgba(0,16,36,.15) 45%, rgba(0,16,36,.55) 100%);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.4) 60%, transparent 100%);
}

.hero-inner{position:relative;z-index:2;padding-top:64px;}
.eyebrow-pill{
  display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border-radius:50px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.08em;
  color:#e6eefb;margin-bottom:32px;
}
.eyebrow-pill i{color:var(--orange);}

.hero-title{
  font-family:var(--ff-head);font-weight:300;line-height:1.05;margin:0 0 26px;
  font-size:clamp(2.6rem, 5.6vw, 5rem);
}
.hero-title .line-1{display:block;font-weight:300;color:#eaf1fb;}
.hero-title .line-2{display:block;font-weight:800;color:#fff;margin-top:4px;}
.hero-title .line-2 em{font-style:normal;color:var(--orange);}

.hero-lead{
  font-family:var(--ff-body);font-size:19px;line-height:1.7;color:#c8d7ea;
  max-width:600px;margin-bottom:44px;font-weight:400;
}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:100px;}
.btn-primary-x{
  display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;
  font-weight:700;font-size:15px;padding:16px 30px;border-radius:50px;text-decoration:none;
  box-shadow:0 18px 36px -12px rgba(245,130,32,.55);transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.btn-primary-x:hover{transform:translateY(-3px);background:var(--orange-deep);box-shadow:0 22px 40px -12px rgba(245,130,32,.65);}
.btn-glass-x{
  display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:15px;
  padding:15px 28px;border-radius:50px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);
  transition:all .3s ease;
}
.btn-glass-x:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);}
.btn-text-x{
  color:#fff;font-weight:700;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  border-bottom:1.5px solid rgba(255,255,255,.35);padding-bottom:3px;transition:border-color .25s ease;
}
.btn-text-x:hover{border-color:var(--orange);color:var(--orange);}

/* Floating glass stat dock */
.hero-stat-dock{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;backdrop-filter:blur(16px) saturate(160%);overflow:hidden;
  margin:0 24px 28px;max-width:1272px;margin-left:auto;margin-right:auto;
}
.stat-glass{
  background:rgba(10,30,55,.35);padding:24px 20px;display:flex;align-items:center;gap:14px;
}
.stat-glass i{font-size:20px;color:var(--orange);}
.stat-glass b{font-family:var(--ff-head);font-size:1.7rem;font-weight:800;display:block;color:#fff;line-height:1;}
.stat-glass span{font-size:11.5px;color:#b9cbe0;font-family:var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;}

/* Trust bar inside hero base */
/* ============ TRUST BAR ============ */
.trustbar {
  background: var(--navy);
  color: #fff;
  padding: 6px 0;
}

.trustbar-scroll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.trustbar .item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: #e7effa;
  white-space: nowrap; /* Text ko doosri line me break hone se rokega */
}

.trustbar .item i {
  color: var(--orange);
  font-size: 20px;
}

/* --- MOBILE SPECIFIC: SWIPEABLE SCROLL --- */
@media (max-width: 991px) {
  .trustbar {
    padding: 16px 0; /* Mobile par upar-neeche ki jagah thodi kam ki */
  }
  
  .trustbar-scroll {
    justify-content: flex-start; /* Mobile pe left se shuru hoga */
    overflow-x: auto; /* Horizontal scroll (swipe) on karega */
    -webkit-overflow-scrolling: touch; /* iPhone par smooth swipe ke liye */
    scroll-behavior: smooth;
    padding-bottom: 4px; /* Scrollbar ke liye jagah */
  }
  
  /* Scrollbar ko hide karne ke liye taaki UI clean lage */
  .trustbar-scroll::-webkit-scrollbar { 
    display: none; 
  }
  .trustbar-scroll { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
  }
}

/* Scroll cue */
.scroll-cue{
  position:absolute;bottom:18px;right:28px;z-index:3;background:none;border:none;color:#cfe0f2;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;display:flex;flex-direction:column;
  align-items:center;gap:8px;cursor:pointer;opacity:.85;transition:opacity .25s;
}
.scroll-cue:hover{opacity:1;}
.scroll-cue i{animation:cueBounce 1.8s infinite;color:var(--orange);}
@keyframes cueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .hero-stat-dock{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:991px){
  :root{--header-h:84px;--header-h-scrolled:70px;}
  .nav-divider{display:none;}
  .main-nav-list{align-items:flex-start;padding:20px 0;gap:2px;}
  .nav-link-x{padding:12px 4px !important;}
  .nav-link-x::after{left:4px;right:4px;}
  .mega-panel{min-width:100%;box-shadow:none;border:1px solid #eef1f6;}
  .mega-grid{grid-template-columns:1fr;}
  .mega-feature{display:none;}
  .nav-actions{margin:16px 0 0;}
  .hero-title{font-size:clamp(2.2rem,8vw,3rem);}
  .hero-lead{font-size:16.5px;}
  .hero-cta{margin-bottom:60px;}
}
@media (max-width:767px){
  .hero-stat-dock{grid-template-columns:1fr;margin:0 16px 20px;}
  .stat-glass{padding:18px 20px;}
  .trust-label{display:none;}
  .scroll-cue{display:none;}
  .hero{min-height:100svh;}
  .topbar{display:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .hero-bg{animation:none;}
  .scroll-cue i{animation:none;}
}

/* ============ TRUST BAR ============ */
.trustbar{background:var(--navy);color:#fff;padding:26px 0;}
.trustbar .item{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:#e7effa;}
.trustbar .item i{color:var(--orange);font-size:20px;}
.clients-strip{padding:36px 0;border-bottom:1px solid #eef1f6;}
.clients-track{display:flex;align-items:center;gap:70px;animation:scrollx 26s linear infinite;width:max-content;}
.clients-track img{height:34px;opacity:.55;filter:grayscale(1);transition:.3s;}
.clients-track img:hover{opacity:1;filter:grayscale(0);}
@keyframes scrollx{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ============ CARDS / COMMON ============ */
.card-glass{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  border:1px solid rgba(0,62,126,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
}
.card-glass:hover{transform:translateY(-8px);box-shadow:var(--shadow-soft);border-color:rgba(245,130,32,.3);}
.icon-tile{
  width:60px;height:60px;border-radius:16px;
  background:linear-gradient(135deg,var(--navy),#0a5bb0);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;
  box-shadow:0 12px 24px -8px rgba(0,62,126,.45);
}
.section-title{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:800;color:var(--navy);margin-bottom:18px;}
.section-sub{color:var(--gray);font-size:17px;max-width:640px;}

/* Why choose us */
/* ============ WHY CHOOSE US ============ */
.section-light{position:relative;overflow:hidden;}
.why-wrap{position:relative;z-index:2;}
.why-wrap .grid-bg{position:absolute;inset:-40px 0 0;z-index:0;mask-image:radial-gradient(ellipse 60% 50% at 50% 20%,#000 0%,transparent 75%);}

.why-card{
  position:relative;height:100%;padding:38px 30px 32px;background:#fff;
  border:1px solid var(--hairline-dark);border-radius:var(--radius-sm);overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.why-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--navy));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.why-card:hover::before{transform:scaleX(1);}
.why-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-soft);border-color:rgba(245,130,32,.3);}

.why-index{
  position:absolute;top:26px;right:28px;font-family:var(--ff-mono);font-size:12px;
  letter-spacing:.1em;color:var(--gray);opacity:.55;
}
.why-index::before{content:"N.";}

.why-card .icon-tile{
  width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--navy),#0a5bb0);color:#fff;font-size:24px;margin-bottom:26px;
  box-shadow:0 14px 30px -12px rgba(0,62,126,.55), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.why-card:hover .icon-tile{transform:scale(1.08) rotate(-4deg);box-shadow:0 18px 34px -10px rgba(245,130,32,.4), inset 0 1px 0 rgba(255,255,255,.2);}

.why-card h5{font-family:var(--ff-head);font-weight:700;font-size:19px;letter-spacing:-0.01em;margin:0 0 12px;color:var(--text);}
.why-card p{color:var(--gray);font-size:14.5px;line-height:1.75;margin:0;max-width:94%;}


/* Product categories */
.prod-card{position:relative;border-radius:var(--radius);overflow:hidden;height:340px;box-shadow:var(--shadow-card);display:block;text-decoration:none;}
.prod-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.prod-card:hover img{transform:scale(1.08);}
.prod-card .grad{position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,20,45,.92) 0%, rgba(0,20,45,.35) 55%, rgba(0,20,45,0) 100%);}
.prod-card .content{position:absolute;left:0;right:0;bottom:0;padding:26px;color:#fff;}
.prod-card .content .num{font-family:var(--ff-mono);font-size:12px;color:var(--orange);letter-spacing:.1em;}
.prod-card .content h5{font-family:var(--ff-head);font-weight:700;font-size:18px;margin:8px 0 12px;}
.prod-card .view-arrow{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;transition:.35s;}
.prod-card:hover .view-arrow{background:var(--orange);border-color:var(--orange);transform:translateX(4px);}

/* Industries */
.industry-card{padding:30px 22px;text-align:center;border-radius:16px;background:#fff;border:1px solid #eef1f6;transition:.35s;}
.industry-card:hover{border-color:var(--orange);box-shadow:0 16px 34px -16px rgba(245,130,32,.35);transform:translateY(-6px);}
.industry-card i{font-size:30px;color:var(--navy);margin-bottom:14px;transition:.35s;}
.industry-card:hover i{color:var(--orange);}
.industry-card h6{font-weight:700;font-size:14.5px;margin:0;}

/* Process timeline */
.process-track{position:relative;padding-top:10px;}
.process-line{position:absolute;top:34px;left:5%;right:5%;height:2px;background:repeating-linear-gradient(90deg,var(--navy) 0 8px,transparent 8px 14px);z-index:0;}
.process-step{position:relative;z-index:1;text-align:center;padding:0 10px;}
.process-step .dot{width:70px;height:70px;border-radius:50%;background:#fff;border:2px solid var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:24px;color:var(--navy);transition:.35s;}
.process-step:hover .dot{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.08);}
.process-step .step-no{font-family:var(--ff-mono);color:var(--orange);font-size:12px;letter-spacing:.1em;}
.process-step h6{font-weight:700;margin:6px 0;font-size:15px;}
.process-step p{font-size:13px;color:var(--gray);}

/* ============ PREMIUM SLIDER SECTION ============ */
.premium-slider-card {
  position: relative;
  height: 420px;
  border-radius: 6px;
  overflow: hidden;
  background: #eef2f6;
  box-shadow: 0 10px 30px rgba(0, 40, 80, 0.08);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.premium-slider-card .slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.premium-slider-card:hover .slide-img {
  transform: scale(1.03);
}

.premium-slider-card .slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 26, 51, 0.9) 0%, rgba(0, 26, 51, 0.2) 50%, transparent 100%);
  z-index: 1;
}

.premium-slider-card .slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 26px;
  z-index: 2;
  color: #fff;
}

.premium-slider-card .slide-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.premium-slider-card h4 {
  font-family: var(--ff-head);
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.premium-slider-card .slide-arrow {
  position: absolute;
  right: 20px;
  bottom: 26px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.premium-slider-card:hover .slide-arrow {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.1);
}

/* Custom Navigation Arrows */
.slider-nav-arrows .swiper-btn-prev,
.slider-nav-arrows .swiper-btn-next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-nav-arrows .swiper-btn-prev:hover,
.slider-nav-arrows .swiper-btn-next:hover {
  background: var(--navy);
  color: #fff;
}

/* Swiper Pagination Dot Color */
.featured-pagination .swiper-pagination-bullet-active {
  background: var(--orange) !important;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .premium-slider-card { height: 280px; } /* Perfect height for 2 cards on mobile */
  .premium-slider-card .slide-content { padding: 18px; }
  .premium-slider-card h4 { font-size: 16px; }
  .premium-slider-card .slide-arrow { right: 14px; bottom: 18px; width: 34px; height: 34px; }
}

/* Certifications */
.cert-card{padding:34px 24px;text-align:center;border-radius:16px;background:#fff;border:1px solid #eef1f6;position:relative;overflow:hidden;}
.cert-card::before{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:16px;background:linear-gradient(120deg,var(--orange),var(--navy)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.4s;}
.cert-card:hover::before{opacity:1;}
.cert-card i{font-size:32px;color:var(--navy);margin-bottom:14px;}

/* Global presence */
/* ============ FULL-WIDTH GLOBAL PRESENCE ============ */
.premium-global-section {
  position: relative;
  background-color: var(--navy-deep);
  padding: 100px 0;
  overflow: hidden;
  /* Removed border-radius and margins to stretch edge-to-edge */
}

/* Adds a subtle world-map dot pattern vibe */
.global-map-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px);
  background-size: 30px 30px;
  background-position: center;
  opacity: 0.8;
  z-index: 1;
}

.stat-box-premium {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px; /* Industrial sharp corners instead of overly rounded ones */
  padding: 34px 20px;
  text-align: center;
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}

.stat-box-premium:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(245, 130, 32, 0.4); /* Subtle orange glow on border */
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.stat-box-premium b {
  font-family: var(--ff-head);
  font-size: 2.8rem;
  display: block;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-box-premium span {
  font-size: 12.5px;
  color: #b9cbe0;
  font-family: var(--ff-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .premium-global-section {
    padding: 70px 0;
  }
  .stat-box-premium {
    padding: 24px 14px;
  }
  .stat-box-premium b {
    font-size: 2.2rem;
  }
}

/* Testimonials */
.testiSwiper{padding-bottom:56px;overflow:hidden;}
.testiSwiper .swiper-wrapper{align-items:stretch;}
.testiSwiper .swiper-slide{height:auto;display:flex;}
.testiSwiper .swiper-pagination{bottom:6px !important;}
.testiSwiper .swiper-pagination-bullet{width:9px;height:9px;background:var(--navy);opacity:.25;}
.testiSwiper .swiper-pagination-bullet-active{opacity:1;background:var(--orange);width:22px;border-radius:5px;transition:.3s;}
.testi-card{background:#fff;border-radius:18px;padding:34px;box-shadow:var(--shadow-card);border:1px solid #eef1f6;height:100%;width:100%;}
.testi-card .stars{color:var(--orange);font-size:13px;margin-bottom:14px;}
.testi-card p{font-size:15px;color:var(--text);}
.testi-card .who{display:flex;align-items:center;gap:12px;margin-top:20px;}
.testi-card .who .avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--ff-head);}

/* CTA */
.cta-section{background:linear-gradient(120deg,#00203f,#003E7E 60%,#0a4f96);color:#fff;border-radius:28px;padding:70px 50px;position:relative;overflow:hidden;}
.cta-section::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(245,130,32,.35),transparent 70%);}
@media(max-width:768px){.cta-section{padding:50px 26px;}}

/* Contact */
.contact-card{background:#fff;border-radius:16px;padding:26px;border:1px solid #eef1f6;display:flex;gap:16px;align-items:flex-start;}
.contact-card i{font-size:20px;color:var(--orange);margin-top:4px;}
.form-control-x{border:1.5px solid #e5e9f0;border-radius:12px;padding:14px 16px;font-size:14.5px;transition:.3s;}
.form-control-x:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(0,62,126,.1);outline:none;}

/* Footer */
footer{background:var(--footer);color:#a9b6c9;padding-top:80px;}
footer h6{color:#fff;font-weight:700;margin-bottom:20px;font-size:15px;}
footer a.flink{color:#a9b6c9;font-size:14px;display:block;margin-bottom:10px;transition:.2s;}
footer a.flink:hover{color:var(--orange);padding-left:4px;}
footer .social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;margin-right:8px;transition:.3s;}
footer .social a:hover{background:var(--orange);color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:50px;padding:22px 0;font-size:13px;}

/* Floating */
.float-stack{position:fixed;right:22px;bottom:22px;z-index:1200;display:flex;flex-direction:column;gap:12px;}
.float-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;box-shadow:0 12px 26px -8px rgba(0,0,0,.35);transition:.3s;}
.float-btn.wa{background:#25D366;}
.float-btn.call{background:var(--navy);}
.float-btn.top{background:var(--orange);opacity:0;pointer-events:none;transform:translateY(10px);}
.float-btn.top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.float-btn:hover{transform:translateY(-4px) scale(1.06);}

/* misc */
.counter{font-variant-numeric:tabular-nums;}
.badge-soft{background:var(--navy-glass);color:var(--navy);font-size:12px;font-weight:700;padding:6px 14px;border-radius:30px;}
::selection{background:var(--orange);color:#fff;}
@media(prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}


/* ============ PREMIUM ABOUT SECTION ============ */
.premium-about {
  padding: 50px 0;
  background-color: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Image Composition */
.about-image-wrapper {
  position: relative;
  padding: 0 40px 40px 0;
}
.about-main-img {
  width: 100%;
  /* height: 560px; */
  object-fit: cover;
  border-radius: 4px; /* Industrial sharp edges */
  box-shadow: 0 30px 60px rgba(0, 40, 80, 0.12);
  position: relative;
  z-index: 2;
}
.about-grid-accent {
  position: absolute;
  top: -20px;
  right: 0;
  width: 80%;
  height: 80%;
  background-image: linear-gradient(rgba(0, 62, 126, 0.1) 1px, transparent 1px), 
                    linear-gradient(90deg, rgba(0, 62, 126, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 1;
}

/* Floating Card */
.about-floating-card {
  position: absolute;
  bottom: 0;
  left: -40px;
  background: rgba(0, 26, 51, 0.95);
  backdrop-filter: blur(10px);
  padding: 24px 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 3;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
}
.about-floating-card .card-icon {
  font-size: 32px;
  color: var(--orange);
}
.about-floating-card .card-text b {
  font-family: var(--ff-head);
  font-size: 2.2rem;
  color: #fff;
  line-height: 1;
}
.about-floating-card .card-text i {
  color: var(--orange);
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 700;
}
.about-floating-card .card-text span {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: #a9b6c9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* Typography & Content */
.premium-eyebrow {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.premium-eyebrow::before {
  content: ""; width: 30px; height: 2px; background: var(--orange);
}
.premium-heading {
  font-family: var(--ff-head);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--navy-deep);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.premium-heading span {
  color: var(--navy);
  font-weight: 400; /* Contrast between bold and regular */
}
.premium-lead {
  font-size: 18px;
  color: var(--navy-deep);
  font-weight: 600;
  line-height: 1.6;
}
.premium-text {
  font-size: 15.5px;
  color: var(--gray);
  line-height: 1.8;
}

/* Features Grid */
.about-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-light);
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.feature-item:hover {
  background: #fff;
  border-left-color: var(--orange);
  box-shadow: var(--shadow-card);
  transform: translateX(5px);
}
.feature-item i {
  color: var(--navy);
  font-size: 18px;
  transition: all 0.3s ease;
}
.feature-item:hover i {
  color: var(--orange);
}
.feature-item span {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-deep);
}

/* Button override for about section */
.btn-industrial-outline {
  display: inline-block;
  background: transparent; color: var(--navy-deep);
  font-family: var(--ff-head); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 14px 32px; border: 2px solid var(--navy-deep); border-radius: 2px;
  transition: all 0.3s ease;
}
.btn-industrial-outline:hover { background: var(--navy-deep); color: #fff; }

@media (max-width: 991px) {
  .about-floating-card { left: 20px; bottom: -20px; }
  .about-features-grid { grid-template-columns: 1fr; }
}

.prod-desc {
  max-width: calc(100% - 52px);
  font-size: 13px;
  line-height: 1.5;
  color: #dbe6f4;
}

.prod-card .view-arrow i {
  transform: rotate(-45deg);
}

.premium-slider-card .slide-arrow i {
  transform: rotate(-45deg);
}

.slider-nav-arrows button {
  background: transparent;
  padding: 0;
}

.footer-contact{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:10px;
}

.footer-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.footer-item i{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    flex-shrink:0;
    transition:.35s;
}

.footer-item:hover i{
    background:var(--accent);
    color:#fff;
    transform:translateY(-3px);
}

.footer-item strong{
    display:block;
    color:#fff;
    font-size:15px;
    margin-bottom:4px;
}

.footer-item p,
.footer-item a{
    margin:0;
    color:#8ea0b8;
    font-size:14px;
    line-height:1.7;
    text-decoration:none;
    transition:.3s;
}

.footer-item a{
    display:block;
}

.footer-item a:hover{
    color:var(--accent);
}

/* ============ MEGA MENU RESPONSIVE FIX ============ */
@media (min-width: 992px) {
  .custom-mega-row {
    min-width: 560px; /* Desktop ke liye acchi width */
  }
}

@media (max-width: 991px) {
  .custom-mega-row {
    min-width: 100%; /* Mobile par full width */
  }
  .custom-mega-menu {
    border: none;
    box-shadow: none;
    padding: 10px;
    background: transparent;
  }
  .dropdown-item {
    white-space: normal; /* Lamba text screen ke bahar nahi jayega */
    font-size: 14.5px;
  }
}

/* =========================================
   Mega Menu Fixes (Grid & Scroll)
========================================= */

/* Desktop par Hover Effect (Purana wala same rahega) */
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  .navbar .dropdown .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.3s ease-in-out;
  }
}

/* 1. Desktop ke liye CSS Grid (Text Overlap fix karega) */
.mega-list-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile par 1 column */
  column-gap: 20px;
  row-gap: 5px;
}

@media (min-width: 768px) {
  .mega-list-grid {
    grid-template-columns: repeat(2, 1fr); /* Tablet par 2 columns */
  }
}

@media (min-width: 1200px) {
  .mega-list-grid {
    grid-template-columns: repeat(3, 1fr); /* Bade desktop par 3 columns */
  }
}

.mega-list-grid a {
  display: block; /* Text overlap roke ga */
  width: 100%;
  white-space: nowrap; /* Text ko ek line mein rakhega */
  overflow: hidden;
  text-overflow: ellipsis; /* Agar text bada hua toh '...' dikhayega */
}

/* 2. Mobile ke liye Scrollbar Fix */
@media (max-width: 991px) {
  .custom-mega-menu {
    max-height: 60vh; /* Screen ka 60% height lega */
    overflow-y: auto; /* Scrollbar add kar dega */
    padding: 15px !important; /* Mobile pe thoda compact padding */
  }
  
  /* Scrollbar ki styling thodi premium karne ke liye */
  .custom-mega-menu::-webkit-scrollbar {
    width: 6px;
  }
  .custom-mega-menu::-webkit-scrollbar-thumb {
    background-color: #c8d7ea; 
    border-radius: 10px;
  }
}
@media (min-width: 992px) {
  /* Ye code mega menu ko exact full container width lene par force karega */
  .navbar .position-static .custom-mega-menu {
    width: 100%;
    left: 0;
    right: 0;
    top: 100%; /* Navbar ke theek neeche open hoga */
  }
}

/* ================= BREADCRUMB DIVIDER COLOR OVERRIDE ================= */
.breadcrumb-item + .breadcrumb-item::before {
    color: white !important; /* Slash (/) ka color light karne ke liye */
}

/* 1. Medium Desktops & Laptops (992px to 1199px - jaise 1024px screen) */
@media (min-width: 992px) and (max-width: 1199px) {
  .nav-link-custom {
    font-size: 15px !important;  /* Font size thoda chota kiya */
    padding: 8px 12px !important; /* Aas-paas ki jagah kam ki taaki fit aa jaye */
    letter-spacing: 0px; 
  }
  
  /* Agar logo bhi bada lag raha ho 1024px par, toh ise add karein */
  .navbar-brand img {
    max-width: 200px; /* Apne hisaab se adjust kar lena */
  }
}

/* 2. Large Desktops (1200px aur usse badi screens ke liye wahi premium size) */
@media (min-width: 1200px) {
  .nav-link-custom {
    font-size: 19.5px !important;
    font-weight: 800;
    padding: 10px 24px !important; 
    letter-spacing: 0.5px; 
  }
}
/* Medium Desktops & Laptops (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  
  /* 1. Navlinks ki setting */
  .nav-link-custom {
    font-size: 14px !important;   /* Size thoda aur chota kiya */
    padding: 8px 10px !important; /* Padding kam ki taaki side ka space adjust ho */
    white-space: nowrap !important; /* SABSE ZAROORI: Ye "About Us" ko tootne se rokega */
    letter-spacing: 0px; 
  }
  
  /* 2. Main Logo ko thoda scale down karein */
  .navbar-brand img {
    max-width: 170px !important; /* Apne hisaab se 160-180px ke beech rakh lena */
    height: auto;
  }

  /* 3. Right side wala 'Industrial Departmental Store' stamp (uski class check kar lena) */
  /* Maine '.industrial-stamp' assume kiya hai, aap apni class yahan replace kar dena */
  .industrial-stamp { 
    max-width: 150px !important; 
  }
}

/* Large Screens (1200px+) ke liye nowrap lagana zaroori hai taaki wahan bhi na toote */
@media (min-width: 1200px) {
  .nav-link-custom {
    white-space: nowrap !important; 
  }
}



/* ==================================================
   CATEGORY MEGA MENU
================================================== */

.category-dropdown .custom-mega-menu {
  width: 100%;
  left: 0;
  right: 0;
  top: calc(100% + 1px);
  padding: 0;
  margin: 0;
  border-radius: 0 0 18px 18px;
  background: #ffffff;
  overflow: hidden;
}

/* Main Mega Menu Layout */
.mega-menu-container {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  width: 100%;
  min-height: 430px;
  max-height: 68vh;
}

/* ==================================================
   LEFT CATEGORY SIDEBAR
================================================== */

.mega-category-sidebar {
  padding: 24px 16px;
  background:
    linear-gradient(
      145deg,
      var(--navy-deep, #032d58) 0%,
      #074b8c 100%
    );
  overflow-y: auto;
}

.mega-sidebar-heading {
  margin: 0 10px 14px;
  padding-bottom: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mega-category-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mega-category-btn {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: 0;
  border-radius: 9px;
  text-align: left;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease;
}

.mega-category-btn:hover,
.mega-category-btn.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  transform: translateX(3px);
}

.mega-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.11);
  font-size: 14px;
}

.mega-category-btn.active .mega-category-icon {
  color: var(--navy-deep, #032d58);
  background: #ffffff;
}

.mega-category-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mega-category-arrow {
  font-size: 10px;
  opacity: 0.45;
  transition: transform 0.22s ease;
}

.mega-category-btn:hover .mega-category-arrow,
.mega-category-btn.active .mega-category-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ==================================================
   RIGHT CATEGORY CONTENT
================================================== */

.mega-category-content {
  position: relative;
  padding: 28px 30px 30px;
  background: #ffffff;
  overflow-y: auto;
}

.mega-category-panel {
  display: none;
  animation: megaPanelFade 0.22s ease;
}

.mega-category-panel.active {
  display: block;
}

@keyframes megaPanelFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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

.mega-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e7edf4;
}

.mega-panel-label {
  display: block;
  margin-bottom: 3px;
  color: #728195;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.mega-panel-title {
  margin: 0;
  color: var(--navy-deep, #032d58);
  font-family: var(--ff-head);
  font-size: 21px;
  font-weight: 800;
}

.mega-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 9px 15px;
  color: #ffffff;
  background: var(--navy-deep, #032d58);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.mega-view-all:hover {
  color: #ffffff;
  background: #d71920;
  transform: translateY(-1px);
}

/* Products/Subcategories Grid */
.mega-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 15px;
}

.mega-product-link {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  padding: 9px 11px;
  color: #3e4651;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.mega-product-dot {
  width: 6px;
  height: 6px;
  background: #d71920;
  border-radius: 50%;
}

.mega-product-link > span:nth-child(2) {
  min-width: 0;
}

.mega-product-link > i {
  color: #9aa6b4;
  font-size: 10px;
  opacity: 0;
  transform: translateX(-5px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.mega-product-link:hover {
  color: var(--navy-deep, #032d58);
  background: #f5f8fc;
  border-color: #dde7f2;
  transform: translateX(2px);
}

.mega-product-link:hover > i {
  opacity: 1;
  transform: translateX(0);
}

/* ==================================================
   DESKTOP HOVER
================================================== */

@media (min-width: 992px) {
  .category-dropdown .custom-mega-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s ease;
  }

  .category-dropdown:hover .custom-mega-menu,
  .category-dropdown .custom-mega-menu.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

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

@media (min-width: 992px) and (max-width: 1199px) {
  .mega-menu-container {
    grid-template-columns: 245px minmax(0, 1fr);
  }

  .mega-category-sidebar {
    padding: 18px 12px;
  }

  .mega-category-btn {
    padding: 9px 10px;
    font-size: 13px;
  }

  .mega-category-content {
    padding: 22px;
  }

  .mega-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==================================================
   MOBILE AND TABLET
================================================== */

@media (max-width: 991px) {
  .category-dropdown {
    position: relative !important;
  }

  .category-dropdown .custom-mega-menu {
    position: static !important;
    width: 100%;
    max-height: 65vh;
    margin: 4px 0 10px;
    border-radius: 10px;
    box-shadow: none !important;
    overflow-y: auto;
  }

  .mega-menu-container {
    display: block;
    min-height: 0;
    max-height: none;
  }

  .mega-category-sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px;
    overflow: hidden;
  }

  .mega-sidebar-heading {
    display: none;
  }

  .mega-category-buttons {
    flex-direction: row;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
  }

  .mega-category-btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
  }

  .mega-category-btn:hover,
  .mega-category-btn.active {
    transform: none;
  }

  .mega-category-icon {
    width: 27px;
    height: 27px;
  }

  .mega-category-arrow {
    display: none;
  }

  .mega-category-content {
    padding: 18px 14px;
    overflow: visible;
  }

  .mega-panel-header {
    align-items: flex-start;
    margin-bottom: 13px;
    padding-bottom: 13px;
  }

  .mega-panel-title {
    font-size: 18px;
  }

  .mega-panel-label {
    display: none;
  }

  .mega-view-all {
    padding: 7px 10px;
    font-size: 12px;
  }

  .mega-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mega-product-link {
    min-height: 42px;
    padding: 8px;
    font-size: 13px;
  }
}

/* Small Mobile */
@media (max-width: 575px) {
  .mega-products-grid {
    grid-template-columns: 1fr;
  }

  .mega-product-link {
    min-height: 40px;
  }
}

/* Scrollbar */
.mega-category-sidebar::-webkit-scrollbar,
.mega-category-content::-webkit-scrollbar,
.category-dropdown .custom-mega-menu::-webkit-scrollbar,
.mega-category-buttons::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.mega-category-sidebar::-webkit-scrollbar-thumb,
.mega-category-content::-webkit-scrollbar-thumb,
.category-dropdown .custom-mega-menu::-webkit-scrollbar-thumb,
.mega-category-buttons::-webkit-scrollbar-thumb {
  background: #b7c7d9;
  border-radius: 20px;
}

/* =========================================================
   FINAL MOBILE MEGA MENU FIX
   Paste this at the END of your CSS
========================================================= */

@media (max-width: 991px) {

  /* Mobile navbar ko screen ke andar scrollable rakhega */
  #navMenu.navbar-collapse {
    max-height: calc(100vh - 85px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 15px;
  }

  .category-dropdown {
    position: relative !important;
    width: 100%;
  }

  /* Bootstrap dropdown positioning reset */
  .category-dropdown .custom-mega-menu,
  .category-dropdown .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 70vh;

    margin: 8px 0 12px !important;
    padding: 0 !important;

    border: 1px solid #dce6f1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;

    overflow: hidden;
  }

  .mega-menu-container {
    display: block;
    width: 100%;
    min-height: 0;
    max-height: none;
  }

  /* =====================================================
     CATEGORY AREA
  ===================================================== */

  .mega-category-sidebar {
    position: relative;
    top: auto;

    width: 100%;
    max-height: 185px;

    padding: 10px;
    background: linear-gradient(
      145deg,
      #032d58 0%,
      #074d91 100%
    );

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

  .mega-sidebar-heading {
    display: block;

    margin: 0 0 9px;
    padding: 0 3px 8px;

    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;

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

  /* Horizontal tabs ki jagah 2-column grid */
  .mega-category-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;

    width: 100%;
    padding: 0;

    overflow: visible;
  }

  .mega-category-btn {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 7px;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px;

    padding: 7px 8px;

    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;

    font-size: 11.5px;
    line-height: 1.25;
    text-align: left;

    transform: none !important;
  }

  .mega-category-btn:hover,
  .mega-category-btn.active {
    color: #032d58;
    background: #ffffff;
    border-color: #ffffff;
    transform: none !important;
  }

  .mega-category-icon {
    width: 28px;
    height: 28px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);

    border-radius: 6px;
    font-size: 11px;
  }

  .mega-category-btn:hover .mega-category-icon,
  .mega-category-btn.active .mega-category-icon {
    color: #ffffff;
    background: #d71920;
  }

  .mega-category-name {
    display: block;
    min-width: 0;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere;
  }

  .mega-category-arrow {
    display: none !important;
  }

  /* =====================================================
     PRODUCTS AREA
  ===================================================== */

  .mega-category-content {
    width: 100%;
    max-height: 40vh;

    padding: 15px 13px 17px;

    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mega-category-panel {
    width: 100%;
  }

  .mega-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-bottom: 10px;
    padding-bottom: 10px;

    border-bottom: 1px solid #e3eaf2;
  }

  .mega-panel-label {
    display: none;
  }

  .mega-panel-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
  }

  .mega-view-all {
    min-height: 30px;
    padding: 5px 9px;

    border-radius: 5px;

    font-size: 10.5px;
    white-space: nowrap;
  }

  .mega-view-all i {
    font-size: 9px;
  }

  /* Products single column */
  .mega-products-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 4px;
    width: 100%;
  }

  .mega-product-link {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: center;
    gap: 9px;

    width: 100%;
    min-width: 0;
    min-height: 40px;

    padding: 7px 9px !important;

    color: #404a56 !important;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 6px;

    font-size: 12.5px;
    line-height: 1.35;
  }

  .mega-product-link:hover {
    background: #f4f8fc;
    border-color: #dce7f2;
    transform: none;
  }

  .mega-product-link > span:nth-child(2) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .mega-product-link > i {
    display: none !important;
  }

  .mega-product-dot {
    width: 6px;
    height: 6px;
  }
}


/* =========================================================
   EXTRA SMALL SCREEN: 320PX–400PX
========================================================= */

@media (max-width: 400px) {

  .navbar-brand-custom img {
    max-width: 165px !important;
    height: auto;
  }

  .mega-category-sidebar {
    max-height: 175px;
    padding: 8px;
  }

  .mega-category-buttons {
    gap: 6px;
  }

  .mega-category-btn {
    min-height: 46px;
    padding: 6px;
    font-size: 10.5px;
  }

  .mega-category-icon {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  .mega-category-content {
    padding: 13px 10px 15px;
  }

  .mega-panel-title {
    font-size: 15px;
  }

  .mega-product-link {
    min-height: 38px;
    padding: 7px 8px !important;
    font-size: 12px;
  }
}