:root {
      --red:       #E8263E;
      --red-dark:  #B81C2F;
      --red-light: #FF4D63;
      --ink:       #0D0D0D;
      --ink-80:    #1A1A1A;
      --ink-60:    #2E2E2E;
      --muted:     #6B7280;
      --soft:      #F5F5F7;
      --white:     #FFFFFF;
      --border:    rgba(0,0,0,.08);
      --radius:    14px;
      --radius-lg: 24px;
      --shadow:    0 4px 32px rgba(0,0,0,.08);
      --shadow-lg: 0 12px 48px rgba(0,0,0,.14);
      --ff-head:   'Inter', sans-serif;
      --ff-body:   'DM Sans', sans-serif;
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--ff-body);
      color: var(--ink);
      background: var(--white);
      overflow-x: hidden;
    }

    h1,h2,h3,h4,h5,h6 { font-family: var(--ff-head); }
/* ── UTILITIES ── */
.sec-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px;
}
.sec-label::before{content:'';width:22px;height:2px;background:var(--red);border-radius:2px;}
.sec-title{
  font-family:var(--ff-head);font-size:clamp(1.65rem,3.2vw,2.4rem);
  font-weight:800;line-height:1.15;color:var(--ink);margin-bottom:14px;
}
.sec-sub{color:var(--muted);font-size:.95rem;line-height:1.85;max-width:480px;}
.btn-red{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;border:none;
  border-radius:12px;padding:13px 28px;
  font-family:var(--ff-head);font-weight:700;font-size:.88rem;
  text-decoration:none;cursor:pointer;
  transition:transform .22s,box-shadow .22s,background .2s;
}
.btn-red:hover{color:#fff;background:var(--red-dark);transform:translateY(-3px);box-shadow:0 12px 28px rgba(232,38,62,.38);}
.btn-red i{animation:bounce-x 1.6s ease-in-out infinite;}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--red);border:2px solid var(--red);
  border-radius:12px;padding:11px 24px;font-family:var(--ff-head);
  font-weight:700;font-size:.88rem;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.btn-outline:hover{background:var(--red);color:#fff;transform:translateY(-2px);}

    /* ─── TOPBAR ─────────────────────────────── */
    .topbar {
      background: var(--ink-80);
      padding: 8px 0;
      font-size: .78rem;
      color: rgba(255,255,255,.75);
    }
    .topbar a { color: rgba(255,255,255,.75); text-decoration: none; transition: color .2s; }
    .topbar a:hover { color: var(--red-light); }
    .topbar .sep { margin: 0 10px; opacity:.3; }
    .topbar-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 6px;
      background: rgba(255,255,255,.08); transition: background .2s;
    }
    .topbar-social a:hover { background: var(--red); }

    /* ─── NAVBAR ─────────────────────────────── */
     /* Navbar Default */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 14px 0;
    background: transparent;
    transition: all 0.4s ease;
    z-index: 9999;
}

/* Scroll Effect */
.navbar.scrolled {
    background: rgb(15 23 42 / 69%); /* Light dark color */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Logo */
.navbar-brand img {
    height: 60px;
    transition: all 0.4s ease;
}

.navbar.scrolled .navbar-brand img {
    height: 50px;
}

/* Nav Links */
.navbar .nav-link { 
    font-weight: 500;
    transition: 0.3s;
    color:#fff;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #ff4d4d;
}

  .navbar .btn-red {
      background: var(--red); color: #fff;
      font-family: var(--ff-head); font-weight: 700;
      font-size: .84rem; padding: 10px 22px; border-radius: 10px;
      border: none; text-decoration: none; transition: background .2s, transform .15s;
    }
    
    .navbar-toggler-icon { 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
    
/* Mobile Menu */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgb(255 255 255);
        padding: 14px 21px;
        margin-top: 10px;
        border-radius: 10px;
        max-width: 99%;
    }

    .navbar .nav-link {
        padding: 10px 0;
        color:#000000;
    }

    .btn-red {
        display: inline-block;
        margin-top: 10px;
    }
}
  
    /*================= /navbar =================*/
    /* Dropdown */
    .dropdown-menu {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      padding: 8px;
      min-width: 230px;
    }
    .dropdown-item {
      font-size: .84rem;
      padding: 8px 14px;
      border-radius: 8px;
      color: var(--ink-60);
      transition: background .2s, color .2s;
    }
    .dropdown-item:hover { background: rgba(232,38,62,.08); color: var(--red); }
    .dropdown-divider { margin: 6px 0; }

    /* Mega dropdown */
    .mega-menu {
      width: 760px !important;
      display: none;
      padding: 24px;
    }
    .mega-menu.show { display: flex; }
    .mega-menu-col h6 {
      font-family: var(--ff-head);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 10px;
    }
    .mega-menu .dropdown-item { font-size: .82rem; }
 .services-sub {
          left:50%;
          transform:translateX(-50%)
        }
    /* ─── HERO ───────────────────────────────── */
    .hero {
      background: var(--ink);
      min-height: 90vh;
      display: flex; align-items: center;
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 60% at 80% 30%, rgba(232,38,62,.25) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 10% 80%, rgba(232,38,62,.12) 0%, transparent 60%);
    }
    .hero-grid {
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 60px 60px;
    }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(232,38,62,.15); border: 1px solid rgba(232,38,62,.3);
      color: var(--red-light); padding: 6px 14px; border-radius: 100px;
      font-size: .8rem; font-weight: 600; letter-spacing: .04em;
      text-transform: uppercase; margin-bottom: 24px;
    }
    .hero h1 {
      font-size: clamp(2.4rem, 5vw, 4rem);
      font-weight: 800;
      color: var(--white);
      line-height: 1.12;
      margin-bottom: 20px;
    }
    .hero h1 span { color: var(--red-light); }
    .hero p {
      font-size: 1.1rem; color: rgba(255,255,255,.65);
      max-width: 540px; line-height: 1.7; margin-bottom: 36px;
    }
    .btn-primary-red {
      background: var(--red); color: #fff; font-family: var(--ff-head);
      font-weight: 700; padding: 14px 30px; border-radius: 12px;
      border: none; text-decoration: none; font-size: .95rem;
      display: inline-flex; align-items: center; gap: 8px;
      transition: background .2s, transform .2s, box-shadow .2s;
    }
    .btn-primary-red:hover {
      background: var(--red-dark); color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(232,38,62,.4);
    }
    .btn-outline-white {
      background: transparent; color: #fff;
      border: 2px solid rgba(255,255,255,.3); font-family: var(--ff-head);
      font-weight: 600; padding: 13px 28px; border-radius: 12px;
      text-decoration: none; font-size: .95rem;
      display: inline-flex; align-items: center; gap: 8px;
      transition: border-color .2s, background .2s;
    }
    .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

    .hero-stat-row {
      display: flex; gap: 32px; flex-wrap: wrap; margin-top: 48px;
    }
    .hero-stat h3 {
      font-size: 2rem; font-weight: 800; color: var(--white);
    }
    .hero-stat h3 span { color: var(--red-light); }
    .hero-stat p { font-size: .8rem; color: rgba(255,255,255,.5); margin: 0; }

    .hero-visual {
      position: relative;
    }
    .hero-card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(20px);
      border-radius: var(--radius-lg);
      padding: 28px;
    }
    .hero-card-sm {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(12px);
      border-radius: var(--radius);
      padding: 16px 20px;
    }
    .pulse-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: #22C55E; display: inline-block;
      box-shadow: 0 0 0 3px rgba(34,197,94,.25);
      animation: pulse 2s infinite;
    }
    @keyframes pulse { 0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.25)} 50%{box-shadow:0 0 0 8px rgba(34,197,94,.1)} }

    /* ─── SECTION LABELS ─────────────────────── */
    .section-label {
      font-size: .75rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--red);
      display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    }
    .section-label::before {
      content: ''; width: 28px; height: 2px; background: var(--red);
    }
    .section-title {
      font-size: clamp(1.8rem, 3vw, 3rem);
      font-weight: 800; color: var(--ink); line-height: 1.2;
      margin-bottom: 16px;
    }
    .section-sub {
      color: var(--muted); font-size: 1rem; line-height: 1.7;
      max-width: 640px;
    }
/* ── SCROLL REVEAL ── */
[data-reveal]{
  opacity:0;
  transition:opacity .65s cubic-bezier(.22,.68,0,1.1),transform .65s cubic-bezier(.22,.68,0,1.1);
  will-change:transform,opacity;
}
[data-reveal="up"]   {transform:translateY(48px);}
[data-reveal="down"] {transform:translateY(-36px);}
[data-reveal="left"] {transform:translateX(56px);}
[data-reveal="right"]{transform:translateX(-56px);}
[data-reveal="zoom"] {transform:scale(.88);}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-delay="1"]{transition-delay:.1s;}
[data-delay="2"]{transition-delay:.2s;}
[data-delay="3"]{transition-delay:.3s;}
[data-delay="4"]{transition-delay:.4s;}
[data-delay="5"]{transition-delay:.5s;}
[data-delay="6"]{transition-delay:.6s;}

/* ── CONTINUOUS FLOATING ── */
@keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
@keyframes float-x{0%,100%{transform:translateX(0);}50%{transform:translateX(10px);}}
@keyframes spin-slow{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.6;}100%{transform:scale(1.55);opacity:0;}}
@keyframes bounce-x{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes count-glow{0%,100%{text-shadow:0 0 0 transparent;}50%{text-shadow:0 0 32px rgba(232,38,62,.3);}}

 
/* ================ about section ===================== */
.about-st-img-card{
  border-radius:20px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  animation:float-y 5s ease-in-out infinite;
}
.about-st-img-card img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;}
.about-st-badge{
  position:absolute;bottom:-18px;left:-18px;
  background:var(--red);color:#fff;padding:18px 22px;
  border-radius:16px;box-shadow:0 16px 40px rgba(232,38,62,.45);
  animation:float-y 4s ease-in-out infinite reverse;
  z-index:2;
}
.about-st-badge strong{font-family:var(--ff-head);font-size:2rem;font-weight:800;display:block;line-height:1;}
.about-st-badge span{font-size:.72rem;opacity:.85;}
.about-st-badge2{
  position:absolute;top:-16px;right:-12px;
  background:#fff;color:var(--ink);padding:12px 18px;
  border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.2);
  display:flex;align-items:center;gap:10px;
  animation:float-x 3.5s ease-in-out infinite;z-index:2;
}
.about-st-badge2 .icon{
  width:38px;height:38px;background:rgba(232,38,62,.1);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--red);font-size:1.1rem;flex-shrink:0;
}
.about-st-badge2 strong{font-family:var(--ff-head);font-size:.85rem;font-weight:700;display:block;color:var(--ink);}
.about-st-badge2 span{font-size:.72rem;color:var(--muted);}
.scroll-cue{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.3);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
}
.scroll-cue i{font-size:1.1rem;animation:float-y 1.2s ease-in-out infinite;}
/* ================ /about section ===================== */

/* ── RESPONSIVE ── */
@media(max-width:991.98px){
  .about-st{padding:80px 0 80px;}
 
}
@media(max-width:767.98px){
  .about-st h1{font-size:2rem;}
  .about-st-badge,.about-st-badge2{display:none;}

}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  [data-reveal]{opacity:1!important;transform:none!important;}
}
    /* ─── ABOUT ──────────────────────────────── */
    .about-section { padding: 96px 0; background: var(--white); }
    .about-img-wrap { position: relative; }
    .about-img-wrap img {
      width: 100%; border-radius: var(--radius-lg);
      object-fit: cover; aspect-ratio: 1/1;
    }
    .about-badge {
      position: absolute; bottom: -18px; right: -18px;
      background: var(--red); color: #fff;
      padding: 20px 24px; border-radius: var(--radius);
      text-align: center; box-shadow: var(--shadow-lg);
    }
    .about-badge strong { font-family: var(--ff-head); font-size: 2rem; font-weight: 800; display: block; }
    .about-badge span { font-size: .78rem; opacity: .85; }
    .check-list { list-style: none; padding: 0; }
    .check-list li {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 8px 0; font-size: .95rem; color: var(--ink-60);
    }
    .check-list li i { color: var(--red); margin-top: 3px; flex-shrink: 0; }

    /* ─── SERVICES ───────────────────────────── */
    .services-section { padding: 96px 0; background: var(--soft); }
    .service-tabs .nav-pills { gap: 8px; flex-wrap: wrap; }
    .service-tabs .nav-link {
      font-family: var(--ff-head); font-size: .85rem; font-weight: 600;
      color: var(--ink-60); background: var(--white);
      border: 1px solid var(--border); border-radius: 10px;
      padding: 10px 20px; transition: all .2s;
    }
    .service-tabs .nav-link.active,
    .service-tabs .nav-link:hover {
      background: var(--red); color: #fff; border-color: var(--red);
    }
    .service-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 22px;
      transition: box-shadow .2s, transform .2s, border-color .2s;
      height: 100%; text-decoration: none; display: block; color: var(--ink);
    }
    .service-card:hover {
      box-shadow: 0 8px 32px rgba(0,0,0,.1);
      transform: translateY(-4px); border-color: rgba(232,38,62,.3);
    }
    .service-card .icon {
      width: 48px; height: 48px; border-radius: 12px;
      background: rgba(232,38,62,.08); display: flex; align-items: center;
      justify-content: center; margin-bottom: 14px; color: var(--red); font-size: 1.3rem;
    }
    .service-card h5 { font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
    .service-card p { font-size: .82rem; color: var(--muted); margin: 0; }

    /* ══════════════════════════════════════════
       STATS SECTION
    ══════════════════════════════════════════ */
    .stats-section {
      padding: 90px 0; background: #0D0D0D;
      position: relative; overflow: hidden;
    }
    .stats-inner {
      background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      padding: 60px 48px; position: relative; overflow: hidden;
    }
    .stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(232, 38, 62, .15) 0%, transparent 70%);
}
    .stat-item { text-align: center; padding: 12px; }
    .stat-number {
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      font-weight: 800; line-height: 1; font-family: var(--ff-head);
      background: var(--grad-tri); -webkit-background-clip: text;
      background-clip: text;
       /* -webkit-text-fill-color: transparent; */
    }
    .stat-label { font-size: .88rem; color: var(--muted); font-weight: 500; margin-top: 8px; }
    .stat-divider-v { width: 1px; background: var(--border); align-self: stretch; margin: 12px 0; }


  /*  ── WHY US ── */
.whyus-section{padding:100px 0;background:var(--white);overflow:hidden;}
.why-img-stack{position:relative;height:480px;}
.why-img-big{
  position:absolute;top:0;left:0;width:78%;border-radius:18px;overflow:hidden;
  box-shadow:0 20px 52px rgba(0,0,0,.13);
}
.why-img-big img{width:100%;height:300px;object-fit:cover;display:block;}
.why-img-sm{
  position:absolute;bottom:0;right:0;width:52%;border-radius:16px;overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.15);
  animation:float-y 4.5s ease-in-out infinite;
}
.why-img-sm img{width:100%;height:200px;object-fit:cover;display:block;}
.why-exp-badge{
  position:absolute;top:260px;left:-16px;
  background:var(--red);color:#fff;padding:16px 18px;
  border-radius:14px;box-shadow:0 12px 30px rgba(232,38,62,.4);
  text-align:center;animation:float-y 3.8s ease-in-out infinite reverse;z-index:3;
}
.why-exp-badge strong{font-family:var(--ff-head);font-size:1.8rem;font-weight:800;display:block;line-height:1;}
.why-exp-badge span{font-size:.68rem;opacity:.88;}
.why-ring{
  position:absolute;top:30px;right:-18px;width:60px;height:60px;
  border:3px solid var(--red);border-radius:50%;opacity:.15;
  animation:spin-slow 8s linear infinite;z-index:0;
}
.feat-item{
  display:flex;align-items:flex-start;gap:15px;padding:16px 0;
  border-bottom:1px solid var(--border);
}
.feat-item:last-child{border-bottom:none;}
.feat-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:rgba(232,38,62,.07);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  transition:background .2s,color .2s,transform .3s; line-height: 1 !important;
}
.feat-item:hover .feat-icon{background:var(--red);color:#fff;transform:scale(1.12);}
.feat-item h6{font-size:.93rem;font-weight:700;margin-bottom:3px;}
.feat-item p{font-size:.82rem;color:var(--muted);margin:0;}

    /* ─── PORTFOLIO ──────────────────────────── */
    .portfolio-section { padding: 96px 0; background: var(--soft); }
    .portfolio-card {
      background: var(--white); border-radius: var(--radius-lg);
      overflow: hidden; box-shadow: var(--shadow);
      transition: transform .3s, box-shadow .3s;
    }
    .portfolio-card:hover {
      transform: translateY(-6px); box-shadow: var(--shadow-lg);
    }
    .portfolio-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
    .portfolio-card-body { padding: 18px 20px; }
    .portfolio-card-body h6 { font-size: .95rem; font-weight: 700; margin: 0; }
    .portfolio-card-body a {
      font-size: .8rem; color: var(--red); text-decoration: none;
      font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
    }

    /* ─── TESTIMONIALS ───────────────────────── */
    .testimonials-section {
      padding: 96px 0; background: var(--ink); position: relative; overflow: hidden;
    }
    .testimonials-section::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent);
    }
    .testi-card {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: var(--radius-lg); padding: 32px;
      transition: background .2s, border-color .2s; height: 100%;
    }
    .testi-card:hover { background: rgba(255,255,255,.08); border-color: rgba(232,38,62,.3); }
    .quote-icon { color: var(--red); font-size: 2rem; margin-bottom: 16px; opacity: .7; }
    .testi-card p {
      color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.75;
      margin-bottom: 24px;
    }
    .testi-author { display: flex; align-items: center; gap: 14px; }
    .testi-author img {
      width: 48px; height: 48px; border-radius: 50%;
      object-fit: cover; border: 2px solid rgba(232,38,62,.4);
    }
    .testi-author h6 { font-size: .9rem; font-weight: 700; color: #fff; margin: 0; }
    .testi-author span { font-size: .78rem; color: rgba(255,255,255,.45); }
    .stars { color: #FBBF24; font-size: .85rem; letter-spacing: 1px; margin-bottom: 12px; }

    /* ─── BLOGS ──────────────────────────────── */
    .blogs-section { padding: 96px 0; background: var(--white); }
    .blog-card {
      border-radius: var(--radius-lg); overflow: hidden;
      background: var(--white); border: 1px solid var(--border);
      transition: transform .25s, box-shadow .25s; height: 100%;
    }
    .blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
    .blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
    .blog-body { padding: 22px; }
    .blog-tag {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--red);
      background: rgba(232,38,62,.08); padding: 4px 10px;
      border-radius: 6px; display: inline-block; margin-bottom: 10px;
    }
    .blog-body h5 {
      font-size: 1rem; font-weight: 700; line-height: 1.45;
      margin-bottom: 12px; color: var(--ink);
    }
    .blog-body a {
      font-size: .82rem; font-weight: 600; color: var(--red);
      text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
    }
    .blog-body a i { transition: transform .2s; }
    .blog-card:hover .blog-body a i { transform: translateX(4px); }

    /* ─── CLIENTS ────────────────────────────── */
    .clients-section { padding: 72px 0; background: var(--soft); }
    .clients-track-wrapper { overflow: hidden; }
    .clients-track {
      display: flex; gap: 32px; align-items: center;
      animation: scroll-left 22s linear infinite;
      width: max-content;
    }
    .clients-track:hover { animation-play-state: paused; }
    @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .client-logo {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 16px 28px;
      display: flex; align-items: center; justify-content: center;
      min-width: 160px; transition: box-shadow .2s;
    }
    .client-logo:hover { box-shadow: var(--shadow); }
    .client-logo img { height: 80px; max-width: 120px; object-fit: contain;  transition: filter .2s; }
    .client-logo:hover img { filter: grayscale(0) opacity(1); }

    /* ─── CTA BAND ───────────────────────────── */
    .cta-band {
      background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 60%, var(--red-light) 100%);
      padding: 72px 0; position: relative; overflow: hidden;
    }
    .cta-band::before {
      content: '';
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .cta-band h2 {
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 800; color: #fff;
    }
    .cta-band p { color: rgba(255,255,255,.8); font-size: 1.05rem; margin-bottom: 0; }
    .btn-white {
      background: #fff; color: var(--red); font-family: var(--ff-head);
      font-weight: 700; padding: 14px 30px; border-radius: 12px;
      text-decoration: none; font-size: .95rem;
      display: inline-flex; align-items: center; gap: 8px;
      transition: transform .2s, box-shadow .2s;
    }
    .btn-white:hover {
      color: var(--red-dark); transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0,0,0,.2);
    }

    /* ─── FOOTER ─────────────────────────────── */
    footer {
      background: var(--ink);
      color: rgba(255,255,255,.65);
      padding: 72px 0 0;
    }
    footer h5 {
      font-family: var(--ff-head); font-size: .85rem; font-weight: 500;
      letter-spacing: .08em; text-transform: uppercase;
      color: rgba(255,255,255,.4); margin-bottom: 18px;
      color:#ffa500cc;
    }
    footer a {
      color: rgb(255 252 252 / 80%); text-decoration: none; font-size: .87rem;
      display: block; padding: 4px 0; transition: color .2s;
    }
    footer a:hover { color: #ffa500cc; }
    .footer-logo img { height: 44px; margin-bottom: 16px; }
    .footer-desc { font-size: .88rem; line-height: 1.75; max-width: 280px; }
    .footer-social { display: flex; gap: 8px; margin-top: 20px; }
    .footer-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 10px;
      background: rgba(255,255,255,.06); font-size: .95rem; padding: 0;
      transition: background .2s;
    }
    .footer-social a:hover { background: #ffa500cc; color: #fff; }
    .footer-divider {
      border-color: rgba(255,255,255,.08); margin: 40px 0 0;
    }
    .footer-bottom {
      padding: 20px 0;
      font-size: .82rem; color: rgba(255,255,255,.35);
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 10px;
    }

    /* ─── FLOATING WHATSAPP ──────────────────── */
    .whatsapp-float {
      position: fixed; bottom: 28px; right: 28px;
      z-index: 9999;
    }
    .whatsapp-float a {
      width: 56px; height: 56px; 
      border-radius: 50%; display: flex; align-items: center;
      justify-content: center; color: #fff; font-size: 1.6rem;
      box-shadow: 0 4px 20px rgba(37,211,102,.5);
      text-decoration: none; transition: transform .2s;
    }
    .call-icon {
        background-color:#ffa500;
            margin-bottom: 8px;
    }
    .whatapp-icon {
        background: #25D366;
    }
    .whatsapp-float a:hover { transform: scale(1.1); }

    /* ─── SCROLL ANIMATIONS ──────────────────── */
    .fade-up {
      opacity: 0; transform: translateY(24px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    /* ─── RESPONSIVE ─────────────────────────── */
    @media (max-width: 991.98px) {
      .hero { min-height: auto; padding: 80px 0; }
      .hero-visual { margin-top: 48px; }
      .about-badge { bottom: -10px; right: 10px; }
      .mega-menu { width: 100% !important; }
      .stat-divider { display: none; }
    }
    @media (max-width: 767.98px) {
      .topbar .d-flex { gap: 6px !important; font-size: .72rem; }
      .hero h1 { font-size: 2rem; }
      .hero-stat-row { gap: 20px; }
      .about-img-wrap { margin-bottom: 60px; }
      .whyus-img-stack { grid-template-columns: 1fr; }
    }
  

    /* ================== slider main head =====================*/
        /* main heading section & video */
        .hero-video-section {
            position: relative;
            width: 100%;  
            overflow: hidden;
            background: #0a0c14;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            height: 100dvh;  
        }
        
        .local-video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;  
        }

        #local-video-player {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit: cover;
            pointer-events: none;
        }

        .hero-overlay-gradient {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; 
            z-index: 1;
        }

        .vignette-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 150px rgba(0,0,0,0.6);
            pointer-events: none;
            z-index: 2;
        }

        .hero-content {
            position: relative;
            z-index: 20;
            max-width: 1350px;
            margin: 0 auto;
            padding: 2rem 3rem;
            text-align: left;
            width: 100%;
            color: #fff;
            animation: fadeInUp 1s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
            
        }

        .trusted-badge {
            display: inline-flex;
            align-items: center;
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 100px;
            padding: 0.55rem 1.4rem 0.55rem 1.2rem;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
            transition: transform 0.2s ease;
            width: 34%;
        }

        .pulse-dot-new {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #38f8b0;
            border-radius: 50%;
            margin-right: 12px;
            box-shadow: 0 0 0 0 rgba(56, 248, 176, 0.6);
            animation: pulseNeon 2.2s infinite;
        }

        @keyframes pulseNeon {
            0% { box-shadow: 0 0 0 0 rgba(56, 248, 176, 0.6); transform: scale(0.95);}
            70% { box-shadow: 0 0 0 12px rgba(56, 248, 176, 0); transform: scale(1);}
            100% { box-shadow: 0 0 0 0 rgba(56, 248, 176, 0); transform: scale(0.95);}
        }

        .badge-text {
            font-weight: 700;
            letter-spacing: 0.04em;
            font-size: 0.85rem;
            text-transform: uppercase;
            background: linear-gradient(135deg, #fff, #c0e0ff);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .main-heading { 
            font-weight: 800;
            font-size: clamp(3.2rem, 9vw, 3.75rem);
            line-height: 1.15;
            margin-bottom: 1.4rem;
            letter-spacing: -0.02em;
        }

        .main-heading .top-line {
            display: block;
            color: #ffffff;
            text-shadow: 0 4px 20px rgba(0,0,0,0.3); 
            font-weight: 600;
            font-size:60px;
        }

        .main-heading .gradient-line {
            display: block;
            background: linear-gradient(125deg, #FFFFFF, #9df0ff, #7c6eff);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            text-shadow: none;
            position: relative;
        }

       .hero-description {
            font-size: 1.2rem;
            line-height: 1.5;
            max-width: 620px;
            margin: 1.6rem 0 2rem;
            font-weight: 400;
            background: rgb(12 15 28 / 24%);
            backdrop-filter: blur(16px);
            padding: 1rem 1.6rem;
            border-radius: 48px; 
            align-items: center; 
            flex-wrap: wrap; 
        }

        .hero-description i {
            font-size: 1.6rem;
            color: #5effcf;
            filter: drop-shadow(0 0 6px #3effb0);
        }
        .hero-description span {
            color:orange;
        }
        .hero-description span {
            font-weight: 500;
        }

        .cta-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 1rem;
        }

        .btn-primary-glow {
            background: linear-gradient(95deg, #6C5CE7, #4b3ad9);
            border: none;
            padding: 1rem 2.4rem;
            font-weight: 700;
            font-size: 1rem;
            border-radius: 60px;
            transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            color: white;
            box-shadow: 0 12px 24px -10px rgba(108,92,231,0.6);
            letter-spacing: 0.3px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-primary-glow:hover {
            transform: translateY(-4px) scale(1.02);
            background: linear-gradient(95deg, #7f70ff, #5e4bea);
            box-shadow: 0 24px 32px -12px rgba(108,92,231,0.8);
            color: white;
        }

        .btn-outline-premium {
            background: rgb(2 2 2 / 57%);
            backdrop-filter: blur(12px);
            border: 1.5px solid rgba(255,255,255,0.45);
            padding: 1rem 2.2rem;
            font-weight: 600;
            font-size: 1rem;
            border-radius: 60px;
            color: white;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-outline-premium:hover {
            background: rgb(2 2 2 / 57%);
            border-color: white;
            transform: translateY(-3px);
            backdrop-filter: blur(16px);
            color: white;
        }

        .glass-orb {
            position: absolute;
            z-index: 5;
            background: radial-gradient(circle at 30% 30%, rgba(108,92,231,0.3), rgba(56,248,176,0.1));
            border-radius: 50%;
            filter: blur(45px);
            pointer-events: none;
        }

        .orb1 {
            width: 280px;
            height: 280px;
            bottom: -80px;
            left: -60px;
            animation: floatSlow 20s infinite alternate;
        }

        .orb2 {
            width: 350px;
            height: 350px;
            top: -100px;
            right: -80px;
            background: radial-gradient(circle, rgba(124,110,255,0.25), rgba(0,255,200,0.08));
            animation: floatSlow 24s infinite alternate-reverse;
        }

        @keyframes floatSlow {
            0% { transform: translate(0, 0) scale(1); opacity: 0.5;}
            100% { transform: translate(40px, 40px) scale(1.2); opacity: 0.8;}
        }

        /* scroll down mouse */
        .scroll-down-icon {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 25;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .mouse-wheel {
            width: 30px;
            height: 48px;
            border: 2px solid rgba(255,255,255,0.7);
            border-radius: 30px;
            position: relative;
        }
        .mouse-wheel:after {
            content: '';
            width: 4px;
            height: 12px;
            background: #fff;
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
            animation: wheelScroll 1.8s infinite;
        }
        @keyframes wheelScroll {
            0% { opacity: 1; transform: translateX(-50%) translateY(0);}
            80% { opacity: 0.2; transform: translateX(-50%) translateY(14px);}
            100% { opacity: 1; transform: translateX(-50%) translateY(0);}
        }

        .scroll-text {
            font-size: 11px;
            letter-spacing: 2px;
            font-weight: 500;
            color: rgba(255,255,255,0.8);
            text-transform: uppercase;
        }

        /* responsive */
        @media (max-width: 992px) {
            .hero-content {
                padding: 1.5rem 2rem;
                top:50px;
            }
            .hero-description {
                font-size: 1rem;
                padding: 0.8rem 1.4rem;
            }
            .cta-group {
                gap: 1rem;
            }
            .btn-primary-glow, .btn-outline-premium {
                padding: 0.8rem 1.8rem;
                font-size: 0.9rem;
            }
            .main-heading .top-line {
                font-size: 30px;
                line-height: 44px;
            }
        }

        @media (max-width: 576px) {
            .hero-video-section {
                min-height: 650px;
            }
            .hero-content {
                padding: 1rem 1.2rem;
            }
            .trusted-badge {
                margin-bottom: 1.2rem;
                padding: 0.4rem 1.1rem;
            }
            .hero-description {
                width: 100%;
                margin: 1rem 0 1.6rem;
            }
            .cta-group {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
            }
            .btn-primary-glow, .btn-outline-premium {
                justify-content: center;
            }
            .orb1, .orb2 {
                opacity: 0.5;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .highlight-text {
            font-weight: 700;
            background: linear-gradient(145deg, #C8F0FF, #B0A6FF);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .video-fallback-note {
            display: none;
        }
 
       /*======================  contact from  ===============================================  */

        /* ───── CONTACT SECTION ───── */
    .contact-section {
      padding: 96px 0;
      font-family: var(--ff-body);
    }
    .contact-section .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--ff-body);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 12px;
    }
    .contact-section .section-label::before {
      content: '';
      width: 24px;
      height: 2px;
      background: var(--red);
      border-radius: 2px;
    }
    .contact-section .section-title {
      font-family: var(--ff-head);
      font-size: clamp(1.75rem, 3.5vw, 2.4rem);
      font-weight: 800;
      color: var(--ink);
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .contact-section .section-sub {
      color: var(--muted);
      font-size: .97rem;
      line-height: 1.75;
      max-width: 480px;
    }

    /* Info cards */
    .contact-info-card {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      background: var(--white);
      border-radius: var(--radius);
      padding: 20px 22px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      margin-bottom: 16px;
      transition: box-shadow .2s;
    }
    .contact-info-card:hover { box-shadow: var(--shadow-lg); }
    .contact-info-card .ci-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--red), var(--red-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #fff;
      font-size: 1.1rem;
    }
    .contact-info-card .ci-body h6 {
      font-family: var(--ff-head);
      font-weight: 700;
      font-size: .88rem;
      color: var(--ink);
      margin-bottom: 2px;
    }
    .contact-info-card .ci-body p {
      font-size: .85rem;
      color: var(--muted);
      margin: 0;
      line-height: 1.55;
    }
    .contact-info-card .ci-body a {
      color: var(--muted);
      text-decoration: none;
    }
    .contact-info-card .ci-body a:hover { color: var(--red); }

    /* Form card */
    .contact-form-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 40px 36px;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border);
    }
    .contact-form-card .form-label {
      font-family: var(--ff-body);
      font-size: .84rem;
      font-weight: 600;
      color: var(--ink-60);
      margin-bottom: 6px;
    }
    .contact-form-card .form-control,
    .contact-form-card .form-select {
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 11px 16px;
      font-family: var(--ff-body);
      font-size: .92rem;
      color: var(--ink);
      background: var(--soft);
      transition: border-color .2s, box-shadow .2s;
      outline: none;
      box-shadow: none;
    }
    .contact-form-card .form-control:focus,
    .contact-form-card .form-select:focus {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(232,38,62,.1);
      background: var(--white);
    }
    .contact-form-card textarea.form-control { resize: none; }
    .contact-form-card .btn-submit {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--red), var(--red-dark));
      color: #fff;
      border: none;
      border-radius: var(--radius);
      padding: 13px 32px;
      font-family: var(--ff-head);
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .02em;
      cursor: pointer;
      transition: transform .18s, box-shadow .18s;
      width: 100%;
      justify-content: center;
    }
    .contact-form-card .btn-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(232,38,62,.35);
    }
    .book-meeting-trigger-wrap {
      text-align: center;
      margin-top: 18px;
    }
    .btn-book-meeting-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--red);
      font-family: var(--ff-head);
      font-weight: 700;
      font-size: .9rem;
      text-decoration: none;
      border: 2px solid var(--red);
      border-radius: var(--radius);
      padding: 10px 24px;
      transition: background .18s, color .18s;
    }
    .btn-book-meeting-link:hover {
      background: var(--red);
      color: #fff;
    }

    /* ───── BOOK A MEETING MODAL ───── */
    #bookMeetingModal .modal-content {
      border-radius: var(--radius-lg);
      border: none;
      overflow: hidden;
      font-family: var(--ff-body);
    }
    #bookMeetingModal .modal-header {
      background: linear-gradient(135deg, var(--ink-80), var(--ink-60));
      border: none;
      padding: 28px 32px 20px;
      position: relative;
    }
    #bookMeetingModal .modal-header::after {
      content: '';
      position: absolute;
      bottom: 0; left: 32px; right: 32px;
      height: 1px;
      background: rgba(255,255,255,.08);
    }
    #bookMeetingModal .modal-title {
      font-family: var(--ff-head);
      font-weight: 800;
      font-size: 1.35rem;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    #bookMeetingModal .modal-title .title-badge {
      background: linear-gradient(135deg, var(--red), var(--red-dark));
      color: #fff;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 20px;
    }
    #bookMeetingModal .modal-header .sub-text {
      font-size: .85rem;
      color: rgba(255,255,255,.5);
      margin-top: 4px;
    }
    #bookMeetingModal .btn-close {
      filter: invert(1);
      opacity: .6;
      position: absolute;
      top: 20px;
      right: 24px;
    }
    #bookMeetingModal .modal-body {
      padding: 30px 32px;
      background: var(--white);
    }
    #bookMeetingModal .form-label {
      font-size: .82rem;
      font-weight: 600;
      color: var(--ink-60);
      margin-bottom: 5px;
    }
    #bookMeetingModal .form-control,
    #bookMeetingModal .form-select {
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 14px;
      font-family: var(--ff-body);
      font-size: .91rem;
      color: var(--ink);
      background: var(--soft);
      box-shadow: none;
      transition: border-color .2s, box-shadow .2s;
    }
    #bookMeetingModal .form-control:focus,
    #bookMeetingModal .form-select:focus {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(232,38,62,.1);
      background: var(--white);
    }
    #bookMeetingModal .modal-footer {
      background: var(--soft);
      border-top: 1px solid var(--border);
      padding: 20px 32px;
      gap: 12px;
    }
    #bookMeetingModal .btn-cancel {
      background: transparent;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 24px;
      font-family: var(--ff-head);
      font-weight: 600;
      font-size: .88rem;
      color: var(--muted);
      cursor: pointer;
      transition: border-color .18s, color .18s;
    }
    #bookMeetingModal .btn-cancel:hover {
      border-color: var(--ink-60);
      color: var(--ink);
    }
    #bookMeetingModal .btn-confirm {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--red), var(--red-dark));
      color: #fff;
      border: none;
      border-radius: var(--radius);
      padding: 11px 28px;
      font-family: var(--ff-head);
      font-weight: 700;
      font-size: .92rem;
      cursor: pointer;
      transition: transform .18s, box-shadow .18s;
      flex: 1;
      justify-content: center;
    }
    #bookMeetingModal .btn-confirm:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(232,38,62,.35);
    }
    /* Time slot pills */
    .time-slots {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .time-slot {
      border: 1.5px solid var(--border);
      border-radius: 8px;
      padding: 7px 14px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      transition: all .18s;
      background: var(--white);
      user-select: none;
    }
    .time-slot:hover {
      border-color: var(--red);
      color: var(--red);
    }
    .time-slot.selected {
      background: linear-gradient(135deg, var(--red), var(--red-dark));
      border-color: transparent;
      color: #fff;
    }

    @media (max-width: 767px) {
      .contact-form-card { padding: 28px 20px; }
      #bookMeetingModal .modal-header,
      #bookMeetingModal .modal-body,
      #bookMeetingModal .modal-footer { padding-left: 20px; padding-right: 20px; }
    }