/* ==========================================
   HERO
   Ramazan Market
========================================== */

.hero{
    padding:80px 0;
    min-height:520px;

    display:flex;
    align-items:center;
}

.hero .container{

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}

.hero__content{

    max-width:760px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}
.hero__badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:12px 22px;

    background:#FDBA12;

    color:#111827;

    border-radius:999px;

    font-weight:700;

    box-shadow:0 8px 20px rgba(253,186,18,.25);
}
.hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-250px;

    top:-250px;

    border-radius:50%;

    background:rgba(253,186,18,.08);

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

.hero__features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:50px;

}

.hero__feature{

    display:flex;

    align-items:center;

    gap:16px;

    background:#fff;

    padding:18px;

    border-radius:18px;

    border:1px solid #ececec;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    transition:.3s;

}

.hero__feature:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 35px rgba(0,0,0,.08);

}

.hero__feature-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#FDBA12;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    flex-shrink:0;

}

.hero__feature-content h4{

    margin:0;

    font-size:18px;

    color:#111827;

}

.hero__feature-content p{

    margin:4px 0 0;

    font-size:14px;

    color:#6b7280;

}
/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    .hero{

        padding:40px 0;

    }

    .hero__wrapper{

        grid-template-columns:1fr;

    }

    .hero__content{

        order:1;

        text-align:center;

        align-items:center;

    }

    .hero__image{

        order:2;

    }

    .hero__title{

        font-size:2.7rem;

    }

    .hero__description{

        font-size:18px;

        margin:20px 0;

    }

    .hero__buttons{

        justify-content:center;

    }

    .hero__features{

        justify-content:center;

    }

}