@media (max-width: 991px) {

    .main-nav,
    .header-cta {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .main-nav.is-active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .main-nav.is-active ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hero {
        background-image: url('../images/hero_banner_mob.png');
    }

    .hero1 {
        background-image: url('../images/8.png');
    }

    .hero2 {
        background-image: url('../images/6.png');
    }

    .hero3 {
        background-image: url('../images/6.png');
    }

    .hero4 {
        background-image: url('../images/6.png');
    }

    .hero5 {
        background-image: url('../images/6.png');
    }

    .hero6 {
        background-image: url('../images/6.png');
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .button {
        justify-content: center;
    }

    .hero-features {
        gap: 10px 16px;
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .why-solar-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .why-solar-image {
        height: 400px;
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 16px;
    }

    .timeline-line {
        display: none;
    }

    .projects-grid {
        grid-template-rows: auto;
    }

    .project-card {
        height: 280px;
    }


    .coverage-container {
        flex-direction: column;
        gap: 40px;
    }

    .coverage-content {
        max-width: 100%;
    }

    .coverage-map-wrapper {
        width: 100%;
        max-width: 100%;
        height: 400px;
    }

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

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

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

@media (max-width: 768px) {
    .history-item-2 .history-card:before{
        background-image: url(../images/mob_lt_2.png);
        top: -86%;
        right: 11%;
        width: 66px;
        height: 156px;
    }
    .history-item-3 .history-card:before{
        background-image: url(../images/mob_rt_2.png);
        top: -86%;
        left:11%;
        width: 66px;
        height: 156px;
    }
    .history-item-4 .history-card:before{
        background-image: url(../images/mob_lt_2.png);
        top: -86%;
        right: 11%;
        width: 66px;
        height: 156px;
    }
    .history-item-5 .history-card:before{
        background-image: url(../images/mob_rt_2.png);
        top: -86%;
        left:11%;
        width: 66px;
        height: 156px;
    }
    .hero-title {
        width: 100%;
    }
    .plus-icon img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }
    .hero-tagline span.tag-text {
        font-size: 11px;
        text-transform: capitalize;
    }
    .hero-content {
        max-width: 100%;
    }
    .features-grid, .services-grid {
        grid-template-columns: 1fr;
        gap:16px;
    }
    .section-header {
        margin-bottom: 32px;
    }
    .service-card {
        height: 434px;
    }
    .feature-card {
        padding: 18px 20px;
    }
    .reason-number {
        font-size: 32px;
        min-width: 40px;
    }
    .reason-item .verdana-h3 {
        font-size: 18px;
    }
    .why-solar-image {
        height: 400px;
    }
    .step-item .step-content {
        padding-right: 0px;
    }
    .step-desc{
        opacity: 50%;
        padding: 0px 48px;
    }
    .steps-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 28px;
    }
    .step-item {
        gap: 16px;
        align-items: center;
        text-align: center;
    }
    .step-circle {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .projects-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
    .coverage-map-wrapper {
        height: 536px;
    }
    .coverage-legend {
        gap: 16px;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .testimonial-card {
        padding: 24px 20px;
    }
    .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .newsletter-form {
        flex-direction: column;
    }
    .subscribe-btn {
        width: 100%;
    }
    .card-content {
        padding-bottom: 32px;
    }
    .footer-bottom {
        flex-direction: column-reverse;
        gap: 16px;
        align-items: flex-start;
    }
    .faq-card {
        padding: 16px 18px;
    }
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    .cta-buttons button {
        width: 100%;
    }
    .projects-bento-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, 220px) 260px;
        gap: 12px;
    }
    .project-card.item-1,
    .project-card.item-2,
    .project-card.item-3,
    .project-card.item-4,
    .project-card.item-5,
    .project-card.item-6,
    .project-card.item-7 {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        height: 100%;
        margin-top: 0;
        float: none;
    }

    .project-card.item-1,
    .project-card.item-2 {
        grid-row: span 1;
    }

    .project-card.item-7 {
        grid-column: 1 / -1;
    }
}