/*────────────────────────────────────────────
  VARIABLES & TYPOPOGRAPHY
────────────────────────────────────────────*/
@font-face {
  font-family: 'Ink Free';
  src: url('/assets/fonts/Inkfree.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --clr-bg: #f9f9f9;
  --clr-bg-alt: #f0f8ff;
  --clr-primary: #d91f60;
  --clr-secondary: #f45c42;
  --clr-tertiary: #6236ff;
  --clr-text: #333;
  --clr-white: #fff;

  --ff-sans: 'system-ui', sans-serif;
  --ff-heading: 'Ink Free', cursive;

  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --spacing: 1rem;
}

/*────────────────────────────────────────────
  RESET & BASE LAYOUT
────────────────────────────────────────────*/
*,
*::before,
*::after { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  color: var(--clr-text);
  background: var(--clr-bg);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/*────────────────────────────────────────────
  HEADER OVERLAY + SCROLL EFFECT
────────────────────────────────────────────*/
header {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  padding: 1rem 0;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
  z-index: 1000;
}
header.scrolled {
  position: fixed;
  background: var(--clr-white);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 0.75rem 0;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img { height: 48px; }

/*────────────────────────────────────────────
  MENU LINKS & CONTROLS
────────────────────────────────────────────*/
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}
.nav-list a {
  font-family: var(--ff-heading);
  font-weight: 600;
  text-decoration: none;
  color: var(--clr-white);
  transition: color 0.3s;
}
header.scrolled .nav-list a {
  color: var(--clr-text);
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-controls button {
  background: transparent;
  border: none;
  color: var(--clr-white);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.3s;
}
header.scrolled .nav-controls button {
  color: var(--clr-text);
}

/*────────────────────────────────────────────
  HERO SECTION
────────────────────────────────────────────*/
.hero {
  position: relative;
  margin-top: -80px;
  padding-top: 80px;
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 70vh;
  background-size: cover;
  background-position: center;
  color: var(--clr-white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .hero-content { z-index: 1; }
.hero h1,
.hero h2 {
  font-family: var(--ff-heading);
  font-size: 2.5rem;
  margin: 0 0 1rem;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.hero p { margin-bottom: 1.5rem;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.hero-usps span {
  display: inline-block;
  margin: 0 0.5rem;
  background: rgba(255,255,255,0.15);
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
.btn-primary {
  display: inline-block;
  background: var(--clr-tertiary);
  color: var(--clr-white);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

/*────────────────────────────────────────────
  HERO VOOR PORTFOLIO-PAGINA
────────────────────────────────────────────*/
.hero-portfolio {
  background: url("/images/hero_portfolio_color.webp") center/cover no-repeat;
  color: var(--clr-white);
  text-align: center;
  padding: 8rem 1rem;
  position: relative;
  margin-top: -80px;
}
.hero-portfolio::after {
  content: '';
  position: absolute;
  inset: 0;
}
.hero-portfolio .hero-content { z-index: 1; }
.hero-portfolio h1 { font-family: var(--ff-heading); font-size: 2.5rem; margin-bottom:1rem; }
.hero-portfolio p  { font-size: var(--fs-lg); margin-bottom:1.5rem; }

/*────────────────────────────────────────────
  PER‐PAGINA HERO AFBEELDINGEN
────────────────────────────────────────────*/
body.home      .hero { background-image: url('/assets/img/hero_home_color.webp'); }
body.over      .hero { background-image: url('/assets/img/hero_over_color.webp'); }
body.portfolio .hero { background-image: url('/assets/img/hero_portfolio_color.webp'); }
body.diensten  .hero { background-image: url('/assets/img/hero_diensten_color.webp'); }
body.hosting   .hero { background-image: url('/assets/img/hero_hosting_color.webp'); }
body.contact   .hero { background-image: url('/assets/img/hero_contact_color.webp'); }
body.werkwijze .hero { background-image: url('/assets/img/hero_over_color.webp');}

/*────────────────────────────────────────────
  SOCIAL PROOF
────────────────────────────────────────────*/
#social-proof {
  padding: 4rem 0;
  background: var(--clr-bg);
  text-align: center;
}
#social-proof .container > h2 {
  text-align: center;
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  margin-bottom: 2rem;
  color: var(--clr-text);
}
#social-proof .client-logos {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
#social-proof .client-logos img {
  height: 64px;
  object-fit: contain;
}
#social-proof .social-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 2rem;
}
#social-proof .social-testimonials blockquote {
  background: var(--clr-white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  color: var(--clr-text);
}
#social-proof .social-testimonials cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  color: var(--clr-text);
}

/*────────────────────────────────────────────
  PORTFOLIO & FILTER
────────────────────────────────────────────*/
#portfolio {
  padding: 4rem 0;
}
.portfolio-section .container > h2,
#portfolio > h2 {
  text-align: center;
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  margin-bottom: 2rem;
  color: var(--clr-text);
}
#portfolio .filter-bar {
  text-align: center;
  margin-bottom: 2rem;
}
#portfolio .filter-btn {
  background: transparent;
  border: 2px solid var(--clr-primary);
  color: var(--clr-primary);
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
}
#portfolio .filter-btn.active,
#portfolio .filter-btn:hover {
  background: var(--clr-primary);
  color: var(--clr-white);
}
#portfolio .portfolio-grid {
  display: grid;
  gap: var(--spacing);
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}
#portfolio .portfolio-item {
  background: var(--clr-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
#portfolio .portfolio-item img {
  width: 100%;
  display: block;
}
#portfolio .portfolio-item figcaption {
  padding: var(--spacing);
  text-align: center;
  font-weight: 600;
}
#portfolio .portfolio-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/*────────────────────────────────────────────
  PORTFOLIO CASE STUDY LAYOUT
────────────────────────────────────────────*/
.portfolio-case {
  padding: 6rem 0;
  background: var(--clr-bg-alt);
}
.portfolio-case .container {
  max-width: 1200px;
  margin: 0 auto;
}
.case-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 2rem;
  align-items: center;
}
.case-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.case-content h2 {
  font-family: var(--ff-heading);
  font-size: 2rem;
  color: var(--clr-primary);
  margin-bottom: 1rem;
}
.case-content p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.case-content h3 {
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
  color: var(--clr-secondary);
}
.case-features {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.case-features li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.case-features li::before {
  content: "✔︎";
  position: absolute;
  left: 0;
  color: var(--clr-secondary);
}
.case-content .btn-primary {
  background: var(--clr-secondary);
  padding: 0.75rem 1.5rem;
}

/*────────────────────────────────────────────
  DIENSTEN GRID
────────────────────────────────────────────*/
#diensten {
  padding: 4rem 0;
}
.diensten-section .container > h2,
#diensten > h2 {
  text-align: center;
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  margin-bottom: 2rem;
  color: var(--clr-text);
}
#diensten .services-grid {
  display: grid;
  gap: var(--spacing);
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
}
#diensten .service-card {
  background-color: var(--clr-white);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
#diensten .service-card img {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
}
#diensten .service-card h3 {
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  margin: 1rem 0 0.5rem;
}
#diensten .service-card p {
  line-height: 1.6;
  /*color: var(--clr-text); */
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);

}
#diensten .service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/*────────────────────────────────────────────
  SECTION HOSTING (INTRO + PLANNEN)
────────────────────────────────────────────*/

/* 1) Container voor introtekst + kaarten */
.hosting-section {
  display: flex;
  flex-direction: column;
  align-items: center;       /* alles centrueren */
  gap: 2rem;                 /* ruimte tussen intro en kaarten */
  padding: 4rem 1rem;        /* boven/onder wat padding, zijkanten 1rem */
  max-width: 1200px;
  margin: 0 auto;            /* centreren in de viewport */
  text-align: center;        /* intro én teksten in kaarten centreren */
}

/* 2) Introductietekst (“Kies jouw hostingplan” + ondertitel) */
.hosting-intro {
  max-width: 600px;          /* niet full width, maar een leesbare breedte */
  margin: 0 auto 2rem auto;  /* onder iets ruimte voor de kaarten */
  text-align: center;        /* gecentreerde tekst */
}

/* 3) De kaartjes – grid met automatische kolommen en gap */
.hosting-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;               /* ruimte tussen de verschillende kaarten */
  width: 100%;
  justify-items: center;     /* elke kaart in het midden van z’n kolom */
}

/* 4) Eén kaart (service-card) styling */
.service-card {
  background: var(--clr-white);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 280px;
  text-align: center;
}

/* 4a) Header in de kaart (naam pakket + prijs) */
.service-card .card-header {
  margin-bottom: 1rem;
}
.service-card .card-header h3 {
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.service-card .card-header .price {
  font-size: 2rem;
  margin: 0.5rem 0;
}

/* 4b) Lijstje met features (check‐icon + tekst) */
.card-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.card-features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.card-features li::before {
  content: '✔︎';
  position: absolute;
  left: 0;
  color: var(--clr-secondary);
}

/* 4c) Onderin de kaart: knoppen naast elkaar */
.card-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* 5) Knop‐stijlen */
/* 5a) “Lees meer” = secundaire knop (paarse rand/tekst) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--clr-tertiary);
  color: var(--clr-tertiary);
  border-radius: 4px;
  font-weight: 600;
  background: transparent;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.btn-secondary:hover {
  background: var(--clr-tertiary);
  color: var(--clr-white);
}

/* 5b) “Bestel nu” = primaire knop (roze achtergrond/witte tekst) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--clr-secondary);
  color: var(--clr-white);
  border: 2px solid var(--clr-secondary);
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-primary:hover {
  background: var(--clr-white);
  color: var(--clr-secondary);
  border-color: var(--clr-secondary);
}

/* 6) Feature: “featured” class op Medium‐kaart geeft géén extra rand of schaal */
.service-card.featured {
  border: none !important;
  transform: none !important;
}

.testimonials-section {
  text-align: center;
  padding: 4rem 0;
}
#testimonials .container > h2 {
  text-align: center;
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  margin-bottom: 2rem;
  color: var(--clr-text);
}
.testimonial-slider {
  position: relative;
  overflow: hidden;
  max-width: 600px;
  margin: 2rem auto;
}
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.slide.active {
  opacity: 1;
  position: relative;
}
.testimonial-logo {
  width: 120px;
  height: auto;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.testimonial-text {
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 90%;
  margin: 0 auto;
}
.testimonial-author {
  margin-top: 0.5rem;
  font-style: normal;
  color: var(--clr-text);
  font-weight: 600;
}
.slider-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.slider-controls button {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}
.slider-controls button:hover {
  background: var(--clr-tertiary);
}


/*────────────────────────────────────────────
  FOOTER
────────────────────────────────────────────*/
.site-footer {
  background: #222;
  color: #eee;
  padding: 3rem 0 1rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px,1fr));
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.footer-contact,
.footer-description,
.footer-links {
  font-size: 0.95rem;
}
.footer-contact { text-align: left; }
.footer-description { text-align: center; }
.footer-links      { text-align: right; }

.footer-contact h4,
.footer-description h3,
.footer-links h4 {
  font-family: var(--ff-heading);
  margin-bottom: 0.75rem;
  color: #fff;
  list-style: none;
}
.footer-contact address p,
.footer-description p {
  line-height: 1.6;
  margin: 0 0 1rem;
}
.footer-contact a,
.footer-links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.3s;
  list-style: none;
}
.footer-contact a:hover,
.footer-links a:hover {
  color: var(--clr-primary);
}
.footer-copy {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-bottom a:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-bottom { flex-direction: column; }
}

/*────────────────────────────────────────────
  AANGEPASTE DIENSTEN-KAARTJES MET CSS-ACHTERGROND
────────────────────────────────────────────*/
.diensten-section .service-card {
  position: relative;
  overflow: hidden;
  background-color: var(--clr-white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  height: 280px;
}
.diensten-section .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  border-radius: inherit;
  pointer-events: none;
}
.diensten-section .service-card > h3,
.diensten-section .service-card > p {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--ff-heading);
}
.diensten-section .service-card img {
  display: none;
}
.diensten-section .services-grid .service-card:nth-child(1) {
  background-image: url('/assets/img/graphics_home.webp');
}
.diensten-section .services-grid .service-card:nth-child(2) {
  background-image: url('/assets/img/design_home.webp');
}
.diensten-section .services-grid .service-card:nth-child(3) {
  background-image: url('/assets/img/hosting_home.webp');
}
.diensten-section .services-grid .service-card:nth-child(4) {
  background-image: url('/assets/img/background_home.webp');
}
.diensten-section .service-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.diensten-section .service-card p {
  margin: 0;
  line-height: 1.6;
	color: #DDB1B2;
}

.footer-links ul {
  list-style: none;   /* verwijder de bullets */
  margin: 0;          /* reset marge */
  padding: 0;         /* reset padding */
}

/*────────────────────────────────────────────
  HERO: geforceerde posities / exacte opmaak
────────────────────────────────────────────*/
.hero {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  min-height: 100vh !important;
  background-size: cover !important;
  background-position: center !important;
}
.hero-content {
  position: absolute !important;
  top: 20% !important;
  left: 8% !important;
  max-width: 45% !important;
  text-align: left !important;
  color: #fff !important;
}

/* Grote titel + 2 regels in één element */
.hero-title {
  font-family: var(--ff-heading) !important;
  font-size: 4rem !important;
  line-height: 1.1 !important;
  margin: 0 0 0.5rem 0 !important;
}
.hero-subtitle {
  display: block !important;
  font-size: 2rem !important;
  margin-left: 1rem !important;
  margin-bottom: 1rem !important;
}

/* “Niet alleen bezoekers” + rode lijn erboven/erna */
.hero-highlight {
  display: block !important;
  font-family: var(--ff-heading) !important;
  font-size: 1.5rem !important;
  color: #e74c3c !important;
  margin: 1rem 0 0.2rem 0 !important;
}
.hero-divider {
  width: 80px !important;
  height: 3px !important;
  background: #e74c3c !important;
  border: none !important;
  margin-bottom: 2rem !important;
}

/* Onderliggende paragrafen */
.hero-text {
  font-family: var(--ff-sans) !important;
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  margin-bottom: 2.5rem !important;
  opacity: 0.9 !important;
}

/* Knoppen naast elkaar */
.hero-buttons {
  display: flex !important;
  gap: 1rem !important;
}
.hero-buttons .btn-primary {
  background: #f1c40f !important;
  color: #000 !important;
}
.hero-buttons .btn-secondary {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

/*────────────────────────────────────────────
  Hero – fine-tuning positie & knop-hover
────────────────────────────────────────────*/
.hero-content {
  top: 18% !important;        /* iets meer marge van boven */
  left: 8% !important;
}

.hero-subtitle {
  margin-left: 2rem !important; /* grotere inspringing onder “Webdesign” */
}

/* Knoppen */
.hero-buttons a {
  transition: 
    background 0.25s ease, 
    transform 0.2s ease !important;
}

/* Primaire knop – geel naar iets donkerder */
.hero-buttons .btn-primary:hover {
  background: #d4ac0d !important;
  transform: translateY(-2px) !important;
}

/* Secundaire knop – wit naar je primaire kleur */
.hero-buttons .btn-secondary:hover {
  background: var(--clr-primary) !important;
  color: var(--clr-white) !important;
  transform: translateY(-2px) !important;
}

/*────────────────────────────────────────────
  Hero: meer ruimte bovenin (lager plaatsen)
────────────────────────────────────────────*/
.hero {
  /* verhoog dit getal totdat het content precies staat waar jij wilt */
  padding-top: 280px !important;
}

/*────────────────────────────────────────────
  Knoppen: nieuwe kleur + hover gelijk aan secundaire
────────────────────────────────────────────*/
/* Pas de achtergrondkleur van de primaire knop aan */
.btn-primary {
  background: var(--clr-primary) !important;  /* bijv. #d91f60 */
  color: var(--clr-white) !important;
  border: 2px solid var(--clr-primary) !important;
}

/* Zorg dat hij op hover gelijk reageert als .btn-secondary */
.btn-primary:hover {
  background: var(--clr-white) !important;
  color: var(--clr-primary) !important;
  /* je kunt de border laten staan of weghalen: */
  /* border: 2px solid var(--clr-primary) !important; */
}

/* (Optioneel) Animatie bij hover */
.btn-primary,
.btn-secondary {
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/*────────────────────────────────────────────
  Hero: push content down
────────────────────────────────────────────*/
.hero {
  display: flex !important;
  align-items: flex-start !important;
}

.hero .hero-content {
  margin-top: 200px !important;  /* pas dit getal aan naar smaak */
}

/*────────────────────────────────────────────
  Knopkleuren & hover
────────────────────────────────────────────*/
.btn-primary {
  background: var(--clr-primary) !important;
  color: var(--clr-white) !important;
  border: 2px solid var(--clr-primary) !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}

.btn-primary:hover {
  background: var(--clr-white) !important;
  color: var(--clr-primary) !important;
}

/*────────────────────────────────────────────
  GENERIEKE KNOP-STIJL (beide knoppen gelijk)
────────────────────────────────────────────*/
.btn {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--ff-heading);
  font-size: 1rem;
  text-decoration: none;
  color: #d91f60;                   /* hot-pink tekst */
  border: 2px solid #d91f60;        /* hot-pink rand */
  background: transparent;          /* doorschijnend */
  border-radius: 4px;
  overflow: hidden;
  transition: color 0.3s ease;
}
.btn::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #d91f60;              /* zelfde hot-pink */
  z-index: 0;
  transition: height 0.3s ease;
}
.btn > * {
  position: relative;
  z-index: 1;
}
.btn:hover {
  color: #fff;                      /* witte tekst op hover */
}
.btn:hover::before {
  height: 100%;                     /* animation: van onder naar boven */
}

/* je kunt de bestaande btn-primary en btn-secondary leegmaken of verwijderen,
   want alle styling komt nu via .btn */
/* .btn-primary { } */
/* .btn-secondary { } */

/*────────────────────────────────────────────
  TESTIMONIALS CARDS
────────────────────────────────────────────*/
.testimonials-carousel blockquote,
.social-testimonials blockquote {
  background: var(--clr-white);
  border-radius: 12px;              /* mooie afgeronde hoeken */
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.social-testimonials {
  position: relative;
  height: 200px;           /* of wat je wilt */
}
.social-testimonials blockquote {
  position: absolute;
  top: 0; left: 0; right: 0;
  transition: opacity 1s ease;
}

/*────────────────────────────────────────────
  CONTACT-PAGINA: HERO & FORM OVERRIDES
────────────────────────────────────────────*/

/* 1) Hero Section op contact.php */
body.contact .hero {
  position: relative;
  margin-top: -80px;
  padding-top: 280px;
  width: 100%;
  min-height: 80vh;
  background-size: cover;
  background-position: center;
}
body.contact .hero-content {
  position: absolute;
  top: 18%;
  left: 8%;
  max-width: 45%;
  text-align: left;
  color: #fff;
}

/* Hero-knoppen */
body.contact .hero-buttons .btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--ff-heading);
  color: #fff !important;
  border: 2px solid var(--clr-primary);
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: color 0.3s ease;
}
body.contact .hero-buttons .btn::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 0;
  background: rgba(217,31,96,0.9);
  transition: height 0.3s ease;
  z-index: -1;
}
body.contact .hero-buttons .btn span {
  position: relative;
  z-index: 2;
}
body.contact .hero-buttons .btn:hover::before {
  height: 100%;
}
body.contact .hero-buttons .btn:hover span {
  color: #fff !important;
}

/* 2) Contact-formulier sectie */
.contact-form-section {
  padding: 4rem 0;
  background: url('/assets/img/contact_her.webp') center/cover no-repeat;
  color: #fff;
}
.contact-form-section .container {
  max-width: 900px;
  margin: 0 auto;
}
.contact-form-section h2,
.contact-form-section p {
  text-align: center;
  color: #fff;
  margin-bottom: 1rem;
}
.contact-form-section .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.contact-form-section input,
.contact-form-section textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 4px;
  font-family: var(--ff-sans);
  margin-bottom: 1rem;
}
.contact-form-section .btn {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--ff-heading);
  color: #fff !important;
  border: 2px solid var(--clr-primary);
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: color 0.3s ease;
  margin-top: 1rem;
  z-index: 1;
}
.contact-form-section .btn::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 0;
  background: rgba(217,31,96,0.9);
  transition: height 0.3s ease;
  z-index: -1;
}
.contact-form-section .btn span {
  position: relative;
  z-index: 2;
}
.contact-form-section .btn:hover::before {
  height: 100%;
}
.contact-form-section .btn:hover span {
  color: #fff !important;
}

/*────────────────────────────────────────────
  HOMEPAGE CONTACT & OFFERTE
────────────────────────────────────────────*/
#contact {
  padding: 4rem 0;
  /* optioneel achtergrondbeeld—zet commentaar of haal weg:
  background: url('/assets/img/contact_hero.webp') center/cover no-repeat;
  */
  background-color: var(--clr-bg-alt); /* lichte fallback */
  text-align: center;
  color: var(--clr-text);
}
#contact .container {
  max-width: 800px;
  margin: 0 auto;
}

/* Titel en intro */
#contact h2 {
  font-family: var(--ff-heading);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--clr-text);
}
#contact p {
  font-size: var(--fs-lg);
  margin-bottom: 2rem;
  color: var(--clr-text);
  opacity: 0.9;
}

/* Contact-formulier */
#contact-form {
  display: grid;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}
#contact-form label {
  display: block;
  font-weight: 600;
  color: var(--clr-text);
}
#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--ff-sans);
  color: var(--clr-text);
  background: #fff;
}

/* Verzenden-knop met overlay-hover */
#contact-form .btn {
  position: relative;
  overflow: hidden;
  padding: 0.75rem 1.5rem;
  font-family: var(--ff-heading);
  color: #fff;
  background: var(--clr-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}
#contact-form .btn::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 0;
  background: rgba(0,0,0,0.1);
  z-index: 0;
  transition: height 0.3s ease;
}
#contact-form .btn span {
  position: relative;
  z-index: 1;
}
#contact-form .btn:hover::before {
  height: 100%;
}
#contact-form .btn:hover {
  color: #fff;
  transform: translateY(-2px);
}

.hosting-section {
  display: grid;
  gap: var(--spacing);
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  padding: 4rem 0;
}
.hosting-card {
  background: var(--clr-white);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem;
  text-align: center;
}
.hosting-card .price {
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
}
.hosting-card .features {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}
.hosting-card .features li {
  margin-bottom: 0.5rem;
}

/*────────────────────────────────────────────
  HOSTING‐SECTIE (INTRO + KAARTJES)
────────────────────────────────────────────*/

/* 1) Hoofdcontainer voor de hosting‐sectie */
.hosting-section {
  display: flex;
  flex-direction: column;
  align-items: center;       /* alles centreren (intro + kaarten) */
  gap: 2rem;                 /* ruimte tussen intro en kaarten */
  padding: 4rem 1rem;        /* boven/onder 4rem, zijkanten 1rem */
  max-width: 1200px;
  margin: 0 auto;            /* centreren in viewport */
  text-align: center;        /* alle texts gecentreerd */
  background-color: var(--clr-bg); /* optioneel: zorg voor lichte achtergrond */
}

/* 2) Introductietekst */
.hosting-intro {
  max-width: 600px;
  margin: 0 auto;            /* midden in de sectie */
}
.hosting-intro h2 {
  font-family: var(--ff-heading);
  font-size: 2rem;
  margin-bottom: 0.75rem;
}
.hosting-intro p {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--clr-text);
}

/* 3) Grid voor de vier kaarten */
.hosting-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;              /* ruimte tussen ieder kaartje */
  width: 100%;
  justify-items: center;    /* iedere kaart blijft in het midden van z’n kolom */
}

/* 4) Iedere individuele kaart (service-card) */
.service-card {
  background: var(--clr-white);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 280px;         /* vaste maximale breedte per kaart */
  text-align: center;
}

/* 4a) Kaart‐header: pakketnaam + prijs */
.service-card .card-header {
  margin-bottom: 1rem;
}
.service-card .card-header h3 {
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.service-card .card-header .price {
  font-size: 2rem;
  margin: 0.5rem 0;
}

/* 4b) Lijstje met features (check icoon + tekst) */
.card-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.card-features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.card-features li::before {
  content: '✔︎';
  position: absolute;
  left: 0;
  color: var(--clr-secondary);
}

/* 4c) Onderin kaart: knoppen naast elkaar */
.card-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* 5) Knop‐stijlen */
/* 5a) “Lees meer” = secundaire knop (paarse rand, witte achtergrond bij hover) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--clr-tertiary);
  color: var(--clr-tertiary);
  border-radius: 4px;
  font-weight: 600;
  background: transparent;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.btn-secondary:hover {
  background: var(--clr-tertiary);
  color: var(--clr-white);
}

/* 5b) “Bestel nu” = primaire knop (roze achtergrond → wit bij hover) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--clr-secondary);
  color: var(--clr-white);
  border: 2px solid var(--clr-secondary);
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-primary:hover {
  background: var(--clr-white);
  color: var(--clr-secondary);
  border-color: var(--clr-secondary);
}

/* 6) Indien er ooit .featured‐class op een kaart staat, verwijderen we extra rand/scale */
.service-card.featured {
  border: none !important;
  transform: none !important;
}

/*────────────────────────────────────────────
  AANPASSINGEN: 4 kaarten naast elkaar + kleine knoppen
────────────────────────────────────────────*/

/* 1) Op grote schermen: precies 4 kolommen, kleine gap */
@media (min-width: 1024px) {
  .hosting-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; /* eerder stond hier 1.5rem; we maken het iets kleiner */
  }
}

/* 2) Knoppen compacter en rechthoekiger in de hosting-kaarten */
/*    - We targeten specifiek .hosting-section .btn-… zodat andere pagina's niet wijzigen */
.hosting-section .btn-primary,
.hosting-section .btn-secondary {
  padding: 0.5rem 1rem;       /* minder hoog/laag én iets smaller */
  font-size: 0.9rem;          /* iets kleinere tekst */
  border-radius: 3px;         /* minder afgerond: rechthoekiger look */
}

/* Optioneel: knop‐hover iets subtieler maken */
.hosting-section .btn-primary:hover,
.hosting-section .btn-secondary:hover {
  transform: translateY(-1px); /* lichte “lift”-animatie bij hover */
}

/*────────────────────────────────────────────
  SECTION WERKWIJZE (STAPPEN)
────────────────────────────────────────────*/
.stappen-section {
  /* iets extra ruimte boven en onder */
  padding: 4rem 0;
  background: var(--clr-bg-alt); /* of wit, naar smaak */
}

.stappen-section .section-intro {
  text-align: center;
  margin-bottom: 2rem;
}
.stappen-section .section-intro .subtitel {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.stappen-section .section-intro h2 {
  font-family: var(--ff-heading);
  font-size: 2rem;
  color: var(--clr-text);
  margin: 0;
}

/* Grid van de vijf stap‐cards */
.stappen-grid {
  display: grid;
  gap: var(--spacing);
  /* op grote schermen 3 kolommen en dan 2 erboven */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}

/* Iedere “kaart” */
.stap-card {
  background: var(--clr-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  /* zo groeit de tekst onder de afbeelding mee als dat nodig is */
}

/* Afbeelding helemaal bovenaan in de kaart */
.stap-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Titel (stap‐nummer + naam) */
.stap-card h3 {
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  color: var(--clr-text);
  margin: 1rem;
}

/* Paragraaf onder de titel */
.stap-card p {
  margin: 0 1rem 1.25rem;
  line-height: 1.6;
  color: var(--clr-text);
  font-size: 0.95rem;
}

/* Pas eventueel de grid‐breekpunten aan, zodat je 3 op de eerste rij en 2 op de 2e rij krijgt */
@media (min-width: 1080px) {
  /* met 5 items in een auto‐fit grid: bij breedte ≥1080px ontstaan er precies 3 kolommen.
     Daardoor komen er 3 kaarten op rij 1 en 2 kaarten op rij 2. */
  .stappen-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1079px) {
  /* op middelgrote schermen twee kolommen per rij */
  .stappen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  /* op smalle schermen altijd 1 kolom */
  .stappen-grid {
    grid-template-columns: 1fr;
  }
}

/* Domein-feedback onder het invoerveld */
#domain-feedback {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
}

/* Disabled-knop visueel onderscheiden */
.btn-primary[disabled],
.btn-primary.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Eenvoudige loading-spinner vlak na input (kan je voor later uitbreiden) */
#domain-spinner {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/*────────────────────────────────────────────
  2) Diensten‐sectie: zorg dat er 2 kolommen op desktop
  en 1 kolom op mobiel staan
────────────────────────────────────────────*/
.diensten-section .services-grid {
  display: grid;
  gap: var(--spacing);
  /* Minimaal 240px of 300px breed voor elke kaart, anders 1 kolom */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Service‐cards: zorg dat de tekst en knop goed uitkomen */
.diensten-section .service-card {
  background-color: var(--clr-white);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left; /* teksten links uitlijnen, staat vaak net iets rustiger */
  height: 100%;      /* zodat knoppen steeds onderaan uitlijnen */
}
.diensten-section .service-card h3 {
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--clr-text);
}
.diensten-section .service-card p {
  flex-grow: 1;          /* tekst vult middenstuk */
  margin-bottom: 1.5rem;
  line-height: 1.6;
  color: var(--clr-text);
  font-size: var(--fs-base);
}
.diensten-section .service-card .btn {
  align-self: flex-start; /* zorg dat knop links blijft in de kaart */
}


/* ──────────────────────────────────────────────────────────────
   UNIVERSELE .btn-REGELS (ook voor Klantenzone, zonder <span>)
   ────────────────────────────────────────────────────────────── */
/* 1) Zorg dat de knop een eigen stacking‐context heeft */
.btn {
  position: relative;
  z-index: 0; /* óók in Klantenzone: tekst staat boven z-index: -1 pseudo */
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--ff-heading);
  font-size: 1rem;
  color: var(--clr-text) !important;
  background: transparent !important;
  border: 2px solid var(--clr-primary) !important;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.6s ease, transform 0.6s ease;
}

/* 2) Het ‘achtergrondvlak’ dat bij hover omhoog groeit */
.btn::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;          /* begin onderaan (groeit omhoog) */
  width: 100%;
  height: 0;          /* aanvankelijk onzichtbaar (0 hoogte) */
  background: var(--clr-primary); /* roze kleur */
  z-index: -1;        /* BEPALEND: -1 zodat het zicht achter de knop-tekst komt */
  transition: height 0.6s ease;
}

/* 3) Op hover: groei het vlak tot 100% hoogte */
.btn:hover::before {
  height: 100%;
}

/* 4) Op hover: verander de tekstkleur (witte tekst) en optioneel lift-effect */
.btn:hover {
  color: var(--clr-white) !important;
  transform: translateY(-2px);
}

/*────────────────────────────────────────────
  AANGEPASTE DIENSTEN‐GRID: 4 kaarten naast elkaar
────────────────────────────────────────────*/

/* 1) Geef de parent container (services-grid) een expliciete grid met 4 kolommen */
.services-grid {
  display: grid;
  /* EXACT 4 gelijke kolommen, óók op grote schermen */
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;                    /* ruimte (1rem) tussen de kaartjes */
  width: 100%;
  margin: 0 auto;              /* centreren in de container */
}

/* 2) Zorg dat .service-card netjes gestyled blijft */
.services-grid .service-card {
  background-color: var(--clr-white);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--clr-text);
  position: relative;
  overflow: hidden;
}

/* 3) Titel en paragraaf binnen kaart, zelfde font zoals elders */
.services-grid .service-card h4 {
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--clr-primary);
}
.services-grid .service-card p {
  font-size: var(--fs-base);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* 4) Voeg indien gewenst een “Lees meer”‐knop toe onderaan elke kaart */
.services-grid .service-card .btn {
  margin-top: auto; /* schuift vanzelf naar onder in de flex‐container */
}

/* 5) Responsive aanpassingen: op gemiddeld scherm 2 kolommen,
       op klein scherm 1 kolom. */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/*────────────────────────────────────────────
  TLD-GRID & CARDS
────────────────────────────────────────────*/
.tld-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.tld-card {
  background: var(--clr-white);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.tld-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.tld-card .tld {
  display: block;
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.tld-card .price {
  font-size: 1.125rem;
  color: var(--clr-secondary);
}

/*────────────────────────────────────────────
  Hero CTA buttons – transparent → fill on hover
────────────────────────────────────────────*/
.hero-buttons .btn {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--ff-heading);
  font-size: 1rem;
  color: var(--clr-white);
  background: transparent;
  border: 2px solid var(--clr-primary);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.3s ease, color 0.3s ease;
  z-index: 0;
}

/* Achtergrondvlak dat groeit */
.hero-buttons .btn::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--clr-primary);
  z-index: -1;
  transition: height 0.3s ease;
}

/* Hover: vul van onder naar boven, maak border wit */
.hero-buttons .btn:hover {
  border-color: var(--clr-white);
  color: var(--clr-white);
}
.hero-buttons .btn:hover::before {
  height: 100%;
}

/*────────────────────────────────────────────
  Hero CTA buttons – transparent → fill on hover
  (laatste inladen, overschrijft alle voorgaande)
────────────────────────────────────────────*/
.hero .hero-buttons a.btn {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--ff-heading) !important;
  font-size: 1rem !important;
  color: var(--clr-white) !important;
  background: transparent !important;
  border: 2px solid var(--clr-primary) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  transition: border-color 0.3s ease, color 0.3s ease !important;
  z-index: 0;
}

/* pseudo‐element voor onder‐naar‐boven fill */
.hero .hero-buttons a.btn::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--clr-primary) !important;
  z-index: -1;
  transition: height 0.3s ease !important;
}

/* hover‐state: achtergrond fill + witte border */
.hero .hero-buttons a.btn:hover {
  border-color: var(--clr-white) !important;
  color: var(--clr-white) !important;
}
.hero .hero-buttons a.btn:hover::before {
  height: 100% !important;
}


/*──────────────── Reviews Section ────────────────*/
.reviews-section {
  padding: 4rem 0;
  background: transparent;
  text-align: center;
  margin-top: -50px;
}
.reviews-section h2 {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  margin-bottom: 2rem;
  color: var(--clr-text);
}
.reviews-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.review-link,
.review-qr {
  flex: 1 1 300px;
  max-width: 400px;
}
.review-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}
.review-logo {
  width: 20px;
  height: 20px;
  margin-bottom: -22px;
  margin-left: 30px;
}
.review-link p {
  margin: 0 0 0.25rem;
  font-size: var(--fs-base);
  color: var(--clr-text);
}
.review-link a {
  font-weight: 600;
  color: var(--clr-primary);
  word-break: break-all;
  text-decoration: none;
  transition: color 0.3s;
}
.review-link a:hover {
  color: white;
}
.review-qr {
  text-align: center;
}
.qr-code {
  width: 200px;
  height: auto;
  margin-bottom: 0.5rem;
}
.review-qr p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--clr-text);
}


/* Hergebruik je bestaande .btn/.btn-primary met overlay-hover */