/* Mobile Responsive Styles for Eedhal Technology Website */

/* Tablet and Below (768px) */
@media (max-width: 768px) {
    /* Hero Section */
    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1.2rem !important;
    }
    
    .hero-description {
        font-size: 1rem !important;
    }
    
    .hero-section {
        padding-top: 80px;
    }
    
    .hero-section .row {
        min-height: auto !important;
    }
    
    .hero-image {
        height: 300px;
        margin-top: 2rem;
    }
    
    .floating-card {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .floating-card h5 {
        font-size: 0.9rem;
    }
    
    .floating-card i {
        font-size: 1.5rem !important;
    }
    
    /* Section Titles */
    .section-title {
        font-size: 1.8rem !important;
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .navbar-brand img {
        height: 30px !important;
    }
    
    .navbar-nav {
        padding: 1rem 0;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0;
    }
    
    /* Service Cards */
    .service-card {
        margin-bottom: 1rem;
    }
    
    /* Stats */
    .stat-number {
        font-size: 2rem;
    }
    
    /* Footer */
    .footer-brand h5 {
        font-size: 1.2rem;
    }
    
    .footer .col-lg-4,
    .footer .col-lg-2 {
        margin-bottom: 2rem;
    }
    
    /* Newsletter Form - Tablet */
    .newsletter-form .input-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .newsletter-form .form-control {
        border-radius: 8px !important;
        width: 100% !important;
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
        min-height: 44px;
    }
    
    .newsletter-form .btn {
        border-radius: 8px !important;
        width: 100%;
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
        min-height: 44px;
    }
}

/* Mobile Only (576px and below) */
@media (max-width: 576px) {
    /* Hero Section - Critical Fix */
    .hero-section {
        min-height: auto !important;
        padding: 100px 0 50px 0;
    }
    
    .hero-section .container {
        padding-top: 20px;
    }
    
    .hero-section .row {
        min-height: auto !important;
    }
    
    .hero-section .row.align-items-center {
        display: block !important;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
        margin-top: 0;
        padding-top: 0;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .hero-description {
        font-size: 0.95rem !important;
    }
    
    .cta-button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        width: 100%;
        margin-bottom: 2rem;
    }
    
    .hero-image {
        display: none;
    }
    
    /* Navbar */
    .navbar {
        padding: 0.5rem 0;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .navbar-brand span {
        font-size: 0.9rem;
    }
    
    /* Sections */
    .py-5 {
        padding: 2rem 0 !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .lead {
        font-size: 1rem !important;
    }
    
    /* Service Cards */
    .service-card {
        padding: 1.5rem;
    }
    
    .service-icon i {
        font-size: 2rem;
    }
    
    .service-card h4 {
        font-size: 1.2rem;
    }
    
    /* Project Cards */
    .project-card {
        margin-bottom: 1rem;
    }
    
    /* Team Cards */
    .team-card {
        margin-bottom: 1rem;
    }
    
    /* Testimonial Cards */
    .testimonial-card {
        margin-bottom: 1rem;
    }
    
    /* Work Showcase */
    .work-showcase-card {
        padding: 1.5rem;
        margin: 0.5rem;
    }
    
    /* Stats */
    .stat-item {
        margin-bottom: 1.5rem;
    }
    
    /* Newsletter Form */
    .newsletter-form .input-group {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .newsletter-form .form-control {
        border-radius: 8px !important;
        margin-bottom: 0;
        width: 100% !important;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        min-height: 48px;
    }
    
    .newsletter-form .btn {
        border-radius: 8px !important;
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        min-height: 48px;
    }
    
    /* Footer */
    .footer {
        text-align: center;
    }
    
    .footer .text-md-end {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* Extra Small Devices (400px and below) */
@media (max-width: 400px) {
    .hero-title {
        font-size: 1.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .section-title {
        font-size: 1.3rem !important;
    }
    
    .navbar-brand img {
        height: 25px !important;
    }
}


/* =====================================================
   ENQUIRY POPUP — Responsive overrides (eq-* namespace)
   ===================================================== */

/* Mobile (≤768px) — full-screen popup, entire form visible, no scroll */
@media (max-width: 768px) {
    .eq-overlay {
        padding: 1rem;
        align-items: center;
        justify-content: center;
    }

    /* Centered card: wraps content height, max-width so it looks good */
    .eq-popup {
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        max-height: 96vh !important;
        border-radius: 16px !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(40px) scale(0.97);
        box-shadow: 0 24px 64px rgba(14, 165, 233, 0.18), 0 4px 24px rgba(15, 23, 42, 0.14);
    }

    .eq-overlay.eq-open .eq-popup {
        transform: translateY(0);
    }

    /* ---- Header: tight so title stays on one line ---- */
    .eq-header {
        flex-shrink: 0;
        padding: 0.7rem 1rem 0.6rem;
        gap: 0.55rem;
        border-bottom: 1px solid rgba(14, 165, 233, 0.12);
    }

    .eq-header-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    /* Title smaller so it fits on one line */
    .eq-title {
        font-size: 0.88rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Subtitle one line, small */
    .eq-subtitle {
        font-size: 0.7rem;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .eq-close {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    /* ---- Body: no scroll — everything must fit ---- */
    .eq-body {
        flex: 1 1 auto;
        overflow: hidden;
        padding: 0.75rem 1rem 0.5rem;
    }

    /* Name + Phone side by side */
    .eq-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    /* Service + Budget stack vertically — full width so text isn't clipped */
    .eq-row--selects {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Tight spacing between fields */
    .eq-field {
        margin-bottom: 0.55rem;
    }

    .eq-label {
        font-size: 0.72rem;
        margin-bottom: 0.2rem;
    }

    /* iOS auto-zoom safe (≥16px), compact height */
    .eq-input,
    .eq-select,
    .eq-textarea {
        font-size: 16px;
        padding: 0.4rem 0.75rem;
        border-radius: 7px;
    }

    /* Textarea: 2 visible lines only */
    .eq-textarea {
        min-height: 52px;
        max-height: 52px;
        resize: none;
    }

    /* Submit button: full width, slim height */
    .eq-submit-btn {
        font-size: 0.9rem;
        padding: 0.65rem 1rem;
        border-radius: 50px;
        margin-top: 0.2rem;
    }

    /* ---- Footer: single slim line ---- */
    .eq-footer-note {
        flex-shrink: 0;
        padding: 0.45rem 1rem 0.55rem;
        font-size: 0.68rem;
        border-top: 1px solid rgba(15, 23, 42, 0.07);
    }
}

/* Landscape mobile (short viewport) */
@media (max-height: 600px) and (max-width: 768px) {
    .eq-overlay {
        align-items: center;
        padding: 0.5rem;
    }

    .eq-popup {
        max-height: 96vh;
        border-radius: 16px;
        transform: translateY(20px) scale(0.97);
    }

    .eq-overlay.eq-open .eq-popup {
        transform: translateY(0) scale(1);
    }

    .eq-header {
        padding: 0.85rem 1rem 0.75rem;
    }

    .eq-header-icon {
        display: none;  /* Save vertical space in landscape */
    }

    .eq-body {
        padding: 0.85rem 1rem;
    }

    .eq-field {
        margin-bottom: 0.7rem;
    }

    .eq-textarea {
        min-height: 55px;
        rows: 2;
    }

    .eq-footer-note {
        padding: 0.6rem 1rem 0.8rem;
    }
}

/* Large desktop (≥1200px) — slightly larger popup */
@media (min-width: 1200px) {
    .eq-popup {
        max-width: 620px;
    }
}

/* =====================================================
   GLOBAL OVERFLOW FIX
   Prevents any element from causing horizontal scroll
   ===================================================== */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* =====================================================
   HERO TEAL (index.html) — MOBILE OVERFLOW FIXES
   The device mockup right column causes horizontal bleed
   on screens below 992px
   ===================================================== */
@media (max-width: 991px) {

    /* Hide the big device mockup column entirely on tablet/mobile
       — it overflows the viewport and isn't readable at small sizes */
    .hero-teal .col-lg-7 {
        display: none !important;
    }

    /* Left text column goes full width */
    .hero-teal .col-lg-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Ensure hero container doesn't overflow */
    .hero-teal .container {
        overflow: hidden;
    }

    /* CTA buttons wrap cleanly on small screens */
    .hero-cta-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-cta-group .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Trust badges row — wrap and center */
    .hero-trust-row {
        justify-content: flex-start !important;
        gap: 1rem !important;
    }
}

@media (max-width: 576px) {

    /* Tighten hero padding on small phones */
    .hero-teal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Badge text size */
    .hero-badge {
        font-size: 0.7rem !important;
    }

    /* Title */
    .hero-title-new {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
    }

    /* Description */
    .hero-teal .hero-description {
        font-size: 0.9rem !important;
    }

    /* Trust badges — remove scale, already handled by explicit sizes above */
    .trust-badge-gold {
        transform: none;
    }
}

/* =====================================================
   ENQUIRY POPUP — ADDITIONAL MOBILE OVERFLOW FIXES
   ===================================================== */
@media (max-width: 768px) {

    /* Overlay: full viewport scrim, centered */
    .eq-overlay {
        width: 100vw !important;
        height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
        padding: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box;
    }

    /* Popup: centered card, wraps content height */
    .eq-popup {
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        max-height: 96vh !important;
        border-radius: 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box;
    }

    /* Header — prevent icon + text + close from overflowing */
    .eq-header {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .eq-header-text {
        overflow: hidden;
        min-width: 0;
    }

    .eq-title {
        white-space: normal;
        word-break: break-word;
    }

    /* Inputs full width, no overflow */
    .eq-input,
    .eq-select,
    .eq-textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Submit button full width */
    .eq-submit-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {

    /* Small phones: tighter padding but still centered */
    .eq-overlay {
        padding: 0.75rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .eq-popup {
        width: 100% !important;
        height: auto !important;
        max-height: 96vh !important;
        border-radius: 14px !important;
    }
}