.hero-slider {
    width:100%;
}

.slide-item {
    height:800px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    position:relative;
}

.slide-item::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.5);
}

.slider-content {
    position:relative;
    color:#fff;
    max-width:600px;
}

.slider-content h1 {
    font-size:48px;
    font-weight:700;
}

.slider-content p {
    margin-top:15px;
    font-size:18px;
}

@media(max-width:768px){
    .slide-item {
        height:450px;
        text-align:center;
    }
    .slider-content h1 {
        font-size:28px;
    }
}