/* Custom Responsive Styles for Arkaa Grenergy */

/* Mobile First Approach */
@media (max-width: 575.98px) {
    /* Banner Section */
    .banner__one-content h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .banner__one-content p {
        font-size: 14px !important;
        margin-bottom: 1.5rem !important;
    }
    
    .banner__one-content-button {
        text-align: center !important;
    }
    
    /* Features Section */
    .features__one-left h4 {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    
    .features__one-right-item {
        text-align: center !important;
        margin-bottom: 2rem !important;
    }
    
    /* About Section */
    .about__one-right-title h2 {
        font-size: 1.8rem !important;
        text-align: center !important;
    }
    
    .about__one-left-image-two {
        display: none !important;
    }
    
    /* Services Section */
    .service__one-item {
        margin-bottom: 2rem !important;
    }
    
    /* Team Section */
    .team__one-title h2 {
        font-size: 1.8rem !important;
    }
    
    .team__one-item {
        max-width: 300px !important;
        margin: 0 auto 2rem auto !important;
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 767.98px) {
    .banner__one-content h1 {
        font-size: 2.5rem !important;
    }
    
    .features__one-left {
        text-align: center !important;
    }
    
    .about__one-right-title {
        text-align: center !important;
    }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991.98px) {
    .banner__one-content h1 {
        font-size: 3rem !important;
    }
    
    .about__one-left-image-two {
        width: 200px !important;
        height: 200px !important;
    }
}

/* Utility Classes */
.img-fluid {
    max-width: 100% !important;
    height: auto !important;
}

.text-center-mobile {
    text-align: center !important;
}

@media (min-width: 992px) {
    .text-center-mobile {
        text-align: left !important;
    }
}

/* Fix for button spacing on mobile */
@media (max-width: 575.98px) {
    .btn-one {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
    
    .footer__cta-area-left-btn {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    .footer__cta-area-left-btn-tel {
        margin-top: 0 !important;
    }
}

/* Mobile Menu Improvements */
@media (max-width: 991.98px) {
    .header__area-menubar-right-sidebar-popup {
        padding: 2rem 1rem !important;
    }
    
    .menu__bar-popup {
        width: 100% !important;
        max-width: 350px !important;
    }
    
    .mean-container .mean-nav ul li a {
        padding: 15px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    /* Mobile Dark/Light Switch Styles */
    .mobile-dark-light-switch {
        border-top: 1px solid #eee !important;
        padding: 20px !important;
        margin-top: 20px !important;
        text-align: center !important;
    }
    
    .mobile-switch-container {
        border-top: 1px solid #eee !important;
        padding-top: 15px !important;
        margin-top: 15px !important;
        text-align: center !important;
    }
    
    .mobile-switch-container .switch__tab {
        margin: 0 auto !important;
        justify-content: center !important;
    }
    
    .mean-container .mean-nav ul li.mobile-switch-container {
        background: transparent !important;
        border-bottom: none !important;
    }
    
    .mean-container .mean-nav ul li.mobile-switch-container:hover {
        background: transparent !important;
    }
    
    /* Dark mode mobile menu adjustments */
    .dark-mode .mobile-dark-light-switch {
        border-top: 1px solid #363636 !important;
    }
    
    .dark-mode .mobile-switch-container {
        border-top: 1px solid #363636 !important;
    }
    
    .dark-mode .mean-container .mean-nav ul li a {
        border-bottom: 1px solid #363636 !important;
        color: #c6c8c9 !important;
    }
    
    /* Make sure switch is visible in mobile */
    .mobile-switch-container .switch__tab {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .mobile-switch-container .switch__tab-btn {
        font-size: 14px !important;
        padding: 5px 10px !important;
    }
}