/* ==========================================================
   Responsive Improvements
   (paste this entire block at the very END of assets/css/custom.css)
========================================================== */

/* ---------- Hero image (moved here from the old inline style —
   desktop values are identical, nothing changes visually) ---------- */
.imgBanner img {
  position: absolute;
  top: 0;
  left: 40%;
  width: 60%;
  height: 765px;
  object-fit: cover;
}
@media (max-width: 1200px) {
    .portfolio-section .slider-btn{top:100%}
}
/* ---------- Mobile menu fixes (all widths ≤1024) ---------- */
@media (max-width: 1024px) {
  /* beats the stray `.main-nav{display:none}` in main.css so the
     slide-in panel can actually appear */
  .main-nav {
    display: block;
  }
  /* prevent background scrolling while the menu is open */
  body.menu-open {
    overflow: hidden;
  }
  /* no accidental horizontal scroll on small screens */
  html {
    overflow-x: hidden;
  }
}

/* ---------- Hero — tablet & mobile ---------- */
@media (max-width: 1024px) {
  .hero-inner {
    height: auto;
    padding: 80px 0 60px;
  }
  .feature-box:first-child{
      border-left:0px;
  }
  /* image becomes a full-bleed backdrop behind the copy */
  .imgBanner img {
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* gradient covers the full hero so text stays readable */
  /* .hero-inner::after {
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      #0d0d0c 0%,
      rgba(13, 13, 12, 0.94) 55%,
      rgba(13, 13, 12, 0.82) 100%
    ); 
  }*/
  .dz-hero-badge {
    display: none;
  }
}
@media (max-width: 480px) {
  .hero-inner {
    padding: 60px 0 50px;
  }
  .hero-features {
    gap: 14px;
  }
}

/* ---------- Process steps — mobile ---------- */
@media (max-width: 1000px) {
  .process-line {
    display: none;
  }
  .process-item .process-icon {
    margin-left: unset;
}
  .process-item {
    flex: 1 1 40%;
    text-align: left;
  }
}
@media (max-width: 480px) {
  .process-item {
    flex: 1 1 100%;
    text-align: left;
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .process-item p br {
    display: none;
  }
}

/* ---------- Estimate calculator ---------- */
/* smooth toggle interaction (form is now clickable) */
.toggle {
  cursor: pointer;
  transition: background 0.3s ease;
  flex-shrink: 0;
}
.toggle:after {
  transition: left 0.3s ease;
}
/* the two select labels previously sized via inline styles */
.estimate-field:has(select) label {
  width: auto;
  min-width: 100px;
  height: 30px;
}

@media (max-width: 1000px) {
  .estimate-options {
    padding: 20px 15px;
  }
  .estimate-field {
    flex: 1 1 28%;
    min-width: 110px;
  }
  .estimate-field label {
    width: auto;
    height: auto;
    margin-bottom: 6px;
  }
  .estimate-field:has(select) {
    flex: 1 1 46%;
  }
  .estimate-field select {
    width: 100%;
  }
  .estimate-box {
    width: 100%;
    margin-top: 10px;
    padding-bottom: 20px;
  }
}
@media (max-width: 600px) {
  .estimate-field:has(select) {
    flex-basis: 100%;
  }
  .estimate-field {
    flex: 1 1 44%;
  }
}

/* ---------- Portfolio filter tabs — mobile ---------- */
@media (max-width: 768px) {
  .portfolio-section .portfolio-tabs {
    gap: 16px 24px;
    font-size: 14px;
  }
  .trusted-inner {
    flex-direction: column;
    text-align: center;
}
.trusted-strip .scrolling-content .logo-item {
    min-width: 150px;
}
}

/* ---------- Pricing tabs — mobile ---------- */
@media (max-width: 600px) {
  .pricing-tabs {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ---------- CTA buttons — small mobile ---------- */
@media (max-width: 480px) {
  .cta-buttons {
    flex-direction: column;
  }
  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Header nav — laptop gap (real bug, verified with headless
   browser testing: at every viewport between the 1024px mobile-menu
   cutoff and the ~1400px point where the header naturally fits, the nav
   links + CTA button don't fit in the available width and push the CTA
   button off-screen, causing horizontal page overflow site-wide) ---------- */
@media (min-width: 1025px) and (max-width: 1366px) {
  .main-nav ul {
    gap: 18px;
  }
  .main-nav a {
    font-size: 13px;
  }
  .header-cta.btn-sm {
    padding: 11px 14px;
    font-size: 12.5px;
  }
}

/* ---------- Testimonial / industries container — laptop overflow (real
   bug: .client-container uses `width: var(--max-width)` (1440px) instead
   of `width: 100%`, so on any viewport narrower than that it forces
   horizontal scroll instead of shrinking) ---------- */
.client-container {
  /* width: 100%; */
}

/* ---------- Estimate calculator — laptop gap (real bug: main.css only
   switches .estimate-wrapper/.estimate-options to a wrapped, stacked
   layout below 1000px. Between 1000px and ~1366px the 250px + 1fr + 260px
   grid plus the un-wrapped row of calculator fields don't fit, forcing
   the estimate box off the right edge of the page. Reusing the same
   stacked layout that already works below 1000px, just at a wider
   threshold.) ---------- */
@media (min-width: 1001px) and (max-width: 1366px) {
  .estimate-wrapper {
    display: block;
  }
  .estimate-options {
    margin-top: 40px;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ---------- Portfolio slider arrows — real overflow bug (verified with
   headless-browser testing). .left/.right in main.css sit at -80px outside
   .portfolio-container, which only works when the viewport is wide enough
   to leave 80px+ of blank margin either side of the (max 1440px) container.
   Below ~1600px there is no such margin, so the arrows land off-canvas and
   force horizontal scroll. Dock them just inside the container edge by
   default; restore the original outside placement once there's room. ---------- */
.portfolio-section .left {
  left: 10px;
}
.portfolio-section .right {
  right: 10px;
}
@media (min-width: 1600px) {
  .portfolio-section .left {
    left: -80px;
  }
  .portfolio-section .right {
    right: -80px;
  }
}