/* =========================================================
   Netstager — Header & Footer CSS (extracted)
   Auto-generated from style.css + style2.css.
   Load AFTER Bootstrap and AFTER typography.css.
   ========================================================= */


/* ---------- from style.css ---------- */

/* ── 1. CSS CUSTOM PROPERTIES ─────────────────────────────── */

/* ── 2. FLUID REM — HTML FONT-SIZE ───────────────────────── */

/*
  Desktop reference: 1920 px → 1 rem = 16 px
  Formula: 100vw × 16 ÷ 1920 = 0.8333vw
*/

/*
  Tablet ≤ 992 px:
  Reference: 768 px → 1 rem = 16 px
  Formula: 100vw × 16 ÷ 768
  At 992px → ~20.7px | At 768px → 16px | At 600px → ~12.5px
*/

/*
  Mobile ≤ 767 px:
  Reference: 370 px → 1 rem = 16 px
  Formula: 100vw × 16 ÷ 370
  At 767px → ~33px | At 370px → 16px
*/

/* ── 3. GLOBAL RESET ──────────────────────────────────────── */

/* h1–h4 font-size / font-weight / line-height / color / margin → typography.css */

/* ── 4. CONTAINER ─────────────────────────────────────────── */

/* ── 5. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 2.906rem 0.75rem 1.375rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  border: 0.031rem solid #ffffff;
  border-radius: 0.5rem;
  background: url(../images/contact-icon.png) no-repeat right 1.5rem center transparent;
  background-size: 0.75rem;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}

.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

.btn-secondary {
  background-color: #fff;
  color: #000;
  border-color: #fff;
}
.btn-secondary:hover {
  background-color: #86BC24;
  background: #86BC24 url(../images/contact-icon-h.png) no-repeat right 1.5rem center;background-size: 0.75rem;
  color: #fff;
  border-color: #86BC24;
}
.btn-primary{  background-color: #000;
  color: #fff;
  border-color: #000;}

  .btn-primary:hover{ background: #86BC24 url(../images/contact-icon-h.png) no-repeat right 1.5rem center;background-size: 0.75rem;
  color: #fff;
  border-color: #fff;}
  a.btn.btn-primary.trans {
    background-color: transparent;
    border: 0.031rem solid #fff;
    display: inline-block;
    width: max-content;
}

a.btn.btn-primary.trans:hover {
    background: #86BC24 url(../images/contact-icon-h.png) no-repeat right 1.5rem center;background-size: 0.75rem;
    border: 0.031rem solid #86BC24;
    display: inline-block;
    width: max-content;
}
.btn-white {
  display: inline-flex;
  background: var(--color-bg-white);
  color: var(--color-text-dark);
  border-color: var(--color-bg-white);
}
.btn-white:hover {
  background: var(--color-accent);
  color: var(--color-bg-dark);
  border-color: var(--color-accent);
  transform: translateY(-0.125rem);
}

.btn-outline-white {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-0.125rem);
}


.mega-cta {
    background: url(../images/mega-cta-Bg.png) no-repeat center;
    background-size: 100%;
    padding: 2rem 1.5rem;
    border-radius: 0.625rem;
    color: #fff;
    height: 30.563rem;
    margin-left: 6.25rem;
}
/* ── 6. HEADER ────────────────────────────────────────────── */
html {
  font-size: calc(100vw * 16 / 1920);
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
  -webkit-text-size-adjust: 100%;
}
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
 background: #fff;
  transition: background 0.35s ease, border-color 0.35s ease;
  border-bottom: 0.031rem solid #9f9f9f9e;
}

.site-header.hm{
   background:rgb(0 0 0 / 0%);
  backdrop-filter: blur(1.25rem);           /* 20px @16px */
  -webkit-backdrop-filter: blur(1.25rem);
  border-bottom: 1px solid rgba(159, 159, 159, 0.13);
}

/* Homepage dark header — scrolled */

.site-header.hm.scrolled {
  background: rgba(0, 0, 0, 0.89);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* All pages — compact padding on scroll */

.site-header.scrolled .header-inner {
  padding-block: 1.5rem;
}

/* Inner pages — add subtle shadow on scroll */

.site-header:not(.hm).scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

/* ── Header inner row ── */

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 1.5rem;                    /* 40px @16px */
  gap: 0;
  transition: padding-block 0.35s ease;
}

/* ── Logo ── */

.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.logo img {                     /* 34px @16px */
  width: 11.75rem;
  display: block;
}

/* ── Primary nav — absolutely centred in header ── */

.nav-primary {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
}

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  padding: 1.5rem 1.0625rem;                /* 8px 17px */
  font-size: 1.25rem;                       /* 20px @16px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  color:#000;
  border-radius: 0.375rem;
  transition: color 0.22s ease, background-color 0.22s ease;
  white-space: nowrap;
}

.site-header.hm .nav-link{color: #FFFFFF;}

.nav-link:hover {
    color: #86BC24;
    background-color: rgba(255, 255, 255, 0.07);
}

.nav-link.active { color: #84cc16; }

/* ── Header right — contact CTA ── */

.header-actions {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2.906rem 0.75rem 1.375rem;
  font-size: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.625rem;
  background: url(../images/contact-icon.png) no-repeat right 1.5rem center #000;
  background-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.hm .btn-contact{background: url(../images/contact-icon.png) no-repeat right 1.5rem center transparent;}

.btn-contact:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: #86BC24 url(../images/contact-icon-h.png) no-repeat right 1.5rem center;background-size: 0.75rem;
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.15); color: #fff;
}

/* Close button — hidden on desktop, shown only inside mobile drawer */

.nav-close { display: none; }

/* ── Hamburger (hidden on desktop) ── */

.hamburger {
  display: none;
 flex-direction: column;
    gap: 0.3125rem;
    padding: 0.5rem;
    margin-left: 1rem;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 1.5rem;
  height: 1.5px;                             /* hairline — px intentional */
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-full);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }

.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }

.hamburger.active span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

/* Inner pages — dark header needs dark hamburger lines */

.site-header:not(.hm) .hamburger span {
  background: #111312;
}

/* ── 7. HERO SECTION ──────────────────────────────────────── */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(2.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero inner — holds the Bootstrap row */

/* Hero content column */

/* Hero headline */

/* Hero sub-copy */

/* Hero visual column */

@keyframes bannerFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    filter: drop-shadow(0 2rem 4rem rgba(132, 204, 22, 0.35));
  }
  50% {
    transform: translateY(-1.5rem) rotate(2deg);
    filter: drop-shadow(0 3rem 5rem rgba(132, 204, 22, 0.5));
  }
}

/* ── 7b. HERO TITLE — LETTER ANIMATION HELPERS ───────────── */

/*
  .hero-word  — wraps each word; overflow:hidden clips the slide-up so
                letters appear to emerge from the baseline upward.
  .hero-char  — each individual letter; GSAP drives y / opacity.
  The .visually-hidden span keeps the full text for screen readers.
*/

/* Space between hero words — keeps words separated after GSAP split */

/* Hide the SR-only duplicate from view */

/* ── 8. TRUSTED ARCHITECTS SECTION ───────────────────────── */

/* Trust-partner logo row */

/* Vertical divider between logos */

/* Body copy below logos */

/* ── 9. PARTNERS SECTION ──────────────────────────────────── */

/* ── Marquee wrapper — clips the scrolling track ── */

/* ── Scrolling track ── */

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* -50% = one full set width (2 sets total) */
}

/* Pause on hover */

/* ── Individual logo item ── */

/* ── CTA Button ── */

/* ── 10. WHY BRANDS TRUST US ──────────────────────────────── */

/* ── Shared card base ── */

/* ── Light cards ── */

/* Stat style (1000+) */

/* ── Dark left card ── */

/* Feature list */

/* Dark card CTA */

/* ── Responsive ── */

/* ── 11. SOLUTIONS BUILT FOR DIGITAL TRANSFORMATION ──────── */

/* Section wrapper */

/* ── Centred heading above the stripes ── */

/* ── Content wrapper ── */

/* ── Left column — label + CTA ── */

/* ── Right column ── */

/* ── Partner list ── */

/* ── slut-item link wrapper ── */

/* Icon container */

/* Text block */

/* ── Dark section variant ── */

/* ── Sticky-stack scroll effect (desktop ≥992px) ─────────── */

/* Each cover pins to the top of the viewport as it scrolls into view.
   Because every panel has a solid background and shares top: 0,
   later siblings paint over earlier ones in DOM order — producing
   the layered scroll-stack effect from the reference video. */

@media (min-width: 992px) {
  .solutionBuiltCvr.reveal-section,
  .solutionBuiltCvr.reveal-section.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Ready to Transform CTA ── */

ul.social-media li a span {
    display: inline-block;
    margin-right: 1rem;
}

ul.social-media li a {
    display: flex;
    align-items: center;
}

ul.social-media li {
    margin-bottom: 1.5rem;
}

/* ── Responsive ── */

/* ── 12. FOOTER ────────────────────────────────────────────── */

.site-footer {
  background:#000 url(../images/footnet.png) no-repeat top center; background-size: 100%;
  
  position: relative;
  overflow: hidden;
  padding-top:32rem;
  padding-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════
   12a. CLIENT LOGOS — IMPACTFUL EXPERIENCES
═══════════════════════════════════════════════════════════ */

/* Section heading */

/* Each marquee row */

/* Track — flex, wide enough to scroll */

/* Row 1 scrolls LEFT */

/* Row 2 scrolls RIGHT */

@keyframes clientScrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes clientScrollRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Individual logo card */

/* Color on hover */

/* Pause animation on hover over the row */

/* ═══════════════════════════════════════════════════════════
   12b. STORIES OF IMPACT
═══════════════════════════════════════════════════════════ */

/* Left-corner decorative background image */

/* Container sits above bg image */

/* Left column text colors for dark bg */

/* ── Slider — no border, no box ── */

/* Individual slides — hidden by default, shown when .active */

/* Stars row — using star.png images */

/* Quote text */

/* Divider */

/* Navigation row: author LEFT, arrows RIGHT */

/* Arrow buttons */

/* Author block — sits to the right of arrows */

/* Decorative watermark text */

.footer-inner {
  position: relative;
  z-index: 2;
}

.footer-top {
  margin-bottom: var(--sp-16);
}

.iso {
    display: flex;
    align-items: center;
    justify-content: center;
}

.iso li {
    width: 100;
}

.iso img {
    width: 4.25rem;
    margin-left: 1rem;
}

/* footer-nav — layout from Bootstrap row g-4 / col-lg-3 */

.footer-nav { }

.footer-col-title {
  font-size: 1.5rem;                      /* 13px @16px */
  font-weight: 400;
  color: #636363;
  margin-bottom: 1rem;
  line-height: 2rem;'Geist', 'Inter', system-ui, -apple-system, sans-serif
}

.footer-col-title--mt { margin-top:2rem; }

.footer-col ul {
  display: flex;
  flex-direction: column;
      gap: 0.75rem; margin-bottom: 3.5rem;
}

.footer-col ul li a,.list-unstyled li {
  font-size: 1.25rem;                       /* 14px @16px */
  color: #fff;
  transition: color 0.2s ease;
  line-height: 1.75rem;font-weight: 400;
}

.footer-col ul li a:hover { color:#5a9a0a; }

/* Footer bottom bar */

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ffffff14;
}

.footer-copy {
  font-size: 1.5rem;
  line-height: auto;
  color: #ffffff59;
}

/* ── 10. SCROLL ANIMATIONS ────────────────────────────────── */

/* ── Scroll reveal ── */

.reveal-section {
  opacity: 0;
  transform: translateY(3.5rem);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children inside revealed sections */

.reveal-section.is-visible .slut-item:nth-child(1) { transition-delay: 0.05s; }

.reveal-section.is-visible .slut-item:nth-child(2) { transition-delay: 0.12s; }

.reveal-section.is-visible .slut-item:nth-child(3) { transition-delay: 0.19s; }

.reveal-section.is-visible .slut-item:nth-child(4) { transition-delay: 0.26s; }

.reveal-section.is-visible .slut-item:nth-child(5) { transition-delay: 0.33s; }

/* ── 10b. EXTENDED SCROLL REVEAL — staggered children & headings ── */

/* Section headings fade up slightly after the section enters */

.reveal-section h2,
.reveal-section h3,
.reveal-section .why-card-dark-title {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.reveal-section.is-visible h2,
.reveal-section.is-visible h3,
.reveal-section.is-visible .why-card-dark-title {
  opacity: 1;
  transform: translateY(0);
}

/* Cards / repeated children fade up with a small stagger */

.reveal-section .why-card,
.reveal-section .blogBoxCvr,
.reveal-section .prdctDrpDwnCvr,
.reveal-section .footer-col,
.reveal-section .cl-logo,
.reveal-section .partner-logo,
.reveal-section .trustpart li,
.reveal-section .soi-slide.active {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.is-visible .why-card,
.reveal-section.is-visible .blogBoxCvr,
.reveal-section.is-visible .prdctDrpDwnCvr,
.reveal-section.is-visible .footer-col,
.reveal-section.is-visible .cl-logo,
.reveal-section.is-visible .partner-logo,
.reveal-section.is-visible .trustpart li,
.reveal-section.is-visible .soi-slide.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger first ~8 children so the cascade reads as a wave */

.reveal-section.is-visible .why-card:nth-child(1),
.reveal-section.is-visible .blogBoxCvr:nth-child(1),
.reveal-section.is-visible .prdctDrpDwnCvr:nth-child(1),
.reveal-section.is-visible .footer-col:nth-child(1),
.reveal-section.is-visible .trustpart li:nth-child(1) { transition-delay: 0.08s; }

.reveal-section.is-visible .why-card:nth-child(2),
.reveal-section.is-visible .blogBoxCvr:nth-child(2),
.reveal-section.is-visible .prdctDrpDwnCvr:nth-child(2),
.reveal-section.is-visible .footer-col:nth-child(2),
.reveal-section.is-visible .trustpart li:nth-child(2) { transition-delay: 0.16s; }

.reveal-section.is-visible .why-card:nth-child(3),
.reveal-section.is-visible .blogBoxCvr:nth-child(3),
.reveal-section.is-visible .prdctDrpDwnCvr:nth-child(3),
.reveal-section.is-visible .footer-col:nth-child(3),
.reveal-section.is-visible .trustpart li:nth-child(3) { transition-delay: 0.24s; }

.reveal-section.is-visible .why-card:nth-child(4),
.reveal-section.is-visible .blogBoxCvr:nth-child(4),
.reveal-section.is-visible .footer-col:nth-child(4),
.reveal-section.is-visible .trustpart li:nth-child(4) { transition-delay: 0.32s; }

.reveal-section.is-visible .why-card:nth-child(5) { transition-delay: 0.40s; }

.reveal-section.is-visible .why-card:nth-child(6) { transition-delay: 0.48s; }

/* Respect users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {
  .reveal-section,
  .reveal-section h2,
  .reveal-section h3,
  .reveal-section .why-card-dark-title,
  .reveal-section .why-card,
  .reveal-section .blogBoxCvr,
  .reveal-section .prdctDrpDwnCvr,
  .reveal-section .footer-col,
  .reveal-section .cl-logo,
  .reveal-section .partner-logo,
  .reveal-section .trustpart li,
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 10c. IMAGE HOVER EFFECTS ────────────────────────────── */

/* Containers that need clean clipping for zoom */

.blogimage,
.prdctDrpDwnCvr,
.why-card-visual,
.soi-bg-img,
.cl-logo,
.partner-logo {
  overflow: hidden;
}

/* Base transition on common image targets */

.why-card-img,
.blogimage img,
.prdctDrpDwnCvr img,
.slut-icon img,
.partner-logo img,
.cl-logo img,
.blogBoxCvr img,.sd-work-img-main{
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease;
  will-change: transform;
}

/* Card image zoom on hover */

/* Lift the card itself for a soft elevation feel */

.why-card,
.blogBoxCvr,
.prdctDrpDwnCvr {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}

.why-card:hover,
.blogBoxCvr:hover,
.prdctDrpDwnCvr:hover {
  transform: translateY(-6px);
}

/* Service / partnership list icons get a subtle pop */

/* Marquee logos brighten + scale on hover */

/* Mega-menu thumbnail icons */

.mega-menu li a img,
.mega-menu .prdctDrpDwnCvr img {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-menu li a:hover img {
  transform: scale(1.1);
}

/* Trust badges subtle hover */

/* ── Work cards (work.html + "More Interesting Works" on case studies) ── */

/* Image-only hover — zoom the thumbnail; card / badge / title left untouched. */

/* ══════════════════════════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════════════════════════ */

/* ── Services Hero ── */

/* Decorative vertical stripes */

/* ── Service Category Section ── */

/* Image block — fills the full column height */

/* Right column inner padding matches homepage slut layout */

/* Digital Marketing — image on right */

/* ── CTA Strip ── */

/* ── Active nav link on services page ── */

.services-page .nav-link.active {
  color: var(--color-accent);
}

.services-page .nav-link.active::after {
  width: 100%;
  background: var(--color-accent);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  ≤ 992px
   html font-size: calc(100vw * 16 / 768)  →  all rem scales auto
══════════════════════════════════════════════════════════════ */

@media all and (max-width:992px) {
  .hamburger    { display: flex; background: transparent !important;}
  .logo         { margin-right: auto; }
  .header-inner { padding-block: 1.25rem; }
  .btn-contact  { padding: 0.75rem; font-size: 0; gap: 0; min-width: 2.75rem; }
  .nav-primary {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw;
    max-width: 50rem;
    height: 100vh;
    flex-direction: column;
    background: #111312;
    border-right: 1px solid rgba(255,255,255,0.07);
    padding: 3.5rem 0.75rem 3rem;
    overflow-y: auto;
    z-index: 1100;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(0.16,1,0.3,1),
                opacity   0.35s cubic-bezier(0.16,1,0.3,1),
                visibility 0s linear 0.42s;
    will-change: transform, opacity;
  }
  .nav-primary.nav-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.42s cubic-bezier(0.16,1,0.3,1),
                opacity   0.35s cubic-bezier(0.16,1,0.3,1),
                visibility 0s linear 0s;
  }
  .nav-primary.nav-open .nav-item { animation: navItemIn 0.38s cubic-bezier(0.16,1,0.3,1) both; }
  .nav-primary.nav-open .nav-item:nth-child(1) { animation-delay: 0.10s; }
  .nav-primary.nav-open .nav-item:nth-child(2) { animation-delay: 0.16s; }
  .nav-primary.nav-open .nav-item:nth-child(3) { animation-delay: 0.22s; }
  .nav-primary.nav-open .nav-item:nth-child(4) { animation-delay: 0.28s; }
  .nav-primary.nav-open .nav-item:nth-child(5) { animation-delay: 0.34s; }
  .nav-primary.nav-open .nav-item:nth-child(6) { animation-delay: 0.40s; }
  .nav-primary.nav-open .nav-item:nth-child(7) { animation-delay: 0.46s; }
  .nav-overlay { display: none !important; }
  .nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s; padding:0rem;
  }
  .nav-close:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
  .nav-primary .nav-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }
  .nav-primary .nav-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .nav-primary .nav-link {
    display: flex;
    align-items: center;
    padding: 0.9rem 0;
    width: 100%;
    border-radius: 0;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    transition: color 0.22s ease, padding-left 0.22s ease;
  }
  .nav-primary .nav-link::before {
    content: '';
    width: 0.35rem; height: 0.35rem;
    border-radius: 50%;
    background: #3ECF6B;
    margin-right: 0;
    opacity: 0;
    transform: scale(0);
    flex-shrink: 0;
    transition: opacity 0.22s, transform 0.22s, margin-right 0.22s;
  }
  .nav-primary .nav-link:hover { background: transparent; color: #fff; padding-left: 0.25rem; }
  .nav-primary .nav-link:hover::before { opacity: 1; transform: scale(1); margin-right: 0.5rem; }
  .site-footer{padding-top: 8rem;}
  .footer-col ul{margin-bottom: 2rem;}
  .header-actions {
    display: none !important;
}
  .site-header.scrolled .header-inner {
    padding-block: 1rem;
}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  ≤ 767px
   html font-size: calc(100vw * 16 / 370)  →  all rem scales auto
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .footer-bottom   { flex-direction: column; align-items: center; text-align: center; }
  .footer-col      { text-align: center; }
  .footer-col ul   { align-items: center; }
  .footer-col-title { text-align: center; }
  .footer-copy     { text-align: center; font-size: 1.2rem;}
}

/*

/* ══════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE
══════════════════════════════════════════════════════════════ */

/* ── Hero ── */

/* Green radial glow — right side, CSS only, no image */

/* Breadcrumb */

/* Hero title */

/* ── Responsive ── */

/* ── SD Intro Section ── */

/* Image wrap with GIF badge */

/* Stats bar */

/* ── Responsive ── */

/* ── SD Services We Offer ── */

/* Card */

/* Icon */

/* Card title */

/* Card description */

/* Enquire now link */

/* ── Responsive ── */

/* ── SD Tech Stack — inherits partners-section styles, minimal overrides ── */

/* ── SD How We Assure Best Results ── */

/* Accordion */

/* Show/hide +/− based on open state */

/* Body */

/* Responsive */

/* ── SD CTA Banner ── */

/* Why Choose */

/* Recent Works */

/* FAQ Section */

/* Digital Transformation CTA */

/* Contact Section */

/* Triangle pattern */

/* Form */

/* Phone field */

/* Select dropdown */

.prdctDrpDwnCvr a .prdctDrpDwnCntnt{  color: #636363;}
.prdctDrpDwnCvr a {
   display: inherit;
}
.prdctDrpDwnBtn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.prdctDrpDwnBtn .btn {
    padding: 0.75rem 2.906rem 0.75rem 0rem;
    background-color: transparent;
    border: 0;
}
@media (max-width: 980px) {
  .footer-copy {
    font-size: 1rem;
}
  ul.social-media li {
    margin-bottom: .5rem;
}
  .footer-col-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
  .footer-col ul li a, .list-unstyled li {
    font-size: 1rem;
    line-height: 1.5rem;
}
  section.storiesImpactCvr.reveal-section{
    margin-bottom: 2.5rem;
}
  .logo img {
    width: 8.75rem;
    display: block;
}
}

@media (max-width: 767px) {
  section.sd-contact.reveal-section .col-lg-8 {
    margin-top: 2rem;
    text-align: center;
}
}

/* Top border for first 4 items */

/*******************************************************/

/* 3rd column in every row */

/*******************************************************/

@media (max-width: 980px) {
  .iso img {
    width: 3rem;
    margin-left: 1rem;
}
}

@media (max-width: 767px) {
  .footer-col ul {
    margin-bottom: 1rem;
}
  section.storiesImpactCvr.reveal-section {
        margin-bottom: 0rem;
    }
  .footer-top {
    margin-bottom: 0rem;
}
}

/* Active page indicator — applied to .nav-item of the current page.
   Uses .nav-current (not .active) to avoid clashing with .has-mega-menu.active
   which already means "submenu is open". */

.nav-item.nav-current > .nav-link { color: #86BC24; }

@media (max-width: 991.98px) {
  .has-mega-menu { position: relative; }
  .has-mega-menu > .nav-link::after { display: none !important; content: none !important; }
  .submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 64px;
        height: 100%;
        min-height: 50px;
        max-height: 60px; /* don't grow with the open mega-menu */
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        color: inherit;
        cursor: pointer;
        z-index: 10;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
      }
  .submenu-toggle .submenu-arrow {
        position: relative;
        display: inline-block;
        width: 14px;
        height: 14px;
        font-size: 0; /* hide any text fallback */
      }
  .submenu-toggle .submenu-arrow::before,
      .submenu-toggle .submenu-arrow::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        transition: transform 0.3s ease, opacity 0.3s ease;
      }
  .submenu-toggle .submenu-arrow::before {
        /* horizontal bar — always visible */
        width: 14px;
        height: 2px;
        transform: translate(-50%, -50%);
      }
  .submenu-toggle .submenu-arrow::after {
        /* vertical bar — collapses when active to leave a minus */
        width: 2px;
        height: 14px;
        transform: translate(-50%, -50%);
      }
  .has-mega-menu.active > .submenu-toggle .submenu-arrow::after {
        transform: translate(-50%, -50%) scaleY(0);
        opacity: 0;
      }
  .has-mega-menu > .mega-menu {
        display: block !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
      }
}

/* ---------- from style2.css ---------- */

/* Bottom images */

.lifeatNetstger-Sec2 button.nav-link.active {
    border: 0 !important;
}

.lifeatNetstger-Sec2 .nav-link{
     padding: 0.5rem 2.5rem;
     line-height: 2.25rem;
    border: 0.063rem solid;
    border-radius: 2.188rem;
    border-top-left-radius:2.188rem;
    border-top-right-radius: 2.188rem;
}

.lifeatNetstger-Sec2  .nav-tabs .nav-link.active {
     padding: 0.5rem 2.5rem;
    border: 0.063rem solid;
    border-radius: 2.188rem;
    border-top-left-radius: 2.188rem;
    border-top-right-radius: 2.188rem;
  background-color: #000 !important;
  color: #fff !important;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #000 !important;
    color: #fff;
    background-color: #000 !important;
}

.nav-primary {
   position: inherit;
   transform: none; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 12%;
}

.nav-item {
    position: inherit;
}

.header-inner {
    position: inherit;
}

.mega-menu {
  position: absolute;
  left: 0;
  top: 80%;
  width: 100%;
  background: #0b0b0b;
  padding: 2.5rem 2.5rem;
  display: none;
  z-index: 999;
}

.site-header {
  overflow: visible !important;
}

.has-mega-menu:hover .mega-menu {
  display: block;
}

.MenuSmLHead {
    color: #fff;
    font-size: 1.5rem;
    line-height: 2.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 0.063rem solid #636363;
    margin-bottom: 1.5rem;
}

.mega-menu ul {
  list-style: none;
  padding: 0;
}

.mega-menu ul li {
  color: #aaa;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.mega-menu ul li:hover {
  color: #fff;
}

.mega-cta {
    background: url(../images/mega-cta-Bg.png) no-repeat center;
    background-size: 100%;
    padding: 2rem 1.5rem;
    border-radius: 0.625rem;
    color: #fff;
    height: 30.563rem;
    margin-left: 6.25rem;
}

.mega-menu a {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 0.938rem;
    color:#aaa;
}

.mega-menu li a img{
    width: 2rem;
}

.mega-cta .menuCTAhead {
    font-size: 1.75rem;
    line-height: 2.25rem;
    color: #FFFFFF;
}

.mega-cta p {
    font-size: 1.25rem;
    line-height: 2rem;
    color: #BABABA;margin-bottom: 2rem;
}

.abtHsMgaMnu .mega-cta {
    margin-left: 0rem;
}

.prdctDrpDwnCvr img {
    margin-bottom: 1.5rem;
    height: 15rem;
    width: 100%;
}

.prdctDrpDwnCntnt{
    color: #636363;
    margin-bottom: 2rem;
}

.prdctDrpDwnCvr a .prdctDrpDwnCntnt{  color: #636363;}

.prdctDrpDwnCvr a {
   display: inherit;
}

.prdctDrpDwnBtn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.prdctDrpDwnBtn .btn {
    padding: 0.75rem 2.906rem 0.75rem 0rem;
    background-color: transparent;
    border: 0;
}

.nav-link:focus, .nav-link:hover {
    color: #86BC24;
}

section.partners-section.sd-techstack.reveal-section.is-visible {
    padding-top: 0rem;
}

.prtnershipMeNU{
    column-count: 2;
}

@media (max-width: 980px) {
       html {
    font-size: calc(100vw * 16 / 767);
    scroll-behavior: smooth;
    scroll-padding-top: 1rem;
    -webkit-text-size-adjust: 100%;
}
  .prtnershipMeNU {
    column-count: 1;
}
  section.partners-section.sd-techstack.reveal-section.is-visible {
    padding-top: 3rem;
}
  .mega-menu {
    position: static;
    width: 100%;
    padding: 0;
    display: none;
  }
  .has-mega-menu.active .mega-menu {
    display: block;
  }
  .has-mega-menu > a::after {
    content: "▼";
    font-size: 0.75rem;
    transition: 0.3s;
  }
  .has-mega-menu.active > a::after {
    transform: rotate(180deg);
  }
  .mega-menu {
    position: static !important;
    display: none;
    width: 100%;
    height: auto;              /* IMPORTANT */
    overflow: visible;         /* IMPORTANT */
  }
  .has-mega-menu.active .mega-menu {
    display: block !important;
  }
  .mega-menu .container,
  .mega-menu .row {
    display: block !important;
    width: 100%;
  }
  .mega-menu .container {
    padding: 0rem 0.5rem;
}
  .MenuSmLHead {
    color: #fff;
    font-size: 1rem;
    line-height: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 0.063rem solid #636363;
    margin-bottom: 1.5rem; padding-top:1rem;
}
  .prdctDrpDwnCvr img {
    margin-bottom: 1rem;
    height: 9rem;
    width: 100%;
}
  .has-mega-menu .mega-menu .row {
    width: 108%;}
  .prdctDrpDwnCntnt {
    color: #636363;
    margin-bottom: 0.5rem;
}
  .mega-menu a{margin-bottom: 1rem;}
  .mega-cta {
    margin-left: 0rem;
    width: 50%;
}
  .mega-cta .menuCTAhead {
    font-size: 1.25rem;
    line-height: 2rem;}
  .nav-primary {
    justify-content: start;
    margin-left: 0%;
}
    .MenuSmLHead {
        color: #fff;
        font-size: 1rem;
        line-height: 1.25rem;
        padding-bottom: 1rem;
        border-bottom: 0.063rem solid #636363;
        margin-bottom: 1.5rem;
        padding-top: 1rem;
    }
}

@media (max-width: 767px) {
       html {
    font-size: calc(100vw * 16 / 370);
    scroll-behavior: smooth;
    scroll-padding-top: 1rem;
    -webkit-text-size-adjust: 100%;
}
  .mega-cta {
    width: 100%;
}
  section.partners-section.sd-techstack.reveal-section.is-visible {
    padding-top: 0rem;
}
  .lifeatNetstger-Sec2  .nav-tabs .nav-link.active {
    padding: 0.25rem 1.5rem;
    line-height: 1.5rem;
}
  button.nav-link {
    font-size: 1rem;
}
  .lifeatNetstger-Sec2 .nav-link {
   padding: 0.25rem 1.5rem;
    line-height: 1.5rem;
}
}


/* ── 12. FOOTER ────────────────────────────────────────────── */
.site-footer {
  background:#000 url(../images/footnet.png) no-repeat top center; background-size: 100%;
  
  position: relative;
  overflow: hidden;
  padding-top:32rem;
  padding-bottom: 2rem;
}

/* ═══