/* Media Queries voor mobiel */
@media (max-width: 1024px) {


    .logo img {
        margin-top: 0px;
    }

    nav ul.menu {
        display: none; /* Verberg het desktopmenu op mobiel */
    }

    .hamburger {
        display: flex; /* Toon hamburger menu op mobiel */
    }

    /* Animatie voor het openen van het mobiele menu */
    #mobileMenu.active {
        display: flex;
        animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* //////// */

    .intro-animation {
        padding-top: 150px; /* Verhoog de padding om de tekst lager te positioneren */
        /*height: auto;  Pas de hoogte aan voor mobiele schermen */
        height: 100vh; 
    }

    /* //////// */

    .video-holder {
        height: 100%;
        background-color: white;
        /* margin-top: -150px;
        margin-bottom: -150px; */
    }

    .video-holder video {
        width: 100vw;
        height: auto;
        max-height: 100vh;
        object-fit: contain;
        background-color: white;
    }

    /* //// */

    .interactive-video-container {
        padding: 0 20px; /* Adds padding on mobile */
    }

    .interactive-video {
        width: 100%; /* Stack videos on mobile */
    }

    .interactive-video-description {
        padding: 20px 0;
        font-family: 'Roboto', sans-serif;
        width: 100%;
        text-align: center;
        margin: 0 auto; /* Zorgt voor horizontaal centreren */
    }

    /* //// */

    .art-description {
        margin-top: 30px;
    }

    .btn-holder {
        margin-top: 30px;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-text, .footer-social, .footer-div3 {
        width: 100%;
        margin-bottom: 10px; /* Ruimte tussen de divs */
        
    }

    .footer-social {
        justify-content: left; /* Social media-iconen in het midden *//
    }

     /* //// Page animation //// */

    .text-line-page {
        color: white; /* Witte tekstkleur voor "Apps" */
        font-weight: bold;
        opacity: 0; /* Start volledig onzichtbaar */
        font-size: 18vw; /* Responsief voor mobiel */
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Zwarte outline */
        animation: fade-slide-pages 1s ease-out forwards;
        margin: 0; /* Verwijder eventuele marges */
        line-height: 1; /* Zorgt dat er geen extra ruimte is tussen de regels */
    }

    /* //// Apps //// */

    .media-holder {
        flex-direction: column;
    }
    
    .video-holder video {
        max-width: 100%;
    }

    .photo-holder img {
        width: 100%;
        min-width: 100%;
        height: 500px; /* Zorg ervoor dat de hoogte gelijk is */
        object-fit: cover; /* Houdt de verhoudingen goed */
        display: block;
    }

    .text-holder {
        padding: 20px 0;
        font-family: 'Roboto', sans-serif;
        width: 100%;
        text-align: left;
        margin: 0; /* Verwijder horizontaal centreren */
    }
    
    .text-holder h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        text-align: left;
    }
         
    .text-holder p {
        font-size: 1rem;
        color: #333;
        text-align: left;
        margin-left: -10px; /* Verwijder extra marge links */
    }

    .text-holder p a {
        font-size: 1rem;
        color: #333;
        text-align: left;
        margin-left: 0px; /* Verwijder extra marge links */
    }

    /* //// Film //// */
    
    .logo-holder {
        display: flex;
        flex-direction: column; /* Logo's onder elkaar */
        align-items: flex-start; /* Links uitlijnen */
        gap: 10px; /* Ruimte tussen de logo's */
        padding: 10px 0;
    }
    
    .logo-holder img {
        max-width: 50%; /* Pas de grootte aan voor mobiele schermen */
        height: auto;
    }

    .logo-container-video {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        gap: 20px; /* Adds spacing between logos */
    }
    
    .logo-container-video img {
        max-width: 100px;
        height: auto;
    }
    
    .photo-title {
        text-align: left;
        font-size: 1rem;
        color: #333;
        margin-top: 5px;
        margin-bottom: 20px;
        margin-left: -9px;
    }

    .photo-container {
        flex-direction: column;
    }

    .main-text {
        padding: 20px 0;
        font-family: 'Roboto', sans-serif;
        width: 100%;
        text-align: left;
        margin: 0 auto; /* Zorgt voor horizontaal centreren */
    }
    
    .main-text p {
        text-align: left;
        margin-bottom: 10px;
    }

    .main-text-active {
        padding: 20px 0;
        font-family: 'Roboto', sans-serif;
        width: 100%;
        text-align: center;
        margin: 0 auto; /* Zorgt voor horizontaal centreren */
    }

    .description {
        text-align: left;
        padding-left: 20px;
        padding-right: 20px;
    }

    .video-holder-index iframe {
        width: 100%;
        height: auto;
    }

    /* //// ART //// */

    section-title {
        font-size: 1.5rem;
    }

    .description {
        font-size: 0.9rem;
    }

    /* //// Contact //// */

    .contact-container {
        width: 95%;
    }

}

/* Media Queries voor grotere schermen */
@media (min-width: 1024px) {
    body {
        padding: 20px;
    }
    
    /* Header */
    header {
        flex-direction: row; /* Rangschik items horizontaal */
        justify-content: space-between;
    }

    .logo img {
        margin-top: 0px;
    }

    nav ul {
        flex-direction: row; /* Horizontale navigatie */
        margin-top: 0;
    }

    nav ul li {
        margin: 0 10px;
    }

    .intro {
        padding: 80px 100px; /* Meer padding op grotere schermen */
    }

    .intro h1 {
        font-size: 3.0rem; /* Grotere tekst voor desktops */
        margin-bottom: 25px;
    }

    .intro h2 {
        font-size: 2.0rem; /* Grotere tekst voor desktops */
        margin-bottom: 25px;
    }

    .intro p {
        font-size: 1.2rem;
        padding: 0 50px; /* Meer ruimte rondom de tekst */
    }

    /* Secties */
    section {
        margin: 50px 0;
    }

    section h3 {
        font-size: 1.5rem;
    }
    

}

/* Responsive for smaller screens */
@media (max-width: 900px) {
    .print-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .close {
        position: fixed;
        top: 150px; /* Adjust to set distance from top of the window */
        right: 50px; /* Set distance from the right side */
        color: #2e6db1; /* Set your preferred color */
        font-size: 40px; /* Adjust size as needed */
        cursor: pointer;
        z-index: 2; /* Ensure it stays above the image */
    }
}

@media (max-width: 600px) {
    .print-grid {
        grid-template-columns: 1fr;
    }
    .close {
        position: fixed;
        top: 150px; /* Adjust to set distance from top of the window */
        right: 30px; /* Set distance from the right side */
        color: #2e6db1; /* Set your preferred color */
        font-size: 40px; /* Adjust size as needed */
        cursor: pointer;
        z-index: 2; /* Ensure it stays above the image */
    }
}