/* === Palette 1 (brand: navy & orange) === */
:root {
  --color-primary: #003476;        /* brand blue (hover) */
  --color-primary-dark: #003B7A;   /* optional deeper */
  --color-primary-soft: #009BF5;   /* default light blue */

  --color-accent: #0090FF;
  --color-accent-soft: #003476;
  --color-accent-bg-soft: #E5F4FF;
  --color-accent-border-soft: #B7DAFF;

  --color-text-main: #252525;
  --color-text-muted: #7d7878;
  --color-danger: #E0242A;
}

/* Background colors */
.bg-theme-light-gray {
  --tw-bg-opacity: 1;
  background-color: #efeff1;
  background-color: rgb(239 239 241 / var(--tw-bg-opacity));
}

.bg-theme-orange {
  --tw-bg-opacity: 1;
  background-color: #ff7714;
  background-color: rgb(255 119 20 / var(--tw-bg-opacity));
}

.bg-theme-primary {
  --tw-bg-opacity: 1;
  background-color: #252525;
  background-color: rgb(37 37 37 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: #fff;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-transparent {
  background-color: transparent;
}

/* Background opacity */
.bg-opacity-\[0\.8\] {
  --tw-bg-opacity: 0.8;
}

/* Gradient helpers */
.to-\[80px\] {
  --tw-gradient-to-position: 80px;
}

/* Fill colors */
.fill-\[\#515151\] {
  fill: #515151;
}

.fill-theme-primary {
  fill: #252525;
}

.fill-theme-secondary {
  fill: #fe9844;
}

.fill-theme-splide-gray {
  fill: #878482;
}

/* ==========================================================
   CLICKABLE TEXT COLORS (EASY EDIT VERSION)
   ========================================================== */
a {
  color: #5C5C5C;      /* normal link color */
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover {
  color: #1F1F1F;      /* hover link color */
}

/* NAVIGATION TABS */

.nav__item a,
.header__nav a,
.site-header a {
  color: #000000 !important;   /* normal black */
  text-decoration: none;
}

/* Hover (if you want them to turn blue on hover) */
.nav__item a:hover,
.header__nav a:hover,
.site-header a:hover {
  color: #000000 !important;   /* brand blue hover */
}

.nav__item a,
.header__nav a,
.site-header a {
  color: #000000 !important;
}

/* Keep menu links inline so arrows stay aligned */
.site-header__menu > li > a {
  display: inline-flex;
  align-items: center;   /* keeps text + arrow aligned */
  position: relative;
  text-decoration: none;
}

/* Underline using box-shadow (does NOT affect layout) */
.site-header__menu > li > a:hover,
.site-header__menu > li > a.active {
  box-shadow: inset 0 -2px 0 0 #0b5ed7;
}

/* Kill any other underline systems to avoid double lines */
.site-header__menu > li > a {
  border-bottom: 0 !important;
  background-image: none !important;
}

.site-header__logo-desktop {
  max-height: 75px;
  width: auto;
}

.site-header__logo-mobile {
  max-height: 40px;
  width: auto;
}

/* Hide mobile logo on desktop */
@media (min-width: 768px) {
  .site-header__logo-mobile {
    display: none;
  }
}

/* Hide desktop logo on mobile/tablet */
@media (max-width: 767px) {
  .site-header__logo-desktop {
    display: none;
  }
}

/* Tablet: slightly smaller desktop logo */
@media (max-width: 1023px) and (min-width: 768px) {
  .site-header__logo-desktop {
    max-height: 60px;
  }
}

/* Desktop view  hide the mobile arrow */
@media (min-width: 768px) {
  .site-header__item-icon-mobile {
    display: none;
  }
}

/* Mobile view  hide the arrow inside the link */
@media (max-width: 767px) {
  .site-header__item > a > span {
    display: none;
  }
}

.site-header__toggle-menu[data-v-656927a4] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.5rem;
  height: 20px;
}

@media (min-width: 1024px) {
  .site-header__toggle-menu[data-v-656927a4] {
    display: none;
  }
}

.mm-visible .site-header__toggle-menu[data-v-656927a4] {
  justify-content: center;
}

.site-header__toggle-menu span[data-v-656927a4] {
  position: relative;
  z-index: 10;
  height: 2px;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: #252525;
  background-color: rgb(37 37 37 / var(--tw-bg-opacity));
  transition: transform 0.4s, opacity 0.4s, margin 0.4s;
}

.mm-visible
  .site-header__toggle-menu
  span[data-v-656927a4]:nth-child(2) {
  opacity: 0;
}

.mm-visible
  .site-header__toggle-menu
  span[data-v-656927a4]:first-child {
  margin: 2px 0 -4px;
  transform: rotate(45deg);
}

.mm-visible
  .site-header__toggle-menu
  span[data-v-656927a4]:nth-child(3) {
  transform: rotate(-45deg);
}

/* Hero section clickable link override */
.big-hero__txt a {
  color: #818181;
}

.big-hero__txt a:hover {
  color: #393939;
}

/* === End Palette 1 === */

      /* === HERO QUOTE BOX (REAL FORM) === */

.active.quote-box {
  /* keep any existing styles from your file; we only add/override minimal things */
  background-color: #ffffff;
  border-radius: 14px;
  padding: 32px 40px 36px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}

/* Make the box wider like a table */
.mt-\[24px\].lg\:mt-0.relative.z-20.shrink-0.md\:w-\[580px\].md\:mx-auto {
  max-width: 680px;
  width: 100%;
}

/* Title line: "Get your instant quote   0%" */
.quote-box__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quote-box__title span#quote-percent {
  font-size: 1.9rem;
  font-weight: 700;
}

/* Form layout inside the quote box */
.quote-box__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each row in the form */
.quote-box__form-el {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label text */
.quote-box__label {
  font-size: 0.85rem;
  color: #555555;
}

/* Dropdowns */
.quote-box__form-el select {
  border-radius: 6px;
  border: 1px solid #d1d1d1;
  padding: 10px 12px;
  font-size: 0.95rem;
  appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' fill='none' stroke-linecap='round' /%3E%3C/svg%3E")
    no-repeat right 12px center;
  background-size: 12px 8px;
  background-color: #ffffff;
}

/* ===============================
   QUOTE SECTION LAYOUT (BOTH CARDS)
   =============================== */

/* Center the cards and keep them at a nice width */
/* Same width for all steps */
.quote-container {
  max-width: 1100px;
  margin: 0 auto;
}

.quote-box {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 32px 40px 36px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  margin-bottom: 32px;
}

/* Only the active step is visible */
.quote-step {
  display: none;
}

.quote-step.active {
  display: block;
}

/* Title area */
.quote-box__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quote-box__title #quote-percent {
  font-size: 1.9rem;
  font-weight: 700;
}

/* Form layout */
.quote-box__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-box__form-el {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quote-box__label {
  font-size: 0.85rem;
  color: #555;
}

.quote-box__form-el select {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #d1d1d1;
  padding: 10px 12px;
  font-size: 0.95rem;
  background-color: #fff;
  color: #252525;
}

.quote-box__date {
  font-size: 16px;
  color: #5f5f5f;
  margin-bottom: 20px;
  margin-top: 5px;
  line-height: 1.5;
}


/* Simple labels+inputs for step 2 */
.quote-box .floating-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quote-box .floating-label label {
  font-size: 0.85rem;
  color: #555;
}

.quote-box .floating-label input,
.quote-box .floating-label textarea {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #d1d1d1;
  padding: 10px 12px;
  font-size: 0.95rem;
  background-color: #fff;
  color: #252525;
}

/* Checkbox line */
.quote-box__agree {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #444;
}

.quote-box__agree input {
  margin-right: 8px;
}

/* Buttons row */
.quote-box__buttons {
  margin-top: 20px;
  display: flex;
  gap: 16px;
}

/* Keep GO BACK on one line */
.btn-back {
  white-space: nowrap;
}

/* Success message */
.quote-box__success {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.quote-box__success span:nth-child(2) {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.quote-box__success p {
  margin: 0;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .quote-box {
    padding: 24px 20px 28px;
  }

  .quote-box__buttons {
    flex-direction: column;
  }
}

/* === Quote wizard layout (top & bottom) === */
.page-section--quote {
  background-size: cover;
  background-position: center;
}

/* Container for all three steps, same width everywhere */
.quote-wizard {
  max-width: 840px;         /* same for top & bottom */
  width: 100%;
  margin: 40px auto;
}

/* Each step card */
.quote-box {
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 2px 2px 14px rgba(79, 78, 93, 0.12);
  padding: 32px 40px;
}

/* Show only active step */
.quote-box--step {
  display: none;
}
.quote-box--step.is-active {
  display: block;
}

/* Title row */
.quote-box__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.quote-box__percent {
  font-size: 24px;
}

/* form elements */
.quote-box__form-el {
  margin-bottom: 18px;
}
.quote-box__label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.quote-box select, .quote-box input, .quote-box textarea {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #d4d4d4;
  font-size: 14px;
  padding: 10px 12px;
}

/* error text */
.quote-error {
  font-size: 13px;
  color: #FF0000;
  margin-top: 8px;
}

/* buttons row */
.quote-box__buttons {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

/* Fix GO BACK width */
.quote-box__buttons .js-quote-back {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;        /* space between arrow and text */
  padding-left: 12px; /* space from left button edge */
}

/* keep GO BACK on one line */
.btn.btn-outline.btn-back {
  white-space: nowrap;
}

/* success step */
.quote-box__success {
  text-align: center;
}
.quote-box__success-title {
  display: block;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* === Quote wizard steps visibility fix === */

/* Hide all steps by default */
.quote-box--step {
  display: none !important;
}

/* Show only the one that has .is-active */
.quote-box--step.is-active {
  display: block !important;
}

/* Container: checkbox + text */
.quote-box__agree {
  display: flex;
  align-items: flex-start; /* aligns with first line of text */
  gap: 12px;
  margin-top: 18px;
}

/* Checkbox label */
.quote-box__agree label {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

/* === Custom square checkbox === */
.quote-box__agree input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 18px;             /* slightly bigger = clearer */
  height: 18px;
  flex-shrink: 0;

  border: 2px solid #878482;
  border-radius: 3px;      /* small radius, still square */
  background-color: #ffffff;

  cursor: pointer;
  position: relative;
  margin-top: 3px;         /* aligns with text baseline */

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.quote-box__agree input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  accent-color: transparent;

  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 2px solid #878482;
  border-radius: 0;            /* perfect square */
  background-color: #ffffff;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-top: 3px;
  background-image: none !important; /* prevents theme check styles */
  box-shadow: none;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* IMPORTANT: kill any previous ::after tick/square */
.quote-box__agree input[type="checkbox"]::after {
  content: none !important;
}

/* Hover */
.quote-box__agree input[type="checkbox"]:hover {
  border-color: #0092FF;
}

/* Checked */
.quote-box__agree input[type="checkbox"]:checked {
  background-color: #009ef5;
  border-color: #007ef5;
}

/* Bigger, clearer tick */
.quote-box__agree input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;

  width: 14px;     /* bigger tick */
  height: 8px;
  left: 5px;       /* centers it */
  top: 5px;

  border: 3px solid #ffffff;
  border-top: 0;
  border-right: 0;

  transform: rotate(-45deg);
}

/* === Base button appearance – American blue for everything === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 4px;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Ensure GO BACK text style matches SEND */
.quote-box__buttons .btn-back,
.quote-box__buttons .btn-blue {
  font-weight: 600;   /* regular, not extra bold */
  text-transform: uppercase;
}


/* === Red warning bubble for invalid fields === */
.field-error {
    position: absolute;
    background: #ffe6e6;        /* soft red background */
    border: 1px solid #cc0000;  /* red border */
    color: #cc0000;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 6px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.12);
}

/* Red warning icon */
.field-error::before {
    content: "⚠";
    color: #cc0000;        /* red icon */
    font-size: 18px;
}

/* Make the top hero form wider on desktop */
@media (min-width: 1024px) {
  .big-hero__row {
    align-items: flex-start; /* optional: align top instead of bottom */
  }

  .big-hero__content {
    flex: 0 0 43%;
    max-width: 43%;
    margin-right: 40px; /* you can tweak this */
	margin-top: 40px; /* ← SHIFT TEXT DOWN */
  }

  #top-wizard {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* === Tick mark (checkbox) brand color – Crown Red === */
.quote-box__agree input[type="checkbox"]:checked + label::before {
  background-color: #E0242A;
  border-color: #E0242A;
}

/* === TRYKING Logo Rules === */

/* Desktop default */
.trusted--white[data-v-c8bfafcd] {
  background-color: #ffffff;
}


/* ------------------------------------------
   FAQ accordion behaviour & look (Independent Style)
   ------------------------------------------ */
/* Make every FAQ item always take full available width */
.faq__item {
  width: 100%;
  box-sizing: border-box;

  border: 1px solid #e3e3e3;
  border-radius: 2px;
  margin-bottom: 10px;
  background: #ffffff;
}

/* question row */
.faq__item-open {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  cursor: pointer;
}

/* icon rotation */
.faq__item-open svg {
  margin-left: 16px;
  transition: transform 0.25s ease;
}

/* answer: closed state (hidden, 0 height) */
.faq__item-txt {
  width: 100%;
  box-sizing: border-box;

  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0;

  padding: 0 24px; /* keep horizontal padding fixed */
  border-top: 1px solid transparent;
  line-height: 1.5;

  transition:
    max-height 0.3s ease,
    opacity 0.25s ease,
    padding-top 0.3s ease,
    padding-bottom 0.3s ease,
    border-top-color 0.3s ease;
}

/* open state */
.faq__item.is-open {
  border-color: #0090ff;
  background: #0090ff;
}

.faq__item.is-open .faq__item-txt {
  max-height: 500px !important; /* big enough for your longest answer */
  opacity: 1;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top-color: #0090ff;
}

.faq__item.is-open .faq__item-open svg {
  transform: rotate(45deg);
}

/* ---------- Need Help call block ---------- */

.faq__call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Text styles */
.faq__call-txt span {
  font-weight: 600;
  color: #818181;
  transition: color 0.2s ease;
}

.faq__call-txt p {
  margin: 0;
  opacity: 0.85;
  color: #333;
}

/* Hover text color */
.faq__call:hover .faq__call-txt span {
  color: #414141;
}

/* ---------- Phone icon (with waves) ---------- */
.faq__call-icon {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  /* Raised look */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* Icon inside */
.faq__call-icon img {
  width: 70%;
  height: 70%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* Hover = pressed */
.faq__call:hover .faq__call-icon {
  transform: translateY(2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.faq__call:hover .faq__call-icon img {
  transform: scale(0.98);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22));
}

/* Active press */
.faq__call:active .faq__call-icon {
  transform: translateY(3px) scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* ---------- SIGNAL WAVES ---------- */

.faq__call-icon::before,
.faq__call-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(0, 51, 160, 0.35);
  transform: scale(1);
  opacity: 0;
  pointer-events: none;
}

.faq__call-icon::before {
  animation: faq-signal-wave 1.8s ease-out infinite;
}

.faq__call-icon::after {
  animation: faq-signal-wave 1.8s ease-out infinite;
  animation-delay: 0.6s;
}

@keyframes faq-signal-wave {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}


/* generic button reset */
button,
.btn {
  border: none;
  outline: none;
}

/* ------------------------------------------
   BUTTON BLUE (Independent Style)
   ------------------------------------------ */
/* True primary button styling */
.btn-blue {
  background-color: #0071FF !important;  /* blue */
  color: #ffffff !important;             /* white text */
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover */
.btn-blue:hover {
  background-color: #011596 !important;  /* darker blue */
  color: #ffffff !important;
}

/* Arrow color follows text */
.btn-blue svg {
  fill: currentColor !important;
}

/* ------------------------------------------
   BUTTON TRANSPARENT (Independent Style)
   ------------------------------------------ */
.btn-transparent {
  background-color: transparent !important;   /* normal background */
  color: #000000 !important;              /* normal text color */
  border: 1px solid #444444 !important;   /* Dark grey outline */
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 20px;                               /* space between text + arrow */
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Hover effect */
.btn-transparent:hover {
  background-color: #444444 !important;   /* dark grey background on hover */
  color: #FFFFFF !important;              /* white text on hover */
  border-color: #000000 !important;
}

/* Force SVG arrow to follow text color */
.btn-transparent svg {
  fill: currentColor !important;
  transition: fill 0.25s ease;
}

/* ------------------------------------------
   BUTTON GREY (Independent Style)
   ------------------------------------------ */
.btn-grey {
  background: #BDBDBD !important;
  color: black !important;
  border: 0px solid #363636 !important;
  padding: 12px 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s;
}

.btn-grey:hover {
  background: #4D4D4D !important;
  color: white !important;
}

.btn-grey svg {
  fill: currentColor !important;
}


/* Inline text links with animated underline (like menu tabs) */
  a.text-link {
    position: relative;
    display: inline-block;
    color: #4FA8FB !important; /* dark grey */
    font-weight: 300;
    text-decoration: none;
    padding-bottom: 1px;
  }

  a.text-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: #D1D1D1 !important;   /* dark grey underline */
    transition: width 0.25s ease-in-out;
  }

  a.text-link:hover {
    color: #888888 !important;   /* light grey hover text color */
  }

  a.text-link:hover::after {
    width: 100%;                 /* animate underline */
  }

.trusted__row-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.trusted__row-btn {
  width: 100%;
}

.trusted__row-btn a {
  display: block;
  width: 100%;
  text-align: center;
}

.trusted__row-btn a {
  display: flex;                   /* put text + arrow in one row */
  justify-content: center;         /* center them */
  align-items: center;             /* vertical alignment */
  gap: 10px;                       /* space between text and arrow */
  width: 100%;
}

.trusted__row-txt ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trusted__row-txt ol li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.45rem;
  line-height: 1.4;
}

.trusted__row-txt ol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.1rem;
  height: 1.1rem;

  /* ? Load local SVG file */
  background-image: url("../../images/icons/check.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Make list items align icon + text horizontally */
.trusted__row-txt ul li p {
  display: flex;
  align-items: center !important;   /* <— THIS centers icon + text vertically */
  gap: 12px;             /* space between icon and text */
  margin: 0;
  line-height: 1.7;      /* your preferred spacing */
}


/* FIXED icon size */
.trusted__row-txt .trusted-icon {
  width: 45px;
  height: 45px;
  object-fit: contain; /* prevents distortion */
  flex-shrink: 0;       /* prevents shrinking on small screens */
}

/* Optional: vertical spacing between list items */
.trusted__row-txt ul li {
  margin-bottom: 6px;
}

/* Increase spacing inside each paragraph and list line */
.trusted__row-txt p {
  line-height: 1.7;   /* increase this number for more space */
}

/* Add more vertical spacing between each list item */
.trusted__row-txt ul li {
  margin-bottom: 30px !important; /* adjust to your taste */
}

/* Align icon + text + allow multi-line spacing to look clean */
.trusted__row-txt ul li p {
  display: flex;
  align-items: flex-start;
  gap: 16px !important;
}


/* Background section */
.quote-bg {
  position: relative;
  background-image: url("../../images/page-pictures/bottom-plane.webp"); /* <-- Put your local file here */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* Dim overlay */
.quote-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);   /* Adjust opacity (0.3–0.6) to match original */
  z-index: 1;
}

/* Ensure the form appears ABOVE the dark overlay */
.quote-bg .wrap {
  position: relative;
  z-index: 2;
}

/* ==========================================================
                           FOOTER
   ========================================================== */

/* ----------- 1. TOP FOOTER NAVIGATION (WHITE TABS) ----------- */

.site-footer__nav ul li a {
  color: #ffffff !important;   
  text-decoration: none !important;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color 0.25s ease-in-out;
}

/* White underline animation */
.site-footer__nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #ffffff !important;  /* force white */
  transition: width 0.25s ease-in-out;
}

.site-footer__nav ul li a:hover::after {
  width: 100%;
}

.site-footer__nav ul li a:hover {
  color: #ffffff !important;
}

/* EMAIL, PHONE, ADDRESS — DARKER GREY ? WHITE ON HOVER */
.site-footer .site-footer__info a {
  color: #b3b3b3 !important;        /* darker grey */
  display: inline-flex !imporant;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  transition: color 0.25s ease-in-out;
}

/* Icons follow the same color */
.site-footer .site-footer__info a svg {
  color: currentColor !important;
  fill: currentColor !important;
  transition: color 0.25s, fill 0.25s;
}

.site-footer .site-footer__info a:hover {
  color: #ffffff !important;        /* FIXED: now turns white */
}


/* SOCIAL ICONS — DARKER GREY ? WHITE */
.site-footer .site-footer__social a svg {
  color: #b3b3b3 !important;  
  fill: #b3b3b3 !important;
  transition: color 0.25s, fill 0.25s;
}

.site-footer .site-footer__social a:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.site-footer__copy p {
  color: #9e9e9e !important;   /* softer, lighter grey */
  text-align: center;
  margin-top: 10px;
}

.site-footer a {
  color: inherit !important;
}

.site-footer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}


/* Bottom quote form – reduce width only here */
#bottom-wizard {
  display: flex;
  justify-content: center;  /* keep it centered in the section */
}

/* Actual white card width limiter (all 3 steps share .quote-box) */
#bottom-wizard .quote-box {
  max-width: 580px !important;  /* try 740–800 to taste */
  width: 100%;
  margin: 0 auto;
}

/* ===============================
   Testimonials slider: 4 cards visible, scroll for more
   =============================== */

/* Horizontal scroll container */
.testimonials__grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;                 /* horizontal scroll */
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;             /* room for hidden scrollbar */

  /* match original site's content width */
  width: 100%;
  max-width: 1120px;       /* tweak 1080–1200px to taste */
  margin: 0 auto;          /* center the cards block */
}

/* Single card: takes 1/4 of the viewport width (minus gaps) */
.testimonial-card {
  flex: 0 0 calc(25% - 18px);   /* exactly 4 cards in the visible row */
  padding: 24px 20px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

/* Header, avatar, text (same as before) */
.testimonial-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.testimonial-card__logo {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.testimonial-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__company {
  display: flex;
  flex-direction: column;
}

.testimonial-card__name {
  font-weight: 700;
  font-size: 15px;
  color: #111827;
}

.testimonial-card__subtitle {
  font-size: 13px;
  color: #4b5563;
}

.testimonial-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}

/* Hide native horizontal scrollbar (WebKit) */
.testimonials__grid::-webkit-scrollbar {
  height: 0;
}


/* Responsive: 2 cards on tablets, 1 on phones */
@media (max-width: 1024px) {
  .testimonial-card {
    flex: 0 0 calc(50% - 18px);     /* 2 per view */
  }
}

@media (max-width: 640px) {
  .testimonial-card {
    flex: 0 0 100%;                 /* 1 per view */
  }
}


/* ==========================================
                EQUIPMENT PATCH
   ========================================== */
/* Slider window = 2 cards + gap + left padding + right padding */
.our-trucks__slider-fix{
  position: relative;

  /* 2 cards (310px) + gap (16px) + left pad (18px) + right pad (18px) */
  width: calc((310px * 2) + 16px + 36px);
  max-width: calc((310px * 2) + 16px + 36px);

  overflow: visible;
}

/* Create a clipping "window" ONLY for cards (not for arrows) */
.our-trucks__slider-fix .our-trucks__slider-box{
  display: flex;
  gap: 16px;

  overflow-x: auto;
  overflow-y: visible;

  /* 1) left padding for first card breathing space */
  padding-left: 18px;
  padding-right: 10;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* 4) stop the 3rd card peek by clipping cards area itself */
  clip-path: inset(0 0 0 0 round 0px);
}

/* Add a mask that hides the 3rd card WITHOUT killing shadows */
@supports (mask-image: linear-gradient(#000, #000)) {
  .our-trucks__slider-fix .our-trucks__slider-box{
    /* Shows only inside the width of the column; hides overflow on the right */
    mask-image: linear-gradient(to right,
      #000 0,
      #000 calc(100% - 1px),
      transparent 100%);
  }
}

/* Hide native scrollbar */
.our-trucks__slider-fix 
.our-trucks__slider-box::-webkit-scrollbar{ 
	height: 0; 
}

/* Card sizing (desktop) — override earlier ".our-trucks__slider-box .truck-card" rules */
.our-trucks__slider-fix 
.our-trucks__slider-box .truck-card{
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;

  background: #fff;
  border-radius: 18px;
  overflow: hidden;

  /* lower-half shadow */
  box-shadow: 0 26px 55px -28px rgba(15, 23, 42, 0.38);
}

/* taller cards */
.our-trucks__slider-fix .truck-card__img img{
  height: 280px;
}

/* Controls below cards */
.our-trucks__slider-fix 
.our-trucks__slider-controls{
  position: relative;
  margin-top: 26px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 10;
}

/* Leave enough room so RIGHT arrow is always fully visible */
.our-trucks__slider-fix 
.our-trucks__slider-controls .scrollbar{
  flex: 1 1 auto;
  margin-right: 90px;  /* more space = arrow won't go out */
}

/* arrows */
.our-trucks__slider-fix .our-trucks__slider-arrows{
  display: flex;
  gap: 16px;
  flex: 0 0 auto;
}

.our-trucks__slider-fix 
.our-trucks__slider-arrows button{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px;
  cursor: pointer;
}

/* ======================
   MOBILE FIX
   ====================== */
@media (max-width: 768px){

  .our-trucks__slider-fix{
    width: 100%;
    max-width: 100%;
  }

  /* reduce card width on mobile (strong specificity + important) */
  	.our-trucks__slider-fix 
	.our-trucks__slider-box 
	.truck-card{
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
  }

  	.our-trucks__slider-fix 
	.truck-card__img img{
    height: 210px;
  }

  	.our-trucks__slider-fix 
	.our-trucks__slider-box{
    padding-left: 14px;   /* keep left breathing space on mobile */
  }

  	.our-trucks__slider-fix 
	.our-trucks__slider-controls 
	.scrollbar{
    margin-right: 55px;   /* smaller screens */
  }
}

/* Right-side breathing space (desktop + mobile) */
	.our-trucks__slider-fix 
	.our-trucks__slider-box{
  padding-right: 10px;          /* match left padding */
  scroll-padding-right: 10px;   /* ensures last visible card can sit with space */
}

/* Mobile: slightly smaller right padding */
@media (max-width: 768px){
  	.our-trucks__slider-fix 
	.our-trucks__slider-box{
    padding-right: 8px;
    scroll-padding-right: 8px;
  }
}

	.our-trucks__slider-fix 
	.our-trucks__slider-box{
	  display: flex;
	  gap: 16px;
	  overflow-x: auto;
	  overflow-y: visible;

	  padding-left: 18px;
	  padding-right: 18px;

	  scroll-snap-type: x mandatory;
	  scroll-padding-left: 18px;
	  scroll-padding-right: 18px;

	  -webkit-overflow-scrolling: touch;
	}

/* Create space so shadow is visible below cards */
	.our-trucks__slider-box{
	  padding-bottom: 56px;   /* increases space between cards & scrollbar area */
	}

/* Bottom-heavy shadow that clearly separates card from background */
/* Default: VERY light resting shadow */
.truck-card{
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow:
    0 6px 12px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* Resting state: very light, almost flat */
.truck-card{
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
  box-shadow:
    0 6px 12px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.04);
}

/* Hover: clearly pressed */
.truck-card:hover{
  transform: translateY(2px); /* more visible press */
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.14),
    0 1px 3px rgba(15, 23, 42, 0.10) !important;

  border-color: rgba(15, 23, 42, 0.12) !important;
}

.anchors {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: -1.25rem;
  margin-bottom: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background-color: #ffffff;
  transition: all 0.2s linear;
}

.anchors__row {
  display: flex;
  gap: 1rem;
}

/* Desktop */
@media (min-width: 1024px) {
  .anchors__row {
    justify-content: space-between;
  }
}

/* Mobile */
@media screen and (max-width: 1023px) {
  .anchors__row {
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-padding-left: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: -20px;
    padding: 20px;
  }

  .anchors__row::-webkit-scrollbar {
    display: none;
    width: 0.4rem;
    height: 0.4rem;
  }
}

.anchors a {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background-color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  text-transform: uppercase;
  color: #6E6E6E !important; /* grey */
  box-shadow: 2px 2px 14px rgba(79, 78, 93, 0.12);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Mobile anchors */
@media screen and (max-width: 1023px) {
  .anchors a {
    flex: 0 0 142px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

.anchors a img {
  margin-bottom: 16px;
}

/* Hover effects */
@media (hover: hover) {
  .anchors a:hover {
    color: #2A2A2A !important;          /* dark grey */
    border-color: #4a4a4a;   /* optional, matches text */
    box-shadow: 2px 2px 18px rgba(79, 78, 93, 0.2);
  }
}

/* =========================================================
                     PRICING SECTION
   ========================================================= */

.page-section.pricing {
  background-color: #ffffff;
  color: rgb(37 37 37 / 1);
  padding-bottom: 1px; /* keeps bottom spacing safe */
}

/* ---------- TITLE ---------- */
.pricing__title {
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .pricing__title {
    margin-bottom: 80px;
    text-align: center;
  }
}

/* ---------- OUTER BOX ---------- */
.pricing__box {
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .pricing__box {
    box-shadow: 2px 2px 14px 0 rgba(79, 78, 93, 0.12);
  }
}

/* ---------- COLUMNS WRAPPER ---------- */
.pricing__list {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

@media (min-width: 768px) {
  .pricing__list {
    flex-direction: row;
    padding: 1.5rem;
    /* ? Divider lines are drawn here (NOT as borders on the middle column) */
    position: relative;
    background-image:
      linear-gradient(#d1d0df, #d1d0df),
      linear-gradient(#d1d0df, #d1d0df);
    background-repeat: no-repeat;
    background-size: 1px 100%, 1px 100%;
    background-position:
      calc(33.333% + 0.625rem) 0,
      calc(66.666% - 0.625rem) 0;
  }
}

@media (min-width: 1024px) {
  .pricing__list {
    padding: 2.75rem;
    background-position:
      calc(33.333% + 1.375rem) 0,
      calc(66.666% - 1.375rem) 0;
  }
}

/* When collapsed, keep divider lines only as tall as the top content */
@media (min-width: 768px) {
  .pricing__box:not(.is-open) .pricing__list {
    background-size: 1px 220px, 1px 220px; /* adjust if you want */
  }
}
/* When open, divider lines follow full content */
@media (min-width: 768px) {
  .pricing__box.is-open .pricing__list {
    background-size: 1px 100%, 1px 100%;
  }
}

/* ---------- SINGLE COLUMN ---------- */
.pricing__item {
  flex: 1 1 0%;
  background-color: #ffffff;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .pricing__item {
    padding: 0;
  }
}

.pricing__item:not(:last-child) {
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .pricing__item:not(:last-child) {
    margin-bottom: 0;
  }
}

/* Shadow only on mobile cards */
@media (max-width: 767px) {
  .pricing__item {
    box-shadow: 2px 2px 14px 0 rgba(79, 78, 93, 0.12);
  }
}

/* Middle column spacing (? no borders here anymore) */
@media (min-width: 768px) {
  .pricing__item:nth-child(2) {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-left: 0;
    border-right: 0;
  }
}

@media (min-width: 1024px) {
  .pricing__item:nth-child(2) {
    margin-left: 2.75rem;
    margin-right: 2.75rem;
    padding-left: 2.75rem;
    padding-right: 2.75rem;
  }
}

/* ---------- COLUMN TITLE ---------- */
.pricing__item-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  margin-bottom: 1.75rem;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .pricing__item-title {
    font-size: 18px;
    margin-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .pricing__item-title {
    font-size: 23px;
  }
}

/* ---------- BIG % RANGE ---------- */
.pricing__item-percent {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 1.75rem;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .pricing__item-percent {
    font-size: 38px;
    margin-bottom: 2rem;
  }
}
@media (min-width: 1024px) {
  .pricing__item-percent {
    font-size: 52px;
  }
}

/* ---------- SHORT TEXT UNDER % ---------- */
.pricing__item-txt {
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

/* ---------- DETAILS ROW (HIDDEN/SHOWN) ---------- */
.pricing__item-row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, margin-top 0.4s ease, opacity 0.4s ease;
}

/* ? Expand */
.pricing__box.is-open .pricing__item-row {
  max-height: 1200px; /* large so it always fits */
  margin-top: 2rem;
  opacity: 1;
}

@media (min-width: 768px) {
  .pricing__box.is-open .pricing__item-row {
    margin-top: 2.75rem;
  }
}

/* On small screens, stack columns */
@media (max-width: 767px) {
  .pricing__item-row {
    flex-direction: column;
  }
}

/* Headings in details */
.pricing__item-row h3 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .pricing__item-row h3 {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 1024px) {
  .pricing__item-row h3 {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Paragraphs in details */
.pricing__item-row p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .pricing__item-row p {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 1024px) {
  .pricing__item-row p {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Vertical spacing between lines */
.pricing__item-row p:not(:last-child) {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .pricing__item-row p:not(:last-child) {
    margin-bottom: 1rem;
  }
}

/* ---------- GLOBAL TOGGLE BUTTON ---------- */
.pricing__all {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  /* ? space above + extra space below */
  margin: 1.5rem 0 0 0;
  padding-bottom: 0;
  display: none; /* hidden on mobile */
  align-items: center;
  justify-content: center;
  background-color: rgb(239 239 241 / 1);
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: rgb(37 37 37 / 1);
  border: none;
  cursor: pointer;
}

/* Show button on tablet & desktop */
@media (min-width: 768px) {
  .pricing__all {
    display: flex;
  }
}

/* arrow icon */
.pricing__all svg {
  margin-left: 12px;
  transform: rotate(90deg);
  transition: transform 0.4s ease;
}

/* arrow points up when open */
.pricing__box.is-open .pricing__all svg {
  transform: rotate(-90deg);
}

/* ? Extra bottom padding under the button (inside the box) */
@media (min-width: 768px) {
  .pricing__box {
    padding-bottom: 3rem; /* increase/decrease as you like */
  }
}

/* ---------- ADDITIONAL SERVICES ---------- */

.additional-services {
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: #464553;
  background-color: rgb(70 69 83 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: #252525;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}

.additional-services__title {
  margin-bottom: 1.5rem;

  --tw-text-opacity: 1;
  color: #fff;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .additional-services__title {
    margin-bottom: 80px;
    text-align: center;
  }
}

.additional-services__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-width: 768px) {
  .additional-services__list {
    flex-direction: row;
  }
}

.additional-services__item {
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: #fff;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .additional-services__item {
    padding: 1.5rem;
  }
}

@media screen and (min-width: 768px) {
  .additional-services__item {
    flex: 1 1 calc(33.33333% - 16px);
  }

  .additional-services__item:nth-child(n + 4) {
    flex: 1 1 calc(50% - 16px);
  }
}

.additional-services__item h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.additional-services__item h3,
.additional-services__item p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.additional-services__item p:not(:last-child) {
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .additional-services__item p:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}

/* ---------- SERVICES LIST HOVER TEXT COLOR ---------- */

/* Default state */
.services__list-item h2 {
  color: #252525; /* normal text color */
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

/* SVG inherits text color */
.services__list-item h2 svg {
  transition: color 0.3s ease;
}

/* Hover: change ONLY text & arrow color */
.services__list-item:hover h2 {
  color: #5EBEF8 !important; /* CHANGE THIS to your brand color */
}

/* Optional: slight arrow movement on hover */
.services__list-item:hover h2 svg {
  transform: translateX(4px);
  transition: transform 0.3s ease;
}

/* =========================================
   IMAGE WITH TEXT SECTION (GLOBAL CSS)
   ========================================= */
.image-with-txt {
  background-color: #FFFFFF; /* light grey background */
  color: #252525;
}

/* Layout rows */
.image-with-txt__row {
  display: flex;
  flex-direction: column-reverse;
  gap: 1.5rem; /* adds nice spacing between text and image */
}

@media (min-width: 768px) {
  .image-with-txt__row {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .image-with-txt__row--reverse {
    flex-direction: row-reverse;
  }
}

/* spacing between the two rows */
.image-with-txt__row + .image-with-txt__row {
  margin-top: 2.75rem;
}

@media (min-width: 768px) {
  .image-with-txt__row + .image-with-txt__row {
    margin-top: 2.75rem; /* keep spacing on desktop too */
  }
}

/* Content block */
.image-with-txt__content {
  padding-top: 1.5rem;
}

@media (min-width: 768px) {
  .image-with-txt__content {
    width: 50%;
    padding: 2.75rem 1.25rem;
  }
}

@media (min-width: 1024px) {
  .image-with-txt__content {
    padding: 2.75rem;
  }
}

/* ================================
   IMAGE + TEXT SECTION (BASE)
================================ */
.image-with-txt__row {
  display: flex;
  flex-direction: column;   /* mobile: stacked */
  gap: 2rem;
}

/* Base image container */
.image-with-txt__img {
  border-radius: 10px;
  overflow: hidden;
}

/* ================================
   DESKTOP LAYOUT
================================ */
@media (min-width: 768px) {

  /* Side-by-side layout */
  .image-with-txt__row {
    flex-direction: row;
    align-items: center;    /* prevents vertical stretching */
  }

  /* Text column */
  .image-with-txt__content {
    width: 50%;
  }

  /* Image column (same for BOTH rows) */
  .image-with-txt__img {
    width: 50%;
    max-width: 520px;       /* controls visual size */
    aspect-ratio: 1 / 1;   /* SQUARE */
    flex: 0 0 auto;        /* prevents stretch */
  }

  /* Image fill */
  .image-with-txt__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Reverse row: image left, text right */
  .image-with-txt__row--reverse {
    flex-direction: row-reverse;
  }
}


/* Button spacing */
.image-with-txt__btn {
  padding-top: 1.5rem;
}

/* Remove negative margins (they can cause weird overlap/collapsing) */
@media (min-width: 768px) {
  .image-with-txt__btn {
    margin-bottom: 0;
  }
}

/* =========================================================
   TRUSTED — LIST TEXT
   ========================================================= */
.trusted__list-txt p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 0;
}

@media (min-width: 768px) {
  .trusted__list-txt p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.trusted__row-txt li {
  font-weight: 600;
}


/* =========================================================
   ANIMATION
   ========================================================= */
.animate {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: transform 0.6s, opacity 0.6s;
}

.animate.animated {
  opacity: 1;
  transform: translateZ(0);
}


/* =========================================================
   ERROR MESSAGE + PAGE TRANSITIONS
   ========================================================= */
.error-msg {
  font-size: 1rem;
  line-height: 1.5rem;
  padding-top: 1rem;
  --tw-text-opacity: 1;
  color: rgb(201 45 45 / var(--tw-text-opacity));
}

.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  filter: blur(1rem);
  opacity: 0;
}


/* =========================================================
   CONTACT MAP
   ========================================================= */
.contact__map iframe {
  max-height: 320px;
}


/* =========================================================
   TRUSTED — LIST STYLES
   ========================================================= */
.trusted ol li {
  text-transform: uppercase;
}

.trusted ul p {
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: 1.4;
}

@media screen and (min-width: 1200px) {
  .trusted ul p {
    font-size: 20px;
  }
}

.trusted ul li img {
  flex-shrink: 0;
  margin-right: 10px;
}

/* =========================================================
   HERO SMALL
   ========================================================= */

.hero-small {
  background-color: #efeff1;   /* light grey */
  color: #252525;
  display: flex;
  align-items: center;         /* vertical centering */
  justify-content: center;
  padding-top: 36px;
  padding-bottom: 36px;
}

/* Tablet */
@media (min-width: 768px) {
  .hero-small {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero-small {
    padding-top: 45px;
    padding-bottom: 45px;
  }
}

/* Center text when modifier is present */
.hero-small--text-center {
  text-align: center;
}

/* Heading */
.hero-small h1 {
  font-size: 2.25rem;          /* 36px */
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 8px;             /* keep block vertically balanced */
}

/* Desktop heading */
@media (min-width: 768px) {
  .hero-small h1 {
    font-size: 40px;
  }
}

/* Sub text */
.hero-small-txt,
.hero-small-txt p {
  font-size: 1rem;             /* 16px */
  line-height: 1.75rem;
  color: #737373;
  margin: 0;
}

/* Desktop sub text */
@media (min-width: 768px) {
  .hero-small-txt,
  .hero-small-txt p {
    font-size: 1.125rem;       /* 18px */
    line-height: 1.75rem;
  }
}

/* =========================================================
   PAGE TITLE
   ========================================================= */
.page-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.28;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .page-title {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .page-title {
    line-height: 1.25;
    margin-bottom: 1.25rem;
  }
}

/* =========================================================
   BOX GRID
   ========================================================= */
.box-grid {
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}

.box-grid--gray {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 241 / var(--tw-bg-opacity));
}

.box-grid__title {
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .box-grid__title {
    margin-bottom: 80px;
    text-align: center;
  }
}

.box-grid__title p {
  color: #7d7878;
}

.box-grid__btn {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

@media (min-width: 768px) {
  .box-grid__btn {
    padding-top: 60px;
  }
}

.box-grid__btn a {
  min-width: 100%;
}

@media (min-width: 768px) {
  .box-grid__btn a {
    min-width: 352px;
  }
}

.box-grid__list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .box-grid__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.box-grid__item {
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.25rem;
  box-shadow: 2px 2px 14px 0 rgba(79, 78, 93, 0.12);
}

@media (min-width: 768px) {
  .box-grid__item {
    padding: 1.5rem;
  }
}

.box-grid__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .box-grid__item-icon {
    margin-bottom: 1.5rem;
  }
}

.box-grid__item h3 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.box-grid__item p {
  font-size: 1rem;
  line-height: 1.5rem;
}

.box-grid__item-number {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.box-grid__item-number h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 5px;
  white-space: pre-line;
}

.box-grid__item-number span {
  font-size: 57px;
  font-weight: 600;
  line-height: 1;
  margin-right: 1rem;
}

/* ================================
   OUR TEAM – FINAL (ROW + SLIDER)
================================ */

.our-team * { 
  box-sizing: border-box; 
}

.our-team {
  padding: 120px 0 100px;
  background: #fff;
}

.our-team .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Title */
.our-team__title {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.our-team__slider-fix { 
	margin-top: 80px; 
}

/* ? Container holding cards */
.our-team__viewport{
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 18px;      /* rounded container */
  padding-bottom: 20px;     /* grey base height space */
}

/* ? Grey base under cards */
.our-team__viewport::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 20px;
  background: rgba(0,0,0,.06);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  pointer-events:none;
}

/* TRACK */
.our-team__slider{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap: 16px;
  transition: transform .45s ease;
  will-change: transform;
}

/* ? EXACT 4 cards (math locked) */
.our-team__item{
  flex: 0 0 calc((100% - 48px) / 4);  /* 3 gaps Χ 16px = 48px */
  max-width: none;                   /* important */
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  text-align:center;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}


/* Square image with rounded top corners */
.our-team__item img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Text */
.our-team__item h3{
  margin: 0;
  padding: 18px 16px 6px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  color: #2f2f2f;
}
.our-team__item p{
  margin: 0;
  padding: 0 16px 20px;
  font-size: 15px;
  color: #7a7a7a;
  font-weight: 500;
}

/* Controls */
.our-team__slider-controls{
  margin-top: 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ? SCOPED SCROLLBAR (prevents conflicts) */
.our-team .scrollbar{
  position: relative;
  height: 2px;
  width: calc(100% - 120px);
  max-width: 720px;
  background: #d9d9d9;
  overflow: hidden;
  border-radius: 999px;
  flex: none;
}

.our-team .scrollbar__thumb{
  position: absolute;
  left: 0; top: 0;
  height: 2px;
  width: 25%;
  background: #111;
  transform: translateX(0);
  transition: transform .45s ease;
  border-radius: 999px;
}

/* Arrows */
.our-team__slider-arrows{
  display:flex;
  gap: 24px;
}
.our-team__slider-arrows button{
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}

.rotate-180{ 
	transform: rotate(180deg); 
}

/* Responsive */
@media (max-width: 1024px){
  .our-team__item{ 
	  flex: 0 0 220px; 
	  max-width: 220px; 
	}
}

@media (max-width: 768px){
  .our-team__viewport{ 
	  overflow-x:auto; 
	  scroll-snap-type:x mandatory; 
	}
	
  .our-team__slider{ 
	  transition:none; 
	  transform:none !important; 
	}
	
  .our-team__item{ 
	  flex: 0 0 80%; 
	  max-width: 80%; 
	  scroll-snap-align:center; 
	}
	
  .our-team__slider-controls{ 
	  display:none; 
	}
}


/* =====================================
   WE ON SOCIAL – BASE
===================================== */

.we-on-social {
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 241 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}

/* =====================================
   TITLE
===================================== */

.we-on-social__title {
  margin-bottom: 1.5rem;
}

.we-on-social__title p {
  color: #878482;
}

@media (min-width: 768px) {
  .we-on-social__title {
    margin-bottom: 80px;
    text-align: center;
  }
}

/* =====================================
   WE ON SOCIAL – FINAL (CLEAN)
===================================== */

.we-on-social {
  overflow: hidden;
  background: #efeff1;
  color: #252525;
}

/* Title */
.we-on-social__title {
  margin-bottom: 1.5rem;
}

.we-on-social__title p {
  color: #878482;
}

@media (min-width: 768px) {
  .we-on-social__title {
    margin-bottom: 80px;
    text-align: center;
  }
}

/* Slider */
.we-on-social__slider {
  max-width: none;
  margin: 0;
  padding: 0;
}

.we-on-social__viewport {
  width: 100%;
  overflow: hidden;
}

.we-on-social__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  transition: transform .45s ease;
  will-change: transform;
}

/* 3 visible on desktop */
.we-on-social__item {
  flex: 0 0 calc((100% - 48px) / 3); /* 2 gaps Χ 24px */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.we-on-social__item img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
  .we-on-social__item {
    flex: 0 0 calc((100% - 24px) / 2); /* 2 visible */
  }
}

@media (max-width: 768px) {
  .we-on-social__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .we-on-social__track {
    transition: none;
    transform: none !important;
  }

  .we-on-social__item {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}

/* Controls */
.we-on-social__slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .we-on-social__slider-controls {
    margin-top: 2rem;
  }
}

/* Arrows */
.we-on-social__slider-arrows {
  display: none;
  width: 70px;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .we-on-social__slider-arrows {
    display: flex;
  }
}

.we-on-social__slider-arrows button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.rotate-180 {
  transform: rotate(180deg);
}

/* ? SCOPED scrollbar (prevents conflicts with testimonials/other sections) */
.we-on-social .scrollbar {
  position: relative;
  height: 2px;
  width: calc(100% - 120px); /* leaves space for arrows */
  max-width: 720px;
  background: #d9d9d9;
  overflow: hidden;
  border-radius: 999px;
  flex: none;
}

.we-on-social .scrollbar__thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 25%;
  background: #111;
  transform: translateX(0);
  transition: transform .45s ease;
  border-radius: 999px;
}

/* =========================================================
   PAGE SECTION OVERLAY (SCOPED)
   ========================================================= */
.page-section[data-v-c4f2b33d] {
  position: relative;
  overflow: hidden;
  background-position: 50%;
  background-size: cover;
}

.page-section[data-v-c4f2b33d]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}

/* =========================================================
   PAGE LOADER
   ========================================================= */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  z-index: 9999;
}

.progress-bar {
  --tw-bg-opacity: 1;
  background-color: rgb(255 119 20 / var(--tw-bg-opacity));
  height: 100%;
  transition: width 0.4s ease-in-out;
}

/* =========================================================
   ERROR 404 (SCOPED)
   ========================================================= */
.error-404[data-v-8ebfd37c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .error-404[data-v-8ebfd37c] {
    padding-top: 60px;
  }
}

@media (min-width: 768px) {
  .error-404 h1[data-v-8ebfd37c] {
    font-size: 80px;
  }
}

.error-404 .page-txt[data-v-8ebfd37c] {
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .error-404 .btn[data-v-8ebfd37c] {
    min-width: 180px;
  }
}

/* =========================================================
   PAGE — SOLUTIONS
   ========================================================= */

/* Only on Solutions page */
.page-solutions .cta-box {
  position: relative;
  background-image: url("../../images/page-pictures/driver-solutions.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.cta-box {
  position: relative;
  background-color: #f6f6f7;
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* FADE LAYER */
.page-solutions .cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.9) 40%,
    rgba(255, 255, 255, 0.55) 65%,
    rgba(255, 255, 255, 0.15) 85%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 0;
}

/* CONTENT ABOVE FADE */
.page-solutions .cta-box > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
   CTA BOX
   ========================================================= */
.cta-box {
  position: relative;
  background-color: #f6f6f7;

  /* BACKGROUND IMAGE */
  background-image: url("../../images/page-pictures/other-services.webp");
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* White fade overlay (like picture 1) */
.cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.9) 40%,
    rgba(255, 255, 255, 0.55) 65%,
    rgba(255, 255, 255, 0.15) 85%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 0;
}

/* Ensure content stays above overlay */
.cta-box > * {
  position: relative;
  z-index: 1;
}

/* Heading */
.cta-box h3 {
  font-size: 28px;
  font-weight: 600;
  line-height: 2.25rem;
  margin-bottom: 1rem;
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .cta-box h3 {
    font-size: 32px;
    line-height: 2.5rem;
  }
}

/* Button */
.cta-box .btn {
  min-width: 100%;
}

@media (min-width: 768px) {
  .cta-box .btn {
    min-width: 260px;
  }
}

/* Text */
.cta-box__txt {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 535px;
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .cta-box__txt {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 2rem;
  }
}


/* JOB PAGE ONLY */
.job-section{
	padding-bottom:3.5rem
}

@media (min-width:768px){.job-section{
	padding-bottom:5rem
	}
}

@media (min-width:1024px){.job-section{
	padding-bottom:120px;
	}
}

.job{
	padding-top:3.5rem;
	--tw-text-opacity:1;
	color:#252525;
	color:rgb(37 37 37/var(--tw-text-opacity))
}

@media (min-width:1024px){.job{
	padding-top:60px
	}
}

.job__row{
	display:flex;
	flex-direction:column;
	gap:1.5rem;
}

@media (min-width:768px){.job__row{
	align-items:flex-start;
	flex-direction:row;
	}
}

.job__txt{
	border-radius:10px;
}

@media (min-width:768px){.job__txt{
	padding:1.5rem;
	width:66.17647%;
	}
}

@media screen and (min-width:768px){.job__txt{
	box-shadow:2px 2px 14px 0 rgba(79,78,93,.12)
	}
}

.job__txt h3{
	font-size:.875rem;
	font-weight:600;
	line-height:1.25rem;
	margin-bottom:.5rem;
	text-transform:uppercase;
}

.job__txt h3:not(:first-child){
	margin-top:2rem;
}

.job__txt p{
	font-size:1rem;
	line-height:1.5rem;
}

.job__txt li,.job__txt p,.job__txt p:not(:last-child){
	margin-bottom:.75rem;
}

.job__txt li{
	font-size:1rem;
	line-height:1.5rem;
}

.job__txt li p,.job__txt li:last-child{
	margin-bottom:0;
}

.job__txt ul{
	list-style:disc;
	padding-left:18px;
}

@media (min-width:768px){.job__info{
	position:sticky;
	top:1.75rem;
	width:31.61765%;
	}
}

.job__info ul{
	border-radius:10px;
	margin-bottom:1.5rem;
	padding:1.25rem;
	box-shadow:2px 2px 14px 0 rgba(79,78,93,.12);
}

@media (min-width:768px){.job__info ul{
	padding:1.5rem;
	}
}

.job__info li{
	font-size:1rem;
	line-height:1.5rem;
}

.job__info li:not(:last-child){
	margin-bottom:1rem;
}

.job__info li span{
	font-weight:600;
}

/* ===============================
   BOX TITLE (GLOBAL / PAGE HEADERS)
   =============================== */
.box-title {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 241 / var(--tw-bg-opacity));
  padding-top: 84px;
  padding-bottom: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .box-title {
    padding-top: 124px;
    padding-bottom: 44px;
  }
}

.box-title h1 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 2.5rem;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .box-title h1 {
    font-size: 40px;
  }
}

.box-title-txt,
.box-title-txt p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #878482;
}

@media (min-width: 768px) {
  .box-title-txt,
  .box-title-txt p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.feature-item {
  display: flex;
  flex-direction: column;
}

.feature-item--no-title {
  flex-direction: row;
}

.feature-item__without-title {
  margin-left: 1rem;
}

@media (min-width: 768px) {
  .feature-item__without-title {
    margin-left: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .feature-item__without-title {
    margin-left: 0.25rem;
  }
}

.feature-item h3 {
  font-weight: 600;
  letter-spacing: 0;
}

.animate { 
	opacity: 0; 
	transform: translate3d(0,40px,0); 
}
.animate.animated { 
	opacity: 1; 
}

.feature-item a {
  --tw-text-opacity: 1;
  color: rgb(253 149 67 / var(--tw-text-opacity));
}

/* 1) Increase spacing BETWEEN the 3 feature groups (original-like) */
.page-section.our-services 
.our-services__list {
  row-gap: 16px !important;   /* try 28px / 32px / 36px */
  gap: 16px !important;
}

/* Fallback: if gap doesn't work (parent not flex/grid), use margins */
.page-section.our-services 
.our-services__list > 
.feature-item {
  margin-bottom: 16px !important;
}

.page-section.our-services 
.our-services__list > 
.feature-item:last-child {
  margin-bottom: 0 !important;
}

/* Keep icon ? heading spacing untouched (don’t change internal row) */
/* (No rules here on .mr-4 / flex row) */

/* 2) Increase space between last text block and the button */
.page-section.our-services 
.our-services__content > a.btn,
.page-section.our-services 
.our-services__content > a.btn-full,
.page-section.our-services 
.our-services__content > a.btn--full {
  margin-top: 16px !important;  /* try 40px / 48px / 56px */
  display: inline-flex;
}

.page-content {
  --tw-text-opacity: 1;
  color: #252525;
  color: rgb(37 37 37 / var(--tw-text-opacity));
}

/* Title spacing (tablet and up) */
@media (min-width: 768px) {
  .page-content__title h2 {
    margin-bottom: 1.5rem;
  }
}

/* Button container */
.page-content__btn {
  display: flex;
  justify-content: flex-end;
}

/* Button link (TEXT COLOR ADDED) */
.page-content__btn a {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #606060 !important;            /* <-- button text color */
  text-decoration: none;
  cursor: pointer;
}

.page-content__btn a:hover,
.page-content__btn a.active {
  color: #2F2F2F !important;
}


/* Button icon */
.page-content__btn a svg {
  margin: 2px 0 0 12px;
  transform: rotate(90deg);
  transition: transform 0.4s;
}

/* Active state (expanded) */
.page-content__btn a.active svg {
  transform: rotate(-90deg);
}

/* Short content */
.page-content__short {
  margin-bottom: 1.5rem;
}

/* Full content (collapsible) */
.page-content__full {
  height: 0;
  overflow: hidden;
  transition: height 0.4s;
}

.page-content__full a {
  color: #606060 !important;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.page-content__full a:hover {
  color: #2F2F2F !important;
}

.page-section.box-grid {
  background-color: #ffffff;
}

/* =========================
   OUR RESULTS (Gallery)
   ========================= */

.page-section.gallery{
  background:#fff;
  padding:60px 0;
}

.gallery__slider{
  max-width:1100px;
  margin:0 auto;
}

/* Title block */
.page-section.gallery .gallery__title{
  text-align:center;
  max-width:900px;
  margin:0 auto 40px;
}
.page-section.gallery .gallery__title .page-title{
  margin-bottom:12px;
}
.page-section.gallery .gallery__title .page-txt p{
  margin:0;
  color:#878482;
}
@media (min-width:768px){
  .page-section.gallery .gallery__title{
    margin-bottom:80px;
  }
}

/* =========================
   Slider track + slides
   ========================= */

.gallery__track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:12px;
  scrollbar-width:none;
  will-change:transform;
}
.gallery__track::-webkit-scrollbar{
  display:none;
}

/* Desktop: 3 slides */
.gallery__slide{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 48px) / 3);  /* 2 gaps of 24px */
  max-width:calc((100% - 48px) / 3);
}

/* Tablet: 2 slides */
@media (max-width:1023px){
  .gallery__slide{
    flex:0 0 calc((100% - 24px) / 2); /* 1 gap of 24px */
    max-width:calc((100% - 24px) / 2);
  }
}

/* Mobile: 1 slide */
@media (max-width:767px){
  .gallery__slide{
    flex:0 0 100%;
    max-width:100%;
    aspect-ratio:16 / 9; /* optional, keeps consistent slide height */
  }
}

/* =========================
   Images
   ========================= */

.gallery__img{
  width:100%;
  height:352px;
  display:block;
  border-radius:10px;
  /* Desktop behavior */
  object-fit:contain;     /* ? prevents top/bottom cutting on desktop */
}

/* Slightly shorter images on tablet */
@media (max-width:1023px){
  .gallery__img{
    height:260px;
  }
}

/* Mobile: auto height (no cut) */
@media (max-width:767px){
  .gallery__img{
    height:auto;
    max-height:70vh;
    object-fit:contain;
  }
}

/* =========================
   Controls
   ========================= */

.gallery__slider-controls{
  max-width:1100px;
  margin:2rem auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:10;
}

.gallery__bar{
  flex:1;
  height:2px;
  background:#e5e7eb;
  position:relative;
  overflow:hidden;
}

.gallery__bar-inner{
  position:absolute;
  left:0;
  top:0;
  height:2px;
  width:30%;
  background:#111827;
  transition:transform .25s ease, width .25s ease;
}

.gallery__slider-arrows{
  display:none;
  width:70px;
  justify-content:space-between;
}
@media (min-width:768px){
  .gallery__slider-arrows{
    display:flex;
  }
}

.gallery__slider-arrows button{
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  padding:6px !important;
  cursor:pointer;
  color:#9ca3af;
}

.gallery__slider-arrows button:hover{ 
	color:#111827; 
}

.gallery__slider-arrows button:active{ 
	color:#000; 
}

.gallery__slider-arrows button.is-disabled{
  opacity:.5;
  cursor:not-allowed;
}


.contact__form {
  width: 100%;
  max-width: 560px;
}

.contact__title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase; /* matches screenshot feel */
}

.contact__form-group {
  margin-bottom: 16px;
}

/* Floating label wrapper */
.floating-label {
  position: relative;
  width: 100%;
}

/* Inputs look like original */
.floating-label input,
.floating-label textarea {
  width: 100%;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  padding: 14px 14px;
  font-size: 14px;
  outline: none;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* give textarea a bit more height */
.floating-label textarea {
  padding-top: 16px;
  resize: vertical;
}

/* Label starts INSIDE input */
.floating-label label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #666;
  background: #fff;
  padding: 0 6px;
  pointer-events: none;
  transition: all .15s ease;
}

/* When focused or has value -> label floats up */
.floating-label input:focus,
.floating-label textarea:focus {
  border-color: #9a9a9a;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}

.floating-label input:focus + label,
.floating-label textarea:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:not(:placeholder-shown) + label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: #444;
}

/* Checkbox row */
.contact__agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 18px;
}

.contact__agree input {
  margin-top: 4px;
}

.contact__agree label {
  font-size: 13px;
  color: #444;
  line-height: 1.35;
}

/* Button like original (gray, full width) */
.btn-send {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 4px;
  background: #7b7777;
  color: #fff;
  font-weight: 700;
  letter-spacing: .6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: filter .15s ease;
}

.btn-send:hover { filter: brightness(0.92); }

.btn-arrow {
  font-size: 18px;
  line-height: 1;
}

.form-status {
  margin-top: 14px;
  font-size: 14px;
}