/* ==================================================
   TECHHUB SOLUTIONS
   MOBILE MENU
================================================== */

/* ==========================
   MOBILE MENU BUTTON
========================== */

.mobile-menu-btn{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

    font-size:24px;

    color:var(--primary);

}

/* ==========================
   MOBILE MENU
========================== */

.mobile-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:var(--white);

    box-shadow:0 10px 30px rgba(0,0,0,.10);

    padding:20px;

    z-index:999;

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:all .4s ease;

}

.mobile-menu.active{

    display:block;

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* ==========================
   MOBILE MENU LIST
========================== */

.mobile-menu > ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.mobile-menu a{

    display:block;

    padding:12px 15px;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    border-radius:8px;

    transition:var(--transition);

}

.mobile-menu a:hover{

    background:#fff4d6;

    color:var(--secondary);

    padding-left:22px;

}

/* ==========================
   APPLY BUTTON
========================== */

.mobile-apply-btn{

    display:inline-block;

    background:var(--secondary);

    color:var(--primary);

    padding:12px 20px;

    border-radius:8px;

}

/* ==========================
   COURSE TOGGLE
========================== */

.mobile-course-toggle{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 15px;

    cursor:pointer;

    font-weight:600;

    color:var(--primary);

    border-radius:8px;

    transition:var(--transition);

}

.mobile-course-toggle:hover{

    background:#fff4d6;

    color:var(--secondary);

    padding-left:20px;

}

.mobile-course-toggle i{

    transition:.3s;

}

.mobile-course-toggle i.rotate{

    transform:rotate(180deg);

    color:var(--secondary);

}

/* ==========================
   COURSE SUBMENU
========================== */

.mobile-course-submenu{

    display:none;

    padding-left:15px;

    margin-top:10px;

}

.mobile-course-submenu.active{

    display:block;

}

.mobile-course-submenu li{

    margin-bottom:10px;

}

.mobile-course-submenu a{

    font-size:14px;

    color:#666666;

}

/* ==========================
   SUB CATEGORY
========================== */

.mobile-sub-toggle{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    padding:8px 0;

    font-weight:600;

    color:var(--primary);

}

.mobile-sub-toggle:hover{

    background:#fff4d6;

    color:var(--secondary);

    padding-left:15px;

    border-radius:8px;

    transition:.3s;

}

.mobile-sub-toggle i{

    transition:.3s;

}

.mobile-sub-course-list{

    display:none;

    padding-left:15px;

    margin-top:10px;

}

.mobile-sub-course-list li{

    margin-bottom:8px;

}

.mobile-sub-course-list a{

    font-size:14px;

    color:#666666;

}

.mobile-sub-category.active .mobile-sub-course-list{

    display:block;

}

.mobile-sub-category.active .mobile-sub-toggle i{

    transform:rotate(180deg);

}