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

.hero{

    position:relative;

    overflow:hidden;

    padding-top:150px;

    padding-bottom:90px;

    background:

    radial-gradient(circle at top,
    rgba(34,197,94,.18),
    transparent 55%),

    linear-gradient(180deg,
    #03110a,
    #05160d,
    #071d12);

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:40px 40px;

    opacity:.4;

}

.hero .container{

    position:relative;

    z-index:2;

}

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

.hero-content{

    text-align:center;

    max-width:850px;

    margin:auto;

}

.hero-content h1{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

}

.hero-content span{

    color:#22c55e;

}

.hero-content p{

    max-width:720px;

    margin:30px auto;

    color:#cbd5d1;

    font-size:19px;

    line-height:1.8;

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:40px;

}

.primary-btn,
.secondary-btn{

    text-decoration:none;

    padding:17px 34px;

    border-radius:999px;

    transition:.35s;

    font-weight:600;

}

.primary-btn{

    background:#22c55e;

    color:white;

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(34,197,94,.35);

}

.secondary-btn{

    border:1px solid rgba(255,255,255,.15);

    color:white;

}

.secondary-btn:hover{

    background:white;

    color:#111;

}

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

.hero-card{

    margin-top:70px;

    border-radius:28px;

    overflow:hidden;

    background:white;

    box-shadow:0 25px 70px rgba(0,0,0,.35);

    transition:.45s;

}

.hero-card:hover{

    transform:translateY(-8px);

}

.hero-card img{

    width:100%;

    display:block;

    transition:.45s;

}

.hero-card:hover img{

    transform:scale(1.03);

}





/* ===========================
   ANIMATION
=========================== */

.fade-up{
    opacity: 0;
}

.fade-up.show{
    animation: fadeUp 1s cubic-bezier(.22, 1, .36, 1) forwards;
}
.fade-up{
    will-change: transform, opacity;
    backface-visibility:hidden;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translate3d(0,70px,0);
    }

    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }

}

.delay-1.show{
    animation-delay:.15s;
}

.delay-2.show{
    animation-delay:.35s;
}

.delay-3.show{
    animation-delay:.55s;
}

.delay-4.show{
    animation-delay:.75s;
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:992px){

    .hero-content h1{

        font-size:52px;

    }




}

@media(max-width:768px){

    .hero{

        padding-top:120px;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }


}