/*=====================
    SERVICES & STATS
======================*/
@media(max-width:1200px){
    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:991px){
    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }
    .hero-services{
        justify-content:center;
        flex-wrap:wrap;
    }
    
    /* Fixed Mobile Menu Styling */
    .menu{
        display:none;
        flex-direction: column;
        position: absolute;
        top: 80px; /* Below header */
        left: 0;
        width: 100%;
        background: #3f3948;
        padding: 20px 0;
        text-align: center;
        box-shadow: 0 10px 15px rgba(0,0,0,0.2);
    }
    .menu.show {
        display:flex; /* Toggled by your JS */
    }
    
    .mobile-btn{
        display:block;
    }
    .hero-content h1{
        font-size:44px;
    }
    .hero-content p{
        font-size:22px;
    }
    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .stat-item:nth-child(even)::after{
        display:none;
    }
    
    /* Fixed Syntax Errors Below */
    .portfolio-grid{
        grid-template-columns:1fr;
        gap:40px;
    }
    .growth-grid{
        grid-template-columns:1fr;
        gap:40px;
    }
    .growth-column{
        border:none !important;
        padding:0;
    }
    .three-col{
        grid-template-columns:1fr;
    }
    .package-grid{
        grid-template-columns:1fr; /* Stacks package and contact form */
    }
}

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

@media(max-width:576px){
    .hero{
        padding-top:110px;
    }
    .hero-content h1{
        font-size:34px;
    }
    .hero-content p{
        font-size:18px;
    }
    .hero-services{
        flex-direction:column;
    }
    .section-title h4{
        font-size:28px;
    }
    .section-title h2{
        font-size:34px;
    }
    .services-grid{
        grid-template-columns:1fr;
    }
    .service-card{
        padding:30px 22px;
    }
    .stats-grid{
        grid-template-columns:1fr;
    }
    .stat-item{
        justify-content:flex-start;
        padding:25px 0;
    }
    .stat-item::after{
        display:none;
    }

    /* Package & Contact Form Mobile Fixes */
    .package-box,
    .contact-box{
        padding:35px 20px;
        text-align:center;
    }
    .package-box h2{
        font-size:30px;
    }
    .package-box h3{
        font-size:26px;
    }
    .package-box p{
        font-size:18px;
    }
    .quote{
        font-size:26px;
    }
    .contact-box h2{
        font-size:32px;
    }
    .contact-box button{
        width:100%;
    }
    .phone{
        font-size:28px;
    }
    .email{
        font-size:16px;
    }
    .footer-flex{
        flex-direction: column;
        justify-content:center;
        text-align:center;
        gap: 20px;
    }
}