:root {
    --main: #368F90;
    --secondary: #1F6574;
    --btn-blue: #4F94D7;
    --stars-yellow: #FFC107;
    --testimony-text: #767E86;
}

.contact {
    height: 100vh;
    background-size: cover;
    background-color: var(--secondary);
    background-image: url('../images/contact-page.png');
}

.contact_title * {
    color: white;
}

.contact_title h2 {
    opacity: 0.5;
}

.contact_title h1 {
    max-width: 40vw;
}

.contact_form {
    display: flex;
    flex-direction: column;
}

.contact_form * {
    margin-bottom: .5rem;
}

.contact_form label, .contact_form button {
    color: white;
}

.contact_form input, .contact_form textarea {
    min-width: 50vw;
    min-height: 3rem;
    margin-bottom: 1rem;
}

.contact_form button {
    height: 3.5rem;
    background-color: var(--btn-blue);
}

@media (max-width: 999px) {
    .contact {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
        height: max-content;
    }

    .contact > div {
        flex-direction: column;
    }

    .contact_title {
        margin-bottom: 4rem;
    }

    .contact_title h1 {
        max-width: 80vw;
    }
}

@media (max-width: 799px) {
    .contact {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 699px) {
    .contact_title h1 {
        max-width: initial;
        font-size: 3.75rem;
    }
}

@media (max-width:549px) {
    .contact_title h2 {
        font-size: 1.85rem;
    }

    .contact_title h1 {
        font-size: 3rem;
    }
}

@media (max-width:459px) {
    .contact_title h2 {
        font-size: 1.75rem;
    }

    .contact_title h1 {
        font-size: 2.5rem;
    }
}

@media (max-width:399px) {
    .contact_title h2 {
        font-size: 1.25rem;
    }

    .contact_title h1 {
        font-size: 1.9rem;
    }
}