/* Responsive Styles */

/* Small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.8em;
    }

    .hero-section {
        padding: 100px 20px;
    }

    .tagline {
        font-size: 1.2em;
    }

    .cta-button {
        padding: 12px 25px;
        font-size: 0.9em;
    }

    .story-section .container {
        flex-direction: column;
        text-align: center;
    }

    .story-section.section-two .container {
        flex-direction: column; /* Override row-reverse for small screens */
    }

    .story-section .content-left,
    .story-section .content-right {
        width: 100%;
    }

    .story-section .section-image {
        margin-top: 30px;
    }

    .cta-final h2 {
        font-size: 2em;
    }

    .cta-final p {
        font-size: 1em;
    }
}

/* Medium devices (tablets, 601px to 900px) */
@media only screen and (min-width: 601px) and (max-width: 900px) {
    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 2.2em;
    }

    .story-section .container {
        flex-direction: column;
        text-align: center;
    }

    .story-section.section-two .container {
        flex-direction: column; /* Override row-reverse for medium screens */
    }

    .story-section .content-left,
    .story-section .content-right {
        width: 100%;
    }

    .story-section .section-image {
        margin-top: 40px;
    }
}

/* Large devices (desktops, 901px and up) - Base styles already cover this */
@media only screen and (min-width: 901px) {
    .story-section .container {
        flex-direction: row;
        text-align: left;
    }

    .story-section.section-two .container {
        flex-direction: row-reverse;
    }
}