@import url("main.css");

/*
    CONTACT-US.CSS

    Description: Styles for contact-us.html page
*/

.contact-us__section {
    width: 80%;
}

.contact-us__title-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.contact-us__title-image {
    width: 25%;
    height: 150px;
    object-fit: contain;
    color: var(--color-yellow);
}

.contact-us__input-container {
    position: relative;
    display: flex;
    flex-direction: row;
    width: inherit;
}

.contact-us__input {
    width: 92.5%;
}

.contact-us__input-submit {
    display: flex;
    justify-content: right;
    position: absolute;
    border: solid 5px var(--color-yellow);
    width: 200px;
    padding: 0;
    padding-left: 2.5%;
    right: 0;
    flex-shrink: 0;
}

.contact-us__input-image {
    width: 100px !important;
    height: 100%;
    font-size: 0.75em;
    color: var(--color-yellow);
}

@media (max-width: 1320px) {
    .contact-us__input {
        width: 90%;
    }
}

@media (max-width: 968px) {
    .contact-us__section {
        width: 90%;
    }

    .contact-us__input {
        width: 89%;
    }
}

@media (max-width: 810px) {
    .contact-us__input {
        width: 87.5%;
    }
}

@media (max-width: 764px) {
    .contact-us__section {
        width: 95%;
    }

    .contact-us__input {
        width: 85%;
    }
}

@media (max-width: 640px) {
    .contact-us__input {
        width: 85%;
    }

    .contact-us__title-image {
        width: 40%;
    }
}

@media (max-width: 600px) {
    .contact-us__input {
        width: 82.5%;
    }
}

@media (max-width: 520px) {
    .contact-us__input-image {
        width: 75px !important;
    }
}

@media (max-width: 400px) {
    .contact-us__input-container {
        flex-direction: column;
        gap: 5px;
    }

    .contact-us__title-image {
        width: 60%;
    }

    .contact-us__input-submit,
    .contact-us__input {
        width: 100%;
    }

    .contact-us__input-submit {
        justify-content: center;
        position: relative;
        z-index: 0;
    }

    .contact-us__input-image {
        width: 40px !important;
    }
}