/* =========================================================
   UFUQ INTERNATIONAL ACADEMY
   Main Stylesheet
   Arabic RTL - Responsive
========================================================= */


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    /* Brand Colors */

    --primary: #3F348F;
    --primary-dark: #30276F;
    --primary-light: #6D70B7;

    --secondary: #F15A24;
    --secondary-dark: #D94A18;
    --secondary-light: #FF7A45;

    --blue-soft: #7A7DC2;

    /* Backgrounds */

    --white: #FFFFFF;
    --off-white: #FAFAFD;
    --light-bg: #F5F5FA;
    --light-purple: #F0EFF9;
    --light-orange: #FFF2EC;

    /* Text */

    --text-dark: #22213A;
    --text: #4E4D60;
    --text-light: #77768A;

    /* Borders */

    --border: #E6E5EF;
    --border-dark: #D9D7E8;

    /* Shadows */

    --shadow-sm:
        0 5px 20px rgba(63, 52, 143, 0.07);

    --shadow:
        0 15px 45px rgba(63, 52, 143, 0.10);

    --shadow-lg:
        0 25px 70px rgba(63, 52, 143, 0.15);

    /* Radius */

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;

    /* Container */

    --container: 1180px;

    /* Transition */

    --transition:
        all 0.3s ease;

}


/* =========================================================
   02. RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}


body {

    font-family:
        "Cairo",
        "Tajawal",
        sans-serif;

    direction: rtl;

    background:
        var(--white);

    color:
        var(--text);

    line-height: 1.8;

    overflow-x: hidden;

}


body.modal-open {
    overflow: hidden;
}


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


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea {

    font-family: inherit;

}


button {
    border: none;
    cursor: pointer;
}


ul {
    list-style: none;
}


/* =========================================================
   03. GLOBAL CONTAINER
========================================================= */

.container {

    width: 100%;

    max-width:
        var(--container);

    margin:
        0 auto;

    padding:
        0 25px;

}


/* =========================================================
   04. SECTIONS
========================================================= */

.section {

    padding:
        110px 0;

    position: relative;

}


.section-heading {

    max-width: 720px;

    margin-bottom: 65px;

}


.center-heading {

    margin-left: auto;
    margin-right: auto;

    text-align: center;

}


.section-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        6px 16px;

    margin-bottom: 18px;

    background:
        var(--light-purple);

    color:
        var(--primary);

    border-radius:
        50px;

    font-size:
        13px;

    font-weight:
        700;

    position: relative;

}


.section-tag::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--secondary);

}


.section-heading h2 {

    font-size:
        clamp(30px, 4vw, 48px);

    line-height:
        1.35;

    color:
        var(--text-dark);

    font-weight:
        800;

    margin-bottom:
        18px;

}


.section-heading h2 span {

    color:
        var(--primary);

}


.section-heading p {

    color:
        var(--text-light);

    font-size:
        16px;

    line-height:
        2;

}


/* =========================================================
   05. NAVBAR
========================================================= */

.navbar {

    position:
        fixed;

    top: 0;

    right: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

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

    backdrop-filter:
        blur(14px);

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

    border-bottom:
        1px solid transparent;

    transition:
        var(--transition);

}


.navbar.scrolled {

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

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

    box-shadow:
        var(--shadow-sm);

}


.navbar-container {

    height:
        88px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

}


.logo img {

    width:
        125px;

    height:
        auto;

    object-fit:
        contain;

}


/* =========================================================
   NAV MENU
========================================================= */

.nav-menu {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.nav-link {

    position:
        relative;

    padding:
        9px 13px;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        600;

    border-radius:
        10px;

    transition:
        var(--transition);

}


.nav-link:hover {

    color:
        var(--primary);

    background:
        var(--light-purple);

}


.nav-link::after {

    content: "";

    position:
        absolute;

    right:
        13px;

    bottom:
        3px;

    width:
        0;

    height:
        2px;

    border-radius:
        2px;

    background:
        var(--secondary);

    transition:
        var(--transition);

}


.nav-link:hover::after,
.nav-link.active::after {

    width:
        calc(100% - 26px);

}


.nav-link.active {

    color:
        var(--primary);

}


.nav-contact {

    color:
        var(--white);

    background:
        var(--primary);

    padding:
        10px 20px;

    margin-right:
        8px;

}


.nav-contact:hover {

    color:
        var(--white);

    background:
        var(--secondary);

}


.nav-contact::after {

    display:
        none;

}


/* =========================================================
   NAVBAR SOCIAL ICONS
========================================================= */

.navbar-social {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-right:
        6px;

    padding-right:
        14px;

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

}


.navbar-social .social-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border-radius:
        50%;

    color:
        var(--primary);

    background:
        var(--light-purple);

    font-size:
        13px;

    transition:
        var(--transition);

}


.navbar-social .social-icon:hover {

    color:
        var(--white);

    background:
        var(--primary);

    transform:
        translateY(-2px);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {

    display:
        none;

    width:
        44px;

    height:
        44px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--light-purple);

    color:
        var(--primary);

    font-size:
        20px;

}


/* =========================================================
   06. HERO
========================================================= */

.hero {

    min-height:
        800px;

    padding-top:
        150px;

    padding-bottom:
        100px;

    position:
        relative;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 90% 15%,
            rgba(109, 112, 183, 0.15),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 70%,
            rgba(241, 90, 36, 0.08),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FAF9FE 100%
        );

}


.hero-container {

    min-height:
        620px;

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        50px;

}


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

.hero-content {

    position:
        relative;

    z-index:
        2;

}


.hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 16px;

    margin-bottom:
        22px;

    color:
        var(--primary);

    background:
        var(--light-purple);

    border:
        1px solid rgba(63, 52, 143, 0.08);

    border-radius:
        50px;

    font-size:
        13px;

    font-weight:
        700;

}


.hero-badge i {

    color:
        var(--secondary);

}


.hero-content h1 {

    color:
        var(--text-dark);

    font-size:
        clamp(42px, 5.5vw, 70px);

    line-height:
        1.25;

    font-weight:
        800;

    margin-bottom:
        25px;

    letter-spacing:
        -1px;

}


.hero-content h1 span {

    display:
        block;

    color:
        var(--primary);

    position:
        relative;

    width:
        fit-content;

}


.hero-content h1 span::after {

    content: "";

    position:
        absolute;

    right:
        0;

    bottom:
        -4px;

    width:
        45%;

    height:
        5px;

    border-radius:
        5px;

    background:
        var(--secondary);

}


.hero-description {

    max-width:
        620px;

    color:
        var(--text-light);

    font-size:
        17px;

    line-height:
        2;

    margin-bottom:
        30px;

}


.hero-description strong {

    color:
        var(--primary);

}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    flex-wrap:
        wrap;

}


.btn {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        12px 24px;

    border-radius:
        13px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        var(--transition);

}


.btn-primary {

    color:
        var(--white);

    background:
        var(--primary);

    box-shadow:
        0 10px 25px rgba(63, 52, 143, 0.20);

}


.btn-primary:hover {

    background:
        var(--secondary);

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px rgba(241, 90, 36, 0.22);

}


.btn-primary i {

    transition:
        var(--transition);

}


.btn-primary:hover i {

    transform:
        translateX(-4px);

}


.btn-outline {

    color:
        var(--primary);

    background:
        var(--white);

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

}


.btn-outline:hover {

    color:
        var(--white);

    background:
        var(--primary);

    border-color:
        var(--primary);

    transform:
        translateY(-3px);

}


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

.hero-stats {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        45px;

}


.hero-stat {

    display:
        flex;

    flex-direction:
        column;

}


.hero-stat strong {

    color:
        var(--primary);

    font-size:
        17px;

    font-weight:
        800;

}


.hero-stat span {

    color:
        var(--text-light);

    font-size:
        12px;

}


.stat-divider {

    width:
        1px;

    height:
        35px;

    background:
        var(--border-dark);

}


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

.hero-visual {

    min-height:
        560px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.hero-circle {

    width:
        450px;

    height:
        450px;

    border-radius:
        50%;

    position:
        absolute;

    background:
        linear-gradient(
            145deg,
            rgba(63, 52, 143, 0.12),
            rgba(109, 112, 183, 0.05)
        );

    border:
        1px solid rgba(63, 52, 143, 0.08);

}


.hero-circle::before {

    content: "";

    position:
        absolute;

    inset:
        30px;

    border:
        1px dashed
        rgba(63, 52, 143, 0.18);

    border-radius:
        50%;

}

/*
.hero-main-card {

    width:
        330px;

    min-height:
        360px;

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    border-radius:
        35px;

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

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

    box-shadow:
        var(--shadow-lg);

}
*/

.hero-main-card img {

    width:
        500px;

    height:
        auto;

    margin-bottom:
        15px;

}

/*
.hero-card-text {

    text-align:
        center;

    display:
        flex;

    flex-direction:
        column;

}
*/

.hero-card-text span {

    color:
        var(--primary-light);

    font-size:
        10px;

    letter-spacing:
        3px;

    font-weight:
        700;

}


.hero-card-text strong {

    color:
        var(--primary);

    font-size:
        22px;

    font-weight:
        800;

}


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

.hero-decoration {

    position:
        absolute;

    z-index:
        1;

    border-radius:
        50%;

}


.decoration-one {

    width:
        75px;

    height:
        75px;

    top:
        70px;

    right:
        30px;

    background:
        var(--secondary);

    opacity:
        0.85;

}


.decoration-two {

    width:
        45px;

    height:
        45px;

    bottom:
        75px;

    left:
        35px;

    background:
        var(--primary-light);

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {

    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        190px;

    padding:
        13px 15px;

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

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

    border-radius:
        15px;

    box-shadow:
        var(--shadow);

    animation:
        floatingCard 4s ease-in-out infinite;

}


.floating-card-top {

    top:
        95px;

    left:
        0;

}


.floating-card-bottom {

    bottom:
        85px;

    right:
        0;

    animation-delay:
        1.5s;

}


.floating-icon {

    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    color:
        var(--primary);

    background:
        var(--light-purple);

}


.orange-icon {

    color:
        var(--secondary);

    background:
        var(--light-orange);

}


.floating-card div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


.floating-card strong {

    color:
        var(--text-dark);

    font-size:
        12px;

}


.floating-card span {

    color:
        var(--text-light);

    font-size:
        10px;

}


@keyframes floatingCard {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


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

.hero-bottom-shape {

    position:
        absolute;

    bottom:
        -1px;

    left:
        0;

    width:
        100%;

    height:
        70px;

    background:
        var(--white);

    clip-path:
        ellipse(65% 100% at 50% 100%);

}


/* =========================================================
   07. ABOUT
========================================================= */

.about-section {

    background:
        var(--white);

}


.about-grid {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items:
        center;

    gap:
        80px;

}


/* =========================================================
   ABOUT VISUAL
========================================================= */

.about-visual {

    min-height:
        450px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.about-shape {

    width:
        380px;

    height:
        380px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--light-purple);

    border-radius:
        45% 55% 55% 45% / 55% 45% 55% 45%;

    transform:
        rotate(-5deg);

}


.about-shape::before {

    content: "";

    position:
        absolute;

    inset:
        18px;

    border:
        2px dashed
        rgba(63, 52, 143, 0.15);

    border-radius:
        inherit;

}


.about-logo-wrapper {

    width:
        270px;

    height:
        270px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--white);

    border-radius:
        50%;

    box-shadow:
        var(--shadow-lg);

    transform:
        rotate(5deg);

}


.about-logo-wrapper img {

    width:
        210px;

}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-small-title {

    display:
        block;

    color:
        var(--secondary);

    font-size:
        13px;

    font-weight:
        800;

    margin-bottom:
        8px;

}


.about-content h3 {

    color:
        var(--text-dark);

    font-size:
        clamp(28px, 4vw, 42px);

    line-height:
        1.4;

    font-weight:
        800;

    margin-bottom:
        20px;

}


.about-content h3 span {

    color:
        var(--primary);

}


.about-content > p {

    color:
        var(--text-light);

    font-size:
        15px;

    line-height:
        2;

    margin-bottom:
        12px;

}


.about-features {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        30px;

}


.about-feature {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.feature-icon {

    width:
        45px;

    height:
        45px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    color:
        var(--primary);

    background:
        var(--light-purple);

}


.orange-feature {

    color:
        var(--secondary);

    background:
        var(--light-orange);

}


.about-feature div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


.about-feature strong {

    color:
        var(--text-dark);

    font-size:
        12px;

}


.about-feature span {

    color:
        var(--text-light);

    font-size:
        10px;

}


/* =========================================================
   08. SERVICES
========================================================= */

.services-section {

    background:
        var(--off-white);

}


.services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        20px;

}


.service-card {

    min-height:
        330px;

    position:
        relative;

    overflow:
        hidden;

    padding:
        30px 25px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    transition:
        var(--transition);

}


.service-card::before {

    content: "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        100%;

    height:
        4px;

    background:
        var(--primary);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        var(--transition);

}


.service-card:hover {

    transform:
        translateY(-8px);

    border-color:
        transparent;

    box-shadow:
        var(--shadow);

}


.service-card:hover::before {

    transform:
        scaleX(1);

}


.service-number {

    position:
        absolute;

    top:
        20px;

    left:
        20px;

    color:
        var(--border-dark);

    font-size:
        24px;

    font-weight:
        800;

}


.service-icon {

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    color:
        var(--primary);

    background:
        var(--light-purple);

    border-radius:
        15px;

    font-size:
        23px;

    transition:
        var(--transition);

}


.service-card:hover .service-icon {

    color:
        var(--white);

    background:
        var(--primary);

    transform:
        scale(1.05);

}


.orange-service-icon {

    color:
        var(--secondary);

    background:
        var(--light-orange);

}


.service-card:hover
.orange-service-icon {

    color:
        var(--white);

    background:
        var(--secondary);

}


.service-card h3 {

    color:
        var(--text-dark);

    font-size:
        19px;

    margin-bottom:
        10px;

    font-weight:
        800;

}


.service-card p {

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        2;

}


.service-arrow {

    position:
        absolute;

    bottom:
        25px;

    left:
        25px;

    color:
        var(--primary);

    transition:
        var(--transition);

}


.service-card:hover .service-arrow {

    color:
        var(--secondary);

    transform:
        translateX(-5px);

}


/* =========================================================
   09. WHY US
========================================================= */

.why-section {

    background:
        var(--white);

}


.why-grid {

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        90px;

}


.why-content h2 {

    max-width:
        600px;

    color:
        var(--text-dark);

    font-size:
        clamp(30px, 4vw, 46px);

    line-height:
        1.4;

    font-weight:
        800;

    margin-bottom:
        20px;

}


.why-content h2 span {

    color:
        var(--primary);

}


.why-content > p {

    color:
        var(--text-light);

    max-width:
        600px;

    font-size:
        15px;

    margin-bottom:
        35px;

}


.why-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

}


.why-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

}


.why-icon {

    width:
        52px;

    height:
        52px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--primary);

    background:
        var(--light-purple);

    border-radius:
        14px;

    font-size:
        19px;

}


.orange-why-icon {

    color:
        var(--secondary);

    background:
        var(--light-orange);

}


.why-item h3 {

    color:
        var(--text-dark);

    font-size:
        15px;

    font-weight:
        800;

    margin-bottom:
        3px;

}


.why-item p {

    color:
        var(--text-light);

    font-size:
        12px;

    line-height:
        1.8;

}


/* =========================================================
   WHY VISUAL
========================================================= */

.why-visual {

    min-height:
        450px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

}


.why-card {

    width:
        340px;

    min-height:
        420px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        35px;

    border-radius:
        35px;

    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:
        var(--shadow-lg);

}


.why-card::before {

    content: "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

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

    border-radius:
        50%;

    top:
        -100px;

    right:
        -80px;

}


.why-card::after {

    content: "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

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

    border-radius:
        50%;

    bottom:
        -60px;

    left:
        -50px;

}


.why-card-logo {

    position:
        relative;

    z-index:
        2;

    width:
        170px;

    height:
        170px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--white);

    border-radius:
        50%;

    margin-bottom:
        25px;

}


.why-card-logo img {

    width:
        135px;

}


.why-card-content {

    position:
        relative;

    z-index:
        2;

    text-align:
        center;

}


.why-card-content span {

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

    font-size:
        11px;

    letter-spacing:
        5px;

}


.why-card-content strong {

    display:
        block;

    color:
        var(--white);

    font-size:
        24px;

    line-height:
        1.4;

    margin-top:
        8px;

}


.why-line {

    width:
        50px;

    height:
        3px;

    margin:
        18px auto;

    background:
        var(--secondary);

    border-radius:
        3px;

}


.why-card-content p {

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

    font-size:
        12px;

}


/* =========================================================
   10. STEPS — ENROLLMENT JOURNEY
========================================================= */

.steps-section {
    background:
        radial-gradient(circle at 8% 15%, rgba(63,52,143,.08), transparent 22%),
        radial-gradient(circle at 92% 88%, rgba(241,90,36,.07), transparent 24%),
        linear-gradient(180deg, #fbfbff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.steps-section::before,
.steps-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.steps-section::before {
    width: 360px;
    height: 360px;
    top: -210px;
    right: -130px;
    background: rgba(63,52,143,.055);
}

.steps-section::after {
    width: 280px;
    height: 280px;
    bottom: -180px;
    left: -110px;
    background: rgba(241,90,36,.045);
}

.enrollment-flow {
    position: relative;
    z-index: 1;
}

.steps-grid.enrollment-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr) 42px minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.enrollment-track {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 16px;
    height: 2px;
    border-top: 2px dashed rgba(63,52,143,.25);
    transform: translateY(50%);
    z-index: 0;
}

.enrollment-track::before,
.enrollment-track::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--white);
    border: 4px solid var(--primary-light);
    box-shadow: 0 0 0 7px rgba(109,112,183,.08);
}

.enrollment-track::before { right: -2px; }
.enrollment-track::after { left: -2px; border-color: var(--secondary); box-shadow: 0 0 0 7px rgba(241,90,36,.08); }

.step-item {
    --step-color: var(--primary);
    --step-soft: #f1efff;
    text-align: center;
    min-width: 0;
    padding: 0 18px 38px;
    background: rgba(255,255,255,.92);
    border: 1.5px solid color-mix(in srgb, var(--step-color) 45%, white);
    border-radius: 28px;
    box-shadow: 0 15px 45px rgba(63,52,143,.08);
    position: relative;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    backdrop-filter: blur(8px);
}

.step-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 55px rgba(63,52,143,.14);
}

.step-number {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: -29px auto 26px;
    color: var(--white);
    background: linear-gradient(135deg, var(--step-color), color-mix(in srgb, var(--step-color) 72%, #ffffff));
    border: 5px solid #fff;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--step-color) 28%, transparent);
    z-index: 3;
}

.step-icon {
    width: 150px;
    height: 150px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--step-color);
    background: radial-gradient(circle, var(--step-soft) 0%, rgba(255,255,255,.2) 70%);
    border: 1px solid color-mix(in srgb, var(--step-color) 8%, white);
    border-radius: 50%;
    font-size: 66px;
    box-shadow: inset 0 0 0 14px rgba(255,255,255,.5);
    position: relative;
    overflow: hidden;
}

.step-icon::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    top: -24px;
    left: -18px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
}

.step-item h3 {
    color: var(--step-color);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.55;
}

.step-item p {
    color: var(--text-light);
    font-size: 12.5px;
    line-height: 2;
    margin: 0 auto;
    max-width: 220px;
}

.step-dot {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    border: 5px solid var(--step-color);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--step-color) 9%, transparent);
    z-index: 3;
}

.step-connector {
    align-self: center;
    height: 44px;
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-connector::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(63,52,143,.12), rgba(241,90,36,.5), rgba(63,52,143,.12));
}

.step-connector span {
    display: none;
}

.step-whatsapp { --step-color: #20b957; --step-soft: #eafaf0; }
.step-form { --step-color: #6252d9; --step-soft: #f0eeff; }
.step-trial { --step-color: #f36b1f; --step-soft: #fff1e8; }
.step-schedule { --step-color: #3679e8; --step-soft: #edf4ff; }
.step-payment { --step-color: #e83f69; --step-soft: #fff0f4; }

.enrollment-success {
    max-width: 660px;
    margin: 72px auto 0;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: right;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(63,52,143,.10);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(63,52,143,.08);
    position: relative;
    overflow: hidden;
}

.enrollment-success::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -60px;
    top: -75px;
    border-radius: 50%;
    background: rgba(63,52,143,.06);
}

.enrollment-success-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--light-purple);
    color: var(--primary);
    font-size: 25px;
}

.enrollment-success strong {
    display: block;
    color: var(--primary);
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 3px;
}

.enrollment-success p {
    margin: 0;
    color: var(--text-light);
    font-size: 12px;
}

.step-item {
    animation: enrollmentFloat 6s ease-in-out infinite;
}
.step-item:nth-child(1) { animation-delay: 0s; }
.step-item:nth-child(5) { animation-delay: .45s; }
.step-item:nth-child(9) { animation-delay: .9s; }
.step-item:nth-child(13) { animation-delay: 1.35s; }
.step-item:nth-child(17) { animation-delay: 1.8s; }

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

@media (prefers-reduced-motion: reduce) {
    .step-item { animation: none; transition: none; }
}

@media (max-width: 1100px) {
    .steps-grid.enrollment-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 52px 18px;
    }
    .step-connector { display: none; }
    .enrollment-track { display: none; }
}

/* =========================================================
   11. FAQ
========================================================= */

.faq-section {

    background:
        var(--white);

}


.faq-container {

    max-width:
        850px;

    margin:
        0 auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.faq-item {

    background:
        var(--white);

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

    border-radius:
        15px;

    overflow:
        hidden;

    transition:
        var(--transition);

}


.faq-item.active {

    border-color:
        rgba(63,52,143,0.18);

    box-shadow:
        var(--shadow-sm);

}


.faq-question {

    width:
        100%;

    min-height:
        70px;

    padding:
        15px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        transparent;

    color:
        var(--text-dark);

    text-align:
        right;

    font-size:
        14px;

    font-weight:
        700;

}


.faq-question i {

    width:
        32px;

    height:
        32px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--primary);

    background:
        var(--light-purple);

    border-radius:
        9px;

    transition:
        var(--transition);

}


.faq-item.active
.faq-question {

    color:
        var(--primary);

}


.faq-item.active
.faq-question i {

    color:
        var(--white);

    background:
        var(--secondary);

    transform:
        rotate(45deg);

}


.faq-answer {

    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height 0.35s ease;

}


.faq-answer p {

    padding:
        0 20px 20px;

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        2;

}


.faq-bottom {

    max-width:
        850px;

    margin:
        25px auto 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;

}


.faq-bottom p {

    color:
        var(--text-light);

    font-size:
        13px;

}


.text-link {

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        800;

}


.text-link:hover {

    color:
        var(--secondary);

}


.text-link i {

    margin-right:
        5px;

    transition:
        var(--transition);

}


.text-link:hover i {

    transform:
        translateX(-4px);

}


/* =========================================================
   12. REVIEWS
========================================================= */

.reviews-section {

    background:
        var(--off-white);

}


.reviews-grid {

    display:
        grid;

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

    gap:
        22px;

}


.review-card {

    position:
        relative;

    padding:
        30px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    transition:
        var(--transition);

}


.review-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow);

}


.featured-review {

    border:
        1px solid rgba(241,90,36,0.22);

    box-shadow:
        0 12px 40px rgba(241,90,36,0.08);

}


.review-stars {

    color:
        var(--secondary);

    font-size:
        17px;

    letter-spacing:
        2px;

    margin-bottom:
        18px;

}


.review-text {

    min-height:
        125px;

    color:
        var(--text);

    font-size:
        13px;

    line-height:
        2.1;

}


.review-author {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding-top:
        20px;

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

}


.author-avatar {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--white);

    background:
        var(--primary);

    border-radius:
        50%;

    font-size:
        15px;

    font-weight:
        800;

}


.orange-avatar {

    background:
        var(--secondary);

}


.review-author div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


.review-author strong {

    color:
        var(--text-dark);

    font-size:
        12px;

}


.review-author span {

    color:
        var(--text-light);

    font-size:
        10px;

}


.review-action {

    margin-top:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    flex-wrap:
        wrap;

}


.review-action p {

    color:
        var(--text-light);

    font-size:
        13px;

}


.review-action strong {

    color:
        var(--primary);

}


/* =========================================================
   13. CONTACT
========================================================= */

.contact-section {

    padding:
        90px 0;

    background:
        var(--white);

}


.contact-card {

    min-height:
        390px;

    position:
        relative;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:
        1.1fr 0.9fr;

    align-items:
        center;

    padding:
        60px;

    border-radius:
        35px;

    background:
        linear-gradient(
            120deg,
            var(--primary-dark),
            var(--primary)
        );

    box-shadow:
        var(--shadow-lg);

}


.contact-card::before {

    content: "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

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

    border-radius:
        50%;

    left:
        -230px;

    bottom:
        -300px;

}


.contact-card::after {

    content: "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

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

    border-radius:
        50%;

    right:
        -100px;

    top:
        -130px;

}


.contact-content {

    position:
        relative;

    z-index:
        2;

}


.contact-tag {

    color:
        var(--secondary);

    font-size:
        13px;

    font-weight:
        800;

}


.contact-content h2 {

    max-width:
        650px;

    color:
        var(--white);

    font-size:
        clamp(30px, 4vw, 48px);

    line-height:
        1.4;

    font-weight:
        800;

    margin:
        12px 0 15px;

}


.contact-content h2 span {

    color:
        #FF8358;

}


.contact-content p {

    max-width:
        580px;

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

    font-size:
        14px;

    line-height:
        2;

    margin-bottom:
        28px;

}


.contact-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;

    max-width:
        560px;

}


.contact-form .form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        16px;

}


.contact-form .form-group label {

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

}


.label-optional {

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

    font-weight:
        500;

}


.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {

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

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

    color:
        var(--white);

}


.contact-form select {

    width:
        100%;

    padding:
        13px 15px;

    border-radius:
        11px;

    outline:
        none;

    font-size:
        12px;

    font-family:
        inherit;

    cursor:
        pointer;

    transition:
        var(--transition);

    appearance:
        none;

    -webkit-appearance:
        none;

    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23FFFFFF' d='M1 1l5 5 5-5' stroke='%23FFFFFF' stroke-width='1.5' fill='none'/></svg>");

    background-repeat:
        no-repeat;

    background-position:
        left 15px center;

}


.contact-form select option {

    color:
        var(--text-dark);

    background:
        var(--white);

}


.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {

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

}


.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus,
.contact-form .form-group select:focus {

    border-color:
        var(--secondary);

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

    box-shadow:
        0 0 0 4px rgba(255,131,88,0.12);

}


/* PHONE GROUP */

.phone-input-group {

    display:
        grid;

    grid-template-columns:
        150px 1fr;

    gap:
        10px;

}


.phone-input-group .country-code-select {

    width:
        100%;

    padding:
        13px 32px 13px 15px;

    border-radius:
        11px;

    outline:
        none;

    font-size:
        12px;

    font-family:
        inherit;

}


/* PATH TOGGLE (مواد دراسية / علوم شرعية) */

.path-toggle {

    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;

    border:
        2px solid transparent;

    border-radius:
        var(--radius-sm);

    padding:
        2px;

}


.path-toggle-btn {

    flex:
        1 1 160px;

    padding:
        14px 20px;

    border-radius:
        var(--radius-sm);

    border:
        2px solid var(--border-dark);

    background:
        var(--white);

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        var(--transition);

}


.path-toggle-btn:hover {

    border-color:
        var(--primary-light);

    color:
        var(--primary);

}


.path-toggle-btn.active {

    border-color:
        #F5A623;

    background:
        #FFC629;

    color:
        var(--text-dark);

}


/* SUBJECTS */

.subjects-grid {

    display:
        grid;

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

    gap:
        10px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    padding:
        2px;

}


.subject-checkbox {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 12px;

    border-radius:
        10px;

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

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

    cursor:
        pointer;

    transition:
        var(--transition);

    font-size:
        12px;

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

}


.subject-checkbox:hover {

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

}


.subject-checkbox input[type="checkbox"] {

    width:
        16px;

    height:
        16px;

    accent-color:
        var(--secondary);

    cursor:
        pointer;

}


.subject-checkbox:has(input:checked) {

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

    border-color:
        var(--secondary);

    color:
        var(--white);

}


.contact-form button.btn-whatsapp {

    border:
        none;

    cursor:
        pointer;

    align-self:
        flex-start;

}


.contact-form .field-error {

    color:
        #FF8358;

    font-size:
        11px;

    font-weight:
        600;

    margin-top:
        -8px;

}


.btn-whatsapp {

    color:
        var(--white);

    background:
        #20B858;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.15);

}


.btn-whatsapp:hover {

    background:
        #159B49;

    transform:
        translateY(-3px);

}


.btn-whatsapp i {

    font-size:
        20px;

}


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

.contact-decoration {

    min-height:
        300px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.contact-circle {

    width:
        270px;

    height:
        270px;

    position:
        absolute;

    border-radius:
        50%;

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

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

}


.contact-logo {

    width:
        210px;

    height:
        210px;

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--white);

    border-radius:
        50%;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.15);

}


.contact-logo img {

    width:
        165px;

}


/* =========================================================
   14. FOOTER
========================================================= */

.footer {

    padding:
        70px 0 25px;

    background:
        #211C4D;

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

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr 0.8fr 0.8fr 1fr;

    gap:
        50px;

    padding-bottom:
        50px;

}


.footer-logo {

    display:
        inline-flex;

    width:
        125px;

    padding:
        8px;

    margin-bottom:
        15px;

    background:
        var(--white);

    border-radius:
        10px;

}


.footer-brand p {

    max-width:
        230px;

    font-size:
        12px;

    line-height:
        2;

}


.footer-social {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        20px;

}


.footer-social .social-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    color:
        var(--white);

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

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

    font-size:
        14px;

    transition:
        var(--transition);

}


.footer-social .social-icon:hover {

    color:
        var(--white);

    background:
        var(--secondary);

    border-color:
        var(--secondary);

    transform:
        translateY(-3px);

}


.footer h3 {

    color:
        var(--white);

    font-size:
        14px;

    font-weight:
        800;

    margin-bottom:
        20px;

}


.footer-links,
.footer-contact,
.footer-cta {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.footer-links a,
.footer-contact a {

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

    font-size:
        12px;

    margin-bottom:
        9px;

    transition:
        var(--transition);

}


.footer-links a:hover,
.footer-contact a:hover {

    color:
        var(--secondary);

    transform:
        translateX(-3px);

}


.footer-contact a {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.footer-contact a i {

    color:
        var(--secondary);

}


.footer-cta p {

    font-size:
        12px;

    margin-bottom:
        15px;

}


.footer-whatsapp {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 17px;

    color:
        var(--white);

    background:
        #20B858;

    border-radius:
        10px;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        var(--transition);

}


.footer-whatsapp:hover {

    background:
        #159B49;

    transform:
        translateY(-2px);

}


.footer-bottom {

    padding-top:
        20px;

    border-top:
        1px solid rgba(255,255,255,0.08);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.footer-bottom p {

    font-size:
        10px;

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

}


/* =========================================================
   15. WHATSAPP FLOATING BUTTON
========================================================= */

.whatsapp-float {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    width:
        62px;

    height:
        62px;

    z-index:
        999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--white);

    background:
        #20B858;

    border-radius:
        50%;

    font-size:
        30px;

    box-shadow:
        0 10px 30px rgba(32,184,88,0.35);

    transition:
        var(--transition);

}


.whatsapp-float:hover {

    transform:
        scale(1.08);

    background:
        #159B49;

}


.whatsapp-pulse {

    position:
        absolute;

    inset:
        -5px;

    border:
        2px solid
        rgba(32,184,88,0.35);

    border-radius:
        50%;

    animation:
        whatsappPulse 2s infinite;

}


@keyframes whatsappPulse {

    0% {

        transform:
            scale(0.95);

        opacity:
            1;

    }

    70% {

        transform:
            scale(1.15);

        opacity:
            0;

    }

    100% {

        transform:
            scale(1.15);

        opacity:
            0;

    }

}


/* =========================================================
   16. REVIEW MODAL
========================================================= */

.modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    visibility:
        hidden;

    opacity:
        0;

    transition:
        var(--transition);

}


.modal.active {

    visibility:
        visible;

    opacity:
        1;

}


.modal-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(20, 17, 48, 0.72);

    backdrop-filter:
        blur(5px);

}


.modal-content {

    width:
        100%;

    max-width:
        520px;

    max-height:
        90vh;

    overflow:
        auto;

    position:
        relative;

    z-index:
        2;

    padding:
        35px;

    background:
        var(--white);

    border-radius:
        25px;

    box-shadow:
        0 30px 100px rgba(0,0,0,0.25);

    transform:
        translateY(20px) scale(0.97);

    transition:
        var(--transition);

}


.modal.active
.modal-content {

    transform:
        translateY(0) scale(1);

}


.modal-close {

    position:
        absolute;

    top:
        18px;

    left:
        18px;

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-light);

    background:
        var(--light-bg);

    border-radius:
        9px;

    transition:
        var(--transition);

}


.modal-close:hover {

    color:
        var(--white);

    background:
        var(--secondary);

}


.modal-header {

    text-align:
        center;

    margin-bottom:
        25px;

}


.modal-icon {

    width:
        60px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 15px;

    color:
        var(--secondary);

    background:
        var(--light-orange);

    border-radius:
        17px;

    font-size:
        22px;

}


.modal-header h2 {

    color:
        var(--text-dark);

    font-size:
        25px;

    font-weight:
        800;

    margin-bottom:
        7px;

}


.modal-header p {

    color:
        var(--text-light);

    font-size:
        12px;

    line-height:
        1.8;

}


/* =========================================================
   FORM
========================================================= */

.review-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.form-group label {

    color:
        var(--text-dark);

    font-size:
        12px;

    font-weight:
        700;

}


.form-group input,
.form-group textarea {

    width:
        100%;

    padding:
        13px 15px;

    color:
        var(--text-dark);

    background:
        var(--off-white);

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

    border-radius:
        11px;

    outline:
        none;

    font-size:
        12px;

    transition:
        var(--transition);

    resize:
        vertical;

}


.form-group input:focus,
.form-group textarea:focus {

    border-color:
        var(--primary);

    background:
        var(--white);

    box-shadow:
        0 0 0 4px rgba(63,52,143,0.07);

}


/* =========================================================
   RATING
========================================================= */

.rating-input {

    display:
        flex;

    flex-direction:
        row;

    justify-content:
        flex-start;

    gap:
        4px;

}


.rating-input button {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #D8D6E2;

    background:
        transparent;

    font-size:
        25px;

    transition:
        var(--transition);

}


.rating-input button:hover,
.rating-input button.active {

    color:
        var(--secondary);

    transform:
        scale(1.08);

}


.submit-review {

    width:
        100%;

    margin-top:
        5px;

}


/* =========================================================
   17. CUSTOM TOAST
========================================================= */

.custom-toast {

    animation:
        toastIn 0.3s ease;

}


@keyframes toastIn {

    from {

        opacity:
            0;

        transform:
            translate(-50%, 15px);

    }

    to {

        opacity:
            1;

        transform:
            translate(-50%, 0);

    }

}


/* =========================================================
   18. SELECTION
========================================================= */

::selection {

    color:
        var(--white);

    background:
        var(--primary);

}


/* =========================================================
   19. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width:
        8px;

}


::-webkit-scrollbar-track {

    background:
        #F0EFF5;

}


::-webkit-scrollbar-thumb {

    background:
        var(--primary-light);

    border-radius:
        20px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--primary);

}


/* =========================================================
   20. RESPONSIVE - LARGE TABLET
========================================================= */

@media (max-width: 1100px) {


    .navbar-container {

        gap:
            15px;

    }


    .nav-menu {

        gap:
            2px;

    }


    .nav-link {

        padding:
            8px 9px;

        font-size:
            12px;

    }


    .services-grid {

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

    }


    .footer-grid {

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

    }

}


/* =========================================================
   21. RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {


    .section {

        padding:
            85px 0;

    }


    /* NAVBAR */

    .navbar-container {

        height:
            75px;

    }


    .logo img {

        width:
            105px;

    }


    .menu-toggle {

        display:
            flex;

    }


    .nav-menu {

        position:
            absolute;

        top:
            calc(100% + 8px);

        right:
            20px;

        left:
            20px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            5px;

        padding:
            15px;

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

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

        border-radius:
            18px;

        box-shadow:
            var(--shadow-lg);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-10px);

        transition:
            var(--transition);

    }


    .nav-menu.active {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

    }


    .nav-link {

        width:
            100%;

        padding:
            12px 15px;

    }


    .nav-link::after {

        right:
            15px;

        bottom:
            5px;

    }


    .nav-contact {

        margin:
            5px 0 0;

        text-align:
            center;

    }


    .navbar-social {

        justify-content:
            center;

        margin:
            10px 0 0;

        padding:
            12px 0 0;

        border-right:
            none;

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

    }


    /* HERO */

    .hero {

        padding-top:
            125px;

    }


    .hero-container {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .hero-content {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

    }


    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-buttons {

        justify-content:
            center;

    }


    .hero-stats {

        justify-content:
            center;

    }


    .hero-visual {

        min-height:
            500px;

    }


    /* ABOUT */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .about-visual {

        min-height:
            400px;

        order:
            2;

    }


    .about-content {

        order:
            1;

    }


    /* WHY */

    .why-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .why-visual {

        min-height:
            400px;

    }


    /* CONTACT */

    .contact-card {

        grid-template-columns:
            1fr;

        padding:
            50px;

    }


    .contact-decoration {

        display:
            none;

    }


    .contact-form .form-row {

        grid-template-columns:
            1fr;

    }


    .phone-input-group {

        grid-template-columns:
            110px 1fr;

    }


    .subjects-grid {

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

    }


    .contact-form {

        max-width:
            100%;

    }


    /* STEPS */

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .step-item {
        padding: 24px 20px;
    }

    .step-connector {
        display: flex;
        width: 2px;
        height: 28px;
        margin: 0 auto;
        background: var(--border-dark);
    }

    .step-connector span {
        transform: translate(-50%, -50%) rotate(-90deg);
    }

}


/* =========================================================
   22. RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 600px) {


    .container {

        padding:
            0 18px;

    }


    .section {

        padding:
            70px 0;

    }


    .phone-input-group {

        grid-template-columns:
            1fr;

    }


    .subjects-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .section-heading {

        margin-bottom:
            45px;

    }


    .section-heading h2 {

        font-size:
            30px;

    }


    .section-heading p {

        font-size:
            13px;

    }


    /* HERO */

    .hero {

        min-height:
            auto;

        padding-top:
            115px;

        padding-bottom:
            70px;

    }


    .hero-container {

        min-height:
            auto;

        gap:
            20px;

    }


    .hero-content h1 {

        font-size:
            39px;

        letter-spacing:
            0;

    }


    .hero-description {

        font-size:
            14px;

        line-height:
            2;

    }


    .hero-buttons {

        width:
            100%;

        flex-direction:
            column;

    }


    .hero-buttons .btn {

        width:
            100%;

    }


    .hero-stats {

        width:
            100%;

        gap:
            12px;

        justify-content:
            space-between;

        margin-top:
            35px;

    }


    .hero-stat strong {

        font-size:
            13px;

    }


    .hero-stat span {

        font-size:
            9px;

    }


    .stat-divider {

        height:
            30px;

    }


    /* HERO VISUAL */

    .hero-visual {

        min-height:
            420px;

    }


    .hero-circle {

        width:
            310px;

        height:
            310px;

    }


    .hero-main-card {

        width:
            255px;

        min-height:
            285px;

        padding:
            20px;

        border-radius:
            28px;

    }


    .hero-main-card img {

        width:
            180px;

    }


    .hero-card-text strong {

        font-size:
            18px;

    }


    .hero-card-text span {

        font-size:
            7px;

        letter-spacing:
            2px;

    }


    .floating-card {

        min-width:
            150px;

        padding:
            9px;

        gap:
            8px;

    }


    .floating-card-top {

        top:
            45px;

        left:
            -5px;

    }


    .floating-card-bottom {

        bottom:
            45px;

        right:
            -5px;

    }


    .floating-icon {

        width:
            34px;

        height:
            34px;

        font-size:
            12px;

    }


    .floating-card strong {

        font-size:
            10px;

    }


    .floating-card span {

        font-size:
            8px;

    }


    .decoration-one {

        width:
            45px;

        height:
            45px;

        top:
            30px;

        right:
            10px;

    }


    .decoration-two {

        width:
            30px;

        height:
            30px;

        bottom:
            35px;

        left:
            15px;

    }


    /* ABOUT */

    .about-visual {

        min-height:
            320px;

    }


    .about-shape {

        width:
            290px;

        height:
            290px;

    }


    .about-logo-wrapper {

        width:
            205px;

        height:
            205px;

    }


    .about-logo-wrapper img {

        width:
            160px;

    }


    .about-content h3 {

        font-size:
            28px;

    }


    .about-features {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    /* SERVICES */

    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        min-height:
            290px;

    }


    /* WHY */

    .why-content h2 {

        font-size:
            29px;

    }


    .why-visual {

        min-height:
            350px;

    }


    .why-card {

        width:
            285px;

        min-height:
            360px;

    }


    .why-card-logo {

        width:
            140px;

        height:
            140px;

    }


    .why-card-logo img {

        width:
            110px;

    }


    .why-card-content strong {

        font-size:
            20px;

    }


    /* STEPS */

    .step-item {

        padding:
            10px;

    }


    /* FAQ */

    .faq-question {

        min-height:
            65px;

        padding:
            12px 15px;

        font-size:
            12px;

    }


    .faq-answer p {

        padding:
            0 15px 18px;

        font-size:
            11px;

    }


    /* REVIEWS */

    .reviews-grid {

        grid-template-columns:
            1fr;

    }


    .review-card {

        padding:
            25px;

    }


    .review-text {

        min-height:
            auto;

        margin-bottom:
            15px;

    }


    .review-action {

        flex-direction:
            column;

    }


    .review-action .btn {

        width:
            100%;

    }


    /* CONTACT */

    .contact-section {

        padding:
            65px 0;

    }


    .contact-card {

        padding:
            35px 22px;

        border-radius:
            25px;

    }


    .contact-content h2 {

        font-size:
            30px;

    }


    .contact-content p {

        font-size:
            12px;

    }


    .contact-content .btn {

        width:
            100%;

        text-align:
            center;

    }


    /* FOOTER */

    .footer {

        padding:
            55px 0 20px;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .footer-bottom {

        flex-direction:
            column;

        text-align:
            center;

    }


    /* WHATSAPP */

    .whatsapp-float {

        width:
            56px;

        height:
            56px;

        right:
            16px;

        bottom:
            16px;

        font-size:
            26px;

    }


    /* MODAL */

    .modal {

        padding:
            12px;

    }


    .modal-content {

        padding:
            28px 20px;

        border-radius:
            20px;

    }


    .modal-header h2 {

        font-size:
            22px;

    }

}


/* =========================================================
   23. SMALL MOBILE
========================================================= */

@media (max-width: 380px) {


    .hero-content h1 {

        font-size:
            34px;

    }


    .hero-circle {

        width:
            275px;

        height:
            275px;

    }


    .hero-main-card {

        width:
            225px;

        min-height:
            260px;

    }


    .hero-main-card img {

        width:
            155px;

    }


    .floating-card {

        min-width:
            135px;

    }


    .floating-card-top {

        left:
            -15px;

    }


    .floating-card-bottom {

        right:
            -15px;

    }


    .about-shape {

        width:
            250px;

        height:
            250px;

    }


    .about-logo-wrapper {

        width:
            175px;

        height:
            175px;

    }


    .about-logo-wrapper img {

        width:
            135px;

    }


    .why-card {

        width:
            260px;

    }

}


/* =========================================================
   24. ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {

    outline:
        3px solid
        rgba(241, 90, 36, 0.35);

    outline-offset:
        3px;

}


/* =========================================================
   25. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}
/* =========================================================
   PAYMENT PAGE FOOTER REFINEMENT
========================================================= */

.payment-page + .footer {
    margin-top: 0;
}

@media (max-width: 850px) {
    .payment-page ~ .footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 28px;
    }
}

@media (max-width: 560px) {
    .payment-page ~ .footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .payment-page ~ .footer .footer-brand p {
        max-width: 100%;
    }

    .payment-page ~ .footer .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Enrollment steps - mobile timeline */
@media (max-width: 700px) {
    .steps-grid.enrollment-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .steps-grid.enrollment-steps .step-item {
        width: 100%;
        padding: 24px 20px;
    }
    .steps-grid.enrollment-steps .step-connector {
        display: flex;
        width: 2px;
        height: 34px;
        margin: 0 auto;
        background: var(--border-dark);
    }
    .steps-grid.enrollment-steps .step-connector span {
        transform: translate(-50%, -50%) rotate(-90deg);
    }
}

@media (max-width: 700px) {
    .steps-grid.enrollment-steps { grid-template-columns: 1fr; gap: 0; }
    .steps-grid.enrollment-steps .step-item { width: 100%; padding: 24px 20px; }
    .steps-grid.enrollment-steps .step-connector { display: flex; width: 2px; height: 34px; margin: 0 auto; background: var(--border-dark); }
    .steps-grid.enrollment-steps .step-connector span { transform: translate(-50%, -50%) rotate(-90deg); }
}

@media (max-width: 700px) {
    .steps-grid.enrollment-steps { grid-template-columns: 1fr; gap: 0; }
    .steps-grid.enrollment-steps .step-item { width: 100%; padding: 24px 20px; }
    .steps-grid.enrollment-steps .step-connector { display: flex; width: 2px; height: 34px; margin: 0 auto; background: var(--border-dark); }
    .steps-grid.enrollment-steps .step-connector span { transform: translate(-50%, -50%) rotate(-90deg); }
}

/* =========================================================
   FINAL ENROLLMENT JOURNEY RESPONSIVE OVERRIDES
========================================================= */
@media (max-width: 700px) {
    .steps-grid.enrollment-steps {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .step-item {
        padding: 0 20px 38px;
        border-radius: 25px;
    }

    .step-number {
        width: 54px;
        height: 54px;
        margin-top: -27px;
        margin-bottom: 22px;
        font-size: 17px;
    }

    .step-icon {
        width: 128px;
        height: 128px;
        font-size: 54px;
        margin-bottom: 18px;
    }

    .step-item h3 {
        font-size: 17px;
    }

    .step-item p {
        max-width: 280px;
        font-size: 12px;
    }

    .step-dot {
        display: none;
    }

    .step-connector {
        display: flex;
        width: 2px;
        height: 34px;
        margin: -18px auto;
        background: linear-gradient(180deg, rgba(63,52,143,.12), rgba(241,90,36,.55), rgba(63,52,143,.12));
    }

    .step-connector::before {
        display: none;
    }

    .step-connector span {
        transform: rotate(-90deg);
        width: 30px;
        height: 30px;
        font-size: 24px;
    }

    .enrollment-success {
        margin-top: 52px;
        padding: 18px 20px;
        justify-content: flex-start;
        text-align: right;
        border-radius: 22px;
    }

    .enrollment-success-icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: 21px;
    }

    .enrollment-success strong {
        font-size: 15px;
    }

    .enrollment-success p {
        font-size: 11px;
        line-height: 1.8;
    }
}

@media (max-width: 420px) {
    .step-item {
        padding-left: 15px;
        padding-right: 15px;
    }

    .step-icon {
        width: 112px;
        height: 112px;
        font-size: 48px;
    }

    .enrollment-success {
        gap: 12px;
        padding: 16px;
    }
}

/* FIX: elements using the HTML hidden attribute must stay hidden
   even when they also have .form-group { display:flex; } */
.form-group[hidden],
#shariaBranchGroup[hidden],
#academicPathFields[hidden] {
    display: none !important;
}


/* Standalone How We Start page */
.how-start-cta {
    padding-top: 30px;
}

@media (max-width: 700px) {
    .how-start-cta {
        padding-top: 10px;
    }
}

/* Dynamic curriculum subjects */
.subjects-placeholder {
    grid-column: 1 / -1;
    padding: 12px;
    border-radius: 10px;
    border: 1px dashed rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 700px) {
    .subjects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}