.hero-offer-section {
    background-image: url("/media/hero/Holioffer.png");
    background-size: contain;
    background-position: center;
    background-color: #ac64ff;
    background-repeat: no-repeat;
    /* height: 30vh; */
    /* box-shadow: 0px 0px 10px rgba(102, 7, 174, 0.659); */
    width: 100vw;

    /* Fixed height for mobile */
    min-height: 250px;
}




@media (min-width: 640px) {
    .hero-offer-section {
        height: 95vh;
        background-color: #bc82ff;
        /* margin-top: 10vh; */


        /* Full screen on desktop */
    }
}

@keyframes marquee {
    0% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.offer-marquee-container {
    width: 100vw;
    background-color: #ac64ff;
    /* red-500 */
    color: white;
    padding: 0.5rem 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 20;
    font-weight: bold;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.offer-marquee-container-desktop {
    width: 100vw;
    background-color: #ac64ff;
    /* red-500 */
    color: white;
    padding: 0.5rem 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 20;
    margin-top: -5vh;
    font-weight: bold;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .offer-marquee-container-desktop {
        display: none;
    }
}

@media (min-width: 640px) {
    .offer-marquee-container {
        display: none;
    }
}


.offer-marquee-text {
    display: inline-block;
    animation: marquee 15s linear infinite;
}