@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Righteous&display=swap");
html {
    scroll-behavior: smooth;
}
* {
    font-family: "Afacad", serif;
}
.swiper-button-next,
.swiper-button-prev {
    color: var(--dark-bg) !important;
    svg {
        height: 50% !important;
    }
}

.slider3x .swiper-wrapper {
    padding-block: 1rem;
    /* margin-bottom: 1rem; */
}
.slider4x .swiper-wrapper,
.slider5x .swiper-wrapper {
    padding-bottom: 1rem;
}
.swiper .swiper-pagination {
    bottom: -3px !important;
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        border-radius: 3px;
    }
    .swiper-pagination-bullet-active {
        width: 1.5rem;
        background: var(--dark-bg);
    }
}

@media (width < 768px) {
    .swiper-button-next,
    .swiper-button-prev{
        display: none !important;
    }
}

/* Parallax effect for images */
.parallax {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.hero-video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.hero-image-background {
    z-index: 0;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.hero-video-background.is-ready {
    opacity: 1;
}

.hero-image-background.is-hidden {
    opacity: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.75) 100%);
    z-index: 1;
}