@media (max-width: 650px) {
    .job-details-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .card-top-row, .card-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .view-details-action-btn {
        width: 100%;
        text-align: center;
    }
}
/* Mobile & Tablet Responsiveness */
@media (max-width: 1024px) {
    .jobs-layout-grid {
        grid-template-columns: 1fr;
    }

    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 320px;
        height: 100vh;
        max-height: 100vh;
        z-index: 2000;
        transition: left 0.35s ease;
        border-radius: 0;
    }

    .filter-sidebar.mobile-open {
        left: 0;
    }

    .sidebar-header-mobile {
        display: flex;
    }

    .mobile-filter-btn {
        display: flex;
    }

    .job-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== MOBILE OVERFLOW FIX FOR TUTOR DETAILS ==================== */
@media (max-width: 768px) {
    .tuition-search-section {
        padding: 35px 14px 70px;
        overflow-x: hidden;
    }

    .tuition-search-container,
    .jobs-layout-grid,
    .jobs-content-area {
        width: 100%;
        max-width: 100%;
        min-width: 0; /* গ্রিড আইটেম স্ক্রিনের বাইরে যাওয়া বন্ধ করে */
    }

    .results-top-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 15px;
    }

    .job-item-card {
        padding: 18px 15px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .job-main-title {
        font-size: 18px;
        line-height: 1.35;
        word-wrap: break-word;
    }

    .job-details-grid {
        grid-template-columns: 1fr; /* মোবাইলে প্রতিটি ডিটেইলস নিচে নিচে সুন্দরভাবে বসবে */
        gap: 12px;
        padding: 14px;
    }

    .detail-val {
        font-size: 14px;
        word-break: break-word;
    }

    /* পেজিনেশন বাটনগুলো যেন মোবাইলে ভেঙে না যায় */
    .pagination-wrapper {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .page-btn {
        padding: 6px 12px;
        font-size: 12.5px;
    }

    .num-btn {
        width: 32px;
        height: 32px;
        font-size: 12.5px;
    }
}