*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Primary */
  --blue: #2A66D9;
  --blue-dark: #4B2E83;
  --orange: #D10A67;

  /* Supporting */
  --blue-light: #EEF4FF;
  --blue-mid: #6F9EFF;

  /* Text */
  --text:#111827;
  --text2:#374151;
  --text3:#6B7280;
  --text4:#9CA3AF;

  /* Background */
  --white:#FFFFFF;
  --off:#F8FAFC;
  --off2:#F3F6FB;

  /* Border */
  --border:#E5E7EB;
  --border2:#D1D5DB;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 2px 8px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow:0 8px 24px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
  --shadow-lg:0 20px 48px rgba(0,0,0,.10),0 8px 20px rgba(0,0,0,.06);

  --shadow-blue:0 8px 28px rgba(42,102,217,.28);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#fff;color:var(--text);overflow-x:hidden;line-height:1.6}

/* ── PROGRESS ── */
#prog{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--orange));z-index:9999;transform-origin:left;transform:scaleX(0);pointer-events:none;border-radius:0 2px 2px 0}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;background:rgba(255,255,255,0.96);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color 0.3s,box-shadow 0.3s}
nav.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.nav-wrap{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0;}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-box{width:38px;height:38px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;color:#fff;letter-spacing:-0.5px;flex-shrink:0}
.nav-logo-text .n1{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:800;color:var(--text);letter-spacing:-0.3px;line-height:1.1}
.nav-logo-text .n2{font-size:9.5px;color:var(--text4);letter-spacing:1.8px;text-transform:uppercase;font-weight:500}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:16px;font-weight:600;color:var(--text2);text-decoration:none;transition:color .2s;position:relative;padding-bottom:2px}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--blue);border-radius:2px;transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;padding:10px 22px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;transition:box-shadow .3s,transform .2s;white-space:nowrap;letter-spacing:.2px}
.nav-cta:hover{box-shadow:var(--shadow-blue);transform:translateY(-1px)}
.hbg{display:none;flex-direction:column;gap:5px;border:none;background:none;cursor:pointer;padding:4px}
.hbg span{width:22px;height:2px;background:var(--text);border-radius:2px;display:block;transition:all .3s}
.mob{display:none;position:fixed;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:20px 5%;z-index:499;flex-direction:column;gap:14px;box-shadow:var(--shadow-lg)}
.mob a{font-size:15px;font-weight:500;color:var(--text2);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--border)}
.mob.open{display:flex}
.nav-logo-text img{
    height:45px;
    width:auto;
    max-width:100%;
    display:block;
    object-fit:contain;
} 
/* ===================================================
MEGA MENU
COMPACT + MODERN
=================================================== */
.mega-menu{
  position:relative;
  display:flex;
  align-items:center;
}

/* PRODUCTS BUTTON */
.mega-btn{
  font-size:14px;
  font-weight:500;
  color:var(--text2);
  text-decoration:none;
  transition:color .2s;
  position:relative;
  padding-bottom:2px;
}

.mega-btn::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:var(--blue);
  border-radius:2px;
  transition:width .3s;
}

.mega-btn:hover{
  color:var(--blue);
}

.mega-btn:hover::after{
  width:100%;
}

/* ===================================================
DROPDOWN
=================================================== */
.mega-dropdown{
  position:absolute;
  top:48px;
  left:-140px;
  width:650px;
  display:flex;
  background:#fff;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:18px;
  overflow:hidden;
  box-shadow:
  0 12px 35px rgba(15,23,42,0.10);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:.3s ease;
}

/* SHOW */
.mega-menu:hover .mega-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* ===================================================
LEFT SIDE
=================================================== */
.mega-left{
  width:240px;
  background:
  linear-gradient(
    180deg,
    #f8fbff 0%,
    #f5f7fb 100%
  );
  border-right:1px solid rgba(15,23,42,0.06);
  padding:10px 0;
}

/* LEFT ITEMS */
.mega-left a{
  display:flex;
  align-items:center;
  padding:8px 13px;
  color:#334155;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:.25s;
  position:relative;
}

/* HOVER */
.mega-left a:hover{
  background:rgba(37,99,235,0.05);
  color:var(--blue);
}

/* ACTIVE */
.mega-left a.active{
  background:#fff;
  color:var(--blue);
}

/* ACTIVE LINE */
.mega-left a.active::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:20px;
  background:linear-gradient(
    180deg,
    var(--blue),
    var(--blue-dark)
  );
}

/* ===================================================
RIGHT SIDE
=================================================== */
.mega-right{
  flex:1;
  padding:12px;
  background:#fff;
}

/* RIGHT ITEMS */
.mega-right a{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:6px 7px;
  text-decoration:none;
  border-radius:12px;
  transition:.25s;
  margin-bottom:4px;
}

/* TITLE */
.mega-right a span{
  font-size:14px;
  font-weight:650;
  color:#1e293b;
}

/* DESCRIPTION */
.mega-right a small{
  font-size:12px;
  line-height:1.4;
  color:#64748b;
}

/* HOVER */
.mega-right a:hover{
  background:#f8fbff;
  transform:translateX(3px);
}

/* ===================================================
SUBMENU
=================================================== */
.submenu{
  display:none;
  animation:fadeIn .25s ease;
}

.submenu.active{
  display:block;
}

.resources-menu{
    width:200px;
    left:-20px;
}

/* ===================================================
ANIMATION
=================================================== */
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ── HERO ── */
.hero{min-height:fit-content;padding:120px 5% 80px;background:#fff;display:flex;align-items:center;position:relative;overflow:hidden;padding:0 5%;padding-top:72px}
/* Soft blue arc decoration */
.hero-arc{position:absolute;right:-180px;top:-180px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle at 60% 40%,rgba(27,79,255,0.06) 0%,transparent 65%);pointer-events:none}
.hero-dots{position:absolute;right:0;top:0;bottom:0;width:50%;background-image:radial-gradient(rgba(27,79,255,0.07) 1.5px,transparent 1.5px);background-size:28px 28px;pointer-events:none;mask-image:linear-gradient(to left,rgba(0,0,0,0.5),transparent)}
.hero-inner{max-width:1280px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:2}
/* Left */
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:var(--blue-light);border:1px solid rgba(27,79,255,0.2);border-radius:50px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--blue);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:24px}
.badge-pulse{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
.hero-h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,5vw,62px);font-weight:800;line-height:1.07;letter-spacing:-2px;color:var(--text);margin-bottom:20px}
.hero-h1 .blu{color:var(--blue)}
.hero-h1 .ora{color:var(--orange)}
.hero-sub{font-size:17px;color:var(--text3);line-height:1.75;margin-bottom:36px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.btn-solid{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;padding:14px 30px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:box-shadow .3s,transform .2s;white-space:nowrap}
.btn-solid:hover{box-shadow:var(--shadow-blue);transform:translateY(-2px);color:#fff;}
.btn-ghost{background:#fff;color:var(--blue);padding:14px 30px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--blue);transition:all .3s;white-space:nowrap}
.btn-ghost:hover{background:var(--blue-light)}
/* Chips */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px}
.hchip{background:var(--off);border:1px solid var(--border);border-radius:50px;padding:6px 14px;font-size:12px;font-weight:500;color:var(--text2);transition:all .25s;cursor:default}
.hchip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
/* Right side cards */
.hero-right{display:flex;flex-direction:column;gap:14px}
.h-img-card{border-radius:18px;overflow:hidden;position:relative;box-shadow:var(--shadow-lg)}
.h-img-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.h-img-card:hover img{transform:scale(1.04)}
.h-img-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.65));padding:18px;font-size:13px;font-weight:600;color:#fff}
.h-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.h-stat{background:var(--off);border:1.5px solid var(--border);border-radius:14px;padding:16px;text-align:center;transition:all .3s;cursor:default}
.h-stat:hover{border-color:var(--blue);background:var(--blue-light);transform:translateY(-3px);box-shadow:var(--shadow)}
.h-stat-num{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:800;color:var(--blue);line-height:1}
.h-stat-lbl{font-size:11px;color:var(--text3);margin-top:4px;font-weight:500}
/* Floating tag */
.h-float{position:absolute;top:20px;right:20px;background:#fff;border-radius:10px;padding:8px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text)}
.h-float-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:pulse 2s infinite}
/* ===========================
   HOME SLIDER
=========================== */
#homeSlider{
    position:relative;
    border-radius:18px;
    overflow:hidden;
}

#homeSlider .carousel-inner{
    border-radius:18px;
}

/* Images */
#homeSlider .carousel-item img{
    width:100%; 
    object-fit:cover;
    display:block;
}

/* Hide arrows */
#homeSlider .carousel-control-prev,
#homeSlider .carousel-control-next{
    display:none;
}

/* Indicators */
#homeSlider .carousel-indicators{
    position:absolute;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0;
    padding:8px 12px;
    width:auto;
    border-radius:999px;
    z-index:999;
}

/* Dots */
#homeSlider .carousel-indicators [data-bs-target]{
    width:10px;
    height:10px;
    margin:0;
    border:none;
    border-radius:50%;
    background:#d4d7de;
    opacity:1;
    transition:.35s;
}

/* Active Dot */
#homeSlider .carousel-indicators .active{
    width:32px;
    border-radius:20px;
    background:linear-gradient(90deg,#2759ff,#ff2a78);
}
@media (max-width:768px){
    #homeSlider .carousel-indicators{
        bottom:8px;
        padding:6px 10px;
        gap:6px;
    }
    #homeSlider .carousel-indicators [data-bs-target]{
        width:7px;
        height:7px;
    }
    #homeSlider .carousel-indicators .active{
        width:20px;
    }
}


/* ── FEATURES STRIP ── */
.feat-strip{background:var(--blue);padding:0 5%}
.feat-strip-in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid rgba(255,255,255,0.12)}
.feat-item{padding:28px 24px;border-right:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;gap:14px;transition:background .3s;cursor:default}
.feat-item:hover{background:rgba(255,255,255,0.08)}
.feat-icon{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat-text .ft{font-size:14px;font-weight:700;color:#fff}
.feat-text .fs{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px}

/* ── SECTION SHARED ── */
.section{padding:96px 5%}
.si{max-width:1280px;margin:0 auto}
.s-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--blue);letter-spacing:3px;text-transform:uppercase;margin-bottom:14px}
.s-eyebrow span{display:block;width:20px;height:2px;background:var(--blue);border-radius:2px}
.s-h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,3.5vw,42px);font-weight:800;color:var(--text);letter-spacing:-1px;line-height:1.12;margin-bottom:16px}
.s-h2 .blu{color:var(--blue)}
.s-p{font-size:16px;color:var(--text3);line-height:1.75;max-width:560px}
.s-hdr{margin-bottom:56px}
.s-hdr.center{text-align:center}
.s-hdr.center .s-p,.s-hdr.center .s-eyebrow{margin-left:auto;margin-right:auto}
.s-hdr.center .s-eyebrow{justify-content:center}

/* ── WHAT WE DO ── */
.wwd{background:var(--off)}
.wwd-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.wwd-img-wrap{position:relative;border-radius:24px;overflow:hidden;height:480px;box-shadow:var(--shadow-lg)}
.wwd-img-wrap img{width:100%;height:100%;object-fit:cover}
.wwd-over{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,10,30,0.7));padding:24px}
.wwd-over-row{display:flex;gap:24px}
.wov{text-align:center}
.wov-n{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;color:#fff;line-height:1}
.wov-l{font-size:11px;color:rgba(255,255,255,.55);margin-top:3px;text-transform:uppercase;letter-spacing:1px}
.wwd-items{display:flex;flex-direction:column;gap:14px}
.wwd-item{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border-radius:14px;border:1.5px solid var(--border);background:#fff;transition:all .35s cubic-bezier(.16,1,.3,1)}
.wwd-item:hover{border-color:var(--blue);box-shadow:var(--shadow-blue);transform:translateX(6px)}
.wwd-ico{width:46px;height:46px;border-radius:12px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;transition:background .3s}
.wwd-item:hover .wwd-ico{background:var(--blue)}
.wwd-ico svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.wwd-item:hover .wwd-ico svg{stroke:#fff}
.wwd-t h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.wwd-t p{font-size:13px;color:var(--text3);line-height:1.65}

/* ── PRODUCTS ── */
.products{background:#fff}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prod-card{border-radius:18px;overflow:hidden;border:1.5px solid var(--border);background:#fff;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:default;position:relative}
.prod-card:hover{border-color:var(--blue);box-shadow:0 16px 40px rgba(27,79,255,0.12);transform:translateY(-6px)}
.prod-card-img{height:200px;overflow:hidden;position:relative}
.prod-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.prod-card:hover .prod-card-img img{transform:scale(1.07)}
.prod-card-img-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,10,30,.55),transparent 50%)}
.prod-num{position:absolute;top:14px;left:14px;background:var(--blue);color:#fff;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-family:'Space Grotesk',sans-serif}
.prod-body{padding:20px}
.prod-cat{font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:2px;margin-bottom:7px}
.prod-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}
.prod-list{font-size:13px;color:var(--text3);line-height:1.75}
.prod-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--blue);margin-top:12px;transition:gap .2s}
.prod-card:hover .prod-link{gap:9px}
.prod-card{display:block;text-decoration:none;color:inherit;cursor:pointer;} 

/* ── INDUSTRIES ── */
.industries{background:#fff}
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ind-card{border-radius:18px;overflow:hidden;position:relative;height:260px;cursor:default}
.ind-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ind-card:hover img{transform:scale(1.08)}
.ind-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,10,40,.82) 0%,rgba(0,10,40,.2) 55%,transparent 100%);transition:background .4s}
.ind-card:hover .ind-shade{background:linear-gradient(to top,rgba(27,79,255,.82) 0%,rgba(27,79,255,.3) 55%,transparent 100%)}
.ind-body{position:absolute;bottom:0;left:0;right:0;padding:22px;transform:translateY(6px);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ind-card:hover .ind-body{transform:translateY(0)}
.ind-icon{font-size:26px;display:block;margin-bottom:7px}
.ind-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;color:#fff;margin-bottom:5px}
.ind-desc{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.6;max-height:0;overflow:hidden;transition:max-height .4s ease}
.ind-card:hover .ind-desc{max-height:80px}

/* ── GLOBAL REACH ── */
.reach{background:linear-gradient(135deg,var(--blue) 0%,#1340E0 100%);padding:90px 5%}
.reach-in{max-width:1280px;margin:0 auto}
.reach-hdr{text-align:center;margin-bottom:56px}
.reach-hdr .s-h2{color:#fff}
.reach-hdr .s-p{color:rgba(255,255,255,.65);margin:0 auto}
.reach-hdr .s-eyebrow{color:rgba(255,255,255,.8);justify-content:center}
.reach-hdr .s-eyebrow span{background:rgba(255,255,255,.5)}
.country-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ctry{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:18px 12px;text-align:center;transition:all .3s;cursor:default}
.ctry:hover{background:rgba(255,255,255,.2);transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.ctry-flag{font-size:28px;display:block;margin-bottom:8px}
.ctry-name{font-size:13px;font-weight:700;color:#fff}
.reach-stats{display:flex;align-items:center;justify-content:center;gap:48px;margin-top:56px;padding-top:48px;border-top:1px solid rgba(255,255,255,.15);flex-wrap:wrap}
.r-stat .r-num{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:800;color:#fff;line-height:1;text-align:center}
.r-stat .r-lbl{font-size:13px;color:rgba(255,255,255,.55);text-align:center;margin-top:5px}
.r-div{width:1px;height:56px;background:rgba(255,255,255,.18)}

/* ── WHY CHOOSE US ── */
.why{background:var(--off)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{background:#fff;border-radius:18px;padding:30px;border:1.5px solid var(--border);transition:all .4s cubic-bezier(.16,1,.3,1);cursor:default;position:relative;overflow:hidden}
.why-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.why-card:hover::before{transform:scaleX(1)}
.why-card:hover{border-color:transparent;box-shadow:0 20px 48px rgba(27,79,255,0.1);transform:translateY(-6px)}
.why-ico{width:52px;height:52px;border-radius:14px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .3s}
.why-card:hover .why-ico{background:var(--blue)}
.why-ico svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.why-card:hover .why-ico svg{stroke:#fff}
.why-card h4{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px}
.why-card p{font-size:13.5px;color:var(--text3);line-height:1.7}

/* ── CLIENTS MARQUEE (BRANDS) ── */  
.mq-wrap::before,
.mq-wrap::after{
    content:"";
    position:absolute;
    top:0;
    width:100px;
    height:100%;
    z-index:2;
    pointer-events:none;
} 

.mq-track{
    display:flex;
    align-items:center;
    gap:22px;
    width:max-content;
    animation:mq 45s linear infinite;
}

.mq-track:hover{
    animation-play-state:paused;
}

.mq-badge{
    width:220px;
    height:140px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    padding:22px;
    transition:.35s;
}

.mq-badge:hover{
    border-color:var(--blue);
    box-shadow:var(--shadow);
    transform:translateY(-5px);
}

.mq-badge img{
    width:100%;
    max-width:160px;
    max-height:80px;
    object-fit:contain;
    transition:.35s;
}

.mq-badge:hover img{
    transform:scale(1.06);
}

@keyframes mq{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* Shipment Card */
.shipment-card{
    width: 100%;
    height: 400px;          /* Increase card height */
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center; 
    overflow: hidden;
    box-sizing: border-box;
    transition: .3s;
}

.shipment-card:hover{
    border-color:#2d6cff;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* Image */
.shipment-card img{
    width: 100%;
    height: 100%;  
     object-fit:cover;
    display: block;
} 

/* ── LOGISTICS ── */
.logistics{background:var(--off)}
.log-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.log-imgs{position:relative;height:480px}
.log-img-a{position:absolute;right:0;top:0;width:80%;height:340px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg)}
.log-img-a img{width:100%;height:100%;object-fit:cover}
.log-img-b{position:absolute;left:0;bottom:0;width:52%;height:200px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);border:4px solid #fff}
.log-img-b img{width:100%;height:100%;object-fit:cover}
.log-badge{position:absolute;right:-10px;bottom:100px;background:var(--blue);color:#fff;padding:14px 18px;border-radius:12px;box-shadow:0 8px 24px rgba(27,79,255,.35);min-width:120px}
.log-badge .lb-n{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:800;line-height:1}
.log-badge .lb-l{font-size:10px;opacity:.7;margin-top:3px;text-transform:uppercase;letter-spacing:1px}
.log-svcs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.log-svc{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;background:#fff;border:1.5px solid var(--border);transition:all .3s;cursor:default}
.log-svc:hover{border-color:var(--blue);background:var(--blue-light);transform:translateX(4px)}
.log-svc svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.log-svc span{font-size:13px;font-weight:600;color:var(--text2)}

/* ── CTA BANNER ── */
.cta-sect{background:#fff;padding:80px 5%;position:relative;overflow:hidden}
.cta-sect::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--blue-light) 0%,rgba(255,248,242,1) 100%)}
.cta-sect::after{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(27,79,255,.08),transparent 70%);pointer-events:none}
.cta-in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;position:relative;z-index:1}
.cta-text h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3.5vw,40px);font-weight:800;color:var(--text);letter-spacing:-1px;margin-bottom:12px;line-height:1.12}
.cta-text p{font-size:16px;color:var(--text3);line-height:1.7}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ── CONTACT ── */
.contact{background:var(--off);padding:96px 5%}
.contact-in{max-width:1280px;margin:0 auto}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:start}
.contact-left h3{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:800;color:var(--text);letter-spacing:-.5px;margin-bottom:14px;line-height:1.12}
.contact-left>p{font-size:15px;color:var(--text3);line-height:1.75;margin-bottom:32px}
.c-infos{display:flex;flex-direction:column;gap:12px}
.c-info{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;background:#fff;border-radius:14px;border:1.5px solid var(--border);transition:all .3s}
.c-info:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(27,79,255,.08)}
.c-info-ico{width:38px;height:38px;background:var(--blue-light);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-info-ico svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-info-lbl{font-size:10px;font-weight:700;color:var(--text4);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:3px}
.c-info-val{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.5}
.contact-form{background:#fff;border-radius:22px;border:1.5px solid var(--border);padding:35px;box-shadow:var(--shadow-lg)}
.form-h{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--text);margin-bottom:28px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fg label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px}
.fg input,.fg select,.fg textarea{background:var(--off);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-family:'Inter',sans-serif;font-size:14px;color:var(--text);outline:none;width:100%;-webkit-appearance:none;transition:border-color .2s,box-shadow .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,79,255,.08);background:#fff}
.fg textarea{min-height:100px;resize:vertical}
.fg select option{background:#fff}
.f-submit{width:100%;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;padding:14px;border-radius:10px;font-size:15px;font-weight:700;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:box-shadow .3s,transform .2s;margin-top:4px;letter-spacing:.2px}
.f-submit:hover{box-shadow:var(--shadow-blue);transform:translateY(-2px)}

.error{
    display:block;
    color:#dc2626;
    font-size:13px;
    margin-top:4px;
    min-height:18px;
}

.error-input{
    border:1px solid #dc2626 !important;
}

/* ── FOOTER ── */
footer{background:var(--text);padding:64px 5% 28px}
.footer-in{max-width:1280px;margin:0 auto}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px;margin-bottom:10px} 
.f-brand-name{font-family:'Space Grotesk',sans-serif;font-size:17px;color:#fff}
.f-brand{display:flex;flex-direction:column;align-items:flex-start;}
.f-logo{width:120px;height:auto;margin-bottom:18px;object-fit:contain;filter:brightness(1.35)contrast(1.15)saturate(1.2)drop-shadow(0 0 10px rgba(0,162,255,.35));}
.f-brand-p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.7;max-width:260px}
.f-col h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:rgba(255,255,255,.3);margin-bottom:16px}
.f-col a{display:block;font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;margin-bottom:10px;transition:color .2s,transform .2s}
.f-col a:hover{color:#fff;transform:translateX(4px)}
.f-bot{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.f-bot p{font-size:12px;color:rgba(255,255,255,.25)}
.f-socs{display:flex;gap:8px}
.f-soc{width:32px;height:32px;border-radius:8px;background:var(--blue);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .3s}
.f-soc:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.f-soc svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.f-soc:hover{transform:translateY(-3px);box-shadow:0 0 0 4px rgba(255,255,255,.1),0 0 20px rgba(0,123,255,.45);
} 

/* ── WA FLOAT ── */
.wa{position:fixed;bottom:28px;right:28px;z-index:400;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.45);text-decoration:none;transition:transform .3s,box-shadow .3s;animation:wap 3s infinite}
@keyframes wap{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.45)}50%{box-shadow:0 4px 32px rgba(37,211,102,.7),0 0 0 9px rgba(37,211,102,.12)}}
.wa:hover{transform:scale(1.1);animation:none;box-shadow:0 8px 30px rgba(37,211,102,.6)}
.wa svg{width:28px;height:28px;fill:#fff}

@media (max-width: 1024px) {
    .wa {  
        bottom: 80px;
    }
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero-inner,.wwd-grid,.log-grid,.contact-grid,.edge-grid,.cta-in{grid-template-columns:1fr;gap:40px}
  .prod-grid,.why-grid,.ind-grid{grid-template-columns:repeat(2,1fr)}
  .country-grid{grid-template-columns:repeat(4,1fr)}
  .feat-strip-in{grid-template-columns:repeat(2,1fr)}
  .f-top{grid-template-columns:1fr 1fr}
  .log-imgs{display:none}
  .h-stat-row{grid-template-columns:repeat(3,1fr)}
  .edge-cards{grid-template-columns:1fr 1fr}
  .edge-img{display:none}
}
@media(max-width:640px){
  .nav-links,.nav-cta{display:none}
  .hbg{display:flex}
  .prod-grid,.why-grid,.ind-grid,.country-grid,.edge-cards,.f-row,.log-svcs,.reach-stats,.feat-strip-in{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}
  .r-div{display:none}
  .reach-stats{gap:24px}
  .h-stat-row{grid-template-columns:1fr 1fr}
  .cta-in{grid-template-columns:1fr}
}

/* ── ANIMATION INIT STATES ── */ 
html,
body {
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

/* Better performance */
* {
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block;
}

/* Prevent animation flickering */
.anim-up,
.anim-left,
.anim-right,
.anim-scale,
.anim-fade {
  opacity: 1;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Prevent blank section issue */
section,
div {
  position: relative;
}
 
/* Better mobile rendering */
.hero,
.section,
.contact,
.products,
.industries,
.why,
.edge,
.reach {
  overflow: hidden;
}

/* =========================
MOBILE FIXES
========================= */
@media (max-width: 1024px) {
  .hero-inner,
  .wwd-grid,
  .log-grid,
  .contact-grid,
  .edge-grid,
  .cta-in {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .prod-grid,
  .why-grid,
  .ind-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .country-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .feat-strip-in {
    grid-template-columns: repeat(2, 1fr);
  }

  .edge-img,
  .log-imgs {
    display: none;
  }
}

/* Tablet */ 
@media (max-width: 1024px) {
 .nav-wrap{
    padding: 0 40px;
  }

  .nav-links{
    gap: 18px;
  }

  .nav-links a{
    font-size: 14px;
  }

  .nav-contact-modern span{
    font-size: 13px;
  }

  .contact-item{
    gap: 8px;
  }

  .nav-logo img{
    width: 160px; /* adjust as needed */
  }
}

/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  nav {
    backdrop-filter: blur(10px);
  }

  .nav-wrap {
    height: 65px;
    padding: 0 20px;
  }

  .mob {
    top: 65px;
    padding: 20px;
  }

  .hero {
    min-height: auto; 
    padding-bottom: 60px;
  }

  .hero-inner {
    gap: 30px;
  }

  .hero-h1 {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -1px;
  }

  .hero-sub {
    font-size: 15px;
    line-height: 1.7;
  }

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

  .btn-solid,
  .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .hero-right {
    width: 100%;
  }

  .h-img-card {
    height: 220px;
  }

  .h-stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .section,
  .contact {
    padding: 70px 20px;
  }

  .s-h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .s-p {
    font-size: 15px;
  }

  .wwd-img-wrap {
    height: 300px;
  }

  .prod-grid,
  .why-grid,
  .ind-grid,
  .country-grid,
  .edge-cards,
  .f-row,
  .log-svcs,
  .feat-strip-in {
    grid-template-columns: 1fr;
  }

  .prod-card-img {
    height: 220px;
  }

  .ind-card {
    height: 230px;
  }

  .contact-form {
    padding: 24px;
  }

  .f-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .f-bot {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-in {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .cta-btns {
    width: 100%;
  }

  .reach-stats {
    gap: 20px;
  }

  .r-div {
    display: none;
  }

  .wa {
    width: 52px;
    height: 52px;
    right: 20px;
    bottom: 20px;
  }
}

/* =========================
SMALL MOBILE
========================= */
@media (max-width: 480px) {
  .hero-h1 {
    font-size: 30px;
  }

  .hero-sub {
    font-size: 14px;
  }

  .section,
  .contact,
  .cta-sect {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-left h3 {
    font-size: 28px;
  }

  .form-h {
    font-size: 20px;
  }

  .h-stat-row {
    grid-template-columns: 1fr;
  }
} 
 
.anim-up,
.anim-left,
.anim-right,
.anim-scale {
  will-change: transform, opacity;
}

/* Smooth rendering */
body {
  overflow-x: hidden;
}

/* Mobile animation optimization */
@media (max-width: 768px) {
  .anim-up,
  .anim-left,
  .anim-right,
  .anim-scale {
    transition: none !important; 
  }
} 

/* =========================
MAP
========================= */
#worldMap{
    width:100%;
    height:420px; 
    border-radius:28px; 
    background:#eef5ff; 
    border:1px solid #dbe7ff; 
    overflow:hidden; 
    position:relative;
} 

/* =========================
COUNTRY GRID
========================= */
.country-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
    margin-top:40px;
}

.country-card{
    background:#fff;
    border-radius:20px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid #e5ecff;
    transition:0.3s;
}

.country-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 35px rgba(0,0,0,0.08);
}

.country-card img{
    width:45px;
    height:32px;
    object-fit:cover;
    border-radius:4px;
}

.country-card h4{
    font-size:24px;
    margin-bottom:4px;
    color:#08142e;
}

.country-card p{
    color:#667085;
    font-size:15px;
}

/* =========================
MOBILE
========================= */
@media(max-width:992px){

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

    .sec-head h2{
        font-size:38px;
    }

    #worldMap{
        height:430px;
    }

}

@media(max-width:768px){
    .country-grid{
        grid-template-columns:1fr;
    }

    .sec-head h2{
        font-size:30px;
    }

    .sec-head p{
        font-size:15px;
    }

    #worldMap{
        height:300px;
        border-radius:20px;
    }
}  

.about-content p{
    line-height:1.9;
    color:#666;
} 
.about-inner{
    display:flex;
    align-items:center;
    gap:20px;
}

.about-content{
    flex:0 0 70%;
}

.about-image{
    flex:0 0 30%;
    text-align:center;
}

.about-image img{
    width:100%;
    max-width:400px;
    height:auto;
    display:block;
    margin:auto;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}
@media (max-width:992px){
    .about-inner{
        flex-direction:column;
        gap:40px;
    }

    .about-content,
    .about-image{
        flex:100%;
        width:100%;
    }

    .about-image img{
        max-width:320px;
    }
}

/* ===========================
   MODERN NAV CONTACT
=========================== */  
.nav-contact-modern{
    display:flex;
    align-items:center;
    gap:22px;
    margin-left:20px;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:4px;
    text-decoration:none;
    color:#1f2937;
    transition:.3s ease;
}

.contact-item:hover{
    color:var(--blue);
}

/* Icon */
.contact-icon{
    width:25px;
    height:25px;
    border-radius:12px; 
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:.3s;
}

.contact-item:hover .contact-icon{
    background:var(--blue);
    border-color:var(--blue);
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(37,99,235,.18);
}

.contact-icon svg{
    width:18px;
    height:18px;
    stroke:#2563eb;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:.3s;
}

.contact-item:hover .contact-icon svg{
    stroke:#fff;
}

/* Text */
.contact-item span{
    font-size:12px;
    font-weight:600;
    color:#1f2937;
    line-height:1;
    white-space:nowrap;
}

.contact-item:hover span{
    color:var(--blue);
} 

/* Tablet */
@media(max-width:1200px){
    .nav-contact-modern{
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
    }

    .contact-item span{
        font-size:12px;
    }

    .contact-icon{
        width:25px;
        height:25px;
    }
}

/* Mobile */
@media(max-width:768px){
    .nav-contact-modern{
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        gap:1px; 
    }

    .contact-item{
        width:100%;
        gap:10px;
    }
 
    .contact-icon{
        width:25px;
        height:25px; 
    }

    .contact-icon svg{
        width:16px;
        height:16px;
    }

    .contact-item span{
        font-size:12px;
    }
}
/*==========================
VISION MISSION VALUES
==========================*/
.vm-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    margin-top:30px;
}

.vm-big{
    text-align:center; 
}

.vm-big h4{
    margin-top:22px;
    margin-bottom:18px;
}

.vm-big p{
    max-width:520px;
    margin:0 auto;
}

.vm-big p+p{
    margin-top:16px;
}

.vm-values{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px; 
}

.vm-values .why-card{
    text-align:center;
}

.vm-values .why-ico{
    margin:0 auto 22px;
}

.vm-big .why-ico{
    margin-left:auto !important;
    margin-right:auto !important;
}

@media(max-width:991px){
  .vm-grid{
  grid-template-columns:1fr;
  }

  .vm-values{
  grid-template-columns:repeat(2,1fr);
  }
  }

  @media(max-width:576px){
  .vm-values{
  grid-template-columns:1fr;
  }

  .vm-big{
  padding:35px 24px;
  }
}

/*==================================
ABOUT VIDEO SECTION
==================================*/
.vm-values-about{ 
    grid-template-columns:repeat(2,1fr); 
}
@media (max-width:576px){
    .vm-values-about{
        grid-template-columns:1fr;
    }
}

.video-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.video-frame{
    width:100%;
    overflow:hidden;
    border-radius:26px;
    background:#fff; 
    box-shadow:0 18px 45px rgba(15,23,42,.12);
    transition:.35s;
}

.video-frame iframe{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border:0;
}

/* Mobile */
@media (max-width:991px){
    .video-wrapper{
        margin-top:20px;
    }
}