/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../font/barlow-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../font/barlow-v13-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../font/barlow-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* barlow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../font/barlow-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --background:          0 0% 99%;
  --foreground:          0 0% 33%;
  --card:                0 0% 100%;
  --card-foreground:     0 0% 33%;
  --popover:             0 0% 100%;
  --popover-foreground:  0 0% 33%;

  /* Primärfarbe: Weinrot / Bordeaux */
  --primary:             355 85% 40%;
  --primary-foreground:  0 0% 100%;
  --primary-light:       355 85% 95%;

  --secondary:           0 0% 96%;
  --secondary-foreground:0 0% 33%;
  --muted:               0 0% 95%;
  --muted-foreground:    0 0% 45%;
  --accent:              355 85% 40%;
  --accent-foreground:   0 0% 100%;
  --destructive:         0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border:              0 0% 90%;
  --input:               0 0% 90%;
  --ring:                355 85% 40%;
  --radius:              .75rem;

  /* Custom Klassen-Werte */
  --hero-gradient:       linear-gradient(135deg, hsl(355 85% 40%) 0%, hsl(355 75% 35%) 100%);
  --card-shadow:         0 4px 20px -4px hsl(0 0% 33% / .08);
  --card-shadow-hover:   0 12px 32px -8px hsl(355 85% 40% / .2);
  --text-gradient:       linear-gradient(135deg, hsl(355 85% 35%) 0%, hsl(355 75% 45%) 100%);
}

.dark {
  --background:          0 0% 10%;
  --foreground:          0 0% 95%;
  --card:                0 0% 12%;
  --card-foreground:     0 0% 95%;
  --primary:             355 80% 50%;
  --primary-foreground:  0 0% 100%;
  --primary-light:       355 40% 20%;
  --muted:               0 0% 18%;
  --muted-foreground:    0 0% 60%;
  --border:              0 0% 20%;
  --input:               0 0% 20%;
  --ring:                355 80% 50%;
}

/* ----------------------------------------------------------
   3. TAILWIND BASE RESET (aus Original übernommen)
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: Barlow, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: inherit;
  background-color: hsl(var(--background));
  font-family: Barlow, system-ui, sans-serif;
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  font-family: Barlow, system-ui, sans-serif;
  margin: 0;
}

a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
img, svg, video { display: block; vertical-align: middle; max-width: 100%; }
img, video { max-width: 100%; height: auto; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
p, blockquote, dl, dd, hr, figure, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
button, [role=button] { cursor: pointer; }
[hidden] { display: none; }

/* ----------------------------------------------------------
   4. CUSTOM KLASSEN – exakt aus Original-CSS
   ---------------------------------------------------------- */

/* Layout */
.section-padding { padding: 4rem 1rem; }
@media (min-width: 768px)  { .section-padding { padding: 6rem 2rem; } }
@media (min-width: 1024px) { .section-padding { padding-left: 4rem; padding-right: 4rem; } }

.container-narrow { margin-left: auto; margin-right: auto; max-width: 72rem; }

/* Shadows */
.card-shadow             { box-shadow: var(--card-shadow); }
.card-shadow-hover       { box-shadow: var(--card-shadow-hover); }
.hover\:card-shadow-hover:hover { box-shadow: var(--card-shadow-hover); }

/* Hero Gradient Overlay */
.bg-hero-gradient { background: var(--hero-gradient); }

/* Font */
.font-display { font-family: Barlow, system-ui, sans-serif; }

/* Animationen */
.animate-fade-in  { animation: fade-in .6s ease-out forwards; }
.animate-float    { animation: float 3s ease-in-out infinite; }
.animate-pulse    { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }

@keyframes fade-in {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes pulse {
  50% { opacity: .5; }
}

/* ----------------------------------------------------------
   5. TAILWIND UTILITY KLASSEN (alle im HTML verwendeten)
   ---------------------------------------------------------- */

/* Hintergrundfarben */
.bg-background   { background-color: hsl(var(--background)); }
.bg-card         { background-color: hsl(var(--card)); }
.bg-foreground   { background-color: hsl(var(--foreground)); }
.bg-muted        { background-color: hsl(var(--muted)); }
.bg-primary      { background-color: hsl(var(--primary)); }
.bg-primary-light{ background-color: hsl(var(--primary-light)); }
.bg-primary-foreground { background-color: hsl(var(--primary-foreground)); }
.bg-primary-foreground\/20 { background-color: hsl(var(--primary-foreground) / .2); }

/* Textfarben */
.text-foreground          { color: hsl(var(--foreground)); }
.text-primary             { color: hsl(var(--primary)); }
.text-white               { color: #fff !important;}
.text-primary-foreground  { color: hsl(var(--primary-foreground)); }
.text-primary-foreground\/80 { color: hsl(var(--primary-foreground) / .8); }
.text-primary-foreground\/90 { color: hsl(var(--primary-foreground) / .9); }
.text-muted               { color: hsl(var(--muted)); }
.text-muted-foreground    { color: hsl(var(--muted-foreground)); }
.text-muted\/60           { color: hsl(var(--muted) / .6); }
.text-muted\/80           { color: hsl(var(--muted) / .8); }

/* Rahmen */
.border-border            { border-color: hsl(var(--border)); }
.border-primary-foreground{ border-color: hsl(var(--primary-foreground)); }
.border-muted\/20         { border-color: hsl(var(--muted) / .2); }

/* Hover-Farben */
.hover\:text-primary:hover             { color: hsl(var(--primary)); }
.hover\:text-primary\/80:hover         { color: hsl(var(--primary) / .8); }
.hover\:text-white:hover               { color: #fff; }
.hover\:bg-primary\/90:hover           { background-color: hsl(var(--primary) / .9); }
.hover\:bg-primary-foreground\/10:hover{ background-color: hsl(var(--primary-foreground) / .1); }
.hover\:bg-primary-foreground\/90:hover{ background-color: hsl(var(--primary-foreground) / .9); }
.hover\:shadow-lg:hover                { box-shadow: 0 10px 25px rgba(0,0,0,.15); }
.hover\:shadow-primary\/25:hover       { box-shadow: 0 8px 20px hsl(var(--primary) / .25); }
.hover\:shadow-xl:hover                { box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.hover\:-translate-y-1:hover           { transform: translateY(-4px); }

/* Group Hover */
.group:hover .group-hover\:bg-primary             { background-color: hsl(var(--primary)); }
.group:hover .group-hover\:text-primary-foreground{ color: hsl(var(--primary-foreground)); }

/* Opacity */
.opacity-0  { opacity: 0; }
.opacity-85 { opacity: .85; }

/* Filter */
.brightness-0 { filter: brightness(0); }
.invert       { filter: invert(1); }
.brightness-0.invert { filter: brightness(0) invert(1); }

/* Focus-Visible */
.ring-offset-background                { --tw-ring-offset-color: hsl(var(--background)); }
.focus-visible\:outline-none:focus-visible { outline: none; }
.focus-visible\:ring-2:focus-visible   { box-shadow: 0 0 0 2px hsl(var(--ring)); }

/* Position */
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }
.-bottom-6{ bottom: -1.5rem; }
.-right-6 { right: -1.5rem; }
.z-50     { z-index: 50; }

/* Display */
.hidden      { display: none; }
.block       { display: block; }
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }

/* Flexbox */
.flex-col        { flex-direction: column; }
.flex-shrink-0   { flex-shrink: 0; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/*
.sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sm\:flex-row     { flex-direction: row; }
*/
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:flex-col    { flex-direction: column; }
}
@media (min-width: 768px) {
  .md\:flex          { display: flex; }
  .md\:hidden        { display: none; }
  .md\:block         { display: block; }
  .md\:flex-row      { flex-direction: row; }
  .md\:grid-cols-3   { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:px-8          { padding-left: 2rem; padding-right: 2rem; }
  .md\:mb-16         { margin-bottom: 4rem; }
  .md\:text-2xl      { font-size: 1.5rem; }
  .md\:text-4xl      { font-size: 2.25rem; }
  .md\:text-6xl      { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-4   { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:gap-16        { gap: 4rem; }
  .lg\:text-7xl      { font-size: 4.5rem; }
}

/* Sizing */
.w-4   { width: 1rem; }
.w-5   { width: 1.25rem; }
.w-6   { width: 1.5rem; }
.w-7   { width: 1.75rem; }
.w-10  { width: 2.5rem; }
.w-12  { width: 3rem; }
.w-16  { width: 4rem; }
.w-auto{ width: auto; }
.w-full{ width: 100%; }
.h-4   { height: 1rem; }
.h-5   { height: 1.25rem; }
.h-6   { height: 1.5rem; }
.h-7   { height: 1.75rem; }
.h-10  { height: 2.5rem; }
.h-12  { height: 3rem; }
.h-14  { height: 3.5rem; }
.h-16  { height: 4rem; }
.h-20  { height: 5rem; }
.h-full{ height: 100%; }
.max-w-2xl{ max-width: 42rem; }
.max-w-4xl{ max-width: 56rem; }
.min-h-screen { min-height: 100vh; }
.aspect-\[4\/5\] { aspect-ratio: 4/5; }

/* Abstände */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1  { margin-bottom: .25rem; }
.mb-2  { margin-bottom: .5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-1  { margin-top: .25rem; }
.mt-2  { margin-top: .5rem; }
.mt-12 { margin-top: 3rem; }
.ml-1  { margin-left: .25rem; }
.p-2   { padding: .5rem; }
.p-4   { padding: 1rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.px-4  { padding-left: 1rem;  padding-right: 1rem; }
.px-8  { padding-left: 2rem;  padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-2  { padding-top: .5rem;  padding-bottom: .5rem; }
.py-12 { padding-top: 3rem;   padding-bottom: 3rem; }
.pt-8  { padding-top: 2rem; }
.pt-32 { padding-top: 8rem; }
.pb-16 { padding-bottom: 4rem; }

.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mb-3 {
  margin-bottom: .75rem;
}

/* Typografie */
.font-bold    { font-weight: 700; }
.font-semibold{ font-weight: 600; }
.font-medium  { font-weight: 500; }
.text-sm  { font-size: .875rem; }
.text-base{ font-size: 1rem; }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.text-7xl { font-size: 4.5rem; }
.leading-tight  { line-height: 1.25; }
.leading-relaxed{ line-height: 1.625; }
.text-center    { text-align: center; }
.whitespace-nowrap { white-space: nowrap; }
.not-italic     { font-style: normal; }

/* Borders & Radius */
.rounded-lg  { border-radius: .5rem; }
.rounded-xl  { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.border-b    { border-bottom-width: 1px; }
.border-t    { border-top-width: 1px; }
.border-2    { border-width: 2px; border-style: solid; }

/* Overflow & Object */
.overflow-hidden { overflow: hidden; }
.object-cover    { object-fit: cover; }

/* Misc */
.transition-all    { transition-property: all; transition-duration: .3s; transition-timing-function: ease; }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: .2s; }
.duration-300      { transition-duration: .3s; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.14); }

/* ----------------------------------------------------------
   6. HEADER
   ---------------------------------------------------------- */
header.fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background-color: hsl(var(--card));
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: box-shadow .3s ease;
}
header.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.14); }

/* ----------------------------------------------------------
   7. MOBILE MENU
   ---------------------------------------------------------- */
#mobile-menu {
  background-color: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
}
#mobile-menu ul.rex-navi1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}
#mobile-menu a {
  font-size: 1.125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  transition: color .2s;
}
#mobile-menu a:hover { color: hsl(var(--primary)); }

/* ----------------------------------------------------------
   8. FOOTER
   ---------------------------------------------------------- */
footer.bg-foreground {
  background-color: hsl(var(--foreground));
}

/* ----------------------------------------------------------
   9. HEADER-BUTTON & COMPOUND STYLES
   ---------------------------------------------------------- */

/* Header "Termin vereinbaren" Button
   Klassen: inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium
            bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg
            hover:shadow-primary/25 h-12 rounded-lg px-8 text-base
   Alle Einzelklassen sind oben definiert. Zusätzlich explizit als Button-Compound: */
a.btn-header,
.bg-primary.h-12.rounded-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    height: 3rem;
    border-radius: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
    gap: 0.5rem;
}
a.btn-header:hover,
.bg-primary.h-12.rounded-lg:hover {
    background-color: hsl(var(--primary) / .9);
    box-shadow: 0 8px 20px hsl(var(--primary) / .25);
}

/* Sicherheitsnetz: Falls Tailwind-Klassen nicht kombiniert greifen,
   zieht diese direkte Deklaration für den Header-Button */
header a[href="#kontakt"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground)) !important;
    height: 3rem;
    border-radius: 0.5rem;
    padding: 0 2rem;
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    gap: 0.5rem;
}
header a[href="#kontakt"]:hover {
    background-color: hsl(var(--primary) / .9);
    box-shadow: 0 8px 20px hsl(var(--primary) / .25);
}

/* Mobile Menu CTA */
#mobile-menu a[href="#kontakt"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground)) !important;
    height: 3rem;
    border-radius: 0.5rem;
    padding: 0 2rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
#mobile-menu a[href="#kontakt"]:hover {
    background-color: hsl(var(--primary) / .9);
}

/* Kontakt-Sektion CTA-Button (h-14 rounded-xl) */
section#kontakt a[href^="tel:"].h-14,
.h-14.rounded-xl.bg-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    height: 3.5rem;
    border-radius: 0.75rem;
    padding: 0 2.5rem;
    font-weight: 500;
    font-size: 1.125rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}
section#kontakt a[href^="tel:"].h-14:hover,
.h-14.rounded-xl.bg-primary:hover {
    background-color: hsl(var(--primary) / .9);
    box-shadow: 0 8px 20px hsl(var(--primary) / .25);
}

/* h-16 (Kontaktkarten-Icons) */
.h-16 { height: 4rem; }
.w-16 { width: 4rem; }

/* rounded-xl für Kontaktkarten-Icons */
.rounded-xl { border-radius: 0.75rem; }

/* hover:bg-primary für Icon-Wrapper in Gruppen */
.group:hover .group-hover\:bg-primary {
    background-color: hsl(var(--primary));
}
.group:hover .group-hover\:text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.template-leistungen .section-hero {
min-height: 60vh;
}

/* ==========================================================================
   Services Slider – Redaxo Modul 07
   ========================================================================== */

.services-slider-section { background-color: hsl(var(--color-muted, 0 0% 96%)); }

.services-slider {
  position: relative;
  padding: 0 3rem;
}

.services-slider__viewport {
  overflow: hidden;
}

.services-slider__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.services-slider__slide {
  flex: 0 0 100%;
  padding: 0 .75rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .services-slider__slide { flex-basis: 50%; }
}
@media (min-width: 900px) {
  .services-slider__slide { flex-basis: 33.3333%; }
}
@media (min-width: 1100px) {
  .services-slider__slide { flex-basis: 25%; } /* 4 sichtbar */
}

/* Karten (nutzen ggf. bereits vorhandenes .service-card, hier Fallback/Ergänzung) */
.services-slider .service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: .75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 20px -2px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
  color: inherit;
  text-decoration: none;
}
.services-slider .service-card--link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -4px rgba(190,16,30,.18);
}
.services-slider .service-icon {
  color: #BE101E;
  margin-bottom: 1rem;
}
.services-slider .service-card h3 {
  font-size: 1.25rem;
  margin: 0 0 .5rem;
  line-height: 1.25;
}
.services-slider .service-card p {
  color: #555;
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.services-slider .service-card__link {
  margin-top: auto;
  color: #BE101E;
  font-weight: 600;
}

/* Nav-Buttons */
.services-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #BE101E;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.services-slider__nav:hover { background: #BE101E; color: #fff; }
.services-slider__nav:disabled { opacity: .35; cursor: not-allowed; }
.services-slider__nav--prev { left: 0; }
.services-slider__nav--next { right: 0; }

/* Dots */
.services-slider__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.services-slider__dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #d0d0d0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.services-slider__dot.is-active {
  background: #BE101E;
  transform: scale(1.25);
}


@media screen and (max-width: 767px) {
.text-5xl {
  font-size: 2rem;
}
.text-xl {
  font-size: 1.1rem;
}
}