.contact{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    height: fit-content;
    min-height: 100vh;
    width: 100vw;
    max-width: 90vw;
    padding-left: 5vw;
}

.mails{
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 4rem;
}

.contact >div>div{
    display: flex;
    flex-direction: column;
    gap: 0em;
    width: fit-content;

}

.contact >div>div p{
    width: fit-content;
    font-size: clamp(20px, 5vw, 25px);
    color: var(--tertiary-color);
}

.contact >div>div> a{
    width: fit-content;
    font-size: clamp(35px, 5vw, 30px);
    color: var(--secondary-color);
}

.contact img{
    width: 80vw;
    max-width: 30rem;
}

.contact__container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2em;
    width: 100%;
    padding-top: 2em;
    text-align: center;
    padding-bottom: 10rem;
}
.contact__container_extra{
    width: 95vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

@media(max-width: 1100px){
    .contact{
        padding-top: 10rem;
        padding-bottom: 10rem;
        flex-direction: column;
        gap: 10vh;
        height: fit-content;
        justify-content: center;
    }

    .mails{
        gap: 1em;
    }

    .contact >div>div{
        gap: 1em;
    }


    .contact >div>div> a{
        font-size: clamp(35px, 5vw, 100px);
    }
}