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

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

.slide.active{
opacity:1;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
}

.caption{
position:absolute;
top:50%;
left:10%;
transform:translateY(-50%);
color:white;
max-width:500px;
}

.caption h1{
font-size:45px;
animation:slideText 1.5s ease;
}

.caption p{
font-size:20px;
margin-top:10px;
animation:fadeText 2s ease;
}

@keyframes slideText{
from{
transform:translateX(-100px);
opacity:0;
}
to{
transform:translateX(0);
opacity:1;
}
}

@keyframes fadeText{
from{opacity:0;}
to{opacity:1;}
}

.prev,.next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
padding:15px;
cursor:pointer;
font-size:20px;
}

.prev{left:10px;}
.next{right:10px;}

@media(max-width:768px){

.caption h1{
font-size:28px;
color:#083c8a;
}

.caption p{
font-size:16px;
}

}