/* ═══════════════════════════════════════════════════
   IT SOLUTION — Redesigned v4  ·  Mobile-First
   Syne (display) + Outfit (body) · Blue & White
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --p:#1a56db; --p-d:#1340b0; --p-l:#4b79e8; --ps:rgba(26,86,219,.08);
  --a:#06b6d4; --a-d:#0891b2;
  --gold:#f59e0b; --green:#10b981; --red:#ef4444;
  --bg:#f7f9ff; --bg2:#eef2fd; --white:#ffffff;
  --txt:#0f172a; --txt2:#334155; --muted:#64748b;
  --bdr:#e1e8f5; --bdr2:#cdd8ef;
  --g-brand:linear-gradient(135deg,#1a56db 0%,#06b6d4 100%);
  --g-hero:linear-gradient(150deg,#0d1f5c 0%,#1a56db 48%,#0e7490 100%);
  --fh:'Syne',sans-serif; --fb:'Outfit',sans-serif;
  --r:10px; --rl:18px; --rxl:26px;
  --s0:0 1px 3px rgba(15,23,42,.06);
  --s1:0 2px 12px rgba(26,86,219,.08);
  --s2:0 6px 28px rgba(26,86,219,.14);
  --s3:0 14px 52px rgba(26,86,219,.2);
  --tr:all .28s cubic-bezier(.4,0,.2,1);
  --nh:68px;  /* used for hero height calc & nav drawer padding-top */
}
@media(max-width:767px){:root{--nh:58px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--bg);color:var(--txt);overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:var(--tr)}
ul,ol{list-style:none}
button,input,select,textarea{font-family:var(--fb)}
button{cursor:pointer}

.container{max-width:1180px;margin:0 auto;padding:0 18px}
@media(min-width:640px){.container{padding:0 28px}}
@media(min-width:1200px){.container{padding:0 24px}}

.section{padding:68px 0}
.section-sm{padding:44px 0}
.section-alt{background:var(--bg2)}
@media(min-width:768px){.section{padding:96px 0}}
@media(min-width:1024px){.section{padding:112px 0}}

/* ── TYPOGRAPHY ─────────────────────────── */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.68rem;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--p);font-weight:700;margin-bottom:13px;
}
.section-eyebrow::before,.section-eyebrow::after{
  content:'';height:1.5px;width:22px;border-radius:2px;
  background:var(--g-brand);opacity:.4;
}
.section-title{
  font-family:var(--fh);font-weight:800;color:var(--txt);
  font-size:clamp(1.55rem,3.8vw,2.55rem);
  line-height:1.18;margin-bottom:14px;letter-spacing:-.02em;
}
.section-title.centered{text-align:center}
.section-sub{
  color:var(--muted);font-size:clamp(.9rem,2.2vw,1.05rem);
  max-width:540px;margin:0 auto 50px;line-height:1.78;text-align:center;
}
.text-accent{color:var(--p)} .text-gold{color:var(--gold)} .text-center{text-align:center}

/* ── BUTTONS ────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:9px;
  font-family:var(--fh);font-weight:700;font-size:.875rem;letter-spacing:.25px;
  border:2px solid transparent;transition:var(--tr);white-space:nowrap;cursor:pointer;
}
.btn-primary{background:var(--g-brand);color:#fff;box-shadow:0 4px 18px rgba(26,86,219,.32)}
.btn-primary:hover{color:#fff;transform:translateY(-3px);box-shadow:0 10px 32px rgba(26,86,219,.46)}
.btn-outline{background:transparent;color:var(--p);border-color:var(--p)}
.btn-outline:hover{background:var(--p);color:#fff;transform:translateY(-2px)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(8px)}
.btn-outline-white:hover{background:rgba(255,255,255,.15);color:#fff;border-color:#fff}
.btn-white{background:#fff;color:var(--p);box-shadow:0 4px 18px rgba(0,0,0,.1);border-color:transparent}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.14)}
.btn-ghost{background:var(--ps);color:var(--p);border-color:transparent}
.btn-ghost:hover{background:rgba(26,86,219,.14)}
.btn-sm{padding:9px 18px;font-size:.8rem;gap:6px}
.btn-lg{padding:15px 36px;font-size:.94rem}
.btn-pill{border-radius:50px}
.btn-pulse{animation:bPulse 2.5s ease-in-out infinite}
@keyframes bPulse{0%,100%{box-shadow:0 4px 18px rgba(26,86,219,.32)}50%{box-shadow:0 4px 30px rgba(26,86,219,.56)}}
@media(max-width:400px){.btn{padding:11px 20px;font-size:.84rem}.btn-lg{padding:13px 24px}}

/* ── TOPBAR ─────────────────────────────── */
.topbar{background:var(--p-d);padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);display:none}
@media(min-width:768px){.topbar{display:block}}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar-info{display:flex;gap:22px}
.topbar-info a{font-size:.74rem;color:rgba(255,255,255,.74);display:flex;align-items:center;gap:6px;font-weight:500}
.topbar-info a i{color:var(--a);font-size:.7rem}
.topbar-info a:hover{color:#fff}
.topbar-social{display:flex;gap:5px}
.topbar-social a{width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:.65rem}
.topbar-social a:hover{background:var(--a);color:#fff}

/* ── HEADER ─────────────────────────────── */
.main-header{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr);
  box-shadow:var(--s0);transition:box-shadow .3s;
}
.main-header.scrolled{box-shadow:var(--s2)}

/* ─ Header inner: single row, logo left, cta+toggle right ─ */
.header-inner{
  display:flex;align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:var(--nh);
  padding:10px 0;
}

/* ─ Logo ─────────────────────────────────────── */
.logo{
  display:flex;align-items:center;gap:10px;
  flex-shrink:1;   /* allow shrinking so toggle stays visible */
  min-width:0;     /* allow text to truncate if needed */
  overflow:hidden;
}
.logo-mark{
  width:40px;height:40px;border-radius:10px;background:var(--g-brand);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.1rem;flex-shrink:0;
  box-shadow:0 3px 14px rgba(26,86,219,.38);transition:var(--tr);
}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08)}
.logo-text{
  display:flex;flex-direction:column;line-height:1;
  min-width:0;overflow:hidden;
}
.logo-name{
  font-family:var(--fh);font-size:1.08rem;font-weight:800;
  color:var(--p);letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.logo-tag{
  font-size:.54rem;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--a-d);opacity:.9;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.logo-img{height:40px;width:auto;flex-shrink:0}

/* ─ Desktop nav ──────────────────────────────── */
.main-nav{}
.nav-list{display:flex;align-items:center;gap:1px}
.nav-item{position:relative}
.nav-link{
  padding:9px 14px;font-size:.875rem;font-weight:600;color:var(--txt2);
  display:flex;align-items:center;gap:5px;border-radius:8px;position:relative;
}
.nav-link::after{
  content:'';position:absolute;bottom:4px;left:50%;
  transform:translateX(-50%) scaleX(0);height:2px;width:60%;
  background:var(--g-brand);border-radius:2px;transition:transform .25s ease;
}
.nav-link:hover,.nav-link.active{color:var(--p)}
.nav-link:hover::after,.nav-link.active::after{transform:translateX(-50%) scaleX(1)}
.nav-link .chev{font-size:.56rem;transition:transform .22s}
.nav-item:hover .chev{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:200px;background:var(--white);
  border:1px solid var(--bdr);border-radius:var(--rl);
  box-shadow:var(--s3);opacity:0;visibility:hidden;
  transition:var(--tr);z-index:999;overflow:hidden;
}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown a{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;font-size:.84rem;font-weight:500;color:var(--txt2);
  border-bottom:1px solid var(--bdr);
}
.dropdown a:last-child{border-bottom:none}
.dropdown a i{color:var(--p);width:14px;font-size:.78rem}
.dropdown a:hover{background:var(--bg2);color:var(--p);padding-left:20px}

/* ─ Hamburger button ─────────────────────────── */
.nav-toggle{
  display:none;           /* hidden on desktop */
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;height:40px;min-width:40px;
  border-radius:9px;
  background:var(--bg2);
  border:1.5px solid var(--bdr);
  cursor:pointer;padding:8px;
  flex-shrink:0;
  transition:var(--tr);
}
.nav-toggle:hover{background:var(--ps);border-color:rgba(26,86,219,.3)}
.nav-toggle span{
  display:block;width:18px;height:2px;
  background:var(--p);border-radius:2px;transition:var(--tr);
}
.nav-toggle.active{background:var(--ps);border-color:var(--p)}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─ Right side CTA area ──────────────────────── */
.header-cta{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;  /* never shrink — always visible */
}

/* Wrap for items that have both a link and a chevron button */
.nav-link-wrap{
  display:flex; align-items:center;
  width:100%;
}
.nav-link-wrap .nav-link{
  flex:1;
}
/* Chevron toggle button — desktop: hidden, mobile: shown */
.nav-chev{
  display:none;
  background:none; border:none; cursor:pointer;
  padding:10px 12px;
  color:var(--muted);
  flex-shrink:0;
  transition:var(--tr);
}
.nav-chev .chev{ font-size:.62rem; transition:transform .22s; }
.nav-item.open > .nav-link-wrap .nav-chev .chev{ transform:rotate(180deg); }
@media(max-width:767px){
  .nav-chev{ display:flex; align-items:center; justify-content:center; }
}

/* ═══════════════════════════════════════════════
   MOBILE NAV — Pure CSS checkbox technique
   Links are plain <a> tags — zero JS interference
   Opening/closing uses CSS :checked state only
═══════════════════════════════════════════════ */

/* Hidden checkbox — the state controller */
.nav-check { display:none !important; }

/* Desktop ≥768px: show normal nav, hide toggle */
@media(min-width:768px){
  .main-nav  { display:flex; align-items:center; }
  .nav-toggle{ display:none; }
  .header-cta{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
}

/* Mobile <768px */
@media(max-width:767px){

  /* Hide desktop CTA button on mobile */
  .header-cta{ display:none; }

  /* Hamburger label — acts as the toggle button */
  .nav-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:42px; height:42px; min-width:42px;
    border-radius:9px;
    background:#eef2fd;
    border:1.5px solid #dce5f5;
    cursor:pointer;
    padding:9px;
    flex-shrink:0;
    order:3;  /* push to right side */
    transition:all .2s;
  }
  .nav-toggle span{
    display:block;
    width:18px; height:2px;
    background:#1a56db;
    border-radius:2px;
    transition:all .3s;
  }

  /* Animate hamburger → X when checked */
  .nav-check:checked ~ .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-check:checked ~ .nav-toggle span:nth-child(2){ opacity:0; transform:scaleX(0); }
  .nav-check:checked ~ .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Nav drawer — hidden by default */
  .main-nav{
    /* Out of flow */
    position:fixed;
    top:0; right:0;
    width:min(285px, 82vw);
    height:100vh;
    height:100dvh;
    background:#ffffff;
    border-left:2px solid #e1e8f5;
    padding-top:72px;
    padding-bottom:40px;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:9999;
    box-shadow:-4px 0 28px rgba(0,0,0,.12);
    /* Hidden: slid off right */
    transform:translateX(110%);
    transition:transform .3s ease;
    /* No blur on the drawer itself */
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Show nav when checkbox is checked */
  .nav-check:checked ~ .nav-toggle ~ .main-nav,
  .nav-check:checked ~ .main-nav{
    transform:translateX(0);
  }

  /* Nav list */
  .nav-list{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 14px 20px;
    list-style:none;
    margin:0;
  }

  .nav-item{ width:100%; }

  /* Nav links — PURE <a> TAGS, nothing blocking them */
  .nav-link{
    display:block !important;
    width:100% !important;
    padding:15px 14px !important;
    font-size:.97rem !important;
    font-weight:600 !important;
    color:#0f172a !important;
    border-bottom:1px solid #eef2fd !important;
    border-radius:0 !important;
    text-decoration:none !important;
    transition:background .15s, color .15s !important;
    /* Full tap area */
    -webkit-tap-highlight-color:rgba(26,86,219,.12);
  }
  .nav-link:hover,
  .nav-link:focus,
  .nav-link:active{
    background:#eef2fd !important;
    color:#1a56db !important;
    border-radius:8px !important;
    outline:none !important;
  }
  .nav-link::after{ display:none !important; }

  /* Sub-dropdowns */
  .dropdown{
    position:static !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    box-shadow:none !important;
    background:rgba(26,86,219,.04) !important;
    border:none !important;
    border-radius:8px !important;
    padding:4px 0 6px 8px !important;
    margin:0 0 6px !important;
    display:none !important;
  }
  .nav-item.open > .dropdown{ display:block !important; }
  .dropdown a{
    display:block !important;
    padding:11px 14px !important;
    font-size:.88rem !important;
    color:#334155 !important;
    border-bottom:1px solid rgba(0,0,0,.04) !important;
    text-decoration:none !important;
    -webkit-tap-highlight-color:rgba(26,86,219,.1);
  }
  .dropdown a:active{ background:rgba(26,86,219,.08) !important; }

  /* Logo shrink on mobile */
  .logo-name{ font-size:.9rem; }
  .logo-tag { font-size:.48rem; letter-spacing:1.8px; }
  .logo-mark{ width:36px; height:36px; font-size:.95rem; }
}

/* Extra tiny phones */
@media(max-width:380px){
  .logo-tag { display:none; }
  .logo-name{ font-size:.85rem; }
}

/* Dark overlay behind nav — pure CSS, no JS */
/* Rendered using a pseudo-element on body when nav is open */
.nav-check:checked ~ .nav-toggle::before{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:9998;
  cursor:pointer;
}

/* Overlay hack — separate div approach for better browser support */
.nav-overlay{ display:none; }
.nav-overlay.show{ display:none; }

/* ── HERO ───────────────────────────────── */
.hero{position:relative;overflow:hidden;height:calc(100svh - var(--nh));min-height:460px;max-height:820px}
@media(min-width:640px){.hero{min-height:520px}}
.hero-swiper,.swiper-wrapper,.swiper-slide{width:100%;height:100%}
.slide-inner{position:relative;display:flex;align-items:center;height:100%;overflow:hidden}
.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 8s ease}
.slide-bg.default-1{background:linear-gradient(145deg,#0c1f5a 0%,#1a56db 52%,#0891b2 100%)}
.slide-bg.default-2{background:linear-gradient(145deg,#071330 0%,#1e40af 55%,#1a56db 100%)}
.slide-bg.default-3{background:linear-gradient(145deg,#093344 0%,#0e7490 52%,#06b6d4 100%)}
.swiper-slide-active .slide-bg{transform:scale(1.05)}
.slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(8,16,48,.72) 0%,rgba(8,16,48,.3) 55%,transparent 100%);
}
.slide-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;width:2px;height:2px;background:rgba(255,255,255,.55);border-radius:50%;animation:floatParticle linear infinite;opacity:0}
@keyframes floatParticle{
  0%{transform:translateY(100vh);opacity:0}8%{opacity:.7}88%{opacity:.15}100%{transform:translateY(-60px) translateX(20px);opacity:0}
}
.slide-content{
  position:relative;z-index:2;padding:0 24px;max-width:800px;width:100%;
  margin-left:max(5vw,20px);
}
@media(min-width:640px){.slide-content{padding:0 32px}}
@media(min-width:1024px){.slide-content{margin-left:max(8vw,60px)}}
.slide-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.9);padding:6px 16px;border-radius:50px;
  font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;
  margin-bottom:20px;backdrop-filter:blur(10px);
}
.slide-title{
  font-family:var(--fh);font-weight:800;color:#fff;
  font-size:clamp(1.75rem,5.5vw,3.75rem);
  line-height:1.1;margin-bottom:18px;letter-spacing:-.02em;
}
.slide-title .text-a,.slide-title .typed-line{color:#7dd3fc}
.slide-text{font-size:clamp(.88rem,2vw,1.08rem);color:rgba(255,255,255,.84);max-width:480px;margin-bottom:34px;line-height:1.78}
.slide-btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:420px){
  .slide-badge{display:none}
  .slide-btns{flex-direction:column;align-items:flex-start}
  .slide-btns .btn{width:100%;max-width:240px;justify-content:center}
}
.swiper-button-prev,.swiper-button-next{
  width:44px!important;height:44px!important;border-radius:50%!important;
  background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.3)!important;
  color:#fff!important;backdrop-filter:blur(8px)!important;display:none!important;
}
@media(min-width:768px){.swiper-button-prev,.swiper-button-next{display:flex!important}}
.swiper-button-prev::after,.swiper-button-next::after{font-size:13px!important;font-weight:900!important}
.swiper-button-prev:hover,.swiper-button-next:hover{background:rgba(255,255,255,.28)!important}
.swiper-pagination-bullet{background:rgba(255,255,255,.45)!important;opacity:1!important}
.swiper-pagination-bullet-active{background:#fff!important;width:20px!important;border-radius:4px!important}
.hero-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;animation:hsBounce 2.4s ease-in-out infinite}
.hero-scroll a{width:36px;height:36px;border:2px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.78rem}
@keyframes hsBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-9px)}}

/* ── STATS BAR ──────────────────────────── */
.stats-bar{background:var(--g-brand);padding:26px 0;position:relative;overflow:hidden}
.stats-bar::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='1' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E");pointer-events:none}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;position:relative}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px){.stats-bar{padding:32px 0}}
.stat-item{text-align:center;padding:14px 8px}
@media(min-width:640px){
  .stat-item{padding:18px 14px}
  .stat-item+.stat-item{border-left:1px solid rgba(255,255,255,.18)}
}
.stat-num{font-family:var(--fh);font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:900;color:#fff;display:block;line-height:1;margin-bottom:5px}
.stat-label{font-size:.74rem;color:rgba(255,255,255,.78);letter-spacing:.4px}

/* ── CARDS ──────────────────────────────── */
.card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;transition:var(--tr);box-shadow:var(--s0)}
.card:hover{transform:translateY(-5px);border-color:rgba(26,86,219,.2);box-shadow:var(--s2)}
.cards-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:480px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.cards-grid{grid-template-columns:repeat(3,1fr)}}

/* Service card */
.service-card .card-icon{width:48px;height:48px;border-radius:12px;background:var(--g-brand);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;margin-bottom:14px;transition:var(--tr)}
.service-card:hover .card-icon{transform:scale(1.1) rotate(-6deg)}
.service-card .card-body{padding:26px}
.service-card h3{font-family:var(--fh);font-size:1rem;font-weight:700;color:var(--txt);margin-bottom:9px}
.service-card p{font-size:.875rem;color:var(--muted);line-height:1.65}
.service-card .card-price{display:inline-block;margin-top:14px;background:var(--ps);border:1px solid rgba(26,86,219,.18);color:var(--p);padding:4px 13px;border-radius:20px;font-size:.78rem;font-weight:700}
.service-card .card-img{height:175px;overflow:hidden}
.service-card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.service-card:hover .card-img img{transform:scale(1.07)}

/* News card */
.news-card .card-img{height:185px;overflow:hidden}
.news-card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.news-card:hover .card-img img{transform:scale(1.06)}
.news-card .card-body{padding:22px}
.news-card .card-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.72rem;color:var(--muted);margin-bottom:10px}
.news-card .card-meta span{display:flex;align-items:center;gap:4px}
.news-card h3{font-family:var(--fh);font-size:.95rem;font-weight:700;color:var(--txt);margin-bottom:8px;line-height:1.42}
.news-card p{font-size:.85rem;color:var(--muted);line-height:1.62}
.news-card .read-more{color:var(--p);font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:5px;margin-top:12px}
.news-card .read-more:hover{gap:10px}

/* Offer card */
.offer-card{position:relative}
.offer-badge{position:absolute;top:14px;right:0;background:var(--red);color:#fff;padding:4px 14px 4px 10px;font-size:.74rem;font-weight:700;border-radius:20px 0 0 20px;z-index:2}
.offer-card .card-img{height:195px;overflow:hidden;background:var(--bg2);display:flex;align-items:center;justify-content:center}
.offer-card .card-img img{width:100%;height:100%;object-fit:cover}
.offer-card .card-body{padding:20px}
.offer-card h3{font-family:var(--fh);font-size:.96rem;color:var(--txt);margin-bottom:7px;font-weight:700}
.offer-card p{font-size:.85rem;color:var(--muted)}
.offer-validity{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:9px}
.offer-validity i{color:var(--p)}

/* Team card */
.team-card{text-align:center;padding-bottom:24px}
.team-photo{width:92px;height:92px;border-radius:50%;overflow:hidden;margin:26px auto 15px;border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--g-brand) border-box}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-photo-placeholder{width:100%;height:100%;background:var(--g-brand);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fh);font-size:1.9rem;font-weight:800}
.team-card h3{font-family:var(--fh);font-size:.95rem;color:var(--txt);font-weight:700}
.team-card .designation{font-size:.78rem;color:var(--p);margin:4px 0 14px;font-weight:500}
.team-social{display:flex;justify-content:center;gap:7px}
.team-social a{width:30px;height:30px;border-radius:7px;background:var(--bg2);border:1px solid var(--bdr);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:.74rem}
.team-social a:hover{background:var(--p);color:#fff;border-color:var(--p)}

/* ── ABOUT ──────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:900px){.about-grid{grid-template-columns:1fr 1fr;gap:64px}}
.about-img-wrap{position:relative}
.about-img-wrap > img{border-radius:var(--rxl);box-shadow:var(--s3);width:100%;aspect-ratio:4/3;object-fit:cover}
.about-badge{
  position:absolute;bottom:-16px;right:-10px;
  background:var(--g-brand);color:#fff;padding:15px 18px;border-radius:var(--rl);
  text-align:center;font-family:var(--fh);box-shadow:0 8px 28px rgba(26,86,219,.4);
}
@media(min-width:480px){.about-badge{right:-16px}}
.about-badge strong{font-size:1.9rem;display:block;line-height:1;font-weight:900}
.about-badge span{font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;opacity:.9}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media(max-width:420px){.about-features{grid-template-columns:1fr}}
.about-feature{display:flex;gap:12px;align-items:flex-start}
.about-feature .feat-icon{width:36px;height:36px;min-width:36px;border-radius:9px;background:var(--ps);border:1px solid rgba(26,86,219,.14);display:flex;align-items:center;justify-content:center;color:var(--p);font-size:.88rem;flex-shrink:0}
.about-feature h4{font-size:.87rem;font-weight:700;color:var(--txt);margin-bottom:3px}
.about-feature p{font-size:.78rem;color:var(--muted);line-height:1.5}

/* ── CONTACT ────────────────────────────── */
.contact-wrap{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
@media(min-width:900px){.contact-wrap{grid-template-columns:1fr 1.55fr;gap:54px}}
.contact-info h2{font-family:var(--fh);font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--txt);margin-bottom:14px}
.contact-detail{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.contact-detail .det-icon{width:44px;height:44px;min-width:44px;border-radius:11px;background:var(--ps);border:1px solid rgba(26,86,219,.14);display:flex;align-items:center;justify-content:center;color:var(--p);font-size:1rem;flex-shrink:0}
.contact-detail .det-text strong{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:3px}
.contact-detail .det-text a,.contact-detail .det-text span{font-size:.92rem;color:var(--txt);font-weight:600}
.contact-detail .det-text a:hover{color:var(--p)}

/* ── FORMS ──────────────────────────────── */
.form-card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--rl);padding:32px;box-shadow:var(--s1)}
@media(max-width:480px){.form-card{padding:22px 18px;border-radius:var(--r)}}
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:.77rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--txt);margin-bottom:7px}
.req{color:var(--red);margin-left:2px}
.form-control{
  width:100%;padding:12px 14px;background:var(--white);border:1.5px solid var(--bdr);
  border-radius:9px;color:var(--txt);font-family:var(--fb);font-size:.9rem;transition:var(--tr);outline:none;
}
.form-control:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.form-control::placeholder{color:#aec0da}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
textarea.form-control{resize:vertical;min-height:115px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
.form-full{grid-column:1/-1}
.form-hint{font-size:.74rem;color:var(--muted);margin-top:5px}

/* ── PAGE BANNER ────────────────────────── */
.page-banner{background:var(--g-hero);padding:52px 0 44px;position:relative;overflow:hidden}
.page-banner::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='1.5' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");pointer-events:none}
.page-banner .container{position:relative;z-index:1;text-align:center}
.page-banner h1{font-family:var(--fh);font-weight:800;color:#fff;font-size:clamp(1.5rem,4vw,2.6rem);letter-spacing:-.02em;margin-bottom:12px}
.breadcrumb{display:flex;justify-content:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.7);flex-wrap:wrap}
.breadcrumb a{color:rgba(255,255,255,.85)}
.breadcrumb a:hover{color:#fff}
.breadcrumb-sep{opacity:.45}

/* ── BADGES & ALERTS ────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.71rem;font-weight:700}
.badge-green{background:rgba(16,185,129,.1);color:#065f46;border:1px solid rgba(16,185,129,.22)}
.badge-red  {background:rgba(239,68,68,.1); color:#991b1b;border:1px solid rgba(239,68,68,.22)}
.badge-gold {background:rgba(245,158,11,.1);color:#92400e;border:1px solid rgba(245,158,11,.22)}
.badge-blue {background:var(--ps);color:var(--p);border:1px solid rgba(26,86,219,.2)}
.badge-gray {background:rgba(100,116,139,.1);color:#475569;border:1px solid rgba(100,116,139,.2)}
.alert{padding:13px 17px;border-radius:10px;margin-bottom:18px;font-size:.875rem;display:flex;align-items:flex-start;gap:10px;line-height:1.55}
.alert i{margin-top:1px;flex-shrink:0}
.alert-success{background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.28);color:#065f46}
.alert-error  {background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.28); color:#991b1b}
.alert-info   {background:rgba(26,86,219,.08); border:1px solid rgba(26,86,219,.28); color:var(--p)}
.alert-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);color:#92400e}

/* ── FOOTER ─────────────────────────────── */
.main-footer{background:#0f172a}
.footer-top{padding:60px 0 40px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:560px) {.footer-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:48px}}
.footer-brand .footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-logo .f-logo-icon{width:37px;height:37px;border-radius:9px;background:var(--g-brand);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0}
.footer-logo .f-logo-name{font-family:var(--fh);font-size:1.08rem;font-weight:800;color:#fff}
.footer-brand p{font-size:.84rem;color:rgba(255,255,255,.52);line-height:1.7;margin-bottom:18px}
.footer-social{display:flex;gap:7px;flex-wrap:wrap}
.footer-social a{width:33px;height:33px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.58);display:flex;align-items:center;justify-content:center;font-size:.74rem}
.footer-social a:hover{background:var(--p);color:#fff;border-color:var(--p)}
.footer-heading{font-family:var(--fh);font-size:.76rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:17px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.footer-heading::after{content:'';position:absolute;bottom:-1px;left:0;width:24px;height:2px;background:var(--a)}
.footer-links li{margin-bottom:9px}
.footer-links a{font-size:.84rem;color:rgba(255,255,255,.52);display:flex;align-items:center;gap:7px;transition:var(--tr)}
.footer-links a i{font-size:.6rem;color:var(--a)}
.footer-links a:hover{color:var(--a);padding-left:5px}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.83rem;color:rgba(255,255,255,.6)}
.footer-contact li i{color:var(--a);margin-top:2px;min-width:14px}
.footer-contact a{color:rgba(255,255,255,.6)}
.footer-contact a:hover{color:var(--a)}
.footer-news li{border-bottom:1px solid rgba(255,255,255,.06);padding:8px 0}
.footer-news a{font-size:.82rem;color:rgba(255,255,255,.58);line-height:1.42;display:block}
.footer-news a:hover{color:var(--a)}
.footer-news small{font-size:.7rem;color:var(--a);display:block;margin-top:3px}
.footer-bottom{background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.06);padding:15px 0}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:.78rem;color:rgba(255,255,255,.45)}
.footer-bottom a{color:rgba(255,255,255,.45)}
.footer-bottom a:hover{color:var(--a)}
@media(max-width:560px){.footer-bottom-inner{flex-direction:column;text-align:center}}

/* ── FLOAT WIDGETS ──────────────────────── */
.float-wa{position:fixed;bottom:84px;right:18px;z-index:990;width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.45rem;box-shadow:0 6px 22px rgba(37,211,102,.45);animation:waPulse 2.5s ease-in-out infinite}
.float-wa:hover{transform:scale(1.1);color:#fff}
@keyframes waPulse{0%,100%{box-shadow:0 6px 22px rgba(37,211,102,.4)}50%{box-shadow:0 6px 36px rgba(37,211,102,.68)}}
.float-call{position:fixed;bottom:150px;right:18px;z-index:990;width:46px;height:46px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 6px 20px rgba(26,86,219,.4)}
.float-call:hover{transform:scale(1.1);color:#fff}
.back-top{position:fixed;bottom:22px;right:18px;z-index:990;width:40px;height:40px;border-radius:9px;background:var(--p);border:none;color:#fff;display:none;align-items:center;justify-content:center;font-size:.84rem;cursor:pointer;box-shadow:var(--s1)}
.back-top.show{display:flex}
.back-top:hover{background:var(--p-d);transform:translateY(-2px)}
@media(max-width:380px){
  .float-wa,.float-call,.back-top{right:12px}
  .float-wa{width:46px;height:46px;bottom:78px;font-size:1.3rem}
  .float-call{width:40px;height:40px;bottom:136px}
  .back-top{width:36px;height:36px}
}

/* ── CHATBOT ────────────────────────────── */
.chatbot{position:fixed;bottom:22px;left:18px;z-index:1000}
.cb-toggle{width:52px;height:52px;border-radius:50%;background:var(--g-brand);color:#fff;border:none;cursor:pointer;font-size:1.3rem;position:relative;box-shadow:0 6px 24px rgba(26,86,219,.42);transition:var(--tr)}
.cb-toggle:hover{transform:scale(1.08)}
.cb-dot{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--red);border-radius:50%;border:2px solid #fff;font-size:.56rem;color:#fff;display:flex;align-items:center;justify-content:center}
.cb-box{position:absolute;bottom:64px;left:0;width:min(300px,calc(100vw - 40px));background:#fff;border:1px solid var(--bdr);border-radius:var(--rl);box-shadow:var(--s3);overflow:hidden;display:none}
.cb-box.open{display:block;animation:cbUp .28s ease}
@keyframes cbUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.cb-head{background:var(--g-brand);color:#fff;padding:13px 15px;display:flex;align-items:center;gap:11px}
.cb-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.92rem}
.cb-head-info strong{font-size:.84rem;display:block}
.cb-status{font-size:.68rem;opacity:.85;display:flex;align-items:center;gap:4px}
.cb-status::before{content:'';width:6px;height:6px;background:#4ade80;border-radius:50%}
.cb-close{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;opacity:.75;font-size:.82rem}
.cb-body{padding:12px;max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.cb-msg{padding:9px 12px;border-radius:10px;font-size:.82rem;max-width:88%;line-height:1.5}
.cb-msg.bot{background:var(--bg2);border:1px solid var(--bdr);border-radius:0 10px 10px 10px;color:var(--txt)}
.cb-msg.user{background:var(--g-brand);color:#fff;border-radius:10px 0 10px 10px;align-self:flex-end}
.cb-quick{display:flex;flex-wrap:wrap;gap:5px;padding:2px 0}
.cb-quick button{font-size:.7rem;padding:4px 10px;border-radius:14px;background:transparent;border:1px solid var(--p);color:var(--p);cursor:pointer;font-family:var(--fb);transition:var(--tr)}
.cb-quick button:hover{background:var(--p);color:#fff}
.cb-foot{padding:9px;border-top:1px solid var(--bdr);display:flex;gap:7px}
.cb-foot input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--bdr);border-radius:20px;padding:7px 12px;color:var(--txt);font-size:.8rem;font-family:var(--fb)}
.cb-foot input:focus{outline:none;border-color:var(--p)}
.cb-foot button{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--p);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.78rem}

/* ── UTILITIES ──────────────────────────── */
.text-center{text-align:center}
.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mt-30{margin-top:30px}
.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}
.d-flex{display:flex}.d-flex-wrap{display:flex;flex-wrap:wrap}
.gap-10{gap:10px}.gap-16{gap:16px}.gap-24{gap:24px}
.hidden{display:none!important}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp  {from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)}}
[data-aos]{transition-property:transform,opacity}