@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&family=Nunito:wght@300;400;500;600;700&display=swap');


        /* ============================================================
           PAGE LOADER
        ============================================================ */
        #page-loader {
          position: fixed;
          inset: 0;
          z-index: 99999;
          background: #ffffff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1.5rem;
          transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        #page-loader.hidden {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }

        .loader-logo {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.75rem;
          animation: loaderLogoIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        .loader-icon {
          position: relative;
          width: 72px;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .loader-spinner {
          position: absolute;
          inset: 0;
          border-radius: 50%;
          border: 3px solid rgba(0, 82, 204, 0.12);
          border-top-color: #0052cc;
          animation: loaderSpin 0.9s linear infinite;
        }

        .loader-spinner-2 {
          position: absolute;
          inset: 8px;
          border-radius: 50%;
          border: 2px solid rgba(0, 82, 204, 0.08);
          border-bottom-color: rgba(0, 82, 204, 0.4);
          animation: loaderSpin 1.4s linear infinite reverse;
        }

        .loader-brand-icon {
          width: 34px;
          height: 34px;
          animation: loaderPulse 1.5s ease-in-out infinite;
        }

        .loader-wordmark {
          font-family: 'Raleway', sans-serif;
          font-size: 1.25rem;
          font-weight: 800;
          letter-spacing: 2px;
          color: #0052cc;
          text-transform: uppercase;
        }

        .loader-sub {
          font-family: 'Nunito', sans-serif;
          font-size: 0.6rem;
          font-weight: 700;
          letter-spacing: 3px;
          color: #64748b;
          text-transform: uppercase;
        }

        .loader-bar-wrap {
          width: 160px;
          height: 3px;
          background: rgba(0, 82, 204, 0.1);
          border-radius: 99px;
          overflow: hidden;
          animation: loaderLogoIn 0.6s 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        .loader-bar {
          height: 100%;
          width: 0%;
          background: linear-gradient(90deg, #0052cc, #4d94ff);
          border-radius: 99px;
          animation: loaderBarFill 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes loaderSpin {
          to {
            transform: rotate(360deg);
          }
        }

        @keyframes loaderPulse {

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

          50% {
            transform: scale(0.88);
            opacity: 0.7;
          }
        }

        @keyframes loaderBarFill {
          0% {
            width: 0%;
          }

          60% {
            width: 75%;
          }

          100% {
            width: 100%;
          }
        }

        @keyframes loaderLogoIn {
          from {
            opacity: 0;
            transform: translateY(16px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }


        :root {
          --header-height: 68px;
          --navy: #ffffff;
          --navy-2: #f8faff;
          --navy-3: #f0f6ff;
          --blue: #0052cc;
          --blue-light: #0052cc;
          --accent: #0052cc;
          --gold: #f0a500;
          --white: #ffffff;
          --black: #000000;
          --off-white: #f0f4f8;
          --muted: #64748b;
          --border: rgba(0, 0, 0, 0.08);
          --border-hover: rgba(0, 82, 204, 0.2);
          --card-bg: #ffffff;

          /* ── LIGHT SECTION THEME ── */
          --sec-bg: #ffffff;
          --sec-bg-2: #f8faff;
          --sec-bg-3: #f0f6ff;
          --sec-text: #1a1a1a;
          --sec-muted: #27272a;
          --sec-border: rgba(0, 82, 204, 0.08);
          --sec-border-hover: rgba(0, 82, 204, 0.15);
          --sec-card: #ffffff;
          --sec-card-2: #f8faff;
        }

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        /* --- PAGE HERO STYLES --- */
        .page-hero {
          position: relative;
          background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
          padding: calc(var(--header-height) + 2rem) 0 3rem;
          overflow: hidden;
          color: #111111;
          border-bottom: 1px solid #e8edf4;
        }

        .page-hero-grid {
          position: absolute;
          inset: 0;
          background-image: linear-gradient(#e8edf4 1px, transparent 1px),
            linear-gradient(90deg, #e8edf4 1px, transparent 1px);
          background-size: 50px 50px;
          z-index: 1;
          opacity: 0.4;
        }

        .page-hero-glow {
          position: absolute;
          top: -20%;
          right: -10%;
          width: 50%;
          height: 100%;
          background: radial-gradient(circle, rgba(0, 82, 204, 0.05) 0%, transparent 70%);
          filter: blur(100px);
          z-index: 2;
        }

        .page-hero-inner {
          position: relative;
          z-index: 3;
          max-width: 1280px;
          margin: 0 auto;
          padding: 0 1.5rem;
        }

        .breadcrumb {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: .4rem;
          font-family: 'Raleway', sans-serif;
          font-size: .75rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: .08em;
          margin-bottom: 1.1rem;
        }

        .breadcrumb a {
          color: rgba(0, 0, 0, 0.45);
          text-decoration: none;
          transition: color .2s;
        }

        .breadcrumb a:hover {
          color: var(--blue-light);
        }

        .breadcrumb .sep {
          color: rgba(0, 0, 0, 0.25);
          font-weight: 500
        }

        .breadcrumb .current {
          color: var(--blue-light);
        }

        .tag {
          display: inline-block;
          font-size: .72rem;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: var(--blue-light);
          background: rgba(21, 101, 192, 0.08);
          border: 1px solid rgba(21, 101, 192, 0.2);
          border-radius: 40px;
          padding: 6px 16px;
          margin-bottom: 1rem;
        }

        .page-hero h1 {
          font-size: 3.2rem;
          font-weight: 800;
          margin-bottom: 1rem;
          letter-spacing: -1.5px;
          line-height: 1.1;
          color: #111111;
        }

        .page-hero p {
          font-size: 1.1rem;
          line-height: 1.6;
          color: #111111;
          max-width: 550px;
        }

        body {
          font-family: 'Nunito', sans-serif;
          color: #111111;
          line-height: 1.6;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-family: 'Raleway', sans-serif;
          font-weight: 700;
        }

        /* Animations & Reveal Utility */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .reveal-section,
        .reveal,
        .feature-card,
        .service-card,
        .project-card,
        .m-card,
        .why-card {
          opacity: 0;
          transform: translateY(30px);
          transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .reveal-section.visible,
        .reveal.visible,
        .feature-card.visible,
        .service-card.visible,
        .project-card.visible,
        .m-card.visible,
        .why-card.visible {
          opacity: 1;
          transform: translateY(0);
        }

        #scroll-progress-bar {
          position: fixed;
          top: 0;
          left: 0;
          width: 0%;
          height: 3px;
          background: linear-gradient(90deg, #0052cc, #00d2ff);
          z-index: 2000;
          transition: width 0.1s ease;
        }

        h1,
        h2 {
          background: linear-gradient(135deg, #1a1a1a 0%, #0052cc 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          display: inline-block;
        }

        /* Hero Section */
        .hero {
          position: relative;
          min-height: 100vh;
          display: flex;
          align-items: center;
          padding-top: var(--header-height);
          overflow: hidden;
          background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }

        .hero::before {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 50%;
          height: 100%;
          background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)),
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1080"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><rect width="60" height="60" fill="none" stroke="%23e0e0e0" stroke-width="0.5"/></pattern></defs><rect width="1200" height="1080" fill="white"/><rect width="1200" height="1080" fill="url(%23grid)"/></svg>');
          background-size: cover;
          background-position: center;
          z-index: 0;
        }

        .hero-content {
          position: relative;
          z-index: 1;
          max-width: 600px;
          animation: fadeInUp 1s ease-out;
        }

        .hero-content h1 {
          font-size: 3.5rem;
          font-weight: 800;
          line-height: 1.1;
          margin-bottom: 0.5rem;
          color: #111111;
          letter-spacing: -1px;
        }

        .hero-content h1 .blue-text {
          color: #0052cc;
          display: block;
        }

        .hero-content p {
          font-size: 1.1rem;
          color: #111111;
          margin-bottom: 2rem;
          line-height: 1.6;
          font-weight: 500;
        }

        .cta-buttons {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
          margin-bottom: 3rem;
          animation: fadeIn 1.2s ease-out;
        }

        .btn-primary-custom {
          background: #0052cc;
          border: 2px solid #0052cc;
          padding: 0.8rem 2rem;
          font-size: 0.95rem;
          font-weight: 700;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.25s ease;
          color: white;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          letter-spacing: 0.2px;
        }

        .btn-primary-custom:hover {
          background: #003d99;
          border-color: #003d99;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 82, 204, 0.3);
          color: white;
          text-decoration: none;
        }

        .btn-primary-custom:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        .btn-secondary-custom {
          background: transparent;
          border: 2px solid #0052cc;
          padding: 0.8rem 2rem;
          font-size: 0.95rem;
          font-weight: 700;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.25s ease;
          color: #0052cc;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          letter-spacing: 0.2px;
        }

        .btn-secondary-custom:hover {
          background: #0052cc;
          border-color: #0052cc;
          transform: translateY(-2px);
          color: white;
          text-decoration: none;
          box-shadow: 0 8px 24px rgba(0, 82, 204, 0.2);
        }

        .btn-secondary-custom:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        /* Hero Image Styles */
        .hero-image-wrap {
          position: relative;
          width: 100%;
          border-radius: 24px;
          overflow: hidden;
          box-shadow: 0 30px 60px -12px rgba(0, 82, 204, 0.3);
          animation: fadeInUp 1.2s ease-out;
          border: 1px solid rgba(0, 82, 204, 0.1);
        }

        .hero-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hero-image-wrap:hover .hero-img {
          transform: scale(1.05);
        }

        .hero-img-fallback {
          display: none;
          width: 100%;
          height: 100%;
          background: #f0f6ff;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 1rem;
        }

        .hero-img-badge {
          position: absolute;
          bottom: 30px;
          right: 30px;
          background: rgba(0, 82, 204, 0.85);
          backdrop-filter: blur(12px);
          padding: 16px 24px;
          border-radius: 16px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: white;
          z-index: 2;
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
          animation: fadeInUp 1.5s ease-out;
        }

        .hero-logo-badge {
          display: flex;
          align-items: center;
          gap: 14px;
        }


        /* Features Section */
        .features {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 2rem;
          margin-top: 1rem;
        }

        .feature-card {
          display: flex;
          gap: 1rem;
          animation: fadeInUp 1.4s ease-out;
        }

        .feature-icon {
          width: 60px;
          height: 60px;
          min-width: 60px;
          background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 1.5rem;
        }

        .feature-content h3 {
          font-size: 1.1rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
          color: #111111;
        }

        .feature-content p {
          font-size: 0.95rem;
          color: #111111;
          line-height: 1.5;
        }

        /* Animations */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
          }

          to {
            opacity: 1;
          }
        }

        /* Logo Section */
        .logo {
          font-size: 1.5rem;
          font-weight: 700;
          color: #0052cc;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-bottom: 2rem;
        }

        .logo i {
          font-size: 2rem;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
          .hero::before {
            width: 100%;
            opacity: 0.3;
          }

          .hero-content h1 {
            font-size: 2.5rem;
          }

          .cta-buttons {
            flex-direction: column;
            align-items: flex-start;
          }

          .btn-primary-custom,
          .btn-secondary-custom {
            width: 100%;
            justify-content: center;
          }
        }

        @media (max-width: 768px) {
          .hero {
            min-height: 80vh;
            padding: calc(var(--header-height) + 1rem) 0 2rem;
          }

          .hero-content h1 {
            font-size: 2rem;
          }

          .hero-content p {
            font-size: 1rem;
          }

          .features {
            gap: 1.5rem;
          }

          .logo {
            margin-bottom: 1.5rem;
          }
        }

        @media (max-width: 576px) {
          .hero {
            padding-top: calc(var(--header-height) + 1.5rem);
          }

          .hero-content h1 {
            font-size: 1.75rem;
          }

          .hero-content p {
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
          }

          .btn-primary-custom,
          .btn-secondary-custom {
            padding: 0.75rem 1.5rem;
            font-size: 0.92rem;
          }

          .feature-card {
            gap: 0.75rem;
          }

          .feature-icon {
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
          }

          .feature-content h3 {
            font-size: 1rem;
          }

          .feature-content p {
            font-size: 0.9rem;
          }
        }

        /* Container Padding */
        .hero-container {
          padding: 2rem 1rem;
        }

        /* Partners Section */
        .partners-section {
          padding: 0rem 0rem;
          background: #f8f9fa;
          border-bottom: 1px solid #e0e0e0;
        }

        .partners-slider-container {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 2rem;
        }

        .partners-slider-button {
          background: white;
          border: 2px solid #e0e0e0;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s ease;
          color: #0052cc;
          font-size: 1.2rem;
          flex-shrink: 0;
        }

        .partners-slider-button:hover {
          border-color: #0052cc;
          background: #f0f6ff;
          transform: scale(1.1);
        }

        .partners-slider-button.disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .partners-slider-button.disabled:hover {
          transform: none;
        }

        .partners-wrapper {
          flex: 1;
          overflow: hidden;
          border-radius: 8px;
        }

        .partners-grid {
          display: flex;
          gap: 3rem;
          padding: 0 1rem;
          transition: transform 0.4s ease;
          width: 100%;
        }

        .partner-logo {
          display: flex;
          align-items: center;
          justify-content: center;

          min-width: 200px;
          transition: transform 0.3s ease;
          flex-shrink: 0;
        }

        .partner-logo:hover {
          transform: scale(1.05);
        }

        .partner-logo svg,
        .partner-logo img {
          max-width: 140px;
          height: auto;
          filter: grayscale(100%);
          transition: filter 0.3s ease;
        }

        .partner-logo:hover svg,
        .partner-logo:hover img {
          filter: grayscale(0%);
        }

        @media (max-width: 1024px) {
          .partners-slider-container {
            gap: 1rem;
          }

          .partners-slider-button {
            width: 40px;
            height: 40px;
            font-size: 1rem;
          }

          .partner-logo {
            min-width: 140px;
            padding: 1rem;
          }

          .partner-logo svg,
          .partner-logo img {
            max-width: 120px;
          }

          .partners-grid {
            gap: 2rem;
          }
        }

        @media (max-width: 768px) {
          .partners-section {
            padding: 2rem 1rem;
          }

          .partners-slider-container {
            gap: 0.8rem;
          }

          .partners-slider-button {
            width: 35px;
            height: 35px;
            font-size: 0.9rem;
          }

          .partner-logo {
            min-width: 120px;
            padding: 0.8rem;
          }

          .partner-logo svg,
          .partner-logo img {
            max-width: 100px;
          }

          .partners-grid {
            gap: 1.5rem;
          }
        }

        @media (max-width: 576px) {
          .partners-slider-container {
            gap: 0.5rem;
          }

          .partners-slider-button {
            width: 30px;
            height: 30px;
            font-size: 0.8rem;
          }

          .partner-logo {
            min-width: 100px;
            padding: 0.5rem;
          }

          .partner-logo svg,
          .partner-logo img {
            max-width: 80px;
          }

          .partners-grid {
            gap: 1rem;
          }
        }

        /* Services Section */
        .services-section {
          padding: 3rem 2rem;
          background: white;
        }

        .section-header {
          text-align: center;
          margin-bottom: 3rem;
          animation: fadeInUp 1s ease-out;
        }

        .section-label {
          color: #0052cc;
          font-size: 0.95rem;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          margin-bottom: 0.5rem;
          display: block;
        }

        .section-title {
          font-size: 2.5rem;
          font-weight: 800;
          color: #111111;
          margin-bottom: 1rem;
        }

        .services-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 2rem;
          margin-bottom: 3rem;
        }

        .service-card {
          background: white;
          border: 1px solid #e0e0e0;
          border-radius: 12px;
          padding: 2rem;
          text-align: center;
          transition: all 0.3s ease;
          animation: fadeInUp 1.2s ease-out;
        }

        .service-card:hover {
          border-color: #0052cc;
          box-shadow: 0 12px 36px rgba(0, 82, 204, 0.15);
          transform: translateY(-8px);
        }

        .service-icon {
          width: 70px;
          height: 70px;
          margin: 0 auto 1.5rem;
          background: linear-gradient(135deg, #e8f0ff 0%, #f0f6ff 100%);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2rem;
          color: #0052cc;
          transition: all 0.3s ease;
        }

        .service-card:hover .service-icon {
          background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
          color: white;
          transform: scale(1.1);
        }

        .service-card h3 {
          font-size: 1.25rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
          color: #111111;
        }

        .service-card p {
          font-size: 0.95rem;
          color: #111111;
          line-height: 1.5;
          margin: 0;
        }

        .view-all-btn {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: #0052cc;
          color: white;
          padding: 0.8rem 2rem;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 700;
          transition: all 0.25s ease;
          border: 2px solid #0052cc;
          cursor: pointer;
          font-size: 0.95rem;
          letter-spacing: 0.2px;
        }

        .view-all-btn:hover {
          background: #003d99;
          border-color: #003d99;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 82, 204, 0.3);
          color: white;
          text-decoration: none;
        }

        .view-all-btn:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        .view-all-container {
          display: flex;
          justify-content: center;
          animation: fadeIn 1.4s ease-out;
        }

        /* About Section */
        .about-section {
          padding: 3rem 2rem;
          background: white;
        }

        .about-container {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 3rem;
          align-items: center;
        }

        .about-image {
          position: relative;
          height: 500px;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
          animation: fadeInUp 1s ease-out;
        }

        .about-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .about-content {
          animation: fadeInUp 1.1s ease-out;
          padding: 15px;
        }

        .about-label {
          color: #0052cc;
          font-size: 0.9rem;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          margin-bottom: 0.8rem;
          display: block;
        }

        .about-title {
          font-size: 2.2rem;
          font-weight: 800;
          color: #111111;
          margin-bottom: 1.5rem;
          line-height: 1.2;
        }

        .about-description {
          font-size: 1rem;
          color: #111111;
          line-height: 1.8;
          margin-bottom: 2rem;
        }

        .about-stats {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1.5rem;
          margin-bottom: 2rem;
        }

        .stat-item {
          text-align: center;
          padding: 1.5rem;
          background: #f8f9fa;
          border-radius: 8px;
          transition: all 0.3s ease;
        }

        .stat-item:hover {
          background: linear-gradient(135deg, #e8f0ff 0%, #f0f6ff 100%);
          transform: translateY(-4px);
        }

        .stat-icon {
          font-size: 2rem;
          color: #0052cc;
          margin-bottom: 0.5rem;
          display: block;
        }

        .stat-number {
          font-size: 1.8rem;
          font-weight: 800;
          color: #111111;
          display: block;
          line-height: 1;
        }

        .stat-label {
          font-size: 0.85rem;
          color: #111111;
          margin-top: 0.5rem;
          line-height: 1.4;
        }

        .about-btn {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: transparent;
          border: 2px solid #0052cc;
          color: #0052cc;
          padding: 0.8rem 2rem;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 700;
          transition: all 0.25s ease;
          cursor: pointer;
          font-size: 0.95rem;
          letter-spacing: 0.2px;
        }

        .about-btn:hover {
          background: #0052cc;
          border-color: #0052cc;
          color: white;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 82, 204, 0.3);
          text-decoration: none;
        }

        .about-btn:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        .why-choose-section {
          animation: fadeInUp 1.2s ease-out;
        }

        .why-choose-title {
          font-size: 1.4rem;
          font-weight: 800;
          color: #111111;
          margin-bottom: 1.5rem;
        }

        .why-choose-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .why-choose-item {
          display: flex;
          gap: 1rem;
          margin-bottom: 1.2rem;
          align-items: flex-start;
          animation: fadeInUp 1.3s ease-out;
        }

        .why-choose-item:nth-child(2) {
          animation-delay: 0.1s;
        }

        .why-choose-item:nth-child(3) {
          animation-delay: 0.2s;
        }

        .why-choose-item:nth-child(4) {
          animation-delay: 0.3s;
        }

        .why-choose-item:nth-child(5) {
          animation-delay: 0.4s;
        }

        .why-choose-item:nth-child(6) {
          animation-delay: 0.5s;
        }

        .check-icon {
          width: 24px;
          height: 24px;
          min-width: 24px;
          background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 0.8rem;
          font-weight: bold;
          margin-top: 2px;
        }

        .why-choose-text {
          font-size: 0.95rem;
          color: #111111;
          font-weight: 600;
        }

        /* Projects Section */
        .projects-section {
          padding: 3rem 2rem;
          background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        }

        .projects-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 3rem;
          flex-wrap: wrap;
          gap: 2rem;
        }

        .projects-header-content {
          flex: 1;
          min-width: 300px;
        }

        .projects-label {
          color: #0052cc;
          font-size: 0.9rem;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          margin-bottom: 0.5rem;
          display: block;
        }

        .projects-title {
          font-size: 2.5rem;
          font-weight: 800;
          color: #111111;
          margin-bottom: 0;
        }

        .view-all-projects {
          color: #0052cc;
          text-decoration: none;
          font-weight: 700;
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          transition: all 0.25s ease;
          white-space: nowrap;
          padding: 0.65rem 1.4rem;
          border: 2px solid #0052cc;
          border-radius: 8px;
          font-size: 0.9rem;
          letter-spacing: 0.2px;
        }

        .view-all-projects:hover {
          background: #0052cc;
          color: white;
          gap: 0.75rem;
          box-shadow: 0 6px 18px rgba(0, 82, 204, 0.2);
          transform: translateY(-1px);
          text-decoration: none;
        }

        .view-all-projects:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        .projects-grid {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 1.2rem;
        }

        .project-card {
          background: white;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;
          animation: fadeInUp 1.2s ease-out;
        }

        .project-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 24px rgba(0, 82, 204, 0.12);
        }

        .project-image {
          width: 100%;
          height: 140px;
          background: linear-gradient(135deg, #e8f0ff 0%, #f0f6ff 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2.2rem;
          overflow: hidden;
          position: relative;
        }

        .project-card:nth-child(1) .project-image {
          background: linear-gradient(135deg, #1a3a52 0%, #0d1f2d 100%);
        }

        .project-card:nth-child(2) .project-image {
          background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
        }

        .project-card:nth-child(3) .project-image {
          background: linear-gradient(135deg, #2d3e50 0%, #1a1f2e 100%);
        }

        .project-card:nth-child(4) .project-image {
          background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
        }

        .project-card:nth-child(5) .project-image {
          background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        }

        .project-card:nth-child(6) .project-image {
          background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
        }

        .project-image-icon {
          color: white;
          opacity: 0.8;
        }

        .project-info {
          padding: 1rem;
        }

        .project-title {
          font-size: 0.9rem;
          font-weight: 700;
          color: #111111;
          margin-bottom: 0.3rem;
          line-height: 1.3;
        }

        .project-location {
          font-size: 0.75rem;
          color: #111111;
          font-weight: 500;
        }

        @media (max-width: 1400px) {
          .projects-grid {
            grid-template-columns: repeat(6, 1fr);
            gap: 1.5rem;
          }

          .project-image {
            height: 160px;
            font-size: 2.5rem;
          }
        }

        @media (max-width: 1200px) {
          .about-container {
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
          }

          .about-image {
            height: 400px;
          }

          .about-title {
            font-size: 1.8rem;
          }
        }

        @media (max-width: 768px) {
          .about-container {
            grid-template-columns: 1fr;
            gap: 2rem;
          }

          .about-image {
            height: 300px;
          }

          .about-title {
            font-size: 1.5rem;
          }

          .about-stats {
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
          }

          .stat-item {
            padding: 1rem;
          }

          .stat-number {
            font-size: 1.4rem;
          }

          .about-section {
            padding: 3rem 1rem;
          }

          .section-title {
            font-size: 2rem;
          }

          .services-grid {
            gap: 1.5rem;
          }

          .service-card {
            padding: 1.5rem;
          }

          .partners-grid {
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1.5rem;
          }

          .partners-section {
            padding: 3rem 1rem;
          }

          .services-section {
            padding: 3rem 1rem;
          }

          .projects-header {
            flex-direction: column;
            gap: 1rem;
          }

          .projects-title {
            font-size: 2rem;
          }

          .projects-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
          }

          .project-image {
            height: 120px;
            font-size: 1.8rem;
          }

          .project-info {
            padding: 0.75rem;
          }

          .project-title {
            font-size: 0.8rem;
          }

          .project-location {
            font-size: 0.7rem;
          }

          .projects-section {
            padding: 3rem 1rem;
          }
        }

        @media (max-width: 576px) {
          .projects-title {
            font-size: 1.5rem;
          }

          .projects-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.8rem;
          }

          .project-image {
            height: 100px;
            font-size: 1.5rem;
          }

          .project-info {
            padding: 0.6rem;
          }

          .project-title {
            font-size: 0.7rem;
          }

          .project-location {
            font-size: 0.65rem;
          }

          .view-all-projects {
            font-size: 0.85rem;
          }

          .projects-section {
            padding: 2rem 0.8rem;
          }

          .about-container {
            grid-template-columns: 1fr;
          }

          .about-image {
            height: 250px;
          }

          .about-title {
            font-size: 1.3rem;
          }

          .about-description {
            font-size: 0.9rem;
          }

          .about-stats {
            grid-template-columns: 1fr;
            gap: 0.75rem;
          }

          .stat-item {
            padding: 0.75rem;
          }

          .stat-number {
            font-size: 1.2rem;
          }

          .stat-label {
            font-size: 0.75rem;
          }

          .why-choose-title {
            font-size: 1.1rem;
          }

          .why-choose-text {
            font-size: 0.85rem;
          }

          .check-icon {
            width: 20px;
            height: 20px;
            min-width: 20px;
            font-size: 0.7rem;
          }

          .about-section {
            padding: 2rem 1rem;
          }

          .section-title {
            font-size: 1.5rem;
          }

          .services-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
          }

          .service-card {
            padding: 1.25rem;
          }

          .service-icon {
            width: 60px;
            height: 60px;
            font-size: 1.75rem;
          }

          .service-card h3 {
            font-size: 1.1rem;
          }

          .partners-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .view-all-btn {
            width: 100%;
            justify-content: center;
            text-align: center;
          }
        }

        /* Investment Support Section 1 - Intro */
        .investment-intro-section {
          padding: 3rem 2rem;
          background: white;
        }

        .investment-intro-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 3rem;
          align-items: center;
        }

        .investment-image {
          width: 100%;
          height: 350px;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
          animation: fadeInUp 1s ease-out;
        }

        .investment-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .investment-image-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 1.2rem;
          text-align: center;
          padding: 2rem;
        }

        .investment-intro-content {
          animation: fadeInUp 1.1s ease-out;
        }

        .investment-label {
          color: #0052cc;
          font-size: 0.9rem;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          margin-bottom: 0.8rem;
          display: block;
        }

        .investment-title {
          font-size: 2.2rem;
          font-weight: 800;
          color: #111111;
          margin-bottom: 1.5rem;
          line-height: 1.2;
        }

        .investment-description {
          font-size: 0.95rem;
          color: #111111;
          line-height: 1.8;
          margin-bottom: 1.5rem;
        }

        .learn-more-btn {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: #0052cc;
          color: white;
          padding: 0.8rem 2rem;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 700;
          transition: all 0.25s ease;
          cursor: pointer;
          font-size: 0.95rem;
          border: 2px solid #0052cc;
          letter-spacing: 0.2px;
        }

        .learn-more-btn:hover {
          background: #003d99;
          border-color: #003d99;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 82, 204, 0.3);
          color: white;
          text-decoration: none;
        }

        .learn-more-btn:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        /* Investment Support Section 2 - Features */
        .investment-features-section {
          padding: 3rem 2rem;
          background: #f8f9fa;
        }

        .investment-features-header {
          text-align: center;
          margin-bottom: 3rem;
          animation: fadeInUp 1s ease-out;
        }

        .investment-features-title {
          font-size: 2rem;
          font-weight: 800;
          color: #111111;
          margin-bottom: 0.5rem;
        }

        .investment-features-subtitle {
          font-size: 1rem;
          color: #111111;
        }

        .investment-features-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 2rem;
        }

        .investment-feature {
          background: white;
          padding: 2rem;
          border-radius: 12px;
          text-align: center;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;
          animation: fadeInUp 1.2s ease-out;
        }

        .investment-feature:nth-child(2) {
          animation-delay: 0.1s;
        }

        .investment-feature:nth-child(3) {
          animation-delay: 0.2s;
        }

        .investment-feature:nth-child(4) {
          animation-delay: 0.3s;
        }

        .investment-feature:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 32px rgba(0, 82, 204, 0.15);
        }

        .investment-feature-icon {
          width: 70px;
          height: 70px;
          margin: 0 auto 1.5rem;
          background: linear-gradient(135deg, #e8f0ff 0%, #f0f6ff 100%);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #0052cc;
          font-size: 2rem;
          transition: all 0.3s ease;
        }

        .investment-feature:hover .investment-feature-icon {
          background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
          color: white;
          transform: scale(1.1);
        }

        .investment-feature-content h4 {
          font-size: 1.1rem;
          font-weight: 700;
          color: #111111;
          margin-bottom: 0.5rem;
          line-height: 1.4;
        }

        .investment-feature-content p {
          font-size: 0.9rem;
          color: #111111;
          margin: 0;
          line-height: 1.6;
        }

        /* Investment Support Section 3 - CTA */
        .investment-cta-section {
          padding: 3rem 2rem;
          background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
          color: white;
        }

        .investment-cta-container {
          text-align: center;
          animation: fadeInUp 1s ease-out;
          max-width: 600px;
          margin: 0 auto;
        }

        .investment-cta-title {
          font-size: 2rem;
          font-weight: 800;
          margin-bottom: 1rem;
          line-height: 1.3;
          color: #ffffff !important;
          background: none !important;
          -webkit-text-fill-color: #ffffff !important;
        }

        .investment-cta-text {
          font-size: 1rem;
          margin-bottom: 2rem;
          color: #ffffff !important;
          opacity: 0.95 !important;
          line-height: 1.8;
        }

        .investment-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: white;
          color: #0052cc;
          padding: 0.8rem 2rem;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 700;
          transition: all 0.25s ease;
          border: 2px solid white;
          cursor: pointer;
          font-size: 0.95rem;
          letter-spacing: 0.2px;
        }

        .investment-cta-btn:hover {
          background: transparent;
          color: white;
          border-color: white;
          transform: translateY(-2px);
          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
          text-decoration: none;
        }

        .investment-cta-btn:focus-visible {
          outline: 3px solid rgba(255, 255, 255, 0.6);
          outline-offset: 3px;
        }

        @media (max-width: 1200px) {
          .investment-intro-container {
            grid-template-columns: 1fr;
            gap: 2rem;
          }

          .investment-image {
            height: 300px;
          }

          .investment-title {
            font-size: 1.8rem;
          }

          .investment-features-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width: 768px) {

          .investment-intro-section,
          .investment-features-section,
          .investment-cta-section {
            padding: 3rem 1rem;
          }

          .investment-image {
            height: 250px;
          }

          .investment-title {
            font-size: 1.5rem;
          }

          .investment-description {
            font-size: 0.9rem;
          }

          .investment-features-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
          }

          .investment-feature {
            padding: 1.5rem;
          }

          .investment-feature-icon {
            width: 60px;
            height: 60px;
            font-size: 1.8rem;
          }

          .investment-feature-content h4 {
            font-size: 1rem;
          }

          .investment-feature-content p {
            font-size: 0.85rem;
          }

          .investment-cta-title {
            font-size: 1.5rem;
          }

          .investment-cta-text {
            font-size: 0.95rem;
          }
        }

        @media (max-width: 576px) {

          .investment-intro-section,
          .investment-features-section,
          .investment-cta-section {
            padding: 2rem 1rem;
          }

          .investment-image {
            height: 200px;
            border-radius: 8px;
          }

          .investment-title {
            font-size: 1.3rem;
          }

          .investment-label {
            font-size: 0.8rem;
          }

          .investment-description {
            font-size: 0.85rem;
          }

          .learn-more-btn {
            padding: 0.75rem 1.5rem;
            font-size: 0.92rem;
          }

          .investment-features-grid {
            grid-template-columns: 1fr;
            gap: 1.2rem;
          }

          .investment-feature {
            padding: 1.2rem;
          }

          .investment-feature-icon {
            width: 50px;
            height: 50px;
            margin-bottom: 1rem;
            font-size: 1.5rem;
          }

          .investment-feature-content h4 {
            font-size: 0.95rem;
          }

          .investment-feature-content p {
            font-size: 0.8rem;
          }

          .investment-features-title {
            font-size: 1.3rem;
          }

          .investment-features-subtitle {
            font-size: 0.9rem;
          }

          .investment-cta-title {
            font-size: 1.3rem;
          }

          .investment-cta-text {
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
          }

          .investment-cta-btn {
            padding: 0.75rem 1.75rem;
            font-size: 0.92rem;
          }
        }

        /* Contact/Get In Touch Section */
        .contact-section {
          padding: 3rem 2rem;
          background: #f8f9fa;
        }

        .contact-container {
          display: grid;
          grid-template-columns: 1fr 1.2fr 1fr;
          gap: 3rem;
          align-items: flex-start;
        }

        .contact-info {
          animation: fadeInUp 1s ease-out;
        }

        .contact-title {
          font-size: 1.5rem;
          font-weight: 800;
          color: #111111;
          margin-bottom: 1.5rem;
        }

        .contact-item {
          display: flex;
          gap: 1rem;
          margin-bottom: 1.5rem;
          align-items: flex-start;
        }

        .contact-icon {
          width: 40px;
          height: 40px;
          min-width: 40px;
          background: linear-gradient(135deg, #e8f0ff 0%, #f0f6ff 100%);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #0052cc;
          font-size: 1.2rem;
        }

        .contact-item-content h3 {
          font-size: 0.85rem;
          font-weight: 700;
          color: #111111;
          margin-bottom: 0.2rem;
          line-height: 1.2;
        }

        .contact-item-content p {
          font-size: 0.85rem;
          color: #111111;
          margin: 0;
          line-height: 1.4;
        }

        .contact-item a {
          color: #111111;
          text-decoration: none;
          transition: color 0.3s ease;
        }

        .contact-item a:hover {
          color: #0052cc;
        }

        .social-label {
          font-size: 0.85rem;
          font-weight: 700;
          color: #111111;
          margin: 1.5rem 0 1rem 0;
        }

        .social-icons {
          display: flex;
          gap: 1rem;
        }

        .social-icon {
          width: 40px;
          height: 40px;
          background: white;
          border: 2px solid #e0e0e0;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #0052cc;
          text-decoration: none;
          transition: all 0.3s ease;
          font-size: 1rem;
        }

        .social-icon:hover {
          background: #0052cc;
          color: white;
          border-color: #0052cc;
          transform: translateY(-3px);
        }

        .service-card {
          background: white;
          padding: 2.2rem 1.8rem;
          border-radius: 12px;
          border: 1px solid #eef2f8;
          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
          display: flex;
          flex-direction: column;
          height: 100%;
          position: relative;
          overflow: hidden;
        }

        .service-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 36px rgba(0, 82, 204, 0.12);
          border-color: #0052cc;
        }

        .service-card::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background: linear-gradient(90deg, #0052cc, #00d2ff);
          transform: scaleX(0);
          transition: transform 0.4s ease;
          transform-origin: left;
        }

        .service-card:hover::after {
          transform: scaleX(1);
        }

        .contact-form {
          animation: fadeInUp 1.1s ease-out;
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        .form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
        }

        .form-row.full {
          grid-template-columns: 1fr;
        }

        .form-group {
          display: flex;
          flex-direction: column;
        }

        .form-group label {
          font-size: 0.8rem;
          font-weight: 600;
          color: #111111;
          margin-bottom: 0.5rem;
          display: none;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
          padding: 0.9rem;
          border: 1px solid #e0e0e0;
          border-radius: 6px;
          font-size: 0.9rem;
          font-family: inherit;
          transition: all 0.3s ease;
          background: white;
        }

        .form-group input::placeholder,
        .form-group select,
        .form-group textarea::placeholder {
          color: #111111;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
          outline: none;
          border-color: #0052cc;
          box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
        }

        .form-group textarea {
          resize: vertical;
          min-height: 100px;
        }

        .send-btn {
          background: #0052cc;
          color: white;
          border: 2px solid #0052cc;
          padding: 0.85rem 1.5rem;
          border-radius: 8px;
          font-weight: 700;
          font-size: 0.95rem;
          cursor: pointer;
          transition: all 0.25s ease;
          margin-top: 0.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          width: 100%;
          letter-spacing: 0.2px;
        }

        .send-btn:hover {
          background: #003d99;
          border-color: #003d99;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 82, 204, 0.3);
        }

        .send-btn:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        .send-btn i {
          margin-left: 0.2rem;
        }

        .project-card,
        .why-card,
        .m-card,
        .team-card {
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .project-card:hover,
        .why-card:hover,
        .m-card:hover,
        .team-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 20px 40px rgba(0, 82, 204, 0.15);
        }

        .map-container {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          height: 400px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          animation: fadeInUp 1.2s ease-out;
        }

        .map-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #e8f0ff 0%, #f0f6ff 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }

        .map-pin {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -100%);
          font-size: 2.5rem;
          animation: bounce 2s infinite;
        }

        @keyframes bounce {

          0%,
          100% {
            transform: translate(-50%, -100%);
          }

          50% {
            transform: translate(-50%, -115%);
          }
        }

        .location-btn {
          position: absolute;
          bottom: 1.5rem;
          left: 50%;
          transform: translateX(-50%);
          background: #0052cc;
          color: white;
          border: 2px solid #0052cc;
          padding: 0.7rem 1.5rem;
          border-radius: 8px;
          font-weight: 700;
          font-size: 0.9rem;
          cursor: pointer;
          transition: all 0.25s ease;
          white-space: nowrap;
          letter-spacing: 0.2px;
        }

        .location-btn:hover {
          background: #003d99;
          border-color: #003d99;
          transform: translateX(-50%) translateY(-2px);
          box-shadow: 0 8px 20px rgba(0, 82, 204, 0.3);
        }

        .location-btn:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        @media (max-width: 1200px) {
          .contact-container {
            grid-template-columns: 1fr;
            gap: 2rem;
          }

          .map-container {
            height: 300px;
          }

          .contact-title {
            font-size: 1.3rem;
          }
        }

        @media (max-width: 768px) {
          .contact-section {
            padding: 3rem 1rem;
          }

          .contact-container {
            gap: 1.5rem;
          }

          .form-row {
            grid-template-columns: 1fr;
            gap: 0.8rem;
          }

          .map-container {
            height: 250px;
          }

          .contact-title {
            font-size: 1.1rem;
          }

          .contact-item {
            margin-bottom: 1rem;
          }

          .contact-icon {
            width: 35px;
            height: 35px;
            font-size: 1rem;
          }

          .contact-item-content h3 {
            font-size: 0.8rem;
          }

          .contact-item-content p {
            font-size: 0.8rem;
          }

          .form-group input,
          .form-group select,
          .form-group textarea {
            padding: 0.8rem;
            font-size: 0.85rem;
          }

          .send-btn {
            padding: 0.8rem 1.25rem;
            font-size: 0.92rem;
            width: 100%;
          }
        }

        @media (max-width: 576px) {
          .contact-section {
            padding: 2rem 1rem;
          }

          .contact-title {
            font-size: 1rem;
          }

          .contact-item {
            margin-bottom: 0.8rem;
          }

          .contact-icon {
            width: 32px;
            height: 32px;
            font-size: 0.9rem;
          }

          .contact-item-content h3 {
            font-size: 0.75rem;
          }

          .contact-item-content p {
            font-size: 0.75rem;
          }

          .social-icon {
            width: 36px;
            height: 36px;
            font-size: 0.9rem;
          }

          .form-group input,
          .form-group select,
          .form-group textarea {
            padding: 0.75rem;
            font-size: 0.8rem;
          }

          .map-container {
            height: 200px;
          }

          .map-pin {
            font-size: 2rem;
          }

          .location-btn {
            padding: 0.7rem 1.2rem;
            font-size: 0.85rem;
            bottom: 1rem;
          }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
          width: 8px;
        }

        ::-webkit-scrollbar-track {
          background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: #0052cc;
        }



        /* ===== HEADER ===== */
        /* ── TOPBAR ─────────────────────────────────────────────── */
        .topbar {
          width: 100%;
          height: var(--topbar-height);
          background: #0052cc;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 1.5rem;
          gap: 1rem;
          overflow: hidden;
        }

        .topbar-left {
          display: flex;
          align-items: center;
          min-width: 0;
          flex: 1;
        }

        .topbar-info {
          display: flex;
          align-items: center;
          gap: 1.4rem;
          flex-wrap: nowrap;
          overflow: hidden;
        }

        .topbar-info span,
        .topbar-info a {
          font-size: 0.78rem;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.9);
          text-decoration: none;
          white-space: nowrap;
          display: flex;
          align-items: center;
          gap: 0.35rem;
          transition: color 0.2s;
          letter-spacing: 0.01em;
        }

        .topbar-info a:hover {
          color: #ffffff;
        }

        .ti-ico {
          font-size: 0.8rem;
          opacity: 0.85;
        }

        /* Separator between info items */
        .topbar-info span + a {
          padding-left: 1.4rem;
          border-left: 1px solid rgba(255, 255, 255, 0.2);
        }

        .topbar-right {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          flex-shrink: 0;
        }

        .topbar-socials {
          display: flex;
          align-items: center;
          gap: 0.1rem;
        }

        .topbar-socials a {
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.82rem;
          font-weight: 700;
          border-radius: 4px;
          text-decoration: none;
          transition: background 0.2s, color 0.2s;
        }

        .topbar-socials a:hover {
          background: rgba(255, 255, 255, 0.15);
          color: #ffffff;
        }

        /* Topbar divider between socials and lang */
        .topbar-divider {
          width: 1px;
          height: 16px;
          background: rgba(255, 255, 255, 0.25);
          margin: 0 0.4rem;
        }

        /* Topbar Language Button */
        .topbar-lang {
          position: relative;
        }

        .topbar-lang-btn {
          display: flex;
          align-items: center;
          gap: 0.4rem;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.25);
          border-radius: 5px;
          padding: 0.22rem 0.6rem;
          cursor: pointer;
          color: #ffffff;
          font-size: 0.78rem;
          font-weight: 600;
          letter-spacing: 0.03em;
          transition: all 0.2s;
          white-space: nowrap;
        }

        .topbar-lang-btn:hover {
          background: rgba(255, 255, 255, 0.22);
          border-color: rgba(255, 255, 255, 0.45);
        }

        .topbar-lang-btn img {
          border-radius: 2px;
          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .topbar-lang-btn .lang-chevron {
          font-size: 0.6rem;
          color: rgba(255, 255, 255, 0.8);
          transition: transform 0.2s;
        }

        .topbar-lang:hover .lang-chevron {
          transform: rotate(180deg);
        }

        .topbar-lang-dropdown {
          position: absolute;
          top: calc(100% + 6px);
          right: 0;
          background: #ffffff;
          border: 1px solid #e8edf4;
          border-radius: 8px;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
          min-width: 148px;
          padding: 0.4rem;
          z-index: 1100;
          opacity: 0;
          visibility: hidden;
          transform: translateY(8px);
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .topbar-lang:hover .topbar-lang-dropdown,
        .topbar-lang-dropdown.open {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        .topbar-lang-option {
          display: flex;
          align-items: center;
          gap: 0.7rem;
          padding: 0.5rem 0.7rem;
          text-decoration: none;
          color: #111111;
          font-size: 0.85rem;
          font-weight: 500;
          border-radius: 5px;
          transition: all 0.15s;
        }

        .topbar-lang-option:hover {
          background: #f0f6ff;
          color: #0052cc;
        }

        .topbar-lang-option.active {
          background: #f0f6ff;
          color: #0052cc;
          font-weight: 700;
        }

        .topbar-lang-option img {
          border-radius: 2px;
        }

        /* Topbar responsive */
        @media (max-width: 768px) {
          .topbar-left { display: none; }
          .topbar-socials { display: none; }
          .topbar-divider { display: none; }
          .topbar { justify-content: flex-end; padding: 0 1rem; }
          .topbar-right { width: 100%; justify-content: flex-end; }
        }


        .site-header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border-bottom: 1px solid rgba(232, 237, 244, 0.5);
          z-index: 1000;
          transition: all 0.3s ease;
        }

        .header-inner {
          max-width: 1280px;
          margin: 0 auto;
          padding: 0 1.5rem;
          height: 68px;
          display: flex;
          align-items: center;
          gap: 2rem;
        }

        /* Logo */
        .header-logo {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          text-decoration: none;
          flex-shrink: 0;
        }

        .header-logo-icon svg {
          display: block;
        }

        .header-logo-text {
          display: flex;
          flex-direction: column;
          line-height: 1.1;
        }

        .header-logo-name {
          font-size: 1.05rem;
          font-weight: 800;
          color: #0052cc;
          letter-spacing: 0.5px;
        }

        .header-logo-sub {
          font-size: 0.52rem;
          font-weight: 600;
          color: #111111;
          letter-spacing: 0.6px;
          text-transform: uppercase;
        }

        /* Desktop Nav */
        .header-nav {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          flex: 1;
          margin-left: 1.5rem;
        }

        .nav-link {
          padding: 0.5rem 0.85rem;
          font-size: 0.92rem;
          font-weight: 600;
          color: #111111;
          text-decoration: none;
          border-radius: 6px;
          transition: color 0.2s;
          white-space: nowrap;
          position: relative;
        }

        .nav-link:hover {
          color: #0052cc;
        }

        .nav-link.active {
          color: #0052cc;
        }

        .nav-link.active::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 50%;
          transform: translateX(-50%);
          width: 28px;
          height: 3px;
          background: #0052cc;
          border-radius: 2px;
        }

        /* Dropdown */
        .nav-dropdown {
          position: relative;
        }

        .dropdown-toggle-link {
          cursor: pointer;
        }

        .nav-chevron {
          font-size: 0.65rem;
          margin-left: 3px;
          transition: transform 0.2s;
        }

        .nav-dropdown:hover .nav-chevron {
          transform: rotate(180deg);
        }

        .nav-dropdown-menu {
          display: none;
          position: absolute;
          top: calc(100% + 10px);
          left: 0;
          background: #fff;
          border: 1px solid #e8edf4;
          border-radius: 10px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
          min-width: 200px;
          padding: 0.5rem 0;
          z-index: 200;
        }

        .nav-dropdown:hover .nav-dropdown-menu {
          display: block;
        }

        .nav-dropdown-menu a {
          display: block;
          padding: 0.55rem 1.1rem;
          font-size: 0.88rem;
          color: #111111;
          text-decoration: none;
          transition: background 0.15s, color 0.15s;
        }

        .nav-dropdown-menu a:hover {
          background: #f0f6ff;
          color: #0052cc;
        }

        /* Right side */
        .header-right {
          display: flex;
          align-items: center;
          gap: 1rem;
          flex-shrink: 0;
        }

        .header-phone {
          display: flex;
          align-items: center;
          gap: 0.45rem;
          font-size: 0.9rem;
          font-weight: 600;
          color: #111111;
          text-decoration: none;
          white-space: nowrap;
          transition: color 0.2s;
        }

        .header-phone i {
          color: #0052cc;
          font-size: 0.9rem;
        }

        .header-phone:hover {
          color: #0052cc;
        }

        .header-cta {
          background: #0052cc;
          color: #fff;
          font-size: 0.88rem;
          font-weight: 700;
          padding: 0.6rem 1.25rem;
          border-radius: 8px;
          border: 2px solid #0052cc;
          text-decoration: none;
          white-space: nowrap;
          transition: all 0.25s ease;
          display: inline-flex;
          align-items: center;
        }

        .header-cta:hover {
          background: #003d99;
          border-color: #003d99;
          color: #fff;
          transform: translateY(-1px);
          box-shadow: 0 6px 18px rgba(0, 82, 204, 0.3);
          text-decoration: none;
        }

        .header-cta:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        /* Language Switcher */
        .lang-switcher {
          position: relative;
          margin-right: 0.5rem;
        }

        .lang-btn {
          background: #fff;
          border: 1px solid #e8edf4;
          padding: 0.5rem 0.8rem;
          border-radius: 6px;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          cursor: pointer;
          transition: all 0.2s;
          font-weight: 600;
          color: #111111;
          font-size: 0.9rem;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        }

        .lang-btn:hover {
          border-color: #0052cc;
          background: #f0f6ff;
        }

        .lang-btn img {
          border-radius: 2px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .lang-chevron {
          font-size: 0.7rem;
          color: #111111;
          transition: transform 0.2s;
        }

        .lang-switcher:hover .lang-chevron,
        .lang-btn.open .lang-chevron {
          transform: rotate(180deg);
        }

        .lang-dropdown {
          position: absolute;
          top: calc(100% + 8px);
          right: 0;
          background: #fff;
          border: 1px solid #e8edf4;
          border-radius: 10px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
          min-width: 160px;
          padding: 0.5rem;
          z-index: 1001;
          opacity: 0;
          visibility: hidden;
          transform: translateY(10px);
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .lang-switcher:hover .lang-dropdown,
        .lang-dropdown.open {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        .lang-option {
          display: flex;
          align-items: center;
          gap: 0.8rem;
          padding: 0.6rem 0.8rem;
          text-decoration: none;
          color: #111111;
          font-size: 0.88rem;
          font-weight: 500;
          border-radius: 6px;
          transition: all 0.2s;
        }

        .lang-option:hover {
          background: #f0f6ff;
          color: #0052cc;
        }

        .lang-option.active {
          background: #f0f6ff;
          color: #0052cc;
          font-weight: 700;
        }

        .lang-option img {
          border-radius: 2px;
        }

        /* Mobile Adjustments for Header Right */
        @media (max-width: 1024px) {
          .header-right {
            display: none !important;
          }

          .hamburger {
            display: flex;
          }
        }

        /* Hamburger */
        .hamburger {
          display: none;
          flex-direction: column;
          justify-content: center;
          gap: 5px;
          background: none;
          border: none;
          cursor: pointer;
          padding: 6px;
          margin-left: auto;
          flex-shrink: 0;
        }

        .hamburger span {
          display: block;
          width: 24px;
          height: 2.5px;
          background: #1a1a1a;
          border-radius: 2px;
          transition: all 0.3s;
        }

        .hamburger.open span:nth-child(1) {
          transform: translateY(7.5px) rotate(45deg);
        }

        .hamburger.open span:nth-child(2) {
          opacity: 0;
        }

        .hamburger.open span:nth-child(3) {
          transform: translateY(-7.5px) rotate(-45deg);
        }

        /* ===== MOBILE DRAWER ===== */
        .drawer-overlay {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.45);
          z-index: 1100;
          opacity: 0;
          transition: opacity 0.3s;
        }

        .drawer-overlay.active {
          display: block;
          opacity: 1;
        }

        .mobile-drawer {
          position: fixed;
          top: 0;
          left: 0;
          height: 100%;
          width: 290px;
          background: #fff;
          z-index: 1200;
          transform: translateX(-100%);
          transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
          display: flex;
          flex-direction: column;
          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        }

        .mobile-drawer.open {
          transform: translateX(0);
        }

        .drawer-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1rem 1.25rem;
          border-bottom: 1px solid #e8edf4;
        }

        .drawer-close {
          background: none;
          border: none;
          font-size: 1.2rem;
          color: #111111;
          cursor: pointer;
          padding: 4px 8px;
          border-radius: 4px;
          transition: color 0.2s, background 0.2s;
        }

        .drawer-close:hover {
          color: #0052cc;
          background: #f0f6ff;
        }

        .drawer-nav {
          flex: 1;
          overflow-y: auto;
          padding: 0.75rem 0;
        }

        .drawer-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 0.85rem 1.5rem;
          font-size: 0.95rem;
          font-weight: 600;
          color: #111111;
          text-decoration: none;
          background: none;
          border: none;
          cursor: pointer;
          transition: background 0.15s, color 0.15s;
          text-align: left;
        }

        .drawer-link:hover,
        .drawer-link.active {
          background: #f0f6ff;
          color: #0052cc;
        }

        .drawer-chevron {
          font-size: 0.7rem;
          transition: transform 0.25s;
        }

        .drawer-dropdown.open .drawer-chevron {
          transform: rotate(180deg);
        }

        .drawer-dropdown-menu {
          display: none;
          background: #f8faff;
          border-left: 3px solid #0052cc;
          margin: 0 1rem 0 1.5rem;
          border-radius: 0 6px 6px 0;
        }

        .drawer-dropdown.open .drawer-dropdown-menu {
          display: block;
        }

        .drawer-dropdown-menu a {
          display: block;
          padding: 0.6rem 1rem;
          font-size: 0.87rem;
          color: #111111;
          text-decoration: none;
          transition: color 0.15s;
        }

        .drawer-dropdown-menu a:hover {
          color: #0052cc;
        }

        .drawer-footer {
          padding: 1.25rem;
          border-top: 1px solid #e8edf4;
          display: flex;
          flex-direction: column;
          gap: 0.85rem;
        }

        .drawer-phone {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.9rem;
          font-weight: 600;
          color: #111111;
          text-decoration: none;
        }

        .drawer-phone i {
          color: #0052cc;
        }

        /* Responsive breakpoints */
        @media (max-width: 1024px) {
          .header-nav {
            display: none;
          }

          .header-right {
            display: none;
          }

          .hamburger {
            display: flex;
          }
        }



        /* ===== FOOTER ===== */
        .site-footer {
          background: #f8f9fa;
          border-top: 1px solid #e4e8ef;
          padding-top: 2.5rem;
          font-size: 0.9rem;
          color: #111111;
        }

        .footer-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 2rem;
          padding-bottom: 2rem;
          align-items: flex-start;
        }

        .footer-col {
          flex: 1 1 140px;
          min-width: 130px;
        }

        .footer-brand {
          flex: 1 1 200px;
          max-width: 230px;
        }

        .footer-logo {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          margin-bottom: 0.85rem;
        }

        .footer-logo i {
          font-size: 1.8rem;
          color: #0052cc;
        }

        .footer-logo-name {
          display: block;
          font-size: 1rem;
          font-weight: 800;
          color: #0052cc;
          letter-spacing: 0.5px;
          line-height: 1.1;
        }

        .footer-logo-sub {
          display: block;
          font-size: 0.55rem;
          font-weight: 600;
          color: #111111;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          line-height: 1.3;
        }

        .footer-tagline {
          color: #111111;
          font-size: 0.82rem;
          line-height: 1.6;
          margin: 0;
        }

        .footer-heading {
          font-size: 0.9rem;
          font-weight: 700;
          color: #111111;
          margin-bottom: 0.85rem;
        }

        .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .footer-links li {
          margin-bottom: 0.45rem;
        }

        .footer-links a {
          color: #111111;
          text-decoration: none;
          font-size: 0.85rem;
          transition: color 0.2s;
        }

        .footer-links a:hover {
          color: #0052cc;
        }

        /* Services two-column layout */
        .footer-services-col {
          flex: 1 1 260px;
        }

        .footer-services-grid {
          display: flex;
          gap: 2rem;
        }

        /* Contact list */
        .footer-contact-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .footer-contact-list li {
          display: flex;
          align-items: flex-start;
          gap: 0.5rem;
          margin-bottom: 0.6rem;
          font-size: 0.84rem;
          color: #111111;
        }

        .footer-contact-icon {
          color: #0052cc;
          margin-top: 2px;
          font-size: 0.8rem;
          flex-shrink: 0;
        }

        /* WhatsApp button */
        .footer-whatsapp-col {
          flex: 0 1 140px;
        }

        .whatsapp-btn {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: #25d366;
          color: #fff;
          font-weight: 700;
          font-size: 0.9rem;
          padding: 0.7rem 1.25rem;
          border-radius: 8px;
          border: 2px solid #25d366;
          text-decoration: none;
          transition: all 0.25s ease;
          white-space: nowrap;
          letter-spacing: 0.2px;
        }

        .whatsapp-btn i {
          font-size: 1.1rem;
        }

        .whatsapp-btn:hover {
          background: #1aab52;
          border-color: #1aab52;
          color: #fff;
          transform: translateY(-1px);
          box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
          text-decoration: none;
        }

        .whatsapp-btn:focus-visible {
          outline: 3px solid rgba(37, 211, 102, 0.5);
          outline-offset: 3px;
        }

        /* Bottom bar */
        .footer-bottom {
          border-top: 1px solid #e4e8ef;
          padding: 0.9rem 0;
          background: #f8f9fa;
        }

        .footer-bottom-inner {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 0.5rem;
          font-size: 0.8rem;
          color: #111111;
        }

        .footer-heart {
          color: #e53e3e;
        }

        @media (max-width: 768px) {
          .footer-grid {
            flex-direction: column;
            gap: 1.5rem;
          }

          .footer-brand,
          .footer-services-col,
          .footer-whatsapp-col {
            max-width: 100%;
            flex-basis: 100%;
          }

          .footer-services-grid {
            gap: 1rem;
          }

          .footer-bottom-inner {
            flex-direction: column;
            text-align: center;
          }
        }


        /* --- ABOUT PAGE STYLES FROM JAL --- */

        .about-main {
          background: var(--navy-2)
        }

        .about-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 5rem;
          align-items: center
        }

        .img-wrap {
          position: relative
        }

        .img-wrap img {
          width: 100%;
          height: 520px;
          object-fit: cover;
          border-radius: 8px;
          border: 1px solid var(--border)
        }

        .exp-badge {
          position: absolute;
          bottom: -18px;
          left: -18px;
          background: var(--blue-light);
          border-radius: 8px;
          padding: 18px 22px;
          text-align: center;
          box-shadow: 0 8px 30px rgba(21, 101, 192, .4)
        }

        .exp-badge .n {
          font-family: 'Raleway', sans-serif;
          font-size: 2.4rem;
          font-weight: 900;
          line-height: 1
        }

        .exp-badge .l {
          font-size: .62rem;
          font-weight: 700;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .8);
          margin-top: 3px
        }

        .about-content p {
          color: var(--muted);
          line-height: 1.8;
          margin-bottom: 1rem;
          font-size: .97rem
        }

        .check-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-top: 1.4rem
        }

        .check-list li {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          font-size: .92rem;
          color: var(--muted)
        }

        .check-list li::before {
          content: '▸';
          color: var(--accent);
          font-size: .8rem;
          margin-top: 2px;
          flex-shrink: 0
        }

        /* mission */
        .mission {
          background: var(--navy)
        }

        .mission-grid {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 1.8rem
        }

        .m-card {
          background: var(--navy-2);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 2rem;
          text-align: center;
          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .m-card:hover {
          transform: translateY(-8px);
          border-color: var(--blue-light);
          box-shadow: 0 10px 30px rgba(0, 82, 204, 0.1);
        }

        .m-ico {
          font-size: 2.5rem;
          margin-bottom: 1rem
        }

        .m-card h3 {
          font-size: 1rem;
          font-weight: 700;
          margin-bottom: .6rem
        }

        .m-card p {
          font-size: .86rem;
          color: #111111;
          line-height: 1.7
        }

        /* why */
        .why {
          background: var(--navy-3)
        }

        .why-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 1.8rem
        }

        .why-card {
          background: var(--navy-2);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 2rem;
          position: relative;
          overflow: hidden;
          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .why-card:hover {
          transform: translateY(-8px);
          border-color: var(--blue-light);
          box-shadow: 0 10px 30px rgba(0, 82, 204, 0.1);
        }

        .why-n {
          position: absolute;
          top: 1.5rem;
          right: 1.5rem;
          font-family: 'Raleway', sans-serif;
          font-size: 4rem;
          font-weight: 900;
          color: rgba(255, 255, 255, .04);
          line-height: 1
        }

        .why-ico {
          width: 50px;
          height: 50px;
          background: rgba(0, 176, 255, .1);
          border: 1px solid rgba(0, 176, 255, .2);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
          margin-bottom: 1.2rem
        }

        .why-card h3 {
          font-size: .98rem;
          font-weight: 700;
          margin-bottom: .5rem;
          line-height: 1.35
        }

        .why-card p {
          font-size: .86rem;
          color: var(--muted);
          line-height: 1.75
        }

        /* contrib */
        .contrib {
          background: var(--navy-2)
        }

        .contrib-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          align-items: center
        }

        .img-mosaic {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 200px 200px;
          gap: 12px
        }

        .img-mosaic img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 6px;
          border: 1px solid var(--border)
        }

        .img-mosaic img:first-child {
          grid-row: span 2
        }

        .contrib-list {
          display: flex;
          flex-direction: column;
          gap: 14px;
          margin-top: 1.5rem
        }

        .contrib-list li {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          font-size: .92rem;
          color: var(--muted);
          line-height: 1.5
        }

        .chk {
          width: 20px;
          height: 20px;
          background: rgba(0, 176, 255, .15);
          border: 1px solid rgba(0, 176, 255, .3);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--accent);
          font-size: .65rem;
          flex-shrink: 0;
          margin-top: 1px
        }

        /* timeline */
        .timeline {
          background: var(--navy)
        }

        .tl-list {
          display: flex;
          flex-direction: column;
          gap: 0;
          max-width: 800px;
          margin: 0 auto;
          position: relative
        }

        .tl-list::before {
          content: '';
          position: absolute;
          left: 20px;
          top: 0;
          bottom: 0;
          width: 2px;
          background: linear-gradient(to bottom, var(--accent), transparent)
        }

        .tl-item {
          display: flex;
          gap: 2rem;
          padding: 0 0 2.5rem 3.5rem;
          position: relative
        }

        .tl-dot {
          position: absolute;
          left: 13px;
          top: 4px;
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background: var(--accent);
          border: 3px solid var(--navy);
          flex-shrink: 0
        }

        .tl-content h4 {
          font-size: 1rem;
          font-weight: 700;
          margin-bottom: .4rem;
          color: var(--white)
        }

        .tl-content p {
          font-size: .88rem;
          color: var(--muted);
          line-height: 1.7
        }

        .tl-year {
          display: inline-block;
          font-size: .7rem;
          font-weight: 700;
          letter-spacing: 1.5px;
          color: var(--accent);
          background: rgba(0, 176, 255, .1);
          border: 1px solid rgba(0, 176, 255, .25);
          padding: 3px 10px;
          border-radius: 20px;
          margin-bottom: .5rem
        }

        @media(max-width:960px) {

          .about-grid,
          .contrib-grid {
            grid-template-columns: 1fr;
            gap: 2.5rem
          }

          .img-wrap img {
            height: 350px
          }

          .exp-badge {
            left: 10px;
            bottom: -12px
          }

          .mission-grid {
            grid-template-columns: 1fr 1fr
          }
        }

        @media(max-width:600px) {
          .mission-grid {
            grid-template-columns: 1fr
          }

          .img-mosaic {
            grid-template-rows: 150px 150px
          }
        }


        /* --- SERVICES PAGE STYLES FROM JAL --- */

        /* ── SERVICES GRID ─────────────────────────── */
        .services-main {
          background: var(--navy-2)
        }

        .s-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
          gap: 2rem
        }

        .s-card {
          background: var(--navy-3);
          border: 1px solid var(--border);
          border-radius: 10px;
          overflow: hidden;
          transition: transform .25s, border-color .25s, box-shadow .25s;
          display: flex;
          flex-direction: column
        }

        .s-card:hover {
          transform: translateY(-6px);
          border-color: var(--border-hover);
          box-shadow: 0 20px 50px rgba(0, 0, 0, .35)
        }

        .s-card img {
          width: 100%;
          height: 210px;
          object-fit: cover
        }

        .s-card-body {
          padding: 1.8rem;
          flex: 1;
          display: flex;
          flex-direction: column
        }

        .s-ico {
          width: 46px;
          height: 46px;
          background: rgba(21, 101, 192, .15);
          border: 1px solid rgba(21, 101, 192, .3);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.3rem;
          margin-bottom: 1rem
        }

        .s-card h3 {
          font-size: 1.1rem;
          font-weight: 700;
          margin-bottom: .9rem;
          color: var(--white)
        }

        .s-card ul {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-bottom: 1.5rem;
          flex: 1
        }

        .s-card ul li {
          font-size: .87rem;
          color: var(--muted);
          display: flex;
          align-items: flex-start;
          gap: 8px;
          line-height: 1.5
        }

        .s-card ul li::before {
          content: '—';
          color: var(--blue-light);
          font-size: .75rem;
          flex-shrink: 0;
          margin-top: 2px;
          font-weight: 700
        }

        .btn-book {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          color: var(--accent);
          font-family: 'Raleway', sans-serif;
          font-weight: 700;
          font-size: .82rem;
          letter-spacing: .5px;
          border-bottom: 1px solid transparent;
          padding-bottom: 2px;
          transition: border-color .2s;
          width: fit-content
        }

        .btn-book:hover {
          border-color: var(--accent)
        }

        .btn-book::after {
          content: ' →'
        }

        /* process section */
        .process {
          background: var(--navy)
        }

        .process-steps {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.5rem;
          position: relative
        }

        .process-steps::before {
          content: '';
          position: absolute;
          top: 32px;
          left: 10%;
          right: 10%;
          height: 2px;
          background: linear-gradient(90deg, var(--accent), rgba(0, 176, 255, .2));
          z-index: 0
        }

        .step {
          text-align: center;
          position: relative;
          z-index: 1
        }

        .step-num {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background: var(--blue-light);
          border: 3px solid var(--navy);
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: 'Raleway', sans-serif;
          font-weight: 800;
          font-size: 1.3rem;
          color: #ffffff;
          margin: 0 auto 1.2rem;
          line-height: 1;
        }

        .step h4 {
          font-size: .95rem;
          font-weight: 700;
          margin-bottom: .4rem
        }

        .step p {
          font-size: .82rem;
          color: var(--muted);
          line-height: 1.6
        }

        /* contribution */
        .contrib {
          background: var(--navy-3)
        }

        .contrib-inner {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          align-items: center
        }

        .img-mosaic {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 200px 200px;
          gap: 12px
        }

        .img-mosaic img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 6px;
          border: 1px solid var(--border)
        }

        .img-mosaic img:first-child {
          grid-row: span 2
        }

        .contrib-list {
          display: flex;
          flex-direction: column;
          gap: 14px;
          margin-top: 1.5rem
        }

        .contrib-list li {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          font-size: .92rem;
          color: var(--muted);
          line-height: 1.5
        }

        .chk {
          width: 20px;
          height: 20px;
          background: rgba(0, 176, 255, .15);
          border: 1px solid rgba(0, 176, 255, .3);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--accent);
          font-size: .65rem;
          flex-shrink: 0;
          margin-top: 1px
        }

        @media(max-width:960px) {
          .process-steps {
            grid-template-columns: 1fr 1fr;
            gap: 2rem
          }

          .process-steps::before {
            display: none
          }

          .contrib-inner {
            grid-template-columns: 1fr;
            gap: 2.5rem
          }
        }

        @media(max-width:600px) {
          .s-grid {
            grid-template-columns: 1fr
          }

          .process-steps {
            grid-template-columns: 1fr
          }

          .img-mosaic {
            grid-template-rows: 150px 150px
          }
        }


        /* --- PORTFOLIO PAGE STYLES FROM JAL --- */

        /* filter tabs */
        .filter-tabs {
          display: flex;
          flex-wrap: wrap;
          gap: .6rem;
          margin-bottom: 2.5rem
        }

        .filter-btn {
          background: rgba(255, 255, 255, .06);
          border: 1.5px solid var(--border);
          color: var(--muted);
          font-family: 'Raleway', sans-serif;
          font-weight: 700;
          font-size: .78rem;
          letter-spacing: .8px;
          text-transform: uppercase;
          padding: 9px 22px;
          border-radius: 40px;
          cursor: pointer;
          transition: all .2s ease;
        }

        .filter-btn:hover,
        .filter-btn.active {
          background: var(--blue-light);
          border-color: var(--blue-light);
          color: var(--white);
          transform: translateY(-1px);
          box-shadow: 0 4px 14px rgba(0, 82, 204, 0.3);
        }

        .filter-btn:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        /* portfolio grid */
        .p-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1.2rem
        }

        .p-item {
          position: relative;
          border-radius: 8px;
          overflow: hidden;
          border: 1px solid var(--border);
          cursor: pointer;
          transition: transform .25s, border-color .25s, box-shadow .25s,
                    opacity .5s ease, scale .5s ease;
          opacity: 1;
          scale: 1;
        }

        .p-item:hover {
          transform: translateY(-5px);
          border-color: var(--border-hover);
          box-shadow: 0 16px 40px rgba(0, 0, 0, .4)
        }

        .p-item img {
          width: 100%;
          height: 240px;
          object-fit: cover;
          display: block;
          transition: transform .35s
        }

        .p-item:hover img {
          transform: scale(1.05)
        }

        .p-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(5, 14, 31, .92) 0%, rgba(5, 14, 31, .3) 60%, transparent 100%);
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 1.2rem;
          opacity: 0;
          transition: opacity .25s
        }

        .p-item:hover .p-overlay {
          opacity: 1
        }

        .p-tag {
          display: inline-block;
          background: var(--blue-light);
          color: var(--white);
          font-size: .68rem;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          padding: 3px 10px;
          border-radius: 20px;
          margin-bottom: .5rem;
          width: fit-content
        }

        .p-title {
          font-family: 'Raleway', sans-serif;
          font-size: .95rem;
          font-weight: 700;
          color: var(--white);
          line-height: 1.3
        }

        /* filter animation states */
        .p-item.is-hiding {
          opacity: 0;
          scale: 0.92;
          pointer-events: none;
        }

        .p-item.is-hidden {
          display: none;
        }

        .p-item.is-showing {
          opacity: 0;
          scale: 0.92;
        }

        /* contact quick */
        .contact-quick {
          background: var(--navy-2)
        }

        .cq-grid {
          display: grid;
          grid-template-columns: 1fr 1.4fr;
          gap: 4rem;
          align-items: start
        }

        .c-items {
          display: flex;
          flex-direction: column;
          gap: 1.2rem;
          margin-top: 1rem
        }

        .c-item {
          display: flex;
          align-items: center;
          gap: 12px
        }

        .c-ico {
          width: 42px;
          height: 42px;
          background: rgba(21, 101, 192, .15);
          border: 1px solid rgba(21, 101, 192, .3);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.1rem;
          flex-shrink: 0
        }

        .c-item-text p:first-child {
          font-size: .7rem;
          color: var(--muted);
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: 600
        }

        .c-item-text p:last-child {
          font-size: .9rem;
          color: var(--white);
          font-weight: 500;
          margin-top: 2px
        }

        .contact-form {
          background: var(--navy-3);
          border: 1px solid var(--border);
          border-radius: 10px;
          padding: 2.5rem
        }

        @media(max-width:960px) {
          .p-grid {
            grid-template-columns: 1fr 1fr
          }

          .cq-grid {
            grid-template-columns: 1fr;
            gap: 2.5rem
          }
        }

        @media(max-width:600px) {
          .p-grid {
            grid-template-columns: 1fr
          }

          .p-item img {
            height: 200px
          }

          .p-overlay {
            opacity: 1
          }
        }


        /* --- LEADERSHIP PAGE STYLES FROM JAL --- */

        /* team grid */
        .team-section {
          background: var(--navy-2);
          display: none;
        }

        .team-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 1.8rem
        }

        .team-card {
          background: var(--navy-3);
          border: 1px solid var(--border);
          border-radius: 10px;
          overflow: hidden;
          transition: transform .25s, border-color .25s, box-shadow .25s;
          text-align: center
        }

        .team-card:hover {
          transform: translateY(-6px);
          border-color: var(--border-hover);
          box-shadow: 0 20px 50px rgba(0, 0, 0, .35)
        }

        .team-img-wrap {
          position: relative;
          overflow: hidden
        }

        .team-img-wrap img {
          width: 100%;
          height: 280px;
          object-fit: cover;
          object-position: top;
          transition: transform .35s
        }

        .team-card:hover .team-img-wrap img {
          transform: scale(1.05)
        }

        .team-socials {
          position: absolute;
          bottom: -50px;
          left: 0;
          right: 0;
          display: flex;
          justify-content: center;
          gap: .5rem;
          padding: 1rem;
          transition: bottom .25s;
          background: linear-gradient(to top, rgba(5, 14, 31, .9), transparent)
        }

        .team-card:hover .team-socials {
          bottom: 0
        }

        .soc-btn {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: var(--blue-light);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: .75rem;
          color: var(--white);
          transition: background .2s
        }

        .soc-btn:hover {
          background: var(--accent);
          color: var(--navy)
        }

        .team-body {
          padding: 1.4rem 1.2rem
        }

        .team-role {
          font-size: .7rem;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: var(--accent);
          margin-bottom: .4rem
        }

        .team-body h3 {
          font-size: 1rem;
          font-weight: 700;
          color: var(--white)
        }

        .team-body p {
          font-size: .84rem;
          color: var(--muted);
          line-height: 1.65;
          margin-top: .5rem
        }

        /* featured CEO */
        .ceo-feature {
          background: var(--navy)
        }

        .ceo-grid {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 5rem;
          align-items: center
        }

        .ceo-img-wrap {
          position: relative
        }

        .ceo-img-wrap img {
          width: 100%;
          height: 500px;
          object-fit: cover;
          object-position: top;
          border-radius: 10px;
          border: 1px solid var(--border)
        }

        .ceo-badge {
          position: absolute;
          bottom: -18px;
          right: -18px;
          background: var(--blue-light);
          border-radius: 8px;
          padding: 16px 20px;
          text-align: center;
          box-shadow: 0 8px 30px rgba(21, 101, 192, .4)
        }

        .ceo-badge .n {
          font-family: 'Raleway', sans-serif;
          font-size: 2.2rem;
          font-weight: 900;
          line-height: 1
        }

        .ceo-badge .l {
          font-size: .62rem;
          font-weight: 700;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .8);
          margin-top: 3px
        }

        .ceo-content h2 {
          font-size: clamp(1.6rem, 3vw, 2.3rem);
          font-weight: 800;
          margin-bottom: .3rem
        }

        .ceo-name-tag {
          color: var(--accent);
          font-size: 1rem;
          font-weight: 600;
          margin-bottom: 1rem
        }

        .ceo-content p {
          color: var(--muted);
          line-height: 1.8;
          margin-bottom: .9rem;
          font-size: .95rem
        }

        .skills-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: .8rem;
          margin-top: 1.5rem
        }

        .skill-item {
          background: var(--navy-2);
          border: 1px solid var(--border);
          border-radius: 6px;
          padding: .8rem 1rem
        }

        .skill-label {
          font-size: .72rem;
          font-weight: 700;
          color: var(--muted);
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: .5rem
        }

        .skill-bar {
          height: 4px;
          background: rgba(255, 255, 255, .08);
          border-radius: 2px;
          overflow: hidden
        }

        .skill-fill {
          height: 100%;
          border-radius: 2px;
          background: linear-gradient(90deg, var(--accent), var(--blue-light))
        }

        /* services strip */
        .services-strip {
          background: var(--navy-3)
        }

        .srv-list {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 1.5rem
        }

        .srv-item {
          background: var(--navy-2);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 1.8rem;
          transition: transform .25s, border-color .25s
        }

        .srv-item:hover {
          transform: translateY(-4px);
          border-color: var(--border-hover)
        }

        .srv-ico {
          font-size: 2rem;
          margin-bottom: .8rem
        }

        .srv-item h4 {
          font-size: .95rem;
          font-weight: 700;
          margin-bottom: .5rem
        }

        .srv-item p {
          font-size: .84rem;
          color: var(--muted);
          line-height: 1.7
        }

        .srv-item ul {
          margin-top: .7rem;
          display: flex;
          flex-direction: column;
          gap: 5px
        }

        .srv-item ul li {
          font-size: .82rem;
          color: var(--muted);
          display: flex;
          align-items: flex-start;
          gap: 6px
        }

        .srv-item ul li::before {
          content: '—';
          color: var(--blue-light);
          font-size: .7rem;
          flex-shrink: 0;
          margin-top: 2px
        }

        @media(max-width:960px) {
          .ceo-grid {
            grid-template-columns: 1fr;
            gap: 3rem
          }

          .ceo-img-wrap img {
            height: 380px
          }

          .ceo-badge {
            right: 10px;
            bottom: -12px
          }

          .srv-list {
            grid-template-columns: 1fr 1fr
          }
        }

        @media(max-width:600px) {
          .team-grid {
            grid-template-columns: 1fr 1fr
          }

          .skills-grid {
            grid-template-columns: 1fr
          }

          .srv-list {
            grid-template-columns: 1fr
          }
        }

        @media(max-width:420px) {
          .team-grid {
            grid-template-columns: 1fr
          }
        }


        /* --- WHY CHOOSE US PAGE STYLES FROM JAL --- */

        /* reasons */
        .reasons {
          background: var(--navy-2)
        }

        .reasons-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem
        }

        .reason-card {
          background: var(--navy-3);
          border: 1px solid var(--border);
          border-radius: 10px;
          padding: 2.2rem;
          display: flex;
          gap: 1.5rem;
          align-items: flex-start;
          transition: transform .25s, border-color .25s
        }

        .reason-card:hover {
          transform: translateY(-4px);
          border-color: var(--border-hover)
        }

        .reason-ico {
          width: 56px;
          height: 56px;
          background: rgba(0, 176, 255, .1);
          border: 1px solid rgba(0, 176, 255, .2);
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.6rem;
          flex-shrink: 0
        }

        .reason-text h3 {
          font-size: 1rem;
          font-weight: 700;
          margin-bottom: .5rem;
          line-height: 1.3
        }

        .reason-text p {
          font-size: .86rem;
          color: var(--muted);
          line-height: 1.75
        }

        /* stats banner */
        .stats-banner {
          background: linear-gradient(135deg, var(--navy-3) 0%, var(--navy-2) 100%);
          border-top: 1px solid var(--border);
          border-bottom: 1px solid var(--border)
        }

        .stats-row {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 2rem;
          text-align: center
        }

        .stat-box {
          padding: 2.5rem 1rem
        }

        .stat-box .n {
          font-family: 'Raleway', sans-serif;
          font-size: 3rem;
          font-weight: 900;
          color: var(--accent);
          line-height: 1;
          margin-bottom: .4rem
        }

        .stat-box .l {
          font-size: .78rem;
          font-weight: 700;
          color: var(--muted);
          text-transform: uppercase;
          letter-spacing: 1.5px
        }

        /* process steps */
        .process {
          background: var(--navy)
        }

        .p-steps {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem
        }

        .p-step {
          background: var(--navy-2);
          border: 1px solid var(--border);
          border-radius: 10px;
          padding: 2rem;
          position: relative;
          overflow: hidden;
          transition: transform .25s, border-color .25s
        }

        .p-step:hover {
          transform: translateY(-4px);
          border-color: var(--border-hover)
        }

        .p-step-n {
          position: absolute;
          top: 1.2rem;
          right: 1.2rem;
          font-family: 'Raleway', sans-serif;
          font-size: 3.5rem;
          font-weight: 900;
          color: rgba(255, 255, 255, .04);
          line-height: 1
        }

        .p-step-ico {
          width: 52px;
          height: 52px;
          background: rgba(21, 101, 192, .15);
          border: 1px solid rgba(21, 101, 192, .3);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.4rem;
          margin-bottom: 1.2rem
        }

        .p-step h3 {
          font-size: 1rem;
          font-weight: 700;
          margin-bottom: .5rem;
          line-height: 1.3
        }

        .p-step p {
          font-size: .86rem;
          color: var(--muted);
          line-height: 1.75
        }

        /* sectors */
        .sectors {
          background: var(--navy-2)
        }

        .sector-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 1.2rem
        }

        .sector-item {
          background: var(--navy-3);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 1.6rem;
          text-align: center;
          transition: transform .25s, border-color .25s
        }

        .sector-item:hover {
          transform: translateY(-4px);
          border-color: var(--border-hover)
        }

        .sector-ico {
          font-size: 2.2rem;
          margin-bottom: .8rem
        }

        .sector-item h4 {
          font-size: .9rem;
          font-weight: 700;
          color: var(--white)
        }

        .sector-item p {
          font-size: .8rem;
          color: var(--muted);
          margin-top: .3rem
        }

        /* ceo quote */
        .ceo-quote {
          background: var(--navy-3)
        }

        .quote-inner {
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 3rem;
          align-items: center;
          max-width: 900px;
          margin: 0 auto
        }

        .quote-img {
          width: 130px;
          height: 130px;
          border-radius: 50%;
          object-fit: cover;
          object-position: top;
          border: 3px solid var(--blue-light);
          flex-shrink: 0
        }

        .quote-text blockquote {
          font-size: 1.1rem;
          font-style: italic;
          color: var(--black);
          line-height: 1.75;
          margin-bottom: 1rem
        }

        .quote-text cite {
          font-size: .82rem;
          font-weight: 700;
          color: var(--accent);
          font-style: normal;
          letter-spacing: .5px
        }

        @media(max-width:960px) {
          .reasons-grid {
            grid-template-columns: 1fr
          }

          .stats-row {
            grid-template-columns: 1fr 1fr;
            gap: 0
          }

          .p-steps {
            grid-template-columns: 1fr 1fr
          }

          .quote-inner {
            grid-template-columns: 1fr;
            text-align: center
          }

          .quote-img {
            margin: 0 auto
          }
        }

        @media(max-width:600px) {
          .p-steps {
            grid-template-columns: 1fr
          }

          .stats-row {
            grid-template-columns: 1fr 1fr
          }
        }


        /* --- CAREERS PAGE STYLES FROM JAL --- */

        /* categories */
        .cat-section {
          background: var(--navy-2)
        }

        .cat-scroll {
          display: flex;
          flex-wrap: wrap;
          gap: .8rem;
          justify-content: center
        }

        .cat-chip {
          background: rgba(21, 101, 192, .12);
          border: 1px solid rgba(21, 101, 192, .25);
          color: var(--muted);
          font-family: 'Raleway', sans-serif;
          font-weight: 700;
          font-size: .78rem;
          letter-spacing: .8px;
          text-transform: uppercase;
          padding: 10px 20px;
          border-radius: 40px;
          transition: all .2s;
          cursor: pointer
        }

        .cat-chip:hover,
        .cat-chip.active {
          background: var(--blue-light);
          border-color: var(--blue-light);
          color: var(--white)
        }

        /* jobs table */
        .jobs-section {
          background: var(--navy)
        }

        .jobs-header {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
          gap: 1rem;
          padding: .8rem 1.5rem;
          background: var(--blue-light);
          border-radius: 6px 6px 0 0;
          margin-bottom: 0
        }

        .jobs-header span {
          font-size: .72rem;
          font-weight: 700;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: var(--white)
        }

        .job-row {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
          gap: 1rem;
          align-items: center;
          padding: 1.1rem 1.5rem;
          background: var(--navy-2);
          border: 1px solid var(--border);
          border-top: none;
          transition: background .2s
        }

        .job-row:last-child {
          border-radius: 0 0 6px 6px
        }

        .job-row:hover {
          background: var(--navy-3)
        }

        .job-title {
          font-family: 'Raleway', sans-serif;
          font-weight: 700;
          font-size: .95rem;
          color: var(--white)
        }

        .job-detail {
          font-size: .85rem;
          color: var(--muted)
        }

        .apply-btn {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          background: var(--blue-light);
          color: var(--white);
          padding: 8px 18px;
          border-radius: 6px;
          border: 2px solid var(--blue-light);
          font-family: 'Raleway', sans-serif;
          font-weight: 700;
          font-size: .78rem;
          letter-spacing: .5px;
          transition: all .2s ease;
          cursor: pointer
        }

        .apply-btn:hover {
          background: transparent;
          color: var(--blue-light);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 82, 204, 0.25);
        }

        .apply-btn:focus-visible {
          outline: 3px solid rgba(0, 82, 204, 0.4);
          outline-offset: 3px;
        }

        /* cards version for mobile */
        .jobs-cards {
          display: none
        }

        .job-card {
          background: var(--navy-2);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 1.5rem;
          margin-bottom: 1rem;
          transition: border-color .2s
        }

        .job-card:hover {
          border-color: var(--border-hover)
        }

        .job-card-top {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 1rem;
          margin-bottom: 1rem
        }

        .job-card-info {
          display: flex;
          flex-wrap: wrap;
          gap: .5rem;
          margin-bottom: 1rem
        }

        .badge {
          background: rgba(21, 101, 192, .12);
          border: 1px solid rgba(21, 101, 192, .2);
          color: var(--muted);
          font-size: .72rem;
          font-weight: 600;
          padding: 4px 10px;
          border-radius: 20px
        }

        /* news */
        .news-section {
          background: var(--navy-2)
        }

        .news-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 1.8rem
        }

        .news-card {
          background: var(--navy-3);
          border: 1px solid var(--border);
          border-radius: 8px;
          overflow: hidden;
          transition: transform .25s, border-color .25s
        }

        .news-card:hover {
          transform: translateY(-5px);
          border-color: var(--border-hover)
        }

        .news-card img {
          width: 100%;
          height: 200px;
          object-fit: cover
        }

        .news-body {
          padding: 1.4rem
        }

        .news-tag {
          display: inline-block;
          background: var(--blue-light);
          color: var(--white);
          font-size: .66rem;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          padding: 3px 10px;
          border-radius: 20px;
          margin-bottom: .7rem
        }

        .news-meta {
          font-size: .75rem;
          color: var(--muted);
          margin-bottom: .5rem
        }

        .news-body h3 {
          font-size: .97rem;
          font-weight: 700;
          color: var(--white);
          line-height: 1.4;
          margin-bottom: .6rem
        }

        .news-body p {
          font-size: .84rem;
          color: var(--muted);
          line-height: 1.65
        }

        .read-more {
          color: var(--accent);
          font-family: 'Raleway', sans-serif;
          font-weight: 700;
          font-size: .8rem;
          border-bottom: 1px solid transparent;
          padding-bottom: 1px;
          transition: border-color .2s;
          display: inline-block;
          margin-top: .8rem
        }

        .read-more:hover {
          border-color: var(--accent)
        }

        @media(max-width:800px) {

          .jobs-header,
          .job-row {
            display: none
          }

          .jobs-cards {
            display: block
          }
        }

        @media(max-width:600px) {
          .cat-scroll {
            gap: .5rem
          }

          .cat-chip {
            font-size: .72rem;
            padding: 8px 14px
          }
        }


        /* --- CONTACT PAGE STYLES FROM JAL --- */

        /* contact info cards */
        .info-cards {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1.5rem;
          margin-bottom: 3.5rem
        }

        .info-card {
          background: var(--navy-3);
          border: 1px solid var(--border);
          border-radius: 10px;
          padding: 2rem;
          text-align: center;
          transition: transform .25s, border-color .25s
        }

        .info-card:hover {
          transform: translateY(-4px);
          border-color: var(--border-hover)
        }

        .info-ico {
          width: 60px;
          height: 60px;
          background: rgba(21, 101, 192, .15);
          border: 1px solid rgba(21, 101, 192, .3);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.6rem;
          margin: 0 auto 1rem;
        }

        .info-card h3 {
          font-size: .78rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: var(--muted);
          margin-bottom: .6rem
        }

        .info-card p,
        .info-card a {
          font-size: .97rem;
          font-weight: 600;
          color: var(--sec-text);
          line-height: 1.5
        }

        .info-card a {
          transition: color .2s
        }

        .info-card a:hover {
          color: var(--accent)
        }

        /* map + form layout */
        .contact-layout {
          background: var(--navy)
        }

        .contact-layout-inner {
          display: grid;
          grid-template-columns: 1fr 1.3fr;
          gap: 3rem;
          align-items: start
        }

        .map-wrap {
          border-radius: 10px;
          overflow: hidden;
          border: 1px solid var(--border)
        }

        .map-wrap iframe {
          width: 100%;
          height: 380px;
          display: block;
          filter: grayscale(40%) invert(90%) hue-rotate(175deg) brightness(.85)
        }

        .map-label {
          background: var(--navy-2);
          padding: 1.2rem 1.5rem;
          display: flex;
          align-items: center;
          gap: 12px
        }

        .map-label-ico {
          width: 36px;
          height: 36px;
          background: rgba(21, 101, 192, .15);
          border: 1px solid rgba(21, 101, 192, .3);
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: .9rem;
          flex-shrink: 0
        }

        .map-label p:first-child {
          font-size: .72rem;
          color: var(--muted);
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: 600
        }

        .map-label p:last-child {
          font-size: .9rem;
          color: var(--white);
          font-weight: 600;
          margin-top: 2px
        }

        .contact-form-box {
          background: var(--navy-2);
          border: 1px solid var(--border);
          border-radius: 10px;
          padding: 2.5rem
        }

        .contact-form-box h3 {
          font-size: 1.2rem;
          font-weight: 700;
          margin-bottom: .4rem
        }

        .contact-form-box .sub {
          font-size: .87rem;
          color: var(--muted);
          margin-bottom: 1.8rem;
          line-height: 1.6
        }

        /* FAQ */
        .faq-section {
          background: var(--navy-2)
        }

        .faq-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1.2rem
        }

        .faq-item {
          background: var(--navy-3);
          border: 1px solid var(--border);
          border-radius: 8px;
          overflow: hidden
        }

        .faq-q {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.2rem 1.4rem;
          cursor: pointer;
          transition: background .2s;
          gap: 1rem
        }

        .faq-q:hover {
          background: rgba(255, 255, 255, .02)
        }

        .faq-q span {
          font-family: 'Raleway', sans-serif;
          font-weight: 700;
          font-size: .92rem;
          line-height: 1.35;
          flex: 1
        }

        .faq-toggle {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: rgba(21, 101, 192, .2);
          border: 1px solid rgba(21, 101, 192, .3);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: .8rem;
          flex-shrink: 0;
          transition: all .2s;
          color: var(--accent)
        }

        .faq-item.open .faq-toggle {
          background: var(--blue-light);
          border-color: var(--blue-light);
          color: var(--white);
          transform: rotate(45deg)
        }

        .faq-a {
          max-height: 0;
          overflow: hidden;
          transition: max-height .3s ease, padding .3s ease
        }

        .faq-a p {
          padding: 0 1.4rem;
          font-size: .86rem;
          color: var(--muted);
          line-height: 1.75
        }

        .faq-item.open .faq-a {
          max-height: 200px
        }

        .faq-item.open .faq-a p {
          padding: 0 1.4rem 1.4rem
        }

        /* status banner (injected by send-email.js) – keep legacy .success-bar too */
        .success-bar {
          display: none;
          background: rgba(0, 176, 255, .1);
          border: 1px solid rgba(0, 176, 255, .3);
          border-radius: 6px;
          padding: 1rem 1.4rem;
          color: var(--accent);
          font-weight: 600;
          font-size: .9rem;
          margin-bottom: 1.2rem;
          align-items: center;
          gap: .7rem
        }

        .success-bar.show {
          display: flex
        }

        /* Spinner inside submit button */
        .btn-submit.loading::after {
          content: '';
          display: inline-block;
          width: 14px;
          height: 14px;
          border: 2px solid rgba(255, 255, 255, .4);
          border-top-color: #fff;
          border-radius: 50%;
          animation: spin .7s linear infinite;
          margin-left: 10px;
          vertical-align: middle
        }

        @keyframes spin {
          to {
            transform: rotate(360deg)
          }
        }

        @media(max-width:960px) {
          .info-cards {
            grid-template-columns: 1fr
          }

          .contact-layout-inner {
            grid-template-columns: 1fr;
            gap: 2.5rem
          }

          .faq-grid {
            grid-template-columns: 1fr
          }
        }

        @media(max-width:600px) {
          .contact-form-box {
            padding: 1.5rem;
            border-radius: 8px;
          }

          .contact-form-box h3 {
            font-size: 1rem;
            margin-bottom: .3rem;
          }

          .contact-form-box .sub {
            font-size: .8rem;
            margin-bottom: 1.2rem;
            line-height: 1.5;
          }

          .map-wrap iframe {
            height: 260px
          }
        }

        /* --- UTILITY STYLES (MIGRATED) --- */
        .section-inner {
          max-width: 1200px;
          margin: 0 auto;
          width: 100%
        }

        .eyebrow {
          font-family: 'Raleway', sans-serif;
          font-size: .72rem;
          font-weight: 700;
          letter-spacing: 3px;
          text-transform: uppercase;
          color: var(--blue-light);
          margin-bottom: .5rem;
          display: block;
        }

        .divider {
          width: 60px;
          height: 3px;
          border-radius: 2px;
          background: linear-gradient(90deg, var(--blue-light), transparent);
          margin-bottom: 1.8rem;
          margin-top: .6rem;
        }

        .dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--accent);
          display: inline-block;
          animation: pulse 1.8s ease-in-out infinite;
        }

        @keyframes pulse {

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

          50% {
            opacity: .5;
            transform: scale(1.4)
          }
        }

        .reveal {
          opacity: 1;
          transform: translateY(30px);
          transition: opacity .6s ease, transform .6s ease
        }

        .reveal.visible {
          opacity: 1;
          transform: translateY(0)
        }


        /* ══ LIGHT SECTIONS (MIGRATED FROM JAL) ════════════════════════════════ */
        /* All body sections use white bg */
        section {
          background: var(--sec-bg);
          padding: 3rem 0;
        }

        /* Override specific named dark wrappers to white */
        .about-strip,
        .about-main,
        .mission,
        .why,
        .why-wrap,
        .contrib,
        .contrib-wrap,
        .services-wrap,
        .services-main,
        .contact-strip,
        .contact-quick,
        .contact-layout,
        .jobs-section,
        .cat-section,
        .news-section,
        .faq-section,
        .team-section,
        .services-strip,
        .ceo-feature,
        .reasons,
        .process,
        .stats-banner,
        .sectors,
        .ceo-quote,
        .timeline,
        .portfolio-section,
        [style*="background:var(--navy)"],
        [style*="background:var(--navy-2)"],
        [style*="background:var(--navy-3)"] {
          background: var(--sec-bg) !important
        }

        .about-strip,
        .about-main,
        .mission,
        .why-wrap,
        .why,
        .services-wrap,
        .contact-quick,
        .cat-section,
        .news-section,
        .team-section,
        .reasons,
        .sectors,
        .ceo-quote,
        .timeline,
        .contact-layout,
        .portfolio-section {
          background: var(--sec-bg-2) !important
        }

        .contrib,
        .contrib-wrap,
        .services-strip,
        .process,
        .faq-section,
        .jobs-section,
        .stats-banner {
          background: var(--sec-bg-3) !important
        }

        /* Cards in light context */
        section .card,
        section .s-card,
        section .why-card,
        section .m-card,
        section .reason-card,
        section .p-step,
        section .srv-item,
        section .info-card,
        section .news-card,
        section .job-card,
        section .sector-item,
        section .team-card,
        section .tl-content {
          background: var(--sec-card) !important;
          border-color: var(--sec-border) !important;
          box-shadow: 0 2px 16px rgba(21, 101, 192, .07) !important
        }

        section .card:hover,
        section .s-card:hover,
        section .why-card:hover,
        section .m-card:hover,
        section .reason-card:hover,
        section .p-step:hover,
        section .srv-item:hover,
        section .info-card:hover,
        section .news-card:hover,
        section .job-card:hover,
        section .sector-item:hover,
        section .team-card:hover {
          border-color: var(--sec-border-hover) !important;
          box-shadow: 0 12px 36px rgba(21, 101, 192, .14) !important
        }

        /* Typography in light sections */
        section h2,
        section h3,
        section h4,
        section .section-title,
        section .tl-content h4,
        section .job-title,
        section .team-body h3,
        section .ceo-content h2 {
          color: var(--sec-text) !important
        }

        section p,
        section li,
        section .about-content p,
        section .why-card p,
        section .m-card p,
        section .reason-text p,
        section .p-step p,
        section .srv-item p,
        section .news-body p,
        section .team-body p,
        section .section-desc,
        section .contact-info p {
          color: var(--sec-muted) !important
        }

        section .eyebrow {
          color: var(--blue) !important
        }

        section .section-title span {
          color: var(--blue-light) !important
        }

        section .team-role {
          color: var(--blue-light) !important
        }

        section .tl-year {
          color: var(--blue-light) !important;
          background: rgba(21, 101, 192, .1) !important;
          border-color: rgba(21, 101, 192, .2) !important
        }

        section .check-list li,
        section .contrib-list li {
          color: var(--sec-muted) !important
        }

        section .check-list li::before {
          color: var(--blue-light) !important
        }

        section .chk {
          color: var(--blue-light) !important;
          background: rgba(21, 101, 192, .08) !important;
          border-color: rgba(21, 101, 192, .2) !important
        }

        /* Icon boxes in light sections */
        section .why-ico,
        section .s-ico,
        section .c-ico,
        section .info-ico,
        section .p-step-ico,
        section .reason-ico,
        section .sector-ico,
        section .srv-ico {
          background: rgba(21, 101, 192, .08) !important;
          border-color: rgba(21, 101, 192, .18) !important
        }

        /* Form in light sections */
        section .contact-form,
        section .contact-form-box {
          background: var(--sec-bg-2) !important;
          border-color: var(--sec-border) !important
        }

        section .form-group input,
        section .form-group select,
        section .form-group textarea {
          background: #f0f6ff !important;
          border-color: rgba(21, 101, 192, .18) !important;
          color: var(--sec-text) !important
        }

        section .form-group input::placeholder,
        section .form-group textarea::placeholder {
          color: #aabbd0 !important
        }

        section .form-group input:focus,
        section .form-group select:focus,
        section .form-group textarea:focus {
          border-color: var(--blue-light) !important;
          background: #fff !important
        }

        section .form-group label {
          color: var(--sec-muted) !important
        }

        section .form-group select option {
          background: #fff;
          color: var(--sec-text)
        }

        /* Floating WhatsApp Button */
        .float-wa {
          position: fixed;
          bottom: 25px;
          right: 25px;
          width: 60px;
          height: 60px;
          background: #25d366;
          color: white !important;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
          z-index: 9999;
          text-decoration: none;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .float-wa:hover {
          transform: scale(1.1) translateY(-5px);
          box-shadow: 0 12px 24px rgba(37, 211, 102, 0.5);
          color: white !important;
        }

        @media (max-width: 768px) {
          .float-wa {
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 26px;
          }
        }

        /* Custom Cursor Styles */
        @media (pointer: fine) {
          body {
            cursor: none;
          }

          .cursor-dot,
          .cursor-outline {
            pointer-events: none;
            position: fixed;
            top: 0;
            left: 0;
            border-radius: 50%;
            z-index: 10000;
            transform: translate(-50%, -50%);
            display: none;
          }

          .cursor-dot {
            width: 8px;
            height: 8px;
            background-color: #0052cc;
          }

          .cursor-outline {
            width: 30px;
            height: 30px;
            border: 2px solid #0052cc;
            transition: width 0.3s, height 0.3s, opacity 0.3s, background-color 0.3s;
          }

          .cursor-outline.hover {
            width: 50px;
            height: 50px;
            background-color: rgba(0, 82, 204, 0.1);
            border-color: #0052cc;
          }
        }