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

.hero-section{

    background:linear-gradient(
        135deg,
        var(--secondary),
        var(--primary)
    );

    padding:140px 0 90px;

    position:relative;

    overflow:hidden;

}

.hero-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

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

    border-radius:50%;

    top:-180px;

    right:-120px;

}

.hero-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

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

    border-radius:50%;

    bottom:-120px;

    left:-80px;

}

.hero-badge{

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

    color:#fff;

    padding:10px 22px;

    border-radius:40px;

    font-weight:600;

}

.hero-title{

    font-size:58px;

    font-weight:700;

    color:#fff;

    line-height:1.2;

}

.hero-title span{

    color:#FFF4CC;

}

.hero-text{

    color:#FFF8E8;

    font-size:18px;

    line-height:1.9;

}

.btn-shop{

    background:#fff;

    color:var(--primary);

    padding:14px 34px;

    border-radius:50px;

    font-weight:600;

}

.btn-shop:hover{

    background:#FFF2CC;

    color:var(--primary-dark);

}

.btn-outline-shop{

    border:2px solid #fff;

    color:#fff;

    padding:14px 34px;

    border-radius:50px;

}

.btn-outline-shop:hover{

    background:#fff;

    color:var(--primary);

}

.hero-features{

    display:flex;

    gap:25px;

    color:#fff;

    font-weight:500;

    flex-wrap:wrap;

}

.hero-image{

    width:100%;

    max-width:750px;
 transition:opacity .8s ease-in-out,
               transform .8s ease;
    animation:floatHero 4s ease-in-out infinite;

}

.hero-image.fade{
    opacity:0;
    transform:translateY(20px) scale(.96);
}

@keyframes floatHero{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@media(max-width:991px){

.hero-section{

    text-align:center;

}

.hero-title{

    font-size:42px;

}

.hero-features{

    justify-content:center;

}

.hero-image{

    margin-top:50px;

}

}