/* =====================================
        HERO / SLIDER
        hero.css
===================================== */


/* HERO */

.hero{

    padding:0;

    height:100vh;

    overflow:hidden;

    position:relative;

}



/* SLIDER */

.slider{

    width:100%;

    height:100%;

    position:relative;

}



/* SLIDE */

.slide{

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    opacity:0;

    transition:opacity 1s ease;

}



.slide.active{

    opacity:1;

    z-index:2;

}



/* IMAGE */


.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:brightness(.45);

}



/* TEXT BLOCK */


.caption{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:80%;

    text-align:center;

    color:white;

    z-index:3;

}



.caption h1,
.caption h2{

    font-size:64px;

    line-height:1.2;

    margin-bottom:25px;

    color:white;

    font-weight:800;

}



.caption p{

    font-size:22px;

    margin-bottom:35px;

    color:white;

}



/* BUTTON INSIDE HERO */


.caption .btn{

    margin-top:10px;

}



/* SLIDER ARROWS */


.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:45px;

    cursor:pointer;

    padding:15px;

    z-index:5;

    user-select:none;

    transition:.3s;

}



.prev{

    left:25px;

}



.next{

    right:25px;

}



.prev:hover,
.next:hover{

    transform:
    translateY(-50%)
    scale(1.2);

}



/* DOTS */


.dots{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:5;

}



.dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:white;

    opacity:.5;

    cursor:pointer;

    transition:.3s;

}



.dot.active{

    opacity:1;

    background:var(--blue);

}



/* HERO ANIMATION */


.hero-content{

    animation:heroFade 1.2s ease;

}



@keyframes heroFade{


from{

    opacity:0;

    transform:translateY(60px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

/* END HERO */