/* =========================================================
   NGIS — FUTURISTIC REDESIGN OVERRIDE
   ---------------------------------------------------------
   Add this file AFTER style.css and responsive.css.
   It keeps your existing HTML, images, Django templates,
   classes and functionality. No reference-image assets are used.
   Theme: deep navy/black + neon green + electric cyan.
   ========================================================= */

:root{
  --ngis-bg:#020711;
  --ngis-bg-2:#06101f;
  --ngis-panel:rgba(7,20,39,.72);
  --ngis-panel-strong:rgba(8,24,45,.9);
  --ngis-green:#00f57a;
  --ngis-green-2:#18ff91;
  --ngis-cyan:#00d9ff;
  --ngis-white:#f4f8ff;
  --ngis-muted:#a7b5c8;
  --ngis-border:rgba(0,217,255,.20);
  --ngis-border-green:rgba(0,245,122,.28);
  --ngis-glow:0 0 28px rgba(0,245,122,.16);
  --ngis-cyan-glow:0 0 30px rgba(0,217,255,.14);
  --orange:var(--ngis-green);
  --orange-dark:#00c966;
  --navy:var(--ngis-bg);
  --navy-light:#0b1c31;
  --navy-soft:#102941;
  --white:var(--ngis-white);
  --bg-light:#050d18;
  --ink:var(--ngis-white);
  --ink-muted:var(--ngis-muted);
  --border-soft:rgba(255,255,255,.10);
}

/* ---------- Global ---------- */
html{
  background:var(--ngis-bg);
}

body{
  color:var(--ngis-white);
  background:
    radial-gradient(circle at 75% 8%, rgba(0,217,255,.055), transparent 28%),
    radial-gradient(circle at 15% 35%, rgba(0,245,122,.035), transparent 24%),
    var(--ngis-bg);
}

h1,h2,h3,h4,h5{
  color:var(--ngis-white);
}

p{
  color:var(--ngis-muted);
}

::selection{
  background:rgba(0,245,122,.28);
  color:#fff;
}

/* Subtle futuristic grid texture without images */
section:not(.hero):not(.page-hero){
  background-image:
    linear-gradient(rgba(0, 13, 15, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,217,255,.018) 1px, transparent 1px);
  background-size:64px 64px;
}

.bg-light{
  background:
    radial-gradient(circle at 90% 10%, rgba(0,217,255,.06), transparent 25%),
    var(--ngis-bg-2);
}

.bg-navy{
  background:var(--ngis-bg);
}

/* ---------- Eyebrows / headings ---------- */
.eyebrow{
  color:orange;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.74rem;
}

.eyebrow::before{
  background:orange ;
 
}

.section-heading{
  color:var(--ngis-white);
}

.section-sub{
  color:var(--ngis-muted);
}

/* ---------- Navbar ---------- */
.ngis-navbar{
  height:78px;
  background:rgba(2,7,17,.82);
  border-bottom:1px solid rgba(0,217,255,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 35px rgba(0,0,0,.22);
}

.ngis-navbar .nav-inner{
  height:100%;
}

.nav-logo img{
  height: 100px;
  width:auto;
  filter:drop-shadow(0 0 10px rgba(0,245,122,.10));
}

.nav-links{
  gap:34px;
}

.nav-links a{
  color:rgba(244,248,255,.82);
  font-size:.9rem;
  font-weight:500;
}

.nav-links a::after{
  background:var(--ngis-green);
  box-shadow:0 0 9px rgba(0,245,122,.8);
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--ngis-green);
}

.nav-right{
  gap:18px;
}

.nav-toggle span{
  background:var(--ngis-white);
}

.mobile-menu{
  background:
    radial-gradient(circle at 100% 0, rgba(0,245,122,.08), transparent 30%),
    #030a15;
  border-left:1px solid rgba(0,217,255,.16);
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
}

.nav-overlay{
  background:rgba(0,3,10,.72);
  backdrop-filter:blur(5px);
}

/* ---------- Buttons ---------- */
.btn-ngis{
  border-radius:9px;
  padding:13px 25px;
  font-size:.88rem;
  letter-spacing:.01em;
}

.btn-primary{
  background:linear-gradient(135deg,var(--ngis-green),#00d96b);
  color:#00150a;
  border-color:var(--ngis-green);
  box-shadow:0 0 22px rgba(0,245,122,.18);
}

.btn-primary::before{
  background:#03120d;
}

.btn-primary:hover{
  color:var(--ngis-green);
  box-shadow:0 0 32px rgba(0,245,122,.28);
}

.btn-outline-light{
  color:var(--ngis-white);
  border-color:rgba(0,217,255,.35);
  background:rgba(0,217,255,.025);
}

.btn-outline-light:hover{
  color:#fff;
  border-color:var(--ngis-cyan);
  background:rgba(0,217,255,.08);
  box-shadow:0 0 24px rgba(0,217,255,.12);
}

.btn-outline-navy{
  color:var(--ngis-white);
  border-color:rgba(0,245,122,.28);
  background:rgba(0,245,122,.025);
}

.btn-outline-navy:hover{
  color:#00150a;
  background:var(--ngis-green);
  border-color:var(--ngis-green);
}

/* ---------- Preloader ---------- */
/* #preloader{
  background:
    radial-gradient(circle, rgba(0,245,122,.08), transparent 30%),
    #020711;
}

#preloader .loader-bar{
  background:rgba(255,255,255,.10);
}

#preloader .loader-bar span{
  background:linear-gradient(90deg,var(--ngis-cyan),var(--ngis-green));
  box-shadow:0 0 14px rgba(0,245,122,.7);
} */

/* ---------- Home hero ---------- */
.hero{
  min-height:680px;
  background:#020711;
}

.hero-media .hero-slide{
  filter:saturate(1.05) contrast(1.05);
}

.hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(2,7,17,.97) 0%,
      rgba(2,7,17,.88) 34%,
      rgba(2,7,17,.46) 67%,
      rgba(2,7,17,.72) 100%),
    linear-gradient(180deg,
      rgba(2,7,17,.50) 0%,
      rgba(2,7,17,.10) 48%,
      rgba(2,7,17,.92) 100%);
}

.hero-grain{
  opacity:.025;
}

.hero-orbit{
  border-color:rgba(0,217,255,.35);
  box-shadow:0 0 35px rgba(0,217,255,.08);
}

.hero-orbit::before{
  background:var(--ngis-cyan);
  box-shadow:0 0 15px rgba(0,217,255,.9);
}

.hero-eyebrow{
  color:var(--ngis-green);
}

.hero-eyebrow::before{
  background:var(--ngis-green);
}

.hero-heading{
  color:#fff;
  max-width:720px;
  text-shadow:0 4px 25px rgba(0,0,0,.30);
}

.hero-heading .text-orange,
.hero-heading .orange-heading{
  color:var(--ngis-green);
  text-shadow:0 0 20px rgba(0,245,122,.22);
}

.hero-desc{
  color:rgba(244,248,255,.78);
  max-width:560px;
}

.hero-scroll{
  color:rgba(244,248,255,.66);
}

.hero-scroll .arrow{
  background:linear-gradient(var(--ngis-green),transparent);
}

.ff-line{
  background:linear-gradient(90deg,transparent,var(--ngis-green) 60%,transparent);
  box-shadow:0 0 10px rgba(0,245,122,.45);
}

/* ---------- Shared glass panels ---------- */
.about-preview .media-frame,
.service-detail .media-frame,
.map-frame{
  border:1px solid var(--ngis-border);
  background:var(--ngis-panel);
  box-shadow:var(--ngis-cyan-glow);
}

.about-preview .media-frame::after{
  background:linear-gradient(90deg,var(--ngis-green),var(--ngis-cyan));
  box-shadow:0 0 15px rgba(0,245,122,.6);
}

/* ---------- Home services ---------- */
/* .services-grid{
  gap:22px !important;
} */

.service-card{
  border:1px solid rgba(0,217,255,.18);
  border-radius:14px;
  background:#061221;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}

.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  border:1px solid transparent;
  transition:.45s ease;
}

.service-card:hover{
  border-color:rgba(0,245,122,.48);
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 28px rgba(0,245,122,.10);
}

.service-card:hover::after{
  border-color:rgba(0,245,122,.28);
  box-shadow:inset 0 0 24px rgba(0,245,122,.045);
}

.service-overlay{
  background:
    linear-gradient(to top,
      rgba(2,9,20,.98) 0%,
      rgba(2,9,20,.76) 45%,
      rgba(2,9,20,.12) 100%);
}

.service-card .icon-wrap{
  width:44px;
  height:44px;
  border-radius:10px;
  background:rgba(0,245,122,.055);
  border:1px solid rgba(0,245,122,.24);
}

.service-card .icon-wrap svg{
  stroke:var(--ngis-green);
}

.service-card h3{
  color:#fff;
}

.service-card p{
  color:rgba(220,231,244,.72);
} 

.link-arrow{
  color:var(--ngis-green);
}

.link-arrow:hover{
  color:orange;
  /* color:var(--ngis-cyan); */
}

.link-arrow svg{
  stroke:currentColor;
}

/* ---------- Stats strip ---------- */
.stats-strip{
  color:var(--ngis-white);
}

.stat-item{
  position:relative;
}

.stat-item .stat-number{
  color:var(--ngis-green);
  text-shadow:0 0 16px rgba(0,245,122,.18);
}

.stat-item .stat-label{
  color:var(--ngis-muted);
}

/* ---------- Inner page heroes ---------- */
/* /* ---------- 11. INNER PAGE HERO ---------- */

.page-hero {
    position: relative;
    min-height: 56vh;
    display: flex;
    align-items: flex-end;
    padding-top: var(--nav-height);
    overflow: hidden;
    background: var(--navy);
}

/* Background image */
.page-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
    z-index: 0;
}

/* Dark gradient - mainly behind text */
.page-hero .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(7, 26, 51, 0.90) 0%,
        rgba(7, 26, 51, 0.65) 38%,
        rgba(7, 26, 51, 0.25) 68%,
        rgba(7, 26, 51, 0.05) 100%
    );
}

/* Content */
.page-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 70px 24px 64px;
}

.page-hero h1 {
    color: var(--white);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
}

.page-hero .section-sub {
    color: rgba(255, 255, 255, 0.82);
} 

/* ---------- About page ---------- */
.story-track{
  border-left:1px solid rgba(0,217,255,.22);
}

.story-item::before{
  background:var(--ngis-green);
  border:3px solid var(--ngis-bg);
  box-shadow:0 0 0 1px rgba(0,245,122,.35),0 0 16px rgba(0,245,122,.32);
}

.story-item .story-year,
.orange-heading{
  color:var(--ngis-green);
}

.story-item h4,
.value-card h4{
  color:#fff;
}

.story-item p,
.value-card p{
  color:var(--ngis-muted);
}

.value-card{
  background:linear-gradient(145deg,rgba(8,24,45,.82),rgba(4,13,25,.76));
  border:1px solid rgba(0,217,255,.15);
  border-top:2px solid var(--ngis-green);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
}

.value-card:hover{
  border-color:rgba(0,245,122,.35);
  box-shadow:0 20px 45px rgba(0,0,0,.32),0 0 25px rgba(0,245,122,.08);
}

/* ---------- Service detail pages ---------- */
.service-detail{
  border-bottom:1px solid rgba(0,217,255,.10);
}

.service-number{
  color:var(--ngis-cyan);
}

.service-detail h3{
  color:#fff;
}

.service-detail p{
  color:var(--ngis-muted);
}

.service-detail .media-frame{
  border-radius:14px;
}

.service-detail .media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border:1px solid rgba(0,217,255,.16);
  border-radius:inherit;
}

/* ---------- Contact ---------- */
.contact-info-item .icon-wrap{
  width:48px;
  height:48px;
  border-radius:12px;
  background:rgba(0,245,122,.05);
  border:1px solid rgba(0,245,122,.22);
}

.contact-info-item .icon-wrap svg{
  stroke:var(--ngis-green);
}

.contact-info-item h4{
  color:#fff;
}

.contact-info-item p{
  color:var(--ngis-muted);
}

.contact-form-wrap{
  background:
    linear-gradient(145deg,rgba(8,25,46,.88),rgba(3,11,22,.92));
  border:1px solid rgba(0,217,255,.18);
  border-radius:16px;
  box-shadow:0 25px 70px rgba(0,0,0,.32),0 0 30px rgba(0,217,255,.06);
}

.form-group label{
  color:rgba(244,248,255,.88);
}

.form-control{
  color:#fff;
  background:rgba(1,8,17,.72);
  border:1px solid rgba(0,217,255,.16);
  border-radius:9px;
}

.form-control::placeholder{
  color:rgba(167,181,200,.55);
}

.form-control:focus{
  color:#fff;
  background:rgba(1,8,17,.92);
  border-color:var(--ngis-green);
  box-shadow:0 0 0 3px rgba(0,245,122,.07),0 0 18px rgba(0,245,122,.08);
}

.map-frame{
  background:#061221;
}

/* ---------- CTA ---------- */
.cta-section{
  background:
    radial-gradient(circle at 0 100%,rgba(0,245,122,.13),transparent 28%),
    radial-gradient(circle at 100% 0,rgba(0,217,255,.10),transparent 30%),
    #061221;
  border-top:1px solid rgba(0,217,255,.15);
  border-bottom:1px solid rgba(0,217,255,.15);
}

.cta-section::before{
  background:radial-gradient(circle,rgba(0,245,122,.13),transparent 70%);
}

.cta-section h2{
  color:#fff;
}

.cta-section p{
  color:rgba(244,248,255,.68);
}

/* ---------- Footer ---------- */
.ngis-footer{
  background:
    radial-gradient(circle at 15% 0,rgba(0,245,122,.055),transparent 25%),
    #020711;
  border-top:1px solid rgba(0,217,255,.10);
  padding-top:65px;
}

.footer-grid{
  border-bottom-color:rgba(0,217,255,.10);
}

.footer-brand p,
.footer-col p,
.footer-col address{
  color:rgba(167,181,200,.70);
}

.footer-col h5{
  color:orange;
}

.footer-col a{
  color:rgba(220,231,244,.72);
}

.footer-col a:hover{
  color:var(--ngis-green);
}

.footer-social a{
  border-color:rgba(0,217,255,.18);
  background:rgba(0,217,255,.025);
}

.footer-social a:hover{
  background:var(--ngis-green);
  border-color:var(--ngis-green);
  box-shadow:0 0 18px rgba(0,245,122,.24);
}

.footer-bottom{
  color:rgba(167,181,200,.62);
  border-top-color:rgba(0,217,255,.08);
}

/* ---------- Reveal polish ---------- */
.in-view{
  filter:none;
}

.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-image{
  will-change:transform,opacity;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- Responsive theme tuning ---------- */
@media (max-width:1024px){
  .ngis-navbar{
    height:74px;
  }

  .nav-logo img{
    height:56px;
  }

  .hero-overlay{
    background:
      linear-gradient(90deg,rgba(2,7,17,.96),rgba(2,7,17,.70)),
      linear-gradient(180deg,rgba(2,7,17,.40),rgba(2,7,17,.90));
  }
}

@media (max-width:768px){
  .ngis-navbar{
    height:70px;
  }

  .nav-logo img{
    height:52px;
  }

  .hero{
    min-height:680px;
  }

  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(2,7,17,.60),rgba(2,7,17,.88) 62%,rgba(2,7,17,.98)),
      linear-gradient(90deg,rgba(2,7,17,.85),rgba(2,7,17,.35));
  }

  .hero-content{
    padding-top:40px;
  }

  .service-card{
    border-radius:12px;
  }

  .contact-form-wrap{
    padding:24px;
  }
}

@media (max-width:480px){
  .ngis-navbar{
    height:66px;
  }

  .nav-logo img{
    height:48px;
  }

  .hero-heading{
    font-size:clamp(2rem,10vw,2.8rem);
  }

  .hero-desc{
    font-size:.94rem;
  }

  .btn-ngis{
    padding:12px 19px;
  }

  section:not(.hero):not(.page-hero){
    background-size:48px 48px;
  }
}



/* cursor */
/* =========================================
   NGIS CUSTOM CURSOR
   Green Arrow + Orange Glow
   ========================================= */
:root {
    --ngis-green: #47d82a;
    --ngis-orange: #ff9d00;
}
html,
body,
a,
button,
.btn,
input,
textarea,
select {
    cursor: none !important;
}

/* Main cursor */
.ngis-cursor {
    position: fixed;
    top: 0;
    left: 0;

    width: 16px;
    height: 16px;

    pointer-events: none;
    z-index: 999999;

    transform: translate(-50%, -50%);
}

/* GREEN NGIS ARROW */
.ngis-cursor img {
    width: 16px;
    height: 16px;

    object-fit: contain;
    display: block;

    position: relative;
    z-index: 3;
}

/* ORANGE CIRCLE */
.ngis-cursor-ring {
    position: absolute;

    width: 32px;
    height: 32px;

    left: -8px;
    top: -8px;

    border: 1px solid var(--ngis-orange);
    border-radius: 50%;

    opacity: 0.65;

    box-shadow:
        0 0 8px var(--ngis-orange),
        0 0 18px rgba(255, 157, 0, 0.4);

    transition:
        width 0.25s ease,
        height 0.25s ease,
        left 0.25s ease,
        top 0.25s ease,
        opacity 0.25s ease;
}

/* ORANGE CIRCLE ON HOVER */
.ngis-cursor.hover .ngis-cursor-ring {
    width: 48px;
    height: 48px;

    left: -16px;
    top: -16px;

    opacity: 0.9;
}


/* =========================================
   ORANGE TRAIL DOTS
   ========================================= */

.ngis-trail {
    position: fixed;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    pointer-events: none;
    z-index: 999998;

    background: var(--ngis-orange);

    box-shadow:
        0 0 6px var(--ngis-orange),
        0 0 14px rgba(255, 157, 0, 0.55);

    transform: translate(-50%, -50%);

    animation: ngisTrailFade 0.6s ease-out forwards;
}

@keyframes ngisTrailFade {

    0% {
        opacity: 0.9;
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0);
    }
}


/* =========================================
   ORANGE CLICK RIPPLE
   ========================================= */

.ngis-click {
    position: fixed;

    width: 20px;
    height: 20px;

    border: 1px solid var(--ngis-orange);
    border-radius: 50%;

    pointer-events: none;
    z-index: 999997;

    transform: translate(-50%, -50%);

    animation: ngisClick 0.6s ease-out forwards;
}

@keyframes ngisClick {

    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }

    100% {
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (hover: none), (pointer: coarse) {

    html,
    body,
    a,
    button,
    .btn,
    input,
    textarea,
    select {
        cursor: auto !important;
    }

    .ngis-cursor,
    .ngis-trail,
    .ngis-click {
        display: none !important;
    }
}





/* =========================================
   CTA SPOTLIGHT REVEAL
   ========================================= */

.cta-section {
    position: relative;
    overflow: hidden;

    min-height: 400px;

    background: #000;

    --mouse-x: 50%;
    --mouse-y: 50%;
}


/* Background image */
.cta-bg-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    pointer-events: none;
}


/* -----------------------------------------
   BLACK COVER
   ----------------------------------------- */

.cta-black {
    position: absolute;
    inset: 0;

    z-index: 2;

    background: #000;

    pointer-events: none;

    /* Spotlight hole */
    -webkit-mask-image:
        radial-gradient(
            circle 190px at var(--mouse-x) var(--mouse-y),
            transparent 0%,
            transparent 45%,
            black 75%,
            black 100%
        );

    mask-image:
        radial-gradient(
            circle 190px at var(--mouse-x) var(--mouse-y),
            transparent 0%,
            transparent 45%,
            black 75%,
            black 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/* -----------------------------------------
   CONTENT
   ----------------------------------------- */

.cta-content {
    position: relative;

    z-index: 3;

    min-height: 400px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}


/*
   Make content hidden normally.
   Spotlight will reveal it.
*/
.cta-content {
    -webkit-mask-image:
        radial-gradient(
            circle 190px at var(--mouse-x) var(--mouse-y),
            black 0%,
            black 45%,
            transparent 75%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            circle 190px at var(--mouse-x) var(--mouse-y),
            black 0%,
            black 45%,
            transparent 75%,
            transparent 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 768px) {

    .cta-section {
        min-height: 600px;
    }

    .cta-content {
        min-height: 600px;

        flex-direction: column;

        justify-content: center;

        align-items: flex-start;
    }

    .cta-black {
        -webkit-mask-image:
            radial-gradient(
                circle 130px at var(--mouse-x) var(--mouse-y),
                transparent 0%,
                transparent 45%,
                black 75%,
                black 100%
            );

        mask-image:
            radial-gradient(
                circle 130px at var(--mouse-x) var(--mouse-y),
                transparent 0%,
                transparent 45%,
                black 75%,
                black 100%
            );
    }

    .cta-content {
        -webkit-mask-image:
            radial-gradient(
                circle 130px at var(--mouse-x) var(--mouse-y),
                black 0%,
                black 45%,
                transparent 75%,
                transparent 100%
            );

        mask-image:
            radial-gradient(
                circle 130px at var(--mouse-x) var(--mouse-y),
                black 0%,
                black 45%,
                transparent 75%,
                transparent 100%
            );
    }
}

/* =========================================
   CTA - HIDE EVERYTHING UNTIL MOUSE ENTERS
   ========================================= */

.cta-section {
    --mouse-x: 0px;
    --mouse-y: 0px;
}


/* Hide image completely when cursor is outside */
.cta-section:not(.spotlight-active) .cta-black {
    -webkit-mask-image: none;
    mask-image: none;

    background: #000;
}


/* Hide content when cursor is outside */
.cta-section:not(.spotlight-active) .cta-content {
    -webkit-mask-image: none;
    mask-image: none;

    opacity: 0;
}


/* Show content only through spotlight */
.cta-section.spotlight-active .cta-content {
    opacity: 1;

    -webkit-mask-image:
        radial-gradient(
            circle 190px at var(--mouse-x) var(--mouse-y),
            black 0%,
            black 45%,
            transparent 75%
        );

    mask-image:
        radial-gradient(
            circle 190px at var(--mouse-x) var(--mouse-y),
            black 0%,
            black 45%,
            transparent 75%
        );
}


/* Spotlight black layer */
.cta-section.spotlight-active .cta-black {
    -webkit-mask-image:
        radial-gradient(
            circle 190px at var(--mouse-x) var(--mouse-y),
            transparent 0%,
            transparent 45%,
            black 75%,
            black 100%
        );

    mask-image:
        radial-gradient(
            circle 190px at var(--mouse-x) var(--mouse-y),
            transparent 0%,
            transparent 45%,
            black 75%,
            black 100%
        );
}








/* ==========================================================
   Sticky Shrink & Spin — applied directly to existing markup
   (.services-grid / .service-card / .service-overlay)
   Place this AFTER your original services CSS so it overrides it.
   No new HTML elements needed.
   ========================================================== */

.services-grid {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5vh;
  padding-top: 5vh;
  padding-bottom: 30vh;
  grid-template-columns: none;

}

.service-card {
  position: sticky;
  top: 10vh;
  width: 900px;
  max-width: 90vw;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
  background: transparent;
}
.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.service-card .service-overlay {
  transform-origin: center center;
  will-change: transform;
}


/* FINAL SERVICE CARD SIZE */

.services-grid .service-card {
    position: sticky !important;
    top: 10vh;

    width: 900px !important;
    height: 350px !important;

    max-width: 90vw !important;
    min-width: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 auto;
    padding: 0 !important;

    border-radius: 28px;
    overflow: hidden;

    background: transparent !important;

    transform-origin: center center;
    will-change: transform;
}

.services-grid .service-card > img {
    position: absolute;
    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    object-position: center;

    display: block;
}








/* =========================================================
   NGIS VISUAL SERVICES
   ALL CLASSES ARE UNIQUE
   ========================================================= */

.ngis-vs-wrapper {
    width: 100%;
    overflow: hidden;
}


/* ================================
   PANEL
   ================================ */

.ngis-vs-panel {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;
}


.ngis-vs-dark {
    background: #020b14;
    color: #ffffff;
}


.ngis-vs-light {
    background: #f5f6f7;
    color: #071a33;
}


/* ================================
   CONTAINER
   ================================ */

.ngis-vs-container {
    width: min(1200px, 90%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.15fr
        .85fr;

    align-items: center;

    gap: 80px;
}


/* ================================
   VISUAL AREA
   ================================ */

.ngis-vs-visual {
    position: relative;

    height: 560px;

    width: 100%;

    perspective: 1200px;

    overflow: visible;

    will-change: transform;
}


/* ================================
   IMAGE BASE
   ================================ */

.ngis-vs-image {
    position: absolute;

    overflow: hidden;

    border-radius: 10px;

    will-change: transform, opacity;

    transition:
        transform 1.2s cubic-bezier(.16,1,.3,1),
        opacity 1s ease,
        filter 1s ease;
}


.ngis-vs-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.08);

    transition:
        transform 1.5s cubic-bezier(.16,1,.3,1);
}


/* ================================
   CENTER IMAGE
   ================================ */

.ngis-vs-image-center {

    width: 390px;
    height: 500px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(.92);

    z-index: 5;

    opacity: .55;

    box-shadow:
        0 35px 90px rgba(0,0,0,.35);
}


/* ================================
   LEFT IMAGE
   ================================ */

.ngis-vs-image-left {

    width: 220px;
    height: 330px;

    left: 0;
    top: 100px;

    transform:
        rotate(-8deg)
        translateX(-90px);

    z-index: 2;

    opacity: .15;

    filter: brightness(.65);
}


/* ================================
   RIGHT IMAGE
   ================================ */

.ngis-vs-image-right {

    width: 220px;
    height: 330px;

    right: 0;
    top: 125px;

    transform:
        rotate(8deg)
        translateX(90px);

    z-index: 1;

    opacity: .15;

    filter: brightness(.65);
}


/* ================================
   ACTIVE STATE
   ================================ */

.ngis-vs-panel.ngis-vs-active
.ngis-vs-image-center {

    transform:
        translate(-50%, -50%)
        scale(1);

    opacity: 1;
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-image-center img {

    transform: scale(1);
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-image-left {

    transform:
        rotate(-8deg)
        translateX(-30px);

    opacity: .72;
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-image-right {

    transform:
        rotate(8deg)
        translateX(30px);

    opacity: .65;
}


/* ================================
   INFO
   ================================ */

.ngis-vs-info {

    position: relative;

    z-index: 10;

    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-info {

    opacity: 1;

    transform: translateY(0);
}


/* ================================
   NUMBER
   ================================ */

.ngis-vs-number {

    display: block;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 80px;

    line-height: .8;

    font-weight: 700;

    letter-spacing: -.06em;

    margin-bottom: 25px;

    opacity: .08;
}


/* ================================
   LABEL
   ================================ */

.ngis-vs-label {

    display: block;

    color: #ffae00;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    margin-bottom: 12px;
}


/* ================================
   HEADING
   ================================ */

.ngis-vs-info h2 {

    margin: 0 0 25px;

    color: #ffae00;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(34px, 4vw, 56px);

    line-height: 1.05;

    letter-spacing: -.04em;
}


/* ================================
   LIST
   ================================ */

.ngis-vs-info ul {

    list-style: none;

    padding: 0;

    margin: 0 0 30px;
}


.ngis-vs-info li {

    position: relative;

    padding-left: 17px;

    margin-bottom: 8px;

    font-size: 14px;

    line-height: 1.5;
}


.ngis-vs-info li::before {

    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    left: 0;
    top: 8px;

    background: #20e66b;
}


/* ================================
   LINK
   ================================ */

.ngis-vs-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #20e66b;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(32,230,107,.45);

    transition:
        gap .35s ease,
        border-color .35s ease;
}


.ngis-vs-link:hover {

    color: #20e66b;

    gap: 18px;

    border-color: #20e66b;
}


/* ================================
   TEXT STAGGER
   ================================ */

.ngis-vs-info > * {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.16,1,.3,1);
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-info > * {

    opacity: 1;

    transform: translateY(0);
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-number {
    transition-delay: .05s;
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-label {
    transition-delay: .12s;
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-info h2 {
    transition-delay: .2s;
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-info ul {
    transition-delay: .3s;
}


.ngis-vs-panel.ngis-vs-active
.ngis-vs-link {
    transition-delay: .42s;
}


/* ================================
   MOBILE
   ================================ */

@media (max-width: 900px) {

    .ngis-vs-panel {

        min-height: auto;

        padding:
            90px 0
            100px;
    }


    .ngis-vs-container {

        grid-template-columns: 1fr;

        gap: 60px;
    }


    .ngis-vs-visual {

        height: 480px;
    }


    .ngis-vs-image-center {

        width: 320px;
        height: 420px;
    }


    .ngis-vs-image-left,
    .ngis-vs-image-right {

        width: 180px;
        height: 270px;
    }


    .ngis-vs-info {

        max-width: 600px;
    }
}


@media (max-width: 600px) {

    .ngis-vs-container {

        width: 88%;
    }


    .ngis-vs-panel {

        padding:
            75px 0
            85px;
    }


    .ngis-vs-visual {

        height: 370px;
    }


    .ngis-vs-image-center {

        width: 240px;
        height: 320px;
    }


    .ngis-vs-image-left,
    .ngis-vs-image-right {

        width: 125px;
        height: 190px;
    }


    .ngis-vs-image-left {

        left: 0;
        top: 85px;
    }


    .ngis-vs-image-right {

        right: 0;
        top: 100px;
    }


    .ngis-vs-number {

        font-size: 60px;
    }


    .ngis-vs-info h2 {

        font-size: 34px;
    }
}










/* =========================================================
   NGIS VALUE SECTION — ORBIT ANIMATION
   ========================================================= */

.ngis-value-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.95fr);
    align-items: center;
    gap: 50px;
    margin-top: 10px;
}

.ngis-value-story {
    min-width: 0;
}

.ngis-value-animation {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   ORBIT
   ========================================================= */

.ngis-orbit {
    position: relative;
    width: 500px;
    height: 500px;
    max-width: 100%;
    flex-shrink: 0;
}


/* =========================================================
   CIRCULAR RINGS
   ========================================================= */

.ngis-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ngis-ring-outer {
    width: 430px;
    height: 430px;
    border: 1px solid rgba(7, 26, 51, 0.22);
    box-sizing: border-box;
}

.ngis-ring-dashed {
    width: 395px;
    height: 395px;
    border: 1px dashed rgba(247, 148, 29, 0.55);
    box-sizing: border-box;

    animation: ngisOrbitRotate 25s linear infinite;
}

.ngis-ring-inner {
    width: 350px;
    height: 350px;
    border: 1px solid rgba(7, 26, 51, 0.10);
    box-sizing: border-box;
}


/* =========================================================
   DASHED RING ROTATION
   ========================================================= */

@keyframes ngisOrbitRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* =========================================================
   CONNECTING LINES
   ========================================================= */

.ngis-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 430px;
    height: 1px;

    background: rgba(7, 26, 51, 0.08);

    transform-origin: center;
    pointer-events: none;

    z-index: 1;
}

.ngis-line-top,
.ngis-line-bottom {
    transform: translate(-50%, -50%);
}

.ngis-line-right,
.ngis-line-left {
    transform: translate(-50%, -50%) rotate(90deg);
}


/* =========================================================
   MOVING OBJECTS
   IMPORTANT:
   JS controls left/top position.
   DO NOT ADD top:-218px OR top:-158px.
   ========================================================= */

.ngis-orbit-runner {
    position: absolute;

    left: 0;
    top: 0;

    width: 30px;
    height: 30px;

    z-index: 10;

    pointer-events: none;

    will-change: left, top, transform;
}


/* =========================================================
   ORANGE MOVING ARROW
   ========================================================= */

.ngis-runner-arrow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 0;
    height: 0;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 18px solid var(--ngis-green);

    transform: translate(-50%, -50%);

    filter:
        drop-shadow(0 3px 5px rgba(29, 247, 33, 0.411));
}


/* =========================================================
   BLUE MOVING DOT
   ========================================================= */

.ngis-dot-runner {
    width: 18px;
    height: 18px;

    z-index: 10;
}

.ngis-runner-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:orange;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 0 4px rgba(255, 177, 22, 0.1),
        0 0 14px rgba(255, 146, 22, 0.785);
}


/* =========================================================
   CENTER CIRCLE
   ========================================================= */

.ngis-orbit-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 180px;
    height: 180px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid rgba(7, 26, 51, 0.10);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    box-shadow:
        0 20px 50px rgba(7, 26, 51, 0.10);

    z-index: 15;
}


/* =========================================================
   CENTER TEXT
   ========================================================= */

.ngis-center-logo {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;

    color: #071a33;
}

.ngis-center-tagline {
    margin-top: 12px;

    max-width: 140px;

    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.7px;
    text-transform: uppercase;

    color: rgba(7, 26, 51, 0.55);
}


/* =========================================================
   FOUR ORBIT NODES
   ========================================================= */

.ngis-orbit-node {
    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid rgba(7, 26, 51, 0.12);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    z-index: 20;

    box-shadow:
        0 12px 30px rgba(7, 26, 51, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   NODE POSITIONS
   ========================================================= */

.ngis-node-top {
    left: 50%;
    top: 0;

    transform: translateX(-50%);
}

.ngis-node-right {
    right: 0;
    top: 50%;

    transform: translateY(-50%);
}

.ngis-node-bottom {
    left: 50%;
    bottom: 0;

    transform: translateX(-50%);
}

.ngis-node-left {
    left: 0;
    top: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   NODE HOVER
   ========================================================= */

.ngis-node-top:hover,
.ngis-node-bottom:hover {
    transform: translateX(-50%) scale(1.06);

    box-shadow:
        0 18px 38px rgba(7, 26, 51, 0.14);
}

.ngis-node-left:hover,
.ngis-node-right:hover {
    transform: translateY(-50%) scale(1.06);

    box-shadow:
        0 18px 38px rgba(7, 26, 51, 0.14);
}


/* =========================================================
   NODE ICON
   ========================================================= */

.ngis-node-icon {
    width: 26px;
    height: 26px;

    margin-bottom: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(247, 148, 29, 0.10);

    color: #f7941d;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   NODE TEXT
   ========================================================= */

.ngis-orbit-node strong {
    font-size: 12px;
    line-height: 1.2;

    color: #071a33;
}

.ngis-orbit-node span {
    margin-top: 4px;

    font-size: 8px;
    line-height: 1.2;

    color: rgba(7, 26, 51, 0.55);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .ngis-value-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ngis-value-animation {
        min-height: 520px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .ngis-value-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 10px;
    }

    .ngis-value-animation {
        min-height: 410px;
        width: 100%;
    }

    .ngis-orbit {
        width: 360px;
        height: 360px;
    }


    /* OUTER CIRCLE */

    .ngis-ring-outer {
        width: 315px;
        height: 315px;
    }

    /* DASHED CIRCLE */

    .ngis-ring-dashed {
        width: 290px;
        height: 290px;
    }

    /* INNER CIRCLE */

    .ngis-ring-inner {
        width: 255px;
        height: 255px;
    }


    /* CONNECTION LINES */

    .ngis-line {
        width: 315px;
    }


    /* CENTER */

    .ngis-orbit-center {
        width: 130px;
        height: 130px;
    }

    .ngis-center-logo {
        font-size: 25px;
    }

    .ngis-center-tagline {
        max-width: 105px;
        margin-top: 8px;
        font-size: 8px;
    }


    /* NODES */

    .ngis-orbit-node {
        width: 78px;
        height: 78px;
    }

    .ngis-node-icon {
        width: 21px;
        height: 21px;
        font-size: 11px;
    }

    .ngis-orbit-node strong {
        font-size: 10px;
    }

    .ngis-orbit-node span {
        font-size: 7px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .ngis-value-animation {
        min-height: 365px;
    }

    .ngis-orbit {
        width: 320px;
        height: 320px;
    }


    .ngis-ring-outer {
        width: 280px;
        height: 280px;
    }

    .ngis-ring-dashed {
        width: 258px;
        height: 258px;
    }

    .ngis-ring-inner {
        width: 230px;
        height: 230px;
    }


    .ngis-line {
        width: 280px;
    }


    .ngis-orbit-center {
        width: 115px;
        height: 115px;
    }

    .ngis-center-logo {
        font-size: 22px;
    }

    .ngis-center-tagline {
        max-width: 90px;
        font-size: 7px;
    }


    .ngis-orbit-node {
        width: 68px;
        height: 68px;
    }

    .ngis-node-icon {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .ngis-orbit-node strong {
        font-size: 9px;
    }

    .ngis-orbit-node span {
        font-size: 6px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ngis-ring-dashed {
        animation: none;
    }

    .ngis-orbit-node {
        transition: none;
    }
}






/* =========================================================
   NGIS LOGO — FIXED CONTAINER + HOVER ANIMATION
   ========================================================= */

.nav-logo.ngis-logo-hover {
    position: relative;

    width: 145px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-shrink: 0;
    overflow: visible;

    text-decoration: none;
    cursor: pointer;

    isolation: isolate;
}


/* =========================================================
   NGIS NAME
   ========================================================= */

.ngis-logo-name {
    position: absolute;

    left: 0;
    top: 0;

    width: 145px;
    height: 50px;

    display: flex;
    align-items: center;

    color: #ffffff;

    font-family: inherit;
    font-size: 30px;
    font-weight: 700;

    line-height: 1;
    letter-spacing: -1px;

    white-space: nowrap;

    /* Hidden initially */
    opacity: 0;

    transform: translateY(18px);

    z-index: 1;

    pointer-events: none;

    transition:
        transform 0.65s cubic-bezier(.16, 1, .3, 1),
        opacity 0.3s ease;
}


/* =========================================================
   FAST FORWARD ARROW
   ========================================================= */

.ngis-logo-symbol {
    position: absolute;

    left: 0;
    top: 50%;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    opacity: 1;

    z-index: 3;

    pointer-events: none;

    transition:
        transform 0.7s cubic-bezier(.16, 1, .3, 1),
        opacity 0.3s ease;
}


.ngis-logo-symbol img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    display: block;

    object-fit: contain;

    margin: 0;
    padding: 0;
}


/* =========================================================
   HOVER — NGIS FITS INSIDE THE CONTAINER
   ========================================================= */

.nav-logo.ngis-logo-hover:hover .ngis-logo-name {
    opacity: 1;

    transform: translateY(0);

    transition:
        transform 0.65s cubic-bezier(.16, 1, .3, 1) 0.05s,
        opacity 0.35s ease 0.05s;
}


/* =========================================================
   HOVER — ARROW GOES UP
   ========================================================= */

.nav-logo.ngis-logo-hover:hover .ngis-logo-symbol {
    transform:
        translateY(-145%)
        translateX(8px)
        scale(0.85);

    opacity: 0;

    transition:
        transform 0.7s cubic-bezier(.16, 1, .3, 1),
        opacity 0.25s ease 0.35s;
}


/* =========================================================
   ARROW MOTION
   ========================================================= */

.nav-logo.ngis-logo-hover:hover .ngis-logo-symbol img {
    animation: ngis-arrow-move 0.3s ease-out;
}

@keyframes ngis-arrow-move {

    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
    }

}


/* =========================================================
   MOUSE LEAVE
   ========================================================= */

.nav-logo.ngis-logo-hover:not(:hover) .ngis-logo-name {
    opacity: 0;

    transform: translateY(18px);
}


.nav-logo.ngis-logo-hover:not(:hover) .ngis-logo-symbol {
    transform:
        translateY(-50%)
        translateX(0)
        scale(1);

    opacity: 1;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .nav-logo.ngis-logo-hover {
        width: 48px;
        height: 48px;
    }

    .ngis-logo-name {
        display: none;
    }

    .ngis-logo-symbol {
        width: 38px;
        height: 38px;
    }

}

















/* =========================================================
   NGIS FINAL MOBILE RESPONSIVE FIX
   Put this at the VERY BOTTOM of ngis-redesign.css
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL MOBILE SAFETY
   --------------------------------------------------------- */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    * {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       NAVBAR
       ----------------------------------------------------- */

    .ngis-navbar {
        width: 100%;
        height: 70px !important;
    }

    .ngis-navbar .nav-inner {
        width: 100%;
        max-width: 100%;
        height: 100%;

        padding-left: 18px;
        padding-right: 18px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    /* -----------------------------------------------------
       LOGO CONTAINER
       ----------------------------------------------------- */

    .nav-logo.ngis-logo-hover {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px;
        max-width: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: visible;
    }


    /* -----------------------------------------------------
       IMPORTANT:
       Override the old generic .nav-logo img rule
       ----------------------------------------------------- */

    .nav-logo.ngis-logo-hover .ngis-logo-symbol {
        position: absolute;

        left: 50%;
        top: 50%;

        width: 36px !important;
        height: 36px !important;

        transform:
            translate(-50%, -50%)
            translate3d(0, 0, 0)
            scale(1);

        opacity: 1;

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 5;

        pointer-events: none;
    }


    .nav-logo.ngis-logo-hover
    .ngis-logo-symbol img {

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain;

        display: block;

        margin: 0;
        padding: 0;
    }


    /* -----------------------------------------------------
       NGIS NAME
       On mobile there is no mouse hover.
       Keep it hidden.
       ----------------------------------------------------- */

    .nav-logo.ngis-logo-hover .ngis-logo-name {
        display: none !important;
    }


    /* -----------------------------------------------------
       MOBILE NAVIGATION
       ----------------------------------------------------- */

    .nav-links {
        display: none !important;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .nav-right .desktop-only {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;

        width: 42px;
        height: 42px;

        padding: 0;
        margin: 0;

        align-items: center;
        justify-content: center;

        flex-direction: column;

        background: transparent;
        border: 0;
    }

    .nav-toggle span {
        width: 25px;
        height: 2px;

        margin: 4px 0;

        display: block;

        background: #ffffff !important;
    }


    /* -----------------------------------------------------
       MOBILE MENU
       ----------------------------------------------------- */

    .mobile-menu {
        width: min(340px, 88vw) !important;

        max-width: 88vw;

        height: 100dvh;

        padding:
            95px
            26px
            30px;

        gap: 26px;

        overflow-y: auto;
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;
    }


    .mobile-menu a {
        font-size: 1.35rem;

        line-height: 1.2;
    }


    .mobile-menu .btn-ngis {
        width: 100%;
        max-width: 100%;
    }


    /* -----------------------------------------------------
       OVERLAY
       ----------------------------------------------------- */

    .nav-overlay {
        width: 100%;
        height: 100%;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero {
        width: 100%;
        min-height: 680px !important;
        overflow: hidden;
    }

    .hero-media {
        width: 100%;
        height: 100%;
    }

    .hero-slide {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;

        padding-left: 18px;
        padding-right: 18px;
    }


    /* -----------------------------------------------------
       HERO BUTTONS
       ----------------------------------------------------- */

    .hero-actions {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        gap: 12px;
    }

    .hero-actions .btn-ngis {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       ALL CONTAINERS
       ----------------------------------------------------- */

    .container-ngis {
        width: 100%;
        max-width: 100%;

        padding-left: 18px;
        padding-right: 18px;
    }


    /* -----------------------------------------------------
       TWO COLUMNS → ONE COLUMN
       ----------------------------------------------------- */

    .row-flex {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 30px;
    }

    .col-half {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }


    /* -----------------------------------------------------
       IMAGES
       ----------------------------------------------------- */

    .media-frame {
        width: 100%;
        max-width: 100%;

        overflow: hidden;
    }

    .media-frame img {
        width: 100%;
        max-width: 100%;

        height: auto;

        object-fit: cover;
    }


    /* -----------------------------------------------------
       SECTION HEADINGS
       ----------------------------------------------------- */

    .section-heading {
        max-width: 100%;

        font-size:
            clamp(
                1.75rem,
                7vw,
                2.4rem
            );
    }

    .section-sub {
        max-width: 100%;

        font-size: 0.96rem;

        line-height: 1.65;
    }


    /* -----------------------------------------------------
       SERVICE GRID
       ----------------------------------------------------- */

    .services-grid {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr !important;

        gap: 22px;
    }

    .service-card {
        width: min(100%, 320px) !important;

        height: 320px !important;

        margin-left: auto;
        margin-right: auto;
    }


    /* Disable desktop hover transforms on touch */
    .service-card:hover {
        transform: none;
    }


    /* -----------------------------------------------------
       SERVICE DETAIL
       ----------------------------------------------------- */

    .service-detail,
    .service-detail.reverse {

        width: 100%;

        display: flex;

        flex-direction: column !important;

        gap: 28px;

        padding:
            40px 0;
    }

    .service-detail .media-frame img {
        width: 100%;
        height: 280px;

        object-fit: cover;
    }


    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */

    .contact-form-wrap {
        width: 100%;
        max-width: 100%;

        padding: 22px !important;

        box-sizing: border-box;
    }

    .form-row {
        display: flex;
        flex-direction: column;

        gap: 0;
    }

    .form-row > * {
        width: 100%;
    }


    /* -----------------------------------------------------
       MAP
       ----------------------------------------------------- */

    .map-frame {
        width: 100%;
        max-width: 100%;

        height: 320px;

        overflow: hidden;
    }

    .map-frame iframe {
        width: 100%;
        height: 100%;

        border: 0;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1fr !important;

        gap: 32px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;

        gap: 12px;

        text-align: center;
    }

}


/* =========================================================
   480px
   ========================================================= */

@media (max-width: 480px) {

    .ngis-navbar {
        height: 66px !important;
    }

    .ngis-navbar .nav-inner {
        padding-left: 15px;
        padding-right: 15px;
    }


    .nav-logo.ngis-logo-hover {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px;
        max-width: 44px;
    }


    .nav-logo.ngis-logo-hover
    .ngis-logo-symbol {

        width: 34px !important;
        height: 34px !important;
    }


    .nav-toggle {
        width: 40px;
        height: 40px;
    }


    .hero {
        min-height: 650px !important;
    }


    .hero-heading {
        font-size:
            clamp(
                1.85rem,
                9vw,
                2.5rem
            );

        line-height: 1.08;
    }


    .hero-desc {
        font-size: 0.94rem;
    }


    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn-ngis {
        width: 100%;
    }


    .service-card {
        width: 100% !important;
        max-width: 320px;

        height: 320px !important;
    }


    .page-hero {
        min-height: 48vh;
    }

    .page-hero-content {
        padding:
            50px
            18px
            44px;
    }


    .contact-form-wrap {
        padding: 18px !important;
    }


    .map-frame {
        height: 280px;
    }

}


/* =========================================================
   VERY SMALL PHONES — 320px / 375px
   ========================================================= */

@media (max-width: 375px) {

    .ngis-navbar .nav-inner {
        padding-left: 12px;
        padding-right: 12px;
    }


    .nav-logo.ngis-logo-hover {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px;
    }


    .nav-logo.ngis-logo-hover
    .ngis-logo-symbol {

        width: 32px !important;
        height: 32px !important;
    }


    .hero-heading {
        font-size: 1.7rem;
    }


    .section-heading {
        font-size: 1.55rem;
    }


    .container-ngis {
        padding-left: 15px;
        padding-right: 15px;
    }


    .mobile-menu {
        width: 90vw !important;
        max-width: 90vw;

        padding-left: 22px;
        padding-right: 22px;
    }

}