/* ============================================================
   Responsive Styles
   ============================================================ */

/* ---------- Large Screens (≤1200px) ---------- */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

/* ---------- Tablets (≤991px) ---------- */
@media (max-width: 991px) {
    .topbar {
        display: none;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-slide {
        padding: 90px 0;
        min-height: calc(100vh - 70px); /* topbar hidden on tablet, header only */
    }
    
    .navbar-brand img {
        height: 45px;
    }
    
    .navbar-collapse {
        background: #fff;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        border-top: 3px solid var(--primary-color);
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .navbar-nav .nav-link {
        padding: 12px 0 !important;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .navbar-nav .nav-link::after {
        display: none;
    }
    
    .dropdown-menu {
        border-top: none;
        box-shadow: none;
        background: #f9f9f9;
        padding-left: 15px;
        border-left: 3px solid var(--primary-color);
    }
    
    .page-banner {
        padding: 70px 0 50px;
    }
    
    .page-title {
        font-size: 2.2rem;
    }
    
    .main-header .d-flex.align-items-center {
        margin-top: 15px;
        margin-bottom: 10px;
    }
    
    .main-header .d-flex.align-items-center .btn {
        width: 100%;
    }
}

/* ---------- Mobile (≤767px) ---------- */
@media (max-width: 767px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        letter-spacing: 2px;
    }
    
    .hero-content .lead {
        font-size: 1rem;
    }
    
    .hero-slide {
        min-height: calc(100vh - 66px);
        padding: 70px 0;
    }
    
    .page-title {
        font-size: 1.8rem;
    }
    
    .page-banner {
        padding: 60px 0 40px;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .feature-card,
    .product-card,
    .sust-card {
        margin-bottom: 20px;
    }
    
    .footer-widget {
        margin-bottom: 30px;
    }
    
    .product-img-wrapper {
        height: 200px;
    }
    
    /* Stack contact info cards */
    .whatsapp-float {
        bottom: 20px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    
    .back-to-top {
        bottom: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .whatsapp-float + .back-to-top,
    .back-to-top {
        right: 16px;
    }
    
    /* Adjust modal */
    .modal-dialog {
        margin: 10px;
    }
}

/* ---------- Small Mobile (≤575px) ---------- */
@media (max-width: 575px) {
    body {
        font-size: 15px;
    }
    
    .hero-title {
        font-size: 1.6rem;
    }
    
    .hero-slide {
        min-height: calc(100vh - 62px);
    }
    
    .btn-primary,
    .btn-outline-primary {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .section-title {
        font-size: 1.4rem;
    }
    
    .feature-card {
        padding: 25px 20px;
    }
    
    .feature-icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
    
    .product-content {
        padding: 16px;
    }
    
    .error-404 h1 {
        font-size: 5rem;
    }
    
    .footer-widget-title {
        font-size: 1rem;
    }
}

/* ---------- Print ---------- */
@media print {
    .topbar,
    .main-header,
    .main-footer,
    .back-to-top,
    .whatsapp-float,
    #preloader {
        display: none !important;
    }
    
    .page-banner {
        background: #eee !important;
        padding: 20px 0;
    }
    
    .page-title {
        color: #000 !important;
    }
}