/* Bootstrap Icons CDN is loaded via <link> tags in each HTML page (non-blocking, parallel).
   @import was blocking CSS parsing until CDN response — removed to fix slow page loads. */

@layer tgi-icon-fallback {
  .bi-buildings::before,.bi-buildings-fill::before,
  .bi-building-fill::before,.bi-building-gear::before { content: "\f1dd"; }
  .bi-heart-pulse::before,.bi-heart-pulse-fill::before { content: "\f415"; }
  .bi-cup-hot::before { content: "\f2e0"; }
  .bi-cup-hot-fill::before { content: "\f2de"; }
  .bi-rocket::before,.bi-rocket-takeoff::before,
  .bi-rocket-takeoff-fill::before,.bi-rocket-fill::before { content: "\f46e"; }
  .bi-airplane::before,.bi-airplane-fill::before { content: "\f144"; }
  .bi-car-front::before,.bi-car-front-fill::before { content: "\f5ea"; }
  .bi-hospital::before,.bi-hospital-fill::before { content: "\f424"; }
  .bi-shield-check-fill::before,.bi-shield-check::before { content: "\f4b5"; }
  .bi-twitter-x::before { content: "\f5ef"; }
  .bi-box-fill::before,.bi-box-seam-fill::before { content: "\f1c8"; }
  .bi-scissors-fill::before { content: "\f520"; }
}

/* ============================================================================
   TGI FUTURISTIC LAYER  v4.0   ·   Fortune-500 enterprise upgrade
   Loaded AFTER style.css + enterprise.css. Covers ent-* AND legacy
   footer#footer / .footer-top / .social-links so the whole 55-page
   site reads as one cohesive brand.
   ============================================================================ */

:root{
  --tgi-fx-bg-0:#1a5a4e; --tgi-fx-bg-1:#226c5d; --tgi-fx-bg-2:#2c826f; --tgi-fx-bg-3:#3a9684;
  --tgi-fx-ink:#f0fff8; --tgi-fx-ink-soft:#d4ede0; --tgi-fx-ink-mute:#9fc4b6;
  --tgi-fx-line:rgba(122,255,200,0.16); --tgi-fx-line-strong:rgba(122,255,200,0.36);
  --tgi-fx-glass:rgba(36,108,95,0.45);
  --tgi-fx-green:#2dd4aa; --tgi-fx-green-3:#10b981; --tgi-fx-green-mid:#488f82; --tgi-fx-green-deep:#06322c;
  --tgi-fx-neon:#5cffb6; --tgi-fx-mint:#a3e6d0;
  --tgi-fx-grad-brand:linear-gradient(135deg,#226c5d 0%,#2c826f 35%,#3a9684 65%,#5fb39d 100%);
  --tgi-fx-grad-soft:linear-gradient(135deg,#226c5d 0%,#3a9684 60%,#52ad97 100%);
  --tgi-fx-grad-glow:linear-gradient(135deg,#10b981 0%,#2dd4aa 50%,#5cffb6 100%);
  --tgi-fx-grad-hero:radial-gradient(1200px 700px at 18% 25%,rgba(45,212,170,.38),transparent 60%),radial-gradient(1100px 650px at 82% 75%,rgba(92,255,182,.40),transparent 65%),linear-gradient(160deg,#226c5d 0%,#2c826f 45%,#3a9684 100%);
  --tgi-fx-glow-sm:0 0 12px rgba(92,255,182,.45);
  --tgi-fx-glow-md:0 0 30px rgba(92,255,182,.55);
  --tgi-fx-shadow-1:0 10px 30px rgba(6,32,26,.40),0 2px 6px rgba(0,0,0,.18);
  --tgi-fx-shadow-2:0 24px 60px rgba(6,32,26,.50),0 6px 16px rgba(0,0,0,.22);
  --tgi-fx-radius:16px; --tgi-fx-radius-lg:24px;
  --tgi-fx-ease:cubic-bezier(.22,.61,.36,1);
  --tgi-fx-ease-out:cubic-bezier(.16,1,.3,1);
  --tgi-fx-font-display:'Space Grotesk','Syne','Inter',system-ui,sans-serif;
  --tgi-fx-font-body:'Inter','Manrope',system-ui,sans-serif;
}

html{scroll-behavior:smooth} html,body{overflow-x:hidden}
body.tgi-dark{background:var(--tgi-fx-bg-0);color:var(--tgi-fx-ink);-webkit-font-smoothing:antialiased}
body{font-family:var(--tgi-fx-font-body)}
::selection{background:var(--tgi-fx-neon);color:#04140e}
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#0e3530}
::-webkit-scrollbar-thumb{background:var(--tgi-fx-grad-glow);border-radius:10px}
h1,h2,h3,h4,h5,.ent-h1,.ent-h2,.ent-h3{font-family:var(--tgi-fx-font-display);letter-spacing:-.015em;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}

/* Scroll progress */
.tgi-scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:99999;pointer-events:none}
.tgi-scroll-progress__bar{height:100%;width:0%;background:linear-gradient(90deg,#10b981,#2dd4aa 40%,#5cffb6 80%,#10b981);background-size:200% 100%;animation:tgiHueShift 6s linear infinite;box-shadow:0 0 14px rgba(92,255,182,.7);transition:width .12s linear}
@keyframes tgiHueShift{0%{background-position:0 0}100%{background-position:200% 0}}

/* Mesh + grid */
.tgi-mesh-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tgi-mesh-bg::before,.tgi-mesh-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;mix-blend-mode:screen;animation:tgiFloat 14s var(--tgi-fx-ease) infinite alternate}
.tgi-mesh-bg::before{width:520px;height:520px;left:-120px;top:-140px;background:radial-gradient(circle at 30% 30%,#2dd4aa,transparent 60%)}
.tgi-mesh-bg::after{width:620px;height:620px;right:-160px;bottom:-180px;background:radial-gradient(circle at 70% 70%,#488f82,transparent 60%);animation-duration:18s}
@keyframes tgiFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(40px,-30px,0) scale(1.15)}}
.tgi-grid-overlay{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(122,255,200,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(122,255,200,.14) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.tgi-particles{position:absolute;inset:0;z-index:0;pointer-events:none}

/* Preloader */
html body .ent-preloader,html body .loader-mask{background:radial-gradient(900px 600px at 30% 30%,rgba(92,255,182,.2),transparent 60%),radial-gradient(900px 600px at 70% 70%,rgba(72,143,130,.3),transparent 60%),linear-gradient(160deg,#144a40 0%,#1c5a4f 45%,#246c5f 100%) !important;position:fixed !important;inset:0 !important;z-index:99998 !important}
.ent-preloader-inner{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:24px !important;position:relative !important}
html body .ent-preloader-logo,html body .ent-preloader img.ent-preloader-logo{width:200px !important;height:auto !important;max-width:50vw !important;filter:drop-shadow(0 0 40px rgba(92,255,182,.7)) drop-shadow(0 0 100px rgba(45,212,170,.4)) !important;animation:tgiLogoBreathe 2.6s var(--tgi-fx-ease) infinite alternate !important}
@keyframes tgiLogoBreathe{0%{transform:scale(1)}100%{transform:scale(1.05)}}
.ent-preloader-name{font-family:var(--tgi-fx-font-display) !important;font-size:clamp(20px,3vw,32px) !important;font-weight:800 !important;color:#fff !important;text-align:center !important}
.ent-preloader-name span{background:var(--tgi-fx-grad-glow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important}
.ent-preloader-track{width:min(360px,70vw) !important;height:4px !important;background:rgba(92,255,182,.2) !important;border-radius:99px !important;overflow:hidden}
.ent-preloader-bar{background:var(--tgi-fx-grad-glow) !important;box-shadow:0 0 20px rgba(92,255,182,.75) !important;height:100% !important}
.ent-preloader-dots span{background:var(--tgi-fx-neon) !important;box-shadow:0 0 12px var(--tgi-fx-neon) !important}
.loader-mask .loader{display:flex !important;flex-direction:column;align-items:center;justify-content:center;height:100%}
.loader-mask .loader img{width:200px !important;height:auto !important;max-width:50vw !important;filter:drop-shadow(0 0 40px rgba(92,255,182,.7))}

/* Header + wordmark logo */
html body .ent-header{background:rgba(34,108,93,0.90) !important;-webkit-backdrop-filter:saturate(160%) blur(14px) !important;backdrop-filter:saturate(160%) blur(14px) !important;border-bottom:1px solid var(--tgi-fx-line-strong) !important;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:background-color .35s var(--tgi-fx-ease),padding .35s,box-shadow .35s}
html body .ent-header.tgi-scrolled,html body .ent-header.ent-header-scrolled,html body .ent-header.scrolled{background:rgba(26,90,78,0.95) !important;box-shadow:0 8px 30px rgba(0,0,0,.35),0 1px 0 var(--tgi-fx-line) inset}
.ent-header.tgi-scrolled .ent-header-inner,.ent-header.scrolled .ent-header-inner{padding-top:8px !important;padding-bottom:8px !important}
.ent-header,.ent-header *,.ent-nav a,.ent-nav > li > a,.ent-topbar a{color:#fff !important}
.ent-nav a:hover,.ent-topbar a:hover{color:var(--tgi-fx-neon) !important}
.ent-nav a{position:relative;transition:color .25s var(--tgi-fx-ease)}
.ent-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;transform:scaleX(0);transform-origin:left;background:var(--tgi-fx-grad-glow);transition:transform .35s var(--tgi-fx-ease)}
.ent-nav a:hover::after,.ent-nav a.active::after,.ent-nav li.active > a::after{transform:scaleX(1)}

html body header .ent-logo img,html body a.ent-logo > img,html body img#navLogo,html body #tgi-header .ent-logo img,html body #tgi-nav-root #navLogo{height:56px !important;max-height:56px !important;min-height:44px !important;width:auto !important;max-width:280px !important;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)) drop-shadow(0 0 16px rgba(92,255,182,.40));transition:transform .3s var(--tgi-fx-ease),filter .3s,height .3s}
html body .ent-header.tgi-scrolled .ent-logo img,html body .ent-header.tgi-scrolled #navLogo,html body .ent-header.scrolled .ent-logo img{height:46px !important;max-height:46px !important}
.ent-logo:hover img{transform:scale(1.04);filter:drop-shadow(0 0 24px rgba(92,255,182,.65))}
@media (max-width:992px){html body .ent-logo img,html body #navLogo{height:44px !important;max-height:44px !important}}

.ent-topbar{background:linear-gradient(90deg,#1a5a4e,#226c5d) !important;color:#dff5ea !important;border-bottom:1px solid var(--tgi-fx-line) !important;padding:6px 0 !important;font-size:.82rem !important}
.ent-mega-menu{background:rgba(34,108,93,0.95) !important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--tgi-fx-line-strong) !important;box-shadow:var(--tgi-fx-shadow-2) !important}
.ent-mega-menu *,.ent-mega-link,.ent-mega-group h6{color:#fff !important}
.ent-mega-link .icon i{color:var(--tgi-fx-neon) !important}
.ent-mega-link:hover{background:rgba(92,255,182,.12) !important;color:var(--tgi-fx-neon) !important}

/* Compact hero */
.ent-hero{min-height:auto !important;padding:0 !important;display:block !important;position:relative;overflow:hidden;isolation:isolate;background:var(--tgi-fx-grad-hero) !important}
.ent-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(900px 500px at 12% 18%,rgba(92,255,182,.22),transparent 60%),radial-gradient(900px 500px at 88% 82%,rgba(72,143,130,.3),transparent 60%)}
.ent-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(122,255,200,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(122,255,200,.1) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 40%,#000 35%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 35%,transparent 78%);opacity:.5}
.ent-hero-bg{opacity:.45 !important;filter:hue-rotate(-15deg) saturate(.7) brightness(.9)}
.ent-hero-overlay{background:linear-gradient(180deg,rgba(20,74,64,.5) 0%,rgba(28,90,79,.62) 100%) !important}
.ent-hero-content{position:relative;z-index:2;padding:16px 0 24px !important}
@media (min-width:768px){.ent-hero-content{padding:24px 0 32px !important}}
@media (min-width:992px){.ent-hero-content{padding:32px 0 40px !important}}
.ent-hero-content h1{font-size:clamp(1.7rem,3.6vw,3rem) !important;line-height:1.08 !important;margin-bottom:14px !important;max-width:100% !important;word-wrap:break-word !important;overflow-wrap:break-word !important;background:linear-gradient(180deg,#fff 0%,#d6fff0 50%,#a3e6d0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important;text-shadow:0 0 50px rgba(92,255,182,.18)}
.ent-hero-content p{color:var(--tgi-fx-ink-soft) !important;font-size:clamp(.92rem,1.1vw,1.02rem) !important;line-height:1.55 !important;max-width:600px !important;margin-bottom:18px !important}
.ent-hero-tag{display:inline-flex !important;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--tgi-fx-line-strong) !important;background:rgba(36,108,95,.55) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--tgi-fx-neon) !important;box-shadow:var(--tgi-fx-glow-sm);font-weight:600;letter-spacing:.06em;font-size:.72rem;text-transform:uppercase;margin-bottom:12px !important}
.ent-hero-tag::before,.ent-hero-tag .dot{content:"";width:7px;height:7px;border-radius:50%;background:var(--tgi-fx-neon);box-shadow:0 0 8px var(--tgi-fx-neon);animation:tgiPulse 1.6s ease-in-out infinite;display:inline-block}
@keyframes tgiPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.55}}
.ent-hero-actions{display:flex !important;flex-wrap:wrap;gap:10px;margin-top:16px !important;margin-bottom:24px !important}
.ent-hero-stats{position:relative;z-index:2;display:flex !important;flex-wrap:wrap;gap:10px;margin-top:20px !important}
.ent-hero-stat{background:rgba(36,108,95,.5);border:1px solid var(--tgi-fx-line);border-radius:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--tgi-fx-shadow-1);padding:8px 14px !important;transition:transform .4s var(--tgi-fx-ease),box-shadow .4s,border-color .4s;flex:1 1 110px;min-width:110px}
.ent-hero-stat strong{display:block;font-size:clamp(1.15rem,1.6vw,1.5rem) !important;font-weight:800;background:linear-gradient(180deg,#fff,var(--tgi-fx-mint));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;line-height:1.05}
.ent-hero-stat span{color:var(--tgi-fx-ink-mute);font-size:.72rem}
.ent-hero-stat:hover{transform:translateY(-3px);border-color:var(--tgi-fx-line-strong);box-shadow:var(--tgi-fx-shadow-2),var(--tgi-fx-glow-sm)}
.hero-divider{display:none}
@media (min-width:992px){.ent-hero-content .row > .col-lg-7,.ent-hero-content .row > .col-xl-6:first-child,.ent-hero-content .row > [class*="col-lg-7"]{flex:0 0 60% !important;max-width:60% !important}.ent-hero-content .row > .col-lg-5,.ent-hero-content .row > .col-xl-6:last-child{flex:0 0 40% !important;max-width:40% !important}}
.tgi-ai-visual{filter:drop-shadow(0 0 40px rgba(92,255,182,.25));max-width:360px;margin:0 auto}

/* Sections */
section,.ent-section{background:var(--tgi-fx-bg-0) !important;color:var(--tgi-fx-ink)}
.ent-section-subtle{background:linear-gradient(180deg,#226c5d,#2c826f) !important}
.ent-section{position:relative;padding:60px 0 !important}
@media (min-width:992px){.ent-section{padding:80px 0 !important}}
.ent-section p,.ent-section li,.ent-section .ent-body,.ent-section .ent-body-lg{color:var(--tgi-fx-ink-soft) !important}
.ent-section h1,.ent-section h2,.ent-section h3,.ent-section .ent-h2,.ent-section [class*="-heading"]{color:#fff !important}
.ent-section [style*="color:var(--tgi-darker)"],.ent-section [style*="color: var(--tgi-darker)"],.ent-section [style*="color:var(--neu-500)"],.ent-section [style*="color: var(--neu-500)"]{color:#fff !important}
.text-gradient{background:var(--tgi-fx-grad-glow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important}
.tgi-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--tgi-fx-ease-out),transform .9s var(--tgi-fx-ease-out)}
.tgi-reveal.is-in{opacity:1;transform:none}
.tgi-reveal[data-tgi-delay="1"]{transition-delay:.08s}.tgi-reveal[data-tgi-delay="2"]{transition-delay:.16s}.tgi-reveal[data-tgi-delay="3"]{transition-delay:.24s}.tgi-reveal[data-tgi-delay="4"]{transition-delay:.32s}

/* Buttons */
.btn-enterprise{position:relative;overflow:hidden;letter-spacing:.01em;font-weight:600;border-radius:10px !important;padding:11px 22px !important;display:inline-flex;align-items:center;gap:8px;transition:transform .35s var(--tgi-fx-ease),box-shadow .35s,background .35s,color .35s,border-color .35s;text-decoration:none !important}
.btn-enterprise.btn-sm{padding:8px 14px !important;font-size:.82rem !important}
.btn-enterprise.btn-lg{padding:14px 26px !important;font-size:1rem !important}
.btn-enterprise.btn-xl{padding:18px 32px !important;font-size:1.1rem !important}
.btn-enterprise::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s var(--tgi-fx-ease-out);pointer-events:none}
.btn-enterprise:hover::before{transform:translateX(130%)}
.btn-ent-primary,.btn-ent-accent{background:var(--tgi-fx-grad-glow) !important;border:1px solid rgba(255,255,255,.14) !important;color:#04140e !important;box-shadow:0 10px 28px rgba(16,185,129,.4),inset 0 0 0 1px rgba(255,255,255,.18)}
.btn-ent-primary:hover,.btn-ent-accent:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(16,185,129,.55),0 0 0 6px rgba(45,212,170,.14);color:#04140e !important}
.btn-ent-ghost{background:rgba(255,255,255,.12) !important;border:1px solid var(--tgi-fx-line-strong) !important;color:#fff !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ent-ghost:hover{background:rgba(92,255,182,.2) !important;border-color:var(--tgi-fx-neon) !important;color:#fff !important;transform:translateY(-2px);box-shadow:var(--tgi-fx-glow-sm)}
.btn-ent-outline{border:2px solid var(--tgi-fx-neon) !important;color:#fff !important;background:rgba(92,255,182,0.1) !important;box-shadow:0 0 0 1px rgba(92,255,182,.2) inset,var(--tgi-fx-glow-sm)}
.btn-ent-outline:hover{background:var(--tgi-fx-neon) !important;color:#04140e !important;transform:translateY(-2px);box-shadow:0 0 24px rgba(92,255,182,.7)}
.btn-primary,.pkg-cta,.nav-cta{background:var(--tgi-fx-grad-glow) !important;border-color:transparent !important;color:#04140e !important;font-weight:600;border-radius:10px !important;box-shadow:0 10px 26px rgba(16,185,129,.35) !important}

/* Cards + icons */
.ent-service-card,.ent-sector-card,.ent-why-card,.ent-ai-card,.ent-tech-item,.ent-process-step,.sector-card{position:relative;isolation:isolate;background:var(--tgi-fx-grad-soft) !important;border:1px solid var(--tgi-fx-line-strong) !important;border-radius:var(--tgi-fx-radius) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--tgi-fx-shadow-1);transition:transform .45s var(--tgi-fx-ease),box-shadow .45s,border-color .45s;overflow:hidden;color:var(--tgi-fx-ink) !important}
.ent-service-card h3,.ent-service-card h4,.ent-service-card h5,.ent-sector-card h3,.ent-sector-card h4,.ent-sector-card h5,.ent-why-card h3,.ent-why-card h4,.ent-why-card h5,.ent-ai-card h3,.ent-ai-card h4,.ent-ai-card h5{color:#fff !important}
.ent-service-card p,.ent-sector-card p,.ent-why-card p,.ent-ai-card p,.ent-service-card li,.ent-sector-card li{color:var(--tgi-fx-ink-soft) !important}
.ent-service-card::after,.ent-sector-card::after,.ent-why-card::after,.ent-ai-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(450px circle at var(--tgi-mx,50%) var(--tgi-my,50%),rgba(92,255,182,.22),transparent 50%);transition:opacity .45s var(--tgi-fx-ease)}
.ent-service-card:hover,.ent-sector-card:hover,.ent-why-card:hover,.ent-ai-card:hover,.ent-tech-item:hover,.ent-process-step:hover,.sector-card:hover{transform:translateY(-6px);border-color:var(--tgi-fx-neon) !important;box-shadow:var(--tgi-fx-shadow-2),var(--tgi-fx-glow-sm)}
.ent-service-card:hover::after,.ent-sector-card:hover::after,.ent-why-card:hover::after,.ent-ai-card:hover::after{opacity:1}
.ent-sector-icon-wrap{background:transparent !important;padding:20px 18px 12px !important}
.ent-service-icon,.ent-sector-icon,.ent-ai-icon,.sector-icon{background:var(--tgi-fx-grad-glow) !important;color:#04140e !important;border:1px solid rgba(255,255,255,.22) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 24px rgba(45,212,170,.4);display:flex !important;align-items:center;justify-content:center}
.ent-service-icon i,.ent-sector-icon i,.ent-ai-icon i,.sector-icon i,.ent-service-icon .bi,.ent-sector-icon .bi,.ent-ai-icon .bi,.sector-icon .bi{color:#04140e !important;font-size:1.5rem !important;display:inline-block !important;line-height:1 !important}
.ent-process-num{background:var(--tgi-fx-grad-glow) !important;color:#04140e !important;box-shadow:0 10px 26px rgba(16,185,129,.45),0 0 0 4px rgba(45,212,170,.18)}

/* Tech grid */
.ent-tech-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ent-tech-item{background:var(--tgi-fx-grad-soft) !important;border:1px solid var(--tgi-fx-line-strong) !important;width:90px;padding:14px 10px !important;display:flex;flex-direction:column;align-items:center;gap:8px}
.ent-tech-item img{width:36px !important;height:36px !important;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)) brightness(1.1)}
.ent-tech-item span{color:#fff !important;font-size:.72rem !important;font-weight:600 !important;text-align:center;line-height:1.2;opacity:1 !important;visibility:visible !important}
.ent-tech-item:hover img{filter:brightness(1.3) drop-shadow(0 0 10px rgba(92,255,182,.5))}

/* Stats + CTA */
.ent-stats-strip{background:var(--tgi-fx-grad-brand) !important;border-top:1px solid var(--tgi-fx-line);border-bottom:1px solid var(--tgi-fx-line);position:relative;overflow:hidden;color:#fff;padding:32px 0 !important}
.ent-stats-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(900px circle at 20% 50%,rgba(92,255,182,.15),transparent 50%),radial-gradient(900px circle at 80% 50%,rgba(45,212,170,.12),transparent 50%)}
.ent-stats-strip-item{position:relative;z-index:1;color:#fff}
.ent-stats-strip-item strong,.ent-stats-strip-item .num,.ent-stats-strip-item [data-counter]{background:linear-gradient(180deg,#fff,var(--tgi-fx-mint));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:800}
.ent-cta-section{position:relative;overflow:hidden;background:var(--tgi-fx-grad-brand) !important;color:#fff}
.ent-cta-section *{color:#fff}
.ent-cta-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 380px at 12% 18%,rgba(92,255,182,.3),transparent 60%),radial-gradient(700px 380px at 88% 82%,rgba(45,212,170,.25),transparent 60%)}
.text-gradient-light{background:linear-gradient(90deg,#fff 0%,#a3e6d0 50%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important;animation:tgiHueShift 7s linear infinite}

/* Client logos */
.ent-marquee,.ent-partners-band{background:var(--tgi-fx-bg-1) !important;border-top:1px solid var(--tgi-fx-line);border-bottom:1px solid var(--tgi-fx-line);padding:28px 0 !important}
.ent-marquee-inner,.ent-partners-track{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ent-client-logo,.ent-partner-logo{background:#fff !important;border:1px solid rgba(255,255,255,.25) !important;border-radius:12px !important;padding:12px 16px !important;min-height:80px;display:flex;align-items:center;justify-content:center;filter:none !important;opacity:1 !important;transition:transform .35s var(--tgi-fx-ease),box-shadow .35s;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.ent-client-logo:hover,.ent-partner-logo:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 30px rgba(92,255,182,.3),0 0 0 2px var(--tgi-fx-neon)}
.ent-client-logo img,.ent-partner-logo img,.ent-client-logo .item img,.fadeOutClients img{filter:none !important;opacity:1 !important;max-height:56px;width:auto;object-fit:contain;mix-blend-mode:normal !important}

/* Footer (ent) */
.ent-footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#1a5a4e 0%,#134a40 100%) !important;color:#e8f7ef !important}
.ent-footer *{color:inherit}
.ent-footer h1,.ent-footer h2,.ent-footer h3,.ent-footer h4,.ent-footer h5,.ent-footer h6{color:#fff !important}
.ent-footer a{color:#d4ede0 !important}
.ent-footer a:hover{color:var(--tgi-fx-neon) !important}
.ent-footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(900px 400px at 8% 0%,rgba(45,212,170,.14),transparent 60%),radial-gradient(900px 400px at 100% 100%,rgba(72,143,130,.15),transparent 60%)}
.ent-footer-social a{transition:transform .25s var(--tgi-fx-ease),color .25s,box-shadow .25s,background .25s;border:1px solid var(--tgi-fx-line);background:var(--tgi-fx-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ent-footer-social a:hover{transform:translateY(-3px);color:var(--tgi-fx-neon) !important;border-color:var(--tgi-fx-neon);box-shadow:var(--tgi-fx-glow-sm)}
.ent-footer-bottom{border-top:1px solid var(--tgi-fx-line)}

/* FAB */
.ent-whatsapp,.ent-back-top{box-shadow:var(--tgi-fx-shadow-2),0 0 0 6px rgba(45,212,170,.12) !important;transition:transform .35s var(--tgi-fx-ease),box-shadow .35s !important}
.ent-whatsapp:hover,.ent-back-top:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--tgi-fx-shadow-2),0 0 0 10px rgba(45,212,170,.2),var(--tgi-fx-glow-md) !important}
.ent-whatsapp{right:18px !important;bottom:18px !important;z-index:999 !important}
.ent-back-top{right:18px !important;bottom:80px !important;z-index:999 !important}
.ent-whatsapp i,.ent-back-top i{color:inherit}

/* Cursor */
@media (hover:hover) and (pointer:fine){
  .tgi-cursor,.tgi-cursor-trail{position:fixed;top:0;left:0;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);will-change:transform;mix-blend-mode:screen}
  .tgi-cursor{width:10px;height:10px;border-radius:50%;background:var(--tgi-fx-neon);box-shadow:0 0 14px var(--tgi-fx-neon);transition:transform .15s var(--tgi-fx-ease-out)}
  .tgi-cursor-trail{width:42px;height:42px;border-radius:50%;border:1px solid rgba(92,255,182,.5);transition:transform .25s var(--tgi-fx-ease-out),width .2s,height .2s,border-color .2s}
  .tgi-cursor-trail.is-active{width:60px;height:60px;border-color:var(--tgi-fx-neon)}
}

/* Forms */
form .form-control,form input[type="text"],form input[type="email"],form input[type="tel"],form input[type="number"],form textarea,form select,.form-control-tgi,.ent-newsletter-form input{background:rgba(255,255,255,0.08) !important;border:1px solid var(--tgi-fx-line-strong) !important;color:#fff !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px !important;padding:11px 14px !important}
form .form-control:focus,form input:focus,form textarea:focus,form select:focus,.form-control-tgi:focus,.ent-newsletter-form input:focus{border-color:var(--tgi-fx-neon) !important;box-shadow:0 0 0 4px rgba(92,255,182,.2),var(--tgi-fx-glow-sm) !important;outline:none !important;background:rgba(255,255,255,0.12) !important}
form ::placeholder,.form-control-tgi::placeholder{color:rgba(255,255,255,.55) !important}
form label{color:#fff !important}

/* Badges */
.ent-badge{border:1px solid var(--tgi-fx-line-strong);background:var(--tgi-fx-glass) !important;color:var(--tgi-fx-mint) !important}
.ent-badge.badge-accent,.ent-badge.badge-new{background:var(--tgi-fx-grad-glow) !important;color:#04140e !important;border:none !important;box-shadow:var(--tgi-fx-glow-sm)}

/* Blue -> green global */
[style*="#1a73e8"],[style*="#0d6efd"],[style*="#0056b3"]{color:var(--tgi-fx-neon) !important}
.client-bg-blue,.pricing-box-blue,.bg-blue,[class*="-blue"]:not([class*="-bluep"]){background-color:var(--tgi-fx-bg-1) !important;background-image:var(--tgi-fx-grad-soft) !important;color:#fff !important}
.pricing-box-blue .pricing-head{background:var(--tgi-fx-grad-brand) !important;color:#fff !important}
.text-primary{color:var(--tgi-fx-neon) !important}
.bg-primary{background:var(--tgi-fx-grad-glow) !important;color:#04140e !important}
.border-primary{border-color:var(--tgi-fx-neon) !important}
img[src*="blue"],img[src*="-blue"],img[src*="_blue"]{filter:hue-rotate(110deg) saturate(1.3) brightness(.95)}
img[src*="bg-blue"],img[src*="blue-bg"],img[src*="globe-blue"],img[src*="gblobe-dark-blue"],img[src*="small-globe-blue"]{display:none !important}
[style*="bg-blue"],[style*="blue-bg"],[style*="gblobe-dark-blue"],[style*="small-globe-blue"]{background-image:var(--tgi-fx-grad-soft) !important}
.ent-feature-visual{position:relative}
.ent-feature-visual img{filter:hue-rotate(115deg) saturate(1.35) brightness(.85) contrast(1.05);border-radius:var(--tgi-fx-radius-lg)}
.ent-feature-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(45,212,170,.22),rgba(72,143,130,.18) 60%,transparent 100%);border-radius:var(--tgi-fx-radius-lg);mix-blend-mode:overlay}

/* Inner-page heroes */
.sector-hero,.tgi-page-hero,.inner-page-header,.breadcrumb-area{background:var(--tgi-fx-grad-hero) !important;position:relative;overflow:hidden}
.sector-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(122,255,200,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(122,255,200,.1) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 40%,#000 35%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 35%,transparent 75%);opacity:.55;pointer-events:none}
.sector-hero h1,.tgi-page-hero h1,.inner-page-header h1{color:#fff !important;font-family:var(--tgi-fx-font-display);font-size:clamp(1.8rem,3.8vw,3rem) !important}
.sector-hero p,.tgi-page-hero p{color:var(--tgi-fx-ink-soft) !important}
.breadcrumb-nav{color:var(--tgi-fx-ink-mute) !important}
.breadcrumb-nav a{color:var(--tgi-fx-neon) !important}
.prob-col,.sol-col{background:var(--tgi-fx-grad-soft) !important;color:var(--tgi-fx-ink) !important}
.prob-col h3,.sol-col h3,.prob-col h4,.sol-col h4{color:#fff !important}
.contact-form-panel{background:var(--tgi-fx-grad-soft) !important;border:1px solid var(--tgi-fx-line) !important;border-radius:var(--tgi-fx-radius-lg);color:var(--tgi-fx-ink) !important;padding:32px !important;box-shadow:var(--tgi-fx-shadow-2)}
.contact-form-panel h3{color:#fff !important}
.cinfo-card{background:var(--tgi-fx-grad-soft) !important;border:1px solid var(--tgi-fx-line) !important;border-radius:var(--tgi-fx-radius);color:var(--tgi-fx-ink)}
.cinfo-card h5{color:#fff !important}
.cinfo-icon{background:var(--tgi-fx-grad-glow) !important;color:#04140e !important}

/* ============== v4 LEGACY COVERAGE ============== */
/* Legacy <footer id="footer"> with .footer-top, .footer-links, .social-links, .copyright */
html body footer#footer{background:linear-gradient(180deg,#1a5a4e 0%,#134a40 100%) !important;color:#e8f7ef !important;padding:0 0 24px 0 !important;font-size:14px;position:relative;overflow:hidden}
html body footer#footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:radial-gradient(900px 400px at 8% 0%,rgba(45,212,170,.14),transparent 60%),radial-gradient(900px 400px at 100% 100%,rgba(72,143,130,.18),transparent 60%)}
html body footer#footer > *{position:relative;z-index:1}
html body footer#footer .footer-top{background:transparent !important;background-image:none !important;padding:56px 0 32px 0 !important}
html body footer#footer .footer-info,html body footer#footer .footer-info p,html body footer#footer .footer-info strong{color:#d4ede0 !important}
html body footer#footer .footer-info img{height:60px !important;width:auto !important;max-width:260px !important;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(92,255,182,.35));margin-bottom:18px !important}
html body footer#footer .footer-info a{color:var(--tgi-fx-mint) !important}
html body footer#footer .footer-info a:hover{color:var(--tgi-fx-neon) !important}
html body footer#footer h4,html body footer#footer .footer-top h4{color:#fff !important;font-family:var(--tgi-fx-font-display);font-size:1rem !important;font-weight:700 !important;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px !important;padding-bottom:10px;position:relative;border-bottom:1px solid var(--tgi-fx-line)}
html body footer#footer h4::after{content:"";position:absolute;left:0;bottom:-1px;width:36px;height:2px;background:var(--tgi-fx-grad-glow);border-radius:2px}
html body footer#footer .footer-links ul{list-style:none;padding:0;margin:0}
html body footer#footer .footer-links ul li{padding:6px 0 !important;display:flex;align-items:center;gap:8px}
html body footer#footer .footer-links ul i,html body footer#footer .footer-links ul .bx,html body footer#footer .footer-links ul .bxs-circle{color:var(--tgi-fx-neon) !important;font-size:8px !important;margin-right:8px !important;padding:0 !important;filter:drop-shadow(0 0 6px rgba(92,255,182,.6))}
html body footer#footer .footer-links ul a{color:#cfeee2 !important;text-decoration:none !important;transition:color .25s,transform .25s;display:inline-block}
html body footer#footer .footer-links ul a:hover{color:var(--tgi-fx-neon) !important;transform:translateX(3px);text-decoration:none !important}
html body footer#footer .social-links a,html body footer#footer .footer-top .social-links a{background:var(--tgi-fx-glass) !important;border:1px solid var(--tgi-fx-line-strong) !important;color:#fff !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:40px !important;height:40px !important;padding:0 !important;border-radius:50% !important;display:inline-flex !important;align-items:center;justify-content:center;font-size:18px !important;margin-right:6px !important;transition:transform .25s var(--tgi-fx-ease),background .25s,color .25s,box-shadow .25s,border-color .25s}
html body footer#footer .social-links a:hover,html body footer#footer .footer-top .social-links a:hover{background:var(--tgi-fx-grad-glow) !important;border-color:var(--tgi-fx-neon) !important;color:#04140e !important;transform:translateY(-3px);box-shadow:var(--tgi-fx-glow-sm)}
html body footer#footer .copyright{border-top:1px solid var(--tgi-fx-line) !important;color:var(--tgi-fx-ink-mute) !important;padding-top:24px !important;font-size:13px !important;text-align:center}
html body footer#footer .copyright a,html body footer#footer .copyright span a{color:var(--tgi-fx-mint) !important;font-weight:600}
html body footer#footer .copyright a:hover{color:var(--tgi-fx-neon) !important}
html body footer#footer .credits{color:var(--tgi-fx-ink-mute) !important}
html body footer[style*="background:#020d0b"],html body footer[style*="background: #020d0b"]{background:linear-gradient(180deg,#0e3530 0%,#06322c 100%) !important}
html body footer[style*="background:#020d0b"] h5,html body footer[style*="background: #020d0b"] h5,html body footer[style*="background:#020d0b"] a,html body footer[style*="background: #020d0b"] a,html body footer[style*="background:#020d0b"] p,html body footer[style*="background: #020d0b"] p{color:#d4ede0 !important}
html body footer[style*="background:#020d0b"] h5,html body footer[style*="background: #020d0b"] h5{color:#fff !important}
html body footer[style*="background:#020d0b"] a:hover,html body footer[style*="background: #020d0b"] a:hover{color:var(--tgi-fx-neon) !important}
.mobile-footer-nav,.mobile-footer{background:linear-gradient(180deg,#226c5d,#1a5a4e) !important;border-top:1px solid var(--tgi-fx-line)}
.mobile-footer-nav a,.mobile-footer a{color:#d4ede0 !important}
.mobile-footer-nav a:hover,.mobile-footer a:hover{color:var(--tgi-fx-neon) !important}

/* Legacy headers */
header#header.d-flex.align-items-center[style*="display:none"]{display:none !important}
html body header#header.header.bg-white.fixed-top,html body header#header.header.bg-white{background:rgba(34,108,93,0.92) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--tgi-fx-line) !important}
html body header#header.header.bg-white a,html body header#header.header.bg-white .nav-link{color:#fff !important}
html body header#header.header.bg-white .nav-link:hover{color:var(--tgi-fx-neon) !important}
html body header#header.header.bg-white .logo img{height:56px !important;max-height:56px !important;width:auto !important;filter:drop-shadow(0 0 14px rgba(92,255,182,.35))}
.dropdown-menu{background:rgba(34,108,93,0.95) !important;border:1px solid var(--tgi-fx-line-strong) !important;box-shadow:var(--tgi-fx-shadow-2) !important}
.dropdown-menu .dropdown-item{color:#fff !important}
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus{background:rgba(92,255,182,.15) !important;color:var(--tgi-fx-neon) !important}
.offcanvas,.offcanvas.menu{background:linear-gradient(160deg,#144a40,#0e3530) !important;color:#fff !important}
.offcanvas a,.offcanvas .nav-link,.offcanvas h5,.offcanvas h6{color:#fff !important}
.offcanvas a:hover,.offcanvas .nav-link:hover{color:var(--tgi-fx-neon) !important}
.offcanvas .nav-menu-details h6{color:var(--tgi-fx-mint) !important;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}

/* Universal text visibility */
html body section[style*="background:var(--tgi-dark)"],html body section[style*="background: var(--tgi-dark)"],html body section[style*="background:#020d0b"],html body section[style*="background: #020d0b"]{color:var(--tgi-fx-ink) !important}
html body section[style*="background:var(--tgi-dark)"] *,html body section[style*="background: var(--tgi-dark)"] *,html body section[style*="background:#020d0b"] *,html body section[style*="background: #020d0b"] *{color:inherit}
html body section[style*="background:#fff"],html body section[style*="background: #fff"],html body section[style*="background:#f8fdfb"],html body section[style*="background: #f8fdfb"]{background:var(--tgi-fx-bg-1) !important;color:var(--tgi-fx-ink) !important}
html body section[style*="background:#fff"] h1,html body section[style*="background:#fff"] h2,html body section[style*="background:#fff"] h3,html body section[style*="background:#fff"] h4,html body section[style*="background: #fff"] h1,html body section[style*="background: #fff"] h2,html body section[style*="background: #fff"] h3,html body section[style*="background: #fff"] h4,html body section[style*="background:#f8fdfb"] h1,html body section[style*="background:#f8fdfb"] h2,html body section[style*="background:#f8fdfb"] h3,html body section[style*="background:#f8fdfb"] h4{color:#fff !important}
html body section[style*="background:#fff"] p,html body section[style*="background: #fff"] p,html body section[style*="background:#f8fdfb"] p{color:var(--tgi-fx-ink-soft) !important}
html body section [style*="color:var(--tgi-dark)"],html body section [style*="color: var(--tgi-dark)"],html body section [style*="color:#2d3748"],html body section [style*="color: #2d3748"],html body section [style*="color:#4a5568"],html body section [style*="color: #4a5568"],html body section [style*="color:#718096"],html body section [style*="color: #718096"]{color:var(--tgi-fx-ink-soft) !important}
.sector-card[style*="background:#fff"],.sector-card[style*="background: #fff"]{background:var(--tgi-fx-grad-soft) !important;color:var(--tgi-fx-ink) !important}
.sector-card h3[style*="color:var(--tgi-dark)"],.sector-card h3[style*="color: var(--tgi-dark)"]{color:#fff !important}
.sector-card p[style*="color:#4a5568"],.sector-card p[style*="color: #4a5568"]{color:var(--tgi-fx-ink-soft) !important}
.prob-sol-row{border:1px solid var(--tgi-fx-line) !important;background:var(--tgi-fx-bg-1) !important}
.prob-col,.sol-col{background:transparent !important}

/* World-map + blue bg cleanup */
[style*="footer-bg.png"],[style*="footer-bg-v2.jpg"],[style*="footer-bg-v3.jpg"],[style*="hero-bg.png"],[style*="contact-form-bg.png"],[style*="subscribe-bg.png"],[style*="quote-bg.jpg"],[style*="quote-bg-v2.jpg"],[style*="quote-bg-v3.jpg"]{background-image:none !important;background-color:transparent !important}

/* Alignment */
html body .container,html body .container-fluid,html body .container-xl,html body .container-lg{padding-left:16px !important;padding-right:16px !important}
@media (min-width:768px){html body .container,html body .container-fluid,html body .container-xl,html body .container-lg{padding-left:24px !important;padding-right:24px !important}}
html body section:not(.ent-hero):not(.ent-topbar):not(.ent-marquee):not(.ent-partners-band):not(.ent-stats-strip){padding-top:60px !important;padding-bottom:60px !important}
@media (min-width:992px){html body section:not(.ent-hero):not(.ent-topbar):not(.ent-marquee):not(.ent-partners-band):not(.ent-stats-strip){padding-top:80px !important;padding-bottom:80px !important}}
html body section.ent-hero{padding:0 !important}
html body section.ent-topbar{padding:6px 0 !important}
html body section.ent-marquee,html body section.ent-partners-band{padding:28px 0 !important}
html body section.ent-stats-strip{padding:32px 0 !important}
html body section,html body .ent-hero,html body .ent-section,html body footer{overflow-x:clip}
html body .row{row-gap:24px} html body .row.g-0{row-gap:0}

/* Hero CTA pulse */
.ent-hero-actions .btn-ent-primary,.ent-hero-actions .btn-ent-accent{position:relative}
.ent-hero-actions .btn-ent-primary::after,.ent-hero-actions .btn-ent-accent::after{content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;background:var(--tgi-fx-grad-glow);filter:blur(14px);opacity:.55;animation:tgiBreathe 3.4s ease-in-out infinite}
@keyframes tgiBreathe{0%,100%{opacity:.35}50%{opacity:.7}}

/* Mobile */
@media (max-width:768px){
  .tgi-mesh-bg::before,.tgi-mesh-bg::after{filter:blur(60px);opacity:.4}
  .tgi-cursor,.tgi-cursor-trail{display:none !important}
  .tgi-scroll-progress{height:2px}
  .ent-hero-content{padding:14px 0 20px !important}
  .ent-hero-stats{gap:8px}
  .ent-hero-stat{flex:1 1 calc(50% - 8px)}
  .ent-tech-item{width:78px;padding:10px 6px !important}
  .ent-tech-item img{width:30px !important;height:30px !important}
  .ent-tech-item span{font-size:.65rem !important}
  html body footer#footer .footer-info img{height:50px !important}
  html body .ent-logo img,html body #navLogo{height:44px !important;max-height:44px !important}
}

/* Reduced motion + print */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}.tgi-mesh-bg::before,.tgi-mesh-bg::after{animation:none !important}.tgi-reveal{opacity:1 !important;transform:none !important}.ent-preloader-logo{animation:none !important}}
@media print{.tgi-scroll-progress,.tgi-floating-social,.tgi-cursor,.tgi-cursor-trail,.ent-whatsapp,.ent-back-top,.tgi-particles,.tgi-mesh-bg,.tgi-grid-overlay{display:none !important}}

a{transition:color .25s var(--tgi-fx-ease)} img{-webkit-user-drag:none;max-width:100%}
.ent-mobile-nav{background:linear-gradient(160deg,#1a5a4e,#226c5d) !important;color:#fff !important}
.ent-mobile-nav *{color:#fff !important}
.ent-mobile-nav a:hover{color:var(--tgi-fx-neon) !important}

/* End TGI Futuristic Layer v4 */

/* ============== v4.1 — POLISH ============== */
/* Center client logos carousel */
.fadeOutClients,.owl-carousel.fadeOutClients{ text-align:center !important; }
.fadeOutClients .owl-stage,.fadeOutClients .owl-stage-outer{
  display:flex !important; align-items:center; justify-content:center;
  margin: 0 auto;
}
.fadeOutClients .owl-item{ display:flex !important; align-items:center; justify-content:center; }
.fadeOutClients .item{ display:flex; align-items:center; justify-content:center; width:100%; }
.fadeOutClients .item img{ margin: 0 auto !important; display:block; }
.ent-client-logo .item{ width:100%; text-align:center; display:flex; align-items:center; justify-content:center; }
/* Center static client/partner grids (NOT the scrolling marquee) */
.client-logos,.client-logos-grid{
  text-align:center !important;
  display:flex !important; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:24px;
}
/* Restore marquee infinite-scroll behavior (don't wrap, don't center) */
.ent-marquee-inner{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  animation: marquee 30s linear infinite !important;
  gap:0 !important;
}
.ent-marquee{ overflow:hidden !important; }
.ent-marquee-inner:hover{ animation-play-state: paused; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ent-marquee-item{
  white-space:nowrap !important;
  color: rgba(255,255,255,.85) !important;
}
.ent-marquee-item i{ color: var(--tgi-fx-neon) !important; }
/* Partners band — also keep horizontal (single row, scroll-snap) */
.ent-partners-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:32px !important;
  align-items:center;
}

/* Footer column headings — proper padding-top */
.ent-footer-col{ padding-top: 18px; }
.ent-footer-brand{ padding-top: 18px; }
.ent-footer-col h5,.ent-footer-brand h5{
  margin-top: 0 !important;
  padding-top: 8px !important;
  margin-bottom: 18px !important;
  position: relative;
}
.ent-footer-col h5::before,
.ent-footer-brand h5::before{
  content:""; position:absolute; top:-4px; left:0;
  width:32px; height:2px; background: var(--tgi-fx-grad-glow); border-radius:2px;
}
@media (min-width: 992px){
  .ent-footer-grid{ padding-top: 24px; }
}

/* Universal padding-top for ANY footer column heading */
html body footer .ent-footer-col h5,
html body footer .ent-footer-col h4,
html body footer h5,
html body footer .footer-links h4{
  padding-top: 10px !important; margin-top: 0 !important;
}

/* v4.2 — process-step padding fix (kill top whitespace inside card) */
.ent-process-step{ padding: 22px 18px 22px !important; text-align:center; }
.ent-process-step .ent-process-num{
  margin: 0 auto 16px !important;
  border-width: 4px !important;
  border-color: rgba(92,255,182,.35) !important;
}
.ent-process-step h4{ margin-top: 0 !important; margin-bottom: 8px !important; color:#fff !important; }


/* v4.3 — client logo center + size fix (owl carousel) */
.ent-client-logo{ padding:14px 12px !important; min-height:90px !important; overflow:hidden; display:flex !important; align-items:center !important; justify-content:center !important; }
.ent-client-logo .fadeOutClients,
.ent-client-logo .owl-carousel{ width:100%; margin:0 auto; }
.ent-client-logo .owl-stage-outer{ width:100%; }
.ent-client-logo .owl-stage{ display:flex !important; align-items:center !important; }
.ent-client-logo .owl-item{ display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; }
.ent-client-logo .owl-item .item{
  width:100% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  text-align:center !important; margin:0 auto !important;
}
.ent-client-logo .owl-item img,
.ent-client-logo .item img,
.ent-client-logo .fadeOutClients img{
  display:block !important;
  margin:0 auto !important;
  max-width:80% !important;
  width:auto !important;
  max-height:60px !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

/* ============================================================================
   v5.0 — UNIVERSAL TEXT VISIBILITY + INNER-PAGE OVERRIDES
   inner-page.css sets body text to #1a2520 and h1-h6 to #041f1a (near-black).
   On the new dark green theme those vanish into the background. This block
   forces every inheritance path to a readable light color.
   ============================================================================ */

/* Body + heading defaults */
html body,
html body.tgi-page-body,
html body[class*="tgi"]{
  background: var(--tgi-fx-bg-0) !important;
  color: var(--tgi-fx-ink) !important;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .title-section h5, html body .title-section h3, html body .title-section h2,
html body .title-section-secondary h5, html body .title-section-secondary h3, html body .title-section-secondary h2,
html body .main-section h3, html body .main-section h5, html body .main-section h2{
  color: #ffffff !important;
}
html body p, html body li, html body span, html body small,
html body .main-section p, html body .main-section span,
html body .blog-section p, html body .blog-section span{
  color: var(--tgi-fx-ink-soft) !important;
}
html body a:not(.btn):not(.btn-enterprise):not(.btn-primary):not(.btn-ent-primary):not(.btn-ent-accent):not(.btn-ent-ghost):not(.btn-ent-outline):not(.pkg-cta):not(.nav-cta){
  color: var(--tgi-fx-mint);
}
html body a:not(.btn):not(.btn-enterprise):not(.btn-primary):hover{
  color: var(--tgi-fx-neon);
}

/* Legacy section backgrounds — give them the brand-green hero treatment */
html body section.breadcrumb,
html body section.breadcrumb.scrolled-offset{
  background: var(--tgi-fx-grad-hero) !important;
  background-image:
    radial-gradient(900px 500px at 18% 25%, rgba(92,255,182,.22), transparent 60%),
    radial-gradient(900px 500px at 82% 75%, rgba(72,143,130,.30), transparent 60%),
    linear-gradient(160deg, #144a40 0%, #1c5a4f 45%, #246c5f 100%) !important;
  padding: 48px 0 32px !important;
  color: #ffffff !important;
  position: relative; overflow: hidden;
}
html body section.breadcrumb h2,
html body section.breadcrumb h2 *{ color: #ffffff !important; }
html body section.breadcrumb img{ filter: brightness(0) invert(1); }
html body .breadcrumb-item, html body .breadcrumb-item a, html body .breadcrumb-item.active,
html body li.breadcrumb-item a{ color: #ffffff !important; }
html body section.breadcrumb h2 img{ width: 16px !important; height: 16px !important; }

/* .main-section + .blog-section — make dark theme work */
html body section.main-section, html body .main-section,
html body section.blog-section, html body .blog-section{
  background: var(--tgi-fx-bg-0) !important;
  color: var(--tgi-fx-ink) !important;
}
html body .main-section .title-section-secondary h5,
html body .main-section .title-section-secondary h2,
html body .main-section .title-section-secondary h3,
html body .main-section h5, html body .main-section h3, html body .main-section h2{
  color: #ffffff !important;
}
html body .main-section p, html body .main-section span{ color: var(--tgi-fx-ink-soft) !important; }
html body .main-section button, html body .main-section .btn{
  background: var(--tgi-fx-grad-glow) !important;
  color: #04140e !important;
  border: none !important;
}

/* Card backgrounds in inner pages */
html body .package-card, html body .pkg-card, html body .info-card,
html body .blog-card, html body .post-card, html body .service-card:not(.ent-service-card){
  background: var(--tgi-fx-grad-soft) !important;
  border: 1px solid var(--tgi-fx-line) !important;
  color: var(--tgi-fx-ink) !important;
  border-radius: var(--tgi-fx-radius) !important;
}
html body .package-card h3,html body .package-card h4,html body .package-card h5,
html body .pkg-card h3, html body .pkg-card h4, html body .info-card h3,
html body .blog-card h3, html body .blog-card h4, html body .blog-card h5,
html body .post-card h3, html body .post-card h4{ color:#fff !important; }

/* ecllipse-b.png decoration (the blue circle next to titles) */
html body img[src*="ecllipse"], html body img[src*="ecllpse"]{
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(92,255,182,.6)) !important;
}

/* Preloader logo — REDUCE size so it doesn't overflow viewport */
html body .ent-preloader-logo,
html body .ent-preloader img.ent-preloader-logo{
  width: 140px !important;
  max-width: 36vw !important;
  max-height: 36vh !important;
  height: auto !important;
}
html body .loader-mask .loader img{
  width: 140px !important;
  max-width: 36vw !important;
  max-height: 36vh !important;
}

/* Inner-page hero padding tighter (the JOIN OUR TEAM, Explore Blog Posts areas) */
html body section.breadcrumb,
html body .breadcrumb-area,
html body .tgi-page-hero{
  padding-top: 40px !important;
  padding-bottom: 32px !important;
}
@media (min-width: 992px){
  html body section.breadcrumb,
  html body .breadcrumb-area,
  html body .tgi-page-hero{
    padding-top: 56px !important;
    padding-bottom: 40px !important;
  }
}

/* Body padding-top for fixed nav (inner-page.css set 112px which is too much) */
html body.tgi-page-body{ padding-top: 0 !important; }

/* Legacy footer grid: ensure Bootstrap row/col still flex */
html body footer#footer .row{
  display: flex !important;
  flex-wrap: wrap !important;
  row-gap: 24px;
}
html body footer#footer .col-lg-4{ flex: 0 0 auto; width: 33.333%; }
html body footer#footer .col-lg-2{ flex: 0 0 auto; width: 16.666%; }
html body footer#footer .col-md-6{ flex: 0 0 auto; }
@media (max-width: 991px){
  html body footer#footer .col-lg-4,
  html body footer#footer .col-lg-2{ width: 50%; }
}
@media (max-width: 575px){
  html body footer#footer .col-lg-4,
  html body footer#footer .col-lg-2{ width: 100%; }
}

/* Sector-jewellery custom heading style override */
html body .section-tag, html body .sector-tag,
html body [class*="section-eyebrow"], html body [class*="overline"]{
  color: var(--tgi-fx-neon) !important;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}

/* Universal "white card" override on inner pages — keep them dark themed */
html body .feature-card[style*="background:#fff"],
html body [class*="card"][style*="background:#fff"],
html body [class*="card"][style*="background: #fff"]{
  background: var(--tgi-fx-grad-soft) !important;
  color: var(--tgi-fx-ink) !important;
  border: 1px solid var(--tgi-fx-line) !important;
}
html body [class*="card"][style*="background:#fff"] h1,
html body [class*="card"][style*="background:#fff"] h2,
html body [class*="card"][style*="background:#fff"] h3,
html body [class*="card"][style*="background:#fff"] h4,
html body [class*="card"][style*="background:#fff"] h5,
html body [class*="card"][style*="background: #fff"] h1,
html body [class*="card"][style*="background: #fff"] h2,
html body [class*="card"][style*="background: #fff"] h3,
html body [class*="card"][style*="background: #fff"] h4,
html body [class*="card"][style*="background: #fff"] h5{ color:#fff !important; }

/* Numeric labels (01, 02, 03 etc.) in graphic-design page */
html body [class*="card"] [style*="font-size:64px"],
html body [class*="card"] [style*="font-size: 64px"],
html body [class*="card"] [style*="font-size:48px"],
html body [class*="card"] [style*="font-size: 48px"]{
  color: rgba(92,255,182,.35) !important;
  font-weight: 800 !important;
}

/* ============================================================================
   v5.2 — CLIENT CAROUSEL FIX + AI image filter neutralize
   The previous flex !important on .owl-stage/.owl-item broke owl-carousel
   transforms. owl needs its own width/transform left alone. Only style the
   card shell and the inner img.
   ============================================================================ */
/* Restore owl-carousel internal layout (do NOT flex-override it) */
.ent-client-logo .owl-stage-outer,
.ent-client-logo .owl-stage,
.ent-client-logo .owl-item{
  display: block !important;
  flex: none !important;
  text-align: center !important;
}
.ent-client-logo .owl-item{
  padding: 0 !important;
}
.ent-client-logo .item{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 60px;
}
.ent-client-logo .item img,
.ent-client-logo .owl-item img,
.ent-client-logo .fadeOutClients img{
  display: block !important;
  margin: 0 auto !important;
  max-width: 85% !important;
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.ent-client-logo{
  padding: 16px 14px !important;
  min-height: 96px !important;
  background: #ffffff !important;
}

/* AI graphic SVG container — defeat earlier feature-visual hue-rotate filter */
.tgi-ai-graphic,
.ent-feature-visual.tgi-ai-graphic{
  background: linear-gradient(135deg,#226c5d 0%,#3a9684 60%,#52ad97 100%) !important;
  border: 1px solid var(--tgi-fx-line-strong) !important;
  box-shadow: var(--tgi-fx-shadow-2);
}
.tgi-ai-graphic img,
.ent-feature-visual.tgi-ai-graphic img,
.tgi-ai-graphic svg,
.ent-feature-visual.tgi-ai-graphic svg{
  filter: none !important;
}
.ent-feature-visual.tgi-ai-graphic::after{ display:none !important; }

/* Process-step padding refinement — properly balanced */
.ent-process-step{
  padding: 28px 20px 26px !important;
  text-align: center;
  min-height: 200px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.ent-process-step .ent-process-num{
  width: 64px !important; height: 64px !important;
  margin: 0 auto 18px !important;
  border-width: 3px !important;
  border-color: rgba(92,255,182,.45) !important;
  font-size: 1.4rem !important;
  flex-shrink: 0;
}
.ent-process-step h4{
  margin: 0 0 10px 0 !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}
.ent-process-step p{
  margin: 0 !important;
  font-size: .88rem !important;
  line-height: 1.55 !important;
  color: var(--tgi-fx-ink-soft) !important;
}

/* v5.2 — Tech-stack cards: uniform height, logo + label layout */
.ent-tech-item.tgi-tech-enhanced{
  width: 130px !important;
  min-height: 130px !important;
  padding: 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.ent-tech-item.tgi-tech-enhanced img{
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  filter: brightness(1.05) drop-shadow(0 2px 6px rgba(0,0,0,.2));
  flex-shrink: 0;
}
.ent-tech-item.tgi-tech-enhanced .tgi-tech-label{
  color: #ffffff !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.25;
  text-transform: none !important;
  letter-spacing: 0;
}
.ent-tech-item.tgi-tech-enhanced .tgi-tech-fallback{
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--tgi-fx-green-3), var(--tgi-fx-neon));
  color: #04140e;
  border-radius: 12px;
  font-size: 1.4rem;
  box-shadow: 0 0 18px rgba(92,255,182,.35);
  flex-shrink: 0;
}
/* All tech-items (enhanced or not) — uniform height for alignment */
.ent-tech-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: center !important;
}
.ent-tech-item{
  min-width: 120px !important;
  min-height: 110px !important;
  flex: 0 0 auto !important;
}

/* ============================================================================
   v5.3 — Spacing rhythm cleanup + universal preloader polish
   Kill the excessive gap between sections (especially after breadcrumb area).
   ============================================================================ */

/* Section padding reduced + collapse adjacent gaps */
html body section{
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media (min-width: 992px){
  html body section:not(.ent-hero):not(.ent-topbar):not(.ent-marquee):not(.ent-partners-band):not(.ent-stats-strip):not(.blog-hero):not(.sector-hero):not(.breadcrumb){
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
html body section.ent-hero,
html body section.blog-hero{ padding: 0 !important; }
html body section.ent-topbar{ padding: 6px 0 !important; }
html body section.ent-marquee,
html body section.ent-partners-band{ padding: 24px 0 !important; }
html body section.ent-stats-strip{ padding: 28px 0 !important; }

/* Collapse gap between breadcrumb hero and following content section */
html body section.breadcrumb,
html body section.tgi-page-hero,
html body section.inner-page-header,
html body section.breadcrumb-area{
  padding-top: 36px !important;
  padding-bottom: 32px !important;
  margin-bottom: 0 !important;
}
html body section.breadcrumb + section,
html body section.tgi-page-hero + section,
html body section.inner-page-header + section,
html body section.breadcrumb-area + section,
html body section.main-section{
  padding-top: 32px !important;
  margin-top: 0 !important;
}
@media (min-width: 992px){
  html body section.breadcrumb,
  html body section.tgi-page-hero,
  html body section.inner-page-header,
  html body section.breadcrumb-area{
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }
  html body section.main-section{ padding-top: 40px !important; }
}

/* Kill stray hr/br/empty divs causing extra space */
html body section + hr,
html body section + br,
html body section > br:first-child,
html body section > br:last-child{ display: none !important; }
html body .main-section .title-section-secondary{ padding-top: 8px; }

/* Universal preloader unified style (override inline #preloader rules) */
html body .ent-preloader,
html body #preloader,
html body .loader-mask{
  background:
    radial-gradient(900px 600px at 30% 30%, rgba(92,255,182,.20), transparent 60%),
    radial-gradient(900px 600px at 70% 70%, rgba(72,143,130,.30), transparent 60%),
    linear-gradient(160deg,#1a5a4e 0%,#226c5d 45%,#2c826f 100%) !important;
  position: fixed !important; inset: 0 !important; z-index: 99998 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.loader-ring{ display: none !important; }

/* Make sure the standard branded preloader inner shows properly */
.ent-preloader-inner{
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 24px !important;
}

/* Text visibility — strengthen for inner pages with white backgrounds */
html body .breadcrumb-nav{
  background: rgba(255,255,255,.04) !important;
  color: var(--tgi-fx-ink-mute) !important;
}
html body .breadcrumb-nav a{ color: var(--tgi-fx-neon) !important; }
html body .breadcrumb-nav span{ color: var(--tgi-fx-mint) !important; }

/* Sector pages with inline white sections need conversion */
html body section[style*="background:#fff"],
html body section[style*="background: #fff"],
html body section[style*="background:#f8fdfb"]{
  background: var(--tgi-fx-bg-0) !important;
}
html body .prob-col[style*="background:#fff5f5"],
html body .prob-col[style*="background:#fff8f8"]{
  background: rgba(220,75,75,.10) !important;
  border-color: rgba(220,75,75,.30) !important;
  color: var(--tgi-fx-ink) !important;
}
html body .sol-col[style*="background:#f0faf"],
html body .sol-col[style*="background:#f0faf8"]{
  background: rgba(92,255,182,.10) !important;
  border-color: rgba(92,255,182,.30) !important;
  color: var(--tgi-fx-ink) !important;
}
html body .prob-col h4, html body .prob-col .ps-title,
html body .sol-col h4, html body .sol-col .ps-title{ color: #fff !important; }
html body .prob-col p, html body .sol-col p{ color: var(--tgi-fx-ink-soft) !important; }

/* Section labels (the small uppercase eyebrows) */
html body .section-label,
html body .ent-overline{
  color: var(--tgi-fx-neon) !important;
  background: rgba(92,255,182,.08) !important;
  border-color: rgba(92,255,182,.25) !important;
}

/* Section titles on light surfaces */
html body .section-title{ color: #fff !important; }
html body .section-subtitle{ color: var(--tgi-fx-ink-soft) !important; }


/* v5.4 — Navbar hover/active visibility (kill light pill background from enterprise.css) */
html body .ent-nav > li > a:hover,
html body .ent-nav > li.active > a,
html body .ent-nav > li.tgi-active > a,
html body .ent-nav a:hover,
html body .ent-nav a.active{
  color: var(--tgi-fx-neon) !important;
  background: rgba(92,255,182,.12) !important;
  border-radius: 8px;
  text-decoration: none !important;
}
html body .ent-nav > li > a{
  border-radius: 8px;
  transition: color .25s var(--tgi-fx-ease), background .25s var(--tgi-fx-ease) !important;
}

/* Legacy navbar variants (career, blog, sector inline navs) */
html body nav#navbar .nav-link:hover,
html body nav#navbar .nav-link.active,
html body .navbar .nav-link:hover,
html body .navbar .nav-link.active,
html body .nav-link.scrollto:hover,
html body .nav-link.scrollto.active{
  color: var(--tgi-fx-neon) !important;
  background: rgba(92,255,182,.12) !important;
  border-radius: 8px;
}

/* Dropdown items hover */
html body .dropdown-menu .dropdown-item:hover,
html body .dropdown-menu .dropdown-item:focus,
html body .dropdown-menu .dropdown-item.active{
  background: rgba(92,255,182,.15) !important;
  color: var(--tgi-fx-neon) !important;
}

/* Mobile menu hover */
html body .ent-mobile-menu nav ul li a:hover,
html body .ent-mobile-nav a:hover{
  color: var(--tgi-fx-neon) !important;
  background: rgba(92,255,182,.10) !important;
}

/* Universal button text-decoration on hover */
html body button:hover,
html body .btn:hover{ text-decoration: none !important; }

/* Force readable text on light-bg + white-text combo */
html body [style*="background:#ffffff"][style*="color:#fff"],
html body [style*="background:#fff;"][style*="color:#fff"]{
  color: var(--tgi-fx-green-deep) !important;
}

/* ============================================================================
   v5.5 — CINEMATIC AI VISUAL (giant, animated, 3D, interactive)
   ============================================================================ */

/* Bigger overall canvas */
html body .tgi-ai-visual{
  width: clamp(360px, 38vw, 520px) !important;
  height: clamp(360px, 38vw, 520px) !important;
  position: relative !important;
  perspective: 1200px;
  filter: drop-shadow(0 0 60px rgba(92,255,182,.25));
}

/* Central core — bigger and rotating */
html body .tgi-ai-core{
  width: 140px !important; height: 140px !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,212,170,.18) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}

/* Concentric rotating rings — three at different speeds + directions */
html body .tgi-ai-ring{
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(122,255,200,.45);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
html body .tgi-ai-ring-1{
  width: 140px !important; height: 140px !important;
  border-color: rgba(92,255,182,.55) !important;
  border-style: solid;
  border-width: 2px;
  animation: tgi-spin-cw 18s linear infinite, tgi-ring-glow 2.5s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(92,255,182,.30), inset 0 0 30px rgba(92,255,182,.15);
}
html body .tgi-ai-ring-2{
  width: 110px !important; height: 110px !important;
  border-color: rgba(45,212,170,.50) !important;
  animation: tgi-spin-ccw 14s linear infinite;
}
html body .tgi-ai-ring-3{
  width: 80px !important; height: 80px !important;
  border-color: rgba(72,143,130,.65) !important;
  animation: tgi-spin-cw 9s linear infinite;
}
/* 4th & 5th pulse rings (CSS-only — animate width/height to create pulse waves) */
html body .tgi-ai-core::before,
html body .tgi-ai-core::after{
  content:""; position:absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(92,255,182,.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
html body .tgi-ai-core::before{ animation: tgi-pulse-wave 3.2s ease-out infinite; }
html body .tgi-ai-core::after { animation: tgi-pulse-wave 3.2s ease-out infinite 1.6s; }

@keyframes tgi-spin-cw{ from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes tgi-spin-ccw{ from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(-360deg)} }
@keyframes tgi-pulse-wave{
  0%   { width: 100px; height: 100px; opacity: .8; border-width: 2px; }
  100% { width: 320px; height: 320px; opacity: 0; border-width: 0px; }
}
@keyframes tgi-ring-glow{
  0%,100%{ box-shadow: 0 0 24px rgba(92,255,182,.25), inset 0 0 24px rgba(92,255,182,.12); }
  50%    { box-shadow: 0 0 48px rgba(92,255,182,.55), inset 0 0 36px rgba(92,255,182,.25); }
}

/* Nucleus — spinning AI icon */
html body .tgi-ai-nucleus{
  position: absolute !important; z-index: 6;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  animation: tgi-nucleus-pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(92,255,182,.85));
}
html body .tgi-ai-nucleus svg{
  animation: tgi-spin-cw 22s linear infinite;
}
@keyframes tgi-nucleus-pulse{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.08); }
}

/* Nodes — bigger, with 3D flip on hover + orbital float */
html body .tgi-ai-node{
  width: 64px !important; height: 64px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(34,108,93,.85), rgba(58,150,132,.65)) !important;
  border: 1px solid rgba(122,255,200,.45) !important;
  font-size: 1.55rem !important;
  color: #5cffb6 !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.30),
    0 0 22px rgba(92,255,182,.30),
    inset 0 0 0 1px rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22,1.4,.36,1), box-shadow .35s, border-color .35s, background .35s !important;
  cursor: pointer;
}
html body .tgi-ai-node i,
html body .tgi-ai-node .bi{
  transition: transform .55s cubic-bezier(.22,1.4,.36,1);
}
html body .tgi-ai-node:hover{
  background: linear-gradient(135deg, #10b981, #5cffb6) !important;
  color: #04140e !important;
  border-color: #5cffb6 !important;
  box-shadow:
    0 14px 40px rgba(92,255,182,.50),
    0 0 50px rgba(92,255,182,.55),
    inset 0 0 0 1px rgba(255,255,255,.30) !important;
  z-index: 10;
}
html body .tgi-ai-node:hover i,
html body .tgi-ai-node:hover .bi{
  transform: rotateY(360deg) scale(1.15);
  color: #04140e !important;
}

/* Each node has its own orbit-radius + speed for a richer feel */
html body .tgi-node-1{
  top: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  animation: tgi-orbit-1 9s ease-in-out infinite !important;
}
html body .tgi-node-2{
  top: 14% !important; right: 6% !important; left: auto !important;
  animation: tgi-orbit-2 11s ease-in-out infinite !important;
}
html body .tgi-node-3{
  bottom: 14% !important; right: 6% !important; top: auto !important;
  animation: tgi-orbit-3 10s ease-in-out infinite !important;
}
html body .tgi-node-4{
  bottom: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  animation: tgi-orbit-4 8.5s ease-in-out infinite !important;
}
html body .tgi-node-5{
  bottom: 14% !important; left: 6% !important; top: auto !important;
  animation: tgi-orbit-5 11.5s ease-in-out infinite !important;
}
html body .tgi-node-6{
  top: 14% !important; left: 6% !important;
  animation: tgi-orbit-6 9.5s ease-in-out infinite !important;
}
@keyframes tgi-orbit-1{
  0%,100%{ transform: translateX(-50%) translateY(0) rotate(0); }
  50%    { transform: translateX(-50%) translateY(-14px) rotate(8deg); }
}
@keyframes tgi-orbit-2{
  0%,100%{ transform: translate(0,0) rotate(0); }
  50%    { transform: translate(-10px,12px) rotate(-6deg); }
}
@keyframes tgi-orbit-3{
  0%,100%{ transform: translate(0,0) rotate(0); }
  50%    { transform: translate(-12px,-10px) rotate(8deg); }
}
@keyframes tgi-orbit-4{
  0%,100%{ transform: translateX(-50%) translateY(0) rotate(0); }
  50%    { transform: translateX(-50%) translateY(14px) rotate(-8deg); }
}
@keyframes tgi-orbit-5{
  0%,100%{ transform: translate(0,0) rotate(0); }
  50%    { transform: translate(12px,-12px) rotate(6deg); }
}
@keyframes tgi-orbit-6{
  0%,100%{ transform: translate(0,0) rotate(0); }
  50%    { transform: translate(10px,10px) rotate(-8deg); }
}

/* Connection lines SVG — bigger, more visible, more travelling dots */
html body .tgi-ai-lines{
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 1;
  pointer-events: none;
  opacity: .85;
}
html body .tgi-ai-lines line{
  stroke: rgba(122,255,200,.40) !important;
  stroke-width: 1.5 !important;
  animation: tgi-line-flicker 4s ease-in-out infinite;
}
@keyframes tgi-line-flicker{
  0%,100%{ stroke-opacity: .25; }
  50%    { stroke-opacity: .65; }
}

/* Chips — floating, glowing, with slight breathing */
html body .tgi-ai-chip{
  background: rgba(28,90,79,.95) !important;
  border: 1px solid rgba(122,255,200,.50) !important;
  color: #5cffb6 !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  padding: 8px 18px !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 22px rgba(92,255,182,.35) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html body .tgi-chip-top{
  top: -16px !important;
  animation: tgi-chip-bob 4s ease-in-out infinite, tgi-chip-glow 3s ease-in-out infinite !important;
}
html body .tgi-chip-bottom{
  bottom: -16px !important;
  animation: tgi-chip-bob 4s ease-in-out infinite 2s, tgi-chip-glow 3s ease-in-out infinite 1.5s !important;
}
@keyframes tgi-chip-bob{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%    { transform: translateX(-50%) translateY(-6px); }
}
@keyframes tgi-chip-glow{
  0%,100%{ box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 16px rgba(92,255,182,.30); }
  50%    { box-shadow: 0 6px 28px rgba(0,0,0,.40), 0 0 42px rgba(92,255,182,.65); }
}

/* Parallax mouse-tilt — JS adds inline CSS vars --tgi-ai-rx and --tgi-ai-ry */
html body .tgi-ai-visual{
  transform: perspective(1000px) rotateX(var(--tgi-ai-rx, 0deg)) rotateY(var(--tgi-ai-ry, 0deg));
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}

/* Mobile: scale down */
@media (max-width: 992px){
  html body .tgi-ai-visual{ width: 320px !important; height: 320px !important; }
  html body .tgi-ai-node{ width: 50px !important; height: 50px !important; font-size: 1.25rem !important; }
  html body .tgi-ai-core{ width: 100px !important; height: 100px !important; }
  html body .tgi-ai-ring-1{ width: 100px !important; height: 100px !important; }
  html body .tgi-ai-ring-2{ width: 80px !important; height: 80px !important; }
  html body .tgi-ai-ring-3{ width: 60px !important; height: 60px !important; }
}

/* Reduced motion: stop heavy animations */
@media (prefers-reduced-motion: reduce){
  html body .tgi-ai-ring,html body .tgi-ai-nucleus,html body .tgi-ai-nucleus svg,
  html body .tgi-ai-node,html body .tgi-ai-core::before,html body .tgi-ai-core::after,
  html body .tgi-ai-chip{ animation: none !important; }
}

/* ============================================================================
   v5.6 — Stacked logo (tgi_logo_white.png) sizing for different contexts
   The logo is a SQUARE stacked layout (TG monogram + TECHSTAS GLOBAL +
   INNOVATIONS subtitle). It needs different sizing per context:
   - Navbar: needs to be taller than horizontal wordmark, narrower constraint
   - Preloader: should be huge for impact
   - Footer: tall for full presence
   ============================================================================ */
html body header .ent-logo img,
html body a.ent-logo > img,
html body img#navLogo,
html body #tgi-header .ent-logo img,
html body #tgi-nav-root #navLogo{
  height: 72px !important;
  max-height: 72px !important;
  min-height: 60px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  object-position: left center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(92,255,182,.45));
}
html body .ent-header.tgi-scrolled .ent-logo img,
html body .ent-header.tgi-scrolled #navLogo,
html body .ent-header.scrolled .ent-logo img{
  height: 58px !important; max-height: 58px !important;
}
@media (max-width: 992px){
  html body .ent-logo img, html body #navLogo{
    height: 54px !important; max-height: 54px !important;
  }
}

/* Preloader logo — make it BIG */
html body .ent-preloader-logo,
html body .ent-preloader img.ent-preloader-logo,
html body .loader-mask .loader img{
  width: 280px !important;
  max-width: 60vw !important;
  max-height: 45vh !important;
  height: auto !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 0 40px rgba(92,255,182,.7))
    drop-shadow(0 0 120px rgba(45,212,170,.5))
    drop-shadow(0 6px 30px rgba(0,0,0,.4)) !important;
}

/* Footer brand column logo — keep stacked proportions */
html body .ent-footer-brand img,
html body footer#footer .footer-info img{
  width: auto !important;
  height: 100px !important;
  max-height: 100px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  object-position: left center;
  margin-bottom: 18px !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)) drop-shadow(0 0 20px rgba(92,255,182,.35));
}

/* Mobile menu open-state logo */
html body .ent-mobile-nav-header img,
html body .ent-mobile-logo img,
html body #mobileNav img{
  height: 56px !important;
  max-height: 56px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain;
}

/* The center-aligned ent-header layout — keep logo left-anchored */
html body .ent-header-inner{
  display: flex !important;
  align-items: center !important;
  gap: 24px;
}

/* ============================================================================
   v5.7 — CSS-only preloader auto-hide failsafe
   Even if JS fails completely, this animation forces the preloader to
   fade away after 2 seconds. No script dependency. Guaranteed page visibility.
   ============================================================================ */
@keyframes tgiPreloaderAutoHide {
  0%   { opacity: 1; visibility: visible; pointer-events: auto; }
  90%  { opacity: 1; visibility: visible; pointer-events: auto; }
  100% { opacity: 0; visibility: hidden;  pointer-events: none; display: none !important; }
}
html body .ent-preloader,
html body .loader-mask,
html body #preloader{
  animation: tgiPreloaderAutoHide 2.2s ease-out forwards !important;
}
/* JS may still try to hide it earlier — those inline styles win */

/* ============================================================================
   v5.8 — Reveal-animation failsafe
   .tgi-reveal starts at opacity:0 and becomes visible when JS adds .is-in.
   If the IntersectionObserver fails or never fires for some reason, content
   stays invisible. This animation auto-reveals after 1.5s as a guarantee.
   ============================================================================ */
@keyframes tgiRevealAutoShow {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: none; }
}
.tgi-reveal{
  animation: tgiRevealAutoShow .9s ease-out 1.5s both;
}
.tgi-reveal.is-in{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Belt-and-suspenders: make ALL images visible by default, no matter what */
html body img{
  opacity: 1 !important;
  visibility: visible !important;
}
html body picture, html body video, html body iframe{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================================
   v5.9 — file:// protocol compatibility + image render guarantee
   ============================================================================ */

/* Force ALL images to render at intrinsic size even if container measurements glitch */
html body img:not([width]):not([height]){
  max-width: 100%;
  height: auto;
}
html body img[loading="lazy"]{
  /* Force lazy-loaded images to load eagerly when reveal animation kicks in */
  loading: eager;
}

/* Ensure hero bg is visible enough to read as a real image */
.ent-hero-bg{ opacity: .45 !important; }

/* If owl-carousel fails to initialize (e.g. jQuery loads late), show first client logo anyway */
.ent-client-logo .fadeOutClients:not(.owl-loaded) .item:not(:first-child){ display: none; }
.ent-client-logo .fadeOutClients:not(.owl-loaded) .item:first-child{
  display: flex !important; opacity: 1 !important; visibility: visible !important;
}

/* Make sure broken-src img placeholders aren't hidden completely */
html body img{ min-width: 1px; min-height: 1px; }

/* ============================================================================
   v6.0 — Partner logo size FIX
   .ent-partner-logo is applied directly to <img> tags (not wrapping div).
   The earlier rule treating them as card containers caused them to render at
   intrinsic size and explode the layout. These rules constrain them properly.
   ============================================================================ */
html body img.ent-partner-logo,
html body .ent-partners-track > img.ent-partner-logo,
html body .ent-partners-band img.ent-partner-logo{
  height: 56px !important;
  max-height: 56px !important;
  min-height: 56px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: inline-block !important;

  /* white pill card around the logo */
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  margin: 0 8px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.20) !important;
  border: 1px solid rgba(255,255,255,.15) !important;

  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s !important;
  filter: none !important;
  opacity: 1 !important;
}
html body img.ent-partner-logo:hover{
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 14px 30px rgba(92,255,182,.30), 0 0 0 2px #5cffb6 !important;
}
@media (max-width: 768px){
  html body img.ent-partner-logo{
    height: 44px !important; max-height: 44px !important; min-height: 44px !important;
    max-width: 110px !important; padding: 6px 12px !important;
  }
}

/* ============================================================================
   v6.1 — Hide ALL legacy headers when the dynamic nav (tgi-nav.js) is injected.
   tgi-nav.js creates #tgi-nav-root at top of body. When that exists, hide
   every pre-existing <header> so we have ONE unified navbar site-wide.
   ============================================================================ */
html body:has(#tgi-nav-root) header#header:not(#tgi-header),
html body:has(#tgi-nav-root) header.header,
html body:has(#tgi-nav-root) header.bg-white,
html body:has(#tgi-nav-root) header.fixed-top:not(#tgi-header),
html body:has(#tgi-nav-root) header.d-flex.align-items-center,
html body:has(#tgi-nav-root) header[id="header"]:not(#tgi-header){
  display: none !important;
}

/* Fallback for browsers without :has() — target headers known to have legacy classes */
header#header.header.bg-white.fixed-top{ display: none !important; }
header#header.d-flex.align-items-center{ display: none !important; }

/* ============================================================================
   v6.2 — Career page job listings + Globe/ecllipse decoration replacement
   ============================================================================ */

/* Career details cards — were white #FAFAFA with dark text, but our dark theme
   forces text white => invisible. Convert to dark glass cards. */
html body .career-details-card{
  background: linear-gradient(135deg, #226c5d 0%, #3a9684 60%, #52ad97 100%) !important;
  border: 1px solid rgba(122,255,200,.36) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 14px 40px rgba(6,32,26,.40);
  color: var(--tgi-fx-ink, #f0fff8) !important;
}
html body .career-details-card h5,
html body .career-details-card h2,
html body .career-details-card h3,
html body .career-details-card h4,
html body .career-details-card .title-section-secondary h5,
html body .career-details-card .title-section-secondary h2{
  color: #ffffff !important;
}
html body .career-details-card b{ color: #5cffb6 !important; }
html body .career-details-card p,
html body .career-details-card li,
html body .career-details-card span:not([class*="badge"]){
  color: #e8f7ef !important;
  line-height: 1.7;
}
html body .career-details-card ul, html body .career-details-card ol{ padding-left: 22px; }
html body .career-details-card a{
  background: linear-gradient(135deg, #10b981, #5cffb6) !important;
  color: #04140e !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 28px rgba(16,185,129,.40);
  transition: transform .3s, box-shadow .3s;
}
html body .career-details-card a:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(16,185,129,.55);
  color: #04140e !important;
}
html body .career-details-card h5 b{
  color: #5cffb6 !important; font-weight: 800;
}

/* FAQ accordion on career page — same dark glass treatment */
html body .faq .accordion-item{
  background: linear-gradient(135deg, #226c5d 0%, #3a9684 60%, #52ad97 100%) !important;
  border: 1px solid rgba(122,255,200,.30) !important;
  border-radius: 14px !important;
  margin-bottom: 12px;
  overflow: hidden;
}
html body .faq .accordion-button{
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
html body .faq .accordion-body{
  background: rgba(20,74,64,.45) !important;
  color: #d4ede0 !important;
}
html body .faq .accordion-button:not(.collapsed){
  background: rgba(92,255,182,.18) !important;
  color: #5cffb6 !important;
  box-shadow: none !important;
}

/* Replace the small ellipse "•" decoration with the brand TG token */
html body img[src*="ecllipse-b.png"],
html body img[src*="ellipse.png"]{
  width: 22px !important; height: 22px !important;
  vertical-align: middle;
  /* Tint white ellipse to brand neon green */
  filter: invert(98%) sepia(20%) saturate(2000%) hue-rotate(95deg) brightness(1.15)
          drop-shadow(0 0 8px rgba(92,255,182,.6)) !important;
  margin-right: 10px !important;
}

/* The rotating "globe-white.png" used on cloud/saas/enterprise pages — hide it.
   It's a generic globe that competes with the actual brand mark. */
html body img.globe-rotate,
html body img[src*="globe-white.png"],
html body img[src*="globe-rotate"],
html body img[src*="banner-globe.png"]{
  display: none !important;
}
html body [style*="banner-globe.png"]{
  background-image: none !important;
}

/* Background images using globe-white or related — neutralised */
html body [style*="globe-white"],
html body [style*="globe-rotate"]{
  background-image: var(--tgi-fx-grad-soft) !important;
}

/* ============================================================================
   v6.3 — Logo MUCH bigger + Universal premium font stack
   ============================================================================ */

/* Load Space Grotesk + Inter via @import as a safety net.
   (Each page also loads these via <link>, but if any page misses them, this fixes it.) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Logo — properly visible. Bumped from 56px to 80px navbar, 70px scrolled. */
html body header .ent-logo img,
html body a.ent-logo > img,
html body img#navLogo,
html body #tgi-header .ent-logo img,
html body #tgi-nav-root #navLogo,
html body .ent-header .ent-logo img{
  height: 80px !important;
  max-height: 80px !important;
  min-height: 68px !important;
  width: auto !important;
  max-width: 320px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.40)) drop-shadow(0 0 20px rgba(92,255,182,.50)) !important;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), filter .3s, height .3s !important;
}
html body .ent-header.tgi-scrolled .ent-logo img,
html body .ent-header.tgi-scrolled #navLogo,
html body .ent-header.scrolled .ent-logo img{
  height: 64px !important; max-height: 64px !important;
}
@media (max-width: 992px){
  html body .ent-logo img, html body #navLogo{
    height: 60px !important; max-height: 60px !important;
  }
}
@media (max-width: 576px){
  html body .ent-logo img, html body #navLogo{
    height: 52px !important; max-height: 52px !important;
  }
}

/* Bump up the navbar height to accommodate the bigger logo */
html body .ent-header,
html body #tgi-header{
  min-height: 96px;
}
html body .ent-header-inner{
  min-height: 96px;
  display: flex !important; align-items: center !important;
}

/* UNIVERSAL PREMIUM FONT STACK — applied at !important to override legacy Poppins/Nunito everywhere */
html, body, html body,
html body *:not(.bi):not([class^="bx"]):not(i):not(svg):not(svg *){
  font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* Display font for all headings + bold display text */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .ent-h1, html body .ent-h2, html body .ent-h3, html body .ent-h4, html body .ent-h5,
html body .display-1, html body .display-2, html body .display-3, html body .display-4,
html body .display-5, html body .display-6,
html body .hero-headline, html body .section-title, html body .lat-hero h1,
html body .lat-section-title h2, html body .blog-hero h1, html body .blog-section-title h2,
html body .ent-hero-content h1, html body .ent-section-header h2,
html body .lat-culture h2, html body .lat-cta h2, html body .lat-value h3,
html body .blog-featured-body h2, html body .blog-card-v2-body h3,
html body .ent-preloader-name, html body .lat-tl-card h3{
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  font-feature-settings: 'ss01' on, 'cv11' on;
}

/* Buttons + CTAs use display font for that premium AI-era feel */
html body .btn-enterprise,
html body .btn-ent-primary, html body .btn-ent-accent, html body .btn-ent-ghost, html body .btn-ent-outline,
html body .btn-primary, html body .lat-cta-btn, html body .pkg-cta, html body .nav-cta,
html body .blog-featured-cta{
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
}

/* Navigation menus get the display font for crisp readability */
html body .ent-nav a, html body .ent-nav > li > a,
html body .ent-mega-link, html body .ent-mega-group h6,
html body .ent-topbar a, html body nav#navbar .nav-link,
html body .navbar .nav-link, html body .nav-link.scrollto{
  font-family: 'Inter', 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Small caps / eyebrow labels — extra premium with letter-spacing */
html body .ent-overline, html body .lat-tag, html body .blog-hero-tag,
html body [class*="eyebrow"], html body [class*="section-label"],
html body .section-label, html body .blog-section-title .eyebrow{
  font-family: 'Inter', 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

/* Override legacy Poppins / Nunito / Raleway / Arial */
html body [style*="font-family:Poppins"],
html body [style*="font-family: Poppins"],
html body [style*="font-family:'Poppins'"],
html body [style*="font-family: 'Poppins'"],
html body [style*="font-family:Nunito"],
html body [style*="font-family: Nunito"],
html body [style*="font-family:Raleway"],
html body [style*="font-family: Raleway"]{
  font-family: 'Inter', 'Space Grotesk', sans-serif !important;
}

/* Apply subtle font-smoothing globally for that premium feel */
html body{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* ============================================================================
   v6.4 — Technopark badge text contrast lock + sector label readability
   ============================================================================ */

/* Force the badge text inside the AI graphic to always render dark on white */
html body .tgi-ai-graphic > div[style*="rgba(255,255,255,0.96)"] span:first-of-type,
html body .tgi-ai-graphic > div[style*="rgba(255,255,255,0.96)"] span:nth-of-type(1){
  color: #06322c !important;
  font-weight: 800 !important;
}
html body .tgi-ai-graphic > div[style*="rgba(255,255,255,0.96)"] span:nth-of-type(2){
  color: #488f82 !important;
  font-weight: 500 !important;
}
html body .tgi-ai-graphic > div[style*="rgba(255,255,255,0.96)"]{
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 10px 30px rgba(6,32,26,.30), 0 0 0 1px rgba(92,255,182,.25) !important;
}

/* Sector label SVG text inside the AI graphic — guarantee opacity */
html body .tgi-ai-graphic svg text{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================================
   v6.5 — Logo: zoom-and-clip to make the visible artwork actually big
   The source PNG is 4501x4500 with ~30% transparent padding around the logo.
   Solution: bigger height + transform:scale to enlarge the visible artwork,
   inside a clipping container so the scaled-up image doesn't push neighbours.
   ============================================================================ */

/* Logo CONTAINER (the <a class="ent-logo">) — large, clips, centered */
html body header .ent-logo,
html body a.ent-logo,
html body #tgi-header .ent-logo,
html body #tgi-nav-root .ent-logo{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start;
  height: 80px !important;
  width: auto !important;
  max-width: 360px !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* Logo IMG — physically large + scaled up to crop the transparent padding */
html body header .ent-logo img,
html body a.ent-logo > img,
html body img#navLogo,
html body #tgi-header .ent-logo img,
html body #tgi-nav-root #navLogo,
html body .ent-header .ent-logo img{
  height: 120px !important;
  max-height: 120px !important;
  min-height: 100px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  transform: scale(1.45) !important;
  transform-origin: left center !important;
  margin-left: -8px !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.40)) drop-shadow(0 0 24px rgba(92,255,182,.55)) !important;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), filter .3s !important;
}
html body header .ent-logo:hover img,
html body a.ent-logo:hover > img{
  transform: scale(1.52) !important;
  filter: drop-shadow(0 0 30px rgba(92,255,182,.75)) !important;
}

/* Scrolled-state still big but a touch smaller */
html body .ent-header.tgi-scrolled .ent-logo img,
html body .ent-header.tgi-scrolled #navLogo,
html body .ent-header.scrolled .ent-logo img{
  height: 100px !important; max-height: 100px !important;
  transform: scale(1.35) !important;
}

/* Header height — grow to accommodate the bigger logo */
html body .ent-header,
html body #tgi-header{
  min-height: 108px !important;
}
html body .ent-header-inner{
  min-height: 100px !important;
  display: flex !important;
  align-items: center !important;
}

/* Tablet */
@media (max-width: 992px){
  html body .ent-logo{ height: 70px !important; }
  html body .ent-logo img, html body #navLogo{
    height: 100px !important; max-height: 100px !important;
    transform: scale(1.35) !important;
  }
  html body .ent-header, html body #tgi-header{ min-height: 88px !important; }
  html body .ent-header-inner{ min-height: 80px !important; }
}
/* Mobile */
@media (max-width: 576px){
  html body .ent-logo{ height: 56px !important; max-width: 220px !important; }
  html body .ent-logo img, html body #navLogo{
    height: 80px !important; max-height: 80px !important;
    transform: scale(1.30) !important;
  }
  html body .ent-header, html body #tgi-header{ min-height: 72px !important; }
  html body .ent-header-inner{ min-height: 64px !important; }
}

/* ============================================================================
   v6.6 — Footer + Preloader + Mobile menu logos enlarged with scale-crop
   Same technique as the navbar: bigger native height + transform:scale to
   eliminate the ~30% transparent padding around the source PNG.
   ============================================================================ */

/* === FOOTER BRAND LOGOS — every variant === */
html body .ent-footer-brand img,
html body footer#footer .footer-info img,
html body footer .footer-info img,
html body footer[class*="ent-footer"] img:first-of-type,
html body footer img[src*="tgi_logo_white"]:first-of-type,
html body footer[style*="background"] .col-lg-4 > img:first-of-type{
  height: 120px !important;
  max-height: 120px !important;
  min-height: 100px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  transform: scale(1.45) !important;
  transform-origin: left center !important;
  margin: 0 0 28px 0 !important;
  padding-left: 12px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.40))
          drop-shadow(0 0 22px rgba(92,255,182,.55)) !important;
}

/* Container that holds the logo — give it the breathing room */
html body .ent-footer-brand,
html body footer#footer .footer-info,
html body footer .col-lg-4:has(img[src*="tgi_logo_white"]){
  padding-bottom: 8px;
  overflow: visible;
}

/* === PRELOADER LOGO — even bigger, since preloader has lots of space === */
html body .ent-preloader-logo,
html body .ent-preloader img.ent-preloader-logo,
html body .loader-mask .loader img,
html body .ent-preloader img[src*="tgi_logo"]{
  width: 320px !important;
  max-width: 70vw !important;
  max-height: 50vh !important;
  height: auto !important;
  object-fit: contain !important;
  transform: scale(1.30) !important;
  transform-origin: center !important;
  filter:
    drop-shadow(0 0 50px rgba(92,255,182,.75))
    drop-shadow(0 0 140px rgba(45,212,170,.55))
    drop-shadow(0 8px 40px rgba(0,0,0,.45)) !important;
  animation: tgiLogoBreathe 2.6s cubic-bezier(.22,.61,.36,1) infinite alternate !important;
}

/* === MOBILE MENU LOGO === */
html body .ent-mobile-nav-header img,
html body .ent-mobile-logo img,
html body #mobileNav img{
  height: 90px !important;
  max-height: 90px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  transform: scale(1.30) !important;
  transform-origin: left center !important;
  margin-left: 6px !important;
}

/* === OFFCANVAS LEGACY DRAWER LOGO === */
html body .offcanvas img[src*="tgi_logo"],
html body .offcanvas-body img[src*="tgi_logo"]{
  height: 100px !important;
  max-height: 100px !important;
  width: auto !important;
  transform: scale(1.35) !important;
  transform-origin: left center !important;
}

/* === ANY OTHER LARGE LOGO INSTANCE (legacy career/blog landing imagery) === */
html body img[src*="tgi_logo_white"][width="60%"],
html body img[src*="tgi_logo_white"][width="300"]{
  width: auto !important;
  height: 140px !important;
  max-height: 140px !important;
  transform: scale(1.40) !important;
  transform-origin: left center !important;
}

/* === MOBILE breakpoints — proportionally smaller === */
@media (max-width: 992px){
  html body .ent-footer-brand img,
  html body footer#footer .footer-info img,
  html body footer .footer-info img{
    height: 96px !important; max-height: 96px !important;
    transform: scale(1.35) !important;
  }
  html body .ent-preloader-logo,
  html body .loader-mask .loader img{
    width: 240px !important;
    transform: scale(1.20) !important;
  }
  html body .ent-mobile-nav-header img,
  html body .ent-mobile-logo img{
    height: 72px !important; max-height: 72px !important;
  }
}
@media (max-width: 576px){
  html body .ent-footer-brand img,
  html body footer#footer .footer-info img,
  html body footer .footer-info img{
    height: 80px !important; max-height: 80px !important;
    transform: scale(1.25) !important;
  }
}

@keyframes tgiLogoBreathe{
  0%   { transform: scale(1.30); }
  100% { transform: scale(1.36); }
}

/* ============================================================================
   v6.7 — FINAL UNIVERSAL DEFENSIVE LAYER
   Comprehensive override to align EVERY inner page (digital-marketing,
   web-design-and-development, mobile-app-development, ecommerce-solutions,
   sector-*, portfolio*, blog*, etc.) with the home page green theme.
   Catches all remaining blue hex codes, alignment issues, padding gaps,
   inline-style inconsistencies, and font mismatches.
   ============================================================================ */

/* === BLUE → GREEN GLOBAL HEX OVERRIDE === */
/* Style.css uses --logocolor: #0B2C6A as the original navy. Any inline ref to
   these blue values gets force-converted. */
html body [style*="#0B2C6A"],
html body [style*="#0b2c6a"],
html body [style*="#102534"],
html body [style*="#061d48"],
html body [style*="#093078"],
html body [style*="#0E59F2"],
html body [style*="#1565c0"],
html body [style*="#005aab"],
html body [style*="#1E3FA8"],
html body [style*="#0078d4"],
html body [style*="#2B5EE8"],
html body [style*="#0582FF"],
html body [style*="#1a73e8"],
html body [style*="#0d6efd"],
html body [style*="#0056b3"],
html body [style*="#3b82f6"]{
  /* Inline color/bg attribute will be overridden by these higher-specificity rules below */
}

/* Force common inline color="#0B2C6A" / bg combos to green */
html body [style*="color:#0B2C6A"], html body [style*="color: #0B2C6A"],
html body [style*="color:#0b2c6a"], html body [style*="color: #0b2c6a"],
html body [style*="color:#102534"], html body [style*="color: #102534"],
html body [style*="color:#093078"], html body [style*="color: #093078"],
html body [style*="color:#061d48"], html body [style*="color: #061d48"]{
  color: #5cffb6 !important;
}

html body [style*="background:#0B2C6A"], html body [style*="background: #0B2C6A"],
html body [style*="background:#0b2c6a"], html body [style*="background: #0b2c6a"],
html body [style*="background-color:#0B2C6A"], html body [style*="background-color: #0B2C6A"],
html body [style*="background:#102534"], html body [style*="background: #102534"],
html body [style*="background:#093078"], html body [style*="background: #093078"],
html body [style*="background:#061d48"], html body [style*="background: #061d48"],
html body [style*="background-image:url(\"assets/img/breadcrumb"],
html body [style*="background-image: url(\"assets/img/breadcrumb"]{
  background: linear-gradient(135deg, #144a40 0%, #226c5d 50%, #3a9684 100%) !important;
  background-image: linear-gradient(135deg, #144a40 0%, #226c5d 50%, #3a9684 100%) !important;
}

/* CSS variable-based overrides (the var() values in style.css use these too) */
html body{
  --logocolor: #226c5d !important;
  --logocolordark: #144a40 !important;
  --primary: #10b981 !important;
  --secondary: #06322c !important;
  --dark-blue: #144a40 !important;
}

/* Any element that uses var(--logocolor) / var(--logocolordark) inherits the override */
html body [style*="var(--logocolor)"],
html body [style*="var(--logocolordark)"],
html body [style*="var(--dark-blue)"],
html body [style*="var(--primary)"]{ /* now resolves to green via overridden vars */ }

/* === INNER PAGE LAYOUT NORMALIZATION === */
/* Force consistent section padding across all inner pages */
html body section.main-section,
html body section.career-section,
html body section.contact-section,
html body section.portfolio-section,
html body section.faq,
html body section.process-main-section,
html body section.testimonial-section,
html body section.pricing-section,
html body section.service-section{
  padding: 64px 0 !important;
  background: #1a5a4e !important;
  color: #f0fff8 !important;
}
@media (min-width: 992px){
  html body section.main-section,
  html body section.career-section,
  html body section.contact-section,
  html body section.portfolio-section,
  html body section.faq,
  html body section.process-main-section,
  html body section.testimonial-section,
  html body section.pricing-section,
  html body section.service-section{
    padding: 80px 0 !important;
  }
}

/* Every section h3 / h2 should be readable */
html body section h1, html body section h2, html body section h3,
html body section h4, html body section h5, html body section h6{
  color: #ffffff !important;
}
html body section p, html body section li, html body section td{
  color: #d4ede0 !important;
}
html body section strong, html body section b{
  color: #5cffb6 !important;
}

/* All anchor links inside content sections — readable */
html body section a:not(.btn):not(.btn-enterprise):not(.lat-cta-btn):not(.blog-card-v2-link):not(.blog-featured-cta):not([class*="btn-ent"]){
  color: #5cffb6 !important;
}
html body section a:not(.btn):hover{
  color: #a3e6d0 !important;
}

/* === LEGACY CARD/PILL/BUTTON ELEMENTS === */
/* Old-style colored buttons → brand green gradient */
html body .mainbtn,
html body .main-btn,
html body .btn-blue,
html body .pkg-cta,
html body .nav-cta,
html body button.submit,
html body input[type="submit"]{
  background: linear-gradient(135deg, #10b981, #5cffb6) !important;
  color: #04140e !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  box-shadow: 0 10px 28px rgba(16,185,129,.40) !important;
  transition: transform .3s, box-shadow .3s !important;
}
html body .mainbtn:hover,
html body button.submit:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 44px rgba(16,185,129,.55) !important;
  color: #04140e !important;
}

/* Legacy pricing boxes, info cards, etc. */
html body .pricing-box, html body .pricing-card, html body .price-box,
html body .info-card, html body .feature-card, html body .testimonial-card,
html body .review-card, html body .process-main-section{
  background: linear-gradient(135deg, #226c5d 0%, #3a9684 60%, #52ad97 100%) !important;
  border: 1px solid rgba(122,255,200,.30) !important;
  border-radius: 18px !important;
  color: #f0fff8 !important;
  padding: 28px !important;
  box-shadow: 0 14px 40px rgba(6,32,26,.40) !important;
}
html body .pricing-box h3, html body .pricing-box h2,
html body .pricing-card h3, html body .info-card h3,
html body .feature-card h3, html body .testimonial-card h3,
html body .process-main-section h6, html body .process-main-section h3{
  color: #ffffff !important;
}

/* === INNER PAGE INPUTS / FORMS === */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
html body textarea,
html body select,
html body .form-control,
html body .form-select{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(122,255,200,.35) !important;
  color: #f0fff8 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  backdrop-filter: blur(8px);
}
html body input::placeholder,
html body textarea::placeholder,
html body select::placeholder{
  color: rgba(255,255,255,.5) !important;
}
html body input:focus,
html body textarea:focus,
html body select:focus,
html body .form-control:focus{
  border-color: #5cffb6 !important;
  box-shadow: 0 0 0 4px rgba(92,255,182,.20) !important;
  outline: none !important;
  background: rgba(255,255,255,.12) !important;
}

/* === ALIGNMENT / SPACING NORMALIZATION === */
/* Universal container max-width consistency */
html body .container,
html body .container-fluid,
html body .container-lg,
html body .container-xl{
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 992px){
  html body .container,
  html body .container-lg,
  html body .container-xl{
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* Row gap consistency */
html body .row:not(.g-0){
  --bs-gutter-y: 24px;
  row-gap: 24px;
}

/* Image fluidity to prevent overflow */
html body img{ max-width: 100% !important; height: auto; }
html body img[width]{ height: auto !important; }

/* Strip stray inline blue background images */
html body [style*="bg-blue"],
html body [style*="blue-bg"],
html body [style*="banner-globe"],
html body [style*="globe-rotate"],
html body [style*="gblobe-dark-blue"]{
  background-image: linear-gradient(135deg, #144a40, #3a9684) !important;
}
html body img[src*="bg-blue"],
html body img[src*="blue-bg"],
html body img[src*="banner-globe"],
html body img[src*="globe-rotate"],
html body img[src*="globe-white"],
html body img[src*="gblobe-dark-blue"]{
  display: none !important;
}

/* === LEGACY breadcrumb sections === */
html body section.breadcrumb,
html body section.breadcrumb-area,
html body .page-header,
html body .breadcrumb-bg{
  background: linear-gradient(160deg, #144a40 0%, #226c5d 45%, #3a9684 100%) !important;
  padding: 60px 0 40px !important;
  color: #fff !important;
}
html body section.breadcrumb h2,
html body section.breadcrumb h1,
html body .page-header h1,
html body .breadcrumb-area h1{
  color: #ffffff !important;
}
html body .breadcrumb-item a,
html body .breadcrumb a{
  color: #5cffb6 !important;
  text-decoration: none !important;
}
html body .breadcrumb-item.active,
html body .breadcrumb-item.active a{
  color: #a3e6d0 !important;
}

/* === PORTFOLIO / SERVICE / TESTIMONIAL CARDS === */
html body .portfolio-item,
html body .portfolio-card,
html body .project-card,
html body .work-item{
  background: linear-gradient(135deg, #226c5d 0%, #3a9684 60%, #52ad97 100%) !important;
  border: 1px solid rgba(122,255,200,.30) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform .45s, box-shadow .45s !important;
}
html body .portfolio-item:hover,
html body .portfolio-card:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 60px rgba(6,32,26,.45), 0 0 0 2px rgba(92,255,182,.35) !important;
}

/* === PROCESS / FAQ / ACCORDION === */
html body .accordion-item{
  background: linear-gradient(135deg, #226c5d, #3a9684) !important;
  border: 1px solid rgba(122,255,200,.30) !important;
  border-radius: 14px !important;
  margin-bottom: 10px;
  overflow: hidden;
}
html body .accordion-button{
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
html body .accordion-button::after{
  filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(95deg) brightness(1.5) !important;
}
html body .accordion-body{
  background: rgba(20,74,64,.55) !important;
  color: #d4ede0 !important;
}
html body .accordion-button:not(.collapsed){
  background: rgba(92,255,182,.18) !important;
  color: #5cffb6 !important;
}

/* === REMOVE EXCESS WHITE/LIGHT BACKGROUNDS === */
html body [style*="background:#fff"]:not(.ent-client-logo):not(.ent-partner-logo):not(img.ent-partner-logo):not([style*="rgba(255,255,255,0.96)"]):not([style*="rgba(255,255,255,0.98)"]),
html body [style*="background: #fff"]:not(.ent-client-logo):not(.ent-partner-logo):not(img.ent-partner-logo){
  background: linear-gradient(135deg,#1a5a4e,#226c5d) !important;
}
html body [style*="background-color:#fff"]:not(.ent-client-logo):not(.ent-partner-logo),
html body [style*="background-color: #fff"]:not(.ent-client-logo):not(.ent-partner-logo){
  background-color: #1a5a4e !important;
}
html body [style*="background:#f8fdfb"],
html body [style*="background: #f8fdfb"],
html body [style*="background:#FAFAFA"],
html body [style*="background: #FAFAFA"],
html body [style*="background:#f5f5f5"],
html body [style*="background: #f5f5f5"]{
  background: linear-gradient(135deg,#1a5a4e,#226c5d) !important;
  color: #f0fff8 !important;
}

/* === TYPOGRAPHY HARMONY === */
html body p, html body li, html body td, html body span, html body div{
  font-family: 'Inter', system-ui, sans-serif !important;
}
html body h1, html body h2, html body h3, html body h4, html body h5{
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* === EXISTING INLINE color="#fff" / "rgba(255,255,255,.55)" KEEP === */
/* Don't override explicit white text on dark backgrounds — they're already correct */

/* === REMOVE inline arrow/decoration globes === */
html body img[src*="ecllipse"], html body img[src*="ellipse"]{
  filter: brightness(0) invert(1) sepia(1) saturate(8) hue-rotate(95deg) brightness(1.2) !important;
  width: 22px !important; height: 22px !important;
}

/* === MAKE ALL TITLE-SECTION patterns consistent === */
html body .title-section h5,
html body .title-section-secondary h5,
html body .career-details-card .title-section-secondary h5{
  color: #5cffb6 !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem !important;
  font-weight: 700 !important;
}
html body .title-section h2,
html body .title-section h3,
html body .title-section-secondary h2,
html body .title-section-secondary h3{
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* === PAGINATION / SOCIAL ICONS === */
html body .pagination .page-link,
html body .page-item .page-link{
  background: rgba(36,108,95,.45) !important;
  border: 1px solid rgba(122,255,200,.25) !important;
  color: #5cffb6 !important;
}
html body .pagination .page-item.active .page-link{
  background: linear-gradient(135deg,#10b981,#5cffb6) !important;
  color: #04140e !important;
  border-color: transparent !important;
}

/* === Footer color cleanup for inline-styled footers === */
html body footer .row a:hover,
html body footer ul li a:hover{
  color: #5cffb6 !important;
}

/* ============================================================================
   v6.8 — Replace all globe ICONS with TGI brand mark
   Bootstrap-icons globe variants get hidden + replaced with a TG SVG inline.
   Also override boxicons & font-awesome globe variants.
   ============================================================================ */

/* Hide the original globe glyph */
html body i.bi-globe::before,
html body i.bi-globe2::before,
html body i.bi-globe-americas::before,
html body i.bi-globe-asia-australia::before,
html body i.bi-globe-central-south-asia::before,
html body i.bi-globe-europe-africa::before,
html body i.bx-globe::before,
html body i.bxs-globe::before,
html body i.bx-world::before,
html body i.fa-globe::before,
html body i.fa-globe-americas::before{
  content: "" !important;
  display: none !important;
}

/* Replace with a green TG icon background — sized to original icon slot */
html body i.bi-globe, html body i.bi-globe2,
html body i.bi-globe-americas, html body i.bi-globe-asia-australia,
html body i.bi-globe-central-south-asia, html body i.bi-globe-europe-africa,
html body i.bx-globe, html body i.bxs-globe, html body i.bx-world,
html body i.fa-globe, html body i.fa-globe-americas{
  display: inline-block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  vertical-align: middle;
  background-image: url('assets/img/tgi_logo_icon_white.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: scale(1.4);
  transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(92,255,182,.4));
  font-family: 'Bootstrap Icons' !important; /* keep type for sizing */
  font-size: inherit;
  color: transparent !important;
}

/* Inside mega-menu and sector cards where icons are colored green normally — make BG light */
html body .ent-mega-link .icon i.bi-globe,
html body .ent-mega-link .icon i.bi-globe2,
html body .ent-marquee-item i.bi-globe,
html body .ent-tech-item i.bi-globe{
  background-image: url('assets/img/tgi_logo_icon_white.png') !important;
}

/* If icon sits ON a dark background and needs to be visible white */
html body .ent-service-icon i.bi-globe,
html body .ent-sector-icon i.bi-globe,
html body .ent-ai-icon i.bi-globe,
html body .ent-process-num i.bi-globe{
  background-image: url('assets/img/tgi_logo_icon.png') !important;
}

/* Ambient background globe images already hidden by earlier rules — reinforce */
html body img[src*="globe"]:not([src*="tgi_logo_icon"]){
  /* If somehow a globe ref slipped through, force show TGI icon visually */
  filter: none !important;
}

/* v6.8b — The legacy .globe-rotate class is still applied to imgs that now
   show the TGI icon. Slow the rotation way down and add subtle glow. */
html body img.globe-rotate{
  animation: tgiSlowSpin 60s linear infinite !important;
  filter: drop-shadow(0 0 24px rgba(92,255,182,.55)) drop-shadow(0 0 60px rgba(45,212,170,.35));
  transform-origin: center;
}
@keyframes tgiSlowSpin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}
/* Hide if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  html body img.globe-rotate{ animation: none !important; }
}

/* ============================================================================
   v6.9 — Convert blue illustration GIFs/PNGs to green via hue-rotate
   + tighten padding around image containers everywhere.
   These illustrations are blue corporate art (undraw/freepik style).
   CSS filter hue-rotates them ~110deg to land in the green band,
   while keeping the line-art structure intact.
   ============================================================================ */

/* Apply green hue-shift to all illustration GIFs + PNGs in /gif/ folder */
html body img[src*="/gif/"]:not([src*="preloader.gif"]):not([src*="mailloading"]),
html body img[src*="assets/gif/"]:not([src*="preloader"]):not([src*="mailloading"]){
  filter:
    hue-rotate(110deg)
    saturate(0.80)
    brightness(0.95)
    contrast(1.05)
    drop-shadow(0 8px 30px rgba(6,32,26,.25)) !important;
  border-radius: 18px;
  background: transparent !important;
  transition: filter .4s, transform .4s;
}
html body img[src*="/gif/"]:hover{
  filter:
    hue-rotate(115deg)
    saturate(0.90)
    brightness(1)
    contrast(1.08)
    drop-shadow(0 12px 40px rgba(92,255,182,.35)) !important;
  transform: scale(1.02);
}

/* Also handle other blue illustration patterns sitting on white backgrounds */
html body img[src*="business-growth"],
html body img[src*="achieve-your-goal"],
html body img[src*="expert-instructor"],
html body img[src*="data-science-analytics"],
html body img[src*="utek-bnr"]{
  filter: hue-rotate(115deg) saturate(1.0) brightness(0.95) contrast(1.05) !important;
  border-radius: 18px;
}

/* Tighten image container padding — reduce white space around illustrations */
html body .main-section-img,
html body .main-section .col-md-6.main-section-img,
html body section .image-wrap,
html body section .illustration-wrap,
html body section [class*="-img"]{
  padding: 16px !important;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(36,108,95,.30), rgba(58,150,132,.20)) !important;
  border: 1px solid rgba(122,255,200,.20);
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* For pages where illustration sits in a white-background card, replace */
html body section [style*="background:#fff"] img[src*="/gif/"],
html body section [style*="background: #fff"] img[src*="/gif/"]{
  background: transparent !important;
}

/* Universal section spacing reduction — final tightening */
html body section{
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
@media (min-width: 992px){
  html body section:not(.ent-hero):not(.ent-topbar):not(.ent-marquee):not(.ent-partners-band):not(.ent-stats-strip):not(.lat-hero):not(.blog-hero){
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}
/* Reduce vertical gap between adjacent sections that follow a hero */
html body section.breadcrumb + section,
html body section.lat-hero + section,
html body section.blog-hero + section,
html body section.ent-hero + section,
html body section.tgi-page-hero + section,
html body section.breadcrumb-area + section,
html body section.sector-hero + section,
html body section.inner-page-header + section{
  padding-top: 36px !important;
}
@media (min-width: 992px){
  html body section.breadcrumb + section,
  html body section.lat-hero + section,
  html body section.blog-hero + section,
  html body section.ent-hero + section,
  html body section.tgi-page-hero + section,
  html body section.breadcrumb-area + section,
  html body section.sector-hero + section,
  html body section.inner-page-header + section{
    padding-top: 48px !important;
  }
}

/* Container max-height for illustrations to avoid huge empty regions */
html body section img[src*="/gif/"],
html body section img[src*="business-growth"],
html body section img[src*="achieve-your-goal"]{
  max-height: 420px !important;
  width: auto !important;
  margin: 0 auto;
  display: block;
}

/* Strip excessive bottom margins on .row in main-section */
html body section.main-section .row{
  margin-bottom: 0 !important;
  align-items: center !important;
}
html body section.main-section .row > [class*="col-"]{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Hide stray empty divs that add space */
html body section > div:empty,
html body section > br,
html body .container > br:first-child,
html body .container > br:last-child{ display: none !important; }

/* ============================================================================
   v7.0 — NUCLEAR BLUE BACKGROUND ELIMINATION
   Every legacy section that loads a blue/dark image background is forced to
   the brand-green gradient. Catches bg-blue.webp, 1bgabout.jpg blue overlay,
   breadcrumb.png, services-bg.png, contact-bg.png, login-bg.webp, etc.
   ============================================================================ */

/* === BLUE BACKGROUND IMAGES — kill them all === */
html body [style*="bg-blue"],
html body [style*="login-bg"],
html body [style*="1bgabout"],
html body [style*="seomodalbg"],
html body [style*="quote-bg"],
html body [style*="footer-bg"],
html body [style*="hero-bg.png"],
html body [style*="contact-bg.png"],
html body [style*="contact-form-bg"],
html body [style*="subscribe-bg"],
html body [style*="third-plan-bg"],
html body [style*="banner-globe"],
html body [style*="mob-nav-bg"],
html body [style*="round-dotted-bg"],
html body [style*="breadcrumb.png"],
html body [style*="404-bg"],
html body [style*="project-bg"],
html body [style*="services-bg.png"],
html body [style*="bg-2-n"],
html body [style*="bg-honey"]{
  background-image: linear-gradient(135deg, #144a40 0%, #226c5d 45%, #3a9684 100%) !important;
  background-color: #1a5a4e !important;
}

/* Class-level overrides — these legacy classes load blue backgrounds via CSS rules */
html body .service-section-banner .row,
html body .work-with-us,
html body .work-with-us-card,
html body .strength,
html body .strength-bg-img,
html body .traffic-process,
html body .services-process,
html body section.service,
html body .product,
html body .more-about-us,
html body .about-more,
html body .about-more-box,
html body .modal-content,
html body .modal-body,
html body .work-section{
  background: linear-gradient(135deg, #144a40 0%, #226c5d 45%, #3a9684 100%) !important;
  background-image: none !important;
}

/* The .service-section-banner specific — restore green hero feel with grid overlay */
html body .service-section-banner{
  background: linear-gradient(160deg, #144a40 0%, #226c5d 45%, #3a9684 100%) !important;
  position: relative;
  overflow: hidden;
}
html body .service-section-banner::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(122,255,200,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,255,200,.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 75%);
  opacity: .5;
  z-index: 0;
}
html body .service-section-banner > *{ position: relative; z-index: 1; }
html body .service-section-banner .row{
  background: rgba(28,90,79,.45) !important;
  background-image: none !important;
  border: 1px solid rgba(122,255,200,.20);
  border-radius: 24px !important;
  padding: 48px 40px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html body .service-section-banner h2,
html body .service-section-banner h3{
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
}
html body .service-section-banner p,
html body .service-section-banner li{
  color: #d4ede0 !important;
  line-height: 1.75;
}
html body .service-section-banner a{ color: #5cffb6 !important; }

/* === IMG-tag blue background images — show TGI icon instead === */
html body img[src*="bg-blue"],
html body img[src*="1bgabout"],
html body img[src*="seomodalbg"],
html body img[src*="login-bg"],
html body img[src*="mob-nav-bg"],
html body img[src*="round-dotted-bg"],
html body img[src*="banner-globe"]{
  display: none !important;
}

/* === Universal section background safety net === */
/* If any section still has a transparent or weird background showing through,
   force the brand surface */
html body section:not(.ent-hero):not(.ent-topbar):not(.ent-marquee):not(.ent-partners-band):not(.ent-stats-strip):not(.lat-hero):not(.blog-hero):not(.breadcrumb):not(.tgi-page-hero):not(.breadcrumb-area):not(.sector-hero):not(.inner-page-header):not(.ent-cta-section):not(.partners-slider){
  background-color: #1a5a4e !important;
}

/* Partners slider (the client carousel section) keeps its own bg */
html body section.partners-slider{
  background: linear-gradient(135deg, #144a40, #226c5d) !important;
}

/* Anything still showing pure white/light backgrounds in sections — kill */
html body section[style*="background:white"],
html body section[style*="background: white"],
html body section[style*="background-color:white"],
html body section[style*="background-color: white"]{
  background: linear-gradient(135deg, #1a5a4e, #226c5d) !important;
}

/* Modal popups — brand-green */
html body .modal-content{
  background: linear-gradient(160deg, #144a40, #226c5d) !important;
  border: 1px solid rgba(122,255,200,.30) !important;
  color: #f0fff8 !important;
}
html body .modal-header{
  border-bottom: 1px solid rgba(122,255,200,.20) !important;
  background: transparent !important;
}
html body .modal-title{ color: #ffffff !important; font-family: 'Space Grotesk', sans-serif !important; }
html body .modal-body{ color: #d4ede0 !important; background: transparent !important; }
html body .btn-close{ filter: brightness(0) invert(1); }

/* === Login-bg / 404-bg sections === */
html body .login-section, html body .signup-section, html body .auth-section,
html body .error-section, html body .page-404, html body .not-found{
  background: linear-gradient(160deg, #144a40, #226c5d, #3a9684) !important;
  color: #f0fff8 !important;
}

/* ============================================================================
   v7.1 — FINAL process-step grid alignment lock + universal padding audit
   Multiple conflicting CSS rules across files were causing process step cards
   to have uneven heights, offset numbers, and overflowing first/last cards.
   This block is the definitive override.
   ============================================================================ */

/* Process grid — 4 equal columns with proper gap */
html body .ent-process-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
  position: relative !important;
  padding: 0 !important;
}
@media (max-width: 992px){
  html body .ent-process-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  html body .ent-process-grid::before{ display: none !important; }
}
@media (max-width: 576px){
  html body .ent-process-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Each step card — equal height, equal padding, centered content */
html body .ent-process-step{
  background: linear-gradient(135deg, #226c5d 0%, #3a9684 60%, #52ad97 100%) !important;
  border: 1px solid rgba(122,255,200,.30) !important;
  border-radius: 18px !important;
  padding: 28px 22px 30px !important;
  min-height: 240px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(6,32,26,.35);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s, border-color .4s;
  overflow: visible !important;
}
html body .ent-process-step:hover{
  transform: translateY(-6px) !important;
  border-color: #5cffb6 !important;
  box-shadow: 0 24px 60px rgba(6,32,26,.45), 0 0 0 2px rgba(92,255,182,.30) !important;
}

/* Numbered circle — fixed size, top-centered, consistent */
html body .ent-process-step .ent-process-num{
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #10b981, #5cffb6) !important;
  border: 3px solid rgba(92,255,182,.50) !important;
  color: #04140e !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  box-shadow: 0 8px 24px rgba(16,185,129,.40),
              0 0 0 8px rgba(92,255,182,.12),
              0 0 28px rgba(92,255,182,.45);
  flex-shrink: 0 !important;
  position: relative;
  z-index: 2;
}

/* Step title */
html body .ent-process-step h4{
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Step description */
html body .ent-process-step p{
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: #d4ede0 !important;
  margin: 0 !important;
  max-width: 100%;
}

/* Container that holds the process grid — make sure it's not constraining width */
html body .ent-process-grid .container,
html body .ent-section:has(.ent-process-grid) .container{
  max-width: 1280px;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ============================================================================
   v7.1b — UNIVERSAL PADDING / ALIGNMENT FINAL LOCK
   ============================================================================ */

/* v7.1 rule removed — it was breaking Bootstrap col widths. Equal height handled per-card via min-height. */

/* All container max-widths normalised */
html body .container,
html body .container-fluid,
html body .container-xl,
html body .container-lg,
html body .container-md{
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* All section content padding equalised */
html body section > .container,
html body section > .container-fluid,
html body section > .container-xl,
html body section > .container-lg{
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 768px){
  html body section > .container,
  html body section > .container-fluid{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Grid items uniform height */
html body .ent-feature-grid,
html body .ent-services-grid,
html body .ent-sectors-grid,
html body .ent-why-grid,
html body .lat-values-grid,
html body .lat-perks-grid,
html body .blog-grid{
  align-items: stretch !important;
}

/* Tighten image+text two-column rows */
html body .row.align-items-center{
  align-items: center !important;
}
html body .row.align-items-center > [class*="col-"]{
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Final visibility safety net */
html body .ent-process-step *{ opacity: 1 !important; visibility: visible !important; }

/* ============================================================================
   v7.2 — KILL the CSS pseudo-element globes (the ACTUAL source of globe icons
   around .title-section h5 headings on career, blog, and other inner pages)
   style.css lines 951-955 + 1273-1276 use content:url() to inject blue globe
   SVGs around h5 titles. Override them with TGI brand mark or hide entirely.
   ============================================================================ */

/* Replace the gblobe-dark-blue.svg with a neon-green TG monogram circle */
html body .title-section h5::before,
html body .title-section h5::after{
  content: "" !important;
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  background-image: url('assets/img/tgi_logo_icon_white.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 12px !important;
  vertical-align: middle;
  filter: drop-shadow(0 0 8px rgba(92,255,182,.55));
  transform: scale(1.4);
}

/* Same for title-section-secondary h5 — the dark blue small-globe variant */
html body .title-section-secondary h5::before{
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url('assets/img/tgi_logo_icon_white.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 0 !important;
  margin-right: 10px !important;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(92,255,182,.5));
  transform: scale(1.3);
}
html body .title-section-secondary h5::after{ content: none !important; }

/* Make sure title-section text itself reads green/white (h5 was using var(--dark) = dark grey) */
html body .title-section h5{
  color: #5cffb6 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: .14em !important;
}
html body .title-section h2{
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
}

/* If user prefers, simpler: hide the pseudo decorations entirely on some specific h5s */
html body .title-section h5.no-globe::before,
html body .title-section h5.no-globe::after{
  display: none !important;
}

/* === Also hide any other CSS content:url(.../globe...) pattern === */
html body *::before, html body *::after{
  /* If pseudo-element has content fetching a globe svg, it gets neutralised */
}
/* Specifically catch any remaining globe pseudo-content via attribute selector — but CSS
   doesn't let us read content:url() so we cover the two known rules above explicitly. */

/* ============================================================================
   v7.3 — EMERGENCY: Hide ALL duplicate inline navbars when tgi-nav.js loads
   7 sector pages have <nav class="enterprise-nav"> inline AND load tgi-nav.js
   which injects another nav. Plus inline offcanvas mobile drawers.
   ============================================================================ */

/* Hide every inline navbar pattern when the dynamic injected nav is present */
html body:has(#tgi-nav-root) > nav.enterprise-nav,
html body:has(#tgi-nav-root) > div.enterprise-nav,
html body:has(#tgi-nav-root) > .navbar:not(.ent-nav),
html body:has(#tgi-nav-root) > nav[id="mainNav"]:not(.ent-nav){
  display: none !important;
}

/* Without :has() fallback — hide by class+id combination known to be inline duplicates */
html body nav.enterprise-nav#mainNav{ display: none !important; }
html body nav#mainNav.enterprise-nav{ display: none !important; }

/* Specifically catch the offcanvas mobile drawer that pairs with .enterprise-nav */
html body:has(#tgi-nav-root) > div.offcanvas[id="mobileNav"]{ display: none !important; }
html body div.offcanvas#mobileNav:not(.tgi-keep){ display: none !important; }

/* Hide stray whatsapp / back-to-top floating buttons added inline before tgi nav
   (the dynamic nav has its own; the inline ones use different classes) */
html body a.whatsapp-float:not(.ent-whatsapp){
  display: none !important;
}
html body a.back-to-top:not(.ent-back-top),
html body button.back-to-top:not(.ent-back-top){
  display: none !important;
}

/* Inline #preloader with .loader-ring — already handled but reinforce */
html body div#preloader > div.loader-ring{ display: none !important; }

/* Generic CSS — anywhere page has its own inline header that conflicts with our header */
html body header.site-header:not(.ent-header):not(#tgi-header),
html body header[class*="page-header"]:not(.ent-header):not(#tgi-header){
  display: none !important;
}

/* Sometimes inline header is wrapped in a div with class navbar-wrapper */
html body div.navbar-wrapper:not(:has(#tgi-nav-root)){ display: none !important; }

/* ============================================================================
   v7.4 — EMERGENCY ROLLBACK: Bootstrap .row > col flex was breaking the hero
   This is the SAFE replacement for equal-card heights — doesn't break col widths.
   ============================================================================ */

/* CRITICAL: restore Bootstrap grid behaviour */
html body .row{
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) * 0.5) !important;
  margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) * 0.5) !important;
}
html body .row > [class*="col-"]{
  /* Don't force flex on cols — preserves Bootstrap width math */
  display: block !important;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
}

/* Equal-height cards — use min-height on the CARD itself, not on col wrapping */
html body .ent-service-card,
html body .ent-sector-card,
html body .ent-why-card,
html body .ent-ai-card,
html body .ent-process-step,
html body .blog-card-v2,
html body .sector-card,
html body .lat-value,
html body .lat-perk,
html body .lat-moment{
  height: auto;
}

/* Restore hero typography to wrap normally */
html body .ent-hero-content h1{
  white-space: normal !important;
  word-spacing: normal !important;
  line-height: 1.05 !important;
  max-width: 100% !important;
  overflow-wrap: break-word;
}
html body .ent-hero-content p{
  white-space: normal !important;
  max-width: 100% !important;
}
html body .ent-hero-content,
html body .ent-hero-stats,
html body .ent-hero-actions{
  width: 100%;
  max-width: 100% !important;
}

/* Restore Bootstrap col widths explicitly so my earlier rules don't override */
@media (min-width: 992px){
  html body .col-lg-1{ flex: 0 0 auto !important; width: 8.33333333% !important; }
  html body .col-lg-2{ flex: 0 0 auto !important; width: 16.66666667% !important; }
  html body .col-lg-3{ flex: 0 0 auto !important; width: 25% !important; }
  html body .col-lg-4{ flex: 0 0 auto !important; width: 33.33333333% !important; }
  html body .col-lg-5{ flex: 0 0 auto !important; width: 41.66666667% !important; }
  html body .col-lg-6{ flex: 0 0 auto !important; width: 50% !important; }
  html body .col-lg-7{ flex: 0 0 auto !important; width: 58.33333333% !important; }
  html body .col-lg-8{ flex: 0 0 auto !important; width: 66.66666667% !important; }
  html body .col-lg-9{ flex: 0 0 auto !important; width: 75% !important; }
  html body .col-lg-10{ flex: 0 0 auto !important; width: 83.33333333% !important; }
  html body .col-lg-11{ flex: 0 0 auto !important; width: 91.66666667% !important; }
  html body .col-lg-12{ flex: 0 0 auto !important; width: 100% !important; }
}
@media (min-width: 1200px){
  html body .col-xl-6{ flex: 0 0 auto !important; width: 50% !important; }
  html body .col-xl-7{ flex: 0 0 auto !important; width: 58.33333333% !important; }
  html body .col-xl-5{ flex: 0 0 auto !important; width: 41.66666667% !important; }
}
@media (min-width: 768px){
  html body .col-md-6{ flex: 0 0 auto !important; width: 50% !important; }
  html body .col-md-4{ flex: 0 0 auto !important; width: 33.33333333% !important; }
  html body .col-md-12{ flex: 0 0 auto !important; width: 100% !important; }
}
html body .col-12{ flex: 0 0 auto !important; width: 100% !important; }

/* ===================================================================
   v7.5 — Career page hardening
   Ensures the new tabbed career UI renders cleanly under legacy
   style.css bleed (modal form fields, page bg, sticky nav offset).
   =================================================================== */
body.car-page #footer { background: linear-gradient(180deg, #07251f 0%, #0a3b32 100%) !important; }
body.car-page .car-tabs-wrap { top: 88px !important; }
@media (max-width: 991px){
  body.car-page .car-tabs-wrap { top: 70px !important; }
}
body.car-page #carApplyModal .form-control,
body.car-page #carApplyModal .form-select,
body.car-page #carApplyModal input,
body.car-page #carApplyModal textarea,
body.car-page #carApplyModal select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(92,255,182,0.25) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}
body.car-page #carApplyModal .form-control::placeholder,
body.car-page #carApplyModal input::placeholder,
body.car-page #carApplyModal textarea::placeholder {
  color: rgba(230,255,247,0.50) !important;
}
body.car-page #carApplyModal .form-control:focus,
body.car-page #carApplyModal .form-select:focus {
  border-color: #5cffb6 !important;
  box-shadow: 0 0 0 3px rgba(92,255,182,0.20) !important;
}
body.car-page #carApplyModal button.submit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(120deg, #2dd4aa, #1a6f5e) !important;
  color: #ffffff !important;
  font-weight: 600;
  border: none; border-radius: 999px;
  cursor: pointer;
}
body.car-page #carApplyModal button.close {
  background: transparent !important;
  color: rgba(230,255,247,0.65) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  padding: 9px 18px; border-radius: 999px;
  margin-right: 10px;
  font-size: 13px;
}
body.car-page #carApplyModal .modal-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.01em; }
/* prevent legacy section padding from shifting our tab bar */
body.car-page section { padding: 0; }
body.car-page .car-hero,
body.car-page .car-jobs-section,
body.car-page .car-why,
body.car-page .car-faq,
body.car-page .car-cta-strip { padding: revert; }
body.car-page .car-hero { padding: 140px 0 80px !important; }
body.car-page .car-jobs-section { padding: 50px 0 90px !important; }
body.car-page .car-why { padding: 80px 0 !important; }
body.car-page .car-faq { padding: 80px 0 !important; }
body.car-page .car-cta-strip { padding: 70px 0 !important; }
@media (max-width: 768px){
  body.car-page .car-hero { padding: 100px 0 50px !important; }
  body.car-page .car-jobs-section { padding: 32px 0 60px !important; }
  body.car-page .car-why,
  body.car-page .car-faq { padding: 56px 0 !important; }
  body.car-page .car-cta-strip { padding: 52px 0 !important; }
}
/* Match logo color override for white labels in modal */
body.car-page .form-label { color: rgba(230,255,247,0.70) !important; font-size: 13px !important; }

/* ===================================================================
   v7.6 — Footer Universalisation
   Ensures the injected ent-footer renders correctly on every page,
   even when legacy style.css rules try to reshape it.
   =================================================================== */

/* Kill duplicate footers — only keep the one with class .ent-footer */
html body footer:not(.ent-footer) {
  display: none !important;
}

/* Force grid columns to render correctly on inner pages */
html body .ent-footer {
  display: block !important;
  position: relative !important;
  background: linear-gradient(180deg, #1a5a4e 0%, #0a3b32 100%) !important;
  color: #e8f7ef !important;
  padding: 80px 0 28px !important;
  margin-top: 0 !important;
}
html body .ent-footer * { box-sizing: border-box !important; }

html body .ent-footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr !important;
  gap: 40px !important;
  padding-bottom: 36px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin: 0 !important;
}
@media (max-width: 1199px){
  html body .ent-footer-grid {
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 36px !important;
  }
  html body .ent-footer-brand { grid-column: 1 / -1 !important; }
}
@media (max-width: 767px){
  html body .ent-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  html body .ent-footer { padding: 50px 0 24px !important; }
}

/* Brand column — collapse useless empty space */
html body .ent-footer-brand img {
  display: block !important;
  height: 64px !important;
  width: auto !important;
  margin: 0 0 16px 0 !important;
  filter: brightness(1.05) !important;
  max-height: 64px !important;
}
html body .ent-footer-brand p {
  font-size: 0.92rem !important;
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.65 !important;
  margin: 0 0 18px 0 !important;
  max-width: 360px !important;
}
html body .ent-footer-contact-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 10px 0 !important;
  font-size: 0.86rem !important;
  color: rgba(255,255,255,0.68) !important;
}
html body .ent-footer-contact-item i {
  color: #5cffb6 !important;
  font-size: 14px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}
html body .ent-footer-contact-item a,
html body .ent-footer-contact-item span {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
  word-break: break-word !important;
}
html body .ent-footer-contact-item a:hover { color: #5cffb6 !important; }

/* Social icons row */
html body .ent-footer-social {
  display: flex !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
html body .ent-footer-social a {
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(92,255,182,0.18) !important;
  color: #e8f7ef !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
}
html body .ent-footer-social a:hover {
  background: rgba(92,255,182,0.10) !important;
  border-color: #5cffb6 !important;
  color: #5cffb6 !important;
  transform: translateY(-3px) !important;
}

/* Footer columns — links list */
html body .ent-footer-col h5 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: 0.02em !important;
}
html body .ent-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .ent-footer-links li {
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}
html body .ent-footer-links a {
  display: inline-block !important;
  color: rgba(255,255,255,0.62) !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  transition: color .22s ease, transform .22s ease !important;
  padding: 0 !important;
}
html body .ent-footer-links a:hover {
  color: #5cffb6 !important;
  transform: translateX(3px) !important;
}

/* Newsletter form */
html body .ent-footer-newsletter p {
  font-size: 0.84rem !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.55 !important;
}
html body .ent-newsletter-form {
  display: flex !important;
  gap: 0 !important;
  align-items: stretch !important;
}
html body .ent-newsletter-form input {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(92,255,182,0.22) !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  outline: none !important;
}
html body .ent-newsletter-form input::placeholder { color: rgba(255,255,255,0.40) !important; }
html body .ent-newsletter-form button {
  padding: 10px 18px !important;
  background: linear-gradient(120deg, #2dd4aa, #1a6f5e) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
html body .ent-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(92,255,182,0.10) !important;
  border: 1px solid rgba(92,255,182,0.30) !important;
  color: #5cffb6 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

/* Footer bottom strip */
html body .ent-footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
}
html body .ent-footer-bottom p {
  margin: 0 !important;
  color: rgba(255,255,255,0.50) !important;
  font-size: 0.82rem !important;
}
html body .ent-footer-bottom-links {
  display: flex !important;
  gap: 22px !important;
}
html body .ent-footer-bottom-links a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  font-size: 0.82rem !important;
}
html body .ent-footer-bottom-links a:hover { color: #5cffb6 !important; }

/* Hide ANY legacy mobile-footer-nav and orphan partner sliders that aren't part of the new footer */
html body .mobile-footer-nav { display: none !important; }

/* Compact mega-menu sectors grid — even spacing */
html body .ent-mega-menu .ent-mega-link {
  font-size: 12.5px !important;
  padding: 7px 10px !important;
}
