/* ==========================================================================
   PestoKill — UI/UX Refinements
   --------------------------------------------------------------------------
   Purpose : Responsiveness, alignment, spacing, consistency & a11y polish.
   Scope   : Additive overrides ONLY. No redesign, no colour/brand changes.
   Loading : Must be linked LAST, after main.css, on every page.
   Tokens  : Reuses existing :root vars (--theme, --header, --text, etc.).
   Method  : Mobile-first within each concern; matches theme breakpoints
             (1399 / 1199 / 991 / 767 / 575 / 470 / 320).
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL — box model, overflow guard, fluid media
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Kill horizontal scrolling everywhere. Decorative absolute shapes and
   parallax transforms in this theme can push content past the viewport. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.page-wrapper,
#smooth-wrapper,
#smooth-content,
section,
footer {
  max-width: 100%;
}

/* Media should never break the layout or force overflow. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

/* Slider / object-fit images deliberately fill their box — opt them back in. */
.slide img,
.hero-slider img,
.blog-image img,
.project-image img,
.testimonial-img img,
img[style*="object-fit"],
.thumb img[data-speed] {
  height: 100%;
}

/* Decorative background shapes: hidden site-wide for a cleaner, flatter look.
   Covers *-shape, *-bg-shape, shape-*, *-shape-N across all pages/sections. */
[class*="-shape"],
[class*="shape-"],
[class$="shape"],
.service-bg-shape,
.work-shape-1,
.work-shape-2,
.project-bg-shape,
.pricing-shape,
.hero-shape,
.blog-hero-shape,
.service-hero-shape,
.service-cta-shape,
img[src*="-shape"],
img[src*="shape-"] {
  display: none !important;
}

/* ==========================================================================
   2. CONTAINER & SECTION RHYTHM — consistent gutters and vertical spacing
   ========================================================================== */

/* Comfortable, consistent side gutters on phones/tablets. */
@media (max-width: 991px) {
  .container,
  .container-fluid {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 575px) {
  .container,
  .container-fluid {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* Standardise the theme's section rhythm so every block steps down evenly.
   Desktop spacing is left to the theme; we only tame the mid/small ranges. */
@media (max-width: 991px) {
  .section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .section-top-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (max-width: 767px) {
  .section-padding {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .section-top-padding {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (max-width: 575px) {
  .section-padding {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .section-top-padding {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

/* Keep centred section titles balanced on small screens. */
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 8px;
  }
  .section-title br {
    display: none;
  }
}

/* ==========================================================================
   3. TYPOGRAPHY — fluid scaling for readability, hierarchy preserved
   --------------------------------------------------------------------------
   Same fonts/weights as the theme; only the size curve is smoothed so big
   display headings stay readable down to 320px without overflowing.
   ========================================================================== */

@media (max-width: 991px) {
  .blog-hero-title {
    font-size: clamp(30px, 5vw, 44px);
  }
  .head h1 {
    font-size: clamp(28px, 5vw, 40px);
  }
}

@media (max-width: 575px) {
  .section-title h2,
  .title.split-title,
  h1 {
    line-height: 1.2;
  }
  .blog-hero-title {
    font-size: clamp(26px, 7vw, 32px);
  }
  .blog-hero-text {
    font-size: 16px;
  }
}

/* Prevent long unbroken strings (emails, URLs, phone numbers) overflowing. */
p,
li,
a,
span,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   4. NAVIGATION / HEADER — sticky, logo scaling, mobile bar, offcanvas
   ========================================================================== */

/* Logo scales down gracefully instead of dominating small bars. */
.header-logo img,
.offcanvas__logo img,
.footer-logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 575px) {
  .header-logo img,
  .offcanvas__logo img {
    max-height: 40px;
  }
}

/* Comfortable header padding on small screens. */
@media (max-width: 991px) {
  #header-sticky .header-main,
  .header-1 .header-main {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Hamburger / header action icons get proper touch targets (>= 44px). */
.header__hamburger button,
.header-right .sidebar__toggle,
.sidebar-button,
button.navbar-toggler,
.offcanvas__close button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Offcanvas panel: never wider than the screen, comfortable inner spacing. */
.offcanvas__info {
  max-width: 100%;
}

@media (max-width: 575px) {
  .offcanvas__info {
    width: 300px;
    padding: 20px;
  }
  .offcanvas__wrapper {
    padding: 0;
  }
}

/* Mobile dropdown menu items: easier to tap, evenly spaced. */
@media (max-width: 991px) {
  .mean-container .mean-nav ul li a,
  .main-menu nav > ul > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Smooth, consistent submenu reveal animation. */
.main-menu .submenu,
.main-menu ul li .submenu {
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

/* ==========================================================================
   5. HERO SECTION — slider sizing, category grid, callback form
   --------------------------------------------------------------------------
   The slider had a fixed height:570px fighting an aspect-ratio rule, which
   distorted on laptops/tablets. Let aspect-ratio drive height for a clean,
   responsive image area at every width.
   ========================================================================== */

.hero-slider {
  height: auto;
  aspect-ratio: 19 / 11; /* desktop */
  min-height: 0;
}

@media (max-width: 1199px) {
  .hero-slider {
    aspect-ratio: 19 / 11;
  }
}

@media (max-width: 991px) {
  .hero-slider {
    aspect-ratio: 19 / 11;
    min-height: 0;
  }
}

@media (max-width: 575px) {
  .hero-slider {
    aspect-ratio: 19 / 11;
    min-height: 0;
  }
}

/* Category grid: comfortable columns that step down, never cramped at 320px. */
@media (max-width: 767px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 400px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.category-card:hover span {
  color: var(--theme, #ee9a3f);
}

/* About/second section images: tighter corners to match the new radius scale */
.about-thumb-style-1 .thumb,
.about-thumb-style-1 .thumb img,
.about-content-style-2 .thumb,
.about-content-style-2 .thumb img {
  border-radius: 10px;
}

/* Restore a sensible icon size on phones (theme shrinks to 42px at 991). */
@media (max-width: 575px) {
  .category-card img {
    width: 48px;
    height: 48px;
  }
}

/* Callback form: align nicely and give inputs room on small screens. */
@media (max-width: 575px) {
  .callback-form {
    padding: 18px;
    gap: 14px;
  }
}

/* ==========================================================================
   6. CARDS — equal height, consistent padding & radius
   --------------------------------------------------------------------------
   Equalising heights via the column flex so cards in a row line up cleanly.
   ========================================================================== */

.row.g-4 > [class*="col-"],
.row.g-3 > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Make the common card wrappers fill their column for equal heights. */
.work-process-box-items,
.service-box-items,
.blog-card,
.pricing-box-items,
.team-box-items,
.project-box-items,
.choose-box-items,
.feature-box-items {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Push any trailing CTA/button to the bottom for a tidy baseline. */
.work-process-box-items > .theme-btn,
.service-box-items .theme-btn,
.pricing-box-items .theme-btn,
.blog-card .blog-content .theme-btn {
  margin-top: auto;
}

/* Card imagery keeps aspect ratio without stretching. */
.blog-image,
.project-image,
.service-image {
  overflow: hidden;
}

/* Some grids use the bare Bootstrap .card — guard it against overflow only. */
.section-top-padding .card {
  max-width: 100%;
}

/* ==========================================================================
   7. BUTTONS — standardised sizing, focus, disabled, touch targets
   ========================================================================== */

.theme-btn,
.callback-btn,
.book,
.view,
button.theme-btn,
a.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* The instant-booking buttons lacked a defined height. */
.book {
  height: 52px;
  border-radius: 8px;
}

/* Consistent disabled state. */
.theme-btn:disabled,
.callback-btn:disabled,
.book:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Full-width primary CTAs feel better on phones. */
@media (max-width: 575px) {
  .callback-btn,
  .book {
    width: 100%;
  }
}

/* ==========================================================================
   8. FORMS — input heights, label spacing, alignment, mobile width
   ========================================================================== */

.input-group input,
.callback-form input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  max-width: 100%;
}

/* Consistent control height across the booking filters and forms. */
.filters select,
.filters .view {
  height: 52px;
}

textarea {
  min-height: 120px;
}

/* Inputs already 58px in the callback form; keep contact-form inputs aligned. */
@media (max-width: 575px) {
  .input-group input,
  .callback-form input {
    height: 52px;
  }
}

/* Honour iOS: 16px+ font on inputs prevents zoom-on-focus. */
input,
select,
textarea {
  font-size: 16px;
}

/* ==========================================================================
   9. INSTANT BOOKING — keep the fixed agent badge from blocking content
   ========================================================================== */

@media (max-width: 575px) {
  .agent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* ==========================================================================
   10. FOOTER — mobile/tablet stacking, alignment, social/contact spacing
   ========================================================================== */

@media (max-width: 991px) {
  .footer-top-wrapper {
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
    justify-content: center;
  }
  .footer-top-wrapper .social-icon {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .footer-widget-wrapper .single-footer-widget {
    margin-bottom: 8px;
  }
  .footer-bottom-area {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-bottom-area .footer-menu {
    justify-content: center;
  }
}

/* Footer social icons: consistent, tappable circles. */
.footer-section .social-icon a,
.offcanvas__info .social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

/* ==========================================================================
   11. ACCESSIBILITY — visible focus, reduced motion, skip target
   ========================================================================== */

/* Keyboard focus ring (does not affect mouse users via :focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .float-bob-y,
  .float-bob-x {
    animation: none !important;
  }
}

/* ==========================================================================
   12. UTILITY GUARDS — tables, pre/code, and last-element spacing
   ========================================================================== */

table {
  max-width: 100%;
}

pre,
code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Remove stray bottom margin on the final paragraph inside content blocks. */
.section-title p:last-child,
.footer-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   13. MOBILE OVERFLOW FIX + HERO SLIDER POLISH  (Phase-1 patch)
   --------------------------------------------------------------------------
   Root cause of the mobile horizontal scroll: the off-canvas menu
   (.offcanvas__info) is position:fixed and parked OFF the right edge via
   transform:translateX(100%+80px). A fixed element sitting outside the
   viewport adds to the page scroll width, and overflow-x:hidden on <body>
   cannot clip fixed elements. Fix: make its wrapper (.fix-area) a
   full-viewport clipping layer and position the panel ABSOLUTELY inside it,
   so the off-screen portion is clipped. Visual/animation is unchanged.
   ========================================================================== */

.fix-area {
  position: fixed;
  inset: 0;
  overflow: hidden; /* clips the off-screen panel -> no h-scroll */
  pointer-events: none; /* let clicks pass through to the page */
  z-index: 9999999;
}

.offcanvas__info {
  position: absolute; /* was fixed; now clipped by .fix-area */
  pointer-events: auto; /* keep the panel interactive */
}

/* Extra safety net: nothing may create horizontal scroll */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* ---- Hero slider: neat, proportional sizing + comfortable padding ---- */
@media (max-width: 991px) {
  .hero-section.section-padding,
  .hero-1.section-padding {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero-slider {
    height: auto;
    aspect-ratio: 19 / 11;
    min-height: 0;
    border-radius: 10px;
  }
  .hero-right {
    margin-top: 6px;
  }
}
/* (mobile hero-slider ratio is set in the block below) */

@media (max-width: 575px) {
  .hero-slider {
    aspect-ratio: 19 / 11;
    min-height: 0;
    border-radius: 10px;
  }
  /* smaller, inset controls so they don't crowd the edges */
  .hero-slider .slider-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .hero-slider .prev {
    left: 10px;
  }
  .hero-slider .next {
    right: 10px;
  }
  .hero-slider .slider-dots {
    bottom: 10px;
  }

  .callback-form {
    margin-top: 16px;
    padding: 16px;
    border-radius: 10px;
    gap: 12px;
  }
  .pest-categories {
    padding: 16px;
    border-radius: 10px;
  }
  .category-grid {
    gap: 10px;
  }
}

/* ==========================================================================
   14. Remove the custom "magic cursor" (following dot/ring)
   ========================================================================== */
.mouseCursor,
.cursor-outer,
.cursor-inner {
  display: none !important;
}

/* ==========================================================================
   15. Point/feature list icon — SVG spray icon (replaces old leaf image)
   ========================================================================== */
.pd-point-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  vertical-align: -3px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ee9a3f'%3E%3Crect x='7.5' y='9' width='7' height='13' rx='2'/%3E%3Crect x='8.5' y='6' width='5' height='3' rx='1'/%3E%3Crect x='9.5' y='2.5' width='3' height='3.5' rx='1'/%3E%3Ccircle cx='17' cy='3' r='1'/%3E%3Ccircle cx='19.5' cy='5' r='1'/%3E%3Ccircle cx='17' cy='7.2' r='1'/%3E%3C/svg%3E");
}

/* Align icon + text on each point */
.about-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Clear gap in the middle between the two point columns */
.about-content-style-2 .about-list {
  justify-content: flex-start;
  gap: 40px;
}
@media (max-width: 575px) {
  .about-content-style-2 .about-list {
    gap: 20px;
  }
}

/* ==========================================================================
   16. "Why PestoKill" — clean 5-across feature grid (responsive)
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.why-card {
  background: #fff;
  border: 1px solid #eaefe9;
  border-radius: 10px;
  padding: 26px 18px;
  text-align: center;
  height: 100%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(50, 52, 85, 0.1);
}
.why-card .why-ic {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--green-light, #fdf4ec);
  color: var(--theme, #ee9a3f);
  display: grid;
  place-items: center;
  font-size: 24px;
}
.why-card h3 {
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--header, #141414);
}
.why-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text, #54595f);
  margin: 0;
}

/* Responsive: 5 -> 3 -> 2 -> 1, never clumsy */
@media (max-width: 1199px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 420px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Instant Booking — flush top (padding-top 0, bottom stays as-is)
   ============================================================================= */
.pd-flush-top {
  padding-top: 0 !important;
}

/* =============================================================================
   Our Process — wavy 4-step layout with transparent step images
   Same .container width as the rest of the homepage. No branding changes.
   ============================================================================= */
.pd-process {
  position: relative;
  background: #fff;
}
.pd-process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 54px;
}

/* dotted wavy connector weaving through the step circles (desktop only) */
.pd-process-wave {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 0;
  pointer-events: none;
}
.pd-process-wave path {
  fill: none;
  stroke: var(--theme, #ee9a3f);
  stroke-width: 2.5;
  stroke-dasharray: 1 15;
  stroke-linecap: round;
  opacity: 0.55;
}

.pd-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 6px;
}
.pd-step-media {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 50% 38%,
    #ffffff 0%,
    #fdf4ec 68%,
    #fdf4ec 100%
  );
  border: 1px solid #fdf4ec;
  box-shadow: 0 16px 34px rgba(238, 154, 63, 0.14);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.pd-step:hover .pd-step-media {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(238, 154, 63, 0.22);
}
.pd-step-media img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}
.pd-step-num {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--theme, #ee9a3f);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(238, 154, 63, 0.35);
}
.pd-step h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--header, #141414);
  margin: 0 0 10px;
  line-height: 1.3;
}
.pd-step p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text, #54595f);
  margin: 0 auto;
  max-width: 260px;
}

/* CTA below the process */
.pd-process-cta {
  text-align: center;
  margin-top: 56px;
}
.pd-process-cta h4 {
  font-size: 22px;
  font-weight: 800;
  color: var(--header, #141414);
  margin: 0 0 18px;
}

/* ---- desktop: show wavy connector ---- */
@media (min-width: 992px) {
  .pd-process-wave {
    display: block;
  }
}

/* ---- tablet: 2 columns ---- */
@media (max-width: 991px) {
  .pd-process-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 24px;
  }
}

/* ---- mobile: single column with a vertical dotted connector ---- */
@media (max-width: 575px) {
  .pd-process-track {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .pd-process-track::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
      var(--theme, #ee9a3f) 0 4px,
      transparent 4px 14px
    );
    opacity: 0.4;
    z-index: 0;
  }
  .pd-step-media {
    width: 128px;
    height: 128px;
  }
  .pd-step-media img {
    width: 76px;
    height: 76px;
  }
}

/* =============================================================================
   Commercial Services cards (repurposed "Our Project" slider)
   - Smaller, consistent border radius
   - Image + content always visible (better for SEO + a proper card look)
   - Soft gradient overlay for readable white text, subtle hover zoom
   Scoped to .pd-commercial so the base component elsewhere is untouched.
   ============================================================================= */
.pd-commercial .project-thumb-box-items {
  border-radius: 12px;
  overflow: hidden;
  margin-top: 0;
  height: 360px;
}
.pd-commercial .project-thumb-box-items::before {
  display: none; /* remove the hover blur layer */
}
.pd-commercial .project-thumb-box-items::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(22, 23, 38, 0.86) 0%,
    rgba(22, 23, 38, 0.45) 38%,
    rgba(22, 23, 38, 0) 68%
  );
}

/* single image = always visible base (neutralise the reveal-on-hover trick) */
.pd-commercial .project-thumb-box-items img,
.pd-commercial .project-thumb-box-items img:first-child {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  opacity: 1;
  filter: none;
  border-radius: 12px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.pd-commercial .project-thumb-box-items:hover img,
.pd-commercial .project-thumb-box-items:hover img:first-child {
  transform: scale(1.06);
}

/* content + arrow always visible */
.pd-commercial .project-thumb-box-items .hover-content .content {
  opacity: 1;
  visibility: visible;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
}
.pd-commercial .project-thumb-box-items .hover-content .content p {
  color: #fff;
  opacity: 0.9;
  font-size: 13px;
  margin: 0 0 6px;
}
.pd-commercial .project-thumb-box-items .hover-content .content .title {
  font-size: 19px;
  margin-top: 0;
  line-height: 1.35;
}
.pd-commercial .project-thumb-box-items .hover-content .content .title a {
  color: #fff;
}
.pd-commercial .project-thumb-box-items .hover-content .arrow-icon {
  opacity: 1;
  visibility: visible;
  top: 20px;
  right: 20px;
  border-radius: 10px;
  z-index: 3;
}

@media (max-width: 767px) {
  .pd-commercial .project-thumb-box-items {
    height: 340px;
  }
}

/* =============================================================================
   Footer — compact, 5-column, simple on mobile
   Replaces the tall image CTA footer. Brand colours kept. Background set here
   (absolute path) so the same markup works on root and /branches/ pages.
   ============================================================================= */
.pd-footer {
  position: relative;
  color: #c3c6d2;
  background:
    linear-gradient(rgba(24, 25, 42, 0.93), rgba(24, 25, 42, 0.965)),
    url("/assets/img/home-1/footer-bg.webp") center / cover no-repeat;
}
.pd-footer .container {
  position: relative;
  z-index: 1;
}
.pd-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.1fr 1.1fr 1.5fr;
  gap: 34px;
  padding: 60px 0 44px;
}

/* brand column */
.pd-foot-logo {
  display: inline-block;
  background: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  line-height: 0;
}
.pd-foot-logo img {
  height: 44px;
  width: auto;
}
.pd-foot-brand p {
  font-size: 14px;
  line-height: 1.7;
  margin: 16px 0 18px;
  color: #b8bcc9;
  max-width: 320px;
}
.pd-foot-social {
  display: flex;
  gap: 10px;
}
.pd-foot-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.pd-foot-social a:hover {
  background: var(--theme, #ee9a3f);
  transform: translateY(-3px);
}

/* link columns */
.pd-foot-col h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 10px;
}
.pd-foot-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--theme, #ee9a3f);
}
.pd-foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-foot-col ul li {
  margin-bottom: 11px;
}
.pd-foot-col ul li a {
  color: #b8bcc9;
  font-size: 14px;
  text-decoration: none;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.pd-foot-col ul li a:hover {
  color: #fff;
  padding-left: 5px;
}

/* contact column */
.pd-foot-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-foot-contact-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: #b8bcc9;
  line-height: 1.55;
  margin-bottom: 13px;
}
.pd-foot-contact-list li i {
  color: var(--theme, #ee9a3f);
  margin-top: 3px;
  width: 16px;
  text-align: center;
  flex: none;
}
.pd-foot-contact-list a {
  color: #b8bcc9;
  text-decoration: none;
}
.pd-foot-contact-list a:hover {
  color: #fff;
}

/* bottom bar */
.pd-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.pd-footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: #9ea3b2;
}
.pd-footer-bottom p a {
  color: #f6a94a;
  text-decoration: none;
}
.pd-footer-bottom ul {
  list-style: none;
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.pd-footer-bottom ul li a {
  color: #9ea3b2;
  font-size: 13px;
  text-decoration: none;
}
.pd-footer-bottom ul li a:hover {
  color: #fff;
}

/* tablet */
@media (max-width: 991px) {
  .pd-footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding: 50px 0 36px;
  }
  .pd-foot-brand {
    grid-column: 1 / -1;
  }
}

/* mobile: simple footer (header already provides navigation) */
@media (max-width: 575px) {
  .pd-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0 26px;
    text-align: center;
  }
  .pd-foot-brand p {
    max-width: none;
    margin-inline: auto;
  }
  .pd-foot-social {
    justify-content: center;
  }
  .pd-foot-nav {
    display: none; /* hide link columns on mobile — keep it simple */
  }
  .pd-foot-col h3::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .pd-foot-contact-list li {
    justify-content: center;
    text-align: left;
  }
  .pd-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* =============================================================================
   FAQ (homepage) — wider container (>= commercial section) + smaller,
   more compact text. Scoped to .faq-section-inner-2 so other FAQs are untouched.
   ============================================================================= */
.faq-section-inner-2 .container {
  max-width: 1500px;
}
.faq-section-inner-2 .accordion-box .block .acc-btn {
  font-size: 16px;
  line-height: 1.45;
  padding: 18px 22px;
}
.faq-section-inner-2 .accordion-box .block .acc-btn .icon {
  top: 20px;
  font-size: 14px;
}
.faq-section-inner-2 .accordion-box .block .acc-content {
  padding: 2px 22px 20px;
}
.faq-section-inner-2 .accordion-box .block .acc-content .content .text {
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 1399px) {
  .faq-section-inner-2 .accordion-box .block .acc-btn {
    font-size: 16px;
  }
}
@media (max-width: 575px) {
  .faq-section-inner-2 .accordion-box .block .acc-btn {
    font-size: 15px;
    padding: 15px 18px;
  }
  .faq-section-inner-2 .accordion-box .block .acc-btn .icon {
    top: 17px;
  }
  .faq-section-inner-2 .accordion-box .block .acc-content .content .text {
    font-size: 13.5px;
  }
}

/* =============================================================================
   Mobile only (<=767px): show the Instant Booking section first, then the rest.
   Scoped to the homepage (.home-content) so other pages are unaffected.
   The now-first section gets 140px top padding to clear the header.
   ============================================================================= */
@media (max-width: 767px) {
  #smooth-content.home-content {
    display: flex;
    flex-direction: column;
  }
  #smooth-content.home-content > #instant-booking {
    order: -1;
    padding-top: 120px !important;
  }
  #smooth-content.home-content > .pd-footer {
    order: 2; /* keep the footer last */
  }
  /* first section heading: centered with comfortable side padding */
  #instant-booking .head {
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =============================================================================
   Mobile menu (offcanvas + MeanMenu) — light theme using brand colours.
   The default panel is dark (var(--header)) and MeanMenu paints #070337 with
   white uppercase text. This rebuilds it as a clean light menu and makes the
   submenu (Residential / Branches) expand toggles clearly tappable.
   Scoped to <=1199px (where the hamburger/offcanvas is used) — desktop is
   untouched.
   ============================================================================= */
@media (max-width: 1199px) {
  /* --- light panel --- */
  .offcanvas__info {
    background: #ffffff;
    width: min(470px, 90vw);
  }
  .offcanvas__wrapper .offcanvas__close i {
    color: var(--header, #141414);
  }
  .offcanvas__wrapper .offcanvas__close:hover i {
    color: var(--theme, #ee9a3f);
  }
  .offcanvas__wrapper .text,
  .offcanvas__wrapper .off-contact-info .contact-details .sub-info {
    color: #6b7280;
  }
  .offcanvas__wrapper .off-contact-info .info-title,
  .offcanvas__wrapper .off-contact-info .contact-details p,
  .offcanvas__wrapper .off-contact-info .contact-details p a,
  .offcanvas__wrapper .social-icon-list .follow-title {
    color: var(--header, #141414);
  }
  .off-contact-info {
    border-top: 1px solid #eef0ec;
    padding-top: 22px;
  }

  /* --- MeanMenu: light background, dark text --- */
  .mean-container .mean-bar {
    background: transparent;
    padding: 0;
    min-height: 0;
  }
  .mean-container a.meanmenu-reveal {
    display: none !important; /* we open via our own hamburger */
  }
  .mean-container .mean-nav {
    background: transparent;
    margin-top: 0;
  }
  .mean-container .mean-nav > ul {
    border-top: 1px solid #eef0ec;
  }
  .mean-container .mean-nav ul li a {
    color: var(--header, #141414);
    border-top: 1px solid #eef0ec;
    text-transform: none;
    font-size: 15px;
    font-weight: 600;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .mean-container .mean-nav ul li li a {
    color: #54595f;
    font-weight: 500;
    font-size: 14px;
    text-transform: none;
    opacity: 1;
    background: #fafbf8;
  }
  .mean-container .mean-nav ul li a:hover {
    color: var(--theme, #ee9a3f);
  }

  /* --- submenu expand (+/-) toggle: brand-coloured, easy to tap --- */
  .mean-container .mean-nav ul li a.mean-expand {
    top: 3px;
    right: 4px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    padding: 0 !important;
    text-align: center;
    border: none !important;
    border-radius: 8px;
    color: #fff;
    background: var(--theme, #ee9a3f);
    font-size: 18px;
    font-weight: 700;
  }
  .mean-container .mean-nav ul li a.mean-expand:hover {
    background: var(--header, #141414);
    color: #fff;
  }
  /* hide the decorative chevron icons carried over from the desktop nav */
  .mean-container .mean-nav ul li > a > i.fa-chevron-down {
    display: none;
  }
}

/* =============================================================================
   Mobile menu fixes:
   1) The first nav item (Residential = all Services) carries the .menu-thumb
      class, which main.css hides with `display:none !important` below 1199px —
      so the whole Services dropdown vanished on mobile. Re-show it in the clone.
   2) "Follow us" social icons were white on a near-white chip (invisible on the
      new light panel) — give them a visible brand-tinted style.
   ============================================================================= */
@media (max-width: 1199px) {
  .mean-container .mean-nav ul li.menu-thumb {
    display: block !important;
  }
  .mean-container .mean-nav ul li.menu-thumb > a {
    display: block;
    width: 100%;
  }

  .offcanvas__wrapper .social-icon-list .social-icon a {
    background: #fdf4ec;
    color: var(--theme, #ee9a3f);
    border: 1px solid #f3e6d5;
  }
  .offcanvas__wrapper .social-icon-list .social-icon a:hover {
    background: var(--theme, #ee9a3f);
    color: #fff;
    border-color: var(--theme, #ee9a3f);
  }
}

/* =============================================================================
   Preloader — smaller, single-line, perfectly centered on mobile.
   (Default 70px "PEST DOCTOR" is too wide for phones and wraps/overflows.)
   ============================================================================= */
@media (max-width: 767px) {
  .loader {
    font-size: 40px;
    line-height: 1.3;
    white-space: nowrap;
    text-align: center;
  }
}
@media (max-width: 400px) {
  .loader {
    font-size: 32px;
  }
}

/* =============================================================================
   About section — mobile alignment fix.
   main.css leaves `.style-about-one { margin-left:35px }` un-reset on stacked
   layouts, so the block sits indented. Reset it and make everything cleanly
   left-aligned: title, text, the feature points (one stacked column) and CTA.
   ============================================================================= */
@media (max-width: 991px) {
  .about-content-style-2.style-about-one {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .about-content-style-2 {
    text-align: left;
  }
  .about-content-style-2 .about-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: none;
  }
  .about-content-style-2 .about-list ul {
    width: 100%;
    margin: 0;
  }
  .about-content-style-2 .about-list ul li {
    font-size: 16px;
    align-items: flex-start;
    text-align: left;
  }
  .about-content-style-2 .about-list ul li:not(:last-child) {
    margin-bottom: 12px;
  }
  .about-content-style-2 .about-list ul li .pd-point-icon {
    margin-top: 4px;
  }
  .about-content-style-2 .theme-btn {
    margin-top: 24px;
  }
}

/* =============================================================================
   Inner pages (not the homepage): consistent 105px top padding on the first /
   hero section so it clears the fixed header uniformly. Home uses .hero-1 and
   is unaffected.
   ============================================================================= */
.service-hero-modern,
.contact-hero,
.blog-hero,
.terms-hero,
.privacy-hero,
.comm-hero,
.error-hero,
.news-details-section {
  padding-top: 105px !important;
}
.about-hero .container {
  padding-top: 105px !important;
}

/* =============================================================================
   Service pages — on mobile/stacked view, show the booking form immediately
   after the hero (before the long service content). On desktop the form stays
   in its sticky right column. Applies to all service pages via shared classes.
   ============================================================================= */
@media (max-width: 991px) {
  .service-booking-modern .row > .service-booking-col {
    order: -1;
    margin-bottom: 28px;
  }
  .service-booking-sticky {
    position: static !important;
    top: auto !important;
  }
}

/* =============================================================================
   Home About section (mobile only): move the stats counter box to the TOP of
   the image as a horizontal single-line bar (3 stats side by side) instead of
   the tall vertical overlay, which looked cramped on phones.
   ============================================================================= */
@media (max-width: 767px) {
  .about-thumb-style-1 .thumb .counter-list-box {
    top: 16px;
    bottom: auto;
    left: 16px;
    right: 16px;
    padding: 14px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }
  .about-thumb-style-1 .thumb .counter-list-box .counter-items {
    flex: 1;
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
    text-align: center;
  }
  .about-thumb-style-1
    .thumb
    .counter-list-box
    .counter-items:not(:last-child) {
    border-right: 1px solid rgb(219, 219, 219);
  }
  .about-thumb-style-1 .thumb .counter-list-box .counter-items h2 {
    font-size: 20px;
    margin-bottom: 2px;
    line-height: 1.1;
  }
  .about-thumb-style-1 .thumb .counter-list-box .counter-items p {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* =============================================================================
   Scroll lock — applied while the booking popup or the mobile menu is open.
   JS pauses ScrollSmoother; this also hard-stops any native background scroll.
   ============================================================================= */
html.pd-scroll-lock,
html.pd-scroll-lock body {
  overflow: hidden !important;
}

/* =============================================================================
   Thank-you popup (enquiry forms)
   ============================================================================= */
.pd-thanks-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 21, 36, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pd-thanks-overlay.is-open {
  opacity: 1;
}
.pd-thanks-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 14px;
  padding: 30px 24px 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  transform: translateY(14px);
  transition: transform 0.25s ease;
}
.pd-thanks-overlay.is-open .pd-thanks-box {
  transform: none;
}
.pd-thanks-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f1f1f1;
  color: #333;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.pd-thanks-close:hover {
  background: #e4e4e4;
}
.pd-thanks-icon {
  font-size: 56px;
  line-height: 1;
  color: var(--theme, #ee9a3f);
  margin-bottom: 10px;
}
.pd-thanks-box h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--header, #141414);
  margin: 0 0 6px;
}
.pd-thanks-box p {
  font-size: 14px;
  color: var(--text, #54595f);
  margin: 0 0 14px;
  line-height: 1.6;
}
.pd-thanks-ref {
  display: inline-block;
  background: #f4f7ef;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--header, #141414);
  margin-bottom: 16px;
}
.pd-thanks-wa {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}

/* =============================================================================
   About page — Core Values / Operational Excellence / Our Strengths.
   All three columns now use the same vertical .about-value-card stack. Ensure
   the text block can shrink so nothing overflows in the narrow desktop columns.
   ============================================================================= */
.about-values-section .about-value-card > div {
  min-width: 0;
}
.about-values-section .about-value-card h5,
.about-values-section .about-value-card p {
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .about-values-section .about-values-heading {
    margin-top: 8px;
  }
}

/* Commercial services section — soft background provided with the new images */
.pd-commercial {
  background-image: url("/assets/img/home-1/commercial-card-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =============================================================================
   Testimonials — customer photo replaced with a clean user icon avatar.
   ============================================================================= */
.testi-content .client-info .client-img {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  background: var(--green-light, #fdf4ec);
  color: var(--theme, #ee9a3f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: none;
  overflow: hidden;
}

/* =============================================================================
   Service pages (desktop >=992px): the booking card is a narrow right column,
   so stack the Property/Treatment/Plan dropdowns one-by-one (full width of the
   card) instead of cramming them into a row where the text truncates.
   Homepage full-width widget and mobile layout are unaffected.
   ============================================================================= */
@media (min-width: 992px) {
  .service-booking-card .pdb-qb-filters {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}