.hero{

    position:relative;
    height:550px;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#fff;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    );

    z-index:1;

}

.hero-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:opacity .8s;

}

.hero-slide.active{

    opacity:1;

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:600px;

    margin-left:80px;

}

.hero-logo{

    width:220px;

    margin-bottom:25px;

}

.hero h1{

    font-size:55px;

    margin-bottom:15px;

}

.hero p{

    font-size:20px;

    line-height:1.7;

}

.hero-btn{

    display:inline-block;

    margin-top:35px;

    padding:16px 35px;

    border-radius:40px;

    background:#d28b52;

    color:white;

    font-weight:bold;

    transition:.3s;

}

.hero-btn:hover{

    transform:translateY(-4px);

}