.contacts-details {
    min-height: 85vh;
    height: 100%;
    width: 100%;
    background-color: #fffee7;
    padding: 0%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.contact-info-box {
    /* background-color: aqua; */
    height: 850px;
    width: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.address-box {
    height: 850px;
    width: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

#map {
    width: 75%;
    height: auto;
    aspect-ratio: 1 / 1;
}


h1,
h2 {
    font-weight: bolder;
}



/* Mobile */
@media (max-width: 600px) {
    .contacts-details {
        flex-direction: column;
    }

    .contact-info-box {
        height: 35vh;
        width: 100%;
    }

    .address-box {
        height: 50vh;
        width: 100%;
    }

    #map {
        width: 350px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    h1 {
        font-size: x-large;
    }

    h2 {
        font-size: 1rem;
    }

    h3 {
        font-size: large;
    }
}
    
/* Bigger Tablets */
@media (max-width: 1280px) {

.contact-info-box {
    height: 50vh;
    width: 50%;
}

.address-box {
    min-height: 50vh;
    width: 50%;
    flex-wrap: wrap;
}

#map {
    width: 75%;
    height: auto;
    aspect-ratio: 1 / 1;
}

h1 {
    font-size: x-large;
}

h2 {
    font-size: larger;
}

h3 {
    font-size: large;
}
}
    
/* Tablets */
@media (max-width: 768px) {

    .contact-info-box {
        height: auto;
        width: 50%;
    }

    .address-box {
        height: auto;
        width: 50%;
    }

    #map {
        width: 75%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    h1 {
        font-size: 1.1rem;
    }

    h2 {
        font-size: 1.05rem;
    }

    h3 {
        font-size: 1rem;
    }
}


@media (max-width: 480px) {

    .contacts-details {
        min-height: 100vh;
        min-width: 100vw;
        flex-direction: column;
    }

    .contact-info-box {
        height: auto;
        width: auto;
        flex-wrap: nowrap;
    }

    .address-box {
        height: auto;
        width: 90%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding-top: 3.5%;
    }
    
    #map {
        width: 75%;
    }

    h2 {
        font-size: 1rem;
    }

    h3 {
        font-size: 0.95rem;
    }
}