.contact-main-section {
    background-color: #959BCD;
    min-height: 100vh;
}

    .contact-main-section .contact-main {
        display: grid;
        position: relative;
        width: 100%;
        gap: 0;
        grid-template-columns: 1fr 1fr;
        padding-top: 7.778vw;
        grid-template-rows: 40px 8.806vw 660px;
    }

    .contact-main-section .contact-breadcrumb {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        display: flex;
    }

        .contact-main-section .contact-breadcrumb .breadcrumbs-2024 {
            background: rgba(97, 104, 151, 0.50);
        }

    .contact-main-section .contact-title {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        display: flex;
        align-items: end;
        padding-top: 10%;
        padding-left: 1.8%;
    }

    .contact-main-section .contact-title-text {
        font-size: 6.806vw;
        font-style: normal;
        font-weight: 900;
        line-height: 110%;
        letter-spacing: 1.96px;
        text-transform: lowercase;
    }

    .contact-main-section .contact-detail {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 3.8%;
    }

    .contact-main-section .contact-form {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        height: 100%;
        display: block;
        display: flex;
        justify-content: end;
    }

    .contact-main-section .contact-detail-type {
        display: flex;
        align-items: center;
        padding-top: 6.167vw;
    }

    .contact-main-section .text {
        color: var(--tinyscholars-light-cream);
        font-family: 'AVENIR-MEDIUM' !important;
        font-size: 1.25vw !important;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
    }

    .contact-main-section .detail-text-title {
        color: var(--tinyscholars-light-cream);
        font-size: 2.778vw !important;
        line-height: 110%;
        letter-spacing: 0.8px;
    }

    .contact-main-section .detail-text {
        color: var(--tinyscholars-light-cream);
        font-size: 1.528vw !important;
        width: 100%;
        font-family: 'AVENIR-MEDIUM' !important;
        line-height: 130% !important;
    }

    .contact-main-section .detail-text-email {
        text-decoration: underline;
    }

    /*.contact-main-section .mat-email {
    background: url(/Files/templates/main-2024/images/icons/email.svg) 0% 0% no-repeat;
    background-size: 80px 80px;
    padding: 35px 85px 35px 0px !important;
    background-position: center;
    margin-right: 25px;
}*/

    .contact-main-section .mat-clock {
        background: url(/Files/templates/main-2024/images/icons/clock.svg) 0% 0% no-repeat;
        background-size: 5.625vw 6.667vw;
        padding: 3.819vw 6.944vw 3.819vw 0px !important;
        background-position: center;
        margin-right: 25px;
    }

    .contact-main-section .detail-email-link {
        cursor: pointer;
    }

    .contact-main-section .popup-content {
        display: flex;
        flex-direction: column;
        float: right;
        width: 27.083vw;
        margin-right: 6%;
    }

    .contact-main-section .popup-title {
        color: var(--tinyscholars-light-cream);
        font-size: 2.500vw !important;
        line-height: 110% !important;
        letter-spacing: 0.8px;
    }

    .contact-main-section .popup-text-collection {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
        padding-bottom: 25px;
        width: 100%;
    }


    .contact-main-section .popup-text {
        color: var(--tinyscholars-light-cream);
        line-height: 160%;
        font-family: 'Avenir-Medium';
        font-size: 1.25vw !important;
    }

    .contact-main-section .input-name {
        display: flex;
        justify-content: space-between;
    }

    .contact-main-section .first-name {
        width: 93% !important;
    }

    .contact-main-section .last-name {
        width: 93% !important;
    }

    .contact-main-section #emailError {
        width: 96%;
    }

    .contact-main-section #phoneNumberError {
        width: 96%;
    }

    .contact-main-section .name-div {
        width: 100%;
    }

    .contact-main-section .contact-form input {
        width: 97%;
        height: 40px;
        background: var(--tinyscholars-light-cream);
        font-weight: 800;
        color: var(--tinyscholars-black);
        font-family: Avenir-Medium;
        border: none;
        border-radius: 10px;
        margin-top: 13px;
    }

    .contact-main-section .contact-form textarea {
        width: 97%;
        background: var(--tinyscholars-light-cream);
        font-weight: 800;
        color: var(--tinyscholars-black);
        font-family: Avenir-Medium;
        border: none;
        border-radius: 10px;
        margin-top: 13px;
        margin-bottom: 20px;
    }

    .contact-main-section .contact-form input,
    .contact-main-section .contact-form textarea {
        text-indent: 15px;
    }

        .contact-main-section .contact-form input:focus,
        .contact-main-section .contact-form textarea:focus {
            outline: none;
        }

    .contact-main-section .contact-form ::placeholder {
        color: var(--tinyscholars-lavender);
        margin-left: 10px;
        font-family: Avenir-Roman;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
    }

    .contact-main-section .popup-button {
        background: var(--tinyscholars-light-cream);
        color: var(--tinyscholars-lavender);
        border: none;
        padding: 17px 36px;
        border-radius: 40px;
        width: 153px;
        cursor: pointer;
    }

        .contact-main-section .popup-button:hover {
            background: var(--tinyscholars-lavender);
            border: 2px solid var(--tinyscholars-light-cream) !important;
        }

    .contact-main-section .popup-content textarea {
        resize: none;
        padding-top: 5px;
    }

    .contact-main-section .popup-button-text {
        font-size: 20px;
        font-family: 'MontserratAlternates-Bold';
        color: var(--tinyscholars-lavender) !important;
        font-weight: 900;
    }

    .contact-main-section .popup-button:hover .popup-button-text {
        color: var(--tinyscholars-light-cream) !important;
    }

    .contact-main-section .mat-close-popup {
        background: url(/Files/templates/main-2024/images/icons/popup-close.svg) 0% 0% no-repeat;
        background-size: 43px 43px;
        padding: 15px 15px !important;
        background-position: center;
    }

    .contact-main-section .custom-dropdown {
        position: relative;
        height: fit-content;
        width: 97%;
    }

        .contact-main-section .custom-dropdown input.fakeselect {
            font-weight: 800;
            color: var(--tinyscholars-black);
            font-family: Avenir-Medium;
            width: 100%;
            height: 40px;
            border: none;
            outline: unset !important;
            background-color: #FCF4E7;
            border-radius: 8px;
            font-size: 15px;
            cursor: pointer;
        }

            .contact-main-section .custom-dropdown input.fakeselect::placeholder {
                color: #959BCD;
                font-family: 'avenir-roman';
            }


        .contact-main-section .custom-dropdown .fakeselect-rap {
            position: relative;
        }

            .contact-main-section .custom-dropdown .fakeselect-rap .down-arrow {
                position: absolute;
                right: 12px;
                top: 30px;
            }

        .contact-main-section .custom-dropdown .fake-dropdown {
            display: none;
            position: absolute;
            left: 0px;
            top: 54px;
            background-color: #FCF4E7;
            flex-direction: column;
            width: 100%;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            text-align: left;
            border-radius: 8px;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 11px 0px;
            z-index: 42069;
        }

            .contact-main-section .custom-dropdown .fake-dropdown button {
                background-color: #FCF4E7;
                border: none;
                outline: none;
                text-align: left;
                color: #959BCD;
                font-family: Avenir-Medium;
                font-size: 15px;
                font-style: normal;
                font-weight: 800;
                line-height: 180%;
                padding: 2px 18px;
                display: block;
                cursor: pointer;
                width: 100%;
            }

                .contact-main-section .custom-dropdown .fake-dropdown button:hover {
                    background-color: rgba(149, 155, 205, 0.30);
                }

@media (max-width: 1440px) {
    .contact-main-section .popup-content {
        max-width: 385px;
        width: 100%;
    }
    /* Temp */

    .contact-main-section .text {
        font-size: 18px !important;
    }

    .contact-main-section .popup-text {
        font-size: 18px !important;
    }

    .contact-main-section .popup-title {
        font-size: 40px !important;
    }

    .contact-main-section .detail-text {
        font-size: 22px !important;
    }

    .contact-main-section .detail-text-title {
        font-size: 40px !important;
    }

    .contact-main-section .mat-clock {
        background-size: 81px 96px;
        padding: 50px 81px 50px 0px !important;
    }
}

@media (max-width: 1240px) {
    .contact-main-section .contact-main {
        padding-top: 120px;
    }
}

@media (max-width: 1240px) {
    .contact-main-section .contact-main {
        padding-top: 120px;
    }

    .contact-main-section .detail-text-title {
        font-size: 30px !important;
    }

    .contact-main-section .detail-text {
        font-size: 18px !important;
    }
}

@media (max-width: 834px) {
    .contact-main-section .contact-main {
        display: flex;
        flex-direction: column;
        min-height: 86vh !important;
        padding-top: 110px;
        padding-bottom: 30px;
    }

    .contact-main-section .contact-breadcrumb {
        order: 2;
    }

    .contact-main-section .contact-title {
        order: 1;
        align-self: unset;
        padding-top: 0px !important;
        padding-left: 0px !important;
    }

    .contact-main-section .contact-form {
        order: 4;
        align-self: center;
        padding-top: 65px;
    }

    .contact-main-section .popup-content {
        margin-right: 0;
    }

    .contact-main-section .contact-detail {
        order: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 14px;
        padding-left: 0px !important;
    }

    .contact-main-section .detail-text-collection {
        display: flex;
        grid-column-start: 1;
        grid-column-end: 3;
        justify-content: center;
    }

    .contact-main-section .contact-detail-type {
        display: flex;
        justify-content: center;
        padding-top: 65px !important;
    }

    .contact-main-section .detail-email {
        grid-column-start: 1;
    }

    .contact-main-section .detail-clock {
        grid-column-start: 2;
        width: 385px;
    }

    .contact-main-section .contact-title-text {
        font-size: 70px !important;
    }

    .contact-main-section .text {
        font-size: 16px !important;
    }

    .contact-main-section .detail-text {
        font-size: 18px !important;
    }

    .contact-main-section .popup-title {
        font-size: 35px !important;
    }

    .contact-main-section .detail-text-title {
        width: 100%;
        font-size: 30px !important;
    }

    .contact-main-section .detail-text {
        width: 110%;
    }

    .contact-main-section .popup-text {
        font-size: 18px !important;
    }
}

@media (max-width: 390px) {
    .contact-main-section .detail-text-title {
        font-size: 5.591vw !important;
    }

    .contact-main-section .contact-breadcrumb {
        width: 100%;
        align-self: center;
    }

    .contact-main-section .contact-title-text {
        font-size: 14.385vw !important;
    }

    .contact-main-section .mat-clock {
        background-size: 13.333vw 15.897vw;
        padding: 6.41vw 14.103vw 6.41vw 0px !important;
    }

    .contact-main-section .detail-clock {
        width: 100%;
    }

    .contact-main-section .popup-title {
        font-size: 7.692vw !important;
    }

    .contact-main-section .text {
        width: 100%;
        font-size: 4.103vw !important;
    }

    .contact-main-section .contact-form {
        padding-top: 10%;
        width: 100%;
    }

    .contact-main-section .contact-main {
        padding-right: 24px;
        padding-left: 24px;
    }

    .contact-main-section .detail-text {
        font-size: 3.59vw !important;
        width: 110%;
    }

    .contact-main-section .contact-detail-type {
        padding-top: 10% !important;
    }

    .contact-main-section .popup-text {
        font-size: 4.103vw !important;
    }

    .contact-main-section #firstNameError {
        width: 96% !important;
    }

    .contact-main-section #lastNameError {
        width: 96% !important;
    }
}


.contact-main-section .error-alert-message {
    display: none;
    max-height: 100px;
    transition: 0.28s;
    overflow: hidden;
    color: var(--tinyscholars-light-cream);
    text-align: right;
    font-family: 'Avenir-Roman';
    font-size: 11px;
    width: 92%;
}


.contact-main-section #cityError {
    width: 96% !important;
}


.contact-main-section .error {
    border: 2px solid rgba(234, 83, 83, 1) !important;
    margin-top: 0 !important;
}