/* =====================================================================
   Prorec — Modern Dark Theme
   Palette: pure black + gray scale, orange (#FD5523) reserved for CTA
   Loaded last so it wins the cascade.
   ===================================================================== */

:root {
  /* override template tokens */
  --tanspot-black: #000000;
  --tanspot-black-rgb: 0, 0, 0;
  --tanspot-primary: #0a0a0a;
  --tanspot-primary-rgb: 10, 10, 10;
  --tanspot-gray: #b0b0b0;
  --tanspot-gray-rgb: 176, 176, 176;
  --tanspot-bdr-color: #1f1f1f;
  --tanspot-bdr-color-rgb: 31, 31, 31;

  /* prorec scale */
  --pr-bg-0:     #000000;   /* page */
  --pr-bg-1:     #0a0a0a;   /* alternate section band */
  --pr-bg-2:     #111111;   /* card */
  --pr-bg-3:     #161616;   /* card hover / popovers */
  --pr-bg-4:     #1a1a1a;   /* inputs */
  --pr-border:   #1f1f1f;
  --pr-border-2: #2a2a2a;
  --pr-text-1:   #ffffff;   /* headings */
  --pr-text-2:   #c9c9c9;   /* body */
  --pr-text-3:   #8a8a8a;   /* muted */
  --pr-accent:   #FD5523;
  --pr-accent-2: #ff7a4d;
}

/* =====================================================================
   1. GLOBAL BASE
   ===================================================================== */
html,
body,
body.boxed-wrapper,
body.boxed-wrapper .page-wrapper,
.page-wrapper {
  background-color: var(--pr-bg-0) !important;
  color: var(--pr-text-2);
}

::selection { background: var(--pr-accent); color: #fff; }

a              { color: var(--pr-text-1); transition: color .25s ease; }
a:hover, a:focus { color: var(--pr-accent); }

p, li, span, address, blockquote, label, small, td, th { color: var(--pr-text-2); }
h1, h2, h3, h4, h5, h6,
.section-title__title { color: var(--pr-text-1); }

hr, table, th, td { border-color: var(--pr-border) !important; }

/* preloader */
.preloader, .loader.js-preloader { background-color: #000 !important; }

/* scrollbar */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: #000; }
::-webkit-scrollbar-thumb   { background: #1f1f1f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--pr-accent); }

/* =====================================================================
   2. BUTTONS  (orange = primary action)
   ===================================================================== */
.thm-btn {
  background-color: var(--pr-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--pr-accent) !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.thm-btn::before,
.thm-btn::after { background-color: #ffffff !important; }
.thm-btn:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--pr-accent) !important;
}
.thm-btn > span {
  background-color: #ffffff !important;
  color: var(--pr-accent) !important;
  transition: background-color .25s ease, color .25s ease;
}
.thm-btn > span > i { color: var(--pr-accent) !important; }
.thm-btn:hover > span {
  background-color: var(--pr-accent) !important;
  color: #ffffff !important;
}
.thm-btn:hover > span > i { color: #ffffff !important; }

/* outline / secondary button */
.thm-btn--outline,
.thm-btn-two {
  background-color: transparent !important;
  border: 1px solid var(--pr-accent) !important;
  color: var(--pr-accent) !important;
}
.thm-btn--outline:hover,
.thm-btn-two:hover {
  background-color: var(--pr-accent) !important;
  color: #ffffff !important;
}

/* =====================================================================
   3. HEADER  (main-header-three)
   ===================================================================== */
.main-header-three { background-color: var(--pr-bg-0); }

/* 3a. top bar */
.main-menu-three__top {
  background-color: #111111 !important;
  border-bottom: 1px solid var(--pr-border);
}
.main-menu-three__top-inner { background-color: transparent !important; }

.main-menu-three__contact-list li,
.main-menu-three__contact-list li p,
.main-menu-three__contact-list li a {
  color: var(--pr-text-2) !important;
}
.main-menu-three__contact-list li a:hover { color: var(--pr-accent) !important; }
.main-menu-three__contact-list li .icon i,
.main-menu-three__contact-list li .icon span {
  color: var(--pr-accent) !important;
}

/* language switcher */
.main-menu-three__top-right { color: var(--pr-text-2); }
.main-menu-three__language-switcher .icon span { color: var(--pr-accent); }
.main-menu-three__language-switcher select,
.main-menu-three__language-switcher .selectmenu,
.language-switcher select {
  background-color: transparent !important;
  color: var(--pr-text-1) !important;
  border: none !important;
}
.ui-selectmenu-button.ui-button {
  background: transparent !important;
  border: 1px solid var(--pr-border) !important;
  color: var(--pr-text-1) !important;
}
.ui-selectmenu-menu .ui-menu {
  background: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border) !important;
  color: var(--pr-text-2) !important;
}
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper { color: var(--pr-text-2) !important; }
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active {
  background: var(--pr-bg-3) !important;
  color: var(--pr-accent) !important;
  border: none !important;
}

/* social icons in header */
.main-menu-three__social a {
  color: var(--pr-text-1);
  background-color: transparent;
  border: 1px solid var(--pr-border);
  transition: all .25s ease;
  position: relative;
}
/* kill template's white pill ::before so it doesn't paint a white bg on hover */
.main-menu-three__social a::before { display: none !important; }
.main-menu-three__social a:hover {
  color: var(--pr-accent) !important;
  background-color: rgba(253, 85, 35, 0.12) !important;
  border-color: var(--pr-accent) !important;
}
.main-menu-three__social a svg { fill: currentColor; }

/* 3b. nav row */
.main-menu,
.main-menu-three,
.main-menu-three__wrapper,
.main-menu-three__wrapper-inner,
.main-menu-three__main-menu-box {
  background-color: var(--pr-bg-0) !important;
}
.main-menu-three__logo { background-color: transparent !important; }

/* kill the template's orange angled bars on the nav row */
.main-menu-three__left,
.main-menu-three__right,
.main-menu-three__right-content,
.main-menu-three__logo {
  background-color: transparent !important;
  clip-path: none !important;
}
.main-menu-three__left:before,
.main-menu-three__right:before {
  display: none !important;
  background-color: transparent !important;
  content: none !important;
}
.main-menu-three__right-content { padding-left: 0 !important; }
.main-menu-three__logo { padding-right: 0 !important; }

/* nav links */
.main-menu .main-menu__list > li > a,
.stricky-header .main-menu__list > li > a {
  color: var(--pr-text-1);
  transition: color .25s ease;
}
.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a,
.stricky-header .main-menu__list > li.current > a,
.stricky-header .main-menu__list > li:hover > a {
  color: var(--pr-accent);
}

/* dropdowns */
.main-menu .main-menu__list > li > ul,
.main-menu .main-menu__list > li > ul > li > ul,
.stricky-header .main-menu__list > li > ul,
.stricky-header .main-menu__list > li > ul > li > ul {
  background-color: var(--pr-bg-2);
  border: 1px solid var(--pr-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.main-menu .main-menu__list > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > a {
  color: var(--pr-text-2);
  border-bottom: 1px solid var(--pr-border);
}
.main-menu .main-menu__list > li > ul > li:hover > a,
.stricky-header .main-menu__list > li > ul > li:hover > a {
  color: var(--pr-accent);
  background-color: var(--pr-bg-3);
}

/* 3c. sticky header */
.stricky-header,
.stricky-header.main-menu.main-menu-three {
  background-color: rgba(0, 0, 0, 0.92) !important;
  border-bottom: 1px solid var(--pr-border);
  backdrop-filter: blur(8px);
}

/* 3d. mobile nav drawer */
.mobile-nav__content        { background-color: var(--pr-bg-1); }
.mobile-nav__close i        { color: var(--pr-text-1); }
.mobile-nav__container ul li a { color: var(--pr-text-2); }
.mobile-nav__container ul li a:hover,
.mobile-nav__container ul li.current > a { color: var(--pr-accent); }
.mobile-nav__container ul li ul { border-top: 1px solid var(--pr-border); }
.mobile-nav__social a       { color: var(--pr-text-1); }
.mobile-nav__social a:hover { color: var(--pr-accent); }
.mobile-nav__contact li,
.mobile-nav__contact li a   { color: var(--pr-text-2); }
.mobile-nav__contact li i   { color: var(--pr-accent); }

/* =====================================================================
   4. HERO  (banner-two)
   ===================================================================== */
.banner-two { background-color: var(--pr-bg-0) !important; }
.banner-two__pattern { opacity: 0.08; }

/* video background */
.banner-two--video { position: relative; overflow: hidden; isolation: isolate; }
.banner-two--video > .container,
.banner-two--video > .row { position: relative; z-index: 2; }

.banner-two__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  border: 0;
  outline: 0;
}

.banner-two__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.75) 60%,
      rgba(0, 0, 0, 0.9) 100%);
}

.banner-two__sub-title,
.banner-two__sub-title span { color: var(--pr-accent) !important; }
.banner-two__title          { color: var(--pr-text-1); }
.banner-two__title span     { color: var(--pr-text-1); }
/* Only the typed (rotating) word and its caret are accent-coloured. */
.banner-two__title-typed,
.banner-two__title .typed-effect,
.banner-two__title .typed-cursor,
.typed-cursor { color: var(--pr-accent) !important; }
.banner-two__text           { color: var(--pr-text-2); }

/* Google Reviews widget */
.g-reviews {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 16px 22px;
  background-color: rgba(17, 17, 17, 0.85);
  border: 1px solid var(--pr-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--pr-text-1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.g-reviews:hover {
  border-color: var(--pr-accent);
  background-color: rgba(22, 22, 22, 0.92);
  transform: translateY(-2px);
  color: var(--pr-text-1);
}
.g-reviews__logo {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff;
  border-radius: 50%;
}
.g-reviews__logo svg { width: 28px; height: 28px; }
.g-reviews__body { display: flex; flex-direction: column; line-height: 1.25; }
.g-reviews__top  { display: flex; align-items: center; gap: 12px; }
.g-reviews__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--pr-text-1);
  letter-spacing: .2px;
}
.g-reviews__rating { display: inline-flex; align-items: center; gap: 8px; }
.g-reviews__rating strong {
  color: var(--pr-text-1);
  font-size: 16px;
  font-weight: 700;
}
.g-reviews__stars { display: inline-flex; gap: 3px; color: #FFC107; font-size: 14px; }
.g-reviews__sub  {
  font-size: 13px;
  color: var(--pr-text-3);
  margin-top: 4px;
}
.g-reviews__sub strong { color: var(--pr-text-2); font-weight: 600; }
.g-reviews__cta {
  margin-left: 6px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pr-accent);
  color: #fff;
  font-size: 13px;
  transition: transform .25s ease;
}
.g-reviews:hover .g-reviews__cta { transform: translateX(3px); }

/* hero contact form box (right side) */
.banner-two__right { z-index: 3; }
.banner-two__form-box {
  background-color: rgba(17, 17, 17, 0.85) !important;
  border: 1px solid var(--pr-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
/* match number + tel inputs to text/email field metrics */
.banner-two__form .input-box input[type="number"],
.banner-two__form .input-box input[type="tel"] {
  position: relative;
  display: block;
  height: 55px;
  width: 100%;
  padding-left: 20px;
  padding-right: 40px;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  border-radius: 10px;
  font-family: var(--tanspot-font);
}
/* hide native number spinner */
.banner-two__form .input-box input[type="number"]::-webkit-outer-spin-button,
.banner-two__form .input-box input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.banner-two__form .input-box input[type="number"] { -moz-appearance: textfield; }
.banner-two__form .input-box input[type="text"],
.banner-two__form .input-box input[type="email"],
.banner-two__form .input-box input[type="number"],
.banner-two__form .input-box input[type="tel"],
.banner-two__form .input-box textarea,
.banner-two__form .input-box .nice-select {
  background-color: var(--pr-bg-4) !important;
  border: 1px solid var(--pr-border) !important;
  color: var(--pr-text-1) !important;
}
.banner-two__form .input-box input::placeholder,
.banner-two__form .input-box textarea::placeholder { color: var(--pr-text-3) !important; }
.banner-two__form .input-box input:focus,
.banner-two__form .input-box textarea:focus,
.banner-two__form .input-box .nice-select.open { border-color: var(--pr-accent) !important; }
.banner-two__form .input-box .icon span::before,
.banner-two__form .input-box .icon i { color: var(--pr-text-3) !important; font-size: 14px; }
.banner-two__form .input-box .nice-select:after { border-color: var(--pr-text-2) !important; }
.banner-two__form .input-box .nice-select .list {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border) !important;
}
.banner-two__form .input-box .nice-select .option { color: var(--pr-text-2) !important; }
.banner-two__form .input-box .nice-select .option:hover,
.banner-two__form .input-box .nice-select .option.focus,
.banner-two__form .input-box .nice-select .option.selected.focus {
  background-color: var(--pr-bg-3) !important;
  color: var(--pr-accent) !important;
}
/* jquery-ui selectmenu fallback inside form */
.banner-two__form .ui-selectmenu-button.ui-button {
  background: var(--pr-bg-4) !important;
  border: 1px solid var(--pr-border) !important;
  color: var(--pr-text-1) !important;
  border-radius: 10px;
  height: 55px;
  line-height: 55px;
}

/* =====================================================================
   5. FEATURE  (feature-two)
   ===================================================================== */
.feature-two { background-color: var(--pr-bg-1) !important; }
.feature-two__single {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  box-shadow: none !important;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.feature-two__single-inner {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.feature-two__single-inner::before { display: none !important; }
.feature-two__single:hover {
  background-color: var(--pr-bg-3) !important;
  border-color: var(--pr-accent);
  transform: translateY(-4px);
}
.feature-two__icon i,
.feature-two__icon span { color: var(--pr-accent); }
.feature-two__title,
.feature-two__title a { color: var(--pr-text-1); }
.feature-two__title a:hover { color: var(--pr-accent); }
.feature-two__text { color: var(--pr-text-2); }
.feature-two__single:hover .feature-two__title a,
.feature-two__single:hover .feature-two__text { color: var(--pr-text-1) !important; }

/* read-more link — was dark-on-dark in the template */
.feature-two__read-more a { color: var(--pr-accent) !important; }
.feature-two__read-more a:hover { color: var(--pr-accent-2) !important; }
.feature-two__read-more a span {
  background-color: var(--pr-accent) !important;
  color: #fff !important;
}
.feature-two__single:hover .feature-two__read-more a { color: var(--pr-accent) !important; }

/* the orange-tinted icon panel — make it deeper so the icon pops on dark */
.feature-two__icon { background-color: rgba(253, 85, 35, 0.15) !important; }
.feature-two__icon:before { background-color: var(--pr-accent) !important; }
.feature-two__icon span { color: #ffffff !important; font-size: 44px; }

/* hide the template's hover background image; replace with an orange glow orb */
.feature-two__shape-1 { display: none !important; }
.feature-two__single { position: relative; overflow: hidden; }
.feature-two__single::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(253, 85, 35, 0.55) 0%,
              rgba(253, 85, 35, 0.25) 35%,
              rgba(253, 85, 35, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .5s ease, transform .8s ease;
  filter: blur(2px);
}
.feature-two__single:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: featureGlowPulse 2.4s ease-in-out infinite;
}
.feature-two__single-inner { position: relative; z-index: 1; }
@keyframes featureGlowPulse {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: .9; }
  50%      { transform: translateX(-50%) scale(1.15); opacity: 1;  }
}

/* the hover-overlay (.feature-two__single-inner:before) was pure black, kill it
   since our card is already dark and overlay made text invisible mid-transition */
.feature-two__single-inner:before { display: none !important; }
.feature-two__single-inner { border-top-color: var(--pr-accent) !important; }

/* equal-height feature cards */
.feature-two .row { display: flex; flex-wrap: wrap; }
.feature-two .row > [class*="col-"] { display: flex; }
.feature-two__single {
  display: flex;
  width: 100%;
  height: 100%;
}
.feature-two__single-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: 32px;
}
.feature-two__text { flex: 1 1 auto; }

/* =====================================================================
   SECTION RHYTHM — symmetric vertical padding for every section
   Template ships asymmetric paddings (120/0 or 0/120). We normalise
   so each section breathes equally top/bottom and scales responsively.
   ===================================================================== */
.feature-two,
.about-three,
.sliding-text-one,
.services-three,
.project-one,
.project-three,
.why-choose-one,
.quote-one,
.process-one,
.cta-one,
.counter-one,
.find-transport,
.testimonial-three,
.download-app-one,
.team-one,
.faq-one,
.blog-one,
.brand-one {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}
@media (max-width: 1199px) {
  .feature-two, .about-three, .sliding-text-one, .services-three,
  .project-one, .project-three, .why-choose-one, .quote-one, .process-one,
  .cta-one, .counter-one, .find-transport, .testimonial-three,
  .download-app-one, .team-one, .faq-one, .blog-one, .brand-one {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}
@media (max-width: 991px) {
  .feature-two, .about-three, .sliding-text-one, .services-three,
  .project-one, .project-three, .why-choose-one, .quote-one, .process-one,
  .cta-one, .counter-one, .find-transport, .testimonial-three,
  .download-app-one, .team-one, .faq-one, .blog-one, .brand-one {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}
@media (max-width: 575px) {
  .feature-two, .about-three, .sliding-text-one, .services-three,
  .project-one, .project-three, .why-choose-one, .quote-one, .process-one,
  .cta-one, .counter-one, .find-transport, .testimonial-three,
  .download-app-one, .team-one, .faq-one, .blog-one, .brand-one {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* sliding-text is a thin marquee strip — it should NOT have full section padding */
.sliding-text-one { padding-top: 40px !important; padding-bottom: 40px !important; }
@media (max-width: 991px) { .sliding-text-one { padding-top: 30px !important; padding-bottom: 30px !important; } }

/* brand strip is also visually thin */
.brand-one { padding-top: 60px !important; padding-bottom: 60px !important; }
@media (max-width: 991px) { .brand-one { padding-top: 40px !important; padding-bottom: 40px !important; } }

/* =====================================================================
   6. ABOUT  (about-three)
   ===================================================================== */
.about-three { background-color: var(--pr-bg-0) !important; }
.about-three__experience-box {
  background-color: var(--pr-accent) !important;
  color: #fff;
  border: none;
}
.about-three__count-box h3,
.about-three__count-box span,
.about-three__experience-count { color: #fff !important; }
.about-three__experience-text  { color: #fff !important; }
.about-three__text             { color: var(--pr-text-2); }

/* numbered/icon points (top row with circle icons) */
.about-three__points li        { color: var(--pr-text-2); }
.about-three__points li .content h4,
.about-three__points li .content h4 a { color: var(--pr-text-1) !important; }
.about-three__points li .content p { color: var(--pr-text-2) !important; }
.about-three__points li .icon span { color: #fff !important; }
.about-three__points li:hover .icon { background-color: rgba(253,85,35,0.25) !important; }
.about-three__points li:hover .icon:before { background-color: var(--pr-accent) !important; }

/* check-mark list — template uses --tanspot-black on the <p>, invisible on dark */
.about-three__points-two li p { color: var(--pr-text-2) !important; font-weight: 500; }
.about-three__points-two li .icon span { color: var(--pr-accent) !important; }

/* video / phone CTA caption */
.about-three__video-text {
  color: var(--pr-text-1) !important;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
@media (max-width: 575px) {
  .about-three__video-text { font-size: 20px; }
}
.about-three__video-icon { background-color: var(--pr-accent) !important; color: #fff !important; }
.about-three__video-icon span { color: #fff !important; }

/* ---- LANDSCAPE LAYOUT for the about-three image group --------------
   Template ships portrait-style: a tall main image on the left and a
   small overlay card at top:214px right:-130px. For Prorec we keep the
   same animations (orange shape behind, soft float, hover wash, badge,
   floating decorative shape) but make both images landscape (16:10).
   ------------------------------------------------------------------- */
.about-three__left {
  margin-left: 0;
  margin-right: 60px;
  padding-bottom: 100px; /* room for the overlay protruding at the bottom */
}
@media (max-width: 1199px) { .about-three__left { margin-right: 0; padding-bottom: 80px; } }

.about-three__img-box { position: relative; }

/* main hero image — wide landscape */
.about-three__img {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
}
.about-three__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* secondary image — smaller landscape card overlapping bottom-right */
.about-three__img-2 {
  position: absolute;
  top: auto !important;
  right: -40px !important;
  bottom: -60px !important;
  left: auto;
  width: 55%;
  max-width: 340px;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  background-color: var(--pr-bg-2);
  border: 6px solid var(--pr-bg-0);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
.about-three__img-2 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 14px;
}

@media (max-width: 991px) {
  .about-three__img-2 {
    right: 0 !important;
    bottom: -40px !important;
    width: 60%;
  }
}
@media (max-width: 575px) {
  .about-three__img-2 { display: none; }
  .about-three__left { padding-bottom: 0; }
}

/* keep the decorative orange square + experience badge but place them sensibly */
.about-three__shape-1 {
  top: -30px !important;
  right: -30px !important;
  width: 120px;
  height: 120px;
  background-color: rgba(253,85,35,0.15) !important;
  border-radius: 20px;
}
.about-three__experience-box {
  top: auto !important;
  bottom: 30px !important;
  left: -30px !important;
  background-color: rgba(253, 85, 35, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  z-index: 2;
}
.about-three__experience-box.float-bob-y {
  animation-duration: 6s !important;
}

/* ---- BRAND STRIP under the about-images ---------------------------- */
.about-three__brand-strip {
  margin-top: 90px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  background: linear-gradient(135deg, rgba(253,85,35,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--pr-border);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.about-three__brand-strip::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 220px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(253,85,35,0.18), transparent 70%);
  pointer-events: none;
  filter: blur(8px);
  animation: prGlow 4s ease-in-out infinite alternate;
}
@keyframes prGlow {
  from { opacity: 0.5; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.05); }
}

.about-three__brand-svg {
  width: 220px;
  height: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* gentle horizontal swoop on the two big arrows of the logo */
.about-three__brand-arrow--right,
.about-three__brand-arrow--left {
  /* recycling-loop draw: arrows reveal along their direction, hold, hide
     briefly, then redraw — total cycle ~5s, infinite. */
  animation-duration: 5s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.about-three__brand-arrow--right {
  animation-name: prDrawRight;
}
.about-three__brand-arrow--left {
  animation-name: prDrawLeft;
  animation-delay: 0.4s; /* slight stagger after the orange arrow */
}
/* Top orange arrow: head on the right → reveal from left to right */
@keyframes prDrawRight {
  0%   { clip-path: inset(0 100% 0 0); }   /* hidden */
  35%  { clip-path: inset(0 0 0 0); }      /* fully drawn */
  85%  { clip-path: inset(0 0 0 0); }      /* hold */
  100% { clip-path: inset(0 100% 0 0); }   /* fade back to hidden */
}
/* Bottom white arrow: head on the left → reveal from right to left */
@keyframes prDrawLeft {
  0%   { clip-path: inset(0 0 0 100%); }
  35%  { clip-path: inset(0 0 0 0); }
  85%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* trust stats */
.about-three__brand-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 18px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.about-three__brand-stats li {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding: 0 28px;
  position: relative;
}
.about-three__brand-stats li:first-child { padding-left: 0; }
.about-three__brand-stats li:last-child  { padding-right: 0; }
/* divider implemented as ::before so we can suppress it on items that
   start a new row (avoids the stray border before Google Bewertungen) */
.about-three__brand-stats li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--pr-border-2);
}
.about-three__brand-stats li.is-row-start::before { display: none; }
.about-three__brand-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--pr-text-1);
  line-height: 1;
}
.about-three__brand-stat-num .fa-star { color: var(--pr-accent); font-size: 22px; margin-right: 2px; }
.about-three__brand-stat-lbl {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-text-3);
  margin-top: 6px;
}

@media (max-width: 991px) {
  .about-three__brand-strip { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px 22px; margin-top: 70px; }
  .about-three__brand-svg { width: 180px; }
  .about-three__brand-stats li { padding: 0 22px; }
}
@media (max-width: 575px) {
  .about-three__brand-stat-num { font-size: 22px; }
  .about-three__brand-stats li { padding: 0 14px; }
}
.about-three__experience-box::before { display: none; } /* hide the old triangle pointer */

/* =====================================================================
   7. SLIDING TEXT  (sliding-text-one)
   ===================================================================== */
.sliding-text-one {
  background-color: var(--pr-bg-1) !important;
  border-top: 1px solid var(--pr-border);
  border-bottom: 1px solid var(--pr-border);
}
.sliding-text-one__single,
.sliding-text-one h2,
.sliding-text-one .scroll-title { color: var(--pr-text-1) !important; }
.sliding-text-one__icon,
.sliding-text-one .icon { color: var(--pr-accent); }

/* metal-name marquee — fit the metal pngs into the band */
.sliding-text__list--metals .sliding-text__title {
  gap: 24px;
  /* the template uses a position:absolute :before for the orange hover overlay,
     anchored at left:0 of the whole <h2>. With our image at the left, that
     overlay drifts behind the image. We disable it and use a simple color
     transition on the text instead. */
}
.sliding-text__list--metals .sliding-text__title:before { display: none !important; }
.sliding-text__list--metals .sliding-text__title {
  -webkit-text-stroke: 1px var(--pr-border-2);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
/* the metal name now lives in an inner <span data-i18n> (added for i18n).
   A global `p, li, span { color: var(--pr-text-2) }` rule was overriding the
   H2's color on hover, leaving the text outlined instead of filled.
   Force the span to inherit so the H2's color (incl. hover) applies. */
.sliding-text__list--metals .sliding-text__title span {
  color: inherit;
  -webkit-text-stroke: inherit;
}
.sliding-text__list--metals li:hover .sliding-text__title {
  color: var(--pr-accent) !important;
  -webkit-text-stroke: 1px var(--pr-accent) !important;
}
.sliding-text__list--metals .sliding-text__title img {
  height: 70px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
@media (max-width: 991px) {
  .sliding-text__list--metals .sliding-text__title img { height: 52px; max-width: 80px; }
  .sliding-text__list--metals .sliding-text__title { gap: 18px; }
}
@media (max-width: 575px) {
  .sliding-text__list--metals .sliding-text__title img { height: 40px; max-width: 60px; }
}

/* =====================================================================
   8. SERVICES  (services-three)
   ===================================================================== */
.services-three { background-color: var(--pr-bg-0) !important; }

/* card body — template ships pure white, force dark surface */
.services-three__single-inner {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border) !important;
  box-shadow: none !important;
  transition: background-color .25s ease, border-color .25s ease;
  height: 100%;
  padding: 30px 35px !important;
}
.services-three__single-inner p:last-child { margin-bottom: 0 !important; }
.services-three__single { display: flex; height: 100%; margin-bottom: 0 !important; }
.services-three__single > .services-three__single-inner { width: 100%; }
.services-three .row { display: flex; flex-wrap: wrap; }
.services-three .row > [class*="col-"] { display: flex; margin-bottom: 30px; }
.services-three__single:hover .services-three__single-inner {
  background-color: var(--pr-bg-3) !important;
  border-color: var(--pr-accent) !important;
}

/* the orange icon-circle on top — keep it orange but make hover sweep dark */
.services-three__single-icon { border-color: rgba(255,255,255,0.08) !important; }
.services-three__single-icon:before { background-color: var(--pr-bg-0) !important; }
.services-three__single:hover .services-three__single-icon { background-color: var(--pr-bg-0) !important; }
.services-three__single-icon span { color: #ffffff !important; }

/* title & body */
.services-three__single-inner h3 a { color: var(--pr-text-1) !important; }
.services-three__single-inner h3 a:hover { color: var(--pr-accent) !important; }
.services-three__single-inner p { color: var(--pr-text-2) !important; }

/* read-more link (was --tanspot-black on dark card → invisible) */
.services-three__btn-box a { color: var(--pr-accent) !important; }
.services-three__btn-box a:hover { color: var(--pr-accent-2) !important; }
.services-three__btn-box a .icon-right-arrow { color: var(--pr-accent) !important; }

/* =====================================================================
   9. PROJECTS  (project-one project-three)
   ===================================================================== */
.project-one,
.project-three { background-color: var(--pr-bg-1) !important; }
.project-one__single,
.project-three__single {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  box-shadow: none !important;
}
.project-one__single:hover,
.project-three__single:hover {
  border-color: var(--pr-accent);
}
.project-one__content,
.project-three__content {
  background-color: var(--pr-bg-2) !important;
}
.project-one__title,
.project-one__title a,
.project-three__title,
.project-three__title a { color: var(--pr-text-1); }
.project-one__title a:hover,
.project-three__title a:hover { color: var(--pr-accent); }
.project-one__sub-title,
.project-three__sub-title { color: var(--pr-accent); }
.project-one__text,
.project-three__text { color: var(--pr-text-2); }

/* =====================================================================
   10. WHY-CHOOSE / CONTACT  (why-choose-one)
   ===================================================================== */
.why-choose-one { background-color: var(--pr-bg-0) !important; }
.why-choose-one__form-box {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  box-shadow: none !important;
}
.why-choose-one__title,
.why-choose-one__form-title { color: var(--pr-text-1); }
.why-choose-one__text { color: var(--pr-text-2); }
.why-choose-one__icon i,
.why-choose-one__icon span { color: var(--pr-accent); }
.why-choose-one__points li i,
.why-choose-one__points li .icon { color: var(--pr-accent); }
.why-choose-one__points li { color: var(--pr-text-2); }

/* the second bullet list (.why-choose-one__point-two) — template forces
   black on black; override text + icon for dark theme */
.why-choose-one__point-two li,
.why-choose-one__point-two li .text p,
.why-choose-one__point-two li .text h4,
.why-choose-one__point-two li p,
.why-choose-one__point-two li h4 { color: var(--pr-text-2) !important; }
.why-choose-one__point-two li .text h4,
.why-choose-one__point-two li h4 { color: var(--pr-text-1) !important; }
/* the round chip is orange — keep the tick INSIDE the chip white */
.why-choose-one__point-two li .icon {
  background-color: var(--pr-accent) !important;
  color: #fff !important;
}
.why-choose-one__point-two li .icon i,
.why-choose-one__point-two li .icon span,
.why-choose-one__point-two li .icon svg { color: #fff !important; fill: #fff !important; }

/* Contact-form (.why-choose-one__form) — module CSS only styles
   text/email inputs. Extend the same metrics to tel, number, select,
   and textarea so all fields share the rounded, padded look. */
.why-choose-one__form-box {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  border-radius: 16px !important;
}
.why-choose-one__form-box .title-box h2 { color: var(--pr-text-1) !important; }

.why-choose-one__form .input-box input[type="text"],
.why-choose-one__form .input-box input[type="email"],
.why-choose-one__form .input-box input[type="tel"],
.why-choose-one__form .input-box input[type="number"],
.why-choose-one__form .input-box input[type="search"],
.why-choose-one__form .input-box textarea,
.why-choose-one__form .input-box .nice-select,
.why-choose-one__form .input-box .ui-selectmenu-button {
  position: relative;
  display: block;
  width: 100%;
  height: 55px;
  padding: 0 44px 0 20px;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 53px;
  border-radius: 10px !important;
  font-family: var(--tanspot-font);
  background-color: var(--pr-bg-4) !important;
  border: 1px solid var(--pr-border) !important;
  color: var(--pr-text-1) !important;
}
.why-choose-one__form .input-box input[type="number"]::-webkit-outer-spin-button,
.why-choose-one__form .input-box input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.why-choose-one__form .input-box input[type="number"] { -moz-appearance: textfield; }

.why-choose-one__form .input-box textarea {
  height: auto;
  min-height: 140px;
  line-height: 1.5;
  padding: 16px 44px 16px 20px;
  resize: vertical;
}
.why-choose-one__form .input-box--textarea .icon {
  top: 18px !important;
  bottom: auto !important;
  right: 18px !important;
}

.why-choose-one__form .input-box input::placeholder,
.why-choose-one__form .input-box textarea::placeholder { color: var(--pr-text-3) !important; }
.why-choose-one__form .input-box input:focus,
.why-choose-one__form .input-box textarea:focus,
.why-choose-one__form .input-box .nice-select.open,
.why-choose-one__form .input-box .ui-selectmenu-button:focus { border-color: var(--pr-accent) !important; }
.why-choose-one__form .input-box .icon i,
.why-choose-one__form .input-box .icon span,
.why-choose-one__form .input-box .icon span::before { color: var(--pr-text-3) !important; font-size: 14px; }

.why-choose-one__form .input-box .nice-select .list {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border) !important;
}
.why-choose-one__form .input-box .nice-select .option { color: var(--pr-text-2) !important; }
.why-choose-one__form .input-box .nice-select .option:hover,
.why-choose-one__form .input-box .nice-select .option.focus,
.why-choose-one__form .input-box .nice-select .option.selected.focus {
  background-color: var(--pr-bg-3) !important;
  color: var(--pr-accent) !important;
}
.why-choose-one__form .input-box .ui-selectmenu-button.ui-button {
  background: var(--pr-bg-4) !important;
  border: 1px solid var(--pr-border) !important;
  color: var(--pr-text-1) !important;
  border-radius: 10px !important;
  height: 55px;
  line-height: 55px;
}

/* =====================================================================
   11. QUOTE  (quote-one)
   ===================================================================== */
.quote-one { background-color: var(--pr-bg-1) !important; }
.quote-one__single,
.quote-one__form-box,
.quote-one__inner {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
}
.quote-one__title { color: var(--pr-text-1); }
.quote-one__text  { color: var(--pr-text-2); }

/* =====================================================================
   12. PROCESS  (process-one)
   ===================================================================== */
.process-one { background-color: var(--pr-bg-0) !important; }
.process-one__single {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  transition: background-color .25s ease, border-color .25s ease;
}
.process-one__single:hover {
  background-color: var(--pr-bg-3) !important;
  border-color: var(--pr-accent);
}
.process-one__icon i,
.process-one__icon span { color: #ffffff !important; }
.process-one__count { color: var(--pr-accent); }
.process-one__title,
.process-one__title a { color: var(--pr-text-1) !important; }
.process-one__title a:hover { color: var(--pr-accent) !important; }
.process-one__text  { color: var(--pr-text-2); }

/* =====================================================================
   13. CTA  (cta-one)
   ===================================================================== */
.cta-one {
  background-color: var(--pr-bg-1) !important;
  border-top: 1px solid var(--pr-border);
  border-bottom: 1px solid var(--pr-border);
}
.cta-one__title,
.cta-one h2 { color: var(--pr-text-1); }
.cta-one__text { color: var(--pr-text-2); }

/* =====================================================================
   14. COUNTER  (counter-one)
   ===================================================================== */
.counter-one { background-color: var(--pr-bg-0) !important; }
.counter-one__single {
  background-color: transparent !important;
  border-right: 1px solid var(--pr-border);
  box-shadow: none !important;
}
.counter-one__single:last-child { border-right: none; }
.counter-one__count-box,
.counter-one__count-text,
.counter-one .odometer,
.odometer-inside { color: var(--pr-accent) !important; }
.counter-one__title { color: var(--pr-text-1); }
.counter-one__text  { color: var(--pr-text-3); }

/* =====================================================================
   15. FIND TRANSPORT  (find-transport)
   ===================================================================== */
.find-transport { background-color: var(--pr-bg-1) !important; }
.find-transport__single {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
}
.find-transport__title { color: var(--pr-text-1); }
.find-transport__text  { color: var(--pr-text-2); }
.find-transport__icon i,
.find-transport__icon span { color: var(--pr-accent); }

/* =====================================================================
   16. TESTIMONIAL  (testimonial-three)
   ===================================================================== */
.testimonial-three { background-color: var(--pr-bg-0) !important; }
.testimonial-three__single {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  box-shadow: none !important;
}
.testimonial-three__text       { color: var(--pr-text-2); }
.testimonial-three__client-name,
.testimonial-three__client-info h3,
.testimonial-three__client-info h4 { color: var(--pr-text-1) !important; }
.testimonial-three__client-info h3 a,
.testimonial-three__client-info h4 a { color: var(--pr-text-1) !important; }
.testimonial-three__client-sub-title,
.testimonial-three__client-info p { color: var(--pr-text-2) !important; opacity: 1 !important; }
.testimonial-three__quote i,
.testimonial-three__quote { color: var(--pr-accent); }
.testimonial-three__rating i,
.testimonial-three__ratting i,
.testimonial-three__ratting span { color: var(--pr-accent); }

/* card the slide so the carousel actually looks like a testimonial card,
   not text floating on the page; align name + rating on one row */
.testimonial-three__inner {
  background-color: var(--pr-bg-2);
  border: 1px solid var(--pr-border);
  border-radius: 16px;
  padding: 56px 56px 48px;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .testimonial-three__inner { padding: 32px 24px 28px; }
}
.testimonial-three__main-content { position: relative; z-index: 1; }
.testimonial-three__main-content-inner { padding: 0; }
.testimonial-three__main-content-box   { max-width: 920px; margin: 0 auto; }

.testimonial-three__quote { display: none !important; }

.testimonial-three__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--pr-accent);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-transform: uppercase;
  border: none;
}
.testimonial-three__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-three__text {
  font-size: 18px;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 28px;
}

.testimonial-three__client-info-box {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--pr-border);
}
.testimonial-three__client-info        { flex: 1 1 auto; min-width: 0; }
.testimonial-three__client-info h3     { margin: 0 0 4px; font-size: 18px; }
.testimonial-three__client-info p      { margin: 0; font-size: 13px; }
.testimonial-three__ratting            { display: inline-flex; gap: 4px; font-size: 14px; flex: 0 0 auto; }

/* nav arrows */
.testimonial-three__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.testimonial-three__nav .swiper-button-next,
.testimonial-three__nav .swiper-button-prev {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pr-bg-2);
  border: 1px solid var(--pr-border-2);
  color: var(--pr-text-1);
  margin: 0;
  top: auto; left: auto; right: auto; bottom: auto;
}
.testimonial-three__nav .swiper-button-next:hover,
.testimonial-three__nav .swiper-button-prev:hover {
  background: var(--pr-accent);
  border-color: var(--pr-accent);
  color: #fff;
}
.testimonial-three__nav .swiper-button-next::after,
.testimonial-three__nav .swiper-button-prev::after { display: none; }

/* template ships an absolutely-positioned pattern at full size — soften */
.testimonial-three__inner .testimonial-two-shape__bg { opacity: 0.05; }

/* =====================================================================
   17. DOWNLOAD APP  (download-app-one)
   ===================================================================== */
.download-app-one {
  background-color: var(--pr-bg-1) !important;
  border-top: 1px solid var(--pr-border);
  border-bottom: 1px solid var(--pr-border);
}
.download-app-one__title { color: var(--pr-text-1); }
.download-app-one__text  { color: var(--pr-text-2); }

/* =====================================================================
   18. TEAM  (team-one)
   ===================================================================== */
.team-one { background-color: var(--pr-bg-0) !important; }
.team-one__single {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  box-shadow: none !important;
  transition: border-color .25s ease, transform .25s ease;
}
.team-one__single:hover {
  border-color: var(--pr-accent);
  transform: translateY(-4px);
}
.team-one__content { background-color: var(--pr-bg-2); }
.team-one__name,
.team-one__name a { color: var(--pr-text-1); }
.team-one__name a:hover { color: var(--pr-accent); }
.team-one__sub-title { color: var(--pr-text-3); }
.team-one__social a { color: var(--pr-text-1); background-color: transparent; }
.team-one__social a:hover { color: var(--pr-accent); }

/* =====================================================================
   19. FAQ  (faq-one)
   ===================================================================== */
.faq-one {
  background-color: var(--pr-bg-1) !important;
  /* template ships -338px margin-top that overlaps the testimonial card; reset */
  margin-top: 0 !important;
  padding-top: 100px !important;
}
/* and give the testimonial section a touch of breathing room before FAQ */
.testimonial-three { padding-bottom: 100px !important; }
.faq-one .faq-one-accrodion .accrodion,
.faq-one-accrodion .accrodion {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  box-shadow: none !important;
  transition: border-color .25s ease;
}
.faq-one-accrodion .accrodion.active {
  border-color: var(--pr-accent);
  background-color: var(--pr-bg-3) !important;
}
.faq-one-accrodion .accrodion-title h4,
.faq-one-accrodion .accrodion-title h4 a,
.accrodion-title h4,
.accrodion-title h4 a { color: var(--pr-text-1) !important; }
.faq-one-accrodion .accrodion.active .accrodion-title h4,
.faq-one-accrodion .accrodion.active .accrodion-title h4 a,
.accrodion.active .accrodion-title h4,
.accrodion.active .accrodion-title h4 a { color: var(--pr-accent) !important; }
.faq-one-accrodion .accrodion-content p,
.accrodion-content p { color: var(--pr-text-2); }

/* FAQ left collage – two photos + transparent worker overlay + small badge */
.faq-one__collage {
  position: relative;
  margin-top: 40px;
  padding-bottom: 60px;
  min-height: 460px;
}
.faq-one__collage-img {
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--pr-border-2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.faq-one__collage-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.faq-one__collage:hover .faq-one__collage-img img { transform: scale(1.05); }

.faq-one__collage-img--1 {
  top: 0;
  left: 0;
  width: 62%;
  height: 300px;
}
.faq-one__collage-img--2 {
  bottom: 0;
  right: 0;
  width: 55%;
  height: 240px;
  border: 3px solid var(--pr-bg-1);
}

.faq-one__collage-worker {
  position: absolute;
  right: -60px;
  bottom: 30px;
  width: 58%;
  max-width: 320px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
  pointer-events: none;
}

@keyframes faqBadgeDrift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(6px, -4px) rotate(2deg); }
  30%  { transform: translate(-3px, -7px) rotate(-1.5deg); }
  45%  { transform: translate(-6px, 2px) rotate(1deg); }
  60%  { transform: translate(4px, 5px) rotate(-2deg); }
  75%  { transform: translate(7px, -2px) rotate(1.5deg); }
  90%  { transform: translate(-2px, 4px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.faq-one__collage-badge {
  position: absolute;
  left: 0;
  bottom: 20px;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--pr-accent);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 40px rgba(253,85,35,0.4);
  border: none;
  animation: faqBadgeDrift 9s ease-in-out infinite;
  will-change: transform;
}
.faq-one__collage-badge strong {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.faq-one__collage-badge em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
  line-height: 1.2;
  opacity: 0.95;
}

@media (max-width: 991px) {
  .faq-one__collage { min-height: 380px; padding-bottom: 30px; }
  .faq-one__collage-img--1 { height: 240px; }
  .faq-one__collage-img--2 { height: 200px; }
  .faq-one__collage-worker { max-width: 240px; }
  .faq-one__collage-badge { width: 96px; height: 96px; }
  .faq-one__collage-badge strong { font-size: 22px; }
}
@media (max-width: 575px) {
  .faq-one__collage { min-height: 320px; }
  .faq-one__collage-img--1 { width: 70%; height: 200px; }
  .faq-one__collage-img--2 { width: 60%; height: 160px; }
  .faq-one__collage-worker { max-width: 180px; right: -20px; }
  .faq-one__collage-badge { width: 80px; height: 80px; bottom: 0; }
  .faq-one__collage-badge strong { font-size: 18px; }
  .faq-one__collage-badge em { font-size: 9px; }
}

/* =====================================================================
   20. BLOG  (blog-one)
   ===================================================================== */
.blog-one { background-color: var(--pr-bg-0) !important; }
.blog-one__single {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border);
  box-shadow: none !important;
  transition: border-color .25s ease, transform .25s ease;
}
.blog-one__single:hover {
  border-color: var(--pr-accent);
  transform: translateY(-4px);
}
.blog-one__content { background-color: var(--pr-bg-2); }
.blog-one__title,
.blog-one__title a { color: var(--pr-text-1); }
.blog-one__title a:hover { color: var(--pr-accent); }
.blog-one__text { color: var(--pr-text-2); }
.blog-one__meta,
.blog-one__meta li,
.blog-one__meta li a { color: var(--pr-text-3); border-color: var(--pr-border) !important; }
.blog-one__meta li i,
.blog-one__date { color: var(--pr-accent); }
.blog-one__date { background-color: var(--pr-accent) !important; color: #fff !important; }

/* =====================================================================
   21. BRAND  (brand-one)
   ===================================================================== */
.brand-one {
  background-color: var(--pr-bg-1) !important;
  border-top: 1px solid var(--pr-border);
  border-bottom: 1px solid var(--pr-border);
}
.brand-one__single img,
.brand-one img {
  filter: grayscale(100%) brightness(0.7);
  opacity: 0.7;
  transition: all .25s ease;
}
.brand-one__single:hover img,
.brand-one img:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* =====================================================================
   22. FOOTER  (site-footer-three)
   ===================================================================== */
.site-footer-three,
.site-footer-three__top {
  background-color: var(--pr-bg-0) !important;
  border-top: 1px solid var(--pr-border);
}
.site-footer-three__bottom {
  background-color: var(--pr-bg-0) !important;
  border-top: 1px solid var(--pr-border);
}
.site-footer-three__logo { background-color: transparent !important; }

.footer-widget-three__title,
.footer-widget__title { color: var(--pr-text-1); }
.footer-widget-three__about-text,
.footer-widget__text { color: var(--pr-text-2); }
.footer-widget-three__link li a,
.footer-widget__link li a { color: var(--pr-text-2); transition: color .25s ease; }
.footer-widget-three__link li a:hover,
.footer-widget__link li a:hover { color: var(--pr-accent); }

.footer-widget-three__contact-list li,
.footer-widget-three__contact-list li a { color: var(--pr-text-2); }
.footer-widget-three__contact-list li a:hover { color: var(--pr-accent); }
.footer-widget-three__contact-list li i,
.footer-widget-three__contact-list li .icon { color: var(--pr-accent); }

.site-footer-three__social a {
  color: var(--pr-text-1);
  background-color: transparent;
  border: 1px solid var(--pr-border);
  transition: all .25s ease;
}
.site-footer-three__social a svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  vertical-align: middle;
}
.site-footer-three__social a:hover {
  color: #fff;
  background-color: var(--pr-accent);
  border-color: var(--pr-accent);
}

.site-footer-three__bottom-text,
.site-footer-three__bottom-text a { color: var(--pr-text-3); }
.site-footer-three__bottom-text a:hover { color: var(--pr-accent); }
.site-footer-three__bottom-menu li a { color: var(--pr-text-3); }
.site-footer-three__bottom-menu li a:hover { color: var(--pr-accent); }

/* =====================================================================
   23. FORM CONTROLS (global)
   ===================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select,
.nice-select {
  background-color: var(--pr-bg-4) !important;
  color: var(--pr-text-1) !important;
  border: 1px solid var(--pr-border) !important;
  transition: border-color .25s ease;
}
input::placeholder,
textarea::placeholder { color: var(--pr-text-3) !important; }
input:focus,
textarea:focus,
select:focus,
.nice-select.open { border-color: var(--pr-accent) !important; outline: none; }

.nice-select .list {
  background-color: var(--pr-bg-2) !important;
  border: 1px solid var(--pr-border) !important;
}
.nice-select .option { color: var(--pr-text-2) !important; background-color: transparent !important; }
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: var(--pr-bg-3) !important;
  color: var(--pr-accent) !important;
}

/* checkboxes / radios */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--pr-accent); }

/* =====================================================================
   24. CHAT POPUP  (the floating chat widget)
   ===================================================================== */
.chat-popup,
.chat-popup .popup-inner { background-color: var(--pr-bg-2) !important; border: 1px solid var(--pr-border); }
.chat-popup p             { color: var(--pr-text-2); }
.chat-icon .chat-toggler  {
  background-color: var(--pr-accent) !important;
  color: #fff !important;
  border: none;
}
.chat-icon .chat-toggler:hover { background-color: var(--pr-accent-2) !important; }
.close-chat i             { color: var(--pr-text-1); }

/* =====================================================================
   25. CUSTOM CURSOR (keep visible on dark)
   ===================================================================== */
.custom-cursor__cursor     { background: var(--pr-accent); }
.custom-cursor__cursor-two { border-color: var(--pr-accent); }

/* =====================================================================
   26. UTILITY: kill stray template teal/blue tints
   ===================================================================== */
[style*="#062f3a"],
[style*="#042a35"],
[style*="rgb(6, 47, 58)"],
[style*="rgb(4, 42, 53)"] {
  background-color: var(--pr-bg-1) !important;
}

/* =====================================================================
   27. BRANCHEN — horizontal numbered rows (NOT card grid)
   Distinct from .services-three above so it doesn't repeat the look.
   ===================================================================== */
.branchen {
  background-color: var(--pr-bg-1) !important;
  padding-top: 120px !important;
  padding-bottom: 120px !important;
  position: relative;
}
@media (max-width: 1199px) { .branchen { padding-top: 100px !important; padding-bottom: 100px !important; } }
@media (max-width: 991px)  { .branchen { padding-top: 80px  !important; padding-bottom: 80px  !important; } }

.branchen__list {
  margin: 60px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.branchen__item {
  position: relative;
  display: grid;
  grid-template-columns: 90px 80px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  background-color: var(--pr-bg-2);
  border: 1px solid var(--pr-border);
  border-left: 3px solid var(--pr-border-2);
  border-radius: 14px;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
  overflow: hidden;
}
.branchen__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(253,85,35,0.06) 0%, transparent 40%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.branchen__item:hover {
  background-color: var(--pr-bg-3);
  border-color: var(--pr-border-2);
  border-left-color: var(--pr-accent);
  transform: translateX(4px);
}
.branchen__item:hover::before { opacity: 1; }

.branchen__num {
  font-family: var(--tanspot-font-two, var(--tanspot-font));
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--pr-border-2);
  letter-spacing: -1px;
  transition: -webkit-text-stroke-color .25s ease, color .25s ease;
}
.branchen__item:hover .branchen__num {
  -webkit-text-stroke-color: var(--pr-accent);
}

.branchen__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(253, 85, 35, 0.1);
  color: var(--pr-accent);
  font-size: 26px;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.branchen__item:hover .branchen__icon {
  background-color: var(--pr-accent);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}

.branchen__body { min-width: 0; position: relative; z-index: 1; }
.branchen__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--pr-text-1);
  letter-spacing: -0.2px;
}
.branchen__text {
  margin: 0 0 14px;
  color: var(--pr-text-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 720px;
}

.branchen__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.branchen__chips li {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pr-text-2);
  background: transparent;
  border: 1px solid var(--pr-border-2);
  border-radius: 999px;
  letter-spacing: .02em;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.branchen__chips li:hover {
  color: var(--pr-text-1);
  border-color: var(--pr-accent);
  background-color: rgba(253,85,35,0.08);
}

.branchen__link {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pr-bg-1);
  border: 1px solid var(--pr-border-2);
  color: var(--pr-text-1);
  font-size: 14px;
  flex-shrink: 0;
  transition: all .25s ease;
}
.branchen__item:hover .branchen__link {
  background: var(--pr-accent);
  border-color: var(--pr-accent);
  color: #fff;
  transform: translateX(4px);
}

/* responsive */
@media (max-width: 991px) {
  .branchen__item {
    grid-template-columns: 60px 56px 1fr;
    gap: 18px;
    padding: 22px 22px;
  }
  .branchen__num { font-size: 40px; }
  .branchen__icon { width: 52px; height: 52px; font-size: 22px; border-radius: 12px; }
  .branchen__title { font-size: 19px; }
  .branchen__link {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    justify-self: end;
    width: 40px; height: 40px;
  }
  .branchen__body { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .branchen__item {
    grid-template-columns: 48px 1fr;
    padding: 20px 18px;
  }
  .branchen__num { display: none; }
  .branchen__icon { width: 48px; height: 48px; font-size: 20px; }
  .branchen__link { display: none; }
  .branchen__chips li { font-size: 11px; padding: 4px 10px; }
}

/* metal marquee hover: spin + scale the round metal sphere images */
@keyframes metalSpin { from { transform: rotate(0deg) scale(1.5); } to { transform: rotate(360deg) scale(1.5); } }
.sliding-text__title img { transition: transform .6s ease; transform-origin: center center; will-change: transform; }
.sliding-text__list li:hover .sliding-text__title img { animation: metalSpin 6s linear infinite; }

/* =====================================================================
   Form result / status box (AJAX submission feedback)
   ===================================================================== */
.contact-form-validated .result {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .35s ease, margin-top .35s ease;
}
.contact-form-validated .result.is-visible {
  margin-top: 18px;
  max-height: 600px;
  opacity: 1;
}
.result__inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--pr-border-2);
  background: var(--pr-bg-2);
  color: var(--pr-text-2);
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.result__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 85, 35, .12);
  color: var(--pr-accent);
}
.result__text { flex: 1; }
.result__text strong { color: var(--pr-text-1); font-weight: 700; }

.result.is-success .result__inner {
  border-color: rgba(46, 204, 113, .35);
  background: linear-gradient(180deg, rgba(46, 204, 113, .08), rgba(46, 204, 113, .02));
}
.result.is-success .result__icon {
  background: rgba(46, 204, 113, .15);
  color: #2ecc71;
}
.result.is-error .result__inner {
  border-color: rgba(231, 76, 60, .4);
  background: linear-gradient(180deg, rgba(231, 76, 60, .08), rgba(231, 76, 60, .02));
}
.result.is-error .result__icon {
  background: rgba(231, 76, 60, .15);
  color: #e74c3c;
}
.result.is-pending .result__inner {
  border-color: var(--pr-border-2);
}
.result.is-pending .result__icon::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(253, 85, 35, .25);
  border-top-color: var(--pr-accent);
  animation: prSpin .8s linear infinite;
}
.result.is-pending .result__icon svg { display: none; }
@keyframes prSpin { to { transform: rotate(360deg); } }

/* Submit button loading state */
.contact-form-validated button.is-loading {
  opacity: .7;
  cursor: wait;
}