@media(max-width:991px){

    h1{
        font-size:50px;
    }

    h2{
        font-size:38px;
    }

}


@media(max-width:768px){

    h1{
        font-size:42px;
    }

    h2{
        font-size:32px;
    }

}


@media(max-width:576px){

    h1{
        font-size:36px;
    }

    h2{
        font-size:28px;
    }

}
@media(max-width:991px){

.hero-container{

    flex-direction:column;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

}


@media(max-width:991px){

.services-grid{

    grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:576px){

.services-grid{

    grid-template-columns:1fr;

}

}
@media(max-width:991px){

.why-grid{

    grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:576px){

.why-grid{

    grid-template-columns:1fr;

}

}
@media(max-width:991px){

.work-grid{

    grid-template-columns:1fr;

}

}
@media(max-width:991px){

.testimonial-grid{

    grid-template-columns:1fr;

}

}
@media(max-width:991px){

.footer-grid{

    grid-template-columns:1fr 1fr;

}

}


@media(max-width:576px){

.footer-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:991px){

.services-grid{

grid-template-columns:

repeat(2,1fr);

}

}



@media(max-width:576px){

.services-grid{

grid-template-columns:

1fr;

}

}

@media (max-width: 768px){

    .container{
        width:100%;
        padding:0 15px;
    }

    .navbar{
        flex-direction:column;
        height:auto;
        padding:15px 0;
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
        margin-top:15px;
    }

    .logo{
        font-size:42px;
    }

    .hero-container{
        flex-direction:column;
        text-align:center;
        gap:30px;
    }

    .hero-content,
    .hero-image{
        width:100%;
    }

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

    .btn{
        width:100%;
        max-width:300px;
        text-align:center;
    }

    .section-title h2{
        font-size:42px;
    }

    .section-title p{
        font-size:16px;
    }

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

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

    .our-story .container{
        padding:25px;
    }

    .our-story p{
        font-size:18px;
    }
}

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

    .container{
        width:100% !important;
        padding:0 15px !important;
        margin:0 auto !important;
    }

    /* Navbar */
    .navbar{
        flex-direction:column !important;
        height:auto !important;
        padding:15px 0 !important;
    }

    nav ul{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:10px !important;
    }

    .logo{
        font-size:42px !important;
    }

    /* Hero */
    .hero-container{
        flex-direction:column !important;
        gap:20px !important;
        text-align:center !important;
    }

    .hero-content,
    .hero-image{
        width:100% !important;
        flex:none !important;
    }

    /* Stats */
    .stats-container,
    .stats-grid{
        grid-template-columns:1fr 1fr !important;
    }

    /* Services */
    .services-grid{
        grid-template-columns:1fr !important;
    }

    /* Why FixKro */
    .why-grid{
        grid-template-columns:1fr !important;
    }

    /* Work */
    .work-grid{
        grid-template-columns:1fr !important;
    }

    /* Testimonials */
    .testimonial-grid{
        grid-template-columns:1fr !important;
    }

    /* Mission */
    .mission-grid{
        grid-template-columns:1fr !important;
    }

    /* Core values */
    .values-grid{
        grid-template-columns:1fr !important;
    }

    /* Footer */
    .footer-grid{
        grid-template-columns:1fr !important;
        text-align:center !important;
    }

    /* Section headings */
    h1{
        font-size:34px !important;
    }

    h2{
        font-size:28px !important;
    }

    h3{
        font-size:22px !important;
    }

    /* Buttons */
    .hero-buttons,
    .cta-buttons{
        flex-direction:column !important;
        align-items:center !important;
    }

    .btn{
        width:100% !important;
        max-width:300px !important;
        text-align:center !important;
    }

    /* Fix right-side white space */
    body{
        overflow-x:hidden !important;
    }
}