*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#111;
}

/* Slider Container */

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

/* Slides */

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

.slide.active{
    opacity:1;
    z-index:1;
}

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

/* Dark Overlay */

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.45);
}

/* Text Content */

.content{
    position:absolute;
    top:90%;
    left:8%;
    transform:translateY(-50%);
    color:white;
    max-width:600px;
    z-index:2;
}

.content h1{
    font-size:60px;
    margin-bottom:20px;
    animation:slideDown 1s ease;
}

.content p{
    font-size:22px;
    line-height:1.6;
    animation:slideUp 1s ease;
}

/* Animations */

@keyframes slideDown{
    from{
        transform:translateY(-50px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

@keyframes slideUp{
    from{
        transform:translateY(50px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* Navigation Buttons */

.prev, .next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:white;
    font-size:35px;
    background:rgba(0,0,0,0.4);
    padding:12px 18px;
    border-radius:50%;
    cursor:pointer;
    z-index:5;
    transition:0.3s;
    user-select:none;
}

.prev:hover,
.next:hover{
    background:#ff6600;
}

.prev{
    left:20px;
}

.next{
    right:20px;
}

/* Dots */

.dots{
    position:absolute;
    bottom:30px;
    width:100%;
    text-align:center;
    z-index:5;
}

.dot{
    display:inline-block;
    width:14px;
    height:14px;
    margin:0 6px;
    border-radius:50%;
    background:#bbb;
    cursor:pointer;
    transition:0.3s;
}

.dot.active{
    background:#ff6600;
}

/* Responsive Design */

@media(max-width:768px){

    .slider{
        height:40vh;
        width:100%;
    }

    .content{
        left:5%;
        right:5%;
        text-align:center;
    }

    .content h1{
        font-size:34px;
    }

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

    .prev, .next{
        font-size:24px;
        padding:10px 14px;
    }
}