/* =====================================================
   ADMISSION PAGE
===================================================== */


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

.page-hero {

    padding:
        51px 0;

    color:
        white;

    background:
        var(--primary);

}


.page-hero h1 {

    margin-top:
        7px;

    font-size:
        clamp(40px,6vw,60px);

}


.page-hero p {

    margin-top:
        8px;

    color:
        rgba(255,255,255,.7);

}


/* =====================================================
   ADMISSION LAYOUT
===================================================== */

.admission-layout {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        55px;

    align-items:
        start;

}


/* =====================================================
   LEFT SIDE
===================================================== */

.admission-layout h2 {

    margin:
        8px 0 25px;

    font-size:
        37px;

}


.process > div {

    padding:
        18px 0;

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

}


.process strong {

    color:
        var(--accent);

    font-size:
        12px;

}


.process h3 {

    margin:
        2px 0;

    font-size:
        17px;

}


.process p {

    color:
        var(--muted);

    font-size:
        13px;

}


.process a {

    text-decoration:
        none;

}


/* =====================================================
   ADMISSION FORM BOX
===================================================== */

.admission-form-box {

    padding:
        28px;

    background:
        var(--light);

    border-radius:
        13px;

}


.admission-form-box h2 {

    margin:
        0 0 20px;

    font-size:
        27px;

}


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

#admissionForm {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

}


#admissionForm label {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    font-size:
        12px;

    font-weight:
        700;

}


#admissionForm input,
#admissionForm select,
#admissionForm textarea {

    width:
        100%;

    padding:
        10px 12px;

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

    border-radius:
        7px;

    background:
        white;

    font:
        inherit;

    outline:
        none;

}


#admissionForm input:focus,
#admissionForm select:focus,
#admissionForm textarea:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 2px
        rgba(22,76,59,.08);

}


/* =====================================================
   BOT PROTECTION
   HONEYPOT FIELD
===================================================== */

.bot-field {

    position:
        absolute;

    left:
        -9999px;

    top:
        auto;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

}


.bot-field input {

    position:
        absolute;

    left:
        -9999px;

}



/* =====================================================
   ADMISSION MESSAGE
===================================================== */

#admissionMessage {

    margin-top:
        8px;

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        700;

}


/* =====================================================
   ENQUIRY SEND POPUP
===================================================== */

.enquiry-popup-overlay {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(0,0,0,.55);

    z-index:
        99999;

}


.enquiry-popup {

    position:
        relative;

    width:
        100%;

    max-width:
        390px;

    padding:
        30px;

    background:
        white;

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

    border-radius:
        13px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    text-align:
        center;

}


.enquiry-popup-close {

    position:
        absolute;

    top:
        10px;

    right:
        13px;

    width:
        30px;

    height:
        30px;

    border:
        none;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        25px;

    line-height:
        30px;

    cursor:
        pointer;

}


.enquiry-popup-icon {

    width:
        48px;

    height:
        48px;

    margin:
        0 auto 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--light);

    color:
        var(--primary);

    font-size:
        21px;

}


.enquiry-popup h3 {

    margin:
        0 0 7px;

    color:
        var(--primary);

    font-size:
        23px;

}


.enquiry-popup p {

    margin:
        0 0 22px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.6;

}


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

.enquiry-popup-buttons {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.enquiry-popup-buttons button {

    width:
        100%;

    padding:
        12px 15px;

    border:
        none;

    border-radius:
        7px;

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.enquiry-popup-buttons button:hover {

    transform:
        translateY(-1px);

    opacity:
        .9;

}


.enquiry-popup-buttons i {

    margin-right:
        7px;

}


.enquiry-whatsapp-btn {

    background:
        #25D366;

    color:
        white;

}


.enquiry-email-btn {

    background:
        var(--primary);

    color:
        white;

}


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

@media(max-width:750px) {

    .admission-layout {

        grid-template-columns:
            1fr;

    }

}


@media(max-width:480px) {

    .enquiry-popup {

        padding:
            27px 20px;

    }


    .enquiry-popup h3 {

        font-size:
            21px;

    }

}