/*==================================================
HERO SECTION
==================================================*/

.hero-section{
    position:relative;
    overflow:hidden;
    width:100%;
}

.heroSlider{
    width:100%;
    height:100vh;
}

.hero-slide{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(7,26,54,.88) 0%,
        rgba(7,26,54,.72) 45%,
        rgba(7,26,54,.45) 100%
    );
}

.hero-content{
    position:relative;
    z-index:5;
    max-width:760px;
    color:#fff;
    animation:fadeUp 1s ease;
}

.hero-tag{
    display:inline-block;
    padding:10px 24px;
    background:rgba(212,175,55,.18);
    border:1px solid rgba(212,175,55,.4);
    backdrop-filter:blur(10px);
    color:#fff;
    border-radius:50px;
    letter-spacing:1px;
    font-weight:600;
    margin-bottom:22px;
}

.hero-content h1{
    font-family:'Cinzel',serif;
    font-size:72px;
    font-weight:700;
    line-height:1.15;
    margin-bottom:25px;
    letter-spacing:1px;
    color:#fff;
    text-shadow:0 8px 25px rgba(0,0,0,.45);
}

.hero-content h1 span{
    color:#D4AF37;
}

.hero-content p{
    max-width:620px;
    font-size:21px;
    line-height:1.9;
    color:#f3f3f3;
    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

/*=========================
Buttons
=========================*/

.btn-main{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 38px;
    background:#D4AF37;
    color:#071A36;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    transition:.35s;
    box-shadow:0 15px 35px rgba(212,175,55,.35);
}

.btn-main:hover{
    background:#fff;
    color:#071A36;
    transform:translateY(-4px);
}

.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 38px;
    border-radius:50px;
    border:2px solid rgba(255,255,255,.8);
    color:#fff;
    text-decoration:none;
    backdrop-filter:blur(10px);
    transition:.35s;
}

.btn-outline:hover{
    background:#fff;
    color:#071A36;
    transform:translateY(-4px);
}

/*=========================
Scroll Down
=========================*/

.scroll-down{
    position:absolute;
    left:50%;
    bottom:35px;
    transform:translateX(-50%);
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    z-index:10;
    animation:bounce 2s infinite;
    transition:.35s;
}

.scroll-down:hover{
    background:#D4AF37;
    color:#071A36;
}

.scroll-down i{
    font-size:22px;
}

/*=========================
Animation
=========================*/

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes bounce{

    0%{
        transform:translate(-50%,0);
    }

    50%{
        transform:translate(-50%,-12px);
    }

    100%{
        transform:translate(-50%,0);
    }

}
/*==================================================
SWIPER NAVIGATION
==================================================*/

.heroSlider .swiper-button-next,
.heroSlider .swiper-button-prev{
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    transition:.35s ease;
}

.heroSlider .swiper-button-next:hover,
.heroSlider .swiper-button-prev:hover{
    background:#D4AF37;
    color:#071A36;
    transform:scale(1.08);
}

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

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

.heroSlider .swiper-pagination{
    bottom:35px !important;
}

.heroSlider .swiper-pagination-bullet{
    width:12px;
    height:12px;
    margin:0 6px !important;
    opacity:.45;
    background:#fff;
    transition:.35s;
}

.heroSlider .swiper-pagination-bullet-active{
    width:34px;
    border-radius:30px;
    background:#D4AF37;
    opacity:1;
}

/*==================================================
SLIDE ANIMATION
==================================================*/

.hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:inherit;
    background-size:cover;
    background-position:center;
    animation:heroZoom 12s linear infinite alternate;
    z-index:-1;
}

@keyframes heroZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }

}

/*==================================================
CONTENT ANIMATION
==================================================*/

.swiper-slide-active .hero-tag{
    animation:fadeUp .8s ease forwards;
}

.swiper-slide-active h1{
    animation:fadeUp 1s ease forwards;
}

.swiper-slide-active p{
    animation:fadeUp 1.2s ease forwards;
}

.swiper-slide-active .hero-buttons{
    animation:fadeUp 1.4s ease forwards;
}

/*==================================================
OPTIONAL GLASS BOX
==================================================*/

.hero-glass{

    display:inline-block;

    padding:30px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:24px;

}

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

@media(max-width:1400px){

.hero-content h1{

font-size:66px;

}

}

@media(max-width:1200px){

.hero-content{

max-width:650px;

}

.hero-content h1{

font-size:58px;

}

.hero-content p{

font-size:19px;

}

}

@media(max-width:991px){

.heroSlider,
.hero-slide{

height:85vh;
min-height:85vh;

}

.hero-content{

margin:auto;
text-align:center;

}

.hero-content p{

margin-left:auto;
margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-content h1{

font-size:48px;

}

.hero-content p{

font-size:18px;

}

.heroSlider .swiper-button-next,
.heroSlider .swiper-button-prev{

display:none;

}

}

@media(max-width:768px){

.hero-content{

padding:0 15px;

}

.hero-content h1{

font-size:40px;

}

.hero-content p{

font-size:17px;
line-height:1.8;

}

.hero-buttons{

flex-direction:column;
width:100%;

}

.btn-main,
.btn-outline{

width:100%;
max-width:320px;

}

.hero-tag{

font-size:14px;

}

}

@media(max-width:576px){

.heroSlider,
.hero-slide{

height:100vh;
min-height:100vh;

}

.hero-content h1{

font-size:34px;
line-height:1.25;

}

.hero-content p{

font-size:16px;

}

.hero-tag{

padding:8px 18px;
font-size:13px;

}

.heroSlider .swiper-pagination{

bottom:20px !important;

}

.scroll-down{

width:52px;
height:52px;
bottom:20px;

}

.scroll-down i{

font-size:18px;

}

}

/*==================================================
LARGE DESKTOP
==================================================*/

@media(min-width:1600px){

.hero-content{

max-width:850px;

}

.hero-content h1{

font-size:82px;

}

.hero-content p{

font-size:22px;

}

}

/*==================================================
PERFORMANCE
==================================================*/

.hero-slide,
.hero-overlay,
.hero-content,
.heroSlider{
    will-change:transform;
}

.hero-slide img{
    max-width:100%;
    height:auto;
    display:block;
}

.hero-section *{
    box-sizing:border-box;
}