/* ========== Responsive (all @media extracted) ========== */

/* ===== From agents-portal(1).html ===== */
@media(min-width:900px){.grid3{grid-template-columns:1fr 1fr 1fr}}

/* ===== From pipes(4).html ===== */
@media (max-width:840px){ .menu{display:flex;flex-wrap:wrap;gap:8px} }

@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}

@media (max-width:600px){.grid-3{grid-template-columns:1fr}}

/* ===== From pipes(4).html ===== */
@media (max-width: 900px){ .absoo-footer .grid{grid-template-columns:1fr 1fr} }

@media (max-width: 600px){ .absoo-footer .grid{grid-template-columns:1fr} }

@media (max-width:700px){ .footbar .row{flex-direction:column; text-align:center} }

/* ===== From pipes(4).html ===== */
@media (max-width: 840px){
  .nav .nav-inner{flex-wrap:wrap; gap:10px}
  .brand .logo{width:36px;height:36px;padding:3px}
  .brand h1{font-size:16px}
  .menu{display:flex; flex-wrap:wrap; gap:8px; width:100%}
  .menu a{flex:1 1 calc(50% - 8px); text-align:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px;}
  .right-side{width:100%; display:flex; gap:8px; justify-content:space-between}
  .theme-toggle{margin-right:auto}
  .hero-grid{grid-template-columns:1fr !important; gap:16px}
  .actions{gap:8px}
  .actions .btn, .btn, .cta{width:100%; text-align:center}
  .container{padding-inline:12px}
  section{padding:28px 0}
  .grid-3{grid-template-columns:1fr 1fr !important}
}

@media (max-width: 600px){
  .menu a{flex:1 1 100%}
  .grid, .grid-2, .grid-3{display:grid; grid-template-columns:1fr !important; gap:12px}
  .card{padding:12px}
  h1, h2{font-size:clamp(18px, 6vw, 26px) !important}
  .hero{padding-top:28px !important; padding-bottom:24px !important}
  .pill{font-size:12px; padding:4px 8px}
  .logo{width:32px;height:32px}
  nav ul{flex-wrap:wrap}
  nav a{padding:8px 10px}
  input, select, textarea{font-size:16px} /* avoid iOS zoom */
}

/* ===== From irrigation(4).html ===== */
@media (max-width: 840px){
  .nav .nav-inner{flex-wrap:wrap; gap:10px}
  .brand .logo{width:36px;height:36px;padding:3px}
  .brand h1{font-size:16px}
  .menu{display:flex; flex-wrap:wrap; gap:8px; width:100%}
  .menu a{flex:1 1 calc(50% - 8px); text-align:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px;}
  .right-side{width:100%; display:flex; gap:8px; justify-content:space-between}
  .theme-toggle{margin-right:auto}
  .hero-grid{grid-template-columns:1fr !important; gap:16px}
  .actions{gap:8px}
  .actions .btn, .btn, .cta{width:100%; text-align:center}
  .container{padding-inline:12px}
  section{padding:28px 0}
  .grid-3{grid-template-columns:1fr 1fr !important}
}

@media (max-width: 600px){
  .menu a{flex:1 1 100%}
  .grid, .grid-2, .grid-3{display:grid; grid-template-columns:1fr !important; gap:12px}
  .card{padding:12px}
  h1, h2{font-size:clamp(18px, 6vw, 26px) !important}
  .hero{padding-top:28px !important; padding-bottom:24px !important}
  .pill{font-size:12px; padding:4px 8px}
  .logo{width:32px;height:32px}
  nav ul{flex-wrap:wrap}
  nav a{padding:8px 10px}
  input, select, textarea{font-size:16px} /* avoid iOS zoom */
}

/* ===== From index(8).html ===== */
@media (max-width:840px){ .menu{display:flex;flex-wrap:wrap;gap:8px} }

@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}

@media (max-width:600px){.grid-3{grid-template-columns:1fr}}

/* ===== From index(8).html ===== */
@media (max-width: 840px){
  .nav .nav-inner{flex-wrap:wrap; gap:10px}
  .brand .logo{width:36px;height:36px;padding:3px}
  .brand h1{font-size:16px}
  .menu{display:flex; flex-wrap:wrap; gap:8px; width:100%}
  .menu a{flex:1 1 calc(50% - 8px); text-align:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px;}
  .right-side{width:100%; display:flex; gap:8px; justify-content:space-between}
  .theme-toggle{margin-right:auto}
  .hero-grid{grid-template-columns:1fr !important; gap:16px}
  .actions{gap:8px}
  .actions .btn, .btn, .cta{width:100%; text-align:center}
  .container{padding-inline:12px}
  section{padding:28px 0}
  .grid-3{grid-template-columns:1fr 1fr !important}
}

@media (max-width: 600px){
  .menu a{flex:1 1 100%}
  .grid, .grid-2, .grid-3{display:grid; grid-template-columns:1fr !important; gap:12px}
  .card{padding:12px}
  h1, h2{font-size:clamp(18px, 6vw, 26px) !important}
  .hero{padding-top:28px !important; padding-bottom:24px !important}
  .pill{font-size:12px; padding:4px 8px}
  .logo{width:32px;height:32px}
  nav ul{flex-wrap:wrap}
  nav a{padding:8px 10px}
  input, select, textarea{font-size:16px} /* avoid iOS zoom */
}

/* ===== From index(8).html ===== */
@media (max-width: 700px){
    #faq h3{ font-size:20px; }
    #faq .accordion-header{ font-size:16px; }
  }

/* ===== From index(8).html ===== */
@media (max-width:900px){#contact .contact-grid{grid-template-columns:1fr}}

/* ===== From index(8).html ===== */
@media (max-width: 900px){ .absoo-footer .grid{grid-template-columns:1fr 1fr} }

@media (max-width: 600px){ .absoo-footer .grid{grid-template-columns:1fr} }

@media (max-width:700px){ .footbar .row{flex-direction:column; text-align:center} }

/* ===== From estakhr(4).html ===== */
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ===== From estakhr(4).html ===== */
@media (max-width: 840px){
  .nav .nav-inner{flex-wrap:wrap; gap:10px}
  .brand .logo{width:36px;height:36px;padding:3px}
  .brand h1{font-size:16px}
  .menu{display:flex; flex-wrap:wrap; gap:8px; width:100%}
  .menu a{flex:1 1 calc(50% - 8px); text-align:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px;}
  .right-side{width:100%; display:flex; gap:8px; justify-content:space-between}
  .theme-toggle{margin-right:auto}
  .hero-grid{grid-template-columns:1fr !important; gap:16px}
  .actions{gap:8px}
  .actions .btn, .btn, .cta{width:100%; text-align:center}
  .container{padding-inline:12px}
  section{padding:28px 0}
  .grid-3{grid-template-columns:1fr 1fr !important}
}

@media (max-width: 600px){
  .menu a{flex:1 1 100%}
  .grid, .grid-2, .grid-3{display:grid; grid-template-columns:1fr !important; gap:12px}
  .card{padding:12px}
  h1, h2{font-size:clamp(18px, 6vw, 26px) !important}
  .hero{padding-top:28px !important; padding-bottom:24px !important}
  .pill{font-size:12px; padding:4px 8px}
  .logo{width:32px;height:32px}
  nav ul{flex-wrap:wrap}
  nav a{padding:8px 10px}
  input, select, textarea{font-size:16px} /* avoid iOS zoom */
}

/* ===== From estakhr(4).html ===== */
@media (max-width: 900px){ .absoo-footer .grid{grid-template-columns:1fr 1fr} }

@media (max-width: 600px){ .absoo-footer .grid{grid-template-columns:1fr} }

@media (max-width:700px){ .footbar .row{flex-direction:column; text-align:center} }

/* ===== From dealers(4).html ===== */
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

@media (max-width: 840px){
      .nav .nav-inner{flex-wrap:wrap; gap:10px}
      .brand .logo{width:36px;height:36px;padding:3px}
      .brand h1{font-size:16px}
      .menu{display:flex; flex-wrap:wrap; gap:8px; width:100%}
      .menu a{flex:1 1 calc(50% - 8px); text-align:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px}
      .right-side{width:100%; display:flex; gap:8px; justify-content:space-between}
      .theme-toggle{margin-right:auto}
      .hero-grid{grid-template-columns:1fr !important; gap:16px}
      .actions{gap:8px}
      .actions .btn, .btn, .cta{width:100%; text-align:center}
      .container{padding-inline:12px}
      section{padding:28px 0}
      .grid-3{grid-template-columns:1fr 1fr !important}
    }

@media (max-width: 600px){
      .menu a{flex:1 1 100%}
      .grid, .grid-2, .grid-3{display:grid; grid-template-columns:1fr !important; gap:12px}
      .card{padding:12px}
      h1, h2{font-size:clamp(18px, 6vw, 26px) !important}
      .hero{padding-top:28px !important; padding-bottom:24px !important}
      .pill{font-size:12px; padding:4px 8px}
      .logo{width:32px;height:32px}
      nav ul{flex-wrap:wrap}
      nav a{padding:8px 10px}
      input, select, textarea{font-size:16px}
      img{max-width:100%; height:auto}
      .table{display:block; width:100%; overflow-x:auto}
    }

@media (max-width: 900px){ .absoo-footer .grid{grid-template-columns:1fr 1fr} }

@media (max-width: 600px){ .absoo-footer .grid{grid-template-columns:1fr} }

@media (max-width:700px){ .footbar .row{flex-direction:column; text-align:center} }