/* =============================================================
   RESPONSIVE FIXES — LMS frontend + user dashboard
   Targets all breakpoints: xs (<576), sm (576-767),
   md (768-991), lg (992+)
   ============================================================= */

/* ----------------------------------------------------------
   0.  Global helpers
   ---------------------------------------------------------- */
img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------
   1.  Frontend pages — general section padding
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .section-padding,
    .section--padding { padding-top: 40px !important; padding-bottom: 40px !important; }
    .pt-90px  { padding-top: 30px !important; }
    .pb-90px  { padding-bottom: 30px !important; }
    .pb-60px  { padding-bottom: 30px !important; }
    .pt-60px  { padding-top: 30px !important; }
    .mt-30px  { margin-top: 20px !important; }
    .pb-5  { padding-bottom: 20px !important; }
}

/* ----------------------------------------------------------
   2.  Cart page — responsive table + coupon row
   ---------------------------------------------------------- */
.cart-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cart-table table thead th,
.cart-table table tbody td { white-space: nowrap; }

@media (max-width: 767px) {
    /* Make the cart table scroll horizontally */
    .cart-table .table { min-width: 500px; }
    .cart-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Cart thumbnail smaller */
    .cart-table td img { width: 56px !important; }

    /* Coupon row — wrap on mobile */
    .cart-table ~ .col-lg-4 .d-flex,
    .cart-summary .d-flex { flex-wrap: wrap; gap: 8px; }

    /* Coupon apply button full-width on xs */
    #apply-coupon-btn { width: 100%; margin-left: 0 !important; margin-top: 8px; }
}

@media (max-width: 575px) {
    .cart-table td img { width: 44px !important; }
}

/* ----------------------------------------------------------
   3.  Checkout page — responsive layout
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    /* Order column stacks naturally with col-lg — ensure proper spacing */
    .cart-area .col-lg-7,
    .cart-area .col-lg-5 { padding-left: 15px !important; padding-right: 15px !important; }
}

@media (max-width: 767px) {
    /* Checkout media cards — prevent image overflow */
    .media.media-card { flex-wrap: wrap; gap: 10px; }
    .media.media-card .media-img { width: 100% !important; height: 180px !important; border-radius: 6px; }
    .media.media-card .media-img img { width: 100% !important; height: 100% !important; object-fit: cover; }

    /* Make order summary sticky on mobile (remove negative margin effects) */
    .card.card-item { margin-bottom: 16px; }
}

/* ----------------------------------------------------------
   4.  Course details page — sidebar mobile fix
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    /* Remove the negative top pull on mobile — it overlaps content */
    .sidebar.sidebar-negative { margin-top: 0 !important; }

    /* Ensure sidebar stacks below main content with proper spacing */
    .course-details-area .col-lg-4 { margin-top: 30px; }
    .course-details-content-wrap { padding-top: 30px !important; }
}

/* ----------------------------------------------------------
   5.  Footer — copyright bar responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .copyright-content .col-lg-6 { text-align: center !important; }
    .copyright-content .d-flex { justify-content: center !important; }
    .copy-desc { margin-bottom: 8px; }

    /* Footer columns — stack 2-up on sm, 1-up on xs */
    .footer-area .responsive-column-half { margin-bottom: 30px; }
}

@media (max-width: 575px) {
    .footer-area .responsive-column-half { flex: 0 0 100%; max-width: 100%; }
}

/* ----------------------------------------------------------
   6.  Home page hero / sections
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .hero-area,
    .hero-wrapper { text-align: center; }
    .hero-area .hero-content h2,
    .hero-wrapper h2 { font-size: 26px !important; line-height: 1.3; }
    .hero-area .hero-content p { font-size: 15px !important; }

    /* CTA area */
    .cta-area .btn { width: 100%; margin-bottom: 10px; }

    /* Funfact / stats row */
    .funfact-item { margin-bottom: 20px; }

    /* Testimonials */
    .testimonial-item { padding: 20px !important; }
}

/* ----------------------------------------------------------
   7.  Course cards — home / all-courses grid
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .card.card-item { margin-bottom: 16px; }
    .card-img-top { height: 180px; object-fit: cover; }
}

/* ----------------------------------------------------------
   8.  User dashboard — my-courses card progress row
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    /* Progress label + % + buttons — wrap on mobile */
    .ct-course-card .d-flex.align-items-center.justify-content-between.mt-3 {
        flex-wrap: wrap;
        gap: 6px;
    }
    .ct-course-card .ct-course-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 6px;
    }
    /* Course thumb — smaller on mobile */
    .ct-course-thumb { width: 90px !important; min-width: 90px !important; height: 68px !important; }
    .ct-course-title { font-size: 13px !important; }
}

@media (max-width: 575px) {
    .ct-course-thumb { width: 72px !important; min-width: 72px !important; height: 56px !important; }
    .ct-course-card .ct-course-actions .btn { padding: 5px 8px !important; font-size: 11px !important; }
}

/* ----------------------------------------------------------
   9.  User dashboard — sidebar + toggle
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .dashboard-content-wrap { width: 100% !important; }
    .dashboard-area .off-canvas-menu { transform: translateX(-100%); transition: transform 0.3s; }
    .dashboard-area .off-canvas-menu.active { transform: translateX(0); }
}

/* ----------------------------------------------------------
   10.  Auth pages (login, register) — center + padding
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .login-area,
    .signup-area { padding: 30px 0 !important; }
    .login-area .card,
    .signup-area .card { border-radius: 10px !important; }
    .login-area .card-body,
    .signup-area .card-body { padding: 24px 18px !important; }
}

/* ----------------------------------------------------------
   11.  Blog pages
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .blog-post .card-image img { height: 200px; object-fit: cover; }
    .blog-post .card-body { padding: 18px !important; }
    .blog-single-content img { width: 100% !important; height: auto !important; }
}

/* ----------------------------------------------------------
   12.  Certificate page — scale down on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .certificate-wrapper,
    .certificate-area { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .certificate-content { min-width: 600px; }
}

/* ----------------------------------------------------------
   13.  Trainers / Team pages
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .trainer-card .card-body { padding: 16px !important; }
    .trainer-card img { height: 180px; object-fit: cover; }
}

/* ----------------------------------------------------------
   14.  About / Privacy / Terms text pages
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .about-us-area,
    .terms-area,
    .privacy-area { padding: 30px 0 !important; }
    .about-us-area h2,
    .terms-area h2,
    .privacy-area h2 { font-size: 22px !important; }
}

/* ----------------------------------------------------------
   15.  Quiz / Assignment pages (frontend)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .quiz-area,
    .assignment-area { padding: 20px 0 !important; }
    .quiz-option-list label { font-size: 14px !important; padding: 10px !important; }
    .quiz-timer { font-size: 18px !important; }
}

/* ----------------------------------------------------------
   16.  Course search results page
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .course-search-result .d-flex { flex-wrap: wrap; }
    .course-search-result img { width: 100% !important; height: 180px !important; object-fit: cover; margin-bottom: 12px; }
}

/* ----------------------------------------------------------
   17.  Callback / Contact form section
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .callback-form .row > [class*="col-"] { margin-bottom: 12px; }
    .callback-form .btn { width: 100%; }
}

/* ----------------------------------------------------------
   18.  Breadcrumb area
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .breadcrumb-area { padding: 20px 0 !important; }
    .breadcrumb-area h2 { font-size: 20px !important; }
    .breadcrumb { flex-wrap: wrap; justify-content: center; }
}

/* ----------------------------------------------------------
   19.  Tables in backend (admin / instructor) dashboards
   ---------------------------------------------------------- */
.table-responsive-force { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767px) {
    .dashboard-content-wrap .table-responsive { overflow-x: auto !important; }
    .dashboard-content-wrap table { min-width: 600px; }
    .page-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ----------------------------------------------------------
   20.  Category dropdown / course cards grid
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .cat-dropdown-menu { position: static !important; box-shadow: none !important; border: none !important; }
}

/* ----------------------------------------------------------
   21.  Profile setting — media card wrap on mobile
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .setting-body .media.media-card { flex-direction: column; align-items: flex-start !important; }
    .setting-body .media-img { width: 80px !important; height: 80px !important; margin-right: 0 !important; margin-bottom: 12px; }
    .setting-body .file-upload-wrap { width: 100%; }
}

/* ----------------------------------------------------------
   22.  Nav / header overflow prevention
   ---------------------------------------------------------- */
.header-area .main-menu-content { overflow: visible; }
@media (max-width: 991px) {
    .header-area .nav-right-button { flex-wrap: nowrap; overflow: hidden; }
}

/* ----------------------------------------------------------
   23.  Course cards img — consistent height across breakpoints
   ---------------------------------------------------------- */
.card-item .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
@media (max-width: 575px) {
    .card-item .card-img-top { height: 170px; }
}

/* ----------------------------------------------------------
   24.  Checkout page — order summary sticky top on desktop,
        full-width stacked on mobile
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .checkout-area .col-lg-5 { margin-top: 30px; }
}

/* ----------------------------------------------------------
   25.  Pagination — centre and wrap on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
    .pagination .page-item .page-link { padding: 6px 10px; font-size: 13px; }
}

/* ----------------------------------------------------------
   26.  Backend Admin/Instructor Sidebar — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .sidebar-wrapper {
        position: fixed !important;
        left: -260px !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        width: 260px !important;
    }
    .sidebar-wrapper.active {
        left: 0 !important;
    }
    .page-wrapper {
        margin-left: 0 !important;
        transition: margin-left 0.3s ease !important;
    }
    .sidebar-overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s, visibility 0.3s !important;
    }
    .sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
}
@media (max-width: 575px) {
    .sidebar-wrapper {
        width: 100% !important;
        max-width: 280px !important;
        left: -100% !important;
    }
}

/* ----------------------------------------------------------
   27.  Backend Admin/Instructor Header — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .topbar {
        padding: 10px 15px !important;
    }
    .user-box {
        padding-left: 10px !important;
        padding-right: 5px !important;
    }
    .user-box .user-info {
        display: none !important;
    }
    .user-box .user-img {
        width: 36px !important;
        height: 36px !important;
    }
    .mobile-toggle-menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        cursor: pointer;
        font-size: 20px;
    }
}

/* ----------------------------------------------------------
   28.  Backend User Dashboard Sidebar — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .dashboard-area .off-canvas-menu {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        background: #fff !important;
    }
    .dashboard-area .off-canvas-menu.active {
        left: 0 !important;
    }
    /* Dashboard content wrap */
    .dashboard-content-wrap {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 60px !important;
    }
}

@media (max-width: 575px) {
    .dashboard-area .off-canvas-menu {
        width: 100% !important;
        max-width: 100% !important;
        left: -100% !important;
    }
}

/* ----------------------------------------------------------
   29.  Backend Tables — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 15px !important;
        border-radius: 8px !important;
        border: 1px solid #dee2e6 !important;
    }
    .table-responsive table {
        min-width: 600px !important;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 10px !important;
        text-align: left !important;
    }
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        margin-top: 10px !important;
    }
}

/* ----------------------------------------------------------
   30.  Backend Forms — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .form-group {
        margin-bottom: 15px !important;
    }
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    .btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    .card-body {
        padding: 15px !important;
    }
}

/* ----------------------------------------------------------
   31.  Backend Dashboard Cards — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .stat-card {
        margin-bottom: 15px !important;
    }
    .card {
        margin-bottom: 15px !important;
    }
    .row > [class*="col-"] {
        margin-bottom: 15px;
    }
}

/* ----------------------------------------------------------
   32.  User Dashboard Learn Page — mobile responsive improvements
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .lp-sidebar {
        position: fixed !important;
        left: -340px !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        max-width: 320px !important;
        width: 320px !important;
    }
    .lp-sidebar.lp-mob-open {
        left: 0 !important;
    }
    .lp-main {
        margin-left: 0 !important;
    }
    .lp-mob-menu-btn {
        display: flex !important;
    }
}
@media (max-width: 575px) {
    .lp-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        left: -100% !important;
    }
    .lp-progress-strip {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .lp-progress-bar-track {
        max-width: 100% !important;
        width: 100% !important;
    }
    .lp-cert-btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ----------------------------------------------------------
   33.  Frontend Course Details — mobile improvements
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .course-details-area .col-lg-8,
    .course-details-area .col-lg-4 {
        padding: 0 15px !important;
    }
    .course-details-content-wrap {
        padding-top: 20px !important;
    }
    .sidebar.sidebar-negative {
        margin-top: 20px !important;
    }
}

/* ----------------------------------------------------------
   34.  Frontend Auth Pages — mobile improvements
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .login-area .card,
    .signup-area .card {
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    }
    .login-area .card-body,
    .signup-area .card-body {
        padding: 30px 20px !important;
    }
    .social-login-btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* ----------------------------------------------------------
   35.  Modal dialogs — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: 100% !important;
    }
    .modal-content {
        border-radius: 12px !important;
    }
    .modal-body {
        padding: 20px 15px !important;
    }
    .modal-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .modal-footer .btn {
        width: 100% !important;
    }
}

/* ----------------------------------------------------------
   36.  Alerts and Notifications — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .alert {
        padding: 12px 15px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    .toast {
        max-width: 90vw !important;
        margin: 10px auto !important;
    }
}

/* ----------------------------------------------------------
   37.  Dropdown menus — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .dropdown-menu {
        min-width: 200px !important;
        max-width: 280px !important;
    }
    .ct-header-dd.cart-dropdown-menu {
        max-height: 300px !important;
    }
}

/* ----------------------------------------------------------
   38.  Image and Media — mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    .media.media-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .media.media-card .media-img {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }
}

/* ----------------------------------------------------------
   39.  User Dashboard — Professional mobile improvements
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    /* Dashboard stat cards - ensure proper stacking */
    .dashboard-area .row .col-lg-4 {
        margin-bottom: 15px;
    }
    /* Dashboard content container - reduce padding */
    .dashboard-content-wrap .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 767px) {
    /* Stat cards - full width on mobile with professional spacing */
    .dashboard-area .row .col-lg-4,
    .dashboard-area .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }
    
    /* Course cards - full width on mobile */
    .dashboard-area .row .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 16px;
    }
    
    /* Dashboard area - remove default padding and fix overflow */
    .dashboard-area {
        padding: 0 !important;
        overflow: visible !important;
        min-height: 100vh;
    }
    
    /* Dashboard content wrap */
    .dashboard-content-wrap {
        padding: 0 !important;
        padding-top: 60px !important;
        overflow: visible !important;
        min-height: 100vh;
    }
    
    /* Container fluid padding */
    .dashboard-content-wrap .container-fluid {
        padding: 0 12px !important;
        padding-bottom: 30px !important;
    }
    
    /* Breadcrumb styling */
    .breadcrumb-area {
        padding: 20px 0 !important;
    }
    
    /* Course card internal layout - let inline CSS handle */
    .ct-course-card {
        border-radius: 12px !important;
    }
    
    /* Progress bar */
    .ct-progress-bar {
        width: 100%;
    }
    
    /* Empty state alert */
    .alert-info {
        border-radius: 12px !important;
        padding: 30px 20px !important;
    }
    
    /* Dashboard off-canvas menu - mobile positioning */
    .off-canvas-menu.dashboard-off-canvas-menu {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 280px !important;
        max-width: 85% !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
    }
    
    .off-canvas-menu.dashboard-off-canvas-menu.active {
        left: 0 !important;
    }
    
    /* Body overlay for mobile menu */
    .body-overlay {
        display: none !important;
    }
    
    .body-overlay.active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 9998 !important;
    }
}

@media (max-width: 575px) {
    /* Dashboard area padding */
    .dashboard-area {
        padding: 0 !important;
    }
    
    /* Container fluid - tighter padding on small mobile */
    .dashboard-content-wrap .container-fluid {
        padding: 0 10px !important;
    }
    
    /* Stat card content - refined spacing */
    .stat-card .card-body {
        padding: 14px !important;
    }
    
    .stat-card .h3 {
        font-size: 24px !important;
    }
    
    .stat-card__icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    .stat-card .small {
        font-size: 10px !important;
        letter-spacing: 0.3px !important;
    }
    
    /* Course card adjustments */
    .ct-course-card {
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }
    
    .ct-course-card .p-3 {
        padding: 14px !important;
    }
    
    .ct-course-title {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .ct-course-meta {
        font-size: 11px !important;
    }
    
    .ct-progress-text {
        font-size: 11px !important;
    }
    
    .ct-course-actions .btn {
        padding: 10px 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    
    /* Section heading */
    h4.mb-4 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
        padding: 0 2px !important;
    }
    
    /* Alert styling */
    .alert {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }
    
    .alert h5 {
        font-size: 16px !important;
    }
    
    .alert i.fa-3x {
        font-size: 2rem !important;
    }
}

/* ----------------------------------------------------------
   40.  (removed: dashboard header mobile styles now live inline in header.blade.php for single-source consistency)
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   41.  Profile Page — Additional mobile improvements
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .up-page {
        padding: 0 10px;
    }
    .dashboard-heading {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    .dashboard-heading .btn {
        width: 100%;
    }
    .up-avatar {
        width: 70px !important;
        height: 70px !important;
    }
    .up-hero__body {
        padding: 16px !important;
    }
    .up-name {
        font-size: 16px !important;
    }
    .up-sub {
        font-size: 12px !important;
    }
    .up-badge {
        font-size: 11px !important;
        padding: 5px 8px;
    }
    .up-details .card-header {
        padding: 12px 15px !important;
    }
    .up-row {
        padding: 12px 15px !important;
    }
    .up-label {
        font-size: 11px !important;
        min-width: auto !important;
    }
    .up-value {
        font-size: 13px !important;
    }
}

@media (max-width: 575px) {
    .up-avatar {
        width: 60px !important;
        height: 60px !important;
    }
    .up-name {
        font-size: 15px !important;
    }
    .up-hero__body {
        padding: 12px !important;
    }
}

/* ----------------------------------------------------------
   42.  Learn Page — Mobile responsive improvements
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .lp-layout {
        flex-direction: column;
    }
    .lp-sidebar {
        position: fixed !important;
        left: -340px !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        max-width: 320px !important;
        width: 320px !important;
    }
    .lp-sidebar.lp-mob-open {
        left: 0 !important;
    }
    .lp-main {
        margin-left: 0 !important;
    }
    .lp-mob-menu-btn {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    .lp-progress-strip {
        margin: 15px !important;
        padding: 12px 16px !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    .lp-progress-bar-track {
        max-width: 100% !important;
        width: 100% !important;
    }
    .lp-cert-btn {
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
    }
    .lp-main-inner {
        padding: 0 10px !important;
    }
}

@media (max-width: 575px) {
    .lp-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        left: -100% !important;
    }
    .lp-sb-section-name {
        font-size: 13px !important;
    }
    .lp-sb-lecture-text {
        font-size: 12px !important;
    }
    .lp-progress-label {
        font-size: 12px !important;
    }
    .lp-progress-text {
        font-size: 14px !important;
    }
}

/* ----------------------------------------------------------
   43.  Frontend Course Cards — Mobile improvements
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .course-grid .col-lg-4,
    .course-grid .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
    .card-item {
        margin-bottom: 15px;
    }
    .card-item .card-img-top {
        height: 180px !important;
    }
    .card-item .card-body {
        padding: 15px !important;
    }
    .card-item .card-title {
        font-size: 16px !important;
    }
    .card-item .card-text {
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .card-item .card-img-top {
        height: 160px !important;
    }
    .card-item .card-body {
        padding: 12px !important;
    }
    .card-item .card-title {
        font-size: 15px !important;
    }
}

/* ----------------------------------------------------------
   45.  Frontend Forms — Mobile responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .form-group {
        margin-bottom: 15px !important;
    }
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
    .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .btn {
        width: 100%;
        margin-bottom: 8px;
    }
    .btn-block-mobile {
        width: 100% !important;
    }
}

/* ----------------------------------------------------------
   46.  Breadcrumb — Mobile improvements
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .breadcrumb-area {
        padding: 30px 0 !important;
    }
    .breadcrumb-area h2 {
        font-size: 24px !important;
    }
    .breadcrumb {
        flex-wrap: wrap;
        justify-content: center;
    }
    .breadcrumb-item {
        font-size: 13px !important;
    }
}

@media (max-width: 575px) {
    .breadcrumb-area h2 {
        font-size: 20px !important;
    }
    .breadcrumb-item {
        font-size: 12px !important;
    }
}

/* ----------------------------------------------------------
   47.  Footer — Mobile improvements
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .footer-top-area {
        padding: 40px 0 !important;
    }
    .footer-area .col-lg-3,
    .footer-area .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 20px;
    }
    .footer-area .footer-logo img {
        max-width: 150px;
    }
}

@media (max-width: 575px) {
    .footer-area .col-lg-3,
    .footer-area .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer-bottom-area {
        padding: 20px 0 !important;
    }
    .copyright-content {
        text-align: center !important;
    }
    .copyright-content .d-flex {
        justify-content: center !important;
        flex-wrap: wrap;
    }
}