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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:#FAFAFA;

}

.hero-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.hero-content{

    flex:1;
    margin-top:20px;

}

.hero-subtitle{

    color:var(--primary);

    font-weight:600;

    margin-bottom:15px;

    letter-spacing:2px;

}

.hero h1{

    font-size:70px;

    line-height:1.1;

    margin-bottom:20px;

}

.hero-description{

    max-width:520px;

    color:var(--gray);

    line-height:1.8;

    margin-bottom:35px;

}

.hero-image{

    flex:1;

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:90%;

    max-width:500px;

}

/* =============================
        COUNTDOWN
============================= */

.countdown{

    display:flex;

    gap:18px;

    margin-bottom:40px;

}

.count-box{

    width:90px;

    height:90px;

    background:white;

    border-radius:15px;

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.count-box h2{

    color:var(--primary);

    font-size:30px;

}

.count-box span{

    color:var(--gray);

    font-size:14px;

}