/*
 * Hauptstadt-Entsorger — design styles.
 *
 * The theme header WordPress reads lives in style.css at the theme root; this
 * file is enqueued from functions.php and holds the actual design. It carried a
 * duplicate theme header, which WordPress ignores but which drifted out of sync
 * with the real one, so it has been replaced with this note.
 */

:root {
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --heading-weight: 600;
  --heading-size: 40px;
  --subheading-size: 20px;
  --subheading-weight: 500;
  --body-font: 'Inter', sans-serif;
  --body-size: 18px;
  --body-weight: 400;

  /* Height of the fixed mobile header (.mobile-header, shown ≤1024px):
     44px call/hamburger button + 2×9px container padding + the 1px hairline
     underneath. The buttons are the tallest thing in the row, not the 40px
     logo. The bar is position:fixed and opaque, so anything a page starts with
     has to reserve this much room or it renders underneath it. Kept as a token
     so the offset and the bar can never drift apart — change the padding, the
     button size or the border and change this too. */
  --he-mobile-header: 63px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #FFF8F0;
}

/* ===========================================================================
 * Text selection
 *
 * Orange rather than the brand green, because a selection has to work on every
 * surface this site has. Green highlight on the dark green bands (#223F0F
 * footer, #16300A steps, the city contact band) would be green on green and
 * practically invisible; the orange accent reads clearly on the cream page AND
 * on all of the dark ones.
 *
 * Ink rather than white on top of it: #16231B on #FFA500 is about 8.3:1, while
 * white on orange is roughly 2:1 and fails at any size.
 *
 * The two rules are separate on purpose. A browser that does not understand
 * one selector in a comma-separated list throws away the WHOLE rule, so
 * grouping ::selection with ::-moz-selection would cost the styling in every
 * browser that only supports one of them.
 * ========================================================================= */
::selection {
  background-color: #FFA500;
  color: #16231B;
  text-shadow: none; /* the hero headline carries one; it muddies the highlight */
}

::-moz-selection {
  background-color: #FFA500;
  color: #16231B;
  text-shadow: none;
}
.page-id-1319 .focus__container--reverse{
  display: none;
}
.btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: currentColor;
  transition: color 0.3s ease, transform 0.3s ease;
}

.tech__btn-icon .btn-arrow,
.solutions__btn-icon .btn-arrow {
  width: 14px;
  height: 14px;
}

.header__cta:hover .btn-arrow,
.banner__btn:hover .btn-arrow,
.focus__btn:hover .btn-arrow,
.about__btn:hover .btn-arrow,
.expert__btn:hover .btn-arrow,
.gallery__btn:hover .btn-arrow,
.appointment__btn:hover .btn-arrow,
.available-cta__btn:hover .btn-arrow,
.tech__btn:hover .btn-arrow,
.solutions__btn:hover .btn-arrow {
  transform: translateX(4px);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}
h1{
	  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 40px;
	line-height: 50px;
}
h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 35px;
}

h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 22px;
}

h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
}

p {
 font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: #555;
}

.services__card-text,
.svc-grid__card-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
}

/* Header
 * Flat white bar that sticks to the top of the viewport. It sits IN the flow
 * (sticky, not fixed), so sections below no longer need top padding to clear
 * it and the bar never overlaps a page banner. */
.header {
  width: 100%;
  background-color: #fff;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #ececec;
  transition: box-shadow 0.3s;
}

.allsection_wrapper {
  position: relative;
  width: 100%;
}
.contact .wpforms-field-container .wpforms-first{
  margin-bottom: 18px!important;
}
.header.scrolled {
  box-shadow: 0 4px 20px rgba(31, 86, 2, 0.08);
}

.mobile-header.scrolled {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.header__container {
  max-width: 1400px;
  margin: 0 auto;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 2px;
  flex-shrink: 0;
}

/* 38px, not 46px: the logo is the widest fixed block in the bar, and every
   pixel of its height costs about four of width at this artwork's 3.8:1 aspect
   ratio. Shrinking it hands ~30px back to the seven-item menu. */
.header__logo img {
  height: 38px;
  width: auto;
  display: block;
}
/* `word-break: break-all` was here for .blog-toc__item a. It splits at any
   character, so a German compound in the table of contents came out as
   "Sperrmüllents / orgung". The sidebar is 340px wide — wide enough for these
   to wrap at spaces — so normal wrapping is all that is needed. */
.blog-toc__item a {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
.header__logo-h {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: #276C03;
}

.header__logo-e {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: #FFA500;
}

.header__logo-icon {
  display: flex;
  align-items: center;
  margin-left: 2px;
}

.header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* The bar now carries the Leistungen mega menu plus three service quick links
   plus Standorte / Blog / Kontakt — seven items. 20px and 14px are what let all
   seven, the logo and the phone + CTA block share a 1400px row without
   wrapping; see the tightening steps in responsive.css below that. */
.header__menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 20px;
}

.header__menu-item a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}

.header__menu-item a:hover {
  color: #FFA500;
}

/* Top-level nav links only — the child combinator keeps this off the mega
   menu's own links, which have their own layout.
   The chevron sat low next to "Leistungen" because the <a> was an inline box:
   the icon aligned to the text BASELINE, so it hung below the middle of the
   word. Making the link a flex row centres the two against each other, and the
   gap replaces the margin the arrow used to carry. */
.header__menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  line-height: 1.2;
}

/* Underline that grows from the centre on hover and stays put on the current
   page — the bar is flat white, so hover needed something more than a colour
   change to read as a target.

   Scaled, not inset from both sides: a box collapsed with `left: 50%; right:
   50%` is zero-width in the layout but still a painted box, and browsers round
   that up to a visible sliver at some zoom levels and device pixel ratios.
   scaleX(0) paints nothing at all. */
.header__menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background-color: #FFA500;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.header__menu > li > a:hover::after,
.header__menu > li.current-menu-item > a::after,
.header__menu > li.current-menu-ancestor > a::after,
.header__menu > li.current_page_item > a::after,
.header__menu-item--dropdown.open > a::after {
  transform: scaleX(1);
}

/* Current page marker. wp_nav_menu sets these classes; without a rule for them
   the nav gave no indication of where you were. */
.header__menu > li.current-menu-item > a,
.header__menu > li.current-menu-ancestor > a,
.header__menu > li.current_page_item > a {
  color: #1f5602;
}

.header__menu > li > a:focus-visible {
  outline: 3px solid #FFA500;
  outline-offset: 4px;
  border-radius: 4px;
}

.header__arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.header__arrow svg {
  display: block;
  width: 14px;
  height: 14px;
}

.header__menu-item--dropdown {
  position: relative;
}

.header__menu-item--dropdown.open .header__arrow {
  transform: rotate(180deg);
}

.header__dropdown {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px 0;
  min-width: 200px;
 
  margin-top: 12px;
  z-index: 100;
  list-style: none;
  transform: translateY(-8px);
  transform-origin: top center;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.header__menu-item--dropdown.open .header__dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

.header__dropdown li a {
 display: flex;
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 14px;
    color: #1a1a2e;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    justify-content: space-between;
}

.header__dropdown li a:hover {
  background-color: #f5f5f5;
  color: #276C03;
}

/* Deliberately NOT positioned: the mega dropdown is absolutely positioned and
   needs .header (the sticky, full-width bar) as its containing block so it can
   span the whole viewport. Making this a positioned ancestor would trap it at
   the 1400px container width. Plain dropdowns are unaffected — they anchor to
   their own .header__menu-item--dropdown. */
.header__container {
  position: static;
}

.header__menu-item--mega {
  position: static;
}

/* Full-bleed panel: edge to edge across the viewport, directly under the bar.
   Content inside is re-constrained by .header__mega-inner. */
.header__menu-item--dropdown.header__menu-item--mega .header__dropdown--mega {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  margin-top: 0;
  padding: 0;
  background: transparent;
  box-shadow: 0 18px 40px rgba(16, 40, 4, 0.18);
  overflow: hidden;
  border-radius: 0;
  transform: translateY(-8px);
  transform-origin: top center;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.header__menu-item--mega.open .header__dropdown--mega {
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

/* ===========================================================================
 * Mega menu
 *
 * Two full-bleed bands: the category rail + link grid on top, the CTA bar
 * underneath. Both wrap their content in .header__mega-inner so everything
 * lines up with the header container while the colour runs edge to edge.
 *
 * The categories are a VERTICAL rail, not a horizontal tab strip. Seven German
 * compound labels cannot share one 1400px row: at the widths that produced,
 * "Entrümpelung im Umland" and "Entrümpelung & Räumung" were being cut off by
 * an ellipsis, so a whole category was effectively unreadable. One category
 * per row costs nothing in width, never truncates, and an eighth category adds
 * a row instead of squeezing the seven that already exist.
 * ========================================================================= */
.header__mega {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  max-height: calc(100vh - 110px);
}

/* Shared width constraint for every band. Matches .header__container.
 *
 * padding-inline, NOT the `padding: 0 32px` shorthand this originally carried.
 * The bands using this class add their own vertical padding on the same element
 * (.header__mega-bar-inner), and the 1300px override below restates the
 * shorthand — so under 1300px all four sides were reset and the CTA bar's 15px
 * top and bottom padding silently collapsed. Confining this rule to the inline
 * axis makes the two independent. Nothing about the layout changes. */
.header__mega-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: 32px;
}

/* The scrolling part. The CTA bar below stays pinned in view on short
   viewports because only this band scrolls, not the whole dropdown. */
.header__mega-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background-color: #fff;
}

/* Rail | links. minmax(0, 1fr) rather than 1fr so a long link title cannot
   push the grid wider than the container. */
.header__mega-layout {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  /* stretch, so the rail's divider runs the full height of the band even when
     the active category has fewer links than the rail has rows. */
  align-items: stretch;
  gap: 0;
}

/* --- Category rail ------------------------------------------------------ */
.header__mega-tabbar {
  padding: 24px 22px 26px 0;
  border-right: 1px solid #e8eee4;
}

.header__mega-railtitle {
  margin: 0 0 12px 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8ba07f;
}

.header__mega-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header__mega-tab {
  display: block;
}

.header__mega-tab button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: #35422e;
  transition: background-color 0.2s, color 0.2s;
}

/* The rail gives every label its own row, so nothing is clipped. */
.header__mega-tab-label {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.header__mega-tab button:hover {
  background-color: #f2f7ee;
  color: #1f5602;
}

.header__mega-tab.is-active button {
  background-color: #1f5602;
  color: #fff;
}

/* Orange marker on the active row, matching the CTA accent. */
.header__mega-tab.is-active button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: #FFA500;
}

.header__mega-tab button:focus-visible {
  outline: 3px solid #FFA500;
  outline-offset: 2px;
}

.header__mega-tab-count {
  flex-shrink: 0;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 20px;
  background-color: #eaf3e4;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: #276C03;
  transition: background-color 0.2s, color 0.2s;
}

.header__mega-tab.is-active .header__mega-tab-count {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* --- Link panel --------------------------------------------------------- */
/* min-height so the band does not resize as the pointer moves down the rail.
   The categories no longer hold a similar number of links — he_menu_service_slugs()
   decides what the menu shows and the enabled set is 6 / 4 / 2 — so without a
   floor the panel jumped height on every category change and pulled the links
   out from under the cursor mid-reach. Two rows of links plus the panel heading;
   a longer category simply grows past it. */
.header__mega-body {
  padding: 24px 0 30px 34px;
  background-color: #fff;
  min-height: 208px;
}

.header__mega-panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2ea;
}

.header__mega-panel-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: #1a1a2e;
}

.header__mega-panel-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: #7d8a76;
}

.header__mega-panel {
  display: none;
}

.header__mega-panel.is-active {
  display: block;
  animation: megaFade 0.25s ease;
}

@keyframes megaFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.header__mega-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Three columns, not four: the rail takes 296px off the row, and four
     columns in what is left put the longest titles ("Küche ausbauen und
     entsorgen") back on the ellipsis this layout exists to remove. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 2px;
}

/* justify-content is set explicitly: the base `.header__dropdown li a` rule
   applies space-between, which pushed the marker and the label to opposite
   edges of the column and made the list read as right-aligned. */
.header__mega-links li a {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  color: #2f3237;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

/* align-items: flex-start above plus this nudge keeps the chevron on the FIRST
   line of a label that wraps to two, rather than centring it against the whole
   two-line block and leaving it floating between them. */
.header__mega-link-mark {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 4px;
  color: #c3cdb9;
  transition: color 0.2s, transform 0.2s;
}

/* No ellipsis. This carried `white-space: nowrap` + `text-overflow: ellipsis`,
   which meant a label either fitted its column on one line or was cut off — the
   exact failure the comment on the grid above says the three-column layout
   exists to avoid, reintroduced one level down. A long name simply takes a
   second line now. keep-all so a German compound is never split mid-word:
   "Sperrmüllentsorgung" wraps as a unit, while "Küche ausbauen und entsorgen"
   still breaks at its spaces. */
.header__mega-link-text {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}

.header__mega-links li a:hover {
  background-color: #f2f7ee;
  color: #1f5602;
  transform: translateX(3px);
}

.header__mega-links li a:focus-visible {
  outline: 3px solid #FFA500;
  outline-offset: 2px;
}

.header__mega-links li a:hover .header__mega-link-mark {
  color: #FFA500;
  transform: translateX(1px);
}

/* The slide is decoration; the colour change already carries the hover state.
   (It is a transform rather than the animated padding-left this used to use —
   same effect, but padding reflows the row on every frame.) */
@media (prefers-reduced-motion: reduce) {
  .header__mega-links li a,
  .header__mega-link-mark {
    transition: none;
  }

  .header__mega-links li a:hover { transform: none; }
}

/* --- CTA bar ----------------------------------------------------------- */
.header__mega-bar {
  flex-shrink: 0;
  background-color: #f5f8f2;
  border-top: 1px solid #e3eadc;
}

.header__mega-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.header__mega-bar-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.header__mega-bar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #276C03;
}

.header__mega-bar-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: #1a1a2e;
}

.header__mega-bar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* The three buttons below are all scoped under .header__mega-bar on purpose.
   They sit inside .header__menu-item--mega, so the top-level nav rule
   `.header__menu-item a:hover { color: #FFA500 }` matches them too — and at
   (0,2,1) it beats a plain `.header__mega-bar-btn:hover` at (0,2,0), which
   repainted the button labels orange on hover. The extra class puts these at
   (0,3,0) so each button owns its own colour. */

/* Secondary contact path. "Alle Leistungen" used to sit here, but the mega
   menu already is the full service list, so the slot now offers a channel the
   menu cannot: a direct WhatsApp chat. */
.header__mega-bar .header__mega-bar-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 30px;
  background-color: #fff;
  border: 1px solid #25D366;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: #128C3E;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
}

.header__mega-bar .header__mega-bar-whatsapp:hover {
  background-color: #25D366;
  color: #fff;
  transform: translateY(-2px);
}

.header__mega-bar .header__mega-bar-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: #1a1a2e;
  text-decoration: none;
  transition: color 0.2s;
}

.header__mega-bar .header__mega-bar-phone svg {
  color: #FFA500;
}

.header__mega-bar .header__mega-bar-phone:hover {
  color: #FFA500;
}

.header__mega-bar .header__mega-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background-color: #FFA500;
  padding: 12px 26px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(255, 165, 0, 0.28);
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.header__mega-bar .header__mega-bar-btn:hover {
  background-color: #e69500;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255, 165, 0, 0.38);
}

@media (max-width: 1300px) {
  .header__mega-inner {
    padding-inline: 20px;
  }
  .header__mega-tab button {
    padding: 10px 12px;
    font-size: 13.5px;
  }
  .header__mega-links {
    column-gap: 20px;
  }
}

/* The desktop header is hidden below 1024px, so this band is 1100–1025px only:
   rail plus two link columns is all that fits there without truncating. */
@media (max-width: 1100px) {
  .header__mega-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .header__mega-bar-phone {
    display: none;
  }
}

/* 16px, not 24px: the seven-item nav needs the width more than these two do. */
.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Click-to-call sitting next to the CTA. The number itself comes from
   he_contact() in functions.php, so it stays in sync with the rest of the site. */
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: #1a1a2e;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}

.header__phone-icon {
  display: inline-flex;
  align-items: center;
  color: #FFA500;
  transition: transform 0.3s;
}

.header__phone:hover {
  color: #FFA500;
}

.header__phone:hover .header__phone-icon {
  transform: scale(1.1);
}

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background-color: #FFA500;
  padding: 11px 22px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.25);
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.header__cta:hover {
  background-color: #e69500;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 20px rgba(255, 165, 0, 0.35);
}

.header__hamburger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #1a1a2e;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}

.header__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* Mobile Nav */
/* Mobile Header (visible on tablet/mobile only) */
.mobile-header {
  display: none;
}

/* Mobile Footer Nav (visible on tablet/mobile only) */
.mobile-bottom {
  display: none;
}

/* Now a sibling of .mobile-bottom rather than a child of it, so it needs its
   own desktop hide — see footer.php. */
.mobile-copyright {
  display: none;
}

.mobile-footer {
  display: none;
}

.mobile-menu {
  display: none;
}

/* ===========================================================================
 * Home hero
 *
 * Full-bleed photo background with a dark gradient over it. Left column holds
 * the headline, benefit list, call block and trust badges; right column is a
 * grid of frosted-glass service cards linking to the service pages.
 * ========================================================================= */
.banner {
  position: relative;
  width: 100%;
  background-color: #101a09;
  padding: 90px 100px;
  overflow: hidden;
}

/* Background photo + gradient overlay */
.banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  display: block;
}

.banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(16, 26, 9, 0.9) 0%,
    rgba(16, 26, 9, 0.65) 50%,
    rgba(16, 26, 9, 0.9) 100%
  );
}

.banner__container {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  /* Both columns start on the same line — the card grid is shorter than the
     text column, so centring it left a visible drop at the top. */
  align-items: flex-start;
  gap: 60px;
}

.banner__content {
  flex: 1 1 50%;
  min-width: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Eyebrow pill with the pulsing dot */
.banner__sub-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 8px 18px;
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.banner__sub-heading::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FFA500;
  flex-shrink: 0;
  animation: bannerPulse 2s ease-in-out infinite;
}

@keyframes bannerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

.banner__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: #fff;
}

.banner__title-accent {
  color: #FFA500;
}

.banner__text {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: #d8d8d0;
  max-width: 560px;
  margin: 0 0 28px;
}

.focus_text {
  line-height: 28px;
	font-family: 'Inter', sans-serif;
	font-size: 17px;
	line-height: 28px;
	color: #555;
}

/* Benefit list with circular check markers.
   Normal weight, not 600: four bold lines directly under a bold headline read
   as a second heading rather than as supporting detail, and there is nothing
   left to emphasise with. The white-on-photo contrast carries the legibility. */
.banner_text {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.banner_text li {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  font-weight: 400;
  color: #fff;
}

.banner_text .check-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background-color: rgba(76, 175, 80, 0.2);
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #8ce39a;
  margin-top: 0;
}

/* CTA + click-to-call row */
.banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-bottom: 36px;
}

/* .banner__btn is shared with the 404 and city pages, where it is a flex-column
   child and needs align-self: flex-start. In this row it should sit centred
   against the taller call block. */
.banner__actions .banner__btn {
  align-self: center;
  font-weight: 600;
}

.banner__call {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.banner__call-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 18px;
  background-color: #FFA500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-3deg);
  box-shadow: 0 10px 24px rgba(255, 165, 0, 0.25);
  transition: transform 0.3s;
}

.banner__call:hover .banner__call-icon {
  transform: rotate(0deg) scale(1.05);
}

.banner__call-text {
  display: block;
}

.banner__call-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9bdb2;
  margin-bottom: 2px;
}

.banner__call-number {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  transition: color 0.3s;
}

.banner__call:hover .banner__call-number {
  color: #FFA500;
}

/* Trust badges — one card shape shared by all three, so the row reads as a
   set: icon box on the left, rating/logo + label stacked on the right. The two
   review badges are links to their own platform; the guarantee badge is a
   static chip and uses the frosted variant. */
.banner__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.banner__badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 14px;
  background-color: #fff;
  border: 1px solid #ececec;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.banner__badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
  border-color: #FFA500;
}

.banner__badge-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: #f6f6f3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner__badge-icon--seal {
  background-color: #eaf3e4;
  color: #276C03;
}

.banner__badge-icon--shield {
  background-color: rgba(255, 255, 255, 0.14);
  color: #8ce39a;
}

.banner__badge-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.banner__badge-top {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.banner__badge-score {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: #1a1a2e;
}

.banner__badge-score--sm {
  font-size: 15px;
}

.banner__badge-stars {
  display: inline-flex;
  gap: 1px;
  color: #FFA500;
  line-height: 0;
}

.banner__badge-logo {
  width: auto;
  height: 17px;
  display: block;
}

.banner__badge-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b6b;
  white-space: nowrap;
}

/* Frosted variant — sits directly on the hero photo instead of a white card. */
.banner__badge--ghost {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}

.banner__badge--ghost .banner__badge-score {
  color: #fff;
}

.banner__badge--ghost .banner__badge-label {
  color: #c9cdc2;
}

/* Right column: frosted service cards.
   Each card is a left-aligned stack — icon box on top, then title, then a
   permanently visible "Mehr erfahren" link. Nothing is hover-only, so the card
   reads the same on touch devices where there is no hover state. */
.banner__services {
  flex: 1 1 50%;
  min-width: 0;
}

.banner__services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.banner__service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 16px;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.banner__service-card:hover {
  background-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-4px);
  border-color: rgba(255, 165, 0, 0.7);
}

/* The icon box itself — a tinted rounded square, not a bare glyph. */
.banner__service-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  background-color: rgba(255, 165, 0, 0.16);
  border: 1px solid rgba(255, 165, 0, 0.3);
  color: #FFA500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}

.banner__service-card:hover .banner__service-icon {
  background-color: #FFA500;
  border-color: #FFA500;
  color: #fff;
  transform: translateY(-2px);
}

.banner__service-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.banner__service-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

.banner__service-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #FFA500;
  transition: gap 0.3s, color 0.3s;
}

.banner__service-card:hover .banner__service-more {
  gap: 10px;
  color: #ffb733;
}

/* Scroll cue — a real link down to the next section, not just decoration. */
.banner__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  animation: bannerScrollBounce 1.6s infinite;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.banner__scroll:hover,
.banner__scroll:focus-visible {
  background-color: rgba(255, 165, 0, 0.9);
  border-color: #FFA500;
  color: #fff;
}

@keyframes bannerScrollBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}

.focus_text {
    list-style: none;
    padding: 0;
    margin: 0;
}

.focus_text li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
}

.focus_text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23276C03' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.focus_text2 {
    list-style: none;
    padding: 0;
    margin: 0;
	color: #555;
	    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 28px;
}

.focus_text2 li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
}

.focus_text2 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23276C03' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}


.page-template-page-service-details .page-section-1 li,
.page-template-page-service-details .page-section-3 li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
}

.page-template-page-service-details .page-section-1 li::before,
.page-template-page-service-details .page-section-3 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23276C03' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}



/* Section 2 used to be a dark-green band on the service template, so its
   heading was forced white here. The redesigned template renders section 2 on
   a light surface, which left the heading invisible — see the .hp-rte guard in
   ui.css, which now owns the editor-content colours. */

/* Stats Section */
.stats {
  width: 100%;
  padding: 80px 100px;
  border-bottom: 0.8px solid #4442424D;
}

.stats__container {
  max-width: 1350px;
  margin: 0 auto;
  text-align: center;
}

.stats__title {
  line-height: 50px;
  color: #1a1a2e;
  margin-bottom: 16px;
}

.stats__text {
  line-height: 28px;
  color: #555;
  max-width: 750px;
  margin: 0 auto 60px;
}

.stats__circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.stats__circle {
  width: 180px;
  height: 180px;
  background-color: #223F0F;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px #FFF8F0, 0 0 0 10px #c8b98a4d;
}

.stats__number {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 42px;
  color: #fff;
  line-height: 1;
}

.stats__label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  margin-top: 8px;
}

/* Video Banner Section
   Layout: a full-width green band carries a centred heading + intro, and the
   video sits as a card that overlaps the band, its lower part resting on the
   page background below. The green→page split is done with a single gradient
   so the video always straddles the boundary regardless of content height.
   Colours come from the theme: band #276C03, page bg #FFF8F0. */
.video-banner {
  width: 100%;
  padding: 72px 100px 90px;
  background: linear-gradient(#223f0f 0 58%, #FFF8F0 58% 100%);
}

.video-banner__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.video-banner__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 16px;
}

.video-banner__intro {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  max-width: 760px;
  margin: 0 auto 44px;
}

.video-banner__media {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
}

/* In this layout the embed is a clean 16:9 card (not the full-bleed 746px box
   the base rule gives). Aspect-ratio sizes the height; the iframe fills it. */
.video-banner__media .video-banner__embed {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
}

.video-banner__media .video-banner__iframe {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.video-banner__bg {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.subVideo .video-banner__video {
border-radius: 10px;
}
.video-banner__video {
  width: 100%;
  height: 746px;
  object-fit: cover;
  display: block;
}

.video-banner__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: #FFEDD5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.video-banner__pause {
  display: none;
}

.video-banner__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Vimeo embeds standing in for the old <video> elements.
   The wrapper keeps exactly the box the video had (--vb-h tall). object-fit:
   cover does not apply to an iframe, so the crop is done by sizing the iframe
   to the larger of "as wide as the box" and "as wide as --vb-h needs at the
   source aspect ratio" (--vb-ar), letting aspect-ratio derive the height, then
   centring it under overflow: hidden. Per-instance overrides only need to set
   --vb-h / --vb-ar. */
.video-banner__embed {
  --vb-h: 746px;
  --vb-ar: 1.7778; /* 16:9 */
  position: relative;
  width: 100%;
  height: var(--vb-h);
  overflow: hidden;
}

.video-banner__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, calc(var(--vb-h) * var(--vb-ar)));
  height: auto;
  aspect-ratio: var(--vb-ar);
  border: 0;
  display: block;
}

/* Inside .subVideo the <video> was rounded by `.subVideo .video-banner__video`;
   the embed wrapper carries that rounding now (it is the clipping box). */
.subVideo.video-banner__embed {
  border-radius: 10px;
}

/* Portrait (9:16-ish) source in an otherwise unchanged landscape box.
   A portrait video is always taller than the box, so cover = fill the box
   WIDTH exactly and let the extra height crop top/bottom. Forcing width:100%
   here (instead of the max() the landscape base rule uses) makes the video
   span the whole column with no empty gap at the sides. */
.video-banner__embed--vertical {
  --vb-ar: 0.566;
}
.video-banner__embed--vertical .video-banner__iframe {
  width: 100%;
  min-width: 100%;
}

/* About section embed: same 600px box and 10px rounding the <video> had.
   Keep the base width:100% (do NOT set width:auto — with the iframe positioned
   absolutely the wrapper would have no in-flow content and collapse instead of
   filling the column, leaving a gap on the right). */
.aboutVideo.video-banner__embed {
  --vb-h: 600px;
  --vb-ar: 1.3333; /* 4:3 */
  border-radius: 10px;
}

.aboutVideo{
	width: auto;
    height: 600px;
}

/* Process Section */
.process {
  width: 100%;
  padding: 80px 100px;
  overflow: hidden;
      border-bottom: 0.8px solid #4442424D;
}

.process--no-border {
  border-bottom: none;
}

.process__container {
  max-width: 1350px;
  margin: 0 auto;
  text-align: center;
}

.process__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  border: none;
  padding: 10px 24px;
  display: inline-block;
  border-radius: 30px;
  margin-bottom: 16px;
}

.process__title {
  line-height: 50px;
  color: #1a1a2e;
  margin-bottom: 60px;
}

.process__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
    position: relative;
}
.page-template-page-about-php .process__steps::after {
    content: "";
    position: absolute;
    top: 27.1%;
    left: 0%;
    transform: translateY(0);
    width: 100%;
    height: 1px;
    z-index: -1;
    background: #0000004d;
}
.process__steps::after{
    content: "";
    position: absolute;
    top: 29%;
    left: 0%;
    transform: translateY(-57%);
    width: 100%;
    height: 1px;
    z-index: -1;
    background: #0000004d;
}
.process__step {
  flex: 1;
  max-width: 410px;
  text-align: center;
}

.process__circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin: 0 auto 24px;
  position: relative;
  overflow: hidden;
}

.process__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  padding: 6px;
}

.process__badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background-color: #223F0F;
  padding: 6px 16px;
  border-radius: 20px;
  z-index: 1;
}

.process__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #999;
  padding-top: 100px;
  flex-shrink: 0;
  width: 60px;
  letter-spacing: -2px;
}

.process__step-title {
  color: #1a1a2e;
  margin-bottom: 8px;
}

.process__step-text {
  line-height: 28px;
  color: #555;
/*   max-width: 260px; */
  margin: 0 auto;
}

.process__watermark {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: transparent;
  -webkit-text-stroke: 1.5px #e0d5c5;
  margin-top: 60px;
  white-space: nowrap;
  user-select: none;
}

/* Focus Section */
.focus {
  width: 100%;
  padding: 80px 100px;
  display: flex;
  flex-direction: column;
  gap: 7rem;
}

.focus__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
	align-items: center;
/*   align-items: flex-start; */
}

.focus__image {
  flex: 1;
     height: stretch;
    width: 100%;
}

.focus__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.focus__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.focus__title {
  line-height: 50px;
  color: #1a1a2e;
}

.focus__text {
  line-height: 28px;
  color: #555;
}

.focus__container--reverse {
  flex-direction: row-reverse;
}

.focus__link {
  color: #1a1a2e;
  text-decoration: underline;
}

.focus__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  background-color: #276C03;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 8px;
  transition: background-color 0.3s, transform 0.3s;
}

.focus__btn:hover {
  background-color: #1e5502;
  transform: translateY(-2px);
}

/* FAQ Section */
.faq {
  width: 100%;
  padding: 80px 100px;
  background-color: #223F0F1A;
}

.faq__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
}

.faq__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.faq__sub-heading {
  color: #FFA500;
  background-color: #fff;
  padding: 8px 20px;
  display: inline-block;
  border-radius: 30px;
}

.faq__title {
  line-height: 50px;
  color: #1a1a2e;
  margin-bottom: 16px;
}

.faq__accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #1a1a2e;
  transition: background-color 0.3s, color 0.3s;
}

.faq__item--active .faq__question {
  background-color: #829961;
  color: #fff;
}

.faq__question:hover {
  background-color: #829961;
  color: #fff;
}

.faq__question:hover .faq__toggle {
  background-color: #fff;
  color: #829961;
}

.faq__toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #829961;
  color: #fff;
  flex-shrink: 0;
  transition: background-color 0.3s, color 0.3s;
}

.faq__item--active .faq__toggle {
  background-color: #fff;
  color: #829961;
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq__item--active .faq__answer {
  max-height: fit-content;
  padding: 16px 20px;
}

.faq__answer p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #555;
}

.faq__right {
  flex: 1;
  display: flex;
  justify-content: center;
}

.faq__images {
  width: 100%;
}

.faq__images img {
  width: 100%;
}

/* Appointment Section */
.appointment {
  width: 100%;
}

.appointment__bg {
  background: url('/wp-content/uploads/2026/05/bannerImage.png') center/cover no-repeat;
  position: relative;
  padding: 80px 100px;
}

.appointment__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(34, 63, 15, 0.7);
}

.appointment__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.appointment__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.appointment__title {
  line-height: 52px;
  color: #fff;
}

.appointment__text {
  line-height: 28px;
  color: #ffffffcc;
}

.appointment__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  background-color: #FFA500;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
}

.appointment__btn:hover {
  background-color: #e69500;
  transform: translateY(-2px);
}

.appointment__form-wrap {
  flex: 1;
  background-color: #fff;
  border-radius: 16px;
  padding: 40px 32px;
}

.appointment__form-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #1a1a2e;
  margin-bottom: 6px;
}

.appointment__form-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #777;
  margin-bottom: 24px;
}

.appointment__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.appointment__input-wrap {
  position: relative;
}

.appointment__input-wrap input,
.appointment__input-wrap textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px 48px 14px 16px;
  outline: none;
  resize: none;
  background-color: #fff;
}

.appointment__input-wrap textarea {
  background-color: #f5f5f5;
}

.appointment__input-wrap input:focus,
.appointment__input-wrap textarea:focus {
  border-color: #223F0F;
}

.appointment__input-wrap svg {
  position: absolute;
  right: 16px;
  top: 14px;
}

.appointment__input-wrap--textarea svg {
  top: 14px;
}

.appointment__submit {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1a1a2e;
  background-color: transparent;
  border: 2px solid #1a1a2e;
  border-radius: 30px;
  padding: 14px 32px;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 0.3s, color 0.3s;
}

.appointment__submit:hover {
  background-color: #223F0F;
  color: #fff;
  border-color: #223F0F;
}

/* CTA Section */
.available-cta {
  width: 100%;
}
#liColor li{
	    color: #fff !important;
}
.available-cta__bg {
  background: url('/wp-content/uploads/2026/05/bannerImage.png') center/cover no-repeat;
  position: relative;
  padding: 80px 100px;
}

.available-cta__bg::before {
  content: '';
  position: absolute;
  inset: 0;
/* 	    background: linear-gradient(90deg, #223F0FFC, #feca5700); */
/*   background-color: rgba(34, 63, 15, 0.7); */
	background: linear-gradient(90deg, #223f0ffc, #223f0f96);
}

.available-cta__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.available-cta__content {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.available-cta__title {
  line-height: 52px;
  color: #fff;
}

.available-cta__text {
  line-height: 28px;
  color: #ffffffcc;
}

.available-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #FFA500;
  background-color: #fff;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.available-cta__btn:hover {
  background-color: #FFA500;
  color: #fff;
  transform: translateY(-2px);
}

/* Testimonials Section */
.testimonials {
  width: 100%;
  padding: 80px 100px;
  background-color: #F6F6F6;
}

.testimonials__container {
  max-width: 1350px;
  margin: 0 auto;
}

.testimonials__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.testimonials__header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.testimonials__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 8px 20px;
  display: inline-block;
  border-radius: 30px;
}

.testimonials__title {
  line-height: 50px;
  color: #1a1a2e;
}

.testimonials__nav {
  display: flex;
  gap: 12px;
}
.focus__image{
align-self: stretch;       
contain: size;            
position: relative;
overflow: hidden;
min-height: 380px;        
    aspect-ratio: auto;   
}
.testimonials__prev,
.testimonials__next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.testimonials__prev {
  background-color: transparent;
  border: 2px solid #FFA500;
}

.testimonials__next {
  background-color: #FFA500;
  border: 2px solid #FFA500;
}

.testimonials__prev:hover {
  background-color: #fff3e0;
}

.testimonials__next:hover {
  background-color: #e69500;
}

/* height must stay auto (not the old fixed 355px): a longer review overflowed
   the card and pushed the star rating outside the white box. min-height keeps
   short cards from collapsing, and the flex column lets .testimonials__review
   absorb the slack so the stars still sit on the bottom edge of every card.
   Swiper's own .swiper-slide{height:100%} is same-specificity, and main.css is
   enqueued after swiper's CSS, so this wins on source order. */
.testimonials__card {
  background-color: #fff;
  border-radius: 16px;
  padding: 32px 24px 28px;
  text-align: center;
  width: 420px;
  height: auto;
  min-height: 355px;
  position: relative;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

.testimonials__avatar {
  position: relative;
  display: inline-block;
  margin-top: -60px;
  margin-bottom: 16px;
  /* the card is a flex column, so this would otherwise stretch to full width
     and carry .testimonials__quote (right:-14px) out to the card's edge */
  align-self: center;
}

.testimonials__avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
}

.testimonials__quote {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: #223F0F;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.testimonials__name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1a1a2e;
  margin-bottom: 12px;
}

.testimonials__review {
  line-height: 24px;
  color: #555;
  margin-bottom: 16px;
  flex: 1; /* takes up the spare height so .testimonials__stars stays bottom-aligned */
}

.testimonials__stars {
  color: #FFA500;
  font-size: 18px;
  letter-spacing: 4px;
}

/* Testimonials – dark variant (about page) */
.testimonials--dark {
  background-color: #223F0F;
}

.testimonials--dark .testimonials__title {
  color: #ffffff;
}

.testimonials--dark .testimonials__prev {
  background-color: transparent;
  border-color: #ffffff;
}

.testimonials--dark .testimonials__prev:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.testimonials--dark .testimonials__prev svg path {
  stroke: #ffffff;
}

.testimonials--dark .testimonials__next {
  background-color: #ffffff;
  border-color: #ffffff;
}

.testimonials--dark .testimonials__next:hover {
  background-color: #f0f0f0;
}

.testimonials--dark .testimonials__next svg path {
  stroke: #223F0F;
}

/* Gallery Section */
.gallery {
  width: 100%;
  padding: 80px 100px;
}

.gallery__container {
  max-width: 1350px;
  margin: 0 auto;
}

.gallery__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.gallery__header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.gallery__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 8px 20px;
  display: inline-block;
  border-radius: 30px;
}

.gallery__title {
  line-height: 50px;
  color: #1a1a2e;
}

.gallery__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  background-color: #276C03;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.3s, transform 0.3s;
}

.gallery__btn:hover {
  background-color: #1e5502;
  transform: translateY(-2px);
}

.gallery__grid {
  display: grid;
  /* 6 columns so row 1 = three cards (2 cols each) and row 2 = two cards
     (3 cols each) both divide evenly. */
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}

.gallery__item {
  border-radius: 16px;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Row 1 — three equal cards (2 columns each). */
.gallery__item--1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.gallery__item--2 {
  grid-column: 3 / 5;
  grid-row: 1;
}

.gallery__item--3 {
  grid-column: 5 / 7;
  grid-row: 1;
}

/* Row 2 — two equal cards (3 columns each). */
.gallery__item--4 {
  grid-column: 1 / 4;
  grid-row: 2;
  max-height: 350px;
}

.gallery__item--5 {
  grid-column: 4 / 7;
  grid-row: 2;
  max-height: 350px;
}

/* Expert Section */
.expert {
  width: 100%;
  background-color: #223F0F;
  padding: 120px 100px;
}

.expert__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
}

.expert__image {
  flex: 1;
}

.expert__image-frame {
  position: relative;
  border: 10px solid #ffffff;
  border-radius: 16px;
  padding: 20px 20px 40px 0;
  top: 20px;
  right: -40px;
  width: 510px;
  height: 624px;
}

.expert__image-frame img {
  width: 500px;
  border-radius: 12px;
  display: block;
  position: relative;
  height: 624px;
  top: -75px;
  left: -45px;
  object-fit: cover;
}

.expert__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.expert__title {
  line-height: 52px;
  color: #fff;
}

.expert__text {
  line-height: 28px;
  color: #ffffffcc;
}

.expert__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  background-color: #FFA500;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
}

.expert__btn:hover {
  background-color: #e69500;
  transform: translateY(-2px);
}

.expert__features {
  display: flex;
  gap: 0;
  background-color: #fff;
  border-radius: 12px;
  margin-top: 12px;
  align-self: stretch;
}

.expert__feature {
  flex: 1;
  padding: 24px;
}

.expert__feature:first-child {
  border-right: 1px solid #e0e0e0;
}

.expert__feature-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1a1a2e;
  margin: 10px 0 6px;
}

.expert__feature-text {
  line-height: 28px;
  color: #555;
}

/* About Section */
.about {
  width: 100%;
  background-color: #223F0F;
  padding: 80px 100px;
}

.about__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.about__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about__sub-heading {
  line-height: 24px;
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 30px;
  align-self: flex-start;
}

.about__title {
  line-height: 50px;
  color: #fff;
}

.about__left-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

.about__middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: end;
}

.about__info + .about__info {
  border-top: 1px solid #FFFFFF80;
  padding-top: 24px;
}

.about__info {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.about__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.about__info-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  margin-bottom: 6px;
}

.about__info-text {
  line-height: 28px;
  color: #ffffffcc;
}

.banner__btn{
      display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  background-color: #FFA500;
      padding: 17px 28px;
  border-radius: 30px;
  text-decoration: none;
  align-self: flex-start;
  transition: background-color 0.3s, transform 0.3s;
  
}

.banner__btn:hover {
  background-color: #e69500;
  transform: translateY(-2px);
}

.about__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  background-color: #286D04;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  align-self: flex-start;
  margin-top: 8px;
  transition: background-color 0.3s, transform 0.3s;
}

.about__btn:hover {
  background-color: #1e5502;
  transform: translateY(-2px);
}

.about__right {
  flex: 0.7;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.about__right-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: #FFA500;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Services Section */
.services {
  width: 100%;
  padding: 80px 100px;
}

.services__container {
  max-width: 1350px;
  margin: 0 auto;
  text-align: center;
}

.services__sub-heading {
    color: #FFA500;
    background-color: #FFEDD5;
    padding: 10px 24px;
    display: inline-block;
    border-radius: 30px;
    margin-bottom: 16px;
}

.services__title {
  line-height: 50px;
  color: #1a1a2e;
  margin-bottom: 16px;
}

.services__text {
  line-height: 28px;
  color: #555;
  max-width: 750px;
  margin: 0 auto 48px;
}

.services__slider {
  padding-bottom: 50px;
}

.services__card {
  background-color: #EFEDDD;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: left;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  height: 377px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.services__card:hover {
  background-color: #223F0F;
}

.services__icon {
  width: 50px;
  height: 50px;
  background-color: #FFA500;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 24px;
  transition: background-color 0.3s, color 0.3s;
}

.services__card:hover .services__icon {
  background-color: #fff;
  color: #223F0F;
}

/* Black PNG icon rendered white on the orange circle, dark on hover */
.services__icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter 0.3s;
}

.services__card:hover .services__icon-img {
  filter: brightness(0);
}

.services__card-title {
  line-height: 30px;
  color: #1a1a2e;
  margin-bottom: 12px;
  transition: color 0.3s;
}

.services__card:hover .services__card-title {
  color: #fff;
}

.services__card-text {
  line-height: 24px;
  color: #555;
  margin-bottom: 20px;
  transition: color 0.3s;
}

.services__card:hover .services__card-text {
  color: #ffffffcc;
}

.services__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #1a1a2e;
  text-decoration: auto;
  transition: color 0.3s;
}

.services__link .btn-arrow {
  position: relative;
  left: 10px;
  top: 3px;
  color: currentColor;
  transition: color 0.3s ease, transform 0.3s ease;
}

.services__card:hover .services__link,
.services__card:hover .services__link .btn-arrow {
  color: #FFA500;
}

.services__pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #223F0F;
  opacity: 0.4;
}

.services__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 24px;
  border-radius: 6px;
}

/* Footer */
.footer {
  width: 100%;
  background-color: #223F0F;
  padding: 80px 100px 0;
}

/* Uniform 15px for footer paragraphs and lists */
.footer p,
.footer ul,
.footer ul li,
.footer ul li a {
  font-size: 15px;
}

.footer__container {
  max-width: 1400px; /* matches .header__container, so the two line up */
  margin: 0 auto;
}

/* Four sibling columns on one grid.
   Sized to their contents: the brand column carries a paragraph and the map,
   the contact column carries four cards and a button, and the two link lists
   in between only need room for a service name. The old layout wrapped the
   first two in a flex:2.2 box and split that evenly, which is what left a gap
   the width of a column between every list. */
.footer__top {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(0, 0.85fr)
    minmax(0, 1fr)
    minmax(0, 1.25fr);
  gap: clamp(28px, 2.6vw, 48px);
  padding-bottom: 48px;
  border-bottom: 1px solid #ffffff30;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.footer__logo { display: inline-flex; }

.footer__logo img {
  height: 48px;
  width: auto;
  display: block;
  /* The logo is dark artwork; on the green band it has to be knocked out. */
  filter: brightness(0) invert(1);
}

/* Sits at the foot of the brand column rather than spanning two of them. */
.footer__map {
  width: 100%;
  margin-top: 4px;
  min-height: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ffffff26;
}
.footer__desc {
  line-height: 28px;
  color: #ffffffcc;
}

.footer__socials {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.footer__social {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #2e5a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.footer__social:hover {
  background-color: #FFA500;
}

.footer__col { min-width: 0; }

/* Every column title gets the accent bar, not just "Kontakt aufnehmen" — one
   heading marked differently from its three neighbours reads as an accident
   rather than as emphasis. */
.footer__col-title {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  margin-bottom: 20px;
}

.footer__col-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  border-radius: 3px;
  background-color: #FFA500;
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* The chevron is drawn here rather than typed into the markup. It used to be a
   literal &#10095; in footer.php, so it only ever appeared on the hard-coded
   fallback lists — the moment a real menu was assigned under Appearance ->
   Menus, wp_nav_menu() output had no markers and the two columns stopped
   matching. */
.footer__links li a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--body-font);
  font-size: 14.5px;
  line-height: 1.5;
  color: #ffffffcc;
  text-decoration: none;
  transition: color 0.3s, gap 0.3s;
}

.footer__links li a::before {
  content: "\276F";
  flex-shrink: 0;
  font-size: 11px;
  line-height: inherit;
  color: #FFA500;
}

.footer__links li a:hover {
  color: #FFA500;
  gap: 11px;
}

.footer__all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: #ffffff;
  background-color: #FFA500;
  padding: 11px 22px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
}

.footer__all-btn:hover {
  background-color: #e69500;
  transform: translateY(-2px);
}

.footer__all-btn:hover .btn-arrow {
  transform: translateX(4px);
}

.footer__subscribe-text {
  line-height: 28px;
  color: #ffffffcc;
  margin-bottom: 16px;
}

.footer__subscribe-form {
  display: flex;
  align-items: center;
  background-color: #2e5a1a;
  border-radius: 30px;
  padding: 4px;
  margin-bottom: 12px;
}

.footer__subscribe-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 16px;
  font-family: var(--body-font);
  font-size: 14px;
  color: #fff;
}

.footer__subscribe-form input::placeholder {
  color: #ffffffaa;
}

.footer__subscribe-form button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FFA500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.footer__subscribe-form button:hover {
  background-color: #e69500;
}

.footer__checkbox {
  font-family: var(--body-font);
  font-size: 12px;
  color: #ffffffcc;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__checkbox input {
  accent-color: #FFA500;
}

/* Footer contact card (replaces newsletter).
   The accent bar that used to be declared here for .footer__contact-title
   alone is now on every .footer__col-title, so this block only holds what is
   genuinely specific to the contact column. */
.footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, background-color 0.3s, transform 0.3s;
}

.footer__contact-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 165, 0, 0.4);
  transform: translateY(-2px);
}

.footer__contact-item:hover .footer__contact-value {
  color: #FFA500;
}

.footer__contact-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background-color: rgba(255, 165, 0, 0.15);
  color: #FFA500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer__contact-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.footer__contact-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
}

.footer__contact-value {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: #ffffffcc;
  text-decoration: none;
  transition: color 0.3s;
  word-break: break-word;
}

a.footer__contact-value:hover {
  color: #FFA500;
}

.footer__contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  background-color: #FFA500;
  padding: 15px 24px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
}

.footer__contact-btn:hover {
  background-color: #e69500;
  transform: translateY(-2px);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}

.footer__bottom p {
  font-family: var(--body-font);
  font-size: 14px;
  color: #ffffffcc;
}

.footer__bottom-links {
  display: flex;
  gap: 24px;
}

/* wp_nav_menu() puts a <ul> inside .footer__bottom-links, so the flex row above
   applies to the wrapper and the list itself stays a bulleted block. Nobody
   noticed because the hard-coded fallback has no <ul> — assign a menu to the
   "Footer - Bottom Links" location and the links stack with bullets. */
.footer__bottom-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.footer__bottom-links a {
  font-family: var(--body-font);
  font-size: 14px;
  color: #ffffffcc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer__bottom-links a:hover {
  color: #FFA500;
}

/* Four columns need roughly 1100px of content width before the two link lists
   start wrapping service names mid-phrase. Below that they pair up 2x2.
   This is the only footer breakpoint that can ever fire: responsive.css hides
   .footer entirely at 1024px and the fixed mobile bar takes over, so the
   window where it applies is ~1025-1200px. */
@media (max-width: 1200px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

/* About Banner Section (shared across inner pages) */
.about-banner {
  position: relative;
  width: 100%;
  height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 0 100px 0;
  overflow: hidden;
}

/* Per-page background images */
.about-banner--about {
  background-image: url('/wp-content/uploads/2026/05/about_bg.webp');
}

.about-banner--service {
  background-image: url('/wp-content/uploads/2026/05/our_service.webp');
}

.about-banner--service-single {
  background-image: url('/wp-content/uploads/2026/05/service_details.webp');
}

.about-banner--contact {
  background-image: url('/wp-content/uploads/2026/05/contact_page.webp');
}

.about-banner--city {
  background-image: url('/wp-content/uploads/2026/05/city_banner.webp');
  align-items: center;
  height: 800px;
}

.about-banner--city .about-banner__card {
  background-color: transparent;
  color: #ffffff;
  text-align: left;
  align-items: flex-start;
  border-radius: 0;
  padding: 0;
  max-width: 720px;
}

.about-banner--city .about-banner__title {
  color: #ffffff;
}

.about-banner__text {
  line-height: 1.6;
  color: #ffffff;
}

/* A proper brand-green veil, not a 15% tint.
   The old gradient was too weak to do anything: the Über-uns photo is a warm
   orange skip in low sun, so the top of every inner page read as sepia rather
   than as part of a green brand, and the white card at the bottom had nothing
   to sit against. Weighted at both ends — darker at the top so the sticky
   white header has an edge, darker at the foot so the title card is anchored,
   lightest through the middle where the photograph should still be visible.
   Shared by the Über uns, Kontakt, Blog and Leistungen banners. */
.about-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(22, 48, 10, 0.72) 0%,
      rgba(22, 48, 10, 0.34) 38%,
      rgba(22, 48, 10, 0.55) 72%,
      rgba(22, 48, 10, 0.88) 100%),
    linear-gradient(90deg, rgba(31, 86, 2, 0.42) 0%, rgba(31, 86, 2, 0.05) 60%);
  pointer-events: none;
}

/* Left-to-right dark-green overlay on city + service-details banners */
.about-banner--city .about-banner__overlay {
  background: linear-gradient(
    270deg,
    rgba(65, 75, 52, 0) -22.29%,
    rgba(34, 63, 15, 0.98) 83.25%
  );
  z-index: 1;
}

.about-banner__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
}

.about-banner__card {
  background-color: #223F0F;
  border-radius: 20px 20px 0 0;
  padding: 32px 48px;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
}
.about-banner__card ul{
	gap: 10px;
}
.about-banner__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
}

.about-banner__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.about-banner__crumb {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.about-banner__crumb:hover {
  color: #FFA500;
}

.about-banner__crumb--current {
  color: #FFA500;
}

.about-banner__sep {
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
}

/* Solutions Section */
.solutions {
  width: 100%;
  padding: 80px 100px;
}

.solutions__container {
  max-width: 1350px;
  margin: 0 auto;
}

.solutions__main {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.solutions__image {
  flex: 1;
  position: relative;
  align-self: stretch;
  border-radius: 12px;
}

.solutions__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solutions__badge {
  position: absolute;
  top: -25px;
  right: -20px;
  background-color: #223F0F;
  color: #ffffff;
  padding: 24px 28px;
  border-radius: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 120px;
}

.solutions__badge-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
}

.solutions__badge-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
}

.solutions__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.solutions__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 8px 22px;
  display: inline-block;
  border-radius: 30px;
}

.solutions__title {
  line-height: 1.25;
  color: #1a1a2e;
}

.solutions__text {
  line-height: 1.7;
  color: #555;
}

.solutions__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  background-color: #223F0F;
  padding: 12px 14px 12px 26px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
  margin-top: 4px;
}

.solutions__btn:hover {
  background-color: #1a3309;
  transform: translateY(-2px);
}

.solutions__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #FFA500;
}

.solutions__features {
  display: flex;
  gap: 60px;
  margin-top: 48px;
}

.solutions__feature {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.solutions__feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background-color: #FFA500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solutions__feature-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.solutions__feature-text {
  line-height: 1.6;
  color: #555;
}

/* Quality Section */
.quality {
  width: 100%;
  background-color: #223F0F;
  padding: 80px 100px 0;
  height: 923px;
  margin-bottom: 15rem;
}

.quality__container {
  max-width: 1350px;
  margin: 0 auto;
}

.quality__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 8px 22px;
  display: inline-block;
  border-radius: 30px;
  margin-bottom: 24px;
}

.quality__header {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  margin-bottom: 56px;
}

.quality__title {
  flex: 1;
  line-height: 1.25;
  color: #ffffff;
}

.quality__text {
  flex: 1;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

.quality__stats {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 50px;

}

.quality__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  width: 308px;
  transform: rotate(0deg);
  opacity: 1;
  border-radius: 18px;
  background: #FFFFFF38;
  padding: 30px 0;
}

.quality__stat-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: #FFA500;
}

.quality__stat-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}

.quality .video-banner__bg {
  border-radius: 16px;
  /* overflow: hidden; */
}

.quality .video-banner__video {
  height: 600px;
}

/* The <video> in this section is now a Vimeo embed, which takes its height
   from --vb-h instead of `height`. Mirror the values .quality
   .video-banner__video used at each breakpoint so the box keeps exactly the
   same footprint. Two-class selectors, so they beat the generic
   .video-banner__embed{--vb-h} defaults in responsive.css on specificity and
   do not depend on file order. */
.quality .video-banner__embed {
  --vb-h: 600px;
}

@media (max-width: 1024px) {
  .quality .video-banner__embed {
    --vb-h: 480px;
  }
}

@media (max-width: 768px) {
  .quality .video-banner__embed {
    --vb-h: 380px;
  }
}

@media (max-width: 480px) {
  .quality .video-banner__embed {
    --vb-h: 280px;
  }
}

/* Service Grid Section */
.svc-grid {
  width: 100%;
  padding: 80px 100px;
}

.svc-grid__container {
  max-width: 1350px;
  margin: 0 auto;
}

.svc-grid__header {
  text-align: center;
  margin-bottom: 56px;
}

.svc-grid__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 8px 22px;
  display: inline-block;
  border-radius: 30px;
  margin-bottom: 20px;
}

.svc-grid__title {
  line-height: 1.25;
  color: #1a1a2e;
  margin-bottom: 16px;
}

.svc-grid__text {
  line-height: 1.7;
  color: #555;
  max-width: 720px;
  margin: 0 auto;
}

.svc-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.svc-grid__card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.svc-grid__icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background-color: #FFA500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.svc-grid__card-title {
  color: #1a1a2e;
  margin-bottom: 10px;
}

.svc-grid__card-text {
  line-height: 1.6;
  color: #666;
}

/* Service Detail Section */
.svc-detail {
  width: 100%;
  padding: 80px 100px;
}

.svc-detail__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 32px;
  align-items: stretch;
}

.svc-detail__image {
  flex: 2;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
}

.svc-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-detail__sidebar {
  flex: 1;
  background-color: #FFEDD5;
  border-radius: 12px;
    padding: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svc-detail__sidebar-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #1a1a2e;
}

.svc-detail__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding: 0;
  margin: 0;
}

.svc-detail__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: #ffffff;
  color: #1a1a2e;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding: 14px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.svc-detail__link:hover {
  background-color: #276C03;
  color: #ffffff;
}

.svc-detail__link--active {
  background-color: #276C03;
  color: #ffffff;
}

.svc-detail__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Service Info Section */
.svc-info {
  width: 100%;
  padding: 40px 100px 80px;
}

.svc-info__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.svc-info__content {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svc-info__title {
  line-height: 1.25;
  color: #1a1a2e;
  margin-bottom: 12px;
}

.svc-info__text {
  line-height: 1.7;
  color: #333;
}

.svc-info__list {
  list-style: disc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.svc-info__list li {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.svc-info__contact {
  flex: 1;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: stretch;
}

.svc-info__contact-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.svc-info__contact-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(34, 63, 15, 0.7);
  z-index: 1;
}

.svc-info__contact-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.svc-info__contact-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: #ffffff;
}

.svc-info__contact-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #FFA500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
}

.svc-info__contact-icon:hover {
  background-color: #e69500;
  transform: scale(1.05);
}

.svc-info__contact-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.svc-info__contact-phone {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  text-decoration: none;
}

/* Service Why-Choose Section */
.svc-why {
  width: 100%;
  padding: 40px 100px 80px;
}

.svc-why__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.svc-why__image {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  min-height: 280px;
}

.svc-why__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-why__content {
  flex: 1.4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svc-why__title {
  line-height: 1.2;
  color: #1a1a2e;
}

.svc-why__text {
  line-height: 1.7;
  color: #555;
}
.page-section ul{
	list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
 
}
.page-template-page-city .banner__btn{
	    margin: 2rem 0 0;
}
.page-template-page-city .page-section li::before {
/*     content: "";
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M20.285 6.709a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9.5 15.914l9.293-9.293a1 1 0 0 1 1.492.088z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain; */
	
	
	content: "";
width: 20px;
height: 20px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23276C03'/%3E%3Cpath d='M17.5 8.5L10.5 15.5L6.5 11.5' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
}
.page-section li{
	    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
}
.page-section{
    gap: 0.7rem;
    display: grid;	
}
.svc-why__list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.svc-why__list li {
  position: relative;
  padding-left: 30px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a2e;
}

.svc-why__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23276C03' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Service Why – CTA card */
.svc-why__cta {
  width: 100%;
  margin: 16px 0 0;
  background-color: #ffffff;
  border: 1px solid #FFEDD5;
  border-radius: 20px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(34, 63, 15, 0.06);
}

.svc-why__cta-info {
  display: flex;
/*   align-items: center; */
  gap: 18px;
  flex: 1 1 320px;
}

.svc-why__cta-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFA500 0%, #276C03 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(39, 108, 3, 0.25);
}

.svc-why__cta-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #1a1a2e;
  margin: 0 0 4px;
}

.svc-why__cta-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #888;
  margin: 0;
}

.svc-why__cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  flex-shrink: 0;
}

.svc-why__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  background-color: #223F0F;
  padding: 14px 28px;
  border-radius: 40px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
}

.svc-why__cta-btn:hover {
  background-color: #1a3309;
  transform: translateY(-2px);
}

.svc-why__cta-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #276C03;
  background-color: #ffffff;
  border: 1.5px solid #FFEDD5;
  padding: 12px 26px;
  border-radius: 40px;
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s, transform 0.3s;
}

.svc-why__cta-phone svg {
  color: #FFA500;
}

.svc-why__cta-phone:hover {
  border-color: #FFA500;
  color: #1f5602;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .svc-why__cta {
    padding: 22px;
    gap: 20px;
  }

  .svc-why__cta-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .svc-why__cta-btn,
  .svc-why__cta-phone {
    justify-content: center;
  }
}

.svc-why__brochure {
  flex: 1;
  background-color: #FFEDD5;
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: flex-start;
}

.svc-why__brochure-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #1a1a2e;
}

.svc-why__brochure-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.svc-why__brochure-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.svc-why__brochure-text {
  line-height: 1.6;
  color: #555;
}

.svc-why__brochure-link {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #276C03;
  text-decoration: underline;
  align-self: flex-start;
  transition: color 0.3s;
}

.svc-why__brochure-link:hover {
  color: #1f5602;
}

/* Contact Map Section */
.contact-map {
  width: 100%;
  line-height: 0;
}

.contact-map__frame {
  width: 100%;
  height: 500px;
  border: 0;
  display: block;
	border-radius: 10px !important;
    border: 1px solid #ffa500 !important;
}

/* Contact Section */
.contact {
  width: 100%;
  padding: 80px 100px;
}

.contact__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.contact__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.contact__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 8px 22px;
  display: inline-block;
  border-radius: 30px;
}

.contact__title {
  line-height: 1.2;
  color: #1a1a2e;
}

.contact__text {
  line-height: 1.7;
  color: #555;
}

.contact__details {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: row;
    gap: 25px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact__detail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffedd1;
  padding: 1.2rem;
  border-radius: 10px;
  border: 1px solid #ffa500;
}
.contact__detail a {
  text-decoration: none;
}
/* Make the whole detail box a link (its single inner <a> covers the li). */
.contact__detail a::after {
  content: "";
  position: absolute;
  inset: 0;
}


.contact__icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: #FFA500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact__detail-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact__detail-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1a1a2e;
}

.contact__detail-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #1a1a2e;
/*   text-decoration: underline; */
  transition: color 0.3s;
}

.contact__detail-link:hover {
  color: #276C03;
}

.contact__detail-value {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #555;
  text-decoration: none;
  transition: color 0.3s;
}

a.contact__detail-value:hover {
  color: #276C03;
}

.contact__form {
  flex: 1;
    background-color: #ffa50021;
    border-radius: 16px;
    padding: 32px;
    font-family: 'Inter';
    border: 1px solid #ffa500;
}

.contact__form-row {
  display: flex;
  gap: 16px;
}

.contact__form-row .contact__input {
  flex: 1;
}

.contact__input {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #1a1a2e;
  background-color: #ffffff;
  border: 0;
  border-radius: 8px;
  padding: 16px 20px;
  outline: none;
  width: 100%;
  transition: box-shadow 0.2s;
}

.contact__input::placeholder {
  color: #999;
}

.contact__input:focus {
  box-shadow: 0 0 0 2px #FFA500;
}

.contact__textarea {
  resize: vertical;
  min-height: 140px;
  font-family: 'Inter', sans-serif;
}

.contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  background-color: #276C03;
  border: 0;
  border-radius: 30px;
  padding: 16px 28px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  margin-top: 4px;
}

.contact__submit:hover {
  background-color: #1f5602;
  transform: translateY(-2px);
}

.contact__submit-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tech / Modern Equipment Section */
.tech {
  width: 100%;
  padding: 80px 100px;
  background: linear-gradient(135deg, rgba(229, 238, 219, 0.5) 0%, #FFFFFF 100%);
}

.tech__container {
  max-width: 1350px;
  margin: 0 auto;
}

.tech__header {
/*   text-align: center; */
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.tech__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 6px 18px;
  border-radius: 30px;
}

.tech__title {
  line-height: 1.3;
  color: #1a1a2e;
}

.tech__text {
  line-height: 1.6;
  color: #555;
  max-width: 620px;
}

.tech__body {
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.tech__features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.tech__card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tech__icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: #276C03;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tech__card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tech__card-title {
  color: #1a1a2e;
}

.tech__card-text {
  line-height: 1.55;
  color: #555;
}

.tech__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  background-color: #276C03;
  padding: 10px 12px 10px 22px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
  margin-top: 8px;
}

.tech__btn:hover {
  background-color: #1f5602;
  transform: translateY(-2px);
}

.tech__btn-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #FFA500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tech__image {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
}

.tech__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Team Section */
.team {
  width: 100%;
  padding: 80px 100px;
}

.team__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 56px;
  align-items: center;
}

.team__image {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  align-self: stretch;
}

.team__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.team__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 6px 18px;
  border-radius: 30px;
}

.team__title {
  line-height: 1.3;
  color: #1a1a2e;
}

.team__text {
  line-height: 1.6;
  color: #555;
}

.team__features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.team__feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.team__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #276C03;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.team__feature-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team__feature-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1a1a2e;
}

.team__feature-text {
  line-height: 1.55;
  color: #555;
}

/* Coverage Areas Section */
.coverage {
  width: 100%;
  padding: 80px 100px;
}

.coverage__container {
  max-width: 1350px;
  margin: 0 auto;
}

.coverage__header {
  text-align: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.coverage__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 6px 18px;
  border-radius: 30px;
}

.coverage__title {
  line-height: 1.25;
  color: #1a1a2e;
}

.coverage__text {
  line-height: 1.6;
  color: #555;
  max-width: 620px;
}

.coverage__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.coverage__card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
}

.coverage__card2 {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 22px;
  display: flex;
/*   flex-direction: column; */
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
}

.coverage__card:hover,
.coverage__card2:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* .coverage__card2 {
  align-items: center;
} */

.coverage__card2 .coverage__icon {
  transition: background-color 0.3s;
}

.coverage__card2:hover .coverage__icon {
  background-color: #276C03;
}

.coverage__card2:hover .coverage__icon svg path,
.coverage__card2:hover .coverage__icon svg circle {
  stroke: #ffffff;
}

.coverage__card-arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #276C03;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
}

.coverage__card2:hover .coverage__card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.coverage__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #E5EEDB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.coverage__card-title {
  color: #1a1a2e;
}

.coverage__card-text {
  line-height: 1.55;
  color: #666;
  flex: 1;
}

.coverage__card-link {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #276C03;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
/*   margin-top: 4px; */
  transition: color 0.3s, gap 0.3s;
}

.coverage__card-link:hover {
  color: #1f5602;
  gap: 10px;
}

.coverage__footer {
  margin-top: 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.coverage__footer-text {
  color: #555;
}

.coverage__footer-link {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #276C03;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s, gap 0.3s;
}

.coverage__footer-link:hover {
  color: #1f5602;
  gap: 12px;
}
/* .page-section-1 p {
    color: #fff !important;
} */

.page-template-page-service-details .page-section-1 li,
.page-template-page-service-details .page-section-3 li {
    color: #555 !important;
}
/* Specialized Services Section */
.specialized {
  width: 100%;
  padding: 80px 100px;
  background-color: #FAFAF8;
}
.page-template-page-city .about-banner__card{
       padding: 3rem 0 0;
    position: relative;
    top: 1rem;
}
.page-template-page-city .page-section-1 li {
    color: #555 !important;
	margin-bottom: 15px;
}
/* .page-template-page-city .page-section-1 p {
    color: #fff !important;
} */

/* Removed with the white section-2 heading above: same obsolete dark band. */

.specialized__container {
  max-width: 1350px;
  margin: 0 auto;
}

.specialized__header {
  text-align: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.specialized__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 6px 18px;
  border-radius: 30px;
}

.specialized__title {
  line-height: 1.25;
  color: #1a1a2e;
}

.specialized__text {
  line-height: 1.6;
  color: #555;
  max-width: 620px;
}

.specialized__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.specialized__card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
}

.specialized__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.specialized__icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: #FFA500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.specialized__card-title {
  color: #1a1a2e;
}

.specialized__card-text {
  line-height: 1.6;
  color: #555;
}

.specialized__list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 14px;
}

.specialized__list li {
  position: relative;
  padding-left: 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

.specialized__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23276C03' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.specialized__link {
  margin-top: auto;
  padding-top: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #276C03;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s, gap 0.3s;
}

.specialized__link:hover {
  color: #1f5602;
  gap: 10px;
}

/* Trusted / Why Choose Us Section */
.trusted {
  width: 100%;
  background-color: #223F0F;
  padding: 80px 100px;
}

.trusted__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
}

.trusted__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.trusted__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 6px 18px;
  border-radius: 30px;
}

.trusted__title {
  line-height: 1.2;
  color: #ffffff;
}

.trusted__text {
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.trusted__features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trusted__feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px 18px;
}

.trusted__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trusted__feature-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.trusted__feature-title {
  color: #ffffff;
}

.trusted__feature-text {
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.trusted__visual {
  flex: 1;
  position: relative;
  align-self: stretch;
  display: flex;
}

.trusted__image {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.trusted__image img {
  width: 68%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trusted__stat {
  position: absolute;
  bottom: 24px;
  left: -32px;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  min-width: 200px;
}

.trusted__stat-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #1a1a2e;
  line-height: 1;
}

.trusted__stat-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}

/* Quote Section */
.quote {
  width: 100%;
  background-color: #223F0F;
  padding: 60px 100px 80px;
}

.quote__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.quote__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
}

.quote__title {
  line-height: 1.2;
  color: #ffffff;
}

.quote__text {
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.quote__contacts {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote__contact {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px 18px;
}

.quote__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quote__contact-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote__contact-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
}

.quote__contact-meta {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.quote__contact-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
  margin-top: 2px;
  transition: color 0.3s;
}

a.quote__contact-value:hover {
  color: #FFA500;
}

.quote__form {
  flex: 1;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 32px;
/*   display: flex; */
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
	font-family:'Inter';
}

.quote__form-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.quote__form-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #1a1a2e;
}

.quote__form-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #777;
}

.quote__form-row {
  display: flex;
  gap: 14px;
}

.quote__form-row .quote__field {
  flex: 1;
}

.quote__field {
  position: relative;
}

.quote__field input,
.quote__field select,
.quote__field textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #1a1a2e;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 13px 40px 13px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.quote__field textarea {
  resize: vertical;
  min-height: 96px;
  font-family: 'Inter', sans-serif;
}

.quote__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
}

.quote__field input::placeholder,
.quote__field textarea::placeholder {
  color: #999;
}

.quote__field input:focus,
.quote__field select:focus,
.quote__field textarea:focus {
  border-color: #276C03;
  box-shadow: 0 0 0 2px rgba(39, 108, 3, 0.12);
}

.quote__field-icon {
  position: absolute;
  right: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.quote__field--textarea .quote__field-icon {
  top: 14px;
}

.quote__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  background-color: #276C03;
  border: 0;
  border-radius: 10px;
  padding: 15px 24px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  margin-top: 6px;
}

.quote__submit:hover {
  background-color: #1f5602;
  transform: translateY(-2px);
}

.quote__submit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quote__legal {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-top: 4px;
}

/* About Berlin Section */
.about-berlin {
  width: 100%;
  padding: 80px 100px;
}

.about-berlin__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.about-berlin__content {
  flex: 1.4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.about-berlin__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 6px 18px;
  border-radius: 30px;
}

.about-berlin__title {
  line-height: 1.25;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.about-berlin__text {
  line-height: 1.7;
  color: #444;
}

.about-berlin__facts {
  flex: 1;
  background-color: #E5EEDB4D;
  border: 1px solid #335E2633;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-berlin__facts-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1a1a2e;
}

.about-berlin__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.about-berlin__fact {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #335E2633;
}

.about-berlin__fact:last-child {
  border-bottom: 0;
}

.about-berlin__fact:first-child {
  padding-top: 0;
}

.about-berlin__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: #276C03;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-berlin__fact-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.about-berlin__fact-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #1a1a2e;
}

.about-berlin__fact-text {
  line-height: 1.55;
  color: #555;
}

/* Regulations Section */
.regulations {
  width: 100%;
  padding: 80px 100px;
}

.regulations__container {
  max-width: 1350px;
  margin: 0 auto;
}

.regulations__header {
  text-align: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.regulations__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 6px 18px;
  border-radius: 30px;
}

.regulations__title {
  line-height: 1.25;
  color: #1a1a2e;
}

.regulations__text {
  line-height: 1.6;
  color: #555;
  max-width: 680px;
}

.regulations__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.regulations__card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
}

.regulations__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.regulations__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.regulations__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #E5EEDB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.regulations__card-title {
  color: #1a1a2e;
}

.regulations__card-text {
  line-height: 1.6;
  color: #555;
}

.regulations__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.regulations__list li {
  position: relative;
  padding-left: 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
}

.regulations__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23276C03' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Districts Section */
.districts {
  width: 100%;
  padding: 80px 100px;
}

.districts__container {
  max-width: 1350px;
  margin: 0 auto;
}

.districts__header {
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.districts__sub-heading {
  color: #FFA500;
  background-color: #FFEDD5;
  padding: 6px 18px;
  border-radius: 30px;
}

.districts__title {
  line-height: 1.25;
  color: #1a1a2e;
}

.districts__text {
  line-height: 1.6;
  color: #555;
  max-width: 620px;
}

.districts__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.districts__card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  gap: 28px;
  align-items: stretch;
}

.districts__card--reverse {
  flex-direction: row-reverse;
}

.districts__content {
  flex: 1.4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.districts__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.districts__pin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #276C03;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.districts__card-title {
  color: #1a1a2e;
}

.districts__card-text {
  line-height: 1.6;
  color: #555;
}

.districts__tags {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.districts__tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #1a1a2e;
}

.districts__image {
  flex: 0 0 362px;
  width: 362px;
  height: 256px;
  border-radius: 10px;
  overflow: hidden;
}

.districts__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===========================================================================
 * Click-to-load map (he_map_embed)
 *
 * Global, because the footer uses it on every page. The placeholder fills
 * whatever box it is dropped into, and the iframe that replaces it does the
 * same, so the layout never shifts when the map loads.
 * ========================================================================= */
.he-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  overflow: hidden;
  background-color: #E8EDE3;
}

.he-map__load {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
}

/* Faux street grid. Two sets of lines at different spacings read as a map at a
   glance and cost nothing — a real static map tile would be another request,
   and on Google's case another API key. */
.he-map__grid {
  position: absolute;
  inset: 0;
  background-color: #E8EDE3;
  background-image:
    linear-gradient(rgba(39, 108, 3, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 108, 3, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(39, 108, 3, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 108, 3, 0.05) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

/* Fills the box rather than floating in it.
   This was a 320px white card centred inside whatever container it was dropped
   into, which left a band of the faux-grid showing down both sides and above
   and below — a card inside a box inside a box. The prompt now sits directly
   on the grid, so the whole area is the placeholder and there is no dead space
   around it at any width. */
.he-map__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 22px 26px;
}

.he-map__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #eaf3e4;
  color: #276C03;
}

.he-map__addr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: #666;
}

.he-map__addr strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: #1a1a2e;
}

.he-map__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 20px;
  border-radius: 30px;
  background-color: #FFA500;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  transition: background-color 0.25s, transform 0.25s;
}

.he-map__load:hover .he-map__cta {
  background-color: #e69500;
  transform: translateY(-2px);
}

.he-map__load:focus-visible {
  outline: 3px solid #FFA500;
  outline-offset: -3px;
}

/* #8a8a8a was chosen against white; on the pale grid it drops to roughly 2.8:1
   and stops being readable. */
.he-map__note {
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: #5f665a;
}

/* The real frame, once loaded, and the <noscript> copy. */
.he-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===================== Floating Contact Widget ===================== */
.floating-contact {
  position: fixed;
  right: 0;
  bottom: 50%;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 999;
}

.floating-contact__btn {
  display: flex;
  align-items: center;
  height: 54px;
  width: 54px;
  border-radius: 6px 0 0 6px;
  background: #276C03;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(39, 108, 3, 0.35);
  transition: width 0.35s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.floating-contact__btn:hover,
.floating-contact__btn:focus-visible {
  width: 240px;
  background: #1d5402;
  box-shadow: 0 8px 22px rgba(39, 108, 3, 0.45);
  outline: none;
}

.floating-contact__btn:nth-child(2):hover,
.floating-contact__btn:nth-child(2):focus-visible {
  width: 320px;
}

.floating-contact__btn--whatsapp {
  background: #276c03;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.floating-contact__btn--whatsapp:hover,
.floating-contact__btn--whatsapp:focus-visible {
  background: #276C03;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
}

.floating-contact__icon {
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-contact__icon svg {
  width: 22px;
  height: 22px;
}

.floating-contact__label {
  flex: 1 1 auto;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  padding-right: 0;
  transition: opacity 0.25s ease 0.05s, padding 0.35s ease;
}

.floating-contact__btn:hover .floating-contact__label,
.floating-contact__btn:focus-visible .floating-contact__label {
  opacity: 1;
  padding-right: 20px;
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #276C03;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s, visibility 0s linear 0.3s;
  z-index: 998;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s, visibility 0s linear 0s;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: #1d5402;
  outline: none;
}
.pfaq-question:hover{
	  background-color: #829961 !important;
	 color: #fff;
}
.pfaq-question{
	border-radius: 10px;
}
.open .pfaq-question{
	  background-color: #829961 !important;
    color: #fff;
border-radius: 10px 10px 0 0 !important;
}
.pfaq-item.open .pfaq-answer {
    max-height: 2000px;
    padding: 12px 16px;
    background: #fff;
}
.pfaq-item.open .pfaq-answer {

    border-radius: 0 0 10px 10px;
}
.pfaq-item {
  
    border: 1px solid #dddddd00 !important;
}
/* `.page-template-standorte { padding: 7rem 0 0 }` was here.
   It is a BODY class, so the padding pushed the entire document down — header
   included — leaving a band of page background above the logo bar at every
   width. It was reaching for the offset that the fixed mobile logo bar needs,
   which is now handled properly by --he-mobile-header inside the Standorte
   hero itself (assets/css/standorte.css), and only below 1024px where that bar
   actually exists. */
.page-id-704 .available-cta{
 display:none}
.page-id-704 .focus{
display:none}

.page-id-708 .focus__container--reverse{
	    display: none;
}
.page-id-710 .focus__container--reverse{
	    display: none;
}
.page-id-706 li{
	    color: #555 !important;
}
.page-id-708 li{
	    color: #fff !important;
}

.subVideo{
	    position: relative;
    overflow: hidden;
flex: 1;
}


/* ===========================================================================
 * Visually hidden
 *
 * WordPress core, WPForms and the comment form all emit .screen-reader-text
 * for labels that should be read aloud but not shown — and this theme never
 * defined it, so that text has been rendering as ordinary visible copy. This
 * is the standard WordPress implementation; clip-path plus a 1px box keeps the
 * text reachable by a screen reader, which display:none would not.
 * ========================================================================= */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  word-wrap: normal !important;
}

/* Skip links and the like must become visible again when tabbed to. */
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ===========================================================================
 * Image credits ([he_bildlizenzen], used on the Impressum)
 * ========================================================================= */
.he-credits {
  margin: 24px 0;
}

.he-credits__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: #1a1a2e;
  margin: 0 0 8px;
}

.he-credits__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
}

.he-credits__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #276C03;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.he-credits__link:hover,
.he-credits__link:focus-visible {
  color: #FFA500;
}

/* The arrow marks the link as leaving the site. It is decorative — the spoken
   warning is the .screen-reader-text inside the same link. */
.he-credits__ext {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.he-credits__link:hover .he-credits__ext {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* The comma belongs to the sentence, not to the link before it — inside the
   <a> it would be underlined and would be read out as part of the link text. */
.he-credits__sep {
  margin-left: -4px;
  color: #555;
}

/* 404 Not Found
 *
 * `section.error404`, never a bare `.error404`. WordPress puts `error404` on
 * the BODY as well on a 404 page, so an unqualified selector padded the whole
 * document and pushed the header away from the top of the window — the same
 * trap `.page-template-standorte` fell into. The element qualifier costs
 * nothing and keeps the rule on the section it was written for. */
section.error404 {
  padding: 100px 0px;
}

.error404__container {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.error404__code {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  color: #FFA500;
}

.error404__title {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: var(--heading-size);
  margin: 16px 0 12px;
}

.error404__text {
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: #555;
  margin: 0 auto 32px;
  max-width: 560px;
}

.error404__search {
  display: flex;
  max-width: 480px;
  margin: 0 auto 32px;
  gap: 8px;
}

.error404__search-input {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid #ddd;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
}

.error404__search-input:focus {
  border-color: #FFA500;
}

.error404__search-btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  background-color: #FFA500;
  padding: 14px 24px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.error404__search-btn:hover {
  background-color: #e69500;
}

.error404__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.error404__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #FFA500;
  text-decoration: none;
}

.error404__link:hover {
  text-decoration: underline;
}

#wpforms-751 .wpforms-field input,
#wpforms-751 .wpforms-field textarea,
#wpforms-751 .wpforms-field select {
    width: 100% !important;
    max-width: 100% !important;
    font-family: 'Poppins', sans-serif;
}
.wpforms-submit{
	    font-family: 'Poppins', sans-serif !important;
}
.clientsIMG{
	height: 450px;
    width: auto;
}

.about-banner__crumb a {
    color: #e69500 !important; /* Purple */
    text-decoration: none;
    transition: color 0.3s ease;
}
.page-id-1532 .solutions__container{
	padding: 6rem 0;
}
.page-id-1532 .solutions__container a{
	 color: #1f5602;
    text-decoration: none;
}
.post-1595 {
	    padding: 7rem 0
}

/* ===========================
   WPForms 1510 - Input Styles
   =========================== */

/* Inputs, Selects & Textarea */
#wpforms-form-1510 input[type="text"],
#wpforms-form-1510 input[type="email"],
#wpforms-form-1510 input[type="tel"],
#wpforms-form-1510 input[type="number"],
#wpforms-form-1510 select,
#wpforms-form-1510 textarea {
    border: 1px solid #cccccc !important;
    border-radius: 10px !important;
    color: #777777 !important;
    background: #fff;
    box-shadow: none !important;
    transition: border-color .3s ease;
}

/* Placeholder */
#wpforms-form-1510 input::placeholder,
#wpforms-form-1510 textarea::placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* Select Placeholder */
#wpforms-form-1510 select {
    color: #777777 !important;
    border-color: #cccccc !important;
}

/* Hover + Focus — border turns blue */
#wpforms-form-1510 input:hover,
#wpforms-form-1510 textarea:hover,
#wpforms-form-1510 select:hover,
#wpforms-form-1510 input:focus,
#wpforms-form-1510 textarea:focus,
#wpforms-form-1510 select:focus {
    border-color: #1a73e8 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ===========================
   Submit Button
   =========================== */

#wpforms-form-1510 .wpforms-submit {
    background: #223F0F !important;
    border: 1px solid #223F0F !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 12px 30px !important;
    transition: all .3s ease;
	box-shadow: 0 4px 0px -1px rgb(34 63 15 / 30%);
}

/* Hover */
#wpforms-form-1510 .wpforms-submit:hover {
    background: #FFA500 !important;
    border-color: #FFA500 !important;
    color: #fff !important;
}

/* Active / Clicked */
#wpforms-form-1510 .wpforms-submit:active,
#wpforms-form-1510 .wpforms-submit:focus {
    background: #FFA500 !important;
    border-color: #FFA500 !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}
#wpforms-form-1510 .wpforms-field.wpforms-field-content .wpforms-field-row a {
    text-decoration: underline;
    color: #E69500 !important;
}

#wpforms-form-1510 .wpforms-field.wpforms-field-content .wpforms-field-row a:hover {
    color: #FFA500 !important;
}

/* Inputs */
#wpforms-form-754 input[type="text"],
#wpforms-form-754 input[type="email"],
#wpforms-form-754 input[type="tel"],
#wpforms-form-754 input[type="number"],
#wpforms-form-754 select,
#wpforms-form-754 textarea {
    border: 1px solid #cccccc !important;
    border-radius: 10px !important;
    color: #777777 !important;
    background: #fff;
    box-shadow: none !important;
    transition: border-color .3s ease;
}

/* Placeholder */
#wpforms-form-754 input::placeholder,
#wpforms-form-754 textarea::placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* Select */
#wpforms-form-754 select {
    color: #777777 !important;
    border-color: #cccccc !important;
}

/* Hover + Focus — border turns blue */
#wpforms-form-754 input:hover,
#wpforms-form-754 textarea:hover,
#wpforms-form-754 select:hover,
#wpforms-form-754 input:focus,
#wpforms-form-754 textarea:focus,
#wpforms-form-754 select:focus {
    border-color: #1a73e8 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Submit Button */
#wpforms-form-754 .wpforms-submit {
    background: #FFA500 !important;
    border: 1px solid #FFA500 !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 12px 30px !important;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.25);
    transition: all .3s ease;
}

#wpforms-form-754 .wpforms-submit:hover,
#wpforms-form-754 .wpforms-submit:focus,
#wpforms-form-754 .wpforms-submit:active {
    background: #223F0F !important;
    border-color: #223F0F !important;
    color: #fff !important;
}

/* Privacy Policy Link */
#wpforms-form-754 .wpforms-field.wpforms-field-content .wpforms-field-row a {
    text-decoration: underline;
    color: #FFA500 !important;
}

#wpforms-form-754 .wpforms-field.wpforms-field-content .wpforms-field-row a:hover {
    color: #223F0F !important;
}


/* Inputs */
#wpforms-form-751 input[type="text"],
#wpforms-form-751 input[type="email"],
#wpforms-form-751 input[type="tel"],
#wpforms-form-751 input[type="number"],
#wpforms-form-751 select,
#wpforms-form-751 textarea {
  border: 1px solid #cccccc !important;
    border-radius: 10px !important;
    color: #777777 !important;
    background: #fff;
    box-shadow: none !important;
    transition: border-color .3s ease;
}

/* Placeholder */
#wpforms-form-751 input::placeholder,
#wpforms-form-751 textarea::placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* Select */
#wpforms-form-751 select {
    color: #777777 !important;
    border-color: #cccccc !important;
}

/* Hover + Focus — border turns blue */
#wpforms-form-751 input:hover,
#wpforms-form-751 textarea:hover,
#wpforms-form-751 select:hover,
#wpforms-form-751 input:focus,
#wpforms-form-751 textarea:focus,
#wpforms-form-751 select:focus {
    border-color: #1a73e8 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Submit Button */
#wpforms-form-751 .wpforms-submit {
    background: #1F5602 !important;
    border: 1px solid #1F5602 !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 12px 30px !important;
    box-shadow: none !important;
    transition: all .3s ease;
}

#wpforms-form-751 .wpforms-submit:hover,
#wpforms-form-751 .wpforms-submit:focus,
#wpforms-form-751 .wpforms-submit:active {
    background: #FFA500 !important;
    border-color: #FFA500 !important;
    color: #fff !important;
}

/* Privacy Policy Link */
#wpforms-form-751 .wpforms-field.wpforms-field-content .wpforms-field-row a {
    text-decoration: underline;
    color: #1F5602 !important;
}

#wpforms-form-751 .wpforms-field.wpforms-field-content .wpforms-field-row a:hover {
    color: #FFA500 !important;
}

/* ===========================================================================
   Shared: equal vertical spacing between fields on every site form.
   WPForms adds uneven top/bottom padding + margins per field; this resets them
   to one consistent gap so the rows line up evenly on all forms.
   =========================================================================== */
#wpforms-form-751 .wpforms-field,
#wpforms-form-1510 .wpforms-field {
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.page-template-template-service-details-oldsite .page-section li {
	color: #555 !important;
}
.page-id-1023 .allsection_wrapper > .focus:nth-of-type(8) {
    display: none;
}