/* ================================================
   APTOS FONT — SELF HOSTED
   Font files : assets/webfonts/
   This file  : assets/css/style-we.css
   Relative path from CSS → fonts = ../webfonts/
================================================ */

/* 300 — Light */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos-Light.woff2') format('woff2'),
       url('../webfonts/Aptos-Light.woff')  format('woff'),
       url('../webfonts/Aptos-Light.ttf')   format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* 300 — Light Italic */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos-Light-Italic.woff2') format('woff2'),
       url('../webfonts/Aptos-Light-Italic.woff')  format('woff'),
       url('../webfonts/Aptos-Light-Italic.ttf')   format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* 400 — Regular */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos.woff2') format('woff2'),
       url('../webfonts/Aptos.woff')  format('woff'),
       url('../webfonts/Aptos.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 400 — Italic */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos-Italic.woff2') format('woff2'),
       url('../webfonts/Aptos-Italic.woff')  format('woff'),
       url('../webfonts/Aptos-Italic.ttf')   format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 600 — SemiBold */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos-SemiBold.woff2') format('woff2'),
       url('../webfonts/Aptos-SemiBold.woff')  format('woff'),
       url('../webfonts/Aptos-SemiBold.ttf')   format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 600 — SemiBold Italic */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos-SemiBold-Italic.woff2') format('woff2'),
       url('../webfonts/Aptos-SemiBold-Italic.woff')  format('woff'),
       url('../webfonts/Aptos-SemiBold-Italic.ttf')   format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* 700 — Bold */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos-Bold.woff2') format('woff2'),
       url('../webfonts/Aptos-Bold.woff')  format('woff'),
       url('../webfonts/Aptos-Bold.ttf')   format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 700 — Bold Italic */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos-Bold-Italic.woff2') format('woff2'),
       url('../webfonts/Aptos-Bold-Italic.woff')  format('woff'),
       url('../webfonts/Aptos-Bold-Italic.ttf')   format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* 800 — ExtraBold */
@font-face {
  font-family: 'Aptos';
  src: url('../webfonts/Aptos-ExtraBold.woff2') format('woff2'),
       url('../webfonts/Aptos-ExtraBold.woff')  format('woff'),
       url('../webfonts/Aptos-ExtraBold.ttf')   format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ================================================
   GLOBAL BASE
================================================ */
:root {
  --header-height: 100px; /* fallback = approximate header height */
}

body {
  font-family: 'Aptos', 'Segoe UI', Arial, sans-serif;  
  font-style: normal;
  color: #595959;
  font-weight:400;
  letter-spacing: -0.08px;
  background-color: #FFFFFF;
  line-height: 1.2;
  font-size: 18px;
  margin: 0;
  padding: 0;
  padding-top: var(--header-height);
}

/* ================================
   GLOBAL (Used in Index)
================================ */
.green, .career-content h3 span, h3.contact-title span, h3.office-intro span
{
	color:#36ad4a;
}
.yellow
{
	color:#fec80c;
}
.grey, .career-content h3, h3.contact-title, h3.office-intro
{
	color:#707070;
}

.dark-green, .heading
{
	color:#014533;
}
.bg-grey
{
	background-color:#f2f2f2;
}
.bg-lgreen
{
	background-color:#EBF5E6;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;    
    line-height: 1.2;
}
h1, .inner-short-banner h2 {
    font-size: 60px;
    line-height: 60px;   
    margin-bottom: 14px;  
	color:#fff;
	font-weight:400; 
	text-shadow: 0 2px 15px rgba(0, 0, 0, .75); 
}
.wgb-hero h1, .inner-banner .banner-text h1
{
	margin-bottom:20px;
}
h1 em
{
  color:#fec80c; font-style:italic;	
}
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; /*line-height: 1.4;*/}
h5 { font-size: 1.35rem; line-height: 1.4; }
h6 { font-size: 1.2rem; }
/*p { color: #525252; }*/
a { text-decoration: none; }
.fw-bold
{
	font-weight:bold !important;
}

.ptb-100
{
	padding:100px 0px;
}
.ptb-80
{
	padding:80px 0px;
}
.mt-8
{
	margin-top:80px;
}
 .disabled-link {
    pointer-events: none;
    cursor: default; 
    opacity: 0.88;   
}
.btn-style02{
    position:relative;
    display:inline-block;
    padding:14px 55px 14px 0;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    transition:.45s ease;
}

/* RIGHT ARROW (Default) */
.btn-style02::after, .btn-style02::before{
    content:"\f061";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;   
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.45s ease;
}
.btn-style02::after
{
	 right:0;
}
/* LEFT ARROW (Hidden) */
.btn-style02::before{    
    left:-55px;   
    border:1px solid #FFC600;
    background:#FFC600;
    color:#111;    
    opacity:0;  
}

/* HOVER */
.btn-style02:hover{
    color:#FFC600;
    padding-left:55px;
    padding-right:0;
}
/* Left arrow appears */
.btn-style02:hover::before{
    left:0;
    opacity:1;
}
/* Right arrow disappears */
.btn-style02:hover::after{
    right:-55px;
    opacity:0;
}
#homepage-news .btn-style02
{
	    color: #112f23;
}
#homepage-news  .btn-style02::after, #homepage-news  .btn-style02::before
{
	border:1px solid #112f23;
}
#homepage-news .btn-style02::before
{
	background-color:#112f23; color:#fff;
}
#iframeid {
    display: block;
}
.btn-connect, .btn-upload, .email-pill, .btn-submit
{
	padding: 10px 22px;
    border-radius: 30px;
    text-decoration: none;
	color: #014533;font-weight: 600;
	background: #fec80c;
	border:none;font-size:16px;
}
.btn-submit, .email-pill
{
	display: inline-flex;
    align-items: center;
}
.btn-submit i, .email-pill i
{
	color: #fec80c;
}
.sub-heading
{
	font-size: 22px;    
    margin-bottom: 0px;
}
/* -------- Banner -------- */
.inner-banner {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center; 
  overflow: hidden;
}
.inner-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.inner-banner::after {
 
 content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(54, 173, 74, 0.1) 20%, rgba(54, 173, 74, 1) 100%);
    mix-blend-mode: multiply;
    /* opacity: 0.54; */
    pointer-events: none;
    
}

.inner-banner .container {
  position: relative;
  z-index: 3;
}
.inner-banner .banner-text p, .slide-content p {
  font-size: 22px;
  color: #E0E0E0;  
  margin-bottom: 0px;
}
/* ── Inner Banner Animations── */
.inner-banner {
  position: relative;
  overflow: hidden;
  --overlay-opacity: 0.54;  
}
.inner-banner::after {
 /* opacity: var(--overlay-opacity) !important;*/
}
.inner-banner img{
  width: 100%;
  display: block;
  will-change: transform;
  transform-origin: center center;
  height: 110%;
}
.inner-banner .banner-text h1 {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}
.inner-banner .banner-text p {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}
/* =========================
   INNER SHORT BANNER
========================= */
.inner-short-banner{
    position:relative;
    min-height:56vh;
	padding:80px 0px;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.inner-short-banner img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.banner-overlay{
    position:absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(53, 173, 74, 0.6) 0%, rgba(53, 173, 74, 1) 100%);
    mix-blend-mode: multiply;
    opacity: 0.6;
    pointer-events: none;
}
.inner-short-banner .container{
    position:relative;
    z-index:2;
}
.inner-short-banner h2
{
	margin-bottom:0px;    font-size: 52px;
    line-height: 56px;
}
.inner-short-banner a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    max-width:1000px;
    color:#fff;margin: 0 auto;
    text-decoration:none;
}
.inner-short-banner .arrow-circle{
    flex-shrink:0;
    width:52px;
    height:52px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.45s; font-size:20px;
}
.inner-short-banner .arrow-circle i{
   
    transition:.45s;
}
.inner-short-banner a:hover .arrow-circle{
    background:#FFC600;
    border-color:#FFC600;
    transform:translateX(8px);
}
.inner-short-banner a:hover .arrow-circle i{
    color:#112F23;
}
/* ================================================
   HEADER BASE
================================================ */
.header {
  background: #fff;
  z-index: 1000;
  padding: 0;
  transition: box-shadow 0.35s ease;
}

/* ── Desktop inner: single row, logo left, right-side right ── */
.header-inner {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height 0.35s ease;
}

/* Logo */
.logo img {
  height: 68px;
  width: auto;
  display: block;
  transition: height 0.35s ease;
}

/* ── Right column: ticker on top, nav below ── */
.right-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* Stock ticker */
.pt-iframe {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  overflow: hidden;
  max-height: 48px;
  opacity: 1;
  margin-bottom: 6px;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
}
.pt-iframe iframe {
  width: 410px;
  height: 48px;
  border: none;
  display: block;
}

/* ================================================
   NAVBAR  (desktop only — d-none d-lg-flex in HTML)
================================================ */
.navbar {
  background: transparent !important;
  padding: 0 !important;
}

.navbar-nav {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

/* Kill Bootstrap default caret */
.navbar-nav .nav-item > .nav-link.dropdown-toggle::after {
  display: none !important;
}

/* Caret icon */
.nav-caret {
  font-size: 10px;
  color: #888;
  display: inline-block;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), color 0.2s ease;
}

/* Desktop nav link */
.navbar-nav .nav-item > .nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 22px;   
  margin-bottom: -14px;  
  font-size: 16px;
  font-weight: 400;
  color: #292929;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  border-radius: 6px 6px 0 0;
  background: transparent;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.navbar-nav .nav-item:hover > .nav-link {
  color: #014533;
  font-weight: 700;
}
.navbar-nav .nav-item:hover > .nav-link .nav-caret {
  transform: rotate(180deg);
  color: #014533;
}

.navbar-nav .nav-item.dropdown { position: relative; }

/* Desktop dropdown */
.navbar-nav .nav-item.dropdown > .dropdown-menu {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 210px;
  background: #fff;
  border: none !important;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 6px 0;
  margin: 0 !important;
  z-index: 999;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.4,0,0.2,1),
              transform 0.28s cubic-bezier(0.4,0,0.2,1),
              visibility 0s linear 0.28s;
}

.navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  visibility: visible;
  transition: opacity 0.28s cubic-bezier(0.4,0,0.2,1),
              transform 0.28s cubic-bezier(0.4,0,0.2,1),
              visibility 0s linear 0s;
}

.navbar-nav .dropdown-menu .dropdown-item {
  display: block;
  padding: 10px 20px; 
  font-size: 15px;
  font-weight: 400;
  color: #292929;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.045);
  transition: background 0.18s ease, color 0.18s ease,
              font-weight 0.18s ease, padding-left 0.18s ease;
}
.navbar-nav .dropdown-menu .dropdown-item:last-child { border-bottom: none; }
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus {
  background: #f2f8f4;
  color: #014533;
  font-weight: 700;
  padding-left: 26px;
}

/* Divider between nav items */
.nav-divider {
  width: 1px;
  height: 15px;
  background: rgba(0,0,0,0.12);
  margin: 0 3px;
  flex-shrink: 0;
  list-style: none;
}

/* ================================================
   SCROLLED STATE
================================================ */
.header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.10); }
.header.scrolled .header-inner { height: 68px; }
.header.scrolled .logo img { height: 46px; }
.header.scrolled .pt-iframe {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
}

/* ================================================
   MOBILE HAMBURGER BUTTON
================================================ */
.hdr-toggler {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.hdr-toggler:hover { background: rgba(1,69,51,0.07); }
.hdr-toggler:focus { outline: none; box-shadow: none; }

.hbr-line {
  display: block;
  width: 22px;
  height: 2px;
  background: #014533;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
}

/* ☰ → ✕ */
.hdr-toggler.is-open .hbr-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-toggler.is-open .hbr-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hdr-toggler.is-open .hbr-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================
   MOBILE NAV PANEL
   Outside .container — always full header width.
   Slides DOWN via max-height. Never side-slides.
================================================ */
.mob-nav-panel {
  display: block;
  width: 100%;
  background: #fff;
  border-top: 2px solid #e6efe9;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.mob-nav-panel.open { max-height: 800px; }

/* Hide mobile panel on desktop */
@media (min-width: 992px) {
  .mob-nav-panel { display: none !important; }
  .hdr-toggler   { display: none !important; }
  .navbar-nav {
        flex-direction: row !important;
  }
}

/* ================================================
   MOBILE LAYOUT  ≤ 991px
================================================ */
@media (max-width: 991.98px) {

  /* Single row: logo left, toggler right */
  .header-inner {
    height: auto !important;
    min-height: 60px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .logo img { height: 44px !important; }

  /* Right-side: row with only the toggler */
  .right-side {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
  }

  /* Hide ticker on mobile */
  .pt-iframe { display: none !important; }

}

/* ── Mobile nav list ── */
.mob-nav-list {
  list-style: none;
  margin: 0;
  padding: 6px 0 14px;
  width: 100%;
}

.mob-nav-item {
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
}
.mob-nav-item:last-child { border-bottom: none; }

.mob-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 10px;  
  font-size: 14px;
  font-weight: 500;
  color: #014533;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mob-nav-row:hover { background: #f6faf7; }

.mob-caret {
  font-size: 11px;
  color: #014533;
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), color 0.2s ease;
}
.mob-nav-item.open > .mob-nav-row .mob-caret {
  transform: rotate(180deg);
  color: #3AA84A;
}

.mob-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #f5f9f6;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.mob-nav-item.open > .mob-sub-list { max-height: 500px; }

.mob-sub-list li { border-bottom: 1px solid rgba(1,69,51,0.07); }
.mob-sub-list li:last-child { border-bottom: none; }

.mob-sub-list li a {
  display: block;
  padding: 13px 20px 13px 34px;  
  font-size: 13.5px;
  font-weight: 400;
  color: #444;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mob-sub-list li a:hover {
  background: #edf5f0;
  color: #014533;
  font-weight: 600;
}

   /* ==========================================
   PREMIUM TOP PAGE SCROLL PROGRESS
========================================== */

.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:3px;
    z-index:99999;
    background:rgba(255,255,255,.05);
    overflow:hidden;
}

.scroll-progress-bar{
    height:100%;
    width:0%;
    border-radius:0 999px 999px 0;
    background:linear-gradient(
        90deg,
        #3CAC49 0%,
        #69d15d 40%,
        #FFC600 100%
    );
    transition:width .05s linear;
    box-shadow:
        0 0 8px rgba(60,172,73,.35),
        0 0 18px rgba(255,198,0,.25);
}

/* ================================
   Privacy Notices
================================ */

 .privacy-policy .ul-list
   {
	  margin: 0;
      padding: 0;
      list-style: none;
	  margin-bottom:20px;
   }
   .privacy-policy h5
   {
	   text-align:justify;font-weight:600;
   }
   .privacy-policy .ul-list li
	{
		display: flex;
		align-items: flex-start;		
		position: relative;
		padding-left: 20px;
	    line-height: 22px;
    	margin-bottom: 6px;	  
	}
	.privacy-policy .ul-list li::before {
		content: '';
		width: 8px;
		height: 8px;
		background: #8CC63F;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 8px;
	}
	.privacy-policy h3
	{
		 margin-top:30px;
	}
	.privacy-policy .nav-tabs .nav-item {
      margin-left: 15px; 
   }
   .privacy-policy .nav-tabs .nav-item .nav-link {
    border: 0;
    background: 0 0;
    font-size: 26px;
    text-shadow: 0 1px 1px #fff;
    color: #000;
    opacity: 0.8;
    cursor: pointer;
    font-weight: 700;
    padding: 4px 12px;
  }
  .privacy-policy .nav-tabs .nav-item .nav-link.active {
   
    border-bottom: 3px solid #00AE38;
    opacity: 1;
  }
  .privacy-policy .locations-box ul {
    margin: 0;
    font-size: 100%;
    line-height: normal;
    list-style: none outside;
    padding: 0;
 }
 .privacy-policy .locations-box ul li {
    margin-bottom: 0;
    padding: 5px 0 5px 28px;
	padding: 5px 0 5px 28px;
    margin: 0;
    list-style: none;
    position: relative;
    word-wrap: break-word;
 }
 .privacy-policy .locations-box ul li .icon {
    position: absolute;
    left: 0;
    display: block;
    color: #36ad4a;
    line-height: 18px;
    font-size: 18px;
    text-align: center;
    margin-top: 3px;
 }
 .detail-item {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  color: #292929;
}
.detail-item a
{
	color: #292929;
}
.detail-item i {
  color: #3CAC49;
  font-size: 22px;
  margin-right: 15px;
  margin-top: 2px;
}
 /* ================================
   CAREER
================================ */
.career-cta {
    margin-top: 38px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.btn-connect {   
    justify-content: center;
    align-items: center;
    display: flex;
    
}
.btn-connect i {
   background-color: #fec80c;
    color: #014533;
    font-size: 18px;
    line-height: 18px;
    margin: 0px; 
}
.career-form-box {
    background: #EBF5E6;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.form-control {
    border-radius: 14px;
    border: none;  
	font-size: 16px;
    border: 1px solid #00000029;
	transition: all 0.25s ease;
  background: #fff;
}
.upload-box {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed #00000029;
}
.upload-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.upload-left i {
    font-size: 28px;
    color: #014533;
}
.upload-left p {
    margin: 0;
    font-size: 14px;
}
.upload-left small {
    color: #999;
}
.btn-select {
    background: #36ad4a;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 14px;
    line-height: normal;
}
.btn-select i
{
	margin-right:6px;
}
.btn-upload {
    width: 100%;    
    border: none;
	margin-top: 24px;
}
.upload-box:hover {
    border-color: #36ad4a;
}
.btn-upload:hover {
   
}
.form-error {
  color: #dc3545;
  font-size: 14px;
  margin-top: 10px;
}
.selected-files{
    margin-top:15px;
}

.selected-file{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:12px 15px;
    margin-top:10px;
    border-radius:12px;
    background:#f7f8f9;
    border:1px solid #e5e5e5;
}

.file-name{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:500;
    word-break:break-word;
}

.file-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.file-size{
    font-size:12px;
    color:#777;
}

.remove-file{
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background:#ff4d4f;
    color:#fff;
    cursor:pointer;
}

.remove-file:hover{
    transform:scale(1.1);
}

.file-summary{
    margin-top:12px;
    font-size:13px;
    color:#777;
    font-weight:600;
}
 /* ================================
   OUR OFFICES
================================ */
#wascoChartDiv {
  margin: 30px 0;
} 
.map-legend {
  margin: 20px 0 40px;
  text-align:center;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 10px;
    font-size: 16px;
    border: 1px solid #123024;
    border-radius: 50px;
    padding: 6px 12px;
    font-weight: 400;  
	background-color:transparent;  
}
.leg-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
}
.leg-dot.indo {
  background: #123024;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #123024;
}
.leg-dot.hq {
  background: #fec80c;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #fec80c;
}
.leg-dot.my {
  background: #fec80c;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #fec80c;
} 
.leg-dot.all {
	background:#36ad4a;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #36ad4a;
}
.legend-item.active{
	background:#014533;border-color:#014533;color:#fff; 
}
.legend-item.dimmed{opacity:.7;}
.legend-item em{font-style: italic;font-size:14px;font-weight:800;padding:1px 6px;color:#333}
.legend-item.active em{color:#fff}

.country-block h6 {
      color: #36ad4a;font-weight:500;
} 
.country-block i.fa.fa-map-marker-alt
{
	font-size:34px;color: #36ad4a;
}
.office-card {
 margin: 15px 0px;
}
.office-card h5 {
  color: #014533;
}
.country-block .row .col-md-4 .office-card p
{
	margin-bottom:4px;
}
.country-block .row .col-md-4 .office-card p:first-of-type {  
      margin-bottom: 24px;
    line-height: 24px;
}
.office-card span {
  color: #36ad4a;
} 
.offices-section  hr
{
	border: 1px dashed #707070;margin-bottom:0px;
}

/**Our Offices Map**/
    #wasco-map-section{
      position:relative;overflow:hidden;  
    }
    #wascoChartDiv{width:100%;height:540px;display:block}
    @media(max-width:900px){#wascoChartDiv{height:420px}}
    @media(max-width:600px){#wascoChartDiv{height:320px}}

    .map-loader{
      position:absolute;top:0;left:0;right:0;bottom:62px;
      display:flex;align-items:center;justify-content:center;gap:8px;
      background:#fff;z-index:10;transition:opacity .6s ease
    }
    .map-loader.gone{opacity:0;pointer-events:none}
    .map-loader span{width:10px;height:10px;border-radius:50%;animation:bounce 1.1s ease-in-out infinite}
    .map-loader span:nth-child(1){background:#9ad6a3}
    .map-loader span:nth-child(2){background:#fff;animation-delay:.18s}
    .map-loader span:nth-child(3){background:#9ad6a3;animation-delay:.36s}
    @keyframes bounce{0%,80%,100%{transform:scale(.55);opacity:.4}40%{transform:scale(1.25);opacity:1}}

   
    .info-panel{
      position:fixed;top:50%;right:-340px;transform:translateY(-50%);
      width:300px;background:#fff;border-radius:16px 0 0 16px;
      box-shadow:-6px 0 40px rgba(1,69,51,.13);
      z-index:9999;transition:right .4s cubic-bezier(.4,0,.2,1);overflow:hidden
    }
    .info-panel.visible{right:0}
    .ip-close{
      position:absolute;top:12px;right:14px;width:30px;height:30px;
      border-radius:50%;border:none;background:#f0f0f0;color:#666;font-size:20px;
      cursor:pointer;display:flex;align-items:center;justify-content:center;
      transition:background .18s,color .18s
    }
    .ip-close:hover{background:#014533;color:#fff}
    .ip-inner{padding:24px 20px 26px}
    .ip-badge{
      display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;
      text-transform:uppercase;color:#fff;background:#014533;
      padding:4px 12px;border-radius:20px;margin-bottom:12px
    }
    .ip-name{font-size:15px;font-weight:700;color:#111;margin:0 0 5px;padding-right:24px;line-height:1.35}
    .ip-city{font-size:13px;color:#36ad4a;font-weight:600;margin:0}
    @media(max-width:576px){
      .info-panel{top:auto;bottom:-100%;right:0;width:100%;max-width:100%;
        border-radius:16px 16px 0 0;transform:none;
        transition:bottom .4s cubic-bezier(.4,0,.2,1)}
      .info-panel.visible{bottom:0;right:0}
    }
 
/*==========================================================
 MEDIA NEWS
==========================================================*/
.media-container{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:18px;    
    height:100%;width:100%;
}
.media-img{
    position:relative;
    aspect-ratio:16/9;
    background:#112f23;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden; transition:transform .8s ease;
}
.media-img.no-image::before{
    content:"";
    width:120px;
    height:42px;
    background:url("../../assets/img/logo-footer.png") center center no-repeat;
    background-size:contain;
    opacity: .5;
    margin-top: -14px;transition:transform .4s ease;
}
.media-container:hover .media-img.no-image::before{
    transform:scale(1.08);opacity:0.9;
}
.media-box{
    position:relative;
    background:#fff;
    margin-top:-18px;
    border-radius:18px;
    padding:24px;
    flex:1;
    display:flex;
    flex-direction:column;
    z-index:5;
	transform:translateY(0);
    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s ease;
    color:#112f23;
}
.media-box h4
{
	margin: 0px 0px 100px 0px;
    font-weight: 400;
    transition: all 0.3s ease;
	font-size: 1.4rem;
}
.media-box p {    
    font-size: 17px;
    font-weight: 400;
    transition: all 0.3s ease;
}
.media-container:hover .media-box{
   transform:translateY(-14px);
    
}
.media-container .arrow-btn{
    position:absolute;
    right:24px;
    bottom:24px;
    width:38px;
    height:38px;
    border-radius:50%;
    border:2px solid #112f23;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#FFC600 !important;
    transition:.35s;
}
.media-container .arrow-btn i
{
	color:#112f23;
}
.media-container .arrow-wrap{

    position:relative;
    width:16px;
    height:16px;
	font-size:16px;
    overflow:hidden;
}
.media-container .arrow-wrap i{

    position:absolute;
    top:0;
    transition:.35s cubic-bezier(.4,0,.2,1);
}
.media-container .arrow-wrap i:first-child{
    left:0;
}
.media-box .arrow-wrap i:last-child{
    left:-24px;  
}
.media-container:hover .arrow-wrap i:first-child{
    left:24px;
}
.media-container:hover .arrow-wrap i:last-child{

    left:0;
}
 /* ================================
   NEWS
================================ */
.top-bar {
    margin-bottom:30px;
}
.control-btn {
    border-radius: 30px;
    border: 1px solid #ddd;
    padding: 8px 18px;
    background: #fff;
    font-size: 14px;
}
.search-box {
    border-radius: 30px;
    padding-left: 40px;
    height: 45px;
}
.search-wrapper {
    position: relative;
}
.search-wrapper i {
    position: absolute;
    left: 15px;
    top: 13px;
    color: #999;
}
.news-item
{
	margin-bottom:24px;
}
.news-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
	border-radius: 16px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.news-container img {
    width: 100%;
    height: 240px;
    object-fit: cover;
	transition: transform 0.5s ease;
	will-change: transform;
	margin-bottom: -15px;
}
.news-box {
    color: #fff;
    background-color: #112f23 ;
    border-radius: 16px;    
	padding: 30px 40px;	
	flex-grow: 1;
    transition: all 0.3s ease;
    position: relative;	 
}
.news-box p{
    color: #FFC600;
    font-size: 17px;
    font-weight: 400;transition: all 0.3s ease;
}
.news-box h4 {   
    margin-top: 18px;   
     margin: 0px 0px 80px 0px;
	font-weight: 300;
	transition: all 0.3s ease;
}
.news-container:hover {
   transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.news-container:hover img {
    transform: scale(1.05);
}
.news-container:hover .news-box {
    
}
.news-container:hover h3 {
    transform: translateY(-3px);
	opacity:0.6;
}
.news-container:hover p
{
	opacity:0.5;
}
.news-container:hover .arrow-btn {
    transform: translateX(4px) scale(1.08);
    background: #FFC600;border:1px solid #FFC600;
}
.news-container:hover .arrow-btn i {
    color: #123024;
}
.custom-pill {
    border-radius: 50px;   
    background: #fff;
    height: 48px;
    padding: 0 20px;
    font-size: 16px;
}
.search-wrapper {
    position: relative;
}
.search-box {
    border-radius: 50px;
    height: 48px;
    padding-left: 45px;
    border: 1px solid #e0e0e0;
}
.custom-pill,
.search-box {
    border: 1px #4e4b4b;
    /*filter: drop-shadow(1px 1px 2px #e3e3e3);
    box-shadow: 0 4px 2px -2px #efefef;*/
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.search-wrapper i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #36ad4a;
    font-size: 18px;
}
.dropdown {
    position: relative;
}
.dropdown-menu {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    padding: 5px 0;
	 margin-top: 8px !important;
    transform: none !important;
    top: 100% !important;
    left: 0 !important;
}
.dropdown-menu[data-bs-popper] {
    transform: none !important;
}
.dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
}
.dropdown-item:hover {
    background: #f5f5f5;
}
.icon-circle {
    width: 28px;
    height: 28px;
    background: #004539;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-circle i {
    color: #fff;
    font-size: 12px;
}
.arrow-btn {
    /*position: absolute;
    right: 40px;
    bottom: 40px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
	 color:#fff;*/
	 position: absolute;
    right: 40px;
    bottom: 30px;
    width: 36px;
    height: 36px;
    border-radius: 50%;     
	border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;	 
	transition: all 0.3s ease;
}
.arrow-btn i {
    color: #fff;
}
.load-more {
    text-align: center;
    margin: 30px 0;
}

 /* ================================
   ENQUIRY FORM
================================ */
.contact-section hr
{
	border: 1px dashed #707070;
	margin:50px 0px;
}
.contact-section h4
{
	margin-top:30px;color: #014533;
}
.contact-section h5
{
	margin-top:16px;color: #014533;
}
.contact-title {
   font-weight:500;margin-bottom:40px;
}
.contact-card {
    background: #EBF5E6;
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 15px;
	text-align:center;	
	height:100%;
}
.contact-card .card-header {   
    color: #36ad4a;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 20px;
}
.contact-card .card-header i {
    margin-right: 6px;
}
.email-pill {
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;  
    font-size: 14px;
}
.email-pill span {
    width: 24px;
    height: 24px;
    background: #004539;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-left: 8px;    
}
.email-pill i {
    color: #fec80c;
    font-size: 12px;
}
.contact-card p
{
	margin-top: 20px;
    margin-bottom: 8px;
}
.contact-card p:first-of-type
{
	margin-top:0px;
}
.contact-card p span
{
	font-size: 12px;
    font-style: italic;
    display: block;
}
.contact-card h6
{
	font-size: 16px;
    font-weight: 800;
    margin-top: 0px;
}
.form-box {
    background: #EBF5E6;
    padding:30px;
    border-radius: 20px;
    box-shadow: 0px 3px 6px #00000029;
	opacity: 1;
}
.form-box label {
    margin-bottom: 4px;
    display: block;
    color: #707070;
}
.form-box textarea.form-control {
    height: auto;
}
.btn-icon {
    width: 24px;
    height: 24px;
    background: #004539;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    transition: 0.3s;
}
.btn-submit:hover .btn-icon {
    transform: translateX(4px);
}
.form-control:focus {
    box-shadow: 0 0 0 2px rgba(0,69,57,0.2);
}
.error-text {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}
.form-control.is-invalid {
    border: 1px solid #dc3545;
}
.form-control.is-valid {
    border: 1px solid #198754;
}
/* Focus effect */
.form-control:focus {
  border-color: #36ad4a;
  box-shadow: 0 0 0 3px rgba(60,172,73,0.15);
}

/* VALID */
.form-control.is-valid {
  border-color: #28a745;
  background-image: url("data:image/svg+xml,..."); /* optional tick icon */
}

/* INVALID */
.form-control.is-invalid {
  border-color: #dc3545;
  animation: shake 0.3s ease;
}

/* Shake animation (premium feel) */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Error text animation */
.error-text {
  font-size: 12px;
  color: #dc3545;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.2s ease;
}

.error-text.active {
  opacity: 1;
  transform: translateY(0);
}

/* Success message */
.form-success {
  background: #edf9f0;
  color: #36ad4a;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 16px;
  border: 1px solid #cdebd4;
}
.form-success i {
    font-size: 18px;
    color: #36ad4a;
}
/* Error message */
.form-error {
  background: #fdecea;
  color: #c82333;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 16px;
  border: 1px solid #ffd6d6;
}
.btn-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  margin-left: 8px;
  display: inline-block;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Button loading state */
.btn-submit.loading {
  opacity: 0.7;
  pointer-events: none;
}

.btn-submit.loading .btn-icon {
  animation: moveArrow 0.6s infinite alternate;
}

@keyframes moveArrow {
  from { transform: translateX(0); }
  to { transform: translateX(6px); }
}

/* Smooth error fade */
.error-text {
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.25s ease;
}
.error-text.active {
  opacity: 1;
  transform: translateY(0);
}
.select-wrapper {
    position: relative;
}
.select-wrapper .select-icon {
    position: absolute;
    right: 18px;
    top: 64%;
    transform: translateY(-50%);
    color: #3CAC49;
    font-size: 14px;
    pointer-events: none;
    transition: transform .25s ease;
}
.select-wrapper:hover .select-icon {
    transform: translateY(-50%) rotate(180deg);
}
.form-control::placeholder,
textarea::placeholder {
    color: #b8b8b8;
    opacity: 1;
    font-weight: 400;
}
/* Default placeholder color */
.industry-select {
    color: #b8b8b8 !important;
}
/* When actual option selected */
.industry-select.valid-selection {
    color: #292929 !important;
}

/* Dropdown options */
.industry-select option {
    color: #292929 !important;
}
/* ================================
   CAREER — WORD HIGHLIGHT ON SCROLL
   ================================ */   
.textscrollanimation {

  color: #707070;   line-height: 1.3;    font-weight: 400;
}
.textscrollanimation .hl-word {
  display: inline;              
  color: #c8c8c8;               
  transition: color 0.15s ease;
  will-change: color;
}
.textscrollanimation .hl-word.lit {
  color: #292929;             
}
.textscrollanimation span .hl-word {
  color: #a8d9b0;              
}
.textscrollanimation span .hl-word.lit {
  color: #36ad4a;               
}
/* ================================
   FOOTER
================================ */
.footer {
  background-color: #3AA84A;
  color: #fff;
  padding-top: 60px;
  padding-bottom: 40px;
  font-size: 16px;
}
.footer-logo img {
 
  max-width: 100%;
}
.footer h6 {
  font-weight: 700;
    margin-bottom: 20px;
    color: #014533;
}

.footer-links {
  list-style: none;
  padding: 0; margin: 0;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  color: #fff;
  text-decoration: none;
  transition: .3s;
}
.footer-links a:hover {
  opacity: 0.7;
}
.footer hr {
  border-color: #EBF5E6;
  margin: 35px 0;
}

.footer-copy p {
  color: #fff;
  margin-bottom: 5px;
}
.back-to-top {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #004533;
  border-radius: 50%;
  color: #004533;
  transition: .3s;
  margin-top: 10px;
}
.back-to-top:hover {
  background: #004533;
  color: #fff;
}

/* ================================
   Home page
================================ */
:root{
  --g:  #fec80c;
  --gl: #fec80c;
  --gr: #1e8c4f;
  --dp: #020c06;
  --E:  cubic-bezier(.16,1,.3,1);
  --EB: cubic-bezier(.76,0,.24,1);
  --hh: 110px; /* fallback — JS reads actual header */
}
.wgb-hero{
  position:relative;
  width:100%;
  /* pull UP by the header padding the body adds */
  margin-top:calc(-1 * var(--hh));
  /* then fill the full viewport height */
  height:calc(100vh); 
  overflow:hidden;
  background:var(--dp);
}

/* IMAGE TRACK */
.wgb-hero .img-track{
  position:absolute;inset:0;display:flex;
  transition:transform .95s var(--EB);
  will-change:transform;
}
.wgb-hero .img-panel{flex:0 0 100%;position:relative;overflow:hidden}

.wgb-hero .img-panel img{
  position:absolute;
  inset:-8% -10%;
  width:120%;height:120%;
  object-fit:cover;
  will-change:transform;
  transform:scale(1.08) translateX(0%);  
  transition:filter .8s ease;
}
.wgb-hero .img-panel.on img{  
  animation:kb 10s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes kb{
  from{transform:scale(1.10) translateX(1.5%)}
  to  {transform:scale(1.00) translateX(-1.5%)}
}
.wgb-hero .img-panel.enter-r img{animation:enterR .95s var(--EB) forwards}
@keyframes enterR{from{transform:scale(1.08) translateX(4%);filter:brightness(.3)}to{transform:scale(1.0) translateX(0);filter:brightness(.45)}}
.wgb-hero .img-panel.enter-l img{animation:enterL .95s var(--EB) forwards}
@keyframes enterL{from{transform:scale(1.08) translateX(-4%);filter:brightness(.3)}to{transform:scale(1.0) translateX(0);filter:brightness(.45)}}

/* OVERLAYS */
.wgb-hero .slide-overlay{
  position: absolute;
    inset: 0;
    z-index: 1;    
}
.wgb-hero .slide-overlay::after{   
   content:"";
    position:absolute;
    inset:0;
    /*background: linear-gradient(
        180deg,
        rgba(8, 15, 12, 0.15) 0%,
        rgba(8, 15, 12, 0.35) 35%,
        rgba(12, 45, 28, 0.70) 70%,
        rgba(54, 173, 74, 0.92) 100%
    );*/
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 10%, rgba(9, 33, 20, 0.65) 60%, rgba(17, 47, 35, 0.7) 70%, rgba(17, 47, 35, 0.95) 100%);   
}

/* CONTENT LAYER */
.wgb-hero .content-layer{position:absolute;inset:0;z-index:10}
.wgb-hero .slide-content{
  position:absolute;inset:0;
  display:flex;align-items:center;
  pointer-events:none;
}
.wgb-hero .slide-content.active{pointer-events:auto}

/* padding-top clears the fixed header */
.wgb-hero .pad{
  padding:0 10%;
  padding-top:calc(var(--hh) + 8px); 
   
}

/* EYEBROW */
.wgb-hero .eye{display:flex;align-items:center;gap:12px;margin-bottom:22px;overflow:hidden}
.wgb-hero .ebar{display:block;height:1px;background:var(--g);width:0;transition:width 1.1s var(--E) .1s}
.wgb-hero .etxt{  
  font-size:14px;letter-spacing:2px;text-transform:uppercase;
  color:#fec80c;font-weight:500;
  opacity:0;transform:translateX(-14px);
  transition:opacity .6s ease .65s,transform .6s var(--E) .65s;
}
.wgb-hero .slide-content.active   .ebar{width:48px}
.wgb-hero .slide-content.active   .etxt{opacity:1;transform:none}
.wgb-hero .slide-content.out      .ebar{width:0!important;transition-duration:.22s!important;transition-delay:0s!important}
.wgb-hero .slide-content.out      .etxt{opacity:0!important;transition-delay:0s!important}

.wgb-hero .line{
  display:block;
  overflow:hidden;  
  padding-bottom:.04em; /* prevent descender clip */
}
.wgb-hero .line-inner{
  display:block;
  /* START: pushed down, slightly small, tilted */
  transform:translateY(110%) skewY(2.5deg) scale(.96);
  opacity:0;
  will-change:transform,opacity;
  /* transition OFF by default — only CSS class switches turn it on */
  transition:none;
}

/* ENTER — when slide becomes active */
.wgb-hero .slide-content.active .line-inner{
  transform:translateY(0) skewY(0deg) scale(1);
  opacity:1;
  transition:
    transform .88s var(--E),
    opacity   .55s ease;
}
/* stagger per line */
.wgb-hero .slide-content.active .line:nth-child(1) .line-inner{transition-delay:.22s}
.wgb-hero .slide-content.active .line:nth-child(2) .line-inner{transition-delay:.38s}
.wgb-hero .slide-content.active .line:nth-child(3) .line-inner{transition-delay:.54s}

/* EXIT — when slide leaves */
.wgb-hero .slide-content.out .line-inner{
  transform:translateY(-85%) skewY(-2deg) scale(1.02) !important;
  opacity:0 !important;
  transition:
    transform .5s cubic-bezier(.4,0,1,1) !important,
    opacity   .35s ease                  !important;
  transition-delay:0s !important;
}

/* SUB TEXT */
.wgb-hero .content-layer p{    
  opacity:0;
  transform:translateY(22px);
  transition:none;
}
.wgb-hero .slide-content.active p{
  opacity:1;
  transform:translateY(0);
  transition:opacity .7s ease .9s, transform .7s var(--E) .9s;
}
.wgb-hero .slide-content.out p{
  opacity:0 !important;
  transform:translateY(-12px) !important;
  transition:opacity .28s ease 0s !important, transform .28s ease 0s !important;
}

/* ── FIX 2: ARROWS
   Hidden by default (translateX off-screen + opacity 0)
   Visible only on .wgb-hero:hover
   On touch devices: always visible ───────────────── */
.wgb-hero .nav{
  position:absolute;top:50%;z-index:30;cursor:pointer;
  display:flex;align-items:stretch;
  /* HIDDEN STATE */
  opacity:0;
  transition:opacity .4s ease, transform .55s var(--E);
}
.wgb-hero .nav-l{
  left:0;flex-direction:row;
  transform:translateY(-50%) translateX(-110%);
}
.wgb-hero .nav-r{
  right:0;flex-direction:row-reverse;
  transform:translateY(-50%) translateX(110%);
}

/* REVEAL on hero hover */
.wgb-hero:hover .nav-l{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.wgb-hero:hover .nav-r{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* Always visible on touch (no hover) */
@media(hover:none){
  .wgb-hero .nav-l{opacity:1 !important;transform:translateY(-50%) translateX(0) !important}
  .wgb-hero .nav-r{opacity:1 !important;transform:translateY(-50%) translateX(0) !important}
}

.wgb-hero .nav-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;color:#fff;overflow:hidden;
  background:rgba(2,12,6,.5);
  border:1.5px solid rgba(255,255,255,.2);
  transition:border-color .32s ease;
}
.wgb-hero .nav-btn::before{
  content:'';position:absolute;inset:0;
  background:var(--gr);
  transform:scaleX(0);
  transition:transform .4s var(--E);
}
.wgb-hero .nav-l .nav-btn::before{transform-origin:right}
.wgb-hero .nav-r .nav-btn::before{transform-origin:left}
.wgb-hero .nav-btn:hover::before{transform:scaleX(1)}
.wgb-hero .nav-btn:hover{border-color:var(--gr)}
.wgb-hero .nav-btn svg{
  position:relative;z-index:1;
  width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--E);
}
.wgb-hero .nav-l .nav-btn:hover svg{transform:translateX(-3px)}
.wgb-hero .nav-r .nav-btn:hover svg{transform:translateX(3px)}

/* Tab labels */
.wgb-hero .nav-tab{
  display:flex;align-items:center;padding:0 11px;height:60px;
  background:rgba(2,12,6,.3);
  border:1.5px solid rgba(255,255,255,.1);border-left:none;
  opacity:0;
  transition:opacity .3s ease .12s;
}
.wgb-hero .nav-r .nav-tab{border-left:1.5px solid rgba(255,255,255,.1);border-right:none}
.wgb-hero:hover .nav-tab{opacity:1}
.wgb-hero .nav-tab span{
  writing-mode:vertical-rl;font-size:9px;letter-spacing:3.5px;
  text-transform:uppercase;color:rgba(255,255,255,.45);
  font-family:'DM Sans',sans-serif;
}


.wgb-hero .gc{position:absolute;z-index:20;pointer-events:none}
.wgb-hero .gc-tl{top:20px;left:20px;width:24px;height:24px;
  border-top:1px solid rgba(201,168,76,.55);
  border-left:1px solid rgba(201,168,76,.55)}
.wgb-hero .gc-br{bottom:20px;right:20px;width:24px;height:24px;
  border-bottom:1px solid rgba(201,168,76,.55);
  border-right:1px solid rgba(201,168,76,.55)}

/* PROGRESS */
.wgb-hero .prog{position:absolute;bottom:0;left:0;right:0;z-index:25;height:2px;background:rgba(255,255,255,.07)}
.wgb-hero .prog-fill{height:100%;width:0;background:linear-gradient(90deg,#3cac49,var(--g));transition:width linear}

/* RESPONSIVE */
@media(max-width:900px){.pad{padding:0 6%;padding-top:calc(var(--hh) + 4px)}}
@media(max-width:600px){
 .wgb-hero .pad{padding:0 18px;padding-top:calc(var(--hh) + 2px)}
  
  .wgb-hero .nav-tab{display:none}
}

	/* =====================================================
   ABOUT SECTION
===================================================== */
.home-about{
    position:relative;
    background:#112f23;
    padding:80px 0px;
}

.home-about .textscrollanimation .hl-word
{
	opacity:30%;
}
.home-about  .textscrollanimation .hl-word.lit
{
	color: #e5e5e5;opacity: 1;
}

/* =====================================================
   STATS SECTION
===================================================== */
.performance-section{
    padding-top:80px;
}

.performance-section h2{
    color:#FFC600;   
    margin-bottom:10px;
}

.performance-section p{
    color:#E0E0E0;
}

.performance-section .stats-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
   /* border-top:1px solid rgba(255,255,255,0.25);*/
    margin-top:50px;
}

.performance-section .stat-box{
    padding:40px 12px;
    border:1px solid rgba(255,255,255,0.2);text-align:center;
	overflow:hidden;
    transition:.45s ease;
	position: relative;	
	border-right: 0px;
	display: grid;
    grid-template-rows: 160px auto;
}

.performance-section .stat-box:last-child{
    /*border-right:none;*/
	border-right:1px solid rgba(255,255,255,0.2);
}

.performance-section .stat-box h4{
    color: #FFC600;      
    margin-bottom: 18px;
    min-height: 90px;
	font-weight:400;
}

.performance-section .stat-box p
{    

/* position:absolute;
    left:25px;      
    right:25px;    
    bottom:50px;    */
    margin:0;
    
  
}
.performance-section .stat-box h4 .counter{   
    font-size:110%;
    font-weight:600;    
}
/* Animated top line */
.performance-section .stat-box:before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:0;
    height:2px;
    background:#FFC600;
    transform:translateX(-50%);
    transition:.45s;
}
/* Soft glow */
.performance-section .stat-box:after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top,
    rgba(255,198,0,.10),
    transparent 70%);
    opacity:0;
    transition:.45s;
    pointer-events:none;
}
.performance-section .stat-box:hover{
    background:rgba(255,255,255,.04);
    transform:translateY(0px);
    box-shadow:
    0 18px 35px rgba(0,0,0,.25);
}
.performance-section .stat-box:hover:before{

    width:100%;
}
.performance-section .stat-box:hover:after{
    opacity:1;
}
.performance-section .stat-box:hover p{

    color:#fff;
}
.performance-section .stat-box:hover h4 .counter{

    transform:scale(1.08);
    transition:.4s;
    text-shadow:
    0 0 18px rgba(255,198,0,.4);
}

/* =========================================================
   EXPERTISE SECTION
========================================================= */

.expertise-section {
    padding: 100px 0;
    
    overflow: hidden;
}

.expertise-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 50px;
}



/* =========================
   NAVIGATION
========================= */

.expertise-section .slider-nav {
    display: flex;
    gap: 12px;
}

.expertise-section .slider-nav button {
    width: 42px;
    height: 42px;
	line-height:42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    color: #112f23;
   border: 1px solid #112f23;
    font-size: 16px;

    transition: all .3s ease;

    box-shadow:
        0 5px 20px rgba(0,0,0,.08);
}

.expertise-section .slider-nav button:hover {
    background: #3cac49;
    color: #fff;
 border: 1px solid #3cac49;
    transform: translateY(-3px);
}

/* =========================
   CARD
========================= */

.expertise-section .expertise-card {
    position: relative;
    height: 100%;
    padding: 45px;
    border-radius: 28px;
    background-color:#112f23;
    overflow: hidden;
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.expertise-section .expertise-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(60,172,73,.18),
            transparent 35%
        );

    opacity: 0;

    transition: opacity .4s ease;
}

.expertise-section .expertise-card:hover {
   

    box-shadow:
        0 25px 40px rgba(0,0,0,.18);
}

.expertise-section .expertise-card:hover::before {
    opacity: 1;
}

.expertise-section .expertise-card img {
    width: 72px;
    margin-bottom: 45px;
}

.expertise-section .expertise-card h3 {
    margin: 0;
    color: #fff;   
    font-weight: 600;
}

/* =========================
   SWIPER FIX
========================= */
.expertise-section .expertiseSlider .swiper-slide {
    height: auto;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    

    .expertise-section .expertise-card {      
        padding: 35px;
    }

   
}

@media (max-width: 767px) {

    .expertise-section {
        padding: 80px 0;
    }

}
/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:768px){

.container-custom{
    padding:0 20px;
}

}

/* ── Section wrapper ─────────────────────────────────────── */
.dashboard-section {
  background: #EBF5E6;
    padding: 80px 0px;
}

/* ── Section header ──────────────────────────────────────── */
.dashboard-section .dash-header {
  margin-bottom: 44px;
}
.dashboard-section .dash-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.dashboard-section .dash-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36ad4a;
  flex-shrink: 0;
  animation: dashPulse 2s ease-in-out infinite;
}
@keyframes dashPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(1.4); }
}
.dashboard-section .dash-live-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #36ad4a;
}
.dashboard-section .dash-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0 0 8px;
}
.dashboard-section .dash-title em {
  color: #36ad4a;
  font-style: normal;
}
.dashboard-section .dash-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* ── KPI Cards ───────────────────────────────────────────── */
.dashboard-section .kpi-card {
    background: #112f23;
    border-radius: 16px;
    padding: 40px 28px;
    text-align: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 20px rgba(54, 173, 74, 0.07);
    text-align: center;color: #E0E0E0;
}
.dashboard-section .kpi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(54, 173, 74, 0.14);
}

/* Icon badge */
.dashboard-section .kpi-icon {
  width: 70px;
    height: 70px;
    background: #edf9f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #36ad4a;
    font-size: 22px;
    margin-bottom: 8px;
    flex-shrink: 0;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 15px;
}
.dashboard-section .kpi-icon i
{
	font-size:30px;
}

/* Card eyebrow */
.dashboard-section .kpi-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
  font-weight: 600;
}



/* Sub-label */
.dashboard-section .kpi-subtitle {
    
  margin: 0;
}

/* Big number */
.dashboard-section .kpi-num {
  font-size: 38px;
  font-weight: 700;
  color: #fec80c;
  line-height: 1;
  letter-spacing: -1px;
  margin: 20px 0px;
  font-variant-numeric: tabular-nums;
}

/* Pending / skeleton state for XXXXX */
.dashboard-section .kpi-num.pending {
  color: #FFC600;
  
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.dashboard-section .kpi-num.pending::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(54, 173, 74, 0.18),
    transparent
  );
  animation: kpiShimmer 1.8s infinite;
}
@keyframes kpiShimmer {
  to { left: 130%; }
}

/* Unit label */
.dashboard-section .kpi-unit {
 
  font-weight: 600;
  
}

/* Description */
.dashboard-section .kpi-desc {
  border-top: 1px solid #f0f7f2;
    padding-top: 14px;
    margin: 6px 0 0;
}

/* ── Baseline note ───────────────────────────────────────── */
.dashboard-section .dash-baseline {
  font-size: 13px;
  color: #888;
  text-align: center;
  padding: 16px 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dashboard-section .dash-baseline svg {
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── Accordion ───────────────────────────────────────────── */
.dashboard-section .kpi-accordion .accordion-item {
  border: 1px solid #e4f0e8;
  border-radius: 12px !important;
  overflow: hidden;
}
.dashboard-section .kpi-accordion .accordion-button {
  background: #ddebd6;
  color: #1a4d2e;
  font-weight: 600;
  font-size: 14px;
  box-shadow: none;
  padding: 16px 22px;
}
.dashboard-section .kpi-accordion .accordion-button:hover {
  background: #ddebd6;
}
.dashboard-section .kpi-accordion .accordion-button:not(.collapsed) {
  background: #fff;
  color: #1a4d2e;
  box-shadow: none;
  border-bottom: 1px solid #e4f0e8;
}
.dashboard-section .kpi-accordion .accordion-button::after {
  filter: hue-rotate(80deg);   /* tint Bootstrap's default chevron green */
}
.dashboard-section .kpi-accordion .accordion-body {
  background: #fff;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Note rows inside accordion */
.dashboard-section .note-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dashboard-section .note-tag {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: #edf9f0;
  color: #1a4d2e;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 700;
  border: 1px solid #c8e6cf;
  flex-shrink: 0;
  margin-top: 2px;
}
.dashboard-section .note-row p {
  font-size: 13px;
  color: #555;
  line-height: 1.65;
  margin: 0;
}

/* ── Last updated row ────────────────────────────────────── */
.dashboard-section .dash-updated {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 12px;
  color: #aaa;
  margin-top: 18px;
}
    /* ================================================
       WHO WE ARE
    ================================================ */
    .journey-section {
      background: #112f23;
      padding:80px 0px;
    }
    .journey-section h3 {
      color:#fff;
	  font-weight:500;
      margin: 0 0 56px 0;
    }    
    .journey-section .tl-row {
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }   
    .journey-section .tl-nav-btn {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.4);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-top: 10px; font-size: 16px; 
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .journey-section .tl-nav-btn i { color: #fff; }
    .journey-section .tl-nav-btn:hover { border-color: #36ad4a; background: rgba(54,173,74,0.12); }
    .journey-section .tl-nav-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
    .journey-section .tl-viewport {
      flex: 1;
      overflow: hidden;
    }
    .journey-section .tl-track {
      display: flex;
      align-items: flex-start;
      transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
      will-change: transform;
    }
    .journey-section .tl-col {
      flex-shrink: 0;
      box-sizing: border-box;
    }
	.journey-section .tl-col h2
	 {
	   color: #36ad4a; 
	   font-weight:600;
	   margin-bottom: 22px;
	 }
	.journey-section .tl-col p
	 {
	   color:#E0E0E0;
	 }
	.journey-section .tl-col p:last-child
	  {
		margin-bottom:0px;
	  }    
    .journey-section .tl-dots-sep {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      padding: 0 60px;      
      padding-top: 14px;
    }
    .journey-section .tl-dots-sep img {
      display: block;
      width: auto;
      height: 10px;
    }  
    
    .cert-section {
      background: #fff;
      padding: 80px 0px;
    }   
	.cert-section .panel-intro
	{
		 max-width:900px;
	}
    .cert-section .cert-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1.5px solid #e5e5e5;
      padding-bottom: 14px;
      margin-bottom: 34px;
      gap: 16px;
    }
    .cert-section .cert-tabs {
      display: flex;
      align-items: center;
      gap: 24px;
    }
   .cert-section .cert-tab-btn {
      background: none;
      border: none;
      padding: 0;     
      font-weight: 400;
      color: #bbb;
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.2s ease;
      line-height: 1.2;
    }
	.cert-section .cert-tab-btn h2
	{
      color: #bbb;font-weight: 600;margin-bottom:0px;
	}
    .cert-section .cert-tab-btn.active h2 {
      color: #014533;
      font-weight: 700;      
    }    
    .cert-section .cert-nav-arrows {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    .cert-section .cert-arrow-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1.5px solid #d0d0d0;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
	  font-size:16px;
    }
    .cert-section .cert-arrow-btn i {  color: #bbb; }
    .cert-section .cert-arrow-btn.active-arrow {
      background: #36ad4a;
      border-color: #36ad4a;
    }
    .cert-section .cert-arrow-btn.active-arrow i { color: #fff; }
   .cert-section  .cert-arrow-btn:hover:not(.active-arrow) {
      border-color: #36ad4a;
      background: #f2fbf4;
    }
    /* Sliding panels wrapper */
    .cert-section .cert-panels-wrap {
      overflow: hidden;
      position: relative;
    }
   .cert-section  .cert-panels-track {
      display: flex;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
      will-change: transform;
    }
    .cert-section .cert-panel {
      flex-shrink: 0;
      width: 100%;
      box-sizing: border-box;
    }   
     .cert-section .cert-panel h4
	 {
		 margin-top:30px;    color: #014533;
	 }
    .wwa-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px 60px;
      margin-top: 48px;
      padding-top: 40px;
      border-top: 1px solid #e8e8e8;
    }
    .iconbox-wrapper {
      display: flex;
      align-items: center;
      gap: 18px;
    }
	.iconbox-wrapper p
	{
		margin-bottom:0px;
	}
	.cert-panel .iconbox-wrapper {
    background-color: #f2efe9;
    border-radius: 12px;
    padding: 30px 20px;
    gap: 20px;
    height: 100%;
}

    /* ── WHO WE ARE MAP── */
    #wasco-presence-section {
      position: relative;
      overflow: hidden;
    }
    #presenceChartDiv {
      width: 100%;
      height: 540px;
      display: block;
    }
    @media(max-width:900px){ #presenceChartDiv { height: 420px; } }
    @media(max-width:600px){ #presenceChartDiv { height: 320px; } }

    /* Loader — exact same as offices */
    .presence-loader {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #fff;
      z-index: 10;
      transition: opacity .6s ease;
    }
    .presence-loader.gone { opacity: 0; pointer-events: none; }
    .presence-loader span {
      width: 10px; height: 10px;
      border-radius: 50%;
      animation: pbounce 1.1s ease-in-out infinite;
    }
    .presence-loader span:nth-child(1) { background: #014533; }
    .presence-loader span:nth-child(2) { background: #36ad4a; animation-delay: .18s; }
    .presence-loader span:nth-child(3) { background: #014533; animation-delay: .36s; }
    @keyframes pbounce {
      0%,80%,100% { transform: scale(.55); opacity: .4; }
      40%          { transform: scale(1.25); opacity: 1; }
    }

    /* ── Region tab legend ── */
    .presence-legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;      
      padding: 30px 16px 16px;
      background: #fff;
      border-top: 1px solid #e0ebe4;
    }
    .presence-legend .legend-item {
      /*display: inline-flex;
      align-items: center;
      gap: 8px;      
      padding: 8px 20px;
      border-radius: 50px;      
      cursor: pointer;
      user-select: none;
      transition: opacity .22s ease, transform .18s ease, box-shadow .22s ease;
	  border-width: 1px;*/
    }
    .presence-legend .legend-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 18px rgba(0,0,0,.18);
    }
    .presence-legend .legend-item.dimmed {
      opacity: 1;
     
      transform: none;
      box-shadow: none;
    }
    .presence-legend .legend-item.active {
      transform: translateY(-2px);
      box-shadow: 0 5px 20px rgba(0,0,0,.22);
	  border-color: #014533;
    }
    /* Each tab own colour */
    /*.legend-item[data-type="all"]  { border-color: #014533; }
    .legend-item[data-type="sea"]  { border-color: #36ad4a; }
    .legend-item[data-type="lat"]  { border-color: #fec80c; }
    .legend-item[data-type="afr"]  { border-color: #e85d2f; }
    .legend-item[data-type="aus"]  { border-color: #819892; }*/

    .presence-legend .legend-item em {
      font-style: italic;
      font-size: 14px;
      font-weight: 800;
      padding: 0px;
      color:#333;      
    }
	.presence-legend .legend-item.active em
	{
		color:#fff;
	}
    .leg-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
	background: #fec80c;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #fec80c;
}

    @media(max-width:600px){
      .presence-legend .legend-item {  }
      .presence-legend {  }
    }

    /* ── Info panel — exact same as offices ── */
    .presence-info-panel {
      position: fixed;
      top: 50%;
      right: -360px;
      transform: translateY(-50%);
      width: 320px;
      background: #fff;
      border-radius: 16px 0 0 16px;
      box-shadow: -6px 0 40px rgba(1,69,51,.13);
      z-index: 9999;
      transition: right .4s cubic-bezier(.4,0,.2,1);
      overflow: hidden;
	  display:none;
    }
    .presence-info-panel.visible { right: 0; display:block;}
    .pip-close {
      position: absolute;
      top: 12px; right: 14px;
      width: 30px; height: 30px;
      border-radius: 50%;
      border: none;
      background: #f0f0f0;
      color: #666;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .18s, color .18s;
    }
    .pip-close:hover { background: #014533; color: #fff; }
    .pip-inner { padding: 24px 20px 26px; }
    .pip-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: #fff;
      background: #014533;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 12px;
    }
    .pip-country {
      font-size: 17px;
      font-weight: 700;
      color: #111;
      margin: 0 0 4px;
      padding-right: 28px;
      line-height: 1.3;
    }
    .pip-region {
      font-size: 13px;
      color: #36ad4a;
      font-weight: 600;
      margin: 0 0 16px;
    }
    .pip-divider { height: 1px; background: #eee; margin-bottom: 14px; }
    .pip-all-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #aaa;
      margin-bottom: 10px;
    }
    .pip-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .pip-tag {
      font-size: 12px;
      font-weight: 500;
      color: #014533;
      background: #eaf5ee;
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid #c8e6cd;
    }
    .pip-tag.current {
      color: #fff;
      border-color: transparent;
    }
    @media(max-width:576px){
      .presence-info-panel {
        top: auto; bottom: -100%; right: 0;
        width: 100%; max-width: 100%;
        border-radius: 16px 16px 0 0;
        transform: none;
        transition: bottom .4s cubic-bezier(.4,0,.2,1);
      }
      .presence-info-panel.visible { bottom: 0; right: 0; }
    }

    /* ================================================
       LEADERS — SHARED CARD STYLES
    ================================================ */
    .leaders-section {
      padding: 72px 0 80px;
      background: #fff;
    }
	.leaders-section h2.heading
	{
		margin-bottom:30px;
	}
	.leaders-section h4
	{
		color:#fff;font-weight:600;
		line-height:25px;
	}
	.leaders-section small
	{
		color: #bbbbbb;
	}
    .leaders-section + .leaders-section {
      padding-top: 0;
    }
    /* Carousel wrapper */
    .leaders-section .cards-carousel {
      position: relative;
    }

    /* Arrow buttons — large circles on sides */
    .leaders-section .cards-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-60%); /* account for gradient overlay at bottom */
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: none;
      background: #014533;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: background 0.25s ease, opacity 0.25s ease;
      flex-shrink: 0;font-size:16px;
    }
    .leaders-section .cards-arrow i {  }
    .leaders-section .cards-arrow:hover { background: #36ad4a; }
    .leaders-section .cards-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
    .leaders-section .cards-arrow.arrow-prev { left: 0px; }
    .leaders-section .cards-arrow.arrow-next { right: 0px; }

    /* Viewport clips overflow */
    .leaders-section .cards-viewport {
      overflow: hidden;
      margin: 0 22px;
    }

    /* Track — flex row of cards */
    .leaders-section .cards-track {
      display: flex;
      gap: 16px;
      transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
      will-change: transform;
    }

    /* Individual card */
    .leaders-section .leader-card {
      flex-shrink: 0;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
     background-color: rgba(236, 238, 249, 1);
      cursor: pointer;
	  padding-top: 20px;
      /* width & height set by JS */
    }

    /* Photo fills card */
    .leaders-section .leader-card img {
      width: 100%;
      height: 100%;
      /*object-fit: cover;*/
      object-position: top center;
      display: block;
      transition: transform 0.5s ease;
    }

    /* Bottom gradient overlay — always present, shows name */
    .leaders-section .card-overlay {
      position: absolute;
      inset: 0;
      /*background: linear-gradient(
        to top,
        rgba(1,42,26,0.92) 0%,
        rgba(1,42,26,0.55) 35%,
        transparent 65%
      );*/
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px 18px;
      transition: background 0.4s ease;
	  background: linear-gradient(to top, rgba(17, 47, 35, 0.9) 0%, rgba(17, 47, 35, 0.8) 10%, rgba(17, 47, 35, 0.6) 30%, rgba(17, 47, 35, 0) 48%, transparent 100%);
    }    

    /* ================================================
       BOARD MEMBERS — HOVER FLIP CONTENT
    ================================================ */
   .leaders-section  .board-card .card-hover-content {
      position: absolute;
      inset: 0;
      background: #112f23;
      border-radius: 16px;
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      opacity: 0;
      transform: translateY(100%);
      transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.4,0,0.2,1);
      pointer-events: none;
    }
    .leaders-section .board-card:hover .card-hover-content {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .leaders-section .board-card:hover img {
      transform: scale(1.04);
    }
    .leaders-section .card-hover-content h4
	{
		margin-bottom:0px;
	}
	.leaders-section .card-hover-content small
	{
		font-size:14px !important;
	}
    .leaders-section .card-hover-content p
	{
		color: #bbb;    
    font-size: 16px;
    line-height: 20px;
    margin-top: 26px;
	}
   
    .leaders-section .hover-appointed {
      color: #36ad4a;
      font-size: 14px;
      font-weight: 600;
      margin-top: 16px;
      flex-shrink: 0;
    }

  /* On touch devices, disable pure CSS hover for board cards.
   JS adds .touch-device to #boardTrack when touch is detected. */
#boardTrack.touch-device .board-card:hover .card-hover-content {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

/* JS adds .is-flipped when card is tapped — shows the overlay */
#boardTrack.touch-device .board-card.is-flipped .card-hover-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Tap-to-close hint — small X button in top-right of overlay on mobile */
.leaders-section .card-hover-content .close-hint {
  display: none; /* hidden on desktop */
}
@media (hover: none) {
  /* Only show on actual touch/no-hover devices */
 .leaders-section .card-hover-content .close-hint {
    display: flex;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
  }
}




    /* ================================================
       OUR PURPOSE — Page
    ================================================ */
    .purpose-vm-section {
      background: #112f23;
      padding: 80px 0px;
    }

    /* Tab toggle pill */
    .purpose-vm-section .vm-tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 38px;
    }
    .purpose-vm-section .vm-tab-group {
      display: inline-flex;
      background: transparent;
      border: 1.5px solid #27783e;
      border-radius: 50px;
      padding: 4px;
      gap: 0;
    }
    .purpose-vm-section .vm-tab-btn {
      padding: 10px 50px;
      border: none;
      border-radius: 50px;
      background: transparent;
      color: rgba(255,255,255,0.6);   
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease;
      white-space: nowrap;
    }
    .purpose-vm-section .vm-tab-btn.active {
       background: #eaf5e6;
		color: #36ad4a;
		font-weight: 500;
    }

    /* Content panels */
    .purpose-vm-section .vm-panel {
      display: none;
      text-align: center;
      animation: vmFadeIn 0.45s ease;
    }
    .purpose-vm-section .vm-panel.active { display: block; }
	.purpose-vm-section .vm-panel h3
	{
     color: #fff;font-weight: 500;margin:0px;
	 max-width: 920px;
    margin: 0 auto;
	}
	.purpose-vm-section .vm-panel h3 span
	{
		    color: #FFC600;
	}

    @keyframes vmFadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
   

    /* ================================================
       KEY STRATEGIC MOVERS — PILLARS CAROUSEL
    ================================================ */
  
/*
.pillars-section {
  background: #EBF5E6;
  padding: 80px 0px;
  text-align: center;
}
.pillars-section h5 { color: #36ad4a; margin-bottom: 14px; }
.pillars-section h3 { color: #123024; margin-bottom: 50px; }
.pillars-section .pillar-content-panel h4 { color: #36ad4a; margin-bottom: 14px; }
.pillars-section .pillars-icons-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-bottom: 30px;
  position: relative;
}
.pillars-section .pillar-icon-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.28;
  transition: opacity    0.45s ease,
              transform  0.45s cubic-bezier(0.4,0,0.2,1);
}
.pillars-section .pillar-icon-btn.is-active  { opacity: 1; }
.pillars-section .pillar-icon-btn:not(.is-active):hover { opacity: 0.5; }
.pillars-section .pillar-icon-btn img {
  display: block;
  object-fit: contain;  
  width:  65px;
  height: 65px;
  transition: width  0.45s cubic-bezier(0.4,0,0.2,1),
              height 0.45s cubic-bezier(0.4,0,0.2,1),
              filter 0.45s ease;
}
.pillars-section .pillar-icon-btn.is-active img {
  width:  100px;
  height: 100px;
  filter: none;
}
.pillars-section .pillars-content-area {
  text-align: center;
  min-height: 160px;
  position: relative;
}
.pillars-section .pillar-content-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.pillars-section .pillar-content-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.pillars-section .pillar-content-panel p { max-width: 455px; margin: 0 auto; }
.pillars-section .pillars-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.pillars-section .pillar-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid #014533;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease;
}
.pillars-section .pillar-arrow:hover { background: #014533; }
.pillars-section .pillar-arrow:hover i { color: #fff; }
.pillars-section .pillar-arrow i { color: #014533; font-size: 14px; }
@media (max-width: 575.98px) {
  .pillars-section .pillars-icons-row { gap: 20px; }
  .pillars-section .pillar-icon-btn img { width: 45px; height: 45px; }
  .pillars-section .pillar-icon-btn.is-active img { width: 70px; height: 70px; }
}

*/ 

.strategic-section h5 { color: #36ad4a; margin-bottom: 14px; }
.strategic-section h3 { color: #123024; margin-bottom: 50px; }
.strategic-section .row h4
{
	margin:24px 0px 16px 0px;min-height:60px;
}
.strategic-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 48px;
}
#strategicViewport {
  overflow: hidden;
  flex: 1;
}
#strategicTrack {
  display: flex;  
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  /*align-items: flex-start;*/
  align-items: stretch;
  gap: 0;  
}
.strategic-card {
  flex-shrink: 0;
  text-align: center;
  padding: 40px;  
  transition: .45s ease;
   border-radius: 16px;
   position: relative;
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.strategic-card::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 0;
  height: 70%;
  width: 1px;
  background: rgba(0,0,0,0.12);
  transform: translateX(50%);  /* centres it in the gap */
  transition: opacity 0.3s ease;
}
.strategic-card:last-child::after {
  display: none;
}
/* Premium hover effect */
.strategic-card:hover {
  background: #fff;
  box-shadow: 0 12px 40px rgba(1, 69, 51, 0.10),
              0 2px 8px rgba(1, 69, 51, 0.06);
  transform: translateY(-6px);
  border-radius: 16px;
  z-index: 1;
}
.strategic-card:hover::after {
  opacity: 0;   /* hide divider on hovered card */
}
/* Line expands on hover */
.strategic-section .line {
  height: 2px;
  width: 18%;
  margin: 0 auto 20px;
  background: #36ad4a;   /* brand green instead of dark */
  display: block;
  transition: width 0.4s ease;
}
.strategic-card:hover .line {
  width: 50%;
}
/* Icon subtle scale on hover */
.strategic-card:hover img {
  transform: scale(1.08);
  transition: transform 0.4s ease;
}
.strategic-card p:last-child
{
	margin-bottom:0px;
}
.strategic-card img { 
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;transition: transform 0.4s ease;
}
.strategic-card h4 {
  margin-bottom: 14px;min-height: 60px;
}
.strategic-card:hover h4 {
  color: #014533;
}
.strategic-carousel .cards-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #014533;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.25s ease, opacity 0.25s ease;
  flex-shrink: 0;
}
.strategic-carousel .cards-arrow i { font-size: 13px; }
.strategic-carousel .cards-arrow:hover { background: #36ad4a; }
.strategic-carousel .cards-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.strategic-carousel .arrow-prev { left: 0px; }
.strategic-carousel .arrow-next { right: 0px; }

/* Animated top line 
.strategic-carousel .strategic-card:before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:0;
    height:2px;
    background:#FFC600;
    transform:translateX(-50%);
    transition:.45s;
}
/* Soft glow 
.strategic-carousel .strategic-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top,
    rgba(255,198,0,.10),
    transparent 70%);
    opacity:0;
    transition:.45s;
    pointer-events:none;
}
.strategic-carousel .strategic-card:hover{
    background:rgba(255,255,255,.04);
    transform:translateY(0px);
    box-shadow:
    0 18px 35px rgba(0,0,0,.25);
}
.strategic-carousel .strategic-card:hover:before{

    width:100%;
}
.strategic-carousel .strategic-card:hover:after{
    opacity:1;
}*/


.core-values
{
   text-align:center;padding:80px 0px;    background: #112f23;
}
.core-values h2
{
   color:#fff;
}
.core-values h3
{
   color: #FFC600;margin:60px 0px 40px 0px;
} 
  
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .dashboard-section .kpi-card {
    padding: 26px 22px 22px;
  }
  .dashboard-section .kpi-num {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .dashboard-section .dashboard-section {
    padding: 60px 0 50px;
  }
  .dashboard-section .dash-title {
    font-size: 24px;
  }
  .dashboard-section .kpi-card {
    text-align: center;
  }
  .dashboard-section .kpi-icon {
    margin: 0 auto 8px;
  }
  .dashboard-section .kpi-num {
    font-size: 32px;
  }
}



/* ================================
   RESPONSIVE (ONLY USED)
================================ */
@media (max-width: 1199.98px) 
{ 
 .contact-card
 {
	 max-width:100%;
 }
 .performance-section .stat-box
 {
	/* border-bottom: 1px solid rgba(255, 255, 255, 0.2);	 */
 }
 
  .performance-section .stat-box:last-child
  {
	 /* border-bottom:0px;border-right: 1px solid rgba(255, 255, 255, 0.2) !important;	*/
  }
 .performance-section  .stat-box
  {
	   border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  h1, .inner-short-banner h2 {
     font-size: 50px;
     line-height: 50px;
	}
	.performance-section .stat-box
 {
	/* min-height:250px;*/grid-template-rows: 110px auto;
 }
 .performance-section .stats-row{
    grid-template-columns:repeat(2,1fr);
	gap:20px;
}

.expertise-section .expertise-grid{
    grid-template-columns:1fr;
}
}
@media (min-width: 992px)
{ 
 
  .inner-banner .banner-text
  {
	  max-width: 80%;
  }  
  .w-60
{
	width:60%;
}
.w-70
{
	width:70%;
}
.w-80
{
	max-width:80%;
}
.w-90
{
	max-width:90%;
}
}
@media (max-width: 991.98px) {
  h1, .inner-short-banner h2 {
     font-size: 42px;
     line-height: 42px;
	}
}
@media (min-width: 767px) and (max-width: 991.98px) {
    h2 { font-size: 2.2rem; }
	h3 { font-size: 1.4rem;line-height: 1.2; }
	h4 { font-size: 1.2rem; line-height: 1.2;}
	h5 { font-size: 1.1rem; line-height: 1.4; }
	h6 { font-size: 1.0rem; }
	.core-values .brandtagline
  {
	  max-width:60%;margin:0 auto;
  }
}
@media (max-width: 767.98px) {
  
 
  h1, .inner-short-banner h2 {
     font-size: 32px;
     line-height: 40px;
	 font-weight:600;
	}
	h2 { font-size: 2.0rem; }
	h3 { font-size: 1.35rem; }
	h4 { font-size: 1.2rem; line-height: 1.3;}
	h5 { font-size: 1.1rem; line-height: 1.3; }
	h6 { font-size: 1rem; }
  .footer-logo {
    text-align: center;
    margin-bottom: 20px;
  }
  .footer-links {
    text-align: center;
  }
  .footer
  {
	  text-align:center;
  }
  .wgb-hero .nav
  {
	  display:none;
  }
  .inner-banner .banner-text p, .slide-content p
  {
	  font-size:18px;
  }
  .wgb-hero .etxt
  {
	  font-size:12px;letter-spacing: 1px;
  }
  .performance-section .stat-box
  {
	  padding: 30px 12px !important;
  }
  .wwa-stats-grid
  {
	  grid-template-columns: auto !important;gap: 30px 0px !important;
  }
  .wwa-stats-grid .iconbox-wrapper:last-child
  {
	  margin-bottom:0px;
  }
  .journey-section .tl-col
  {
	  text-align:center;
  }
  .core-values .brandtagline
  {
	  max-width:60%;margin:0 auto;
  }
  .inner-short-banner
  {
	  min-height: 48vh;
  }
  
}
@media (max-width: 575.98px) {
	h1, .inner-short-banner h2 {
        font-size: 26px;
        line-height: 32px;    
	}
	.performance-section .stats-row{
     grid-template-columns:1fr;
  }
  .expertise-section .slider-nav button
  {
	   width:42px !important;height:42px !important;font-size:14px !important;
  }
     h2 {
        font-size: 1.8rem;
    }
	
	.cert-section .cert-header-row
	{
		display: block;
	}
	.cert-section .cert-nav-arrows, .cert-section .cert-tabs
	{
		justify-content: center;        margin-bottom: 14px;
	}
	.cert-section .cert-arrow-btn, .journey-section .tl-nav-btn, .inner-short-banner .arrow-circle, .leaders-section .cards-arrow
	{
		width:36px;height:36px;font-size:14px;
	}
	.cert-section .cert-tabs
	{
		gap: 16px;
	}
	.inner-banner
	{
		min-height: 60vh;
	}
	.core-values h3
	{
		margin: 50px 0px 20px 0px;
	}
	.performance-section .stat-box h4
	{
		min-height:auto;
	}
	.performance-section .stat-box p
	{
		position:static;
	}
	.performance-section .stat-box
	{
		min-height:inherit;        grid-template-rows: 80px auto;
	}
	.performance-section .stat-box:last-child
	{
		/*border:none !important;*/
	}
	.career-content .btn-connect
	{
		width:50%;
	}
	.upload-box
	{
		display:block;
	}
	.upload-left
	{
		margin-bottom:20px;
	}
	
}
@media (max-width: 444px) {
	h1, .inner-short-banner h2 {
        font-size: 22px;
        line-height: 26px;    
	}
	h2
	{
		font-size: 1.7rem;
	}
	.career-content .btn-connect
	{
		width:70%;
	}
	
}