/* =========================
SUBMENU WRAPPER
========================= */

.has-submenu{
    width:100%;
}

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

.submenu-toggle{

    width:100%;

    background:none;

    border:none;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    border-radius:18px;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    color:#111827;

    transition:0.3s ease;
}

.submenu-toggle:hover{
    background:#f5f3ff;
}

/* =========================
ARROW
========================= */

.submenu-arrow{

    width:32px;

    height:32px;

    border-radius:50%;

    background:#f5f3ff;

    color:#6d28d9;

    display:flex;


    justify-content:center;

    font-weight:700;

    transition:0.3s ease;

    flex-shrink:0;
}

/* ACTIVE ARROW */

.has-submenu.active > .submenu-toggle .submenu-arrow{

    transform:rotate(180deg);

    background:#6d28d9;

    color:white;
}

/* =========================
SUBMENU
========================= */

.submenu{

    max-height:0;

    overflow:hidden;

    transition:max-height 0.35s ease;

    padding-left:14px;

    margin-top:10px;

    list-style:none;
}

/* OPEN */

.has-submenu.active > .submenu{

    max-height:1000px;
}

/* =========================
SUBMENU ITEMS
========================= */

.submenu li{
    margin-bottom:10px;
}

.submenu a{

    display:block;

    text-decoration:none;

    background:#f5f3ff;

    color:#334155;

    padding:16px 18px;

    border-radius:18px;

    font-size:16px;

    transition:0.3s ease;
}

.submenu a:hover{

    background:#ede9fe;

    color:#6d28d9;
}

/* ACTIVE */

.submenu a.current-topic{

    background:#ede9fe;

    color:#6d28d9;

    font-weight:700;
}

/* =========================
NESTED SUBMENU
========================= */

.nested-submenu .submenu{

    margin-top:10px;

    margin-left:12px;

    padding-left:12px;

    border-left:2px solid #ede9fe;
}

.nested-submenu .submenu li a{

    font-size:14px;

    color:#64748b;
}

.nested-submenu .submenu li a:hover{

    color:#6d28d9;
}

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

@media(max-width:768px){

.submenu-toggle{

    padding:16px;

    font-size:16px;
}

.submenu a{

    font-size:15px;

    padding:14px 16px;
}

.nested-submenu .submenu{

    margin-left:8px;

    padding-left:10px;
}

}