/* ============================================================
   NAJLA COMPANY — Mobile Responsive v2
   Complete rewrite — Kurdistan
   Breakpoints: 1024px -> 768px -> 576px -> 480px -> 360px
   ============================================================ */

/* ===== TABLET LANDSCAPE (max-width: 1024px) ===== */
@media (max-width: 1024px) {

    .nav-wrapper {
        margin: 0 16px !important;
        padding: 8px 16px 8px 18px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .nav-menu {
        gap: 0 !important;
    }

    .nav-menu a {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    .header-quote-btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    .services-modern-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ===== TABLET / MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {

    /* ---------- BASE ---------- */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    section {
        overflow: hidden;
    }

    /* ---------- HEADER & NAV ---------- */
    .nav-wrapper {
        margin: 0 12px !important;
        padding: 8px 16px !important;
        border-radius: 20px !important;
        /* Remove backdrop-filter on mobile — it creates a containing block
           that traps position:fixed children (nav-menu) inside the wrapper */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .header.scrolled .nav-wrapper {
        margin: 0 10px !important;
        padding: 6px 14px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .logo img {
        height: 44px !important;
        max-width: 130px !important;
    }

    .nav-menu {
        display: none !important;
    }

    .header-quote-btn {
        display: none !important;
    }

    .contact-quick {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 12px !important;
        padding: 5px 10px !important;
        gap: 5px !important;
        border-radius: 16px !important;
        color: #C43B2E !important;
        text-decoration: none !important;
    }

    .contact-quick span {
        display: inline !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #15412A !important;
        white-space: nowrap !important;
    }

    .contact-quick i {
        font-size: 14px !important;
    }

    .theme-toggle {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        background: transparent !important;
        border: none !important;
        color: #C43B2E !important;
        font-size: 20px !important;
        -webkit-tap-highlight-color: transparent;
    }

    .header-actions {
        gap: 8px !important;
    }

    .lang-btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
        min-height: 40px;
    }

    .theme-btn {
        width: 42px !important;
        height: 22px !important;
    }

    /* ---------- MOBILE MENU ---------- */
    .nav-menu.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        align-items: stretch !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 9999 !important;
        padding: 12px 14px 24px !important;
        overflow-y: auto !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
        border: none !important;
        border-radius: 0 !important;
        animation: menuSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    body.dark-mode .nav-menu.active {
        background: rgba(26, 32, 44, 0.98) !important;
    }

    @keyframes menuSlideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .nav-menu.active > li {
        animation: menuItemFade 0.35s ease forwards;
        opacity: 0;
        list-style: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        margin: 0 !important;
    }
    .nav-menu.active > li:nth-child(1) { animation-delay: 0.05s; }
    .nav-menu.active > li:nth-child(2) { animation-delay: 0.1s; }
    .nav-menu.active > li:nth-child(3) { animation-delay: 0.15s; }
    .nav-menu.active > li:nth-child(4) { animation-delay: 0.2s; }
    .nav-menu.active > li:nth-child(5) { animation-delay: 0.25s; }
    .nav-menu.active > li:nth-child(6) { animation-delay: 0.3s; }

    .nav-menu.active > li:last-child {
        border-bottom: none !important;
    }

    body.dark-mode .nav-menu.active > li {
        border-bottom-color: rgba(255, 255, 255, 0.07) !important;
    }

    @keyframes menuItemFade {
        from { opacity: 0; transform: translateX(-8px); }
        to { opacity: 1; transform: translateX(0); }
    }

    .nav-menu.active > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 14px 12px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #15412A !important;
        border-radius: 10px !important;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, color 0.2s ease !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    .nav-menu.active > li > a > i {
        margin-left: auto !important;
        font-size: 13px !important;
        color: #8a949b !important;
    }

    body.dark-mode .nav-menu.active > li > a {
        color: #e2e8f0 !important;
    }

    .nav-menu.active > li > a:active {
        background: rgba(21, 65, 42, 0.05) !important;
    }

    .nav-menu.active > li > a.active {
        color: #C43B2E !important;
        font-weight: 600 !important;
        background: transparent !important;
        box-shadow: inset 3px 0 0 #C43B2E !important;
    }

    /* Submenu: subtle nested list with a thin accent line, no heavy grey box */
    .nav-menu.active .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid rgba(21, 65, 42, 0.12) !important;
        background: transparent !important;
        backdrop-filter: none !important;
        padding: 2px 0 6px 0 !important;
        margin: 0 0 6px 14px !important;
        min-width: auto !important;
        border-radius: 0 !important;
    }

    body.dark-mode .nav-menu.active .dropdown-menu {
        border-left-color: rgba(255, 255, 255, 0.12) !important;
        background: transparent !important;
    }

    .nav-menu.active .dropdown-menu li {
        border-bottom: none !important;
        margin: 0 !important;
    }

    .nav-menu.active .dropdown-menu li a {
        padding: 11px 14px !important;
        font-size: 14.5px !important;
        min-height: 42px !important;
        color: #55636b !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 8px !important;
        text-decoration: none !important;
    }

    body.dark-mode .nav-menu.active .dropdown-menu li a {
        color: #a0aec0 !important;
    }

    .nav-menu.active .dropdown-menu li a:hover,
    .nav-menu.active .dropdown-menu li a:active {
        background: rgba(196, 59, 46, 0.06) !important;
        color: #C43B2E !important;
    }

    /* ---------- HERO SECTIONS ---------- */
    .hero {
        margin-top: 0 !important;
        padding: 96px 0 30px !important;
        min-height: auto !important;
    }

    .agricultural-hero,
    .pest-control-hero,
    .logistics-hero,
    .construction-hero,
    .trading-hero,
    .ingos-hero,
    .contact-hero,
    .about-hero {
        margin-top: 70px;
        padding: 50px 0 30px !important;
    }

    .hero-main-layout,
    .agricultural-hero-layout,
    .pest-control-hero-layout,
    .logistics-hero-layout,
    .construction-hero-layout,
    .trading-hero-layout,
    .ingos-hero-layout,
    .contact-hero-layout,
    .about-hero-layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* TEXT FIRST on mobile — reset order:-1 from style.css */
    .hero-right,
    .agricultural-hero-right,
    .pest-control-hero-right,
    .logistics-hero-right,
    .construction-hero-right,
    .trading-hero-right,
    .ingos-hero-right,
    .contact-hero-right,
    .about-hero-right {
        order: 0 !important;
    }

    .hero-left h1,
    .agricultural-hero-left h1,
    .pest-control-hero-left h1,
    .logistics-hero-left h1,
    .construction-hero-left h1,
    .trading-hero-left h1,
    .ingos-hero-left h1,
    .contact-hero-left h1,
    .about-hero-left h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .hero-left p,
    .agricultural-hero-left p,
    .pest-control-hero-left p,
    .logistics-hero-left p,
    .construction-hero-left p,
    .trading-hero-left p,
    .ingos-hero-left p,
    .contact-hero-left p,
    .about-hero-left p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .hero-badge,
    .agricultural-badge-modern,
    .pest-control-badge-modern,
    .logistics-badge-modern,
    .construction-badge-modern,
    .trading-badge-modern,
    .ingos-badge-modern,
    .contact-badge-modern,
    .about-badge-modern {
        font-size: 11px !important;
        padding: 6px 14px !important;
    }

    .hero-buttons,
    .agricultural-hero-buttons,
    .pest-control-hero-buttons,
    .logistics-hero-buttons,
    .construction-hero-buttons,
    .trading-hero-buttons,
    .ingos-hero-buttons,
    .contact-hero-buttons,
    .about-hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .hero-buttons .btn,
    .agricultural-hero-buttons .btn,
    .pest-control-hero-buttons .btn,
    .logistics-hero-buttons .btn,
    .construction-hero-buttons .btn,
    .trading-hero-buttons .btn,
    .ingos-hero-buttons .btn,
    .contact-hero-buttons .btn,
    .about-hero-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
    }

    .hero-trust-row {
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    .hero-trust-divider {
        display: none !important;
    }

    .hero-trust-item {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .hero-trust-number {
        font-size: 20px !important;
    }

    /* ---------- HERO SHOWCASE (homepage) ---------- */
    .services-showcase-grid {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .services-tower {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .service-card {
        height: auto !important;
        min-height: 44px !important;
    }

    .unified-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .performance-section,
    .contact-section {
        padding: 15px !important;
    }

    /* ---------- SHOWCASE CARDS (service pages) ---------- */
    .agricultural-showcase,
    .pest-control-showcase,
    .logistics-showcase,
    .construction-showcase,
    .trading-showcase,
    .ingos-showcase,
    .about-showcase {
        gap: 12px !important;
    }

    .agricultural-stats-card,
    .pest-control-stats-card,
    .logistics-stats-card,
    .construction-stats-card,
    .trading-stats-card,
    .ingos-stats-card,
    .about-stats-card,
    .contact-info-card,
    .contact-hours-card,
    .agricultural-services-preview,
    .pest-control-services-preview,
    .logistics-services-preview,
    .construction-services-preview,
    .trading-services-preview,
    .ingos-services-preview,
    .about-company-info {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    .stats-quick-grid {
        gap: 10px !important;
    }

    .quick-stat .stat-value {
        font-size: 20px !important;
    }

    .achievements-list {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    /* ---------- ABOUT SECTION ---------- */
    .about-modern {
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 50px 0 !important;
    }

    .about-stats-bar {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 24px 20px !important;
        border-radius: 14px !important;
    }

    .about-stat-divider {
        width: 60px !important;
        height: 1px !important;
    }

    .about-stat-number {
        font-size: 28px !important;
    }

    .timeline-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .timeline-modern::before {
        display: none !important;
    }

    /* ---------- SERVICES PORTFOLIO ---------- */
    .services-portfolio {
        margin: 20px 10px !important;
        padding: 40px 20px !important;
        border-radius: 16px !important;
        width: auto !important;
    }

    .services-modern-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .service-card-img {
        height: 160px !important;
    }

    .service-card-body {
        padding: 20px !important;
    }

    /* ---------- CTA SECTION ---------- */
    .cta-modern {
        margin: 20px 10px !important;
        padding: 40px 20px !important;
        border-radius: 16px !important;
    }

    .cta-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }

    .cta-buttons {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .cta-buttons .btn {
        width: 100% !important;
    }

    .contact-card-cta {
        margin-top: 16px !important;
    }

    .cta-content h2 {
        font-size: 24px !important;
    }

    .cta-content p {
        font-size: 14px !important;
    }

    /* ---------- CONTENT WRAPPERS ---------- */
    .agricultural-content-wrapper,
    .pest-control-content-wrapper,
    .logistics-content-wrapper,
    .construction-content-wrapper,
    .trading-content-wrapper,
    .ingos-content-wrapper,
    .about-content-wrapper,
    .contact-content-wrapper {
        margin: 0 !important;
        padding: 30px 16px !important;
        border-radius: 16px !important;
    }

    /* ---------- SERVICE GRIDS ---------- */
    .agricultural-services-grid,
    .pest-control-services-grid,
    .logistics-services-grid,
    .construction-services-grid,
    .trading-services-grid,
    .ingos-services-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .services-grid.modern {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* ---------- SERVICE CARDS ---------- */
    .service-card-modern {
        padding: 24px 20px !important;
    }

    .service-card-modern h3 {
        font-size: 18px !important;
    }

    .icon-wrapper {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 16px !important;
    }

    .icon-wrapper i {
        font-size: 26px !important;
    }

    /* ---------- IMPACT STATS ---------- */
    .impact-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .impact-stat-number {
        font-size: 28px !important;
    }

    /* ---------- CAPABILITIES ---------- */
    .capability-grid,
    .capabilities-modern-grid,
    .capabilities-grid {
        grid-template-columns: 1fr !important;
    }

    .capability-modern-card {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }

    /* ---------- PROCESS TIMELINE ---------- */
    .process-timeline {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .process-timeline::before {
        display: none !important;
    }

    .process-step {
        text-align: left !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .process-step .step-number {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .process-step h4,
    .process-step p {
        text-align: left !important;
    }

    /* ---------- TESTIMONIALS ---------- */
    .testimonials-modern-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .testimonial-modern-card {
        padding: 20px !important;
    }

    /* ---------- MISSION / VISION / FEATURES ---------- */
    .mission-vision-grid,
    .why-choose-grid,
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .why-choose-item {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }

    /* ---------- ABOUT PAGE ---------- */
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .story-timeline {
        gap: 20px !important;
    }

    .story-timeline::before {
        left: 25px !important;
    }

    .timeline-year {
        width: 50px !important;
        height: 50px !important;
        font-size: 12px !important;
    }

    /* ---------- FAQ ---------- */
    .faq-question {
        padding: 18px 16px !important;
    }

    .faq-question h4 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    /* ---------- CONTACT PAGE ---------- */
    .contact-form-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .contact-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .contact-form-modern {
        padding: 28px 20px !important;
        border-radius: 16px !important;
    }

    .why-contact-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }

    .map-container {
        height: 280px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    .map-container iframe {
        border-radius: 12px !important;
    }

    /* ---------- PEST GALLERY ---------- */
    .pests-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .pest-card-img {
        height: 140px !important;
    }

    .pest-card-info {
        padding: 12px !important;
    }

    .pest-card-info h3 {
        font-size: 14px !important;
    }

    /* ---------- PEST MODAL ---------- */
    .pest-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        border-radius: 16px !important;
    }

    .pest-modal-img {
        height: 220px !important;
    }

    .pest-modal-body {
        padding: 24px !important;
    }

    .pest-modal-body h2 {
        font-size: 22px !important;
    }

    .pest-modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
    }

    /* ---------- PAGE HEADER ---------- */
    .page-header {
        padding: 120px 0 50px !important;
    }

    .page-header h1 {
        font-size: 30px !important;
    }

    .page-header p {
        font-size: 16px !important;
    }

    /* ---------- SECTION SPACING ---------- */
    .agricultural-services-modern,
    .agricultural-impact-section,
    .agricultural-process-section,
    .agricultural-testimonials-section,
    .agricultural-capabilities-section,
    .agricultural-faq-section,
    .agricultural-why-choose-section,
    .agricultural-cta-section,
    .pest-control-services-modern,
    .pest-control-impact-section,
    .pest-control-process-section,
    .pest-control-testimonials-section,
    .pest-control-faq-section,
    .pest-control-why-choose-section,
    .pest-control-cta-section,
    .logistics-services-modern,
    .logistics-impact-section,
    .logistics-process-section,
    .logistics-faq-section,
    .logistics-cta-section,
    .construction-services-modern,
    .construction-impact-section,
    .construction-process-section,
    .construction-faq-section,
    .construction-cta-section,
    .trading-services-modern,
    .trading-impact-section,
    .trading-faq-section,
    .trading-cta-section,
    .ingos-services-modern,
    .ingos-impact-section,
    .ingos-faq-section,
    .ingos-cta-section,
    .about-story-section,
    .about-mission-section,
    .about-stats-section,
    .about-timeline-section,
    .about-team-section,
    .about-why-choose-section,
    .about-cta-section,
    .contact-form-section,
    .contact-cards-section,
    .contact-why-section,
    .contact-cta-section {
        margin: 16px 0 !important;
        padding: 40px 0 !important;
    }

    /* ---------- CTA SIMPLE BLOCKS ---------- */
    .agricultural-cta-simple,
    .pest-control-cta-simple,
    .logistics-cta-simple,
    .construction-cta-simple,
    .trading-cta-simple,
    .ingos-cta-simple,
    .contact-cta-simple {
        margin: 16px 10px !important;
        padding: 30px 20px !important;
        border-radius: 16px !important;
    }

    .cta-simple-content h3 {
        font-size: 20px !important;
    }

    .cta-simple-content p {
        font-size: 14px !important;
    }

    .cta-icon {
        width: 60px !important;
        height: 60px !important;
    }

    .cta-icon i {
        font-size: 26px !important;
    }

    .cta-simple-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .cta-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 48px !important;
    }

    /* ---------- FOOTER ---------- */
    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .footer-links {
        flex-direction: column !important;
        gap: 24px !important;
        align-items: center !important;
    }

    .footer-bottom-modern {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .footer-contact {
        text-align: center !important;
    }

    .contact-info-footer {
        align-items: center !important;
    }

    .footer-social {
        justify-content: center !important;
        margin-top: 12px !important;
    }

    .footer-brand {
        text-align: center !important;
    }

    /* ---------- SECTION HEADERS ---------- */
    .section-header h2,
    .services-modern-header h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .section-header p,
    .services-modern-header p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* ---------- BUTTONS ---------- */
    .btn {
        min-height: 48px !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* ---------- CARDS TOUCH ---------- */
    .service-modern-card,
    .impact-stat-card,
    .testimonial-modern-card,
    .contact-card-modern,
    .why-choose-item,
    .capability-modern-card,
    .why-contact-item,
    .pest-card {
        -webkit-tap-highlight-color: transparent;
    }

    .service-modern-card:hover,
    .impact-stat-card:hover,
    .testimonial-modern-card:hover,
    .contact-card-modern:hover,
    .why-choose-item:hover,
    .pest-card:hover {
        transform: none !important;
    }

    .service-modern-card:active,
    .pest-card:active {
        transform: scale(0.98) !important;
    }

    /* ---------- FORM NOTIFICATION ---------- */
    .form-notification {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        left: 16px !important;
        right: 16px !important;
        max-width: none !important;
        z-index: 10000 !important;
        border-radius: 14px !important;
        padding: 16px 20px !important;
        font-size: 14px !important;
    }

    /* ---------- WHATSAPP ---------- */
    .whatsapp-float {
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .whatsapp-float::before {
        content: '';
        position: absolute;
        top: -6px;
        right: -6px;
        bottom: -6px;
        left: -6px;
    }

    /* ---------- RTL & TOUCH ---------- */
    body.rtl-mode {
        zoom: 1 !important;
    }

    a, button, .btn, .cta-btn {
        -webkit-tap-highlight-color: transparent;
    }
}


/* ===== PHONE (max-width: 576px) ===== */
@media (max-width: 576px) {

    .container {
        padding: 0 16px !important;
    }

    .nav-wrapper {
        padding: 8px 14px !important;
        margin: 0 8px !important;
    }

    .header.scrolled .nav-wrapper {
        margin: 0 6px !important;
    }

    .logo img {
        height: 42px !important;
        max-width: 125px !important;
    }

    /* --- Hero --- */
    .hero-left h1,
    .agricultural-hero-left h1,
    .pest-control-hero-left h1,
    .logistics-hero-left h1,
    .construction-hero-left h1,
    .trading-hero-left h1,
    .ingos-hero-left h1,
    .contact-hero-left h1,
    .about-hero-left h1 {
        font-size: 24px !important;
    }

    /* Services tower compact */
    .services-tower {
        gap: 6px !important;
    }

    .service-card {
        padding: 8px 10px !important;
        height: auto !important;
    }

    .service-card i {
        font-size: 14px !important;
    }

    .service-card span {
        font-size: 11px !important;
    }

    /* Service cards */
    .service-modern-card {
        min-height: auto !important;
    }

    .service-card-img {
        height: 150px !important;
    }

    .service-card-body {
        padding: 18px !important;
    }

    .service-card-body h3 {
        font-size: 16px !important;
    }

    .service-card-body p {
        font-size: 13px !important;
    }

    /* Sections */
    .about-modern {
        padding: 36px 0 !important;
    }

    .services-portfolio {
        margin: 10px 0 !important;
        padding: 36px 16px !important;
        border-radius: 12px !important;
    }

    .cta-modern {
        margin: 10px 8px !important;
        padding: 30px 16px !important;
        border-radius: 14px !important;
    }

    /* Section spacing */
    .agricultural-services-modern,
    .agricultural-impact-section,
    .agricultural-process-section,
    .agricultural-testimonials-section,
    .agricultural-capabilities-section,
    .agricultural-faq-section,
    .agricultural-why-choose-section,
    .agricultural-cta-section,
    .pest-control-services-modern,
    .pest-control-impact-section,
    .pest-control-process-section,
    .pest-control-testimonials-section,
    .pest-control-faq-section,
    .pest-control-why-choose-section,
    .pest-control-cta-section,
    .logistics-services-modern,
    .logistics-impact-section,
    .logistics-process-section,
    .logistics-faq-section,
    .logistics-cta-section,
    .construction-services-modern,
    .construction-impact-section,
    .construction-process-section,
    .construction-faq-section,
    .construction-cta-section,
    .trading-services-modern,
    .trading-impact-section,
    .trading-faq-section,
    .trading-cta-section,
    .ingos-services-modern,
    .ingos-impact-section,
    .ingos-faq-section,
    .ingos-cta-section,
    .about-story-section,
    .about-mission-section,
    .about-stats-section,
    .about-timeline-section,
    .about-team-section,
    .about-why-choose-section,
    .about-cta-section,
    .contact-form-section,
    .contact-cards-section,
    .contact-why-section,
    .contact-cta-section {
        margin: 12px 0 !important;
        padding: 32px 0 !important;
    }

    /* CTA simple blocks */
    .agricultural-cta-simple,
    .pest-control-cta-simple,
    .logistics-cta-simple,
    .construction-cta-simple,
    .trading-cta-simple,
    .ingos-cta-simple,
    .contact-cta-simple {
        margin: 12px 8px !important;
        padding: 26px 16px !important;
        border-radius: 14px !important;
    }

    .cta-simple-content h3 {
        font-size: 19px !important;
    }

    .cta-icon {
        width: 54px !important;
        height: 54px !important;
    }

    .cta-icon i {
        font-size: 24px !important;
    }

    .cta-content h2 {
        font-size: 22px !important;
    }

    /* Impact stats */
    .impact-stats-grid {
        gap: 10px !important;
    }

    .impact-stat-number {
        font-size: 24px !important;
    }

    /* Stats quick grid */
    .stats-quick-grid {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    /* Testimonials */
    .testimonial-modern-card {
        padding: 16px !important;
    }

    .farmer-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .testimonial-quote p {
        font-size: 14px !important;
        padding-left: 12px !important;
    }

    /* Capability cards */
    .capability-modern-card {
        padding: 20px 16px !important;
    }

    /* Section headers */
    .section-header h2,
    .services-modern-header h2 {
        font-size: 22px !important;
    }

    /* About stats bar */
    .about-stats-bar {
        padding: 20px 16px !important;
        gap: 16px !important;
    }

    .about-stat-item .stat-number,
    .about-stat-number {
        font-size: 24px !important;
    }

    .about-stat-item .stat-label {
        font-size: 11px !important;
    }

    /* Timeline */
    .timeline-modern {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .timeline-item {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    /* Buttons */
    .btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }

    /* Contact form */
    .contact-form-modern {
        padding: 24px 16px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        min-height: 48px !important;
    }

    .form-submit .btn {
        width: 100% !important;
    }

    .contact-form-section input,
    .contact-form-section textarea,
    .contact-form-section select {
        font-size: 16px !important;
    }

    .contact-form-section label {
        font-size: 14px !important;
    }

    /* Pest gallery */
    .pests-grid {
        gap: 10px !important;
    }

    .pest-card-img {
        height: 120px !important;
    }

    .pest-card-overlay {
        display: none !important;
    }

    .pest-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .pest-modal-img {
        height: 200px !important;
    }

    .pest-modal-body {
        padding: 20px !important;
    }

    /* Partners */
    .partners {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .partners span {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    /* Phone & actions */
    .phone-display {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .quick-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .action-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
    }

    /* Stats horizontal */
    .stats-horizontal {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    /* Team grid */
    .team-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Footer */
    .footer-main {
        padding: 30px 16px !important;
    }

    .footer-brand img {
        height: 40px !important;
        max-width: 160px !important;
    }

    .footer-brand p {
        font-size: 13px !important;
    }

    .footer-social a {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    .footer-bottom-modern {
        padding: 16px 0 !important;
    }

    .copyright {
        font-size: 12px !important;
    }

    /* Whatsapp */
    .whatsapp-float {
        bottom: 20px !important;
        right: 20px !important;
        width: 52px !important;
        height: 52px !important;
    }

    html[dir="rtl"] .whatsapp-float {
        right: auto !important;
        left: 20px !important;
    }

    /* Map */
    .map-container {
        height: 260px !important;
    }

    .map-section {
        margin: 0 !important;
        padding: 30px 0 !important;
    }

    /* iOS zoom prevention */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    html {
        -webkit-overflow-scrolling: touch;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}


/* ===== SMALL PHONE (max-width: 480px) ===== */
@media (max-width: 480px) {

    .container {
        padding: 0 14px !important;
    }

    .nav-wrapper {
        margin: 0 6px !important;
        padding: 8px 12px !important;
        border-radius: 16px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .logo img {
        height: 38px !important;
        max-width: 110px !important;
    }

    .header-actions {
        gap: 6px !important;
    }

    .contact-quick span {
        display: inline !important;
    }

    .lang-btn {
        font-size: 11px !important;
        padding: 5px 10px !important;
        min-height: 36px !important;
    }

    .theme-btn {
        width: 36px !important;
        height: 18px !important;
    }

    /* Mobile menu adjustment */
    .nav-menu.active {
        top: 70px !important;
        bottom: 0 !important;
        max-height: none !important;
        padding: 12px 16px 24px !important;
    }

    .nav-menu.active > li > a {
        padding: 14px 16px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }

    .nav-menu.active .dropdown-menu li a {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    /* Hero */
    .hero {
        padding: 90px 0 20px !important;
    }

    .agricultural-hero,
    .pest-control-hero,
    .logistics-hero,
    .construction-hero,
    .trading-hero,
    .ingos-hero,
    .contact-hero,
    .about-hero {
        padding: 40px 0 20px !important;
        margin-top: 60px !important;
    }

    .hero-left h1,
    .agricultural-hero-left h1,
    .pest-control-hero-left h1,
    .logistics-hero-left h1,
    .construction-hero-left h1,
    .trading-hero-left h1,
    .ingos-hero-left h1,
    .contact-hero-left h1,
    .about-hero-left h1 {
        font-size: 22px !important;
    }

    .hero-badge,
    .agricultural-badge-modern,
    .pest-control-badge-modern,
    .logistics-badge-modern,
    .construction-badge-modern,
    .trading-badge-modern,
    .ingos-badge-modern,
    .contact-badge-modern,
    .about-badge-modern {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }

    /* Services tower */
    .services-tower {
        gap: 5px !important;
    }

    .service-card {
        padding: 6px 8px !important;
        border-radius: 10px !important;
    }

    .service-card i {
        font-size: 12px !important;
    }

    .service-card span {
        font-size: 10px !important;
    }

    .unified-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    /* Service cards */
    .service-modern-card {
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }

    .service-modern-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 12px !important;
    }

    .service-modern-icon i {
        font-size: 18px !important;
    }

    .service-modern-card h3 {
        font-size: 16px !important;
    }

    .service-modern-card p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .service-card-img {
        height: 140px !important;
    }

    /* Impact stats */
    .impact-stat-card {
        padding: 16px 10px !important;
        border-radius: 12px !important;
    }

    .impact-stat-number {
        font-size: 22px !important;
    }

    .impact-stat-label {
        font-size: 10px !important;
    }

    /* Process */
    .process-step {
        padding: 14px !important;
        gap: 10px !important;
    }

    .step-number {
        width: 40px !important;
        height: 40px !important;
        font-size: 15px !important;
    }

    .process-step h4 {
        font-size: 14px !important;
    }

    .process-step p {
        font-size: 12px !important;
    }

    /* FAQ */
    .faq-question {
        padding: 16px 14px !important;
    }

    .faq-question h4 {
        font-size: 14px !important;
        padding-right: 28px !important;
    }

    .faq-answer p {
        font-size: 13px !important;
    }

    /* Quick stats */
    .quick-stat .stat-value {
        font-size: 18px !important;
    }

    .quick-stat .stat-name,
    .stat-name {
        font-size: 10px !important;
    }

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

    /* Page header */
    .page-header {
        padding: 100px 0 35px !important;
    }

    .page-header h1 {
        font-size: 24px !important;
    }

    .page-header p {
        font-size: 15px !important;
    }

    /* Section headers */
    .section-header h2,
    .services-modern-header h2 {
        font-size: 20px !important;
    }

    .pest-control-services-header h2,
    .agricultural-services-header h2,
    .logistics-services-header h2,
    .construction-services-header h2,
    .trading-services-header h2,
    .ingos-services-header h2,
    .contact-form-header h2 {
        font-size: 22px !important;
    }

    /* Services preview */
    .services-preview-list {
        gap: 8px !important;
    }

    .service-preview-item {
        font-size: 13px !important;
    }

    /* Achievements */
    .achievements-list span {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    /* Icon wrappers */
    .icon-wrapper {
        width: 50px !important;
        height: 50px !important;
    }

    .icon-wrapper i {
        font-size: 22px !important;
    }

    /* Card icon wrapper */
    .card-icon-wrapper {
        width: 55px !important;
        height: 55px !important;
    }

    .card-icon-wrapper i {
        font-size: 22px !important;
    }

    /* Contact cards */
    .contact-card-modern {
        padding: 22px 16px !important;
    }

    /* Info cards */
    .info-card-item {
        padding: 12px 8px !important;
    }

    .info-icon {
        width: 35px !important;
        height: 35px !important;
    }

    .info-details .info-label {
        font-size: 11px !important;
    }

    .info-details .info-value {
        font-size: 13px !important;
    }

    /* Hours */
    .hours-item {
        padding: 10px !important;
    }

    .hours-item .day,
    .hours-item .time {
        font-size: 13px !important;
    }

    .response-badge {
        padding: 10px 12px !important;
    }

    .response-badge span {
        font-size: 12px !important;
    }

    /* CTA */
    .cta-icon {
        width: 50px !important;
        height: 50px !important;
    }

    .cta-icon i {
        font-size: 22px !important;
    }

    .cta-simple-content h3 {
        font-size: 18px !important;
    }

    .cta-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* Pest modal */
    .pest-modal-body h2 {
        font-size: 20px !important;
    }

    .pest-modal-img {
        height: 180px !important;
    }

    .pest-modal-body {
        padding: 16px !important;
    }

    /* Social links */
    .social-links-cta {
        flex-wrap: wrap !important;
    }

    .social-links-cta a {
        width: 42px !important;
        height: 42px !important;
    }

    /* Footer */
    .footer-main {
        padding: 24px 14px !important;
        gap: 22px !important;
    }

    .footer-brand img {
        height: 36px !important;
        max-width: 140px !important;
    }

    .links-column h4 {
        font-size: 15px !important;
    }

    .links-column ul li a {
        font-size: 13px !important;
        padding: 6px 0 !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .contact-item-footer {
        font-size: 12px !important;
    }

    .footer-langs {
        gap: 6px !important;
        justify-content: center !important;
    }

    .footer-lang {
        font-size: 12px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .footer-social a {
        width: 42px !important;
        height: 42px !important;
    }

    /* Whatsapp */
    .whatsapp-float {
        bottom: 16px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
    }

    .whatsapp-float i {
        font-size: 22px !important;
    }

    html[dir="rtl"] .whatsapp-float {
        right: auto !important;
        left: 16px !important;
    }

    /* Map */
    .map-container {
        height: 220px !important;
    }
}


/* ===== EXTRA SMALL (max-width: 360px) ===== */
@media (max-width: 360px) {

    .container {
        padding: 0 10px !important;
    }

    .nav-wrapper {
        margin: 0 4px !important;
        padding: 6px 10px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .logo img {
        height: 34px !important;
        max-width: 95px !important;
    }

    .hero-left h1,
    .agricultural-hero-left h1,
    .pest-control-hero-left h1,
    .logistics-hero-left h1,
    .construction-hero-left h1,
    .trading-hero-left h1,
    .ingos-hero-left h1,
    .contact-hero-left h1,
    .about-hero-left h1 {
        font-size: 20px !important;
    }

    .btn {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    .section-header h2,
    .services-modern-header h2 {
        font-size: 18px !important;
    }

    .pest-control-services-header h2,
    .agricultural-services-header h2,
    .logistics-services-header h2,
    .construction-services-header h2,
    .trading-services-header h2,
    .ingos-services-header h2,
    .contact-form-header h2 {
        font-size: 18px !important;
    }

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

    .pests-grid {
        grid-template-columns: 1fr !important;
    }

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

    .footer-social a {
        width: 40px !important;
        height: 40px !important;
    }
}


/* ===== LANDSCAPE PHONE ===== */
@media (max-width: 768px) and (orientation: landscape) {

    .hero,
    .agricultural-hero,
    .pest-control-hero,
    .logistics-hero,
    .construction-hero,
    .trading-hero,
    .ingos-hero,
    .contact-hero,
    .about-hero {
        padding: 35px 0 20px !important;
        min-height: auto !important;
    }

    .nav-menu.active {
        padding-top: 12px !important;
    }

    .hero-main-layout,
    .agricultural-hero-layout,
    .pest-control-hero-layout,
    .logistics-hero-layout,
    .construction-hero-layout,
    .trading-hero-layout,
    .ingos-hero-layout,
    .contact-hero-layout,
    .about-hero-layout {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .impact-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .services-modern-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pests-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ===== SAFE AREA / NOTCH ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .header {
            padding-top: env(safe-area-inset-top) !important;
        }

        .nav-menu.active {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }

        .footer-modern {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }

        .whatsapp-float {
            bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }

        .form-notification {
            bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        }
    }
}


/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .nav-menu.active,
    .nav-menu.active > li,
    .faq-answer {
        animation: none !important;
        transition: none !important;
    }
}


/* =====================================================
   NPC STANDALONE SITE — RESPONSIVE STYLES
   ===================================================== */

/* ===== NPC TABLET (max-width: 1200px) ===== */
@media (max-width: 1200px) {
    .npc-nav-link {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }

    .npc-logo-name {
        font-size: 22px !important;
    }
}

/* ===== NPC TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    /* Top bar - hide extras */
    .npc-topbar-left .npc-topbar-divider:nth-of-type(2),
    .npc-topbar-left span:last-child {
        display: none;
    }

    .npc-topbar {
        font-size: 12px;
    }

    /* Nav becomes mobile hamburger */
    .npc-nav-menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #15412A;
        flex-direction: column;
        padding: 20px;
        gap: 0;
        z-index: 999;
        overflow-y: auto;
        border-top: 2px solid #C43B2E;
    }

    .npc-nav-menu.active {
        display: flex;
    }

    .npc-nav-menu li {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .npc-nav-link {
        display: block;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 0 !important;
    }

    .npc-nav-link:hover,
    .npc-nav-link.active {
        background: rgba(255,255,255,0.05);
    }

    .npc-mobile-menu-btn {
        display: block !important;
    }

    .npc-quote-btn {
        display: none;
    }

    /* Footer */
    .npc-footer-main {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .npc-footer-links {
        grid-template-columns: 1fr 1fr;
    }

    .npc-footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .npc-copyright {
        align-items: center;
    }
}

/* ===== NPC MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* Top bar simplified */
    .npc-topbar {
        padding: 6px 0;
    }

    .npc-topbar-inner {
        flex-direction: row;
        justify-content: space-between;
    }

    .npc-topbar-left {
        flex-wrap: nowrap;
    }

    .npc-topbar-left .npc-topbar-divider,
    .npc-topbar-left span:not(:first-child) {
        display: none;
    }

    /* Header adjustments */
    .npc-nav-wrapper {
        min-height: 60px;
        padding: 0 4px;
    }

    .npc-logo-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
        border-radius: 10px;
    }

    .npc-logo-name {
        font-size: 20px !important;
        letter-spacing: 2px;
    }

    .npc-logo-tagline {
        font-size: 9px;
    }

    .npc-logo {
        gap: 8px;
    }

    .npc-emergency-btn span {
        display: none;
    }

    .npc-emergency-btn {
        width: 38px;
        height: 38px;
        padding: 0 !important;
        justify-content: center;
        border-radius: 50%;
    }

    /* NPC Footer mobile */
    .npc-footer {
        padding-top: 40px;
    }

    .npc-footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .npc-footer-certifications {
        flex-direction: column;
        gap: 8px;
    }

    .npc-footer-cta {
        width: 100%;
        justify-content: center;
    }

    .npc-site .pest-control-hero {
        margin-top: 0 !important;
    }
}

/* ===== NPC SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    /* Top bar phone is redundant with the header call button, so hide the
       left group on small screens to prevent the number wrapping. */
    .npc-topbar-left {
        display: none !important;
    }

    .npc-topbar-inner {
        justify-content: flex-end !important;
    }

    .npc-back-link {
        font-size: 11px;
        white-space: nowrap;
    }

    .npc-topbar-right {
        gap: 8px;
    }

    .npc-topbar-right .lang-btn {
        padding: 3px 8px;
        font-size: 11px;
    }

    .npc-logo-icon {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .npc-logo-name {
        font-size: 18px !important;
    }

    .npc-logo-tagline {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .npc-footer-links {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ===== NPC SAFE AREA ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .npc-topbar {
            padding-top: env(safe-area-inset-top) !important;
        }

        .npc-footer {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }
}