/*==================================
              HERO
==================================*/

.hero{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    background-image:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("../images/hero/hero-1.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    animation:heroSlider 120s infinite ease-in-out;

}

/*==============================
            CONTENT
==============================*/

.hero-content{

    max-width:700px;

    padding-left:90px;

    color:white;

    z-index:2;

}

/*==============================
            BADGE
==============================*/

.badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(8px);

    font-size:14px;

    font-weight:600;

}

/*==============================
            TITLE
==============================*/

.hero h1{

    margin:25px 0;

    font-size:5rem;

    line-height:1;

}

/*==============================
          DESCRIPTION
==============================*/

.hero p{

    margin-bottom:35px;

    font-size:1.1rem;

    line-height:1.8;

    color:rgba(255,255,255,.92);

}

/*==============================
            BUTTONS
==============================*/

.buttons{

    display:flex;

    gap:15px;

}

.buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 24px;

    border-radius:999px;

    font-weight:600;

    transition:.3s;

}

.buttons a:first-child{

    background:#59c978;

    color:white;

}

.buttons a:first-child:hover{

    background:#163c29;

    transform:translateY(-3px);

}

.secondary{

    background:white;

    color:#163c29;

}

.secondary:hover{

    transform:translateY(-3px);

    background:#f4f4f4;

}

/*==============================
        HERO SLIDER
==============================*/

@keyframes heroSlider{

    0%,24%{

        background-image:
            linear-gradient(
                rgba(0,0,0,.45),
                rgba(0,0,0,.45)
            ),
            url("../images/hero/hero-1.png");

    }

    25%,49%{

        background-image:
            linear-gradient(
                rgba(0,0,0,.45),
                rgba(0,0,0,.45)
            ),
            url("../images/hero/hero-2.png");

    }

    50%,74%{

        background-image:
            linear-gradient(
                rgba(0,0,0,.45),
                rgba(0,0,0,.45)
            ),
            url("../images/hero/hero-3.png");

    }

    75%,100%{

        background-image:
            linear-gradient(
                rgba(0,0,0,.45),
                rgba(0,0,0,.45)
            ),
            url("../images/hero/hero-4.png");

    }

}