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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:
    radial-gradient(circle at top right, rgba(255,79,135,.20), transparent 35%),
    radial-gradient(circle at bottom left, rgba(255,79,135,.12), transparent 35%),
    var(--bg);

}

.hero .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:100px;

    padding:100px 0 60px;

}

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

.hero-subtitle{

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#ff4f87;

    margin-bottom:18px;

}

.hero-content h1{

    font-family:'Sora',sans-serif;

    font-size:78px;

    font-weight:800;

    line-height:0.95;

    letter-spacing:-3px;

    color:#ffffff;

    margin-bottom:30px;

}

.hero-content h1 span{

    color:#ff4f87;

}

.hero-content p{

    max-width:560px;

    font-size:19px;

    line-height:1.8;

    color:#b8b8c2;

    margin-bottom:45px;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:50px;

}

.hero-buttons .btn{

    padding:18px 34px;

    border-radius:50px;

    font-size:17px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

/*=====================================
FEATURES
======================================*/

.hero-features{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.feature{

    display:flex;

    align-items:center;

    gap:18px;

}

.feature-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    background:rgba(255,79,135,.15);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    color:#ff4f87;

}

.feature h4{

    color:#fff;

    font-size:20px;

    margin-bottom:6px;

}

.feature p{

    color:#b8b8c2;

    font-size:16px;

    margin:0;

}

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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.glow{

    position:absolute;

    width:460px;

    height:460px;

    background:#ff4f87;

    border-radius:50%;

    filter:blur(120px);

    opacity:.18;

}

.hero-image img{

    position:relative;

    z-index:2;

    width:430px;

    height:430px;

    margin-top:-300px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid rgba(255,79,135,.35);

    box-shadow:
        0 0 35px rgba(255,79,135,.25),
        0 0 90px rgba(255,79,135,.15);

    transition:.35s;

}

.hero-image img:hover{

    transform:scale(1.03);

    border-color:#ff4f87;

}

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

@media(max-width:992px){

    .hero .container{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-content p{

        margin:0 auto 40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        align-items:center;

    }

    .hero-content h1{

        font-size:58px;

    }

    .hero-image img{

        width:340px;

        height:340px;

    }

}