/* Mobile-First Responsive Enhancements for Guardian Tints */

/* Base Mobile Styles (320px and up) */
@media only screen and (max-width: 767px) {
    
    /* Hide header-top on mobile - only show mobile nav */
    .main-header .header-top {
        display: none !important;
    }
    
    /* Adjust header-lower for mobile */
    .main-header .header-lower {
        padding: 10px 0 !important;
    }
    
    .main-header .header-lower .outer-box {
        padding: 0 15px !important;
    }
    
    .main-header .logo-box {
        max-width: 150px !important;
    }
    
    .main-header .logo-box img {
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* Banner Section - Mobile */
    .banner-section {
        margin-top: 60px !important; /* Account for fixed header */
    }
    
    .banner-carousel .content-box {
        padding: 60px 15px 40px 15px !important;
        text-align: center !important;
    }
    
    .banner-carousel .content-box h5 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
        letter-spacing: 1px !important;
    }
    
    .banner-carousel .content-box h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }
    
    .banner-carousel .content-box h1 br {
        display: none !important;
    }
    
    .banner-carousel .content-box p {
        font-size: 13px !important;
        margin-bottom: 20px !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }
    
    .banner-carousel .content-box .btn-box {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
    }
    
    .banner-carousel .content-box .btn-box a {
        display: inline-block !important;
        width: auto !important;
        max-width: 280px !important;
        padding: 12px 30px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    
    /* Reduce banner slide height on mobile */
    .banner-carousel .slide-item {
        min-height: 500px !important;
    }
    
    /* About Section Cards - Mobile */
    .about-section {
        padding: 60px 0 !important;
    }
    
    .about-section .sec-title {
        margin-bottom: 40px !important;
    }
    
    .about-section [style*="padding: 50px 40px"] {
        padding: 30px 20px !important;
    }
    
    .about-section [style*="font-size: 70px"] {
        font-size: 50px !important;
        margin-bottom: 15px !important;
    }
    
    /* Service Section - Mobile */
    .service-section {
        padding-bottom: 60px !important;
    }
    
    .service-section .inner-box[style*="padding: 40px"] {
        padding: 25px 20px !important;
        min-height: auto !important;
    }
    
    .service-section [style*="font-size: 60px"] {
        font-size: 45px !important;
        margin-bottom: 15px !important;
    }
    
    /* Pricing Section - Mobile */
    .pricing-section {
        padding: 60px 0 !important;
    }
    
    .pricing-card[style*="padding: 30px"] {
        padding: 20px 15px !important;
    }
    
    .pricing-card [style*="font-size: 50px"] {
        font-size: 40px !important;
        margin-bottom: 15px !important;
    }
    
    .pricing-card .price {
        font-size: 24px !important;
    }
    
    .additional-costs[style*="padding: 40px"] {
        padding: 25px 15px !important;
    }
    
    .additional-costs h3 {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .additional-costs li[style*="padding: 15px"] {
        padding: 10px 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .additional-costs .note[style*="padding: 20px"] {
        padding: 15px !important;
        margin-top: 20px !important;
    }
    
    /* Contact Section - Mobile */
    .contact-section [style*="min-height: 400px"] {
        min-height: 300px !important;
        padding: 30px 20px !important;
    }
    
    .contact-section [style*="font-size: 120px"] {
        font-size: 80px !important;
    }
    
    .contact-section [style*="font-size: 24px"] {
        font-size: 18px !important;
    }
    
    /* Gallery Section - Mobile */
    .gallery-section {
        padding: 60px 0 !important;
    }
    
    .gallery-section .row {
        margin-top: 30px !important;
    }
    
    /* Testimonial Section - Mobile */
    .testimonial-section {
        padding: 60px 0 !important;
    }
    
    .testimonial-section [style*="padding: 40px 35px"] {
        padding: 25px 20px !important;
    }
    
    .testimonial-section [style*="font-size: 50px"] {
        font-size: 40px !important;
    }
    
    /* Services Overview Section - Mobile */
    .services-overview-section {
        padding: 60px 0 !important;
    }
    
    .services-overview-section .content-box[style*="padding: 40px"] {
        padding: 25px 20px !important;
        min-height: auto !important;
    }
    
    .services-overview-section [style*="padding: 0 50px"] {
        padding: 0 20px !important;
    }
    
    /* FAQ Section - Mobile */
    .faq-section {
        padding: 60px 0 !important;
    }
    
    .faq-card[style*="padding: 30px"] {
        padding: 20px 15px !important;
    }
    
    .faq-card [style*="font-size: 40px"] {
        font-size: 32px !important;
        margin-bottom: 10px !important;
    }
    
    .faq-section [style*="padding: 40px"] {
        padding: 25px 20px !important;
    }
    
    .faq-section h3[style*="font-size: 28px"] {
        font-size: 22px !important;
    }
    
    .faq-section a[style*="padding: 15px 40px"] {
        padding: 12px 25px !important;
        font-size: 14px !important;
    }
    
    /* CTA Section - Mobile */
    .cta-section .inner-container {
        padding: 30px 20px !important;
    }
    
    .cta-section .text h2 {
        font-size: 24px !important;
        margin-bottom: 15px !important;
    }
    
    .cta-section .btn-box {
        margin-top: 20px !important;
    }
    
    /* Footer - Mobile */
    .main-footer .footer-top {
        padding: 30px 20px !important;
    }
    
    .main-footer .widget-section {
        padding: 40px 0 !important;
    }
    
    .main-footer .footer-widget {
        margin-bottom: 30px !important;
    }
    
    /* General Mobile Improvements */
    .sec-title h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    .sec-title h2 br {
        display: none;
    }
    
    .theme-btn {
        padding: 12px 25px !important;
        font-size: 14px !important;
    }
    
    /* Ensure images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix overflow issues */
    .auto-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Tablet Styles (768px to 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    
    .banner-carousel .content-box {
        padding: 100px 30px !important;
    }
    
    .banner-carousel .content-box h1 {
        font-size: 42px !important;
    }
    
    .about-section [style*="padding: 50px 40px"] {
        padding: 35px 25px !important;
    }
    
    .service-section .inner-box[style*="padding: 40px"] {
        padding: 30px 25px !important;
    }
    
    .pricing-section,
    .testimonial-section,
    .services-overview-section,
    .faq-section {
        padding: 80px 0 !important;
    }
    
    .about-section {
        padding: 80px 0 !important;
    }
}

/* Small Desktop (992px to 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    
    .banner-carousel .content-box {
        padding: 120px 40px !important;
    }
    
    .banner-carousel .content-box h1 {
        font-size: 48px !important;
    }
    
    .about-section [style*="padding: 50px 40px"] {
        padding: 40px 30px !important;
    }
}

/* Ensure proper spacing on all screen sizes */
@media only screen and (max-width: 1199px) {
    
    /* Remove fixed heights that cause issues on smaller screens */
    [style*="min-height: 300px"],
    [style*="min-height: 400px"],
    [style*="min-height: 550px"] {
        min-height: auto !important;
    }
    
    /* Ensure proper text wrapping */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Fix button spacing */
    .btn-box a {
        white-space: normal !important;
    }
}

/* Touch-friendly improvements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
    
    /* Increase touch target sizes */
    a, button, .theme-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove hover effects on touch devices */
    [onmouseover] {
        pointer-events: auto !important;
    }
}

/* Landscape orientation adjustments for mobile */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    
    .banner-carousel .content-box {
        padding: 40px 20px !important;
    }
    
    .banner-carousel .content-box h1 {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }
    
    .banner-carousel .content-box p {
        font-size: 13px !important;
        margin-bottom: 15px !important;
    }
}