@media (max-width: 576px) {
    .custom-collapse {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease; /* انیمیشن نرم */
    }

        .custom-collapse.show {
            max-height: 300px; /* ارتفاعی که منو لازم داره */
        }
}




.navbar-custom {
    background-color: #0d6efd; /* رنگ آبی */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

    .navbar-custom .navbar-brand,
    .navbar-custom .nav-link,
    .navbar-custom .btn-link {
        color: white !important; /* متن سفید */
    }

    .navbar-custom .btn-outline-info {
        border-color: white;
        color: white;
    }

        .navbar-custom .btn-outline-info:hover {
            background-color: white;
            color: #0d6efd;
        }

    .navbar-custom .btn-info {
        background-color: #ffc107; /* دکمه ورود زرد */
        border-color: #ffc107;
        color: #000;
    }

        .navbar-custom .btn-info:hover {
            background-color: #e0a800;
            border-color: #e0a800;
            color: #000;
        }

/* Offcanvas موبایل */
#mobileMenu {
    background-color: #0d6efd; /* رنگ آبی */
    color: white;
}

    #mobileMenu a {
        color: white;
        text-decoration: none;
    }

        #mobileMenu a:hover {
            text-decoration: underline;
        }

    /* دکمه‌های موبایل */
    #mobileMenu .btn-outline-info {
        border-color: white;
        color: white;
    }

        #mobileMenu .btn-outline-info:hover {
            background-color: white;
            color: #0d6efd;
        }

    #mobileMenu .btn-info {
        background-color: #ffc107; /* دکمه ورود زرد */
        border-color: #ffc107;
        color: #000;
    }

        #mobileMenu .btn-info:hover {
            background-color: #e0a800;
            border-color: #e0a800;
            color: #000;
        }