:root {
  --color-white: #fff;
  --color-black: #333;
  --color-blue-mm-logo: #23A0DB;
  --color-blue-mm-light: #7CB1C2;
  --color-blue-mm-light-transp: rgba(124, 177, 194, 0.9);
  --color-blue-mm-dark: #417BA5;
  --color-action-green: #1e964e;
  --color-text: #11354d;
  --font-size-small: 0.6875rem;
  --font-size-default: 1rem;
  --font-letter-spacing: .04em;
  --font_titel: "Titillium Web", sans-serif !important;
  --font_def: "Titillium Web", sans-serif;
}

*,
html, body {
  font-family: var(--font_def);
  color: var(--color-text);
  font-size: 17px;
  letter-spacing: var(--font-letter-spacing);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font_titel);
  font-weight:unset;
}
h1, .h1{
  font-size: 3rem !important;
  word-break: break-all;
}
h3,p,
div.container h1{
  color:inherit;
}

@media (max-width: 900px) {
  h1, .h1{
    font-size: 2rem !important;
  }
}
h2, .h2{
  font-size: 2.5rem !important;
}
h3, .h3 {
  font-size: 1.875rem !important;
}
h4, .h4, .fs-18{
  font-size: 1.1rem;
}
h5, .h5 {
  font-size: 1.25rem;
}
h6, .h6 {
  font-size: 1rem;
}
p, .p{
  line-height: 1.8;
  font-size: 1rem;
}

.btn{
  text-transform: none;
}
.btn-outline-secondary {
  background-color: var(--color-action-green);
}
.btn-outline-secondary:hover {
  background-color: rgb(25 124 65);
}
.btn-primary{
  background-color: var(--color-blue-mm-dark);
}
.btn-primary:hover, .btn-base-color:hover {
  background-color: var(--color-blue-mm-light);
}

/* ----- header start ----- */
header.header-dark {
  background-color: rgba(0, 24, 49, 0.8) !important;
}

@media (min-width: 992px) {
  header.header-dark {
    background-color: rgba(0, 24, 49, 0.8) !important;
  }
}
header .navbar-nav img {
  border: solid 1px #FFF;
}

header .navbar-nav .nav-link{
  font-weight: 400;
}
header .navbar-nav .nav-link,
.text-uppercase {
  text-transform: none !important;
}
header .navbar-nav .nav-link {
  font-size: 0.7875rem;
}
@media (max-width: 992px) {
  header .navbar-nav .nav-link {
    font-size: 1.2rem;
  }
}
/* ----- header end ----- */

/* ----- navbar start ----- */
.navbar-nav .dropdown-menu {
  background-color: var(--color-blue-mm-light-transp);
  color: #FFF;
}
.dropdown-item{
  color:inherit;
}
.dropdown-item:focus, .dropdown-item:hover {
  color: inherit;
  background-color: inherit;
}
.dropdown-item a:hover {
  text-decoration: underline;
}
/* ----- navbar end ----- */

.text-primary,
i.fa,
.text-base-color,
.service-icon i.fas,
.features-block .block-icon i{
  color:var(--color-blue-mm-logo) !important;
}
.text-hover-base-color:hover {
  color:var(--color-blue-mm-light) !important;
}
.bg-base-color, .timeline .timeline-item:before, .pace .pace-progress, .title-sideline-base-color:before, .btn-base-color {
  background-color: var(--color-blue-mm-light);
}
.title-underline-base-color, .title-underline-thick-base-color, .features-block .block-icon  {
    border-color:  var(--color-blue-mm-light);
}
.carousel-custom .flickity-page-dots .dot.is-selected {
    background: var(--color-blue-mm-light);
}

.service-card {
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35);
  width:100%;
  background-color: #ffffff  !important; /*#f8f9fa !important; */
}
.service-card:hover {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

.service-title {
  font-weight: unset;
}

.bg-mm{
  background-color: #23a0db24;
}

@media (min-width: 992px) {
  section {
    padding: 80px 0;
  }
}

footer h4,
footer i,
footer a,
footer span,
footer p,
footer div{
  color:#FFF;
}

/* news_ticker */
.news-ticker-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(4,19,39,0.8);
  overflow: hidden;
  z-index: 99;
}

/* Centered white “inner” column */
.news-ticker-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  height: 40px;
  align-items: center;
  background: rgba(246, 249, 252, 0.9);
}

/* “Nieuws” label */
.news-ticker-label {
  background: #307eaa;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .5px;
  padding: 0 20px;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.news-ticker-label::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 1px; height: 20px;
  background: rgba(255,255,255,.3);
  transform: translateY(-50%);
}

/* Scroller “mask” + start offset */
.news-ticker-content {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding-left: 20px;
  height: 100%;
}

/* Fixed fade on top of scrolling area */
.news-ticker-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(18, 74, 124, 0.8), transparent);
  z-index: 10; /* Make sure it's above .news-ticker-wrapper */
}

/* Scrolling strip */
.news-ticker-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  z-index: 5;
}

/* Individual items */
.news-ticker-item {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 30px;
  font-size: 14px;
  color: #4a4a4a;
  text-decoration: none;
  position: relative;
}
.news-ticker-item i {
  margin-right: 12px;
  font-size: 14px;
  color: #124a7c;
}
.news-ticker-item:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: 10px;
  color: #124a7c;
  opacity: .4;
  font-size: 12px;
}

/* Responsive shrink */
@media (max-width: 991px) {
  .news-ticker-inner { height: 36px; }
  .news-ticker-label {
    padding: 0 15px;
    font-size: 12px;
    min-width: 80px;
  }
  .news-ticker-item {
    padding: 0 20px;
    font-size: 13px;
  }
}

/* Sportles Lessen */
.classes-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding: 10px 0 25px;
  margin-bottom: 2rem;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.classes-scroll::-webkit-scrollbar {
  height: 8px;
  display: block;
}
.classes-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.classes-scroll::-webkit-scrollbar-thumb {
  background: var(--primary, #007bff);
  border-radius: 10px;
}
.classes-scroll::-webkit-scrollbar-thumb:hover {
  background: #0056b3;
}

.class-item {
  scroll-snap-align: start;
  min-width: 280px;
  flex: 0 0 auto;
  width: 320px;
  padding: 0 15px;
  margin-bottom: 15px;
}

.class-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  background-color: #fff;
}
.class-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.class-card-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.class-card-header i {
  color: var(--primary);
  font-size: 1.75rem;
  margin-bottom: 10px;
}
.class-card-body {
  padding: 20px;
}
.class-indicator {
  height: 3px;
  width: 40px;
  background-color: var(--primary);
  margin: 8px auto 15px;
}
/* ================================
   FEATURE TICKER
================================== */
.rotator-line { transition: opacity .35s ease; opacity: 1; min-height: 1.5em; }
.rotator-line.is-fading { opacity: 0; }

.feature-rotator { border-top: 1px dashed rgba(0,0,0,.12); margin-top:.5rem; padding-top:.6rem; font-size:.95rem; }
.rotator-dots { display:flex; gap:.35rem; margin-top:.5rem; justify-content:center; }
.rotator-dot { width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.18); }
.rotator-dot.is-active { background: var(--primary, #239fdb); }

.rotator-progress { height:3px; background: rgba(0,0,0,.08); border-radius:2px; overflow:hidden; margin-top:.4rem; }
.rotator-progress .bar { height:100%; width:0%; background: var(--primary, #239fdb); transition: width 2.8s linear; }

/* ================================
   CHECKLIST LOOK (service lists)
================================== */
.service-checklist li{ position:relative; padding-left:1.5rem; margin:.35rem 0; }
.service-checklist li::before{
  content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:0; top:.15rem;
}
.service-card .service-desc { color:#6c757d; }

/* ================================
   LIGPLAATSEN: HERO + STICKY CARD
================================== */
.ligp-hero{ border-radius:1rem; }

/* make sure the section creates a stacking context for nice overlap */
#ligplaatsen{ position: relative; z-index: 0; }

/* sticky wrapper */
.ligp-over-hero.sticky-top{
  margin-top: -160px;            /* overlap the hero initially (desktop) */
  z-index: 2;
  top: clamp(72px, 8vh, 100px);  /* sticky offset */
}

/* subtle lift on the card */
.ligp-over-hero .service-card{
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* mobile/tablet: no overlap */
@media (max-width: 991.98px){
  .ligp-over-hero.sticky-top{ margin-top: 0; top: 20px; }
}

/* anchor offset so in-page #links don’t hide under fixed header */
#ligplaatsen,
#gallery { scroll-margin-top: 100px; }

/* ================================
   HERO / YOUTUBE BACKGROUND
================================== */
#home-bg-video{ position:relative; min-height:70vh; background:#000; }
#home-bg-video, #home-bg-video *{ filter:none !important; mix-blend-mode:normal !important; }

#yt-lite{ position:absolute; inset:0; background:center/cover no-repeat; cursor:pointer; }
#yt-lite iframe, #yt-bg{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh;
  transform:translate(-50%,-50%); border:0; pointer-events:none;
}
#yt-lite .yt-play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:68px; height:48px; border-radius:14px; background:rgba(0,0,0,.55);
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.35);
}
#yt-lite .yt-play-btn::before{
  content:""; border-style:solid; border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff; margin-left:3px;
}
#yt-lite.is-playing .yt-play-btn{ opacity:0; visibility:hidden; }

/* ================================
   MAASTRICHT MARINA GALLERY
================================== */
.mm-gallery { position: relative; z-index: 0; }
.mm-gallery .mm-filterbar .btn[data-filter]{ min-width: 140px; }
.mm-gallery .mm-filterbar .btn.is-active{ /* style active state if needed */ }

.mm-gallery .mm-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; width: 100%;
}

/* nuke rogue transforms/positions from theme lightbox/libs */
.mm-gallery .mm-grid, 
.mm-gallery .mm-grid *{
  position: static !important;
  top: auto !important; left: auto !important;
  transform: none !important; float: none !important;
}

.mm-gallery .mm-card{
  aspect-ratio: 4 / 3;
  border-radius: .75rem; overflow: hidden;
  background: #f2f4f7; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.mm-gallery .mm-card img{
  width: 100%; height: 100%; object-fit: cover;
  display: block; opacity: 0; transition: opacity .25s ease;
}
.mm-gallery .mm-card img.is-ready{ opacity: 1; }
.mm-gallery .mm-actions{ text-align:center; margin-top: 1rem; }
.mm-gallery .container{ margin-bottom: 2.5rem; }

/* ================================
   LIGHTBOX
================================== */
#mmLightbox.mm-lightbox {
  position: fixed; inset: 0; display: none;
  background: rgba(0,0,0,.9);
  align-items: center; justify-content: center;
  z-index: 9999;
}
#mmLightbox.is-open { display: flex; }

#mmLightbox .mm-frame { position: relative; max-width: 92vw; max-height: 86vh; z-index: 1; }
#mmLightbox img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; }
#mmLightbox .mm-caption { margin-top: .75rem; text-align: center; color: #fff; opacity: .85; }

/* close button */
#mmLightbox .mm-close{
  position: absolute; top: 14px; right: 18px;
  font-size: 2rem; line-height: 1; color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.35); border-radius: 50%; padding: 6px 12px;
  z-index: 3; cursor: pointer; border: 0;
}
#mmLightbox .mm-close:hover{ color:#fff; background: rgba(0,0,0,.55); }

/* arrows */
#mmLightbox .mm-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 2.5rem; line-height: 1;
  color: rgba(255,255,255,.6); background: rgba(0,0,0,.25);
  border-radius: 50%; padding: 12px; cursor: pointer; border: 0;
  transition: all .2s ease; z-index: 2; user-select: none;
  visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
}
#mmLightbox .mm-nav:hover{ color:#fff; background: rgba(0,0,0,.45); }
#mmLightbox .mm-prev{ left: 20px; inset-inline-start: 20px; }
#mmLightbox .mm-next{ right: 20px; inset-inline-end: 20px; }
/* ================================
   HOMEPAGE — SERVICEKAARTEN OVER DE VIDEO
   Vier gelijkwaardige kaarten die de hero in worden getrokken.
   --mm-overlap is de enige knop: hij bepaalt zowel hoever de kaarten
   over de video steken als hoever de blauwe rand meeloopt, zodat die
   rand per definitie op de onderrand van de video eindigt.
   De id-selector is nodig: style.css zet #services al op -60px en dat
   wint van een losse class.
================================== */
#services.mm-services{
  --mm-overlap:180px;
  position:relative; z-index:16;
  margin-top:calc(var(--mm-overlap) * -1);
  /* Elke <section> krijgt op >=992px 80px padding-top; die zou de kaart
     binnen de sectie omlaag duwen en de rand voorbij de video laten
     eindigen. */
  padding-top:0;
}
@media(max-width:1199px){ #services.mm-services{ --mm-overlap:140px; } }
@media(max-width:767px){  #services.mm-services{ --mm-overlap:96px; } }

.mm-svc-grid{ display:grid; grid-template-columns:1fr; gap:1.6rem; }
@media(min-width:576px){ .mm-svc-grid{ grid-template-columns:1fr 1fr; gap:1.7rem 1.1rem; } }
@media(min-width:1200px){ .mm-svc-grid{ grid-template-columns:repeat(4,1fr); gap:1.25rem; } }

.mm-svc-card{
  --mm-radius:14px; --mm-accent:var(--color-blue-mm-logo); --mm-line:40px;
  position:relative; background:#fff; border-radius:var(--mm-radius);
  padding:3.1rem 1.25rem 1.35rem; display:flex; flex-direction:column; height:100%;
  box-shadow:0 14px 38px rgba(4,19,31,.3);
  transition:transform .25s ease, box-shadow .25s ease;
}
.mm-svc-card:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(4,19,31,.4); }

/* De blauwe rand volgt de bovenrand, rondt met de hoeken mee en loopt
   langs de zijkanten omlaag tot precies de onderrand van de video --
   hij omlijnt dus het stuk kaart dat op het beeld ligt. */
.mm-svc-card:before{
  content:""; position:absolute; top:0; left:0; right:0; height:var(--mm-line);
  border:3px solid var(--mm-accent); border-bottom:0;
  border-radius:var(--mm-radius) var(--mm-radius) 0 0;
  pointer-events:none; z-index:1;
}
/* Alleen de kaarten die echt op het beeld liggen laten de rand
   doorlopen; dat is per breedte een andere set omdat het raster van
   vier naar twee naar een kolom gaat. */
@media(min-width:1200px){ .mm-svc-card{ --mm-line:var(--mm-overlap); } }
@media(min-width:576px) and (max-width:1199px){ .mm-svc-card:nth-child(-n+2){ --mm-line:var(--mm-overlap); } }
@media(max-width:575px){ .mm-svc-card:first-child{ --mm-line:var(--mm-overlap); } }

.mm-svc-ic{
  position:absolute; top:-37px; left:50%; transform:translateX(-50%);
  width:74px; height:74px; border-radius:50%; background:#fff; color:var(--mm-accent);
  display:flex; align-items:center; justify-content:center; font-size:1.75rem; z-index:2;
  border:4px solid var(--mm-accent); box-shadow:0 8px 22px rgba(4,19,31,.3);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
.mm-svc-ic i{ transition:transform .32s cubic-bezier(.2,.7,.3,1); }
.mm-svc-card:hover .mm-svc-ic{
  transform:translateX(-50%) translateY(-4px) scale(1.06);
  box-shadow:0 12px 28px rgba(4,19,31,.34), 0 0 0 7px rgba(35,160,219,.15);
}
.mm-svc-card:hover .mm-svc-ic i{ transform:scale(1.08); }

.mm-svc-badge{
  position:absolute; top:.75rem; right:.8rem; z-index:3;
  background:var(--color-action-green); color:#fff; font-size:.66rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; padding:.22rem .6rem; border-radius:999px;
}
.mm-svc-title{
  font-size:1.25rem; font-weight:600; color:var(--color-text); margin:0 0 .45rem;
  text-align:center; line-height:1.15; min-height:2.3em;
  display:flex; align-items:center; justify-content:center;
}
.mm-svc-desc{
  color:#6c757d; font-size:.87rem; line-height:1.5; margin:0 0 1rem; text-align:center;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height:3.9em;
}
.mm-svc-list{ list-style:none; padding:0; margin:0 0 1.3rem; }
.mm-svc-list li{ position:relative; padding-left:1.5rem; font-size:.85rem; color:#11354d; margin:.35rem 0; line-height:1.35; }
.mm-svc-list li:before{
  content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; left:0; top:.15rem; color:var(--color-blue-mm-logo); font-size:.78rem;
}
/* De vaste hoogtes lijnen de vier kolommen uit; onder die breedte
   staat elke kaart alleen en zou dat alleen maar lucht geven. */
@media(max-width:1199px){
  .mm-svc-title{ min-height:0; }
  .mm-svc-desc{ min-height:0; -webkit-line-clamp:initial; display:block; }
}

/* De groene knop draagt het langste woord en krijgt dus meer ruimte;
   afbreken mag, afkappen niet -- de Franse labels zijn langer. */
.mm-svc-actions{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.45rem; }
.mm-svc-btn{
  min-width:0; text-align:center; border-radius:8px; padding:.62rem .5rem;
  font-weight:700; font-size:.82rem; text-decoration:none; line-height:1.25;
  display:flex; align-items:center; justify-content:center;
}
.mm-svc-btn-info{ flex:1 1 40%; background:var(--color-blue-mm-dark); color:#fff; }
.mm-svc-btn-info:hover{ background:#36688c; color:#fff; }
.mm-svc-btn-book{ flex:2 1 55%; background:var(--color-action-green); color:#fff; }
.mm-svc-btn-book:hover{ background:#186f3b; color:#fff; }

@media(prefers-reduced-motion:reduce){
  .mm-svc-card, .mm-svc-ic, .mm-svc-ic i{ transition:none; }
  .mm-svc-card:hover{ transform:none; }
  .mm-svc-card:hover .mm-svc-ic{ transform:translateX(-50%); }
  .mm-svc-card:hover .mm-svc-ic i{ transform:none; }
}

/* --- maastrichtsloep: sfeerband onder de USP-kaartjes ---------------
   Een volle foto direct onder de vier USP-kaartjes, waar die kaartjes
   half overheen zakken -- zelfde idee als .mm-services over de
   hero-video op de homepage.

   --sl-overlap is de enige knop: hij bepaalt zowel hoever de band
   omhoog schuift als hoe hoog de witte vervaging bovenin loopt, zodat
   de foto tussen de kaartjes door precies op de onderrand van het
   witte vlak begint. Niet los van elkaar zetten.

   De kaartjes zijn dekwit met schaduw (.service-card), dus de tekst
   blijft leesbaar; de foto komt alleen tussen en onder de kaartjes
   tevoorschijn. Ze moeten wel position+z-index krijgen, anders wint de
   band -- die staat later in de DOM.

   padding: 0 is nodig: elke <section> krijgt op >=992px 80px padding.  */
.sl-usp,
.sl-photoband { --sl-overlap: 120px; }

.sl-usp { padding-bottom: 0 !important; }
.sl-usp .service-card { position: relative; z-index: 2; }

.sl-photoband {
  position: relative;
  margin-top: calc(var(--sl-overlap) * -1);
  height: 420px;
  padding: 0 !important;
  background-image: var(--sl-photo);
  background-position: center 60%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Vervaging over precies de overlapzone: in de gaten tussen de
   kaartjes loopt het wit door in de foto in plaats van een harde rand. */
.sl-photoband::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(255, 255, 255, 0.92) 0,
              rgba(255, 255, 255, 0) var(--sl-overlap));
}

/* Onder md staan de kaartjes onder elkaar; overlappen zou het laatste
   kaartje opeten. Dan gewoon een band onder de kaartjes. */
@media (max-width: 767.98px) {
  .sl-usp,
  .sl-photoband { --sl-overlap: 0px; }
  .sl-usp { padding-bottom: 1.5rem !important; }
  .sl-photoband { height: 240px; }
}

/* --- maastrichtsloep: offerte-aanvraag en crosslink ------------------
   De site-brede .btn-regels in style.css winnen op gelijke
   specificiteit, daarom kleur en achtergrond hier met !important.
   maastrichtmarina.css laadt als laatste, dus de rest wint vanzelf.   */
.sl-btn-green,
.sl-btn-green:visited {
  background-color: #1f964d !important;
  border-color: #1f964d !important;
  color: #fff !important;
}
.sl-btn-green:hover,
.sl-btn-green:focus {
  background-color: #166835 !important;
  border-color: #166835 !important;
  color: #fff !important;
}

/* Bootstrap's .btn-outline-primary is op deze site onbruikbaar: de
   tekst wordt naar wit getrokken en de rand verdwijnt, dus de knop is
   letterlijk onzichtbaar op een lichte ondergrond.  Eigen variant met
   de kleuren expliciet -- gebruik deze in plaats van
   .btn-outline-primary, waar dan ook. */
.mm-btn-outline,
.mm-btn-outline:visited {
  background-color: transparent !important;
  border: 1px solid #3498db !important;
  color: #2666b2 !important;
}
.mm-btn-outline:hover,
.mm-btn-outline:focus {
  background-color: #3498db !important;
  border-color: #3498db !important;
  color: #fff !important;
}

/* Offertepaneel naast de crosslinkkaart. */
.sl-quote,
.sl-cross {
  padding: 1.75rem;
  border-radius: .5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .12);
  background: #fff;
}
.sl-cross {
  background: #f6f9fc;
  border: 1px solid #dde5ec;
  box-shadow: none;
}
.sl-cross-icon { font-size: 1.75rem; color: #3498db; margin-bottom: .75rem; display: block; }
.sl-quote-list { list-style: none; padding: 0; margin: 0; }
.sl-quote-list li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.sl-quote-list li i { color: #1f964d; margin-top: .25rem; }