section {
    min-height: 100vh;
}

#hero {
    min-height: calc(100vh - var(--navbar-height));
    height: calc(100vh - var(--navbar-height));
}

.hero-video {
    max-height: 45vh;
}

@media screen and (min-width: 768px) {
    .hero-video {
        max-height: calc(.6 * (100vh - var(--navbar-height)));
    }   
}

.carousel-btn {
    width: 30px;
    height: 30px;
    color: #FFFFFF;
    background-color: #523442;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    pointer-events: auto;
    transition: background-color 0.2s ease;
}

.carousel-btn:hover {
    opacity: 0.8;
}

.carousel-btn.active {
    background-color: #FF3657;
}