/* Minimal responsive corrections. Loaded last so it only patches overflow
   issues on small screens; desktop layout is untouched. */

@media (max-width: 991px) {
  /* Booking/contact section container carries a negative right margin from the
     legacy theme, which pushes it past the viewport on tablets. */
  .contact-section > .container {
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  /* Keep wide legacy tables and embeds inside the viewport. */
  img,
  iframe,
  table {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------
   /about-us.php only. The legacy theme leaves two layout defects on
   this page: inactive Bootstrap tab panes still occupy space (a tall
   blank block under "WHY Eco-Friendly Pests Control?") and the
   "Know More About Us" icon blocks rely on floats, so short blocks
   leave a gap under the icon and the columns fall out of alignment.
   --------------------------------------------------------------- */

.page-about-us .tab-content > .tab-pane {
  display: none;
}

.page-about-us .tab-content > .tab-pane.active {
  display: block;
}

.page-about-us .tab-content {
  padding-bottom: 0;
}

.page-about-us .section-3.section-dark .page-services {
  padding-bottom: 10px;
}

/* Keep the floated icon inside its block so short entries do not spill
   into the row below, and give every block the same baseline height so
   the two columns stay aligned. */
.page-about-us .text-careers p {
  overflow: hidden;
  min-height: 134px;
}

.page-about-us .text-careers .whoweare-icon {
  max-width: 134px;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .page-about-us .text-careers p {
    min-height: 0;
  }

  .page-about-us .text-careers .whoweare-icon {
    max-width: 84px;
  }
}

/* ---------------------------------------------------------------
   Home page client logos. One horizontal row that auto-scrolls
   right to left in a seamless loop (the track holds two identical
   sets of logos, so translating by -50% repeats perfectly).
   --------------------------------------------------------------- */

.customer-logos {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  padding-bottom: 8px;
}

.customer-logos .logo-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 32px;
  width: max-content !important;
  animation: clogo-marquee 40s linear infinite;
}

.customer-logos:hover .logo-track {
  animation-play-state: paused;
}

.customer-logos .slide {
  flex: 0 0 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  height: 150px !important;
  float: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}

.customer-logos .clogo_dez {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.customer-logos .clogo_dez:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(30, 138, 10, 0.35);
}

@keyframes clogo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* half the track (one full set) plus the gap that follows it */
    transform: translateX(calc(-50% - 16px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-logos .logo-track {
    animation: none;
  }
  .customer-logos {
    overflow-x: auto !important;
  }
}