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

.hero{

    min-height:92vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.hero-content{

    width:100%;

    max-width:820px;

    margin:auto;

    animation:fadeUp 1.2s ease;

    position:relative;

    z-index:2;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 28px;

    border-radius:50px;

    background:var(--surface);

    border:1px solid var(--border);

    margin-bottom:40px;

    font-size:14px;

    color:var(--ink-soft);

    box-shadow:var(--shadow-sm);

    animation:floating 4s ease-in-out infinite;

}

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

.hero h1{

    font-family:var(--font-display);

    font-size:68px;

    line-height:1.15;

    font-weight:700;

    color:var(--ink);

    margin-bottom:28px;

}

.hero h1 span{

    color:var(--primary);

    font-style:italic;

}

/*==================================================
                    PARAGRAPH
==================================================*/

.hero p{

    font-size:19px;

    color:var(--ink-soft);

    line-height:1.9;

    max-width:600px;

    margin:auto;

    margin-bottom:45px;

    font-weight:300;

}

/*==================================================
                    BUTTON
==================================================*/

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/*==================================================
                SCROLL TEXT
==================================================*/

.hero small{

    display:block;

    margin-top:45px;

    color:var(--muted);

    font-size:13px;

    letter-spacing:.5px;

    animation:floating 3s infinite;

}

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

.hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:var(--pink-light);

    border-radius:50%;

    filter:blur(190px);

    opacity:.16;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}

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

@media(max-width:900px){

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:17px;

}

}

@media(max-width:600px){

.hero{

    padding:130px 0 80px;

    min-height:auto;

}

.hero h1{

    font-size:36px;

}

.hero p{

    font-size:15.5px;

}

}