/* Home Page */
/* Tablet(max-width: 768px) */
/* navigation */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }

    nav ul {
        flex-direction: column;
        gap: 20px;
    }

    /* Hero Section */
    .hero h2 {
        font-size: 2.5em;
    }

    .hero h3 {
        font-size: 1.2em;
    }

    .cta-button {
        padding: 12px 25px;
    }

    /* Info Cards */
    .info-section {
        flex-direction: column; 
        flex-wrap: wrap; 
        gap: 15px; 
        padding: 30px 5%; 
    }

    .info-card {
        width: 100%; 
        height: 100%; 
    }
    .info-card h3 {
        font-size: 1.3em; 
    }

    .info-card p {
        font-size: 0.7em; 
    }

    .info-card a {
        font-size: 1rem;
    }

/* gallery section: art beyond, Tablet */
    .gallery-track{
        width: 100%;
        margin: auto;
        padding-left: 80px;
    }
    .gallery-track img {
        width: 100%; /* One image per row */
        height: 225px;
    }

    .gallery-wrapper {
        
        padding: 0  20px
    }

    /* arrow for tablet */
    .gallery-arrow {
        font-size: 30px;
        padding: 6px 12px;
    }
        .gallery-arrow.left {
        left: 60px;
    }

    .gallery-arrow.right {
        right: 60px;
    }


    /* About Section */
    .about-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .about-images img {
        width: 15%; /* all 5 images per row */
    }

    .about-text h1 {
        font-size: 1.8em;
    }
    .about-section h1{
        font-size: 1.8em;
    }
}


/* Mobile */
@media (max-width: 540px){
        /* Navigation */
        nav {
            padding: 10px 0;
        }

        nav ul {
            flex-direction: column;
            gap: 15px;
        }

        /* Hero Section */
        .hero h2 {
            font-size: 2em;
        }

        .hero h3 {
            font-size: 1em;
        }

        .cta-button {
            padding: 10px 20px;
        }

/* gallery section: art beyond, mobile */

    .gallery-track{
       padding-left: 80px;
    }
    .gallery-track img {
        width: 100%; /* One image per row */
        height: 225px;
    }

    .gallery-wrapper {
        padding: 0 10px; 
    }

    /* Arrow sizes for mobile */
    .gallery-arrow {
        font-size: 25px;
        padding: 5px 10px;
    }

   
    /* Info Cards */

        .info-section {
            flex-direction: column; 
            padding: 20px 5%; 
        }
    
        .info-card {
            width: 100%; 
            height: 100%; 
        }
    
        .info-card h3 {
            font-size: 1em; 
        }
    
        .info-card p {
            font-size: 0.2em; 
            text-align: center;
        }

        .info-card a {
            font-size: 0.7rem;
        }


    /* self portrate */
    /* About Section */
        .about-images {
            display: flex;
            flex-direction: row;
        }

        .about-images img {
            width: 15%;  /* all 5 images */
        }

        .about-text h1 {
            font-size: 1.5em;
        }
        .about-section h1{
            font-size: 1.5em;
        }
    }






/* Gallery Page */
/* Tablet */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 images per row */
    }
}

/* Mobile */
@media (max-width: 540px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* 1 image per row */
    }
}


/* CONTACT PAGE */
/* Tablet*/
@media (max-width: 768px) {
    .get-in-touch {
        padding: 20px 15px;
    }

    .contact-form {
        padding: 15px;
        max-width: 100%; 
    }

    .contact-form fieldset {
        padding: 20px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 1em; 
    }

    .contact-form legend {
        font-size: 1.2em; 
    }

    .contact-form button {
        font-size: 1em;
        padding: 8px 16px;
    }

    .visit-us {
        padding: 15px;
    }

    .museum-addresses p {
        font-size: 1em;
    }
}

/* Mobile*/
@media (max-width: 540px) {
    .contact-form {
        padding: 15px;
        max-width: 100%; 
    }

    .contact-form fieldset {
        padding: 15px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 1em; 
    }

    .contact-form legend {
        font-size: 1.1em;
    }

    .contact-form button {
        font-size: 1.1em; 
        padding: 12px 25px; 
    }

    .visit-us {
        padding: 15px;
    }

    .museum-addresses p {
        font-size: 0.9em;
    }
    
}

/* ABOUT PAGE */
/* Tablet*/
@media (max-width: 768px) {
    h1 {
        font-size: 2rem; 
    }

    p {
        font-size: 1rem; 
    }

    .section {
        padding: 30px 10%; 
    }

    .more-info-section {
        flex-direction: column; 
    }

    .cta-button {
        padding: 12px 25px; 
    }
}

/* Mobile */
@media (max-width: 540px) {
    h1 {
        font-size: 1.5rem; 
    }

    p {
        font-size: 0.9rem; 
    }

    .section {
        padding: 20px 5%; 
    }

    .cta-button {
        padding: 10px 20px; 
    }
}



/* footer */
/* Tablet */
@media (max-width: 768px) {
    .footer-menu ul {
        flex-direction: column; 
        gap: 20px; 
    }

    .footer-menu ul li a {
        font-size: 16px; 
    }

    .footer-text p {
        font-size: 14px; 
    }
}

/* Mobile*/
@media (max-width: 540px) {
    footer {
        padding: 30px 10px; 
    }

    .footer-menu ul {
        flex-direction: column; 
        gap: 15px; 
    }

    .footer-menu ul li a {
        font-size: 14px; 
        padding: 5px 0; 
    }

    .footer-text p {
        font-size: 13px; 
    }

    .footer-logo img {
        width: 100px; 
        margin-bottom: 15px; 
    }
}



/* hamburger navigation */
/* Mobile and Tablet Menu */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }

    nav ul {
        flex-direction: column;
        gap: 20px;
        /* hidden menu */
        display: none; 
    }

    /* Show the hamburger menu on mobile/tablet */
    .hamburger-menu {
        display: flex;
    }
}

/* Mobile */
@media (max-width: 540px) {
    nav {
        padding: 10px 0;
    }

    nav ul {
        flex-direction: column;
        gap: 15px;
        display: none; /* Hide the menu */
    }

    /* Hero Section */
    .hero h2 {
        font-size: 2em;
    }

    .hero h3 {
        font-size: 1em;
    }

    .cta-button {
        padding: 10px 20px;
    }
}