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

.kk-menu-hero{

    position:relative;

    overflow:hidden;

    padding:30px 0 20px;

    background:
        radial-gradient(circle at top left,#FFF8EE 0%,transparent 35%),
        radial-gradient(circle at bottom right,#FFE7C5 0%,transparent 35%),
        linear-gradient(180deg,#FFFDFB,#FFF7ED);

}

.kk-menu-hero-pattern{

    position:absolute;

    inset:0;

    background:url("../images/patterns/spices-pattern.png");

    opacity:.03;

    pointer-events:none;

}

.kk-menu-hero-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    max-width:760px;

    margin:auto;

    text-align:center;

}

.kk-menu-title{

      margin:0;

    font-size:clamp(2.2rem,4vw,3.8rem);

    font-weight:800;

    line-height:1.08;

    color:var(--kk-dark);

}

.kk-menu-description{

    max-width:650px;

    margin:0;

    color:#6B7280;

    font-size:18px;

    line-height:1.8;

}

.kk-menu-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:18px;

}

.kk-menu-divider span{

    width:70px;

    height:2px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--kk-secondary),
        transparent
    );

}

.kk-divider-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#FFF8EC;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--kk-secondary);

    box-shadow:0 12px 28px rgba(0,0,0,.05);

}

.kk-divider-icon i{

    font-size:14px;

}

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

@media(max-width:992px){

    .kk-menu-hero{

        padding:40px 0 30px;

    }

}

@media(max-width:768px){

    .kk-menu-hero{

        padding:30px 0 20px;

    }

    .kk-menu-title{

        font-size:2.3rem;

    }

    .kk-menu-description{

        font-size:16px;

    }

    .kk-menu-divider span{

        width:45px;

    }

}

@media(max-width:480px){

    .kk-menu-title{

        font-size:2rem;

    }

    .kk-menu-description{

        font-size:15px;

    }

}