@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

 :root{
      --brand-primary:#0e6fff;   /* Azure Blue */
      --brand-secondary:#00bfa6; /* Teal */
      --brand-accent:#f7b500;    /* Warm gold accent */
      --brand-dark:#0c1222;      /* Deep navy */
      --brand-muted:#6b7a90;     /* Muted slate */
    }
/* scroll reveal base (using data-animate) */
[data-animate]{opacity:0; transform:translateY(14px); transition:all .6s ease;}
[data-animate].in{opacity:1; transform:none;}
/* variants */
[data-animate=\"fade-left\"]{transform:translateX(24px);}
[data-animate=\"fade-left\"].in{transform:none;}
[data-animate=\"fade-up\"]{transform:translateY(24px);}
[data-animate=\"fade-up\"].in{transform:none;}

    body{
        font-family: "Montserrat", sans-serif;
    
    color:#1d2433;}

    /* Topbar */
    .topbar{background:var(--brand-dark);color:#e9eef7;font-size:.9rem}
    .topbar a{color:#e9eef7;text-decoration:none}
    .topbar .social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);margin-left:.35rem;transition:transform .2s ease, background .2s}
    .topbar .social a:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)}

    /* Navbar */
    .navbar-brand{font-weight:700;letter-spacing:.2px}
    .navbar-brand span{color:var(--brand-primary)}
    .nav-link{font-weight:500}
    .nav-link{position:relative}
    .nav-link:after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:6px;height:2px;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
    .nav-link:hover:after{transform:scaleX(1)}

    /* CTA Buttons */
    .btn-gradient{--bs-btn-color:#fff;border:0;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));box-shadow:0 10px 20px rgba(14,111,255,.2)}
    .btn-gradient:hover{filter:brightness(1.05)}
    .btn-outline-accent{border:2px solid var(--brand-accent);color:var(--brand-accent);font-weight:700}
    .btn-outline-accent:hover{background:var(--brand-accent);color:#0b0f1c}

    /* Subtle pulse animation */
    @keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(14,111,255,.45)}70%{box-shadow:0 0 0 14px rgba(14,111,255,0)}100%{box-shadow:0 0 0 0 rgba(14,111,255,0)}}
    .btn-animated{animation:pulseGlow 2.2s infinite}
    @keyframes fadeSwap{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}

    .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,34,.65),rgba(12,18,34,.35) 45%,rgba(12,18,34,.65))}

    .hero-content{position:relative;z-index:2}
    .badge-region{background:rgba(247,181,0,.95);color:#0b0f1c;border-radius:999px;font-weight:700}

    /* WhatsApp float */
    .whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:1050}
    .whatsapp-float .btn{border-radius:999px;padding:.8rem 1.1rem;box-shadow:0 10px 20px rgba(37,211,102,.3)}

    /* Sticky shadow */
    .sticky-top.shadow-soft{box-shadow:0 10px 30px rgba(12,18,34,.06)}
    
    /* Softer modal shadow */
.modal-content { box-shadow: 0 20px 60px rgba(12,18,34,.25); }
/* subtle gradient text */
.gradient-text{
  background: linear-gradient(90deg,#0e6fff,#00bfa6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* floating tiles positions */
.about-float-1{ width:34%; bottom:-10%; right:-6%; transform:rotate(2deg);}
.about-float-2{ width:32%; top:-8%; left:-6%; transform:rotate(-2deg);}
.about-badge{ left:20%; top:14%; }



/* soft hover on tiles */
.about-float-1, .about-float-2{ transition:transform .35s ease, box-shadow .35s ease;}
.about-float-1:hover, .about-float-2:hover{ transform:scale(1.03) rotate(0); box-shadow:0 10px 30px rgba(0,0,0,.18); }

/* filter pills */
.filter-pill{
  background:#fff; border:1px solid #e5e7eb; border-radius:999px; padding:.45rem .9rem;
}
.filter-pill.active{ 
  color:#fff; border-color:transparent;
  background:linear-gradient(90deg,#0e6fff,#00bfa6);
}

/* cards */
.product-hover{ transition:transform .25s ease, box-shadow .25s ease; }
.product-hover:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(12,18,34,.12); }

.ribbon{
  position:absolute; top:12px; left:12px; 
  background:#0e6fff; color:#fff; font-weight:700; font-size:.8rem;
  padding:.25rem .55rem; border-radius:.5rem;
}
.ribbon.alt{ background:#00bfa6; }

/* simple scroll reveal reuse */
[data-animate]{opacity:0; transform:translateY(14px); transition:all .6s ease;}
[data-animate].in{opacity:1; transform:none;}

/* step cards */
.step-card{
  position:relative; padding:1.25rem; border-radius:1rem; background:#fff; 
  box-shadow:0 10px 30px rgba(12,18,34,.06); transition:.25s ease;
  border:1px solid #eef1f5;
}
.step-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(12,18,34,.12); }
.step-index{
  position:absolute; top:12px; right:14px; font-weight:800; font-size:1.2rem; 
  background:linear-gradient(90deg,#0e6fff,#00bfa6); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.25;
}
.step-icon{
  width:54px; height:54px; display:grid; place-items:center; border-radius:14px; 
  background:linear-gradient(90deg,#0e6fff1a,#00bfa61a); color:#0e6fff; font-size:1.2rem; margin-bottom:.75rem;
}

/* reveal animation (re-use pattern) */
#process [data-animate]{opacity:0; transform:translateY(16px); transition:all .6s ease;}
#process [data-animate].in{opacity:1; transform:none;}

#testimonials .t-quote{ position:relative; }
#testimonials .t-quote:before{
  content:"“"; position:absolute; left:-10px; top:-14px; font-size:3rem; line-height:1;
  background:linear-gradient(90deg,#0e6fff,#00bfa6);
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.25;
}
#testimonials .star{ color:#f7b500; }

#testimonials .carousel-indicators [data-bs-target] {
    background-color: #0b7bf1;
}

#contact [data-animate]{opacity:0; transform:translateY(16px); transition:all .6s ease;}
#contact [data-animate].in{opacity:1; transform:none;}

#resources .r-card{ transition:transform .25s ease, box-shadow .25s ease; }
#resources .r-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(12,18,34,.12)!important; }

/* scroll reveal for this section */
#resources [data-animate]{opacity:0; transform:translateY(16px); transition:all .6s ease;}
#resources [data-animate].in{opacity:1; transform:none;}

.footer-social{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.08); color:#fff; text-decoration:none;
  transition:transform .2s ease, background .2s;
}
.footer-social:hover{ transform:translateY(-2px); background:rgba(255,255,255,.18); }

.footer-links li{ margin-bottom:.4rem; }
.footer-links a{
  color:rgba(255,255,255,.75); text-decoration:none; position:relative; padding-bottom:2px;
}
.footer-links a:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,#0e6fff,#00bfa6); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.footer-links a:hover{ color:#fff; }
.footer-links a:hover:after{ transform:scaleX(1); }

.hero-slider{
  position:relative; min-height:100%; color:#fff; display:flex; align-items:center; overflow:hidden;
}
.hero-slider .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,18,34,.75), rgba(12,18,34,.35) 40%, rgba(12,18,34,.82));
  z-index:1; pointer-events:none;
}
.hero-slider .hero-content{ position:relative; z-index:2; }
.gradient-text{
  background:linear-gradient(90deg,#0e6fff,#00bfa6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Backgrounds with Ken Burns */
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center; z-index:0;
  transform:scale(1.08); /* slight zoom for subtle parallax */
}
.kenburns-a{ animation:kenburnsA 12s ease-in-out infinite; }
.kenburns-b{ animation:kenburnsB 12s ease-in-out infinite; }
.kenburns-c{ animation:kenburnsC 12s ease-in-out infinite; }

@keyframes kenburnsA { 0%{transform:scale(1.08) translate3d(0,0,0)} 50%{transform:scale(1.18) translate3d(2%, -2%,0)} 100%{transform:scale(1.08) translate3d(0,0,0)} }
@keyframes kenburnsB { 0%{transform:scale(1.08) translate3d(0,0,0)} 50%{transform:scale(1.18) translate3d(-2%, 1.5%,0)} 100%{transform:scale(1.08) translate3d(0,0,0)} }
@keyframes kenburnsC { 0%{transform:scale(1.08) translate3d(0,0,0)} 50%{transform:scale(1.18) translate3d(1.5%, 1.5%,0)} 100%{transform:scale(1.08) translate3d(0,0,0)} }

/* Caption entrance */
.animate-in{ opacity:0; transform:translateY(14px); animation:fadeUp .7s ease forwards; }
.animate-in.delay-1{ animation-delay:.12s; }
.animate-in.delay-2{ animation-delay:.24s; }
.animate-in.delay-3{ animation-delay:.36s; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* Product collage */
.product-stack{
  position:absolute; right:4vw; bottom:-3vh; width:min(42vw,520px); pointer-events:none;
  display:grid; place-items:center; z-index:2;
}
.product-stack .prod{
  position:absolute; border-radius:16px; box-shadow:0 18px 40px rgba(12,18,34,.28); width:52%;
  animation:floatY 5.5s ease-in-out infinite;
}
.product-stack .prod-a{ left:-4%; bottom:8%; transform:rotate(-2deg); animation-delay:.1s }
.product-stack .prod-b{ right:-2%; bottom:20%; transform:rotate(2deg); width:56%; animation-delay:.3s }
.product-stack .prod-c{ left:18%; bottom:38%; transform:rotate(-1deg); width:48%; animation-delay:.5s }

@keyframes floatY{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)) }
  50%{ transform:translateY(-8px) rotate(var(--rot,0deg)) }
}

/* Animated connector lines */
.hero-lines{
  position:absolute; inset:0; z-index:1; opacity:.4; pointer-events:none;
}
.hero-lines .line{
  fill:none; stroke:url(#grad); stroke:#00bfa6; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:6 10; stroke-dashoffset:260;
  animation:dash 6s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:0; } }

/* Progress bar */
.hero-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.15); z-index:3; }
.hero-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,#0e6fff,#00bfa6); }

/* Mobile tweaks */
@media (max-width: 991.98px){
  .product-stack{ position:relative; right:auto; bottom:auto; width:90%; margin:18px auto 0; }
  .hero-slider{ min-height:72vh; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .kenburns-a, .kenburns-b, .kenburns-c, .animate-in, .product-stack .prod{ animation:none !important; opacity:1 !important; transform:none !important; }
}div#heroCarousel {
    width: 100%;
}.container.hero-content {
    height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}nav.navbar.navbar-expand-lg.bg-white.shadow-soft {
    background: transparent !important;
}.hero-slider {
}.navbar-expand-lg .navbar-nav .nav-link, .navbar-brand {
    color: black;
}.btn-outline-accent {
    background: #ecae02;
    color: black;
}.carousel-control-next, .carousel-control-prev {
    width: 6%;
}.container {
    max-width: 1200px !important;
}nav.navbar.navbar-expand-lg.bg-white.shadow-soft.stickytop {
    position: sticky;
    top: 0;
    z-index: 1080;
    background: white !important;
    box-shadow: 0 8px 24px rgba(12, 18, 34, .12);
}

/* Optional: smooth height to avoid jump if you switch to position:fixed */
.navbar-expand-lg{
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}.topbar {
    padding: 12px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}.navbar-expand-lg {
    position: relative;
    z-index: 999;
}/* brand accents */
.gradient-text{
  background:linear-gradient(90deg,#0e6fff,#00bfa6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-pro{ background:#fbfcfe; }

/* chips + since badge */
.chip{
  background:#fff; border:1px solid #eef1f5; color:#0c1222; border-radius:999px;
  padding:.35rem .7rem; font-weight:600; font-size:.85rem;
}
.since-pill {
    background: linear-gradient(90deg, #0e6fff, #00bfa6);
    border-radius: 999px;
    padding: .6rem 1rem;
    max-width: max-content;
    display: flex;
    gap: 7px;
}

/* org card */

/* region pill */
.region-pill{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-18px; background:#0c1222; color:#fff; border-radius:999px;
  padding:.45rem .9rem; font-weight:600; font-size:.85rem; box-shadow:0 10px 24px rgba(12,18,34,.18);
}

/* reveal helpers */
[data-animate]{opacity:0; transform:translateY(16px); transition:all .6s ease;}
[data-animate].show{opacity:1; transform:none;}
[data-animate="in-left"]{transform:translateX(-22px);}
[data-animate="in-right"]{transform:translateX(22px);}
[data-animate="in-left"].show,[data-animate="in-right"].show{transform:none;}
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* responsive tweaks */
@media (max-width: 991.98px){
  .org-card .line-horizontal{ top:220px; }
  .region-pill{ bottom:-14px; }
}.org-root {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 76px;
}.leaf-icon img {
    width: 50px;
}section.topsc {
    padding: 80px 0px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: #00000075;
        margin-top: -70px;
            padding-top: 120px;
    padding-bottom: 60px;
}section.topsc h1 {
    color: white;
}/* Accent */
.vm-gradient-text{
  background:linear-gradient(90deg,#0e6fff,#00bfa6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Card shell */
.vm-card{
  background:#fff; border:1px solid #eef1f5; border-radius:1rem; padding:1rem 1rem;
  box-shadow:0 10px 30px rgba(12,18,34,.06); transition:transform .25s ease, box-shadow .25s ease;
}
.vm-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(12,18,34,.12); }

/* Photo with Ken Burns and glow */
.vm-photo{ position:relative; border-radius:1rem; overflow:hidden; }
.vm-photo img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.06);
  animation:vm-kenburns 12s ease-in-out infinite;
}
@keyframes vm-kenburns{
  0%,100%{ transform:scale(1.06) translate3d(0,0,0) }
  50%{ transform:scale(1.14) translate3d(1.5%, -1.5%, 0) }
}
.vm-label{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:.4rem .7rem; border-radius:999px; font-weight:700; font-size:.85rem;
  background:linear-gradient(90deg,#0e6fff,#00bfa6); color:#fff; box-shadow:0 8px 22px rgba(12,18,34,.18);
}
.vm-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 70% 20%, rgba(14,111,255,.18), transparent 60%),
             radial-gradient(60% 60% at 20% 80%, rgba(0,191,166,.16), transparent 60%);
}

/* Decorative corner blob */
.vm-blob{
  position:absolute; right:-120px; top:-120px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(14,111,255,.18), rgba(0,191,166,.16));
  filter:blur(30px); opacity:.55; pointer-events:none;
}

/* Reveal on scroll */
#vision-mission [data-animate]{opacity:0; transform:translateY(16px); transition:all .6s ease;}
#vision-mission [data-animate].in{opacity:1; transform:none;}

/* Spacing tweaks on large screens */
@media (min-width: 992px){
  .vm-card{ padding:1.5rem 2rem; }
}

/* brand accent */
.strengths-badge{ background:linear-gradient(90deg,#0e6fff,#00bfa6); }
#strengths .gradient-text{
  background:linear-gradient(90deg,#0e6fff,#00bfa6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* dotted backdrop */
.bg-dots{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 99%, transparent) ,
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.35) 99%, transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.4) 99%, transparent);
  transform:translateY(-8px);
}

/* stat cards */
.s-card{
  background:#fff;border:1px solid #eef1f5;border-radius:1rem;padding:1.2rem 1rem;
  box-shadow:0 10px 30px rgba(12,18,34,.06);transition:.25s ease;
}
.s-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(12,18,34,.12); }
.s-icon{
  width:48px;height:48px;display:grid;place-items:center;border-radius:14px;margin-bottom:.5rem;
  background:linear-gradient(90deg,#0e6fff1a,#00bfa61a);color:#0e6fff;font-size:1.2rem;
}

/* panel */
.s-panel{
  border:1px solid #eef1f5;background:#fff;box-shadow:0 12px 36px rgba(12,18,34,.08);
}
.s-panel-gradient{
  position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(14,111,255,.18), rgba(0,191,166,.16));
  filter:blur(24px); opacity:.6; pointer-events:none;
}

/* bullets */
.s-bullets li{ margin:.3rem 0; color:#445; }
.s-bullets i{ color:#00bfa6; margin-right:.4rem; }

/* chips */
.s-chip{
  background:#f6f9ff;border:1px solid #e6eefc;border-radius:999px;padding:.35rem .7rem;
  font-weight:600;font-size:.85rem;color:#0c1222;display:inline-flex;align-items:center;
}
.s-chip i{ color:#0e6fff; }

/* photo */
.s-photo{ position:relative; overflow:hidden; }
.s-photo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform .6s ease; }
.s-photo:hover img{ transform:scale(1.1); }
.s-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 70% 20%, rgba(14,111,255,.15), transparent 60%),
             radial-gradient(70% 60% at 20% 80%, rgba(0,191,166,.12), transparent 60%);
}

/* reveal + counters */
#strengths [data-animate]{opacity:0; transform:translateY(16px); transition:all .6s ease;}
#strengths [data-animate].in{opacity:1; transform:none;}

@media (max-width: 991.98px){
  .s-photo{ margin-top:.5rem; }
}

/* Accent gradient text */
.fd-gradient{
  background:linear-gradient(90deg,#0e6fff,#00bfa6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Quote card */
.fd-quote{
  background:#fff; border:1px solid #eef1f5; border-radius:1rem; padding:1rem 1.1rem 1.1rem 3.25rem;
  position:relative; overflow:hidden;
}
.fd-quote i{
  position:absolute; left:1.1rem; top:.9rem; color:#0e6fff; opacity:.85;
}
.fd-quote:after{
  content:""; position:absolute; left:-28px; top:-28px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(14,111,255,.16), rgba(0,191,166,.14));
  filter:blur(18px);
}

/* Chips */
.fd-chip{
  background:#f6f9ff; border:1px solid #e6eefc; color:#0c1222; font-weight:600;
  border-radius:999px; padding:.4rem .7rem; display:inline-flex; align-items:center; font-size:.85rem;
}

/* Photo card */
.fd-card{ background:#ffffff; border:1px solid #eef1f5; }
.fd-edge{
  position:absolute; inset:0; border-radius:1.2rem; pointer-events:none;
  background:linear-gradient(90deg,#0e6fff22,#00bfa622);
}
.fd-photo img{ transform:scale(1.03); transition:transform .6s ease; }
.fd-card:hover .fd-photo img{ transform:scale(1.08); }
.fd-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 70% 20%, rgba(14,111,255,.18), transparent 60%),
             radial-gradient(70% 60% at 20% 80%, rgba(0,191,166,.16), transparent 60%);
}

/* Plaque */
.fd-plaque{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  background:#fff; border:1px solid #eef1f5; border-radius:999px; padding:.55rem 1rem; text-align:center;
  font-weight:800; letter-spacing:.02em; font-size:.9rem;    width: 80%;
}

/* Blob */
.fd-blob{
  position:absolute; right:-120px; top:-120px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(14,111,255,.18), rgba(0,191,166,.16));
  filter:blur(28px); opacity:.6; pointer-events:none;
}.fd-photo img {
    display: block;
    position: relative;
}<style>
/* container */
.logo-marquee{
  overflow:hidden;
  --gap: 2.5rem;
}
.logo-track{
  display:flex;
  width:max-content;
  gap: var(--gap);
  animation: logoscroll 28s linear infinite;
}
.logo-group{ /* groups repeat to allow seamless loop */ }
@keyframes logoscroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* because we duplicated once */
}

/* items */
.logo-item img{
  height:48px; width:auto; object-fit:contain;
  /*filter: grayscale(100%) contrast(1) opacity(.75);*/
  transition: filter .2s ease, transform .2s ease, opacity .2s ease;
}
.logo-item:hover img{
  filter: grayscale(0%) opacity(1);
  transform: translateY(-2px);
}

/* soft edges */
.logo-marquee .edge{
  position:absolute; top:0; bottom:0; width:60px; pointer-events:none;
  background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.logo-marquee .edge.left{ left:0; }
.logo-marquee .edge.right{ right:0; transform:scaleX(-1); }

/* pause on hover */
.logo-marquee:hover .logo-track{ animation-play-state: paused; }

/* responsive */
@media (min-width: 768px){ .logo-item img{ height:60px; } }

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation: none; }
}.logo-marquee.position-relative {
    overflow: hidden;
}


/*circle */

/* === ORG CIRCLE — precise alignment === */

/* card container */
.org-circle-card{
  overflow: visible !important;
  border: 1px solid #eef1f5;
  padding: 1.25rem 1rem 2.25rem;
  background:
    radial-gradient(60% 60% at 18% 18%, rgba(14,111,255,.08), transparent 60%),
    radial-gradient(60% 60% at 82% 82%, rgba(0,191,166,.08), transparent 60%),
    #fff;
}

/* stage (keeps perfect circle and respects column width) */
.org-circle-card .org-stage{
  /* Outer size of the stage */
  --size: clamp(340px, 92%, 520px);

  /* SVG ring is r=44 in a 100×100 viewBox → radius = 0.44 * size */
  --ringR: calc(var(--size) * 0.44);

  /* logo tile size & spacing from ring */
  --tile: 76px;        /* logo square (keeps logos crisp) */
  --gap: 18px;         /* small air gap between ring and tile */

  /* final node radius so tile kisses the ring on the inside edge */
  --nodeR: calc(var(--ringR) + (var(--tile) / 2) + var(--gap));

  width: var(--size);
  max-width: 100%;
  aspect-ratio: 1/1;
  margin-inline: auto;
  position: relative;
}

/* SVG ring (thin base + subtle animated sweep) */
.org-circle-card .org-ring{ position:absolute; inset:0; width:100%; height:100%; }
.org-circle-card .org-ring circle[stroke="#b8d8ff"]{ stroke-width: 2; }
.org-circle-card .ring-sweep{ transform-origin:50% 50%; }
.org-circle-card .ring-sweep circle{
  stroke-dasharray: 36 300;      /* shorter dash so it doesn’t look chunky */
  stroke-width: 2;
  animation: ringDash 10s linear infinite;
}
@keyframes ringDash{
  from{ stroke-dashoffset: 0; }
  to  { stroke-dashoffset: -336; }
}

/* center badge */
.org-circle-card .org-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 132px;
    transform: translate(-50%, -50%);
    text-align: center !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.org-circle-card .logo-round{
  width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:6px solid #eef4ff;
  animation: popIn .45s ease both;
}
@keyframes popIn{ from{ transform:scale(.85) } to{ transform:scale(1) } }

/* nodes placed exactly on the circle (inner edge kisses ring) */
.org-circle-card .org-node{
  /* set --theta per node inline (degrees) */
  position:absolute; left:41%; top:40%;
  transform: rotate(var(--theta)) translate(var(--nodeR)) rotate(calc(-1 * var(--theta)));
  transform-origin: center center;
}.leaf.text-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* tiles */
.org-circle-card .leaf .leaf-icon{
  width: var(--tile); height: var(--tile);
  border-radius: 18px; overflow:hidden; display:grid; place-items:center;
  background:#f2f7ff; box-shadow:0 14px 30px rgba(12,18,34,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.org-circle-card .leaf:hover .leaf-icon{
  transform: translateY(-4px) scale(1.04);
  box-shadow:0 22px 46px rgba(12,18,34,.28);
}
.org-circle-card .leaf .leaf-icon img{ max-width:80%; max-height:80%; object-fit:contain; }
.org-circle-card .leaf-name{ font-weight:700; font-size:.92rem; color:#0c1222; line-height:1.15; margin-top:.35rem; }


/* region pill */
.org-circle-card .region-pill{
  position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  background:#0c1222; color:#fff; border-radius:999px; padding:.45rem .9rem; font-weight:700; font-size:.85rem;
  box-shadow:0 10px 24px rgba(12,18,34,.2);
}

/* make sure ancestor containers don’t clip */
#about, .row, [class*="col-"]{ overflow: visible; }

/* mobile tweaks */
@media (max-width: 575.98px){
  .org-circle-card .org-stage{ --size: 98vw; --tile: 46px; --gap: -56px; }
  .org-circle-card .leaf-name{ font-size:.88rem; }
  .org-circle-card .org-node {
    left: 38%;
    top: 40%;
}
}

/* Add your own justify class (Bootstrap 4/5 don't include one) */
.text-justify { 
  text-align: justify !important;
  text-justify: inter-word;   /* nicer spacing where supported */
  hyphens: auto;              /* reduces big gaps; needs lang attribute */
}h1.font-weight-bold {
    font-weight: 700 !important;
}

/* hero */
.product-hero{
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(14,111,255,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 90%, rgba(0,191,166,.16), transparent 60%),
    linear-gradient(135deg,#0c1222 0%, #162961 55%, #0e6fff 120%);
  padding: 42px 0;
  position: relative;
  color:#fff;
}
.product-hero .ph-blob{
  position:absolute; width:320px; height:320px; border-radius:50%;
  filter:blur(26px); opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(14,111,255,.25), rgba(0,191,166,.18));
}
.product-hero .ph-blob.a{ right:-120px; top:-120px; }
.product-hero .ph-blob.b{ left:-140px; bottom:-140px; }

/* cards, chips, gradient button */
.p-card{ background:#fff; border:1px solid #eef1f5; box-shadow:0 12px 36px rgba(12,18,34,.08); }
.chip{
  background:#f6f9ff;border:1px solid #e6eefc;border-radius:999px;padding:.35rem .6rem;
  font-weight:600;font-size:.85rem;color:#0c1222;display:inline-flex;align-items:center;
}
.btn-gradient{
  background:linear-gradient(90deg,#0e6fff,#00bfa6); color:#fff;
}
.btn-gradient:hover{ color:#fff; filter:brightness(.98); }

/* gallery */
.p-main img{ transition: transform .6s ease; }
.p-main:hover img{ transform: scale(1.04); }
.thumb{
  border:1px solid #e8eef9; background:#fff; padding:3px; border-radius:10px; overflow:hidden;
  width:82px; height:62px; display:grid; place-items:center;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.active{ outline:3px solid #0e6fff44; }

/* spec cell */
.spec{ background:#f8fbff; border:1px solid #eaf2ff; border-radius:.75rem; padding:.75rem; }
.spec span{ display:block; font-size:.8rem; color:#6b7a90; }
.spec b{ font-size:.95rem; }

/* enquiry section */
#enquiry .form-control, #enquiry .form-select{ border-radius:.8rem; }

/* Hero */
.contact-hero{
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(14,111,255,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 90%, rgba(0,191,166,.16), transparent 60%),
    linear-gradient(135deg,#0c1222 0%, #162961 55%, #0e6fff 120%);
  color:#fff;
}
.contact-hero .c-blob{
  position:absolute; width:320px; height:320px; border-radius:50%;
  filter:blur(26px); opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(14,111,255,.25), rgba(0,191,166,.18));
}
.contact-hero .c-blob.a{ right:-120px; top:-120px; }
.contact-hero .c-blob.b{ left:-140px; bottom:-140px; }

/* Cards / UI */
.c-card{ border:1px solid #eef1f5; box-shadow:0 12px 36px rgba(12,18,34,.08); }
.btn-gradient{ background:linear-gradient(90deg,#0e6fff,#00bfa6); color:#fff; }
.btn-gradient:hover{ color:#fff; filter:brightness(.98); }

.chip{
  background:#f6f9ff;border:1px solid #e6eefc;border-radius:999px;padding:.35rem .6rem;
  font-weight:600;font-size:.85rem;color:#0c1222;display:inline-flex;align-items:center;
}

/* Form */
form .form-control, form .form-select{ border-radius:.8rem; }

/* Nav pills subtle style */
#officeTabs .nav-link{ border-radius:999px; }
#officeTabs .nav-link.active{
  color:#fff; background:linear-gradient(90deg,#0e6fff,#00bfa6);
  border-color:transparent;
}

/* Map ratio (Bootstrap has 21x9; included here for older bundles) */
.ratio-21x9{ --bs-aspect-ratio: 42.857%; }
div#menuutton a {
    white-space: nowrap;
    font-size: 14px;
}

@media screen and (max-width: 600px) {
 .social {
    display: none;
}.navbar-toggler {
    background: white;
}    .hero-slider {
        margin-top: auto;
    }.navbar.navbar-expand-lg.bg-white.shadow-soft a.navbar-brand.d-flex.align-items-center {
    color: black;
}.sticky-top.shadow-soft {
    background: white !important;
}.region-pill {
    display: none;
}.org-card .line-vertical {
    top: 156px;
}.leaf::before {
    top: -10px;
    height: 28px;
}nav.navbar.navbar-expand-lg.bg-white.shadow-soft.stickytop a.navbar-brand.d-flex.align-items-center {
    color: white;
}.container.hero-content {
    height: 474px;
}.hero-slider {
        min-height: auto;
    }
}