body {
    font-family: Poppins, sans-serif;
    background-color: #fff8f0;
    color: #3d2c1c
}

.font-serif-display {
    font-family: 'Playfair Display', serif
}

.hero-bg {
    background-image: url('../src/img/bg.png');
    background-size: cover;
    background-position: center
}

.navbar-glass {
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(10px);
    --webkit-backdrop-filter: blur(10px)
}

.scroller {
    max-width: 100%
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    gap: 1.5rem
}

.scroller[data-animated=true] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent)
}

.scroller[data-animated=true] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: 60s linear infinite scroll
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - .75rem))
    }
}

.scroller img {
    height: 150px;
    width: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: .75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1)
}

.thumbnail-item {
    flex-shrink: 0;
    width: 100px;
    height: 60px;
    border: 3px solid transparent;
    opacity: .6;
    transition: .3s;
    cursor: pointer
}

.thumbnail-item:hover {
    opacity: 1
}

.thumbnail-item.is-active {
    border-color: #a16207;
    opacity: 1
}

#gallery-thumbnails {
    scrollbar-width: thin;
    scrollbar-color: #A16207 #FFF8F0
}

#gallery-thumbnails::-webkit-scrollbar {
    height: 6px
}

#gallery-thumbnails::-webkit-scrollbar-track {
    background: #fff8f0
}

#gallery-thumbnails::-webkit-scrollbar-thumb {
    background-color: #a16207;
    border-radius: 10px
}

.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease-out, transform .6s ease-out
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}