@import url('https://fonts.googleapis.com/css2?family=Quintessential&family=Space+Grotesk:wght@300..700&display=swap');

@media (max-width: 325px) {
    /* 1. RESET BOX MODEL */
    * {
        box-sizing: border-box !important;
    }

    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. BROCHURE ELEMENTS ALIGNMENT */
    /* This forces the container to occupy the full 365px width */
    .brochure_elements_cont, 
    .brochure_wrapper,
    #section-two {
        display: flex !important;
        flex-direction: column !important; /* Stack vertically */
        align-items: center !important;    /* Center horizontally */
        justify-content: center !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        transform: none !important; /* Removes any desktop 'translate' */
    }

    .brochure_elements {
        position: relative !important;
        width: 90% !important; /* Keeps it within the 365px bounds */
        left: 0 !important;
        margin: 20px 0 !important;
        text-align: center !important;
        display: block !important;
    }

    .brochure_elements img {
        max-width: 150px !important; /* Size adjustment for iPhone/Galaxy */
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* SPECIFIC SOCIAL MEDIA RESET */
@media (max-width: 300px) {
    #section-five, 
    .footer, 
    .social_media_container {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 40px 0 !important;
        margin-top: 50px !important; /* Creates space from the section above */
        top: 0 !important;
        left: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important; /* Temporary: helps you see the box */
    }

    /* Target the row of icons */
    .social_media_icons {
        display: flex !important;
        flex-direction: row !important; /* Keep icons in a line */
        justify-content: center !important;
        align-items: center !important;
        gap: 25px !important; /* Space between icons */
        width: 100% !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    .social_media_icons a, 
    .social_media_icons img {
        width: 45px !important; /* Make them easy to tap with a thumb */
        height: 45px !important;
        display: inline-block !important;
        position: relative !important;
        transition: transform 0.3s ease;
    }
}

    /* 4. SECTION FOUR (SLIDER) - Keeping it stable */
    #section-four {
        width: 100% !important;
        left: 0 !important;
        margin: 0 !important;
    }
}