/* ========================================
   MOBILE-ONLY FIXES - DOES NOT AFFECT DESKTOP
   ======================================== */

/* Only apply on mobile devices (767px and below) */
@media only screen and (max-width: 767px) {
    /* Add body padding to account for larger logo in mobile */
    body {
        padding-top: 70px !important;
    }
    
    /* Adjust hero slider to compensate for body padding */
    .hero-slider {
        margin-top: -70px !important;
        height: 100vh !important;
        min-height: 500px !important;
    }
    
    /* Header Logo - Mobile Only */
    .navbar-brand img {
        height: 45px !important;
        max-height: 45px !important;
        width: auto !important;
    }
    
    .navbar {
        padding: 8px 0 !important;
    }
    
    /* Mobile Menu Fixes */
    .navbar-collapse {
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    .nav-link {
        padding: 8px 15px !important;
        font-size: 0.95rem !important;
    }
    
    .dropdown-menu {
        font-size: 0.9rem !important;
    }
    
    .dropdown-item {
        padding: 6px 15px !important;
    }
    
    .btn-accent {
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
    }
    
    /* Page Banner - Mobile Only - No top padding to remove gap */
    .page-banner {
        padding: 30px 0 40px !important;
        margin-top: 0 !important;
    }
    
    .page-title {
        font-size: 1.8rem !important;
    }
    
    .page-subtitle {
        font-size: 1rem !important;
    }
    
    /* Product Images - Mobile Only */
    .product-details-page .main-product-image img {
        max-height: 250px !important;
    }
    
    .product-details-page .thumbnail-image {
        height: 70px !important;
        padding: 8px !important;
    }
    
    /* Content Spacing - Mobile Only */
    .product-details-page .about-section {
        padding: 20px 0 !important;
    }
    
    /* About Page Sections - Mobile Only */
    .company-overview,
    .mission-vision,
    .why-choose-us,
    .team-section {
        padding: 40px 0 !important;
    }
    
    /* About Content - Mobile Only */
    .about-content .section-title h2 {
        font-size: 1.5rem !important;
    }
    
    .about-content .lead {
        font-size: 1rem !important;
    }
    
    /* Info Cards - Mobile Only */
    .info-cards .info-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }
    
    /* New Products Banner - Mobile Only */
    .new-products-banner {
        padding: 20px !important;
    }
    
    .new-products-banner h3 {
        font-size: 1.4rem !important;
    }
    
    /* Stats Grid - Mobile Only */
    .why-choose-us .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Team Cards - Mobile Only */
    .team-image {
        height: 300px !important;
    }
    
    /* Mission Vision Cards - Mobile Only */
    .mission-vision .mvv-card {
        padding: 30px 20px !important;
        margin-bottom: 20px !important;
    }
}

/* Only apply on small mobile (575px and below) */
@media only screen and (max-width: 575px) {
    /* Add body padding for smaller mobile */
    body {
        padding-top: 60px !important;
    }
    
    /* Adjust hero slider for smaller mobile */
    .hero-slider {
        margin-top: -60px !important;
        height: 100vh !important;
        min-height: 450px !important;
    }
    
    .navbar-brand img {
        height: 40px !important;
        max-height: 40px !important;
    }
    
    .navbar {
        padding: 6px 0 !important;
    }
    
    /* Smaller mobile menu */
    .nav-link {
        padding: 6px 12px !important;
        font-size: 0.9rem !important;
    }
    
    .dropdown-item {
        padding: 5px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .btn-accent {
        padding: 6px 15px !important;
        font-size: 0.85rem !important;
    }
    
    .page-banner {
        padding: 25px 0 30px !important;
        margin-top: 0 !important;
    }
    
    .page-title {
        font-size: 1.5rem !important;
    }
    
    .page-subtitle {
        font-size: 0.9rem !important;
    }
    
    .product-details-page .thumbnail-image {
        height: 60px !important;
    }
    
    /* 2 column thumbnails on small mobile */
    .product-details-page .product-thumbnails .col-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Extra Small Mobile - About Page */
    .company-overview,
    .mission-vision,
    .why-choose-us,
    .team-section {
        padding: 30px 0 !important;
    }
    
    .about-content .section-title h2 {
        font-size: 1.3rem !important;
    }
    
    .new-products-banner h3 {
        font-size: 1.2rem !important;
    }
    
    /* Feature Items Stack - Small Mobile Only */
    .why-choose-us .features-list .feature-item {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px !important;
    }
    
    /* Team Image - Small Mobile Only */
    .team-image {
        height: 250px !important;
    }
}

/* Landscape Mobile Fix */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    body {
        padding-top: 80px !important;
    }
    
    .hero-slider {
        margin-top: -80px !important;
        min-height: 100vh !important;
    }
    
    .navbar-brand img {
        max-height: 60px !important;
    }
    
    .page-banner {
        padding: 25px 0 15px !important;
    }
}



/* ========================================
   DESKTOP-ONLY FIXES
   ======================================== */

/* Only apply on desktop (768px and above) */
@media only screen and (min-width: 768px) {
    /* Reduce navbar padding to decrease header height */
    .navbar {
        padding: 10px 0 !important;
    }
    
    /* Make logo bigger on desktop - 70px height, auto width */
    .navbar-brand img {
        height: 70px !important;
        max-height: 70px !important;
        width: auto !important;
    }
    
    /* Page banner - add top padding equal to header height */
    .page-banner {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
        min-height: 200px !important;
    }
    
    /* Hero slider should go full height */
    .hero-slider {
        margin-top: -80px !important;
    }
}