/**

 _____             _             _   
/  __ \           | |           | |  
| /  \/ ___  _ __ | |_ __ _  ___| |_ 
| |    / _ \| '_ \| __/ _` |/ __| __|
| \__/\ (_) | | | | || (_| | (__| |_ 
 \____/\___/|_| |_|\__\__,_|\___|\__|
                                     

*/
/* --------------------------------------------------------- Contact hoodtext */
.section-1 {
    background-color: #22333b00;
    color: white;
    padding: 5% 0;
    text-align: center;
}

.section-1 blockquote {
    font-size: 5em;
    font-style: italic;
    margin-bottom: 0%;
}

/* --------------------------------------------------------- E-mail opmaak */
.emailOpmaak {
    text-decoration: none;
    color: #0A0908;
}

/* --------------------------------------------------------- Box opmaak */
.contact-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2%;
    max-width: 150vh;
    margin: 0 auto;
    margin-top: 5%;
    padding: 5% 5%;
    background-color: #f8f9fa;
    border-radius: 1%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-content, .contact-map {
    width: 100%;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border-radius: 1%;
}

/* ------------------------------ MOBILE-FRIENDLY STYLES ------------------------------ */

/* Als het scherm kleiner is dan 768px (tablet/telefoon) */
@media (max-width: 768px) {

    /* Section 1 */
    .section-1 blockquote {
        font-size: 3em;
    }

    /* Contact sectie */
    .contact-section {
        grid-template-columns: 1fr; 
        padding: 5% 2%; 
    }

    /* Kaart aanpassen */
    .contact-map iframe {
        height: 300px; 
    }
}

/* Als het scherm kleiner is dan 480px (mobiel) */
@media (max-width: 480px) {

    /* Section 1 */
    .section-1 blockquote {
        font-size: 2.5em;
    }

    /* Contact sectie */
    .contact-section {
        gap: 1.5em;
    }

    .contact-map iframe {
        height: 200px;
    }
}