/* start */
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/* end */

body{
    margin:0;
}

/* slider */
.slider{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:1s ease-in-out;
}

.slide.active{
    opacity:1;
}

/* FIXED IMAGE ISSUE */
.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1);
    transition:transform 5s ease;
}

.slide.active img{
    transform:scale(1.1);
}

/* overlay */
.overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    top:0;
}

/* text */
.content{
    position:absolute;
    top:50%;
    left:10%;
    transform:translateY(-50%);
    color:#fff;
    opacity:0;
}

/* text animation */
.slide.active .content{
    animation:textAnim 1s forwards;
}

@keyframes textAnim{
    from{
        opacity:0;
        transform:translate(-50px,-50%);
    }
    to{
        opacity:1;
        transform:translate(0,-50%);
    }
}

.content h1{
    font-size:50px;
    margin-bottom:10px;
}

.content p{
    font-size:20px;
}

/* responsive */
@media(max-width:768px){
    .content h1{
        font-size:28px;
    }
    .content p{
        font-size:16px;
    }
}