/* Mobile Layout: Stack images above content */
@media (max-width: 768px) {
    /* Make spotlight sections stack vertically */
    .spotlight {
        display: flex;
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        padding: 20px 10px;
    }

    /* Image first */
    .spotlight .image {
        order: -1; /* Move image before content */
        width: 90% !important;
        margin-bottom: 15px;
    }

    .spotlight .image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .spotlight .content {
        width: 100% !important;
    }

    .spotlight .content h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .spotlight .content p {
        font-size: 16px;
        line-height: 1.5;
        text-align: justify;
    }

    /* Banner adjustments */
    .banner.fullscreen {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 10px;
    }

    .banner .image img {
        width: 90%;
        height: auto;
        margin-bottom: 20px;
    }

    .banner .content h1 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .banner .content p {
        font-size: 16px;
        padding: 0 5px;
    }
}