/* RESET / baseline */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #19315f;
    background: #fff;
    line-height: 1.45;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.6;
    color: #222;
    scroll-behavior: smooth;
}

/* Navbar 
header {
    background: white;
    padding: 5px 15px;
    position: relative;
    top: 0;
    z-index: 500;
    height: 55px;
}

.navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.navbar .logo {
    color: white;
    font-weight: bold;
}

.inter-adi {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.navbar .logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

.navbar ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 45px;
}

.navbar ul li a {
    color: black;
    font-weight: 100;
    text-decoration: none;
}


.hamburger {
    display: none;
  
    background: white;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 12px;
}


.hamburger .bar {
    display: block;
    width: 24px;
    height: 2.5px;
    margin: 5px 0;
    background: black;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}


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

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

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


@media (max-width: 768px) {
    header {
        padding: 8px 16px;
        
    }

    .navbar {
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .hamburger {
        display: block;
        z-index: 1100;
      
    }

    .nav-links {
        width: 100%;
        list-style: none;
        margin: 8px 0 0 0;
        padding: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height 300ms ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        background: transparent;
    }


    .nav-links.open {
        max-height: 480px;
     
    }

    .nav-links li {
        width: auto;
        margin: 10px 0;
    }

    .nav-links li a {
        display: inline-block;
        padding: 8px 12px;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
    }

  
    .navbar .logo img {
        max-height: 48px;
        width: auto;
        display: block;
    }

 
    .hero {
        padding-top: 60px;
        padding-left: 18px;
        padding-right: 18px;
        height: auto;
    }
}


@media (max-width: 380px) {
    .navbar .logo img {
        max-height: 45px;
    }

    .nav-links li a {
        font-size: 14px;
        padding: 7px 10px;
    }
}



html,
body {
    width: 100%;
    overflow-x: hidden;
}

.nav-links {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background-color: white;
        transition: max-height 0.3s ease;
    }

    .nav-links.open {
        max-height: 500px;
      
    }

} */

/* Navbar */
header {
    background: #fff;
    padding: 8px 18px;
    position: relative;
    /* keep it on top so hero sits under it */
    left: 0;
    right: 0;
    top: 0;
    z-index: 500;
    /* allow header to grow rather than force fixed height
       (important: menu can either expand header or menu overlays page) */
    min-height: 64px;
    display: flex;
    align-items: center;
}

.navbar {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.navbar .logo {
    color: white;
    font-weight: bold;
}

.inter-adi {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.navbar .logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

/* Desktop nav default */
.navbar ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 28px;
}

.navbar ul li a {
    color: #111;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 4px;
    line-height: 1;
    font-family: "Inter", sans-serif;
}

.nav-cta {
    border: 1px solid #1E40AF;
    border-radius: 10px;
    color: #1E40AF;
}

.nav-cta-one {
    font-weight: bold;
    color: #1E40AF;
}

/* ---------- HAMBURGER (mobile only) ---------- */
/* default: hide hamburger on desktop; show only on mobile */
.hamburger {
    display: none;
    /* changed: don't show on desktop by default */
    background: white;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 12px;
    z-index: 1100;
    /* ensure it's above the menu */
}

/* bars */
.hamburger .bar {
    display: block;
    width: 24px;
    height: 2.5px;
    margin: 5px 0;
    background: black;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* transform to "X" when open */
.hamburger.open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open .bar:nth-child(2) {
    opacity: 0;
    pointer-events: none;
}

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

/* ========== MOBILE NAV ========== */
/* Activate at mobile widths */
@media (max-width: 768px) {

    /* show hamburger button on mobile */
    .hamburger {
        display: block;
    }

    /* Layout tweaks for navbar */
    .navbar {
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Make the nav an overlay that drops down from the header.
       Using absolute positioning avoids header height clipping.
       The nav will be limited to the viewport height and will scroll if content is long. */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1040;
        /* above header content but below hamburger if needed */
        width: 100%;
        list-style: none;
        margin: 8px 0 0 0;
        padding: 0;
        overflow: hidden;
        /* visually collapsed when closed */
        max-height: 0;
        /* collapsed */
        display: flex;
        /* keep it rendered */
        flex-direction: column;
        align-items: center;
        gap: 6px;
        background-color: white;
        /* visible overlay */
        transition: max-height 320ms ease, padding 220ms ease;
        box-shadow: 0 8px 20px rgba(2, 8, 23, 0.08);
        border-radius: 8px;
        /* allow vertical scrolling for long menus when open */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* soft clip so we don't exceed viewport visually */
        max-width: 100%;
    }

    /* expanded state (JS toggles this class)
       Use calc(100vh - headerHeight) to occupy available viewport without covering the header */
    .nav-links.open {
        max-height: calc(100vh - 64px);
        /* full viewport minus header */
        padding: 12px 12px 18px 12px;
    }

    /* keep each item spaced comfortably */
    .nav-links li {
        width: auto;
        margin: 6px 0;
    }

    .nav-links li a {
        display: inline-block;
        padding: 8px 12px;
        font-size: 15px;
        color: #111;
        text-decoration: none;
        white-space: nowrap;
    }

    /* Make sure logo doesn't get too big on mobile */
    .navbar .logo img {
        max-height: 48px;
        width: auto;
        display: block;
    }

    /* adjust hero spacing to avoid overlap */
    .hero {
        padding-top: 60px;
        padding-left: 18px;
        padding-right: 18px;
        height: auto;
    }
}

/* extra tiny tweak */
@media (max-width: 380px) {
    .navbar .logo img {
        max-height: 45px;
    }

    .nav-links li a {
        font-size: 14px;
        padding: 7px 10px;
    }
}

/* Prevent horizontal scrollbars and white space on mobile */
html,
body {
    width: 100%;
    overflow-x: hidden;
}

/* Ensure desktop nav behaves correctly across all browsers */
.nav-links {
    display: flex;
    gap: 20px;
}

/* extra tiny tweak */
@media (max-width: 380px) {
    .navbar .logo img {
        max-height: 45px;
    }

    .nav-links li a {
        font-size: 14px;
        padding: 7px 10px;
    }
}


/* Prevent horizontal scrollbars and white space on mobile */
html,
body {
    width: 100%;
    overflow-x: hidden;
}

/* Ensure navbar behaves correctly across all browsers */
.nav-links {
    display: flex;
    gap: 20px;
}

/*@media (max-width: 768px) {
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background-color: white;
        transition: max-height 0.3s ease;
    }

    .nav-links.open {
        max-height: 500px;
    }

}*/


/* UTILITIES */
.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

/* HERO */
.hero {
    background: linear-gradient(90deg, #122b7a 0%, #2f7be7 60%, #5aa0ff 100%);
    color: white;
    padding: 72px 0 84px;
    position: relative;
    overflow: visible;
}

.hero-inner {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
    padding: 8px;
}

.hero-title {
    font-family: "Montserrat", "Inter", sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.4px;
    margin-bottom: 14px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

.hero-sub {
    font-size: 15px;
    opacity: 0.95;
    max-width: 820px;
    margin: 0 auto 20px;
    color: rgba(255, 255, 255, 0.92);
}

/* Buttons */
.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 20px 0 34px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 6px 18px rgba(9, 30, 66, 0.12);
}

.btn-yellow {
    background: #ffd12a;
    color: #0b2b4a;
    border: 2px solid rgba(0, 0, 0, 0.03);
}

.btn-blue {
    background: #2bb7ff;
    color: #073044;
}

.btn-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.35);
    padding: 11px 20px;
}

/* Stats translucent row */
.stats-row {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: stretch;
    margin: 28px auto 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    width: min(960px, 92%);
    box-shadow: 0 10px 30px rgba(11, 31, 74, 0.12);
}

.stat {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 6px 12px;
    min-width: 200px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffd12a;
    flex-shrink: 0;
}

.stat-body .stat-number {
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    opacity: 0.95;
}

/* CONTENT SECTIONS */
.content-section {
    background: #f7f9fb;
    padding: 48px 0;
}

/* two column transform/who */
.two-col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
    margin-top: 8px;
}

.left .section-title {
    font-family: "Montserrat", sans-serif;
    color: #12316a;
    font-size: 22px;
    margin-bottom: 12px;
}

.lead {
    color: #6b7b98;
    font-size: 14px;
    margin-bottom: 12px;
}

.bold {
    font-weight: 600;
    color: #122b4f;
    font-size: 13px;
}

/* Who box */
.who-box {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(16, 40, 88, 0.06);
    border: 1px solid #e8eef6;
}

.who-box h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: #12345d;
}

.who-list {
    list-style: none;
    display: grid;
    gap: 10px;
    color: #3b566f;
    font-size: 14px;
}

.who-list li::before {
    content: "✔";
    color: #57a1ff;
    margin-right: 8px;
    display: inline-block;
    width: 18px;
}

/* Achievements */
.achievements {
    margin-top: 44px;
    padding-bottom: 8px;
}

.section-title.center {
    text-align: center;
    margin-bottom: 6px;
    font-size: 26px;
}

.subtitle.center {
    text-align: center;
    color: #7b8aa7;
    margin-bottom: 26px;
}

.cards-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* Card styles */
.card {
    background: white;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(11, 31, 74, 0.06);
    width: 280px;
    text-align: left;
}

.achievement-card {
    text-align: center;
    padding: 22px;
    min-height: 240px;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(180deg, #7fd3ff, #73b9ff);
    color: white;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    margin: 6px auto 12px;
    font-size: 20px;
    box-shadow: 0 6px 14px rgba(66, 133, 244, 0.12);
}

.name {
    font-weight: 700;
    margin-top: 6px;
    color: #0f3870;
}

.position {
    color: #2f7be7;
    font-weight: 700;
    margin-bottom: 8px;
}

.quote {
    color: #6f7f98;
    font-size: 13px;
    margin-bottom: 10px;
    min-height: 64px;
}

.pub-link {
    color: #2f7be7;
    text-decoration: none;
    font-weight: 600;
}

/* PRICING SECTION */
.pricing-section {
    padding: 46px 0 84px;
    background: white;
}

.pricing-row {
    display: flex;
    gap: 22px;
    justify-content: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

.price-card {
    width: 360px;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(11, 31, 74, 0.06);
    border: 1px solid rgba(10, 28, 64, 0.03);
    position: relative;
}

.recommended .badge {
    position: absolute;
    right: 14px;
    top: 12px;
    background: #ffd34b;
    color: #0b2b4a;
    padding: 6px 10px;
    font-weight: 700;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(255, 209, 60, 0.12);
}

.price-title {
    font-weight: 700;
    color: #12315f;
    font-size: 18px;
    margin-bottom: 6px;
}

.date-range {
    color: #6f7f98;
    font-size: 13px;
    margin-bottom: 14px;
}

.price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 800;
    font-family: "Montserrat", sans-serif;
    font-size: 28px;
    color: #163a6a;
    margin-bottom: 8px;
}

.price .plus {
    font-weight: 600;
    font-size: 13px;
    margin-left: 8px;
    color: #6f7f98;
    font-family: Inter;
}

.old-price {
    text-decoration: line-through;
    color: #9aa7c2;
    margin-bottom: 14px;
}

/* block buttons */
.block {
    width: 100%;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    display: inline-block;
}

/* small footer note */
.registration-note {
    color: #6f7f98;
    margin-top: 18px;
    font-size: 13px;
}

/* Responsive tweaks */
@media (max-width: 920px) {
    .two-col {
        grid-template-columns: 1fr;
    }

    .stats-row {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
    }

    .hero-title {
        font-size: 36px;
    }

    .cards-row {
        justify-content: center;
    }

    .pricing-row {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
}

footer {
    background-color: #f5f5f5;
    color: #000;
    font-size: 14px;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 40px;
}

.footer-section {
    flex: 1 1 200px;
    margin-bottom: 12px;
}

.footer-section h4 {
    margin-bottom: 15px;
    font-size: 16px;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section a {
    color: inherit;
    text-decoration: none;
}

.footer-section a:hover {
    text-decoration: underline;
}

.social-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.social-icons a {
    font-size: 20px;
    color: #000;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #0073e6;
}

.bottom-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-bottom {
    background-color: #1439b3;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
}

.footer-bottom .left p:first-child {
    font-weight: bold;
    margin-bottom: 5px;
}

.footer-bottom .right {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-bottom .right a {
    color: #fff;
    text-decoration: none;
}

.footer-bottom .right a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        padding: 30px 20px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .footer-bottom .right {
        justify-content: center;
    }

    .bottom-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px;
    }
}

:root {
    --brand-blue: #173b8a;
    /* deep heading blue */
    --accent-blue: #2EA0F7;
    /* lighter icon blue */
    --card-bg: #ffffff;
    --muted: #6b7280;
    --page-bg: #f7f9fc;
    --form-bg: #18386c;
    /* dark-blue form area */
    --form-panel: rgba(15, 30, 60, 0.35);
    --yellow: #ffd000;
    --radius: 12px;
    --card-shadow: 0 6px 20px rgba(15, 29, 64, 0.06);
    --glass-shadow: 0 6px 18px rgba(3, 18, 60, 0.25);
    --max-width: 1180px;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--page-bg);
    color: #0a1722;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* generic container */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 48px 24px;
}

/* narrow center for sections 1 & 2 */
.container.narrow {
    max-width: 1000px;
}

/* section headings */
.section-title {
    text-align: center;
    color: var(--brand-blue);
    font-size: 28px;
    margin: 6px 0 34px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* white variation for form header */
.section-title.white {
    color: white;
    margin-top: 28px;
}

/* -----------------------
   Benefits grid (section 1)
   ----------------------- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}

/* card */
.benefit-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 28px 20px;
    box-shadow: var(--card-shadow);
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform .22s ease, box-shadow .22s ease;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(15, 29, 64, 0.12);
}

.icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: linear-gradient(180deg, rgba(46, 160, 247, 0.06) 0%, rgba(46, 160, 247, 0.02) 100%);
}

.benefit-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-blue);
    text-align: center;
    line-height: 1.3;
    padding: 0 6px;
}

/* -----------------------
   Pathway (section 2)
   ----------------------- */
.pathway-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 8px;
    align-items: stretch;
}

.step-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 14px;
    padding: 28px 22px;
    box-shadow: var(--card-shadow);
    text-align: center;
    position: relative;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.step-bubble {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #22b6ff;
    color: white;
    font-weight: 700;
    font-size: 16px;
    margin-top: -34px;
    box-shadow: 0 6px 18px rgba(34, 182, 255, 0.14);
    border: 6px solid rgba(255, 255, 255, 0.65);
}

.step-icon {
    margin: 12px 0;
    height: 44px;
    width: 44px;
}

.step-title {
    margin: 6px 0 8px;
    color: var(--brand-blue);
    font-size: 16px;
    font-weight: 700;
}

.step-desc {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    padding: 0 6px;
}

/* -----------------------
   Form (section 3)
   ----------------------- */
.form-section {
    background: var(--form-bg);
    padding: 56px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.app-form {
    max-width: 640px;
    margin: 28px auto 16px;
    background: var(--form-panel);
    border-radius: 14px;
    padding: 28px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(6px);
    color: #e6eefc;
}

/* rows */
.row.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

/* form fields */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.label-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

input[type="text"],
input[type="email"],
textarea {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: #f1f7ff;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    transition: box-shadow .16s ease, border-color .16s ease;
    min-height: 42px;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 300;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) inset;
}

/* file field */
.file-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.file-field input[type="file"] {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* submit */
.submit-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 14px 18px;
    border-radius: 8px;
    border: 0;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    background: linear-gradient(0deg, #ffcb00, #ffd766);
    color: #10202a;
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.18);
}

/* small screens */
@media (max-width: 1000px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pathway-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 800px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .pathway-grid {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 36px 18px;
    }

    .section-title {
        font-size: 22px;
        margin-bottom: 22px;
    }

    .app-form {
        padding: 20px;
        margin: 18px auto;
    }

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

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

    .icon-wrap {
        width: 48px;
        height: 48px;
    }

    .benefit-card {
        padding: 20px;
        min-height: 110px;
    }

    .step-card {
        padding: 20px;
        min-height: 200px;
    }

    .step-bubble {
        margin-top: -28px;
        height: 40px;
        width: 40px;
    }

    .app-form {
        margin: 12px 14px;
        width: auto;
    }
}