.overlayedbanner {
    position: relative;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
}

.overlayedbanner .overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(to bottom,
            rgb(85, 136, 143) 0%,
            rgb(102, 157, 164) 40%,
            rgb(127, 180, 187) 60%,
            rgb(239, 255, 252) 100%);


    /* background: linear-gradient(to bottom, rgb(72, 114, 106), rgba(118, 185, 173, 0.62)); */

    /* background: linear-gradient(to bottom, rgb(10, 96, 80), rgb(69, 171, 152)); */

    /*     background: linear-gradient(to bottom, rgb(10, 96, 80), rgb(239, 255, 252));
 */
    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding-inline: clamp(1.25rem, 6vw, 8rem);
}

/* Content container */
.banner-content {
    max-width: 820px;
    text-align: left;
}

/* 🔥 TITLE — BIG & FLUID */
.banner-title {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 0.6rem;
    color: #fff;
}

/* 🔥 SUBTITLE — BIG & FLUID */
.banner-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    margin: 0;
    color: #9fe3d7;
}

/* 📱 SMALL SCREENS */
@media (max-width: 640px) {
    .overlayedbanner .overlay {
        justify-content: center;
        padding-inline: 1.25rem;
    }

    .banner-content {
        text-align: center;
    }

    /* 🚀 EXTRA MOBILE BOOST */
    .banner-title {
        font-size: clamp(2.2rem, 7vw, 2.9rem);
    }

    .banner-subtitle {
        font-size: clamp(1.3rem, 4.5vw, 1.7rem);
    }
}


.bannerheader {
    font-family: "Roboto Mono", monospace;

    /* font-family: "Tektur", sans-serif; */
    font-weight: 100;
    font-style: normal;
    color: rgb(37, 38, 37) !important;

    /* color: rgb(71, 83, 83) !important; */
    /* Same color as before */
    margin: 0;
    font-size: 2.6rem;


    /*green*/
    text-shadow:
        0 0 5px rgb(84, 83, 82),
        0 0 10px rgba(99, 105, 105, 0.8),
        0 0 15px rgba(139, 143, 144, 0.6);

    /*lightblue*/
    /* 
  color: #6f8caf !important;
  text-shadow: 0 0 8px #7291b6, 0 0 12px #7291b6; */

}