/* ==========================================================================
   Responsive overrides (mobile + web)
   Load this file AFTER assets/sass/style.css
   ========================================================================== */

/* 1) Avoid horizontal scroll on small screens */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Make media fluid by default */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* 2) Header: allow wrapping on mobile/tablet
   Your main CSS forces nowrap under 991px (breaks layout). */
@media (max-width: 991px) {
  .wpo-site-header .row {
    flex-wrap: wrap !important;
  }

  /* Keep logo readable */
  .navbar-brand img {
    max-height: 44px;
    width: auto;
  }

  /* Give a little breathing room */
  .wpo-site-header .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Prevent columns from crushing */
  .figma-header-row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* 3) Hero / slider: ensure centered content on small screens */
@media (max-width: 767px) {
  .hero-slider .slide-inner,
  .hero-slider .hero-inner {
    text-align: center;
    padding: 0 12px;
  }

  .hero-slider .slide-content {
    width: 100%;
  }

  /* Buttons stack nicely */
  .hero-slider .hero-btns,
  .wpo-hero-section-s3 .hero-right-content .hero-btns {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
}

/* 4) About section: remove heavy negative margins on tablet/mobile */
@media (max-width: 991px) {
  .wpo-about-section .about-max .about-wrap .about-items:nth-child(2),
  .wpo-about-section .about-max .about-wrap .about-items:nth-child(3) {
    margin-left: 0 !important;
  }
}

/* 5) Video section: fixed height is too tall for phones */
@media (max-width: 767px) {
  .wpo-video-section .video-image {
    height: 320px; /* was 714px in desktop */
  }
}
@media (max-width: 425px) {
  .wpo-video-section .video-image {
    height: 240px;
  }
}

/* 6) Service section button: ensure it doesn't overflow on very small screens */
@media (max-width: 500px) {
  .wpo-service-section .service-btn {
    max-width: 92%;
  }
}

/* 7) Generic: containers/paddings for small screens */
@media (max-width: 575px) {
  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
}