:root {
      --navy:     #1a2e6c;
      --blue:     #2a52be;
      --green:    #3a8c4e;
      --green-lt: #eaf6ed;
      --gold:     #f5a623;
      --white:    #ffffff;
      --light:    #f4f6fb;
      --border:   #e2e8f0;
      --text:     #1a1a2e;
      --muted:    #6b7280;
    }

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

    body {
      font-family: 'DM Sans', sans-serif;
      color: var(--text);
      background: var(--white);
      scroll-behavior: smooth;
    }

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

    /* ===== TOP BAR ===== */
    .topbar {
      background: var(--navy);
      color: #cdd5f0;
      font-size: 13px;
      padding: 8px 0;
    }
    .topbar a { color: #cdd5f0; text-decoration: none; }
    .topbar a:hover { color: var(--gold); }
    .topbar .social-icons a {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      display: inline-flex; align-items: center; justify-content: center;
      transition: background 0.2s;
    }
    .topbar .social-icons a:hover { background: var(--blue); }

    /* ===== NAVBAR ===== */
    .navbar {
      background: var(--white) !important;
      box-shadow: 0 2px 16px rgba(26,46,108,0.08);
      padding: 12px 0;
      position: sticky; top: 0; z-index: 1000;
      transition: box-shadow 0.3s;
    }
    .navbar-brand {
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      font-size: 22px;
      color: var(--navy) !important;
    }
    .navbar-brand .star-icon {
      width: 38px; height: 38px;
      background: var(--gold);
      border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-right: 8px;
      font-size: 18px;
    }
    .nav-link {
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      color: var(--text) !important;
      padding: 6px 14px !important;
      position: relative;
      font-size: 15px;
    }
    .nav-link::after {
      content: '';
      position: absolute; bottom: 0; left: 14px;
      width: 0; height: 2px;
      background: var(--green);
      transition: width 0.3s;
    }
    .nav-link:hover::after,
    .nav-link.active::after { width: calc(100% - 28px); }
    .nav-link.active { color: var(--navy) !important; }
    .btn-apply {
      background: var(--green);
      color: var(--white) !important;
      border-radius: 8px;
      padding: 8px 22px !important;
      font-weight: 600;
      transition: background 0.2s, transform 0.2s;
    }
    .btn-apply:hover { background: #2d7040; transform: translateY(-1px); }

    

    /* ===== SECTION COMMON ===== */
    section { padding: 80px 0; }
    .section-title {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 10px;
    }
    .section-underline {
      width: 52px; height: 4px;
      background: var(--green);
      border-radius: 4px;
      margin-bottom: 20px;
    }

    /* ===== ABOUT ===== */
    .about-section { background: var(--white); }
    .about-img {
      border-radius: 18px;
      box-shadow: 0 12px 40px rgba(26,46,108,0.12);
      width: 100%;
      object-fit: cover;
      height: 360px;
    }
    .btn-green {
      background: var(--green);
      color: var(--white);
      border: none;
      padding: 11px 28px;
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.25s;
      text-decoration: none;
      display: inline-block;
    }
    .btn-green:hover { background: #2d7040; color: var(--white); transform: translateY(-2px); }

   
    /* ===== FOOTER ===== */
    footer {
      background: var(--navy);
      color: rgba(255,255,255,0.75);
      padding: 24px 0;
      text-align: center;
      font-size: 14px;
    }
    footer a { color: var(--gold); text-decoration: none; }

    /* ===== SCROLL TO TOP ===== */
    #scrollTop {
      position: fixed; bottom: 28px; right: 28px;
      width: 44px; height: 44px;
      background: var(--green);
      color: var(--white);
      border: none;
      border-radius: 50%;
      font-size: 18px;
      display: none;
      align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(58,140,78,0.35);
      z-index: 999;
      transition: background 0.2s, transform 0.2s;
    }
    #scrollTop:hover { background: #2d7040; transform: translateY(-3px); }
    #scrollTop.show { display: flex; }

    /* ===== ANIMATIONS ===== */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }