/* ---- MOBILE & TABLET STYLES ---- */
@media (max-width: 768px) {

    /* -- General Layout -- */
    body {
        width: 100%;
        overflow-x: hidden;
    }

    /* -- Scroll-to-anchor offset -- */
    #about, #leadership, #involved, #promo, #contact {
        scroll-margin-top: 100px;
    }

    /* -- Navigation -- */
    header {
        padding: 0.75rem 1rem;
    }

    nav {
        flex-direction: column;
        gap: 0.75rem;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    nav ul li {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
    }

    nav ul li a {
        font-size: 0.9rem;
    }

    /* -- Hero Video -- */
    .hero-content h1 {
        font-size: 3rem;
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    /* -- About / Carousel -- */
    #about {
        padding: 0 0 3rem 0;
    }

    .about-carousel-wrapper {
        border-radius: 0;
    }

    .carousel-arrow {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
    }

    .about-text-block h2 {
        font-size: 2rem;
    }

    /* -- Sections general -- */
    #leadership {
        padding: 4rem 0;
    }

    #involved {
        padding: 4rem 0;
    }

    #leadership h2,
    #involved h2,
    .contact-text h2 {
        font-size: 2rem;
    }

    /* -- Contact -- */
    .contact-container {
        flex-direction: column;
        text-align: center;
        padding: 0 2rem;
    }

    .contact-map iframe {
        width: 100%;
        height: 280px;
    }

    /* -- Leadership Scroll -- */
    .leader-scroll-container {
        max-width: 100%;
    }

    /* -- Hub grid -- */
    .hub-grid {
        grid-template-columns: 1fr;
    }

    /* -- Parallax -- */
    .parallax-section {
        background-attachment: scroll;
        clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
        padding: 7rem 1.5rem;
    }

    .parallax-section h2 {
        font-size: 2rem;
    }

    /* -- Give Page -- */
    .donation-options {
        flex-direction: column;
        align-items: center;
    }
}