.logo-height {
    height: 7rem;
}

.heart-container {
    position: absolute;
    top: -10;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.heart {
    position: absolute;
    bottom: 0;
    animation: flowUpFade 5s linear infinite;
    /* Randomize start positions */
    left: calc(5% + (90% * var(--random-horizontal)));
}

/* You can customize this keyframe animation */
@keyframes flowUpFade {
    0% {
        bottom: -20px;
        opacity: 1;
    }
    100% {
        bottom: 100%;
        opacity: 0;
    }
}

.pink-bg {
    background-color: #f4acb7;
}

.date-tag {
    background-color: #a8dadc; 
    width: fit-content;
}

.arrow-container {
    position: absolute;
    bottom: 0px; /* Position at the bottom of the hero section */
    animation: bounce 2s infinite; /* Apply the bounce animation */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

i.fas.fa-arrow-down {
    font-size: 2rem; /* Adjust the size of the arrow */
}

.hero {
    height: 75vh;
}