:root {
        --primary-blue: #1844d8;
        --deep-blue: #1d2d78;
        --violet: #7d47ee;
        --magenta: #d56ce6;
        --soft-bg: #f7f8ff;
        --text: #1d275f;
        --muted: #5e638a;
        --card-border: #dde3fb;
        --red-start: #ff6357;
        --red-end: #eb4343;
        --blue-start: #2c60f0;
        --blue-end: #2244c9;
        --purple-start: #7054ef;
        --purple-end: #5b2abf;
        --teal-start: #16b8ad;
        --teal-end: #0a8e93;
        --green-start: #27c57d;
        --green-end: #1aa2a6;
        --shadow-lg: 0 16px 40px rgba(71, 78, 155, 0.22);
        --shadow-md: 0 10px 24px rgba(66, 76, 151, 0.14);
        --shadow-sm: 0 8px 18px rgba(79, 87, 154, 0.12);
        --radius-xl: 22px;
        --radius-lg: 18px;
        --radius-md: 14px;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: "Nunito", sans-serif;
        color: var(--text);
        background:
          radial-gradient(
            circle at top left,
            rgba(68, 110, 255, 0.08),
            transparent 28%
          ),
          radial-gradient(
            circle at top right,
            rgba(208, 86, 220, 0.08),
            transparent 22%
          ),
          #ffffff;
        overflow-x: hidden;
      }

      img {
        max-width: 100%;
        display: block;
      }

      .section-space {
        padding: 50px 0;
      }

      .section-title {
        font-size: 3.15rem;
        line-height: 1.12;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0 4px 20px rgba(11, 17, 50, 0.2);
        margin-bottom: 20px;
        letter-spacing: -0.02em;
      }

      .main-title {
        font-size: 2.2rem;
        line-height: 1.15;
        font-weight: 600;
        letter-spacing: -0.03em;
        margin-bottom: 35px;
        color: #212d67;
      }

      .hero {
        position: relative;
        overflow: hidden;
        padding: 34px 0 0px;
        background:
          linear-gradient(
            120deg,
            rgba(23, 71, 217, 0.98) 0%,
            rgba(121, 72, 233, 0.95) 47%,
            rgba(219, 108, 229, 0.95) 100%
          ),
          url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80")
            center/cover no-repeat;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            90deg,
            rgba(10, 34, 128, 0.2),
            rgba(255, 255, 255, 0.04)
          ),
          repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 0 18px,
            transparent 18px 56px
          );
        opacity: 0.16;
        pointer-events: none;
      }

      .hero::after {
        content: "";
        position: absolute;
        left: -6%;
        bottom: -32%;
        width: 58%;
        height: 72%;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.4),
          transparent 62%
        );
        filter: blur(18px);
        opacity: 0.5;
        pointer-events: none;
      }

      .hero-content {
        position: relative;
        z-index: 2;
        min-height: 520px;
        display: flex;
        align-items: center;
      }

      .hero-copy {
        padding: 8px 0 0;
        animation: fadeUp 0.9s ease-out both;
      }

      .hero-copy p {
        font-size: 1.28rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.95);
        max-width: 560px;
        margin-bottom: 28px;
      }

      .btn-main,
      .btn-secondary-lite,
      .btn-feature,
      .btn-success-cta {
        border: 0;
        border-radius: 10px;
        padding: 14px 28px;
        font-size: 1.18rem;
        font-weight: 600;
        box-shadow: var(--shadow-sm);
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          opacity 0.2s ease;
      }

      .btn-main:hover,
      .btn-secondary-lite:hover,
      .btn-feature:hover,
      .btn-success-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(41, 47, 103, 0.18);
      }

      .btn-main {
        color: #ffffff;
        background: linear-gradient(180deg, var(--red-start), var(--red-end));
        min-width: 232px;
      }

      .btn-secondary-lite {
        color: var(--deep-blue);
        background: linear-gradient(180deg, #ffffff, #edf1ff);
        min-width: 192px;
      }

      .btn-secondary-lite i {
        color: #49c87e;
        margin-right: 8px;
      }

      .hero-visual {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        min-height: 520px;
      }

      .student-wrap {
        position: absolute;
        left: -37%;
        bottom: -15px;
        width: 70%;
        z-index: 1;
        animation: floatStudent 4.8s ease-in-out infinite;
      }

      .student-wrap img {
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 18px 24px rgba(28, 18, 85, 0.14));
      }
      a.btn.btn-secondary-lite:hover {
        color: #ffff;
      }
      .form-card {
        position: relative;
        margin-left: auto;
        width: 360px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(222, 227, 251, 0.95);
        border-radius: 20px;
        box-shadow: var(--shadow-lg);
        padding: 20px 20px 16px;
        z-index: 999;
        top: -50px;
        animation: fadeUp 1s ease-out 0.18s both;
      }

      .form-card h3 {
        font-size: 1.4rem;
        text-align: center;
        font-weight: 700;
        margin-bottom: 16px;
        color: #293262;
      }

      .form-card .form-control,
      .form-card .form-select {
        min-height: 46px;
        border-radius: 8px;
        border-color: #d8ddf0;
        color: #5b6387;
        padding-left: 14px;
        font-size: 0.98rem;
        box-shadow: none;
      }

      .form-card .form-control::placeholder {
        color: #8e94b2;
      }

      .trained {
        text-align: center;
        padding: 14px 0 10px;
        border-top: 1px solid #e3e7f7;
        margin-top: 12px;
      }

      .trained .count {
        display: block;
        font-size: 1.18rem;
        font-weight: 900;
        color: #1f2b69;
        line-height: 1.2;
      }

      .trained .count span {
        font-weight: 700;
        color: #394271;
      }

      .trained .free {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #4c547d;
        font-size: 0.95rem;
        font-weight: 700;
        margin-top: 6px;
      }

      .trained .free i {
        color: #68d3a4;
      }

      .request-btn {
        width: 100%;
        border: 0;
        color: #ffffff;
        background: linear-gradient(180deg, var(--blue-start), var(--blue-end));
        border-radius: 8px;
        padding: 13px 18px;
        font-size: 1rem;
        font-weight: 800;
        box-shadow: 0 10px 22px rgba(39, 73, 197, 0.24);
      }

      .floating-ai-wrap {
        position: relative;
        margin-top: 0;
        z-index: 5;
        background: #f8f8f8;
        padding: 25px 0px 0px;
        position: relative;
        margin-bottom: 25px;
      }

      .floating-ai {
        width: fit-content;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 18px;
        background:
          linear-gradient(
            90deg,
            rgba(42, 189, 123, 0.98),
            rgba(25, 167, 157, 0.92)
          ),
          url("https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=800&q=80")
            center/cover no-repeat;
        color: #ffffff;
        border-radius: 999px;
        padding: 10px 22px 10px 30px;
        box-shadow: 0 16px 30px rgba(33, 164, 122, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.26);
        min-width: 320px;
        position: relative;
        top: 10px;
      }

      .floating-ai .label {
        font-size: 1.15rem;
        font-weight: 900;
        letter-spacing: 0.01em;
      }

      .floating-ai .icon-circle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: #18a192;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        box-shadow: 0 8px 18px rgba(31, 134, 112, 0.18);
      }

      .section-heading {
        text-align: center;
        font-weight: 600;
        font-size: 2.2rem;
        letter-spacing: -0.03em;
        color: #212d67;
        margin-bottom: 32px;
      }
      .btn:hover {
        color: #fff;
      }
      .feature-card,
      .service-card {
        background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
        border: 1px solid var(--card-border);
        border-radius: 18px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        height: 100%;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
      }

      .feature-card:hover,
      .service-card:hover,
      .nav-box:hover,
      .why-card:hover,
      .mini-service:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(66, 76, 151, 0.18);
        border-color: #cfd8fb;
      }

      .feature-top {
        padding: 18px 18px 18px;
        min-height: 90px;
      }

      .feature-icon-title {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .feature-icon {
        /* width: 48px; */
        height: 48px;
        /* border-radius: 50%; */
        overflow: hidden;
        flex: 0 0 auto;
        /* box-shadow: 0 8px 16px rgba(61, 88, 185, 0.16); */
      }

      .feature-icon.flag-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #eef3ff, #d8e4ff);
        font-size: 1.8rem;
      }

      .feature-card h4,
      .service-card h4 {
        font-size: 1.3rem;
        line-height: 1.15;
        font-weight: 700;
        color: #1f295d;
        margin:0;
      }

      .feature-body {
        padding: 18px 18px 20px;
        background: linear-gradient(
          180deg,
          rgba(240, 243, 255, 0.8),
          rgba(247, 248, 255, 0.98)
        );
        min-height: 262px;
        display: flex;
        flex-direction: column;
      }

      .feature-body p,
      .service-card p {
        color: #40486f;
        font-size: 0.93rem;
        line-height: 1.55;
        margin-bottom: 14px;
      }

      .checks {
        list-style: none;
        margin: 0 0 18px;
        padding: 0;
      }

      .checks li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        color: #2f3967;
        font-size: 0.92rem;
        line-height: 1.5;
        margin-bottom: 6px;
      }

      .checks i {
        color: #2abf70;
        margin-top: 4px;
        font-size: 0.78rem;
      }

      .btn-feature {
        margin-top: auto;
        width: 100%;
        color: #ffffff;
        font-size: 1rem;
        padding: 12px 18px;
        border-radius: 8px;
      }

      .feature-red {
        background: linear-gradient(90deg, #ff655e, #f34548);
      }
      .feature-blue {
        background: linear-gradient(90deg, #2b61ef, #5a43df);
      }
      .feature-purple {
        background: linear-gradient(90deg, #6a53e7, #6430be);
      }
      .feature-teal {
        background: linear-gradient(90deg, #2aa89e, #0b8e96);
      }

      .quick-nav-section,
      .services-nav-section,
      .why-choose {
        background: linear-gradient(
          180deg,
          rgb(244 246 255 / 95%),
          rgb(249 249 249 / 95%)
        );
      }

      .nav-box,
      .why-card,
      .mini-service {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #e0e4f4;
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
        padding: 18px 16px;
        height: 100%;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
      }

      .nav-box {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 90px;
      }

      .nav-box .nav-ico,
      .mini-service .nav-ico {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #edf2ff, #dfe7ff);
        color: #3157cc;
        font-size: 1.35rem;
        flex: 0 0 auto;
      }

      .nav-box h5,
      .mini-service h5,
      .why-card h5 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: #233067;
      }
      .why-card h5 {
        color: #6059f7;
      }
      .nav-box p,
      .why-card p {
        margin: 4px 0 0;
        font-size: 0.86rem;
        color: #5c6387;
        line-height: 1.45;
      }

      .why-card {
        padding: 0;
        overflow: hidden;
      }

      .why-head {
        padding: 14px 14px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid #edf0fb;
        min-height: 82px;
      }

      .why-head img {
          /* width: 54px; */
          height: 54px;
          /* border-radius: 50%; */
          object-fit: cover;
          /* box-shadow: 0 8px 18px rgba(69, 80, 162, 0.18); */
      }

      .why-body {
        padding: 14px 16px 18px;
      }

      .success-banner {
        position: relative;
        overflow: hidden;
        border-radius: 0;
        min-height: 250px;
        background:
          linear-gradient(
            90deg,
            rgba(28, 76, 214, 0.94) 0%,
            rgba(127, 74, 233, 0.72) 48%,
            rgba(244, 244, 255, 0.12) 100%
          ),
          url("../img/ng-collage.png") center/cover no-repeat;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
        background-position: 100% 58%;
        background-size: cover;
      }

      .success-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(255, 255, 255, 0.06)
        );
        pointer-events: none;
      }

      .success-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          110deg,
          transparent 22%,
          rgba(255, 255, 255, 0.18) 38%,
          transparent 54%
        );
        transform: translateX(-120%);
        animation: shimmer 5.5s linear infinite;
        pointer-events: none;
      }

      .success-content {
        position: relative;
        z-index: 2;
        padding: 5% 8%;
      }

      .success-actions {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
      }

      .success-title {
        color: #ffffff;
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 25px;
        letter-spacing: -0.02em;
        text-shadow: 0 4px 14px rgba(25, 24, 83, 0.22);
      }

      .btn-success-cta {
        min-width: 230px;
        padding: 10px;
      }

      .btn-success-cta.secondary {
        background: linear-gradient(180deg, #ffffff, #edf2ff);
        color: #21306a;
        min-width: 180px;
      }

      .btn-success-cta.secondary i {
        color: #4ecf82;
        margin-right: 8px;
      }

      .services-title {
        text-align: center;
        font-size: 2.2rem;
        font-weight: 600;
        letter-spacing: -0.03em;
        color: #1f2c67;
        margin-bottom: 40px;
      }

      .service-card {
        padding: 26px 20px 24px;
        text-align: center;
      }

      .service-card .service-icon {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background: linear-gradient(180deg, #8882ff, #dde7ff);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16px;
          box-shadow: 0 10px 20px rgba(72, 90, 182, 0.12);
          color: #3160d8;
          font-size: 2rem;
      }

      .service-card h4 {
        font-size: 1.25rem;
        margin-bottom: 12px;
      }

      .container-narrow {
        max-width: 1320px;
      }

      .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }

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

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(34px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes floatStudent {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      @keyframes shimmer {
        from {
          transform: translateX(-120%);
        }
        to {
          transform: translateX(120%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }

        .reveal {
          opacity: 1;
          transform: none;
        }
      }

      @media (max-width: 1399.98px) {
        .section-title {
          font-size: 2.8rem;
        }
        .section-heading {
          font-size: 2.45rem;
        }
        .main-title,
        .services-title {
          font-size: 2.35rem;
        }
        .student-wrap {
          width: 59%;
          left: -100px;
        }
      }

      @media (max-width: 1199.98px) {
        .hero {
          padding-bottom: 72px;
        }

        .hero-content,
        .hero-visual {
          min-height: unset;
        }

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

        .hero-copy p {
          font-size: 1.08rem;
        }

        .student-wrap {
          position: relative;
          left: auto;
          bottom: auto;
          width: 58%;
          margin: 0 auto 20px;
        }

        .hero-visual {
          flex-direction: column;
          align-items: center;
          gap: 18px;
        }

        .form-card {
          width: min(100%, 420px);
          margin-left: 0;
        }
      }

      @media (max-width: 991.98px) {
        .hero {
          text-align: center;
          padding: 26px 0 66px;
        }

        .hero-copy p {
          margin-left: auto;
          margin-right: auto;
        }

        .hero-buttons {
          justify-content: center;
        }

        .student-wrap {
          width: 66%;
        }

        .floating-ai {
          min-width: unset;
          width: calc(100% - 24px);
          justify-content: space-between;
          padding-left: 22px;
        }

        .section-heading,
        .main-title,
        .services-title {
          font-size: 2rem;
        }

        .success-title {
          font-size: 1.7rem;
        }
      }

      @media (max-width: 767.98px) {
        .section-title {
          font-size: 2rem;
        }

        .hero-content {
          min-height: auto;
        }

        .hero-visual {
          min-height: auto;
        }

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

        .hero-buttons {
          flex-direction: column;
          gap: 12px !important;
        }

        .btn-main,
        .btn-secondary-lite,
        .btn-success-cta {
          width: 100%;
          min-width: unset;
        }

        .student-wrap {
          display: none;
        }

        .floating-ai {
          gap: 12px;
          padding: 12px 16px 12px 18px;
        }

        .floating-ai .label {
          font-size: 1rem;
        }

        .floating-ai .icon-circle {
          width: 36px;
          height: 36px;
        }

        .section-space {
          padding: 28px 0;
        }

        .success-banner {
          min-height: 230px;
          background-position: 68% center;
        }

        .success-content {
          padding: 24px 18px 30px;
        }

        .success-title {
          font-size: 1.45rem;
          line-height: 1.2;
          margin-bottom: 18px;
          max-width: 280px;
        }

        .success-actions {
          flex-direction: column;
          align-items: stretch;
          gap: 12px;
        }
      }

      @media (max-width: 575.98px) {
        .hero {
          padding-bottom: 56px;
        }

        .hero-copy {
          padding-top: 0;
        }

        .section-title,
        .section-heading,
        .main-title,
        .services-title {
          font-size: 1.7rem;
        }

        .form-card {
          width: 100%;
          padding: 18px 14px 14px;
          border-radius: 16px;
          top: 0;
        }

        .student-wrap {
          display: none;
        }

        .floating-ai {
          width: 100%;
          min-width: 0;
        }

        .floating-ai .label {
          white-space: nowrap;
        }

        .success-banner {
          min-height: 250px;
          background-position: 72% center;
        }

        .success-content {
          padding: 24px 18px 30px;
        }

        .success-title {
          max-width: 260px;
          font-size: 1.3rem;
          margin-bottom: 16px;
        }

        .btn-success-cta {
          width: 100%;
          min-width: 0;
          padding: 12px 16px;
        }

        .feature-top,
        .feature-body,
        .service-card {
          padding-left: 16px;
          padding-right: 16px;
        }
      }