/* Container for the banner and text */
.banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6; /* Wide banner: you can adjust ratio */
    overflow: hidden;
}

    /* Banner image styling */
    .banner img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ensures the image covers the area nicely */
        display: block;
    }

/* Text styling on the banner */
.banner-text {
    position: absolute;
    color: #D0DF56;
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
    left: 5%;
    top: 30%;
    width: 90%;
    max-width: 400px;
    word-wrap: break-word;
}

/* Responsive */
@media (max-width: 768px) {
    .banner {
        aspect-ratio: 16 / 7; /* slightly taller on tablets */
    }

    .banner-text {
        font-size: 2.5vw;
        top: 20%;
        width: 80%;
    }
}

@media (max-width: 480px) {
    .banner {
        aspect-ratio: 16 / 9; /* even taller on mobiles */
    }

    .banner-text {
        font-size: 2.5vw;
        top: 15%;
        width: 90%;
    }
}