/* =====================================
RESTORE OLD MOBILE MENU + FIX PROGRAMS
(Simple & Clean)
Only Added Sliding Dropdown Effect for ALL Menu Links
===================================== */

@media (max-width: 768px){

    /* Main Menu */
    .nav{
        display:flex !important;
        flex-direction:column;
        position:absolute;
        top:72px;
        right:12px;
        width:220px;
        background:#ffffff;
        border-radius:14px;
        padding:10px;
        box-shadow:0 10px 30px rgba(0,0,0,0.12);

        opacity:0;
        visibility:hidden;
        transform:translateY(10px);
        transition:0.3s ease;
        pointer-events:none;
    }

     /* ALL MENU LINKS HOVER EFFECT */
    .nav > a:hover,
    .dropdown > a:hover,
    .dropdown-menu a:hover{
        background: #facc15;
        padding-left: 20px; /* slide effect */
        color: black !important;
        box-shadow: inset 3px 0 0 #f59e0b;
        transition: 0.3s ease;
    }

    /* Show on navbar hover */
    .nav-container:hover .nav{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    /* Main links */
    .nav a{
        color:#333 !important;
        padding:12px;
        border-radius:10px;
        margin:2px 0;
        text-decoration:none;

        transition:all 0.3s ease;
    }

    /* Sliding Hover Effect for ALL Links */
    .nav a:hover{
        background:#f8fafc;
        padding-left:20px;
    }

    /* Dropdown wrapper */
    .dropdown{
        width:100%;
    }

    /* Dropdown submenu */
    .dropdown-menu{
        display:none;
        position:static;
        background:#f8fafc;
        border-radius:10px;
        margin-top:5px;
        padding:5px 0;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
    }

    /* Show dropdown on hover */
    .dropdown:hover .dropdown-menu{
        display:flex;
        flex-direction:column;
    }

    /* Submenu links */
    .dropdown-menu a{
        transition:all 0.3s ease;
    }

    /* Sliding effect for submenu also */
    .dropdown-menu a:hover{
        padding-left:25px;
        background:#eef6ff;
    }
}

/* Popup Animation */
@keyframes popupIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Mobile */
@media(max-width:768px){
    .wa-popup{
        width:90%;
        right:5%;
    }
}