/* =====================================================================
   ttlm — Step 1 of an incremental redesign (going step by step, per
   request — more changes to come: topbar, the "Donations received"
   section, progress bar, etc.)

   This step only:
     - Replaces the theme color (var(--theme_color), used all over
       style.css for buttons/accents/icons/the hero gradient) with the
       new green.
     - Sets the page's own background to the new grey (nothing in the
       template sets a body background today, so this was plain white).
   ===================================================================== */

:root {
  --theme_color: #90D565;

  /* Brand blue of the previous campaign (sampled from its reference
     screenshot): the "Donations received" panel background and the topbar
     DONATE NOW button (css/donations-panel.css, css/topbar.css). */
  --ttlm-blue: #0068A8;

  /* Opacity variants of --theme_color (style.css hover/tint states) are
     static rgba() values, not derived from the variable above, so they
     need updating too to stay in sync — 144, 213, 101 = rgb(#90D565). */
  --theme_color-opacity-10: rgba(144, 213, 101, 0.1);
  --theme_color-opacity-20: rgba(144, 213, 101, 0.2);
  --theme_color-opacity-30: rgba(144, 213, 101, 0.3);
  --theme_color-opacity-40: rgba(144, 213, 101, 0.4);
  --theme_color-opacity-50: rgba(144, 213, 101, 0.5);
}

.body-area {
  background-color: #D9D9D9;
}

p.given__with a {
  color: var(--ttlm-blue) !important;
}

.give__love__title img {
  filter: brightness(0) saturate(100%) invert(74%) sepia(30%) saturate(600%) hue-rotate(62deg) brightness(95%) contrast(90%);
}

.about__laurie h2 {
  color: var(--ttlm-blue) !important;
}

.skill-wrrap .skill-per:after {
  background-color: var(--ttlm-blue) !important;
}

.matcher__title,
.company__title {
  display: none;
}

.matcher__area .container,
.company__area .container {
  display: none;
}

.matcher__area.mb,
.company__area.mb {
  margin-bottom: 10px;
}

/* The matcher slider is populated dynamically (matcher-slider.js);
   owl carousel clones items for loop mode, and below 1000 px width
   the clones can wrap onto a second hidden row, inflating the
   section height. Force the stage to a single row. */
.matcher__slider .owl-stage,
.company__slider .owl-stage {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* Sync both sliders: uniform inter-item gap */
.matcher__slider .owl-item,
.company__slider .owl-item {
  margin-right: 16px !important;
}