/* ===========================================================
   CELETIOUS
   Hero Component
   Version 1.0
=========================================================== */

.hero{

    min-height:92vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    position:relative;

    z-index:10;

    /* padding:0 32px; */
    padding:90px 32px 0;

}

.hero-content{

    width:min(900px,100%);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:24px;

}

.hero-brand{

    font-size:18px;

    letter-spacing:8px;

    text-transform:uppercase;

    opacity:.7;

}

.hero-title{

    font-size:clamp(56px,7vw,84px);

    line-height:1.05;

    font-weight:700;

    max-width:900px;

}

.hero-description{

    max-width:680px;

    font-size:22px;

    line-height:1.7;

    opacity:.72;

}

.hero-button{

    margin-top:20px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:18px 38px;

    border-radius:999px;

    text-decoration:none;

    color:#ffffff;

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

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

    backdrop-filter:blur(18px);

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease;

}

.hero-button:hover{

    transform:translateY(-3px);

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

    border-color:rgba(255,255,255,.35);

}

.hero-button:active{

    transform:translateY(0);

}
/* ===========================================================
   Mobile
=========================================================== */

@media (max-width:768px){

    .hero{

        min-height:100vh;

        /* padding:110px 22px 70px; */
        padding:110px 24px 80px;


    }

    .hero-content{

        width:100%;

        gap:20px;

        padding-top:28px;

    }

    .hero-brand{

        font-size:12px;

        letter-spacing:5px;

    }

    .hero-title{

        font-size:clamp(38px,10vw,44px);

        line-height:1.08;

        max-width:100%;

        text-wrap:wrap;

    }

    .hero-description{

        max-width:320px;

        font-size:16px;

        line-height:1.75;

    }

    .hero-button{

        padding:16px 30px;

        font-size:14px;

    }

}