/* ============================================================
   overrides.css  -  Dream Cleen homepage custom overrides
   ------------------------------------------------------------
   Loaded LAST in <head>, after vendor.min.css, style.css and
   custom.css, so every rule in this file wins.
   Each block below is numbered and labelled with the feature
   it controls. In normal use you only need to edit the values
   marked with  <<<  .
   ============================================================ */


/* ------------------------------------------------------------
   [1] HERO SLIDER - NO BLUR + MOBILE LAYOUT
   ------------------------------------------------------------
   No blur is applied to the slider at any screen size.
   NOTE: the theme (functions.js) deletes each slide image tag on page
   load and paints the photo as a CSS background on the .slide itself,
   so the old blur dial that lived here (aimed at the image tag) never
   had any effect. The rules below guarantee no filter or backdrop
   blur on the slides or their dark overlays.

   Softness on phones is image STRETCHING, not blur: the theme made
   each mobile slide 120-140% of the screen height, so wide photos were
   blown up to fill it. On phones the slide is now one screen tall
   (photos stay sharper) and the text sits near the top.
   ------------------------------------------------------------ */
.slider-1 .slide,
.slider-1 .slide::before,
.slider-1 .slide::after {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media screen and (max-width: 991.98px) {
  .slider.slider-1 .slide {
    height: 100vh;              /* <<< mobile slide height (theme had 120-140vh) */
    min-height: 620px;
    align-items: flex-start;    /* text near the top instead of the middle */
  }
  .slider.slider-1 .slide .slide-content {
    padding-top: 50px;          /* <<< space above the slide text on mobile */
    margin-top: 0;
  }
}


/* ------------------------------------------------------------
   [2] "SPECIALIST DISINFECTION" CAROUSEL - EQUAL-HEIGHT BOXES
   ------------------------------------------------------------
   Makes every service box in the services-2 carousel the SAME
   height as the tallest box currently in view, no matter how
   much (or how little) text each one has. The card image stays
   pinned to the bottom of every card.
   No values to tweak here - it just needs to be present.
   ------------------------------------------------------------ */
.services-2 .owl-carousel .owl-stage {
  display: flex;              /* let the row stretch its items */
}
.services-2 .owl-carousel .owl-item {
  display: flex;
  height: auto;               /* override owl's fixed per-item height */
}
.services-2 .owl-carousel .owl-item > div {
  display: flex;
  width: 100%;
}
.services-2 .service-panel {
  display: flex;
  flex-direction: column;
  height: 100%;               /* fill the stretched item = equal heights */
  width: 100%;
}
.services-2 .service-panel .service-content {
  flex: 1 1 auto;             /* text area grows so images line up at the bottom */
}


/* ------------------------------------------------------------
   [3] SERVICE CARD PRICE LINE - "Our Services" grid
   ------------------------------------------------------------
   The price shown on each card in the "Explore All Our Exterior
   Cleaning Services" grid.
   ------------------------------------------------------------ */
.service-price {
  margin: 0 0 14px;
  font-weight: 700;
  color: #063464;             /* <<< price text colour */
  font-size: 15px;
}


/* ------------------------------------------------------------
   [4] CUSTOMER TESTIMONIALS - "What our clients say"
   ------------------------------------------------------------
   Styling for the real Google-review cards + equal-height fix
   for the testimonials carousel.
   ------------------------------------------------------------ */
.testimonial-card {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(6, 52, 100, .08);
  display: flex;
  flex-direction: column;
}
.testimonial-stars {
  color: #f5a623;             /* <<< star colour */
  margin-bottom: 14px;
}
.testimonial-text {
  flex: 1 1 auto;             /* grows so author lines sit at the bottom */
  font-style: italic;
  color: #555;
  margin-bottom: 18px;
}
.testimonial-author { font-weight: 700; color: #063464; }
.testimonial-source { font-size: 13px; color: #888; }
.testimonials-section .owl-carousel .owl-stage { display: flex; }
.testimonials-section .owl-carousel .owl-item { display: flex; height: auto; }
.testimonials-section .owl-carousel .owl-item > div { display: flex; width: 100%; }


/* ------------------------------------------------------------
   [5] ABOUT - "trusted team" TICK BULLETS
   ------------------------------------------------------------
   The 4 tick bullets under "North London's Trusted Team".
   They use .advantages-list, which the theme only styles inside
   the offer cards, so here they need their own spacing + sizing.
   Scoped to .about-1 so the offer-card lists are untouched.
   ------------------------------------------------------------ */
.about-1 .advantages-list {
  list-style: none;
  margin: 6px 0 26px;
  padding: 0;
}
.about-1 .advantages-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;                  /* <<< space between the tick and the text */
  margin-bottom: 12px;        /* <<< vertical gap between each bullet */
  font-size: 16px;            /* matches the description paragraph */
  line-height: 27px;          /* matches the description paragraph */
  color: var(--global--color-body, #555);
}
.about-1 .advantages-list li i {
  flex: 0 0 auto;
  margin-top: 5px;            /* nudges the tick to line up with the text */
  color: var(--global--color-primary, #063464);  /* <<< tick colour */
  font-size: 15px;
}


/* ------------------------------------------------------------
   [6] DISINFECTION CAROUSEL - "Custom Plans..." NOTE SPACING
   ------------------------------------------------------------
   Adds breathing room above the "Custom Plans For A Clean And
   Healthy Environment" line so it isn't squashed against the
   service boxes above it.
   ------------------------------------------------------------ */
.services-2 .processes-note {
  margin-top: 30px;           /* <<< space above the note */
}


/* ------------------------------------------------------------
   [7] "EXPLORE OUR SERVICES" GRID - PHOTOS INSTEAD OF ICONS
   ------------------------------------------------------------
   Cards whose icon box has the extra class .service-icon-img
   show a photo (the jpgs in new/assets/images/services) in place of
   the flaticon icon. Cards without that class keep their icon.
   The original icon markup is saved in Claude's project memory
   (dreamcleen-services-grid-icons) for switching back.
   ------------------------------------------------------------ */
.services-3 .service-icon-img::before {
  display: none;              /* hide the theme's decorative shape behind icons */
}
.services-3 .service-icon-img img {
  display: block;
  width: 100%;
  height: 200px;              /* <<< photo height */
  object-fit: cover;          /* crops to fill the box without stretching */
  border-radius: 6px;         /* <<< corner rounding (0 = square) */
}


/* ------------------------------------------------------------
   [8] LEGAL / INFO PAGES - Terms, Privacy Policy, Sitemap
   ------------------------------------------------------------
   Readable text layout for the body of terms-and-conditions.html,
   privacy-policy.html and sitemap.html (section.legal-content).
   ------------------------------------------------------------ */
.legal-content {
  padding: 70px 0 90px;       /* <<< space above/below the page text */
}
.legal-content h2 {
  font-size: 22px;            /* <<< section heading size */
  margin: 36px 0 14px;
}
.legal-content p,
.legal-content li {
  font-size: 16px;
  line-height: 27px;          /* matches the homepage description text */
}
.legal-content ul {
  padding-left: 20px;
  margin-bottom: 18px;
}
.legal-content li {
  margin-bottom: 8px;
}
.legal-content .legal-updated {
  font-style: italic;
  color: #888;
}


/* ------------------------------------------------------------
   [9] QUOTE FORMS + THANK-YOU POPUP (Web3Forms)
   ------------------------------------------------------------
   Styles for the enquiry forms on index.html (#contact-1) and
   contact.html, and the centred popup shown after sending.
   The form logic lives in assets/js/enquiry-form.js.
   ------------------------------------------------------------ */
.enquiry-form .form-note {
  font-size: 14px;
  line-height: 22px;
  margin: 4px 0 18px;
}
.enquiry-form textarea.form-control {
  height: auto;               /* let rows="4" set the height */
  min-height: 110px;
  padding-top: 14px;
}
.thanks-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;             /* above the sticky header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 52, 100, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.thanks-modal.show { opacity: 1; visibility: visible; }
.thanks-card {
  background: #fff;
  border-radius: 12px;
  padding: 44px 36px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  transform: translateY(18px) scale(.94);
  transition: transform .4s ease;
}
.thanks-modal.show .thanks-card { transform: none; }
.thanks-icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--global--color-primary, #063464);  /* <<< success circle colour */
  color: #fff;
}
.thanks-icon svg { width: 40px; height: 40px; }
.thanks-card.is-error .thanks-icon { background: #c0392b; }  /* <<< error circle colour */
.thanks-modal.show .thanks-icon { animation: thanksPop .5s ease .1s both; }
@keyframes thanksPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.thanks-card h3 { font-size: 26px; margin-bottom: 12px; }
.thanks-msg { margin-bottom: 26px; font-size: 16px; line-height: 1.55; }
.thanks-close {
  min-width: 150px;
  display: inline-flex;       /* theme .btn is display:flex (full-width block); this lets it centre */
  margin-left: auto;
  margin-right: auto;
}


/* ------------------------------------------------------------
   [10] CONTACT PAGE - REVIEWER INITIALS
   ------------------------------------------------------------
   The "Satisfied Customers" thumbnails show initials instead of
   the theme's stock face photos (they are real Google reviewers,
   so a stranger's face would misrepresent them).
   ------------------------------------------------------------ */
.testimonial-thumb .thumb-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--global--color-primary, #063464);  /* <<< circle colour */
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
}


/* ------------------------------------------------------------
   [11] ABOUT PAGE - "OUR MISSION" ICON
   ------------------------------------------------------------
   The template's CTA image was a COVID virus/gas-mask graphic,
   so about.html shows an icon-font icon in a circle instead.
   ------------------------------------------------------------ */
.cta .cta-icon.cta-icon-font {
  width: 110px;               /* <<< circle size */
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 52, 100, .08);   /* <<< circle colour */
}
.cta .cta-icon.cta-icon-font i {
  font-size: 54px;            /* <<< icon size */
  line-height: 1;
  color: var(--global--color-primary, #063464);
}


/* ------------------------------------------------------------
   [12] GALLERY PAGE - GRID FADE-IN + LIGHTBOX
   ------------------------------------------------------------
   gallery.html keeps the theme's grid and green eye-icon hover,
   but replaces the theme lightbox with assets/js/gallery-lightbox.js:
   tiles fade up as they load, and the lightbox cross-fades between
   images with large, clean arrows.
   ------------------------------------------------------------ */

/* tiles fade up as they load / scroll into view */
.gallery-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease-in-out;
}
.gallery-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.projects-gallery .project-panel .project-img {
  overflow: hidden;
  border-radius: 4px;
  background: #eef2f6;          /* placeholder colour while a photo loads */
}
.projects-gallery .project-panel .project-img img {
  transition: transform .6s ease;
}
.projects-gallery .project-panel:hover .project-img img {
  transform: scale(1.04);       /* <<< gentle zoom on hover (1 = off) */
}

/* lightbox overlay */
html.dc-lb-open { overflow: hidden; }
.dc-lb {
  position: fixed;
  inset: 0;
  z-index: 10000;               /* above the sticky header */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 90px 40px;
  background: rgba(4, 22, 44, .94);   /* <<< backdrop colour */
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.dc-lb.is-open { opacity: 1; visibility: visible; }
.dc-lb__stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-lb__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateX(var(--dc-shift, 0px)) scale(.98);
  transition: opacity .32s ease, transform .4s ease;   /* <<< slide cross-fade speed */
}
.dc-lb__img.is-in { opacity: 1; transform: none; }
.dc-lb__caption {
  margin: 18px 0 0;
  color: #fff;
  font-size: 16px;
  text-align: center;
  min-height: 24px;
}
.dc-lb__count {
  position: absolute;
  top: 26px;
  left: 30px;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  letter-spacing: .08em;
}

/* round buttons: close + arrows */
.dc-lb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;                  /* <<< arrow button size */
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.dc-lb__btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dc-lb__btn:hover,
.dc-lb__btn:focus-visible {
  background: var(--global--color-primary-alt, #9bcb3b);   /* theme green, same as the hover icon */
  border-color: var(--global--color-primary-alt, #9bcb3b);
  outline: none;
}
.dc-lb__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.dc-lb__next { right: 22px; top: 50%; transform: translateY(-50%); }
.dc-lb__prev:hover { transform: translateY(-50%) translateX(-3px); }
.dc-lb__next:hover { transform: translateY(-50%) translateX(3px); }
.dc-lb__close { top: 16px; right: 22px; width: 48px; height: 48px; }

/* loading spinner (only shows if an image is slow) */
.dc-lb__spinner {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: var(--global--color-primary-alt, #9bcb3b);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s ease .25s;
  animation: dcSpin .8s linear infinite;
}
.dc-lb.is-loading .dc-lb__spinner { opacity: 1; }
@keyframes dcSpin { to { transform: rotate(360deg); } }

/* phones: arrows sit at the bottom so they never cover the photo */
@media (max-width: 767.98px) {
  .dc-lb { padding: 64px 14px 96px; }
  .dc-lb__prev, .dc-lb__next { top: auto; bottom: 22px; transform: none; }
  .dc-lb__prev { left: calc(50% - 70px); }
  .dc-lb__next { right: calc(50% - 70px); }
  .dc-lb__prev:hover, .dc-lb__next:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-reveal, .dc-lb, .dc-lb__img, .projects-gallery .project-panel .project-img img { transition: none; }
}


/* ------------------------------------------------------------
   [13] "5.0" GOOGLE RATING BADGE + HOMEPAGE TRUCK PHOTO
   ------------------------------------------------------------
   The white circle on the About photo (index.html and about.html).
   Replaces the theme's heading / link / "199 / reviews" fragments
   with one clean stack: big score, gold stars, review count and a
   small "Read reviews" link. The whole circle links to Google Maps.
   ------------------------------------------------------------ */
.about .about-img-holder .about-img .offer-banner.rating-badge .banner-body {
  padding: 18px;
  gap: 2px;
  text-decoration: none;
  transition: border-color .3s ease;
}
.about .about-img-holder .about-img .offer-banner.rating-badge .banner-body:hover {
  border-color: var(--global--color-primary-alt, #9bcb3b);
}
.rating-badge .rb-score {
  font-family: var(--global--font-heading);
  font-weight: 700;
  font-size: 50px;            /* <<< score size */
  line-height: 1;
  color: #063464;             /* <<< score colour (theme navy) */
}
.rating-badge .rb-stars {
  color: #f5a623;             /* <<< star colour */
  font-size: 15px;
  letter-spacing: 3px;
  margin: 8px 0 6px;
}
.rating-badge .rb-count {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #5b6573;
}
.rating-badge .rb-link {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--global--color-primary-alt, #9bcb3b);
}
.rating-badge .rb-link i {
  display: inline-block;
  font-size: 9px;
  margin-left: 4px;
  transition: transform .2s ease;
}
.rating-badge .banner-body:hover .rb-link i { transform: translateX(3px); }

/* the wide truck photo sits in the theme's tall 600px frame:
   this picks which part shows. 0% = left edge (cab and DREAMCLEEN
   door), 100% = right edge (the bin being washed). */
.about .about-img-holder .about-img img.about-img-truck {
  object-position: 30% 50%;   /* <<< crop focus */
}


/* ------------------------------------------------------------
   [14] MOBILE FIXES - logo, slider arrows, feature panels,
        service-card fade-in, About page photo
   ------------------------------------------------------------ */

/* Logo: keep the Dream Cleen logo's real proportions (theme forced 160x60) */
.header .navbar-brand .logo {
  object-fit: contain;
}
/* Phones/tablets: show the full DREAM CLEEN logo instead of the
   template's square icon. (Laptops 1200-1440px still use the square
   Dream Cleen shield icon, logo/dream-cleen-icon.png, in the narrow slot.) */
@media screen and (max-width: 991.98px) {
  .header.header-light .navbar .logo-dark {
    display: inline-block;
    height: 48px;               /* <<< mobile logo height */
    width: auto;
  }
  .header.header-light .navbar .logo-mobile {
    display: none;
  }
}

/* Hero slider: keep the prev/next arrows on mobile (theme hid them) */
@media screen and (max-width: 991.98px) {
  .slider .carousel-navs .owl-nav {
    display: block;
  }
  .slider .carousel-navs .owl-nav .owl-prev { left: 8px; }
  .slider .carousel-navs .owl-nav .owl-next { right: 8px; }
  .slider .carousel-navs .owl-nav .owl-prev:before,
  .slider .carousel-navs .owl-nav .owl-next:before {
    font-size: 30px;            /* <<< mobile arrow size */
    color: rgba(255, 255, 255, .85);
  }
}

/* Homepage: hide the three feature panels (Fully Insured, Google
   Reviews, High-Reach Vacuum) on phones. The green box stays. */
@media screen and (max-width: 767.98px) {
  .features-bar .features-container .feature-panels-holder {
    display: none;
  }
}

/* Service cards fade up one after another as they scroll into view
   on phones (classes added by assets/js/scroll-reveal.js). */
.services .service-panel.reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;   /* <<< fade speed */
}
.services .service-panel.reveal-init.is-visible {
  opacity: 1;
  transform: none;
}

/* About page photo (wide van + truck shot) in the theme's tall frame:
   0% = left (van), 100% = right (operative washing the bin). */
.about .about-img-holder .about-img img.about-img-photo {
  object-position: 72% 50%;   /* <<< crop focus */
}

/* Laptops 1200-1440px: the theme squeezed the logo slot to 85px and
   showed only an icon. Show the same full DREAM CLEEN logo as desktop. */
@media (min-width: 1200px) and (max-width: 1440px) {
  .header.header-topbar.header-topbar-2 .navbar-brand {
    width: auto;
  }
  .header.header-topbar.header-topbar-2 .navbar-brand .logo-dark,
  .header.header-topbar.header-topbar-2 .navbar.navbar-fixed .navbar-brand .logo-dark {
    display: inline-block;
    height: 54px;               /* <<< laptop logo height */
    width: auto;
  }
  .header.header-topbar.header-topbar-2 .navbar-brand .logo-mobile,
  .header.header-topbar.header-topbar-2 .navbar.navbar-fixed .navbar-brand .logo-mobile {
    display: none;
  }
}