@media (max-width: 768px) {
    body, html { 
        overflow-x: hidden; 
    }
    * { 
        max-width: 100%; 
    }
    .cursor-dot, .cursor-outline { 
        display: none !important; 
    }
    * { 
        cursor: auto; 
    }

    header { 
        padding: 10px 0; 
    }
    .nav-container { 
        width: 100%; 
        padding: 0 15px; 
    }
    .nav-links { 
        display: none !important; 
    } 
    .logo-img { 
        height: 70px; 
    }

    
    .hero { 
        width: 100%; 
        min-height: 100vh; 
        padding-top: 140px; 
        padding-bottom: 60px; 
    }
    .hero-content { 
        width: 100%; 
        max-width: 100%; 
        padding: 0 15px; 
        text-align: center; 
    }
    .hero h1 { 
        font-size: 2.2rem; 
        line-height: 1.4; 
    }
    .hero p { 
        border-right: none; 
        border-bottom: 4px solid var(--accent-color); 
        padding-bottom: 15px; 
        padding-right: 0; 
        display: inline-block; 
    }

    
    .section-padding { 
        padding: 60px 0; 
    }
    .container { 
        width: 100%; 
        max-width: 100%; 
        padding: 0 15px; 
    }
    .section-title h2 { 
        font-size: 2rem; 
    }

    
    .features-grid { 
        width: 100%; 
        max-width: 100%; 
        padding: 0 15px; 
        grid-template-columns: 1fr !important; 
        gap: 20px; 
    }
    .glass-card { 
        padding: 25px; 
    }

    
    .portfolio-grid { 
        width: 100%; 
        padding: 0 15px !important;
        gap: 15px; 
    }
    .portfolio-item { 
        height: 200px; 
        width: 260px;
        flex-shrink: 0;
    }
    .portfolio-nav-prev,
    .portfolio-nav-next {
        display: none !important;
    }

    
    .counters { 
        padding: 50px 0; 
    }
    .counter-box h3 { 
        font-size: 2.5rem; 
    }

    
    .swiper.testimonials { 
        padding: 0 15px; 
    }
    #reviews .testi-card { 
        height: auto !important; 
        min-height: 250px !important; 
        padding: 25px 20px !important; 
    }
    #reviews .add-review-card { 
        width: 100% !important; 
        max-width: 100% !important; 
        padding: 25px 20px !important; 
    }
    .swiper-button-next, .swiper-button-prev { 
        display: none !important; 
    }

    
    .contact-container { 
        grid-template-columns: 1fr !important; 
    }
    .contact-info-side, .contact-form-side { 
        padding: 30px 15px; 
    }
    .grid-2-col { 
        grid-template-columns: 1fr !important; 
        flex-direction: column; 
        gap: 0; 
        margin-bottom: 10px; 
    }
    
    
    .float-wa { 
        width: 50px; 
        height: 50px; 
        font-size: 25px; 
        bottom: 20px; 
        left: 20px; 
    }

    
    .sidebar { 
        display: none !important; 
    } 
    .hamburger-trigger { 
        display: none !important; 
    }
    
    .header .user-info { 
        display: block; 
        font-size: 0.9rem; 
        background: rgba(245, 158, 11, 0.1); 
        padding: 5px 12px; 
        border-radius: 20px; 
        border: 1px solid rgba(245, 158, 11, 0.2); 
        backdrop-filter: blur(5px); 
    }

    
    .mobile-nav-bar {
        display: flex !important;
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 70px; 
        background: rgba(30, 41, 59, 0.95); 
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(255,255,255,0.1); 
        box-shadow: 0 -5px 20px rgba(0,0,0,0.4); 
        z-index: 1000; 
        justify-content: space-around; 
        align-items: center; 
        padding: 10px 0;
    }
    
    .mobile-nav-item { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        color: #94a3b8; 
        text-decoration: none; 
        font-size: 0.75rem; 
        transition: 0.3s; 
        flex: 1; 
        cursor: pointer; 
    }
    .mobile-nav-item i { 
        font-size: 1.4rem; 
        margin-bottom: 5px; 
        color: #94a3b8; 
    }
    .mobile-nav-item.active, .mobile-nav-item:hover { 
        color: var(--accent-color); 
    }
    .mobile-nav-item.active i, .mobile-nav-item:hover i { 
        color: var(--accent-color); 
    }
    .mobile-logo { 
        display: none; 
    }

    
    .main-content { 
        margin-right: 0; 
        width: 100%; 
        padding: 20px 15px; 
        padding-bottom: 90px; 
    }
    .stats-grid { 
        grid-template-columns: 1fr; 
    }
    .stat-card {
        font-size: 0.9rem;
    }
    .stat-card h3 {
        font-size: 1.8rem;
    }
    .stat-card p {
        font-size: 0.8rem;
    }
    .header {
        font-size: 1rem;
    }
    #pageTitle {
        font-size: 1.3rem;
    }
    table {
        font-size: 0.75rem;
    }
    th, td {
        padding: 8px !important;
    }
    .table-container { 
        overflow-x: scroll; 
        border-radius: 15px; 
    }
    .login-box { 
        padding: 30px 20px; 
    }
    .login-input {
        font-size: 0.9rem;
        padding: 10px;
    }
    .btn-login {
        font-size: 0.9rem;
    }
}


@media (min-width: 769px) {
  
    .mobile-nav-bar { 
        display: none !important; 
    }
    .hamburger-trigger { 
        display: flex !important; 
    } 
    .sidebar { 
        display: flex !important; 
        transform: translateX(100%); 
    }
    .sidebar.active { 
        transform: translateX(0); 
        width: 260px; 
    }
    .sidebar-overlay { 
        display: none !important; 
    }
    .main-content { 
        margin-right: 0; 
        padding: 30px; 
        padding-top: 90px; 
    }
}

/* ===== LIGHT MODE RESPONSIVE ===== */

@media (max-width: 768px) {
    [data-theme="light"] .hero h1 {
        background: linear-gradient(to right, #0f172a, #1f2937);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    [data-theme="light"] .hero p {
        color: #475569;
    }

    [data-theme="light"] .features-grid {
        background: transparent;
    }

    [data-theme="light"] .contact-container {
        grid-template-columns: 1fr;
        border-radius: 15px;
    }

    [data-theme="light"] .contact-info-side,
    [data-theme="light"] .contact-form-side {
        border-radius: 15px;
    }
}