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

.hero-section{

    width:100%;

    height:100vh;

    background:#050505;

    position:relative;

    overflow:hidden;

    padding:0;
    
    margin-top:0;

}

.heroSlider{

    width:100%;

    height:100%;

}

.heroSlider .swiper-slide{

    display:flex;

    align-items:center;

}

/*======================================================
                ROW
======================================================*/

.hero-row{

    height:100vh;

    align-items:center;

}

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

.hero-content{

    max-width:560px;
    
    padding-top:90px;

    min-height:620px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-subtitle{

    display:block;

    height:22px;

    color:#cfcfcf;

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:20px;

    font-weight:600;

}

.hero-content h1{

    font-size:58px;

    line-height:1.15;

    font-weight:700;

    color:#fff;

    margin-bottom:28px;

    min-height:210px;

}

.hero-content p{

    color:#d7d7d7;

    font-size:19px;

    line-height:1.8;

    max-width:500px;

    min-height:135px;

    margin-bottom:40px;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:auto;

}

.hero-buttons .primary-btn{

    width:180px;

    height:58px;

    background:#fff;

    color:#000;

    border-radius:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:600;

    transition:.35s;

}

.hero-buttons .primary-btn:hover{

    transform:translateY(-4px);

    background:#efefef;

}

.hero-buttons .outline-btn{

    width:180px;

    height:58px;

    border-radius:50px;

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

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.hero-buttons .outline-btn:hover{

    background:#fff;

    color:#000;

}

/*======================================================
                RIGHT IMAGE
======================================================*/

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    width:100%;

}

.hero-image img{

    width:100%;

    max-width:760px;

    object-fit:contain;

    animation:heroFloat 6s ease-in-out infinite;

}

/*======================================================
                FLOAT ANIMATION
======================================================*/

@keyframes heroFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

.hero-prev,

.hero-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border-radius:50%;

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

    backdrop-filter:blur(15px);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    cursor:pointer;

    z-index:100;

    transition:.35s;

}

.hero-prev{

    left:35px;

}

.hero-next{

    right:35px;

}

.hero-prev:hover,

.hero-next:hover{

    background:#fff;

    color:#000;

}

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

.hero-pagination{

    bottom:40px !important;
}

@media(max-width:992px){

.hero-pagination{

    bottom:15px !important;

}

}

.hero-pagination .swiper-pagination-bullet{

    width:11px;

    height:11px;

    background:#ffffff;

    opacity:.35;

    transition:.35s;

}

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

    width:34px;

    border-radius:30px;

    opacity:1;

}

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

@media(max-width:992px){

.hero-section{

    height:auto;

    padding:120px 0 80px;

}

.hero-row{

    height:auto;

    min-height:auto;

    flex-direction:column-reverse;

    text-align:center;

}

.hero-content{

    margin:auto;

    padding-top:20px;

    min-height:auto;

}

.hero-content h1{

    font-size:34px;

    min-height:auto;

    margin-bottom:18px;

}

.hero-content p{

    margin:auto;

    margin-bottom:30px;

    min-height:auto;

}

.hero-buttons{

    justify-content:center;

    margin-bottom:50px;

}

.hero-image img{

    width:100%;

    max-width:360px;

    height:auto;

    object-fit:contain;

    margin:auto;

    display:block;

}

.hero-prev,

.hero-next{

    display:none;

}

}