/* Responsive Media Queries */
/* Mobile-first approach: base styles in component files, enhancements here */

/* =================================
   EXTRA SMALL DEVICES (375px+)
   Larger phones (iPhone 12/13/14)
   ================================= */
@media (min-width: 375px) {
    .hero-title {
        font-size: 2.25rem;
    }

    .contact-hero h1 {
        font-size: 2rem;
    }

    .tech-badge {
        font-size: 0.9rem;
        padding: 8px 14px;
    }
}

/* =================================
   SMALL DEVICES (576px+)
   Landscape phones, small tablets
   ================================= */
@media (min-width: 576px) {
    /* Hero Sections */
    .hero-section {
        padding: 4rem 0 3rem 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .contact-hero {
        padding: 4rem 0 3rem 0;
    }

    .contact-hero h1 {
        font-size: 2.25rem;
    }

    .contact-hero p {
        font-size: 1.1rem;
    }

    /* CTA Section */
    .cta-title {
        font-size: 2rem;
    }

    .cta-text {
        font-size: 1.2rem;
    }

    /* Form Container */
    .contact-form-container {
        padding: 2rem;
    }

    /* Stats */
    .stats-box {
        padding: 2.5rem 2rem;
    }

    /* Language Switcher */
    .language-switcher {
        top: 70px;
        right: 15px;
        padding: 8px 16px;
    }

    .language-switcher a {
        font-size: 0.9rem;
    }

    /* Service Cards */
    .service-icon {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
    }

    .service-title {
        font-size: 1.25rem;
    }

    .service-description {
        font-size: 1rem;
    }

    /* Contact Info */
    .contact-info-icon {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
    }

    .contact-info-card {
        padding: 2rem;
        margin-bottom: 20px;
    }
}

/* =================================
   MEDIUM DEVICES (768px+)
   Tablets, small desktops
   ================================= */
@media (min-width: 768px) {
    /* Hero Sections */
    .hero-section {
        padding: 5rem 0 4rem 0;
        margin: -20px 0 0 0;  /* Restore negative margin on larger screens */
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.3rem;
    }

    .contact-hero {
        padding: 5rem 0 4rem 0;
        margin: -20px 0 0 0;  /* Restore negative margin on larger screens */
    }

    .contact-hero h1 {
        font-size: 2.5rem;
    }

    .contact-hero p {
        font-size: 1.2rem;
    }

    /* CTA Section */
    .cta-section {
        padding: 4rem 0;
        margin: 4rem 0 0 0;
    }

    .cta-title {
        font-size: 2.25rem;
    }

    .cta-text {
        font-size: 1.25rem;
    }

    .cta-button {
        padding: 14px 40px;
        font-size: 1.1rem;
    }

    /* Form Container */
    .contact-form-container {
        padding: 2.5rem;
    }

    /* Page Wrapper */
    .contact-page-wrapper {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    /* Stats */
    .stats-box {
        padding: 3rem 2.5rem;
    }

    .stats-number {
        font-size: 2.75rem;
    }

    .stats-label {
        font-size: 1.05rem;
    }

    /* Language Switcher */
    .language-switcher {
        top: 80px;
        right: 20px;
        padding: 8px 20px;
    }

    .language-switcher a {
        font-size: 0.95rem;
    }

    /* Service Cards */
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .service-card {
        padding: 28px;
    }

    /* Contact Info */
    .contact-info-icon {
        width: 55px;
        height: 55px;
        font-size: 1.7rem;
    }

    .contact-info-title {
        font-size: 1.15rem;
    }

    .contact-info-text {
        font-size: 1rem;
    }

    /* Why Choose Cards */
    .why-choose-card {
        padding: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .why-icon {
        font-size: 1.75rem;
        margin-right: 15px;
    }

    /* Tech Badges */
    .tech-badge {
        padding: 8px 16px;
        font-size: 0.9rem;
        margin: 5px;
    }
}

/* =================================
   LARGE DEVICES (992px+)
   Desktops
   ================================= */
@media (min-width: 992px) {
    /* Hero Sections */
    .hero-section {
        padding: 6rem 0 5rem 0;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .contact-hero {
        padding: 5rem 0 4rem 0;
    }

    .contact-hero h1 {
        font-size: 3rem;
    }

    .contact-hero p {
        font-size: 1.3rem;
    }

    /* CTA Section */
    .cta-section {
        padding: 5rem 0;
        margin: 5rem 0 0 0;
    }

    .cta-title {
        font-size: 2.5rem;
    }

    .cta-text {
        font-size: 1.3rem;
    }

    .cta-button {
        padding: 15px 50px;
        font-size: 1.2rem;
    }

    /* Form Container */
    .contact-form-container {
        padding: 3rem;
    }

    /* Page Wrapper */
    .contact-page-wrapper {
        padding-top: 3rem;
        padding-bottom: 5rem;
    }

    /* Stats */
    .stats-box {
        padding: 40px;
    }

    .stats-number {
        font-size: 3rem;
    }

    .stats-label {
        font-size: 1.1rem;
    }

    /* Service Cards */
    .service-icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .service-card {
        padding: 30px;
    }

    .service-title {
        font-size: 1.3rem;
    }

    /* Contact Info */
    .contact-info-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .contact-info-card {
        padding: 30px;
    }

    .contact-info-title {
        font-size: 1.2rem;
    }

    /* Why Choose Cards */
    .why-choose-card {
        padding: 25px;
        margin-bottom: 20px;
    }

    .why-icon {
        font-size: 2rem;
    }
}

/* =================================
   EXTRA LARGE DEVICES (1200px+)
   Large desktops - Original design
   ================================= */
@media (min-width: 1200px) {
    .hero-section {
        padding: 100px 0 80px 0;
    }

    .contact-hero {
        padding: 80px 0 60px 0;
    }

    .cta-section {
        padding: 80px 0;
        margin: 80px 0 0 0;
    }

    .contact-form-container {
        padding: 40px;
    }
}

/* =================================
   BUTTON LAYOUT FIX
   Stack buttons on very small screens
   ================================= */
@media (max-width: 475px) {
    .hero-section .btn-primary-custom,
    .hero-section .btn-outline-custom,
    .contact-hero .btn-primary-custom {
        display: block;
        width: 100%;
        text-align: center;
    }
}