/*====================================================
    MOYINNET ENTERTAINMENT & TOURISM
    Opening Scene
    hero.css
=====================================================*/


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

.hero-section{

    position:relative;

    width:100%;

    height:100svh;

    min-height:720px;

    overflow:hidden;

    background:#070707;

}


/*====================================================
    SWIPER
=====================================================*/

.heroSwiper{

    width:100%;

    height:100%;

}


.heroSwiper .swiper-slide{

    position:relative;

    overflow:hidden;

}


/*====================================================
    BACKGROUND
=====================================================*/

.hero-bg{

    position:relative;

    width:100%;

    height:100%;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}


/*====================================================
    OVERLAY
=====================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(to right,
        rgba(7,7,7,.95) 8%,
        rgba(7,7,7,.75) 35%,
        rgba(7,7,7,.35) 70%,
        rgba(7,7,7,.15) 100%),

        linear-gradient(to top,
        rgba(7,7,7,.96),
        rgba(7,7,7,.10));

}


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

.hero-content{

    position:relative;

    z-index:20;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:flex-start;

    min-height:100svh;

    max-width:760px;

    padding-bottom:12vh;

}


/*====================================================
    TAGLINE
=====================================================*/

.hero-tagline{

    display:inline-block;

    color:#D4AF37;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:13px;

    font-weight:700;

    margin-bottom:25px;

}


/*====================================================
    TITLE
=====================================================*/

.hero-content h1{

    font-family:'Cinzel',serif;

    font-size:96px;

    line-height:1.02;

    font-weight:700;

    margin-bottom:30px;

    color:#ffffff;

}


.hero-content h1 span{

    display:block;

    color:#D4AF37;

}


/*====================================================
    PARAGRAPH
=====================================================*/

.hero-content p{

    width:650px;

    max-width:100%;

    color:#d4d4d4;

    font-size:19px;

    line-height:1.9;

    margin-bottom:40px;

}


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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


.hero-buttons .btn{

    padding:16px 34px;

    border-radius:50px;

    font-weight:600;

}


/*====================================================
    SLIDE COUNTER
=====================================================*/

.hero-pagination{

    position:absolute;

    right:60px;

    top:50%;

    transform:translateY(-50%);

    z-index:30;

}


/*====================================================
    CUSTOM BULLETS
=====================================================*/

.hero-pagination .swiper-pagination-bullet{

    display:block;

    width:14px;

    height:14px;

    margin:18px 0 !important;

    border:2px solid #D4AF37;

    background:transparent;

    opacity:1;

    transition:.4s;

}


.hero-pagination .swiper-pagination-bullet-active{

    background:#D4AF37;

    transform:scale(1.4);

}


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

.hero-prev,

.hero-next{

    position:absolute;

    bottom:60px;

    width:58px;

    height:58px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    cursor:pointer;

    transition:.35s;

    z-index:50;

}


.hero-prev{

    right:150px;

}


.hero-next{

    right:80px;

}


.hero-prev:hover,

.hero-next:hover{

    background:#D4AF37;

    color:#070707;

    border-color:#D4AF37;

}


/*====================================================
    SCROLL INDICATOR
=====================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:28px;

    height:48px;

    border:2px solid rgba(255,255,255,.40);

    border-radius:50px;

    z-index:30;

}


.scroll-indicator span{

    position:absolute;

    left:50%;

    top:10px;

    transform:translateX(-50%);

    width:6px;

    height:6px;

    background:#D4AF37;

    border-radius:50%;

    animation:scrollMove 2s infinite;

}


@keyframes scrollMove{

    0%{

        opacity:0;

        top:10px;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        top:28px;

    }

}


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

@media(max-width:1200px){

.hero-content h1{

    font-size:72px;

}

}

@media(max-width:992px){

.hero-content{

    padding-bottom:15vh;

}

.hero-content h1{

    font-size:58px;

}

.hero-pagination{

    display:none;

}

.hero-prev,

.hero-next{

    display:none;

}

}

@media(max-width:576px){

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.hero-buttons .btn{

    width:100%;

}

}

/*=========================================
    HERO ANIMATIONS
==========================================*/

.hero-tagline,
.hero-content h1,
.hero-content p,
.hero-buttons{

    opacity:0;

    transform:translateY(40px);

    transition:all .9s ease;

}

.hero-tagline.animate{

    opacity:1;

    transform:translateY(0);

}

.hero-content h1.animate{

    opacity:1;

    transform:translateY(0);

}

.hero-content p.animate{

    opacity:1;

    transform:translateY(0);

}

.hero-buttons.animate{

    opacity:1;

    transform:translateY(0);

}