:root {
       --text: #1d1d1f;
       --muted: #6f6f6f;
       --border: #d1d1d1;
       --gray-bg: #e2e2e2;
       --white: #ffffff;
       --blue: #253b73;
       /* HGE Blue */
       --green: #148040;
       /* --muted: #5d6a8f; */
       --overlay-bg: #f4f6fb;
       /* --muted: #424446; */
       --white: #fff;
       --cardBG: #ffffff;
       --radius: 20px;
       --transition: cubic-bezier(0.4, 0, 0.2, 1);
       --fs-large: clamp(40px, 6vw, 86px);
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: "Montserrat", sans-serif;
   }
   
   body {
       background: #fff;
       /* color: #000; */
       scroll-behavior: smooth;
   }
   /* HERO */
   
   a {
       text-decoration: none !important;
   }
   
   .topbar {
       background: var(--green);
       color: var(--white);
       font-size: 14px;
       padding: 8px 0;
       border-bottom-right-radius: 20px;
       border-bottom-left-radius: 20px;
   }
   
   .topbar .container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       width: 90%;
       margin: 0 auto;
   }
   
   .top-left,
   .top-right {
       display: flex;
       gap: 18px;
       align-items: center
   }
   
   .top-left a,
   .top-right a {
       color: var(--white);
       opacity: 0.95;
       font-weight: 500
   }
   
   .top-left .phone {
       font-weight: 700
   }
   
   .top-right .lang {
       border: 1px solid rgba(255, 255, 255, 0.12);
       padding: 6px 10px;
       border-radius: 999px;
       font-weight: 600
   }
   /* HEADER / NAVBAR */
   
   .header {
       position: sticky;
       top: 0;
       z-index: 1000;
       background: transparent;
       backdrop-filter: blur(6px);
       -webkit-backdrop-filter: blur(6px);
       border-bottom: 1px solid rgba(37, 59, 115, 0.04);
   }
   
   .nav {
       width: 90%;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 18px 0;
       gap: 12px;
   }
   
   .brand {
       display: flex;
       gap: 12px;
       align-items: center;
   }
   
   .logo {
       width: 80px;
       height: 80px;
       border-radius: 10px;
       /* background: linear-gradient(180deg, var(--blue), #1b2f61); */
       color: var(--white);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
       font-size: 18px;
   }
   
   .logo img {
       width: 100%;
       height: 100%;
   }
   
   .brand .title {
       font-weight: 700;
       color: var(--blue);
       font-size: 18px
   }
   
   .brand .subtitle {
       font-size: 12px;
       color: var(--muted)
   }
   /* pill menu button */
   
   .menu-btn {
       background: var(--white);
       color: var(--blue);
       padding: 10px 22px;
       border-radius: 40px;
       border: 2px solid var(--blue);
       font-weight: 700;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: all .35s var(--transition);
   }
   
   .menu-btn:hover {
       transform: translateY(-2px)
   }
   /* fullscreen overlay */
   
   .overlay {
       position: fixed;
       inset: 0;
       background: var(--overlay-bg);
       display: flex;
       justify-content: center;
       align-items: center;
       transform: translateY(-100%);
       opacity: 0;
       pointer-events: none;
       transition: opacity .55s var(--transition), transform .65s var(--transition);
       z-index: 1500;
   }
   
   .overlay.active {
       transform: translateY(0);
       opacity: 1;
       pointer-events: auto;
   }
   
   .overlay-inner {
       width: 100%;
       max-width: 1100px;
       text-align: center;
       padding: 40px 24px
   }
   
   .overlay-close {
       position: absolute;
       right: 24px;
       top: 22px;
       background: var(--white);
       border-radius: 999px;
       padding: 8px 14px;
       border: 2px solid var(--blue);
       font-weight: 700;
       cursor: pointer;
       z-index: 1600;
   }
   
   .overlay-links {
       margin-top: 48px
   }
   
   .overlay-links a {
       display: block;
       font-weight: 800;
       font-size: 35px;
       line-height: 1;
       color: var(--blue);
       margin: 18px 0;
       opacity: 0;
       transform: translateY(30px);
       transition: transform .45s var(--transition), opacity .45s var(--transition);
   }
   
   .overlay.active .overlay-links a:nth-child(1) {
       transition-delay: .10s
   }
   
   .overlay.active .overlay-links a:nth-child(2) {
       transition-delay: .17s
   }
   
   .overlay.active .overlay-links a:nth-child(3) {
       transition-delay: .24s
   }
   
   .overlay.active .overlay-links a:nth-child(4) {
       transition-delay: .31s
   }
   
   .overlay.active .overlay-links a:nth-child(5) {
       transition-delay: .38s
   }
   
   .overlay.active .overlay-links a {
       opacity: 1;
       transform: none
   }
   /* small copyright under links */
   
   .overlay .copyright {
       margin-top: 36px;
       color: var(--muted);
       font-size: 14px
   }
   /* prevent body scroll when overlay open */
   
   body.no-scroll {
       overflow: hidden;
       height: 100%
   }
   /* responsiveness */
   
   @media (max-width:980px) {
       .overlay-links a {
           font-size: clamp(28px, 7vw, 48px)
       }
       .logo {
           width: 84px;
           height: 84px
       }
       .brand .title {
           font-size: 16px
       }
   }
   
   @media (max-width:640px) {
       .topbar {
           font-size: 13px;
           padding: 3px 0;
       }
       .topbar .container {
           flex-direction: column;
           align-items: center;
           gap: 8px;
           padding: 8px 0
       }
       .top-left .address {
           display: none;
       }
       .top-right {
           /* padding: 6px; */
           display: none;
       }
       .nav {
           width: 95%
       }
       .logo {
           width: 60px;
           height: 60px;
       }
   }
   
   .about-banner {
       position: relative;
       width: 100%;
       height: 50vh;
       background: url("/Image/pexels-grunzibaer-683535.jpg") center/cover no-repeat;
       display: flex;
       justify-content: flex-end;
       align-items: flex-end;
       padding: 0 60px 60px;
       color: #fff;
   }
   /* DARK GRADIENT OVERLAY */
   
   .banner-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient( to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75));
       z-index: 1;
   }
   
   .banner-content {
       position: relative;
       z-index: 2;
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
   }
   
   .banner-title {
       font-size: 64px;
       font-weight: 400;
   }
   
   .banner-desc {
       font-size: 20px;
       font-weight: 400;
       max-width: 420px;
       line-height: 1.4;
       text-align: right;
   }
   
   @media (max-width: 900px) {
       .about-banner {
           padding: 0 25px 40px;
           height: 70vh;
       }
       .banner-content {
           flex-direction: column;
           align-items: flex-start;
           gap: 15px;
       }
       .banner-desc {
           text-align: left;
           max-width: 100%;
       }
       .banner-title {
           font-size: 48px;
       }
   }
   
   .contact-hero {
       text-align: center;
       padding: 90px 20px;
       background-color: #000;
   }
   
   h1 {
       font-size: 60px;
       font-weight: 900;
       line-height: 1.1;
       color: #fff;
   }
   
   .highlight {
       background: var(--green);
       padding: 0 6px;
       border-radius: 2px;
   }
   
   .hero-desc {
       max-width: 650px;
       margin: 16px auto 50px;
       color: #b3b3b3;
   }
   /* FORM CARD */
   
   .form-wrapper {
       background: #111;
       padding: 40px;
       border-radius: 12px;
       max-width: 900px;
       margin: 0 auto;
   }
   
   .form-title {
       text-align: left;
       margin-bottom: 25px;
       color: #e9e7e7;
   }
   
   .rfq-form {
       width: 100%;
   }
   
   .input-row {
       display: flex;
       gap: 20px;
       margin-bottom: 20px;
   }
   
   .input-field {
       width: 100%;
   }
   
   .input-field label {
       display: block;
       margin-bottom: 6px;
       font-size: 14px;
       color: #ccc;
   }
   
   .input-field input,
   .input-field textarea {
       width: 100%;
       padding: 14px;
       border-radius: 6px;
       background: #1c1c1c;
       border: 1px solid #333;
       color: #fff;
   }
   
   textarea {
       min-height: 140px;
   }
   
   .submit-btn {
       margin-top: 15px;
       background: #fff;
       color: #000;
       padding: 14px 34px;
       border-radius: 6px;
       font-weight: 600;
       border: none;
       cursor: pointer;
   }
   /* LOCATION SECTION */
   
   .location-section {
       justify-content: center;
       display: flex;
       padding: 80px 40px;
       background: #fff;
       color: #000;
       gap: 50px;
       flex-wrap: wrap;
   }
   
   .map-box iframe {
       width: 500px;
       height: 380px;
       border: none;
       border-radius: 10px;
   }
   
   .contact-box {
       max-width: 400px;
   }
   
   .contact-box h2 {
       font-size: 44px;
       font-weight: 900;
   }
   
   .highlight-light {
       background: var(--blue);
       padding: 0 6px;
       color: #fff;
   }
   
   .contact-text {
       margin: 12px 0 26px;
       color: #5a5a5a;
   }
   /* .contact-details {
            line-height: 1.3;
            gap: 30px;
        }
        
        .info-link {
            
            font-weight: 600;
            color: #000;
            margin-bottom: 30px;
        } */
   
   .contact-details {
       display: flex;
       flex-direction: column;
       /* gap: 28px; */
       /* spacing between each block */
   }
   
   .detail-block {
       display: flex;
       flex-direction: column;
       gap: 6px;
   }
   
   .label {
       font-weight: 700;
       font-size: 18px;
       color: #000;
   }
   
   .info-link {
       font-weight: 600;
       color: #000;
       text-decoration: none;
   }
   
   .info-text {
       color: #000;
       line-height: 1.5;
   }
   /* Responsive */
   
   @media(max-width:900px) {
       .input-row {
           flex-direction: column;
       }
       .location-section {
           flex-direction: column;
           text-align: center;
           width: 100%;
       }
       .contact-box {
           max-width: 100%;
       }
       .map-box iframe {
           width: 100%;
       }
       h1 {
           font-size: 50px;
           font-weight: 700;
       }
       .highlight {
           background: var(--green);
           padding: 0 6px;
           border-radius: 2px;
       }
   }
   /* FOOTER */
   
   .footer {
       background: #0b0f1a;
       padding: 80px 28px 50px;
       border-top-left-radius: 40px;
       border-top-right-radius: 40px;
       color: #fff;
       margin-top: 60px;
   }
   
   .footer-container {
       max-width: 1200px;
       margin: auto;
       display: grid;
       grid-template-columns: 1.4fr 1fr 1fr 1fr;
       gap: 40px;
   }
   /* Brand */
   
   .footer-logo img {
       width: 100px;
   }
   
   .italic-accent {
       font-family: "Montserrat", serif;
       font-style: italic;
       color: var(--green);
   }
   
   .footer-desc {
       color: #9da3b7;
       line-height: 1.6;
       margin: 14px 0 20px;
   }
   /* Social icons */
   
   .footer-socials a {
       display: inline-block;
       margin-right: 16px;
       font-size: 18px;
       color: var(--green);
       transition: 0.2s ease;
   }
   
   .footer-socials a:hover {
       transform: translateY(-4px);
   }
   /* Columns */
   
   .footer-col h3 {
       margin-bottom: 16px;
       font-size: 18px;
       font-weight: 600;
   }
   
   .footer-col ul {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   
   .footer-col ul li {
       margin-bottom: 12px;
       font-size: 15px;
       color: #c9cfdd;
       position: relative;
       padding-left: 14px;
   }
   
   .footer-col ul li a {
       color: #c9cfdd;
       text-decoration: none;
   }
   /* .footer-col ul li {
            position: relative;
            padding-left: 14px;
        }
         */
   
   .footer-col ul li::before {
       content: "•";
       position: absolute;
       left: 0;
       color: var(--green);
       font-size: 18px;
       line-height: 1;
   }
   
   .footer-contact {
       margin-bottom: 12px;
       display: flex;
       align-items: center;
       gap: 10px;
       color: #c9cfdd;
   }
   
   .footer-contact i {
       color: var(--green);
   }
   /* Line */
   
   .footer hr {
       border: none;
       border-bottom: 1px solid #2a3142;
       margin: 40px 0 24px;
   }
   /* Copyright */
   
   .footer-copy {
       text-align: center;
       font-size: 14px;
       color: #c9cfdd;
   }
   
   a {
       text-decoration: none;
       color: #c9cfdd;
   }
   /* Responsive */
   
   @media (max-width: 950px) {
       .footer-container {
           grid-template-columns: 1fr 1fr;
       }
   }
   
   @media (max-width: 600px) {
       .footer-container {
           grid-template-columns: 1fr;
       }
       .footer {
           padding: 70px 20px;
       }
   }
   
   .caps {
       font-weight: 600;
   }
   /* Popup Background */
   
   .popup {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: none;
       justify-content: center;
       align-items: center;
       background: rgba(0, 0, 0, 0.6);
       z-index: 9999;
   }
   /* Popup Box */
   
   .popup-content {
       background: #fff;
       padding: 25px 30px;
       width: 90%;
       max-width: 380px;
       text-align: center;
       border-radius: 12px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
       animation: popupIn 0.3s ease-out;
   }
   /* Close Button */
   
   .close-popup {
       float: right;
       font-size: 24px;
       cursor: pointer;
       color: #444;
   }
   /* Animation */
   
   @keyframes popupIn {
       from {
           opacity: 0;
           transform: scale(0.85);
       }
       to {
           opacity: 1;
           transform: scale(1);
       }
   }