/* /patchwebsite/assets/css/responsive.css */

@media (max-width: 768px) {
    
    /* 1. NAVBAR & LOGO FIX */
    .top-bar { display: none; }
    .navbar { top: 0; padding: 10px 0; }
    
    .navbar > .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap !important;
        width: 100%;
    }
    
    .navbar-brand { margin-right: 5px; padding: 0; }
    .navbar-brand img { max-height: 32px !important; max-width: 130px !important; object-fit: contain; }
    
    .navbar-toggler { margin-left: auto; flex-shrink: 0; padding: 6px 10px; }
    
    .nav-link { padding: 10px 0 !important; }
    .btn-signup { width: 100%; margin-top: 10px; text-align: center; }
    
    /* 2. PRICING TABS FIX */
    .pricing-tabs { 
        display: flex; 
        flex-wrap: nowrap !important; 
        overflow-x: auto; 
        justify-content: flex-start !important; 
        padding-bottom: 10px; 
        gap: 8px; 
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none; 
        width: 100%;
    }
    .pricing-tabs::-webkit-scrollbar { display: none; }
    .pricing-tabs .nav-item { flex-shrink: 0; }
    .pricing-tabs .nav-link { 
        white-space: nowrap; 
        font-size: 12px; 
        padding: 8px 16px; 
        margin-bottom: 0;
    }
    
    .portfolio-filters { display: flex; flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start; gap: 8px; scrollbar-width: none; }
    .portfolio-filters::-webkit-scrollbar { display: none; }
    
    /* 3. TYPOGRAPHY & HERO */
    .hero { padding: 90px 0 50px; text-align: center; min-height: auto; }
    .hero h1 { font-size: 28px !important; word-break: break-word; }
    .section-title h2 { font-size: 24px !important; }
    .hero-text { font-size: 15px !important; margin-left: auto; margin-right: auto; }
    .hero .btn-group { justify-content: center; flex-direction: column; width: 100%; gap: 10px; }
    .hero .btn-hero-primary, .hero .btn-hero-secondary { width: 100%; text-align: center; padding: 12px 24px; }
    
    /* 4. VIDEO SECTION MOBILE HEIGHT */
    .showcase-video { max-height: 60vh; min-height: 200px; }

    /* 5. FOOTER LOGO FIX */
    .footer { text-align: center; padding: 40px 0 20px; }
    .footer .social { justify-content: center; margin-bottom: 20px; }
    .footer-logo { max-height: 40px !important; margin: 0 auto 15px; display: block; }
    
    /* 6. SLIDER FIX */
    .slider-container img { height: 220px; }
    .slider-container .slider-handle::before { width: 32px; height: 32px; font-size: 14px; }
    
    /* OTHERS */
    .accordion-button { padding: 14px 16px; font-size: 14px; white-space: normal; word-wrap: break-word; }
    .accordion-body { padding: 14px 16px 20px; font-size: 13px; }
    .pre-footer .row { border-radius: 0; }
    .pre-footer-form { padding: 30px 20px; border-right: none; border-bottom: 1px solid var(--border-color); }
    .pre-footer-cta { padding: 30px 20px; min-height: auto; }
}

@media (max-width: 576px) {
    .container { padding-left: 16px; padding-right: 16px; width: 100%; }
    .hero h1 { font-size: 26px !important; }
    .pricing-card { padding: 24px 16px; }
    .slider-container img { height: 180px; }
    .slider-container .slider-handle::before { width: 28px; height: 28px; font-size: 12px; }
}