/* Tablet Styles */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mega-menu {
        width: 500px;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solar-systems-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
 
    .solar-systems-grid {
        grid-template-columns: 1fr;
    }

    .logo img {
    height: 55px!important;
    margin-right: 10px;
}


        .top-bar-content {
        flex-direction: row;
        gap: 10px;
    }


    .mobile-menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 110px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 120px);
       background: var(--blackdarkgrey);
        transition: left 0.3s ease;
        overflow-y: auto;
    }

        .nav-menu.active {
            left: 0;
        }

    .nav-list {
        flex-direction: column;
        padding: 20px;
    }

        .nav-list li {
            margin: 10px 0;
            width: 100%;
        }

    .mega-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 20px;
        margin-top: 10px;
        display: none;
    }

    .has-mega-menu.active .mega-menu {
        display: block;
    }

    .mega-menu-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mega-menu-content1 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hero-slider {
        height: 66vh;
        /* margin-top: 120px;*/
    }

    .slide-title {
        font-size: 36px;
    }

    .slide-text {
        font-size: 18px;
    }

    .slider-btn {
        padding: 10px 15px;
        font-size: 18px;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .why-choose-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .testimonial-card-new {
        padding: 30px 25px;
    }

    .testimonial-text-new {
        min-height: auto;
        font-size: 14px;
    }

    .quote-icon-new {
        width: 50px;
        height: 50px;
        top: 20px;
        right: 20px;
    }

        .quote-icon-new i {
            font-size: 22px;
        }

    .cta-content h2 {
        font-size: 32px;
    }

    .cta-content p {
        font-size: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .section-title {
        font-size: 32px;
    }

    .welcome-text {
        font-size: 28px;
    }

    .welcome-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 480px) {


    .cta-section {
        margin-top: 370px;
    }


    .mobdisplaynone {
        display: none;
    }

    .slide-title {
        font-size: 28px;
    }

    .slide-text {
        font-size: 16px;
    }

    .section-title {
        font-size: 28px;
    }

    .about-text h3 {
        font-size: 24px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .about-detail-content,
    .epc-intro-content,
    .contact-grid,
    .enquiry-content,
    .calculator-container,
    .apply-content {
        grid-template-columns: 1fr;
    }

    .mission-vision-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .accessories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stories-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-hero {
        height: 180px;
    }

    .page-hero-content h1 {
        font-size: 22px;
    }

    .page-hero-content p {
        font-size: 15px;
    }

    .values-grid,
    .brands-grid,
    .accessories-grid,
    .services-grid,
    .certifications-grid,
    .awards-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .enquiry-stats {
        grid-template-columns: 1fr;
    }

    .calculator-container {
        padding: 30px;
    }

    .contact-form-side,
    .enquiry-form-container,
    .apply-form-container {
        padding: 30px;
    }

    .process-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .process-step::before {
            display: none;
        }

    .financing-card {
        flex-direction: column;
        text-align: center;
    }
}

/* Products Showcase Responsive */
@media (max-width: 1024px) {
    .tab-content-grid {
        gap: 40px;
    }

    .circular-image {
        width: 350px;
        height: 350px;
    }

    .statistics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item-full {
        height: 350px;
    }
}

@media (max-width: 768px) {
    .products-tabs {
        flex-direction: column;
        max-width: 100%;
        border-radius: 15px;
    }

    .tab-btn {
        border-radius: 10px;
        padding: 12px 20px;
    }

    .tab-content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tab-content-text h3 {
        font-size: 28px;
    }

    .circular-image {
        width: 280px;
        height: 280px;
    }

    .statistics-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stat-box {
        padding: 30px 20px;
    }

    .stat-number {
        font-size: 36px;
    }

    .gallery-grid-full {
        grid-template-columns: 1fr;
    }

    .gallery-item-full {
        height: 300px;
        margin-bottom: 21px;
    }

        .gallery-item-full:hover {
            transform: scale(1);
        }

    .gallery-content h4 {
        font-size: 18px;
    }

    .gallery-content p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .tab-content-text h3 {
        font-size: 24px;
    }

    .power-range {
        font-size: 18px;
    }

    .circular-image {
        width: 250px;
        height: 250px;
    }

    .stat-number {
        font-size: 32px;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
    }

        .stat-icon i {
            font-size: 28px;
        }
}

/* Welcome Screen Responsive */
@media (max-width: 768px) {
    .welcome-logo img {
        max-width: 180px;
    }

    .sunrise-animation {
        width: 250px;
        height: 150px;
    }

    .sun-circle {
        width: 80px;
        height: 80px;
    }

    .panel {
        width: 30px;
        height: 45px;
    }

    .battery-charging {
        width: 120px;
        height: 60px;
    }

    .battery-container {
        width: 100px;
        height: 50px;
    }

    .charging-bolt {
        font-size: 24px;
    }

    .welcome-text {
        font-size: 28px;
    }

    .welcome-subtitle {
        font-size: 16px;
    }

    .welcome-progress {
        width: 250px;
    }
}

@media (max-width: 480px) {
    .welcome-logo img {
        max-width: 150px;
    }

    .sunrise-animation {
        width: 200px;
        height: 120px;
    }

    .sun-circle {
        width: 60px;
        height: 60px;
    }

    .panel {
        width: 25px;
        height: 35px;
        gap: 5px;
    }

    .welcome-text {
        font-size: 24px;
    }

    .welcome-subtitle {
        font-size: 14px;
    }

    .welcome-progress {
        width: 200px;
    }
}

/* Solar System Pages Responsive */
@media (max-width: 1024px) {
    .system-intro-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .components-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .working-modes {
        grid-template-columns: 1fr;
    }

    .specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .advantages-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .system-intro-text h2 {
        font-size: 28px;
    }

    .components-grid {
        grid-template-columns: 1fr;
    }

    .packages-grid {
        grid-template-columns: 1fr;
    }

    .package-card.featured {
        transform: none;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .applications-grid {
        grid-template-columns: 1fr;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .process-flow {
        flex-direction: column;
    }

    .flow-arrow {
        transform: rotate(90deg);
        margin: 20px 0;
    }

    .installation-timeline::before {
        left: 30px;
    }

    .timeline-item {
        flex-direction: row !important;
        padding-left: 80px;
    }

        .timeline-item:nth-child(odd) {
            flex-direction: row !important;
        }

    .timeline-icon {
        position: absolute;
        left: 0;
    }

    .timeline-content {
        margin: 0;
    }

    .comparison-table {
        overflow-x: auto;
    }

        .comparison-table table {
            min-width: 600px;
        }
}

@media (max-width: 480px) {
    .system-intro-text h2 {
        font-size: 24px;
    }

    .component-card,
    .package-card,
    .advantage-card,
    .application-card {
        padding: 30px 20px;
    }

    .package-price {
        font-size: 24px;
    }

    .timeline-content {
        padding: 20px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 15px 10px;
        font-size: 14px;
    }
}


@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-info-side,
    .contact-form-side {
        padding: 25px 20px;
    }

    .contact-info-side h2 {
        font-size: 22px;
    }

    .contact-form h3 {
        font-size: 20px;
    }
}

@media only screen and (min-width:100px) and (max-width:768px) {



    .testimonials-section {
       
        padding: 21px 0!important;
    }


    .slide-content {

        padding: 0 63px!important;
    }


    .gallery-section {
        padding: 25px 0 0 0!important;
      
    }

    .statistics-section {
        padding: 31px 0!important;
      
    }


    .about-section {
        padding: 19px 0!important;
      
    }

    .gallery-section .section-header {
        padding: 0 20px 3px!important;
    }


    .section-header {
        text-align: center;
        margin-bottom: 8px!important;
    }


    .about-badge {
        bottom: -31px !important;
        right: 0px !important;
        padding: 5px!important;
    }

    .about-text p {

        color: #000000;
        text-align: justify;
    }

    .tab-content-text p {
        text-align: justify;
    }

    .brand-card {

        padding: 11px!important;
 
    }


    a.nav-link i.fas.fa-chevron-down {
        right: 0;
        float: right;
    }


    .about-detail-text p {

        color: #000000;
        text-align: justify;
    }

    .mission-card, .vision-card {
       
        padding: 11px!important;
       
    }

    .system-intro-text p {
        color: #000000;
       
        text-align: justify!important;
    }


    .system-intro-text p {
        color: #060606;
        text-align: justify !important;
    }

    .cta-section {
        margin-top: 0px!important;
    }
}