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

@media (max-width:850px){

    .nav-toggle{
        display:flex;
    }

    .nav-links{
        position:fixed;

        top:75px;
        right:-100%;

        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:28px;

        width:70%;
        height:100vh;

        background:rgba(10,14,23,0.98);

        transition:0.35s;
    }
/* ===== RESPONSIVE ===== */

@media (max-width:850px){

    .nav-toggle{
        display:flex;
    }

    .nav-links{
        position:fixed;

        top:75px;
        right:-100%;

        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:28px;

        width:70%;
        height:100vh;

        background:rgba(10,14,23,0.98);

        transition:0.35s;
    }

    .nav-links.active{
        right:0;
    }

}


/* ===== Global Card Fix on Mobile ===== */
/* ===== Specific Fix for Courses Grid ===== */
@media (max-width: 768px) {
    
    
    
    
    /* ۱. اجبار کانتینر به تک‌ستونه شدن */
.courses-grid {
    /* تغییر از grid به flex برای کنترل راحت‌تر */
    flex-direction: column !important;
    /* چیدمان عمودی */
    grid-template-columns: 1fr !important;
    /* اگر مرورگر هنوز روی حالت grid مانده باشد */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 25px !important;
    /* فاصله بین کارت‌ها */
    overflow: hidden !important;
    display: grid;
    padding: 30px;!important;

    /* ۲. اجبار کارت به عرض تمام‌صفحه */
    .course-card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important; /* فاصله زیر هر کارت */
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* ۳. اصلاح تصاویر داخل کارت (اگر بزرگ هستند) */
    .course-card img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
}