/*!
Theme Name: Solar Master
Theme URI: https://scglobalhq.com/
Author: SC Global
Author URI: https://scglobalhq.com/
Description: Theme of SC Global
Version: 1.0.0
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:       #1B3A8C;
      --navy-dark:  #122777;
      --navy-light: #2952C4;
      --orange:     #F5820A;
      --orange-light: #FEE9CC;
      --orange-dark:  #D06800;
      --green:      #2FA84F;
      --green-light: #E6F7EB;
      --white:      #FFFFFF;
      --gray-50:    #F8F9FC;
      --gray-100:   #F0F2F8;
      --gray-200:   #E2E6EF;
      --gray-400:   #9AA3B8;
      --gray-600:   #4E5A76;
      --gray-800:   #1E2A45;
      --shadow-xs:  0 1px 3px rgba(27,58,140,.06);
      --shadow-sm:  0 2px 8px rgba(27,58,140,.08);
      --shadow-md:  0 6px 24px rgba(27,58,140,.10);
      --shadow-lg:  0 16px 48px rgba(27,58,140,.13);
      --r-sm: 8px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-xl: 28px;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; color: var(--gray-800); background: #fff; overflow-x: hidden; line-height: 1.6; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    img { display: block; max-width: 100%; }

    /* ── TYPOGRAPHY ── */
    .section-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--orange); margin-bottom: 12px;
    }
    .section-eyebrow::before {
      content: ''; display: block; width: 24px; height: 2px;
      background: var(--orange); border-radius: 2px;
    }
    .section-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(26px, 4vw, 40px);
      font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--navy-dark);
    }
    .section-sub { font-size: 16px; color: var(--gray-600); margin-top: 10px; max-width: 560px; line-height: 1.75; }
    .text-center { text-align: center; }
    .text-center .section-sub,
    .services-head .section-sub,
    .partners-head .section-sub,
    .process-head .section-sub,
    .testi-head .section-sub { margin-left: auto; margin-right: auto; text-align: center; }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-weight: 600; font-size: 14px; padding: 12px 26px;
      border-radius: 100px; border: none; cursor: pointer;
      text-decoration: none; white-space: nowrap; transition: all .22s ease;
    }
    .btn-primary {
      background: var(--orange); color: #fff;
      box-shadow: 0 4px 16px rgba(245,130,10,.30);
    }
    .btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,130,10,.40); }
    .btn-outline-navy {
      background: transparent; color: var(--navy);
      border: 2px solid var(--navy);
    }
    .btn-outline-navy:hover { background: var(--navy); color: #fff; }
    .btn-white {
      background: #fff; color: var(--orange);
      box-shadow: var(--shadow-md);
    }
    .btn-white:hover { background: var(--orange); color: #fff; }
    .btn-green {
      background: var(--green); color: #fff;
      box-shadow: 0 4px 14px rgba(47,168,79,.3);
    }
    .btn-green:hover { background: #228a3d; transform: translateY(-2px); }

    /* ── TOP BAR ── */
    .topbar {
      background: var(--navy-dark); color: rgba(255,255,255,.8);
      font-size: 13px; padding: 8px 0;
    }
    .topbar-inner {
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    }
    .topbar-left, .topbar-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
    .topbar-item { display: flex; align-items: center; gap: 6px; }
    .topbar-item svg { width: 13px; height: 13px; opacity: .7; flex-shrink: 0; }
    .topbar-item a { color: rgba(255,255,255,.85); text-decoration: none; }
    .topbar-item a:hover { color: var(--orange); }

    /* ── NAVBAR ── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: #fff; border-bottom: 1px solid var(--gray-200);
      box-shadow: var(--shadow-xs);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 68px; gap: 24px;
    }
    .nav-logo img { height: 48px; width: auto; }
    .nav-links { display: flex; align-items: center; gap: 6px; list-style: none;margin-bottom: 0px; }
    .nav-links a {
      display: block; padding: 7px 14px; border-radius: 8px;
      font-size: 14px; font-weight: 600; color: var(--gray-600);
      text-decoration: none; transition: all .18s;
    }
    .nav-links a:hover { color: var(--navy); background: var(--gray-100); }
    .nav-links a.active { color: var(--orange); }
    .nav-right { display: flex; align-items: center; gap: 16px; }
    .nav-phone {
      display: flex; align-items: center; gap: 8px;
      color: var(--navy); font-size: 14px; font-weight: 700;
      text-decoration: none; transition: color .2s;
    }
    .nav-phone:hover { color: var(--orange); }
    .nav-phone-icon {
      width: 32px; height: 32px; border-radius: 8px;
      background: var(--orange-light);
      display: flex; align-items: center; justify-content: center;
    }
    .nav-phone-icon svg { width: 15px; height: 15px; color: var(--orange); }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(to bottom, var(--navy-dark) 0%, #1a3276 100%);
      position: relative; overflow: hidden; min-height: 520px;
      display: flex; align-items: center;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background: url('https://solarmaster.lk/wp-content/uploads/2023/08/solar-banner-image.jpg') center/cover no-repeat;
      opacity: .35;
    }
    /* Grid overlay */
    .hero::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 50px 50px;
    }
    .hero-content {
      position: relative; z-index: 2; padding-top: 90px; padding-bottom: 80px; width: 100%;
    }
    .hero-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    }
    .hero-inner { }

    /* ── SOLAR PANEL VISUAL ── */
    .hero-visual {
      position: relative; display: flex; align-items: center; justify-content: center;
      min-height: 420px;
    }

    /* Ambient glow behind panel */
    .panel-glow {
      position: absolute; width: 360px; height: 360px; border-radius: 50%;
      background: radial-gradient(circle, rgba(245,130,10,.22) 0%, rgba(27,58,140,.18) 50%, transparent 70%);
      animation: glowPulse 3s ease-in-out infinite;
    }
    @keyframes glowPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.15);opacity:1} }

    /* Sun */
    .hero-sun-wrap {
      position: absolute; top: 20px; right: 30px; z-index: 4;
    }
    .hero-sun {
      width: 70px; height: 70px; border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #FFE066, #F5820A 55%, #D06800);
      box-shadow: 0 0 0 8px rgba(245,130,10,.15), 0 0 32px rgba(245,130,10,.5);
      position: relative; z-index: 2;
      animation: sunFloat 5s ease-in-out infinite;
    }
    @keyframes sunFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    .hero-sun-rays {
      position: absolute; inset: -20px; animation: spinRays 12s linear infinite;
    }
    @keyframes spinRays { to{transform:rotate(360deg)} }
    .hero-sun-ray {
      position: absolute; left: 50%; top: 0; width: 3px; height: 14px;
      background: linear-gradient(to bottom, rgba(245,130,10,.9), transparent);
      border-radius: 2px; transform-origin: 50% 55px; margin-left: -1.5px;
    }

    /* Panel frame */
    .panel-frame {
      position: relative; z-index: 3;
      width: 300px;
      background: linear-gradient(160deg, #1a2a6c 0%, #0e1a4a 100%);
      border-radius: 16px;
      padding: 14px;
      box-shadow:
        0 0 0 2px rgba(255,255,255,.08),
        0 20px 60px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.1);
      animation: panelFloat 6s ease-in-out infinite;
    }
    @keyframes panelFloat { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(-1deg)} }

    .panel-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
    }
    .panel-cell {
      aspect-ratio: 1;
      border-radius: 4px;
      background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 40%, #1d4ed8 100%);
      position: relative; overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    /* Grid lines on each cell */
    .panel-cell::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 33% 33%;
    }
    /* Shimmer sweep */
    .panel-cell::after {
      content: '';
      position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
      animation: shimmer 3s ease-in-out infinite;
    }
    /* Stagger shimmer per cell */
    .panel-cell:nth-child(1)::after  { animation-delay: 0s; }
    .panel-cell:nth-child(2)::after  { animation-delay: .15s; }
    .panel-cell:nth-child(3)::after  { animation-delay: .3s; }
    .panel-cell:nth-child(4)::after  { animation-delay: .45s; }
    .panel-cell:nth-child(5)::after  { animation-delay: .6s; }
    .panel-cell:nth-child(6)::after  { animation-delay: .75s; }
    .panel-cell:nth-child(7)::after  { animation-delay: .9s; }
    .panel-cell:nth-child(8)::after  { animation-delay: 1.05s; }
    .panel-cell:nth-child(9)::after  { animation-delay: 1.2s; }
    .panel-cell:nth-child(10)::after { animation-delay: 1.35s; }
    .panel-cell:nth-child(11)::after { animation-delay: 1.5s; }
    .panel-cell:nth-child(12)::after { animation-delay: 1.65s; }
    @keyframes shimmer { 0%{left:-100%} 50%,100%{left:160%} }

    /* Glow pulse on active cells */
    .panel-cell.active {
      background: linear-gradient(135deg, #1e4db7 0%, #3b82f6 50%, #60a5fa 100%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 10px rgba(59,130,246,.5);
      animation: cellGlow 2s ease-in-out infinite;
    }
    @keyframes cellGlow { 0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 0 8px rgba(59,130,246,.4)} 50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 18px rgba(96,165,250,.7)} }

    /* Panel stand */
    .panel-stand {
      width: 60px; height: 8px; background: rgba(255,255,255,.1);
      border-radius: 4px; margin: 10px auto 0;
    }
    .panel-stand-leg {
      width: 4px; height: 28px;
      background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255,255,255,.05));
      border-radius: 2px; margin: 0 auto;
    }

    /* Energy flow down from panel */
    .energy-flow {
      position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2;
    }
    .energy-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 8px var(--orange);
      animation: flowDown 1.5s ease-in-out infinite;
      opacity: 0;
    }
    .energy-dot:nth-child(1) { animation-delay: 0s; }
    .energy-dot:nth-child(2) { animation-delay: .25s; }
    .energy-dot:nth-child(3) { animation-delay: .5s; }
    .energy-dot:nth-child(4) { animation-delay: .75s; }
    @keyframes flowDown {
      0% { opacity: 0; transform: translateY(-10px); }
      30% { opacity: 1; }
      70% { opacity: 1; }
      100% { opacity: 0; transform: translateY(30px); }
    }

    /* Floating stat cards */
    .hero-float-card {
      position: absolute; z-index: 5;
      background: rgba(255,255,255,.10); backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 14px; padding: 12px 16px;
      min-width: 130px;
    }
    .hero-float-card-label { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 500; }
    .hero-float-card-val {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px; font-weight: 900; color: #fff; margin-top: 2px; line-height: 1;
    }
    .hero-float-card-sub { font-size: 11px; font-weight: 700; margin-top: 4px; }
    .hero-float-card-sub.green { color: #34d399; }
    .hero-float-card-sub.orange { color: var(--orange); }

    .hfc-1 { top: 40px; left: -10px; animation: cardFloat1 5s ease-in-out infinite; }
    .hfc-2 { bottom: 50px; left: -20px; animation: cardFloat2 6s ease-in-out infinite; }
    .hfc-3 { bottom: 30px; right: -10px; animation: cardFloat1 7s ease-in-out infinite; }
    @keyframes cardFloat1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    @keyframes cardFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

    /* Sun ray beam hitting panel */
    .sun-beam {
      position: absolute; right: 62px; top: 82px;
      width: 2px; height: 120px;
      background: linear-gradient(to bottom, rgba(245,130,10,.7), transparent);
      transform: rotate(20deg); transform-origin: top center;
      border-radius: 2px; z-index: 2;
      animation: beamFlicker 3s ease-in-out infinite;
    }
    .sun-beam-2 {
      right: 78px; top: 80px; height: 100px; transform: rotate(10deg);
      animation-delay: .5s;
    }
    @keyframes beamFlicker { 0%,100%{opacity:.6} 50%{opacity:1} }

    /* ── REAL PANEL IMAGE ── */
    .real-panel-wrap {
      position: relative; z-index: 3;
      width: 340px;
      border-radius: 20px; overflow: hidden;
      box-shadow:
        0 0 0 3px rgba(255,255,255,.10),
        0 0 50px rgba(245,130,10,.28),
        0 24px 64px rgba(0,0,0,.55);
      animation: panelFloat 6s ease-in-out infinite;
    }
    .real-panel-img {
      width: 100%; height: auto; display: block;
    }
    /* Shimmer sweep over the photo */
    .real-panel-shimmer {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255,255,255,.04) 38%,
        rgba(255,255,255,.20) 50%,
        rgba(255,255,255,.04) 62%,
        transparent 100%
      );
      animation: photoShimmer 4s ease-in-out infinite;
    }
    @keyframes photoShimmer {
      0%   { transform: translateX(-120%) skewX(-8deg); }
      100% { transform: translateX(220%) skewX(-8deg); }
    }
    /* Pulsing sun-glare spot */
    .real-panel-sunspot {
      position: absolute; top: 26%; left: 36%;
      width: 64px; height: 64px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,220,.80) 0%, rgba(255,210,80,.30) 45%, transparent 70%);
      animation: sunSpot 3s ease-in-out infinite;
      pointer-events: none; mix-blend-mode: screen;
    }
    @keyframes sunSpot { 0%,100%{opacity:.65;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }

    @media (max-width: 768px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-visual {
        display: flex;
        min-height: 320px;
        margin-top: 40px;
        justify-content: center;
      }
      .real-panel-wrap { width: 260px; }
      .panel-glow { width: 260px; height: 260px; }
      .hfc-1 { top: 20px; left: 0px; min-width: 110px; padding: 10px 12px; }
      .hfc-2 { bottom: 30px; left: 0px; min-width: 110px; padding: 10px 12px; }
      .hfc-3 { bottom: 20px; right: 0px; min-width: 100px; padding: 10px 12px; }
      .hero-float-card-val { font-size: 17px; }
      .hero-float-card-label { font-size: 10px; }
      .hero-float-card-sub { font-size: 10px; }
      .hero-sun-wrap { top: 10px; right: 10px; }
      .hero-sun { width: 52px; height: 52px; }
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(245,130,10,.18); border: 1px solid rgba(245,130,10,.4);
      color: #FFBC69; font-size: 12px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; padding: 6px 16px; border-radius: 100px;
      margin-bottom: 22px;
    }
    .hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: blink 2s ease-in-out infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .hero-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(32px, 5.5vw, 50px);
      font-weight: 900; line-height: 1.08; letter-spacing: -.025em;
      color: #fff; margin-bottom: 20px;
    }
    .hero-title span { color: var(--orange); }
    .hero-desc { font-size: 17px; color: rgba(255,255,255,.72); line-height: 1.75; margin-bottom: 36px; max-width: 520px; }
    .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .hero-stats {
      display: flex; gap: 36px; margin-top: 52px; padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap;
    }
    .hero-stat-val {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 28px; font-weight: 900; color: #fff;
    }
    .hero-stat-val em { color: var(--orange); font-style: normal; }
    .hero-stat-label { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 2px; }

    /* ── TRUST BAR / FEATURES SLIDER ── */
    .trust-section {
      background: #f7f9fc;
      padding: 56px 0 60px;
      border-top: 1px solid #e8edf5;
      border-bottom: 1px solid #e8edf5;
      overflow: hidden;
      position: relative;
    }
    .trust-section-head {
      text-align: center;
      margin-bottom: 40px;
    }
    .trust-section-head .eyebrow {
      display: inline-block;
      font-size: 11px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
      background: rgba(245,130,10,.10);
      padding: 4px 14px; border-radius: 100px;
      margin-bottom: 10px;
    }
    .trust-section-head h2 {
      font-size: clamp(22px, 3vw, 30px);
      font-weight: 800; color: var(--navy-dark);
      margin: 0;
    }
    /* Slider wrapper */
    .trust-slider-outer { position: relative; }
    .trust-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .trust-card {
      background: #fff;
      border-radius: 20px;
      padding: 36px 28px 40px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(18,39,119,.07);
      border: 1px solid rgba(18,39,119,.07);
      transition: box-shadow .3s, transform .3s;
      display: flex; flex-direction: column; gap: 16px;
      cursor: default;
    }
    .trust-card:hover {
      box-shadow: 0 8px 40px rgba(18,39,119,.13);
      transform: translateY(-4px);
    }
    /* Orange bottom accent bar */
    .trust-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--orange), #f9a04a);
      border-radius: 0 0 20px 20px;
    }
    /* Subtle top-right corner glow */
    .trust-card::before {
      content: '';
      position: absolute;
      top: -30px; right: -30px;
      width: 100px; height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245,130,10,.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .trust-card-num {
      font-size: 38px; font-weight: 900;
      color: rgba(18,39,119,.10);
      line-height: 1;
      font-family: var(--font-head);
      letter-spacing: -1px;
    }
    .trust-card-icon {
      width: 76px; height: 76px;
      background: linear-gradient(135deg, #eef1fb 0%, #dce3f5 100%);
      border-radius: 20px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .trust-card-icon svg {
      width: 42px; height: 42px;
    }
    .trust-card-title {
      font-size: 17px; font-weight: 800;
      color: var(--navy-dark);
      line-height: 1.3;
    }
    .trust-card-sub {
      font-size: 13.5px; color: #6b7897;
      line-height: 1.55;
      flex: 1;
    }
    /* ── SLIDER (mobile) ── */
    .trust-slider-nav {
      display: none;
      justify-content: center; align-items: center;
      gap: 12px; margin-top: 28px;
    }
    .trust-slider-btn {
      width: 40px; height: 40px; border-radius: 50%;
      border: 2px solid var(--navy-dark);
      background: #fff;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .2s, border-color .2s;
    }
    .trust-slider-btn:hover, .trust-slider-btn.active-btn {
      background: var(--navy-dark);
    }
    .trust-slider-btn:hover svg, .trust-slider-btn.active-btn svg {
      stroke: #fff;
    }
    .trust-slider-btn svg { width: 18px; height: 18px; stroke: var(--navy-dark); stroke-width: 2.5; fill: none; transition: stroke .2s; }
    .trust-dots {
      display: flex; gap: 7px;
    }
    .trust-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(18,39,119,.2);
      transition: background .3s, width .3s;
      border-radius: 4px;
    }
    .trust-dot.active {
      background: var(--orange);
      width: 24px;
    }
    @media (max-width: 900px) {
      .trust-cards {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 600px) {
      .trust-section { padding: 44px 0 50px; overflow: hidden; }
      .trust-cards {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 4px 0 16px;
        scrollbar-width: none;
        scroll-behavior: smooth;
      }
      .trust-cards::-webkit-scrollbar { display: none; }
      .trust-card {
        min-width: 100%;
        max-width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        border-radius: 20px;
        margin: 0;
      }
      .trust-slider-nav { display: flex; }
    }

    /* ── SECTION SPACING ── */
    .section { padding: 80px 0; }
    .section-alt { background: var(--gray-50); }

    /* ── ABOUT ── */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .about-img-wrap { position: relative; }
    .about-img-main {
      width: 100%; aspect-ratio: 4/3; border-radius: var(--r-xl);
      overflow: hidden; object-fit: cover;
      background: var(--gray-100);
      box-shadow: var(--shadow-lg);
    }
    .about-img-main img { width: 100%; height: 100%; object-fit: cover; }
    .about-img-fallback {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #1B3A8C 0%, #2952C4 50%, #1a4a9e 100%);
      display: flex; align-items: center; justify-content: center;
    }
    .about-img-fallback svg { width: 80px; height: 80px; color: rgba(255,255,255,.25); }
    .about-badge {
      position: absolute; bottom: -20px; right: -20px;
      background: #fff; border-radius: var(--r-md); padding: 20px 24px;
      box-shadow: var(--shadow-lg); text-align: center;
    }
    .about-badge-num {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 36px; font-weight: 900; color: var(--navy-dark); line-height: 1;
    }
    .about-badge-num span { color: var(--orange); }
    .about-badge-label { font-size: 12px; color: var(--gray-400); font-weight: 500; margin-top: 4px; }

    .about-text { }
    .about-text p { color: var(--gray-600); font-size: 15px; line-height: 1.85; margin-bottom: 16px; }
    .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 32px; }
    .about-feat {
      display: flex; align-items: flex-start; gap: 10px;
      background: var(--gray-50); border: 1px solid var(--gray-200);
      border-radius: var(--r-sm); padding: 14px;
      transition: all .2s;
    }
    .about-feat:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
    .about-feat-check {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      background: var(--green-light); display: flex; align-items: center; justify-content: center; margin-top: 1px;
    }
    .about-feat-check svg { width: 12px; height: 12px; color: var(--green); }
    .about-feat-title { font-size: 13px; font-weight: 700; color: var(--navy-dark); }
    .about-feat-sub { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

    /* ── REGISTERED BAR ── */
    .reg-bar {
      background: #1a1c22;
      padding: 28px 0;
      overflow: hidden;
    }
    .reg-inner {
      display: flex;
      align-items: center;
      gap: 0;
      flex-wrap: nowrap;
    }
    .reg-title-block {
      flex-shrink: 0;
      padding-right: 48px;
      border-right: 1px solid rgba(255,255,255,.12);
      margin-right: 0;
    }
    .reg-we-are {
      font-size: 11px; font-weight: 700; letter-spacing: .16em;
      text-transform: uppercase; color: #7ed957;
      margin-bottom: 6px; display: block;
    }
    .reg-title-block h3 {
      font-size: 26px; font-weight: 800; color: #fff;
      margin: 0; line-height: 1.15;
      font-family: var(--font-head);
    }
    /* Marquee track */
    .reg-marquee-wrap {
      flex: 1; overflow: hidden; position: relative;
    }
    /* Fade edges */
    .reg-marquee-wrap::before,
    .reg-marquee-wrap::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
    }
    .reg-marquee-wrap::before { left: 0; background: linear-gradient(to right, #1a1c22, transparent); }
    .reg-marquee-wrap::after  { right: 0; background: linear-gradient(to left, #1a1c22, transparent); }
    .reg-marquee-track {
      display: flex; align-items: center;
      animation: regScroll 18s linear infinite;
      width: max-content;
    }
    .reg-marquee-wrap:hover .reg-marquee-track { animation-play-state: paused; }
    @keyframes regScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .reg-logo-entry {
      display: flex; align-items: center; gap: 14px;
      flex-shrink: 0;
      padding: 0 40px;
      border-right: 1px solid rgba(255,255,255,.10);
    }
    .reg-logo-entry img{
      height: 50px;
    }
    .reg-logo-icon { flex-shrink: 0; }
    .reg-logo-text { display: flex; flex-direction: column; gap: 1px; }
    .reg-logo-text .local-text {
      font-size: 10px; color: rgba(255,255,255,.5); line-height: 1.4;
    }
    .reg-logo-text .en-text {
      font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em;
    }
    @media (max-width: 860px) {
      .reg-inner { flex-wrap: wrap; gap: 0; align-items: flex-start; }
      .reg-title-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); padding-right: 0; padding-bottom: 18px; margin-bottom: 20px; width: 100%; }
      .reg-marquee-wrap { width: 100%; flex: unset; min-height: 80px; overflow: hidden; }
      .reg-marquee-wrap::before, .reg-marquee-wrap::after { width: 32px; }
    }

    /* ── SERVICES ── */
    .services-head { text-align: center; margin-bottom: 48px; }
    .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .service-card {
      background: #fff; border: 1px solid var(--gray-200);
      border-radius: var(--r-lg); overflow: hidden;
      box-shadow: var(--shadow-xs);
      transition: all .25s ease;
    }
    .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(245,130,10,.3); }
    .service-card-img {
      /*aspect-ratio: 16/9;*/
      background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .service-card-img-inner {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    .service-card-img svg { width: 64px; height: 64px; color: var(--navy-light); opacity: .4; }
    .service-card-tag {
      position: absolute; top: 12px; left: 12px;
      background: var(--navy-dark); color: #fff;
      font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px;
      letter-spacing: .04em;
    }
    .service-body { padding: 24px; }
    .service-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; color: var(--navy-dark); margin-bottom: 10px; }
    .service-desc { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 18px; }
    .service-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none;
      transition: gap .2s;
    }
    .service-link:hover { gap: 10px; }
    .service-link svg { width: 14px; height: 14px; }

    /* ── PARTNERS ── */
    .partners-head { text-align: center; margin-bottom: 40px; }
    /* Marquee slider */
    .partners-marquee-wrap {
      overflow: hidden; position: relative;
    }
    .partners-marquee-wrap::before,
    .partners-marquee-wrap::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
    }
    .partners-marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--gray-50), transparent); }
    .partners-marquee-wrap::after  { right: 0; background: linear-gradient(to left, var(--gray-50), transparent); }
    .partners-marquee-track {
      display: flex; align-items: center; gap: 0;
      animation: partnersScroll 20s linear infinite;
      width: max-content;
    }
    .partners-marquee-wrap:hover .partners-marquee-track { animation-play-state: paused; }
    @keyframes partnersScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .partner-logo {
      background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-md);
      padding: 22px 36px; display: flex; align-items: center; justify-content: center;
      min-width: 160px; height: 90px;
      flex-shrink: 0;
      margin: 0 12px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      box-shadow: var(--shadow-xs);
    }
    .partner-logo:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-3px); }
    .partner-logo img { height: 72px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(100%); opacity: .65; transition: filter .3s, opacity .3s; }
    .partner-logo:hover img { filter: none; opacity: 1; }
    .partner-logo-fallback { font-weight: 800; font-size: 14px; text-align: center; line-height: 1.4; }

    /* ── PROJECTS ── */
    .projects-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      margin-bottom: 40px; flex-wrap: wrap; gap: 20px;
    }
    .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .project-card {
      background: transparent; border: none; overflow: visible;
      border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs);
      transition: all .25s;
    }
    .project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .project-img {
      aspect-ratio: 4/3; overflow: hidden; position: relative; border-radius: var(--r-lg);
      background: var(--gray-100);
    }
    .project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .project-card:hover .project-img img { transform: scale(1.05); }
    .project-img-fallback {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, var(--navy-dark), var(--navy-light));
      display: flex; align-items: center; justify-content: center;
    }
    .project-img-fallback svg { width: 60px; height: 60px; color: rgba(255,255,255,.2); }
    .project-kw-badge {
      position: absolute; top: 12px; right: 12px;
      background: var(--orange); color: #fff;
      font-size: 12px; font-weight: 800; padding: 5px 13px; border-radius: 100px;
      box-shadow: 0 2px 8px rgba(245,130,10,.4);
    }
    /* caption overlaid on image */
    .project-caption {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 28px 18px 16px;
      background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
      color: #fff;
      font-size: 13px; font-weight: 600; line-height: 1.4;
      letter-spacing: .01em;
    }

    /* ── WHY CHOOSE US ── */
    .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .why-card {
      background: #fff; border: 1px solid var(--gray-200);
      border-radius: var(--r-lg); padding: 40px 24px 32px; text-align: center;
      box-shadow: var(--shadow-xs); transition: all .3s;
    }
    .why-card:hover { border-color: rgba(27,58,140,.2); box-shadow: 0 12px 40px rgba(27,58,140,.12); transform: translateY(-6px); }
    .why-icon {
      width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 22px;
      background: var(--navy-dark);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 18px rgba(245,130,10,.3);
    }
    .why-icon svg { width: 52px; height: 52px; color: #fff; }
    .why-title { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--navy-dark); margin-bottom: 12px; }
    .why-desc { font-size: 14px; color: var(--gray-600); line-height: 1.7; }

    /* ── PROCESS ── */
    .process-head { text-align: center; margin-bottom: 56px; }
    .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
    .process-grid::before {
      content: '';
      position: absolute; top: 40px; left: 12.5%; right: 12.5%; height: 2px;
      background: linear-gradient(90deg, var(--orange), var(--navy-light));
      z-index: 0;
    }
    .process-step { text-align: center; padding: 0 16px; position: relative; z-index: 1; }
    .process-num {
      width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px;
      background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
      color: #fff; display: flex; align-items: center; justify-content: center;
      font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 900;
      box-shadow: 0 6px 20px rgba(245,130,10,.35);
      border: 4px solid #fff;
      transition: transform .2s;
    }
    .process-step:hover .process-num { transform: scale(1.08); }
    .process-title { font-weight: 800; font-size: 15px; color: var(--navy-dark); margin-bottom: 8px; }
    .process-desc { font-size: 13px; color: var(--gray-600); line-height: 1.65; }

    /* ── CTA BANNER ── */
    .cta-banner {
      background: linear-gradient(135deg, var(--green) 0%, #1f8a3a 100%);
      padding: 48px 0;
    }
    .cta-banner-inner {
      display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    }
    .cta-banner-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(22px, 3.5vw, 34px); font-weight: 900; color: #fff; line-height: 1.15;
    }
    .cta-banner-sub { font-size: 15px; color: rgba(255,255,255,.75); margin-top: 8px; }

    /* ── TESTIMONIALS ── */
    .testi-head { text-align: center; margin-bottom: 48px; }
    .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .testi-card {
      background: #fff; border: 1px solid var(--gray-200);
      border-radius: var(--r-lg); padding: 32px 28px;
      box-shadow: var(--shadow-xs); transition: all .25s;
      position: relative;
    }
    .testi-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(245,130,10,.25); transform: translateY(-4px); }
    .testi-quote-icon {
      position: absolute; top: 24px; right: 24px;
      font-size: 64px; line-height: 1; color: var(--orange-light); font-family: Georgia, serif;
      font-weight: 900;
    }
    .testi-stars { display: flex; gap: 3px; margin-bottom: 16px; }
    .testi-stars svg { width: 16px; height: 16px; fill: var(--orange); color: var(--orange); }
    .testi-text { font-size: 14px; color: var(--gray-600); line-height: 1.8; margin-bottom: 24px; font-style: italic; }
    .testi-author { display: flex; align-items: center; gap: 12px; }
    .testi-avatar {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; color: #fff;
    }
    .av-1 { background: linear-gradient(135deg, var(--navy), var(--navy-light)); }
    .av-2 { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }
    .av-3 { background: linear-gradient(135deg, var(--green), #1f8a3a); }
    .testi-name { font-weight: 700; font-size: 14px; color: var(--navy-dark); }
    .testi-role { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

    /* ── CONTACT SECTION ── */
    .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
    .contact-card {
      background: #fff; border: 1px solid var(--gray-200);
      border-radius: var(--r-lg); padding: 32px 22px 28px; text-align: center;
      box-shadow: var(--shadow-xs);
      transition: transform .3s, box-shadow .3s;
    }
    .contact-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(27,58,140,.12); border-color: rgba(245,130,10,.3); }
    .contact-icon-wrap {
      width: 90px; height: 90px; border-radius: 50%;
      margin: 0 auto 20px;
      background: #F5820A;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      box-shadow: 0 8px 28px rgba(245,130,10,.45);
    }
    /* Outer glow ring */
    .contact-icon-wrap::before {
      content: '';
      position: absolute; inset: -5px;
      border-radius: 50%;
      border: 2px solid rgba(245,130,10,.35);
    }
    .contact-icon-wrap svg { width: 44px; height: 44px; }
    .contact-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: var(--gray-400); margin-bottom: 8px; }
    .contact-val { font-weight: 700; font-size: 15px; color: var(--navy-dark); line-height: 1.55; }
    .contact-val a { color: var(--navy-dark); text-decoration: none; }
    .contact-val a:hover { color: var(--orange); }
    .contact-val a { color: var(--navy-dark); text-decoration: none; }
    .contact-val a:hover { color: var(--orange); }

    /* ── FOOTER ── */
    footer { background: var(--navy-dark); color: rgba(255,255,255,.65); padding: 60px 0 0; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .footer-logo img { height: 70px; width: auto; margin-bottom: 16px; border-radius:8px; }
    .footer-desc { font-size: 14px; line-height: 1.75; max-width: 260px; margin-bottom: 24px; }
    .footer-social { display: flex; gap: 10px; }
    .footer-social a {
      width: 36px; height: 36px; border-radius: 8px;
      background: var(--orange); border: 1px solid var(--orange);
      display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,1);
      text-decoration: none; transition: all .2s;
    }
    .footer-social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
    .footer-social svg { width: 16px; height: 16px; }
    .footer-col-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: #fff; margin-bottom: 18px; }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-links a { font-size: 14px; color: rgba(255,255,255,.55); text-decoration: none; transition: color .18s; }
    .footer-links a:hover { color: var(--orange); }
    .footer-reg-badges { display: flex; flex-direction: column; gap: 12px; }
    .footer-reg-badge {
      display: flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--r-sm); padding: 10px 14px;
    }
    .footer-reg-badge svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }
    .footer-reg-badge-text { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); }
    .footer-bottom {
      padding: 22px 0;
      display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
      font-size: 13px; text-align: center;
    }
    .footer-bottom a { color: rgba(255,255,255,.4); text-decoration: none; }
    .footer-bottom a:hover { color: rgba(255,255,255,.8); }

    /* ── FADE IN ANIMATIONS ── */
    .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }
    .d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; }
    .d3 { transition-delay: .21s; } .d4 { transition-delay: .28s; }

    /* ══════════════════════════════════════════════
       MOBILE HAMBURGER MENU
    ══════════════════════════════════════════════ */
    .nav-hamburger {
      display: none;
      flex-direction: column; justify-content: center; align-items: center;
      width: 44px; height: 44px; border-radius: 10px;
      background: var(--gray-100); border: none; cursor: pointer;
      gap: 5px; flex-shrink: 0;
      transition: background .2s;
    }
    .nav-hamburger:hover { background: var(--gray-200); }
    .nav-hamburger span {
      display: block; width: 22px; height: 2px;
      background: var(--navy-dark); border-radius: 2px;
      transition: transform .3s ease, opacity .3s ease;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav drawer */
    .mobile-nav {
      display: none;
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      z-index: 200;
    }
    .mobile-nav.open { display: block; }
    .mobile-nav-backdrop {
      position: absolute; inset: 0;
      background: rgba(18,39,119,.45); backdrop-filter: blur(4px);
    }
    .mobile-nav-drawer {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(80vw, 320px);
      background: #fff;
      box-shadow: -8px 0 40px rgba(18,39,119,.18);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform .32s cubic-bezier(.4,0,.2,1);
      overflow-y: auto;
    }
    .mobile-nav.open .mobile-nav-drawer { transform: translateX(0); }
    .mobile-nav-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 20px; border-bottom: 1px solid var(--gray-200);
    }
    .mobile-nav-header img { height: 38px; width: auto; }
    .mobile-nav-close {
      width: 36px; height: 36px; border-radius: 8px;
      border: 1px solid var(--gray-200); background: #fff;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .mobile-nav-close svg { width: 18px; height: 18px; stroke: var(--gray-600); stroke-width: 2; fill: none; }
    .mobile-nav-links {
      list-style: none; padding: 16px 0; flex: 1;
    }
    .mobile-nav-links a {
      display: block; padding: 13px 24px;
      font-size: 15px; font-weight: 600; color: var(--gray-800);
      text-decoration: none; border-left: 3px solid transparent;
      transition: all .18s;
    }
    .mobile-nav-links a:hover {
      color: var(--navy); background: var(--gray-50);
      border-left-color: var(--orange);
    }
    .mobile-nav-footer {
      padding: 20px; border-top: 1px solid var(--gray-200);
    }
    .mobile-nav-footer .btn { width: 100%; justify-content: center; font-size: 15px; padding: 14px; }
    .mobile-nav-contact {
      display: flex; align-items: center; gap: 10px;
      margin-top: 14px; color: var(--navy-dark);
      text-decoration: none; font-weight: 700; font-size: 14px;
      justify-content: center;
    }
    .mobile-nav-contact svg { width: 16px; height: 16px; stroke: var(--orange); stroke-width: 2; fill: none; }

    /* ══════════════════════════════════════════════
       RESPONSIVE — 900px (Nav → hamburger)
    ══════════════════════════════════════════════ */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-right .btn { display: none; }
      .nav-hamburger { display: flex; }
      .nav-inner { height: 60px; }
      .hero-stats {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        margin-top: 36px; padding-top: 24px;
      }
      .hero-stats > div { padding: 12px 0; border-right: 1px solid rgba(255,255,255,.12); text-align: center; }
      .hero-stats > div:nth-child(even) { border-right: none; }
      .hero-stats > div:nth-child(3),
      .hero-stats > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; margin-top: 4px; }
      .hero-stat-label { text-align: center; }
    }

    /* ══════════════════════════════════════════════
       RESPONSIVE — 1024px (Tablet landscape)
    ══════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .why-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .contact-grid { grid-template-columns: repeat(2, 1fr); }
      .testi-grid { grid-template-columns: repeat(2, 1fr); }
      .projects-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ══════════════════════════════════════════════
       RESPONSIVE — 768px (Tablet portrait / phablet)
    ══════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Topbar */
      .topbar-left { display: none; }
      .topbar { font-size: 12px; padding: 7px 0; }

      /* Hero */
      .hero-grid { grid-template-columns: 1fr; gap: 0; }
      .hero-visual { display: flex; min-height: 300px; margin-top: 0; justify-content: center; }
      .real-panel-wrap { width: 240px; }
      .panel-glow { width: 240px; height: 240px; }
      .hfc-1 { top: 16px; left: 0; min-width: 100px; padding: 9px 11px; }
      .hfc-2 { bottom: 24px; left: 0; min-width: 100px; padding: 9px 11px; }
      .hfc-3 { bottom: 16px; right: 0; min-width: 90px; padding: 9px 11px; }
      .hero-float-card-val { font-size: 16px; }
      .hero-float-card-label { font-size: 10px; }
      .hero-float-card-sub { font-size: 10px; }
      .hero-sun-wrap { top: 8px; right: 8px; }
      .hero-sun { width: 48px; height: 48px; }
      .hero-content { padding-top: 60px; padding-bottom: 52px; }
      .hero-stats { gap: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 36px; padding-top: 24px; }
      .hero-stats > div { padding: 12px 0; border-right: 1px solid rgba(255,255,255,.12); text-align: center; }
      .hero-stats > div:nth-child(even) { border-right: none; padding-left: 0; }
      .hero-stats > div:nth-child(odd)  { padding-right: 0; }
      .hero-stats > div:nth-child(3),
      .hero-stats > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; margin-top: 4px; }
      .hero-stat-val { font-size: 24px; }
      .hero-stat-label { text-align: center; }
      .hero-actions { gap: 10px; }
      .hero-actions .btn { font-size: 14px; padding: 12px 22px; }

      /* About */
      .about-grid { grid-template-columns: 1fr; gap: 32px; }
      .about-badge { display: none; }
      .about-features { grid-template-columns: 1fr; }

      /* Services */
      .services-grid { grid-template-columns: 1fr; }

      /* Projects */
      .projects-grid { grid-template-columns: 1fr; }
      .projects-head { margin-bottom: 28px; }

      /* Why */
      .why-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
      .why-card { padding: 28px 16px 24px; }
      .why-icon { width: 68px; height: 68px; margin-bottom: 16px; }
      .why-icon svg { width: 42px; height: 42px; }
      .why-title { font-size: 15px; }

      /* Process */
      .process-grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
      .process-grid::before { display: none; }
      .process-num { width: 64px; height: 64px; font-size: 18px; }

      /* Testimonials */
      .testi-grid { grid-template-columns: 1fr; }

      /* CTA banner */
      .cta-banner-inner { flex-direction: column; text-align: center; gap: 20px; }

      /* Contact */
      .contact-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
      .contact-card { padding: 24px 14px 20px; }
      .contact-icon-wrap { width: 72px; height: 72px; }
      .contact-icon-wrap svg { width: 34px; height: 34px; }

      /* Footer */
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
      footer { padding: 44px 0 0; }
      .footer-desc { max-width: 100%; }

      /* Section spacing */
      .section { padding: 56px 0; }
      .partner-logo { min-width: 130px; padding: 16px 24px; margin: 0 8px; }
      .reg-inner { flex-wrap: wrap; gap: 0; align-items: flex-start; }
      .reg-title-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); padding-right: 0; padding-bottom: 18px; margin-bottom: 20px; width: 100%; }
      .reg-marquee-wrap { width: 100%; flex: unset; min-height: 80px; overflow: hidden; }
      .reg-marquee-wrap::before, .reg-marquee-wrap::after { width: 32px; }
    }

    /* ══════════════════════════════════════════════
       RESPONSIVE — 480px (Phone)
    ══════════════════════════════════════════════ */
    @media (max-width: 480px) {
      .container { padding: 0 16px; }

      /* Hero */
      .hero-content { padding-top: 48px; padding-bottom: 44px; }
      .hero-title { font-size: clamp(28px, 8vw, 38px); }
      .hero-desc { font-size: 15px; }
      .hero-actions { flex-direction: column; align-items: flex-start; }
      .hero-actions .btn { width: 100%; justify-content: center; }
      .hero-stats { grid-template-columns: 1fr 1fr; }
      .hero-visual { min-height: 260px; margin-top: 0; }
      .real-panel-wrap { width: 200px; }
      .panel-glow { width: 200px; height: 200px; }
      .hfc-1 { top: 12px; left: -4px; min-width: 90px; padding: 8px 10px; }
      .hfc-2 { bottom: 18px; left: -4px; min-width: 90px; padding: 8px 10px; }
      .hfc-3 { bottom: 12px; right: -4px; min-width: 82px; padding: 8px 10px; }
      .hero-float-card-val { font-size: 14px; }
      .hero-sun { width: 40px; height: 40px; }
      .hero-sun-wrap { top: 4px; right: 4px; }

      /* Why — 1 column on very small */
      .why-grid { grid-template-columns: 1fr; }
      .why-card { padding: 28px 20px; }

      /* Process — 1 column */
      .process-grid { grid-template-columns: 1fr; gap: 28px; }

      /* Contact — 1 column */
      .contact-grid { grid-template-columns: 1fr; }

      /* Trust card */
      .trust-card { min-width: 100%; max-width: 100%; padding: 28px 20px 32px; }

      /* Section spacing */
      .section { padding: 44px 0; }
      .section-title { font-size: clamp(22px, 6.5vw, 30px); }
      .trust-section-head h2 { font-size: 20px; }
      .services-head, .partners-head { margin-bottom: 32px; }
      .why-grid { gap: 14px; }
      .projects-head { flex-direction: column; align-items: flex-start; }

      /* CTA button */
      #contact .btn { font-size: 14px; padding: 13px 24px; }

      /* Footer */
      .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
      footer { padding: 40px 0 0; }

      /* Topbar hidden fully on tiny screens */
      .topbar { display: none; }

      /* Reg bar */
      .reg-bar { padding: 24px 0 28px; }
      .reg-title-block h3 { font-size: 20px; }
      .reg-inner { flex-direction: column; }
      .reg-title-block { margin-bottom: 18px; }
      .reg-marquee-wrap { width: 100%; flex: unset; min-height: 80px; overflow: hidden; }
      .reg-logo-entry { padding: 0 28px; }
      .reg-logo-text .en-text { font-size: 11px; }
      .reg-logo-text .local-text { display: none; }

      /* Nav */
      .nav-inner { height: 56px; }
      .nav-logo img { height: 38px; }
    }

    /* ══════════════════════════════════════════════
       TOUCH / TAP TARGET IMPROVEMENTS
    ══════════════════════════════════════════════ */
    @media (hover: none) and (pointer: coarse) {
      .btn { min-height: 48px; }
      .nav-hamburger { width: 48px; height: 48px; }
      .trust-slider-btn { width: 48px; height: 48px; }
      .footer-social a { width: 44px; height: 44px; }
      .mobile-nav-links a { padding: 15px 24px; }
    }


/*About us page*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --au-navy:        #1B3A8C;
      --au-navy-dark:   #122777;
      --au-orange:      #F5820A;
      --au-orange-dark: #D06800;
      --au-gray-50:     #F8F9FC;
      --au-gray-100:    #F1F3F9;
      --au-gray-200:    #E2E6F0;
      --au-gray-600:    #6B7280;
      --au-gray-800:    #1F2937;
      --au-white:       #ffffff;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--au-gray-800);
      background: #fff;
      line-height: 1.6;
    }

    /* ── HERO ── */
    .au-hero {
      position: relative;
      min-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--au-navy-dark);
    }
    .au-hero-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      opacity: .3;
    }
    .au-hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(18,39,119,.85) 0%, rgba(27,58,140,.6) 100%);
    }
    /* subtle grid pattern */
    .au-hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .au-hero-content {
      position: relative; z-index: 2;
      text-align: center;
      padding: 80px 24px;
      max-width: 720px;
      margin: 0 auto;
    }
    .au-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--au-orange);
      margin-bottom: 16px;
    }
    .au-eyebrow::before, .au-eyebrow::after {
      content: ''; display: block;
      width: 28px; height: 2px; background: var(--au-orange);
    }
    .au-hero-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800; color: #fff;
      line-height: 1.12; letter-spacing: -.02em;
      margin-bottom: 16px;
    }
    .au-hero-sub {
      font-size: 17px; color: rgba(255,255,255,.72); line-height: 1.7;
    }

    /* ── LAYOUT ── */
    .au-container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .au-section {
      padding: 88px 0;
    }
    .au-section-alt {
      background: var(--au-gray-50);
    }

    /* ── STORY ── */
    .au-story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }
    .au-story-img-wrap {
      position: relative;
    }
    .au-story-img {
      width: 100%; border-radius: 20px;
      object-fit: cover; aspect-ratio: 4/3;
      display: block;
    }
    .au-story-img-fallback {
      width: 100%; aspect-ratio: 4/3;
      border-radius: 20px;
      background: linear-gradient(135deg, var(--au-navy-dark), #1a3276);
      display: flex; align-items: center; justify-content: center;
    }
    .au-story-img-fallback svg {
      width: 80px; height: 80px; opacity: .3; color: #fff;
    }
    .au-story-badge {
      position: absolute;
      bottom: -20px; right: -20px;
      width: 120px; height: 120px;
      background: var(--au-orange);
      border-radius: 50%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      box-shadow: 0 8px 28px rgba(245,130,10,.45);
      border: 4px solid #fff;
    }
    .au-story-badge-num {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 30px; font-weight: 900; color: #fff; line-height: 1;
    }
    .au-story-badge-label {
      font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85);
      text-align: center; line-height: 1.2; margin-top: 2px;
    }
    .au-section-label {
      font-size: 12px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--au-orange);
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 12px;
    }
    .au-section-label::before {
      content: ''; display: block;
      width: 28px; height: 2px; background: var(--au-orange);
    }
    .au-section-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(26px, 3.5vw, 38px);
      font-weight: 800; color: var(--au-navy-dark);
      line-height: 1.15; letter-spacing: -.02em;
      margin-bottom: 20px;
    }
    .au-section-title span { color: var(--au-orange); }
    .au-body-text {
      font-size: 16px; color: var(--au-gray-600);
      line-height: 1.85; margin-bottom: 16px;
    }
    .au-body-text:last-child { margin-bottom: 0; }

    /* ── STATS STRIP ── */
    .au-stats-strip {
      background: var(--au-navy-dark);
      padding: 56px 0;
    }
    .au-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .au-stat-item {
      text-align: center;
      padding: 24px 20px;
      border-right: 1px solid rgba(255,255,255,.1);
    }
    .au-stat-item:last-child { border-right: none; }
    .au-stat-val {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 44px; font-weight: 900;
      color: #fff; line-height: 1;
      margin-bottom: 8px;
    }
    .au-stat-val em {
      font-style: normal;
      color: var(--au-orange);
    }
    .au-stat-label {
      font-size: 14px; color: rgba(255,255,255,.6);
      font-weight: 500;
    }

    /* ── MISSION & VISION ── */
    .au-mv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .au-mv-card {
      background: #fff;
      border-radius: 20px;
      padding: 40px 36px;
      border: 1.5px solid var(--au-gray-200);
      position: relative;
      overflow: hidden;
      transition: box-shadow .25s, border-color .25s;
    }
    .au-mv-card:hover {
      box-shadow: 0 12px 40px rgba(27,58,140,.1);
      border-color: var(--au-navy);
    }
    .au-mv-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 4px;
    }
    .au-mv-card.mission::before { background: var(--au-orange); }
    .au-mv-card.vision::before  { background: var(--au-navy); }
    .au-mv-icon {
      width: 64px; height: 64px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 24px;
    }
    .au-mv-card.mission .au-mv-icon { background: rgba(245,130,10,.1); }
    .au-mv-card.vision  .au-mv-icon { background: rgba(27,58,140,.08); }
    .au-mv-icon svg { width: 30px; height: 30px; }
    .au-mv-card.mission .au-mv-icon svg { color: var(--au-orange); }
    .au-mv-card.vision  .au-mv-icon svg { color: var(--au-navy); }
    .au-mv-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px; font-weight: 800;
      color: var(--au-navy-dark); margin-bottom: 12px;
    }
    .au-mv-text {
      font-size: 15px; color: var(--au-gray-600); line-height: 1.8;
    }

    /* ── VALUES ── */
    .au-values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 52px;
    }
    .au-value-card {
      background: #fff;
      border-radius: 18px;
      padding: 36px 28px;
      text-align: center;
      border: 1.5px solid var(--au-gray-200);
      transition: transform .25s, box-shadow .25s;
    }
    .au-value-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(27,58,140,.12);
      border-color: transparent;
    }
    .au-value-icon-wrap {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--au-navy-dark);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 6px 18px rgba(245,130,10,.28);
    }
    .au-value-icon-wrap svg {
      width: 36px; height: 36px; color: #fff;
    }
    .au-value-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 17px; font-weight: 800;
      color: var(--au-navy-dark); margin-bottom: 10px;
    }
    .au-value-desc {
      font-size: 14px; color: var(--au-gray-600); line-height: 1.75;
    }

    /* ── CTA ── */
    .au-cta {
      background: linear-gradient(135deg, var(--au-navy-dark) 0%, #1a3276 100%);
      padding: 72px 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .au-cta::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .au-cta-inner { position: relative; z-index: 1; }
    .au-cta-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(26px, 3.5vw, 38px);
      font-weight: 800; color: #fff;
      line-height: 1.15; margin-bottom: 14px;
    }
    .au-cta-sub {
      font-size: 16px; color: rgba(255,255,255,.7);
      margin-bottom: 36px;
    }
    .au-btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 700;
      padding: 15px 34px; border-radius: 50px;
      text-decoration: none; cursor: pointer;
      transition: all .2s; border: none;
    }
    .au-btn-primary {
      background: var(--au-orange);
      color: #fff;
      box-shadow: 0 4px 18px rgba(245,130,10,.4);
    }
    .au-btn-primary:hover {
      background: var(--au-orange-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(245,130,10,.5);
      color: #fff;
      text-decoration: none;
    }
    .au-btn-outline {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255,255,255,.4);
    }
    .au-btn-outline:hover {
      border-color: #fff;
      background: rgba(255,255,255,.08);
      color: #fff;
      text-decoration: none;
    }
    .au-cta-btns {
      display: flex; gap: 14px;
      justify-content: center; flex-wrap: wrap;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .au-stats-grid { grid-template-columns: repeat(2, 1fr); }
      .au-stat-item:nth-child(2) { border-right: none; }
      .au-stat-item:nth-child(3),
      .au-stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); }
    }

    @media (max-width: 768px) {
      .au-section { padding: 60px 0; }
      .au-story-grid { grid-template-columns: 1fr; gap: 48px; }
      .au-story-badge { bottom: -16px; right: 16px; width: 100px; height: 100px; }
      .au-story-badge-num { font-size: 26px; }
      .au-mv-grid { grid-template-columns: 1fr; }
      .au-values-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 480px) {
      .au-hero-content { padding: 60px 20px; }
      .au-values-grid { grid-template-columns: 1fr; }
      .au-stats-grid { grid-template-columns: repeat(2, 1fr); }
      .au-stat-val { font-size: 34px; }
      .au-mv-card { padding: 28px 22px; }
    }

/*Services page*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --sv-navy:        #1B3A8C;
      --sv-navy-dark:   #122777;
      --sv-orange:      #F5820A;
      --sv-orange-dark: #D06800;
      --sv-gray-50:     #F8F9FC;
      --sv-gray-100:    #F1F3F9;
      --sv-gray-200:    #E2E6F0;
      --sv-gray-600:    #6B7280;
      --sv-gray-800:    #1F2937;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--sv-gray-800);
      background: #fff;
      line-height: 1.6;
    }

    /* ── HERO ── */
    .sv-hero {
      background: linear-gradient(135deg, var(--sv-navy-dark) 0%, #1a3276 100%);
      padding: 80px 0 72px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .sv-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .sv-hero-inner { position: relative; z-index: 1; }
    .sv-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--sv-orange);
      margin-bottom: 16px;
    }
    .sv-eyebrow::before, .sv-eyebrow::after {
      content: ''; display: block;
      width: 28px; height: 2px; background: var(--sv-orange);
    }
    .sv-hero-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800; color: #fff;
      line-height: 1.12; letter-spacing: -.02em;
      margin-bottom: 16px;
    }
    .sv-hero-sub {
      font-size: 17px; color: rgba(255,255,255,.7);
      max-width: 580px; margin: 0 auto; line-height: 1.75;
    }

    /* ── STICKY TABS ── */
    .sv-tabs-wrap {
      position: sticky; top: 0; z-index: 100;
      background: #fff;
      border-bottom: 2px solid var(--sv-gray-200);
      box-shadow: 0 2px 16px rgba(0,0,0,.08);
    }
    .sv-tabs {
      max-width: 1160px; margin: 0 auto; padding: 0 24px;
      display: flex; gap: 0; justify-content: center;
      overflow-x: auto; scrollbar-width: none;
    }
    .sv-tabs::-webkit-scrollbar { display: none; }
    .sv-tab {
      display: flex; align-items: center; gap: 10px;
      padding: 18px 28px;
      font-size: 14px; font-weight: 700;
      color: var(--sv-gray-600);
      text-decoration: none;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      white-space: nowrap;
      transition: color .2s, border-color .2s;
      cursor: pointer;
    }
    .sv-tab:hover { color: var(--sv-navy); text-decoration:none !important; }
    .sv-tab.active { color: var(--sv-navy); /*border-bottom-color: var(--sv-orange);*/ }
    .sv-tab-dot {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0;
    }
    @media (max-width: 524px) {
      .sv-tabs-wrap { display: none; }
    }
    .sv-tab:nth-child(1) .sv-tab-dot { background: #2563EB; }
    .sv-tab:nth-child(2) .sv-tab-dot { background: #16A34A; }
    .sv-tab:nth-child(3) .sv-tab-dot { background: var(--sv-orange); }

    /* ── LAYOUT ── */
    .sv-container {
      max-width: 1160px; margin: 0 auto; padding: 0 24px;
    }
    .sv-section {
      padding: 88px 0;
      scroll-margin-top: 62px;
    }
    .sv-section:nth-child(even) { background: var(--sv-gray-50); }

    /* ── SERVICE HEADER ── */
    .sv-service-header {
      display: flex; align-items: flex-start; gap: 20px;
      margin-bottom: 52px;
    }
    .sv-service-badge {
      flex-shrink: 0;
      width: 56px; height: 56px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
    }
    .sv-badge-blue  { background: rgba(37,99,235,.1); }
    .sv-badge-green { background: rgba(22,163,74,.1); }
    .sv-badge-orange{ background: rgba(245,130,10,.1); }
    .sv-service-badge svg { width: 28px; height: 28px; }
    .sv-badge-blue  svg { color: #2563EB; }
    .sv-badge-green svg { color: #16A34A; }
    .sv-badge-orange svg { color: var(--sv-orange); }
    .sv-service-num {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 12px; font-weight: 800;
      letter-spacing: .1em; text-transform: uppercase;
      margin-bottom: 4px;
    }
    .sv-num-blue   { color: #2563EB; }
    .sv-num-green  { color: #16A34A; }
    .sv-num-orange { color: var(--sv-orange); }
    .sv-service-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(26px, 3.5vw, 38px);
      font-weight: 800; color: var(--sv-navy-dark);
      line-height: 1.15; letter-spacing: -.02em;
    }

    /* ── TWO-COL LAYOUT ── */
    .sv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .sv-grid.reverse { direction: rtl; }
    .sv-grid.reverse > * { direction: ltr; }

    /* ── DIAGRAM CARD ── */
    .sv-diagram-card {
      background: #fff;
      border-radius: 24px;
      border: 1.5px solid var(--sv-gray-200);
      padding: 36px 28px;
      box-shadow: 0 8px 32px rgba(27,58,140,.08);
    }
    .sv-diagram-card svg { width: 100%; height: auto; display: block; }

    /* ── BODY TEXT ── */
    .sv-body { font-size: 16px; color: var(--sv-gray-600); line-height: 1.85; margin-bottom: 28px; }

    /* ── FEATURES LIST ── */
    .sv-features {
      display: flex; flex-direction: column; gap: 14px;
      margin-bottom: 36px;
    }
    .sv-feature {
      display: flex; align-items: flex-start; gap: 14px;
    }
    .sv-feature-icon {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
    }
    .sv-fi-blue   { background: rgba(37,99,235,.1); }
    .sv-fi-green  { background: rgba(22,163,74,.1); }
    .sv-fi-orange { background: rgba(245,130,10,.1); }
    .sv-feature-icon svg { width: 14px; height: 14px; }
    .sv-fi-blue   svg { color: #2563EB; }
    .sv-fi-green  svg { color: #16A34A; }
    .sv-fi-orange svg { color: var(--sv-orange); }
    .sv-feature-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--sv-gray-800); margin-bottom: 2px; }
    .sv-feature-text span   { font-size: 13px; color: var(--sv-gray-600); line-height: 1.6; }

    /* ── SPECS ROW ── */
    .sv-specs {
      display: flex; gap: 12px; flex-wrap: wrap;
      margin-top: 8px;
    }
    .sv-spec-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 16px; border-radius: 50px;
      font-size: 13px; font-weight: 600;
      border: 1.5px solid var(--sv-gray-200);
      color: var(--sv-gray-800); background: #fff;
    }
    .sv-spec-pill svg { width: 13px; height: 13px; color: var(--sv-orange); }

    /* ── CTA ── */
    .sv-btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 700;
      padding: 14px 30px; border-radius: 50px;
      text-decoration: none; cursor: pointer;
      transition: all .2s; border: none;
    }
    .sv-btn-primary {
      background: var(--sv-orange); color: #fff;
      box-shadow: 0 4px 16px rgba(245,130,10,.35);
    }
    .sv-btn-primary:hover { background: var(--sv-orange-dark); transform: translateY(-2px); text-decoration:none; color:#fff; }
    .sv-btn-outline {
      background: transparent; color: var(--sv-navy);
      border: 2px solid var(--sv-navy);
    }
    .sv-btn-outline:hover { background: var(--sv-navy); color: #fff; text-decoration:none; }
    .sv-btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

    /* ── BOTTOM ROW (specs + buttons below diagram/content grid) ── */
    .sv-bottom-row {
      margin-top: 48px; padding-top: 36px;
      border-top: 1px solid var(--sv-gray-200);
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    }
    .sv-bottom-row .sv-specs { margin-top: 0; flex: 1; min-width: 0; }
    .sv-bottom-row .sv-btn-row { margin-top: 0; flex-shrink: 0; }
    @media (max-width: 900px) {
      .sv-bottom-row { flex-direction: column; align-items: center; gap: 20px; }
      .sv-bottom-row .sv-specs { flex: unset; width: 100%; justify-content: center; }
      .sv-bottom-row .sv-btn-row { width: 100%; justify-content: center; }
    }

    /* ── COMPARISON TABLE ── */
    .sv-compare-wrap {
      margin-top: 80px; padding-top: 80px;
      border-top: 1px solid var(--sv-gray-200);
    }
    .sv-compare-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 800; color: var(--sv-navy-dark);
      text-align: center; margin-bottom: 8px;
    }
    .sv-compare-sub {
      text-align: center; color: var(--sv-gray-600);
      font-size: 15px; margin-bottom: 40px;
    }
    .sv-table-wrap { overflow-x: auto; }
    @media (max-width: 700px) {
      .sv-table-wrap { overflow-x: visible; margin-right: 0px; }
      .sv-table { display: block; width: 100%; }
      .sv-table thead { display: none; }
      .sv-table tbody { display: flex; flex-direction: column; gap: 12px; width: 100%; }
      .sv-table tbody tr {
        display: block;
        width: 100%; box-sizing: border-box;
        background: #fff;
        border: 1.5px solid var(--sv-gray-200);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(27,58,140,.06);
      }
      .sv-table tbody tr:nth-child(even) { background: #fff; }
      .sv-table tbody td {
        display: flex; align-items: flex-start;
        gap: 10px; padding: 11px 16px;
        font-size: 13px; border-bottom: 1px solid var(--sv-gray-200);
      }
      .sv-table tbody td:last-child { border-bottom: none; }
      .sv-table tbody td:first-child {
        background: var(--sv-navy-dark); color: #fff;
        font-weight: 700; font-size: 13px; letter-spacing: .01em;
        padding: 12px 16px; border-bottom: none;
      }
      .sv-table tbody td::before {
        content: attr(data-label);
        font-weight: 700; color: var(--sv-gray-600);
        font-size: 11px; text-transform: uppercase;
        letter-spacing: .06em; white-space: nowrap;
        min-width: 90px; padding-top: 1px;
      }
      .sv-table tbody td:first-child::before { display: none; }
    }
    .sv-table {
      width: 100%; border-collapse: collapse;
      font-size: 14px; min-width: unset;
    }
    .sv-table thead th {
      background: var(--sv-navy-dark); color: #fff;
      padding: 16px 20px; text-align: left;
      font-weight: 700; font-size: 13px;
    }
    .sv-table thead th:first-child { border-radius: 12px 0 0 0; }
    .sv-table thead th:last-child  { border-radius: 0 12px 0 0; }
    .sv-table tbody tr:nth-child(even) { background: var(--sv-gray-50); }
    .sv-table tbody td {
      padding: 14px 20px; border-bottom: 1px solid var(--sv-gray-200);
      color: var(--sv-gray-800);
    }
    .sv-table tbody td:first-child { font-weight: 600; color: var(--sv-navy-dark); }
    .sv-check { color: #16A34A; font-size: 16px; font-weight: 700; }
    .sv-cross { color: #DC2626; font-size: 16px; font-weight: 700; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .sv-grid { grid-template-columns: 1fr; gap: 40px; }
      .sv-grid.reverse { direction: ltr; }
      .sv-section { padding: 60px 0; }
    }
    @media (max-width: 600px) {
      .sv-tab { padding: 14px 18px; font-size: 13px; }
      .sv-service-header { flex-direction: column; gap: 12px; }
      .sv-btn-row { flex-direction: column; }
      .sv-btn { width: 100%; justify-content: center; }
    }

    /* ── FADE IN ── */
    .sv-fade { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
    .sv-fade.in { opacity: 1; transform: none; }

/*Contact us page*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ct-navy:        #1B3A8C;
      --ct-navy-dark:   #122777;
      --ct-orange:      #F5820A;
      --ct-orange-dark: #D06800;
      --ct-gray-50:     #F8F9FC;
      --ct-gray-100:    #F1F3F9;
      --ct-gray-200:    #E2E6F0;
      --ct-gray-600:    #6B7280;
      --ct-gray-800:    #1F2937;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--ct-gray-800);
      background: #fff;
      line-height: 1.6;
    }

    /* ── HERO ── */
    .ct-hero {
      background: linear-gradient(135deg, var(--ct-navy-dark) 0%, #1a3276 100%);
      padding: 80px 0 72px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .ct-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .ct-hero-inner { position: relative; z-index: 1; }
    .ct-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--ct-orange);
      margin-bottom: 16px;
    }
    .ct-eyebrow::before, .ct-eyebrow::after {
      content: ''; display: block;
      width: 28px; height: 2px; background: var(--ct-orange);
    }
    .ct-hero-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800; color: #fff;
      line-height: 1.12; letter-spacing: -.02em;
      margin-bottom: 16px;
    }
    .ct-hero-sub {
      font-size: 17px; color: rgba(255,255,255,.7);
      max-width: 560px; margin: 0 auto; line-height: 1.75;
    }

    /* ── CONTAINER ── */
    .ct-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── INFO CARDS ROW ── */
    .ct-info-section {
      background: var(--ct-gray-50);
      padding: 56px 0 0;
    }
    .ct-info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .ct-info-card {
      background: #fff;
      border: 1.5px solid var(--ct-gray-200);
      border-radius: 16px;
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      box-shadow: 0 2px 12px rgba(27,58,140,.05);
    }
    .ct-info-icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--ct-navy) 0%, var(--ct-navy-dark) 100%);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ct-info-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .ct-info-label {
      font-size: 11px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ct-orange);
      margin-bottom: 4px;
    }
    .ct-info-value {
      font-size: 16px; font-weight: 600; color: var(--ct-gray-800);
      line-height: 1.45;
    }
    .ct-info-note {
      font-size: 13px; color: var(--ct-gray-600); margin-top: 2px;
    }

    /* ── MAIN BODY (form + map) ── */
    .ct-body-section {
      background: var(--ct-gray-50);
      padding: 48px 0 72px;
    }
    .ct-body-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start;
    }

    /* ── FORM CARD ── */
    .ct-form-card {
      background: #fff;
      border: 1.5px solid var(--ct-gray-200);
      border-radius: 20px;
      padding: 36px 32px;
      box-shadow: 0 4px 24px rgba(27,58,140,.07);
    }
    .ct-form-heading {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px; font-weight: 800;
      color: var(--ct-navy-dark);
      margin-bottom: 6px;
    }
    .ct-form-sub {
      font-size: 14px; color: var(--ct-gray-600);
      margin-bottom: 28px;
    }

    .ct-field {
      margin-bottom: 18px;
    }
    .ct-label {
      display: block;
      font-size: 13px; font-weight: 600;
      color: var(--ct-gray-800);
      margin-bottom: 6px;
    }
    .ct-label span { color: var(--ct-orange); margin-left: 2px; }
    .ct-input,
    .ct-select,
    .ct-textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--ct-gray-200);
      border-radius: 10px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--ct-gray-800);
      background: #fff;
      transition: border-color .18s, box-shadow .18s;
      outline: none;
      appearance: none;
    }
    .ct-input:focus,
    .ct-select:focus,
    .ct-textarea:focus {
      border-color: var(--ct-navy);
      box-shadow: 0 0 0 3px rgba(27,58,140,.1);
    }
    .ct-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
      cursor: pointer;
    }
    .ct-textarea {
      resize: vertical;
      min-height: 120px;
    }
    .ct-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .ct-submit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 14px 28px;
      background: linear-gradient(135deg, var(--ct-orange) 0%, var(--ct-orange-dark) 100%);
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 15px; font-weight: 700;
      border: none; border-radius: 10px;
      cursor: pointer;
      margin-top: 6px;
      transition: opacity .18s, transform .15s;
    }
    .ct-submit-btn:hover { opacity: .9; transform: translateY(-1px); }
    .ct-submit-btn:active { transform: translateY(0); }
    .ct-submit-btn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .ct-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

    /* form states */
    .ct-success-msg {
      display: none;
      background: #ecfdf5;
      border: 1.5px solid #6ee7b7;
      border-radius: 10px;
      padding: 16px 20px;
      color: #065f46;
      font-size: 14px; font-weight: 500;
      margin-top: 16px;
      align-items: center;
      gap: 10px;
    }
    .ct-success-msg.ct-visible { display: flex; }
    .ct-success-msg svg { width: 20px; height: 20px; fill: none; stroke: #059669; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
    .ct-error-msg {
      display: none;
      background: #fef2f2;
      border: 1.5px solid #fca5a5;
      border-radius: 10px;
      padding: 16px 20px;
      color: #991b1b;
      font-size: 14px; font-weight: 500;
      margin-top: 16px;
      align-items: center;
      gap: 10px;
    }
    .ct-error-msg.ct-visible { display: flex; }
    .ct-error-msg svg { width: 20px; height: 20px; fill: none; stroke: #dc2626; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

    /* ── MAP COLUMN ── */
    .ct-map-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .ct-map-card {
      background: #fff;
      border: 1.5px solid var(--ct-gray-200);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(27,58,140,.07);
    }
    .ct-map-header {
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--ct-gray-200);
    }
    .ct-map-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px; font-weight: 800;
      color: var(--ct-navy-dark);
      margin-bottom: 2px;
    }
    .ct-map-addr {
      font-size: 13px; color: var(--ct-gray-600);
    }
    .ct-map-frame-wrap {
      position: relative;
      width: 100%;
      padding-bottom: 62%;
    }
    .ct-map-frame-wrap iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0;
      display: block;
    }

    /* ── HOURS CARD ── */
    .ct-hours-card {
      background: #fff;
      border: 1.5px solid var(--ct-gray-200);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(27,58,140,.05);
    }
    .ct-hours-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 15px; font-weight: 800;
      color: var(--ct-navy-dark);
      margin-bottom: 14px;
      display: flex; align-items: center; gap: 8px;
    }
    .ct-hours-title svg { width: 18px; height: 18px; fill: none; stroke: var(--ct-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .ct-hours-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid var(--ct-gray-100);
      font-size: 13px;
    }
    .ct-hours-row:last-child { border-bottom: none; padding-bottom: 0; }
    .ct-hours-day { color: var(--ct-gray-600); font-weight: 500; }
    .ct-hours-time { font-weight: 600; color: var(--ct-gray-800); }
    .ct-hours-time.ct-closed { color: #ef4444; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .ct-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .ct-info-card {
        flex-direction: row;
        align-items: center;
        gap: 16px;
      }
      .ct-body-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .ct-map-col {
        order: -1;
      }
    }
    @media (max-width: 600px) {
      .ct-hero { padding: 56px 0 48px; }
      .ct-form-card { padding: 24px 18px; }
      .ct-row-2 { grid-template-columns: 1fr; }
      .ct-info-section { padding: 36px 0 0; }
      .ct-body-section { padding: 32px 0 52px; }
    }

/*Blog Page*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bl-navy:        #1B3A8C;
      --bl-navy-dark:   #122777;
      --bl-orange:      #F5820A;
      --bl-orange-dark: #D06800;
      --bl-gray-50:     #F8F9FC;
      --bl-gray-100:    #F1F3F9;
      --bl-gray-200:    #E2E6F0;
      --bl-gray-400:    #9CA3AF;
      --bl-gray-600:    #6B7280;
      --bl-gray-800:    #1F2937;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--bl-gray-800);
      background: #fff;
      line-height: 1.6;
    }

    /* ── HERO ── */
    .bl-hero {
      background: linear-gradient(135deg, var(--bl-navy-dark) 0%, #1a3276 100%);
      padding: 80px 0 72px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .bl-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .bl-hero-inner { position: relative; z-index: 1; }
    .bl-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--bl-orange);
      margin-bottom: 16px;
    }
    .bl-eyebrow::before, .bl-eyebrow::after {
      content: ''; display: block;
      width: 28px; height: 2px; background: var(--bl-orange);
    }
    .bl-hero-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800; color: #fff;
      line-height: 1.12; letter-spacing: -.02em;
      margin-bottom: 16px;
    }
    .bl-hero-sub {
      font-size: 17px; color: rgba(255,255,255,.7);
      max-width: 560px; margin: 0 auto; line-height: 1.75;
    }

    /* ── WRAP ── */
    .bl-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── GRID SECTION ── */
    .bl-grid-section {
      padding: 60px 0 80px;
      background: var(--bl-gray-50);
    }
    .bl-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-bottom: 52px;
    }

    /* ── CARD ── */
    .bl-card {
      background: #fff;
      border: 1.5px solid var(--bl-gray-200);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 2px 14px rgba(27,58,140,.06);
      display: flex; flex-direction: column;
      transition: transform .2s, box-shadow .2s;
    }
    .bl-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(27,58,140,.12);
    }

    /* image link */
    .bl-card-img-link {
      display: block;
      text-decoration: none;
      flex-shrink: 0;
    }
    .bl-card-img {
      position: relative;
      height: 180px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      transition: opacity .18s;
    }
    .bl-card-img-link:hover .bl-card-img { opacity: .88; }

    .bl-img-illustration { opacity: .2; }
    .bl-card-img-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.15);
    }

    /* colour variants */
    .bl-img--navy   { background: linear-gradient(135deg, #0f2060 0%, #1B3A8C 60%, #2a509e 100%); }
    .bl-img--green  { background: linear-gradient(135deg, #064e3b 0%, #065f46 60%, #047857 100%); }
    .bl-img--teal   { background: linear-gradient(135deg, #134e4a 0%, #0f766e 60%, #0d9488 100%); }
    .bl-img--amber  { background: linear-gradient(135deg, #78350f 0%, #92400e 60%, #b45309 100%); }
    .bl-img--violet { background: linear-gradient(135deg, #2e1065 0%, #3b0764 60%, #4c1d95 100%); }
    .bl-img--slate  { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%); }
    .bl-img--rose   { background: linear-gradient(135deg, #4c0519 0%, #881337 60%, #be123c 100%); }
    .bl-img--sky    { background: linear-gradient(135deg, #082f49 0%, #0c4a6e 60%, #075985 100%); }
    .bl-img--lime   { background: linear-gradient(135deg, #1a2e05 0%, #365314 60%, #4d7c0f 100%); }

    .bl-card-body {
      padding: 22px 22px 20px;
      display: flex; flex-direction: column; flex: 1;
    }
    .bl-card-date {
      font-size: 12px; color: var(--bl-gray-400);
      margin-bottom: 10px;
    }

    /* title link */
    .bl-card-title-link {
      text-decoration: none; color: inherit;
    }
    .bl-card-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 17px; font-weight: 800;
      color: var(--bl-navy-dark); line-height: 1.3;
      letter-spacing: -.01em; margin-bottom: 10px;
      transition: color .15s;
    }
    .bl-card-title-link:hover{
      text-decoration: none !important;
    }
    .bl-card-title-link:hover .bl-card-title {
      color: var(--bl-orange);
      text-decoration: none;
    }

    .bl-card-excerpt {
      font-size: 13.5px; color: var(--bl-gray-600);
      line-height: 1.7; flex: 1; margin-bottom: 18px;
    }
    .bl-card-footer {
      padding-top: 14px;
      border-top: 1px solid var(--bl-gray-100);
      display: flex; justify-content: flex-end;
    }
    .bl-read-link {
      font-size: 13px; font-weight: 700; color: var(--bl-orange);
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 5px;
      transition: gap .15s;
    }
    .bl-read-link:hover { gap: 8px;text-decoration:none; }
    .bl-read-link svg {
      width: 14px; height: 14px; fill: none;
      stroke: var(--bl-orange); stroke-width: 2.5;
      stroke-linecap: round; stroke-linejoin: round;
    }

    /* hidden card */
    .bl-card.bl-hidden { display: none; }

    /* ── PAGINATION ── */
    .bl-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .bl-page-btn {
      height: 42px;
      padding: 0 18px;
      border-radius: 10px;
      border: 1.5px solid var(--bl-gray-200);
      background: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 14px; font-weight: 600;
      color: var(--bl-gray-800);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      white-space: nowrap;
      transition: border-color .15s, background .15s, color .15s;
    }
    .bl-page-num {
      min-width: 42px; padding: 0;
    }
    .bl-page-btn:hover:not(:disabled) {
      border-color: var(--bl-navy);
      color: var(--bl-navy);
    }
    .bl-page-btn.bl-active {
      background: var(--bl-navy);
      border-color: var(--bl-navy);
      color: #fff;
    }
    .bl-page-btn:disabled {
      opacity: .38; cursor: not-allowed;
    }
    .bl-page-btn svg {
      width: 15px; height: 15px; fill: none;
      stroke: currentColor; stroke-width: 2.2;
      stroke-linecap: round; stroke-linejoin: round;
    }

    /* ── NEWSLETTER ── */
    .bl-newsletter {
      background: linear-gradient(135deg, var(--bl-navy-dark) 0%, #1a3276 100%);
      padding: 64px 0;
      text-align: center;
      position: relative; overflow: hidden;
    }
    .bl-newsletter::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .bl-newsletter-inner { position: relative; z-index: 1; }
    .bl-newsletter-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(22px, 3.5vw, 34px);
      font-weight: 800; color: #fff;
      margin-bottom: 10px; letter-spacing: -.01em;
    }
    .bl-newsletter-sub {
      font-size: 15px; color: rgba(255,255,255,.65);
      max-width: 480px; margin: 0 auto 28px;
      line-height: 1.7;
    }
    .bl-newsletter-form {
      display: flex; gap: 12px; justify-content: center;
      flex-wrap: wrap;
    }
    .bl-nl-input {
      padding: 13px 18px;
      border: none; border-radius: 10px;
      font-family: 'Inter', sans-serif; font-size: 14px;
      width: 300px; max-width: 100%;
      outline: none;
    }
    .bl-nl-btn {
      padding: 13px 24px;
      background: linear-gradient(135deg, var(--bl-orange) 0%, var(--bl-orange-dark) 100%);
      color: #fff; border: none; border-radius: 10px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px; font-weight: 700;
      cursor: pointer;
      transition: opacity .18s;
    }
    .bl-nl-btn:hover { opacity: .9; }
    .bl-nl-btn:disabled { opacity: .6; cursor: not-allowed; }

    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
      .bl-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .bl-hero { padding: 56px 0 48px; }
      .bl-grid { grid-template-columns: 1fr; }
      .bl-grid-section { padding: 40px 0 56px; }
      .bl-page-btn { font-size: 13px; padding: 0 12px; }
    }

/*Single Blog page*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bs-navy:        #1B3A8C;
      --bs-navy-dark:   #122777;
      --bs-orange:      #F5820A;
      --bs-orange-dark: #D06800;
      --bs-gray-50:     #F8F9FC;
      --bs-gray-100:    #F1F3F9;
      --bs-gray-200:    #E2E6F0;
      --bs-gray-400:    #9CA3AF;
      --bs-gray-600:    #6B7280;
      --bs-gray-800:    #1F2937;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--bs-gray-800);
      background: #fff;
      line-height: 1.6;
    }

    /* ── WRAP ── */
    .bs-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .bs-wrap--narrow {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── BACK BAR ── */
    .bs-back-bar {
      background: #fff;
      border-bottom: 1px solid var(--bs-gray-200);
      padding: 14px 0;
    }
    .bs-back-link {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 13px; font-weight: 600; color: var(--bs-gray-600);
      text-decoration: none;
      transition: color .15s;
    }
    .bs-back-link:hover { color: var(--bs-navy); }
    .bs-back-link svg {
      width: 15px; height: 15px; fill: none;
      stroke: currentColor; stroke-width: 2.2;
      stroke-linecap: round; stroke-linejoin: round;
    }

    /* ── HERO ── */
    .bs-hero {
      background: linear-gradient(135deg, var(--bs-navy-dark) 0%, #1a3276 100%);
      padding: 64px 0 0;
      position: relative;
      overflow: hidden;
    }
    .bs-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .bs-hero-inner {
      position: relative; z-index: 1;
      padding-bottom: 56px;
    }
    .bs-hero-meta {
      display: flex; align-items: center; gap: 12px;
      font-size: 13px; color: rgba(255,255,255,.6);
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .bs-hero-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); }
    .bs-hero-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(26px, 4.5vw, 44px);
      font-weight: 800; color: #fff;
      line-height: 1.15; letter-spacing: -.02em;
      max-width: 720px;
    }

    /* hero image strip */
    .bs-hero-img {
      position: relative;
      height: 320px;
      background: linear-gradient(135deg, #0f2060 0%, #1B3A8C 50%, #2a509e 100%);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .bs-hero-img-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(18,39,119,.35) 0%, rgba(0,0,0,.1) 100%);
    }
    .bs-hero-img svg { opacity: .12; }

    /* ── ARTICLE LAYOUT ── */
    .bs-article-wrap {
      background: #fff;
      padding: 56px 0 0;
    }

    /* content body */
    .bs-content h2 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px; font-weight: 800;
      color: var(--bs-navy-dark);
      letter-spacing: -.01em;
      margin: 40px 0 14px;
      line-height: 1.25;
    }
    .bs-content h3 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px; font-weight: 700;
      color: var(--bs-gray-800);
      margin: 28px 0 10px;
      line-height: 1.3;
    }
    .bs-content p {
      font-size: 16px; color: var(--bs-gray-800);
      line-height: 1.8; margin-bottom: 20px;
    }
    .bs-content a:hover{ text-decoration:none !important; }
    .bs-content ul, .bs-content ol {
      padding-left: 22px;
      margin-bottom: 20px;
    }
    .bs-content li {
      font-size: 16px; color: var(--bs-gray-800);
      line-height: 1.8; margin-bottom: 8px;
    }
    .bs-content strong { font-weight: 700; color: var(--bs-gray-800); }

    /* callout box */
    .bs-callout {
      background: var(--bs-gray-50);
      border-left: 4px solid var(--bs-orange);
      border-radius: 0 12px 12px 0;
      padding: 20px 24px;
      margin: 28px 0;
    }
    .bs-callout-label {
      font-size: 11px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--bs-orange);
      margin-bottom: 6px;
    }
    .bs-callout p {
      font-size: 15px; color: var(--bs-gray-800);
      line-height: 1.7; margin: 0;
    }

    /* stat tiles */
    .bs-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 32px 0;
    }
    .bs-stat {
      background: var(--bs-gray-50);
      border: 1.5px solid var(--bs-gray-200);
      border-radius: 14px;
      padding: 20px 18px;
      text-align: center;
    }
    .bs-stat-value {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 28px; font-weight: 900;
      color: var(--bs-navy);
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .bs-stat-label {
      font-size: 12px; color: var(--bs-gray-600);
      font-weight: 500; line-height: 1.4;
    }

    /* step list */
    .bs-steps {
      counter-reset: step-counter;
      list-style: none;
      padding: 0; margin: 0 0 24px;
    }
    .bs-steps li {
      counter-increment: step-counter;
      display: flex; gap: 16px;
      align-items: flex-start;
      padding: 18px 0;
      border-bottom: 1px solid var(--bs-gray-100);
    }
    .bs-steps li:last-child { border-bottom: none; }
    .bs-steps li::before {
      content: counter(step-counter);
      flex-shrink: 0;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--bs-navy) 0%, var(--bs-navy-dark) 100%);
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      margin-top: 2px;
    }
    .bs-steps li p { margin: 0; font-size: 15.5px; }
    .bs-steps li strong { display: block; font-size: 16px; margin-bottom: 4px; }

    /* divider */
    .bs-divider {
      border: none; border-top: 1px solid var(--bs-gray-200);
      margin: 40px 0;
    }

    /* share bar */
    .bs-share {
      display: flex; align-items: center; gap: 12px;
      padding: 24px 0;
      border-top: 1px solid var(--bs-gray-200);
      margin-top: 48px;
      flex-wrap: wrap;
    }
    .bs-share-label {
      font-size: 13px; font-weight: 700; color: var(--bs-gray-600);
      text-transform: uppercase; letter-spacing: .06em;
    }
    .bs-share-btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 16px;
      border: 1.5px solid var(--bs-gray-200);
      border-radius: 8px;
      background: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 13px; font-weight: 600;
      color: var(--bs-gray-800);
      cursor: pointer;
      text-decoration: none;
      transition: border-color .15s, color .15s;
    }
    .bs-share-btn:hover { border-color: var(--bs-navy); color: var(--bs-navy); }
    .bs-share-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* ── RELATED POSTS ── */
    .bs-related {
      background: var(--bs-gray-50);
      padding: 60px 0;
    }
    .bs-related-heading {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px; font-weight: 800;
      color: var(--bs-navy-dark);
      margin-bottom: 28px;
    }
    .bs-related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .bs-rel-card {
      background: #fff;
      border: 1.5px solid var(--bs-gray-200);
      border-radius: 16px;
      overflow: hidden;
      display: flex; flex-direction: column;
      box-shadow: 0 2px 10px rgba(27,58,140,.05);
      transition: transform .2s, box-shadow .2s;
    }
    .bs-rel-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 24px rgba(27,58,140,.1);
    }
    .bs-rel-img {
      height: 140px;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .bs-rel-img-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.15); }
    .bs-rel-img svg { opacity: .2; }
    .bs-img--green  { background: linear-gradient(135deg, #064e3b 0%, #047857 100%); }
    .bs-img--teal   { background: linear-gradient(135deg, #134e4a 0%, #0d9488 100%); }
    .bs-img--amber  { background: linear-gradient(135deg, #78350f 0%, #b45309 100%); }
    .bs-rel-body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
    .bs-rel-date { font-size: 11px; color: var(--bs-gray-400); margin-bottom: 8px; }
    .bs-rel-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 15px; font-weight: 800;
      color: var(--bs-navy-dark); line-height: 1.3;
      margin-bottom: 10px; flex: 1;
      text-decoration: none; display: block;
      transition: color .15s;
    }
    .bs-rel-title:hover { color: var(--bs-orange); text-decoration:none; }
    .bs-rel-link {
      font-size: 12px; font-weight: 700; color: var(--bs-orange);
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 4px;
      transition: gap .15s;
    }
    .bs-rel-link:hover { gap: 7px; text-decoration:none; }
    .bs-rel-link svg { width: 12px; height: 12px; fill: none; stroke: var(--bs-orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

    /* ── NEWSLETTER ── */
    .bs-newsletter {
      background: linear-gradient(135deg, var(--bs-navy-dark) 0%, #1a3276 100%);
      padding: 64px 0;
      text-align: center;
      position: relative; overflow: hidden;
    }
    .bs-newsletter::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .bs-newsletter-inner { position: relative; z-index: 1; }
    .bs-newsletter-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(22px, 3.5vw, 34px);
      font-weight: 800; color: #fff;
      margin-bottom: 10px; letter-spacing: -.01em;
    }
    .bs-newsletter-sub {
      font-size: 15px; color: rgba(255,255,255,.65);
      max-width: 480px; margin: 0 auto 28px;
      line-height: 1.7;
    }
    .bs-newsletter-form {
      display: flex; gap: 12px; justify-content: center;
      flex-wrap: wrap;
    }
    .bs-nl-input {
      padding: 13px 18px;
      border: none; border-radius: 10px;
      font-family: 'Inter', sans-serif; font-size: 14px;
      width: 300px; max-width: 100%;
      outline: none;
    }
    .bs-nl-btn {
      padding: 13px 24px;
      background: linear-gradient(135deg, var(--bs-orange) 0%, var(--bs-orange-dark) 100%);
      color: #fff; border: none; border-radius: 10px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px; font-weight: 700;
      cursor: pointer;
      transition: opacity .18s;
    }
    .bs-nl-btn:hover { opacity: .9; }
    .bs-nl-btn:disabled { opacity: .6; cursor: not-allowed; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .bs-related-grid { grid-template-columns: 1fr 1fr; }
      .bs-stats { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) {
      .bs-hero { padding: 44px 0 0; }
      .bs-hero-img { height: 220px; }
      .bs-article-wrap { padding: 36px 0 0; }
      .bs-related-grid { grid-template-columns: 1fr; }
      .bs-stats { grid-template-columns: 1fr; }
      .bs-content h2 { font-size: 20px; }
    }

  /*Projects Page*/
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --pj-navy:        #1B3A8C;
      --pj-navy-dark:   #122777;
      --pj-orange:      #F5820A;
      --pj-orange-dark: #D06800;
      --pj-gray-50:     #F8F9FC;
      --pj-gray-100:    #F1F3F9;
      --pj-gray-200:    #E2E6F0;
      --pj-gray-400:    #9CA3AF;
      --pj-gray-600:    #6B7280;
      --pj-gray-800:    #1F2937;
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--pj-gray-800);
      background: #fff;
      line-height: 1.6;
    }

    /* ── WRAP ── */
    .pj-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── HERO ── */
    .pj-hero {
      background: linear-gradient(135deg, var(--pj-navy-dark) 0%, #1a3276 100%);
      padding: 80px 0 72px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .pj-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .pj-hero-inner { position: relative; z-index: 1; }
    .pj-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--pj-orange);
      margin-bottom: 16px;
    }
    .pj-eyebrow::before, .pj-eyebrow::after {
      content: ''; display: block;
      width: 28px; height: 2px; background: var(--pj-orange);
    }
    .pj-hero-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800; color: #fff;
      line-height: 1.12; letter-spacing: -.02em;
      margin-bottom: 16px;
    }
    .pj-hero-sub {
      font-size: 17px; color: rgba(255,255,255,.7);
      max-width: 560px; margin: 0 auto; line-height: 1.75;
    }

    /* ── STATS STRIP ── */
    .pj-stats-strip {
      background: var(--pj-navy);
      padding: 0;
    }
    .pj-stats-row {
      display: flex;
      divide-x: 1px solid rgba(255,255,255,.12);
    }
    .pj-stat {
      flex: 1;
      padding: 28px 24px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,.12);
    }
    .pj-stat:last-child { border-right: none; }
    .pj-stat-value {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 28px; font-weight: 900; color: #fff;
      line-height: 1.1; margin-bottom: 4px;
    }
    .pj-stat-value span { color: var(--pj-orange); }
    .pj-stat-label {
      font-size: 12px; color: rgba(255,255,255,.6);
      font-weight: 500;
    }

    /* ── GALLERY SECTION ── */
    .pj-gallery-section {
      background: var(--pj-gray-50);
      padding: 64px 0 80px;
    }

    .pj-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    /* ── GALLERY CARD ── */
    .pj-card {
      background: #fff;
      border: 1.5px solid var(--pj-gray-200);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 2px 14px rgba(27,58,140,.06);
      transition: transform .22s, box-shadow .22s;
    }
    .pj-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 36px rgba(27,58,140,.13);
    }

    /* image placeholder */
    .pj-img {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      background: var(--pj-gray-100);
    }
    .pj-img img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
    .pj-img-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    .pj-img-placeholder svg {
      width: 48px; height: 48px;
      opacity: .25;
    }

    /* caption area */
    .pj-caption {
      padding: 24px 24px 26px;
    }
    .pj-caption-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 17px; font-weight: 800;
      color: var(--pj-navy-dark);
      line-height: 1.35;
    }

    /* ── CTA ── */
    .pj-cta {
      background: linear-gradient(135deg, var(--pj-navy-dark) 0%, #1a3276 100%);
      padding: 64px 0;
      text-align: center;
      position: relative; overflow: hidden;
    }
    .pj-cta::before {
      content: '';
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .pj-cta-inner { position: relative; z-index: 1; }
    .pj-cta-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(24px, 4vw, 38px);
      font-weight: 800; color: #fff;
      margin-bottom: 12px; letter-spacing: -.02em;
    }
    .pj-cta-sub {
      font-size: 16px; color: rgba(255,255,255,.65);
      max-width: 520px; margin: 0 auto 32px;
      line-height: 1.7;
    }
    .pj-cta-btn {
      display: inline-flex; align-items: center; gap: 9px;
      background: linear-gradient(135deg, var(--pj-orange) 0%, var(--pj-orange-dark) 100%);
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 15px; font-weight: 700;
      padding: 14px 30px; border-radius: 10px;
      text-decoration: none;
      transition: opacity .18s, transform .15s;
    }
    .pj-cta-btn:hover { opacity: .9; transform: translateY(-2px);color:#fff; text-decoration:none; }
    .pj-cta-btn svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
      .pj-grid { grid-template-columns: repeat(2, 1fr); }
      .pj-stats-row { flex-wrap: wrap; }
      .pj-stat { flex: 1 0 50%; border-bottom: 1px solid rgba(255,255,255,.12); }
      .pj-stat:nth-child(even) { border-right: none; }
    }
    @media (max-width: 600px) {
      .pj-hero { padding: 56px 0 48px; }
      .pj-grid { grid-template-columns: 1fr; }
      .pj-gallery-section { padding: 40px 0 56px; }
      .pj-stat { flex: 1 0 100%; border-right: none; }
    }

/* ── PAGINATION ── */
.pagination-sponline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 48px 0 16px;
}

/* All links and spans */
.pagination-sponline a.page-numbers,
.pagination-sponline span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid #E2E6F0;
  border-radius: 8px;
  background: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  line-height: 1;
}

/* Hover state for links */
.pagination-sponline a.page-numbers:hover {
  border-color: #1B3A8C;
  color: #1B3A8C;
  background: #F8F9FC;
}

/* Current / active page */
.pagination-sponline span.page-numbers.current {
  background: #1B3A8C;
  border-color: #1B3A8C;
  color: #fff;
  cursor: default;
}

/* Dots (...) */
.pagination-sponline span.page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: #9CA3AF;
  min-width: 24px;
  padding: 0 4px;
}

/* Prev & Next — wider pill style */
.pagination-sponline a.prev.page-numbers,
.pagination-sponline a.next.page-numbers {
  padding: 0 18px;
  gap: 8px;
  color: #1B3A8C;
  border-color: #1B3A8C;
  font-weight: 700;
}

.pagination-sponline a.prev.page-numbers:hover,
.pagination-sponline a.next.page-numbers:hover {
  background: #1B3A8C;
  color: #fff;
}

/* Chevron icons inside <i> tags */
.pagination-sponline a.prev.page-numbers i,
.pagination-sponline a.next.page-numbers i {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  flex-shrink: 0;
}

.pagination-sponline a.prev.page-numbers i {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pagination-sponline a.next.page-numbers i {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Responsive */
@media (max-width: 600px) {
  .pagination-sponline {
    gap: 4px;
  }
  .pagination-sponline a.page-numbers,
  .pagination-sponline span.page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }
  .pagination-sponline a.prev.page-numbers,
  .pagination-sponline a.next.page-numbers {
    padding: 0 12px;
  }
}

.pagination-sponline {
  width: 100%;
  text-align: center;
  /* (your existing flex properties stay as-is) */
}

.blog-loop-wrap {
  display: flex;
  flex-direction: column;
  min-height: 70vh;          /* enough height so even 1 post pushes pagination down */
}

.blog-loop-wrap .posts-grid {   /* your post cards grid wrapper */
  flex: 1;
}