/* Consolidated stylesheet: services.css, about.css, navigation.css, index.css */



/* ===== services.css ===== */

:root {

      --brand-green: #082d12;

      --brand-green-light: #0c4d1d;

      --accent: #f7c744;

      --primary-accent: #f05a28;

      --text: #1a1a1a;

      

      --muted: #64748b;

      --soft: #f8fafc;

      --line: #e2e8f0;

      --shadow: 0 12px 32px rgba(8, 45, 18, 0.08);

       --border-light: #e2e8f0;

    }



    body {

      margin: 0;

      font-family: "Inter", sans-serif;

      color: var(--text);

      background: #fff;

      line-height: 1.7;

      overflow-x: hidden;

    }



    img {

      max-width: 100%;

      display: block;

    }



    a {

      text-decoration: none;

    }



    .site-header {

      position: fixed;

      top: 0;

      left: 0;

      right: 0;

      z-index: 1000;

      background: transparent;

      transition: background 0.4s, box-shadow 0.4s;

    }



    .site-header.scrolled,

    .site-header.menu-open {

      background: rgba(10, 10, 10, 0.98);

      box-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);

    }



    .nav-wrap {

      display: flex;

      align-items: center;

      justify-content: flex-start;

      height: 88px;

      transition: height 0.3s ease;

    }



    .site-header.scrolled .nav-wrap {

      height: 72px;

    }



    .brand {

      display: flex;

      align-items: center;

      gap: 14px;

      z-index: 10;

    }



    .brand img {

      height: 70px;

      width: auto;

      transition: height 0.3s ease;

    }



    .site-header.scrolled .brand img {

      height: 60px;

    }



    .nav-links {

      display: flex;

      align-items: center;

      justify-content: flex-end;

      gap: 6px;

      margin-left: auto;

      margin-right: 14px;

    }



    .nav-links a {

      padding: 10px 18px;

      color: rgba(255, 255, 255, 0.92);

      border-radius: 8px;

      font-size: 0.86rem;

      font-weight: 500;

      letter-spacing: 0.04em;

      text-transform: uppercase;

      transition: 0.3s ease;

    }



    .nav-links a:hover,

    .nav-links a.active {

      color: #fff;

      background: rgba(255, 255, 255, 0.1);

    }



    .nav-cta {

      color: #fff !important;

    }



    /* 1. Establish layout positioning boundaries on the wrapper */

.nav-dropdown{

    position:static;

}



.mega-submenu{

    position:absolute;

    top:75px;

    left:50%;

    transform:translateX(-50%) translateY(20px);



    /* width:1500px; */

    width:95vw;



    /* Responsive Height */

    height:calc(100vh - 150px);

    max-height: 780px;

    min-height: 450px;



    background:#fff;

    border-radius:18px;



    display:flex;



    overflow:hidden;



    box-shadow:

    0 20px 60px rgba(0,0,0,.12);



    opacity:0;

    visibility:hidden;



    transition:.35s ease;



    z-index:9999;

}



.nav-dropdown:hover .mega-submenu{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}



/* LEFT SIDEBAR */



.mega-sidebar{

    width:360px;

    padding:40px;

    background:#fff;

    border-right:1px solid #ececec;

}



.mega-label{

    color:var(--accent-dark);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}



.mega-sidebar h2{

    margin:12px 0;

    font-size: clamp(1.2rem, 1.2vw, 2rem);

    line-height:1.15;

    color:#0f1b34;

}



.sidebar-line{

    width:60px;

    height:3px;

    background:var(--accent-dark);

    margin:15px 0;

}



.mega-sidebar p{

    color:#666;

    font-size: 0.8;

    line-height:1.25;

}



.mega-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;



    margin-top:10px;



    /* padding:16px 28px !important; */



    background:var(--brand-green);

    color:#fff !important;



    text-decoration:none;

    border-radius:10px !important;

}

.mega-btn:hover{

  color: var(--brand-green) !important;

  background: white;

  border: 1px solid var(--brand-green);

}

.sidebar-image{

    width:100%;

    margin-top:20px;

    border-radius:14px;

    height: clamp(140px, 18vh, 280px);

    object-fit:contain;;

}



/* CENTER */



.mega-services{

    flex:1;

    display:grid;

    grid-template-columns:1fr 1fr;

}



.service-column{

    padding:35px;

}



.service-column:first-child{

    border-right:1px solid #ececec;

}



.column-title{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:15px;

}



.icon-boxes{

    width:65px;

    height:65px;

    border-radius:18px;

    background:#f9ee90;



    display:flex;

    align-items:center;

    justify-content:center;



    color:var(--brand-green);

    font-size:26px;

}



.icon-boxes.engineering{

    background:#f9ee90;

    color:var(--brand-red);

}



.column-title h4{

    font-size:1rem;

    margin:0;

    text-transform:uppercase;

}



.service-cards{

    display:flex;

    align-items:center;

    gap:20px;



    text-decoration:none;

    color:#222;



    padding:25px 0;

    border-top:1px solid #ececec;

}

.service-cards:hover{

  transform: translateX(10px);

}



.service-cards img{

     width: clamp(70px, 5vw, 100px);

    height: clamp(70px, 5vw, 100px);

    border-radius:12px;

    object-fit:contain;;

}



.service-cards p{

    margin:0;

    color:#666;

    line-height:1.25;

    font-size: clamp(0.9rem, .7vw, 1rem);

}



.service-cards span{

    margin-left:auto;

    font-size:20px;

    color:#999;

}



/* RIGHT */



.mega-highlights{

    width:350px;

    padding:30px;

    background:#fafafa;

}



.mega-highlights h4{

    font-size:1.4rem;

    text-align: center;

    margin-bottom:30px;

}



.highlight-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:20px 0;

    border-top:1px solid #e7e7e7;

}



.highlight-item:first-of-type{

    border-top:none;

}



.highlight-item i{

  flex-shrink: 0;

    width:60px;

    height:60px;



    /* border-radius:50%; */



    /* background:var(--brand-green); */

    color:#f4b63d;



    display:flex;

    align-items:center;

    justify-content:center;



    font-size:22px;

}

.highlight-item > div{

    flex:1;

    min-width:0;

}



.highlight-item h5{

    margin:0 0 8px;

    font-size: clamp(15px, 1vw, 20px) !important;

    line-height: 1.3;

}



.highlight-item p{

  display: block;

    margin:0;

    color:#666;

    font-size: clamp(15px, .9vw, 18px) !important;

    line-height:1.5 ;

    text-decoration: none;

    word-break: break-word;

}

.highlight-item a{

  display: block !important;

    margin:0 !important;

    text-transform: none !important;

    color:#666 !important;

    font-size: clamp(15px, .9vw, 18px) !important;

    line-height:1.5 !important;

    padding: 0 !important;

    text-decoration: none !important;

    word-break: break-word !important;

}

/* ==========================================

   LARGE DESKTOP (1600px and below)

========================================== */



@media (max-width: 1600px) {



    .mega-submenu {

        width: 96vw;

        max-height: 760px;

    }



    .mega-sidebar {

        width: 300px;

        padding: 36px;

    }



    .mega-highlights {

        width: 350px;

        padding: 36px;

    }



    .mega-sidebar h2 {

        font-size: 1.5rem;

    }

}





/* ==========================================

   DESKTOP (1400px and below)

========================================== */



@media (max-width: 1400px) {



    .mega-submenu {

        width: 97vw;

        top: 70px;

        max-height: 720px;

    }



    .mega-sidebar {

        width: 270px;

        padding: 28px;

    }



    .mega-highlights {

        width: 300px;

        padding: 28px;

    }



    .service-column {

        padding: 28px;

    }



    .mega-sidebar h2 {

        font-size: 1.35rem;

    }



    .column-title h4 {

        font-size: 1rem;

    }



    .icon-boxes {

        width: 52px;

        height: 52px;

        font-size: 20px;

        border-radius: 14px;

    }



    .service-cards img {

        width: clamp(58px, 4.5vw, 78px);

        height: clamp(58px, 4.5vw, 78px);

    }



    .highlight-item h5 {

        font-size: clamp(13px, 0.85vw, 16px);

    }



    .highlight-item p {

        font-size: clamp(11px, 0.72vw, 13px);

    }

    .highlight-item a {

        font-size: clamp(11px, 0.72vw, 13px);

    }

}





/* ==========================================

   LAPTOP (1200px and below)

========================================== */



@media (max-width: 1200px) {



    .mega-submenu {

        width: 98vw;

        top: 68px;

        max-height: 680px;

        min-height: 460px;

        border-radius: 14px;

    }



    .mega-sidebar {

        width: 230px;

        padding: 24px;

    }



    .mega-highlights {

        width: 280px;

        padding: 24px;

    }



    .service-column {

        padding: 22px;

    }



    .mega-sidebar h2 {

        font-size: 1.15rem;

        line-height: 1.2;

    }



    .mega-sidebar p {

        font-size: 0.8rem;

        line-height: 1.5;

    }



    .mega-btn {

        padding: 12px 18px !important;

        font-size: 0.8rem;

    }



    .sidebar-image {

        height: clamp(100px, 14vh, 200px);

    }



    .icon-boxes {

        width: 44px;

        height: 44px;

        font-size: 18px;

        border-radius: 12px;

    }



    .column-title {

        gap: 12px;

        margin-bottom: 10px;

    }



    .column-title h4 {

        font-size: 0.9rem;

    }



    .service-cards {

        gap: 12px;

        padding: 14px 0;

    }



    .service-cards img {

        width: clamp(50px, 4vw, 68px);

        height: clamp(50px, 4vw, 68px);

        border-radius: 8px;

    }



    .service-cards p {

        font-size: clamp(0.75rem, 0.65vw, 0.88rem);

    }



    .mega-highlights h4 {

        font-size: 1.1rem;

        margin-bottom: 18px;

    }



    .highlight-item {

        gap: 12px;

        padding: 15px 0;

    }



    .highlight-item i {

        width: 42px;

        height: 42px;

        font-size: 18px;

    }



    .highlight-item h5 {

        font-size: 0.86rem;

    }



    .highlight-item p {

        font-size: 0.75rem;

    }

    .highlight-item a {

        font-size: 0.75rem;

    }

}





/* ==========================================

   SMALL LAPTOP / LARGE TABLET (1024px)

========================================== */



@media (max-width: 1024px) {



    .mega-submenu {

        /* Switch to a two-column grid: sidebar | services + highlights below */

        display: grid;

        grid-template-columns: 220px 1fr;

        grid-template-rows: auto auto;

        width: 98vw;

        height: auto;

        max-height: 85vh;

        min-height: unset;

        overflow-y: auto;

        top: 66px;

        border-radius: 14px;

    }



    .mega-sidebar {

        grid-column: 1;

        grid-row: 1 / span 2;

        width: 220px;

        padding: 24px;

        border-right: 1px solid #ececec;

        border-bottom: none;

    }



    .mega-sidebar h2 {

        font-size: 1.05rem;

    }



    .sidebar-image {

        height: clamp(90px, 12vh, 160px);

    }



    .mega-services {

        grid-column: 2;

        grid-row: 1;

        display: grid;

        grid-template-columns: 1fr 1fr;

        overflow: hidden;

    }



    .mega-highlights {

        grid-column: 2;

        grid-row: 2;

        width: 100%;

        padding: 20px 24px;

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 16px;

        border-top: 1px solid #ececec;

        background: #fafafa;

    }



    .mega-highlights h4 {

        grid-column: 1 / -1;

        font-size: 1rem;

        margin-bottom: 8px;

    }



    .highlight-item {

        border: none;

        padding: 0;

        gap: 8px;

    }



    .highlight-item i {

        width: 34px;

        height: 34px;

        font-size: 15px;

    }



    .highlight-item h5 {

        font-size: 0.78rem;

        margin-bottom: 4px;

    }



    .highlight-item p {

        font-size: 0.7rem;

    }

    .highlight-item a {

        font-size: 0.7rem;

    }



    .service-column {

        padding: 20px;

    }



    .column-title h4 {

        font-size: 0.85rem;

    }



    .service-cards {

        gap: 10px;

        padding: 12px 0;

    }



    .service-cards img {

        width: clamp(44px, 3.5vw, 60px);

        height: clamp(44px, 3.5vw, 60px);

    }

}





/* ==========================================

   TABLET LANDSCAPE (900px)

========================================== */



@media (max-width: 900px) {



    .mega-submenu {

        grid-template-columns: 190px 1fr;

        top: 64px;

    }



    .mega-sidebar {

        width: 190px;

        padding: 20px;

    }



    .mega-sidebar h2 {

        font-size: 0.95rem;

    }



    .mega-sidebar p {

        font-size: 0.72rem;

    }



    .mega-btn {

        padding: 10px 14px !important;

        font-size: 0.75rem;

    }



    .service-column {

        padding: 16px;

    }



    .service-cards {

        gap: 8px;

        padding: 10px 0;

    }



    .service-cards img {

        width: 40px;

        height: 40px;

        border-radius: 6px;

    }



    .service-cards p {

        font-size: 0.72rem;

    }



    .mega-highlights {

        grid-template-columns: repeat(2, 1fr);

        padding: 16px 20px;

        gap: 12px;

    }



    .mega-highlights h4 {

        font-size: 0.9rem;

    }

}





/* ==========================================

   HAMBURGER BREAKPOINT ? hide hover submenu

   (=990px the hamburger overlay takes over)

========================================== */



@media (max-width: 990px) {



    /* Hide the desktop hover mega-submenu entirely */

    .nav-dropdown .mega-submenu {

        display: none !important;

    }



    /* Also ensure the desktop nav-links don't compete with hamburger */

    .nav-links {

        display: none;

    }

}





/* ==========================================

   TABLET PORTRAIT (768px)

========================================== */



@media (max-width: 768px) {



    .nav-links {

        display: none;

    }



    .mega-submenu {

        display: none !important; /* always handled by hamburger overlay */

    }

}





    /* ===== HAMBURGER: hidden on desktop, shown on tablet/mobile ===== */

    .hamburger {

      display: none; /* hidden by default ? only shown at =990px */

      flex-direction: column;

      gap: 6px;

      cursor: pointer;

      z-index: 10;

      background: none;

      border: none;

      padding: 8px;

    }



    @media (max-width: 990px) {

      .hamburger {

        display: flex; /* show hamburger on tablet/mobile */

      }

      .hamburger-menu {

        margin-left: auto !important;

      }

    }



    /* Tablet: shrink header height */

    @media (max-width: 990px) {

      .nav-wrap {

        height: 72px;

      }

      .brand img {

        height: 60px;

      }

    }



    /* Small mobile: shrink further */

    @media (max-width: 480px) {

      .nav-wrap {

        height: 64px;

      }

      .brand img {

        height: 50px;

      }

    }



    .hamburger span {

      display: block;

      width: 28px;

      height: 2px;

      background: #fff;

      border-radius: 2px;

      transition: 0.3s;

    }



    .hamburger.active span:nth-child(1) {

      transform: rotate(45deg) translate(6px, 6px);

    }



    .hamburger.active span:nth-child(2) {

      opacity: 0;

    }



    .hamburger.active span:nth-child(3) {

      transform: rotate(-45deg) translate(6px, -6px);

    }



    .mobile-menu {

      position: fixed;

      top: 72px; /* matches reduced tablet header height */

      left: 0;

      right: 0;

      z-index: 999;

      display: none;

      background: rgba(10, 10, 10, 0.98);

      border-top: 1px solid rgba(255, 255, 255, 0.1);

      padding: 18px 0 24px;

    }



    .mobile-menu.open {

      display: block;

    }



    .mobile-menu a {

      display: block;

      padding: 14px 0;

      color: rgba(255, 255, 255, 0.92);

      font-size: 0.9rem;

      font-weight: 600;

      letter-spacing: 0.08em;

      text-transform: uppercase;

      border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    }



    .page-banner {

      position: relative;

      min-height: 430px;

      display: flex;

      align-items: flex-end;

      overflow: hidden;

      isolation: isolate;

      background: var(--brand-green);

    }



    .page-banner::before {

      content: "";

      position: absolute;

      inset: 0;

      z-index: -2;

      background-image: var(--banner-image);

      background-size: cover;

      background-position: center;

      transform: scale(1.03);

    }



    .page-banner::after {

      content: "";

      position: absolute;

      inset: 0;

      z-index: -1;

      background:

        linear-gradient(90deg, rgba(8, 45, 18, 0.9), rgba(8, 45, 18, 0.58), rgba(8, 45, 18, 0.12)),

        linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08));

    }



    .page-banner .container {

      padding-top: 130px;

      padding-bottom: 66px;

    }



    .kicker {

      display: inline-flex;

      align-items: center;

      gap: 12px;

      margin-bottom: 16px;

      color: var(--accent);

      font-size: 0.78rem;

      font-weight: 700;

      letter-spacing: 0.2em;

      text-transform: uppercase;

    }



    .kicker::before {

      content: "";

      width: 38px;

      height: 2px;

      background: currentColor;

    }



    .page-banner h1 {

      max-width: 900px;

      margin: 0 0 18px;

      color: #fff;

      font-size: clamp(2.5rem, 5.4vw, 5rem);

      font-weight: 500;

      line-height: 1.02;

      letter-spacing: -0.04em;

    }



    .page-banner p {

      max-width: 760px;

      margin: 0;

      color: rgba(255, 255, 255, 0.9);

      font-size: 1.12rem;

    }



    .section-pad {

      padding: 86px 0;

    }



    .section-title {

      font-size: clamp(2rem, 3.4vw, 3rem);

      font-weight: 500;

      line-height: 1.12;

      letter-spacing: -0.035em;

      margin-bottom: 15px;

    }



    .lead-copy {

      color: #334155;

      font-size: 1.08rem;

      line-height: 1.85;

    }



    /* --- BOUNCY INTERACTIVE CARDS --- */

.service-card {

  background: #ffffff;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

  display: flex;

  flex-direction: column;

  position: relative;

  /* Custom elastic cubic-bezier curve for a springy pop-up effect */

  transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6), 

              box-shadow 0.4s ease;

  will-change: transform;

}



    /* Elastic card lift */

.service-card:hover {

  transform: translateY(-12px) scale(1.02);

  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);

}



    .service-card img {

      width: 100%;

      height: 245px;

      object-fit: cover;

    }



    .service-body {

      padding: 30px;

    }



    .service-body h2 {

      margin-bottom: 16px;

      color: var(--brand-green);

      font-size: 1.45rem;

      font-weight: 700;

    }



    .service-list {

      display: grid;

      gap: 13px;

      margin: 0;

      padding: 0;

      list-style: none;

    }



    .service-list li {

      position: relative;

      padding-left: 30px;

      color: #334155;

    }



    .service-list li::before {

      content: "";

      position: absolute;

      left: 0;

      top: 0.72em;

      width: 9px;

      height: 9px;

      border-radius: 50%;

      background: var(--accent);

      box-shadow: 0 0 0 4px rgba(247, 199, 68, 0.18);

    }



    .service-list strong {

      color: var(--text);

      font-weight: 800;

    }



    .feature-strip {

      background: var(--soft);

      border-top: 1px solid var(--line);

      border-bottom: 1px solid var(--line);

    }



    .stat-box {

      height: 100%;

      padding: 28px;

      border-radius: 8px;

      background: #fff;

      border: 1px solid var(--line);

      box-shadow: var(--shadow);

    }



    .stat-box strong {

      display: block;

      color: var(--brand-green);

      font-size: 2rem;

      line-height: 1;

      margin-bottom: 10px;

    }



    .stat-box span {

      color: var(--muted);

    }



    @media (max-width: 768px) {

      .page-banner {

        min-height: 360px;

      }



      .service-body {

        padding: 24px;

      }

    }



    /* footer */

    

:root {

    --bg-color: #fbf6ee;       /* Soft cream background */

    --text-dark: #1c2d24;      /* Clean contrast text */

    --accent-gold: #d4a359;    /* Fine line accents */

    --border-color: #ebdcc5;   /* Dividing layout lines */

}







.footer {

    background-color: var(--bg-color);

    color: var(--text-dark);

    padding: 0;

    width: 100%;

}



/* --- Top CTA Section --- */

.cta-banner { 

  position: relative; 

  width: 100%; 

  height: 180px; 

  display: flex;

  justify-content: flex-end; /* Align overlay box on the right */

  align-items: stretch;

  overflow: hidden; 

  border-bottom: 1px solid var(--border-color);

} 



.cta-bg-img { 

  position: absolute; 

  left: 0; 

  top: 0; 

  width: 100%; 

  height: 100%; 

  object-fit: cover; 

  z-index: 1; 

  pointer-events: none; 

} 



/* High transparency glassmorphism effect using low alpha values and backdrop-filter */

.cta-overlay-box { 

  position: relative; 

  z-index: 2; 

  width: 45%; 

  height: 100%;

  

  /* Lighter, highly transparent dark-green glass tint */

  background: linear-gradient(

    135deg, 

    rgba(22, 43, 37, 0.45) 0%, 

    rgba(14, 28, 25, 0.55) 100%

  );

  

  /* Blurs the underlying background image to generate the frosted glass look */

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px); /* Safari support */

  

  /* Bright green vertical border line strictly on the left edge */

  border-left: 3px solid #4CAF50; 

  box-sizing: border-box;

} 



/* Internal layout for elements inside the glass box */

.cta-contents-inner {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

  padding: 15px 30px;

  box-sizing: border-box;

  color: #ffffff;

  /* Soft text shadow to guarantee crisp text readability over lighter image spots */

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

}



/* Small badge at the top */

.cta-badge {

  align-self: flex-start;

  background-color: #4CAF50;

  color: #ffffff;

  font-size: 0.6rem;

  font-weight: 700;

  letter-spacing: 1px;

  padding: 2px 6px;

  margin-bottom: 6px;

  text-transform: uppercase;

  text-shadow: none; /* Keep crisp container baseline styling */

}



.cta-contents-inner h2 { 

  font-size: 1rem; 

  line-height: 1.2;

  letter-spacing: 0.3px; 

  font-weight: 600; /* Bumped weight slightly for better separation against background elements */

  color: #ffffff;

  margin: 0 0 4px 0; 

} 



.cta-contents-inner p { 

  font-size: 0.75rem; 

  color: #f0f5f3; /* Brightened text color slightly to keep contrast sharp against transparency */

  margin: 0 0 10px 0;

  line-height: 1.3;

} 



/* Minimal interactive link with circle arrow */

.cta-button { 

  display: inline-flex; 

  align-items: center;

  gap: 10px;

  color: var(--accent); 

  text-decoration: none; 

  font-size: 0.75rem; 

  font-weight: 600; 

  white-space: nowrap; 

  transition: opacity 0.3s ease; 

  align-self: flex-start;

} 



.cta-button:hover { 

  opacity: 0.85;

  transform: translateX(6px);

} 



/* Circular backdrop behind arrow icon */

.btn-arrow {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  background-color: var(--accent);

  color: #10211d;

  border-radius: 50%;

  font-size: 0.85rem;

  

}



/* Responsive adjustment for small / mobile viewports */

@media (max-width: 992px) {

  .cta-overlay-box {

    width: 60%; 

  }

}



@media (max-width: 600px) {

  .cta-overlay-box {

    width: 100%; 

    border-left: none;

    border-top: 3px solid #4CAF50;

    /* Increase color depth slightly on small phones for baseline readability */

    background: rgba(14, 28, 25, 0.75); 

  }

}



/* --- Main Footer Content Grid --- */

.footer-container {

    display: grid;

    grid-template-columns: 1fr 1fr 1.5fr;

    gap: 40px;

    padding: 50px 20px 20px 50px;

}



.footer-column h3 {

    font-size: 0.9rem;

    letter-spacing: 2px;

    margin:0 25px 20px;

    font-weight: 700;

}



.footer-column ul {

    list-style: none;

}



.footer-column ul li {

    margin-bottom: 12px;

}



.footer-column ul li a {

    text-decoration: none;

    color: var(--text-dark);

    font-size: 0.9rem;

    transition: color 0.2s;

}



.footer-column ul li a:hover {

    color: var(--accent-gold);

}



/* Contact Module Specifics */

.connect-col {

    padding-left: 40px;

    border-left: 1px solid var(--border-color);

}



.contact-item {

    display: flex;

    align-items: flex-start;

    margin-bottom: 20px;

}



.contact-item i {

    color: var(--accent-gold);

    font-size: 1.2rem;

    margin-top: 3px;

    margin-right: 15px;

}



.contact-item .label {

    display: block;

    font-size: 0.85rem;

    font-weight: 600;

    margin-bottom: 2px;

}



.contact-item a, 

.contact-item p {

    font-size: 0.9rem;

    color: #555;

    text-decoration: none;

}



/* --- Copyright & Socials Bar --- */

.footer-bottoms {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 20px;

    border-top: 1px solid var(--border-color);

    font-size: 0.8rem;

    color: #666;

}



.social-icons {

    display: flex;

    gap: 10px;

}



.social-icons a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border: 1px solid var(--border-color);

    color: var(--accent-gold);

    text-decoration: none;

    border-radius: 4px;

    font-size: 0.85rem;

    transition: all 0.3s;

    margin-right: 20px;

}



.social-icons a:hover {

    background-color: var(--accent-gold);

    color: #fff;

    border-color: var(--accent-gold);

}



/* --- Responsive Layout Breaks --- */

@media (max-width: 992px) {

    .cta-bg-img {

        max-width: 45%; 

    }

}



@media (max-width: 768px) {

    .footer {

        padding: 0 20px;

    }



    .cta-contents {

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;

        padding: 40px 10px;

        background: var(--bg-color); /* Overrides gradient for clear text visibility on small displays */

    }



    .cta-bg-img {

        opacity: 0.12; /* Drops opacity down to protect small text layouts */

        max-width: 100%;

        width: 100%;

        object-fit: cover;

    }



    .footer-container {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 40px 10px;

    }



    .connect-col {

        padding-left: 0;

        border-left: none;

    }



    .footer-bottoms {

        flex-direction: column-reverse;

        gap: 20px;

        text-align: center;

        padding: 30px 10px;

    }

}







/* ===== about.css ===== */

:root {

      --brand-green: #082d12;

      --brand-green-light: #0c4d1d;

      --accent: #f7c744;

      --red: #c41e24;

      --text: #1a1a1a;

      --muted: #64748b;

      --soft: #f8fafc;

      --line: #e2e8f0;

      --shadow: 0 12px 32px rgba(8, 45, 18, 0.08);

    }



    body {

      margin: 0;

      font-family: "Inter", sans-serif;

      color: var(--text);

      background: #fff;

      line-height: 1.7;

    }



    img {

      max-width: 100%;

      display: block;

    }



    a {

      text-decoration: none;

    }



    .page-banner {

      position: relative;

      min-height: 520px;

      display: flex;

      align-items: center;

      overflow: hidden;

      isolation: isolate;

      background-color: var(--brand-green);

      background-image: var(--banner-image);

      background-size: cover;

      background-position: center right;

      background-attachment: fixed;

    }



    .page-banner::before {

      content: "";

      position: absolute;

      inset: 0;

      z-index: -2;

      background: inherit;

      transform: scale(1.04);

      display: none;

    }



    .page-banner::after {

      content: "";

      position: absolute;

      inset: 0;

      z-index: -1;

      background:

        linear-gradient(90deg, rgba(3, 26, 10, 0.92) 0%, rgba(8, 45, 18, 0.74) 42%, rgba(8, 45, 18, 0.22) 72%, rgba(255, 255, 255, 0.22) 100%),

        linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.04));

    }



    .page-banner .container {

      padding-top: 118px;

      padding-bottom: 62px;

    }



    .page-banner-content {

      width: min(100%, 760px);

      padding: 42px 0 0;

      position: relative;

    }



    .page-banner-content::after {

      content: "";

      display: block;

      width: 96px;

      height: 4px;

      margin-top: 34px;

      border-radius: 999px;

      background: var(--accent);

    }



    .kicker {

      display: inline-flex;

      align-items: center;

      gap: 12px;

      margin-bottom: 16px;

      color: var(--accent);

      font-size: 0.78rem;

      font-weight: 700;

      letter-spacing: 0.2em;

      text-transform: uppercase;

    }



    .kicker::before {

      content: "";

      width: 38px;

      height: 2px;

      background: currentColor;

    }



    .page-banner h1 {

      max-width: 760px;

      margin: 0 0 18px;

      color: #fff;

      font-size: clamp(2rem, 4vw, 3.55rem);

      font-weight: 600;

      line-height: 1.06;

      letter-spacing: -0.04em;

    }



    .page-banner p {

      max-width: 680px;

      margin: 0;

      color: rgba(255, 255, 255, 0.86);

      font-size: clamp(1rem, 1.3vw, 1.15rem);

      line-height: 1.75;

    }



    .banner-meta {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

      margin-top: 24px;

    }



    .banner-meta span {

      display: inline-flex;

      align-items: center;

      min-height: 34px;

      padding: 7px 12px;

      border-radius: 999px;

      color: rgba(255, 255, 255, 0.92);

      background: rgba(255, 255, 255, 0.11);

      border: 1px solid rgba(255, 255, 255, 0.14);

      font-size: 0.78rem;

      font-weight: 700;

      letter-spacing: 0.08em;

      text-transform: uppercase;

      backdrop-filter: blur(10px);

    }



    .section-pad {

      padding: 86px 0;

    }



    .profile-section {

      position: relative;

      background:

        radial-gradient(circle at 86% 12%, rgba(247, 199, 68, 0.1), transparent 28%),

        linear-gradient(180deg, #ffffff 0%, #ffffff 68%, #f7faf8 100%);

      overflow: hidden;

    }

  

    .profile-section::before {

      content: "";

      position: absolute;

      top: 10px;

      right: 2%;

      width: min(52vw, 720px);

      height: 440px;

      display: block;

      opacity: 0.34;

      pointer-events: none;

      background: url("../images/bg-2.webp") center right / contain no-repeat;

      filter: none;

      mix-blend-mode: normal;

      mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 82%, transparent 100%);

    }



    .profile-section .container {

      position: relative;

      z-index: 1;

    }



    .section-title {

      font-size: clamp(1.65rem, 2.7vw, 2.45rem);

      font-weight: 500;

      line-height: 1.12;

      letter-spacing: -0.035em;

      margin-bottom: 15px;

    }



    .lead-copy {

      color: #334155;

      font-size: 1rem;

      line-height: 1.85;

    }



    .content-panel,

    .cert-card,

    .portfolio-card {

      height: 100%;

      border: 1px solid rgba(8, 45, 18, 0.1);

      border-radius: 8px;

      background: #fff;

      box-shadow: var(--shadow);

    }



    .profile-shell {

      background: transparent;

      overflow: visible;

    }



    .profile-top {

      padding: 0 0 28px;

      align-items: start;

      background: transparent;

    }



    .profile-intro {

      max-width: 1040px;

      margin: 0 auto 8px;

    }



    .profile-intro .section-title {

      max-width: 720px;

      margin-bottom: 22px;

      font-size: clamp(1.9rem, 3.2vw, 3rem);

    }



    .profile-intro .section-title .accent-text {

      color: #d9a11d;

    }



    .profile-copy-grid {

      margin-bottom: 24px;

    }



    .profile-proof-grid {

      margin: 0 0 26px;

      padding: 0;

      list-style: none;

      width: 100%;

     

      border-radius: 0;

      background: transparent;

      overflow: visible;

    }



    .profile-proof-grid li {

      position: relative;

      min-height: 148px;

      display: grid;

      grid-template-columns: 76px 1fr;

      gap: 18px;

      align-items: center;

      padding: 24px 28px;

      border: 0;

      border-right: 1px solid rgba(8, 45, 18, 0.14);

      border-radius: 0;

      background: #fff;

      box-shadow: none;

      overflow: hidden;

    }



    .profile-proof-grid li:last-child {

      border-right: 0;

    }



    .profile-proof-grid li::after {

      display: none;

    }



    .proof-icon {

      grid-row: 1 / span 3;

      width: 76px;

      height: 76px;

      display: grid;

      place-items: center;

      margin: 0;

      border-radius: 50%;

      background: #fbf0d5;

      color: #d9a11d;

    }



    .proof-icon svg {

      width: 38px;

      height: 38px;

      stroke: currentColor;

      fill: none;

      stroke-width: 1.9;

    }



    .proof-icon svg .soft-fill {

      fill: currentColor;

      stroke: none;

      opacity: 0.16;

    }



    .profile-proof-grid strong {

      display: block;

      position: relative;

      z-index: 1;

      color: var(--brand-green);

      font-size: 1rem;

      font-weight: 800;

      line-height: 1.35;

    }



    .profile-proof-grid span.num {

      display: block;

      color: var(--brand-green);

      font-size: 1.45rem;

      font-weight: 800;

      line-height: 1;

      margin-bottom: 10px;

    }



    .profile-proof-grid li::before {

      content: "";

      position: absolute;

      left: 122px;

      bottom: 26px;

      width: 42px;

      height: 3px;

      border-radius: 999px;

      background: var(--accent);

    }



    .profile-side-card {

      position: relative;

      padding: 26px;

      border-radius: 14px;

      background:

        linear-gradient(145deg, #06270f, #0b471d),

        var(--brand-green);

      color: #fff;

      box-shadow: 0 18px 46px rgba(8, 45, 18, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.08);

      overflow: hidden;

    }



    .profile-side-card::before {

      content: "";

      position: absolute;

      right: 18px;

      bottom: 14px;

      width: 92px;

      height: 92px;

      opacity: 0.2;

      background: url("../images/services/infrastructure.webp") center/cover no-repeat;

      clip-path: circle(50%);

    }



    .profile-side-card::after {

      content: "";

      position: absolute;

      right: -40px;

      bottom: -40px;

      width: 140px;

      height: 140px;

      border-radius: 50%;

      border: 26px solid rgba(247, 199, 68, 0.12);

    }



    .profile-side-card strong {

      display: block;

      color: var(--accent);

      font-size: 3.35rem;

      line-height: 1;

      margin-bottom: 6px;

    }



    .profile-side-card small {

      display: block;

      color: #fff;

      font-size: 0.72rem;

      font-weight: 800;

      letter-spacing: 0.1em;

      text-transform: uppercase;

      margin-bottom: 14px;

    }



    .profile-side-card span {

      display: block;

      color: rgba(255, 255, 255, 0.82);

      line-height: 1.65;

    }



    .profile-bottom {

      position: relative;

      align-items: stretch;

      margin-top: 30px;

      padding: 0;

      overflow: visible;

    }



  

    .profile-mosaic {

      position: relative;

      z-index: 1;

    }



    .profile-mosaic img {

      width: 100%;

      height: 100%;

      min-height: 300px;

      object-fit: cover;

      border-radius: 16px;

      box-shadow: 0 20px 45px rgba(8, 45, 18, 0.13);

      transition: transform 0.45s ease;

    }



    .profile-media-card {

      position: relative;

      overflow: hidden;

      border-radius: 14px;

      margin: 0;

      background: #0a0a0a;

      box-shadow: 0 22px 52px rgba(8, 45, 18, 0.12);

    }



    .profile-media-card:hover img {

      transform: scale(1.04);

    }



    .profile-media-card::after {

      content: "";

      position: absolute;

      inset: 0;

      background:

        linear-gradient(180deg, rgba(8, 45, 18, 0.02) 0%, rgba(8, 45, 18, 0.1) 38%, rgba(8, 45, 18, 0.88) 100%);

    }



    .profile-media-card figcaption {

      position: absolute;

      left: 18px;

      right: 18px;

      bottom: 18px;

      z-index: 1;

      color: #fff;

      font-size: 0.9rem;

      font-weight: 700;

      line-height: 1.35;

      text-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);

    }



    .profile-media-card figcaption::before {

      content: "";

      display: block;

      width: 32px;

      height: 2px;

      margin-bottom: 8px;

      border-radius: 999px;

      background: var(--accent);

    }



    .profile-mosaic img:nth-child(2) {

      min-height: 232px;

      object-position: center;

    }



    .profile-cert-grid {

      position: relative;

      z-index: 1;

    }



    .cert-swiper {

      height: 100%;

      padding: 2px 44px 42px;

    }



    .cert-swiper .swiper-slide {

      height: auto;

    }



    .cert-swiper .swiper-pagination-bullet {

      width: 9px;

      height: 9px;

      background: rgba(8, 45, 18, 0.35);

      opacity: 1;

    }



    .cert-swiper .swiper-pagination-bullet-active {

      background: var(--accent);

    }



    .cert-swiper .swiper-button-prev,

    .cert-swiper .swiper-button-next {

      width: 38px;

      height: 38px;

      border-radius: 50%;

      color: var(--brand-green);

      background: #fff;

      box-shadow: 0 12px 28px rgba(8, 45, 18, 0.12);

    }



    .cert-swiper .swiper-button-prev::after,

    .cert-swiper .swiper-button-next::after {

      font-size: 0.9rem;

      font-weight: 800;

    }



    .cert-card {

      position: relative;

      display: block;

      padding: 28px 18px 24px;

      border-radius: 16px;

      background:

        linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);

      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

      text-align: center;

      box-shadow: 0 20px 48px rgba(8, 45, 18, 0.1);

      min-height: 300px;

      overflow: hidden;

      display: flex;

      flex-direction: column;

      justify-content: center;

    }



    .cert-card::before {

      content: "";

      position: absolute;

      inset: 0 0 auto;

      height: 4px;

      background: linear-gradient(90deg, transparent, rgba(247, 199, 68, 0.9), transparent);

    }



    .cert-card:hover {

      transform: translateY(-6px);

      border-color: rgba(247, 199, 68, 0.45);

      box-shadow: 0 26px 58px rgba(8, 45, 18, 0.14);

    }



    .cert-badge {

      width: 70px;

      height: 70px;

      display: grid;

      place-items: center;

      border-radius: 50%;

      color: var(--brand-green);

      background: radial-gradient(circle, #ffffff 0%, #f7faf8 100%);

      border: 2px solid rgba(8, 45, 18, 0.18);

      font-size: 0.9rem;

      font-weight: 800;

      margin: 0 auto 18px;

      box-shadow: inset 0 0 0 6px rgba(8, 45, 18, 0.035), 0 10px 24px rgba(8, 45, 18, 0.08);

    }



    .cert-badge svg {

      width: 34px;

      height: 34px;

      stroke: currentColor;

      fill: none;

      stroke-width: 2.15;

    }



    .cert-card h3::after {

      content: "";

      display: block;

      width: 34px;

      height: 2px;

      margin: 10px auto 0;

      border-radius: 999px;

      background: var(--accent);

    }



    .cert-card h3,

    .portfolio-card h3 {

      margin-bottom: 8px;

      color: var(--brand-green);

      font-size: 1.08rem;

      font-weight: 700;

    }



    .cert-card p,

    .portfolio-card p {

      margin: 0;

      color: var(--muted);

      font-size: 0.95rem;

      line-height: 1.6;

    }



    .check-list {

      display: grid;

      gap: 15px;

      margin: 26px 0 0;

      padding: 0;

      list-style: none;

    }



    .check-list li {

      position: relative;

      padding-left: 30px;

      color: #334155;

    }



    .check-list li::before {

      content: "";

      position: absolute;

      left: 0;

      top: 0.72em;

      width: 9px;

      height: 9px;

      border-radius: 50%;

      background: var(--accent);

      box-shadow: 0 0 0 4px rgba(247, 199, 68, 0.18);

    }



    .proof-section {

      background: var(--soft);

      border-top: 1px solid var(--line);

      border-bottom: 1px solid var(--line);

    }



    .portfolio-section {

      background: #fff;

    }



    .portfolio-card {

      display: flex;

      gap: 16px;

      padding: 24px;

      transition: transform 0.25s ease, box-shadow 0.25s ease;

    }



    .portfolio-card:hover {

      transform: translateY(-5px);

      box-shadow: 0 18px 44px rgba(8, 45, 18, 0.12);

    }



    .portfolio-card img {

      flex: 0 0 46px;

      width: 46px;

      height: 46px;

      object-fit: contain;

      border-radius: 50%;

    }



    .site-footer {

      background: #0a0a0a;

      color: rgba(255, 255, 255, 0.75);

      position: relative;

      overflow: hidden;

    }



    .site-footer::after {

      content: "";

      position: absolute;

      inset: 0;

      background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);

      background-size: 24px 24px;

      pointer-events: none;

    }



    .footer-inner {

      position: relative;

      z-index: 1;

    }



    .footer-top {

      display: grid;

      grid-template-columns: 1.5fr 1fr 1fr 1.2fr;

      gap: 48px;

      align-items: start;

      padding: 80px 0 60px;

      border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    }



    .footer-logo {

      height: 52px;

      width: auto;

      margin-bottom: 24px;

    }



    .footer-tagline {

      max-width: 28ch;

      color: rgba(255, 255, 255, 0.45);

      font-size: 0.93rem;

      line-height: 1.6;

    }



    .footer-col-title {

      margin-bottom: 24px;

      color: #fff;

      font-size: 0.86rem;

      font-weight: 500;

      letter-spacing: 0.12em;

      text-transform: uppercase;

    }



    .footer-links {

      list-style: none;

      padding: 0;

      margin: 0;

      display: flex;

      flex-direction: column;

      gap: 12px;

    }



    .footer-links a {

      display: inline-block;

      color: rgba(255, 255, 255, 0.55);

      font-size: 0.92rem;

      transition: color 0.3s, transform 0.3s;

    }



    .footer-links a:hover {

      color: var(--accent);

      transform: translateX(4px);

    }



    .footer-contact-list {

      display: flex;

      flex-direction: column;

      gap: 20px;

    }



    .footer-contact-item {

      display: flex;

      gap: 14px;

      align-items: flex-start;

      color: rgba(255, 255, 255, 0.55);

      font-size: 0.9rem;

      line-height: 1.5;

    }



    .footer-contact-item svg {

      width: 18px;

      height: 18px;

      fill: var(--accent);

      color: var(--accent);

      flex-shrink: 0;

      margin-top: 2px;

    }



    .footer-contact-item strong {

      display: block;

      color: #fff;

      font-weight: 400;

      margin-bottom: 2px;

    }



    .footer-bottom {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 24px;

      padding: 22px 0;

      flex-wrap: wrap;

    }



    .footer-copy {

      color: rgba(255, 255, 255, 0.3);

      font-size: 0.78rem;

      letter-spacing: 0.01em;

    }



    @media (max-width: 992px) {

      .footer-top {

        grid-template-columns: repeat(2, 1fr);

        gap: 40px;

      }

    }



    @media (max-width: 600px) {

      .footer-top {

        grid-template-columns: 1fr;

        gap: 32px;

        padding: 60px 0 40px;

      }



      .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

      }

    }



    @media (max-width: 768px) {

      .page-banner {

        min-height: 360px;

        background-attachment: scroll;

      }



      .page-banner .container {

        padding-top: 105px;

        padding-bottom: 44px;

      }



      .page-banner-content {

        padding-top: 20px;

      }



      .profile-section::before {

        display: none;

      }



      .content-panel {

        padding: 26px;

      }



      .profile-top,

      .profile-copy-grid,

      .profile-bottom,

      .profile-mosaic,

      .profile-proof-grid,

      .profile-cert-grid {

        grid-template-columns: 1fr;

      }

    }





/* ===== navigation.css ===== */

:root {

  --white: #ffffff;

  

  --accent: #f5b81f;

  --gray-100: #f3f5f4;

  --gray-200: #e5e9e7;

  --gray-400: #94a3b8;

  --gray-500: #64748b;

  --gray-600: #475569;

  --gray-800: #1f2937;

  --gray-900: #111827;

  --transition: all 0.3s ease;

}



    .site-header {

      position: fixed;

      top: 0;

      left: 0;

      right: 0;

      z-index: 1000;

      background: transparent;

      transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;

    }



    .site-header.scrolled {

      background: rgba(10, 10, 10, 0.98);

      box-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);

    }



    .nav-wrap {

      display: flex;

      align-items: center;

      justify-content: flex-start;

      height: 88px;

      transition: height 0.3s;

    }



    .site-header.scrolled .nav-wrap {

      height: 72px;

    }



    .brand {

      display: flex;

      align-items: center;

      gap: 14px;

      z-index: 10;

    }



    .brand img {

      height: 70px;

      width: auto;

      transition: height 0.3s;

    }



    .site-header.scrolled .brand img {

      height: 60px;

    }



    .nav-links {

      display: flex;

      align-items: center;

      justify-content: flex-end;

      gap: 6px;

      margin-left: auto;

      margin-right: 14px;

    }



    .nav-links a {

      padding: 10px 18px;

      font-size: 0.86rem;

      font-weight: 500;

      color: rgba(255, 255, 255, 0.92);

      border-radius: 8px;

      transition: var(--transition);

      letter-spacing: 0.04em;

      text-transform: uppercase;

      font-family: 'Inter', sans-serif;

    }



    .nav-links a:hover {

      color: #fff;

      background: rgba(255, 255, 255, 0.1);

    }



    .nav-cta {

      margin-left: 6px;

      padding: 10px 18px !important;

      background: transparent !important;

      color: #fff !important;

      border: none;

      border-radius: 8px !important;

      font-weight: 500 !important;

      transition: background 0.3s !important;

      text-transform: uppercase;

      letter-spacing: 0.04em;

      font-size: 0.82rem !important;

    }



    .nav-cta:hover {

      background: rgba(255, 255, 255, 0.14) !important;

    }



    /* Hamburger / Menu toggle - always visible */

    .hamburger {

      display: flex;

      flex-direction: column;

      gap: 6px;

      cursor: pointer;

      z-index: 10;

      background: none;

      border: none;

      padding: 8px;

    }



    .hamburger span {

      display: block;

      width: 28px;

      height: 2px;

      background: #fff;

      border-radius: 2px;

      transition: 0.3s;

    }



    .hamburger.active span:nth-child(1) {

      transform: rotate(45deg) translate(6px, 6px);

    }



    .hamburger.active span:nth-child(2) {

      opacity: 0;

    }



    .hamburger.active span:nth-child(3) {

      transform: rotate(-45deg) translate(6px, -6px);

    }



    /* ========== HERO ========== */





    /* ========== MEGA MENU OVERLAY ========== */

    .mega-menu {

      position: fixed;

      inset: 0;

      z-index: 2000;

      background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);

      opacity: 0;

      visibility: hidden;

      transition: opacity 0.4s ease, visibility 0.4s;

      overflow-y: auto;

    }



    .mega-menu.open {

      opacity: 1;

      visibility: visible;

    }



    /* Mega menu top bar */

    .mega-top {

      position: sticky;

      top: 0;

      z-index: 10;

      background: var(--white);

      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      backdrop-filter: blur(10px);

    }



    .mega-top-inner {

      display: flex;

      align-items: center;

      justify-content: space-between;

      height: 70px;

    }



    .mega-top .brand img {

      height: 50px;

    }



    .mega-top-actions {

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .mega-top-nav {

      display: flex;

      align-items: center;

      gap: 2px;

    }



    .mega-top-nav a {

      padding: 8px 16px;

      font-size: 0.78rem;

      font-weight: 400;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      color: var(--gray-600);

      border-radius: 6px;

      transition: 0.3s;

    }



    .mega-top-nav a:hover,

    .mega-top-nav a.active {

      color: var(--navy);

      background: rgba(247, 199, 68, 0.1);

    }



    .mega-search-btn,

    .mega-close-btn {

      width: 44px;

      height: 44px;

      border-radius: 50%;

      border: none;

      cursor: pointer;

      display: grid;

      place-items: center;

      transition: 0.3s;

    }



    .mega-search-btn {

      background: transparent;

      color: var(--gray-600);

    }



    .mega-search-btn:hover {

      background: var(--gray-100);

    }



    .mega-search-btn svg {

      width: 20px;

      height: 20px;

      stroke: currentColor;

      fill: none;

      stroke-width: 2;

    }



    .mega-close-btn {

      background: var(--navy);

      color: #fff;

      margin-left: 4px;

    }



    .mega-close-btn:hover {

      background: var(--accent);

      transform: scale(1.05);

    }



    .mega-close-btn svg {

      width: 20px;

      height: 20px;

      stroke: currentColor;

      fill: none;

      stroke-width: 2.5;

    }



    /* Mega menu body */

    .mega-body {

      padding: 40px 0 60px;

    }



    .mega-body-inner {

      display: grid;

      grid-template-columns: 340px 1fr;

      gap: 80px;

    }



    /* Mega Left - Navigation */

    .mega-left-label {

      font-size: 0.68rem;

      font-weight: 400;

      letter-spacing: 0.16em;

      text-transform: uppercase;

      color: var(--gray-400);

      margin-bottom: 20px;

      padding-bottom: 12px;

      border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);

    }



    .mega-nav-list {

      display: flex;

      flex-direction: column;

    }



    .mega-nav-item {

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 14px 14px;

      margin-bottom: 4px;

      border-radius: 8px;

      cursor: pointer;

      transition: 0.3s;

      position: relative;

    }



    .mega-nav-item:hover {

      background: rgba(15, 23, 42, 0.05);

    }



    .mega-nav-item a {

      font-size: 0.95rem;

      font-weight: 400;

      color: var(--gray-800);

      transition: color 0.3s;

      line-height: 1.3;

      letter-spacing: -0.01em;

    }



    .mega-nav-item:hover a {

      color: var(--navy);

    }



    .mega-nav-chevron {

      width: 28px;

      height: 28px;

      border-radius: 50%;

      display: grid;

      place-items: center;

      background: transparent;

      transition: 0.3s;

      flex-shrink: 0;

    }



    .mega-nav-item:hover .mega-nav-chevron {

      background: rgba(247, 199, 68, 0.15);

    }



    .mega-nav-chevron svg {

      width: 14px;

      height: 14px;

      stroke: var(--gray-400);

      fill: none;

      stroke-width: 2.5;

      transition: 0.3s;

    }



    .mega-nav-item:hover .mega-nav-chevron svg {

      stroke: var(--accent);

    }



    /* Mega submenu items */

    .mega-nav-submenu {

      display: none;

      flex-direction: column;

      padding-left: 16px;

      gap: 2px;

    }



    .mega-nav-submenu.open {

      display: flex;

    }



    .mega-nav-subitem {

      padding: 10px 12px;

      border-radius: 6px;

      font-size: 0.85rem;

      color: var(--gray-600);

      transition: 0.2s;

      cursor: pointer;

    }



    .mega-nav-subitem:hover {

      background: rgba(247, 199, 68, 0.1);

      color: var(--accent);

    }



    /* Mega Right - Featured Content */

    .mega-right-label {

      font-size: 0.68rem;

      font-weight: 400;

      letter-spacing: 0.16em;

      text-transform: uppercase;

      color: var(--gray-400);

      margin-bottom: 20px;

      padding-bottom: 12px;

      border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);

      display: flex;

      justify-content: space-between;

      align-items: center;

    }



    .mega-right-label a {

      color: var(--navy);

      font-size: 0.72rem;

      font-weight: 400;

      letter-spacing: 0.12em;

      display: flex;

      align-items: center;

      gap: 6px;

      transition: 0.3s;

    }



    .mega-right-label a:hover {

      gap: 10px;

    }



    .mega-right-label a svg {

      width: 13px;

      height: 13px;

      stroke: var(--navy);

      fill: none;

      stroke-width: 2.5;

    }



    .mega-featured {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 24px;

    }



    .mega-featured-card {

      cursor: pointer;

      transition: 0.3s;

      background: #fff;

      border-radius: 14px;

      overflow: hidden;

      border: 1px solid rgba(0, 0, 0, 0.06);

    }



    .mega-featured-card:hover {

      transform: translateY(-6px);

      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);

    }



    .mega-featured-img {

      border-radius: 0;

      overflow: hidden;

      height: 160px;

      margin-bottom: 0;

    }



    .mega-featured-img img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 0.6s ease;

    }



    .mega-featured-card:hover .mega-featured-img img {

      transform: scale(1.08);

    }



    .mega-featured-tag {

      font-size: 0.65rem;

      font-weight: 400;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      color: var(--accent);

      margin-bottom: 6px;

      padding: 12px 16px 0;

    }



    .mega-featured-card h3 {

      font-size: 1rem;

      font-weight: 400;

      color: var(--gray-900);

      line-height: 1.3;

      margin-bottom: 6px;

      padding: 0 16px;

      transition: color 0.3s;

    }



    .mega-featured-card:hover h3 {

      color: var(--navy);

    }



    .mega-featured-card p {

      font-size: 0.8rem;

      color: var(--gray-500);

      line-height: 1.5;

      padding: 0 16px 16px;

    }



    /* Search overlay inside mega menu */

    .mega-search-panel {

      display: none;

      padding: 40px 0;

    }



    .mega-search-panel.active {

      display: block;

    }



    .mega-search-input-wrap {

      position: relative;

      max-width: 720px;

      margin: 0 auto;

    }



    .mega-search-input-wrap input {

      width: 100%;

      padding: 20px 24px 20px 56px;

      font-size: 1.2rem;

      font-family: inherit;

      border: 2px solid var(--gray-200);

      border-radius: 12px;

      outline: none;

      transition: border-color 0.3s;

      color: var(--gray-900);

    }



    .mega-search-input-wrap input:focus {

      border-color: var(--accent);

    }



    .mega-search-input-wrap input::placeholder {

      color: var(--gray-400);

    }



    .mega-search-icon {

      position: absolute;

      left: 20px;

      top: 50%;

      transform: translateY(-50%);

    }



    .mega-search-icon svg {

      width: 22px;

      height: 22px;

      stroke: var(--gray-400);

      fill: none;

      stroke-width: 2;

    }



    @media (max-width: 1100px) {

      .mega-body-inner {

        grid-template-columns: 300px 1fr;

        gap: 40px;

      }



      .mega-featured {

        grid-template-columns: repeat(2, 1fr);

      }



      .mega-featured-card:last-child {

        display: none;

      }

    }



    @media (max-width: 768px) {

      .mega-top-nav {

        display: none;

      }



      .mega-body-inner {

        grid-template-columns: 1fr;

        gap: 40px;

      }



      .mega-featured {

        grid-template-columns: 1fr 1fr;

      }



      .mega-featured-card:last-child {

        display: none;

      }



      .mega-nav-item a {

        font-size: 1.3rem;

      }

    }



    @media (max-width: 480px) {

      .mega-featured {

        grid-template-columns: 1fr;

      }



      .mega-featured-card:last-child {

        display: block;

      }

    }



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





/* ===== index.css ===== */

/* ========== RESET & VARIABLES ========== */

    :root {

      --navy: #082d12;

      /* Deep Renewable Green */

      --navy-light: #0c4d1d;

      --blue: #082d12;

      --blue-light: #0c4d1d;

      --accent: #f7c744;

      --accent-dark: #d19e29;

      --brand-red: #C41E24;

      --brand-green: #1B8B3D;

      --brand-navy: #082d12;

      /* Switched to Green */

      --white: #ffffff;

      --gray-50: #f8fafc;

      --gray-100: #f1f5f9;

      --gray-200: #e2e8f0;

      --gray-300: #cbd5e1;

      --gray-400: #94a3b8;

      --gray-500: #64748b;

      --gray-600: #475569;

      --gray-700: #334155;

      --gray-800: #1e293b;

      --gray-900: #1a1a1a;

      --shadow-sm: 0 2px 6px rgba(17, 75, 36, 0.04);

      --shadow: 0 8px 24px rgba(17, 75, 36, 0.06);

      --shadow-lg: 0 20px 48px rgba(17, 75, 36, 0.08);

      --shadow-xl: 0 30px 60px rgba(17, 75, 36, 0.12);

      --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

      --container: 1320px;

    }



    *,

    *::before,

    *::after {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }



    html {

      scroll-behavior: smooth;

      -webkit-font-smoothing: antialiased;

    }



    body {

      font-family: 'Inter', sans-serif;

      color: var(--gray-900);

      background: var(--white);

      font-size: 16px;

      font-weight: 400;

      line-height: 1.7;

      min-height: 100vh;

      overflow-x: hidden;

    }



    img {

      max-width: 100%;

      display: block;

      filter: contrast(1.02) saturate(1.03);

    }



    a {

      color: inherit;

      text-decoration: none;

    }



    ul {

      list-style: none;

    }



    h1,

    h2,

    h3,

    h4 {

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

      margin: 0;

      color: #000;

      -webkit-font-smoothing: antialiased;

    }



    h1 {

      font-size: 58px;

      font-weight: 400;

      line-height: 1.05;

      letter-spacing: -0.04em;

    }



    h2 {

      font-size: 40px;

      font-weight: 400;

      line-height: 1.1;

      letter-spacing: -0.03em;

    }



    h3 {

      font-size: 25px;

      font-weight: 400;

      line-height: 1.3;

      letter-spacing: -0.02em;

    }



    h4 {

      font-size: 20px;

      font-weight: 400;

      line-height: 1.4;

      letter-spacing: -0.015em;

    }



    p,

    li,

    small,

    .text-small {

      font-size: 16px;

      font-weight: 400;

      line-height: 1.75;

      color: var(--gray-700);

    }



    button,

    .btn,

    input,

    select,

    textarea {

      font-family: 'Inter', sans-serif;

      font-size: 15px;

      font-weight: 400;

      line-height: 1.6;

    }



    @media (max-width: 768px) {

      h1 {

        font-size: 42px;

      }



      h2 {

        font-size: 32px;

      }



      h3 {

        font-size: 22px;

      }

    }



    .container {

      width: min(calc(100% - 48px), var(--container));

      margin: 0 auto;

    }



    /* ========== ANIMATIONS ========== */

    @keyframes fadeUp {

      from {

        opacity: 0;

        transform: translateY(40px);

      }



      to {

        opacity: 1;

        transform: translateY(0);

      }

    }



    @keyframes fadeIn {

      from {

        opacity: 0;

      }



      to {

        opacity: 1;

      }

    }



    @keyframes slideRight {

      from {

        opacity: 0;

        transform: translateX(-40px);

      }



      to {

        opacity: 1;

        transform: translateX(0);

      }

    }



    @keyframes scaleIn {

      from {

        opacity: 0;

        transform: scale(0.92);

      }



      to {

        opacity: 1;

        transform: scale(1);

      }

    }



    @keyframes countUp {

      from {

        opacity: 0;

        transform: translateY(20px);

      }



      to {

        opacity: 1;

        transform: translateY(0);

      }

    }



    @keyframes marquee {

      0% {

        transform: translateX(0);

      }



      100% {

        transform: translateX(-50%);

      }

    }



    @keyframes heroZoom {

      0% {

        transform: scale(1);

      }



      100% {

        transform: scale(1.08);

      }

    }



    @keyframes stackEnter {

      0% {

        opacity: 0;

        transform: translateY(120%) perspective(1000px) rotateX(100deg) scale(0.75);

      }



      50% {

        opacity: 0.6;

        transform: translateY(60%) perspective(1000px) rotateX(50deg) scale(0.88);

      }



      100% {

        opacity: 1;

        transform: translateY(0) perspective(1000px) rotateX(0deg) scale(1);

      }

    }



    @keyframes stackExit {

      0% {

        opacity: 1;

        transform: translateY(0) rotateX(0deg) scale(1);

      }



      50% {

        opacity: 0.6;

      }



      100% {

        opacity: 0;

        transform: translateY(-100%) rotateX(-90deg) scale(0.85);

      }

    }



    @keyframes cardStackLayer1 {

      0% {

        transform: translateY(24px) rotate(-4deg) scale(0.92);

        opacity: 0;

      }



      40% {

        opacity: 0.4;

      }



      100% {

        transform: translateY(12px) rotate(-2deg) scale(1);

        opacity: 1;

      }

    }



    @keyframes cardStackLayer2 {

      0% {

        transform: translateY(48px) rotate(3deg) scale(0.88);

        opacity: 0;

      }



      40% {

        opacity: 0.3;

      }



      100% {

        transform: translateY(24px) rotate(1deg) scale(1);

        opacity: 1;

      }

    }



    .reveal {

      opacity: 0;

      transform: translateY(36px);

      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);

    }



    .reveal.visible {

      opacity: 1;

      transform: translateY(0);

    }



    /* Slide from left */

    .reveal-left {

      opacity: 0;

      transform: translateX(-40px);

      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);

    }



    .reveal-left.visible {

      opacity: 1;

      transform: translateX(0);

    }



    /* Slide from right */

    .reveal-right {

      opacity: 0;

      transform: translateX(40px);

      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);

    }



    .reveal-right.visible {

      opacity: 1;

      transform: translateX(0);

    }



    /* Scale up */

    .reveal-scale {

      opacity: 0;

      transform: scale(0.94);

      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);

    }



    .reveal-scale.visible {

      opacity: 1;

      transform: scale(1);

    }



    /* Stagger delays for children */

    .reveal-stagger>*:nth-child(1) {

      transition-delay: 0s;

    }



    .reveal-stagger>*:nth-child(2) {

      transition-delay: 0.08s;

    }



    .reveal-stagger>*:nth-child(3) {

      transition-delay: 0.16s;

    }



    .reveal-stagger>*:nth-child(4) {

      transition-delay: 0.24s;

    }



    .reveal-stagger>*:nth-child(5) {

      transition-delay: 0.32s;

    }



    .reveal-stagger>*:nth-child(6) {

      transition-delay: 0.40s;

    }



    /* Delay modifiers */

    .reveal-d1 {

      transition-delay: 0.1s !important;

    }



    .reveal-d2 {

      transition-delay: 0.2s !important;

    }



    .reveal-d3 {

      transition-delay: 0.3s !important;

    }



    /* ========== HEADER / NAV ========== */

    .site-header {

      position: fixed;

      top: 0;

      left: 0;

      right: 0;

      z-index: 1000;

      background: transparent;

      transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;

    }



    .site-header.scrolled {

      background: rgba(10, 10, 10, 0.98);

      box-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);

    }



    .nav-wrap {

      display: flex;

      align-items: center;

      justify-content: flex-start;

      height: 88px;

      transition: height 0.3s;

    }



    .site-header.scrolled .nav-wrap {

      height: 72px;

    }



    .brand {

      display: flex;

      align-items: center;

      gap: 14px;

      z-index: 10;

    }



    .brand img {

      height: 70px;

      width: auto;

      transition: height 0.3s;

    }



    .site-header.scrolled .brand img {

      height: 60px;

    }



    .nav-links {

      display: flex;

      align-items: center;

      justify-content: flex-end;

      gap: 6px;

      margin-left: auto;

      margin-right: 14px;

    }



    .nav-links a {

      padding: 10px 18px;

      font-size: 0.86rem;

      font-weight: 500;

      color: rgba(255, 255, 255, 0.92);

      border-radius: 8px;

      transition: var(--transition);

      letter-spacing: 0.04em;

      text-transform: uppercase;

      font-family: 'Inter', sans-serif;

    }



    .nav-links a:hover {

      color: #fff;

      background: rgba(255, 255, 255, 0.1);

    }

    @media (max-width:1200px) {

      .nav-links a{

        font-size: 0.7rem;

      }

      .nav-cta{

        font-size: 0.7rem !important;

      }

      

    }



    .nav-cta {

      margin-left: 6px;

      padding: 10px 18px !important;

      background: transparent !important;

      color: #fff !important;

      border: none;

      border-radius: 8px !important;

      font-weight: 500 !important;

      transition: background 0.3s !important;

      text-transform: uppercase;

      letter-spacing: 0.04em;

      font-size: 0.86rem;

    }



    .nav-cta:hover {

      background: rgba(255, 255, 255, 0.14) !important;

    }

    @media (max-width: 992px) {

      .navbar-expand-lg .navbar-nav {

        display: none !important;

      }

    }



    /* ===== HAMBURGER: hidden on desktop, shown on tablet/mobile ===== */

    .hamburger {

    

      flex-direction: column;

      gap: 6px;

      cursor: pointer;

      z-index: 10;

      background: none;

      border: none;

      padding: 8px;

    }



    @media (max-width: 990px) {

      .hamburger {

        display: flex; /* show hamburger on tablet/mobile */

      }

      .hamburger-menu {

        margin-left: auto !important;

      }

      /* Hide desktop nav-links on index at tablet too */

      .nav-links {

        display: none;

      }

    }



    /* Tablet: shrink index header height */

    @media (max-width: 990px) {

      .nav-wrap {

        height: 72px;

      }

      .brand img {

        height: 60px;

      }

    }



    /* Small mobile: shrink index header further */

    @media (max-width: 480px) {

      .nav-wrap {

        height: 64px;

      }

      .brand img {

        height: 50px;

      }

    }



    .hamburger span {

      display: block;

      width: 28px;

      height: 2px;

      background: #fff;

      border-radius: 2px;

      transition: 0.3s;

    }



    .hamburger.active span:nth-child(1) {

      transform: rotate(45deg) translate(6px, 6px);

    }



    .hamburger.active span:nth-child(2) {

      opacity: 0;

    }



    .hamburger.active span:nth-child(3) {

      transform: rotate(-45deg) translate(6px, -6px);

    }



    /* ========== HERO ========== */

    .hero {

      position: relative;

      height: 100vh;

      min-height: 700px;

      display: flex;

      align-items: center;

      overflow: hidden;

      /* background: var(--navy); */

    }



    /* Hero video background */

    .hero-video-wrap {

      position: absolute;

      inset: 0;

      z-index: 0;

      overflow: hidden;

    }



    .hero-video {

      width: 100%;

      height: 100%;

      object-fit: cover;

      display: block;

    }



    .hero-video-poster {

      position: absolute;

      inset: 0;

      z-index: 1;

      /* background: var(--navy); */

      transition: opacity 0.8s ease;

    }



    .hero-video-poster img {

      width: 100%;

      height: 100%;

      object-fit: cover;

    }



    .hero-video-poster.hidden {

      opacity: 0;

      pointer-events: none;

    }



    .hero-overlay {

      position: absolute;

      inset: 0;

      background: linear-gradient(180deg,

          rgba(15, 23, 42, 0.68) 0%,

          rgba(15, 23, 42, 0.42) 22%,

          rgba(15, 23, 42, 0.14) 42%,

          rgba(15, 23, 42, 0) 60%),

        linear-gradient(90deg,

          rgba(15, 23, 42, 0.62) 0%,

          rgba(15, 23, 42, 0.40) 35%,

          rgba(15, 23, 42, 0.08) 60%,

          transparent 100%);

      z-index: 2;

    }



    



    /* Fallback: image slider for when video can't load */

    .hero-slider {

      position: absolute;

      inset: 0;

      z-index: 0;

      display: none;

    }



    .hero-slider.active {

      display: block;

    }



    .hero-slide {

      position: absolute;

      inset: 0;

      opacity: 0;

      transition: opacity 1.2s ease;

    }



    .hero-slide.active {

      opacity: 1;

    }



    .hero-slide img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      animation: heroZoom 12s ease forwards;

    }



    .hero-content {

      position: relative;

      z-index: 3;

      margin: 70px 0 40px;

      max-width: 660px;

      width: min(100%, 660px);

      margin-left: 5vw;

      margin-right: auto;

      animation: fadeUp 1s ease 0.3s both;

      text-align: left;

    }



    .hero-label {

      display: inline-flex;

      align-items: center;

      gap: 12px;

      padding: 10px 18px;

      background: rgba(6, 13, 26, 0.55);

      border: 1px solid rgba(255, 255, 255, 0.26);

      border-radius: 999px;

      color: rgba(255, 255, 255, 0.95);

      font-size: 0.88rem;

      font-weight: 400;

      letter-spacing: 0.22em;

      text-transform: uppercase;

      margin-bottom: 26px;

      box-shadow: 0 10px 28px rgba(6, 13, 26, 0.2);

    }



    .hero-label::before {

      content: "";

      width: 32px;

      height: 1px;

      background: linear-gradient(90deg, var(--accent), #ffd266);

    }



    .hero h1 {

      font-size: clamp(2rem, 3.5vw, 3.5rem);

      font-weight: 400;

      line-height: 1.05;

      color: #fff;

      letter-spacing: -0.018em;

      margin-bottom: 22px;

      text-shadow: 0 8px 28px rgba(6, 13, 26, 0.34);

      text-wrap: balance;

    }



    .hero h1 span {

      display: inline;

      background: linear-gradient(135deg, var(--accent), #f0c040);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

      background-clip: text;

    }



    .hero-desc {

      font-size: clamp(1.12rem, 1.7vw, 1.48rem);

      line-height: 1.72;

      color: rgba(255, 255, 255, 0.92);

      letter-spacing: 0.04em;

      max-width: 520px;

      margin-bottom: 48px;

      text-shadow: 0 6px 22px rgba(6, 13, 26, 0.32);

    }



    .hero-card-slider {

      position: absolute;

      top: 50%;

      right: 5vw;

      transform: translateY(-50%);

      z-index: 4;

      width: min(280px, 28vw);

      background: #ffffff;

      border-radius: 20px;

      box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2),

        0 2px 8px rgba(0, 0, 0, 0.06);

      padding: 16px;

      overflow: visible;

      border: none;

      transition: transform 0.3s ease;

    }



    .hero-card-slider::before {

      content: '';

      position: absolute;

      inset: 0;

      pointer-events: none;

      border-radius: 20px;

      background: #ffffff;

      top: 12px;

      left: 8px;

      right: -8px;

      bottom: -12px;

      z-index: -1;

      box-shadow: 0 8px 28px rgba(31, 38, 135, 0.12);

      transform: rotate(-2deg);

      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),

        box-shadow 0.3s ease;

      animation: cardStackLayer1 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.1s;

    }



    .hero-card-slider::after {

      content: '';

      position: absolute;

      inset: 0;

      pointer-events: none;

      border-radius: 20px;

      background: #fafafa;

      top: 24px;

      left: 16px;

      right: -16px;

      bottom: -24px;

      z-index: -2;

      box-shadow: 0 4px 16px rgba(31, 38, 135, 0.08);

      transform: rotate(1deg);

      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),

        box-shadow 0.3s ease;

      animation: cardStackLayer2 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.2s;

    }



    .hero-card-slider:hover {

      transform: translateY(calc(-50% - 8px));

      box-shadow: 0 16px 48px rgba(31, 38, 135, 0.25),

        0 4px 12px rgba(0, 0, 0, 0.08);

    }



    .hero-card-slider:hover::before {

      transform: rotate(-3deg) translateY(-4px);

      box-shadow: 0 10px 32px rgba(31, 38, 135, 0.15);

    }



    .hero-card-slider:hover::after {

      transform: rotate(2deg) translateY(-8px);

      box-shadow: 0 6px 20px rgba(31, 38, 135, 0.12);

    }



    .hero-card-header {

      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-bottom: 12px;

    }



    .hero-card-header span {

      font-size: 0.65rem;

      font-weight: 400;

      letter-spacing: 0.14em;

      text-transform: uppercase;

      color: #475569;

    }



    .hero-card-controls {

      display: flex;

      gap: 6px;

    }



    .hero-card-btn {

      width: 28px;

      height: 28px;

      border: 1px solid #e2e8f0;

      background: #f1f5f9;

      border-radius: 50%;

      color: #334155;

      display: grid;

      place-items: center;

      cursor: pointer;

      transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;

      font-size: 0.7rem;

    }



    .hero-card-btn:hover {

      background: rgba(247, 199, 68, 0.15);

      border-color: #f7c744;

      color: #d19e29;

      transform: scale(1.08);

    }



    .hero-card-slide {

      display: none;

      gap: 8px;

      flex-direction: column;

    }



    .hero-card-slide.active {

      display: flex;

      animation: stackEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

    }



    .hero-card-image {

      width: 100%;

      border-radius: 14px;

      overflow: hidden;

      border: none;

      margin-bottom: 6px;

    }



    .hero-card-image img {

      width: 100%;

      height: 100px;

      object-fit: cover;

      display: block;

    }



    .hero-card-tag {

      display: inline-block;

      font-size: 0.62rem;

      font-weight: 400;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      color: var(--accent);

      margin-bottom: 4px;

    }



    .hero-card-slide h4 {

      margin: 0;

      font-size: 0.85rem;

      font-weight: 500;

      color: #1e293b;

      line-height: 1.15;

      letter-spacing: -0.01em;

    }



    .hero-card-slide p {

      margin: 0;

      color: #64748b;

      font-size: 0.75rem;

      line-height: 1.4;

    }



    .hero-card-link {

      display: inline-flex;

      align-items: center;

      gap: 6px;

      font-size: 0.78rem;

      font-weight: 400;

      color: var(--accent);

      text-decoration: none;

      margin-top: 6px;

      transition: gap 0.2s ease, color 0.2s ease;

    }



    .hero-card-link:hover {

      color: #f0c040;

      gap: 10px;

    }



    /* .hero-card-link::after {

      display: inline-block;

      transition: transform 0.2s ease;

    } */



    .hero-card-link:hover::after {

      transform: translateX(2px);

    }



    .hero-card-dots {

      display: flex;

      gap: 5px;

      justify-content: center;

      margin-top: 14px;

    }



    .hero-card-dot {

      width: 6px;

      height: 6px;

      border-radius: 50%;

      background: rgba(255, 255, 255, 0.25);

      border: none;

      cursor: pointer;

      transition: background 0.3s ease, transform 0.3s ease;

    }



    .hero-card-dot:hover {

      background: rgba(255, 255, 255, 0.45);

    }



    .hero-card-dot.active {

      background: var(--accent);

      transform: scale(1.2);

    }



    .hero-actions {

      display: flex;

      gap: 16px;

      flex-wrap: wrap;

    }



    @media (max-width: 992px) {

      .hero {

        min-height: 680px;

      }



      .hero-card-slider {

        display: none;

      }



      .hero-content {

        max-width: 100%;

        width: 100%;

        padding-top: 60px;

      }



    }



    .btn {

      display: inline-flex;

      align-items: center;

      gap: 10px;

      padding: 15px 32px;

      font-size: 0.95rem;

      font-weight: 400;

      border-radius: 6px;

      border: none;

      cursor: pointer;

      transition: var(--transition);

      letter-spacing: 0.01em;

    }



    .btn-primary {

      background: var(--accent);

      color: var(--navy);

      box-shadow: 0 4px 20px rgba(247, 199, 68, 0.25);

    }



    .btn-primary:hover {

      background: var(--accent-dark);

      transform: translateY(-2px);

      box-shadow: 0 8px 30px rgba(209, 158, 41, 0.35);

    }



    .btn-outline {

      background: transparent;

      color: #fff;

      border: 1.5px solid rgba(255, 255, 255, 0.3);

    }



    .btn-outline:hover {

      border-color: #fff;

      background: rgba(255, 255, 255, 0.08);

    }



    .btn svg {

      width: 18px;

      height: 18px;

      fill: currentColor;

    }



    /* Hero slider dots */

    .hero-dots {

      position: absolute;

      bottom: 40px;

      left: 50%;

      transform: translateX(-50%);

      z-index: 3;

      display: flex;

      gap: 10px;

    }



    .hero-dot {

      width: 40px;

      height: 3px;

      background: rgba(255, 255, 255, 0.3);

      border-radius: 3px;

      cursor: pointer;

      transition: 0.4s;

      border: none;

    }



    .hero-dot.active {

      background: #fff;

      width: 60px;

    }



    /* ========== STATS BAR ========== */



.stats-bar {

  position: relative;

  z-index: 5;

  margin-top: -60px;

  margin-bottom: 20px;

}



.stats-inner {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  

  /* Semi-transparent frosted glass with a subtle warm yellow tint */

  background: rgba(27, 139, 61); 

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

  

  /* Soft pill-shaped design mirroring your original layout */

  border-radius: 30px; 

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.6);

  border: 1px solid rgba(254, 240, 138, 0.4);

  overflow: hidden;

}



.stat-item {

  padding: 30px 20px;

  text-align: center;

  border-right: 1px solid rgba(0, 0, 0, 0.06);

  transition: background 0.3s, transform 0.2s;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.stat-item:last-child {

  border-right: none;

}



/* Elegant, soft hover effect */

.stat-item:hover {

  background: rgba(255, 255, 255, 0.3);

  transform: translateY(-2px);

}



/* Layout for font-awesome icon placed next to the text content */

.stat-content-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-bottom: 6px;

}



/* Font Awesome Red Icon Styling */

.stat-item .fa-icon {

  font-size: 1.6rem;

  color: #FFF100; /* Corporate red tint */

  opacity: 0.85;

}



.stat-number {

  font-size: 2.5rem;

  font-weight: 600;

  color: white; /* Uniform red tint across numbers */

  letter-spacing: -0.03em;

  line-height: 1;

  white-space: nowrap;

}



/* Forces font-awesome numerical counters and symbols into the red tint */

.stat-number span {

  color: white !important; 

}



.stat-label {

  font-size: 0.85rem;

  color: #334155; /* High contrast slate gray for optimized text readability */

  font-weight: 600;

  letter-spacing: 0.01em;

  line-height: 1.3;

  max-width: none;

  white-space: nowrap;

  margin-top: 4px;

}



/* Responsive optimization matching image breakpoints */

@media (max-width: 992px) {

  .stats-inner {

    grid-template-columns: repeat(2, 1fr);

    border-radius: 20px;

  }

  .stat-item {

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    padding: 24px 15px;

  }

  .stat-item:nth-child(2n) {

    border-right: none;

  }

  .stat-item:nth-last-child(-n+1) {

    border-bottom: none;

  }

}



@media (max-width: 600px) {

  .stats-inner {

    grid-template-columns: 1fr;

  }

  .stat-item {

    border-right: none !important;

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  }

  .stat-item:last-child {

    border-bottom: none;

  }

  .stat-content-wrapper {

    flex-direction: column;

    gap: 6px;

  }

}

    /* ========== SECTIONS ========== */

    .section {

      padding: 80px 0;

    }



    .section-header {

      max-width: 720px;

      margin-bottom: 32px;

    }



    .section-header.center {

      text-align: center;

      margin-left: auto;

      margin-right: auto;

    }



    .section-eyebrow {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      font-size: 0.72rem;

      font-weight: 500;

      letter-spacing: 0.18em;

      text-transform: uppercase;

      color: var(--brand-green);

      margin-bottom: 12px;

    }



    .section-eyebrow::before {

      content: '';

      width: 32px;

      height: 2px;

      background: var(--blue);

      border-radius: 2px;

    }



    .section-title {

      font-size: clamp(1.5rem, 3vw, 2.5rem);

      font-weight: 400;

      line-height: 1.1;

      letter-spacing: -0.035em;

      color: #1a1a1a;

      margin-bottom: 15px;

    }



    .section-desc {

      font-size: 0.9rem;

      color: var(--gray-500);

      line-height: 1.7;

    }



    /* ========== ABOUT ========== */

    .about-grid {

      display: grid;

      grid-template-columns: 1fr 1.22fr;

      gap: 48px;

      align-items: center;

    }



    .about-image-wrapper {

      position: relative;

      height: auto;

    }



    .about-image {

      position: relative;

      border-radius: 24px;

      overflow: hidden;

      box-shadow: none;

      width: 100%;

      height: 480px;

    }



    .about-image img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    }



    .about-image:hover img {

      transform: scale(1.05);

    }



    .team-merged-container {

      position: relative;

      width: 100%;

      height: 400px;

      display: flex;

      gap: 20px;

      align-items: center;

      justify-content: center;

      overflow: hidden;

    }



    .team-member-card {

      position: relative;

      width: 30%;

      height: 100%;

      border-radius: 24px;

      overflow: hidden;

      box-shadow: var(--shadow-lg);

      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),

        box-shadow 0.5s ease;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .team-member-card img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    }



    .team-member-card:nth-child(1) {

      /*transform: scaleY(1.05);*/

      order: 2;

      width: 35%;

      z-index: 2;

    }



    .team-member-card:nth-child(2) {

      transform: scaleY(1);

      order: 1;

    }



    .team-member-card:nth-child(3) {

      transform: scaleY(1);

      order: 3;

    }



    /* ========== ABOUT BUTTON ========== */

    .about-actions {

      margin-top: 32px;

    }

    .about-btn {

      display: inline-flex;

      align-items: center;

      gap: 12px;

      padding: 14px 28px;

      background: var(--accent);

      color: var(--navy);

      font-size: 15px;

      font-weight: 500;

      border-radius: 4px;

      transition: all 0.3s ease;

      box-shadow: 0 4px 15px rgba(247, 199, 68, 0.3);

    }

    .about-btn svg {

      width: 18px;

      height: 18px;

      fill: none;

      stroke: currentColor;

      stroke-width: 2;

      transition: transform 0.3s ease;

    }

    .about-btn:hover {

      background: var(--accent-dark);

      transform: translateY(-2px);

      box-shadow: 0 8px 25px rgba(209, 158, 41, 0.4);

    }

    .about-btn:hover svg {

      transform: translateX(4px);

    }



    .about-content .section-header {

      margin-bottom: 20px;

    }



    .about-content .section-title {

      font-size: clamp(1.5rem, 3vw, 2.5rem);

      line-height: 1.15;

      font-weight: 400;

      margin-bottom: 16px;

    }



    .about-text {

      color: var(--gray-700);

      font-size: 0.9rem;

      line-height: 1.65;

    }



    .about-section {

      padding: 60px 0;

      background: var(--white);

    }



    /* ========== DISCIPLINE GRAPH ========== */

    .discipline-section {

      --discipline-yellow: #f7c744;

      --discipline-gold: #c79d28;

      --discipline-green: #7b9a84;

      --discipline-green-deep: #5e7a61;

      --discipline-green-soft: #dfe8c9;

      --discipline-red: #c94a4a;

      position: relative;

      padding: 40px 0 0;

      background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 62%, #ffffff 100%);

      overflow: hidden;

      isolation: isolate;

    }



    .discipline-section::before,

    .discipline-section::after {

      content: '';

      position: absolute;

      pointer-events: none;

    }



    .discipline-section::before {

      left: -12%;

      right: -12%;

      bottom: -120px;

      height: 260px;

      border-radius: 50%;

      background: linear-gradient(180deg, rgba(247, 199, 68, 0), rgba(123, 154, 132, 0.24));

      opacity: 0.15;

    }



    .discipline-section::after {

      right: -8%;

      top: 18%;

      width: 42vw;

      height: 42vw;

      min-width: 320px;

      min-height: 320px;

      border-radius: 50%;

      background: radial-gradient(circle, rgba(247, 199, 68, 0.18) 0%, rgba(247, 199, 68, 0) 72%);

    }



    .discipline-section .container {

      position: relative;

      z-index: 2;

    }



    .discipline-industry-bg {

      position: absolute;

      inset: 0;

      z-index: 1;

      pointer-events: none;

      overflow: hidden;

    }



    .industry-accent {

      position: absolute;

      --accent-rgb: 123, 154, 132;

      opacity: 0.72;

    }



    .accent-line {

      height: 2px;

      border-radius: 999px;

      background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0));

      animation: disciplineAccentSlide 12s ease-in-out infinite;

    }



    .accent-dot {

      width: 10px;

      height: 10px;

      border-radius: 50%;

      background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(var(--accent-rgb), 0.42) 58%, rgba(var(--accent-rgb), 0) 100%);

      box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0.05);

      animation: disciplineAccentPulse 9s ease-in-out infinite;

    }



    .accent-ring {

      width: 16px;

      height: 16px;

      border-radius: 50%;

      border: 1px solid rgba(var(--accent-rgb), 0.22);

      background: rgba(255, 255, 255, 0.42);

      box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.04);

      animation: disciplineAccentPulse 11s ease-in-out infinite;

    }



    .accent-a {

      --accent-rgb: 247, 199, 68;

      top: 23%;

      left: 8%;

      width: 92px;

      animation-delay: -1.6s;

    }



    .accent-b {

      --accent-rgb: 123, 154, 132;

      top: 29%;

      left: 12%;

      animation-delay: -2.4s;

    }



    .accent-c {

      --accent-rgb: 94, 122, 97;

      top: 64%;

      left: 9%;

      width: 74px;

      animation-delay: -0.8s;

    }



    .accent-d {

      --accent-rgb: 247, 199, 68;

      top: 18%;

      right: 11%;

      animation-delay: -3.1s;

    }



    .accent-e {

      --accent-rgb: 123, 154, 132;

      top: 26%;

      right: 7%;

      width: 84px;

      animation-delay: -1.9s;

    }



    .accent-f {

      --accent-rgb: 201, 74, 74;

      top: 62%;

      right: 10%;

      animation-delay: -2.7s;

    }



    .accent-g {

      --accent-rgb: 247, 199, 68;

      bottom: 18%;

      left: 22%;

      animation-delay: -4.2s;

    }



    .accent-h {

      --accent-rgb: 123, 154, 132;

      bottom: 15%;

      right: 24%;

      width: 68px;

      animation-delay: -1.3s;

    }



    .discipline-intro {

      max-width: 780px;

      margin-bottom: 18px;

    }



    .discipline-intro .section-title {

      font-size: clamp(1.5rem, 3vw, 2.5rem);

      font-weight: 400;

      line-height: 1.08;

      letter-spacing: -0.04em;

      margin-bottom: 8px;

    }



    .discipline-intro .section-desc {

      max-width: 720px;

      margin: 0 auto;

      font-size: clamp(0.9rem, 1.25vw, 1.25rem);

      color: #334155;

      line-height: 1.55;

    }



    .discipline-layout {

      display: grid;

      position: relative;

      grid-template-columns: 1fr 1fr;

      grid-template-rows: 1fr 1fr 1fr;

      gap: 0;

      align-items: center;

      justify-items: center;

      max-width: 1200px;

      margin: 0 auto;

      min-height: 650px;

      background: none;

    }



    .discipline-point {

      --point-accent: var(--discipline-yellow);

      --point-glow: rgba(247, 199, 68, 0.18);

      --point-anchor-y: 0px;

      position: absolute;

      z-index: 2;

      width:min(100%, 380px);

    max-width:380px;



      padding: 15px 24px 15px;

      border-radius: 32px;

      background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 239, 0.92));

      border: 1px solid rgba(255, 255, 255, 0.6);

      box-shadow: var(--shadow-lg);

      overflow: hidden;

      opacity: 0;

      transform: translateY(calc(var(--point-anchor-y) + 30px)) scale(0.98);

      transition: transform 0.55s ease, opacity 0.55s ease, box-shadow 0.4s ease, border-color 0.4s ease;

    }



    .discipline-point::before {

      content: '';

      position: absolute;

      top: -38px;

      right: -12px;

      width: 140px;

      height: 140px;

      border-radius: 50%;

      background: radial-gradient(circle, var(--point-glow) 0%, transparent 72%);

      opacity: 0.9;

      pointer-events: none;

    }



    .discipline-point::after {

      content: '';

      position: absolute;

      left: 28px;

      top: 18px;

      width: 72px;

      height: 3px;

      border-radius: 999px;

      background: linear-gradient(90deg, var(--point-accent), rgba(255, 255, 255, 0));

    }



    .discipline-kicker {

      display: inline-flex;

      align-items: center;

      margin-bottom: 10px;

      font-size: 0.6rem;

      font-weight: 500;

      letter-spacing: 0.16em;

      text-transform: uppercase;

      color: var(--brand-green);

    }



    .discipline-point h3 {

      margin: 0 0 10px;

      font-size: clamp(1rem, 1.45vw, 1.45rem);

      font-weight: 500;

      line-height: 1.14;

      letter-spacing: -0.035em;

      color: var(--gray-900);

      overflow-wrap:break-word;

    }



    .discipline-point p {

      margin: 0;

      font-size: 0.8rem;

      line-height: 1.4;

      color: var(--gray-600);

      max-width: 330px;

      overflow-wrap:break-word;

    }



    .discipline-layout.visible .discipline-point {

      opacity: 1;

      transform: translateY(var(--point-anchor-y)) scale(1);

    }



    .discipline-layout.visible .point-oil {

      transition-delay: 0.08s;

    }



    .discipline-layout.visible .point-civil {

      transition-delay: 0.18s;

    }



    .discipline-layout.visible .point-electric {

      transition-delay: 0.28s;

    }



    .discipline-layout.visible .point-mech {

      transition-delay: 0.38s;

    }

    .discipline-layout.visible .point-renew {

      transition-delay: 0.48s;

    }



    .discipline-point:hover {

      transform: translateY(calc(var(--point-anchor-y) - 8px)) scale(1);

      box-shadow: 0 34px 75px rgba(123, 154, 132, 0.2);

      border-color: rgba(199, 157, 40, 0.48);

    }



    .point-oil,

    .point-electric {

      right: calc(50% + 280px);

    }



    .point-civil,

    .point-mech, .point-transport, .point-renew {

      left: calc(50% + 280px);

    }



    .point-oil {

      --point-accent: var(--discipline-gold);

      --point-glow: rgba(247, 199, 68, 0.2);

      --point-anchor-y: -50%;

      top: 18%;

    }



    .point-electric {

      --point-accent: var(--discipline-green-deep);

      --point-glow: rgba(123, 154, 132, 0.2);

      --point-anchor-y: -50%;

      top: 55%;

    }



    .point-renew {

      --point-accent: var(--discipline-gold);

      --point-glow: rgba(201, 74, 74, 0.2);

      --point-anchor-y: -50%;

      top: 64%;

    }

.point-mech {

      --point-accent: #c94a4a;

      --point-glow: rgba(201, 74, 74, 0.2);

      --point-anchor-y: -50%;

      top: 38%;

    }

    .point-civil {

      --point-accent: #6d8f54;

      --point-glow: rgba(123, 154, 132, 0.2);

      --point-anchor-y: -50%;

      top: 12%;

    }



    .discipline-orbit {

      grid-column: 1 / -1;

      grid-row: 1 / -1;

      position: absolute;

      top: 35%;

      left: 50%;

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

      z-index: 1;

      width: clamp(300px, 40vw, 500px);

      aspect-ratio: 1;

    }



    .discipline-orbit::before {

      content: '';

      position: absolute;

      inset: 17%;

      border-radius: 50%;

      background:

        radial-gradient(circle at 60% 72%, rgba(201, 74, 74, 0.14) 0%, rgba(201, 74, 74, 0) 18%),

        radial-gradient(circle, rgba(247, 199, 68, 0.28) 0%, rgba(242, 249, 229, 0.9) 45%, rgba(255, 255, 255, 0) 74%);

      z-index: 0;

      animation: disciplineHalo 7.2s ease-in-out infinite;

    }



    .discipline-orbit::after {

      content: '';

      position: absolute;

      inset: 11%;

      border-radius: 50%;

      border: 2px solid rgba(160, 177, 109, 0.34);

      z-index: 1;

      animation: disciplineHalo 11s ease-in-out infinite reverse;

    }



    .discipline-track {

      position: absolute;

      inset: 13%;

      border-radius: 50%;

      padding: 18px;

      background: conic-gradient(from -120deg,

          #f7c744 0 23%,

          #ecd77d 23% 38%,

          #8faa71 38% 64%,

          #c7d9a1 64% 83%,

          #d1a73b 83% 88%,

          rgba(201, 74, 74, 0.9) 88% 92%,

          #f0c54f 92% 100%);

      box-shadow: 0 30px 90px rgba(123, 154, 132, 0.2);

      z-index: 2;

      animation: disciplineSpin 26s linear infinite;

    }



    .discipline-track::before {

      content: '';

      position: absolute;

      inset: -10px;

      border-radius: 50%;

      border: 1px dashed rgba(177, 171, 106, 0.34);

      animation: disciplineSpinReverse 34s linear infinite;

    }



    .discipline-track::after {

      content: '';

      position: absolute;

      inset: 18px;

      border-radius: 50%;

      background:

        radial-gradient(circle at 61% 76%, rgba(201, 74, 74, 0.1) 0%, rgba(201, 74, 74, 0) 18%),

        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.98), rgba(249, 251, 243, 0.94) 68%, rgba(247, 249, 241, 0.88) 100%);

      box-shadow: inset 0 0 0 1px rgba(181, 180, 132, 0.12);

    }



    .discipline-hub {

      position: absolute;

      inset: 35%;

      z-index: 4;

      isolation: isolate;

      border-radius: 50%;

      background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 243, 0.94));

      border: 1.5px solid rgba(166, 165, 114, 0.42);

      box-shadow: 0 18px 55px rgba(123, 154, 132, 0.2), inset 0 0 0 12px rgba(255, 255, 255, 0.68);

      display: grid;

      place-items: center;

      text-align: center;

      padding: 18px 18px 18px 18px;

    }



    .discipline-hub::after {

      content: '';

      position: absolute;

      inset: -18px;

      border-radius: 50%;

      border: 1px solid rgba(190, 181, 108, 0.44);

      z-index: -1;

      animation: disciplinePulse 4.2s ease-out infinite;

    }



    .discipline-hub strong {

      display: block;

      font-size: clamp(2rem, 3.2vw, 2.7rem);

      font-weight: 400;

      line-height: 1;

      letter-spacing: -0.04em;

      color: var(--gray-900);

    }



    .discipline-hub span {

      display: block;

      margin-top: 10px;

      font-size: clamp(1.05rem, 1.55vw, 1.55rem);

      font-weight: 400;

      line-height: 1.25;

      color: #1a1a1a;

    }



    .discipline-hub img{

    width:100%;

    max-width:120px;

    height:auto;

    object-fit:contain;

}

@media (max-width:1260px){

  

    .discipline-hub img{

        max-width:90px;

    }

}



    .discipline-node {

      --node-transform: translate(0, 0);

      --node-delay: 0s;

      position: absolute;

      width: 82px;

      height: 82px;

      border-radius: 50%;

      display: grid;

      place-items: center;

      background: rgba(255, 255, 255, 0.74);

      border: 3px solid rgba(255, 255, 255, 0.82);

      box-shadow: 0 16px 34px rgba(123, 154, 132, 0.18), inset 0 0 0 1px rgba(187, 177, 126, 0.18);

      z-index: 5;

      opacity: 0;

      transform: var(--node-transform) scale(0.7);

      transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;

    }



    .discipline-node::before {

      content: '';

      position: absolute;

      inset: 8px;

      border-radius: 50%;

      background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 247, 251, 0.86));

      z-index: 0;

    }



    .discipline-node svg,
    .discipline-node img {
      position: relative;
      z-index: 1;
      width: 58px;
      height: 58px;
    }

    .discipline-node svg {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.15;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .discipline-node img {
      object-fit: contain;
      filter: drop-shadow(0 1px 1px rgba(12, 58, 37, 0.12));
    }



    .discipline-layout.visible .discipline-node {

      opacity: 1;

      transform: var(--node-transform) scale(1);

      animation: disciplineNodeFloat 6s ease-in-out infinite;

      transition-delay: var(--node-delay);

      animation-delay: calc(0.85s + var(--node-delay));

    }



    .node-oil {
      --node-delay: 0s;
      --node-transform: translate(-50%, -50%);
      top: 16%;

      left: 29%;
      color: #174f35;
    }

    .node-civil {
      --node-delay: 0.35s;
      --node-transform: translate(-50%, -50%);
      top: 16%;

      left: 71%;
      color: #174f35;
    }

    .node-electric {
      --node-delay: 0.7s;
      --node-transform: translate(-50%, -50%);
      top: 50%;

      left: 8%;
      color: #174f35;
    }

    .node-mech {
      --node-delay: 1.05s;
      --node-transform: translate(-50%, -50%);
      top: 50%;

      left: 92%;
      color: #174f35;
    }

    .node-transport {
      --node-delay: 1.4s;
      --node-transform: translate(-50%, -50%);
      top: 84%;

      left: 29%;
      color: #174f35;
    }

    .node-renew {
      --node-delay: 1.75s;
      --node-transform: translate(-50%, -50%);
      top: 84%;

      left: 71%;
      color: #174f35;
    }
    @keyframes disciplineSpin {

      from {

        transform: rotate(0deg);

      }



      to {

        transform: rotate(360deg);

      }

    }



    @keyframes disciplineSpinReverse {

      from {

        transform: rotate(360deg);

      }



      to {

        transform: rotate(0deg);

      }

    }



    @keyframes disciplineHalo {



      0%,

      100% {

        opacity: 0.62;

        transform: scale(0.98);

      }



      50% {

        opacity: 0.9;

        transform: scale(1.02);

      }

    }



    @keyframes disciplinePulse {

      0% {

        opacity: 0.7;

        transform: scale(0.92);

      }



      70% {

        opacity: 0;

        transform: scale(1.16);

      }



      100% {

        opacity: 0;

        transform: scale(1.16);

      }

    }



    @keyframes disciplineNodeFloat {



      0%,

      100% {

        transform: var(--node-transform) translateY(0) scale(1);

      }



      50% {

        transform: var(--node-transform) translateY(-8px) scale(1.03);

      }

    }



    @keyframes disciplineAccentPulse {



      0%,

      100% {

        transform: translate3d(0, 0, 0) scale(1);

        opacity: 0.52;

      }



      50% {

        transform: translate3d(0, -4px, 0) scale(1.06);

        opacity: 0.8;

      }

    }



    @keyframes disciplineAccentSlide {



      0%,

      100% {

        transform: translate3d(0, 0, 0) scaleX(1);

        opacity: 0.38;

      }



      50% {

        transform: translate3d(8px, -3px, 0) scaleX(1.08);

        opacity: 0.62;

      }

    }



    @media (max-width: 1400px){



    .discipline-layout{

        min-height:700px;

    }



    .point-oil,

    .point-electric{

        right: calc(50% + 220px);

    }



    .point-civil,

    .point-mech,

    .point-renew{

        left: calc(50% + 220px);

    }



    .discipline-orbit{

        width:420px;

    }



    .discipline-node{

        width:90px;

        height:90px;

    }



    .discipline-node svg{

        width:60px;

        height:60px;

    }

}



    @media (max-width: 1260px) {

      .discipline-layout{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        grid-template-rows:none;

        gap:24px;

        max-width:1000px;

        min-height:auto;

        margin-bottom: 50px;

    }



      .discipline-orbit{

        position:relative;

        grid-column:1/-1;

        grid-row:1;

        width:min(100%,450px);

        margin:0 auto 20px;

        top:auto;

        left:auto;

        transform:none;

    }



      .point-oil,

    .point-electric,

    .point-civil,

    .point-mech,

    .point-renew{

        position:relative;

        top:auto;

        left:auto;

        right:auto;

        width:100%;

        max-width:none;

        transform:none !important;

    }



      .point-oil{

        grid-column:1;

        grid-row:2;

    }



    .point-electric{

        grid-column:2;

        grid-row:2;

    }



    .point-civil{

        grid-column:1;

        grid-row:3;

    }



    .point-mech{

        grid-column:2;

        grid-row:3;

    }



    .point-renew{

        grid-column:1 / -1;

        grid-row:4;

        max-width:700px;

        justify-self:center;

    }



      .discipline-point p {

        max-width: none;

      }

    }



    @media (max-width: 900px) {

      .discipline-section {

        padding: 56px 0 78px;

      }



      .discipline-intro {

        margin-bottom: 38px;

      }



      .discipline-point p {

        max-width: none;

      }

    }



    @media (max-width: 767px) {

      .discipline-section {

        padding: 50px 0 68px;

      }



      .discipline-section::before {

        left: -30%;

        right: -30%;

        bottom: -90px;

        height: 180px;

      }



      .discipline-intro {

        margin-bottom: 28px;

      }



      .accent-c,

      .accent-f,

      .accent-g,

      .accent-h {

        display: none;

      }



      .accent-a {

        left: 5%;

        width: 72px;

      }



      .accent-e {

        right: 4%;

        width: 66px;

      }



      .discipline-layout {

        grid-template-columns:64px minmax(0,1fr);

        grid-template-rows: repeat(6, auto);

        gap:20px 14px;

        max-width: 560px;

        min-height: auto;

        align-items: stretch;

      }



      .discipline-orbit {

        grid-column: 1;

        grid-row: 1 / span 6;

        align-self: stretch;

        justify-self: center;

        width: 76px;

        min-height: 100%;

        aspect-ratio: auto;

        display: grid;

        grid-template-rows: repeat(6, minmax(78px, 1fr));

        align-items: center;

        justify-items: center;

      }



      .discipline-orbit::before,

      .discipline-orbit::after {

        content: none;

      }



      .point-oil,

      .point-civil,

      .point-electric,

      .point-mech,

      .point-transport,

      .point-renew {

        --point-anchor-y: 0px;

        grid-column: 2;

        position: relative;

        top: auto;

        right: auto;

        left: auto;

        max-width: none;

        padding: 20px 18px 18px;

        min-height: auto;

        display: flex;

        flex-direction: column;

        justify-content: center;

        justify-self: stretch;

        width: 100%;

      }



      .point-oil {

        grid-row: 1;

      }

      .point-electric{

        grid-row: 2;

      }



      .point-civil {

        grid-row: 3;

      }



      .point-mech {

        grid-row: 4;

      }



      .point-transport {
        grid-row: 5;
      }

      .point-renew {
        grid-row: 6;
      }



      .discipline-point::after {

        left: 18px;

        width: 52px;

      }



      .discipline-kicker {

        margin-bottom: 10px;

      }



      .discipline-point h3 {

        font-size: clamp(1.4rem, 8vw, 1.85rem);

      }



      .discipline-track {

        inset: 14px auto 14px 50%;

        width: 4px;

        padding: 0;

        border-radius: 999px;

        transform: translateX(-50%);

        background: linear-gradient(180deg, var(--discipline-yellow) 0%, var(--discipline-green) 100%);

        box-shadow: none;

        animation: none;

      }



      .discipline-track::before,

      .discipline-track::after {

        content: none;

      }



      .discipline-hub {

        display: none;

      }



      .discipline-node {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        left: auto;

        width: 56px;

        height: 56px;

        transform: none;

        opacity: 1;

        box-shadow: 0 14px 28px rgba(123, 154, 132, 0.16), inset 0 0 0 1px rgba(187, 177, 126, 0.2);

      }



      .discipline-node svg,

      .discipline-node img {

        width: 38px;

        height: 38px;

      }



      .discipline-layout.visible .discipline-node {

        transform: none;

        transition-delay: 0s;

        animation: none;

      }



      .node-oil {

        grid-row: 1;

      }



      .node-electric {

        grid-row: 2;

      }



      .node-civil {

        grid-row: 3;

      }



      .node-mech {

        grid-row: 4;

      }



      .node-transport {
        grid-row: 5;
      }

      .node-renew {
        grid-row: 6;
      }

    }



    @media (max-width:480px){



    .discipline-layout{

        grid-template-columns:56px 1fr;

    }



    .discipline-node{

        width:52px;

        height:52px;

    }



    .discipline-node svg{

        width:26px;

        height:26px;

    }



    .discipline-point{

        padding:16px;

        border-radius:20px;

    }



    .discipline-point h3{

        font-size:1.1rem;

    }



    .discipline-point p{

        font-size:.8rem;

    }

}



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



      .discipline-orbit::before,

      .discipline-orbit::after,

      .discipline-track,

      .discipline-track::before,

      .discipline-hub::after,

      .discipline-layout.visible .discipline-node,

      .industry-accent {

        animation: none !important;

      }



      .discipline-point,

      .discipline-node {

        transition: none;

      }

    }

    /* fleet section banner */

    .fleet-banner {

  position: relative;

  height: 550px; /* Set your preferred desktop banner height here */

  overflow: hidden; /* Clips the 130% image so it doesn't leak out */

  width: 100%;

  margin-top: 0px;

}

    .fleet-banner-contents{

      

      display: flex;

      flex-direction: column;

      margin: 70px auto 40px 7vw;

      align-items: start;

      text-align: left;

      /* padding: 10px 100px 0 80px; */

      box-sizing: border-box;



    }

    .fleet-banner-contents .section-title{

      max-width: none;

      margin-bottom: 24px;

      font-size: clamp(1.5rem, 3vw, 2.5rem);

      font-weight: 400;

      line-height: 0.93;

      letter-spacing: -0.04em;

      color: #ffffff;

      text-wrap: balance;

      text-shadow: 0 10px 32px rgba(15, 23, 42, 0.4);

    }

    .fleet-banner-contents .section-title span{

      color: var(--accent);

    }



    .fleet-banner-contents .section-desc{

      color: white;

    font-size: clamp(0.8rem, 1.4vw, 1rem);

    line-height: 1.52;

    letter-spacing: 0.04em;

    max-width: 520px;

    /* margin: 20px 0 48px 0; */

    text-shadow: 1px 1px 1px rgba(43, 43, 43, 0.32);

    }

    .fleet-banner .section-eyebrow::before {

    background:rgba(255, 255, 255, 0.9) ;}

    .fleet-banner .section-eyebrow{

          color:var(--accent) ;

    margin-bottom: 14px;

    letter-spacing: 0.15em;

    text-shadow: 1px 1px 1px rgba(43, 43, 43, 0.32);

    

    }

    .fleet-banner-slider {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 130%; /* Extra height gives room for the image to scroll vertically */

  z-index: 1;

  will-change: transform; /* Optimizes browser rendering performance */

}



.fleet-banner-image {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  opacity: 0;

  transition: opacity 1.5s ease-in-out;

  z-index: 1;

}



.fleet-banner-image.active {

  opacity: 1;

  z-index: 2;

}



.fleet-banner-overlays {



  background:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.82) 0%,

            rgba(0, 0, 0, 0.72) 25%,

            rgba(0, 0, 0, 0.45) 55%,

            rgba(0, 0, 0, 0.12) 100%

        ),

        linear-gradient(

            180deg,

            rgba(0, 0, 0, 0.10) 0%,

            rgba(0, 0, 0, 0.25) 100%

        );





  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  position: absolute; /* Changed to absolute to lock perfectly over the container */

  top: 0;

  left: 0;

  z-index: 3; /* Content stays securely on top of the transitioning images */

}





/* --- RESPONSIVE DESIGN --- */

@media (max-width: 992px) {

  .fleet-banner {

    height: 380px;

  }

  .fleet-banner-slider {

    height: 100%;

    transform: none !important;

  }

  .fleet-banner-image {

    height: 100%; /* Resets height on mobile to save device processing power */

  }

  .fleet-banner-contents h2 {

    font-size: 20px;

  }

}

  



    .projects-section {

      position: relative;

      background: #ffffff;

      color: var(--gray-900);

      overflow: hidden;

      

    }



    .projects-section::before {

      content: '';

      position: absolute;

      inset: auto -12% 10% auto;

      width: 420px;

      height: 420px;

      border-radius: 50%;

      background: radial-gradient(circle, rgba(247, 199, 68, 0.14) 0%, rgba(247, 199, 68, 0) 70%);

      pointer-events: none;

    }



    .projects-section .container {

      position: relative;

      z-index: 1;

    }



    .projects-section .section-title {

      color: var(--gray-900);

    }



    .projects-section .section-eyebrow {

      color: var(--brand-green);

    }



    /* .projects-section .section-eyebrow::before {

      background: var(--accent);

    } */



    .projects-section .section-desc {

      color: var(--gray-600);

    }



    .projects-layout {

      display: grid;

      grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);

      align-items: center;

      gap: 56px;

    }



    .projects-copy {

      display: flex;

      flex-direction: column;

      gap: 28px;

    }



    .projects-copy .section-header {

      margin-bottom: 0;

    }



    .projects-copy .section-desc {

      max-width: 32rem;

    }



    .projects-copy-meta {

      display: flex;

      flex-direction: column;

      gap: 18px;

    }



    .projects-copy-actions {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 18px;

      flex-wrap: wrap;

    }



    .projects-slider-controls {

      display: flex;

      align-items: center;

      gap: 12px;

      flex-shrink: 0;

    }



    .projects-nav {

      width: 54px;

      height: 54px;

      border: 1px solid rgba(199, 157, 40, 0.24);

      border-radius: 50%;

      background: rgba(255, 255, 255, 0.9);

      box-shadow: 0 14px 34px rgba(123, 154, 132, 0.12);

      color: var(--gray-900);

      display: grid;

      place-items: center;

      cursor: pointer;

      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;

    }



    .projects-nav svg {

      width: 18px;

      height: 18px;

      fill: none;

      stroke: currentColor;

      stroke-width: 2.2;

      stroke-linecap: round;

      stroke-linejoin: round;

    }



    .projects-nav:hover:not(:disabled) {

      transform: translateY(-2px);

      background: linear-gradient(135deg, rgba(247, 199, 68, 0.18), rgba(255, 255, 255, 0.98));

      box-shadow: 0 18px 38px rgba(123, 154, 132, 0.16);

      color: var(--discipline-gold, #c79d28);

    }



    .projects-nav:disabled {

      opacity: 0.38;

      cursor: default;

      box-shadow: none;

    }



    .projects-slider {

      --projects-per-view: 2;

      --projects-gap: 24px;

      min-width: 0;

    }



    .projects-viewport {

      overflow: hidden;

      padding: 8px 0;

    }



    .projects-track {

      display: grid;

      grid-auto-flow: column;

      grid-auto-columns: calc((100% - (var(--projects-gap) * (var(--projects-per-view) - 1))) / var(--projects-per-view));

      gap: var(--projects-gap);

      transition: transform 1.45s cubic-bezier(0.33, 0, 0.2, 1);

      will-change: transform;

    }



    .project-slide {

      min-width: 0;

    }



    .project-card {

      position: relative;

      border-radius: 24px;

      overflow: hidden;

     /* height: 400px;*/
        height:fit-content;
      cursor: pointer;

      border: 1px solid rgba(194, 184, 118, 0.24);

      box-shadow: var(--shadow-lg);

      background: #fff;

    }



    .project-card img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 0.8s ease;

    }



    .project-card:hover img {

      transform: scale(1.06);

    }



    .project-card-overlay {

      position: absolute;

      inset: 0;

      z-index: 1;

      background: linear-gradient(to top, rgba(17, 75, 36, 0.78) 0%, rgba(17, 75, 36, 0.34) 38%, rgba(17, 75, 36, 0.04) 74%);

      transition: 0.4s;

    }



    .project-card:hover .project-card-overlay {

      background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.40) 40%, rgba(15, 23, 42, 0.08) 74%);

    }



    .project-card-info {

      position: absolute;

      bottom: 0;

      left: 0;

      right: 0;

      z-index: 2;

      padding: 28px;

    }



    .project-card-tags {

      display: inline-block;

      padding: 4px 12px;

      /* background: rgba(247, 199, 68, 0.95); */

      /* border: 1px solid rgba(209, 158, 41, 0.9); */

      border-radius: 4px;

      font-size: 0.9rem;

      font-weight: 700;

      letter-spacing: 0.08em;

      text-transform: uppercase;

      color: var(--accent);

      margin-bottom: 10px;

      margin-bottom: 10px;

    }



    .project-card h3 {

      font-size: 1.15rem;

      font-weight: 400;

      line-height: 1.3;

      color: #fff;

      text-shadow: 0 6px 18px rgba(17, 75, 36, 0.35);

    }



    .project-card p {

      font-size: 0.85rem;

      color: rgba(255, 255, 255, 0.9);

      margin-top: 6px;

      line-height: 1.5;

      text-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);

    }



    .projects-slider-status {

      display: inline-flex;

      align-items: baseline;

      gap: 8px;

      font-size: 0.85rem;

      font-weight: 400;

      letter-spacing: 0.14em;

      text-transform: uppercase;

      color: var(--gray-500);

    }



    .projects-slider-status strong {

      font-size: 1.2rem;

      letter-spacing: 0.04em;

      color: var(--gray-900);

    }



    .project-dots {

      display: flex;

      align-items: center;

      gap: 10px;

    }



    .project-dot {

      width: 10px;

      height: 10px;

      border: 0;

      border-radius: 999px;

      background: rgba(148, 163, 184, 0.32);

      padding: 0;

      cursor: pointer;

      transition: width 0.25s ease, background 0.25s ease, transform 0.25s ease;

    }



    .project-dot.active {

      width: 34px;

      background: linear-gradient(90deg, #f7c744, #7b9a84);

    }



    .project-dot:hover {

      transform: scale(1.08);

    }



    /* ========== CLIENTS ========== */

    .clients-section {

      padding: 50px 0;

      background: #fff;

      

      border-bottom: 1px solid var(--gray-200);

      overflow: hidden;

    }



    .clients-header {

      text-align: center;

      margin-bottom: 40px;

    }



    .clients-header .section-eyebrow {

      justify-content: center;

    }



    .clients-header p {

      font-size: 0.9rem;

      color: var(--gray-500);

    }



    .clients-grid {

      display: grid;

      grid-template-columns: repeat(5, minmax(0, 1fr));

      column-gap: 18px;

      row-gap: 6px;

      width: 100%;

    }



    .client-logo {

      width: 100%;

      height: 100px;

      display: grid;

      place-items: center;

      background: transparent;

      border: none;

      border-radius: 0;

      padding: 5px 8px;

      transition: transform 0.25s ease;

    }



    .client-logo:hover {

      transform: none;

    }



    .client-logo img {

      max-height: 88px;

      max-width: 245px;

      width: auto;

      height: auto;

      object-fit: contain;

      filter: none;

      opacity: 1;

      transition: transform 0.25s ease;

    }



    .client-logo:hover img {

      transform: scale(1.03);

    }



    @media (max-width: 1200px) {

      .clients-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr));

      }

    }



    @media (max-width: 768px) {

      .clients-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

      }



      .client-logo {

        height: 90px;

        padding: 8px 10px;

      }



      .client-logo img {

        max-height: 62px;

        max-width: 156px;

      }

    }



    /* ========== HSE / SAFETY ========== */

    .hse-section {

      position: relative;

      padding: 36px 0 80px;

      overflow: hidden;

      background: transparent;

    }



    .hse-bleed {

      width: min(calc(100vw - 48px), 1640px);

      margin: 0 auto;

    }



    .hse-showcase {

      position: relative;

      min-height: 620px;

      border-radius: 34px;

      overflow: hidden;

      display: grid;

      grid-template-columns: minmax(360px, 41%) minmax(0, 1fr);

      background: #0b2f1b;

      box-shadow: 0 32px 90px rgba(15, 23, 42, 0.18);

    }



    /* ---- HSE scroll-in animations ---- */

    @keyframes hseCardReveal {

      0%   { opacity: 0; transform: scale(0.96) translateY(30px); }

      100% { opacity: 1; transform: scale(1) translateY(0); }

    }

    @keyframes hseLineUp {

      0%   { opacity: 0; transform: translateY(28px); }

      100% { opacity: 1; transform: translateY(0); }

    }

    @keyframes hseIconPop {

      0%   { opacity: 0; transform: scale(0.72) translateY(16px); }

      70%  { transform: scale(1.08) translateY(-3px); }

      100% { opacity: 1; transform: scale(1) translateY(0); }

    }

    @keyframes hseImgZoom {

      0%   { transform: scale(1.08); }

      100% { transform: scale(1.02); }

    }



    /* Base hidden state � applied via JS */

    .hse-anim-card  { opacity: 0; }

    .hse-anim-line  { opacity: 0; }

    .hse-anim-icon  { opacity: 0; }





    /* Active (triggered) states */

    .hse-anim-card.hse-in {

      animation: hseCardReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    }

    .hse-anim-line.hse-in {

      animation: hseLineUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    }

    .hse-anim-icon.hse-in {

      animation: hseIconPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

    }

    .hse-showcase.hse-in .hse-media img {

      animation: none;

    }



    .hse-media {

      position: relative;

      min-height: 620px;

      order: 2;

      overflow: hidden;

      background: #0b2f1b;

    }



    .hse-overlay {

      display: none;

    }



    .hse-slider{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}



.hse-slider img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    opacity:0;

    transform:scale(1);

    transition:

        opacity 1.5s ease;

}



.hse-slider img.active{

    opacity:1;

    transform:scale(1);

    z-index:1;

}



@keyframes hseKenBurns {

    from{

        transform:scale(1.12);

    }

    to{

        transform:scale(1);

    }

}



.hse-slider img.active{

    animation:hseKenBurns 7s linear forwards;

}



    .hse-shell {

      position: relative;

      z-index: 1;

      min-height: 620px;

      display: flex;

      align-items: center;

      order: 1;

      padding: clamp(32px, 5vw, 64px);

      background: #0b2f1b;

    }



    .hse-shell::after {

      display: none;

    }



    .hse-story {

      max-width: 560px;

      padding-bottom: 0;

    }



    .hse-story .section-eyebrow {

      color: #b9e786;

      text-shadow: 1px 1px 1px rgb(37, 36, 36);

      margin-bottom: 14px;

      letter-spacing: 0.15em;

    }



    .hse-story .section-eyebrow::before {

      background: var(--accent);

    }



    .hse-story .section-title {

      max-width: none;

      margin-bottom: 24px;

      font-size: clamp(1.8rem, 4.1vw, 4.3rem);

      font-weight: 400;

      line-height: 0.93;

      letter-spacing: -0.04em;

      color: #fff;

      text-wrap: balance;

      text-shadow: 0 10px 32px rgba(15, 23, 42, 0.4);

    }



    .hse-story .section-title .hse-anim-line {

      color: var(--accent);

      text-shadow: 1px 1px 1px rgb(40, 39, 39);

    }

    .hse-story .section-title .hse-anim-line2 {

      color:#fff;

      font-size: clamp(1.12rem, 1.7vw, 1.48rem);

      line-height: 1.52;

          letter-spacing: 0.04em;

    max-width: 520px;

    margin:20px 0 48px 0;

    text-shadow: rgba(6, 13, 26, 0.32) 0px 6px 22px;

    }



    .hse-icon-row {

      display: flex;

      align-items: center;

      gap: 16px;

      padding-top: 20px;

      border-top: 1px solid rgba(255, 255, 255, 0.34);

      max-width: 420px;

    }



    .hse-icon {

      width: 62px;

      height: 62px;

      border-radius: 999px;

      border: 1px solid rgba(255, 255, 255, 0.34);

      background: rgba(10, 24, 18, 0.24);

      display: grid;

      place-items: center;

      color: rgba(255, 255, 255, 0.95);

      transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;

    }



    .hse-icon:hover {

      transform: translateY(-3px);

      border-color: rgba(255, 255, 255, 0.62);

      background: rgba(10, 24, 18, 0.34);

    }



    .hse-icon svg {

      width: 32px;

      height: 32px;

      stroke: currentColor;

      fill: none;

      stroke-width: 2.15;

      stroke-linecap: round;

      stroke-linejoin: round;

    }



    .hse-story .section-desc {

      max-width: 58ch;

      font-size: 1rem;

      line-height: 1.74;

      color: rgba(255, 255, 255, 0.88);

    }



    .hse-commitment {

      margin-top: 28px;

      display: inline-flex;

      align-items: center;

      gap: 14px;

      padding: 18px 22px;

      border-radius: 22px;

      background: rgba(255, 255, 255, 0.08);

      border: 1px solid rgba(255, 255, 255, 0.14);

      color: #fff;

      font-size: clamp(0.98rem, 1.35vw, 1.18rem);

      font-weight: 400;

      line-height: 1.35;

      letter-spacing: -0.01em;

      background: rgba(255, 255, 255, 0.12);

      box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16);

    }



    .hse-commitment::before {

      content: '';

      width: 42px;

      height: 2px;

      border-radius: 999px;

      background: linear-gradient(90deg, #8fb07f, rgba(255, 255, 255, 0));

      flex-shrink: 0;

    }



    .hse-zero-card {

      grid-column: 2;

      grid-row: 1;

      justify-self: end;

      align-self: center;

      width: min(100%, 280px);

      padding: 0;

      border-radius: 0;

      position: relative;

      z-index: 1;

      display: grid;

      place-items: center;

      background: transparent;

      border: none;

      box-shadow: none;

      color: #fff;

      overflow: visible;

      animation: zeroCardFloat 5.2s ease-in-out infinite;

    }



    .hse-zero-card::before {

      display: none;

    }



    .hse-zero-mark {

      width: clamp(156px, 18vw, 192px);

      aspect-ratio: 1;

      margin-bottom: 0;

      border-radius: 50%;

      display: grid;

      place-items: center;

      position: relative;

      background: conic-gradient(from -90deg, #f7c744 0 28%, #7b9a84 28% 58%, #c94a4a 58% 76%, #6fb6d4 76% 100%);

      padding: 12px;

      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.24);

      animation: zeroRingSpin 18s linear infinite;

      will-change: transform;

    }



    .hse-zero-mark::before {

      content: '';

      position: absolute;

      inset: -10px;

      border-radius: 50%;

      border: 1px solid rgba(255, 255, 255, 0.28);

      opacity: 0.75;

      animation: zeroRingPulse 3.8s ease-in-out infinite;

      pointer-events: none;

    }



    .hse-zero-mark::after {

      content: '';

      position: absolute;

      inset: -30px;

      border-radius: 50%;

      background: radial-gradient(circle, rgba(247, 199, 68, 0.16) 0%, rgba(123, 154, 132, 0.12) 34%, rgba(15, 23, 42, 0) 72%);

      z-index: -1;

      animation: zeroRingAura 4.8s ease-in-out infinite;

      pointer-events: none;

    }



    .hse-zero-mark span {

      width: 100%;

      height: 100%;

      border-radius: 50%;

      display: grid;

      place-items: center;

      background: rgba(255, 255, 255, 0.98);

      color: var(--navy);

      font-size: 1.9rem;

      font-weight: 400;

      line-height: 0.9;

      letter-spacing: -0.04em;

      text-align: center;

      text-transform: uppercase;

      position: relative;

      z-index: 1;

      animation: zeroRingCounterSpin 18s linear infinite;

    }



    .hse-zero-card p {

      margin: 0;

      color: rgba(255, 255, 255, 0.96);

      font-size: 1rem;

      line-height: 1.68;

      text-shadow: 0 8px 20px rgba(17, 75, 36, 0.42);

    }



    @keyframes zeroRingSpin {

      from {

        transform: rotate(0deg);

      }



      to {

        transform: rotate(360deg);

      }

    }



    @keyframes zeroRingCounterSpin {

      from {

        transform: rotate(0deg);

      }



      to {

        transform: rotate(-360deg);

      }

    }



    @keyframes zeroCardFloat {



      0%,

      100% {

        transform: translateY(0);

      }



      50% {

        transform: translateY(-10px);

      }

    }



    @keyframes zeroRingPulse {



      0%,

      100% {

        transform: scale(0.96);

        opacity: 0.5;

      }



      50% {

        transform: scale(1.06);

        opacity: 0.9;

      }

    }



    @keyframes zeroRingAura {



      0%,

      100% {

        transform: scale(0.95);

        opacity: 0.62;

      }



      50% {

        transform: scale(1.04);

        opacity: 0.96;

      }

    }



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



      .hse-zero-card,

      .hse-zero-mark,

      .hse-zero-mark span,

      .hse-zero-mark::before,

      .hse-zero-mark::after {

        animation: none !important;

      }

    }



    /* ========== UNIFIED FOOTER ========== */

    .site-footer {

      background: #0a0a0a;

      /* Authoritative Black */

      color: rgba(255, 255, 255, 0.75);

      position: relative;

      overflow: hidden;

    }



    /* Removed multicolor line */

    /* Subtle geometric pattern */

    .site-footer::after {

      content: '';

      position: absolute;

      inset: 0;

      background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);

      background-size: 24px 24px;

      pointer-events: none;

    }



    .footer-inner {

      position: relative;

      z-index: 1;

    }



    /* Top section: brand + contact cards */

    .footer-top {

      display: grid;

      grid-template-columns: 1.5fr 1fr 1fr 1.2fr;

      gap: 48px;

      align-items: start;

      padding: 80px 0 60px;

      border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    }



    .footer-col-title {

      font-size: 0.86rem;

      font-weight: 500;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      color: #fff;

      margin-bottom: 24px;

    }



    .footer-links {

      list-style: none;

      padding: 0;

      margin: 0;

      display: flex;

      flex-direction: column;

      gap: 12px;

    }



    .footer-links a {

      font-size: 0.92rem;

      color: rgba(255, 255, 255, 0.55);

      text-decoration: none;

      transition: color 0.3s, transform 0.3s;

      display: inline-block;

    }



    .footer-links a:hover {

      color: var(--accent);

      transform: translateX(4px);

    }



    .footer-contact-list {

      display: flex;

      flex-direction: column;

      gap: 20px;

    }



    .footer-contact-item {

      display: flex;

      gap: 14px;

      align-items: flex-start;

      color: rgba(255, 255, 255, 0.55);

      font-size: 0.9rem;

      line-height: 1.5;

    }



    .footer-contact-item svg {

      width: 18px;

      height: 18px;

      fill: var(--accent);

      flex-shrink: 0;

      margin-top: 2px;

    }



    .footer-contact-item strong {

      display: block;

      color: #fff;

      font-weight: 400;

      margin-bottom: 2px;

    }



    .footer-logo {

      height: 52px;

      width: auto;

      margin-bottom: 24px;

    }



    .footer-tagline {

      font-size: 0.93rem;

      line-height: 1.6;

      color: rgba(255, 255, 255, 0.45);

      max-width: 28ch;

    }



    /* Bottom bar */

    .footer-bottom {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 24px;

      padding: 22px 0;

      flex-wrap: wrap;

    }



    .footer-copy {

      font-size: 0.78rem;

      color: rgba(255, 255, 255, 0.3);

      letter-spacing: 0.01em;

    }



    .footer-nav {

      display: flex;

      align-items: center;

      gap: 4px;

    }



    .footer-nav a {

      padding: 5px 12px;

      font-size: 0.78rem;

      font-weight: 500;

      color: rgba(255, 255, 255, 0.45);

      border-radius: 999px;

      transition: color 0.2s, background 0.2s;

      text-decoration: none;

    }



    .footer-nav a:hover {

      color: rgba(255, 255, 255, 0.9);

      background: rgba(255, 255, 255, 0.06);

    }



    .footer-locale {

      font-size: 0.78rem;

      color: rgba(255, 255, 255, 0.3);

      display: flex;

      align-items: center;

      gap: 6px;

    }



    .footer-locale-dot {

      width: 5px;

      height: 5px;

      border-radius: 50%;

      background: var(--accent);

      opacity: 0.6;

    }



    /* Responsive */

    @media (max-width: 992px) {

      .footer-top {

        grid-template-columns: repeat(2, 1fr);

        gap: 40px;

      }

    }



    @media (max-width: 600px) {

      .footer-top {

        grid-template-columns: 1fr;

        gap: 32px;

        padding: 60px 0 40px;

      }

    }



    @media (max-width: 600px) {

      .footer-contact-grid {

        grid-template-columns: 1fr;

      }



      .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

      }



      .footer-nav {

        flex-wrap: wrap;

      }

    }



    /* Remove old CTA / contact-cards styles */

    .cta-section,

    .cta-shell,

    .cta-copy,

    .cta-eyebrow,

    .cta-highlights,

    .cta-actions,

    .cta-panel,

    .cta-panel-body,

    .cta-panel-kicker,

    .cta-panel-grid,

    .cta-contact-card,

    .cta-contact-icon,

    .contact-cards-section {

      display: none !important;

    }



    .cta-section::before {

      content: '';

      position: absolute;

      inset: 0;

      background:

        linear-gradient(100deg, rgba(10, 20, 35, 0.44) 0%, rgba(10, 20, 35, 0.30) 42%, rgba(10, 20, 35, 0.24) 68%, rgba(10, 20, 35, 0.38) 100%),

        linear-gradient(180deg, rgba(247, 199, 68, 0.05) 0%, rgba(247, 199, 68, 0) 100%);

      pointer-events: none;

    }



    .cta-shell {

      position: relative;

      z-index: 1;

      display: flex;

      align-items: flex-end;

      min-height: clamp(320px, 39vw, 430px);

      padding: 40px 0 30px;

    }



    .cta-shell::before {

      display: none;

    }



    .cta-copy {

      position: relative;

      z-index: 1;

      align-self: flex-end;

      padding: 0;

      max-width: 560px;

    }



    .cta-eyebrow {

      color: var(--brand-green);

      justify-content: flex-start;

      margin-bottom: 16px;

    }



    .cta-eyebrow-line {

      width: 46px;

      height: 2px;

      border-radius: 999px;

      background: linear-gradient(90deg, var(--brand-red), var(--accent), var(--brand-green));

      display: inline-block;

    }



    .cta-copy h2 {

      font-size: clamp(1.55rem, 2.55vw, 2.35rem);

      font-weight: 400;

      line-height: 1.14;

      letter-spacing: -0.02em;

      color: #fff;

      max-width: 16ch;

      margin-bottom: 6px;

      text-wrap: balance;

    }



    .cta-copy p {

      max-width: 520px;

      font-size: 0.94rem;

      line-height: 1.72;

      color: rgba(255, 255, 255, 0.78);

      margin-bottom: 16px;

    }



    .cta-highlights {

      display: flex;

      flex-wrap: wrap;

      gap: 12px;

      margin-bottom: 18px;

    }



    .cta-highlights span {

      display: inline-flex;

      align-items: center;

      padding: 8px 14px;

      border-radius: 999px;

      background: rgba(255, 255, 255, 0.08);

      border: 1px solid rgba(255, 255, 255, 0.12);

      color: rgba(255, 255, 255, 0.82);

      font-size: 0.78rem;

      font-weight: 400;

      letter-spacing: 0.02em;

      background: rgba(255, 255, 255, 0.15);

    }



    .cta-actions {

      display: flex;

      gap: 14px;

      justify-content: flex-start;

      flex-wrap: wrap;

    }



    .cta-actions .btn {

      min-width: 170px;

      justify-content: center;

      border-radius: 999px;

      padding: 12px 20px;

    }



    .cta-actions .btn-outline {

      border-color: rgba(255, 255, 255, 0.24);

      background: rgba(255, 255, 255, 0.08);

      color: #fff;

    }



    .cta-actions .btn-outline:hover {

      border-color: rgba(255, 255, 255, 0.5);

      background: rgba(255, 255, 255, 0.14);

    }



    .cta-panel {

      position: relative;

      min-height: auto;

      border-radius: 0;

      overflow: visible;

      border: none;

      background: transparent;

      box-shadow: none;

    }



    .cta-panel::before {

      display: none;

    }



    .cta-panel::after {

      display: none;

    }



    .cta-panel-body {

      position: relative;

      z-index: 1;

      display: flex;

      flex-direction: column;

      padding: 0;

    }



    .cta-panel-kicker {

      display: inline-flex;

      align-self: flex-start;

      padding: 8px 14px;

      border-radius: 999px;

      background: rgba(247, 199, 68, 0.18);

      border: 1px solid rgba(247, 199, 68, 0.36);

      color: #0f5130;

      font-size: 0.7rem;

      font-weight: 400;

      letter-spacing: 0.14em;

      text-transform: uppercase;

      margin-bottom: 14px;

    }



    .cta-panel-grid {

      display: grid;

      gap: 10px;

    }



    .cta-contact-card {

      display: grid;

      grid-template-columns: 48px minmax(0, 1fr);

      gap: 12px;

      align-items: start;

      padding: 14px 16px;

      border-radius: 14px;

      background: rgba(255, 255, 255, 0.98);

      border: 1px solid rgba(0, 0, 0, 0.06);

      border: 1px solid rgba(255, 255, 255, 0.08);

      color: #fff;

      background: rgba(255, 255, 255, 0.1);

      transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;

    }



    a.cta-contact-card:hover {

      transform: translateY(-2px);

      border-color: rgba(247, 199, 68, 0.3);

      background: rgba(255, 255, 255, 0.09);

      color: #fff;

    }



    .cta-contact-icon {

      width: 48px;

      height: 48px;

      border-radius: 12px;

      display: grid;

      place-items: center;

      background: rgba(247, 199, 68, 0.15);

      border: 1px solid rgba(247, 199, 68, 0.22);

    }



    .cta-contact-icon svg {

      width: 20px;

      height: 20px;

      fill: var(--accent);

    }



    /* Brand color-coded contact icons */

    .cta-panel-grid .cta-contact-card:nth-child(3) .cta-contact-icon {

      background: rgba(27, 139, 61, 0.14);

      border-color: rgba(27, 139, 61, 0.24);

    }



    .cta-panel-grid .cta-contact-card:nth-child(3) .cta-contact-icon svg {

      fill: #3cb55a;

    }



    .cta-contact-card span {

      display: block;

      margin-bottom: 4px;

      font-size: 0.68rem;

      font-weight: 400;

      letter-spacing: 0.14em;

      text-transform: uppercase;

      color: rgba(255, 255, 255, 0.55);

    }



    .cta-contact-card strong {

      display: block;

      font-size: 1rem;

      line-height: 1.36;

      color: #fff;

      letter-spacing: -0.012em;

      text-wrap: balance;

    }



    .cta-contact-card small {

      display: block;

      margin-top: 5px;

      font-size: 0.86rem;

      color: rgba(255, 255, 255, 0.7);

      line-height: 1.5;

    }



    .contact-cards-section {

      position: relative;

      padding: 24px 0 64px;

      background: #ffffff;

      border-top: 1px solid #e5e7eb;

    }



    .contact-cards-section .cta-panel {

      max-width: 1240px;

      margin: 0 auto;

    }



    .contact-cards-section .cta-panel-kicker {

      margin-bottom: 16px;

      background: #fff7dc;

      border-color: #ecd58e;

      color: #1f6f40;

    }



    .contact-cards-section .cta-panel-grid {

      grid-template-columns: repeat(3, minmax(0, 1fr));

      gap: 14px;

    }



    .contact-cards-section .cta-contact-card {

      background: #ffffff;

      border-color: #d9e2ee;

      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);

      color: #0f172a;

      backdrop-filter: none;

      -webkit-backdrop-filter: none;

    }



    .contact-cards-section .cta-contact-card:hover {

      background: #ffffff;

      border-color: #c5d4e8;

      color: #0f172a;

    }



    .contact-cards-section .cta-contact-icon {

      background: #f8fafc;

      border-color: #e2e8f0;

    }



    .contact-cards-section .cta-contact-card span {

      color: #64748b;

    }



    .contact-cards-section .cta-contact-card strong {

      color: #0f172a;

    }



    .contact-cards-section .cta-contact-card small {

      color: #475569;

    }



    /* ========== MAP CTA SECTION ========== */

    .map-cta-section {

      position: relative;

      overflow: hidden;

      min-height: clamp(420px, 48vw, 540px);

      display: flex;

      align-items: center;

      margin: 10px;

    }



    .map-cta-bg {

      position: absolute;

      inset: 0;

      z-index: 0;

    }



    .map-cta-img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      object-position: center;

      filter: saturate(0.8) brightness(0.95);

    }



    .map-cta-overlay {

      position: absolute;

      inset: 0;

      background:

        linear-gradient(100deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.25) 40%, transparent 100%);

    }



    .map-cta-inner {

      position: relative;

      z-index: 1;

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 48px;

      padding: 72px 0;

      flex-wrap: wrap;

    }



    .map-cta-copy {

      max-width: 560px;

      flex: 1 1 340px;

    }



    .map-cta-copy .section-eyebrow {

      margin-bottom: 18px;

      

    }



    /* .map-cta-copy .section-eyebrow::before {

      background: linear-gradient(90deg, var(--brand-red), var(--accent), var(--brand-green));

    } */



    .map-cta-heading {

      font-size: clamp(1.7rem, 3vw, 2.6rem);

      font-weight: 400;

      line-height: 1.1;

      letter-spacing: -0.04em;

      color: #1a1a1a;

      margin-bottom: 20px;

      text-wrap: balance;

    }



    .map-cta-sub {

      font-size: 1rem;

      color: rgba(0, 0, 0, 0.7);

      line-height: 1.7;

      margin-bottom: 28px;

    }



    .map-cta-btn {

      display: inline-flex;

      align-items: center;

      gap: 10px;

      padding: 14px 28px;

      border-radius: 8px;

      background: var(--accent);

      color: var(--navy);

      border: none;

      font-size: 0.95rem;

      font-weight: 400;

      text-decoration: none;

      transition: all 0.3s ease;

      letter-spacing: 0.01em;

      box-shadow: 0 4px 15px rgba(247, 199, 68, 0.2);

    }



    .map-cta-btn svg {

      width: 17px;

      height: 17px;

      fill: currentColor;

      flex-shrink: 0;

    }



    .map-cta-btn:hover {

      background: var(--accent-dark);

      transform: translateY(-2px);

      box-shadow: 0 8px 25px rgba(247, 199, 68, 0.3);

    }



    /* Removed map-cta-stats per request */



    /* ========== FLAT UI REFINEMENTS ========== */

    .site-header {

      transition: background 0.4s, box-shadow 0.4s;

    }



    .site-header.scrolled {

      background: #0f172a;

      backdrop-filter: none;

      -webkit-backdrop-filter: none;

      box-shadow: 0 2px 18px rgba(0, 0, 0, 0.16);

    }



    .hero-vid-btn,

    .discipline-point,

    .discipline-node,

    .project-card-tag,

    .hse-commitment,

    .cta-highlights span,

    .cta-panel,

    .cta-panel-kicker,

    .cta-contact-card,

    .mega-top {

      backdrop-filter: none;

      -webkit-backdrop-filter: none;

    }



    .hero-vid-btn {

      background: #18233a;

      border-color: rgba(255, 255, 255, 0.2);

      box-shadow: none;

    }



    .hero-vid-btn:hover {

      background: #22314a;

      border-color: rgba(255, 255, 255, 0.3);

    }



    .hero-label {

      background: rgba(6, 13, 26, 0.55);

      border: 1px solid rgba(255, 255, 255, 0.26);

    }



    .discipline-point {

      background: #fffef7;

      border-color: rgba(186, 181, 118, 0.38);

      box-shadow: 0 14px 28px rgba(123, 154, 132, 0.08);

    }



    .discipline-node {

      background: #ffffff;

      border-color: #ffffff;

      box-shadow: 0 14px 26px rgba(123, 154, 132, 0.16), inset 0 0 0 1px rgba(187, 177, 126, 0.14);

    }



    .discipline-node::before {

      background: #f9fbfc;

    }



    .project-card-tag {

      background: #f7c744;

      border-color: #d19e29;

      color: #0f172a;

    }



    .hse-commitment {

      background: #181a22;

      border-color: #2a2c34;

      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);

    }



    .hse-zero-card {

      background: transparent;

      border-color: transparent;

      box-shadow: none;

    }



    .cta-shell::before {

      display: none;

    }



    .cta-highlights span {

      background: #161c28;

      border-color: #2a3040;

    }



    .cta-contact-card {

      background: #141c28;

      border-color: #222c3a;

    }



    .mega-top {

      background: #ffffff;

    }



    /* ========== MEGA MENU OVERLAY ========== */

    .mega-menu {

      position: fixed;

      inset: 0;

      z-index: 2000;

      background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);

      opacity: 0;

      visibility: hidden;

      transition: opacity 0.4s ease, visibility 0.4s;

      overflow-y: auto;

    }



    .mega-menu.open {

      opacity: 1;

      visibility: visible;

    }



    /* Mega menu top bar */

    .mega-top {

      position: sticky;

      top: 0;

      z-index: 10;

      background: var(--white);

      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      backdrop-filter: blur(10px);

    }



    .mega-top-inner {

      display: flex;

      align-items: center;

      justify-content: space-between;

      height: 70px;

    }



    .mega-top .brand img {

      height: 50px;

    }



    .mega-top-actions {

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .mega-top-nav {

      display: flex;

      align-items: center;

      gap: 2px;

    }



    .mega-top-nav a {

      padding: 8px 16px;

      font-size: 0.78rem;

      font-weight: 400;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      color: var(--gray-600);

      border-radius: 6px;

      transition: 0.3s;

    }



    .mega-top-nav a:hover,

    .mega-top-nav a.active {

      color: var(--navy);

      background: rgba(247, 199, 68, 0.1);

    }



    .mega-search-btn,

    .mega-close-btn {

      width: 44px;

      height: 44px;

      border-radius: 50%;

      border: none;

      cursor: pointer;

      display: grid;

      place-items: center;

      transition: 0.3s;

    }



    .mega-search-btn {

      background: transparent;

      color: var(--gray-600);

    }



    .mega-search-btn:hover {

      background: var(--gray-100);

    }



    .mega-search-btn svg {

      width: 20px;

      height: 20px;

      stroke: currentColor;

      fill: none;

      stroke-width: 2;

    }



    .mega-close-btn {

      background: var(--navy);

      color: #fff;

      margin-left: 4px;

    }



    .mega-close-btn:hover {

      background: var(--accent);

      transform: scale(1.05);

    }



    .mega-close-btn svg {

      width: 20px;

      height: 20px;

      stroke: currentColor;

      fill: none;

      stroke-width: 2.5;

    }



    /* Mega menu body */

    .mega-body {

      padding: 40px 0 60px;

    }



    .mega-body-inner {

      display: grid;

      grid-template-columns: 340px 1fr;

      gap: 80px;

    }



    /* Mega Left - Navigation */

    .mega-left-label {

      font-size: 0.68rem;

      font-weight: 400;

      letter-spacing: 0.16em;

      text-transform: uppercase;

      color: var(--gray-400);

      margin-bottom: 20px;

      padding-bottom: 12px;

      border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);

    }



    .mega-nav-list {

      display: flex;

      flex-direction: column;

    }



    .mega-nav-item {

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 14px 14px;

      margin-bottom: 4px;

      border-radius: 8px;

      cursor: pointer;

      transition: 0.3s;

      position: relative;

    }



    .mega-nav-item:hover {

      background: rgba(15, 23, 42, 0.05);

    }



    .mega-nav-item a {

      font-size: 0.95rem;

      font-weight: 400;

      color: var(--gray-800);

      transition: color 0.3s;

      line-height: 1.3;

      letter-spacing: -0.01em;

    }



    .mega-nav-item:hover a {

      color: var(--navy);

    }



    .mega-nav-chevron {

      width: 28px;

      height: 28px;

      border-radius: 50%;

      display: grid;

      place-items: center;

      background: transparent;

      transition: 0.3s;

      flex-shrink: 0;

    }



    .mega-nav-item:hover .mega-nav-chevron {

      background: rgba(247, 199, 68, 0.15);

    }



    .mega-nav-chevron svg {

      width: 14px;

      height: 14px;

      stroke: var(--gray-400);

      fill: none;

      stroke-width: 2.5;

      transition: 0.3s;

    }



    .mega-nav-item:hover .mega-nav-chevron svg {

      stroke: var(--accent);

    }



    /* Mega submenu items */

    .mega-nav-submenu {

      display: none;

      flex-direction: column;

      padding-left: 16px;

      gap: 2px;

    }



    .mega-nav-submenu.open {

      display: flex;

    }



    .mega-nav-subitem {

      padding: 10px 12px;

      border-radius: 6px;

      font-size: 0.85rem;

      color: var(--gray-600);

      transition: 0.2s;

      cursor: pointer;

    }



    .mega-nav-subitem:hover {

      background: rgba(247, 199, 68, 0.1);

      color: var(--accent);

    }



    /* Mega Right - Featured Content */

    .mega-right-label {

      font-size: 0.68rem;

      font-weight: 400;

      letter-spacing: 0.16em;

      text-transform: uppercase;

      color: var(--gray-400);

      margin-bottom: 20px;

      padding-bottom: 12px;

      border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);

      display: flex;

      justify-content: space-between;

      align-items: center;

    }



    .mega-right-label a {

      color: var(--navy);

      font-size: 0.72rem;

      font-weight: 400;

      letter-spacing: 0.12em;

      display: flex;

      align-items: center;

      gap: 6px;

      transition: 0.3s;

    }



    .mega-right-label a:hover {

      gap: 10px;

    }



    .mega-right-label a svg {

      width: 13px;

      height: 13px;

      stroke: var(--navy);

      fill: none;

      stroke-width: 2.5;

    }



    .mega-featured {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 24px;

    }



    .mega-featured-card {

      cursor: pointer;

      transition: 0.3s;

      background: #fff;

      border-radius: 14px;

      overflow: hidden;

      border: 1px solid rgba(0, 0, 0, 0.06);

    }



    .mega-featured-card:hover {

      transform: translateY(-6px);

      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);

    }



    .mega-featured-img {

      border-radius: 0;

      overflow: hidden;

      height: 160px;

      margin-bottom: 0;

    }



    .mega-featured-img img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      transition: transform 0.6s ease;

    }



    .mega-featured-card:hover .mega-featured-img img {

      transform: scale(1.08);

    }



    .mega-featured-tag {

      font-size: 0.65rem;

      font-weight: 400;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      color: var(--accent);

      margin-bottom: 6px;

      padding: 12px 16px 0;

    }



    .mega-featured-card h3 {

      font-size: 1rem;

      font-weight: 400;

      color: var(--gray-900);

      line-height: 1.3;

      margin-bottom: 6px;

      padding: 0 16px;

      transition: color 0.3s;

    }



    .mega-featured-card:hover h3 {

      color: var(--navy);

    }



    .mega-featured-card p {

      font-size: 0.8rem;

      color: var(--gray-500);

      line-height: 1.5;

      padding: 0 16px 16px;

    }



    /* Search overlay inside mega menu */

    .mega-search-panel {

      display: none;

      padding: 40px 0;

    }



    .mega-search-panel.active {

      display: block;

    }



    .mega-search-input-wrap {

      position: relative;

      max-width: 720px;

      margin: 0 auto;

    }



    .mega-search-input-wrap input {

      width: 100%;

      padding: 20px 24px 20px 56px;

      font-size: 1.2rem;

      font-family: inherit;

      border: 2px solid var(--gray-200);

      border-radius: 12px;

      outline: none;

      transition: border-color 0.3s;

      color: var(--gray-900);

    }



    .mega-search-input-wrap input:focus {

      border-color: var(--accent);

    }



    .mega-search-input-wrap input::placeholder {

      color: var(--gray-400);

    }



    .mega-search-icon {

      position: absolute;

      left: 20px;

      top: 50%;

      transform: translateY(-50%);

    }



    .mega-search-icon svg {

      width: 22px;

      height: 22px;

      stroke: var(--gray-400);

      fill: none;

      stroke-width: 2;

    }



    /* ===== MEGA MENU OVERLAY RESPONSIVE ===== */



    @media (max-width: 1100px) {

      .mega-body-inner {

        grid-template-columns: 280px 1fr;

        gap: 40px;

      }



      .mega-featured {

        grid-template-columns: repeat(2, 1fr);

      }



      .mega-featured-card:last-child {

        display: none;

      }

    }



    @media (max-width: 900px) {

      /* Collapse top-nav into 2-row wrap on mid tablets */

      .mega-top-nav {

        flex-wrap: wrap;

        gap: 0;

        max-width: 50%;

        justify-content: flex-end;

      }



      .mega-top-nav a {

        padding: 6px 10px;

        font-size: 0.72rem;

      }



      .mega-top-inner {

        height: auto;

        min-height: 60px;

        padding: 8px 0;

        flex-wrap: wrap;

        gap: 6px;

      }



      .mega-body {

        padding: 28px 0 40px;

      }



      .mega-body-inner {

        grid-template-columns: 220px 1fr;

        gap: 28px;

      }



      .mega-nav-item {

        padding: 10px 10px;

      }



      .mega-nav-item a {

        font-size: 0.88rem;

      }

    }



    @media (max-width: 768px) {

      /* Hide top-nav on phone ? hamburger already handles navigation */

      .mega-top-nav {

        display: none;

      }



      .mega-top-inner {

        height: 60px;

        padding: 0;

      }



      .mega-body {

        padding: 24px 0 36px;

      }



      .mega-body-inner {

        grid-template-columns: 1fr;

        gap: 32px;

      }



      .mega-featured {

        grid-template-columns: 1fr 1fr;

        gap: 16px;

      }



      .mega-featured-card:last-child {

        display: none;

      }



      .mega-nav-item a {

        font-size: 1.15rem;

      }



      .mega-nav-item {

        padding: 12px 10px;

      }



      .mega-search-input-wrap input {

        font-size: 1rem;

        padding: 16px 16px 16px 48px;

      }

    }



    @media (max-width: 576px) {

      /* Small phones: full-width single column */

      .mega-featured {

        grid-template-columns: 1fr;

      }



      .mega-featured-card:last-child {

        display: block;

      }



      .mega-featured-img {

        height: 130px;

      }



      .mega-body {

        padding: 16px 0 28px;

      }



      .mega-top .brand img {

        height: 40px;

      }



      .mega-top-inner {

        height: 56px;

      }



      .mega-nav-item a {

        font-size: 1rem;

      }



      .mega-search-input-wrap input {

        font-size: 0.9rem;

        padding: 14px 14px 14px 44px;

        border-radius: 8px;

      }

    }



    @media (max-width: 380px) {

      /* Extra small phones (320px) */

      .mega-top-inner {

        height: 52px;

      }



      .mega-top .brand img {

        height: 40px;

      }



      .mega-search-btn,

      .mega-close-btn {

        width: 38px;

        height: 38px;

      }



      .mega-nav-item {

        padding: 10px 8px;

      }



      .mega-featured-img {

        height: 110px;

      }

    }



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

    @media (max-width: 1100px) {

      .about-grid {

        grid-template-columns: 1fr;

        gap: 48px;

      }



      .services-grid {

        grid-template-columns: repeat(2, 1fr);

      }



      .services-grid .service-card {

        min-height: 360px;

      }



      .projects-layout {

        grid-template-columns: 1fr;

        gap: 34px;

      }



      .project-card {

        height: 380px;

      }



      .hse-shell {

        min-height: 560px;

        padding: 40px 34px;

      }



      .hse-media {

        min-height: 560px;

      }



      .hse-shell::after {

        display: none;

      }



      .hse-story {

        max-width: 540px;

      }



      .hse-story .section-title {

        font-size: clamp(2.35rem, 6.6vw, 4rem);

      }



      .hse-icon-row {

        gap: 14px;

      }



      .hse-icon {

        width: 56px;

        height: 56px;

      }



      .hse-zero-card {

        display: none;

      }



      .cta-shell {

        min-height: 360px;

        padding: 32px 0 22px;

      }



      .cta-copy h2 {

        max-width: 15ch;

      }



      .footer-row {

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 12px;

      }



      .stats-inner {

        grid-template-columns: repeat(2, 1fr);

      }



      .stat-item:nth-child(2) {

        border-right: none;

      }

    }



    @media (max-width: 768px) {

      .container {

        width: calc(100% - 32px);

      }



      .nav-links {

        display: none;

      }



      .hero {

        min-height: 600px;

      }



      .hero h1 {

        font-size: 2.7rem;

      }



      .hero-label {

        font-size: 0.72rem;

        letter-spacing: 0.14em;

        padding: 8px 14px;

      }



      .hero-label::before {

        width: 20px;

      }



      .hero-desc {

        font-size: 1.02rem;

        letter-spacing: 0.04em;

      }



      .stats-bar {

        margin-top: -40px;

      }



      .stats-inner {

        grid-template-columns: 1fr 1fr;

      }



      .stat-item {

        padding: 24px 18px;

      }



      .stat-number {

        font-size: 2rem;

      }



      .section {

        padding: 80px 0;

      }



      .about-image img {

        height: 360px;

      }



      .about-features {

        grid-template-columns: 1fr;

      }



      .services-grid {

        grid-template-columns: 1fr;

      }



      .services-grid .service-card {

        min-height: 320px;

      }



      .projects-layout {

        gap: 28px;

      }



      .projects-copy {

        gap: 22px;

      }



      .projects-copy-actions {

        align-items: center;

      }



      .projects-nav {

        width: 48px;

        height: 48px;

      }



      .project-card {

        height: 320px;

      }



      .hse-section {

        padding: 24px 0 10px;

      }



      .hse-bleed {

        width: calc(100vw - 24px);

      }



      .hse-showcase,

      .hse-shell {

        min-height: auto;

      }



      .hse-showcase {

        border-radius: 24px;

        grid-template-columns: 1fr;

      }



      .hse-shell {

        order: 1;

        padding: 24px 20px 24px;

      }



      .hse-media {

        order: 2;

        min-height: 300px;

      }



      .hse-story .section-title {

        max-width: 12ch;

        font-size: clamp(2rem, 9.6vw, 3rem);

      }

      .hse-story .section-title .hse-anim-line2 {

        /* max-width: 12ch; */

        font-size: clamp(1rem, 3.6vw, 1.5rem);

      }



      .hse-icon-row {

        gap: 10px;

        padding-top: 16px;

      }



      .hse-icon {

        width: 50px;

        height: 50px;

      }



      .hse-icon svg {

        width: 26px;

        height: 26px;

      }



      .hse-zero-card {

        display: none;

      }



      .cta-section {

        padding: 0;

      }



      .cta-shell {

        min-height: 300px;

        padding: 24px 0 14px;

      }



      .cta-copy h2 {

        max-width: 14.5ch;

        font-size: clamp(1.42rem, 6.8vw, 2rem);

      }



      .cta-copy p {

        font-size: 0.9rem;

      }



      .contact-cards-section {

        padding: 14px 0 48px;

      }



      .cta-panel-body {

        padding: 0;

      }



      .cta-contact-card {

        grid-template-columns: 42px 1fr;

        padding: 11px 12px;

        border-radius: 16px;

      }



      .cta-contact-icon {

        width: 42px;

        height: 42px;

        border-radius: 14px;

      }



      .footer-links {

        flex-wrap: wrap;

        justify-content: center;

      }



      .footer-meta {

        flex-wrap: wrap;

        justify-content: center;

      }

    }



    @media (max-width: 480px) {

      .stats-inner {

        grid-template-columns: 1fr;

      }



      .stat-item {

        border-right: none;

        border-bottom: 1px solid var(--gray-200);

      }



      .stat-item:last-child {

        border-bottom: none;

      }



      .hero-actions {

        flex-direction: column;

      }



      .cta-actions {

        flex-direction: column;

        align-items: stretch;

      }



      .cta-actions .btn {

        width: 100%;

      }



      .cta-copy h2 {

        max-width: 13ch;

      }



      .footer-links a {

        padding: 4px 10px;

        font-size: 0.74rem;

      }

    }



.wa-float {

      position: fixed;

      bottom: 80px;

      right: 20px;

      z-index: 9999;

      display: flex;

      align-items: center;

      gap: 12px;

      text-decoration: none;

    }



    .wa-float__tooltip {

      background: #fff;

      color: #1a1a1a;

      font-family: 'Inter', sans-serif;

      font-size: 0.86rem;

      font-weight: 500;

      letter-spacing: 0.04em;

      padding: 8px 14px;

      border-radius: 8px;

      box-shadow: 0 8px 24px rgba(0,0,0,0.12);

      white-space: nowrap;

      opacity: 0;

      transform: translateX(8px);

      transition: opacity 0.3s ease, transform 0.3s ease;

      pointer-events: none;

    }



    .wa-float:hover .wa-float__tooltip {

      opacity: 1;

      transform: translateX(0);

    }



    .wa-float__btn {

      width: 58px;

      height: 58px;

      border-radius: 50%;

      background: #25D366;

      display: grid;

      place-items: center;

      box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);

      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),

                  box-shadow 0.3s ease;

      flex-shrink: 0;

      position: relative;

    }



    .wa-float__btn::before {

      content: '';

      position: absolute;

      inset: -4px;

      border-radius: 50%;

      border: 2px solid rgba(37, 211, 102, 0.55);

      animation: wa-pulse 2.2s ease-out infinite;

    }



    .wa-float__btn::after {

      content: '';

      position: absolute;

      inset: -10px;

      border-radius: 50%;

      border: 2px solid rgba(37, 211, 102, 0.25);

      animation: wa-pulse 2.2s ease-out infinite 0.6s;

    }



    .wa-float:hover .wa-float__btn {

      transform: scale(1.1);

      box-shadow: 0 12px 36px rgba(37, 211, 102, 0.55);

    }



    .wa-float__btn svg {

      width: 30px;

      height: 30px;

      fill: #fff;

      position: relative;

      z-index: 1;

    }



    @keyframes wa-pulse {

      0%   { transform: scale(1);   opacity: 1; }

      80%  { transform: scale(1.7); opacity: 0; }

      100% { transform: scale(1.7); opacity: 0; }

    }



    @media (max-width: 576px) {

      .wa-float {

        bottom: 10px;

        right: 10px;

      }

      .wa-float__btn {

        width: 52px;

        height: 52px;

      }

    }





/* ==========================================================================

   Timeline Redesign (Horizontal Slider Layout & Playback Animation)

   ========================================================================== */

.timeline-redesign {

  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);

  padding: 56px 0 64px;

  overflow: hidden;

  position: relative;

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

  min-height: 760px;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

}



/* Header styling */

.timeline-section-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 28px;

  margin-bottom: 34px;

  width: 100%;

}



.timeline-section-header .section-eyebrow {

  margin-bottom: 8px;

}



.timeline-section-header .section-title {

  margin: 0;

  text-align: left;

}



/* Main Container */

.timeline-main-container {

  max-width: 1680px;

  margin: 0 auto;

  padding: 0 28px;

  position: relative;

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  box-sizing: border-box;

  width: 100%;

  overflow: hidden;

}



.timeline-controls {

  display: flex;

  gap: 12px;

}



.timeline-ctrl-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background-color: #ffffff;

  border: 1px solid rgba(196, 30, 36, 0.28);

  padding: 9px 16px;

  border-radius: 6px;

  font-size: 0.9rem;

  font-weight: 600;

  color: #C41E24;

  cursor: pointer;

  transition: all 0.3s ease;

}



.timeline-ctrl-btn svg {

  width: 14px;

  height: 14px;

  fill: currentColor;

}



.timeline-ctrl-btn:hover {

  background-color: #C41E24;

  color: #ffffff;

  box-shadow: 0 8px 22px rgba(196, 30, 36, 0.18);

}



.timeline-ctrl-btn.secondary {

  background-color: transparent;

  border-color: #d4d8de;

  color: #3f4650;

}



.timeline-ctrl-btn.secondary:hover {

  background-color: #f3f3f3;

  color: #000;

}



/* Slider Wrapper with Navigation Arrows */

.timeline-slider-container {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  flex: 1;

}



/* Navigation Arrow Buttons */

.timeline-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background-color: #ffffff;

  border: 1.5px solid #dddddd;

  font-size: 1rem;

  color: #333333;

  cursor: pointer;

  z-index: 10;

  display: grid;

  place-items: center;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);

}



.timeline-arrow:hover {

  background-color: #C41E24;

  color: #ffffff;

  border-color: #C41E24;

  transform: translateY(-50%) scale(1.1);

  box-shadow: 0 6px 16px rgba(196, 30, 36, 0.25);

}



.timeline-arrow:active {

  transform: translateY(-50%) scale(0.95);

}



.prev-arrow {

  left: 10px;

}



.next-arrow {

  right: 10px;

}



/* Timeline Scroll Container */

.timeline-slider-scroll-wrap {

  width: 100%;

  overflow-x: auto;

  scroll-behavior: smooth;

  padding: 24px 72px;

  scrollbar-width: none; /* Hide scrollbar for Firefox */

  box-sizing: border-box;

}



.timeline-slider-scroll-wrap::-webkit-scrollbar {

  display: none; /* Hide scrollbar for Chrome/Safari */

}



/* Track container holding horizontal line and columns */

.timeline-slider-track {

  display: flex;

  position: relative;

  min-height: 620px;

  padding: 18px 0;

  gap: 68px;

  align-items: center;

  width: max-content;

}



/* Single Horizontal Axis Line */

.timeline-horizontal-axis {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 2px;

  background-color: #d9dde3;

  transform: translateY(-50%);

  z-index: 1;

}



/* Column Structure */

.timeline-column {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  height: 560px;

  width: 282px;

  flex-shrink: 0;

  position: relative;

  z-index: 2;

  transition: all 0.4s ease;

}



.timeline-column.center-column {

  justify-content: center;

}



/* Card Box */

.card-box {

  position: relative;

  width: 282px;

  min-height: 124px;

  background-color: #ffffff;

  border: 1px solid #e5e9ef;

  border-radius: 8px;

  padding: 16px 16px 15px;

  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.07);

  z-index: 2;

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  box-sizing: border-box;

}



.card-box:hover {

  transform: translateY(-5px);

  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.12);

}



.top-box {

  border-top: 4px solid var(--theme-color);

}



.bottom-box {

  border-top: 4px solid var(--theme-color);

}



.divider-dashed {

  height: 1px;

  border-top: 1px dashed #e0e0e0;

  margin: 10px 0;

  width: 100%;

}



.text-dense {

  padding: 14px 15px;

}



.text-dense .node-project-title {

  font-size: 0.86rem;

}



.text-dense .node-project-desc {

  font-size: 0.71rem;

}



/* Connectors */

.vertical-connector {

  position: absolute;

  top: 12%;

  bottom: 12%;

  left: 50%;

  width: 2px;

  background-color: var(--theme-color);

  transform: translateX(-50%);

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 0;

  box-sizing: border-box;

}



/* Axis Intersection Dot */

.axis-dot {

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background-color: var(--theme-color);

  z-index: 5;

  border: 2px solid #ffffff;

  box-shadow: 0 0 0 2px var(--theme-color);

  transition: all 0.3s ease;

}



/* Custom Icon Circles */

.icon-circle {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background-color: #ffffff;

  border: 2px solid var(--theme-color);

  display: grid;

  place-items: center;

  z-index: 3;

  font-size: 1rem;

  color: var(--theme-color);

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}



.timeline-redesign .icon-circle {

  display: none;

}



/* Card Year Labels */

.node-year {

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

  font-weight: 700;

  font-size: 1.22rem;

  color: var(--theme-color);

  margin-bottom: 4px;

  display: block;

}



.node-year-label-bottom {

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

  font-weight: 700;

  font-size: 1.22rem;

  color: var(--theme-color);

  margin-top: 4px;

  display: block;

}



.node-project-title {

  font-weight: 700;

  font-size: 0.95rem;

  line-height: 1.28;

  color: #111827;

  overflow-wrap: anywhere;

  margin-bottom: 4px;

}



.node-project-desc {

  font-size: 0.76rem;

  line-height: 1.46;

  color: #5b6470;

  margin: 0;

}



.badge-wells {

  display: inline-block;

  background-color: #f6f7f9;

  border: 1px solid #d8dde5;

  padding: 2px 7px;

  border-radius: 999px;

  font-size: 0.62rem;

  font-weight: 700;

  color: #000000;

}



/* Ongoing Shape */

.ongoing-column-slider {

  display: flex;

  align-items: center;

  margin-left: 20px;

  flex-shrink: 0;

  position: relative;

  z-index: 2;

  height: 80px;

}



.arrow-shape {

  background-color: rgb(196, 30, 36) ;

  color: #ffffff;

  padding: 6px 20px;

  font-weight: 700;

  font-size: 1rem;

  position: relative;

  border-radius: 4px 0 0 4px;

}



.arrow-shape::after {

  content: '';

  position: absolute;

  right: -16px;

  top: 0;

  width: 0;

  height: 0;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

  border-left: 16px solid rgb(196, 30, 36) ;

}



/* Active Hightlight Play State styling */

.timeline-column.active {

  transform: scale(1.02);

}



.timeline-column.active .axis-dot {

  transform: scale(1.4);

  box-shadow: 0 0 0 6px var(--theme-color-trans), 0 0 15px var(--theme-color);

  background-color: #ffffff;

}



.timeline-column.active .icon-circle {

  background-color: var(--theme-color);

  color: #ffffff;

  transform: scale(1.15);

  box-shadow: 0 4px 15px var(--theme-color-trans);

}



.timeline-column.active .card-box {

  border-color: var(--theme-color);

  box-shadow: 0 18px 42px var(--theme-color-trans);

}



/* Hover highlights */

.timeline-column:hover .icon-circle {

  background-color: var(--theme-color);

  color: #ffffff;

  transform: scale(1.12);

  box-shadow: 0 4px 15px var(--theme-color-trans);

}



.timeline-column:hover .axis-dot {

  transform: scale(1.2);

}



/* Company Brand Theme Color Configurations */

.theme-red {

  --theme-color: #C41E24;

  --theme-color-trans: rgba(196, 30, 36, 0.15);

}

.theme-yellow {

  --theme-color: #f7c744;

  --theme-color-trans: rgba(247, 199, 68, 0.15);

}

.theme-green {

  --theme-color: #1B8B3D;

  --theme-color-trans: rgba(27, 139, 61, 0.15);

}



/* Responsive Overrides: Tablets & Mobile */

@media (max-width: 1024px) {

  .timeline-redesign {

    height: auto !important;

    min-height: auto !important;

    padding: 30px 0 !important;

  }



  .timeline-controls {

    display: none !important;

  }



  .timeline-section-header {

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

    padding: 0 10px;

  }



  .timeline-slider-scroll-wrap {

    padding: 20px 10px;

    max-height: 480px;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    scrollbar-width: thin !important;

  }



  .timeline-slider-scroll-wrap::-webkit-scrollbar {

    display: block !important;

    width: 6px !important;

  }



  .timeline-slider-scroll-wrap::-webkit-scrollbar-track {

    background: transparent !important;

  }



  .timeline-slider-scroll-wrap::-webkit-scrollbar-thumb {

    background-color: rgba(0, 0, 0, 0.15) !important;

    border-radius: 10px !important;

  }



  .timeline-slider-track {

    flex-direction: column;

    width: 100% !important;

    min-height: auto;

    gap: 35px;

    align-items: flex-start;

  }



  .timeline-horizontal-axis {

    display: none;

  }



  .timeline-column {

    flex-direction: column;

    width: 100% !important;

    height: auto !important;

    align-items: flex-start;

    border-left: 3px solid var(--theme-color);

    padding-left: 25px;

    margin-left: 10px;

    box-sizing: border-box;

  }



  .card-box {

    width: 100% !important;

    margin: 10px 0;

  }



  .vertical-connector {

    display: none;

  }



  .prev-arrow, .next-arrow {

    display: none !important;

  }



  .ongoing-column-slider {

    margin-left: 15px;

    height: auto;

  }



  .arrow-shape::after {

    border-top: 19px solid transparent;

    border-bottom: 19px solid transparent;

  }

}



/* Accessibility: Reduced Motion */

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

  .timeline-column,

  .icon-circle,

  .axis-dot,

  .card-box {

    transition: none !important;

    animation: none !important;

  }

}



/* ==========================================================================

   3. Large Element Animation Keyframes

   ========================================================================== */

@keyframes floatBreathe {

  0% { transform: scale(1); }

  50% { transform: scale(1.04); } /* Subtle zoom prevents showing whitespace edges */

  100% { transform: scale(1); }

}









/* --- Core Load Transitions CSS --- */

.animate-fade-in {

    opacity: 0;

    animation: fadeIn 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1);

}



.animate-collage-left {

    opacity: 0;

    transform: translateX(-40px);

    animation: slideIn 1.5s forwards cubic-bezier(0.25, 1, 0.5, 1);

}



.animate-collage-right {

    opacity: 0;

    transform: translateX(40px);

    animation: slideIn 1.5s forwards cubic-bezier(0.25, 1, 0.5, 1);

}



.animate-on-scroll {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

}



.animate-on-scroll.visible {

    opacity: 1;

    transform: translateY(0);

}



@keyframes fadeIn { to { opacity: 1; } }

@keyframes slideIn { to { opacity: 1; transform: translate(0); } }



/* --- Responsive Viewport Breakpoints --- */

@media (max-width: 1100px) {

    .timeline-container {

        grid-template-columns: 1fr; /* Restructures double layout into single row on tablet devices */

        padding: 40px 24px;

        gap: 40px;

    }



    .timeline-left {

        max-width: 100%; 

    }



    .timeline-right-gallery {

        position: relative;

        top: 0;

        height: 500px;

        margin-top: 40px;

    }

    

   

}



@media (max-width: 768px) {

    .center-line {

        left: 20px;

        transform: none;

        bottom: 52px;

    }



    .timeline-item {

        width: 100%;

        left: 0 !important;

        text-align: left !important;

        padding-left: 45px;

        padding-right: 0;

    }



    .timeline-item::after {

        left: 15px !important;

    }



    .timeline-item.left-aligned .contents p {

        text-align-last: left;

    }



    .timeline-right-gallery {

        height: 400px;

    }

}



@media (max-width: 480px) {

    .timeline-right-gallery {

        height: 300px;

    }

    .collage-img {

        border: 4px solid var(--bg-color); /* Thinner separation frames for small mobile viewports */

    }

}



    /* about page */

    .about {

  position: relative;

  height: 55vh;       /* Decreased height from 80vh to 45vh */

  min-height: 280px;  /* Decreased min-height from 400px to 280px */

  display: flex;

  align-items: center;

  overflow: hidden;

  /* background: var(--navy); */

  width: 100%;

}

.innerhero-content {

      position: relative;

      z-index: 3;

      margin: 70px 0 40px;

      max-width: 660px;

      width: min(100%, 660px);

      margin-left: 5vw;

      margin-right: auto;

      animation: fadeUp 1s ease 0.3s both;

      text-align: left;

      align-self:last baseline;

    }



.about-banner {

  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;

  height: 100%;

}



.about-banner img {

  width: 100%;

  height: 100%;

  /* Fixes full-size aspect ratio clipping gracefully inside a smaller container */

  object-fit: cover;     

  object-position:center;

  display: block;

  background-attachment: fixed;

}



    .about h2 {

      font-size: clamp(2rem, 3vw, 3rem);

      font-weight: 400;

      line-height: 0.5;

      color: #fff;

      letter-spacing: -0.018em;

      line-height: 1;

      margin-bottom: 22px;

      text-shadow: 0 8px 28px rgba(6, 13, 26, 0.34);

      text-wrap: balance;

    }

    .about h4 span {

      display: inline;

      background: linear-gradient(135deg, var(--accent), #f0c040);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

      background-clip: text;

    }

    .about-sub{

      color: white;

    }

/* Breadcrumb Section */

        .breadcrumb {

            padding: 0px 10px;

            font-size: 0.75rem;

            text-transform: uppercase;

            letter-spacing: 1px;

            color: var(--line);

            

        }



        .breadcrumb span {

            margin-right: 10px;

        }



        .breadcrumb .active {

            color: var(--accent);

            font-weight: bold;

        }

 



    

/* --- SECTION 1: LEADERSHIP --- */

.leadership-section {

  max-width: 1200px;

  margin: 0 auto;

  padding: 50px 15px 0 10px;

  text-align: center;

}

.header-container{

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.header-container h2 {

  margin: 0 0 15px 0;

  font-size: clamp(1.8rem, 3.5vw, 2.8rem);

    line-height: 1.15;

    font-weight: 400;

    

}

.about-desc{

  color: var(--gray-700);

      font-size: 1.05rem;

      line-height: 1.65;

      text-align:center;

}



/* --- UPDATED CARDS LAYOUT --- */

.cards-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px; /* Increased gap to give elements more breathing room */

  align-items: stretch; /* Forces both image and text to match heights */

  margin-top: 50px;

}



.profile-card {

  display: flex;

  align-items: flex-end; /* Keeps alignment grounded at the bottom baseline */

  text-align: left;

  border-right: 1px solid #eaeaea;

  padding-right: 20px;

}



.profile-card:last-child {

  border-right: none;

  

}



/* Dynamic Tall Image Layout */

.image-wrapper {

  flex: 0 0 45%;

  max-width: 45%;

  align-self: stretch; /* Stretches the image box to match the text column exactly */

  display: flex;

  align-items: flex-end;

}



.image-wrapper img {

  width: 100%;

  height: 100%; /* Spans the entire height dictated by the text side */

  max-height: 480px; /* Set a generous upper limit so it doesn't get overly massive */

  object-fit: cover; /* Crops cleanly within the box bounds without distortion */

  object-position: bottom center; /* Keeps the subject's face/shoulders properly framed from the baseline */

  display: block;

}



/* Text Content Column */

.info-wrapper {

  flex: 0 0 55%;

  max-width: 55%;

  padding-left: 20px;

  padding-bottom: 20px; /* Aligns text cleanly against the taller image footprint */

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  justify-content: flex-end; /* Pushes text down to line up with the base of the image */

}



.info-wrapper h3 {

  font-size: 16px;

  color: #1a1a1a;

  line-height: 1.3;

  margin: 0 0 8px 0;

  font-weight: 700;

}



.info-wrapper .role {

  font-size: 12px;

  color: #1B8B3D;

  font-weight: 600;

  display: block;

  margin-bottom: 15px;

}



.info-wrapper .quote-icon {

  color: #FFF100;

  font-size: 45px;

  font-family: Georgia, serif;

  line-height: 1;

  display: block;

  margin-bottom: -15px;

  margin-left: -4px;

}



.info-wrapper .quote-text {

  font-size: 13px;

  color: #444444;

  line-height: 1.5;

  margin: 0;

}

/* section 1 : banner */

/* --- NEW: Added base container rules for desktop --- */

.banner-sections {

  position: relative;

  height: 450px; /* Set your preferred desktop banner height here */

  overflow: hidden; /* Clips the 130% image so it doesn't leak out */

  width: 100%;

}



.banner-bg-image {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 130%; /* Extra height gives room for the image to scroll vertically */

  object-fit: cover;

  object-position: center center;

  z-index: 1;

  will-change: transform; /* Optimizes browser rendering performance */

}



.banner-overlays {

  background: linear-gradient(to right, rgba(0, 30, 60, 0.45) 30%, rgba(0, 0, 0, 0.1) 100%);

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  position: absolute; /* Changed to absolute to lock perfectly over the container */

  top: 0;

  left: 0;

  z-index: 2; /* Content stays securely on top */

}



.banner-contents {

  max-width: 1200px;

  margin: 0 auto;

  width: 100%;

  /* padding: 0 130px; */

  box-sizing: border-box;

}







.banner-contents h2 {

  color: #ffffff;

  font-size: 38px;

  line-height: 1.2;

  margin: 0;

  font-weight: 700;

  letter-spacing: 0.5px;

}

.banner-contents h2 span{

  color: var(--accent);

}

/* --- RESPONSIVE DESIGN --- */

@media (max-width: 992px) {

  .about h2{

    line-height: 1;

  }

  .banner-sections {

    height: 380px;

  }

  .banner-bg-image {

    height: 100%; /* Resets height on mobile to save device processing power */

  }

  .banner-contents .orange-bar{

    display: none;

  }

  .banner-contents h2 {

    font-size: 30px;

  }

}

/* --- SECTION 2: BANNER CALLOUT (WITH PARALLAX) --- */

.banner-section {

  height: 450px;

  position: relative;

  width: 100%;

  overflow: hidden; /* Crops the moving image edges cleanly */

}



/* Updated styling to allow parallax movement */

.banner-section {

  position: relative;

  height: 450px; /* Kept your desktop height */

  overflow: hidden; /* Cleanly cuts off image scaling bounds */

  width: 100%;

}



.banner-bg-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%; /* Changed to 100% to match wide aspect ratio cleanly */

  object-fit: cover;

  object-position: center center;

  z-index: 1;

  will-change: transform; /* Signals the browser to use hardware acceleration */

}



.banner-overlay {

  /* background: linear-gradient(to right, rgba(0, 30, 60, 0.45) 30%, rgba(0, 0, 0, 0.1) 100%); */

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  position: absolute; 

  top: 0;

  left: 0;

  z-index: 2; 

}



.banner-content {

  max-width: 1200px;

  margin: 0 auto;

  width: 100%;

  padding: 0 20px;

  box-sizing: border-box;

}



.banner-content .orange-bar {

  display: block;

  width: 40px;

  height: 4px;

  background-color: #e67e22;

  margin-bottom: 25px;

}



.banner-content h2 {

  color: #ffffff;

  font-size: 38px;

  line-height: 1.2;

  margin: 0;

  font-weight: 700;

  letter-spacing: 0.5px;

}



/* --- RESPONSIVE DESIGN --- */

@media (max-width: 992px) {

  .banner-section {

    height: 380px;

  }

  .banner-bg-img {

    transform: none !important; /* Disables script zoom scaling on mobile screens */

  }

  .banner-content .orange-bar{

    display: none;

  }

  .banner-content h2 {

    font-size: 30px;

  }

}



/* --- RESPONSIVE DESIGN --- */

@media (max-width: 992px) {

  .cards-container {

    grid-template-columns: 1fr;

    gap: 50px;

  }

  

  .profile-card {

    border-right: none;

    border-bottom: 1px solid #eaeaea;

    padding-bottom: 40px;

    padding-right: 0;

    max-width: 500px;

    margin: 0 auto;

  }



  .image-wrapper img {

    height: 350px; /* Balanced fixed height for single column mobile stack */

  }

  

}



.about-history-values *,

.about-history-values *::before,

.about-history-values *::after {

  box-sizing: inherit;

}



/* ==========================================================================

   SECTION 1: OUR HISTORY

   ========================================================================== */

.history-section {

  max-width: 1400px;

  margin: 0 auto;

  padding: 80px 90px;

  display: flex;

  gap: 40px;

  align-items: flex-start; /* Keeps columns anchored to the top baseline */

}



/* LEFT COLUMN: Increased width format to give long text more space */

.history-left {

  flex: 0 0 55%; 

  max-width: 55%;

  text-align: left;

}



/* RIGHT COLUMN: Decreased width and adjusted container properties */

.history-right {

  flex: 0 0 45%; 

  max-width: 45%;

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* Creates two equal columns */

  gap: 15px 10px; /* Reduced vertical gap to decrease the overall height profile */

  align-items: start;

  

  /* Alignment calculation to stay level with the first paragraph on the left */

  margin-top: 50px; 

}



/* Milestone Card styles optimized for the narrower right section */

.milestone-card {

  text-align: center;

  padding: 0 15px 15px 15px; /* Scaled down padding to tighten up overall element height */

  /* Adds a subtle right border to the first column cards only */

  border-right: 1px solid #eaeaea; 

}



/* Removes the right border from the second column cards */

.milestone-card:nth-child(2n) {

  border-right: none;

}



.icon-wrapper {

  height: 40px; /* Reduced box height to match shorter aspect footprint */

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 15px; /* Shorter separation margin */

}



.fa-icon {

  font-size: 28px; /* Slightly scaled down icon layout footprint */

  color: var(--brand-green); /* Matches the orange icons in the image */

}



.milestone-year {

  color: var(--brand-green);

  font-size: 28px; /* Proportionally scaled down type scale */

  font-weight: 700;

  margin-bottom: 6px;

  line-height: 1;

}



.milestone-card h4,

.milestone-title-only {

  font-size: 14px; /* Balanced font size fitting for compressed cards */

  color: #0b1a30;

  margin: 0 0 6px 0;

  font-weight: 700;

}



.milestone-card p, 

.milestone-desc {

  font-size: 12.5px; /* Refined type scale readability factor */

  color: #666666;

  line-height: 1.4;

  margin: 0;

  max-width: 200px; /* Adjusted to prevent wrapping breaking points in narrower row widths */

  margin-left: auto;

  margin-right: auto;

}



/* --- RESPONSIVE DESIGN ADJUSTMENTS --- */



/* Desktop Breakpoint: Retains internal tracking balance perfectly */

@media (max-width: 1400px) {

  .history-section {

    padding: 60px 40px; 

  }

}



/* Tablet Breakpoint: Stacks structural boxes vertically */

@media (max-width: 1024px) {

  .history-section {

    flex-direction: column;

    padding: 60px 30px; 

    gap: 0;

  }

  

  .history-left {

    max-width: 100%;

    flex: 0 0 100%;

  }

  

  .history-right {

    max-width: 100%;

    flex: 0 0 100%;

    margin-top: 40px; 

    grid-template-columns: repeat(2, 1fr); /* Retains clean 2-column view layouts */

  }

}



/* Small Tablet Viewport: Adapts card elements layout space dynamically */

@media (max-width: 900px) {

  .history-right {

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  }

}



/* Mobile Breakpoint: Stacks into single-column layout tracks gracefully */

@media (max-width: 640px) {

  .history-section {

    padding: 50px 20px; 

  }



  .history-right {

    grid-template-columns: 1fr; /* Stacks into 1 single column on mobile screens */

    gap: 25px 0;

    margin-top: 30px;

  }

  

  .milestone-card {

    border-right: none;

    border-bottom: 1px solid #eaeaea;

    padding: 0 0 20px 0; 

  }

  

  .milestone-card:last-child {

    border-bottom: none;

    padding-bottom: 0;

  }

}





/* ==========================================================================

   SECTION 2: OUR VALUES

   ========================================================================== */

/* .values-section {

  background-color: #06152b;

  padding: 45px 10px;

}



.values-container {

  max-width: 1200px;

  margin: 0 auto;

}



.values-sub-title {

  color: #e67e22;

  font-size: 18px;

  font-weight: 700;

  letter-spacing: 1px;

  display: block;

  text-align: center;

  margin-bottom: 35px;

}



.values-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}



.value-item {

  display: flex;

  align-items: flex-start;

  gap: 15px;

  border-right: 1px solid rgba(255, 255, 255, 0.1);

  padding-right: 15px;

}



.value-item:last-child {

  border-right: none;

  padding-right: 0;

}

.value-item:hover {

  transform: translateY(-10px);

}





.value-icon-box {

  flex-shrink: 0;

  margin-top: 2px;

}



.fa-icon-white {

  font-size: 26px;

  color: #ffffff;

  opacity: 0.9;

}



.value-content h3 {

  color: #ffffff;

  font-size: 15px;

  margin: 0 0 8px 0;

  font-weight: 600;

}



.value-content p {

  color: #a3b3c7;

  font-size: 13px;

  line-height: 1.5;

  margin: 0;

} */



/* Hide elements natively before GSAP initializes them */

.values-title,

.value-card {

  opacity: 0;

  will-change: transform, opacity; /* Hardware accelerates the animations */

}





/* Container Reset & Section Base */

.values-section {

  position: relative;

  background-color: #030d1a;

  background-image: radial-gradient(circle at top center, #0a2239 0%, #030d1a 100%);

  padding: 50px 100px;

  overflow: hidden;

  width: 100%;

}



/* Sub-Surface Canvas Layer Positioning */

.particle-backdrop {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 1;

}



/* Foreground Content Depth Setup */

.values-container {

  position: relative;

  max-width: 1400px;

  margin: 0 auto;

  z-index: 2;

}



/* Central Header Styling */

.values-title {

  color: #ffffff;

  font-size: 42px;

  font-weight: 400;

  letter-spacing: -0.5px;

  text-align: center;

  margin-bottom: 60px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}



/* Layout Response Grid */

.values-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

  perspective: 1000px;

}



/* Premium Glassmorphism Floating Cards */

.value-card {

  position: relative;

  background: rgba(255, 255, 255, 0.02);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 32px;

  padding: 35px 24px;

  display: flex;

  flex-direction: column;

  transform-style: preserve-3d;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 

              border-color 0.5s ease, 

              box-shadow 0.5s ease, 

              background 0.5s ease;

}



/* Kinetic 3D Hover Acceleration */

.value-card:hover {

  transform: translateY(-10px) scale(1.02);

  background: rgba(255, 255, 255, 0.04);

  border-color: rgba(255, 255, 255, 0.25);

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 

              0 0 50px rgba(255, 255, 255, 0.03);

}



/* Micro-Interaction Background Pointer Radial Tracker */

.card-glow-effect {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  border-radius: 14px;

  pointer-events: none;

  background: radial-gradient(350px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(255, 255, 255, 0.06), transparent 60%);

  opacity: 0;

  transition: opacity 0.4s ease;

}



.value-card:hover .card-glow-effect {

  opacity: 1;

}



/* Card Block Header Elements */

.card-header {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 20px;

  transform: translateZ(25px);

}



/* Minimal Vector Icon Framing */

.value-icon-box {

  flex-shrink: 0;

  width: 46px;

  height: 46px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.04);

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.fa-icon-custom {

  font-size: 18px;

  color: #ffffff;

  opacity: 0.65;

  transition: all 0.4s ease;

}



/* Interactive Card Focal Shift Updates */

.value-card:hover .value-icon-box {

  background: rgba(255, 255, 255, 0.12);

  border-color: rgba(255, 255, 255, 0.3);

  transform: rotate(6deg) scale(1.05);

}



.value-card:hover .fa-icon-custom {

  opacity: 1;

  text-shadow: 0 0 12px rgba(255, 255, 255, 0.7);

}



/* Typography Hierarchy Setup */

.card-header h3 {

  color: #ffffff;

  font-size: 19px;

  font-weight: 500;

  margin: 0;

  letter-spacing: -0.2px;

}



.value-content {

  transform: translateZ(15px);

}



.value-content p {

  color: #94a3b8;

  font-size: 13.5px;

  line-height: 1.6;

  margin: 0;

  font-weight: 300;

}



/* Responsive Framework Breakpoints Matrix */

@media (max-width: 1024px) {

  .values-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

  }

}



@media (max-width: 640px) {

  .values-grid {

    grid-template-columns: 1fr;

  }

  .values-title {

    font-size: 34px;

    margin-bottom: 40px;

  }

}



/* ==========================================================================

   RESPONSIVE DESIGN

   ========================================================================== */

@media (max-width: 992px) {

  .history-section {

    flex-direction: column;

    gap: 40px;

    padding: 60px 20px;

  }

  

  .history-left, 

  .history-right {

    flex: 0 0 100%;

    max-width: 100%;

  }



  .history-right {

    grid-template-columns: repeat(2, 1fr);

    gap: 40px 0;

    margin-top: 0; /* Clears calculation-based shifting for tablet rows */

  }



  .milestone-card:nth-child(2) {

    border-right: none;

  }

  

  .values-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 40px 20px;

  }



  .value-item:nth-child(2) {

    border-right: none;

  }

}



@media (max-width: 576px) {

  .history-right,

  .values-grid {

    grid-template-columns: 1fr;

  }



  .milestone-card,

  .value-item {

    border-right: none;

    padding-right: 0;

    border-bottom: 1px solid #eaeaea;

    padding-bottom: 30px;

  }



  .value-item {

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  }



  .milestone-card:last-child,

  .value-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

  }

}



/* team section */

        /* Container Box Settings */:root {

    /* Safe fallback color variables if not declared globally */

    --gray-500: #6c757d;

}



.team-section {

    background-color: #ffffff;

    padding: 80px 90px; /* Base padding matching desktop configurations */

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    align-items: flex-start;

    gap: 40px;

}



/* Left Side: Text Column - Unchanged 33.333% grid proportion */

.team-intro {

    flex: 0 0 33.333%;

    max-width: 33.333%;

    text-align: left;

}



.team-intro p {

    font-size: 14px;

    line-height: 1.6;

    color: #58595b;

    

}



/* Right Side: Cards Row Layout - Unchanged 66.666% grid proportion */

.team-grid {

    flex: 0 0 66.666%;

    max-width: 66.666%;

    display: grid;

    /* Uses dynamic fitting: wraps cards gracefully if space shrinks before hitting the break-point */

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

    margin-top: 32px; 

}



/* Individual Card Blocks */

.team-card {

    padding: 30px 18px;

    background: #ffffff;

    border: 1px solid #eaeaea;

    /* border-radius: 0px; */

    border-bottom: 4px solid #1B8B3D;

    display: flex;

    flex-direction: column; 

    align-items: flex-start;

    gap: 15px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.02);

    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;

}



.team-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 12px 24px rgba(0,0,0,0.08);

}



/* NEW: Flex row container for single-line icon and header alignment */

.card-header {

    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

}



/* Thin Circle Icon Frame */

.icon-circle {

    width: 54px;

    height: 54px;

    border: 1px solid var(--brand-green);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.team-card i {

    font-size: 1.25rem;

    color: var(--brand-green);

}



/* Internal Card Typography Layout */

.card-content {

    display: flex;

    flex-direction: column;

    text-align: left;

    width: 100%;

}



.team-card h3 {

    margin: 0; /* Reset margins for clean flex centering */

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

    color: #111111;

}



.team-card p {

    margin: 0;

    font-size: 0.9rem;

    color: var(--gray-500);

    line-height: 1.7;

}



.team-card strong {

    color: #111111;

    font-weight: 700;

}



/* --- RESPONSIVE DESIGN ADJUSTMENTS --- */



@media (max-width: 1400px) {

    .team-section {

        padding: 60px 40px ; 

    }

    .team-grid{

      padding-right: 20px;

    }

}



@media (max-width: 1024px) {

    .team-section {

        flex-direction: column;

        padding: 60px 30px; 

        gap: 0;

    }

    

    .team-intro {

        max-width: 100%;

        flex: 0 0 100%;

    }

    

    .team-grid {

        max-width: 100%;

        flex: 0 0 100%;

        margin-top: 40px; 

        grid-template-columns: repeat(3, 1fr);

        gap: 10px;

        padding-right: 20px;

    }

}



@media (max-width: 992px) {

    .team-grid {

        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    }

}



@media (max-width: 640px) {

    .team-section {

        padding: 50px 20px; 

    }



    .team-grid {

        grid-template-columns: 1fr;

        gap: 10px;

        padding-right: 10px;

    }

    

    .team-card {

        padding: 24px;

        /* REMOVED: flex-direction row rewrite rules since card-header handles alignment */

    }

}







/* --- ACHIEVEMENT SECTION STYLE BACKUPS --- */

.achievement-banner {

  position: relative;

  background-color: #031424; 

  border-radius: 6px;

  padding: 40px;

  margin: 0 60px 50px 60px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

  overflow: hidden; 

}



.banner-bg-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  z-index: 1;

}



.banner-contents {

  position: relative;

  z-index: 3; 

  display: flex;

  align-items: center;

  gap: 25px;

}





/* Pseudo-element replaces the CSS gradient mix */

.achievement-banner::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to right, rgba(3, 20, 36, 0.95), rgba(3, 20, 36, 0.7));

  z-index: 2;

}



.laurel-icon {

  flex-shrink: 0;

  width: 70px;

  height: 70px;

}



.gold-wreath {

  width: 100%;

  height: 100%;

}



.banner-text {

  display: flex;

  flex-direction: column;

  text-align: left;

}



.banner-text .yellow-title {

  color: #f1c40f; /* Vivid Golden Yellow */

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 0.5px;

  margin-bottom: 4px;

}



.banner-text h2 {

  color: #ffffff;

  font-size: 20px;

  font-weight: 700;

  letter-spacing: 0.3px;

  margin: 0;

}





/* --- BOTTOM CERTIFICATIONS SECTION --- */

.certifications-section {

  text-align: center;

  margin:60px 0 60px 0;

  

}



/* .certifications-section .section-title {

  display: block;

  font-size: 25px;

  font-weight: 700;

  color: #111827;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 35px;

} */



.slider-container {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 30px;

  position: relative;

  margin:40px 0 40px;

}



/* Rounded Navigation Buttons */

.nav-btn {

  background-color: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 50%;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: #4b5563;

  font-size: 14px;

  transition: all 0.2s ease;

  box-shadow: 0 2px 5px rgba(0,0,0,0.04);

  flex-shrink: 0;

}



.nav-btn:hover {

  background-color: #f9fafb;

  border-color: #d1d5db;

  color: #111827;

}



/* Certifications Layout Track */

.cert-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

  width: 100%;

  max-width: 900px;

}

.certification-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 40px;

  width: 100%;

  max-width: 900px;

}

.cert-grids {

  display: flex;

  justify-content: center;

  gap: 40px;

  width: 100%;

  max-width: 300px;

}



.cert-item {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.cert-cards {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  padding: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.03);

  margin-bottom: 15px;

  width: 100%;

  aspect-ratio: 4 / 3;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.2s ease;

}



.cert-cards:hover {

  transform: translateY(-4px);

}



.cert-cards img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  display: block;

}



.cert-label {

  font-size: 13px;

  font-weight: 700;

  color: #1f2937;

}



/* --- BUTTON CONTAINER --- */

.action-container {

  display: flex;

  justify-content: center;

  margin-top: 10px;

}



.btn-download {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background-color: var(--brand-green); 

  color: #ffffff;

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;

  padding: 12px 32px;

  border-radius: 4px;

  transition: background-color 0.2s ease;

  box-shadow: 0 2px 6px rgba(243, 112, 33, 0.2);

}



.btn-download:hover {

  background-color: #b39108;

}



/* --- RESPONSIVE RE-STYLES --- */

@media (max-width: 992px) {

  .cert-grid {

    gap: 20px;

  }

}



@media (max-width: 768px) {

  .achievement-banner {

    padding: 30px 20px;

    margin: 0 15px 30px 15px;

  }

  

  .banner-contents {

    flex-direction: column;

    text-align: center;

    gap: 15px;

  }



  .banner-text {

    text-align: center;

  }



  .banner-text h2 {

    font-size: 17px;

  }



  .cert-grid {

    grid-template-columns: 1fr;

    max-width: 320px;

    gap: 35px;

  }

}



        /* services page */

       



     /* Services Section CSS Styles */

.service-banner {

  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;

  height: 100%;

}



.service-banner img {

  width: 100%;

  height: 100%;

  /* Fixes full-size aspect ratio clipping gracefully inside a smaller container */

  object-fit: cover;     

  object-position: center; /* Focuses on the center of your building photo */

  display: block;

  background-attachment: fixed;

}





.services-section {

  padding: 20px 20px 50px;

}



.section-headers {

  text-align: center;

  padding: 80px 0 0;

  max-width: 720px;

}



.section-headers.center {

  text-align: center;

  margin-left: auto;

  margin-right: auto;

}



.section-headers .section-title {

  font-size: clamp(1.5rem, 3vw, 2.5rem);

  line-height: 1.15;

  font-weight: 400;

}



.heading-line{

    display: flex;

    align-items: center;

    gap: 15px;

    margin:30px 100px;

}

.heading-line h2{

  font-size: clamp(1.5rem, 2vw, 2rem);

  line-height: 1.15;

  font-weight: 400;

}



.heading-line::after{

    content: "";

    flex: 1;

    height: 1px;

    background: var(--gray-300);

}



.services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}



@media (max-width: 992px) {

  .services-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 768px) {

  .services-grid {

    grid-template-columns: 1fr;

  }

}



/* --- ANIMATED CARDS --- */

.service-card {

  background: #ffffff;

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

  display: flex;

  flex-direction: column;

  position: relative;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 

              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  will-change: transform;

}



/* Interactive card hover */

.service-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 

              0 0 0 1px rgba(var(--brand-green), 0.05);

}



/* Snappy image stretch */

.card-image {

  height: 220px;

  overflow: hidden;

}



.card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  /* Fast start, springy finish */

  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

}





.service-card:hover .card-image img {

  transform: scale(1.12);

}



.card-contents {

  padding: 30px;

  flex-grow: 1;

  display: flex;

  flex-direction: column;

  position: relative;

  z-index: grow 2;

}



/* Top border line indicator on hover */

.card-contents::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background: #e6db0e;

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.service-card:hover .card-contents::before {

  transform: scaleX(1);

}



.card-title-wrapper {

  display: flex;

  align-items: center;

  margin-bottom: 10px;

}



/* Overshooting icon bounce */

.icon-box {

  color: var(--brand-red);

  font-size: 24px;

  margin-right: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.service-card:hover .icon-box {

  transform: scale(1.3);

}





.card-contents h3 {

  font-size: clamp(1.1rem, 6vw, 1.1rem);

  font-weight: 500;

  margin: 10px 0 12px;

  line-height: 1.15;

  letter-spacing: -0.025em;

  color: var(--gray-900);

}



.card-contents p {

  margin: 0 0 15px 0;

  flex-grow: 1;

  font-size: 0.9rem;

  line-height: 1.55;

  color: var(--gray-700);

}



/* Button & arrow micro-interactions */

.learn-more {

  color: var(--brand-green);

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  transition: opacity 0.2s ease;

}



/* Dynamic arrow recoil */

.learn-more .arrow {

  margin-left: 5px;

  display: inline-block;

  transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);

}



.service-card:hover .learn-more .arrow {

  transform: translateX(8px) scaleX(1.2);

}



/* services inner page */

.frame-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



/* ====================================================

   SCROLL INTERSECTION ANIMATION CORE STATES

======================================================= */

.scroll-trigger {

    opacity: 0;

    will-change: transform, opacity, filter;

    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Header & Immediate Hero Content run on immediate baseline load templates */

@keyframes slideNavDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

@keyframes fadeInDowns { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

@keyframes blurFadeReveal { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }

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



.global-nav-animate { animation: slideNavDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }

.fade-in-down { animation: fadeInDowns 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

.hero-title-reveal { animation: blurFadeReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.15s; }

.hero-para-fade { animation: verticalSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.3s; }



/* ====================================================

   DIFERENTIATED TIMING & VECTOR MAPS ON SCROLL ACTIVE

======================================================= */



/* Section Titles Entries */

.spec-title-anim.visible, .gallery-title-anim.visible {

    opacity: 1;

    transform: translateX(0);

}

.spec-title-anim { transform: translateX(-30px); }

.gallery-title-anim { transform: translateX(-30px); transition-delay: 0.1s; }



/* Specs Section Split Blocks */

.spec-box-left { transform: translateX(-50px); }

.spec-box-left.visible { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }



.spec-box-right { transform: translateX(50px); }

.spec-box-right.visible { opacity: 1; transform: translateX(0); transition-delay: 0.25s; } /* staggered row execution */



/* Metrics Data Pills Entries */

.pill-pop-1 { transform: scale(0.85); }

.pill-pop-1.visible { opacity: 1; transform: scale(1); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0.4s; }



.pill-pop-2 { transform: scale(0.85); }

.pill-pop-2.visible { opacity: 1; transform: scale(1); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0.52s; }



/* ====================================================

   DENSITY TIMINGS FOR IMAGE GALLERY MATRIX

======================================================= */

/* Image 1: Main Feature (Scale up) */

.tile-scale-up { transform: scale(0.92); }

.tile-scale-up.visible { opacity: 1; transform: scale(1); transition-delay: 0.1s; }



/* Image 2: Square Tile (Slide up) */

.tile-slide-up { transform: translateY(40px); }

.tile-slide-up.visible { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }



/* Image 3: Square Tile (Slide in from left) */

.tile-slide-left { transform: translateX(-40px); }

.tile-slide-left.visible { opacity: 1; transform: translateX(0); transition-delay: 0.26s; }



/* Image 4: Square Tile (3D perspective flip) */

.tile-flip-in { transform: perspective(400px) rotateX(-60deg); }

.tile-flip-in.visible { opacity: 1; transform: perspective(400px) rotateX(0deg); transition-delay: 0.34s; }



/* Image 5: Square Tile (Slide in from right) */

.tile-slide-right { transform: translateX(40px); }

.tile-slide-right.visible { opacity: 1; transform: translateX(0); transition-delay: 0.42s; }



/* Image 6: Square Tile (Delayed scale up) */

.tile-scale-up-delayed { transform: scale(0.92); }

.tile-scale-up-delayed.visible { opacity: 1; transform: scale(1); transition-delay: 0.5s; }



/* Image 7: Wide Feature (Diagonal transition slide) */

.tile-diagonal-in { transform: translate(-30px, 30px); }

.tile-diagonal-in.visible { opacity: 1; transform: translate(0, 0); transition-delay: 0.58s; }



/* Image 8: Square Tile (Smooth blur reveal) */

.tile-blur-in { filter: blur(10px); }

.tile-blur-in.visible { opacity: 1; filter: blur(0); transition-delay: 0.66s; }





/* ====================================================

   STANDARD COMPONENT DESIGN LAYER 

======================================================= */

/* HEADER AND NAVIGATION LAYER */

.global-header {

    background-color: #0b0f17;

    color: #ffffff;

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom: 1px solid #1a2233;

}



.header-inner {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 1.5rem;

    height: 4.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.brand-block {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.brand-emblem {

    background-color: #e5a93b;

    color: #0b0f17;

    font-weight: 700;

    width: 2.25rem;

    height: 2.25rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

    font-size: 0.875rem;

}



.co-name {

    display: block;

    font-weight: 700;

    font-size: 1rem;

    letter-spacing: 0.03em;

}



.co-division {

    display: block;

    font-size: 0.5625rem;

    color: #8c9ba5;

    letter-spacing: 0.02em;

}



.nav-matrix {

    display: none;

    gap: 1.75rem;

}



@media (min-width: 900px) {

    .nav-matrix { display: flex; }

}



.nav-matrix a {

    color: #b0b9c1;

    font-size: 0.8125rem;

    font-weight: 600;

    text-decoration: none;

    letter-spacing: 0.04em;

    transition: color 0.2s ease;

}



.nav-matrix a:hover, .nav-matrix a.active-node {

    color: #e5a93b;

}



.mobile-menu-toggle {

    background: none;

    border: none;

    color: #ffffff;

    font-size: 1.125rem;

    cursor: pointer;

}



@media (min-width: 900px) {

    .mobile-menu-toggle { display: none; }

}





/* SERVICE DETAILS CONFIGURATION */

.specs-section {

    padding: 4.5rem 0;

    background-color: #ffffff;

}



.section-titles {

    border-left: 3px solid #168f36;

    padding-left: 0.875rem;

    margin-bottom: 2rem;

}



.section-titles h2 {

   font-size: clamp(1.5rem, 3vw, 2.5rem);

      font-weight: 500;

      line-height: 1.12;

      letter-spacing: -0.035em;

      margin-bottom: 15px;

}



.specs-grid {

    display: grid;

    grid-template-cols: 1fr;

    gap: 2rem;

}



@media (min-width: 768px) {

    .specs-grid { grid-template-cols: repeat(2, 1fr); }

}



.spec-detail-box {

    background-color: #fafafa;

    border: 1px solid #eeeff1;

    border-radius: 6px;

    padding: 1.75rem;

}



.spec-detail-box h3 {

    font-size: 0.9375rem;

    font-weight: 700;

    color: #0b0f17;

    margin-bottom: 0.75rem;

    letter-spacing: 0.01em;

}



.spec-detail-box p {

    font-size: 0.8125rem;

    color: #555e6b;

    line-height: 1.6;

    margin-bottom: 1.25rem;

}



.data-strip {

    display: flex;

    gap: 0.75rem;

}



.data-pill {

    background-color: #ffffff;

    border: 1px solid #f7c744;

    padding: 0.3125rem 0.625rem;

    border-radius: 4px;

    font-size: 0.6875rem;

    color: #3b434e;

}



/* HIGH-DENSITY GALLERY MATRIX SYSTEM */

.gallery-section {

    padding: 0 0 5.5rem 0;

    background-color: #ffffff;

}



.gallery-matrix {

    display: grid;

    /* Mobile First: 1 column layout on small phone viewports */

    grid-template-columns: repeat(1, 1fr);

    gap: 0.75rem;

}



@media (min-width: 640px) {

    .gallery-matrix { 

        /* Tablets: 2 columns layout */

        grid-template-columns: repeat(2, 1fr); 

    }

}



@media (min-width: 1024px) {

    .gallery-matrix { 

        /* Laptops/Desktops: 3 columns layout to achieve your exact row structure */

        grid-template-columns: repeat(3, 1fr); 

    }

}



.gallery-card {

    position: relative;

    aspect-ratio: 1 / 1;

    background-color: #eeeff1;

    border-radius: 16px;

    overflow: hidden;

    cursor: pointer;

}



/* RESPONSIVE ORDER SCALE FOR WIDE HERO IMAGES (IMAGE 1 & IMAGE 7) */

@media (min-width: 640px) and (max-width: 1023px) {

    .gallery-card.span-wide {

        grid-column: span 2;

        aspect-ratio: 16 / 9;

    }

}



@media (min-width: 1024px) {

    .gallery-card.span-wide {

        /* Forces the image to take up all 3 columns on desktop rows */

        grid-column: span 3;

        aspect-ratio: 21 / 7; /* Sleek, wide aspect ratio so it doesn't look stretched or tall */

    }

}



.gallery-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.gallery-card:hover img {

    transform: scale(1.06);

}



.gallery-card-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(11, 15, 23, 0.95) 0%, rgba(11, 15, 23, 0.3) 70%, transparent 100%);

    opacity: 0;

    display: flex;

    align-items: flex-end;

    padding: 1rem;

    transition: opacity 0.3s ease;

}



.gallery-card:hover .gallery-card-overlay {

    opacity: 1;

}



.overlay-inner {

    transform: translateY(12px);

    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    width: 100%;

}



.gallery-card:hover .overlay-inner {

    transform: translateY(0);

}



.gallery-tag {

    color: #e5a93b;

    font-size: 0.5625rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    display: block;

    margin-bottom: 0.25rem;

}



.overlay-inner h4 {

    color: #ffffff;

    font-size: 0.8125rem;

    font-weight: 600;

    margin-bottom: 0.125rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.overlay-inner p {

    color: #b0b9c1;

    font-size: 0.6875rem;

    line-height: 1.3;

}









/* old projects page */

/* Layout Configurations */





.projects-container {

  max-width: 1200px;

  margin: 0 auto;

}



.section-headers.center {

  text-align: center;

  margin-bottom: 40px;

}

.projects-div{

  padding: 20px 20px 50px;

}

/* Grid Matrix Setup */

.projects-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  padding: 20px 20px 80px;

}



@media (max-width: 992px) {

  .projects-grid { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 640px) {

  .projects-grid { grid-template-columns: 1fr; }

}



/* --- FLUID EXPANSION CARDS --- */

.project-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 16px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  position: relative;

  /* Fluid timing curve optimized for structural layout movements */

  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 

              box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),

              border-color 0.3s ease;

  will-change: transform, box-shadow;

}



/* Base scale lift and glowing shadow profile */

.project-card:hover {

  transform: translateY(-6px);

  border-color: var(--brand-green);

  box-shadow: 0 22px 40px rgba(0, 168, 107, 0.08);

}



.card-image-wrapper {

  position: relative;

  height: 240px;

  overflow: hidden;

  background-color: #fff;

}



/* Vignette overlay layer that reveals on hover */

.card-image-wrapper::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to bottom, rgba(15,23,42,0) 40%, rgba(15,23,42,0.4) 100%);

  opacity: 0;

  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-image-wrapper::after {

  opacity: 1;

}



.card-image-wrapper img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-image-wrapper img {

  transform: scale(1.05);

}



/* Category badge tracking transition */

.category-badge {

  position: absolute;

  top: 16px;

  left: 16px;

  background: rgba(255, 255, 255, 0.9);

  color: var(--gray-900);

  padding: 6px 14px;

  font-size: 12px;

  font-weight: 600;

  border-radius: 30px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  backdrop-filter: blur(8px);

  z-index: 2;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

  transition: background-color 0.3s ease, color 0.3s ease;

}



.project-card:hover .category-badge {

  background: #e6db0e;

  color: #ffffff;

}



/* Card Body content translation */

.card-body {

  padding: 26px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

  position: relative;

  background: #ffffff;

}



.card-body h3 {

  font-size: 12px;

  font-weight: 500;

  color: var(--gray-900);

  margin: 0 0 10px 0;

  line-height: 1.2;

  letter-spacing: -0.02em;

  /* Title slides upward slightly on hover */

  transform: translateY(0);

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-body h3 {

  transform: translateY(-2px);

}



.meta-row {

  display: flex;

  justify-content: space-between;

  font-size: 13px;

  color: #64748b;

  margin-bottom: 16px;

  transform: translateY(0);

  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .meta-row {

  transform: translateY(-2px);

}



.meta-row .location {

  display: flex;

  align-items: center;

  gap: 4px;

}



.card-body p {

  font-size: 14px;

  line-height: 1.55;

  color: var(--gray-600);

  margin: 0 0 24px 0;

  flex-grow: 1;

  transform: translateY(0);

  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-body p {

  transform: translateY(-2px);

}



/* Interactive accent bottom bar */

.card-body::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: var(--brand-green);

  transform: scaleX(0);

  transform-origin: center;

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-body::after {

  transform: scaleX(1);

}



/* Link component styling */

.view-project-link {

  color: var(--brand-green);

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  width: max-content;

}



.view-project-link .arrow {

  display: inline-block;

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .view-project-link .arrow {

  transform: translateX(5px);

}







.projects-container {

  max-width: 1200px;

  margin: 0 auto;

}



.section-headers.center {

  text-align: center;

  margin-bottom: 40px;

}



/* Grid Matrix Setup */

.projects-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}



@media (max-width: 992px) {

  .projects-grid { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 640px) {

  .projects-grid { grid-template-columns: 1fr; }

}



/* --- FLUID EXPANSION CARDS --- */

.project-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 16px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  position: relative;

  /* Fluid timing curve optimized for structural layout movements */

  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 

              box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),

              border-color 0.3s ease;

  will-change: transform, box-shadow;

  opacity: 0; /* Hidden until animation starts */

  animation: cardEntrance 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

}



/* Base scale lift and glowing shadow profile */

.project-card:hover {

  transform: translateY(-6px);

  border-color: var(--brand-green);

  box-shadow: 0 22px 40px rgba(0, 168, 107, 0.08);

}



.card-image-wrapper {

  position: relative;

  min-height: 240px;

  overflow: hidden;

  background-color: #fff;

}



/* Vignette overlay layer that reveals on hover */

.card-image-wrapper::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(to bottom, rgba(15,23,42,0) 40%, rgba(15,23,42,0.4) 100%);

  opacity: 0;

  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-image-wrapper::after {

  opacity: 1;

}



.card-image-wrapper img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-image-wrapper img {

  transform: scale(1.05);

}



/* Category badge tracking transition */

.category-badge {

  position: absolute;

  top: 16px;

  left: 16px;

  background: rgba(255, 255, 255, 0.9);

  color: var(--gray-900);

  padding: 6px 14px;

  font-size: 12px;

  font-weight: 600;

  border-radius: 30px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  backdrop-filter: blur(8px);

  z-index: 2;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

  transition: background-color 0.3s ease, color 0.3s ease;

}



.project-card:hover .category-badge {

  background: #e6db0e;

  color: #ffffff;

}



/* Card Body content translation */

.card-body {

  padding: 26px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

  position: relative;

  background: #ffffff;

}



.card-body h3 {

  font-size: 22px;

  font-weight: 600;

  color: var(--gray-900);

  margin: 0 0 10px 0;

  line-height: 1.2;

  letter-spacing: -0.02em;

  /* Title slides upward slightly on hover */

  transform: translateY(0);

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-body h3 {

  transform: translateY(-2px);

}



.meta-row {

  display: flex;

  justify-content: space-between;

  font-size: 15px;

  color: black;

  font-weight: 600;

  margin-bottom: 16px;

  transform: translateY(0);

  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .meta-row {

  transform: translateY(-2px);

}



.meta-row .location {

  display: flex;

  align-items: center;

  gap: 4px;

}



.card-body p {

  font-size: 14px;

  line-height: 1.55;

  color: var(--gray-600);

  margin: 0 0 24px 0;

  flex-grow: 1;

  transform: translateY(0);

  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-body p {

  transform: translateY(-2px);

}



/* Interactive accent bottom bar */

.card-body::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: var(--brand-green);

  transform: scaleX(0);

  transform-origin: center;

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .card-body::after {

  transform: scaleX(1);

}



/* Link component styling */

.view-project-link {

  color: var(--brand-green);

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  width: max-content;

}



.view-project-link .arrow {

  display: inline-block;

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-card:hover .view-project-link .arrow {

  transform: translateX(5px);

}



/* Load More Interaction Button */

.load-more-container {

  text-align: center;

  margin-top: 50px;

}



.load-more-btn {

  background: #ffffff;

  border: 1px solid var(--gray-200);

  padding: 14px 32px;

  font-size: 14px;

  font-weight: 600;

  color: var(--gray-900);

  border-radius: 30px;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;

}



.load-more-btn:hover {

  border-color: var(--brand-green);

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(0, 168, 107, 0.12);

}



.load-more-btn .chevron {

  font-size: 16px;

  line-height: 1;

  display: inline-block;

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.load-more-btn:hover .chevron {

  transform: translateX(3px);

}

/* Define the entry path and opacity change */

@keyframes cardEntrance {

  from {

    opacity: 0;

    transform: scale(0.92) translateY(30px);

  }

  to {

    opacity: 1;

    transform: scale(1) translateY(0);

  }

}



/* Stagger execution timing by card position index */

.project-card:nth-child(1) { animation-delay: 100ms; }

.project-card:nth-child(2) { animation-delay: 250ms; }

.project-card:nth-child(3) { animation-delay: 400ms; }

.project-card:nth-child(4) { animation-delay: 550ms; }





/* projects inner page */

/* Layout Split Grid */



.project-container {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 60px;

    max-width: 1400px;

    margin: 60px auto;

    padding: 0 4%;

}



/* Left Content Column */

.story-block {

    margin-bottom: 40px;

}



.story-block h2 {

  border-left: 3px solid #168f36;

  padding-left: 0.875rem;

    font-size: 1.8rem;

    margin-bottom: 15px;

}

/* 

.story-block p {

    color: #334155;

    font-size: 1.1rem;

} */



/* Media Gallery */

.project-gallery {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 50px;

}



.gallery-item.large {

    grid-column: span 2;

}



.placeholder-img {

    background-color: #f8fafc;

    border: 1px solid #cbd5e1;

    height: 300px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #666666;

    font-weight: 500;

    border-radius: 8px;

}



.gallery-item.large .placeholder-img {

    height: 450px;

}

.gallery-item img {

    width: 100%;

    height: 300px;

    object-fit: cover; /* Keeps image proportions perfect without stretching */

    border-radius: 16px;

    border: 1px solid var(--border-color);

}



.gallery-item.large img {

    height: 450px; /* Makes the main top image taller */

}





.gallery-item.large .placeholder-img {

    height: 450px;

}



/* Right Sticky Sidebar */

.project-meta {

    position: relative;

}



.meta-card {

    position: sticky;

    top: 40px;

    background-color: #f8fafc;

    border: 1px solid #cbd5e1;

    padding: 30px;

    border-radius: 16px;

}



.meta-card h3 {

    margin-bottom: 20px;

    font-size: 1.4rem;

}



.meta-items {

    display: flex;

    justify-content: space-between;

    padding: 12px 0;

    border-bottom: 1px solid #cbd5e1;

    font-size: 0.95rem;

}



.meta-label {

    color: #666666;

    font-weight: 500;

}



.meta-value {

    font-weight: 600;

    text-align: right;

}



.btn-live {

    display: block;

    text-align: center;

    background-color: var(--brand-green-light);

    color: white;

    text-decoration: none;

    padding: 14px;

    margin-top: 25px;

    border-radius: 6px;

    font-weight: 600;

    transition: background 0.2s;

}



.btn-live:hover {

    background-color: var(--brand-green);

}



/* Results Section */

.project-results {

    background-color: var(--brand-green);

    color: white;

    padding: 80px 4%;

    text-align: center;

}



.project-results h2 {

  color: white;

    margin-bottom: 40px;

    font-size: 2rem;

    font-weight: 500;

}

.result-card{

  display: flex;

  flex-direction: column;

}



.results-grid {

    display: flex;

    justify-content: space-around;

    max-width: 1200px;

    margin: 0 auto;

    gap: 30px;

}



.result-number {

    display: inline-block;

    min-width: 150px; 

    font-variant-numeric: tabular-nums; 

    font-size: 3.5rem;

    font-weight: 700;

    color: #FFF100;

}



.result-label {

    font-size: 1rem;

    color: white;

}



/* Footer Pagination */

.project-pagination {

    display: flex;

    justify-content: space-between;

    padding: 40px 4%;

    border-top: 1px solid var(--border-color);

    max-width: 1400px;

    margin: 0 auto;

}



.nav-project {

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 600;

}



.nav-project:hover {

    color: var(--accent-color);

}



/* Responsive Breakpoints */

@media (max-width: 968px) {

    .project-container {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .project-meta {

        order: -1; /* Puts details card above text on mobile */

    }



    .meta-card {

        position: relative;

        top: 0;

    }

}



@media (max-width: 600px) {

    .hero-overlay h1 {

        font-size: 2.2rem;

    }



    .project-gallery {

        grid-template-columns: 1fr;

    }



    .gallery-item.large {

        grid-column: span 1;

    }



    .results-grid {

        flex-direction: column;

        gap: 40px;

    }

}





/* contacts page */



    /* Master Grid Layout Split */

.contact-page-section {

    display: grid;

    grid-template-columns: 1fr 1fr; /* Allocates more width to the right side for the card row */

    gap: 48px;

    align-items: center;

    max-width: 1440px;

    margin: 0 auto;

    padding: 60px 24px;

}



/* Left Side: Header Content Configuration */

.contact-headers {

    text-align: left;

  padding: 30px 100px 0;

  max-width: 720px;

}

@media (max-width:1200px) {

  .contact-headers {

    max-width: none;

    padding: 30px 40px 0;

  }

}





.section-title {

    font-size: 38px;

    font-weight: 400;

    color: #111827;

    line-height: 1.2;

    margin-bottom: 16px;

}



.about-text {

    font-size: 16px;

    color: #4b5563;

    line-height: 1.6;

}



/* Right Side: Cards Row Matrix Layout */

.contact-container {

    display: grid;

    grid-template-columns: repeat(3, 1.5fr); /* Forces cards into a 3-column row layout */

    gap: 20px;

    perspective: 1000px;

}



/* Individual Vertical Card Structure */

.contact-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 25px 10px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.01);

    border: 1px solid #f1f5f9;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    opacity: 0;

    transform: translateY(40px);

    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease;

}



.card-icon {

    width: 48px;

    height: 48px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}



/* Staggered Entry Timings */

.contact-card:nth-child(1) { animation-delay: 0.2s; }

.contact-card:nth-child(2) { animation-delay: 0.3s; }

.contact-card:nth-child(3) { animation-delay: 0.4s; }



/* Micro-animations and Hover Aura */

.contact-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(16, 185, 129, 0.04), transparent 40%);

    z-index: 1;

    opacity: 0;

    transition: opacity 0.5s ease;

    pointer-events: none;

}



.contact-card:hover {

    transform: translateY(-6px) scale(1.02);

    box-shadow: 0 20px 32px rgba(16, 185, 129, 0.06), 0 4px 12px rgba(0, 0, 0, 0.01);

    border-color: rgba(16, 185, 129, 0.2);

}



.contact-card:hover::before { opacity: 1; }

.contact-card:hover .card-icon { transform: scale(1.15); }

.contact-card:nth-child(1):hover .card-icon { animation: phoneRing 0.5s ease-in-out infinite alternate; }

.contact-card:nth-child(2):hover .card-icon { animation: mailFloat 0.6s ease-in-out infinite alternate; }

.contact-card:nth-child(3):hover .card-icon { animation: pinDrop 0.5s ease-in-out infinite alternate; }



.card-title { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 4px 0; }

.card-desc { font-size: 14px; color: #6b7280; margin: 0 0 16px 0; }

.card-link { font-size: 15px; font-weight: 600; color: #047857; text-decoration: none; word-break: break-all; }

.contact-card:hover .card-link {

            color: var(--brand-green);

            text-decoration: underline;

        }



        .contact-card:hover .card-link::after {

            transform: scaleX(1);

            transform-origin: bottom left;

        }



/* Responsive Media Query Viewports */

@media (max-width: 1200px) {

    .contact-page-section {

        grid-template-columns: 1fr; /* Stacks the main left header block above the cards */

        gap: 40px;

        padding: 40px 20px;

    }

    .section-headers {

        text-align: center;

        max-width: 600px;

        margin: 0 auto;

    }

}



@media (max-width: 768px) {

    .contact-container {

        grid-template-columns: 1fr; /* Collapses the card row into a single column stack on tablet/mobile */

        gap: 16px;

        max-width: 400px;

        margin: 0 auto;

        width: 100%;

    }

}



/* Keyframes */

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

@keyframes phoneRing { 0% { transform: scale(1.15) rotate(0deg); } 100% { transform: scale(1.15) rotate(10deg); } }

@keyframes mailFloat { 0% { transform: scale(1.15) translateY(0); } 100% { transform: scale(1.15) translateY(-5px); } }

@keyframes pinDrop { 0% { transform: scale(1.15) translateY(0); } 100% { transform: scale(1.15) translateY(4px); } }



.location-section {

    max-width: 1000px;

    margin: 0 auto;

    /* padding: 40px 20px; */

    /* font-family: system-ui, -apple-system, sans-serif; */

    /* background-color: #f9f9f9; */

  }

  .location-section h3{

        font-size: 2rem;

    font-weight: 400;

    color: var(--brand-green);

    line-height: 1.2;

    margin: 16px 15px;

  }

  @media (max-width:1080px) {

    .location-section h3{

      margin-left: 50px;

    

    }

  }

  @media (max-width:900px) {

    .location-section h3{

      margin-left: 50px;

          

    }

  }

  .location-card {

    display: flex;

    flex-direction: column;

    background: #f9f9f9;;

    border-radius: 12px;

    padding: 30px;

    margin-bottom: 30px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.04);

    gap: 30px;

    align-items: center;

  }

  .card-text {

    flex: 1;

    width: 100%;

  }

  .card-images {

    flex: 1;

    width: 100%;

  }

  .card-images img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius: 12px;

  }

  .location-card h2 {

    margin-top: 0;

    margin-bottom: 20px;

    color: #2d3748;

    font-size: 1.35rem;

  }

  .info-group {

    margin-bottom: 15px;

  }

  .info-group h3 {

    margin: 0;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: #a0aec0;

  }

  .info-group p {

    margin: 5px 0 0 0;

    font-size: 0.9rem;

    color: #4a5568;

  }



  /* Desktop layout styling */

  @media (min-width: 768px) {

    .location-card {

      flex-direction: row;

    }

    /* Flips every second card automatically */

    .location-card:nth-child(even) {

      flex-direction: row-reverse;

    }

    .card-text, .card-images {

      width: 50%;

    }

  }



       



        /* Core Animation Keyframes */

        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

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

        @keyframes phoneRing { 0% { transform: rotate(-10deg) scale(1.1); } 100% { transform: rotate(10deg) scale(1.1); } }

        @keyframes mailFloat { 0% { transform: translateY(0) scale(1.1); } 100% { transform: translateY(-6px) scale(1.1); } }

        @keyframes pinDrop { 0% { transform: translateY(0) scale(1.1); } 100% { transform: translateY(-4px) scale(1.1); } }



        /* Responsive Breakpoints */

        @media (max-width: 1060px) { .contact-container { grid-template-columns: repeat(2, 320px); } }

        @media (max-width: 710px) {

            .heading { font-size: 32px; }

            .contact-container { grid-template-columns: 1fr; width: 100%; max-width: 360px; }

        }



        /* contact card section */

        /* Container splitting Form and Map side-by-side */

        .form-div{

          display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            padding: 20px 0 50px;

        }

        .form-container {

            display: grid;

            grid-template-columns: 1.1fr 0.9fr;

            align-items: center;

            max-width: 1200px;

            width: 100%;

            background: #ffffff;

            border-radius: 16px;

            overflow: hidden;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

            border: 1px solid #eef2f5;

        }



        /* Form Column Styling */

        .form-section {

            background: linear-gradient(135deg, #f0f0f0 0%, #f9f9f9 100%);



            padding: 40px;

            display: flex;

            flex-direction: column;

        }



        .form-title {

            font-size: 24px;

            font-weight: 800;

            color: #111827;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            margin-bottom: 24px;

        }



        /* Inputs Row Grid Structure */

        .input-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 16px;

            margin-bottom: 16px;

        }



        .input-row-triple {

            display: grid;

            grid-template-columns: 1.6fr 0.8fr;

            gap: 16px;

            margin-bottom: 16px;

        }



        .input-field {

            width: 100%;

            background: #ffffff;

            border: 1px solid transparent;

            border-radius: 8px;

            padding: 14px 16px;

            font-size: 14px;

            font-weight: 600;

            color: #1f2937;

            outline: none;

            transition: all 0.3s ease;

        }



        .input-field::placeholder {

            color: var(--gray-300);

            /* text-transform: uppercase; */

            font-size: 13px;

            letter-spacing: 0.5px;

        }



        .input-field:focus {

            border-color: var(--gray-500);

            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);

        }



        select.input-field {

            color: var(--gray-500);

            /* text-transform: uppercase; */

            font-size: 13px;

            letter-spacing: 0.5px;

            cursor: pointer;

            /* appearance: none; */

            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

            background-repeat: no-repeat;

            background-position: right 16px center;

            background-size: 16px;

            padding-right: 40px;

        }



        .textarea-container {

            margin-bottom: 20px;

        }



        .textarea-label {

            font-size: 13px;

            font-weight: 700;

            color: var(--gray-500);

            /* text-transform: uppercase; */

            margin-bottom: 8px;

            display: block;

            letter-spacing: 0.5px;

        }



        textarea.input-field {

            resize: none;

            height: 140px;

            font-weight: normal;

        }



        /* Compliance Consent Checkbox Wrapper */

        .consent-wrapper {

            display: flex;

            align-items: flex-start;

            gap: 12px;

            margin-bottom: 24px;

        }



        .consent-checkbox {

            margin-top: 3px;

            width: 16px;

            height: 16px;

            accent-color: #1B8B3D;

            cursor: pointer;

        }



        .consent-text {

            font-size: 12px;

            color: #4b5563;

            line-height: 1.5;

        }



        .consent-text a {

            color: #1B8B3D;

            text-decoration: underline;

        }



        /* Bottom-aligned Submit Button */

        .submit-btn {

            background-color: #1B8B3D;

            color: #ffffff;

            border: none;

            border-radius: 8px;

            padding: 16px;

            font-size: 15px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

            cursor: pointer;

            width: 100%;

            transition: background-color 0.3s ease, transform 0.1s ease;

            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);

            margin-top: auto;

        }



        .submit-btn:hover {

            background-color: var(--brand-green-light);

        }



        .submit-btn:active {

            transform: scale(0.98);

        }



        /* Responsive Iframe Map Wrapper Block */

        .map-section {

            position: relative;

            width: 100%;

            height: 100%;

            min-height: 450px;

            background-color: #f3faf7;

            display: flex;

            flex-direction: column;

        }



        /* Forces the custom iframe viewport to occupy the exact grid area dimensions */

        .map-section iframe {

            position: absolute;

            top: 0;

            left: 0;

            width: 100% !important;

            height: 100% !important;

            border: 0;

            z-index: 1;

        }



        /* Header Title Label for Muscat Office Overlay */

        .map-label {

            position: absolute;

            top: 16px;

            left: 16px;

            background: rgba(255, 255, 255, 0.95);

            padding: 10px 5px;

            border-radius: 8px;

            font-size: 14px;

            font-weight: 700;

            color: #111827;

            box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);

            z-index: 3; /* Placed over map and spinner layers */

            display: flex;

            align-items: center;

            gap: 8px;

            letter-spacing: 0.5px;

        }



        .map-label::before {

            content: "??";

            font-size: 14px;

        }



        /* Custom Loading Spinner Screen Overlay Container */

        .map-loader-container {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: #f8fafc;

            display: flex;

            justify-content: center;

            align-items: center;

            z-index: 2; /* Sits beneath label, but masks iframe until hidden */

            transition: opacity 0.4s ease, visibility 0.4s ease;

        }



        /* Spinner ring structural styling animation */

        .loading-spinner {

            width: 48px;

            height: 48px;

            border: 4px solid #e6f5fa;

            border-top-color: #10b981;

            border-radius: 50%;

            animation: spinRotate 0.8s linear infinite;

        }



        /* Spin Loop Engine rules */

        @keyframes spinRotate {

            from { transform: rotate(0deg); }

            to { transform: rotate(360deg); }

        }



        /* Visibility hide flag applied via JS loading finish trigger */

        .map-loader-container.loaded {

            opacity: 0;

            visibility: hidden;

        }



        /* Responsive UI view adjustments for mobile screens */

        @media (max-width: 868px) {

            .form-container {

                grid-template-columns: 1fr;

            }

            .map-section {

                min-height: 350px;

            }

            .form-section {

                padding: 30px 20px;

            }

        }



        /* hse page */

        :root {

    --primary-dark: #0f172a;    

    --primary-blue: #1e3a8a;    

    --accent-green: #10b981;    

    --accent-green-dark: #059669;

    --accent-red: #dc2626;      

    --text-main: #334155;

    --text-light: #64748b;

    --bg-light: #f8fafc;

    --bg-white: #ffffff;

    --bg-gray: #f1f5f9;

}







html {

    scroll-behavior: smooth;

}





.hse-container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 2rem;

}



.text-center { text-align: center; }

.text-left { text-align: left; }

.relative { position: relative; }

.z-10 { z-index: 10; }



/* Buttons */

.btn-prim {

    display: inline-block;

    background: white;

    color: black;

    padding: 1rem 2.5rem;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 500;

    font-size: 1.1rem;

    transition: all 0.3s ease;

    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);

}



.btn-prim:hover {

    background: rgb(214 202 5);

    transform: translateY(-3px);

    box-shadow: 0 15px 25px rgba(16, 185, 129, 0.4);

}



.btn-out {

    display: inline-block;

    background: transparent;

    color: var(--primary-dark);

    padding: 0.8rem 2rem;

    border: 2px solid var(--primary-dark);

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    transition: all 0.3s ease;

}



.btn-out:hover {

    background: var(--primary-dark);

    color: white;

}



/* ==========================================================================

   Animations

   ========================================================================== */





.reveal.in-view {

    opacity: 1;

    transform: translateY(0);

}



@keyframes fadeUpLoad {

    0% { opacity: 0; transform: translateY(40px); }

    100% { opacity: 1; transform: translateY(0); }

}



@keyframes floats {

    0% { transform: translateY(0px); }

    50% { transform: translateY(-15px); }

    100% { transform: translateY(0px); }

}









.reveal-on-load {

    animation: fadeUpLoad 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}





/* ==========================================================================

   Main HSE Section (Mission)

   ========================================================================== */

.hse-sections {

    padding: 8rem 0;

    background-color: var(--bg-white);

}



.hse-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6rem;

    align-items: center;

}



.page-title {

    font-size: 1.15rem;

    text-transform: uppercase;

    letter-spacing: 3px;

    color: var(--primary-blue);

    font-weight: 800;

    margin-bottom: 1.5rem;

    display: inline-block;

    position: relative;

}



.safety-first {

    font-size: 3.5rem;

    font-weight: 800;

    line-height: 1.1;

    color: var(--primary-dark);

    margin-bottom: 2rem;

    letter-spacing: -1px;

}



.highlight-red { color: var(--accent-red); }



.description {

    font-size: 1.15rem;

    color: var(--text-main);

    line-height: 1.8;

    margin-bottom: 3rem;

    position: relative;

    padding-left: 1.5rem;

    border-left: 4px solid #FFF100;

}



.goal-box {

    background: var(--bg-light);

    padding: 2.5rem;

    border-radius: 16px;

    position: relative;

    overflow: hidden;

    transform: translateY(0);

    transition: all 0.4s ease;

    border: 1px solid rgba(0,0,0,0.05);

}



.goal-box:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);

}



.goal-box h4 {

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--primary-dark);

    position: relative;

    z-index: 2;

    text-decoration: underline;

    text-decoration-color: var(--accent-red);

    text-underline-offset: 6px;

    text-decoration-thickness: 3px;

}



.goal-accent {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-dark), var(--brand-green));

}



.image-column {

    position: relative;

}



.image-wrappers {

    position: relative;

    border-radius: 24px;

}



.worker-image {

    width: 100%;

    height: auto;

    display: block;

    object-fit: cover;

    aspect-ratio: 4/3;

    border-radius: 24px;

    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);

}



/* CSS Zero Harm Card */

/* --- Animation Definitions --- */

@keyframes continuousSpin {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



.zero-harm-card {

    position: absolute;

    bottom: -30px; 

    right: -30px; 

    padding: 2rem 3rem;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 10;

}



.zh-logo {

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative; /* Establishes a scaling anchor for nested layout elements */

}



/* --- UPDATED: Spin Animation Applied to Circle Only --- */

.zh-circle {

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background: conic-gradient(

        #0f172a 0deg 140deg,     

        #38bdf8 140deg 250deg,   

        #a3e635 250deg 360deg    

    );

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    /* Smooth, endless 12-second linear loop rotation applied directly to the gradient layer */

    animation: continuousSpin 12s linear infinite; 

}



/* --- White Center Inner Layer Mask --- */

.zh-circle::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 100px; 

    height: 100px;

    background-color: #ffffff; /* Replaced custom layout token variable with clean uniform white fallback */

    border-radius: 50%;

    z-index: 1;

}



/* --- UPDATED: Independent Text Layer (Uncoupled from spin) --- */

.zh-text {

    /* Absolute tracking places the box precisely over the spinner without inheriting rotation properties */

    position: absolute; 

    top: 50%;

    left: 50%;

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

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    line-height: 1;

    font-family: 'Montserrat', sans-serif;

    width: 100%;

}



.zh-zero {

    font-size: 1.4rem;

    font-weight: 800;

    color: #0f172a; /* Handled explicit dark variable fallback */

    letter-spacing: -1px;

    margin-bottom: 2px;

}



.zh-harm {

    font-size: 1.3rem;

    font-weight: 800;

    color: #475569;

    letter-spacing: -1px;

}

/* ==========================================================================

   Pillars Section

   ========================================================================== */

.pillars-section {

    padding: 5rem 0;

    background-color: var(--bg-gray);

}



.sec-header {

    margin-bottom: 3rem;

    max-width: 750px;

    margin-inline: auto;

}



/* .sec-header h2 {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 1.25rem;

    letter-spacing: -1px;

}



.sec-header p {

    font-size: 1.15rem;

    color: var(--text-light);

} */



.pillars-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 3rem;

}



.pillar-card {

    background: var(--bg-white);

    padding: 3rem 2.5rem;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0,0,0,0.03);

    transition: all 0.4s ease;

    border-bottom: 4px solid transparent;

}



.pillar-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.08);

    border-bottom: 4px solid #FFF100;

}



.pillar-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 2rem;

    border-radius: 20px;

    background: var(--bg-gray);

    display: flex;

    justify-content: center;

    align-items: center;

    color: #1B8B3D;

    transition: all 0.3s ease;

}



.pillar-card:hover .pillar-icon {

    background: #1B8B3D;

    color: white;

    transform: scale(1.1);

}



.pillar-card h3 {

    font-size: 1.2rem;

    margin-bottom: 1rem;

}



.pillar-card p {

    color: var(--text-light);

    font-size: 0.9rem;

}



/* ==========================================================================

   Features Section (Alternating Images)

   ========================================================================== */

.features-section {

    padding: 5rem 0;

    background-color: var(--bg-white);

}



.feature-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6rem;

    align-items: center;

    margin-bottom: 4rem;

}



.feature-row:last-child {

    margin-bottom: 0;

}



.feature-row.reverse {

    direction: rtl;

}



.feature-row.reverse > * {

    direction: ltr;

}



.feature-image {

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);

    position: relative;

}



.feature-image img {

    width: 100%;

    height: auto;

    display: block;

    aspect-ratio: 4/3;

    object-fit: cover;

    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.feature-image:hover img {

    transform: scale(1.05);

}



.feature-tag {

    display: inline-block;

    padding: 0.5rem 1.25rem;

    background: rgba(16, 185, 129, 0.1);

    color: var(--accent-green-dark);

    border-radius: 30px;

    font-weight: 700;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 1.5rem;

}



/* .feature-text h2 {

    font-size: 2.75rem;

    margin-bottom: 1.5rem;

    letter-spacing: -1px;

    line-height: 1.2;

} */



/* .feature-text p {

    font-size: 1.15rem;

    color: var(--text-light);

    margin-bottom: 2rem;

} */



.feature-list {

    list-style: none;

    margin-bottom: 4rem;

}



.feature-list li {

    position: relative;

    padding-left: 2.5rem;

    margin-bottom: 0.5rem;

    font-size: 1.1rem;

    font-weight: 500;

    color: var(--primary-dark);

}



.feature-list li::before {

    content: '';

    position: absolute;

    left: 0;

    top: 4px;

    width: 20px;

    height: 20px;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2310b981"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');

    background-size: contain;

    background-repeat: no-repeat;

}



/* ==========================================================================

   Call To Action

   ========================================================================== */

.cta-sec {

    position: relative;

    padding: 6rem 0;

    background-color: var(--brand-green);

    color: white;

    text-align: center;

    overflow: hidden;

}



/* .cta-background {

    position: absolute;

    top: -50%; left: -50%;

    width: 200%; height: 200%;

    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(15, 23, 42, 0) 60%);

    z-index: 1;

} */



.cta-content {

    max-width: 700px;

    margin: 0 auto;

    width: 100%;

}



.cta-content h2 {

    color: white;

    font-size: clamp(1.625rem, 4.5vw, 2.375rem);

  line-height: 1.25;

  margin: 0 0 1.25rem 0;

  font-weight: 700;

  letter-spacing: 0.5px;

}



.cta-content p {

    font-size: clamp(0.938rem, 2.5vw, 1.25rem);

    color: rgb(244 237 116);

    line-height: 1.5;

    margin:0 0 2.5rem 0;

}



/* --- NEW: Added base container rules for desktop --- */

.hse-banner {

  position: relative;

  height: 450px; /* Set your preferred desktop banner height here */

  overflow: hidden; /* Clips the 130% image so it doesn't leak out */

  width: 100%;

}



.hse-banner-bg-image {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 130%; /* Extra height gives room for the image to scroll vertically */

  object-fit: cover;

  object-position: center center;

  z-index: 1;

  will-change: transform; /* Optimizes browser rendering performance */

}



.hse-banner-overlays {

 /* background: linear-gradient(to right, rgba(15, 80, 35, 0.7) 30%, rgba(5, 30, 10, 0.4) 100%);

*/



  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute; /* Changed to absolute to lock perfectly over the container */

  top: 0;

  left: 0;

  z-index: 2;

  padding: 2rem 1.25rem; /* Generous breathing buffer to protect small screens */

    box-sizing: border-box; /* Content stays securely on top */

}

.hse-banner-contents {

    width: 100%;

}

.hse-containers {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    box-sizing: border-box;

}



@media (max-width: 992px) {

  .hse-banner {

    height: 400px;

  }

  .hse-banner-bg-image {

    height: 110%; /* Resets height on mobile to save device processing power */

  }

  

}

@media (max-width: 576px) {

    .hse-banner {

        height: auto; /* Drops fixed height bounds completely */

        min-height: 360px; /* Adapts dynamically to extremely long phone text */

    }

    .hse-banner-bg-image {

        height: 100%; 

    }

    .hse-banner-overlays {

        /* Flips gradient axis vertically for clean contrast balance over vertical layouts */

        background: linear-gradient(180deg, rgba(15, 80, 35, 0.9) 0%, rgba(5, 30, 10, 0.7) 100%);

        padding: 3rem 1rem;

    }

}

/* ==========================================================================

   Responsive Design

   ========================================================================== */

@media (max-width: 1200px) {

    .feature-row { gap: 4rem; }

    .hero-content h1 { font-size: 4.3rem; }

}



@media (max-width: 1024px) {

    .hse-content { gap: 4rem; }

    .pillars-grid { grid-template-columns: repeat(2, 1fr); }

    .feature-row { gap: 3rem; }

    .safety-first { font-size: 3rem; }

    .feature-text h2 { font-size: 2.25rem; }

}



@media (max-width: 900px) {

    .navigate-links { display: none; }

    .hamburgers { display: flex; }

    

    .hse-content { grid-template-columns: 1fr; gap: 5rem; }

    .feature-row { grid-template-columns: 1fr; gap: 3rem; margin-bottom: 2rem; }

    .feature-row.reverse { direction: ltr; }

    

    .zero-harm-card {

        left: 50%;

        transform: translateX(-50%);

        bottom: -100px;

    }

}



@media (max-width: 768px) {

    .pillars-grid { grid-template-columns: 1fr; }

    .hero-content h1 { font-size: 3.3rem; }

    .hero-content p { font-size: 1.15rem; }

    .sec-header h2 { font-size: 2.5rem; }

}



@media (max-width: 480px) {

    .hero-content h1 { font-size: 2.3rem; }

    .safety-first { font-size: 2.2rem; }

    .feature-text h2 { font-size: 2rem; }

    .zero-harm-card { padding: 1.5rem 2rem; width: 50%; }

}





/* ================Projects page=========== */

/* --- Ongoing Cards Grid --- */

.project-section {

  padding: 30px 20px 30px;

}

.project-section .heading-line{

    display: flex;

    align-items: center;

    gap: 15px;

    margin:30px 0px 50px;

}

.project-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 25px;

    margin-bottom: 50px;

}

.project-cards {

    background-color: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    display: flex;

    flex-direction: column;

}

.cards-body {

    padding: 25px;

    flex-grow: 1;

}

.project-cards:hover{

  transform: translateY(-10px);

}

.card-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.tag {

    font-size: 11px;

    font-weight: 700;

    background-color: #f1f5f9;

    color: #0b2545;

    padding: 3px 8px;

    border-radius: 4px;

}

.status-badge {

    font-size: 11px;

    font-weight: 600;

    padding: 2px 8px;

    border-radius: 12px;

}

.status-badge.running {

    background-color: #fef3c7;

    color: #92400e;

    border: 1px solid #fde68a;

}

.status-badge.completed {

    background-color: #d1fae5;

    color: #065f46;

    border: 1px solid #a7f3d0;

}

.project-cards h3 {

    font-size: clamp(1.1rem, 6vw, 1.1rem);

    font-weight: 500;

    margin: 10px 0 12px;

    line-height: 1.15;

    letter-spacing: -0.025em;

    color: var(--gray-900);

}

.location-text {

    font-size: 12px;

    color: #64748b;

    font-family: monospace;

    margin-bottom: 15px;

}

.data-row {

    display: flex;

    justify-content: space-between;

    font-size: 13px;

    padding-top: 8px;

    border-top: 1px solid #f1f5f9;

}

.row-spacer {

    margin-top: 6px;

}

.data-label { color: #64748b; }

.data-value { font-weight: 600; color: #334155; text-align: right; }

.card-footer {

    background-color: #f8fafc;

    padding: 15px 25px;

    border-top: 1px solid #e2e8f0;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.footer-label {

    font-size: 11px;

    text-transform: uppercase;

    color: #94a3b8;

    font-weight: 600;

}

.footer-value {

    font-size: 15px;

    font-weight: 700;

    color: #0b2545;

}



/* --- Client Logo Container Layouts --- */

.client-logo-placeholder {

    max-width: 90px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    overflow: hidden;

}

.client-logo-placeholder img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.dot {

    height: 10px;

    width: 10px;

    border-radius: 50%;

    display: inline-block;

}

.dot-amber { background-color: #f59e0b; margin-right: 10px;}

.dot-green { background-color: #10b981; margin-right: 10px;}



/* Interactive accent bottom bar */

.cards-body::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: var(--brand-green);

  transform: scaleX(0);

  transform-origin: center;

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.project-cards:hover .cards-body::after {

  transform: scaleX(1);

}



.project-cards:hover .cards-body img{

  transform: scale(1.3);

}





/* ==========================================================================

   Timeline Redesign (Horizontal Slider Layout & Playback Animation)

   ========================================================================== */

.timeline-redesign {

  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);

  padding: 38px 0 44px;

  overflow: hidden;

  position: relative;

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

  min-height: 640px;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

}



/* Header styling */

.timeline-section-header {

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  gap: 28px;

  margin-bottom: 18px;

  width: 100%;

}



.timeline-section-header .section-eyebrow {

  margin-bottom: 8px;

}



.timeline-section-header .section-title {

  margin: 0;

  text-align: center;

}



/* Main Container */

.timeline-main-container {

  max-width: 1680px;

  margin: 0 auto;

  padding: 0 28px;

  position: relative;

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  box-sizing: border-box;

  width: 100%;

  overflow: hidden;

}



.timeline-controls {

  display: flex;

  gap: 12px;

}



.timeline-ctrl-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background-color: #ffffff;

  border: 1px solid rgba(196, 30, 36, 0.28);

  padding: 9px 16px;

  border-radius: 6px;

  font-size: 0.86rem;

  font-weight: 600;

  color: #C41E24;

  cursor: pointer;

  transition: all 0.3s ease;

}



.timeline-ctrl-btn svg {

  width: 14px;

  height: 14px;

  fill: currentColor;

}



.timeline-ctrl-btn:hover {

  background-color: #C41E24;

  color: #ffffff;

  box-shadow: 0 8px 22px rgba(196, 30, 36, 0.18);

}



.timeline-ctrl-btn.secondary {

  background-color: transparent;

  border-color: #d4d8de;

  color: #3f4650;

}



.timeline-ctrl-btn.secondary:hover {

  background-color: #f3f3f3;

  color: #000;

}



/* Slider Wrapper with Navigation Arrows */

.timeline-slider-container {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  flex: 1;

}



/* Navigation Arrow Buttons */

.timeline-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background-color: #ffffff;

  border: 1.5px solid #dddddd;

  font-size: 1rem;

  color: #333333;

  cursor: pointer;

  z-index: 10;

  display: grid;

  place-items: center;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);

}



.timeline-arrow:hover {

  background-color: #C41E24;

  color: #ffffff;

  border-color: #C41E24;

  transform: translateY(-50%) scale(1.1);

  box-shadow: 0 6px 16px rgba(196, 30, 36, 0.25);

}



.timeline-arrow:active {

  transform: translateY(-50%) scale(0.95);

}



.prev-arrow {

  left: 10px;

}



.next-arrow {

  right: 10px;

}



/* Timeline Scroll Container */

.timeline-slider-scroll-wrap {

  width: 100%;

  overflow-x: auto;

  scroll-behavior: smooth;

  padding: 10px 72px;

  scrollbar-width: none; /* Hide scrollbar for Firefox */

  box-sizing: border-box;

}



.timeline-slider-scroll-wrap::-webkit-scrollbar {

  display: none; /* Hide scrollbar for Chrome/Safari */

}



/* Track container holding horizontal line and columns */

.timeline-slider-track {

  display: flex;

  position: relative;

  min-height: 520px;

  padding: 8px 0;

  gap: 58px;

  align-items: center;

  width: max-content;

}



/* Single Horizontal Axis Line */

.timeline-horizontal-axis {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 2px;

  background-color: #d9dde3;

  transform: translateY(-50%);

  z-index: 1;

}



/* Column Structure */

.timeline-column {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  height: 480px;

  width: 282px;

  flex-shrink: 0;

  position: relative;

  z-index: 2;

  transition: all 0.4s ease;

}



.timeline-column.center-column {

  justify-content: center;

}



/* Card Box */

.card-box {

  position: relative;

  width: 282px;

  min-height: 124px;

  background-color: #ffffff;

  border: 1px solid #e5e9ef;

  border-radius: 8px;

  padding: 16px 16px 15px;

  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.07);

  z-index: 2;

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

  box-sizing: border-box;

}



.card-box:hover {

  transform: translateY(-5px);

  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.12);

}



.top-box {

  border-top: 4px solid var(--theme-color);

}



.bottom-box {

  border-top: 4px solid var(--theme-color);

}



.divider-dashed {

  height: 1px;

  border-top: 1px dashed #e0e0e0;

  margin: 10px 0;

  width: 100%;

}



.text-dense {

  padding: 14px 15px;

}



.text-dense .node-project-title {

  font-size: 0.86rem;

}



.text-dense .node-project-desc {

  font-size: 0.71rem;

}



/* Connectors */

.vertical-connector {

  position: absolute;

  top: 15%;

  bottom: 15%;

  left: 50%;

  width: 2px;

  background-color: var(--theme-color);

  transform: translateX(-50%);

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 0;

  box-sizing: border-box;

}



/* Axis Intersection Dot */

.axis-dot {

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background-color: var(--theme-color);

  z-index: 5;

  border: 2px solid #ffffff;

  box-shadow: 0 0 0 2px var(--theme-color);

  transition: all 0.3s ease;

}



/* Custom Icon Circles */

.icon-circle {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background-color: #ffffff;

  border: 2px solid var(--theme-color);

  display: grid;

  place-items: center;

  z-index: 3;

  font-size: 1rem;

  color: var(--theme-color);

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}



.timeline-redesign .icon-circle {

  display: none;

}



/* Card Year Labels */

.node-year {

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

  font-weight: 700;

  font-size: 1.22rem;

  color: var(--theme-color);

  margin-bottom: 4px;

  display: block;

}



.node-year-label-bottom {

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

  font-weight: 700;

  font-size: 1.22rem;

  color: var(--theme-color);

  margin-top: 4px;

  display: block;

}



.node-project-title {

  font-weight: 700;

  font-size: 0.95rem;

  line-height: 1.28;

  color: #111827;

  overflow-wrap: anywhere;

  margin-bottom: 4px;

}



.node-project-desc {

  font-size: 0.8rem;

  line-height: 1.46;

  color: #5b6470;

  margin: 0;

}



.badge-wells {

  display: inline-block;

  background-color: #f6f7f9;

  border: 1px solid #d8dde5;

  padding: 2px 7px;

  border-radius: 999px;

  font-size: 0.62rem;

  font-weight: 700;

  color: #000000;

  width: fit-content;

}



/* Ongoing Shape */

.ongoing-column-slider {

  display: flex;

  align-items: center;

  margin-left: 20px;

  flex-shrink: 0;

  position: relative;

  z-index: 2;

  height: 80px;

}



.arrow-shape {

  background-color: rgb(196, 30, 36) ;

  color: #ffffff;

  padding: 6px 20px;

  font-weight: 700;

  font-size: 1rem;

  position: relative;

  border-radius: 4px 0 0 4px;

}



.arrow-shape::after {

  content: '';

  position: absolute;

  right: -16px;

  top: 0;

  width: 0;

  height: 0;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

  border-left: 16px solid rgb(196, 30, 36) ;

}



/* Active Hightlight Play State styling */

.timeline-column.active {

  transform: scale(1.02);

}



.timeline-column.active .axis-dot {

  transform: scale(1.4);

  box-shadow: 0 0 0 6px var(--theme-color-trans), 0 0 15px var(--theme-color);

  background-color: #ffffff;

}



.timeline-column.active .icon-circle {

  background-color: var(--theme-color);

  color: #ffffff;

  transform: scale(1.15);

  box-shadow: 0 4px 15px var(--theme-color-trans);

}



.timeline-column.active .card-box {

  border-color: var(--theme-color);

  box-shadow: 0 18px 42px var(--theme-color-trans);

}



/* Hover highlights */

.timeline-column:hover .icon-circle {

  background-color: var(--theme-color);

  color: #ffffff;

  transform: scale(1.12);

  box-shadow: 0 4px 15px var(--theme-color-trans);

}



.timeline-column:hover .axis-dot {

  transform: scale(1.2);

}





/* Winding Roadmap Timeline */

.winding-timeline {

  position: relative;

  width: min(1180px, 100%);

  height: 820px;

  margin: 0 auto;

  padding: 26px 42px 36px;

  box-sizing: border-box;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

  overflow: hidden;

}



.winding-path {

  position: absolute;

  inset: 72px 78px 118px 78px;

  width: calc(100% - 156px);

  height: calc(100% - 190px);

  overflow: visible;

  z-index: 1;

  filter: drop-shadow(0 10px 16px rgba(16, 24, 40, 0.05));

}



.winding-path path {

  fill: none;

  stroke: #111827;

  stroke-width: 2.4;

  stroke-linecap: round;

  stroke-dasharray: 1 9;

  opacity: 0.92;

}



.winding-node {

  position: absolute;

  left: var(--x);

  top: var(--y);

  width: 168px;

  min-height: 0;

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

  z-index: 2;

  text-align: center;

  color: #1f2937;

}



.timeline-pin {

  display: grid;

  place-items: center;

  width: 22px;

  height: 22px;

  margin: 0 auto 12px;

  border-radius: 50%;

  background: #ffffff;

  border: 4px solid var(--c);

  box-shadow: 0 0 0 7px #ffffff, 0 12px 24px rgba(16, 24, 40, 0.14);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.timeline-pin::after {

  content: '';

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--c);

}



.milestone-copy {

  width: 100%;

  padding: 10px 11px 12px;

  border: 1px solid rgba(229, 233, 239, 0.95);

  border-top: 3px solid var(--c);

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.94);

  box-shadow: 0 14px 32px rgba(16, 24, 40, 0.08);

  box-sizing: border-box;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.milestone-copy.copy-above {

  transform: none;

}



.milestone-dense {

  width: 214px;

  margin-left: 50%;

  transform: translateX(-50%);

}



.milestone-copy.copy-above.milestone-dense {

  transform: translateX(-50%);

}



.milestone-copy .milestone-year {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 50px;

  margin-bottom: 7px;

  padding: 4px 9px;

  border-radius: 999px;

  background: rgba(248, 250, 252, 0.95);

  background: color-mix(in srgb, var(--c) 13%, #ffffff);

  color: var(--c);

  font-size: 0.86rem;

  line-height: 1;

  font-weight: 800;

}



.milestone-copy h3,

.milestone-entry h3 {

  margin: 0 0 5px;

  font-size: 0.8rem;

  line-height: 1.18;

  font-weight: 800;

  color: #111827;

}



.milestone-copy p {

  margin: 0;

  font-size: 0.62rem;

  line-height: 1.35;

  color: #657180;

}



.milestone-entry + .milestone-entry {

  margin-top: 8px;

  padding-top: 8px;

  border-top: 1px dashed #d9dde3;

}



.timeline-ongoing {

  position: absolute;

  right: 10%;

  bottom: 12%;

  z-index: 3;

  padding: 8px 16px;

  border-radius: 999px;

  background: #111827;

  color: #ffffff;

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.18);

}



.winding-marker {

  position: absolute;

  z-index: 2;

  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  color: #111827;

  background: #ffffff;

  border: 1px solid #e5e9ef;

  box-shadow: 0 14px 32px rgba(16, 24, 40, 0.1);

  font-size: 1.1rem;

}



.marker-target {

  right: 5.2%;

  top: 5.2%;

}



.marker-rocket {

  left: 5.2%;

  bottom: 7.2%;

  color: #C41E24;

}



@media (min-width: 1025px) {

  .winding-node:hover {

    z-index: 4;

  }



  .winding-node:hover .timeline-pin {

    transform: scale(1.08);

    box-shadow: 0 0 0 8px #ffffff, 0 16px 32px rgba(16, 24, 40, 0.18), 0 0 0 12px color-mix(in srgb, var(--c) 14%, transparent);

  }



  .winding-node:hover .milestone-copy {

    transform: translateY(-4px);

    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);

  }



  .winding-node:hover .milestone-copy.copy-above {

    transform: none;

  }



  .winding-node:hover .milestone-dense {

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

  }



  .winding-node:hover .milestone-copy.copy-above.milestone-dense {

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

  }

}



@media (max-width: 1024px) {

  .winding-timeline {

    height: auto;

    display: grid;

    gap: 16px;

    padding: 16px 14px 20px 42px;

    border-radius: 8px;

  }



  .winding-timeline::after,

  .winding-path,

  .winding-marker {

    display: none;

  }



  .winding-timeline::before {

    content: '';

    position: absolute;

    left: 24px;

    top: 22px;

    bottom: 22px;

    border-left: 2px dotted #111827;

    opacity: 0.7;

  }



  .winding-node {

    position: relative;

    left: auto;

    top: auto;

    width: 100%;

    min-height: 0;

    transform: none;

    text-align: left;

  }



  .timeline-pin {

    position: absolute;

    left: -28px;

    top: 15px;

    width: 16px;

    height: 16px;

    margin: 0;

    border-width: 3px;

    box-shadow: 0 0 0 5px #ffffff, 0 8px 18px rgba(16, 24, 40, 0.12);

  }



  .timeline-pin::after {

    width: 5px;

    height: 5px;

  }



  .milestone-copy,

  .milestone-copy.copy-above,

  .milestone-dense,

  .milestone-copy.copy-above.milestone-dense {

    width: 100%;

    margin-left: 0;

    transform: none;

  }



  .milestone-copy {

    padding: 13px 14px;

  }



  .timeline-ongoing {

    position: relative;

    right: auto;

    bottom: auto;

    justify-self: start;

  }

}



/* Professional Timeline Board Override */

@media (min-width: 1025px) {

  .winding-timeline {

    width: min(1180px, calc(100% - 40px));

    height: auto;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 34px 26px;

    padding: 34px 10px 46px 112px;

    overflow: visible;

  }





  .winding-timeline::before,

  .winding-timeline::after {

    content: '';

    position: absolute;

    display: block;

    width: 54px;

    height: 190px;

    border-color: rgba(100, 116, 139, 0.6);

    border-style: dotted;

    border-width: 1px;

    pointer-events: none;

    z-index: 0;

  }



  .winding-timeline::before {

    right: 0;

    top: 44px;

    border-left: 0;

    border-radius: 0 18px 18px 0;

  }



  .winding-timeline::after {

    left: 0;

    top: 286px;

    border-right: 0;

    border-radius: 18px 0 0 18px;

  }



  .winding-path,

  .winding-marker {

    display: none;

  }



  .winding-node {

    position: relative;

    left: auto;

    top: auto;

    width: 100%;

    min-height: 100%;

    transform: none;

    text-align: left;

  }



  .winding-node::before {

    content: '';

    position: absolute;

    left: 26px;

    right: -26px;

    top: 10px;

    border-top: 2px dotted rgba(17, 24, 39, 0.32);

    z-index: 0;

  }



  .winding-node:nth-of-type(4n)::before {

    right: 26px;

  }



  .timeline-pin {

    position: relative;

    z-index: 2;

    width: 20px;

    height: 20px;

    margin: 0 0 12px 18px;

    border-width: 4px;

    box-shadow: 0 0 0 7px #ffffff, 0 10px 22px rgba(16, 24, 40, 0.12);

  }



  .milestone-copy,

  .milestone-dense,

  .milestone-copy.copy-above,

  .milestone-copy.copy-above.milestone-dense {

    width: 100%;

    min-height: 132px;

    margin-left: 0;

    transform: none;

  }



  .milestone-copy {

    display: flex;

    flex-direction: column;

    padding: 14px 16px 16px;

    border: 1px solid rgba(226, 232, 240, 0.98);

    border-top: 4px solid var(--c);

    background: #ffffff;

    box-shadow: none;

  }



  .milestone-copy .milestone-year {

    align-self: flex-start;

    margin-bottom: 10px;

    min-width: 58px;

    font-size: 0.9rem;

  }



  .milestone-copy h3,

  .milestone-entry h3 {

    font-size: 0.9rem;

    line-height: 1.2;

  }



  .milestone-copy p {

    font-size: 0.72rem;

    line-height: 1.45;

  }



  .milestone-entry + .milestone-entry {

    margin-top: 10px;

    padding-top: 10px;

  }





  .winding-node:hover {

    z-index: 2;

  }



  .winding-node:hover .timeline-pin {

    transform: none;

    box-shadow: 0 0 0 7px #ffffff, 0 10px 22px rgba(16, 24, 40, 0.12);

  }



  .winding-node:hover .milestone-copy,

  .winding-node:hover .milestone-dense,

  .winding-node:hover .milestone-copy.copy-above,

  .winding-node:hover .milestone-copy.copy-above.milestone-dense {

    transform: none;

    box-shadow: none;

  }





  .winding-node::before {

    left: 22px;

    right: -26px;

    top: 13px;

  }



  .timeline-pin {

    position: absolute;

    left: 0;

    top: 3px;

    margin: 0;

  }



  .milestone-copy,

  .milestone-dense,

  .milestone-copy.copy-above,

  .milestone-copy.copy-above.milestone-dense {

    width: auto;

    min-height: 0;

    margin-left: 44px;

    padding: 0;

    border: 0;

    border-top: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

  }



  .milestone-copy {

    padding-top: 40px;

  }



  .milestone-copy .milestone-year {

    margin-bottom: 9px;

  }



  .winding-node:hover .milestone-copy,

  .winding-node:hover .milestone-dense,

  .winding-node:hover .milestone-copy.copy-above,

  .winding-node:hover .milestone-copy.copy-above.milestone-dense {

    box-shadow: none;

  }



  .timeline-pin::before {

    content: '';

    position: absolute;

    left: 7px;

    top: 17px;

    width: 32px;

    height: 30px;

    border-left: 1.5px solid rgba(100, 116, 139, 0.65);

    border-bottom: 1.5px solid rgba(100, 116, 139, 0.65);

    z-index: 1;

    pointer-events: none;

  }



  .milestone-copy {

    padding-top: 36px;

  }





  .winding-timeline::before,

  .winding-timeline::after {

    display: none;

  }



  .winding-node:nth-of-type(4)::before,

  .winding-node:nth-of-type(8)::before,

  .winding-node:nth-of-type(12)::before,

  .winding-node:nth-of-type(16)::before {

    right: 0;

  }



  .winding-node:nth-of-type(5)::before,

  .winding-node:nth-of-type(9)::before,

  .winding-node:nth-of-type(13)::before,

  .winding-node:nth-of-type(17)::before {

    left: 0px;

  }



  .winding-node:nth-of-type(4)::after,

  .winding-node:nth-of-type(12)::after {

    content: '';

    position: absolute;

    right: -54px;

    top: 13px;

    width: 54px;

    height: calc(100% + 36px);

    border-top: 2px dotted rgba(17, 24, 39, 0.32);

    border-right: 2px dotted rgba(17, 24, 39, 0.32);

    border-bottom: 2px dotted rgba(17, 24, 39, 0.32);

    border-radius: 0 18px 18px 0;

    pointer-events: none;

    z-index: 0;

  }



  .winding-node:nth-of-type(5)::after,

  .winding-node:nth-of-type(13)::after {

    content: '';

    position: absolute;

    left: -54px;

    top: 13px;

    width: 54px;

    height: calc(100% + 34px);

    border-top: 2px dotted rgba(17, 24, 39, 0.32);

    border-left: 2px dotted rgba(17, 24, 39, 0.32);

    border-bottom: 2px dotted rgba(17, 24, 39, 0.32);

    border-radius: 18px 0 0 18px;

    pointer-events: none;

    z-index: 0;

  }



  .timeline-ongoing {

    position: absolute;

    left: 0;

    top: 25px;

    right: auto;

    bottom: auto;

    z-index: 3;

  }



  .timeline-ongoing::after {

    content: '';

    position: absolute;

    left: calc(100% + 8px);

    top: 59%;

    width: 10px;

    border-top: 2px dotted rgba(17, 24, 39, 0.32);

    transform: translateY(-59%);

    pointer-events: none;

    z-index: 2;



  }

}

/* Company Brand Theme Color Configurations */

.theme-red {

  --theme-color: #C41E24;

  --theme-color-trans: rgba(196, 30, 36, 0.15);

}

.theme-yellow {

  --theme-color: #f7c744;

  --theme-color-trans: rgba(247, 199, 68, 0.15);

}

.theme-green {

  --theme-color: #1B8B3D;

  --theme-color-trans: rgba(27, 139, 61, 0.15);

}



/* Responsive Overrides: Tablets & Mobile */

@media (max-width: 1024px) {

  .timeline-redesign {

    height: auto !important;

    min-height: auto !important;

    padding: 30px 0 !important;

  }



  .timeline-controls {

    display: none !important;

  }



  .timeline-section-header {

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

    padding: 0 10px;

  }



  .timeline-slider-scroll-wrap {

    padding: 20px 10px;

    max-height: 480px;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    scrollbar-width: thin !important;

  }



  .timeline-slider-scroll-wrap::-webkit-scrollbar {

    display: block !important;

    width: 6px !important;

  }



  .timeline-slider-scroll-wrap::-webkit-scrollbar-track {

    background: transparent !important;

  }



  .timeline-slider-scroll-wrap::-webkit-scrollbar-thumb {

    background-color: rgba(0, 0, 0, 0.15) !important;

    border-radius: 10px !important;

  }



  .timeline-slider-track {

    flex-direction: column;

    width: 100% !important;

    min-height: auto;

    gap: 35px;

    align-items: flex-start;

  }



  .timeline-horizontal-axis {

    display: none;

  }



  .timeline-column {

    flex-direction: column;

    width: 100% !important;

    height: auto !important;

    align-items: flex-start;

    border-left: 3px solid var(--theme-color);

    padding-left: 25px;

    margin-left: 10px;

    box-sizing: border-box;

  }

}



/* Capability Split Card Media */

.discipline-section .discipline-point {

  display: grid;

  grid-template-columns: 118px minmax(0, 1fr);

  gap: 16px;

  align-items: stretch;

  min-height: 154px;

  padding: 12px 18px 12px 12px;

}



.discipline-section .discipline-point::after {

  left: 152px;

  top: 20px;

}



.discipline-card-image {

  width: 100%;

  height: 100%;

  min-height: 130px;

  border-radius: 18px;

  overflow: hidden;

  background: #eef3ee;

  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);

}



.discipline-card-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.discipline-card-copy {

  min-width: 0;

}



.discipline-section .discipline-kicker {

  margin-bottom: 8px;

}



.discipline-section .discipline-point h3 {

  margin-bottom: 8px;

}



.discipline-section .discipline-point p {

  max-width: none;

}



@media (max-width: 767px) {

  .discipline-section .discipline-point {

    grid-template-columns: 96px minmax(0, 1fr);

    gap: 12px;

    padding: 12px;

  }



  .discipline-section .discipline-point::after {

    left: 126px;

    top: 18px;

  }



  .discipline-card-image {

    height: 100%;

    min-height: 112px;

    border-radius: 14px;

  }

}



@media (max-width: 480px) {

  .discipline-section .discipline-point {

    grid-template-columns: 1fr;

  }



  .discipline-section .discipline-point::after {

    left: 18px;

    top: 148px;

  }



  .discipline-card-image {

    height: 170px;

  }

}

/* Capability Card Spacing Tweak */

.discipline-section .discipline-layout {

  gap: 10px 0;

}



@media (max-width: 1260px) {

  .discipline-section .discipline-layout {

    gap: 14px;

  }

}



@media (max-width: 767px) {

  .discipline-section .discipline-layout {

    gap: 8px 12px;

  }

}

/* Capability Card Vertical Gaps */

@media (min-width: 1261px) {

  .discipline-section .point-civil {

    top: 8%;

  }



  .discipline-section .point-mech {

    top: 42%;

  }



  .discipline-section .point-renew {

    top: 76%;

  }

}



@media (max-width: 1260px) {

  .discipline-section .discipline-layout {

    row-gap: 18px;

  }

}



@media (max-width: 767px) {

  .discipline-section .discipline-layout {

    row-gap: 14px;

  }

}

/* Capability Card Heading Size */

.discipline-section .discipline-point h3 {

  font-size: clamp(0.86rem, 1vw, 1.08rem);

  line-height: 1.14;

  letter-spacing: 0;

}



@media (max-width: 767px) {

  .discipline-section .discipline-point h3 {

    font-size: clamp(1rem, 5.2vw, 1.28rem);

  }

}

/* Hide Capability Card Kicker Labels */

.discipline-section .discipline-kicker {

  display: none;

}



.discipline-section .discipline-point h3 {

  margin-top: 0;

}



.discipline-section .discipline-point::after {

  content: none;

}

/* Capability Card Stack Gap Reduce */

@media (min-width: 1261px) {

  .discipline-section .point-civil {

    top: 14%;

  }



  .discipline-section .point-mech {

    top: 40%;

  }



  .discipline-section .point-renew {

    top: 66%;

  }

}

/* Capability Left Stack Gap Match */

@media (min-width: 1261px) {

  .discipline-section .point-oil {

    top: 18%;

  }



  .discipline-section .point-electric {

    top: 48%;

  }

}

/* Projects History Timeline */

body[data-page="history"],

body[data-page="projects-history"] {

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

  background: radial-gradient(circle at 100% 50%, rgba(27, 139, 61, 0.08), transparent 16rem), #fff;

  color: #071426;

}



.ph-site-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  padding: 14px clamp(16px, 4vw, 48px);

  background: #fff;

  border-bottom: 1px solid rgba(7, 20, 38, 0.08);

}



.ph-brand img {

  width: 112px;

  height: auto;

}



.ph-site-header nav {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

}



.ph-site-header nav a {

  padding: 8px 10px;

  color: #071426;

  font-size: 0.82rem;

  font-weight: 700;

  line-height: 1.1;

}



.history-page,

.projects-history-page {

  min-height: 100vh;

  padding: clamp(28px, 5vw, 58px) 0 clamp(60px, 8vw, 110px);

  overflow: hidden;

}



.ph-head {

  margin-bottom: clamp(34px, 5vw, 64px);

  text-align: center;

}



.ph-eyebrow {

  display: inline-block;

  margin-bottom: 8px;

  color: #1b8b3d;

  font-size: 0.8rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



.ph-head h1 {

  margin: 0;

  color: #071426;

  font-size: clamp(2rem, 4.6vw, 3.8rem);

  font-weight: 700;

  line-height: 0.98;

  letter-spacing: 0;

}



.ph-timeline {

  --ph-dot-size: 22px;

  --ph-line: rgba(7, 20, 38, 0.34);

  position: relative;

  display: grid;

  grid-template-columns: repeat(4, minmax(170px, 1fr));

  grid-template-rows: repeat(5, minmax(190px, auto));

  gap: 26px clamp(22px, 4vw, 70px);

  padding: 0 18px;

}



.ph-node {

  --ph-accent: #f7c744;

  position: relative;

  grid-column: var(--ph-col);

  grid-row: var(--ph-row);

  min-width: 0;

  padding: 38px 0 0 34px;

}



.ph-row-1 { --ph-row: 1; }

.ph-row-2 { --ph-row: 2; }

.ph-row-3 { --ph-row: 3; }

.ph-row-4 { --ph-row: 4; }

.ph-row-5 { --ph-row: 5; }

.ph-col-1 { --ph-col: 1; }

.ph-col-2 { --ph-col: 2; }

.ph-col-3 { --ph-col: 3; }

.ph-col-4 { --ph-col: 4; }

.ph-yellow { --ph-accent: #f7c744; }

.ph-red { --ph-accent: #d82027; }

.ph-green { --ph-accent: #1b9a4a; }



.ph-node::before {

  content: "";

  position: absolute;

  top: 11px;

  left: var(--ph-dot-size);

  right: calc(-1 * clamp(22px, 4vw, 70px) - 8px);

  border-top: 2px dotted var(--ph-line);

}



.ph-col-4::before,

.ph-final::before {

  right: auto;

  width: 72%;

}



.ph-turn-right::after,

.ph-turn-left::after {

  content: "";

  position: absolute;

  top: 11px;

  bottom: calc(-1 * clamp(26px, 4vw, 70px));

  width: clamp(36px, 5vw, 58px);

  border-top: 2px dotted var(--ph-line);

  border-bottom: 2px dotted var(--ph-line);

}



.ph-turn-right::after {

  right: calc(-1 * clamp(22px, 4vw, 70px) - 8px);

  border-right: 2px dotted var(--ph-line);

  border-radius: 0 12px 12px 0;

}



.ph-turn-left::after {

  left: calc(-1 * clamp(22px, 4vw, 70px) - 8px);

  border-left: 2px dotted var(--ph-line);

  border-radius: 12px 0 0 12px;

}



.ph-dot {

  position: absolute;

  top: 0;

  left: 0;

  z-index: 2;

  width: var(--ph-dot-size);

  height: var(--ph-dot-size);

  border: 4px solid var(--ph-accent);

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 8px 22px rgba(7, 20, 38, 0.14);

}



.ph-dot::after {

  content: "";

  position: absolute;

  inset: 4px;

  border-radius: inherit;

  background: var(--ph-accent);

}



.ph-connector {

  position: absolute;

  top: var(--ph-dot-size);

  left: 11px;

  width: 34px;

  height: 29px;

  border-left: 1px solid rgba(100, 116, 139, 0.62);

  border-bottom: 1px solid rgba(100, 116, 139, 0.62);

}



.ph-copy {

  max-width: 260px;

}



.ph-year {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 58px;

  min-height: 26px;

  margin-bottom: 10px;

  padding: 3px 14px;

  border-radius: 999px;

  background: color-mix(in srgb, var(--ph-accent) 18%, #fff);

  color: var(--ph-accent);

  font-size: 1rem;

  font-weight: 800;

  line-height: 1;

}



.ph-copy h2 {

  margin: 0 0 6px;

  color: #071426;

  font-size: clamp(0.98rem, 1vw, 1.15rem);

  font-weight: 800;

  line-height: 1.18;

  letter-spacing: 0;

}



.ph-copy p {

  margin: 0;

  color: #64748b;

  font-size: 0.92rem;

  font-weight: 500;

  line-height: 1.5;

}



.ph-entry + .ph-entry {

  margin-top: 14px;

  padding-top: 14px;

  border-top: 1px dashed rgba(100, 116, 139, 0.2);

}



.ph-badge {

  display: inline-flex;

  max-width: 100%;

  margin-left: 4px;

  padding: 2px 8px;

  border: 1px solid rgba(100, 116, 139, 0.24);

  border-radius: 999px;

  background: #f8fafc;

  color: #071426;

  font-size: 0.62rem;

  font-weight: 800;

  line-height: 1.2;

  vertical-align: middle;

  white-space: nowrap;

}



.ph-badge-block {

  width: min(100%, 210px);

  margin: 6px 0 0;

}



.ph-ongoing {

  position: absolute;

  top: -10px;

  left: 0;

  z-index: 3;

  padding: 12px 18px;

  border-radius: 999px;

  background: #071426;

  color: #fff;

  font-size: 0.78rem;

  font-weight: 900;

  line-height: 1;

  text-transform: uppercase;

  box-shadow: 0 12px 28px rgba(7, 20, 38, 0.18);

}



.ph-start {

  margin-left: 42px;

}



@media (max-width: 1199px) {

  .ph-timeline {

    grid-template-columns: repeat(2, minmax(220px, 1fr));

    grid-template-rows: none;

    gap: 28px 42px;

  }



  .ph-node {

    grid-column: auto;

    grid-row: auto;

    padding-right: 12px;

  }



  .ph-node::before,

  .ph-turn-right::after,

  .ph-turn-left::after {

    display: none;

  }



  .ph-start {

    margin-left: 0;

  }



  .ph-node:nth-of-type(1) { order: 1; }

  .ph-node:nth-of-type(2) { order: 2; }

  .ph-node:nth-of-type(3) { order: 3; }

  .ph-node:nth-of-type(4) { order: 4; }

  .ph-node:nth-of-type(5) { order: 8; }

  .ph-node:nth-of-type(6) { order: 7; }

  .ph-node:nth-of-type(7) { order: 6; }

  .ph-node:nth-of-type(8) { order: 5; }

  .ph-node:nth-of-type(9) { order: 9; }

  .ph-node:nth-of-type(10) { order: 10; }

  .ph-node:nth-of-type(11) { order: 11; }

  .ph-node:nth-of-type(12) { order: 12; }

  .ph-node:nth-of-type(13) { order: 16; }

  .ph-node:nth-of-type(14) { order: 15; }

  .ph-node:nth-of-type(15) { order: 14; }

  .ph-node:nth-of-type(16) { order: 13; }

  .ph-node:nth-of-type(17) { order: 17; }



  .ph-ongoing {

    position: relative;

    top: auto;

    left: auto;

    align-self: start;

    justify-self: start;

    order: 0;

  }

}



@media (max-width: 767px) {

  .ph-site-header {

    align-items: flex-start;

    padding: 12px 16px;

  }



  .ph-brand img {

    width: 92px;

  }



  .ph-site-header nav {

    display: none;

  }



  .history-page,

  .projects-history-page {

    padding-top: 26px;

  }



  .ph-head {

    margin-bottom: 26px;

    text-align: left;

  }



  .ph-timeline {

    display: flex;

    flex-direction: column;

    gap: 0;

    padding: 0 0 0 12px;

  }



  .ph-timeline::before {

    content: "";

    position: absolute;

    top: 48px;

    bottom: 24px;

    left: 22px;

    border-left: 2px dotted rgba(7, 20, 38, 0.3);

  }



  .ph-ongoing {

    margin-bottom: 20px;

    padding: 11px 16px;

  }



  .ph-node {

    width: 100%;

    min-height: 0;

    padding: 0 0 28px 44px;

  }



  .ph-dot {

    left: 0;

    top: 3px;

  }



  .ph-connector {

    display: none;

  }



  .ph-copy {

    max-width: none;

    padding: 0 4px 0 0;

  }



  .ph-year {

    min-height: 25px;

    margin-bottom: 11px;

    font-size: 0.95rem;

  }



  .ph-copy h2 {

    font-size: 1rem;

  }



  .ph-copy p {

    font-size: 0.9rem;

  }



  .ph-badge {

    margin-top: 3px;

  }

}



/* Homepage timeline responsive ordering */

@media (max-width: 1024px) {

  .winding-timeline {

    grid-template-columns: 1fr;

    width: min(100%, 720px);

    margin-inline: auto;

  }



  .winding-node:nth-of-type(1) { order: 1; }

  .winding-node:nth-of-type(2) { order: 2; }

  .winding-node:nth-of-type(3) { order: 3; }

  .winding-node:nth-of-type(4) { order: 4; }

  .winding-node:nth-of-type(5) { order: 8; }

  .winding-node:nth-of-type(6) { order: 7; }

  .winding-node:nth-of-type(7) { order: 6; }

  .winding-node:nth-of-type(8) { order: 5; }

  .winding-node:nth-of-type(9) { order: 9; }

  .winding-node:nth-of-type(10) { order: 10; }

  .winding-node:nth-of-type(11) { order: 11; }

  .winding-node:nth-of-type(12) { order: 12; }

  .winding-node:nth-of-type(13) { order: 16; }

  .winding-node:nth-of-type(14) { order: 15; }

  .winding-node:nth-of-type(15) { order: 14; }

  .winding-node:nth-of-type(16) { order: 13; }

  .winding-node:nth-of-type(17) { order: 17; }



  .timeline-ongoing {

    order: 0;

  }

}



@media (max-width: 575px) {

  .timeline-main-container {

    padding-inline: 12px;

  }



  .winding-timeline {

    padding: 14px 4px 18px 38px;

  }



  .winding-timeline::before {

    left: 20px;

  }



  .timeline-pin {

    left: -26px;

  }



  .milestone-copy {

    padding: 12px;

  }



  .milestone-copy h3,

  .milestone-entry h3 {

    font-size: 0.94rem;

  }



  .milestone-copy p {

    font-size: 0.78rem;

  }

}

/* Capability cards reference layout */

.discipline-section .discipline-point {

  display: grid;

  grid-template-columns: 150px minmax(0, 1fr);

  gap: 18px;

  align-items: stretch;

  width: min(100%, 430px);

  max-width: 430px;

  min-height: 166px;

  padding: 12px;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(226, 232, 240, 0.88);

  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);

}



.discipline-section .discipline-card-image {

  min-height: 142px;

  border-radius: 8px;

}



.discipline-section .discipline-card-copy {

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

  padding: 4px 4px 4px 0;

}



.discipline-section .discipline-point h3 {

  position: relative;

  margin: 0 0 16px;

  padding-bottom: 10px;

  color: #063f24;

  font-size: clamp(0.96rem, 1vw, 1.12rem);

  font-weight: 800;

  line-height: 1.2;

  text-transform: uppercase;

  letter-spacing: 0;

}



.discipline-section .discipline-point h3::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 46px;

  height: 2px;

  border-radius: 999px;

  background: #f7c744;

}



.discipline-list {

  margin: 0;

  padding-left: 16px;

  color: #0f172a;

  font-size: 0.82rem;

  font-weight: 500;

  line-height: 1.34;

}



.discipline-list li::marker {

  font-size: 0.7em;

  color: #0f172a;

}



@media (min-width: 1261px) {

  .discipline-section .discipline-layout {

    min-height: 700px;

  }



  .discipline-section .point-mech,

  .discipline-section .point-electric,

  .discipline-section .point-transport {

    left: auto;

    right: calc(50% + 300px);

  }



  .discipline-section .point-oil,

  .discipline-section .point-civil,

  .discipline-section .point-renew {

    right: auto;

    left: calc(50% + 300px);

  }



  .discipline-section .point-mech,

  .discipline-section .point-oil {

    top: 3%;

  }



  .discipline-section .point-electric,

  .discipline-section .point-civil {

    top: 33%;

  }



  .discipline-section .point-transport,

  .discipline-section .point-renew {

    top: 63%;

  }

}



@media (max-width: 1260px) and (min-width: 768px) {

  .discipline-section .discipline-layout {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

  }



  .discipline-section .discipline-orbit {

    grid-column: 1 / -1;

    grid-row: 1;

    justify-self: center;

  }



  .discipline-section .point-mech,

  .discipline-section .point-electric,

  .discipline-section .point-transport,

  .discipline-section .point-oil,

  .discipline-section .point-civil,

  .discipline-section .point-renew {

    position: relative;

    top: auto;

    right: auto;

    left: auto;

    grid-column: auto;

    grid-row: auto;

    justify-self: stretch;

    width: 100%;

    max-width: none;

    transform: none !important;

  }

}



@media (max-width: 767px) {

  .discipline-section .discipline-layout {

    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

  }



  .discipline-section .discipline-orbit {

    grid-row: 1;

  }



  .discipline-section .point-mech,

  .discipline-section .point-electric,

  .discipline-section .point-transport,

  .discipline-section .point-oil,

  .discipline-section .point-civil,

  .discipline-section .point-renew {

    position: relative;

    top: auto;

    right: auto;

    left: auto;

    grid-column: auto;

    grid-row: auto;

    width: 100%;

    max-width: none;

    transform: none !important;

  }



  .discipline-section .discipline-point {

    grid-template-columns: 112px minmax(0, 1fr);

    gap: 12px;

    min-height: 0;

    padding: 10px;

  }



  .discipline-section .discipline-card-image {

    min-height: 132px;

    height: 100%;

  }



  .discipline-section .discipline-point h3 {

    margin-bottom: 12px;

    font-size: clamp(0.9rem, 4.5vw, 1.06rem);

  }



  .discipline-list {

    font-size: 0.78rem;

    line-height: 1.32;

  }

}



@media (max-width: 480px) {

  .discipline-section .discipline-point {

    grid-template-columns: 1fr;

  }



  .discipline-section .discipline-card-image {

    height: 180px;

  }

}



/* Capability responsive item order */

@media (max-width: 1260px) {

  .discipline-section .discipline-orbit { order: 1; }

  .discipline-section .point-mech { order: 2; }

  .discipline-section .point-electric { order: 3; }

  .discipline-section .point-transport { order: 4; }

  .discipline-section .point-oil { order: 5; }

  .discipline-section .point-civil { order: 6; }

  .discipline-section .point-renew { order: 7; }

}



/* Capability desktop alignment fix */

@media (min-width: 1261px) {

  .discipline-section .discipline-layout {

    min-height: 760px;

    margin-top: 34px;

  }



  .discipline-section .point-mech,

  .discipline-section .point-electric,

  .discipline-section .point-transport,

  .discipline-section .point-oil,

  .discipline-section .point-civil,

  .discipline-section .point-renew {

    --point-anchor-y: 0px;

    width: min(29vw, 420px);

    max-width: 420px;

    transform: translateY(0) scale(1);

  }



  .discipline-layout.visible .point-mech,

  .discipline-layout.visible .point-electric,

  .discipline-layout.visible .point-transport,

  .discipline-layout.visible .point-oil,

  .discipline-layout.visible .point-civil,

  .discipline-layout.visible .point-renew {

    transform: translateY(0) scale(1);

  }



  .discipline-section .point-mech,

  .discipline-section .point-oil {

    top: 0;

  }



  .discipline-section .point-electric,

  .discipline-section .point-civil {

    top: 34%;

  }



  .discipline-section .point-transport,

  .discipline-section .point-renew {

    top: 68%;

  }



  .discipline-section .point-mech,

  .discipline-section .point-electric,

  .discipline-section .point-transport {

    right: calc(50% + 315px);

  }



  .discipline-section .point-oil,

  .discipline-section .point-civil,

  .discipline-section .point-renew {

    left: calc(50% + 315px);

  }



  .discipline-section .discipline-card-image {

    min-height: 150px;

  }

}



@media (min-width: 1261px) and (max-width: 1480px) {

  .discipline-section .discipline-point {

    grid-template-columns: 132px minmax(0, 1fr);

    gap: 14px;

    width: 380px;

  }



  .discipline-section .point-mech,

  .discipline-section .point-electric,

  .discipline-section .point-transport {

    right: calc(50% + 250px);

  }



  .discipline-section .point-oil,

  .discipline-section .point-civil,

  .discipline-section .point-renew {

    left: calc(50% + 250px);

  }



  .discipline-section .discipline-card-image {

    min-height: 142px;

  }



  .discipline-list {

    font-size: 0.78rem;

  }

}



/* Capability desktop row spacing correction */

@media (min-width: 1261px) {

  .discipline-section .discipline-layout {

    min-height: 840px;

  }



  .discipline-section .discipline-point {

    min-height: 0;

    height: 218px;

    grid-template-columns: 138px minmax(0, 1fr);

    gap: 14px;

    padding: 10px;

    overflow: hidden;

  }



  .discipline-section .discipline-card-image {

    height: 100%;

    min-height: 0;

  }



  .discipline-section .discipline-card-copy {

    justify-content: flex-start;

    padding-top: 8px;

  }



  .discipline-section .discipline-point h3 {

    margin-bottom: 10px;

    padding-bottom: 8px;

    font-size: 0.86rem;

    line-height: 1.16;

  }



  .discipline-list {

    font-size: 0.74rem;

    line-height: 1.28;

  }



  .discipline-section .point-mech,

  .discipline-section .point-oil {

    top: 0;

  }



  .discipline-section .point-electric,

  .discipline-section .point-civil {

    top: 250px;

  }



  .discipline-section .point-transport,

  .discipline-section .point-renew {

    top: 500px;

  }

}



@media (min-width: 1261px) and (max-width: 1480px) {

  .discipline-section .discipline-layout {

    min-height: 820px;

  }



  .discipline-section .discipline-point {

    width: 380px;

    height: 214px;

    grid-template-columns: 124px minmax(0, 1fr);

    gap: 12px;

  }



  .discipline-section .discipline-point h3 {

    font-size: 0.78rem;

  }



  .discipline-list {

    font-size: 0.7rem;

    line-height: 1.25;

  }



  .discipline-section .point-electric,

  .discipline-section .point-civil {

    top: 240px;

  }



  .discipline-section .point-transport,

  .discipline-section .point-renew {

    top: 480px;

  }

}



/* Capability card compact text */

.discipline-section .discipline-point h3 {

  font-size: clamp(0.72rem, 0.78vw, 0.86rem);

  line-height: 1.15;

}



.discipline-list {

  font-size: 0.68rem;

  line-height: 1.24;

}



@media (min-width: 1261px) {

  .discipline-section .discipline-point h3 {

    font-size: 0.72rem;

  }



  .discipline-list {

    font-size: 0.64rem;

    line-height: 1.22;

  }

}



@media (min-width: 1261px) and (max-width: 1480px) {

  .discipline-section .discipline-point h3 {

    font-size: 0.68rem;

  }



  .discipline-list {

    font-size: 0.6rem;

    line-height: 1.2;

  }

}



@media (max-width: 767px) {

  .discipline-section .discipline-point h3 {

    font-size: clamp(0.82rem, 4vw, 0.98rem);

  }



  .discipline-list {

    font-size: 0.72rem;

  }

}



/* Capability list text smaller */

.discipline-section .discipline-list {

  font-size: 0.56rem;

  line-height: 1.18;

}



@media (min-width: 1261px) {

  .discipline-section .discipline-list {

    font-size: 0.54rem;

    line-height: 1.16;

  }

}



@media (max-width: 767px) {

  .discipline-section .discipline-list {

    font-size: 0.66rem;

    line-height: 1.2;

  }

}



/* Capability auto-height compact cards */

.discipline-section .discipline-point {

  height: auto;

  min-height: 0;

  align-items: start;

}



.discipline-section .discipline-card-image {

  height: auto;

  min-height: 0;

  aspect-ratio: 1 / 1.25;

}



.discipline-section .discipline-card-copy {

  justify-content: flex-start;

  padding-top: 2px;

}



.discipline-section .discipline-point h3 {

  margin-bottom: 8px;

  padding-bottom: 7px;

}



.discipline-section .discipline-list {

  font-size: 0.48rem;

  line-height: 1.14;

}



@media (min-width: 1261px) {

  .discipline-section .discipline-point {

    height: auto;

    min-height: 0;

  }



  .discipline-section .discipline-card-image {

    height: auto;

    min-height: 0;

  }



  .discipline-section .discipline-list {

    font-size: 0.48rem;

    line-height: 1.13;

  }

}



@media (min-width: 1261px) and (max-width: 1480px) {

  .discipline-section .discipline-point {

    height: auto;

    min-height: 0;

  }



  .discipline-section .discipline-list {

    font-size: 0.46rem;

    line-height: 1.12;

  }

}



@media (max-width: 767px) {

  .discipline-section .discipline-list {

    font-size: 0.62rem;

    line-height: 1.18;

  }

}



/* Capability list item font size */

.discipline-section .discipline-list li {

  font-size: 12px;

}



/* Capability comma-separated text */

.discipline-section .discipline-list-text {

  margin: 0;

  color: #334155;

  font-size: 12px;

  font-weight: 500;

  line-height: 1.45;

}



@media (max-width: 767px) {

  .discipline-section .discipline-list-text {

    font-size: 12px;

    line-height: 1.4;

  }

}



/* Capability text size update */

.discipline-section .discipline-list li,

.discipline-section .discipline-list-text {

  font-size: 15px;

}



/* Capability section clean responsive grid */

.discipline-section .discipline-layout {

  align-items: center;

}



.discipline-section .discipline-point {

  border-radius: 8px;

  overflow: hidden;

}



.discipline-section .discipline-list-text {

  max-width: 100%;

  overflow-wrap: anywhere;

}



@media (min-width: 1261px) {

  .discipline-section .discipline-layout {

    display: grid;

    grid-template-columns: minmax(320px, 390px) minmax(360px, 470px) minmax(320px, 390px);

    grid-template-rows: repeat(3, auto);

    column-gap: clamp(36px, 4vw, 72px);

    row-gap: 34px;

    width: min(100%, 1340px);

    min-height: 0;

    margin: 34px auto 0;

  }



  .discipline-section .discipline-orbit {

    position: relative;

    top: auto;

    left: auto;

    grid-column: 2;

    grid-row: 1 / span 3;

    align-self: center;

    justify-self: center;

    width: min(100%, 430px);

    transform: none;

  }



  .discipline-section .point-mech,

  .discipline-section .point-electric,

  .discipline-section .point-transport,

  .discipline-section .point-oil,

  .discipline-section .point-civil,

  .discipline-section .point-renew {

    position: relative;

    top: auto;

    right: auto;

    left: auto;

    width: 100%;

    max-width: none;

    height: auto;

    min-height: 0;

    transform: none !important;

  }



  .discipline-section .point-mech { grid-column: 1; grid-row: 1; }

  .discipline-section .point-electric { grid-column: 1; grid-row: 2; }

  .discipline-section .point-transport { grid-column: 1; grid-row: 3; }

  .discipline-section .point-oil { grid-column: 3; grid-row: 1; }

  .discipline-section .point-civil { grid-column: 3; grid-row: 2; }

  .discipline-section .point-renew { grid-column: 3; grid-row: 3; }



  .discipline-section .discipline-point {

    grid-template-columns: 128px minmax(0, 1fr);

    gap: 14px;

    padding: 10px;

  }



  .discipline-section .discipline-card-image {

    width: 128px;

    height: 134px;

    min-height: 0;

    aspect-ratio: auto;

  }



  .discipline-section .discipline-card-copy {

    min-width: 0;

    justify-content: flex-start;

    padding: 4px 0 0;

  }



  .discipline-section .discipline-point h3 {

    margin-bottom: 9px;

    padding-bottom: 7px;

    font-size: 12px;

    line-height: 1.18;

  }



  .discipline-section .discipline-list-text {

    font-size: 15px;

    line-height: 1.38;

  }



  .discipline-section .discipline-point:hover {

    transform: translateY(-4px) !important;

  }

}



@media (min-width: 1261px) and (max-width: 1480px) {

  .discipline-section .discipline-layout {

    grid-template-columns: minmax(300px, 365px) minmax(330px, 410px) minmax(300px, 365px);

    column-gap: 30px;

    row-gap: 28px;

    width: min(100%, 1220px);

  }



  .discipline-section .discipline-orbit {

    width: min(100%, 390px);

  }



  .discipline-section .discipline-point {

    grid-template-columns: 112px minmax(0, 1fr);

    gap: 12px;

  }



  .discipline-section .discipline-card-image {

    width: 112px;

    height: 126px;

  }



  .discipline-section .discipline-list-text {

    font-size: 14px;

    line-height: 1.32;

  }

}



@media (max-width: 1260px) and (min-width: 768px) {

  .discipline-section .discipline-layout {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    width: min(100%, 920px);

    margin-inline: auto;

  }



  .discipline-section .discipline-orbit {

    grid-column: 1 / -1;

    justify-self: center;

    width: min(100%, 420px);

  }



  .discipline-section .discipline-point {

    grid-template-columns: 128px minmax(0, 1fr);

    width: 100%;

    max-width: none;

  }



  .discipline-section .discipline-card-image {

    width: 128px;

    height: 136px;

  }



  .discipline-section .discipline-list-text {

    font-size: 14px;

    line-height: 1.36;

  }

}



@media (max-width: 767px) {

  .discipline-section .discipline-layout {

    width: min(100%, 520px);

    margin-inline: auto;

  }



  .discipline-section .discipline-point {

    grid-template-columns: 112px minmax(0, 1fr);

    gap: 12px;

    padding: 10px;

  }



  .discipline-section .discipline-card-image {

    width: 112px;

    height: 126px;

    aspect-ratio: auto;

  }



  .discipline-section .discipline-list-text {

    font-size: 13px;

    line-height: 1.35;

  }

}



@media (max-width: 480px) {

  .discipline-section .discipline-point {

    grid-template-columns: 1fr;

  }



  .discipline-section .discipline-card-image {

    width: 100%;

    height: 180px;

  }

}



/* Capability section final scale and spacing */

.discipline-section {

  padding-bottom: clamp(70px, 7vw, 110px);

}



@media (min-width: 1261px) {

  .discipline-section .discipline-layout {

    grid-template-columns: minmax(360px, 430px) minmax(430px, 520px) minmax(360px, 430px);

    column-gap: clamp(42px, 5vw, 86px);

    row-gap: 30px;

    width: min(100%, 1380px);

    margin-top: 38px;

  }



  .discipline-section .discipline-orbit {

    width: min(100%, 500px);

  }



  .discipline-section .discipline-point {

    grid-template-columns: 150px minmax(0, 1fr);

    gap: 14px;

    padding: 12px;

  }



  .discipline-section .discipline-card-image {

    width: 150px;

    height: 132px;

  }



  .discipline-section .discipline-point h3 {

    font-size: 12px;

    line-height: 1.18;

  }



  .discipline-section .discipline-list-text {

    font-size: 14px;

    line-height: 1.28;

  }

}



@media (min-width: 1261px) and (max-width: 1480px) {

  .discipline-section .discipline-layout {

    grid-template-columns: minmax(330px, 390px) minmax(390px, 450px) minmax(330px, 390px);

    column-gap: 36px;

    row-gap: 28px;

    width: min(100%, 1260px);

  }



  .discipline-section .discipline-orbit {

    width: min(100%, 440px);

  }



  .discipline-section .discipline-point {

    grid-template-columns: 132px minmax(0, 1fr);

    padding: 11px;

  }



  .discipline-section .discipline-card-image {

    width: 132px;

    height: 126px;

  }



  .discipline-section .discipline-list-text {

    font-size: 13px;

    line-height: 1.26;

  }

}



@media (max-width: 1260px) and (min-width: 768px) {

  .discipline-section {

    padding-bottom: 80px;

  }



  .discipline-section .discipline-layout {

    row-gap: 22px;

  }

}



@media (max-width: 767px) {

  .discipline-section {

    padding-bottom: 72px;

  }

}



/* Capability grid centered under heading */

@media (min-width: 1261px) {

  .discipline-section .discipline-layout {

    grid-template-columns: minmax(350px, 390px) minmax(420px, 480px) minmax(350px, 390px);

    column-gap: clamp(22px, 3vw, 46px);

    justify-content: center;

    justify-items: stretch;

    width: min(100%, 1230px);

    margin-left: auto;

    margin-right: auto;

  }



  .discipline-section .discipline-orbit {

    justify-self: center;

    width: min(100%, 460px);

  }

}



@media (min-width: 1261px) and (max-width: 1480px) {

  .discipline-section .discipline-layout {

    grid-template-columns: minmax(320px, 365px) minmax(380px, 430px) minmax(320px, 365px);

    column-gap: 24px;

    width: min(100%, 1160px);

  }



  .discipline-section .discipline-orbit {

    width: min(100%, 420px);

  }

}



/* Remove capability decorative background marks */

.discipline-section .discipline-industry-bg,

.discipline-section .industry-accent,

.discipline-section::before,

.discipline-section::after {

  display: none !important;

  content: none !important;

}



/* Capability balanced image and dotted list */

.discipline-section .discipline-point {

  align-items: stretch;

  height: auto;

  min-height: 0;

}



.discipline-section .discipline-card-image {

  height: 100%;

  min-height: 118px;

  aspect-ratio: auto;

}



.discipline-section .discipline-card-image img {

  height: 100%;

  object-fit: cover;

}



.discipline-section .discipline-card-copy {

  justify-content: center;

  padding-top: 0;

}



.discipline-section .discipline-list {

  display: block;

  margin: 0;

  padding-left: 15px;

  color: #334155;

  font-size: 11px;

  line-height: 1.28;

  font-weight: 500;

}



.discipline-section .discipline-list li {

  margin: 0 0 2px;

  font-size: inherit;

  line-height: inherit;

}



.discipline-section .discipline-list li::marker {

  color: #0f172a;

  font-size: 0.7em;

}



@media (min-width: 1261px) {

  .discipline-section .discipline-point {

    grid-template-columns: 142px minmax(0, 1fr);

  }



  .discipline-section .discipline-card-image {

    width: 142px;

    height: 100%;

    min-height: 128px;

  }



  .discipline-section .discipline-list {

    font-size: 13px;

    line-height: 1.25;

  }

}



@media (min-width: 1261px) and (max-width: 1480px) {

  .discipline-section .discipline-point {

    grid-template-columns: 122px minmax(0, 1fr);

  }



  .discipline-section .discipline-card-image {

    width: 122px;

    min-height: 124px;

  }



  .discipline-section .discipline-list {

    font-size: 10px;

    line-height: 1.22;

  }

}



@media (max-width: 767px) {

  .discipline-section .discipline-card-image {

    height: 100%;

    min-height: 126px;

  }



  .discipline-section .discipline-list {

    font-size: 12px;

    line-height: 1.3;

  }

}



/* Capability explicit bullet style */

.discipline-section .discipline-list li {

  list-style: disc;

}



/* HSE full-image background match */

.hse-slider {

  background: #0b2f1b;

}



.hse-slider img.active {

  animation: none;

}

/* HSE image inset with right gap and rounded image */

.hse-slider {

  inset: 28px 44px 30px 0;

  width: auto;

  height: auto;

  overflow: hidden;

  border-radius: 18px;

  background: #0b2f1b;

}



.hse-slider img {

  border-radius: 18px;

}



@media (max-width: 767px) {

  .hse-slider {

    inset: 18px 18px 18px 0;

    border-radius: 14px;

  }



  .hse-slider img {

    border-radius: 14px;

  }

}



/* HSE visible image corner radius */

.hse-slider,

.hse-slider img,

.hse-slider img.active {

  border-radius: 24px !important;

}



.hse-slider {

  overflow: hidden;

  isolation: isolate;

}



@media (max-width: 767px) {

  .hse-slider,

  .hse-slider img,

  .hse-slider img.active {

    border-radius: 18px !important;

  }

}



/* HSE round the visible contained photo */

.hse-slider img {

  inset: 0;

  width: auto !important;

  height: auto !important;

  max-width: 100%;

  max-height: 100%;

  margin: auto;

  object-fit: contain;

  border-radius: 24px !important;

}



.hse-slider img.active {

  border-radius: 24px !important;

}



@media (max-width: 767px) {

  .hse-slider img,

  .hse-slider img.active {

    border-radius: 18px !important;

  }

}



/* Timeline project-card rail */

.timeline-redesign {

  min-height: auto;

  padding: 48px 0 58px;

  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

}



.timeline-redesign .timeline-section-header {

  margin-bottom: 22px;

}



.timeline-showcase {

  width: min(100% - 48px, 1680px);

  margin: 0 auto;

  position: relative;

}



.timeline-year-rail {

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 24px;

  margin: 0 auto 30px;

  padding: 0 52px;

}



.timeline-year-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 74px;

  height: 42px;

  padding: 0 18px;

  border-radius: 999px;

  background: #ffffff;

  color: #172033;

  font-size: 1rem;

  font-weight: 800;

  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.12);

}



.timeline-rail-line {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-around;

  height: 2px;

  background: #b8c0cd;

}



.timeline-rail-dot {

  width: 15px;

  height: 15px;

  border-radius: 50%;

  border: 4px solid currentColor;

  background: #ffffff;

  box-shadow: 0 0 0 3px #ffffff;

}



.timeline-card-frame {

  position: relative;

}



.timeline-card-viewport {

  overflow-x: auto;

  scroll-behavior: smooth;

  scrollbar-width: none;

  padding: 0 62px 38px;

}



.timeline-card-viewport::-webkit-scrollbar {

  display: none;

}



.timeline-card-track {

  display: grid;

  grid-auto-flow: column;

  grid-auto-columns: clamp(190px, 14.5vw, 245px);

  gap: 18px;

  align-items: stretch;

}



.timeline-project-card {

  overflow: hidden;

  border-radius: 8px;

  background: #ffffff;

  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.11);

  border: 1px solid rgba(15, 23, 42, 0.08);

  scroll-snap-align: start;

}



.timeline-project-image {

  position: relative;

  height: 178px;

  overflow: hidden;

  background: #e8edf3;

}



.timeline-project-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.35s ease;

}



.timeline-project-card:hover .timeline-project-image img {

  transform: scale(1.04);

}



.timeline-project-body {

  position: relative;

  min-height: 190px;

  padding: 18px 16px 18px;

}



.timeline-card-year {

  position: absolute;

  top: -160px;

  left: 16px;

  display: inline-flex;

  align-items: center;

  height: 28px;

  padding: 0 12px;

  border-radius: 5px;

  background: var(--timeline-accent, #172033);

  color: #ffffff;

  font-size: 0.78rem;

  font-weight: 800;

  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.16);

}




.timeline-company-logo {
  position: absolute;
  top: 18px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 42px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.08);
}

.timeline-company-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.timeline-project-body h3 {

  margin: 0 0 8px;
/*  padding-right: 84px;*/
	padding-top:10px;

  color: #10182c;

  font-size: clamp(0.86rem, 0.9vw, 1rem);

  font-weight: 800;

  line-height: 1.25;

}







.timeline-project-list {

  display: grid;

  gap: 12px;

}



.timeline-project-list > div + div {

  padding-top: 12px;

  border-top: 1px solid rgba(15, 23, 42, 0.09);

}

.timeline-inline-badge {

  display: inline-flex;

  align-items: center;

  height: 20px;

  padding: 0 7px;

  border-radius: 999px;

  background: rgba(247, 199, 68, 0.2);

  color: #6f5200;

  font-size: 0.68rem;

  font-weight: 800;

  white-space: nowrap;

}

.timeline-project-body p {

  min-height: 0;

  margin: 0;

  color: #5e6a7d;

  font-size: 0.8rem;

  line-height: 1.55;

}

.timeline-showcase .dot-green { color: #1b8b3d; --timeline-accent: #1b8b3d; margin-right: 0; }

.timeline-showcase .dot-yellow { color: #f7c744; --timeline-accent: #f7c744; margin-right: 0; }

.timeline-showcase .dot-red { color: #c41e24; --timeline-accent: #c41e24; margin-right: 0; }

.timeline-showcase .dot-blue { color: #f7c744; --timeline-accent: #f7c744; margin-right: 0; }



.timeline-card-nav {

  position: absolute;

  top: 50%;

  z-index: 5;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  border: 1px solid rgba(15, 23, 42, 0.08);

  background: #ffffff;

  color: #172033;

  display: grid;

  place-items: center;

  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16);

  transform: translateY(-50%);

  cursor: pointer;

  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;

}



.timeline-card-nav:hover {

  background: #c41e24;

  color: #ffffff;

  transform: translateY(-50%) scale(1.06);

}



.timeline-card-prev { left: 0; }

.timeline-card-next { right: 0; }



.timeline-card-dots {

  display: flex;

  justify-content: center;

  gap: 18px;

  margin-top: 18px;

}



.timeline-card-dot {

  width: 10px;

  height: 10px;

  border: 0;

  border-radius: 50%;

  background: #c6ccd6;

  cursor: pointer;

  padding: 0;

}





.timeline-ongoing-label {

  margin-top: 8px;

  text-align: right;

  color: #10182c;

  font-size: 0.82rem;

  font-weight: 800;

}

.timeline-card-dot.active {

  background: #1b8b3d;

}



@media (max-width: 991px) {

  .timeline-showcase {

    width: min(100% - 28px, 760px);

  }



  .timeline-year-rail {

    gap: 14px;

    padding: 0 4px;

    margin-bottom: 22px;

  }



  .timeline-year-pill {

    min-width: 62px;

    height: 36px;

    padding: 0 12px;

    font-size: 0.88rem;

  }



  .timeline-card-viewport {

    padding: 0 0 8px;

    scroll-snap-type: x mandatory;

  }



  .timeline-card-track {

    grid-auto-columns: min(78vw, 315px);

    gap: 16px;

  }



  .timeline-card-nav {

    display: none;

  }

}



/* Homepage certifications + contact split */

.cert-contact-section {

  background: #ffffff;

  padding: 0;

  overflow: hidden;

}



.cert-contact-grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  min-height: clamp(360px, 38vw, 500px);

}



.cert-contact-panel {

  position: relative;

  min-width: 0;

}



.cert-contact-certifications {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 58px);

  text-align: center;

  background: #ffffff;

}



.cert-contact-certifications .section-title {

  margin: 0 0 28px;

  font-size: clamp(1.35rem, 2vw, 2rem);

  font-weight: 400;

}



.cert-contact-certifications .slider-container {

  width: 100%;

  margin: 0 0 28px;

  gap: 0;

}



.cert-contact-certifications .cert-grid {

  max-width: 520px;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

}



.cert-contact-certifications .cert-cards {

  margin-bottom: 0;

  aspect-ratio: 0.84 / 1;

  padding: 10px;

}



.cert-contact-certifications .action-container {

  margin-top: 0;

}



.cert-contact-map {

  min-height: clamp(360px, 38vw, 500px);

  display: flex;

  align-items: center;

  overflow: hidden;

  isolation: isolate;

}



.cert-contact-map-img {

  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  filter: saturate(0.85) brightness(0.98);

}



.cert-contact-map-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.58) 38%, rgba(255, 255, 255, 0.08) 76%);

}



.cert-contact-map .map-cta-copy {

  position: relative;

  z-index: 2;

  width: min(430px, 72%);

  margin-left: clamp(28px, 6vw, 84px);

}



.cert-contact-map .map-cta-heading {

  font-size: clamp(1.45rem, 2.5vw, 2.35rem);

  margin-bottom: 18px;

}



@media (max-width: 991px) {

  .cert-contact-grid {

    grid-template-columns: 1fr;

  }



  .cert-contact-certifications {

    padding: 40px 20px;

  }



  .cert-contact-map,

  .cert-contact-grid {

    min-height: auto;

  }



  .cert-contact-map {

    min-height: 360px;

  }



  .cert-contact-map .map-cta-copy {

    width: min(460px, calc(100% - 40px));

    margin: 0 20px;

  }

}



@media (max-width: 640px) {

  .cert-contact-certifications .cert-grid {

    grid-template-columns: 1fr;

    max-width: 260px;

  }

}



/* Compact card layout for homepage cert/contact split */

.cert-contact-section {

  padding: 26px 0;

  background: #ffffff;

}



.cert-contact-grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);

  gap: 20px;

  min-height: 0;

  width: 100%;

  max-width: none;

  margin: 0;

  align-items: stretch;

}



.cert-contact-panel {

  min-height: 178px;

  border: 1px solid #e3e8ef;

  border-radius: 4px;

  overflow: hidden;

  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);

}



.cert-contact-certifications {

  display: grid;

  grid-template-columns: 1fr auto;

  grid-template-areas:

    "title title"

    "certs action";

  align-items: center;

  gap: 12px 24px;

  padding: 18px 18px 18px 22px;

  text-align: left;

}



.cert-contact-certifications .section-title {

  grid-area: title;

  margin: 0;

  font-size: 0.95rem;

  font-weight: 700;

  text-align: left;

}



.cert-contact-certifications .slider-container {

  grid-area: certs;

  margin: 0;

  width: 100%;

}



.cert-contact-certifications .cert-grid {

  max-width: none;

  display: grid;

  grid-template-columns: repeat(3, minmax(84px, 1fr));

  gap: 14px;

  width: 100%;

}



.cert-contact-certifications .cert-cards {

  min-height: 102px;

  aspect-ratio: 1 / 0.72;

  padding: 8px;

  border-radius: 0;

}



.cert-contact-certifications .action-container {

  grid-area: action;

  align-self: center;

  justify-content: flex-end;

  margin: 0;

}



.cert-contact-certifications .btn-download {

  white-space: nowrap;

  padding: 11px 22px;

  font-size: 0.72rem;

  border-radius: 3px;

}



.cert-contact-map {

  min-height: 178px;

}



.cert-contact-map-img {

  filter: saturate(0.9) brightness(1);

  object-position: center;

}



.cert-contact-map-overlay {

  background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 36%, rgba(255,255,255,0.1) 72%);

}



.cert-contact-map .map-cta-copy {

  width: min(310px, 54%);

  margin-left: clamp(20px, 4vw, 48px);

}



.cert-contact-map .section-eyebrow {

  margin-bottom: 8px;

  font-size: 0.66rem;

}



.cert-contact-map .map-cta-heading {

  margin: 0 0 14px;

  font-size: clamp(1rem, 1.6vw, 1.42rem);

  line-height: 1.12;

  letter-spacing: -0.02em;

}



.cert-contact-map .map-cta-btn {

  padding: 10px 18px;

  border-radius: 3px;

  font-size: 0.72rem;

  font-weight: 800;

  text-transform: uppercase;

}



@media (max-width: 991px) {

  .cert-contact-grid {

    grid-template-columns: 1fr;

  }



  .cert-contact-panel,

  .cert-contact-map {

    min-height: 190px;

  }

}



@media (max-width: 640px) {

  .cert-contact-certifications {

    grid-template-columns: 1fr;

    grid-template-areas:

      "title"

      "certs"

      "action";

  }



  .cert-contact-certifications .cert-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    max-width: none;

  }



  .cert-contact-certifications .action-container {

    justify-content: flex-start;

  }



  .cert-contact-map .map-cta-copy {

    width: calc(100% - 40px);

    margin: 0 20px;

  }

}



/* Final polish for timeline-to-cert/contact area */

.timeline-redesign {

  padding-bottom: 24px;

}



.timeline-ongoing-label {

  display: none;

}



.cert-contact-section {

  padding: 30px clamp(18px, 2vw, 30px) 36px;

  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

 

}



.cert-contact-grid {

  grid-template-columns: minmax(420px, 0.92fr) minmax(520px, 1.08fr);

  gap: clamp(18px, 2vw, 28px);

  align-items: stretch;

}



.cert-contact-panel {

  min-height: 232px;

  border-color: #dfe6ef;

  border-radius: 6px;

  background: #ffffff;

  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);

}



.cert-contact-certifications {

  grid-template-columns: minmax(0, 1fr) auto;

  gap: 18px 22px;

  padding: 22px 24px;

}



.cert-contact-certifications .section-title {

  display: flex;

  align-items: center;

  gap: 9px;

  color: #10182c;

  letter-spacing: 0;

}



.cert-contact-certifications .section-title::before {

  content: "";

  width: 7px;

  height: 18px;

  border-radius: 999px;

  background: #f7c744;

}



.cert-contact-certifications .cert-grid {

  grid-template-columns: repeat(3, minmax(96px, 1fr));

  gap: 14px;

}



.cert-contact-certifications .cert-cards {

  min-height: 118px;

  border-color: #dfe6ef;

  background: #fbfdff;

  box-shadow: none;

}



.cert-contact-certifications .cert-cards img {

  transform: scale(0.96);

}



.cert-contact-certifications .btn-download {

  min-width: 116px;

  justify-content: center;

  background: #1b8b3d;

  box-shadow: 0 10px 22px rgba(27, 139, 61, 0.18);

}



.cert-contact-certifications .btn-download:hover {

  background: #146d30;

}



.cert-contact-map {

  min-height: 232px;

  border: 1px solid #dfe6ef;

}



.cert-contact-map-img {

  object-position: 58% center;

}



.cert-contact-map-overlay {

  background:

    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 34%, rgba(255,255,255,0.18) 68%, rgba(255,255,255,0.02) 100%);

}



.cert-contact-map .map-cta-copy {

  width: min(360px, 48%);

  margin-left: clamp(28px, 4vw, 64px);

}



.cert-contact-map .section-eyebrow {

  color: #1b8b3d;

  letter-spacing: 0.16em;

}



.cert-contact-map .map-cta-heading {

  color: #10182c;

  font-size: clamp(1.24rem, 1.75vw, 1.75rem);

  line-height: 1.12;

  max-width: 420px;

}



.cert-contact-map .map-cta-btn {

  background: #f7c744;

  color: #10182c;

  box-shadow: 0 10px 22px rgba(247, 199, 68, 0.24);

}



.cert-contact-map .map-cta-btn:hover {

  background: #e5b522;

  color: #10182c;

}



@media (max-width: 1100px) {

  .cert-contact-grid {

    grid-template-columns: 1fr;

  }



  .cert-contact-panel,

  .cert-contact-map {

    min-height: 230px;

  }

}



@media (max-width: 640px) {

  .cert-contact-section {

    padding-inline: 14px;

  }



  .cert-contact-certifications {

    padding: 20px;

  }



  .cert-contact-certifications .cert-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

  }



  .cert-contact-certifications .cert-cards {

    min-height: 92px;

  }

}



/* Correction: compact balanced cert/contact band */

.cert-contact-section {

  padding: 24px 20px 28px;

  background: #ffffff;

  border-top: 1px solid #edf1f6;

}



.cert-contact-grid {

  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

  gap: 28px;

  width: 100%;

  max-width: none;

}



.cert-contact-panel,

.cert-contact-map {

  min-height: 230px;

  max-height: 230px;

  border-radius: 6px;

}



.cert-contact-certifications {

  grid-template-columns: minmax(0, 1fr) auto;

  grid-template-areas:

    "title title"

    "certs action";

  align-content: center;

  padding: 26px 24px;

}



.cert-contact-certifications .section-title {

  margin-bottom: 8px;

}



.cert-contact-certifications .slider-container {

  align-self: center;

}



.cert-contact-certifications .cert-grid {

  grid-template-columns: repeat(3, minmax(120px, 1fr));

  gap: 14px;

}



.cert-contact-certifications .cert-cards {

  min-height: 118px;

  aspect-ratio: 1.18 / 0.92;

  padding: 10px;

}



.cert-contact-certifications .cert-cards img {

  max-height: 104px;

  transform: none;

}



.cert-contact-certifications .action-container {

  padding-left: 8px;

}



.cert-contact-certifications .btn-download {

  min-width: 116px;

  height: 42px;

  padding: 0 22px;

}



.cert-contact-map-img {

  object-position: 70% center;

}



.cert-contact-map-overlay {

  background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 32%, rgba(255,255,255,0.2) 58%, rgba(255,255,255,0.02) 100%);

}



.cert-contact-map .map-cta-copy {

  width: min(440px, 55%);

  margin-left: clamp(34px, 5vw, 62px);

}



.cert-contact-map .map-cta-heading {

  font-size: clamp(1.45rem, 2.05vw, 2rem);

  max-width: 500px;

}



@media (max-width: 1100px) {

  .cert-contact-panel,

  .cert-contact-map {

    max-height: none;

  }

}



@media (max-width: 760px) {

  .cert-contact-certifications .cert-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .cert-contact-certifications {

    grid-template-columns: 1fr;

    grid-template-areas:

      "title"

      "certs"

      "action";

  }



  .cert-contact-certifications .action-container {

    justify-content: flex-start;

    padding-left: 0;

  }

}



/* Visibility fix for split CTA map text */

.cert-contact-map-img {

  object-position: 82% center;

}



.cert-contact-map-overlay {

  background:

    linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.98) 30%, rgba(255,255,255,0.72) 46%, rgba(255,255,255,0.08) 68%, rgba(255,255,255,0) 100%);

}



.cert-contact-map .map-cta-copy {

  width: min(390px, 45%);

  margin-left: clamp(34px, 4vw, 58px);

  padding: 4px 0;

}



.cert-contact-map .map-cta-heading {

  max-width: 390px;

  font-size: clamp(1.35rem, 1.8vw, 1.75rem);

  line-height: 1.14;

  text-shadow: 0 1px 0 rgba(255,255,255,0.8);

}



@media (max-width: 1100px) {

  .cert-contact-map-img {

    object-position: 74% center;

  }



  .cert-contact-map .map-cta-copy {

    width: min(420px, 58%);

  }

}



@media (max-width: 640px) {

  .cert-contact-map-overlay {

    background: rgba(255,255,255,0.84);

  }



  .cert-contact-map .map-cta-copy {

    width: calc(100% - 40px);

  }

}



/* Text-only timeline cards */

.timeline-project-image {

  display: none;

}



.timeline-card-track {

  grid-auto-columns: clamp(210px, 15vw, 270px);

}



.timeline-project-card {

  min-height: 230px;

  display: flex;

}



.timeline-project-body {

  width: 100%;

  min-height: 230px;

  padding: 58px 18px 22px;

}



.timeline-card-year {

  top: 18px;

  left: 18px;

}



.timeline-project-body h3 {

  margin-top: 0;

}



@media (max-width: 991px) {

  .timeline-card-track {

    grid-auto-columns: min(78vw, 315px);

  }

}





/* Timeline spacing request */

.timeline-redesign {

  padding-top: 32px;

  padding-bottom: 100px;

}



/* Timeline dot gap correction */

.timeline-project-card {

  min-height: 190px;

}



.timeline-project-body {

  min-height: 190px;

  padding-bottom: 20px;

}



.timeline-card-dots {

  margin-top: 18px;

}



/* Certification panel image/button adjustment */

.cert-contact-certifications {

  align-content: center;

  grid-template-areas:

    "title title"

    "certs certs"

    ". action";

  gap: 14px 20px;

}



.cert-contact-certifications .cert-grid {

  grid-template-columns: repeat(3, minmax(130px, 1fr));

  gap: 16px;

}



.cert-contact-certifications .cert-cards {

  min-height: 132px;

  aspect-ratio: 1.18 / 0.88;

}



.cert-contact-certifications .cert-cards img {

  max-height: 120px;

}



.cert-contact-certifications .action-container {

  justify-content: flex-end;

  padding-left: 0;

  margin-top: 2px;

}



@media (max-width: 760px) {

  .cert-contact-certifications {

    grid-template-areas:

      "title"

      "certs"

      "action";

  }

}



/* Cert/contact height increase */

.cert-contact-panel,

.cert-contact-map {

  min-height: 300px;

  max-height: none;

}



.cert-contact-certifications {

  padding-top: 28px;

  padding-bottom: 28px;

}



.cert-contact-certifications .cert-cards {

  min-height: 145px;

}



.cert-contact-certifications .cert-cards img {

  max-height: 132px;

}



/* Smoother timeline carousel motion */

.timeline-card-viewport {

  scroll-behavior: smooth;

  scroll-snap-type: x proximity;

}



.timeline-project-card {

  scroll-snap-align: start;

}



/* Full-size stacked map and certifications */

.cert-contact-section {

  padding: 0 0 42px;

  background: #ffffff;

  border-top: 0;

}



.cert-contact-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 42px;

  width: 100%;

}



.cert-contact-map {

  order: 2;

  min-height: clamp(430px, 35vw, 540px);

  border: 0;

  border-radius: 0;

  box-shadow: none;

}



.cert-contact-certifications {

  order: 1;

  display: grid;

  grid-template-columns: 1fr;

  grid-template-areas:

    "title"

    "certs"

    "action";

  justify-items: center;

  gap: 34px;

  width: min(960px, calc(100% - 40px));

  min-height: 0;

  margin: 0 auto;

  padding: 0;

  border: 0;

  border-radius: 0;

  box-shadow: none;

  text-align: center;

}



.cert-contact-certifications .section-title {

  justify-content: center;

  margin: 0;

  font-size: clamp(2rem, 3vw, 2.55rem);

  font-weight: 400;

  color: #10182c;

}



.cert-contact-certifications .section-title::before {

  display: none;

}



.cert-contact-certifications .slider-container {

  width: 100%;

  margin: 0;

}



.cert-contact-certifications .cert-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 274px));

  justify-content: center;

  gap: 40px;

  width: 100%;

}



.cert-contact-certifications .cert-cards {

  min-height: 326px;

  aspect-ratio: auto;

  padding: 10px;

  border: 1px solid #dfe6ef;

  background: #ffffff;

}



.cert-contact-certifications .cert-cards img {

  width: 100%;

  height: 100%;

  max-height: none;

  object-fit: contain;

}



.cert-contact-certifications .action-container {

  justify-content: center;

  width: 100%;

  margin: 14px 0 0;

  padding-left: 0;

}



.cert-contact-certifications .btn-download {

  min-width: 154px;

  height: 46px;

  padding: 0 28px;

}



.cert-contact-map-img {

  object-position: center;

}



.cert-contact-map-overlay {

  background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 32%, rgba(255,255,255,0.12) 66%, rgba(255,255,255,0) 100%);

}



.cert-contact-map .map-cta-copy {

  width: min(520px, 42%);

  margin-left: clamp(60px, 6.8vw, 102px);

}



.cert-contact-map .map-cta-heading {

  max-width: 520px;

  font-size: clamp(2rem, 3vw, 2.7rem);

  line-height: 1.12;

}



@media (max-width: 900px) {

  .cert-contact-map {

    min-height: 390px;

  }



  .cert-contact-certifications .cert-grid {

    gap: 18px;

  }



  .cert-contact-certifications .cert-cards {

    min-height: 240px;

  }



  .cert-contact-map .map-cta-copy {

    width: min(440px, calc(100% - 40px));

    margin: 0 20px;

  }

}



@media (max-width: 640px) {

  .cert-contact-grid {

    gap: 32px;

  }



  .cert-contact-map {

    min-height: 360px;

  }



  .cert-contact-certifications {

    width: calc(100% - 28px);

    gap: 22px;

  }



  .cert-contact-certifications .cert-grid {

    grid-template-columns: 1fr;

    max-width: 274px;

  }



  .cert-contact-map .map-cta-heading {

    font-size: 1.7rem;

  }

}



/* Reduce stacked certifications section height */

.cert-contact-grid {

  gap: 28px;

}



.cert-contact-certifications {

  gap: 22px;

  width: min(900px, calc(100% - 40px));

}



.cert-contact-certifications .section-title {

  font-size: clamp(1.7rem, 2.4vw, 2.15rem);

}



.cert-contact-certifications .cert-grid {

  grid-template-columns: repeat(3, minmax(0, 236px));

  gap: 28px;

}



.cert-contact-certifications .cert-cards {

  min-height: 260px;

}



.cert-contact-certifications .action-container {

  margin-top: 2px;

}





/* Certifications heading match projects header */

.cert-contact-certifications {

  gap: 20px;

}



.cert-contact-certifications .cert-heading-eyebrow {

  grid-area: title;

  justify-content: center;

  margin: 0 0 4px;

  color: #138a3d;

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}



.cert-contact-certifications .cert-heading-eyebrow::before {

  display: block;

  background: #0f3f23;

}



.cert-contact-certifications .section-title {

  grid-area: title;

  margin-top: 32px;

  font-size: clamp(2.25rem, 3.5vw, 3.35rem);

  font-weight: 400;

  line-height: 1.05;

  color: #07152d;

}



.cert-contact-certifications {

  grid-template-areas:

    "eyebrow"

    "title"

    "certs"

    "action";

}



.cert-contact-certifications .cert-heading-eyebrow {

  grid-area: eyebrow;

}



.cert-contact-certifications .section-title {

  margin-top: 0;

}



/* Certifications heading refinement */

.cert-contact-certifications {

  gap: 16px;

}



.cert-contact-certifications .cert-heading-eyebrow {

  margin-bottom: 0;

  font-size: 0.68rem;

  letter-spacing: 0.16em;

  line-height: 1;

}



.cert-contact-certifications .cert-heading-eyebrow::before {

  width: 32px;

  height: 2px;

  margin-right: 10px;

}



.cert-contact-certifications .section-title {

  font-size: clamp(1.9rem, 2.8vw, 2.65rem);

  line-height: 1.08;

}



/* Certifications header-left structure */

.cert-contact-certifications {

  grid-template-areas:

    "title"

    "certs"

    "action";

  gap: 18px;

}



.cert-contact-certifications .header-left {

  grid-area: title;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  text-align: center;

}



.cert-contact-certifications .header-left .section-eyebrow {

  justify-content: center;

  margin: 0;

  color: #138a3d;

  font-size: 0.72rem;

  font-weight: 300;

  line-height: 1;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}



.cert-contact-certifications .header-left .section-eyebrow::before {

  display: block;

  width: 32px;

  height: 2px;

  margin-right: 10px;

  background: #0f3f23;

}



.cert-contact-certifications .header-left .section-title {

  margin: 0;

  font-size: 38px;

  font-weight: 400;

  line-height: 1.08;

  color: #07152d;

}

/* Certifications two-column Bootstrap layout */

.cert-contact-certifications {

  display: block;

  width: min(1180px, calc(100% - 40px));

  padding: 18px 0 4px;

  text-align: left;

}



.cert-contact-certifications .cert-two-col {

  width: 100%;

  margin: 0;

}



.cert-contact-certifications .cert-copy-col {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

}



.cert-contact-certifications .header-left {

  align-items: flex-start;

  gap: 12px;

  text-align: left;

}



.cert-contact-certifications .header-left .section-eyebrow {

  justify-content: flex-start;

}



.cert-contact-certifications .header-left .section-title {

  font-size: clamp(2.05rem, 3.2vw, 3rem);

}



.cert-contact-certifications .cert-intro {

  max-width: 390px;

  margin: 16px 0 24px;

  color: #566275;

  font-size: 0.98rem;

  line-height: 1.75;

}



.cert-contact-certifications .action-container {

  justify-content: flex-start;

  width: auto;

  margin: 0;

}



.cert-contact-certifications .cert-images-col {

  display: flex;

  justify-content: flex-end;

}



.cert-contact-certifications .slider-container {

  width: 100%;

  margin: 0;

}



.cert-contact-certifications .cert-grid {

  grid-template-columns: repeat(3, minmax(0, 210px));

  justify-content: end;

  gap: 24px;

}



.cert-contact-certifications .cert-cards {

  min-height: 238px;

}



@media (max-width: 991px) {

  .cert-contact-certifications {

    text-align: center;

  }



  .cert-contact-certifications .cert-copy-col,

  .cert-contact-certifications .header-left {

    align-items: center;

    text-align: center;

  }



  .cert-contact-certifications .header-left .section-eyebrow {

    justify-content: center;

  }



  .cert-contact-certifications .action-container {

    justify-content: center;

    width: 100%;

  }



  .cert-contact-certifications .cert-images-col {

    justify-content: center;

  }



  .cert-contact-certifications .cert-grid {

    justify-content: center;

  }

}



@media (max-width: 640px) {

  .cert-contact-certifications .cert-grid {

    grid-template-columns: 1fr;

    max-width: 250px;

    margin: 0 auto;

  }

}



/* Certifications copy without paragraph */

.cert-contact-certifications .cert-copy-col .action-container {

  margin-top: 24px;

}



/* Separate certifications and contact map sections */

.certifications-home-section {

  padding: 56px 0 48px;

  background: #ffffff;

}



.certifications-home-section .cert-contact-certifications {

  width: 100%;

  margin: 0;

  padding: 0;

  border: 0;

  box-shadow: none;

  background: transparent;

}



.contact-map-section {

  width: 100%;

  background: #ffffff;

}



.contact-map-section .cert-contact-map {

  width: 100%;

  min-height: clamp(430px, 35vw, 540px);

  border: 0;

  border-radius: 0;

  box-shadow: none;

}

/* Footer structure refinement, background unchanged */

.footer-container-modern {

  grid-template-columns: minmax(240px, 1.25fr) repeat(2, minmax(150px, 0.75fr)) minmax(260px, 1.15fr);

  gap: clamp(28px, 4vw, 56px);

  align-items: flex-start;

  padding: 46px clamp(24px, 5vw, 72px) 28px;

}



.footer-brand-col {

  max-width: 330px;

}



.footer-brand-logo {

  width: 150px;

  height: auto;

  margin-bottom: 16px;

}



.footer-brand-col p {

  margin: 0;

  color: #555;

  font-size: 0.92rem;

  line-height: 1.75;

}



.footer-container-modern .footer-column h3 {

  margin: 0 0 18px;

}



.footer-container-modern .footer-column ul {

  margin: 0;

  padding: 0;

}



.footer-container-modern .footer-column ul li {

  margin-bottom: 10px;

}



.footer-container-modern .connect-col {

  padding-left: clamp(24px, 3vw, 42px);

}



.footer-container-modern .contact-item {

  margin-bottom: 16px;

}



@media (max-width: 992px) {

  .footer-container-modern {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .footer-container-modern .connect-col {

    padding-left: 0;

    border-left: 0;

  }

}



@media (max-width: 640px) {

  .footer-container-modern {

    grid-template-columns: 1fr;

    padding-inline: 18px;

  }

}

/* Compact four-column footer */

.footer-container-modern {

  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(260px, 1.25fr);

  gap: clamp(24px, 4vw, 56px);

  padding: 34px clamp(24px, 5vw, 72px) 22px;

}



.footer-container-modern .footer-column h3 {

  margin-bottom: 14px;

}



.footer-container-modern .footer-column ul li {

  margin-bottom: 8px;

}



.footer-container-modern .contact-item {

  margin-bottom: 12px;

}



.footer-bottoms {

  padding-top: 14px;

  padding-bottom: 14px;

}



@media (max-width: 992px) {

  .footer-container-modern {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

/* More compact footer while keeping all data */

.footer-container-modern {

  grid-template-columns: repeat(3, minmax(150px, 0.85fr)) minmax(330px, 1.35fr);

  gap: clamp(20px, 3vw, 42px);

  padding: 24px clamp(24px, 5vw, 72px) 16px;

}



.footer-container-modern .footer-column h3 {

  margin-bottom: 10px;

  font-size: 0.78rem;

  letter-spacing: 1.8px;

}



.footer-container-modern .footer-column ul li {

  margin-bottom: 5px;

  line-height: 1.35;

}



.footer-container-modern .footer-column ul li a {

  font-size: 0.84rem;

}



.footer-container-modern .connect-col {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  column-gap: 18px;

  padding-left: clamp(18px, 2.5vw, 32px);

}



.footer-container-modern .connect-col h3 {

  grid-column: 1 / -1;

}



.footer-container-modern .contact-item {

  margin-bottom: 0;

}



.footer-container-modern .contact-item i {

  font-size: 1rem;

  margin-right: 10px;

}



.footer-container-modern .contact-item .label {

  font-size: 0.78rem;

}



.footer-container-modern .contact-item a,

.footer-container-modern .contact-item p {

  font-size: 0.82rem;

  line-height: 1.4;

}



.footer-bottoms {

  padding: 10px 20px;

}



.footer-bottoms p {

  margin: 0;

}



.social-icons a {

  width: 28px;

  height: 28px;

}



@media (max-width: 1100px) {

  .footer-container-modern .connect-col {

    grid-template-columns: 1fr;

  }



  .footer-container-modern .contact-item {

    margin-bottom: 10px;

  }

}

/* Footer: three main link columns plus compact connect */

.footer-container-modern {

  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(420px, 1.35fr);

  gap: clamp(28px, 5vw, 72px);

  padding-top: 22px;

  padding-bottom: 14px;

}



.footer-container-modern .footer-column ul li {

  margin-bottom: 7px;

}



.footer-container-modern .connect-col {

  grid-template-columns: repeat(3, minmax(0, 1fr));

  column-gap: 22px;

  border-left: 1px solid var(--border-color);

}



.footer-container-modern .contact-item {

  align-items: flex-start;

}



@media (max-width: 1100px) {

  .footer-container-modern {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .footer-container-modern .connect-col {

    grid-column: 1 / -1;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-left: 0;

    padding-left: 0;

  }

}



@media (max-width: 700px) {

  .footer-container-modern,

  .footer-container-modern .connect-col {

    grid-template-columns: 1fr;

  }

}

/* Footer total three columns */

.footer-container-modern {

  grid-template-columns: minmax(180px, 0.8fr) minmax(300px, 1.05fr) minmax(420px, 1.45fr);

  gap: clamp(42px, 7vw, 96px);

}



.footer-combined-links {

  display: grid;

  grid-template-columns: repeat(2, minmax(130px, 1fr));

  column-gap: 34px;

}



.footer-combined-links h3,

.footer-combined-links ul {

  margin: 0;

}



.footer-combined-links h3:nth-of-type(1) {

  grid-column: 1;

  grid-row: 1;

}



.footer-combined-links ul:nth-of-type(1) {

  grid-column: 1;

  grid-row: 2;

  margin-top: 10px;

}



.footer-combined-links h3:nth-of-type(2) {

  grid-column: 2;

  grid-row: 1;

}



.footer-combined-links ul:nth-of-type(2) {

  grid-column: 2;

  grid-row: 2;

  margin-top: 10px;

}



@media (max-width: 1100px) {

  .footer-container-modern {

    grid-template-columns: 1fr 1.4fr;

  }



  .footer-container-modern .connect-col {

    grid-column: 1 / -1;

  }

}



@media (max-width: 700px) {

  .footer-container-modern,

  .footer-combined-links {

    grid-template-columns: 1fr;

  }



  .footer-combined-links h3,

  .footer-combined-links ul {

    grid-column: auto !important;

    grid-row: auto !important;

  }



  .footer-combined-links .footer-subtitle {

    margin-top: 16px;

  }

}

/* Footer quick links two-column layout */

.footer-container-modern {

  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1.15fr);

  gap: clamp(52px, 8vw, 120px);

}



.footer-quick-links {

  max-width: 560px;

}



.footer-quick-links .footer-quick-list {

  display: grid;

  grid-template-columns: repeat(2, minmax(120px, 1fr));

  column-gap: 64px;

  row-gap: 7px;

  margin: 0;

  padding: 0;

}



.footer-quick-links .footer-quick-list li {

  margin-bottom: 0;

}



.footer-container-modern .connect-col {

  grid-template-columns: repeat(3, minmax(0, 1fr));

  border-left: 1px solid var(--border-color);

}



@media (max-width: 1100px) {

  .footer-container-modern {

    grid-template-columns: 1fr;

  }



  .footer-container-modern .connect-col {

    border-left: 0;

    padding-left: 0;

  }

}



@media (max-width: 600px) {

  .footer-quick-links .footer-quick-list,

  .footer-container-modern .connect-col {

    grid-template-columns: 1fr;

  }

}



/* Footer copyright visibility */

.footer-bottoms .footer-copy {

  display: block;

  margin: 0;

  color: #34425a;

  font-size: 0.86rem;

  line-height: 1.4;

  opacity: 1;

  visibility: visible;

}





/* Footer wider connect column */

.footer-container-modern {

  grid-template-columns: minmax(360px, 0.75fr) minmax(560px, 1.45fr);

  gap: clamp(36px, 5vw, 76px);

}



.footer-container-modern .connect-col {

  column-gap: 34px;

  padding-left: clamp(28px, 3vw, 48px);

}



/* Bootstrap footer container and columns */

.footer-container-modern.container {

  display: block;

  max-width: 1320px;

  padding-top: 22px;

  padding-bottom: 14px;

}



.footer-row-modern {

  width: 100%;

}



.footer-container-modern .footer-quick-links {

  max-width: none;

}



.footer-container-modern .footer-quick-list {

  display: grid;

  grid-template-columns: repeat(2, minmax(120px, 1fr));

  column-gap: clamp(42px, 8vw, 120px);

  row-gap: 7px;

  margin: 0;

  padding: 0;

}



.footer-container-modern .connect-col {

  display: block;

  padding-left: clamp(28px, 4vw, 54px);

  border-left: 1px solid var(--border-color);

}



.footer-connect-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  column-gap: 28px;

}



.footer-connect-grid .contact-item {

  margin-bottom: 0;

}



@media (max-width: 991px) {

  .footer-container-modern .connect-col {

    padding-left: 0;

    border-left: 0;

  }

}



@media (max-width: 600px) {

  .footer-container-modern .footer-quick-list,

  .footer-connect-grid {

    grid-template-columns: 1fr;

  }



  .footer-connect-grid .contact-item {

    margin-bottom: 10px;

  }

}



/* Bootstrap footer bottom bar */

.footer-bottoms {

  display: block;

  padding: 10px 0;

}



.footer-bottoms .social-icons {

  display: flex;

}



.footer-bottoms .social-icons a {

  margin-right: 0;

}



@media (max-width: 767px) {

  .footer-bottoms,

  .footer-bottoms .social-icons {

    text-align: center;

    justify-content: center;

  }

}





/* Align footer content and copyright containers */

.footer-container-modern.container,

.footer-bottoms .container {

  max-width: 1320px;

  padding-left: var(--bs-gutter-x, 0.75rem);

  padding-right: var(--bs-gutter-x, 0.75rem);

}



.footer-container-modern.container {

  margin-left: auto;

  margin-right: auto;

}



.footer-bottoms .container {

  margin-left: auto;

  margin-right: auto;

}





/* Footer font size increase */

.footer-container-modern .footer-column h3 {

  font-size: 0.88rem;

}



.footer-container-modern .footer-column ul li a {

  font-size: 0.92rem;

}



.footer-container-modern .contact-item .label {

  font-size: 0.88rem;

}



.footer-container-modern .contact-item a,

.footer-container-modern .contact-item p {

  font-size: 0.9rem;

}



.footer-bottoms .footer-copy {

  font-size: 0.92rem;

}





/* Slightly larger client logos */

.client-logo {

  height: 112px;

}



.client-logo img {

  max-height: 100px;

  max-width: 280px;

}



@media (max-width: 768px) {

  .client-logo {

    height: 98px;

  }



  .client-logo img {

    max-height: 72px;

    max-width: 180px;

  }

}



/* Certification page gallery grid correction */

.cert-page-gallery {

  margin: 0;

  padding: 62px 0 70px;

  background: #ffffff;

  text-align: center;

}



.cert-page-gallery .cert-section-head {

  margin-bottom: 42px;

  text-align: center;

}



.cert-page-gallery .section-title {

  margin: 0;

  color: #07152d;

  font-size: clamp(2rem, 3vw, 2.55rem);

  font-weight: 400;

  line-height: 1.15;

}



.cert-page-gallery .cert-gallery-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 274px));

  justify-content: center;

  gap: 54px 40px;

  width: 100%;

  margin: 0 auto;

}



.cert-page-gallery .cert-cards {

  min-height: 326px;

  aspect-ratio: auto;

  padding: 8px;

  margin-bottom: 0;

  border: 1px solid #dfe6ef;

  background: #ffffff;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

}



.cert-page-gallery .cert-cards img {

  width: 100%;

  height: 100%;

  max-height: none;

  object-fit: contain;

}




.cert-page-gallery .cert-cards {
  position: relative;
  overflow: hidden;
}

.cert-page-gallery .cert-cards img {
  transition: transform 0.35s ease, filter 0.35s ease;
}

.cert-page-gallery .cert-hover-desc {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(7, 21, 45, 0.84);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  opacity: 1;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.cert-page-gallery .cert-cards:hover img {
  transform: scale(1.03);
  filter: brightness(0.82);
}

.cert-page-gallery .cert-cards:hover .cert-hover-desc {
  opacity: 1;
  transform: translateY(0);
}

.cert-page-gallery .action-container {

  justify-content: center;

  margin-top: 46px;

}



@media (max-width: 900px) {

  .cert-page-gallery .cert-gallery-grid {

    grid-template-columns: repeat(2, minmax(0, 274px));

    gap: 32px 24px;

  }

}



@media (max-width: 640px) {

  .cert-page-gallery {

    padding: 42px 0 52px;

  }



  .cert-page-gallery .cert-gallery-grid {

    grid-template-columns: 1fr;

    max-width: 274px;

  }

}



/* 2027 certificate scans in hero carousel */
.hero-card-slide.certificate-slide .hero-card-image {
  background: #ffffff;
}

.hero-card-slide.certificate-slide .hero-card-image img {
  object-fit: contain;
  object-position: center;
}

/* Capability card readable text bump */
.discipline-section .discipline-list {
  font-size: 14px;
  line-height: 1.28;
}

@media (min-width: 1261px) and (max-width: 1400px) {
.discipline-section .discipline-list {
    font-size: 13px;
    line-height: 1.24;
  }
}

@media (max-width: 767px) {
.discipline-section .discipline-list {
    font-size: 13px;
    line-height: 1.3;
  }
}

/* Capability cards closer to orbit */
@media (min-width: 1261px) {
  .discipline-section .discipline-layout {
    grid-template-columns: minmax(300px, 340px) minmax(390px, 430px) minmax(300px, 340px);
    column-gap: clamp(10px, 1.4vw, 22px);
    width: min(100%, 1070px);
  }

  .discipline-section .discipline-orbit {
    width: min(100%, 420px);
  }
}

@media (min-width: 1261px) and (max-width: 1480px) {
  .discipline-section .discipline-layout {
    grid-template-columns: minmax(280px, 318px) minmax(360px, 398px) minmax(280px, 318px);
    column-gap: 10px;
    width: min(100%, 1040px);
  }
}

/* Capability icon-paired layout on medium screens */
@media (min-width: 1024px) and (max-width: 1260px) {
  .discipline-section .discipline-layout {
    display: grid;
    grid-template-columns: minmax(280px, 318px) minmax(360px, 398px) minmax(280px, 318px);
    grid-template-rows: repeat(3, auto);
    column-gap: 10px;
    row-gap: 30px;
    width: min(100%, 1040px);
    margin: 34px auto 0;
    align-items: center;
  }

  .discipline-section .discipline-orbit {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-self: center;
    align-self: center;
    width: min(100%, 398px);
    margin: 0;
    transform: none;
  }

  .discipline-section .point-mech,
  .discipline-section .point-electric,
  .discipline-section .point-transport,
  .discipline-section .point-oil,
  .discipline-section .point-civil,
  .discipline-section .point-renew {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: none;
    transform: none !important;
  }

  .discipline-section .point-mech { grid-column: 1; grid-row: 1; }
  .discipline-section .point-electric { grid-column: 1; grid-row: 2; }
  .discipline-section .point-transport { grid-column: 1; grid-row: 3; }
  .discipline-section .point-oil { grid-column: 3; grid-row: 1; }
  .discipline-section .point-civil { grid-column: 3; grid-row: 2; }
  .discipline-section .point-renew { grid-column: 3; grid-row: 3; }
}

/* Capability card width increase */
@media (min-width: 1261px) {
  .discipline-section .discipline-layout {
    grid-template-columns: minmax(340px, 390px) minmax(390px, 430px) minmax(340px, 390px);
    column-gap: clamp(8px, 1vw, 16px);
    width: min(100%, 1220px);
  }
}

@media (min-width: 1024px) and (max-width: 1260px) {
  .discipline-section .discipline-layout {
    grid-template-columns: minmax(330px, 370px) minmax(340px, 380px) minmax(330px, 370px);
    column-gap: 8px;
    width: min(100%, 1120px);
  }
}

/* Capability balanced icon alignment */
@media (min-width: 1261px) {
  .discipline-section .discipline-layout {
    grid-template-columns: minmax(340px, 390px) minmax(390px, 430px) minmax(340px, 390px);
    column-gap: 18px;
    width: min(100%, 1180px);
  }
}

@media (min-width: 1024px) and (max-width: 1260px) {
  .discipline-section .discipline-layout {
    grid-template-columns: minmax(330px, 370px) minmax(340px, 380px) minmax(330px, 370px);
    column-gap: 14px;
    width: min(100%, 1104px);
  }
}

/* Capability section responsive fix */
.discipline-section {
  overflow: hidden;
}

.discipline-section .container-xxl {
  max-width: 1320px;
}

.discipline-section .discipline-layout {
  overflow: visible;
}

.discipline-section .discipline-card-copy,
.discipline-section .discipline-list,
.discipline-section .discipline-list li {
  min-width: 0;
}

@media (min-width: 1261px) {
  .discipline-section .discipline-layout {
    grid-template-columns: minmax(345px, 390px) minmax(360px, 420px) minmax(345px, 390px);
    column-gap: clamp(12px, 1.6vw, 24px);
    row-gap: 32px;
    width: min(100%, 1220px);
    min-height: 0;
    margin-top: clamp(28px, 3vw, 42px);
  }

  .discipline-section .discipline-orbit {
    width: min(100%, 420px);
  }

  .discipline-section .discipline-point {
    grid-template-columns: minmax(116px, 142px) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
  }

  .discipline-section .discipline-card-image {
    width: 100%;
    height: 100%;
    min-height: 132px;
  }
}

@media (min-width: 1024px) and (max-width: 1260px) {
  .discipline-section .discipline-layout {
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 380px) minmax(300px, 1fr);
    column-gap: 14px;
    row-gap: 22px;
    width: min(100%, 1120px);
    margin-top: 30px;
  }

  .discipline-section .discipline-orbit {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: min(100%, 360px);
  }

  .discipline-section .discipline-point {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .discipline-section .discipline-card-image {
    width: 108px;
    height: 124px;
  }

  .discipline-section .discipline-point h3 {
    font-size: 11px;
  }

  .discipline-section .discipline-list {
    font-size: 12px;
    line-height: 1.22;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .discipline-section {
    padding-bottom: 78px;
  }

  .discipline-section .discipline-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: min(100%, 900px);
    margin: 28px auto 0;
  }

  .discipline-section .discipline-orbit {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    grid-row: auto;
    order: 1;
    justify-self: center;
    width: min(100%, 360px);
    margin-bottom: 4px;
    transform: none;
  }

  .discipline-section .point-mech,
  .discipline-section .point-electric,
  .discipline-section .point-transport,
  .discipline-section .point-oil,
  .discipline-section .point-civil,
  .discipline-section .point-renew {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: none;
    transform: none !important;
  }

  .discipline-section .point-mech { order: 2; }
  .discipline-section .point-oil { order: 3; }
  .discipline-section .point-electric { order: 4; }
  .discipline-section .point-civil { order: 5; }
  .discipline-section .point-transport { order: 6; }
  .discipline-section .point-renew { order: 7; }

  .discipline-section .discipline-point {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  .discipline-section .discipline-card-image {
    width: 118px;
    height: 132px;
  }

  .discipline-section .discipline-point h3 {
    font-size: 12px;
  }

  .discipline-section .discipline-list {
    font-size: 13px;
    line-height: 1.28;
  }
}

@media (max-width: 767px) {
  .discipline-section {
    padding-bottom: 64px;
  }

  .discipline-section .discipline-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: min(100%, 540px);
    margin: 24px auto 0;
  }

  .discipline-section .discipline-orbit {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1;
    grid-row: auto;
    order: 1;
    width: min(100%, 320px);
    margin: 0 auto 8px;
    transform: none;
  }

  .discipline-section .point-mech,
  .discipline-section .point-electric,
  .discipline-section .point-transport,
  .discipline-section .point-oil,
  .discipline-section .point-civil,
  .discipline-section .point-renew {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: none;
    transform: none !important;
  }

  .discipline-section .point-mech { order: 2; }
  .discipline-section .point-oil { order: 3; }
  .discipline-section .point-electric { order: 4; }
  .discipline-section .point-civil { order: 5; }
  .discipline-section .point-transport { order: 6; }
  .discipline-section .point-renew { order: 7; }

  .discipline-section .discipline-point {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 11px;
    padding: 10px;
  }

  .discipline-section .discipline-card-image {
    width: 104px;
    height: 118px;
  }

  .discipline-section .discipline-point h3 {
    font-size: 12px;
    line-height: 1.18;
    margin-bottom: 7px;
  }

  .discipline-section .discipline-list {
    font-size: 13px;
    line-height: 1.28;
  }
}

@media (max-width: 430px) {
  .discipline-section .discipline-orbit {
    width: min(100%, 280px);
  }

  .discipline-section .discipline-point {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
  }

  .discipline-section .discipline-card-image {
    width: 96px;
    height: 110px;
  }

  .discipline-section .discipline-list {
    font-size: 12px;
    line-height: 1.24;
  }
}

/* Capability article cards in circular direction */
@media (min-width: 1024px) {
  .discipline-section .discipline-layout {
    align-items: center;
  }

  .discipline-section .point-mech,
  .discipline-section .point-oil {
    align-self: start;
    margin-top: 4px;
  }

  .discipline-section .point-electric,
  .discipline-section .point-civil {
    align-self: center;
  }

  .discipline-section .point-transport,
  .discipline-section .point-renew {
    align-self: end;
    margin-bottom: 4px;
  }

  .discipline-section .point-mech,
  .discipline-section .point-transport {
    justify-self: end;
    transform: translateX(18px) !important;
  }

  .discipline-section .point-electric {
    justify-self: end;
    transform: translateX(-12px) !important;
  }

  .discipline-section .point-oil,
  .discipline-section .point-renew {
    justify-self: start;
    transform: translateX(-18px) !important;
  }

  .discipline-section .point-civil {
    justify-self: start;
    transform: translateX(12px) !important;
  }

  .discipline-section .discipline-point:hover {
    transform: translateY(-4px) !important;
  }

  .discipline-section .point-mech:hover,
  .discipline-section .point-transport:hover {
    transform: translate(18px, -4px) !important;
  }

  .discipline-section .point-electric:hover {
    transform: translate(-12px, -4px) !important;
  }

  .discipline-section .point-oil:hover,
  .discipline-section .point-renew:hover {
    transform: translate(-18px, -4px) !important;
  }

  .discipline-section .point-civil:hover {
    transform: translate(12px, -4px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1260px) {
  .discipline-section .point-mech,
  .discipline-section .point-transport {
    transform: translateX(10px) !important;
  }

  .discipline-section .point-electric {
    transform: translateX(-8px) !important;
  }

  .discipline-section .point-oil,
  .discipline-section .point-renew {
    transform: translateX(-10px) !important;
  }

  .discipline-section .point-civil {
    transform: translateX(8px) !important;
  }

  .discipline-section .point-mech:hover,
  .discipline-section .point-transport:hover {
    transform: translate(10px, -4px) !important;
  }

  .discipline-section .point-electric:hover {
    transform: translate(-8px, -4px) !important;
  }

  .discipline-section .point-oil:hover,
  .discipline-section .point-renew:hover {
    transform: translate(-10px, -4px) !important;
  }

  .discipline-section .point-civil:hover {
    transform: translate(8px, -4px) !important;
  }
}

@media (max-width: 1023px) {
  .discipline-section .point-mech,
  .discipline-section .point-electric,
  .discipline-section .point-transport,
  .discipline-section .point-oil,
  .discipline-section .point-civil,
  .discipline-section .point-renew,
  .discipline-section .discipline-point:hover {
    transform: none !important;
  }
}

/* Capability paired card height alignment */
@media (min-width: 1024px) {
  .discipline-section .point-mech,
  .discipline-section .point-electric,
  .discipline-section .point-transport,
  .discipline-section .point-oil,
  .discipline-section .point-civil,
  .discipline-section .point-renew {
    align-self: stretch;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .discipline-section .discipline-point {
    min-height: 164px;
  }

  .discipline-section .discipline-card-copy {
    align-self: stretch;
  }

  .discipline-section .discipline-card-image {
    align-self: stretch;
  }
}

@media (min-width: 1024px) and (max-width: 1260px) {
  .discipline-section .discipline-point {
    min-height: 154px;
  }
}

@media (max-width: 1023px) {
  .discipline-section .point-mech,
  .discipline-section .point-electric,
  .discipline-section .point-transport,
  .discipline-section .point-oil,
  .discipline-section .point-civil,
  .discipline-section .point-renew {
    height: auto;
  }
}

/* Capability bottom cards closer to lower orbit nodes */
@media (min-width: 1261px) {
  .discipline-section .point-transport {
    transform: translateX(62px) !important;
  }

  .discipline-section .point-renew {
    transform: translateX(-62px) !important;
  }

  .discipline-section .point-transport:hover {
    transform: translate(62px, -4px) !important;
  }

  .discipline-section .point-renew:hover {
    transform: translate(-62px, -4px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1260px) {
  .discipline-section .point-transport {
    transform: translateX(34px) !important;
  }

  .discipline-section .point-renew {
    transform: translateX(-34px) !important;
  }

  .discipline-section .point-transport:hover {
    transform: translate(34px, -4px) !important;
  }

  .discipline-section .point-renew:hover {
    transform: translate(-34px, -4px) !important;
  }
}

/* Hero portfolio card compact height */
.hero-card-slider {
  width: min(264px, 26vw);
  padding: 12px 14px;
  border-radius: 18px;
}

.hero-card-slider::before {
  top: 9px;
  left: 7px;
  right: -7px;
  bottom: -9px;
  border-radius: 18px;
}

.hero-card-slider::after {
  top: 18px;
  left: 13px;
  right: -13px;
  bottom: -18px;
  border-radius: 18px;
}

.hero-card-header {
  margin-bottom: 8px;
}

.hero-card-btn {
  width: 24px;
  height: 24px;
}

.hero-card-slide {
  gap: 5px;
}

.hero-card-image {
  margin-bottom: 3px;
  border-radius: 12px;
}

.hero-card-image img {
  height: 76px;
}

.hero-card-slide.certificate-slide .hero-card-image img {
  height: 72px;
}

.hero-card-tag {
  margin-bottom: 2px;
  font-size: 0.58rem;
}

.hero-card-slide h4 {
  font-size: 0.8rem;
  line-height: 1.12;
}

.hero-card-slide p {
  font-size: 0.7rem;
  line-height: 1.3;
}

.hero-card-link {
  margin-top: 3px;
  font-size: 0.74rem;
}

.hero-card-dots {
  margin-top: 9px;
}

@media (max-width: 1199px) {
  .hero-card-slider {
    width: min(244px, 28vw);
    padding: 10px 12px;
  }

  .hero-card-image img,
  .hero-card-slide.certificate-slide .hero-card-image img {
    height: 66px;
  }
}