/* ==========================================================
   MERITZA CLASSES
   CONTACT PAGE
   Version : 1.0.1
========================================================== */


/* ==========================================================
   PAGE
   Match Find a Tutor / Book Session page structure
========================================================== */

.mc-contact-page {

    position: relative;

    min-height: 100vh;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

}


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

.mc-contact-hero {

    position: relative;

    padding:
        18px 0 28px;

}


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

.mc-contact-hero-card {

    position: relative;

    overflow: hidden;

    max-width: 1080px;

    margin: 0 auto;

    padding:
        38px 40px;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #081638 0%,
            #0A1946 52%,
            #123366 100%
        );

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

    box-shadow:
        0 18px 45px
        rgba(10,25,70,.14);

    text-align: center;

}


/* ==========================================================
   HERO GOLD GLOW
========================================================== */

.mc-contact-hero-card::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: -130px;

    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.14) 0%,
            transparent 70%
        );

    pointer-events: none;

}


/* ==========================================================
   HERO BLUE GLOW
========================================================== */

.mc-contact-hero-card::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    left: -120px;

    bottom: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(65,132,204,.16) 0%,
            transparent 70%
        );

    pointer-events: none;

}


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

.mc-contact-hero-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto;

}


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

.mc-contact-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

    color:
        #D4AF37;

    font-size:
        .66rem;

    font-weight:
        800;

    letter-spacing:
        .16em;

}


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

.mc-contact-hero h1 {

    margin: 0;

    color:
        #FFFFFF;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -.7px;

}


.mc-contact-hero h1 span {

    color:
        #D4AF37;

}


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

.mc-contact-hero p {

    max-width:
        680px;

    margin:
        13px auto 0;

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

    font-size:
        .94rem;

    line-height:
        1.65;

}


/* ==========================================================
   CONTACT MAIN SECTION
========================================================== */

.mc-contact-section {

    padding:
        12px 0 36px;

}


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

.mc-contact-layout {

    display: grid;

    grid-template-columns:
        .78fr 1.22fr;

    gap:
        34px;

    align-items:
        start;

}


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

.mc-contact-info {

    padding:
        16px 10px 16px 4px;

}


.mc-contact-section-heading {

    margin-bottom:
        25px;

}


.mc-contact-mini-label {

    display: inline-block;

    margin-bottom:
        8px;

    color:
        #D4AF37;

    font-size:
        .66rem;

    font-weight:
        800;

    letter-spacing:
        .14em;

}


.mc-contact-section-heading h2 {

    margin:
        0 0 10px;

    color:
        #0A1946;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        1.8rem;

    font-weight:
        750;

    line-height:
        1.15;

}


.mc-contact-section-heading p {

    max-width:
        470px;

    margin:
        0;

    color:
        #60718A;

    font-size:
        .88rem;

    line-height:
        1.65;

}


/* ==========================================================
   CONTACT INFORMATION ITEM
========================================================== */

.mc-contact-info-item {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    width:
        100%;

    padding:
        13px 0;

    color:
        inherit;

    text-decoration:
        none;

    border-bottom:
        1px solid
        rgba(10,25,70,.08);

}


.mc-contact-info-item:last-child {

    border-bottom:
        none;

}


a.mc-contact-info-item {

    transition:
        transform .2s ease;

}


a.mc-contact-info-item:hover {

    transform:
        translateX(3px);

}


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

.mc-contact-icon {

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        rgba(10,25,70,.07);

    color:
        #0A1946;

    font-size:
        .95rem;

}


/* ==========================================================
   CONTACT INFORMATION TEXT
========================================================== */

.mc-contact-info-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.mc-contact-info-text strong {

    color:
        #0A1946;

    font-size:
        .79rem;

    font-weight:
        750;

}


.mc-contact-info-text span {

    color:
        #6B7C94;

    font-size:
        .76rem;

    line-height:
        1.35;

}


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

.mc-contact-form-card {

    padding:
        28px;

    border-radius:
        18px;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(10,25,70,.09);

    box-shadow:
        0 12px 35px
        rgba(10,25,70,.09);

}


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

.mc-contact-form-header {

    margin-bottom:
        20px;

}


.mc-contact-form-header h2 {

    margin:
        0 0 5px;

    color:
        #0A1946;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        1.35rem;

    font-weight:
        750;

}


.mc-contact-form-header p {

    margin:
        0;

    color:
        #718097;

    font-size:
        .78rem;

    line-height:
        1.5;

}


/* ==========================================================
   ALERTS
========================================================== */

.mc-contact-alert {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        18px;

    padding:
        12px 13px;

    border-radius:
        10px;

    font-size:
        .76rem;

    line-height:
        1.45;

}


.mc-contact-alert i {

    flex:
        0 0 auto;

    margin-top:
        1px;

}


.mc-contact-alert-success {

    background:
        #EDF9F2;

    border:
        1px solid
        #C7EBD5;

    color:
        #236B43;

}


.mc-contact-alert-success strong {

    display:
        block;

    margin-bottom:
        2px;

}


.mc-contact-alert-success span {

    display:
        block;

}


.mc-contact-alert-error {

    background:
        #FFF1F1;

    border:
        1px solid
        #F2CDCD;

    color:
        #A33A3A;

}


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

.mc-contact-form {

    display:
        grid;

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

    gap:
        16px;

}


.mc-contact-field {

    position:
        relative;

    min-width:
        0;

}


.mc-contact-field-full {

    grid-column:
        1 / -1;

}


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

.mc-contact-field label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #263A57;

    font-size:
        .74rem;

    font-weight:
        700;

}


.mc-contact-field label span {

    color:
        #C62828;

}


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

.mc-contact-field input,
.mc-contact-field select,
.mc-contact-field textarea {

    display:
        block;

    width:
        100%;

    box-sizing:
        border-box;

    border:
        1px solid
        #D8DFE8;

    border-radius:
        9px;

    background:
        #FFFFFF;

    color:
        #182B47;

    font-family:
        inherit;

    font-size:
        .78rem;

    line-height:
        1.4;

    outline:
        none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.mc-contact-field input,
.mc-contact-field select {

    height:
        42px;

    padding:
        0 12px;

}


.mc-contact-field textarea {

    min-height:
        125px;

    padding:
        11px 12px;

    resize:
        vertical;

}


/* ==========================================================
   PLACEHOLDERS
========================================================== */

.mc-contact-field input::placeholder,
.mc-contact-field textarea::placeholder {

    color:
        #9AA7B7;

}


/* ==========================================================
   SELECT
========================================================== */

.mc-contact-field select {

    appearance:
        none;

    -webkit-appearance:
        none;

    padding-right:
        35px;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #667892 50%
        ),
        linear-gradient(
            135deg,
            #667892 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 15px) 18px,
        calc(100% - 10px) 18px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;

}


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

.mc-contact-field input:focus,
.mc-contact-field select:focus,
.mc-contact-field textarea:focus {

    border-color:
        #0A1946;

    box-shadow:
        0 0 0 3px
        rgba(10,25,70,.07);

}


/* ==========================================================
   INVALID FIELDS
========================================================== */

.mc-contact-field.is-invalid input,
.mc-contact-field.is-invalid select,
.mc-contact-field.is-invalid textarea {

    border-color:
        #C62828;

}


.mc-contact-field-error {

    display:
        none;

    margin-top:
        5px;

    color:
        #C62828;

    font-size:
        .66rem;

}


.mc-contact-field.is-invalid
.mc-contact-field-error {

    display:
        block;

}


/* ==========================================================
   CHARACTER COUNT
========================================================== */

.mc-contact-character-count {

    margin-top:
        5px;

    color:
        #8996A7;

    font-size:
        .63rem;

    text-align:
        right;

}


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

.mc-contact-form-footer {

    display:
        flex;

    justify-content:
        flex-end;

    padding-top:
        2px;

}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.mc-contact-submit {

    position:
        relative;

    min-width:
        165px;

    min-height:
        43px;

    padding:
        0 19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #0A1946;

    border-radius:
        9px;

    background:
        #0A1946;

    color:
        #FFFFFF;

    font-family:
        inherit;

    font-size:
        .77rem;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.mc-contact-submit:hover {

    background:
        #10265B;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 18px
        rgba(10,25,70,.15);

}


.mc-contact-submit:disabled {

    opacity:
        .72;

    cursor:
        not-allowed;

    transform:
        none;

}


.mc-contact-submit-text {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

}


.mc-contact-submit-loading {

    display:
        none;

    align-items:
        center;

    gap:
        8px;

}


.mc-contact-submit.is-loading
.mc-contact-submit-text {

    display:
        none;

}


.mc-contact-submit.is-loading
.mc-contact-submit-loading {

    display:
        inline-flex;

}


/* ==========================================================
   SUBMIT SPINNER
========================================================== */

.mc-contact-spinner {

    width:
        13px;

    height:
        13px;

    border:
        2px solid
        rgba(255,255,255,.35);

    border-top-color:
        #FFFFFF;

    border-radius:
        50%;

    animation:
        mcContactSpin .7s linear infinite;

}


@keyframes mcContactSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* ==========================================================
   FINAL CTA
========================================================== */

.mc-contact-cta {

    padding:
        4px 0 42px;

}


.mc-contact-cta-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        24px 30px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #081638 0%,
            #0A1946 55%,
            #12366A 100%
        );

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

    box-shadow:
        0 14px 32px
        rgba(10,25,70,.12);

}


/* ==========================================================
   CTA ICON
========================================================== */

.mc-contact-cta-icon {

    display:
        inline-block;

    margin-bottom:
        4px;

    font-size:
        1rem;

}


/* ==========================================================
   CTA HEADING
========================================================== */

.mc-contact-cta-box h2 {

    margin:
        0 0 5px;

    color:
        #FFFFFF;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        1.18rem;

    font-weight:
        750;

}


/* ==========================================================
   CTA DESCRIPTION
========================================================== */

.mc-contact-cta-box p {

    max-width:
        680px;

    margin:
        0;

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

    font-size:
        .74rem;

    line-height:
        1.5;

}


/* ==========================================================
   CTA BUTTON
========================================================== */

.mc-contact-cta-button {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        40px;

    padding:
        0 17px;

    border:
        1px solid
        #D4AF37;

    border-radius:
        8px;

    background:
        #D4AF37;

    color:
        #0A1946;

    font-size:
        .74rem;

    font-weight:
        800;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        transform .2s ease,
        background .2s ease;

}


.mc-contact-cta-button:hover {

    background:
        #E8CF72;

    color:
        #0A1946;

    transform:
        translateY(-1px);

}


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

@media (max-width: 991.98px) {

    .mc-contact-layout {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .mc-contact-info {

        padding:
            8px 0;

    }


    .mc-contact-section-heading {

        max-width:
            700px;

    }


    .mc-contact-cta-box {

        padding:
            22px;

    }

}


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

@media (max-width: 767.98px) {

    .mc-contact-hero {

        padding:
            18px 0 20px;

    }


    .mc-contact-hero-card {

        padding:
            30px 20px;

        border-radius:
            17px;

    }


    .mc-contact-hero h1 {

        font-size:
            2rem;

    }


    .mc-contact-hero p {

        font-size:
            .82rem;

    }


    .mc-contact-section {

        padding:
            5px 0 25px;

    }


    .mc-contact-layout {

        gap:
            12px;

    }


    .mc-contact-section-heading h2 {

        font-size:
            1.5rem;

    }


    .mc-contact-form-card {

        padding:
            20px 16px;

        border-radius:
            15px;

    }


    .mc-contact-form {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .mc-contact-field-full {

        grid-column:
            auto;

    }


    .mc-contact-form-footer {

        justify-content:
            stretch;

    }


    .mc-contact-submit {

        width:
            100%;

    }


    .mc-contact-cta {

        padding-bottom:
            28px;

    }


    .mc-contact-cta-box {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            22px 18px;

        border-radius:
            15px;

    }


    .mc-contact-cta-button {

        width:
            100%;

    }

}