* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body {
      font-family: "Montserrat", sans-serif;
      /* background: #fff; */
      color: #1b1b1b;
  }
  
   :root {
      --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);
  }
  /* TOP INFO BAR (A: blue with white text) */
  
  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;
      }
  }
  
  .section {
      padding: 40px 8vw;
  }
  
  .about-grid {
      display: flex;
      align-items: center;
      gap: 60px;
  }
  
  .about.reverse .about-grid {
      flex-direction: row-reverse;
  }
  /* Images */
  
  .about-images {
      display: flex;
      gap: 20px;
      flex: 1;
  }
  
  .about-images .big {
      width: 380px;
      height: 500px;
      border-radius: 12px;
      object-fit: cover;
  }
  
  .small-group {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }
  
  .small-group img {
      width: 230px;
      height: 240px;
      border-radius: 12px;
      object-fit: cover;
  }
  /* Content */
  
  .about-content {
      flex: 1;
  }
  
  .tag {
      font-size: 12px;
      padding: 4px 14px;
      border-radius: 14px;
      border: 1px solid var(--blue);
      color: var(--blue);
      width: max-content;
      margin-bottom: 20px;
  }
  
  .about-content h2 {
      font-size: 36px;
      font-weight: 600;
      line-height: 120%;
      margin-bottom: 18px;
  }
  
  .about-content span {
      color: var(--blue);
  }
  
  .about-content p {
      color: #6b6b6b;
      font-size: 16px;
      line-height: 160%;
      max-width: 520px;
      margin-bottom: 32px;
  }
  
  .about-list {
      margin-top: -20px;
      /* margin: 0 0 32px; */
      padding-left: 18px;
      color: #6b6b6b;
      font-size: 16px;
      line-height: 1.6;
  }
  
  .about-list li {
      margin-bottom: 8px;
  }
  /* Stats */
  
  .stats {
      display: flex;
      gap: 55px;
  }
  /* animation initial state */
  
  .fadeUp {
      opacity: 0;
      transform: translateY(40px);
  }
  
  .action-links {
      display: flex;
      gap: 18px;
      margin: 28px 0;
  }
  
  .action {
      padding: 14px 26px;
      border-radius: 40px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      transition: 0.3s ease;
      border: 2px solid var(--green);
  }
  /* Filled */
  
  .action.primary {
      background: var(--green);
      color: #fff;
  }
  /* Outline */
  
  .action.outline {
      background: transparent;
      color: var(--green);
  }
  
  .action:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 18px rgba(255, 122, 0, 0.22);
  }
  /* ✅ MOBILE LAYOUT FIX */
  
  @media (max-width: 900px) {
      .about-grid {
          flex-direction: column !important;
      }
      .about-content {
          order: 1;
          width: 100%;
      }
      .action-links {
          flex-direction: column;
          width: 100%;
      }
      .action {
          width: 100%;
          text-align: center;
      }
      .about-images {
          order: 2;
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 20px;
      }
      .about-images .big {
          width: 100%;
          /* height: 60%; */
          height: 600px;
          border-radius: 14px;
      }
      .small-group {
          display: flex;
          flex-direction: row;
          gap: 12px;
      }
      .small-group img {
          width: 50%;
          height: auto;
          border-radius: 14px;
      }
      /* ✅ Button */
      .template-btn {
          width: fit-content;
          margin: 24px auto 0;
          display: block;
      }
      h2 {
          font-size: 30px;
          line-height: 1.25em;
      }
      p {
          font-size: 16px;
          line-height: 1.45em;
      }
      .stat-box h3 {
          font-size: 26px;
      }
  }
  
  @media (max-width: 786px) {
      .about-images .big {
          width: 100%;
          /* height: 60%; */
          height: 500px;
          border-radius: 14px;
      }
  }
  /* @media (max-width: 900px) {
            .about-grid {
                flex-direction: column !important;
            }
        } */
  /* 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;
  }