
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;overflow:hidden}
.slider{
    height:50vh;
    min-height:800px;
    position:relative;
    color:#fff;
    overflow:hidden;
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:.8s}
.slide.active{opacity:1;visibility:visible}

.slide img{
 position:absolute;inset:-5%;width:110%;height:110%;
 object-fit:cover
}
.slide.active img{animation:zoom 6s forwards}
@keyframes zoom{to{transform:scale(1.08)}}

.slide:after{
 content:"";position:absolute;inset:0;
 
}

.content{
 position:relative;z-index:2;height:100%;
 width:90%;max-width:1200px;margin:auto;
 display:flex;align-items:center
}
.text{max-width:700px}

small{
 display:block;margin-bottom:18px;
 letter-spacing:3px;text-transform:uppercase;
 opacity:0;transform:translateY(25px)
}
h1{
 font-size:clamp(42px,6vw,82px);
 line-height:1;letter-spacing:-3px;
 margin-bottom:22px;
 opacity:0;transform:translateY(35px)
}
p{
 max-width:580px;font-size:18px;line-height:1.6;
 margin-bottom:30px;color:#ddd;
 opacity:0;transform:translateY(30px)
}

.buttons{display:flex;gap:12px;opacity:0;transform:translateY(25px)}
.btn{
 padding:14px 24px;border-radius:30px;
 text-decoration:none;font-weight:bold;
 transition:.3s
}
.primary{background:#fff;color:#111}
.secondary{
 color:#fff;border:1px solid #aaa;
 background:#ffffff15
}
.btn:hover{transform:translateY(-3px);background:#fff;color:#111}

.active small{animation:up .7s .2s forwards}
.active h1{animation:up .7s .35s forwards}
.active p{animation:up .7s .5s forwards}
.active .buttons{animation:up .7s .65s forwards}

@keyframes up{
 to{opacity:1;transform:translateY(0)}
}

.arrow{
 position:absolute;z-index:5;top:50%;
 transform:translateY(-50%);
 width:50px;height:50px;border-radius:50%;
 border:1px solid #ffffff66;
 background:#0003;color:#fff;
 cursor:pointer;font-size:22px
}
.arrow:hover{background:#fff;color:#111}
.prev{left:25px}.next{right:25px}

.dots{
 position:absolute;z-index:5;bottom:30px;
 left:50%;transform:translateX(-50%);
 display:flex;gap:8px
}
.dot{
 width:30px;height:3px;border:0;
 background:#ffffff66;cursor:pointer
}
.dot.active{background:#fff;width:55px}

.counter{
 position:absolute;z-index:5;right:35px;bottom:27px;
 font-size:18px;letter-spacing:2px
}

@media(max-width:600px){
 /*.slide:after{
  background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.2))
 }*/
 .content{
  align-items:flex-end;
  padding-bottom:105px
 }
 h1{font-size:clamp(40px,12vw,58px)}
 p{font-size:15px}
 .btn{padding:12px 18px;font-size:12px}
 .arrow{width:42px;height:42px}
 .prev{left:12px}.next{right:12px}
 .counter{display:none}
 .dots{bottom:25px}
}
</style>