@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
:root {
    --primary: #545454;
    --secondary: #3a3a3a;
}

html{
    scroll-behavior: smooth;
}

body {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary);
}

.custom-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* Hero Section */

.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}


/* Swiper Custom Styles */

.swiper-button-next,
.swiper-button-prev {
    color: white !important;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 15px;
    transition: 0.3s;
}

@media (min-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        padding: 40px 30px;
    }
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.8);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 24px !important;
    }
}

.swiper-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: transform 6s ease-out;
}

.swiper-pagination-bullet {
    background: white !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}


/* Slide Effects (First Slide Unique Animation) */

.effect-zoom-in .swiper-slide-bg {
    transform: scale(1.3);
}

.swiper-slide-active.effect-zoom-in .swiper-slide-bg {
    transform: scale(1);
}


/* The rest just slide normally without extreme background panning */

.swiper-slide-bg {
    transform: scale(1.05);
}


/* Text Effects */

.slide-content {
    opacity: 0;
    transition: all 1.2s ease 0.3s;
}

.swiper-slide-active .slide-content {
    opacity: 1;
    transform: translateY(0);
}


/* Initial states for text */

.effect-zoom-in .slide-content {
    transform: translateY(40px);
}

.effect-slide-down .slide-content {
    transform: translateY(40px);
}

.effect-zoom-out .slide-content {
    transform: translateY(40px);
}

.effect-slide-left .slide-content {
    transform: translateY(40px);
}