@media (max-width: 768px) {

    h1,
    h2,
    h3,
    h4,
    h5 {
        font-size: 2rem;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    .hamburger {
        display: block;
        font-size: 2rem;
        cursor: pointer;
        background: none;
        border: none;
        color: rgb(203 187 159);
    }

    .menu {
        display: flex;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100vw;
        gap: 5rem;
        height: 0;
        background: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 0;
        overflow: hidden;
        transition: height 0.4s ease-in-out, padding 0.4s ease-in-out;
    }

    .menu.active {
        height: 100vh;
        padding: 20px 0;
    }

    .menu-list a {
        text-decoration: none;
        padding: 1rem 5rem;
        color: #011526;
        font-family: "playfair-display";
        font-weight: 500;
        font-size: 1.1rem;
        transition: color 0.3s ease-in-out;
        background-color: rgb(248 243 237);
        border-radius: 10rem;
    }

    .menu-list a:hover {
        text-decoration: underline;
        color: #011526;
    }

    /* HERO SECTION */

    .flex-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #author_copyright { padding:0 1em;}
    .hero-image {
       width: 90%;
        height: auto;
    }

    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-content {
        width: 100%;
    }

    .about-author {
        margin: 0;
        padding: 0 15px;
    }

    .media-sect {
        flex-direction: column;
        gap: 2rem;
        padding: 1rem 0;
        width: 100%;
    }

    .media-icons a img {
        width: 3rem;
        height: auto;
    }


    .latest-release {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 0 1rem;
    }


    /* 1) Image */
    .mikewinser {
        order: 1;
        text-align: center;
    }

    .mikewinser img {
        width: 80%;
        max-width: 300px;
        margin: 1rem auto;
        display: block;
    }

    /* 2) Release Detail */
    .release-detail {
        order: 2;
        text-align: center;
        margin: 0 auto;
        max-width: 600px;
    }

    /* 3) H2, H3, and Paragraphs */
    .release-content {
        order: 3;
        text-align: center;
        margin: 0 auto;
        max-width: 600px;
    }

    .books-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        /* Keep cards in a single row */
    }

    .book-card {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }

    .footer-container {
        /* Stack items vertically instead of side by side */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .footer-left {
        /* Remove the right margin and add bottom spacing for stacking */
        margin-right: 0;
        margin-bottom: 20px;
    }

    .footer-divider {
        /* Hide or adjust the divider for smaller screens */
        display: none;
    }

    .footer-right {
        /* Center-align text and items */
        align-items: center;
        text-align: center;
    }

    .footer-text {
        /* Remove extra margin on smaller screens */
        margin-right: 0;
        margin-bottom: 10px;
    }

    .social-icons {
        /* Make sure the social icons are also centered */
        justify-content: center;
    }

}