/* =========================================================
   NOOR QURAN ACADEMYY
   GLOBAL
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    background: #F7E7CE;
    color: #222222;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

a {
    -webkit-tap-highlight-color: transparent;
}

:root {
    --gold: #D4AF37;
    --gold-dark: #B28F1E;
    --champagne: #F7E7CE;
    --dark: #222222;
    --dark-soft: #444444;
    --white: #FFFFFF;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: sticky;
    top: 16px;
    margin: 16px auto 0;

    width: calc(100% - 60px);
    max-width: 1250px;

    min-height: 70px;

    display: flex;
    align-items: center;

    padding: 8px 15px;

    z-index: 1000;

    background:
        rgba(255, 255, 255, 0.18);

    border:
        1px solid rgba(255, 255, 255, 0.35);

    border-radius: 20px;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}


/* LOGO */

.logo {
    width: auto;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.logo-name {
    display: inline-block;
    margin-left: 10px;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.logo img {
    width: 58px;
    height: 58px;

    object-fit: contain;
    flex-shrink: 0;
}


/*
   IMPORTANT:
   Navbar buttons are now completely pushed
   toward the RIGHT side.
*/

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    flex: 0 1 auto;
    margin:
        0
        10px
        0
        auto;
}


.nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 70px;

    padding: 9px 12px;

    border-radius: 10px;

    text-decoration: none;

    color: #FFFFFF;

    font-family: Arial, sans-serif;

    font-size: 13px;
    font-weight: 600;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    transition:
        0.3s ease;
}


.nav-links a:hover,
.nav-links a.active {
    color: #222222;

    background:
        var(--champagne);

    border-color:
        var(--champagne);

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.15);
}


/* ENROLL */

.enroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 11px 20px;

    border-radius: 10px;

    background:
        var(--gold);

    color:
        #FFFFFF;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 13px;
    font-weight: 700;

    transition:
        0.3s ease;
}

.enroll-btn:hover {
    background:
        var(--champagne);

    color:
        #222222;

    transform:
        translateY(-3px);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    width: 100%;
    min-height: 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        url("../images/home-hero.webp?v=20261003-1")
        center / cover
        no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 0.40),
            rgba(0, 0, 0, 0.25)
        );
}

.hero-content {
    position: relative;

    z-index: 2;

    width: 90%;
    max-width: 850px;

    margin-left: 8%;

    padding-top: 80px;

    color: #FFFFFF;
}

.hero-small-title {
    margin-bottom: 15px;

    color:
        var(--gold);

    font-family: Arial, sans-serif;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: 4px;
}

.hero-content h1 {
    margin-bottom: 22px;

    color: #FFFFFF;

    font-size:
        clamp(42px, 7vw, 82px);

    line-height: 1.05;

    letter-spacing: 2px;
}

.hero-description {
    max-width: 650px;

    margin-bottom: 32px;

    color:
        var(--champagne);

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 15px;

    flex-wrap: wrap;
}

.hero-btn {
    min-width: 150px;

    padding: 13px 22px;

    border-radius: 9px;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 13px;
    font-weight: 700;

    transition: 0.3s ease;
}

.primary-btn {
    background:
        var(--gold);

    color:
        #FFFFFF;

    border:
        2px solid var(--gold);
}

.primary-btn:hover {
    background:
        transparent;

    color:
        var(--gold);

    transform:
        translateY(-3px);
}

.secondary-btn {
    background:
        transparent;

    color:
        #FFFFFF;

    border:
        2px solid var(--champagne);
}

.secondary-btn:hover {
    background:
        var(--champagne);

    color:
        #222222;

    transform:
        translateY(-3px);
}


/* =========================================================
   ABOUT
   PC + MOBILE BOTH = TEXT LEFT / IMAGE RIGHT
========================================================= */

.about-section {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        90px
        5vw
        100px;

    background: #F7E7CE;
}

.about-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 45px;
}

.about-content {
    padding-right: 10px;
}

.about-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color:
        var(--gold);

    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
}

.about-content h2 {
    margin-bottom: 18px;

    color:
        #222222;

    font-size:
        clamp(36px, 4vw, 58px);

    line-height: 1.08;
}

.about-content h2 span {
    color:
        var(--gold);
}

.about-content p {
    max-width: 550px;

    margin-bottom: 14px;

    color:
        #444444;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.7;
}

.about-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 10px;

    padding:
        11px 20px;

    border:
        1px solid var(--gold);

    border-radius: 9px;

    background:
        var(--gold);

    color:
        #FFFFFF;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 700;

    transition:
        0.3s ease;
}

.about-btn .whatsapp-svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.about-btn:hover {
    background:
        var(--champagne);

    color:
        #222222;

    transform:
        translateY(-3px);
}


/* ABOUT IMAGE */

.about-image {
    width: 100%;

    height: 390px;

    overflow: hidden;

    border-radius: 18px;

    border:
        1px solid rgba(255, 255, 255, 0.70);

    background:
        rgba(255, 255, 255, 0.35);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}

.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   COURSES
========================================================= */

.courses-section {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        90px
        5vw
        100px;

    background: #F7E7CE;
}

.courses-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}

.courses-heading {
    max-width: 700px;

    margin:
        0 auto
        40px;

    text-align: center;
}

.courses-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color:
        var(--gold);

    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
}

.courses-heading h2 {
    margin-bottom: 12px;

    color:
        var(--dark);

    font-size:
        clamp(34px, 4vw, 52px);

    line-height: 1.1;
}

.courses-heading h2 span {
    color:
        var(--gold);
}

.courses-heading p {
    color:
        #555555;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.6;
}

.courses-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.course-card {
    position: relative;

    min-height: 220px;

    padding: 20px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-radius: 17px;

    border:
        1px solid rgba(255, 255, 255, 0.35);

    background: rgba(247, 231, 206, 0.10);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .course-card:hover {
        transform:
            translateY(-6px) scale(1.02);

        border-color:
            rgba(212,175,55,0.75);

        box-shadow:
            0 18px 38px rgba(0,0,0,0.16),
            0 0 22px rgba(212,175,55,0.18);
    }

    .course-card:hover .course-number {
        transform: scale(1.08);
        border-color: var(--gold);
        background: rgba(212,175,55,0.20);
    }
}

.course-number {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    border-radius: 8px;

    border:
        1px solid rgba(212,175,55,0.45);

    background:
        rgba(212,175,55,0.10);

    color:
        var(--gold);

    font-family: Arial, sans-serif;

    font-size: 10px;
    font-weight: 700;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

.course-card h3 {
    margin-bottom: 9px;

    color:
        #222222;

    font-size: 17px;

    line-height: 1.25;
}

.course-card h3 small {
    font-size: 0.70em;

    color:
        #555555;
}

.course-card p {
    margin: 0;

    color:
        #444444;

    font-family: Arial, sans-serif;

    font-size: 11px;

    line-height: 1.55;
}

.course-enroll {
    margin-top: auto;

    padding-top: 15px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    color:
        var(--gold);

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;

    transition:
        0.3s ease;
}

.course-enroll:hover {
    color:
        var(--gold-dark);

    transform:
        translateX(3px);
}

.course-card-last {
    grid-column:
        2;
}

.section-page-button {
    display: flex;

    justify-content: center;

    margin-top: 30px;
}

.gold-outline-btn {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding:
        11px 17px;

    border:
        1px solid var(--gold);

    border-radius: 9px;

    color:
        var(--gold);

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    transition:
        0.3s ease;
}

.gold-outline-btn:hover {
    background:
        var(--gold);

    color:
        #FFFFFF;

    transform:
        translateY(-3px);
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-choose-section {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        96px
        5vw
        104px;

    background: #F7E7CE;

    color:
        #222222;

    text-align: center;
}

.why-choose-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}

.why-choose-heading {
    max-width: 750px;

    margin:
        0 auto
        40px;
}

.why-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color:
        var(--gold);

    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
}

.why-choose-heading h2 {
    margin-bottom: 12px;

    color:
        #B08D46;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 4vw, 52px);

    line-height: 1.1;
}

.why-choose-heading p {
    color:
        #444444;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.6;
}


/* WHY CHOOSE US CARDS */

.why-choose-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.why-card {
    position: relative;

    min-height: 220px;
    height: 100%;

    padding: 20px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    align-items: center;
    text-align: center;

    border-radius: 17px;

    border:
        1px solid rgba(255, 255, 255, 0.35);

    background: rgba(247, 231, 206, 0.10);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .why-card:hover {
        transform:
            translateY(-6px) scale(1.02);

        background:
            rgba(247, 231, 206, 0.10);

        border-color:
            rgba(212, 175, 55, 0.70);

        box-shadow:
            0 18px 36px rgba(0, 0, 0, 0.12),
            0 0 20px rgba(212, 175, 55, 0.22);
    }

    .why-card:first-child:hover {
        background:
            rgba(247, 231, 206, 0.10);

        border-color:
            #D4AF37;

        box-shadow:
            0 18px 36px rgba(0, 0, 0, 0.18),
            0 0 24px rgba(212, 175, 55, 0.35);
    }

    .why-card:hover .why-icon {
        transform: scale(1.08);
    }
}

.why-card:first-child {
    color: #222222;
    background: rgba(247, 231, 206, 0.10);
    border-color: rgba(255, 255, 255, 0.35);
}

.why-card:first-child h3,
.why-card:first-child p {
    color: #222222;
}

.why-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border-radius: 50%;

    color: #FFFFFF;

    background:
        #B99857;

    border:
        1px solid #B08D46;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.why-card:first-child .why-icon {
    color: #B99857;
    background: #FFFFFF;
    border-color: #FFFFFF;
}

.why-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.why-card-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.why-number {
    display: none;
}

.why-card h3 {
    margin-bottom: 8px;

    color:
        #2B2118;

    font-size: 16px;

    line-height: 1.25;
}

.why-card p {
    margin: 0;

    color:
        #5A5045;

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.55;
}

.payment-methods-image {
    display: block;

    width: 100%;

    max-width: 120px;

    margin:
        10px auto 0;

    border-radius: 6px;
}

@media (min-width: 701px) {
    .why-card-last,
    .why-card:nth-child(7) {
        grid-column: 2;
    }
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        90px
        5vw
        100px;

    background: #F7E7CE;
}

.contact-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}

.contact-heading {
    max-width: 720px;

    margin:
        0 auto
        40px;

    text-align: center;
}

.contact-eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color:
        var(--gold);

    font-family: Arial, sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
}

.contact-heading h2 {
    margin-bottom: 12px;

    color:
        #222222;

    font-size:
        clamp(34px,4vw,52px);

    line-height: 1.1;
}

.contact-heading h2 span {
    color:
        var(--gold);
}

.contact-heading p {
    color:
        #555555;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.6;
}


/* TWO CARDS */

.contact-cards {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.contact-form-card {
    padding: 20px;

    border-radius: 17px;

    border:
        1px solid rgba(255,255,255,0.70);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.58),
            rgba(255,255,255,0.25)
        );

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.10);
}

.contact-card-top {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;
}

.contact-card-icon {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color:
        var(--gold);

    background:
        rgba(212,175,55,0.10);

    border:
        1px solid rgba(212,175,55,0.45);
}

.contact-card-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.6;
}

.contact-card-number {
    display: block;

    color:
        var(--gold);

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 2px;
}

.contact-card-top h3 {
    margin:
        3px 0 5px;

    color:
        #222222;

    font-size: 17px;
}

.contact-card-top p {
    color:
        #555555;

    font-family: Arial, sans-serif;

    font-size: 10px;

    line-height: 1.5;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;

    margin-bottom: 5px;

    color:
        #333333;

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 700;
}

.form-group label span {
    color:
        #777777;

    font-weight: 400;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border:
        1px solid rgba(212,175,55,0.22);

    border-radius: 8px;

    outline: none;

    background:
        rgba(255,255,255,0.48);

    color:
        #222222;

    font-family: Arial, sans-serif;

    font-size: 10px;
}

.form-group input {
    height: 34px;

    padding:
        0 10px;
}

.form-group textarea {
    min-height: 65px;

    padding:
        8px 10px;

    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color:
        rgba(212,175,55,0.75);

    box-shadow:
        0 0 0 3px rgba(212,175,55,0.10);
}

.form-group select {
    height: 34px;
    padding: 0 10px;
}

.contact-section .form-group select[name="country"] {
    height: clamp(27px, 4vw, 34px);
}

.contact-section .country-search-picker {
    position: relative;
}

.contact-section .country-search-input {
    height: clamp(27px, 4vw, 34px);
}

.contact-section .country-search-options {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    z-index: 20;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

.contact-section .country-search-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: #222222;
    font-family: Arial, sans-serif;
    font-size: 10px;
    text-align: left;
    cursor: pointer;
}

.contact-section .country-search-option:hover,
.contact-section .country-search-option:focus {
    background: rgba(212,175,55,0.12);
    outline: none;
}

.contact-section .country-search-empty {
    display: block;
    padding: 8px 10px;
    color: #555555;
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.contact-section .form-group .iti {
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 10px;
}

.contact-section .form-group .iti input[type="tel"] {
    width: 100%;
}

.contact-section .iti__country-list {
    z-index: 10;
}

.contact-section .iti__dropdown-content {
    z-index: 20;
}

.contact-section .phone-validation-error {
    display: block;
    margin-top: 4px;
    color: #B33A3A;
    font-family: Arial, sans-serif;
    font-size: 9px;
}

.contact-section .form-group input[aria-invalid="true"] {
    border-color: #B33A3A;
    box-shadow: 0 0 0 2px rgba(179,58,58,0.12);
}

.contact-section .country-search-input[aria-invalid="true"] {
    border-color: #B33A3A;
    box-shadow: 0 0 0 2px rgba(179,58,58,0.12);
}

.submission-success-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(24, 22, 16, 0.24);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.submission-success-popup.is-visible {
    opacity: 1;
    visibility: visible;
}

.submission-success-card {
    position: relative;
    width: min(100%, 360px);
    min-height: 0;
    padding: 28px 24px 24px;
    border: 1px solid rgba(212,175,55,0.38);
    border-radius: 16px;
    background: rgba(247,231,206,0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 44px rgba(0,0,0,0.18);
    text-align: center;
}

.submission-success-title {
    margin: 0 0 8px;
    color: #94751d;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
}

.submission-success-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #555555;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.submission-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    border: 1px solid rgba(212,175,55,0.5);
    border-radius: 50%;
    background: rgba(212,175,55,0.12);
    color: #94751d;
    font-size: 22px;
    font-weight: 700;
}

.submission-success-popup.is-error .submission-success-icon {
    border-color: rgba(179,58,58,0.4);
    background: rgba(179,58,58,0.08);
    color: #B33A3A;
}

.submission-success-message {
    margin: 0;
    color: #333333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
}


.enrollment-card {
    max-width: 760px;
    margin: 0 auto;
}

.enrollment-card .academy-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

.enrollment-card .academy-form .form-group:nth-last-of-type(1),
.enrollment-card .academy-form .contact-submit-btn,
.enrollment-card .academy-form .form-status {
    grid-column: 1 / -1;
}

.contact-submit-btn {
    width: 100%;

    min-height: 36px;

    margin-top: 3px;

    border:
        1px solid var(--gold);

    border-radius: 8px;

    background:
        var(--gold);

    color:
        #FFFFFF;

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 700;

    cursor: pointer;
}

.contact-submit-btn:hover {
    background:
        var(--gold-dark);
}

.form-status {
    min-height: 15px;

    margin-top: 6px;

    text-align: center;

    font-family: Arial, sans-serif;

    font-size: 9px;
}

.form-status.success {
    color:
        #26734D;
}

.form-status.error {
    color:
        #B33A3A;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;

    z-index: 2;

    width: 100%;

    background:
        #222222;

    color:
        #FFFFFF;

    padding:
        55px 5vw 20px;
}

.footer-container {
    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}

.footer-main {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.2fr;

    gap: 35px;

    padding-bottom: 35px;
}

.footer-logo {
    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    color:
        #FFFFFF;

    text-decoration: none;
}

.footer-logo img {
    width: 65px;
    height: 65px;

    object-fit: contain;
}

.footer-logo span {
    color:
        var(--champagne);

    font-size: 15px;

    font-weight: 700;
}

.footer-brand > p {
    max-width: 310px;

    margin:
        14px 0 18px;

    color:
        rgba(247,231,206,0.72);

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.7;
}

.footer-socials {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}

.footer-social {
    min-width: 36px;
    min-height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        0 8px;

    border-radius: 50%;

    color:
        #222222;

    background:
        rgba(255,255,255,0.90);

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 7px;
    font-weight: 700;

    transition:
        0.3s ease;
}

.footer-social svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: currentColor;
}

.footer-social.instagram svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.footer-social.instagram .instagram-dot {
    fill: currentColor;
    stroke: none;
}

.footer-social:hover {
    color:
        #FFFFFF;

    transform:
        translateY(-4px);
}

.facebook:hover {
    background:
        #1877F2;
}

.linkedin:hover {
    background:
        #0A66C2;
}

.instagram:hover {
    background:
        linear-gradient(
            135deg,
            #F58529,
            #DD2A7B,
            #8134AF,
            #515BD4
        );
}

.telegram:hover {
    background:
        #229ED9;
}

.whatsapp:hover {
    background:
        #25D366;
}

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.footer-column h3 {
    margin-bottom: 15px;

    color:
        var(--gold);

    font-size: 15px;
}

.footer-column a {
    margin-bottom: 9px;

    color:
        rgba(255,255,255,0.72);

    font-family: Arial, sans-serif;

    font-size: 10px;

    text-decoration: none;

    transition:
        0.25s ease;
}

.footer-column a:hover {
    color:
        var(--champagne);

    transform:
        translateX(3px);
}

.footer-contact a {
    word-break: break-word;
}

.footer-contact .whatsapp-svg {
    width: 17px;
    height: 17px;
    margin-right: 6px;
    vertical-align: middle;
}

.footer-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 18px;

    border-top:
        1px solid rgba(212,175,55,0.18);

    color:
        rgba(255,255,255,0.58);

    font-family: Arial, sans-serif;

    font-size: 9px;
}

.footer-legal {
    display: flex;

    gap: 18px;
}

.footer-legal a {
    color:
        rgba(255,255,255,0.58);

    text-decoration: none;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-float {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 9999;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        #25D366;

    color:
        #FFFFFF;

    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.22);

    animation:
        whatsapp-pulse 2.4s ease-in-out infinite;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.whatsapp-float > svg,
.whatsapp-float .whatsapp-svg {
    width: 30px;
    height: 30px;
}

.whatsapp-float:hover {
    background: var(--gold);
    transform: translateY(-4px) scale(1.06);
    box-shadow:
        0 16px 34px rgba(0,0,0,0.24),
        0 0 0 6px rgba(212,175,55,0.18);
}

@keyframes whatsapp-pulse {
    0%, 100% {
        box-shadow: 0 12px 30px rgba(0,0,0,0.22);
    }

    50% {
        box-shadow:
            0 12px 30px rgba(0,0,0,0.22),
            0 0 0 6px rgba(212,175,55,0.18);
    }
}

.whatsapp-icon {
    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 700;
}

.whatsapp-tooltip {
    position: absolute;

    right: 70px;

    top: 50%;

    transform:
        translateY(-50%);

    padding:
        7px 10px;

    border-radius: 7px;

    background:
        #222222;

    color:
        #FFFFFF;

    white-space: nowrap;

    font-family: Arial, sans-serif;

    font-size: 10px;

    opacity: 0;

    pointer-events: none;

    transition:
        0.25s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 767px) {

    .about-container {
        gap: 25px;
    }

    .about-image {
        height: 330px;
    }

    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {


    /* NAVBAR */

    .navbar {
        top: 10px;

        width:
            calc(100% - 12px);

        min-height: 52px;

        padding:
            5px 6px;

        border-radius: 14px;

        gap: 3px;
    }

    .logo {
        width: auto;
        height: 38px;
    }

    .logo img {
        width: 38px;
        height: 38px;
    }

    .logo-name {
        display: none;
    }

    .nav-links {
        justify-content: flex-end;
        margin:
            0
            3px
            0
            auto;

        gap: 2px;
    }

    .nav-links a {
        min-width: auto;

        padding:
            7px 4px;

        font-size: 8.5px;

        border-radius: 6px;
    }

    .enroll-btn {
        padding:
            7px 6px;

        font-size: 7.5px;

        border-radius: 7px;
    }


    /* HERO */

    .hero-content {
        width: 88%;

        margin-left: 6%;

        padding-top: 90px;
    }

    .hero-small-title {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .hero-content h1 {
        font-size: 38px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-btn {
        min-width: 120px;

        padding:
            9px 11px;

        font-size: 10px;
    }


    /* =====================================================
       ABOUT
       IMPORTANT:
       STILL TWO COLUMNS ON MOBILE
    ===================================================== */

    .about-section {
        padding:
            60px
            9px
            70px;
    }

    .about-container {
        display: grid;

        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.05fr);

        gap: 8px;

        align-items: center;
    }

    .about-content {
        padding-right: 3px;
    }

    .about-eyebrow {
        font-size: 9px;

        letter-spacing: 1.5px;

        margin-bottom: 7px;
    }

    .about-content h2 {
        font-size:
            clamp(21px, 6vw, 29px);

        line-height: 1.05;

        margin-bottom: 10px;
    }

    .about-content p {
        font-size: 10px;

        line-height: 1.5;

        margin-bottom: 7px;
    }

    .about-btn {
        margin-top: 5px;

        padding:
            7px 9px;

        border-radius: 7px;

        font-size: 8.5px;
    }

    .about-image {
        width: 100%;

        height: 230px;

        border-radius: 11px;
    }


    /* COURSES */

    .courses-section {
        padding:
            65px
            9px
            75px;
    }

    .courses-heading {
        margin-bottom: 28px;
    }

    .courses-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .courses-heading h2 {
        font-size: 29px;
    }

    .courses-heading p {
        font-size: 11px;
    }

    .courses-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;
    }

    .course-card {
        min-height: 175px;

        padding: 12px;

        border-radius: 12px;
    }

    .course-number {
        width: 27px;
        height: 27px;

        margin-bottom: 9px;

        font-size: 9px;
    }

    .course-card h3 {
        font-size: 13px;
    }

    .course-card p {
        font-size: 9.5px;

        line-height: 1.45;
    }

    .course-enroll {
        padding-top: 7px;

        font-size: 8.5px;
    }

    .course-card-last {
        grid-column:
            1 / -1;

        width:
            calc(50% - 4.5px);

        justify-self:
            center;
    }


    /* WHY */

    .why-choose-section {
        padding:
            60px
            9px
            75px;
    }

    .why-choose-heading {
        margin-bottom: 28px;
    }

    .why-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .why-choose-heading h2 {
        font-size: 29px;
    }

    .why-choose-heading p {
        font-size: 13px;
    }

    .why-choose-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 9px;
    }

    .why-card {
        height: 286px;

        padding: 12px;

        border-radius: 12px;
    }

    .why-icon {
        width: 60px;
        height: 60px;

        margin-bottom: 9px;

        border-radius: 50%;
    }

    .why-icon svg {
        width: 25px;
        height: 25px;
    }

    .why-number {
        font-size: 8.5px;

        letter-spacing: 1.2px;
    }

    .why-card h3 {
        font-size: 17px;

        margin-bottom: 6px;
    }

    .why-card p {
        font-size: 13px;

        line-height: 1.45;
    }

    .enrollment-card .academy-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .enrollment-card .academy-form .form-group,
    .enrollment-card .academy-form .contact-submit-btn,
    .enrollment-card .academy-form .form-status {
        grid-column: auto;
    }

    .payment-methods-image {
        max-width: 120px;
    }

    .why-card-last {
        grid-column: auto;
        width: 100%;
    }

    .why-card:nth-child(5) {
        grid-column: auto;
    }


    /* CONTACT */

    .contact-section {
        padding:
            60px
            7px
            70px;
    }

    .contact-heading {
        margin-bottom: 25px;
    }

    .contact-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .contact-heading h2 {
        font-size: 29px;
    }

    .contact-heading p {
        font-size: 11px;
    }

    .contact-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .contact-form-card {
        padding: 10px;

        border-radius: 11px;
    }

    .contact-card-top {
        gap: 5px;

        margin-bottom: 11px;
    }

    .contact-card-icon {
        width: 25px;
        height: 25px;
    }

    .contact-card-icon svg {
        width: 12px;
        height: 12px;
    }

    .contact-card-number {
        font-size: 8px;
    }

    .contact-card-top h3 {
        font-size: 12px;
    }

    .contact-card-top p {
        font-size: 8.5px;
    }

    .form-group {
        margin-bottom: 7px;
    }

    .form-group label {
        font-size: 8.5px;
    }

    .form-group input {
        height: 27px;
    }

    .form-group textarea {
        min-height: 47px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 9px;

        border-radius: 6px;
    }

    .contact-submit-btn {
        min-height: 29px;

        font-size: 8px;
    }

    .form-status {
        font-size: 8px;
    }


    /* FOOTER */

    .site-footer {
        padding:
            42px
            10px
            18px;
    }

    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            24px
            13px;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

    .footer-logo img {
        width: 52px;
        height: 52px;
    }

    .footer-logo span {
        font-size: 13px;
    }

    .footer-brand > p {
        font-size: 10px;
    }

    .footer-social {
        min-width: 29px;
        min-height: 29px;

        font-size: 5.5px;
    }

    .footer-column h3 {
        font-size: 13px;
    }

    .footer-column a {
        font-size: 10.5px;

        margin-bottom: 6px;
    }

    .footer-bottom {
        flex-direction: column;

        align-items:
            flex-start;

        gap: 9px;

        font-size: 8.5px;
    }

    .footer-legal {
        gap: 10px;
    }


    /* WHATSAPP */

    .whatsapp-float {
        width: 46px;
        height: 46px;

        right: 12px;
        bottom: 12px;
    }

    .whatsapp-icon {
        font-size: 9px;
    }

    .whatsapp-tooltip {
        display: none;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .navbar {
        width:
            calc(100% - 8px);
    }

    .logo {
        width: 35px;
        height: 35px;
    }

    .nav-links a {
        padding:
            6px 3px;

        font-size: 7.5px;
    }

    .enroll-btn {
        padding:
            6px 4px;

        font-size: 6.5px;
    }


    /* About stays side-by-side */

    .about-container {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.05fr);

        gap: 6px;
    }

    .about-content h2 {
        font-size: 20px;
    }

    .about-content p {
        font-size: 9px;
    }

    .about-image {
        height: 205px;
    }


    .course-card {
        min-height: 165px;

        padding: 10px;
    }

    .why-card {
        min-height: 165px;

        padding: 10px;
    }

    .contact-cards {
        gap: 5px;
    }

}


/* =========================================================
   FOOTER TYPOGRAPHY — DESKTOP AND TABLET
========================================================= */

@media (min-width: 701px) {

    .footer-brand > p {
        font-size: 14px;
    }

    .footer-column h3 {
        font-size: 17px;
    }

    .footer-column a {
        font-size: 12px;
    }

    .footer-bottom {
        font-size: 11px;
    }

    .footer-legal a {
        font-size: 11px;
    }

}


/* =========================================================
   PC / DESKTOP ONLY
   Does not apply at 1000px and below (tablet + mobile).
========================================================= */

@media (min-width: 768px) {

    /* Navbar: sit over the page so the empty band behind/below it is gone */
    .navbar {
        top: 0;
        margin: 0 auto;
    }

    .hero {
        margin-top: -76px;
    }

    .hero-content {
        padding-top: 110px;
    }

    main > section:first-of-type:not(.hero) {
        margin-top: -76px;
        padding-top: 166px;
    }

    /* Navbar text: black */
    .logo-name,
    .nav-links a,
    .nav-links a:hover,
    .nav-links a.active,
    .enroll-btn,
    .enroll-btn:hover {
        color: #000000;
    }

    .logo-name {
        font-size: 24px;
    }

    .nav-links {
        gap: 10px;
    }

    .nav-links a {
        min-width: 88px;
        padding: 11px 16px;
        font-size: 21px;
    }

    .enroll-btn {
        padding: 12px 24px;
        font-size: 21px;
    }


    /* Overall website text ~1.6x–1.8x */

    .hero-small-title {
        font-size: 28px;
    }

    .hero-content h1 {
        font-size: clamp(64px, 7.5vw, 120px);
    }

    .hero-description {
        font-size: 28px;
    }

    .hero-btn {
        min-width: 180px;
        padding: 15px 26px;
        font-size: 21px;
    }

    .about-eyebrow {
        font-size: 18px;
    }

    .about-content h2 {
        font-size: clamp(54px, 4.6vw, 88px);
    }

    .about-content p {
        font-size: 24px;
        max-width: 620px;
    }

    .about-btn {
        padding: 13px 24px;
        font-size: 18px;
    }

    .courses-eyebrow {
        font-size: 18px;
    }

    .courses-heading h2 {
        font-size: clamp(52px, 4.6vw, 82px);
    }

    .courses-heading p {
        font-size: 24px;
    }

    .course-card {
        min-height: 220px;
        padding: 20px;
    }

    .course-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .course-card h3 {
        font-size: 28px;
    }

    .course-card p {
        font-size: 18px;
    }

    .course-enroll {
        font-size: 14px;
    }

    .gold-outline-btn {
        padding: 13px 22px;
        font-size: 16px;
    }

    .why-eyebrow {
        font-size: 18px;
    }

    .why-choose-heading h2 {
        font-size: clamp(52px, 4.6vw, 82px);
    }

    .why-choose-heading p {
        font-size: 24px;
    }

    .why-card {
        min-height: 220px;
        overflow: visible;
    }

    .why-card h3 {
        font-size: 26px;
    }

    .why-card p {
        font-size: 20px;
    }

    .contact-eyebrow {
        font-size: 18px;
    }

    .contact-heading h2 {
        font-size: clamp(52px, 4.6vw, 82px);
    }

    .contact-heading p {
        font-size: 24px;
    }

    .contact-card-number {
        font-size: 14px;
    }

    .contact-card-top h3 {
        font-size: 28px;
    }

    .contact-card-top p {
        font-size: 17px;
    }

    .submission-success-message {
        font-size: 22px;
    }

    .whatsapp-icon {
        font-size: 18px;
    }

    .whatsapp-tooltip {
        font-size: 16px;
        padding: 9px 14px;
    }


    /* Forms */

    .form-group {
        margin-bottom: 14px;
    }

    .form-group label {
        font-size: 16px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-group input::placeholder,
    .form-group textarea::placeholder,
    .form-group select::placeholder {
        font-size: 17px;
    }

    .form-group input {
        height: 48px;
        padding: 0 14px;
    }

    .form-group select {
        height: 48px;
        padding: 0 14px;
        font-size: 17px;
    }

    .form-group textarea {
        min-height: 96px;
        padding: 12px 14px;
        font-size: 17px;
    }

    .contact-section .form-group select[name="country"],
    .contact-section .country-search-input {
        height: 48px;
        font-size: 17px;
    }

    .contact-section .country-search-option,
    .contact-section .country-search-empty {
        font-size: 17px;
        padding: 10px 12px;
    }

    .contact-section .form-group .iti,
    .contact-section .form-group .iti input[type="tel"] {
        font-size: 17px;
    }

    .contact-section .form-group .iti input[type="tel"] {
        height: 48px;
    }

    .contact-section .phone-validation-error {
        font-size: 16px;
    }

    .contact-submit-btn {
        min-height: 52px;
        font-size: 16px;
    }

    .form-status {
        font-size: 16px;
        min-height: 22px;
    }


    /* Footer text size + Champagne color */

    .site-footer {
        color: #F7E7CE;
    }

    .footer-logo span {
        font-size: 24px;
        color: #F7E7CE;
    }

    .footer-brand > p {
        font-size: 22px;
        color: #F7E7CE;
        max-width: 380px;
    }

    .footer-column h3 {
        font-size: 26px;
        color: #F7E7CE;
    }

    .footer-column a {
        font-size: 18px;
        color: #F7E7CE;
    }

    .footer-column a:hover {
        color: #F7E7CE;
    }

    .footer-bottom,
    .footer-legal a {
        font-size: 18px;
        color: #F7E7CE;
    }


}

/* Shared card dimensions and requested responsive readability. */
:root {
    --card-min-height: 220px;
    --card-padding: 20px;
    --card-gap: 16px;
}

.courses-grid,
.why-choose-grid,
.contact-cards {
    gap: var(--card-gap);
}

.course-card,
.why-card,
.contact-form-card {
    min-width: 0;
    min-height: var(--card-min-height);
    height: auto;
    padding: var(--card-padding);
    overflow-wrap: anywhere;
}

.why-icon,
.course-number {
    flex-shrink: 0;
}

.navbar {
    top: 0;
    margin: 0 auto;
}

.navbar .logo-name,
.navbar .nav-links a,
.navbar .enroll-btn {
    color: #000000;
}

.site-footer,
.footer-logo,
.footer-logo span,
.footer-brand > p,
.footer-column h3,
.footer-column > a,
.footer-bottom,
.footer-legal a {
    color: #F7E7CE;
}

.footer-main {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

.footer-column,
.footer-brand {
    min-width: 0;
}

.footer-contact {
    grid-column: -2 / -1;
}

.footer-contact .footer-socials {
    margin-top: 18px;
}

/* Keep the existing social appearance outside the footer text rules. */
.footer-column .footer-social {
    margin-bottom: 0;
    color: #222222;
    font-size: 7px;
    transition: 0.3s ease;
}

.footer-column .footer-social:hover {
    color: #FFFFFF;
    transform: translateY(-4px);
}

.form-group,
.form-group input,
.form-group select,
.form-group textarea {
    min-width: 0;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.form-group select option,
.iti__country-name,
.iti__dial-code,
.iti__selected-dial-code {
    font-size: inherit;
}

.form-group label,
.form-status,
.phone-validation-error {
    line-height: 1.5;
}

@media (max-width: 767px) {
    .hero {
        margin-top: -76px;
    }

    main > section:first-of-type:not(.hero) {
        margin-top: -76px;
        padding-top: 166px;
    }

    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    main > section.hero {
        min-height: clamp(640px, 88vh, 860px);
        background-image: url("../images/home-hero.webp?v=20261003-1");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main > section.hero > .hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(34, 34, 34, 0.16),
            rgba(34, 34, 34, 0.04) 66%,
            transparent
        );
    }

    main > section.hero > .hero-content {
        width: min(62%, 900px);
        max-width: 900px;
        margin: 50px 0 30px 5.5%;
        padding: clamp(38px, 4.2vw, 64px);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 26px;
        background: rgba(247, 231, 206, 0.28);
        color: #222222;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    main > section.hero .hero-arabic {
        margin: 0 0 15px;
        color: #352819;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(24px, 2.3vw, 34px);
        line-height: 1.8;
        text-align: right;
    }

    main > section.hero .hero-small-title {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 20px;
        color: var(--gold);
        font-family: Arial, sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 3px;
        line-height: 1.4;
    }

    main > section.hero .hero-welcome,
    main > section.hero .hero-brand {
        color: var(--gold);
    }

    main > section.hero .hero-brand {
        font-size: 18px;
        letter-spacing: 2px;
    }

    main > section.hero .hero-content h1 {
        margin-bottom: 20px;
        color: #222222;
        font-size: clamp(56px, 5.3vw, 82px);
        line-height: 1.08;
        letter-spacing: 0;
    }

    main > section.hero .hero-description {
        max-width: 620px;
        margin-bottom: 28px;
        color: #3A3329;
        font-size: clamp(17px, 1.4vw, 21px);
        line-height: 1.65;
    }

    main > section.hero .hero-buttons {
        gap: 14px;
    }

    main > section.hero .hero-btn {
        min-width: 180px;
        padding: 14px 22px;
        font-size: 15px;
    }

    main > section.hero .primary-btn {
        color: #222222;
    }

    main > section.hero .secondary-btn {
        border-color: var(--gold-dark);
        color: #222222;
    }
}

@media (max-width: 767px) {
    main > section.hero {
        height: auto;
        min-height: 0;
        align-items: center;
        padding: 92px 0 30px;
        background-image: url("../images/home-hero.webp?v=20261003-1");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main > section.hero > .hero-overlay {
        background: rgba(34, 34, 34, 0.10);
    }

    main > section.hero > .hero-content {
        width: 90%;
        max-width: 820px;
        margin: 0 auto;
        padding: clamp(26px, 5vw, 42px);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 22px;
        background: rgba(247, 231, 206, 0.28);
        color: #222222;
        text-align: center;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    main > section.hero .hero-arabic {
        margin: 0 0 10px;
        color: #352819;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(21px, 4vw, 29px);
        line-height: 1.8;
        text-align: center;
    }

    main > section.hero .hero-small-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        margin-bottom: 17px;
        color: var(--gold);
        font-family: Arial, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2.5px;
        line-height: 1.4;
    }

    main > section.hero .hero-welcome,
    main > section.hero .hero-brand {
        color: var(--gold);
    }

    main > section.hero .hero-brand {
        font-size: clamp(15px, 3vw, 19px);
        letter-spacing: 1.5px;
    }

    main > section.hero .hero-content h1 {
        margin-bottom: 15px;
        color: #222222;
        font-size: clamp(40px, 6vw, 60px);
        line-height: 1.08;
        letter-spacing: 0;
    }

    main > section.hero .hero-description {
        max-width: 620px;
        margin: 0 auto 20px;
        color: #3A3329;
        font-size: clamp(16px, 2vw, 18px);
        line-height: 1.6;
    }

    main > section.hero .hero-buttons {
        justify-content: center;
        gap: 12px;
    }

    main > section.hero .hero-btn {
        min-width: 140px;
        padding: 12px 17px;
        font-size: 13px;
    }

    main > section.hero .primary-btn {
        color: #222222;
    }

    main > section.hero .secondary-btn {
        border-color: var(--gold-dark);
        color: #222222;
    }
}

@media (max-width: 700px) {
    main > section.hero {
        padding: 82px 0 26px;
    }

    main > section.hero > .hero-content {
        width: 92%;
        padding: 25px 18px;
        border-radius: 20px;
    }

    main > section.hero .hero-arabic {
        margin-bottom: 8px;
        font-size: clamp(19px, 6vw, 24px);
        line-height: 1.8;
    }

    main > section.hero .hero-small-title {
        gap: 3px;
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    main > section.hero .hero-brand {
        font-size: clamp(14px, 4vw, 17px);
        letter-spacing: 1px;
    }

    main > section.hero .hero-content h1 {
        margin-bottom: 13px;
        font-size: clamp(24px, 7.6vw, 34px);
        line-height: 1.1;
    }

    main > section.hero .hero-description {
        margin-bottom: 17px;
        font-size: 15px;
        line-height: 1.55;
    }

    main > section.hero .hero-buttons {
        gap: 9px;
    }

    main > section.hero .hero-btn {
        min-width: 120px;
        padding: 11px 12px;
        font-size: 11px;
    }
}

@media (max-width: 700px) {
    main > section.hero > .hero-content > .hero-buttons > .hero-btn {
        min-width: 120px;
        padding: 11px 12px;
        font-size: 11px;
    }
}

.reveal-ready [data-reveal] {
    opacity: 0;
    transition:
        opacity 0.75s ease-out,
        transform 0.75s ease-out;
}

.reveal-ready [data-reveal="left"] {
    transform: translate3d(-30px, 0, 0);
}

.reveal-ready [data-reveal="right"] {
    transform: translate3d(30px, 0, 0);
}

.reveal-ready [data-reveal="top"] {
    transform: translate3d(0, -24px, 0);
}

.reveal-ready [data-reveal="bottom"] {
    transform: translate3d(0, 30px, 0);
}

.reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (max-width: 700px) {
    .reveal-ready [data-reveal="left"] {
        transform: translate3d(-20px, 0, 0);
    }

    .reveal-ready [data-reveal="right"] {
        transform: translate3d(20px, 0, 0);
    }

    .reveal-ready [data-reveal="top"] {
        transform: translate3d(0, -20px, 0);
    }

    .reveal-ready [data-reveal="bottom"] {
        transform: translate3d(0, 20px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal-ready [data-reveal],
    .reveal-ready [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (min-width: 701px) and (max-width: 767px) {
    .form-group label,
    .contact-submit-btn,
    .form-status,
    .contact-section .phone-validation-error {
        font-size: 12px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .contact-section .country-search-option,
    .contact-section .country-search-empty,
    .contact-section .form-group .iti {
        font-size: 13px;
    }
}

@media (max-width: 700px) {
    :root {
        --card-min-height: 190px;
        --card-padding: 14px;
        --card-gap: 10px;
    }

    .courses-grid,
    .why-choose-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-card-last,
    .why-card-last {
        grid-column: 1 / -1;
        width: calc((100% - var(--card-gap)) / 2);
        justify-self: center;
    }

    .hero {
        margin-top: -52px;
    }

    main > section:first-of-type:not(.hero) {
        margin-top: -52px;
        padding-top: 112px;
    }

    .why-icon {
        width: 32px;
        height: 32px;
    }

    .course-card h3,
    .why-card h3 {
        font-size: 17px;
    }

    .course-card p,
    .why-card p {
        font-size: 13px;
        line-height: 1.5;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .contact-section .country-search-option,
    .contact-section .country-search-empty,
    .contact-section .form-group .iti {
        font-size: 10px;
    }

    .contact-section .phone-validation-error {
        font-size: 11px;
    }

    .submission-success-message {
        font-size: 16px;
    }

    .footer-column .footer-social {
        font-size: 5.5px;
    }

}

@media (max-width: 380px) {
    :root {
        --card-min-height: 180px;
        --card-padding: 12px;
        --card-gap: 8px;
    }
}

@media (max-width: 767px) {
    main > .hero {
        min-height: 0;
        height: auto;
        align-items: flex-start;
    }

    main > .hero .hero-content {
        width: 88%;
        max-width: 850px;
        margin-left: 6%;
        padding: 100px 0 32px;
    }

    .hero-small-title {
        margin-bottom: 12px;
        letter-spacing: 0;
    }

    .hero-welcome,
    .hero-brand {
        display: block;
    }

    .hero-welcome {
        color: var(--gold);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 14px;
        font-style: italic;
        font-weight: 700;
        letter-spacing: 3px;
    }

    .hero-brand {
        margin-top: 4px;
        color: var(--gold);
        font-family: Arial, sans-serif;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1.25;
    }

    .hero-content h1 {
        margin-bottom: 14px;
        line-height: 1.08;
    }

    .hero-description {
        max-width: 600px;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1.55;
    }

    main > section.hero + section.about-section {
        margin-top: 0;
        padding-top: 36px;
    }
}

@media (max-width: 700px) {
    main > .hero .hero-content {
        width: 88%;
        padding-top: 100px;
        padding-bottom: 28px;
    }

    .hero-welcome {
        font-size: 13px;
    }

    .hero-brand {
        font-size: 18px;
    }

    .hero-content h1 {
        font-size: clamp(32px, 8.5vw, 36px);
    }

    .hero-description {
        font-size: 15px;
        line-height: 1.55;
    }

    .hero-buttons {
        gap: 10px;
    }

    .hero-btn {
        min-width: 120px;
        padding: 10px 12px;
        font-size: 11px;
    }

    main > section.hero + section.about-section {
        padding-top: 28px;
    }
}

@media (min-width: 768px) {
    .navbar {
        top: 14px;
        margin: 14px auto 0;
    }

    .hero {
        margin-top: -90px;
    }
}

@media (max-width: 700px) {
    .site-footer {
        display: flex;
        min-height: 45vh;
        padding: 30px 8px 18px;
    }

    .footer-container,
    .footer-main,
    .footer-brand,
    .footer-column {
        min-width: 0;
    }

    .footer-container {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .footer-main {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.25fr);
        align-items: start;
        gap: 7px;
        padding-top: 12px;
        padding-bottom: 26px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-logo {
        gap: 4px;
        max-width: 100%;
    }

    .footer-logo img {
        width: 30px;
        height: 30px;
    }

    .footer-logo span {
        font-size: 9.5px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .footer-brand > p {
        margin: 9px 0 0;
        font-size: 9px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-column h3 {
        margin-bottom: 10px;
        font-size: 11px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .footer-column a {
        max-width: 100%;
        margin-bottom: 6px;
        font-size: 10px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .footer-contact a[href^="tel:"] {
        display: none;
    }

    .footer-contact a.footer-email {
        display: block;
        margin-bottom: 9px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        font-size: 8.5px;
    }

    .footer-contact a.footer-email.is-expanded {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .footer-contact .footer-socials {
        display: grid;
        grid-template-columns: repeat(3, 18px);
        gap: 5px;
        margin-top: 0;
    }

    .footer-column .footer-social {
        width: 18px;
        min-width: 18px;
        height: 18px;
        min-height: 18px;
        margin: 0;
        padding: 0;
    }

    .footer-column .footer-social svg {
        width: 12px;
        height: 12px;
    }

    .footer-bottom {
        align-items: flex-start;
        gap: 9px;
        margin-top: auto;
        padding-top: 14px;
        font-size: 8.5px;
        line-height: 1.5;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 4px 9px;
    }

    .footer-legal a {
        font-size: 8.5px;
        line-height: 1.5;
    }
}

@media (max-width: 700px) {
    .contact-cards > .contact-form-card:not(.enrollment-card) .contact-card-top h3 {
        font-size: 16px;
    }

    .contact-cards > .contact-form-card:not(.enrollment-card) .contact-card-top p {
        font-size: 12px;
    }

    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group label {
        font-size: 12px;
    }

    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group input,
    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group select,
    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group textarea,
    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group .iti,
    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group .iti input[type="tel"] {
        font-size: 13px;
    }

    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group input::placeholder,
    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group textarea::placeholder {
        font-size: 12px;
    }

    .contact-cards > .contact-form-card:not(.enrollment-card) .form-group select option,
    .contact-cards > .contact-form-card:not(.enrollment-card) .country-search-option,
    .contact-cards > .contact-form-card:not(.enrollment-card) .country-search-empty,
    .contact-cards > .contact-form-card:not(.enrollment-card) .iti__country-name,
    .contact-cards > .contact-form-card:not(.enrollment-card) .iti__dial-code,
    .contact-cards > .contact-form-card:not(.enrollment-card) .iti__selected-dial-code {
        font-size: 13px;
    }

    .contact-cards > .contact-form-card:not(.enrollment-card) .contact-submit-btn {
        font-size: 13px;
    }

    .contact-cards > .contact-form-card:not(.enrollment-card) .form-status,
    .contact-cards > .contact-form-card:not(.enrollment-card) .phone-validation-error {
        font-size: 12px;
    }
}

/* Compact home hero layout for tablets and phones; desktop rules stay unchanged.
   This final block is intentionally authoritative so older hero rules cannot create
   a full-screen mobile gap on the live site. */
@media (max-width: 767px) {
    main > section.hero {
        height: auto;
        min-height: 0;
        margin-top: 0;
        padding: 20px 0 24px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        background-image: url("../images/home-hero.webp?v=20261003-1");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main > section.hero > .hero-overlay {
        background: rgba(34, 34, 34, 0.10);
    }

    main > section.hero > .hero-content {
        width: 90%;
        max-width: 820px;
        margin: 0 auto;
        padding: clamp(24px, 4vw, 40px);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 22px;
        background: rgba(247, 231, 206, 0.28);
        color: #222222;
        text-align: center;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    main > section.hero + section.about-section {
        margin-top: 0;
    }
}

@media (max-width: 700px) {
    main > section.hero {
        height: auto;
        min-height: 0;
        margin-top: 0;
        padding: 16px 0 20px;
        align-items: flex-start;
        background-position: 58% center;
    }

    main > section.hero > .hero-content {
        width: 92%;
        margin: 0 auto;
        padding: 24px 18px;
        border-radius: 20px;
        background: rgba(247, 231, 206, 0.28);
    }

    main > section.hero .hero-content h1 {
        font-size: clamp(30px, 8vw, 38px);
        line-height: 1.1;
    }

    main > section.hero .hero-description {
        font-size: 15px;
        line-height: 1.55;
    }

    main > section.hero .hero-buttons {
        justify-content: center;
        gap: 9px;
    }

    main > section.hero .hero-btn {
        min-width: 120px;
        padding: 11px 12px;
        font-size: 11px;
    }
}

/* =========================================================
   FINAL MOBILE CONSISTENCY FIX — 2026-10-05
   Keeps all pages visually aligned with the home-page mobile system.
========================================================= */
@media (max-width: 700px) {
    /* Keep section transitions compact but not attached. */
    .about-section,
    .courses-section,
    .why-choose-section,
    .contact-section {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 36px;
        padding-bottom: 40px;
    }

    main > section:first-of-type:not(.hero) {
        margin-top: 0;
        padding-top: 36px;
    }

    main > section.hero + section.about-section {
        margin-top: 0;
        padding-top: 32px;
    }

    /* Cards size to their own content instead of stretching to the tallest sibling. */
    .contact-cards {
        align-items: start;
    }

    .contact-form-card {
        min-height: 0;
        height: auto;
        align-self: start;
    }

    /* Keep Course / Why Us compact standard without artificial tall cards. */
    .course-card,
    .why-card {
        height: auto;
        min-height: 190px;
    }

    .why-card-last,
    .course-card-last {
        align-self: start;
    }

    /* Same footer geometry on every page. */
    .site-footer {
        min-height: 45vh;
        padding: 30px 8px 18px;
    }

    .footer-main {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, .95fr) minmax(0, 1.25fr);
        align-items: start;
        gap: 7px;
        padding-top: 12px;
        padding-bottom: 26px;
    }

    .footer-brand,
    .footer-contact {
        grid-column: auto;
    }

    .footer-contact .footer-socials {
        display: grid;
        grid-template-columns: repeat(3, 18px);
        gap: 5px;
        margin-top: 0;
    }
}

@media (max-width: 380px) {
    .course-card,
    .why-card {
        min-height: 180px;
    }
}


/* =========================================================
   NQA ENHANCEMENTS — HOW IT WORKS / FEATURES / REVIEWS / FAQ
   Added 2026-10-06. Existing site styles remain unchanged.
========================================================= */
.how-it-works-section,
.reviews-section,
.faq-section {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 64px 5vw;
    background: #F7E7CE;
    color: #222;
}
.learning-features-section {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px 5vw 34px;
    background: #F7E7CE;
}
.enhancement-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.enhancement-heading {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}
.enhancement-heading > span {
    display: inline-block;
    margin-bottom: 8px;
    color: #B68D16;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.enhancement-heading h2 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.05;
}
.enhancement-heading p {
    margin: 0;
    line-height: 1.65;
}
.steps-grid,
.reviews-grid {
    display: grid;
    gap: 16px;
}
.steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glass-info-card,
.review-card {
    background: rgba(247, 231, 206, .10);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, .42);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 22px;
}
.glass-info-card {
    min-height: 190px;
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #D4AF37;
    color: #111;
    font-weight: 800;
}
.glass-info-card h3,
.review-card strong {
    color: #222;
}
.glass-info-card h3 {
    margin: 0 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}
.glass-info-card p,
.review-card p {
    margin: 0;
    line-height: 1.65;
}
.learning-features {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.learning-features span {
    padding: 10px 15px;
    border: 1px solid rgba(212,175,55,.55);
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    font-weight: 700;
    text-align: center;
}
.review-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.review-stars {
    margin-bottom: 12px;
    color: #B68D16;
    letter-spacing: .12em;
}
.review-card p {
    margin-bottom: 16px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
}
.review-card strong {
    font-size: .9rem;
}
.faq-container { max-width: 900px; }
.faq-list {
    display: grid;
    gap: 12px;
}
.faq-list details {
    overflow: hidden;
    border: 1px solid rgba(212,175,55,.42);
    border-radius: 14px;
    background: rgba(247,231,206,.10);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.faq-list summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 17px 52px 17px 18px;
    font-weight: 800;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #B68D16;
    font-size: 1.5rem;
    line-height: 1;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p {
    margin: 0;
    padding: 0 18px 18px;
    line-height: 1.65;
}
@media (max-width: 900px) {
    .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .how-it-works-section,
    .reviews-section,
    .faq-section {
        padding: 42px 14px;
    }
    .learning-features-section { padding: 10px 14px 24px; }
    .enhancement-heading { margin-bottom: 22px; }
    .enhancement-heading h2 { font-size: clamp(1.7rem, 8vw, 2.35rem); }
    .enhancement-heading p { font-size: .98rem; }
    .steps-grid { gap: 10px; }
    .glass-info-card {
        min-height: 170px;
        padding: 14px;
        border-radius: 14px;
    }
    .step-number {
        width: 34px;
        height: 34px;
        margin-bottom: 10px;
        font-size: .82rem;
    }
    .glass-info-card h3 { font-size: 1.05rem; }
    .glass-info-card p { font-size: .9rem; line-height: 1.5; }
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .review-card {
        min-height: 0;
        padding: 18px;
    }
    .learning-features {
        gap: 7px;
    }
    .learning-features span {
        padding: 8px 10px;
        font-size: .82rem;
    }
    .faq-list summary {
        padding: 15px 46px 15px 15px;
        font-size: .96rem;
    }
    .faq-list details p {
        padding: 0 15px 15px;
        font-size: .9rem;
    }
}
@media (max-width: 380px) {
    .glass-info-card { min-height: 160px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-list details { scroll-behavior: auto; }
}


/* =========================================================
   FINAL MOBILE POLISH — 2026-10-06
========================================================= */
.mobile-menu-toggle { display: none; }

/* Keep WhatsApp visible and add a gentle attention animation. */
.whatsapp-float {
    animation: nqa-whatsapp-float 3s ease-in-out infinite, whatsapp-pulse 2.4s ease-in-out infinite;
    transform-origin: center;
}
@keyframes nqa-whatsapp-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.03); }
}

@media (max-width: 700px) {
    /* Cleaner mobile header: logo + menu + enroll, with large tap targets. */
    .navbar {
        min-height: 56px;
        padding: 6px 9px;
        gap: 8px;
        overflow: visible;
    }
    .navbar .logo { margin-right: auto; }
    .mobile-menu-toggle {
        display: inline-flex;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        padding: 9px;
        border: 1px solid rgba(212,175,55,.5);
        border-radius: 10px;
        background: rgba(247,231,206,.78);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
    }
    .mobile-menu-toggle span {
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #222;
        transition: transform .2s ease, opacity .2s ease;
    }
    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .navbar .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 7px);
        left: 8px;
        right: 8px;
        margin: 0;
        padding: 8px;
        border: 1px solid rgba(212,175,55,.42);
        border-radius: 14px;
        background: rgba(247,231,206,.97);
        box-shadow: 0 12px 30px rgba(0,0,0,.14);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
    }
    .navbar.menu-open .nav-links { display: flex; }
    .navbar .nav-links a {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 9px 12px;
        font-size: 13px;
        border-radius: 9px;
    }
    .navbar .enroll-btn {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
        font-size: 9px;
    }

    /* About: give the promotional artwork enough width to be readable. */
    .about-section { padding: 42px 12px 46px; }
    .about-container {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: start;
    }
    .about-content { padding-right: 0; }
    .about-content h2 { font-size: clamp(24px, 7vw, 31px); }
    .about-content p { font-size: 12px; line-height: 1.55; }
    .about-image {
        width: min(100%, 430px);
        height: auto;
        aspect-ratio: 16 / 10;
        margin: 0 auto;
        border-radius: 14px;
    }
    .about-image img { object-fit: cover; object-position: center; }

    /* Reduce excessive page length while keeping breathing room. */
    .courses-section,
    .why-choose-section,
    .contact-section { padding-top: 48px; padding-bottom: 52px; }
    .how-it-works-section,
    .faq-section { padding-top: 40px; padding-bottom: 42px; }
    .learning-features-section { padding-top: 6px; padding-bottom: 28px; }
    .courses-heading,
    .why-choose-heading,
    .contact-heading,
    .enhancement-heading { margin-bottom: 22px; }

    /* Why Us: compact cards and shorter copy. */
    .why-choose-grid { gap: 9px; }
    .why-card {
        min-height: 0;
        padding: 14px 10px;
    }
    .why-card h3 { font-size: 16px; line-height: 1.08; }
    .why-card p { font-size: 11px; line-height: 1.45; }
    .why-icon { margin-bottom: 8px; }

    /* How It Works: no numbered circles; keep compact 2x2 cards. */
    .steps-grid { gap: 9px; }
    .glass-info-card {
        min-height: 150px;
        padding: 15px 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Forms: stack on narrow screens so inputs are comfortable to use. */
    .contact-cards {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 16px !important;
    }
    .contact-form-card {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        align-self: start;
    }

    /* Footer readability. */
    .site-footer { padding-top: 30px; }
    .footer-brand > p,
    .footer-column > a,
    .footer-contact a,
    .footer-bottom,
    .footer-legal a { font-size: 10px; line-height: 1.55; }
    .footer-column h3 { font-size: 12px; }
    .footer-logo span { font-size: 10px; }
}

@media (max-width: 380px) {
    .navbar .enroll-btn { padding: 7px 8px; font-size: 8.5px; }
    .about-section,
    .courses-section,
    .why-choose-section,
    .contact-section { padding-left: 9px; padding-right: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float { animation: none !important; }
}


/* =========================================================
   FINAL DESKTOP + MOBILE POLISH — 2026-10-07
   Refinement only: preserves the established NQA design.
========================================================= */

/* Desktop readability and tighter page rhythm */
@media (min-width: 901px) {
    body { font-size: 17px; }

    .navbar { padding-left: 4vw; padding-right: 4vw; }
    .nav-links a { font-size: 15px; }
    .enroll-btn { font-size: 15px; padding: 12px 18px; }

    .hero-content {
        width: min(58%, 720px);
        padding: 34px 38px;
    }
    .hero-content p,
    .hero-description { font-size: 1.08rem; line-height: 1.65; }
    .hero-content .btn,
    .hero-content a[class*="btn"] { font-size: 1rem; }

    .about-section,
    .courses-section,
    .why-choose-section,
    .contact-section {
        padding-top: 62px;
        padding-bottom: 68px;
    }
    .how-it-works-section,
    .faq-section {
        padding-top: 52px;
        padding-bottom: 56px;
    }
    .learning-features-section { padding-top: 12px; padding-bottom: 28px; }

    .course-card h3 { font-size: 1.45rem; }
    .course-card p { font-size: 1.02rem; line-height: 1.58; }
    .course-card a,
    .course-card .course-link { font-size: .9rem; }
    .course-card {
        background: rgba(247,231,206,.14);
        border-color: rgba(212,175,55,.50);
        box-shadow: 0 9px 26px rgba(0,0,0,.10);
    }

    .why-card h3 { font-size: 1.3rem; line-height: 1.18; }
    .why-card p { font-size: .98rem; line-height: 1.52; }

    .glass-info-card {
        min-height: 205px;
        padding: 24px;
    }
    .glass-info-card h3 { font-size: 1.32rem; }
    .glass-info-card p { font-size: 1rem; line-height: 1.58; }

    .learning-features { gap: 12px; }
    .learning-features span { padding: 11px 17px; font-size: .98rem; }

    .faq-container { max-width: 1040px; }
    .faq-list summary { font-size: 1.08rem; padding-top: 19px; padding-bottom: 19px; }
    .faq-list details p { font-size: 1rem; }

    .contact-container { max-width: 1240px; }
    .contact-form-card h3 { font-size: 1.4rem; }
    .contact-form-card label { font-size: .96rem; }
    .contact-form-card input,
    .contact-form-card select,
    .contact-form-card textarea {
        font-size: 1rem;
    }
    .contact-form-card button,
    .contact-form-card .submit-btn { font-size: 1rem; }

    footer, .footer { font-size: 1rem; }
    .footer h3, .footer h4, footer h3, footer h4 { font-size: 1.08rem; }
    .footer a, .footer p, footer a, footer p { font-size: .95rem; line-height: 1.55; }
}

/* Mobile: keep the polished compact layout and improve tap/readability */
@media (max-width: 700px) {
    .about-section,
    .courses-section,
    .why-choose-section,
    .contact-section {
        padding-top: 42px !important;
        padding-bottom: 46px !important;
    }
    .how-it-works-section,
    .faq-section {
        padding-top: 38px !important;
        padding-bottom: 42px !important;
    }
    .learning-features-section { padding-bottom: 20px !important; }

    .contact-cards {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 16px !important;
    }
    .contact-form-card {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
    }

    footer, .footer { font-size: 13px; }
    .footer h3, .footer h4, footer h3, footer h4 { font-size: 14px; }
    .footer a, .footer p, footer a, footer p { font-size: 12px; line-height: 1.5; }
}

/* Gentle WhatsApp attention animation without constant bouncing */
@keyframes nqaWhatsAppPulse {
    0%, 78%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
    84% { transform: scale(1.08); box-shadow: 0 8px 26px rgba(0,0,0,.24); }
    90% { transform: scale(1); }
    95% { transform: scale(1.06); }
}
.whatsapp-float,
.floating-whatsapp,
a[href*="wa.me"].whatsapp-float {
    animation: nqaWhatsAppPulse 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float,
    .floating-whatsapp,
    a[href*="wa.me"].whatsapp-float { animation: none !important; }
}


/* =========================================================
   DESKTOP PAGE CONSISTENCY — 2026-10-07
   Desktop only. Mobile styles are intentionally untouched.
========================================================= */
@media (min-width: 901px) {
    /* Courses: match the calmer Home/About desktop type scale. */
    .courses-page .courses-heading h2 {
        font-size: clamp(36px, 3.25vw, 46px);
    }
    .courses-page .courses-heading p {
        font-size: 15px;
        line-height: 1.6;
    }
    .courses-page .course-card h3 {
        font-size: 1.28rem;
    }
    .courses-page .course-card p {
        font-size: .94rem;
        line-height: 1.55;
    }
    .courses-page .course-card a,
    .courses-page .course-card .course-link {
        font-size: .82rem;
    }

    /* Why Us: requested two-line hierarchy, academy name on one line. */
    .why-page .why-choose-heading {
        max-width: 1050px;
        text-align: center;
    }
    .why-page .why-choose-heading h2 {
        white-space: nowrap;
        font-size: clamp(38px, 4vw, 54px);
        line-height: 1.08;
    }

    /* Contact: reduce oversized desktop heading/type only. */
    .contact-page .contact-heading h2 {
        font-size: clamp(36px, 3.25vw, 46px);
    }
    .contact-page .contact-heading p {
        font-size: 15px;
        line-height: 1.6;
    }
    .contact-page .contact-form-card h3 {
        font-size: 1.28rem;
    }
    .contact-page .contact-form-card label {
        font-size: .9rem;
    }
    .contact-page .contact-form-card input,
    .contact-page .contact-form-card select,
    .contact-page .contact-form-card textarea,
    .contact-page .contact-form-card button,
    .contact-page .contact-form-card .submit-btn {
        font-size: .94rem;
    }

    /* Enroll: center the complete card on desktop instead of first grid column. */
    .enroll-page .contact-heading h2 {
        font-size: clamp(36px, 3.25vw, 46px);
    }
    .enroll-page .contact-heading p {
        font-size: 15px;
    }
    .enroll-page .contact-cards {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }
    .enroll-page .enrollment-card {
        width: min(100%, 760px);
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
    .enroll-page .contact-form-card h3 { font-size: 1.28rem; }
    .enroll-page .contact-form-card label { font-size: .9rem; }
    .enroll-page .contact-form-card input,
    .enroll-page .contact-form-card select,
    .enroll-page .contact-form-card textarea,
    .enroll-page .contact-form-card button,
    .enroll-page .contact-form-card .submit-btn { font-size: .94rem; }
}


/* =====================================================
   LEGAL / ADSENSE POLICY PAGES ONLY — 2026-10-07
   Does not alter existing page layouts.
===================================================== */
.legal-page { padding: 150px 24px 70px; background: #F7E7CE; }
.legal-container { width: min(100%, 980px); margin: 0 auto; padding: 38px 42px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255,255,255,.28); box-shadow: 0 12px 34px rgba(0,0,0,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.legal-eyebrow { display:block; margin-bottom:10px; color:#D4AF37; font-weight:800; letter-spacing:.14em; font-size:.88rem; }
.legal-container h1 { margin:0 0 8px; font-size:clamp(2.2rem,5vw,4rem); line-height:1.05; }
.legal-updated { margin:0 0 30px !important; font-size:.95rem !important; opacity:.75; }
.legal-container h2 { margin:30px 0 10px; font-size:1.35rem; line-height:1.25; }
.legal-container p { margin:0 0 14px; line-height:1.75; font-size:1rem; }
.legal-container a { color:#8a6811; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:700px) {
  .legal-page { padding:110px 14px 42px; }
  .legal-container { padding:24px 18px; border-radius:18px; }
  .legal-container h1 { font-size:2.15rem; }
  .legal-container h2 { font-size:1.18rem; margin-top:24px; }
  .legal-container p { font-size:.96rem; line-height:1.65; }
}


/* =====================================================
   FACULTY — APPROVED CARD STYLE
===================================================== */
.faculty-section{padding:76px 0 68px;background:#F7E7CE;overflow:hidden}
.faculty-container{width:min(100% - 48px,1280px);margin:0 auto}
.faculty-heading{text-align:center;margin:0 auto 34px;max-width:760px}
.faculty-eyebrow{display:block;color:#D4AF37;font-weight:800;letter-spacing:.18em;font-size:.9rem;margin-bottom:9px}
.faculty-heading h2{margin:0;color:#24211d;font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.25rem,4vw,3.65rem);line-height:1.05}
.faculty-heading p{margin:13px 0 0;color:#514a40;font-size:1.04rem}
.faculty-track{display:flex;gap:30px;overflow-x:auto;padding:16px 10px 28px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#D4AF37 rgba(255,255,255,.45);overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.faculty-track::-webkit-scrollbar{height:7px}
.faculty-track::-webkit-scrollbar-track{background:rgba(255,255,255,.42);border-radius:20px}
.faculty-track::-webkit-scrollbar-thumb{background:#D4AF37;border-radius:20px}
.faculty-card{position:relative;flex:0 0 560px;height:760px;border-radius:34px;overflow:hidden;scroll-snap-align:center;background:linear-gradient(180deg,#f8f1e2 0%,#f3e5c8 100%);border:2px solid rgba(212,175,55,.78);box-shadow:0 18px 48px rgba(110,84,22,.14),inset 0 1px 0 rgba(255,255,255,.95);transform-style:preserve-3d;transition:transform .35s ease,box-shadow .35s ease;cursor:pointer}
.faculty-card::before{content:"";position:absolute;inset:18px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 36%,rgba(212,175,55,.06) 100%);pointer-events:none}
.faculty-card:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(92,67,13,.2),0 0 30px rgba(212,175,55,.14)}
.faculty-top-copy{position:absolute;z-index:3;top:34px;left:32px;right:32px;text-align:center;text-shadow:0 1px 12px rgba(255,255,255,.8)}
.faculty-top-copy h3{margin:0;color:#29231a;font-family:Georgia,'Times New Roman',serif;font-size:3.1rem;line-height:1.08;font-weight:700}
.faculty-top-copy p{display:none}
.faculty-portrait{position:absolute;left:50%;top:138px;transform:translateX(-50%);width:305px;height:432px;border-radius:44% 44% 14% 14% / 28% 28% 8% 8%;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.98),rgba(247,231,206,.82) 58%,rgba(212,175,55,.2) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid rgba(212,175,55,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.faculty-portrait::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%);pointer-events:none;z-index:2}
.faculty-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}
.faculty-portrait span{position:relative;z-index:1;color:#9b7a22;font-size:1.2rem;font-weight:800;letter-spacing:.2em}
.faculty-portrait:has(img:not([style*="display: none"])) span{display:none}
.faculty-glass-info{position:absolute;z-index:4;left:28px;right:28px;bottom:28px;padding:30px 32px 28px;border-radius:30px;background:rgba(255,248,235,.9);border:2px solid rgba(255,255,255,.85);box-shadow:0 16px 34px rgba(75,52,8,.12),inset 0 1px 0 rgba(255,255,255,.92);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);text-align:left}
.faculty-glass-info strong{display:block;color:#a47c12;font-family:Georgia,'Times New Roman',serif;font-size:2.05rem;line-height:1.12;margin-bottom:10px}
.faculty-glass-info p{margin:0;color:#403a31;font-size:1.16rem;line-height:1.4;max-width:92%}
.faculty-glass-info span{display:inline-block;margin-top:20px;padding:11px 26px;border-radius:999px;background:rgba(212,175,55,.10);border:2px solid rgba(212,175,55,.42);color:#8a6811;font-size:1.08rem;font-weight:700}
.faculty-swipe-hint{text-align:center;margin:8px 0 0;color:#8a6811;font-size:.84rem;font-weight:700;letter-spacing:.03em}
@media (min-width:1180px){.faculty-track{justify-content:center}}
@media (max-width:900px){.faculty-card{flex-basis:500px;height:700px}.faculty-top-copy h3{font-size:2.6rem}.faculty-portrait{width:270px;height:390px;top:132px}.faculty-glass-info strong{font-size:1.8rem}}
@media (max-width:700px){.faculty-section{padding:50px 0 46px}.faculty-container{width:min(100% - 24px,1220px)}.faculty-heading{margin-bottom:24px}.faculty-heading h2{font-size:2.15rem}.faculty-heading p{font-size:.94rem}.faculty-track{display:flex;gap:8px;overflow:hidden;scroll-snap-type:none;padding:10px 0 18px;height:500px;align-items:stretch;touch-action:pan-y}.faculty-card{flex:1 1 0;min-width:0;width:0;height:100%;border-radius:24px;transition:flex-grow .55s cubic-bezier(.22,1,.36,1),filter .55s ease,box-shadow .55s ease;scroll-snap-align:unset;transform:none!important;flex-basis:auto}.faculty-card.is-active{flex-grow:5.2;filter:none;box-shadow:0 18px 36px rgba(80,58,13,.22)}.faculty-card:not(.is-active){flex-grow:1;filter:saturate(.7) brightness(.95)}.faculty-card::before{inset:8px;border-radius:18px}.faculty-top-copy{top:16px;left:10px;right:10px;overflow:hidden}.faculty-top-copy h3{font-size:1.28rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.faculty-top-copy p{display:none}.faculty-portrait{top:76px;width:78%;height:55%;max-width:none;left:50%;transform:translateX(-50%);border-radius:42% 42% 12% 12% / 24% 24% 6% 6%}.faculty-portrait span{font-size:.9rem;letter-spacing:.12em}.faculty-glass-info{left:10px;right:10px;bottom:12px;padding:16px 16px 15px;border-radius:18px}.faculty-glass-info strong{font-size:1rem;margin-bottom:6px}.faculty-glass-info p{font-size:.87rem;line-height:1.38;max-width:100%}.faculty-glass-info span{margin-top:10px;padding:7px 14px;font-size:.78rem;border-width:1px}.faculty-card:not(.is-active) .faculty-top-copy,.faculty-card:not(.is-active) .faculty-glass-info{opacity:0;pointer-events:none}.faculty-card:focus-visible{outline:3px solid #D4AF37;outline-offset:-4px}.faculty-card:hover{transform:none}}
@media(max-width:380px){.faculty-track{height:455px;gap:6px}.faculty-card.is-active{flex-grow:5.8}.faculty-top-copy h3{font-size:1.08rem}.faculty-glass-info strong{font-size:.92rem}.faculty-glass-info p{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.faculty-card,.faculty-card::before{transition:none!important}.faculty-card:hover{transform:none}}
/* Increase navbar Enroll Now text only; keep button dimensions */
.navbar .enroll-btn{font-size:clamp(12px,1.12vw,16px)!important}
@media(max-width:700px){.navbar .enroll-btn{font-size:12px!important}}

/* Fee structure scroll stack — isolated from all existing site sections */
.fee-stack-section{position:relative;padding:70px 20px 100px;background:#F7E7CE;color:#29241d;isolation:isolate}
.fee-stack-heading{max-width:850px;margin:0 auto 44px;text-align:center}
.fee-stack-eyebrow{display:block;color:#b48b17;font-weight:800;letter-spacing:.19em;font-size:14px;margin-bottom:13px}
.fee-stack-heading h2{font-family:Georgia,serif;font-size:clamp(35px,4.5vw,58px);line-height:1.12;margin:0 0 17px;color:#28221d}
.fee-stack-heading h2 span{color:#D4AF37}
.fee-stack-heading p{font-size:clamp(16px,1.35vw,19px);max-width:640px;margin:0 auto;line-height:1.6;color:#5d554a}
.fee-stack{position:relative;max-width:1020px;margin:0 auto;padding-bottom:13vh}
.fee-stack-card{box-sizing:border-box;position:sticky;top:clamp(90px,16vh,150px);min-height:340px;padding:30px clamp(22px,4vw,50px);margin:0 auto 44vh;width:100%;border:1.5px solid rgba(212,175,55,.6);border-radius:28px;background:linear-gradient(125deg,rgba(255,255,255,.85),rgba(247,231,206,.98) 52%,rgba(230,204,142,.86));box-shadow:0 20px 50px rgba(98,73,28,.19),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform-origin:top center;will-change:transform}
.fee-stack-card:last-child{margin-bottom:0}
.fee-stack-card__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.fee-stack-number{font-size:14px;letter-spacing:.12em;font-weight:800;color:#9d7517}
.fee-stack-tag{font-size:12px;color:#846617;background:rgba(212,175,55,.13);border:1px solid rgba(212,175,55,.35);padding:8px 13px;border-radius:999px}
.fee-stack-card h3{font-family:Georgia,serif;font-size:clamp(27px,3vw,40px);line-height:1.15;color:#2c251b;margin:0 0 10px}
.fee-stack-caption{font-size:16px;color:#5c5244;line-height:1.5;margin:0 0 27px}
.fee-stack-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fee-stack-rates>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px;border:1px solid rgba(212,175,55,.38);border-radius:17px;background:rgba(255,255,255,.36);min-width:0}
.fee-stack-rates strong{font-size:16px;color:#382c16}
.fee-stack-placeholder{font-weight:700;color:#9c771a;background:rgba(212,175,55,.14);padding:8px 11px;border-radius:9px;font-size:14px}
@media(max-width:700px){
.fee-stack-section{padding:53px 12px 68px}
.fee-stack-heading{margin-bottom:30px}
.fee-stack-heading h2{font-size:clamp(30px,8vw,40px)}
.fee-stack-heading p{font-size:15px}
.fee-stack{padding-bottom:8vh}
.fee-stack-card{top:90px;min-height:390px;padding:22px 16px;margin-bottom:45vh;border-radius:22px}
.fee-stack-card__top{margin-bottom:17px}
.fee-stack-tag{font-size:10px;padding:6px 8px}
.fee-stack-card h3{font-size:clamp(24px,6vw,33px)}
.fee-stack-caption{font-size:13px;margin-bottom:17px}
.fee-stack-rates{grid-template-columns:1fr;gap:9px}
.fee-stack-rates>div{flex-direction:row;align-items:center;gap:10px;padding:13px 12px}
.fee-stack-rates strong{font-size:13px}
.fee-stack-placeholder{font-size:11px;white-space:nowrap;padding:7px 8px}
}
@media(max-width:360px){.fee-stack-card{padding:18px 12px}.fee-stack-rates strong{font-size:12px}.fee-stack-placeholder{font-size:10px}}
@media(prefers-reduced-motion:reduce){.fee-stack-card{will-change:auto!important;transform:none!important}}

/* FINAL TWO FIXES: release runway for seventh sticky fee card */
.fee-stack::after {content:"";display:block;height:70vh;min-height:430px;pointer-events:none;}
/* Enroll Now: enlarge its lettering visually without changing link layout or padding. */
@media (min-width:768px){.navbar a.enroll-btn > .enroll-text-zoom{display:inline-block;transform:scale(1.16);transform-origin:center;white-space:nowrap;}}

/* Fee stack stability correction: compact stacking and clean final release. */
.fee-stack { padding-bottom:0 !important; }
.fee-stack-card { margin-bottom:clamp(145px,26vh,230px) !important; top:clamp(94px,16vh,150px) !important; }
.fee-stack-card:last-child { margin-bottom:0 !important; }
.fee-stack::after { height:clamp(430px,76vh,800px) !important; min-height:430px !important; }
@media(max-width:700px){
 .fee-stack-card { margin-bottom:clamp(125px,24vh,195px) !important; top:90px !important; }
 .fee-stack::after { height:65vh !important; min-height:370px !important; }
}

/* Faculty desktop fit: three approved-style cards visible together.
   Mobile accordion CSS remains untouched. */
@media (min-width:701px){
 .faculty-container{width:min(calc(100% - 36px),1280px)}
 .faculty-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.7vw,24px);overflow:visible;justify-content:stretch;padding:12px 0 24px;scroll-snap-type:none}
 .faculty-card{width:100%;min-width:0;max-width:none;flex-basis:auto;height:clamp(400px,39vw,510px);border-radius:28px}
 .faculty-card::before{inset:10px;border-radius:22px}
 .faculty-top-copy{top:20px;left:10px;right:10px}
 .faculty-top-copy h3{font-size:clamp(1.3rem,2.25vw,2rem)}
 .faculty-portrait{top:25%;width:min(56%,190px);height:55%;max-height:270px;border-radius:44% 44% 14% 14% / 28% 28% 8% 8%}
 .faculty-portrait span{font-size:clamp(.65rem,1vw,.86rem);letter-spacing:.11em;text-align:center}
 .faculty-glass-info{left:clamp(9px,1.3vw,20px);right:clamp(9px,1.3vw,20px);bottom:clamp(9px,1.3vw,18px);padding:clamp(12px,1.4vw,19px);border-radius:21px}
 .faculty-glass-info strong{font-size:clamp(.94rem,1.35vw,1.3rem);margin-bottom:5px;line-height:1.15}
 .faculty-glass-info p{font-size:clamp(.77rem,1vw,.94rem);line-height:1.35;max-width:100%}
 .faculty-glass-info span{margin-top:10px;padding:6px 11px;font-size:clamp(.68rem,.9vw,.8rem);border-width:1px}
}

/* ============================================================
   FLOWING FEE MENU — ONLY the fee structure, desktop + mobile.
   Seven horizontal layers, readable rates and interactive marquees.
   ============================================================ */
.fee-flow-section{position:relative;isolation:isolate;background:#F7E7CE;color:#2d241a;padding:64px clamp(12px,3vw,36px) 76px;overflow:hidden}
.fee-flow-heading{max-width:840px;margin:0 auto 35px;text-align:center}
.fee-flow-eyebrow{display:block;color:#aa7e13;font-weight:800;letter-spacing:.17em;font-size:13px;margin-bottom:10px}
.fee-flow-heading h2{font-family:Georgia,serif;color:#29231b;font-size:clamp(32px,4.2vw,55px);line-height:1.12;margin:0 0 13px}
.fee-flow-heading h2 span{color:#bb921f}
.fee-flow-heading p{font-size:clamp(14px,1.3vw,18px);color:#5e5240;line-height:1.55;margin:0 auto;max-width:680px}
.fee-flow-menu{max-width:1250px;margin:0 auto;border:1px solid rgba(212,175,55,.62);border-radius:23px;overflow:hidden;box-shadow:0 16px 38px rgba(89,64,22,.14);background:#f7e7ce}
.fee-flow-item{position:relative;overflow:hidden;border-bottom:1px solid rgba(176,127,26,.45);background:linear-gradient(115deg,rgba(255,255,255,.73),rgba(249,237,210,.93) 55%,rgba(232,204,139,.58));transition:background .3s ease}
.fee-flow-item:last-child{border-bottom:0}
.fee-flow-item:hover,.fee-flow-item:focus-within{background:linear-gradient(110deg,#fff9ee,#f5e2b5)}
.fee-flow-item__main{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,1.65fr);align-items:center;gap:24px;padding:21px clamp(16px,3vw,36px) 10px}
.fee-flow-title{min-width:0}
.fee-flow-index{display:block;font-size:11px;letter-spacing:.16em;color:#a57a17;font-weight:800;margin-bottom:6px}
.fee-flow-title h3{font-family:Georgia,serif;font-size:clamp(21px,2.35vw,32px);line-height:1.14;color:#29231a;margin:0 0 7px}
.fee-flow-tag{display:inline-block;border:1px solid rgba(212,175,55,.45);background:rgba(212,175,55,.12);color:#7e5e13;border-radius:20px;padding:4px 9px;font-size:10px}
.fee-flow-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fee-flow-price{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:12px 13px;border:1px solid rgba(212,175,55,.42);border-radius:13px;background:rgba(255,255,255,.47)}
.fee-flow-price strong{font-size:clamp(12px,1.1vw,15px);line-height:1.25;color:#49371b}
.fee-flow-price span{font-size:clamp(13px,1.2vw,17px);font-weight:800;color:#9a7010;overflow-wrap:anywhere}
.fee-flow-caption{padding:0 clamp(16px,3vw,36px);margin:0 0 12px;color:#615747;font-size:12px;line-height:1.45}
.fee-flow-marquee{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab;background:linear-gradient(90deg,#c39a2a,#e6c56c,#d4af37);border-top:1px solid rgba(130,88,9,.25);color:#38250b;outline-offset:-3px;user-select:none;-webkit-user-select:none}
.fee-flow-marquee:active{cursor:grabbing}
.fee-flow-marquee:focus-visible{outline:3px solid #6f4a00}
.fee-flow-marquee__track{display:flex;align-items:center;width:max-content;will-change:transform}
.fee-flow-marquee__unit{flex:none;display:flex;align-items:center;gap:20px;white-space:nowrap;padding:10px 20px 11px 0;font-family:Georgia,serif;font-weight:700;font-size:clamp(14px,1.45vw,19px);letter-spacing:.01em}
.fee-flow-separator{color:#fff8df;font-size:14px;padding:0 2px}
.fee-flow-help{text-align:center;color:#866720;font-size:13px;margin:17px auto 0}
@media(max-width:700px){
.fee-flow-section{padding:48px 11px 57px}
.fee-flow-heading{margin-bottom:25px}
.fee-flow-heading h2{font-size:clamp(29px,7.5vw,39px)}
.fee-flow-heading p{font-size:14px}
.fee-flow-menu{border-radius:18px}
.fee-flow-item__main{grid-template-columns:1fr;gap:13px;padding:17px 13px 10px}
.fee-flow-title h3{font-size:clamp(22px,6vw,28px)}
.fee-flow-tag{font-size:10px}
.fee-flow-prices{gap:6px}
.fee-flow-price{padding:9px 6px;border-radius:10px;gap:6px}
.fee-flow-price strong{font-size:clamp(10px,2.8vw,12px)}
.fee-flow-price span{font-size:clamp(11px,3vw,14px)}
.fee-flow-caption{padding:0 13px;margin-bottom:11px;font-size:11px}
.fee-flow-marquee__unit{font-size:15px;padding-top:10px;padding-bottom:10px}
}
@media(max-width:360px){.fee-flow-price strong{font-size:10px}.fee-flow-price span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.fee-flow-marquee__track{will-change:auto}}


/* Fee Structure: original Courses card dimensions and responsive 3+3+1 / 2-column grid. */
.nqa-fee-section { padding: 75px 20px; }
.nqa-fee-container { width: min(1180px, 100%); margin-inline: auto; }
.nqa-fee-heading { text-align: center; margin-bottom: 30px; }
.nqa-fee-heading > span { display: block; color: #ae8424; font: 700 11px/1.4 Arial,sans-serif; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 10px; }
.nqa-fee-heading h2 { margin: 0 0 10px; color: #29231a; font-size: clamp(27px,3.3vw,40px); }
.nqa-fee-heading p { max-width: 590px; margin: 0 auto; color: #65543a; font-size: 14px; line-height: 1.65; }
.nqa-fee-grid .nqa-fee-card { min-height: 220px; padding: 20px; display: flex; flex-direction: column; gap: 0; isolation: isolate; }
.nqa-fee-card::before,.nqa-fee-card::after { content: none !important; }
.nqa-fee-grid .nqa-fee-card h3 { margin: 0 0 12px; font-size: 17px; line-height: 1.25; color: #29231a; }
.nqa-fee-number { align-self: flex-start; margin-bottom: 13px; border: 1px solid rgba(212,175,55,.5); background: rgba(212,175,55,.13); color: #99721c; border-radius: 8px; padding: 8px 9px; font: 700 10px/1 Arial,sans-serif; }
.nqa-fee-options { display: grid; gap: 7px; width: 100%; }
.nqa-fee-option { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(212,175,55,.37); border-radius: 11px; background: linear-gradient(110deg,rgba(255,250,239,.9),rgba(247,231,206,.75)); box-shadow: 0 2px 8px rgba(117,82,14,.05); opacity: 0; transform: translateY(13px) scale(.91); transition: transform .5s cubic-bezier(.2,1.5,.38,1), opacity .35s ease; transition-delay: calc(var(--fee-pop-order) * 105ms); }
.nqa-fee-card.nqa-fee-visible .nqa-fee-option { opacity: 1; transform: translateY(0) scale(1); }
.nqa-fee-frequency { font: 700 11px/1.3 Arial,sans-serif; color: #594729; }
.nqa-fee-amount { font: 800 13px/1.25 Arial,sans-serif; color: #98700e; white-space: nowrap; }
.nqa-fee-grid .course-enroll { margin-top: auto; }
@media (max-width: 700px) {
  .nqa-fee-section { padding: 48px 12px; }
  .nqa-fee-heading { margin-bottom: 23px; }
  .nqa-fee-heading p { font-size: 12px; }
  .nqa-fee-grid .nqa-fee-card { padding: 12px; min-height: 220px; }
  .nqa-fee-grid .nqa-fee-card h3 { font-size: 14px; margin-bottom: 10px; }
  .nqa-fee-option { flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px; }
  .nqa-fee-frequency { font-size: 10px; }
  .nqa-fee-amount { font-size: 12px; }
  .nqa-fee-number { padding: 6px 7px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .nqa-fee-option { opacity: 1; transform: none; transition: none; }
}


/* NOOR QURAN ACADEMYY — golden edge-following glow on existing cards.
   Decorative overlay only: no changes to content, layout or click behavior. */
.course-card, .why-card, .faculty-card, .glass-info-card, .contact-form-card {
  --nqa-edge-angle: 0deg;
  --nqa-edge-strength: 0;
  --nqa-edge-gold: #D4AF37;
  --nqa-edge-champagne: #F7E7CE;
  position: relative;
}
/* The mask makes a thin luminous BORDER rather than covering the card text. */
.nqa-border-light {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: conic-gradient(
    from var(--nqa-edge-angle) at 50% 50%,
    transparent 0deg,
    rgba(212,175,55,.06) 130deg,
    rgba(212,175,55,.8) 155deg,
    #F7E7CE 178deg,
    #D4AF37 194deg,
    rgba(212,175,55,.1) 225deg,
    transparent 260deg
  ) border-box !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none !important;
  z-index: 25 !important;
  opacity: var(--nqa-edge-strength) !important;
  transition: opacity .35s ease !important;
  box-shadow: none !important;
  transform: none !important;
}
.nqa-border-active {
  --nqa-edge-strength: 1;
}
@media (hover: hover) and (pointer: fine) {
  .course-card:hover, .why-card:hover, .faculty-card:hover,
  .glass-info-card:hover, .contact-form-card:hover {
    --nqa-edge-strength: 1;
  }
}
.course-card:focus-within, .why-card:focus-within, .faculty-card:focus-within,
.glass-info-card:focus-within, .contact-form-card:focus-within {
  --nqa-edge-strength: 1;
}
@media (prefers-reduced-motion: reduce) {
  .nqa-border-light { transition: none !important; }
}

/* Curved free-trial marquee between Why Us and Fee Structure only */


/* Premium floating social menu — gold academy launcher, brand-color icons. */
.nqa-social-float {
  position:fixed; right:25px; bottom:25px; z-index:9999;
  display:flex; flex-direction:column; align-items:center; gap:13px;
  font-family:Arial,sans-serif;
}
.nqa-social-toggle {
  position:relative; isolation:isolate; appearance:none; border:2px solid #fff5d8;
  padding:0; width:62px; height:62px; display:grid; place-items:center;
  border-radius:50%; background:linear-gradient(145deg,#f6d979 0%,#D4AF37 47%,#b88916 100%);
  color:#37290e; cursor:pointer;
  box-shadow:0 0 0 4px rgba(247,231,206,.55),0 9px 27px rgba(114,75,7,.36),0 0 20px rgba(212,175,55,.46);
  transition:transform .45s cubic-bezier(.2,1.4,.3,1),box-shadow .3s ease;
  animation:nqa-launcher-breathe 2.8s ease-in-out infinite;
}
.nqa-social-toggle::before {
  content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(212,175,55,.35);
  box-shadow:0 0 18px rgba(212,175,55,.23);pointer-events:none;
  animation:nqa-launcher-ring 2.8s ease-in-out infinite;
}
.nqa-social-toggle:hover,.nqa-social-float.is-open .nqa-social-toggle {
  transform:rotate(180deg) scale(1.08);
  box-shadow:0 0 0 4px rgba(247,231,206,.75),0 12px 30px rgba(114,75,7,.37),0 0 35px rgba(212,175,55,.75);
}
.nqa-social-toggle:focus-visible,.nqa-social-option:focus-visible {outline:3px solid #71500a;outline-offset:5px;}
.nqa-social-toggle svg {width:30px;height:30px;grid-area:1/1;transition:transform .35s ease,opacity .25s ease;}
.nqa-social-close-icon {opacity:0;transform:rotate(-80deg) scale(.6);}
.nqa-social-float.is-open .nqa-social-chat-icon {opacity:0;transform:rotate(90deg) scale(.6);}
.nqa-social-float.is-open .nqa-social-close-icon {opacity:1;transform:rotate(180deg) scale(1);}
.nqa-social-options {display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;}
.nqa-social-option {
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  border:2px solid rgba(255,255,255,.92); color:#fff; text-decoration:none;
  box-shadow:0 7px 19px rgba(40,36,27,.2),0 0 0 3px rgba(247,231,206,.7);
  opacity:0;transform:translateY(24px) rotate(-220deg) scale(.2);
  transition:opacity .22s ease,transform .56s cubic-bezier(.2,1.55,.35,1),box-shadow .2s ease;
  will-change:transform,opacity;
}
.nqa-social-option--whatsapp {background:#25D366;color:#fff;}
.nqa-social-option--telegram {background:#229ED9;color:#fff;}
.nqa-social-option--messenger {background:linear-gradient(145deg,#00B2FF 5%,#7555FF 55%,#FF5280 100%);color:#fff;}
.nqa-social-option svg {width:29px;height:29px;display:block;}
.nqa-social-float.is-open .nqa-social-options {pointer-events:auto;}
.nqa-social-float.is-open .nqa-social-option {opacity:1;transform:translateY(0) rotate(0deg) scale(1);}
.nqa-social-float.is-open .nqa-social-option:nth-child(3) {transition-delay:.035s;}
.nqa-social-float.is-open .nqa-social-option:nth-child(2) {transition-delay:.11s;}
.nqa-social-float.is-open .nqa-social-option:nth-child(1) {transition-delay:.185s;}
.nqa-social-float.is-open .nqa-social-option:hover {transform:translateY(-3px) rotate(8deg) scale(1.12);box-shadow:0 10px 23px rgba(40,36,27,.3),0 0 0 4px rgba(247,231,206,.9);}
@keyframes nqa-launcher-breathe {
  0%,100% {box-shadow:0 0 0 4px rgba(247,231,206,.55),0 9px 27px rgba(114,75,7,.36),0 0 16px rgba(212,175,55,.35);}
  50% {box-shadow:0 0 0 5px rgba(247,231,206,.8),0 9px 27px rgba(114,75,7,.4),0 0 32px rgba(212,175,55,.8);}
}
@keyframes nqa-launcher-ring {0%,100%{opacity:.4;transform:scale(.96)}50%{opacity:1;transform:scale(1.13)}}
@media(max-width:700px){
  .nqa-social-float {right:16px;bottom:18px;gap:11px;}
  .nqa-social-toggle {width:57px;height:57px;}
  .nqa-social-option {width:50px;height:50px;}
  .nqa-social-option svg {width:27px;height:27px;}
}
@media(prefers-reduced-motion:reduce){
  .nqa-social-toggle,.nqa-social-toggle::before {animation:none!important;}
  .nqa-social-toggle,.nqa-social-toggle svg,.nqa-social-option {transition:none!important;}
}


/* =============================================================
   ONE FIXED ACADEMY WATERMARK + FLOATING CONTENT
   Gold/Champagne theme; preserves all existing layouts and scripts.
   ============================================================= */
html { background-color: #F7E7CE; }
body { background-color: #F7E7CE; isolation: isolate; }
/* One logo only, faint and fixed behind the entire page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/logo.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: min(43vw, 490px) auto;
  opacity: .052;
}
/* Let the Champagne background and single watermark show between cards. */
main > .about-section,
main > .courses-section,
main > .faculty-section,
main > .why-choose-section,
main > .nqa-fee-section,
main > .how-it-works-section,
main > .learning-features-section,
main > .faq-section,
main > .contact-section,
main > .legal-page {
  background-color: transparent !important;
  background-image: none !important;
}
/* Depth without disturbing existing animations or interactive transforms. */
main :is(.course-card, .why-card, .faculty-card, .nqa-fee-card,
         .glass-info-card, .contact-form-card, .legal-container) {
  box-shadow: 0 10px 28px rgba(98, 68, 20, .12),
              0 2px 8px rgba(98, 68, 20, .05);
}
main :is(.course-card, .why-card, .nqa-fee-card, .glass-info-card) {
  transition: box-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  main :is(.course-card, .why-card, .nqa-fee-card, .glass-info-card):hover {
    box-shadow: 0 18px 38px rgba(98, 68, 20, .19),
                0 5px 14px rgba(212, 175, 55, .13);
  }
}
/* Keep the watermark restrained and cards readable on small screens. */
@media (max-width: 700px) {
  body::before {
    background-size: min(70vw, 280px) auto;
    opacity: .042;
  }
  main :is(.course-card, .why-card, .faculty-card, .nqa-fee-card,
           .glass-info-card, .contact-form-card, .legal-container) {
    box-shadow: 0 6px 17px rgba(98, 68, 20, .10);
  }
}
@media (prefers-reduced-motion: reduce) {
  main :is(.course-card, .why-card, .nqa-fee-card, .glass-info-card) {
    transition: none;
  }
}


/* =============================================================
   GOLD + CHAMPAGNE GLASSMORPHISM — CARD SURFACES ONLY
   Preserves existing markup, content, dimensions, grids, and scripts.
   One fixed academy watermark stays unchanged behind the page.
   ============================================================= */
:root {
  --nqa-glass-surface: linear-gradient(135deg,
    rgba(255,255,255,.69) 0%,
    rgba(255,250,239,.43) 36%,
    rgba(247,231,206,.30) 76%,
    rgba(255,255,255,.51) 100%);
  --nqa-glass-edge: rgba(255,255,255,.84);
  --nqa-glass-shadow: 0 16px 38px rgba(110,78,28,.15),
    0 3px 12px rgba(132,94,28,.07),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(212,175,55,.15);
}
/* Shared glass treatment; no layout or geometry changes. */
main :is(.course-card, .why-card, .faculty-card, .contact-form-card,
         .glass-info-card, .review-card, .legal-container) {
  background: var(--nqa-glass-surface) !important;
  border-color: var(--nqa-glass-edge) !important;
  box-shadow: var(--nqa-glass-shadow) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
  backdrop-filter: blur(20px) saturate(1.35) !important;
}
/* Fee cards retain their original pop-in effect, dimensions and rates. */
main .nqa-fee-grid .nqa-fee-card {
  background: var(--nqa-glass-surface) !important;
  border-color: var(--nqa-glass-edge) !important;
  box-shadow: var(--nqa-glass-shadow) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
  backdrop-filter: blur(20px) saturate(1.35) !important;
}
/* The existing founder/CEO/HR inner information panels also become glass. */
main .faculty-glass-info {
  background: linear-gradient(145deg,rgba(255,255,255,.79),rgba(247,231,206,.51)) !important;
  border-color: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 28px rgba(94,67,25,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
}
/* Delicate champagne sheen without blocking links or existing glow overlays. */
main :is(.course-card, .why-card, .faculty-card, .contact-form-card,
         .glass-info-card, .review-card, .legal-container) {
  outline: 1px solid rgba(212,175,55,.18);
  outline-offset: -2px;
}
@media (hover:hover) and (pointer:fine) {
  main :is(.course-card, .why-card, .faculty-card, .contact-form-card,
           .glass-info-card, .review-card, .legal-container):hover,
  main .nqa-fee-grid .nqa-fee-card:hover {
    box-shadow: 0 22px 46px rgba(110,78,28,.20),
      0 5px 16px rgba(212,175,55,.13),
      inset 0 1px 0 rgba(255,255,255,.99),
      0 0 22px rgba(212,175,55,.10) !important;
  }
}
/* Keep contrast and readability of text on translucent glass. */
main :is(.course-card, .why-card, .faculty-card, .contact-form-card,
         .glass-info-card, .review-card, .legal-container) {
  color: #342819;
}
@media (max-width:700px) {
  main :is(.course-card, .why-card, .faculty-card, .contact-form-card,
           .glass-info-card, .review-card, .legal-container),
  main .nqa-fee-grid .nqa-fee-card {
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    box-shadow: 0 8px 22px rgba(110,78,28,.13),
      inset 0 1px 0 rgba(255,255,255,.91) !important;
  }
  main .faculty-glass-info {
    -webkit-backdrop-filter: blur(13px) !important;
    backdrop-filter: blur(13px) !important;
  }
}


/* ============================================================
   HOMEPAGE LANDING ONLY — reference-inspired champagne hero
   Scoped to body.nqa-home-landing; other pages are untouched.
   ============================================================ */
body.nqa-home-landing .navbar {
  background:linear-gradient(115deg,rgba(255,255,255,.70),rgba(255,246,226,.43),rgba(255,255,255,.54));
  border:1px solid rgba(255,255,255,.91);
  box-shadow:0 10px 30px rgba(104,70,24,.14),inset 0 1px 0 #fff;
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
}
body.nqa-home-landing .nav-links a {color:#3a2b16;background:rgba(255,255,255,.14);border-color:transparent;}
body.nqa-home-landing .nav-links a:hover,
body.nqa-home-landing .nav-links a.active {background:rgba(212,175,55,.23);border-color:rgba(212,175,55,.42);}
body.nqa-home-landing .enroll-btn {background:linear-gradient(145deg,#f3d98a,#c28b1c 65%,#a86f0f);color:#fff;border:1px solid rgba(255,245,212,.8);box-shadow:0 6px 15px rgba(136,85,12,.2);}
body.nqa-home-landing .hero {
  min-height:clamp(610px,75vh,810px);
  margin-top:-88px;
  padding:115px 5vw 55px;
  background-image:url("../images/home-hero.webp?v=20261003-1");
  background-size:cover;
  background-position:center 49%;
  color:#302110;
}
body.nqa-home-landing .hero-overlay {
  background:linear-gradient(90deg,rgba(255,246,225,.94) 0%,rgba(255,241,212,.84) 40%,rgba(248,225,180,.35) 78%,rgba(255,234,195,.25) 100%),linear-gradient(0deg,rgba(247,231,206,.98),transparent 25%);
}
body.nqa-home-landing .nqa-hero-inner {
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:1270px;margin:0 auto;gap:28px;
}
body.nqa-home-landing .hero-content {
  width:min(67%,770px);max-width:none;margin:0;padding:28px 0;color:#302110;
}
body.nqa-home-landing .hero-small-title {
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;
  width:fit-content;padding:9px 15px;border-radius:100px;
  background:rgba(255,252,243,.68);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 15px rgba(139,93,22,.1);
  font-size:10px;letter-spacing:2px;color:#9e6b14;margin-bottom:25px;
}
body.nqa-home-landing .hero-welcome {color:#8b5a11;}
body.nqa-home-landing .hero-brand {color:#a7781e;}
body.nqa-home-landing .hero-content h1 {
  font-size:clamp(44px,5.1vw,76px);line-height:1.07;letter-spacing:-1.5px;
  color:#32200d;text-shadow:0 2px 16px rgba(255,255,255,.7);margin-bottom:20px;
}
body.nqa-home-landing .hero-description {
  color:#5e472d;font-size:clamp(14px,1.2vw,18px);line-height:1.75;
  max-width:630px;margin-bottom:28px;
}
body.nqa-home-landing .hero-buttons {gap:14px;}
body.nqa-home-landing .hero-btn {
  display:inline-flex;justify-content:center;align-items:center;gap:15px;
  border-radius:18px;padding:15px 23px;min-width:165px;
  font-size:14px;box-shadow:0 8px 18px rgba(110,73,18,.14);
}
body.nqa-home-landing .hero-btn.primary-btn {
  background:linear-gradient(150deg,#e8bf57,#bd8219 70%,#9f670e);
  color:white;border:1px solid #f7d88b;
}
body.nqa-home-landing .hero-btn.secondary-btn {
  background:rgba(255,255,255,.53);color:#805214;border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.nqa-home-landing .hero-btn:hover {transform:translateY(-3px);box-shadow:0 12px 25px rgba(110,73,18,.2);}
body.nqa-home-landing .nqa-hero-benefits {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;max-width:585px;margin-top:38px;}
body.nqa-home-landing .nqa-hero-benefit {display:flex;align-items:center;flex-direction:column;gap:9px;text-align:center;font:12px/1.35 Arial,sans-serif;color:#4c3218;}
body.nqa-home-landing .nqa-hero-benefit-icon {
  width:47px;height:47px;display:grid;place-items:center;
  font:28px/1 Georgia,serif;color:#9f6b19;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(234,192,114,.35));
  box-shadow:0 6px 16px rgba(115,75,15,.12),inset 0 1px 0 #fff;
}
body.nqa-home-landing .nqa-hero-trial {
  width:245px;min-height:300px;flex:0 0 245px;display:flex;align-items:flex-start;flex-direction:column;
  padding:27px 26px;border-radius:25px;
  background:linear-gradient(135deg,rgba(255,255,255,.67),rgba(250,228,190,.36) 65%,rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 20px 40px rgba(104,66,18,.18),inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
}
body.nqa-home-landing .nqa-hero-trial-symbol {font-size:35px;color:#a97413;margin-bottom:15px;}
body.nqa-home-landing .nqa-hero-trial-kicker {font:700 10px/1.5 Arial,sans-serif;letter-spacing:2px;color:#986a1e;margin-bottom:7px;}
body.nqa-home-landing .nqa-hero-trial h2 {font-size:29px;line-height:1.13;color:#53300e;margin-bottom:12px;}
body.nqa-home-landing .nqa-hero-trial p {font:13px/1.65 Arial,sans-serif;color:#65492a;margin-bottom:20px;}
body.nqa-home-landing .nqa-hero-trial a {
  display:grid;place-items:center;width:45px;height:45px;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);background:linear-gradient(145deg,#eac77c,#b9801a);
  color:white;font:26px/1 Arial,sans-serif;text-decoration:none;
  box-shadow:0 7px 18px rgba(115,75,15,.18);transition:transform .25s;
}
body.nqa-home-landing .nqa-hero-trial a:hover {transform:translateX(4px);}
@media(max-width:900px) {
  body.nqa-home-landing .hero {padding:130px 5vw 55px;min-height:640px;}
  body.nqa-home-landing .hero-content {width:min(70%,640px);}
  body.nqa-home-landing .nqa-hero-trial {width:205px;flex-basis:205px;padding:22px 20px;min-height:275px;}
  body.nqa-home-landing .nqa-hero-trial h2 {font-size:25px;}
  body.nqa-home-landing .nqa-hero-benefits {margin-top:28px;}
}
@media(max-width:700px) {
  body.nqa-home-landing .navbar {background:rgba(255,250,238,.79);border-radius:19px;}
  body.nqa-home-landing .hero {
    margin-top:-90px;min-height:auto;padding:137px 5vw 56px;
    background-position:60% center;
  }
  body.nqa-home-landing .hero-overlay {
    background:linear-gradient(180deg,rgba(255,245,222,.88) 0%,rgba(255,242,217,.87) 55%,rgba(247,231,206,.94) 100%);
  }
  body.nqa-home-landing .nqa-hero-inner {display:flex;flex-direction:column;align-items:stretch;gap:22px;}
  body.nqa-home-landing .hero-content {width:100%;margin:0;padding:0;}
  body.nqa-home-landing .hero-small-title {font-size:9px;letter-spacing:1.2px;padding:8px 12px;margin-bottom:18px;}
  body.nqa-home-landing .hero-content h1 {font-size:clamp(37px,9vw,57px);letter-spacing:-.9px;line-height:1.12;margin-bottom:15px;}
  body.nqa-home-landing .hero-description {font-size:14px;line-height:1.7;margin-bottom:23px;}
  body.nqa-home-landing .hero-buttons {gap:10px;flex-wrap:nowrap;}
  body.nqa-home-landing .hero-btn {flex:1;min-width:0;padding:13px 10px;border-radius:14px;font-size:12px;gap:7px;}
  body.nqa-home-landing .nqa-hero-benefits {gap:5px;margin-top:26px;}
  body.nqa-home-landing .nqa-hero-benefit {font-size:10px;}
  body.nqa-home-landing .nqa-hero-benefit-icon {width:40px;height:40px;font-size:24px;}
  body.nqa-home-landing .nqa-hero-trial {
    align-self:center;width:min(100%,350px);min-height:auto;flex:none;
    display:grid;grid-template-columns:1fr auto;column-gap:14px;padding:18px 21px;border-radius:21px;
  }
  body.nqa-home-landing .nqa-hero-trial-symbol {grid-row:1;grid-column:1;font-size:25px;margin-bottom:5px;}
  body.nqa-home-landing .nqa-hero-trial-kicker {grid-column:1;grid-row:2;margin-bottom:4px;}
  body.nqa-home-landing .nqa-hero-trial h2 {grid-column:1;grid-row:3;font-size:23px;margin-bottom:7px;}
  body.nqa-home-landing .nqa-hero-trial p {grid-column:1;grid-row:4;margin:0;font-size:12px;}
  body.nqa-home-landing .nqa-hero-trial a {grid-column:2;grid-row:2/5;align-self:center;width:42px;height:42px;}
}
@media(max-width:360px) {
  body.nqa-home-landing .hero-content h1 {font-size:34px;}
  body.nqa-home-landing .hero-btn {font-size:11px;padding:12px 6px;}
  body.nqa-home-landing .nqa-hero-benefit {font-size:9px;}
}
@media(prefers-reduced-motion:reduce) {
  body.nqa-home-landing .hero-btn,body.nqa-home-landing .nqa-hero-trial a {transition:none;}
}


/* Course card artwork only: maintain original course order, copy, links and grid. */
.courses-grid > .course-card:not(.nqa-fee-card) {
  isolation:isolate;
  background:linear-gradient(110deg,rgba(255,249,235,.91) 0%,rgba(255,247,231,.85) 43%,rgba(255,250,240,.45) 100%);
  border-color:rgba(255,255,255,.86);
  box-shadow:0 10px 26px rgba(112,74,21,.13),inset 0 1px 0 rgba(255,255,255,.92);
}
.courses-grid > .course-card:not(.nqa-fee-card)::before {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,248,232,.99) 0%,rgba(255,248,232,.94) 34%,rgba(255,248,232,.68) 57%,rgba(255,248,232,.02) 100%);
}
.courses-grid > .course-card:not(.nqa-fee-card) > .nqa-course-art {
  position:absolute;z-index:-1;right:0;top:0;height:100%;width:57%;
  object-fit:cover;object-position:center;pointer-events:none;
  opacity:.90;filter:saturate(.91) contrast(.99);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 24%,#000 56%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 24%,#000 56%);
}
.courses-grid > .course-card:not(.nqa-fee-card) > :not(.nqa-course-art):not(.nqa-border-light) {
  position:relative;z-index:2;
}
.courses-grid > .course-card:not(.nqa-fee-card) h3,
.courses-grid > .course-card:not(.nqa-fee-card) h3 small {color:#3d2812;}
.courses-grid > .course-card:not(.nqa-fee-card) p {color:#60492d;}
.courses-grid > .course-card:not(.nqa-fee-card) .course-enroll {color:#986215;}
@media(max-width:700px) {
  .courses-grid > .course-card:not(.nqa-fee-card) > .nqa-course-art {width:64%;opacity:.74;}
  .courses-grid > .course-card:not(.nqa-fee-card)::before {
    background:linear-gradient(90deg,rgba(255,248,232,.98) 0%,rgba(255,248,232,.91) 46%,rgba(255,248,232,.27) 100%);
  }
}


/* PERFORMANCE: Preserve champagne glass appearance without expensive per-card backdrop repaints. */
main :is(.course-card,.why-card,.faculty-card,.contact-form-card,.glass-info-card,.review-card,.legal-container),
main .nqa-fee-grid .nqa-fee-card,main .faculty-glass-info {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Opaque-leaning translucent gradients retain the same warm frosted-glass visual. */
main :is(.course-card,.why-card,.faculty-card,.contact-form-card,.glass-info-card,.review-card,.legal-container),
main .nqa-fee-grid .nqa-fee-card {
  background:linear-gradient(135deg,rgba(255,253,246,.92),rgba(250,238,214,.88) 65%,rgba(255,251,241,.91)) !important;
}
main .faculty-glass-info {background:linear-gradient(145deg,rgba(255,252,243,.95),rgba(247,231,206,.92)) !important;}
/* The existing single watermark stays visible without a large fixed blur layer. */
@media (max-width:700px) {
  body::before {position:absolute;inset:0 0 auto; height:100vh;}
  body.nqa-home-landing .navbar,body.nqa-home-landing .hero-btn.secondary-btn,body.nqa-home-landing .nqa-hero-trial {
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }
  body.nqa-home-landing .navbar {background:rgba(255,250,238,.95);}
  body.nqa-home-landing .hero-btn.secondary-btn {background:rgba(255,252,246,.94);}
  body.nqa-home-landing .nqa-hero-trial {background:linear-gradient(135deg,rgba(255,253,247,.94),rgba(247,231,206,.90));}
}

/* ============================================================
   MOBILE NAVBAR CONSISTENCY + HOMEPAGE GAP CORRECTIONS
   Visual CSS only: all section content, order and scripts unchanged.
   ============================================================ */
/* Match the homepage premium champagne-glass navigation on every page. */
.navbar {
  background:linear-gradient(115deg,rgba(255,255,255,.83),rgba(255,246,226,.73),rgba(255,255,255,.8));
  border:1px solid rgba(255,255,255,.91);
  box-shadow:0 9px 25px rgba(104,70,24,.12),inset 0 1px 0 #fff;
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
}
.navbar .nav-links a {color:#3a2b16;background:rgba(255,255,255,.14);border-color:transparent;}
.navbar .nav-links a:hover,.navbar .nav-links a.active {background:rgba(212,175,55,.23);border-color:rgba(212,175,55,.42);}
.navbar .enroll-btn {background:linear-gradient(145deg,#f3d98a,#c28b1c 65%,#a86f0f);color:#fff;border:1px solid rgba(255,245,212,.8);box-shadow:0 6px 15px rgba(136,85,12,.2);}
/* Keep a modest safe gap below mobile browser controls without changing desktop. */
@media(max-width:700px) {
  .navbar,body.nqa-home-landing .navbar {
    top:10px;margin:10px auto 0;
    width:calc(100% - 16px);
    background:rgba(255,250,238,.97);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* Compensate for the navbar's extra 10px so the hero remains aligned. */
  body.nqa-home-landing .hero {margin-top:-100px;padding-top:147px;}
  /* Red-marked spaces: retain a small, consistent separation between sections. */
  body.nqa-home-landing .courses-section {padding-bottom:26px !important;}
  body.nqa-home-landing .faculty-section {padding-top:23px !important;padding-bottom:22px !important;}
  body.nqa-home-landing .why-choose-section {padding-top:20px !important;padding-bottom:24px !important;}
  body.nqa-home-landing .nqa-fee-section {padding-top:22px !important;padding-bottom:23px !important;}
  body.nqa-home-landing .how-it-works-section {padding-top:22px !important;}
}


/* Footer proximity line effect: desktop only. Mobile footer text/layout unchanged. */
@media (min-width:701px) {
 .site-footer .nqa-footer-line-nav > a {
  --nqa-near:0;position:relative;display:block;width:100%;max-width:100%;
  box-sizing:border-box;padding:2px 2px 2px 17px;margin-bottom:9px;
  font-size:12px;line-height:1.5;color:#F7E7CE;
  overflow-wrap:anywhere;
  transform:translate3d(calc(var(--nqa-near)*6px),0,0);
  transition:transform .18s ease,color .18s ease;
 }
 .site-footer .nqa-footer-line-nav > a::before {
  content:"";position:absolute;left:0;top:50%;height:1px;
  width:calc(9px + var(--nqa-near)*9px);
  background:#e3bb67;opacity:calc(.4 + var(--nqa-near)*.6);
  transition:width .18s ease,opacity .18s ease;
 }
 .site-footer .nqa-footer-line-nav > a:hover,
 .site-footer .nqa-footer-line-nav > a:focus-visible {
  --nqa-near:1;color:#f1cd80;
 }
}
/* Social dock retains the original icon links and motion, now with official colors. */
.site-footer .nqa-footer-dock {
 display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;
 gap:7px;width:fit-content;max-width:100%;padding:9px 10px;
 border:1px solid rgba(255,238,201,.2);border-radius:19px;
 background:linear-gradient(135deg,rgba(255,250,235,.12),rgba(220,170,70,.055));
 box-shadow:0 8px 18px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.1);
}
.site-footer .nqa-footer-dock .footer-social {
 --nqa-dock-scale:1;position:relative;
 width:36px;height:36px;min-width:36px;min-height:36px;
 padding:0;margin:0;border-radius:50%;
 border:1px solid rgba(255,255,255,.85);color:#fff;
 box-shadow:0 3px 9px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.35);
 transform:translate3d(0,calc((1 - var(--nqa-dock-scale))*6px),0) scale(var(--nqa-dock-scale));
 transition:transform .19s cubic-bezier(.2,1.2,.35,1),box-shadow .19s ease;
 transform-origin:center bottom;z-index:1;
}
.site-footer .nqa-footer-dock .footer-social.facebook {background:#1877F2;color:#fff;}
.site-footer .nqa-footer-dock .footer-social.linkedin {background:#0A66C2;color:#fff;}
.site-footer .nqa-footer-dock .footer-social.instagram {background:linear-gradient(135deg,#F58529 0%,#DD2A7B 46%,#8134AF 75%,#515BD4 100%);color:#fff;}
.site-footer .nqa-footer-dock .footer-social.telegram {background:#229ED9;color:#fff;}
.site-footer .nqa-footer-dock .footer-social.whatsapp {background:#25D366;color:#fff;}
.site-footer .nqa-footer-dock .footer-social:hover,
.site-footer .nqa-footer-dock .footer-social:focus-visible {
 --nqa-dock-scale:1.18;z-index:3;
 box-shadow:0 7px 16px rgba(0,0,0,.23),0 0 0 3px rgba(255,255,255,.16);
}
.site-footer .nqa-footer-dock .footer-social svg {width:18px;height:18px;flex-shrink:0;}
.site-footer .nqa-footer-line-nav > a:focus-visible,
.site-footer .nqa-footer-dock a:focus-visible {outline:2px solid #e6bd64;outline-offset:3px;}
@media(max-width:700px) {
 /* No changes to footer links, headings, or mobile layout; social dock only. */
 .site-footer .nqa-footer-dock {gap:6px;padding:7px;max-width:100%;}
 .site-footer .nqa-footer-dock .footer-social {width:32px;height:32px;min-width:32px;min-height:32px;}
 .site-footer .nqa-footer-dock .footer-social svg {width:16px;height:16px;}
}
@media(prefers-reduced-motion:reduce) {
 .site-footer .nqa-footer-line-nav > a,
 .site-footer .nqa-footer-line-nav > a::before,
 .site-footer .nqa-footer-dock .footer-social {transition:none!important;}
}


/* Desktop footer only: move social dock visually to left brand, reserve map beneath Contact.
   Mobile markup and styling are untouched: original dock remains in Contact. */
@media (min-width: 768px) {
  .site-footer .nqa-footer-dock-left {
    display:flex;
    margin-top:18px;
    justify-content:flex-start;
    max-width:100%;
  }
  .site-footer .footer-contact > .nqa-footer-dock:not(.nqa-footer-dock-left) {
    display:none !important;
  }
  .site-footer .nqa-footer-map-slot {
    width:100%; min-height:142px; margin-top:20px; padding:16px 12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    box-sizing:border-box;
    border:1px dashed rgba(225,186,103,.52);border-radius:15px;
    background:linear-gradient(135deg,rgba(255,247,225,.10),rgba(208,162,67,.07));
    color:#F7E7CE;text-align:center;
  }
  .site-footer .nqa-footer-map-pin {font:32px/1 Georgia,serif;color:#D4AF37;}
  .site-footer .nqa-footer-map-title {font:700 14px/1.4 Georgia,serif;color:#F7E7CE;}
  .site-footer .nqa-footer-map-hint {font:12px/1.4 Arial,sans-serif;color:rgba(247,231,206,.7);}
}
@media (max-width: 767px) {
  .site-footer .nqa-footer-dock-left,
  .site-footer .nqa-footer-map-slot {display:none !important;}
}

/* DESKTOP ONLY: floating vertical social dock inspired by the supplied reference.
   Mobile footer, mobile social icons and all content are untouched. */
@media (min-width: 768px) {
  .nqa-footer-dock-left {
    position:fixed !important;
    left:clamp(12px,1.7vw,26px) !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    z-index:950 !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    width:66px !important;
    max-width:none !important;
    padding:12px 8px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.95) !important;
    border-radius:35px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(248,241,230,.83)) !important;
    box-shadow:0 14px 32px rgba(73,55,29,.19),inset 0 1px 0 #fff !important;
    backdrop-filter:blur(12px) saturate(1.1);
    -webkit-backdrop-filter:blur(12px) saturate(1.1);
    box-sizing:border-box !important;
  }
  .nqa-footer-dock-left .footer-social {
    --nqa-dock-scale:1;
    display:grid !important;
    place-items:center !important;
    flex:0 0 43px !important;
    width:43px !important;
    height:43px !important;
    min-width:43px !important;
    min-height:43px !important;
    padding:0 !important;
    margin:0 !important;
    background:linear-gradient(145deg,#fff,#f9f8f6) !important;
    border:1px solid rgba(255,255,255,.98) !important;
    border-radius:50% !important;
    box-shadow:0 4px 10px rgba(48,41,33,.13),inset 0 1px 0 #fff !important;
    transform:translate3d(calc((var(--nqa-dock-scale) - 1)*13px),0,0) scale(var(--nqa-dock-scale)) !important;
    transform-origin:left center !important;
    transition:transform .2s cubic-bezier(.2,1.15,.35,1),box-shadow .2s ease !important;
    position:relative;
    z-index:1;
  }
  .nqa-footer-dock-left .footer-social svg {
    display:block;width:22px;height:22px;fill:currentColor;
  }
  .nqa-footer-dock-left .footer-social.instagram svg {fill:none;stroke:currentColor;stroke-width:2;}
  .nqa-footer-dock-left .footer-social.instagram .instagram-dot {fill:currentColor;stroke:none;}
  .nqa-footer-dock-left .footer-social.facebook {color:#1877F2 !important;}
  .nqa-footer-dock-left .footer-social.linkedin {color:#0A66C2 !important;}
  .nqa-footer-dock-left .footer-social.instagram {color:#DD2A7B !important;}
  .nqa-footer-dock-left .footer-social.telegram {color:#229ED9 !important;}
  .nqa-footer-dock-left .footer-social.whatsapp {color:#25D366 !important;}
  .nqa-footer-dock-left .footer-social:hover,
  .nqa-footer-dock-left .footer-social:focus-visible {
    --nqa-dock-scale:1.27;
    z-index:5;
    box-shadow:0 7px 20px rgba(48,41,33,.22),0 0 0 3px rgba(212,175,55,.12) !important;
  }
  /* Original readable footer type size; retain line hover effect without numbers. */
  .site-footer .nqa-footer-line-nav > a {
    font-size:16px !important;
    line-height:1.55 !important;
    padding-top:1px !important;
    padding-bottom:1px !important;
    margin-bottom:10px !important;
    font-weight:400 !important;
  }
  .site-footer .nqa-footer-line-nav > h3 {
    font-size:25px !important;
    line-height:1.25 !important;
    margin-bottom:17px !important;
  }
  .site-footer .footer-contact .footer-email {
    font-size:16px !important;
    overflow-wrap:anywhere;
  }
  .site-footer .nqa-footer-map-slot {margin-top:22px;}
}
@media (min-width:768px) and (max-height:460px) {
  .nqa-footer-dock-left {gap:3px !important;padding:6px 5px !important;}
  .nqa-footer-dock-left .footer-social {width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;flex-basis:34px !important;}
}
@media (prefers-reduced-motion:reduce) {
  .nqa-footer-dock-left .footer-social {transition:none !important;}

/* Blue Area map: fill the original desktop footer placeholder footprint. */
@media (min-width: 768px) {
  .site-footer .nqa-footer-map-slot {
    height:142px; min-height:142px; padding:0; overflow:hidden;
    gap:0; display:block;
  }
  .site-footer .nqa-footer-map-slot iframe {
    display:block; width:100%; height:100%; border:0; border-radius:inherit;
  }
}
}

@media(max-width:767px){.nqa-footer-dock-left{display:none !important;}}

@media(min-width:768px){
.nqa-footer-dock-left .footer-social{text-decoration:none;cursor:pointer;}
.nqa-footer-dock-left .footer-social:focus-visible{outline:2px solid #D4AF37;outline-offset:3px;}
}

/* Desktop-only reveal for the existing vertical social dock. */
@media(min-width:768px) {
  body > .nqa-footer-dock-left {
    transition:translate .32s cubic-bezier(.2,.85,.3,1),opacity .28s ease !important;
    translate:0 0;
    opacity:1;
  }
  body > .nqa-footer-dock-left.nqa-dock-hidden {
    translate:calc(-100% - 32px) 0;
    opacity:0;
    pointer-events:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  body > .nqa-footer-dock-left {transition:none !important;}
}

/* Frosted champagne popup for COURSE selectors only; native select still owns form value. */
.nqa-course-picker {position:relative;width:100%;min-width:0;}
.nqa-course-picker--ready > select {
  position:absolute !important;left:0;top:0;width:1px !important;height:1px !important;
  min-width:0 !important;min-height:0 !important;padding:0 !important;
  opacity:0 !important;pointer-events:none !important;
}
.nqa-course-picker-trigger {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:48px;padding:12px 17px;
  border:1px solid rgba(220,184,112,.46);border-radius:12px;
  background:rgba(255,252,245,.66);color:#372d22;
  font:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.nqa-course-picker-trigger::after {
  content:"";flex:0 0 8px;width:8px;height:8px;
  border-right:2px solid #6e5831;border-bottom:2px solid #6e5831;
  transform:rotate(45deg) translateY(-2px);
}
.nqa-course-picker-trigger:focus-visible {outline:2px solid #cba23d;outline-offset:2px;}
.nqa-course-picker-list {
  position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:200;
  max-height:min(340px,55vh);overflow-y:auto;overscroll-behavior:contain;
  padding:7px;border:1px solid rgba(255,255,255,.88);border-radius:16px;
  background:linear-gradient(140deg,rgba(255,252,243,.97),rgba(247,230,199,.96));
  box-shadow:0 15px 32px rgba(95,65,22,.22),inset 0 1px 0 #fff;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.nqa-course-picker-list[hidden] {display:none !important;}
.nqa-course-picker-option {
  display:block;width:100%;padding:11px 13px;margin:0;
  border:0;border-radius:10px;background:transparent;
  color:#4b361b;font:inherit;text-align:left;cursor:pointer;
}
.nqa-course-picker-option:hover,.nqa-course-picker-option:focus-visible {
  background:rgba(212,175,55,.22);color:#5a3c0e;outline:none;
}
.nqa-course-picker-option[aria-selected="true"] {background:rgba(212,175,55,.17);font-weight:600;}

/* Course dropdown viewport placement: direction is chosen by available space. */
.nqa-course-picker-list:not([hidden]) {
  position:fixed !important;
  z-index:10020 !important;
  box-sizing:border-box;
  overscroll-behavior:contain;
}

/* Gentle, deliberate slide for the desktop-only social dock. */
@media (min-width:768px) {
  body > .nqa-footer-dock-left {
    transition:translate .82s cubic-bezier(.22,.75,.28,1), opacity .76s ease !important;
  }
}
/* The popup is portaled to the body, above transformed form panels. */
body > .nqa-course-picker-list:not([hidden]) {
  position:fixed !important;
  z-index:2147483000 !important;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(105,103,100,.65) transparent;
  box-sizing:border-box;
}
/* Small requested finishing touches only: keep layout and behavior unchanged. */
/* Round the About photograph corners cleanly. */
.about-image, .about-image img { border-radius: 24px; }
.about-image { overflow: hidden; }
/* Keep the footer map in its existing dimensions, with rounded edges and no dashed outline. */
.site-footer .nqa-footer-map-slot { border: 0 !important; border-radius: 24px !important; overflow: hidden; }
.site-footer .nqa-footer-map-slot iframe { border: 0 !important; border-radius: 24px !important; }
/* Remove the default hyperlink underline below the Arabic navbar inscription. */
.navbar .logo, .navbar .logo:link, .navbar .logo:visited,
.navbar .logo-name { text-decoration: none !important; }
.navbar .logo-name { border-bottom: 0 !important; }


/* Mobile footer social icons: two-column colored dock, matching the reference.
   Scoped to mobile footer only; desktop footer and all interactions stay intact. */
@media (max-width: 700px) {
  .site-footer .footer-contact .footer-socials.nqa-footer-dock {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    padding: 8px 6px;
    margin-top: 12px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
    box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.10);
  }
  .site-footer .footer-contact .footer-socials.nqa-footer-dock .footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    color: #fff;
  }
  .site-footer .footer-contact .footer-socials.nqa-footer-dock .footer-social svg {
    width: 18px;
    height: 18px;
  }
}


/* Mobile contact/footer adjustments — desktop appearance is unchanged. */
.nqa-mobile-footer-links, .nqa-mobile-contact-only {display:none !important;}
@media (max-width:767px) {
  /* Preserve the existing four-column footer; replace only Contact's social links. */
  .site-footer .footer-contact > .footer-socials.nqa-footer-dock {display:none !important;}
  .site-footer .footer-contact .nqa-mobile-footer-links {
    display:grid !important;grid-template-columns:repeat(2, 30px);
    gap:7px 8px;align-items:center;justify-content:start;
    margin:10px 0 0;padding:0;background:none;border:0;box-shadow:none;
  }
  .site-footer .nqa-mobile-footer-icon {
    width:30px;height:30px;min-width:30px;min-height:30px;
    border-radius:50%;display:grid;place-items:center;
    background:#f0f0f0;color:#252525;text-decoration:none;
    transition:background-color .18s ease,color .18s ease,transform .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .site-footer .nqa-mobile-footer-icon svg {width:17px;height:17px;fill:currentColor;}
  .site-footer .nqa-mobile-footer-icon.instagram svg {fill:none;stroke:currentColor;stroke-width:2;}
  .site-footer .nqa-mobile-footer-icon.instagram .instagram-dot {fill:currentColor;stroke:none;}
  .site-footer .nqa-mobile-footer-icon.facebook:active,.site-footer .nqa-mobile-footer-icon.facebook:focus-visible {background:#1877f2;color:#fff;}
  .site-footer .nqa-mobile-footer-icon.instagram:active,.site-footer .nqa-mobile-footer-icon.instagram:focus-visible {background:#c13584;color:#fff;}
  .site-footer .nqa-mobile-footer-icon.linkedin:active,.site-footer .nqa-mobile-footer-icon.linkedin:focus-visible {background:#0a66c2;color:#fff;}
  .site-footer .nqa-mobile-footer-icon.youtube:active,.site-footer .nqa-mobile-footer-icon.youtube:focus-visible {background:#ff0033;color:#fff;}
  /* Show full email on one line without ellipsis. The footer column width is unchanged. */
  .site-footer .footer-contact a.footer-email,
  .site-footer .footer-contact a.footer-email.is-expanded {
    display:block;max-width:100%;font-size:clamp(5px,1.15vw,8px) !important;
    letter-spacing:-.3px;line-height:1.6;white-space:nowrap !important;
    overflow:visible !important;text-overflow:clip !important;
    overflow-wrap:normal !important;word-break:normal !important;
  }
  /* Reuse the exact Blue Area embed in the existing Contact map slot. */
  .site-footer .nqa-footer-map-slot {
    display:block !important;width:100%;height:112px;min-height:112px;
    padding:0 !important;margin-top:12px !important;
    border:0 !important;border-radius:12px !important;overflow:hidden;
  }
  .site-footer .nqa-footer-map-slot iframe {
    display:block;width:100%;height:100%;border:0 !important;border-radius:inherit !important;
  }
  /* Contact bubble keeps its existing design and JS; add only mobile destinations. */
  .nqa-social-float .nqa-mobile-contact-only {display:grid !important;}
  .nqa-social-option--wechat {background:#07c160;color:#fff;}
  .nqa-social-option--email {background:#d4af37;color:#fff;}
  .nqa-social-option--telegram {order:1;}
  .nqa-social-option--whatsapp {order:2;}
  .nqa-social-option--wechat {order:3;}
  .nqa-social-option--messenger {order:4;}
  .nqa-social-option--email {order:5;}
  .nqa-social-option:active {filter:brightness(1.15);}
}


/* 2026-10-12: requested five focused improvements. */
/* 1. Footer contact email remains one line; Blue Area map sits directly beneath it. */
.site-footer .footer-contact a.footer-email,
.site-footer .footer-contact a.footer-email.is-expanded {
  display:block !important;
  max-width:100% !important;
  width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  letter-spacing:-.2px;
}
@media(min-width:768px){
  .site-footer .footer-contact a.footer-email,
  .site-footer .footer-contact a.footer-email.is-expanded {font-size:clamp(9px,1.05vw,13px) !important;}
  .site-footer .footer-contact .nqa-footer-map-slot {margin-top:12px !important;}
}
@media(max-width:767px){
  .site-footer .footer-contact a.footer-email,
  .site-footer .footer-contact a.footer-email.is-expanded {font-size:clamp(5px,1.15vw,8px) !important;}
  .site-footer .footer-contact .nqa-footer-map-slot {margin-top:10px !important;}
}
/* 2. New desktop social dock icons; preserve the dock's existing animation. */
@media(min-width:768px){
  .nqa-footer-dock-left .footer-social.wechat {color:#07C160 !important;}
  .nqa-footer-dock-left .footer-social.email {color:#C58F21 !important;}
  .nqa-footer-dock-left .footer-social.email svg {fill:none !important;stroke:currentColor !important;stroke-width:2 !important;}
}
/* 3-4. Glass-style searchable country and international phone country lists. */
.contact-section .country-search-options:not([hidden]),
.contact-section .iti__country-list,
.contact-section .iti__dropdown-content,
.iti--container .iti__dropdown-content,
.iti--container .iti__country-list {
  background:linear-gradient(145deg,rgba(255,253,247,.96),rgba(247,231,206,.91)) !important;
  border:1px solid rgba(212,175,55,.52) !important;
  border-radius:14px !important;
  box-shadow:0 14px 32px rgba(70,48,18,.17),inset 0 1px rgba(255,255,255,.9) !important;
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  overflow-x:hidden;
}
.contact-section .country-search-option,
.contact-section .iti__country,
.iti--container .iti__country {border-radius:7px;transition:background-color .16s ease,color .16s ease;}
.contact-section .country-search-option:hover,
.contact-section .country-search-option:focus-visible,
.contact-section .iti__country.iti__highlight,
.contact-section .iti__country:hover,
.iti--container .iti__country.iti__highlight,
.iti--container .iti__country:hover {
  background:rgba(212,175,55,.20) !important;
  color:#332611 !important;
}
.contact-section .iti__search-input,
.iti--container .iti__search-input {
  border:1px solid rgba(212,175,55,.4) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.68) !important;
}
/* 5. Desktop-only compact animated scroll-to-top replaces duplicate contact launcher. */
.nqa-back-to-top {display:none !important;}
@media(min-width:768px){
  .nqa-social-float {display:none !important;}
  .nqa-back-to-top {
    position:fixed;right:23px;bottom:24px;z-index:980;
    display:grid !important;place-items:center;width:45px;height:45px;
    border-radius:50%;border:1px solid rgba(255,250,227,.98);
    background:linear-gradient(145deg,#f4d775,#D4AF37 65%,#ba8c1c);
    color:#3a2b0e;cursor:pointer;
    box-shadow:0 0 0 3px rgba(247,231,206,.53),0 7px 20px rgba(95,64,11,.23);
    animation:nqa-top-float 3.4s ease-in-out infinite;
    transition:transform .22s ease,box-shadow .22s ease;
  }
  .nqa-back-to-top svg {width:21px;height:21px;}
  .nqa-back-to-top:hover {transform:translateY(-4px);box-shadow:0 0 0 4px rgba(247,231,206,.75),0 10px 24px rgba(95,64,11,.3);}
  .nqa-back-to-top:focus-visible {outline:3px solid #79550c;outline-offset:4px;}
}
@keyframes nqa-top-float {0%,100%{translate:0 0;}50%{translate:0 -4px;}}
@media(prefers-reduced-motion:reduce){.nqa-back-to-top{animation:none !important;transition:none !important;}}

/* Mobile-only footer, picker and contact-menu refinements — 2026-10-12. */
@media (max-width:700px) {
  /* Keep all four contact icons on one horizontal line, with touch feedback. */
  .site-footer .footer-contact .nqa-mobile-footer-links {
    display:flex !important; flex-flow:row nowrap !important;
    align-items:center !important; justify-content:flex-start !important;
    gap:clamp(3px, .7vw, 7px) !important; width:100%;
    margin:10px 0 8px !important;
  }
  .site-footer .footer-contact .nqa-mobile-footer-icon {
    flex:0 0 auto !important; width:clamp(22px,5.8vw,30px) !important;
    height:clamp(22px,5.8vw,30px) !important;
    min-width:0 !important;min-height:0 !important;
  }
  .site-footer .footer-contact .nqa-mobile-footer-icon svg {width:58%;height:58%;}
  .site-footer .nqa-mobile-footer-icon.facebook:active {background:#1877f2 !important;color:white !important;}
  .site-footer .nqa-mobile-footer-icon.instagram:active {background:#c13584 !important;color:white !important;}
  .site-footer .nqa-mobile-footer-icon.linkedin:active {background:#0a66c2 !important;color:white !important;}
  .site-footer .nqa-mobile-footer-icon.youtube:active {background:#ff0033 !important;color:white !important;}
  /* Map belongs to Contact column, not the copyright area. */
  .site-footer .footer-contact .nqa-footer-map-slot {
    position:relative !important;display:block !important;
    width:100% !important;height:112px !important;min-height:0 !important;
    margin:9px 0 0 !important;padding:0 !important;
    overflow:hidden !important;border-radius:12px !important;
  }
  .site-footer .footer-contact .nqa-footer-map-slot iframe {
    position:absolute !important;inset:0 !important;width:100% !important;
    height:100% !important;max-width:100% !important;border:0 !important;
  }
  .site-footer {min-height:0 !important;height:auto !important;}
  .site-footer .footer-container {flex:0 1 auto !important;}
  .site-footer .footer-main {padding-bottom:12px !important;align-content:start !important;}
  .site-footer .footer-bottom {margin-top:0 !important;}
  /* Fully conceal closed contact choices (including their layout and hit targets). */
  .nqa-social-float:not(.is-open) .nqa-social-options {
    visibility:hidden !important;pointer-events:none !important;
    max-height:0 !important;overflow:hidden !important;gap:0 !important;
    transition:visibility 0s linear .28s,max-height .28s ease;
  }
  .nqa-social-float.is-open .nqa-social-options {
    visibility:visible !important;max-height:380px !important;overflow:visible !important;
    transition:max-height .3s ease;
  }
  .nqa-social-float:not(.is-open) .nqa-social-option {
    opacity:0 !important;transform:translateY(12px) scale(.5) !important;
    transition-delay:0s !important;
  }
  .nqa-social-float .nqa-social-option {transition-delay:0s !important;}
  .nqa-social-float .nqa-social-toggle {transform:none !important;}
  .nqa-social-float.is-open .nqa-social-toggle {transform:scale(1.03) !important;}
  /* Readable searchable country pickers, without modifying form logic. */
  .contact-section .country-search-input,
  .contact-section .iti__search-input,
  .iti--container .iti__search-input {
    display:block !important;width:100% !important;box-sizing:border-box !important;
    min-height:44px !important;height:44px !important;
    padding:10px 13px !important;font-size:16px !important;line-height:22px !important;
    border:1px solid rgba(212,175,55,.55) !important;
    border-radius:11px !important;background:rgba(255,255,255,.88) !important;
    color:#27231e !important;box-shadow:0 2px 8px rgba(66,44,12,.08) !important;
  }
  .contact-section .country-search-option,
  .contact-section .iti__country,
  .iti--container .iti__country {font-size:14px !important;line-height:1.45 !important;min-height:41px !important;padding:9px 11px !important;}
  .contact-section .country-search-options:not([hidden]),
  .contact-section .iti__country-list,
  .iti--container .iti__country-list {max-height:min(50vh,310px) !important;overflow-y:auto !important;}
}

/* =========================================================
   MOBILE BROWSER "DESKTOP SITE" — TEXT AUTOSIZING SAFEGUARD
   Desktop-site mode can expose a desktop-width CSS viewport on a
   physically narrow screen. Prevent WebKit/Blink from independently
   enlarging text inside narrow grid columns and form cards.
   The site's existing responsive breakpoints still control layout.
========================================================= */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Touch devices requesting a desktop-width viewport: preserve the
   same typographic proportions as the ordinary desktop layout. */
@media (min-width: 768px) and (hover: none) and (pointer: coarse) {
    .steps-grid > .glass-info-card,
    .contact-cards > .contact-form-card,
    .why-choose-grid > .why-card,
    .courses-grid > *,
    .site-footer .footer-container > * {
        min-width: 0;
    }
    .steps-grid > .glass-info-card h3 {
        font-size: 1.25rem;
        line-height: 1.28;
        overflow-wrap: break-word;
    }
    .steps-grid > .glass-info-card p {
        font-size: 1rem;
        line-height: 1.65;
        overflow-wrap: break-word;
    }
    .contact-cards .contact-form-card label {
        overflow-wrap: break-word;
    }
}

/* Desktop-site on a phone: use the real desktop footer grid rather than
   the tablet/two-column layout. Scoped to touch devices with desktop viewport. */
@media (min-width: 768px) and (hover: none) and (pointer: coarse) {
  .site-footer { min-height: 0; height: auto; }
  .site-footer .footer-container { width: 100%; max-width: 1200px; margin-inline: auto; }
  .site-footer .footer-main {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) !important;
    gap: 22px !important;
    align-items: start;
  }
  .site-footer .footer-main > * { grid-column: auto !important; min-width: 0; }
  .site-footer .footer-contact { grid-column: 4 !important; }
  .site-footer .footer-contact .footer-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .site-footer .footer-contact .footer-social { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
  .site-footer .footer-contact .nqa-mobile-footer-icon { display: none !important; }
  .site-footer .footer-contact .nqa-footer-map-slot { max-width: 100%; }
  .site-footer .footer-bottom { margin-top: 12px; }
}
/* Keep browser scrolling native; expensive scroll-driven effects should not
   require painting offscreen images until they approach the viewport. */

/* Targeted fixes: Why Us phone-browser desktop request and mobile form controls. */
html.nqa-phone-desktop-mode .site-footer .footer-main {
 display:grid !important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) !important;
 gap:24px !important;align-items:start !important;
}
html.nqa-phone-desktop-mode .site-footer .footer-main > * {grid-column:auto !important;min-width:0 !important;}
html.nqa-phone-desktop-mode .site-footer .footer-main > .footer-contact {grid-column:4 !important;}
html.nqa-phone-desktop-mode .site-footer .footer-contact .nqa-mobile-footer-links {display:none !important;}
html.nqa-phone-desktop-mode .site-footer .footer-contact .footer-socials {display:flex !important;flex-wrap:wrap;gap:7px;}
html.nqa-phone-desktop-mode .site-footer .footer-contact .nqa-footer-map-slot {max-width:100%;}
@media (max-width:767px) {
 .contact-section .academy-form .form-group input:not([type=checkbox]):not([type=radio]),
 .contact-section .academy-form .form-group select,
 .contact-section .academy-form .country-search-input,
 .contact-section .academy-form .form-group .iti,
 .contact-section .academy-form .form-group .iti input[type=tel],
 .contact-section .academy-form .nqa-course-picker,
 .contact-section .academy-form .nqa-course-picker-trigger {
   box-sizing:border-box !important;width:100% !important;min-width:0 !important;height:52px !important;min-height:52px !important;max-height:52px !important;
   border-radius:11px !important;
 }
 .contact-section .academy-form .form-group textarea {
   box-sizing:border-box !important;width:100% !important;min-height:150px !important;height:150px !important;max-height:none !important;border-radius:11px !important;
 }
 .contact-section .academy-form .nqa-course-picker--ready > select {width:1px !important;height:1px !important;min-height:0 !important;}
}