/* ============================================================
   RESET & BASE
   ============================================================ */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
 }

 html {
   scroll-behavior: smooth
 }

 body {
   
   font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
   font-size: 15px;
   color: #334155;
   background: #fff;
   overflow-x: hidden
 }
 
 a {
   text-decoration: none;
   color: inherit;
   transition: all .2s
 }

 img {
   max-width: 200px;
   display: block
 }

 ul {
   list-style: none
 }

 button {
   font-family: inherit;
   cursor: pointer;
   border: none;
   outline: none
 }

 input,
 select,
 textarea {
   font-family: inherit;
   outline: none
 }
 
#companies {
  scroll-margin-top: 80px;  
}
#about {
  scroll-margin-top: 80px; 
}
#contact {
  scroll-margin-top: 70px;
}
#productList {
  scroll-margin-top: 70px;
}

#categories {
   scroll-margin-top: 70px;
}
#whyUs {
   scroll-margin-top: 110px;
}
 /* ============================================================
   CSS VARIABLES
   ============================================================ */
 :root {
   --primary: #0B4D8C;
   --primary-d: #083b6b;
   --primary-l: #e8f0fb;
   --green: #00A86B;
   --green-d: #007a4e;
   --green-l: #e6f7f1;
   --orange: #FF6B35;
   --orange-d: #e55a24;
   --dark: #0f172a;
   --body: #334155;
   --muted: #64748b;
   --light: #94a3b8;
   --border: #e2e8f0;
   --bg: #f8faff;
   --white: #ffffff;
   --shadow-sm: 0 1px 4px rgba(11, 77, 140, .08);
   --shadow: 0 4px 16px rgba(11, 77, 140, .12);
   --shadow-lg: 0 8px 32px rgba(11, 77, 140, .16);
   --shadow-xl: 0 16px 48px rgba(11, 77, 140, .2);
   --radius: 10px;
   --radius-lg: 16px;
   --radius-xl: 22px;
   --navy:      #07132A;
  --navy-mid:  #0D2045;
  --teal:      #00C6AE;
  --teal-dark: #009E8C;
  --orange:    #FF5C1A;
  --orange-lt: #FF7A42;
  --gold:      #F6C344;
  --white:     #FFFFFF;
  --off-white: #F4F7FB;
  --text:      #1C2B40;
  --muted:     #5A6A82;
  --border:    #DDE5EF;
  --card-bg:   #FFFFFF;
  --grad1: linear-gradient(135deg, #07132A 0%, #0D2B55 50%, #0A3060 100%);
  --grad-teal: linear-gradient(135deg, #00C6AE, #00A89A);
  --grad-orange: #00A86B;
  --shadow-card: #00A86B;
  --shadow-hover: 0 12px 40px rgba(7,19,42,0.18);
  --radius: 16px;
  --radius-sm: 10px;
  --navy:#003366;--navy-dark:#001f3f;--navy-mid:#002855;
  --teal:#00a86b;--teal-light:#00c27f;--teal-dark:#007a4d;
  --orange:#f26522;--orange-light:#ff8040;
  --white:#fff;--light:#f0f7ff;--light2:#e8f5f0;
  --gray:#6c757d;--gray-light:#dde5ee;
  --dark:#0b1829;--text:#1e3a5f;
  --fb:'Nunito Sans',sans-serif;
  --fd:'Playfair Display',serif;
  --sh:0 8px 32px rgba(0,51,102,.11);
  --shh:0 18px 52px rgba(0,51,102,.20);
  --r:12px;--rl:20px;
  --tr:all .32s cubic-bezier(.4,0,.2,1);
 }
 


 /* ============================================================
   TOP BAR
   ============================================================ */
 .top-bar {
   background: #eea221;
   padding: 8px 0;
   font-size: 12.5px;
   color: rgba(255, 255, 255, .72);
 }

 .top-bar .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap
 }

 .top-info {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap
 }

 .top-info a {
   color:  #fff;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: .2s;
   font-weight:500;
   letter-spacing: 1px;
 }

 .top-info a:hover {
   color: #fff;
 }

 .top-info a svg {
   width: 13px;
   height: 13px;
   flex-shrink: 0
 }

 .top-acts {
   display: flex;
   align-items: center;
   gap: 6px
 }

 .btn-post-req {
   background: var(--orange);
   color: #fff;
   padding: 5px 14px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: .2s
 }

 .btn-post-req:hover {
   background: var(--orange-d);
   transform: translateY(-1px)
 }

 .btn-toplink {
   background: rgba(255, 255, 255, .08);
   color: rgba(255, 255, 255, .8);
   padding: 5px 12px;
   border-radius: 6px;
   font-size: 12px;
   border: 1px solid rgba(255, 255, 255, .15);
   transition: .2s
 }

 .btn-toplink:hover {
   background: rgba(255, 255, 255, .15);
   color: #fff
 }

 .btn-topreg {
   background: var(--primary);
   color: #fff;
   padding: 5px 13px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 700;
   transition: .2s
 }

 .btn-topreg:hover {
   background: var(--primary-d)
 }

 /* ============================================================
   CONTAINER
   ============================================================ */
 .container {
   max-width: 1305px;
   margin: 0 auto;
   padding: 0 24px
 }

 /* ============================================================
   SITE HEADER
   ============================================================ */
 .site-header {
   background: #fff;
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
   z-index: 500;
   transition: box-shadow .25s;
 }

 .site-header.scrolled {
   box-shadow: var(--shadow)
 }

 .header-inner {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 4px 24px;
   max-width: 1260px;
   margin: 0 auto;
 }

 /* Logo */
 .logo-header {
    padding: 10px;
    padding-bottom: 27px;
 }
 .site-logo {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0
 }

 .logo-mark {
   height: 92px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .logo-mark svg {
   width: 24px;
   height: 24px;
   fill: #fff
 }

 .logo-words .l1 {
   font-size: 16px;
   font-weight: 800;
   color: var(--primary);
   line-height: 1.1
 }

 .logo-words .l2 {
   font-size: 10.5px;
   color: var(--muted);
   font-weight: 600
 }
 
  
  

 /* Right actions */
 .header-right {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-shrink: 0;
   margin-left: auto
 }

 .header-call {
   display: flex;
   align-items: center;
   gap: 9px;
   text-decoration: none;
   color: var(--body);
 }

 .call-icon {
   width: 38px;
   height: 38px;
   background: var(--primary-l);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .call-icon svg {
   width: 16px;
   height: 16px;
   fill: var(--primary)
 }

 .call-txt small {
   display: block;
   font-size: 10.5px;
   color: var(--muted)
 }

 .call-txt strong {
   font-size: 13px;
   color: var(--dark);
   font-weight: 700
 }

 .btn-listco {
  background: var(--green);
    color: #fff;
    border: none;
    padding:8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    flex: 1;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
 }

 .btn-listco:hover {
   background: var(--green-d);
   transform: translateY(-1px);
   box-shadow: var(--shadow)
 }

 .btn-listco svg {
   width: 15px;
   height: 15px;
   fill: #fff
 }
.messageNow {
  background: var(--green);
    color: #fff;
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: .2s;
}

.messageNow:hover {
  background: var(--green-d);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
} 
 /* ============================================================
   HERO
   ============================================================ */
 
.hero {
  background: var(--grad1);
  min-height: 90vh;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  padding-top: 20px;
}

.hero-bg-shapes {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.shape {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,198,174,0.18) 0%, transparent 70%);
}
.shape-1 { width: 700px; height: 700px; top: -200px; right: -100px; }
.shape-2 { width: 500px; height: 500px; bottom: -100px; left: -100px; background: radial-gradient(circle, rgba(255,92,26,0.12) 0%, transparent 70%); }
.shape-3 { width: 300px; height: 300px; top: 40%; left: 40%; background: radial-gradient(circle, rgba(246,195,68,0.08) 0%, transparent 70%); }

/* grid overlay */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-content {
  max-width: 1320px; margin: auto; padding: 80px 24px 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  position: relative; z-index: 2; flex: 1;
  width: 100%;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,198,174,0.12); border: 1px solid rgba(0,198,174,0.3);
  color: var(--teal); padding: 8px 16px; border-radius: 50px;
  font-size: 12.5px; font-weight: 600; margin-bottom: 24px;
  animation: fadeUp 0.6s ease both;
}
.hero-badge .dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }

h1.hero-title {
  /* font-family: 'Fraunces', serif; */
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800; line-height: 1.1;
  color: white; margin-bottom: 20px;
  animation: fadeUp 0.6s 0.1s ease both;
}
h1.hero-title span { color: var(--teal);   }
h1.hero-title .highlight {
  position: relative; color: var(--gold);
  display: inline-block;
}

.hero-desc {
  color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.75;
  margin-bottom: 36px; max-width: 500px;
  animation: fadeUp 0.6s 0.2s ease both;
}
.hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  animation: fadeUp 0.6s 0.3s ease both;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--grad-orange);
    color: white;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s;
    cursor: pointer;
    border: none;
    box-shadow: 0 6px 20px rgba(255, 92, 26, 0.35);
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: var(--navy);
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s;
    cursor: pointer;
    border: 2px solid var(--border);
}

.hero-trust {
  display: flex; align-items: center; gap: 20px;
  margin-top: 36px;
  animation: fadeUp 0.6s 0.4s ease both;
}
.trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: 12.5px; }
.trust-item i { color: var(--gold); font-size: 14px; }

/* Hero Right - Search Card */
.hero-right { animation: fadeUp 0.7s 0.2s ease both; }
.search-card {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 32px;
}
.search-card h3 {
  color: white; font-size: 18px; font-weight: 700; margin-bottom: 6px;
  /* font-family: 'Fraunces', serif; */
}
.search-card p { color: rgba(255,255,255,0.55); font-size: 13.5px; margin-bottom: 24px; }

.search-field { margin-bottom: 16px; display: flex; justify-content: space-around; }
.search-field input, .search-field  textarea {
   width: 424px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.12);
  color: white; padding: 12px 16px; border-radius: 10px; font-size: 14px;
}
.search-field label { display: block; color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 600; margin-bottom: 8px; letter-spacing: 0.5px; text-transform: uppercase; }
.search-field input, .search-field select {
  width: 100%; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.12);
  color: white; padding: 12px 16px; border-radius: 10px; font-size: 14px;
  /* font-family: 'Plus Jakarta Sans', sans-serif;  */
  outline: none; transition: all 0.2s;
}
.search-field input::placeholder { color: rgba(255,255,255,0.35); }
.search-field select option { background: var(--navy); color: white; }
.search-field input:focus, .search-field select:focus { border-color: var(--teal); background: rgba(0,198,174,0.08); }

.search-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.search-btn {
  width: 100%; margin-top: 20px;
  background: var(--orange); color: white;
  border: none; padding: 14px; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.25s; box-shadow: 0 6px 20px rgba(255,92,26,0.35);
}
.search-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,92,26,0.5); }

/* Quick categories below search */
.quick-cats { margin-top: 20px; }
.quick-cats p { color: rgba(255,255,255,0.45); font-size: 11.5px; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.quick-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-tag {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.65); padding: 6px 12px; border-radius: 50px;
  font-size: 12px; cursor: pointer; transition: all 0.2s;
}
.quick-tag:hover { background: rgba(0,198,174,0.15); border-color: var(--teal); color: var(--teal); }

/* Hero scroll down */
.hero-scroll-hint {
  text-align: center; padding: 24px;
  color: rgba(255,255,255,0.35); font-size: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; z-index: 2;
  animation: bounce 2s infinite;
}

@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

 /* ===================== ABOUT ===================== */
.about-sec{background:#fff;padding:90px 0}
.si{max-width:1320px;margin:0 auto;padding:0 24px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.aw{position:relative}
.aw-main{max-width:100%;object-fit:contain;border-radius:var(--rl)}
.aw-sub{position:absolute;bottom:-100px;right:-24px;width:200px;height:175px;object-fit:cover;border-radius:var(--r);border:6px solid #fff;box-shadow:var(--shh)}
/*.aw-yr{*/
/*    position:absolute;*/
/*    top: 10px;left: -17px;*/
/*    background:var(--teal);*/
/*    color:#fff;*/
/*    padding:16px 14px*/
/*    ;border-radius:var(--r);*/
/*    text-align:center;*/
/*    font-family:var(--fh);z-index:2;*/
/*    box-shadow:0 8px 24px rgba(0,168,107,.38)*/
    
/*}*/

/* Floating badge */
.aw-yr {
  position: absolute;
  top: 10px;
  left: -17px;
  background: var(--teal);
  color: #fff;
  padding: 16px 14px;
  border-radius: var(--r);
  text-align: center;
  font-family: var(--fh);
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 168, 107, .38);

  /* Animation */
  animation: floatY 5s ease-in-out infinite;
}

/* Text styling */
.aw-yr strong {
  display: block;
  font-size: 22px;
}

.aw-yr span {
  font-size: 13px;
  line-height: 1.3;
}

/* Keyframes */
@keyframes floatY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0);
  }
}
.aw-yr strong{display:block;font-size:34px;font-weight:700}
.aw-yr span{font-size:10.5px;line-height:1.4}
.stag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--teal);margin-bottom:10px;font-family:var(--fh)}
.stag::before{content:'';width:22px;height:2px;background:var(--teal)}
.sh2{font-family:var(--fh);font-size:clamp(26px,3vw,32px);font-weight:700;color:var(--navy);line-height:1.15;margin-bottom:14px}
.sh2 span{color:var(--teal)}
.ab-feats{display:flex;flex-direction:column;gap:16px;margin:22px 0 28px}
.af{display:flex;gap:14px}
.af-ic{width:46px;height:46px;background:var(--light2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:18px;flex-shrink:0;border:2px solid rgba(0,168,107,.15);transition:var(--tr)}
.af:hover .af-ic{background:var(--teal);color:#fff}
.af h4{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:3px;font-family:var(--fh)}
.af p{font-size:13.5px;color:var(--gray);line-height:1.6}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 28px}
.aw-sub {
  display: block;
}
.pill{background:var(--light2);color:var(--teal-dark);padding:5px 14px;border-radius:50px;font-size:12px;font-weight:700;font-family:var(--fh);border:1px solid rgba(0,168,107,.18)}
.btn-p {
    background: var(--teal);
    color: #fff;
    padding: 13px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--fh);
    font-size: 14.5px;
    letter-spacing: .4px;
    transition: var(--tr);
    box-shadow: 0 6px 22px rgba(0, 168, 107, .38);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
}
   /* ============================================================
   STATS BAR
   ============================================================ */
 
.stats-bar{background:linear-gradient(130deg,var(--navy-dark),var(--navy-mid));padding:60px 0}
.sg{display:grid;grid-template-columns:repeat(4,1fr)}
.s-item{text-align:center;padding:22px;border-right:1px solid rgba(255,255,255,.09)}
.s-item:last-child{border:none}
.s-num{font-size:50px;font-weight:700;color:var(--teal-light);
  /* font-family:var(--fh); */
  line-height:1}
.s-num sup{font-size:22px}
.s-lbl{font-size:12px;color:#9abcd8;margin-top:7px;font-weight:700;letter-spacing:.8px;
  /* font-family:var(--fh); */
  text-transform:uppercase}
.si {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}
 /* Search Box */
 .hero-search-box {
   background: rgba(255, 255, 255, .12);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: var(--radius-xl);
   padding: 24px 28px;
   max-width: 700px;
   margin: 0 auto;
 }

 .search-type-tabs {
   display: flex;
   gap: 6px;
   justify-content: center;
   margin-bottom: 16px
 }

 .stype {
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .18);
   color: rgba(255, 255, 255, .78);
   font-size: 13px;
   font-weight: 700;
   padding: 6px 18px;
   border-radius: 30px;
   cursor: pointer;
   transition: .2s;
 }

 .stype.active,
 .stype:hover {
   background: rgba(255, 255, 255, .96);
   color: var(--primary)
 }

 .hero-inp-row {
   display: flex;
   align-items: center;
   background: #fff;
   border-radius: 50px;
   overflow: hidden;
   box-shadow: 0 8px 40px rgba(0, 0, 0, .2);
 }

 .hero-inp-ico {
   padding: 0 16px;
   flex-shrink: 0
 }

 .hero-inp-ico svg {
   width: 18px;
   height: 18px;
   fill: var(--light)
 }

 .hero-inp {
   flex: 1;
   border: none;
   background: transparent;
   padding: 16px 0;
   font-size: 15px;
   color: var(--dark);
 }

 .hero-inp::placeholder {
   color: var(--light)
 }

 .hero-search-btn {
   background: var(--green);
   color: #fff;
   border: none;
   padding: 15px 30px;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   white-space: nowrap;
   transition: .2s;
   display: flex;
   align-items: center;
   gap: 7px;
 }

 .hero-search-btn:hover {
   background: var(--green-d)
 }

 .hero-search-btn svg {
   width: 15px;
   height: 15px;
   fill: #fff
 }

 .popular-row {
   display: flex;
   align-items: center;
   gap: 7px;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 14px;
 }

 .pop-lbl {
   font-size: 12px;
   color: rgba(255, 255, 255, .6);
   font-weight: 700
 }

 .pop-tag {
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .2);
   color: rgba(255, 255, 255, .85);
   font-size: 12.5px;
   font-weight: 600;
   padding: 4px 13px;
   border-radius: 20px;
   cursor: pointer;
   transition: .2s;
 }

 .pop-tag:hover {
   background: rgba(255, 255, 255, .25);
   color: #fff
 }

 /* Hero CTA Buttons */
 .hero-btns {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 24px
 }

 .btn-hero-green {
   background: var(--green);
   color: #fff;
   padding: 14px 28px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: .2s;
   box-shadow: 0 4px 20px rgba(0, 168, 107, .35);
 }

 .btn-hero-green:hover {
   background: var(--green-d);
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(0, 168, 107, .4)
 }

 .btn-hero-green svg {
   width: 16px;
   height: 16px;
   fill: #fff
 }

 .btn-hero-ghost {
   background: rgba(255, 255, 255, .13);
   color: #fff;
   border: 2px solid rgba(255, 255, 255, .35);
   padding: 13px 28px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: .2s;
 }

 .btn-hero-ghost:hover {
   background: rgba(255, 255, 255, .22)
 }

 .btn-hero-ghost svg {
   width: 16px;
   height: 16px;
   fill: #fff
 }

 .btn-hero-wa {
   background: #25d366;
   color: #fff;
   padding: 14px 26px;
   border-radius: 50px;
   font-size: 14.5px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: .2s;
 }

 .btn-hero-wa:hover {
   background: #128c7e;
   transform: translateY(-2px)
 }

 .btn-hero-wa svg {
   width: 17px;
   height: 17px;
   fill: #fff
 }

 /* Wave */
 .hero-wave {
   position: relative;
   margin-top: 48px;
   line-height: 0
 }

 .hero-wave svg {
   width: 100%;
   display: block
 }


 /* ============================================================
   SHARED SECTION STYLES
   ============================================================ */
.testimonial {
  background: linear-gradient(135deg,#eef7f2,var(--light));
}

 .section {
   padding: 72px 0
 }

 .section-bg {
   background: var(--bg)
 }

 .section-dark {
   background: linear-gradient(135deg, var(--primary-d) 0%, var(--primary) 60%, #1a6dd6 100%)
 }

 .sec-head {
   text-align: center;
   margin-bottom: 48px
 }

 .sec-head.left {
   text-align: left
 }

 .eyebrow {
   display: inline-block;
   font-size: 11.5px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--green);
   background: var(--green-l);
   padding: 4px 14px;
   border-radius: 20px;
   margin-bottom: 12px;
 }

 .eyebrow-white {
   display: inline-block;
   font-size: 11.5px;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #4ade80;
   background: rgba(74, 222, 128, .15);
   padding: 4px 14px;
   border-radius: 20px;
   margin-bottom: 12px;
 }

 .sec-title {
   font-size: clamp(22px, 3vw, 34px);
   font-weight: 800;
   color: var(--dark);
   margin-top: 30px;
   margin-bottom: 20px;
   line-height: 1.25
 }

 .sec-title-white {
   font-size: clamp(22px, 3vw, 34px);
   font-weight: 800;
   color: #fff;
   margin-bottom: 10px;
   line-height: 1.25
 }

 .sec-desc {
   font-size: 15px;
   color: var(--muted);
   max-width: 580px;
   margin: 0 auto;
   line-height: 1.7
 }

 .sec-desc-white {
   font-size: 15px;
   color: rgba(255, 255, 255, .78);
   max-width: 580px;
   margin: 0 auto;
   line-height: 1.7
 }

 .sec-hd-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 16px;
    text-align: center;
 }

 /* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 11px 24px;
   border-radius: 9px;
   font-size: 13.5px;
   font-weight: 700;
   cursor: pointer;
   transition: .2s;
 }

 .btn svg {
   width: 15px;
   height: 15px;
   flex-shrink: 0
 }

 .btn-primary {
   background: var(--primary);
   color: #fff;
   border: none;
   box-shadow: var(--shadow-sm)
 }

 .btn-primary:hover {
   background: var(--primary-d);
   transform: translateY(-1px);
   box-shadow: var(--shadow)
 }

 .btn-primary svg {
   fill: #fff
 }

 .btn-green {
   background: var(--green);
   color: #fff;
   border: none;
   box-shadow: var(--shadow-sm)
 }

 .btn-green:hover {
   background: var(--green-d);
   transform: translateY(-1px);
   box-shadow: var(--shadow)
 }

 .btn-green svg {
   fill: #fff
 }

 .btn-orange {
   background: var(--orange);
   color: #fff;
   border: none
 }

 .btn-orange:hover {
   background: var(--orange-d);
   transform: translateY(-1px)
 }

 .btn-orange svg {
   fill: #fff
 }

 .btn-outline {
   background: #fff;
   color: var(--primary);
   border: 1.5px solid var(--primary)
 }

 .btn-outline:hover {
   background: var(--primary);
   color: #fff
 }

 .btn-outline-white {
   background: transparent;
   color: #fff;
   border: 2px solid rgba(255, 255, 255, .5)
 }

 .btn-outline-white:hover {
   background: rgba(255, 255, 255, .15)
 }


 .btn-sm {
   padding: 8px 16px;
   font-size: 12.5px;
   border-radius: 8px
 }

 .btn-wa {
     background: var(--green);
   color: #fff;
   padding: 10px 20px;
   border-radius: 9px;
   font-size: 13px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
   transition: .2s;
 }

 .btn-wa:hover {
   background: var(--green-d);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
 }

 .btn-wa svg {
   fill: #fff
 }

 .btn-call {
   background: var(--primary-l);
   color: var(--primary);
   border: 1.5px solid var(--primary)
 }

 .btn-call svg {
   fill: var(--primary)
 }

 /* ============================================================
   CATEGORY CARDS
   ============================================================ */
 .cat-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
   gap: 12px
 }

 .cat-card {
   background: #fff;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 20px 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 10px;
   cursor: pointer;
   transition: all .22s;
   text-decoration: none;
 }

 .cat-card:hover {
   border-color: var(--green-d);;
   box-shadow: var(--shadow);
   transform: translateY(-5px)
 }

 .cat-ico {
   width: 52px;
   height: 52px;
   background: var(--primary-l);
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .22s;
 }

 .cat-ico svg {
   width: 24px;
   height: 24px;
   fill: var(--primary);
   transition: .22s
 }

 .cat-card:hover .cat-ico {
   background: var(--primary)
 }

 .cat-card:hover .cat-ico svg {
   fill: #fff
 }

 .cat-name {
   font-size: 12.5px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.3
 }

 .cat-count {
   font-size: 11.5px;
   color: var(--green);
   font-weight: 600
 }

 /* ============================================================
   COMPANY CARDS
   ============================================================ */
 .co-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
   gap: 18px
 }

 .co-grid-4 {
   grid-template-columns: repeat(4, 1fr)
 }

 .co-card {
   background: #fff;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-xl);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   position: relative;
   transition: all .22s;
 }

 .co-card:hover {
   border-color: var(--primary);
   box-shadow: var(--shadow-lg);
   transform: translateY(-5px)
 }

 .feat-ribbon {
   position: absolute;
   top: 16px;
   right: -2px;
   background: var(--orange);
   color: #fff;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.2px;
   padding: 4px 14px 4px 10px;
   clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
 }

 .co-top {
   padding: 16px 16px 0;
   display: flex;
   justify-content: space-between;
   align-items: flex-start
 }

 .co-logo {
   width: 83px;
   height: 75px; 
   border-radius: 9px;
   border: 1.5px solid var(--border);
   background: var(--bg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   font-weight: 800;
   color: var(--primary);
   flex-shrink: 0;
   letter-spacing: -1px;
   overflow: hidden;
 }
 .co-logo > img {
   width: 70px; 

 }

 .badge-v {
   background: #dcfce7;
   color: #16a34a;
   font-size: 11px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 20px;
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .badge-v svg {
   width: 11px;
   height: 11px;
   fill: #16a34a
 }

 .co-body {
   padding: 12px 16px;
   flex: 1
 }

 .co-name {
   font-size: 15px;
   font-weight: 700;
   color: var(--dark);
   margin-bottom: 5px;
   line-height: 1.3
 }

 .co-loc {
   font-size: 12.5px;
   color: var(--muted);
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 4px
 }

 .co-loc svg {
   width: 12px;
   height: 12px;
   fill: #ef4444;
   flex-shrink: 0
 }

 .co-desc {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.55;
   margin-bottom: 10px
 }

 .co-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   margin-bottom: 10px
 }

 .tag {
   font-size: 11px;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: 20px;
 }

 .tag-blue {
   background: var(--primary-l);
   color: var(--primary)
 }

 .tag-green {
   background: var(--green-l);
   color: var(--green-d)
 }

 .tag-orange {
   background: #fff0ea;
   color: #c24a14
 }

 .co-invest {
   font-size: 13px;
   color: #16a34a;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 4px
 }

 .co-invest svg {
   width: 13px;
   height: 13px;
   fill: #16a34a
 }

 .co-footer {
   padding: 12px 16px;
   border-top: 1px solid var(--border);
   display: flex;
   gap: 8px;
 }

 .btn-viewp {
   background: var(--primary);
   color: #fff;
   border: none;
   padding: 8px 0;
   border-radius: 8px;
   font-size: 12.5px;
   font-weight: 700;
   flex: 1;
   transition: .2s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
 }

  
.btn-viewp .fab-btn {
     box-shadow: none; 
     height: 0px;
}
 .btn-viewp svg {
   width: 13px;
   height: 13px;
   fill: #fff
 }

 .btn-enq {
   background: var(--green);
   color: #fff;
   border: none;
   padding: 8px 0;
   border-radius: 8px;
   font-size: 12.5px;
   font-weight: 700;
   flex: 1;
   transition: .2s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
 }

 .btn-enq:hover {
   background: var(--green-d)
 }

 .btn-enq svg {
   width: 13px;
   height: 13px;
   fill: #fff
 }

 /* ============================================================
   PRODUCT RANGE CARDS
   ============================================================ */
 .pr-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
   gap: 12px
 }

 .pr-card {
   background: #fff;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 18px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 8px;
   cursor: pointer;
   transition: all .22s;
 }

 .pr-card:hover {
   border-color: var(--green);
   box-shadow: var(--shadow);
   transform: translateY(-4px)
 }

 .pr-ico {
   width: 48px;
   height: 48px;
   background: var(--green-l);
   border-radius: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .22s;
 }

 .pr-ico svg {
   width: 22px;
   height: 22px;
   fill: var(--green);
   transition: .22s
 }

 .pr-card:hover .pr-ico {
   background: var(--green)
 }

 .pr-card:hover .pr-ico svg {
   fill: #fff
 }

 .pr-name {
   font-size: 12.5px;
   font-weight: 700;
   color: var(--dark)
 }

 .pr-cnt {
   font-size: 11.5px;
   color: var(--muted)
 }

 /* ============================================================
   WHY US
   ============================================================ */
 .why-layout {
   display: grid;
   grid-template-columns: 1fr 1.8fr;
   gap: 60px;
   align-items: start
 }

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

 .why-card {
   background: #fff;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 20px;
   display: flex;
   gap: 14px;
   transition: all .22s;
 }

 .why-card:hover {
   box-shadow: var(--shadow);
   transform: translateY(-2px);
   border-color: transparent
 }

 .why-ico {
   width: 44px;
   height: 44px;
   border-radius: 11px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .why-ico svg {
   width: 20px;
   height: 20px
 }

 .w-bl .why-ico {
   background: #dbeafe
 }

 .w-bl .why-ico svg {
   fill: #2563eb
 }

 .w-gr .why-ico {
   background: #dcfce7
 }

 .w-gr .why-ico svg {
   fill: #16a34a
 }

 .w-or .why-ico {
   background: #ffedd5
 }

 .w-or .why-ico svg {
   fill: #ea580c
 }

 .w-pu .why-ico {
   background: #ede9fe
 }

 .w-pu .why-ico svg {
   fill: #7c3aed
 }

 .w-te .why-ico {
   background: #ccfbf1
 }

 .w-te .why-ico svg {
   fill: #0d9488
 }

 .w-re .why-ico {
   background: #fee2e2
 }

 .w-re .why-ico svg {
   fill: #dc2626
 }

 .why-t {
   font-size: 14px;
   font-weight: 700;
   color: var(--dark);
   margin-bottom: 4px
 }

 .why-d {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.55;
   margin: 0
 }

 /* ─── HOW IT WORKS ─── */
.how-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  position: relative;
}
.how-grid::before {
  content: ''; position: absolute; top: 44px; left: 12.5%; right: 12.5%;
  height: 2px; background: linear-gradient(90deg, var(--teal), var(--orange));
  z-index: 0;
}
.how-step { text-align: center; padding: 0 20px; position: relative; z-index: 1; }
.step-num {
  width: 88px; height: 88px; border-radius: 50%;
  background: white; border: 3px solid var(--teal);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  /* font-family: 'Fraunces', serif; font-size: 30px; */
   font-weight: 800;
  color: var(--teal); box-shadow: 0 0 0 8px rgba(0,198,174,0.1);
}
.how-step:nth-child(2) .step-num { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 8px rgba(246,195,68,0.1); }
.how-step:nth-child(3) .step-num { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 0 8px rgba(255,92,26,0.1); }
.how-step:nth-child(4) .step-num { border-color: var(--navy); color: var(--navy); box-shadow: 0 0 0 8px rgba(7,19,42,0.08); }
.how-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.how-desc { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

 /* ============================================================
   Trust client
   ============================================================ */
.trust-client {
  background-color: white;
}

.logo-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.logos-track {
  display: flex;
  width: max-content;
  animation: scroll 30s linear infinite;
}

.logo-slider:hover .logos-track {
  animation-play-state: paused;
}

.logos-slide {
  display: flex;
}

.logos-slide img {
   max-width: 130px;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin: 0 20px;
  transition: all 0.3s ease;
}
.logos-slide img:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* Smooth infinite scroll */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .logos-slide img {
    width: 120px;
    margin: 0 20px;
  }
}

@media (max-width: 480px) {
  .logos-slide img {
    width: 90px;
    margin: 0 15px;
  }
}



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

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

 /* ============================================================
   CTA BANNER
   ============================================================ */
 .cta-inner-grid {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 52px;
   align-items: center;
 }

 .cta-title {
   font-size: clamp(22px, 3vw, 38px);
   font-weight: 800;
   color: #fff;
   line-height: 1.25;
   margin-bottom: 14px
 }

 .cta-desc {
   color: rgba(255, 255, 255, .82);
   font-size: 15px;
   line-height: 1.7;
   margin-bottom: 22px
 }

 .trust-bs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
 }

 .trust-b {
   background: rgba(255, 255, 255, .13);
   color: rgba(255, 255, 255, .9);
   font-size: 12.5px;
   font-weight: 600;
   padding: 6px 15px;
   border-radius: 25px;
   border: 1px solid rgba(255, 255, 255, .2);
   display: flex;
   align-items: center;
   gap: 5px;
 }

 .trust-b svg {
   width: 13px;
   height: 13px;
   fill: #4ade80
 }

 .cta-form-card {
   background: #fff;
   border-radius: var(--radius-xl);
   padding: 32px;
   box-shadow: var(--shadow-xl);
 }

 .cta-form-title {
   font-size: 18px;
   font-weight: 800;
   color: var(--dark);
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 8px
 }

 .cta-form-title svg {
   width: 20px;
   height: 20px;
   fill: var(--primary)
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-bottom: 12px
 }

 .form-single {
   margin-bottom: 12px
 }

 .f-group label {
   font-size: 12.5px;
   font-weight: 700;
   color: var(--dark);
   display: block;
   margin-bottom: 5px
 }

 .f-inp,
 .f-sel,
 .f-txt {
   width: 100%;
   border: 1.5px solid var(--border);
   border-radius: 9px;
   padding: 11px 14px;
   font-size: 13.5px;
   color: var(--dark);
   background: #fff;
   transition: .2s;
   font-family: inherit;
 }

 .f-inp:focus,
 .f-sel:focus,
 .f-txt:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(11, 77, 140, .08)
 }

 .f-inp::placeholder,
 .f-txt::placeholder {
   color: var(--light)
 }

 .f-txt {
   resize: none
 }

 .btn-cta-submit {
   width: 100%;
   background: var(--orange);
   color: #fff;
   border: none;
   padding: 15px;
   border-radius: 10px;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: .2s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-family: inherit;
 }

 .btn-cta-submit:hover {
   background: var(--orange-d);
   transform: translateY(-1px);
   box-shadow: var(--shadow)
 }

 .btn-cta-submit svg {
   width: 17px;
   height: 17px;
   fill: #fff
 }

 .form-note {
   text-align: center;
   font-size: 12px;
   color: var(--muted);
   margin-top: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px
 }

 .form-note svg {
   width: 13px;
   height: 13px;
   fill: #16a34a
 }

 /* ============================================================
   BLOGS
   ============================================================ */
 .blog-grid {
   display: grid;
   grid-template-columns: 1.2fr 1fr 1fr;
   gap: 20px
 }

 .blog-card {
   background: #fff;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-xl);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: all .22s;
 }

 .blog-card:hover {
   border-color: var(--primary);
   box-shadow: var(--shadow-lg);
   transform: translateY(-5px)
 }

 .blog-img {
   background: var(--primary-l);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 42px;
   position: relative;
   overflow: hidden;
 }

 .blog-img-sm {
   height: 180px
 }

 .blog-img-feat {
   height: 240px
 }

 .blog-cat-badge {
   position: absolute;
   top: 12px;
   left: 12px;
   background: var(--primary);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   padding: 4px 12px;
   border-radius: 20px;
 }

 .blog-body {
   padding: 18px;
   flex: 1;
   display: flex;
   flex-direction: column
 }

 .blog-meta {
   font-size: 12px;
   color: var(--muted);
   margin-bottom: 9px;
   display: flex;
   gap: 12px;
   flex-wrap: wrap
 }

 .blog-meta span {
   display: flex;
   align-items: center;
   gap: 4px
 }

 .blog-meta svg {
   width: 12px;
   height: 12px;
   fill: var(--muted)
 }

 .blog-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--dark);
   line-height: 1.4;
   margin-bottom: 8px
 }

 .blog-feat .blog-title {
   font-size: 18px
 }

 .blog-exc {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.6;
   flex: 1
 }

 .blog-rm {
   color: var(--primary);
   font-size: 13px;
   font-weight: 700;
   margin-top: 14px;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   transition: .2s;
 }

 .blog-rm:hover {
   gap: 9px
 }

 .blog-rm svg {
   width: 13px;
   height: 13px;
   fill: var(--primary);
   transition: .2s
 }

 /* ============================================================
   TESTIMONIALS
   ============================================================ */
 .test-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
 }

 .test-card {
   background: #fff;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-xl);
   padding: 26px;
   transition: all .22s;
 }

 .test-card:hover {
   border-color: var(--primary);
   box-shadow: var(--shadow)
 }

 .stars {
   color: #f59e0b;
   font-size: 15px;
   margin-bottom: 12px;
   letter-spacing: 1px
 }

 .test-q {
   font-size: 14px;
   color: var(--body);
   line-height: 1.7;
   
   margin-bottom: 18px;
   border-left: 3px solid var(--green);
   padding-left: 14px;
 }

 .test-auth {
   display: flex;
   align-items: center;
   gap: 12px
 }

 .av {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary), var(--green));
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 17px;
   font-weight: 800;
   flex-shrink: 0;
 }

 .test-nm {
   font-size: 14px;
   font-weight: 700;
   color: var(--dark)
 }

 .test-rl {
   font-size: 12px;
   color: var(--muted)
 }

 /* ============================================================
   FAQ
   ============================================================ */
 .faq-layout {
   display: flex;
   grid-template-columns: 1fr 2fr;
   align-items: start;
   flex-wrap: wrap;
   justify-content: space-around;
 }

 .faq-contact-card {
   background: var(--primary-l);
   border-radius: var(--radius-lg);
   padding: 24px;
   text-align: center;
   margin-top: 40px
 }

 .faq-contact-card h6 {
   font-size: 16px;
   font-weight: 700;
   color: var(--dark);
   margin: 10px 0 6px
 }

 .faq-contact-card p {
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 16px;
   line-height: 1.55
 }


 /* ============================================================
   BANNER CTA STRIP
   ============================================================ */
 .banner-cta {
   background: linear-gradient(135deg, var(--primary-d) 0%, var(--primary) 100%);
   padding: 48px 0;
   text-align: center;
 }

 .banner-cta h2 {
   font-size: clamp(20px, 3vw, 32px);
   font-weight: 800;
   color: #fff;
   margin-bottom: 10px
 }

 .banner-cta p {
   color: rgba(255, 255, 255, .8);
   font-size: 15px;
   margin-bottom: 28px
 }

 .banner-cta-btns {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap
 }

 /* ============================================================
   COMPANY CTA STRIP (dark)
   ============================================================ */
 .strip-cta {
   background: var(--green);
   padding: 36px 0
 }

 .strip-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
 }

 .strip-text h3 {
   font-size: 22px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 4px
 }

 .strip-text p {
   color: rgba(255, 255, 255, .82);
   font-size: 14px
 }

 .strip-btns {
   display: flex;
   gap: 20px;
   flex-wrap: wrap
 }

 /* ============================================================
   FOOTER
   ============================================================ */
 .footer-nl {
   background: var(--primary);
   padding: 28px 0
 }

 .nl-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: wrap
 }

 .nl-title {
   font-size: 16px;
   font-weight: 700;
   color: #fff
 }

 .nl-sub {
   font-size: 13px;
   color: rgba(255, 255, 255, .65)
 }

 .nl-form {
   display: flex;
   gap: 9px;
   flex-wrap: wrap
 }

 .nl-inp {
   background: rgba(255, 255, 255, .12);
   border: 1.5px solid rgba(255, 255, 255, .22);
   color: #fff;
   padding: 12px 18px;
   border-radius: 9px;
   font-size: 14px;
   outline: none;
   width: 280px;
   font-family: inherit;
   transition: .2s;
 }

 .nl-inp::placeholder {
   color: rgba(255, 255, 255, .5)
 }

 .nl-inp:focus {
   border-color: rgba(255, 255, 255, .5)
 }

 .btn-nl {
   background: var(--orange);
   color: #fff;
   border: none;
   padding: 12px 22px;
   border-radius: 9px;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   white-space: nowrap;
   transition: .2s;
   font-family: inherit;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .btn-nl:hover {
   background: var(--orange-d)
 }

 .btn-nl svg {
   width: 15px;
   height: 15px;
   fill: #fff
 }

 .footer-main {
   background: #1e293b;
   padding: 56px 0 28px
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2.2fr 1fr 1.1fr 1.1fr;
   gap: 36px;
   margin-bottom: 36px
 }

 .f-logo-row {
   display: flex;
   align-items: center;
   gap: 11px;
   margin-bottom: 14px
 }

 
  
 .f-desc {
   font-size: 13px;
   color: rgba(255, 255, 255, .55);
   line-height: 1.65;
   margin-bottom: 18px
 }

 .f-contact-list {
   margin-bottom: 18px
 }

 .f-contact-list a {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   font-size: 13px;
   color: rgba(255, 255, 255, .6);
   margin-bottom: 8px;
   transition: .2s;
 }

 .f-contact-list a:hover {
   color: #fff
 }

 .f-contact-list a svg {
   width: 14px;
   height: 14px;
   fill: var(--green);
   flex-shrink: 0;
   margin-top: 2px
 }

 .socials {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
 }

 .soc {
   width: 34px;
   height: 34px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   color: #fff;
   cursor: pointer;
   transition: .2s;
   font-weight: 700;
 }

 .soc:hover {
   transform: translateY(-3px);
   opacity: .9
 }

 .soc-fb {
   background: #1877f2
 }

 .soc-tw {
   background: #1da1f2
 }

 .soc-li {
   background: #0a66c2
 }

 .soc-ig {
   background: #e1306c
 }

 .soc-wa {
   background: #25d366
 }

 .f-col-t {
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   color: #fff;
   margin-bottom: 18px;
   padding-bottom: 10px;
   border-bottom: 1.5px solid rgba(255, 255, 255, .1);
 }

 .f-lks {
   list-style: none
 }

 .f-lks li {
   margin-bottom: 10px
 }

 .f-lks li a {
   font-size: 13px;
   color: rgba(255, 255, 255, .55);
   display: flex;
   align-items: center;
   gap: 6px;
   transition: .2s;
 }

 .f-lks li a::before {
   content: '›';
   color: var(--green);
   font-weight: 700;
   font-size: 16px
 }

 .f-lks li a:hover {
   color: #fff;
   padding-left: 4px
 }

 .footer-bottom {
   background: #0b1220;
   padding: 16px 0;
   border-top: 1px solid rgba(255, 255, 255, .06);
 }

 .f-bot-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12.5px;
   color: rgba(255, 255, 255, .45);
   flex-wrap: wrap;
   gap: 10px;
 }

 .f-bot-links {
   display: flex;
   gap: 18px
 }

 .f-bot-links a {
   color: rgba(255, 255, 255, .45);
   cursor: pointer;
   transition: .2s;
   font-size: 12.5px
 }

 .f-bot-links a:hover {
   color: #fff
 }
.companyRednirus a:hover {
    color:white ;
}
 /* ============================================================
   FLOATING BUTTONS
   ============================================================ */
 .floats {
   position: fixed;
   right: 20px;
   bottom: 80px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 900;
 }

 .fab-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   border: none;
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
   transition: all .22s;
   position: relative;
 }

 .fab-btn:hover {
   transform: scale(1.1)
 }
 
 

 .fab-wa {
   background: #25d366
 }

 .fab-call {
    background: var(--primary);
    width: auto;
    padding: 10px;
    align-items: center;
}

 .fab-enq {
   background: var(--orange)
 }

 .fab-btn svg {
   width: 22px;
   height: 22px;
   fill: #fff
 }

 .fab-tooltip {
   position: absolute;
   right: 62px;
   background: rgba(15, 23, 42, .88);
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   padding: 5px 12px;
   border-radius: 7px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: .2s;
 }

 .fab-tooltip::after {
   content: '';
   position: absolute;
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
   border: 5px solid transparent;
   border-left-color: rgba(15, 23, 42, .88);
 }

 .fab-btn:hover .fab-tooltip {
   opacity: 1
 }

 .btt-btn {
   position: fixed;
   right: 20px;
   bottom: 20px;
   width: 46px;
   height: 46px;
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 50%;
   font-size: 14px;
   cursor: pointer;
   box-shadow: var(--shadow);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: .3s;
   z-index: 900;
 }

 .btt-btn.vis {
   opacity: 1
 }

 .btt-btn:hover {
   background: var(--primary-d);
   transform: translateY(-2px)
 }

 .btt-btn svg {
   width: 18px;
   height: 18px;
   fill: #fff
 }

 /* ============================================================
   ENQUIRY MODAL
   ============================================================ */
 .modal-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(15, 23, 42, .6);
   backdrop-filter: blur(4px);
   z-index: 1000;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }

 .modal-backdrop.open {
   display: flex
 }

 .modal-box {
   background: #fff;
   border-radius: var(--radius-xl);
   width: 100%;
   max-width: 520px;
   max-height: 90vh;
   overflow-y: auto;
   animation: modalIn .2s ease;
 }

 @keyframes modalIn {
   from {
     opacity: 0;
     transform: translateY(20px)
   }

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

 .modal-head {
   background: linear-gradient(135deg, var(--primary-d), var(--primary));
   padding: 22px 26px;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   position: sticky;
   top: 0;
   z-index: 2;
 }

 .modal-head h4 {
   font-size: 18px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 3px;
   display: flex;
   align-items: center;
   gap: 8px
 }

 .modal-head h4 svg {
   width: 20px;
   height: 20px;
   fill: #fff
 }

 .modal-head p {
   font-size: 13px;
   color: rgba(255, 255, 255, .72)
 }

 .modal-close {
   background: rgba(255, 255, 255, .15);
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: .2s;
   flex-shrink: 0;
 }

 .modal-close:hover {
   background: rgba(255, 255, 255, .28)
 }

 .modal-close svg {
   width: 16px;
   height: 16px;
   fill: #fff
 }

 .modal-body {
   padding: 26px
 }

 .modal-form .f-row-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-bottom: 12px
 }

 .modal-form .f-full {
   margin-bottom: 12px
 }

 .modal-form .f-lbl {
   font-size: 12.5px;
   font-weight: 700;
   color: var(--dark);
   display: block;
   margin-bottom: 5px
 }

 .modal-form .req {
   color: #ef4444
 }

 .modal-submit {
   width: 100%;
   background: var(--primary);
   color: #fff;
   border: none;
   padding: 14px;
   border-radius: 10px;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: .2s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-family: inherit;
 }

 .modal-submit:hover {
   background: var(--primary-d);
   transform: translateY(-1px)
 }

 .modal-submit svg {
   width: 17px;
   height: 17px;
   fill: #fff
 }

 .modal-note {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   font-size: 12px;
   color: var(--muted);
   margin-top: 10px
 }

 .modal-note svg {
   width: 13px;
   height: 13px;
   fill: #16a34a
 }

 .modal-alts {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-bottom: 18px;
   padding-bottom: 18px;
   border-bottom: 1px solid var(--border)
 }

 .modal-alt-btn {
   padding: 12px;
   border-radius: 9px;
   font-size: 13px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   cursor: pointer;
   transition: .2s;
   border: none;
   text-decoration: none;
 }

 .modal-alt-btn svg {
   width: 16px;
   height: 16px;
   flex-shrink: 0
 }

 .alt-wa {
   background: #25d366;
   color: #fff
 }

 .alt-wa svg {
   fill: #fff
 }

 .alt-wa:hover {
   background: #128c7e
 }

 .alt-call {
   background: var(--primary-l);
   color: var(--primary);
   border: 1.5px solid var(--primary) !important
 }

 .alt-call svg {
   fill: var(--primary)
 }

 .alt-call:hover {
   background: var(--primary);
   color: #fff
 }

 .alt-call:hover svg {
   fill: #fff
 }

 /* Toast */
 .toast-wrap {
   position: fixed;
   bottom: 80px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2000;
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: center;
 }

 .toast {
   background: #0f172a;
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   padding: 14px 22px;
   border-radius: 12px;
   box-shadow: var(--shadow-xl);
   display: flex;
   align-items: center;
   gap: 8px;
   animation: toastIn .3s ease;
   min-width: 260px;
 }

 .toast svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0
 }

 .toast-success svg {
   fill: #4ade80
 }

 @keyframes toastIn {
   from {
     opacity: 0;
     transform: translateY(12px)
   }

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

 /* ============================================================
   RESPONSIVE
   ============================================================ */
 @media(max-width:1100px) {
   .footer-grid {
     grid-template-columns: 1.5fr 1fr 1fr;
     gap: 28px
   }

   .footer-grid>div:last-child {
     grid-column: 1/4
   }

   .co-grid-4 {
     grid-template-columns: repeat(3, 1fr)
   }
  .hero-inner,.about-grid,.why-grid,.tpm-grid,.exp-grid,.cg{grid-template-columns:1fr;gap:40px}
 }
 @media (min-width: 993px) and (max-width: 1166px) {
  .eyebrow {
    text-align: center;
  }
  .faqLayout {
    width: 100%;
  }
  .aw-sub {
    display: block;
  }
}

 @media(max-width:992px) {
   .header-call {
     display: none
   }

   .why-layout {
     grid-template-columns: 1fr
   }

   .cta-inner-grid {
     grid-template-columns: 1fr
   }

   .faq-layout {
     display: block;
     
   }

   .blog-grid {
     grid-template-columns: 1fr 1fr
   }

   .blog-feat {
     grid-column: span 2
   }

   .nav-links {
     display: none
   }

   .hamburger {
     display: flex
   }

   .nav-all-btn {
     display: none
   }
   .faq-contact-card {
    margin-bottom: 25px;
   } 
   .faqLayout {
    text-align: center !important;
  }
  
 }

 @media(max-width:768px) {
   .header-inner {
     padding: 10px 16px;
     flex-wrap: wrap
   }

   .header-search {
     order: 3;
     flex: 0 0 100%
   }

   .stat-sep {
     display: none
   }

   .stats-inner {
     gap: 20px
   }

   .test-grid {
     grid-template-columns: 1fr
   }

   .blog-grid {
     grid-template-columns: 1fr
   }

   .blog-feat {
     grid-column: auto
   }

   .f-row,
   .form-row {
     grid-template-columns: 1fr
   }

   .footer-grid {
     grid-template-columns: 1fr 1fr;
     gap: 24px
   }

   .footer-grid>div:first-child {
     grid-column: 1/3
   }

   .footer-grid>div:last-child {
     grid-column: auto
   }

   .cta-inner-grid {
     grid-template-columns: 1fr
   }

   .section {
     padding: 52px 0
   }

   .floats {
     right: 14px;
     bottom: 72px
   }

   .fab-btn {
     width: 46px;
     height: 46px
   }

   .fab-btn svg {
     width: 19px;
     height: 19px
   }

   .co-grid-4 {
     grid-template-columns: repeat(2, 1fr)
   }

   .strip-inner {
     flex-direction: column;
     text-align: center
   }
   .section,.about-sec,.prod-sec,.why-sec,.tpm-sec,.export-sec,.testi-sec,.dir-sec,.cta-strip,.contact-sec{padding:64px 0}
 
 }

 @media(max-width:576px) {
   .top-info {
     display: none
   }

   .hero {
     padding: 52px 0 68px
   }

   .hero h1 {
     font-size: 26px
   }

   .hero-btns {
     flex-direction: column;
     align-items: center
   }

   .btn-hero-green,
   .btn-hero-ghost,
   .btn-hero-wa {
     width: 100%;
     max-width: 320px;
     justify-content: center
   }

   .hero-search-box {
     padding: 16px
   }

   .cat-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .pr-grid {
     grid-template-columns: repeat(1, 1fr)
   }

   .co-grid {
     grid-template-columns: 1fr
   }

   .co-grid-4 {
     grid-template-columns: 1fr
   }

   .why-grid {
     grid-template-columns: 1fr
   }

   .banner-cta-btns {
     flex-direction: column;
     align-items: center
   }

   .footer-grid {
     grid-template-columns: 1fr;
     gap: 24px
   }

   .footer-grid>div:first-child {
     grid-column: auto
   }

   .footer-grid>div:last-child {
     grid-column: auto
   }

   .nl-inp {
     width: 100%
   }

   .nl-form {
     flex-direction: column
   }

   .modal-form .f-row-2 {
     grid-template-columns: 1fr
   }

   .modal-alts {
     grid-template-columns: 1fr
   }

   .top-acts {
     gap: 4px
   }

   .hero-search-btn {
     padding: 14px 16px;
     font-size: 13px
   }
   .strip-btns {
   justify-content: center;
 }
 .nl-inner  {
  justify-content: center !important;
 }
 }


 /* ─── RESPONSIVE ─── */
@media (min-width: 1101px) and (max-width: 1400px) {
  .aw .sl .aw-yr {
    position: absolute;
     top: -101px;
    left: -21px;
    background: var(--teal);
    color: #fff;
    padding: 16px 14px;
    border-radius: var(--r);
    text-align: center;
    font-family: var(--fh);
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0, 168, 107, .38);
  }
}
  
 @media (max-width: 1100px) {
  .aw-sub {
    display: none;
  }
  .aw-yr  {
    display: none;
  }
 }
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hero-right { order: -1; }
  .search-card { max-width: 600px; margin: 0 auto; }
  .lead-inner { grid-template-columns: 1fr; gap: 48px; }
  .how-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .how-grid::before { display: none; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .profile-body { grid-template-columns: 1fr; }
  .profile-sidebar { order: -1; }
   .sg{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 768px) {
  .hamburger { display: block; }
  .mobile-menu.open { display: block; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .how-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .company-grid { grid-template-columns: 1fr; }
  .search-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .filter-inner { flex-direction: column; align-items: stretch; }
  .filter-count { margin-left: 0; }
  .profile-top { flex-direction: column; align-items: flex-start; }
  .cert-inner { gap: 24px; }
  .product-mini-grid { grid-template-columns: 1fr; }
  .hero-trust { flex-wrap: wrap; gap: 12px; }
  .section { padding: 60px 0; }
  .sg{display:grid;grid-template-columns:repeat(2,1fr)}
   .btn-listco {
       display:none;
   }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { padding: 22px 12px; }
  .stat-num { font-size: 32px; }
  .modal-box { padding: 28px 20px; }
  .sg{display:grid;grid-template-columns:repeat(1,1fr)}
    
}
@media(min-width:992px){
  #mobileMenu{
    display:none !important;
  }
  
}
@media (max-width: 991px) {
  .btn-listco {
    display: none;
  }
}
  .section { padding: 90px 0; }
.section-light { background: var(--off-white); }
.section-dark { background: var(--navy); }
.container { max-width: 1320px; margin: auto; padding: 0 24px; }

.section-header { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,198,174,0.1); color: var(--teal-dark);
  padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px;
  border: 1px solid rgba(0,198,174,0.25);
}
.section-dark .section-tag { background: rgba(0,198,174,0.1); color: var(--teal); border-color: rgba(0,198,174,0.2); }

h2.section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; line-height: 1.2;
  color: var(--navy); margin-bottom: 16px;
}
.section-dark h2.section-title { color: white; }
.section-title em { color: var(--teal-dark);   }
.section-dark .section-title em { color: var(--teal); }

.section-subtitle { color: var(--muted); font-size: 16px; line-height: 1.7; }
.section-dark .section-subtitle { color: rgba(255,255,255,0.6); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.cat-card {
  background: white; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 28px 20px; text-align: center;
  cursor: pointer; transition: all 0.3s;
  position: relative; overflow: hidden;
}
.cat-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-teal);
  opacity: 0; transition: opacity 0.3s;
}
.cat-card:hover {
    border-color: var(--teal);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.cat-card:hover::before { opacity: 1; }
.cat-card:hover .cat-icon { background: rgba(255,255,255,0.2); color: white; }
.cat-card:hover .cat-name { color: white; }
.cat-card:hover .cat-count { color: rgba(255,255,255,0.8); }

.cat-icon {
  width: 60px; height: 60px;
  background: rgba(0,198,174,0.1); color: var(--teal-dark);
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin: 0 auto 14px; transition: all 0.3s; position: relative; z-index: 1;
}
.cat-name { font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; position: relative; z-index: 1; transition: color 0.3s; }
.cat-count { font-size: 12px; color: var(--muted); position: relative; z-index: 1; transition: color 0.3s; }

.btn-teal {
     background: var(--green);
    color: #fff;
    border: none;
    padding: 11px 54px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    flex: 1;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.btn-teal:hover {
  background: var(--green-d);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
/* model page */
/* Default input */
input,
textarea {
  background-color: #ffffff;
  color: #000;
  border: 1px solid #ccc;
  padding: 10px;
  outline: none;
  transition: background 0.3s ease;
}

/* When EMPTY */
input:placeholder-shown,
textarea:placeholder-shown {
  background-color: #f0f7ff;
}

/* 🔥 Force placeholder BLACK */
input::placeholder,
textarea::placeholder {
  color: #000 !important;
  opacity: 1 !important;
}

/* Browser support */
input::-webkit-input-placeholder { color: #000; opacity:1; }
textarea::-webkit-input-placeholder { color: #000; opacity:1; }

input:-ms-input-placeholder { color: #000; }
textarea:-ms-input-placeholder { color: #000; }
.search-field input::placeholder,
.search-field textarea::placeholder {
  color: #000 !important;
  opacity: 1 !important;
}
 
input {
  margin-top:8px;
}
textarea {
  margin-top:8px;
}

/* Default desktop layout */
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.textField_hero {
 width: 408px !important;
}

.searchBox {
  width: 408px !important;
}
/* 📱 MOBILE FIX */
 
@media (max-width: 992px) {

  .hero-content {
    flex-direction: column;
  }

  /* ✅ FORM FIRST */
  .hero-right {
    order: 1;
    width: 100%;
  }

  /* ✅ CONTENT SECOND */
  .hero-left {
    order: 2;
    width: 100%;
    text-align: center;
  }

  /* Improve spacing */
  .hero-left {
    margin-top: 20px;
  }

  /* Buttons center */
  .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Trust items center */
  .hero-trust {
    justify-content: center;
  }

  /* Form full width */
  .search-card {
    max-width: 100%;
  }

  /* Stack inputs */
  .search-field {
    flex-direction: column;
  }
  .textField_hero {
  width: 100% !important;
}
}

@media (max-width: 556px) {
   .search-card {
    max-width: 100%;
  }
  .mailBox {
    margin-top:15px;
  }
  .cityBox {
    margin-top:15px;
  }
  .textField_hero {
  width: 100% !important;
}
.searchBox {
  width: 100% !important;
}
}


 .logo-mark:hover {
    background: var(--green-d);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
  .mainInfo {
    font-size:14px;
  }
  
 /* ============================================================
   MAIN NAV
   ============================================================ */
 
.site-header{
  position:sticky;
  top:0;
  z-index:999;
}

/* ===== NAV ===== */
.main-nav{
  background: linear-gradient(135deg, #07132A 0%, #0D2B55 50%, #0A3060 100%);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1300px;
  margin:auto;
  padding:14px 16px;
}

/* ===== LOGO ===== */
.site-logo img{
  max-height:50px;
}

/* ===== TOGGLE ===== */
.nav-toggle{
  display:none;
  font-size:26px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

/* ===== NAV LINKS ===== */
.nav-links{
  display:flex;
  align-items:center;
  gap:10px;
   background: var(--bg-dark);
  padding: 10px;
  border-radius: 14px;
}
 
.nav-item{position:relative;}

.nav-link{
  color:#fff;
  padding:10px 12px;
  font-size:14px;
  cursor:pointer;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.25s ease;
}

/* Hover effect (like screenshot) */
.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Active link */
.nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

/* ===== MEGA MENU ===== */
.mega-drop{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  min-width:600px;
  display:none;
  margin-top:10px;
}

.nav-item:hover .mega-drop{
  display:block;
}

.mega-inner{
  display:flex;
  padding:20px;
}

.mega-col{
  flex:1;
}

.mega-col-title{
  font-weight:bold;
  margin-bottom:10px;
}

.mega-col ul li{
  list-style:none;
  margin-bottom:6px;
}

.mega-col ul li a{
  text-decoration:none;
  color:#333;
}

/* ===== SIMPLE DROPDOWN ===== */
.simple-drop{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  display:none;
}

.nav-item:hover .simple-drop{
  display:block;
}

.simple-drop a{
  display:block;
  padding:10px;
  text-decoration:none;
  color:#333;
}

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

/* ===== MOBILE MENU ===== */
.mobile-menu{
  display:none;
  background:#fff;
}

.mobile-menu.open{
  display:block;
}

.mob-nav-link{
  padding:14px;
  font-weight:bold;
  cursor:pointer;
  border-bottom:1px solid #ddd;
}

.mob-sub{
  display:none;
  background:#f5f5f5;
  
}

.mob-nav-item.open .mob-sub{
  display:block;
}

.mob-sub a{
  display:block;
  padding:10px 20px;
  text-decoration:none;
  background-color: #111e43;
  color: white;
}

/* ===== RESPONSIVE ===== */
@media(max-width:991px){

  .nav-links,
  .nav-all-btn{
    display:none;
  }

  .nav-toggle{
    display:block;
  }

  .mobile-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
  }
}
/* RESET UL */
.mob-nav,
.mob-sub{
  list-style:none;
  margin:0;
  padding:0;
 background: linear-gradient(135deg, #07132A 0%, #0D2B55 50%, #0A3060 100%);
 color: white;
}

/* MAKE LI FULL WIDTH */
.mob-nav > li{
  width:100%;
}

/* FIX PARENT CLICK AREA */
.mob-nav-item > .mob-nav-link{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
}

/* FIX NORMAL LINKS ALSO SAME LOOK */
.mob-nav > li > .mob-nav-link{
  display:block;
  width:100%;
}

/* REMOVE EXTRA GAP FROM LI */
.mob-nav li{
  margin:0;
}


/* Accordion */
.accordion {
  width: 100%;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.accirdionNumber {
    background-color: #0B4D8C;
}
.accordion-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition:  all 0.3s ease;
  color: #e8f0fb;
}

/* Hover */
.accordion-item:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Header */
.accordion-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;

}

.accordion-item-header .accirdionNumber {
background: #e8f0fb;
    color: #0B4D8C;
    font-size: 11px;
    font-weight: 800;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .2s;
}

.accordion-item-header-title {
  font-weight: 600;
  color: #0B4D8C;
}

/* Icon */
.accordion-icon {
    font-size: 20px;
    transition:  all 0.3s ease;
    color: #063e8b;
}

.accordion-item.open .accordion-icon {
 transform: rotate(88deg);
    color: #063e8b;


}
 
/* Animation wrapper */
.accordion-item-description-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition:  all 0.3s ease;
  background: #f8faff;
}

/* OPEN STATE */
.accordion-item.open .accordion-item-description-wrapper {
  grid-template-rows: 1fr;
}

/* Content */
.accordion-item-description {
  overflow: hidden;
}

.accordion-item-description p {
  padding: 15px 18px;
  color: #5b5c5f;
  line-height: 1.6;
}

/* Active style */
.accordion-item.open {
  border-color: #e8f0fb;
}
 
.accordion-item.open .accirdionNumber {
background:#0B4D8C;
    color: #fff;
}
.accordion-item.open .accordion-item-header  {
  background: #e8f0fb;
}

@media (min-width: 993px) and (max-width: 1166px) {
  .accordion {
    margin-top: 20px;
    max-width:100%;

  }
}

@media (max-width: 992px) {
  .accordion {
    max-width:100%;
    gap: 10px;
  }
}

@media (max-width: 576px) {
  .accordion {
    max-width: 100%;
    padding: 0 15px;
    gap: 8px;
  }

  .accordion-item-header {
    padding: 14px 12px;
  }

  .accordion-item-header-title {
    font-size: 14px;
    margin-left:12px;
  }

  .accordion-icon {
    font-size: 16px;
  }
 
  .accirdionNumber {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .accordion-item-description p {
    font-size: 13px;
    padding: 12px;
  }
  
}


 

/* Accordion */
.accordion {
  width: 100%;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item */
.accirdionNumber {
    background-color: #0B4D8C;
}
.accordion-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition:  all 0.3s ease;
  color: #e8f0fb;
}

/* Hover */
.accordion-item:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Header */
.accordion-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;

}

.accordion-item-header .accirdionNumber {
background: #e8f0fb;
    color: #0B4D8C;
    font-size: 11px;
    font-weight: 800;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: .2s;
}

.accordion-item-header-title {
  font-weight: 600;
  color: #0B4D8C;
}

/* Icon */
.accordion-icon {
    font-size: 20px;
    transition:  all 0.3s ease;
    color: #063e8b;
}

.accordion-item.open .accordion-icon {
 transform: rotate(88deg);
    color: #063e8b;


}
 
/* Animation wrapper */
.accordion-item-description-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition:  all 0.3s ease;
  background: #f8faff;
}

/* OPEN STATE */
.accordion-item.open .accordion-item-description-wrapper {
  grid-template-rows: 1fr;
}

/* Content */
.accordion-item-description {
  overflow: hidden;
}

.accordion-item-description p {
  padding: 15px 18px;
  color: #5b5c5f;
  line-height: 1.6;
}

/* Active style */
.accordion-item.open {
  border-color: #e8f0fb;
}
 
.accordion-item.open .accirdionNumber {
background:#0B4D8C;
    color: #fff;
}
.accordion-item.open .accordion-item-header  {
  background: #e8f0fb;
}

@media (min-width: 993px) and (max-width: 1166px) {
  .accordion {
    margin-top: 20px;
    max-width:100%;

  }
}

@media (max-width: 992px) {
  .accordion {
    max-width:100%;
    gap: 10px;
  }
}

@media (max-width: 576px) {
  .accordion {
    max-width: 100%;
    padding: 0 15px;
    gap: 8px;
  }

  .accordion-item-header {
    padding: 14px 12px;
  }

  .accordion-item-header-title {
    font-size: 14px;
    margin-left:12px;
  }

  .accordion-icon {
    font-size: 16px;
  }
 
  .accirdionNumber {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .accordion-item-description p {
    font-size: 13px;
    padding: 12px;
  }
  
}