.banner {
    background-color: var(--edtt-color-secondary-100);
    width: 100%;
    height: 19.75rem;
    margin-bottom: 2rem;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Overlay for background image - reduced opacity for brighter image */
.banner[style*="background-image"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Option to disable overlay completely by adding 'no-overlay' class */
.banner[style*="background-image"].no-overlay::before {
    display: none;
}

.banner-content {
    max-width: 42.5rem;
    position: relative;
    z-index: 2;
}

    .banner-content p {
        /* font-size: var(--edtt-font-size-2xl); */
        font-size: 20px;
        /* color: var(--edtt-color-text-default); */
        color: var(--edtt-color-black);
        text-align: center;
        margin-bottom: 1.5rem;
    }

    /* Text shadow for better readability when background image is present */
    /* .banner[style*="background-image"] .banner-content p {
        color: var(--edtt-color-white);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    } */

    /* Stronger text shadow when no overlay */
    .banner[style*="background-image"].no-overlay .banner-content p {
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
    }

    .banner-content button {
        background-color: var(--edtt-color-primary-base);
        color: var(--edtt-color-white);
        padding: 0.25rem 1rem;
        font-size: var(--edtt-font-size-lg);
        font-weight: 400;
        border-color: var(--edtt-color-primary-base);
        border-radius: 0.25rem;
        border-width: 1px;
    }

.banner-title {
    font-size: 40px;
    color: var(--edtt-color-black);
    font-weight: 500;
    text-align: center;
    margin-bottom: 0.75rem;
}

/* Text shadow for title when background image is present */
/* .banner[style*="background-image"] .banner-title {
    color: var(--edtt-color-black);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
} */

/* Stronger text shadow for title when no overlay */
/* .banner[style*="background-image"].no-overlay .banner-title {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
} */