/* ==========================================================================
   Homepage Responsive Media Queries
   Extracted from css/homepage.css
   ========================================================================== */

/* Services Grid Breakpoints */
@media (max-width: 1100px) {
    .services-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

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

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

    .service-card {
        padding: 16px 12px;
        border-radius: 16px;
    }
}

/* Testimonial Slide Breakpoints */
@media (max-width: 768px) {
    .testimonial-slide {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .testimonial-card {
        padding: 35px 20px;
    }
}

/* Hero, About & Section Breakpoints */
@media (max-width: 1024px) {
    .hero-container,
    .about-summary-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

    .hero-btns {
        justify-content: center;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-summary-image {
        order: -1;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .about-summary-image img {
        width: 100%;
        height: auto;
        min-height: unset;
        object-fit: contain;
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 60px 0;
    }

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

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