.hero{

    position:relative;
    width:100%;
    height:100vh;

    overflow:hidden;

}

.slider{

    position:absolute;
    width:100%;
    height:100%;

}

.slide-track{

    display:flex;
    width:calc(400px * 8);

    animation:scroll 40s linear infinite;

}

.slide-track img{

    width:400px;
    height:100vh;

    object-fit:cover;

    filter:brightness(1.1) saturate(.6);

}

.overlay{

    position:absolute;
    inset:0;

    background:rgba(255,255,255,.55);

}


.hero-text{

    position:relative;
    z-index:10;

    height:100%;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

}

.hero-text h1{

    font-size:64px;
    color:#2c2c2c;

}

.hero-text p{

    margin:25px 0;

    font-size:22px;
    line-height:1.8;

    color:#555;

}

.buttons{

    display:flex;
    gap:20px;

}

.buttons a{

    text-decoration:none;

    padding:16px 40px;

    border-radius:50px;

    background:white;

    color:#333;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.buttons a:hover{

    transform:translateY(-4px);

}

@keyframes scroll{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-1600px);
    }

}