/* ===================================
SLIDER
=================================== */

.hero-slider{
    width:100%;
    height:100vh;
    position:relative;
}

.hero-slider .swiper-slide{
    position:relative;
    overflow:hidden;
}

/* DARK OVERLAY */

.hero-slider .swiper-slide::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.58);
    z-index:1;
}

/* BACKGROUND IMAGE */

.slide-bg{
    position:absolute;
    inset:0;
    z-index:0;
}

.slide-bg img{
    width:100%;
    height:100%;
    object-fit:cover;

    transform:scale(1);
    transition:transform 7s linear;
}

/* ACTIVE SLIDE SLOW ZOOM */

.swiper-slide-active .slide-bg img{
    transform:scale(1.12);
}

/* CONTENT */

.hero-content{
    position:relative;
    z-index:5;
    height:100vh;
    display:flex;
    align-items:center;
}

.hero-inner{
    max-width:720px;
    color:#fff;
}

/* ===================================
TEXT ANIMATIONS
=================================== */

.hero-subtitle,
.hero-title,
.hero-text,
.hero-btns{

    opacity:0;
    transform:translateY(80px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

/* ACTIVE STATE */

.swiper-slide-active .hero-subtitle{
    opacity:1;
    transform:translateY(0);
    transition-delay:.4s;
}

.swiper-slide-active .hero-title{
    opacity:1;
    transform:translateY(0);
    transition-delay:.8s;
}

.swiper-slide-active .hero-text{
    opacity:1;
    transform:translateY(0);
    transition-delay:1.2s;
}

.swiper-slide-active .hero-btns{
    opacity:1;
    transform:translateY(0);
    transition-delay:1.6s;
}

/* EXIT ANIMATION */

.swiper-slide-prev .hero-subtitle,
.swiper-slide-prev .hero-title,
.swiper-slide-prev .hero-text,
.swiper-slide-prev .hero-btns{
    opacity:0;
    transform:translateY(-70px);
}

/* ===================================
TYPOGRAPHY
=================================== */

.hero-subtitle{
    color:var(--orange-color);
    font-size:18px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:20px;
}

.hero-title{
    color:var(--surface-color);
    font-size:78px;
    line-height:1.08;
    font-weight:800;
    margin-bottom:25px;
}

.hero-title .dark {
    color:var(--orange-color);
}

.hero-text{
    font-size:18px;
    line-height:1.8;
    color:#dfdede;
    margin-bottom:38px;
}

/* ===================================
BUTTONS
=================================== */

.hero-btns{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.theme-btn{
    display: inline-block;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-primary-theme{
    background: var(--orange-color);
    color: var(--contrast-color);
}

.btn-primary-theme:hover{
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--orange-color), var(--default-color) 15%);
    transform: translateY(-3px);
}

.btn-outline-theme{
    border: 2px solid var(--contrast-color);
    color: var(--contrast-color);
}

.btn-outline-theme:hover{
    background:var(--contrast-color);
}

/* ===================================
NAVIGATION
=================================== */

.swiper-button-next,
.swiper-button-prev{
    width:60px;
    height:60px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    backdrop-filter:blur(10px);
    color: var(--contrast-color);
    transition: all 0.3s ease;
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:18px;
    font-weight:800;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
    color: var(--orange-color);
}

/* ===================================
PAGINATION
=================================== */

.swiper-pagination-bullet{
    width:14px;
    height:14px;
    background: var(--background-color);
    opacity:.5;
}

.swiper-pagination-bullet-active{
    background:var(--orange-color);
    opacity:1;
}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width:991px){

    .hero-title{
        font-size:58px;
    }

}

@media(max-width:767px){

    .hero-slider,
    .hero-content{
        height:60vh;
    }

    .hero-title{
        font-size:42px;
    }

    .hero-text{
        font-size:16px;
    }

    .swiper-button-next,
    .swiper-button-prev{
        display:none;
    }

}