/* The home page's sections, in page order. Every section is a rounded
   card (.wrapper, components.css) in a 1340 px container. The content
   pages reuse several of them: the rating line, the theme cloud, the
   reviews masonry, the USP band, the promo card, the age tiles and the
   SEO card. */

.wrapper > h2, .homepage-reviews h2 { font-size: 34px; font-weight: 800; color: var(--primary-color); margin-bottom: 5px; }
.wrapper > p, .wrapper > p.top, .wrapper > p.info { font-size: 19px; font-weight: 300; color: var(--text-color); margin-bottom: 35px; }
@media (max-width: 767px) {
  .homepage-howitworks .wrapper, .homepage-form .wrapper, .homepage-examples .wrapper, .homepage-reviews .wrapper,
  .homepage-faq .wrapper, .usp .wrapper, .theme-overview .wrapper { border-radius: 30px; padding: 35px 20px; }
  .wrapper > h2, .homepage-reviews h2 { font-size: 26px; }
  .wrapper > p, .wrapper > p.info { font-size: 18px; margin-bottom: 30px; }
}

@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes topslider1 { from { transform: translateY(300px); } to { transform: none; } }
@keyframes topslider2 { from { transform: translateY(200px); } to { transform: none; } }
@keyframes topslider3 { from { transform: translateY(100px); } to { transform: none; } }
@keyframes moveGradient { to { background-position: -300% center; } }
@keyframes mpExFloatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ── 1 hero ── */
.homepage-top { min-height: 500px; padding-top: 75px; background: linear-gradient(0deg, rgba(var(--primary-color-rgb), 0.07) 0%, rgba(250, 248, 240, 0) 24%); }
.homepage-top h1 { font-size: 54px; font-weight: 800; line-height: 1.2; max-width: 655px; opacity: 0; animation: fadeIn 1s ease-out 0.15s forwards; }
.homepage-top .col-md-7 > p { font-size: 22px; font-weight: 300; max-width: 570px; margin-bottom: 20px; opacity: 0; animation: fadeInUp 0.5s ease-out 0.3s forwards; }
.homepage-top .col-md-7 > .button { display: block; width: 100%; max-width: 330px; padding: 12px 15px; opacity: 0; animation: fadeInUp 0.6s ease-out 0.4s forwards; }
.cta-block-link { display: block; max-width: 330px; margin-bottom: 35px; color: inherit; }
.cta-text {
  display: block; text-align: center; font-size: 13px; font-weight: 300; opacity: 0;
  background-image: linear-gradient(110deg, var(--primary-hover), var(--primary-color), var(--primary-light), var(--primary-hover)); background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fadeInUp 0.6s ease-out 0.65s forwards, moveGradient 6s ease-in-out infinite;
}
.cta-stars { position: relative; display: inline-block; letter-spacing: 1px; -webkit-text-fill-color: initial; }
.cta-stars-leeg { color: #dcd4c2; }
.cta-stars-vol { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--primary-color); }
.cta-reviews-count { border-bottom: 1px dashed var(--primary-light); }
.cta-block-link:hover .cta-reviews-count { border-color: var(--primary-light); }
.cta-pijl { display: inline-block; opacity: 0; transform: translateX(-4px); transition: all 0.18s; }
.cta-pijl svg { stroke: var(--primary-hover); }
.cta-block-link:hover .cta-pijl { opacity: 1; transform: none; }
.homepage-top .col-md-5 { max-height: 425px; }
.homepage-top .examples {
  position: relative; margin-bottom: 20px; box-shadow: -5px 5px 10px rgb(0 0 0 / 25%); transform: perspective(1000px) rotateY(-5deg);
  opacity: 0.88; border-radius: 0 3px 3px 0; transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
}
.homepage-top .examples:hover { transform: none; opacity: 1; box-shadow: -7px 7px 15px rgb(0 0 0 / 40%); }
.homepage-top .examples img { display: block; width: 100%; height: auto; border-radius: 0 3px 3px 0; }
.homepage-top .examples::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 4px; background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent); }
.homepage-top .examples::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 6px; background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent); }
.homepage-top .border-right {
  position: absolute; right: -4px; top: 1%; height: 98%; width: 4px; background: #fff;
  border-right: 1px solid #00000042; border-radius: 0 3px 3px 0;
}
.slider1 { margin-top: 120px; animation: topslider1 2s ease-out; }
.slider2 { margin-top: 40px; animation: topslider2 1.5s ease-out; }
.slider3 { margin-top: -35px; animation: topslider3 1s ease-out; }
@media (max-width: 1199px) {
  .homepage-top h1 { font-size: 45px; }
  .homepage-top .examples { transform: none; }
}
@media (max-width: 767px) {
  .homepage-top { padding: 15px 0; min-height: 0; margin-bottom: -55px;
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0) 0%, rgba(var(--primary-color-rgb), 0.07) 50%, rgba(var(--primary-color-rgb), 0) 100%); }
  .homepage-top h1 { font-size: 34px; text-align: center; max-width: none; margin-bottom: 5px; }
  .homepage-top .col-md-7 > p { font-size: 18px; text-align: center; max-width: none; }
  .homepage-top .col-md-7 > .button { padding: 10px 30px; margin: 0 auto 7px; }
  .cta-block-link { margin: 5px auto 40px; }
  .homepage-top .col-md-5 { max-height: none; }
  /* Only the covers' first row shows. The row is the page's width (no
     container breakpoint below 1340 px), a middle cover is 47 % of it tall,
     and 80 px is that column's 40 px drop, some air and the 40 px tucked
     under the next card, pulled up by those 40 px and the 15 px padding.
     Clipped and faded rather than hidden behind the card, so no cover's
     shadow shows beside it. */
  .homepage-top .col-md-5 > .row {
    max-height: calc(47vw + 80px); overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
  }
  .slider1 { margin: 80px -7.5px 0 0; }
  .slider2 { margin: 40px -7.5px 0; }
  .slider3 { margin: 5px 0 0 -7.5px; }
  .homepage-top .border-right { width: 3px; right: -3px; }
}
@media (max-width: 359px) { .homepage-top h1 { font-size: 30px; } }

/* ── 2 how it works ── */
.homepage-howitworks { background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.07) 0%, rgba(250, 248, 240, 0) 100%); }
.homepage-howitworks .wrapper { min-height: 400px; position: relative; }
.homepage-howitworks .d-flex > span {
  width: 43px; height: 43px; flex: none; border-radius: 50%; background-color: var(--primary-color); background-image: var(--primary-gradient);
  border: 2px solid var(--primary-color); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-right: 20px;
}
.homepage-howitworks .step-title { font-size: 26px; font-weight: 700; color: var(--text-color); display: flex; margin-bottom: 0.5rem; }
.homepage-howitworks p { font-size: 18px; font-weight: 300; }
.homepage-howitworks p b { font-weight: 700; }
.homepage-howitworks img.step { max-width: 310px; }
@media (max-width: 1199px) { .homepage-howitworks img.step { max-width: 235px; margin: 35px 0; } }
@media (max-width: 767px) {
  .homepage-howitworks { background: none; }
  .homepage-howitworks .d-flex > span { width: 35px; height: 35px; font-size: 21px; margin-right: 15px; }
  .homepage-howitworks .step-title { font-size: 21px; }
  .homepage-howitworks img.step { max-width: 200px; margin: 0 0 30px; }
  .homepage-howitworks hr { max-width: 200px; margin: 50px auto; border-top: 1px dashed var(--primary-color); opacity: 1; }
}

/* ── 3 seasonal promo ── */
.seasonal-promo { margin-bottom: 50px; }
.seasonal-promo-card { background: linear-gradient(135deg, var(--light-primary-color) 0%, var(--primary-tint) 100%); border-radius: 32px; padding: 30px 40px; box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), 0.08); }
.seasonal-promo-icon { width: 100%; max-width: 200px; height: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); animation: mpExFloatSoft 6s ease-in-out 1.6s infinite; }
.seasonal-promo-body { padding-left: 10px; }
.seasonal-promo-badge {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary-color); border: 1px solid var(--primary-color); background: #0097a70a;
  padding: 4px 12px; border-radius: 100px; margin-bottom: 15px; letter-spacing: 0.3px;
}
.seasonal-promo h2 { font-size: 28px; font-weight: 800; color: #2c1810; line-height: 1.2; margin-bottom: 5px; }
.seasonal-promo p { font-size: 19px; font-weight: 300; color: #5a4030; margin-bottom: 18px; }
.seasonal-promo-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.seasonal-promo-actions .button { font-size: 16px; padding: 10px 34px; margin-bottom: 0; white-space: nowrap; max-width: 100%; }
@media (max-width: 767px) {
  .seasonal-promo { margin-bottom: 25px; }
  .seasonal-promo-card { padding: 24px 25px; border-radius: 24px; }
  .seasonal-promo-icon { max-width: 130px; }
  .seasonal-promo-mobile-badge-wrap .seasonal-promo-badge { margin-bottom: 12px; }
  .seasonal-promo-body { text-align: center; padding: 12px 10px 0; }
  .seasonal-promo h2 { font-size: 23px; }
  .seasonal-promo p { font-size: 18px; }
  .seasonal-promo-actions { flex-direction: column; align-items: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .seasonal-promo-icon { animation: none; } }

/* ── 4 age picker ── */
.homepage-form .wrapper { background: #f8f0e2; min-height: 380px; overflow: hidden; }
.homepage-form p.top { margin-bottom: -35px; }
.form-section-title-spaced { font-size: 26px; font-weight: 700; padding-top: 2rem; }
.custom-radio-block { cursor: pointer; margin-top: 15px; width: 100%; font-size: 16px; color: #555; }
.custom-radio-block input { position: absolute; opacity: 0; pointer-events: none; }
.radio-content {
  border: 2px solid; padding: 30px 20px; border-radius: 20px; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: transform 80ms, box-shadow 0.2s, border-color 0.2s;
}
.form-group > div:nth-child(1) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffd7ba; border-color: #d6b18f; }
.form-group > div:nth-child(2) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #d8e2dc; border-color: #b4beb8; }
.form-group > div:nth-child(3) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fcd5ce; border-color: #dbb0ad; }
.form-group > div:nth-child(4) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fae1dd; border-color: #d6bfb9; }
.radio-content img.pic { max-width: 90px; height: auto; display: block; margin: 0 auto 10px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); transition: transform 300ms cubic-bezier(0.2, 0.6, 0.6, 1); }
.radio-content.big img { max-width: 110px; height: auto; margin-bottom: 15px; opacity: 0.9; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); transition: transform 300ms cubic-bezier(0.2, 0.6, 0.6, 1); }
.radio-content span { display: block; font-size: 19px; font-weight: 600; color: #000; }
.custom-radio-block:hover .radio-content, .custom-radio-block input:checked + .radio-content {
  border-color: var(--primary-color); box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
}
.custom-radio-block:hover .radio-content span, .custom-radio-block input:checked + .radio-content span { color: var(--primary-color); }
.custom-radio-block:hover .radio-content img { transform: scale(1.08); filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3)) sepia(10%); }
.custom-radio-block:active .radio-content { transform: scale(0.985); }
.custom-radio-block input:focus-visible + .radio-content { outline: 3px solid var(--primary-color); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.25); }
@media (max-width: 767px) {
  .homepage-form p.top { font-size: 18px; margin-bottom: -20px; }
  .form-section-title-spaced { font-size: 22px; padding-top: 1.75rem; }
  .custom-radio-block { margin-top: 10px; }
  .radio-content { padding: 20px 10px; }
  .radio-content.big img { max-width: 85px; }
  .radio-content span { font-size: 16px; }
  .custum-padding-end { padding-right: 0.5rem; }
  .custum-padding-start { padding-left: 0.5rem; }
}

/* ── 5 examples ── */
.homepage-examples .wrapper { padding: 50px 50px 20px; }
.box-wrapper { border-radius: 30px; padding: 38px 0; margin-bottom: 38px; }
.box-wrapper1 { background: #ffd7ba42; } .box-wrapper2 { background: #d8e2dc38; } .box-wrapper3 { background: #fcd5ce36; }
.example .box { border-radius: 20px; padding: 12px; margin-bottom: 12px; }
.box.box1 { background: #ffd7ba75; } .box.box2 { background: #d8e2dc99; } .box.box3 { background: #fcd5ce73; }
.example .col-md-4 > .box:has(.cover) { padding: 20px; }
.example a.cover {
  display: block; position: relative; margin-left: max(4px, 3.06%); transform: perspective(1000px) rotateY(-5deg); opacity: 0.88;
  box-shadow: -10px 10px 18px rgb(40 25 10 / 30%); border-radius: 0 5px 5px 0; transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
}
.example a.cover:hover { transform: none; opacity: 1; box-shadow: -10px 10px 18px rgb(40 25 10 / 42%); }
.example a.cover img { display: block; width: 100%; height: auto; border-radius: 0 5px 5px 0; }
.example a.cover::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: max(4px, 3.06%);
  background: linear-gradient(to right, #d1c9c1 0%, #e9e1d7 4%, #f4ebe1 9.2%, #f8efe4 18.4%, #f5ece2 36.2%, #ece3d9 41.5%, #dbd3ca 46.8%, #ddd5cc 52.1%, #e7ded5 60%, #efe6dd 68.2%, #f9f0e6 76%, #f6ede3 80.6%, #f3eae0 86.8%, #f3eae0 100%);
}
.example a.cover::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(6px, 7%, 18px);
  background: linear-gradient(to right, rgb(40 25 10 / 18%), rgb(40 25 10 / 5%) 40%, rgb(40 25 10 / 0%) 60%, rgb(255 255 255 / 8%) 76%, rgb(255 255 255 / 0%));
}
.example .border-right {
  position: absolute; top: 1%; bottom: 1%; right: calc(-1 * min(2.1%, 6.5px)); width: min(2.1%, 6.5px);
  background: linear-gradient(to right, rgb(60 40 20 / 0%), rgb(60 40 20 / 6%)), repeating-linear-gradient(to right, #fff 0, #fff 1px, #f2eee8 1px, #f2eee8 2px);
  box-shadow: inset -1px 0 0 rgb(60 40 20 / 26%); border-radius: 0 2px 2px 0;
}
.box-info { padding: 25px !important; }
.box-info h4 { font-size: 20px; font-weight: 700; border-bottom: 1px dashed #00000026; padding-bottom: 10px; margin-bottom: 15px; }
.box-info ul { list-style: none; padding: 0; margin: 0; }
.box-info li { margin-bottom: 12px; line-height: 20px; }
.box-link { padding: 15px 25px !important; margin-top: 10px; }
.box-link a { color: var(--primary-color); font-weight: 700; display: flex; align-items: center; }
.box-link a .material-symbols-outlined { margin-left: 2px; }
.box-link a:hover { color: var(--text-color); }
@media (min-width: 1200px) { .example a.cover { left: -7px; } }
@media (max-width: 1199px) { .example a.cover { transform: none; } }
@media (max-width: 767px) {
  .homepage-examples .wrapper { padding: 35px 20px; }
  .box-wrapper { border-radius: 20px; padding: 15px; margin-bottom: 25px; }
  .example .box { padding: 6px; margin-bottom: 10px; border-radius: 10px; }
  .example .col-md-4 > .box:has(.cover) { padding: 11px; }
  .box-info { display: none; }
  .box-link { font-size: 14px; padding: 10px 20px !important; }
  .example a.cover { left: 0; box-shadow: -6px 6px 10px rgb(40 25 10 / 30%); border-radius: 0 3px 3px 0; margin-right: clamp(3px, 2.1%, 8px); }
}

/* ── 6 themes ── */
.theme-overview .wrapper { background: #e8eeea; padding: 50px 10px; }
.theme-overview h2 { font-size: 36px; font-weight: 800; color: var(--text-color); margin-bottom: 35px; }
.subject-links-wrapper ul a {
  display: inline-block; padding: 7px 18px; border-radius: 50px; font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--text-color);
  background-image: linear-gradient(-180deg, #fff, #ffffff36); border: 1px solid #c7c7c7;
}
.subject-links-wrapper ul a img { height: 24px; width: auto; margin-right: 3px; vertical-align: middle; }
.subject-links-wrapper ul a:hover { border-color: var(--primary-color); background-image: linear-gradient(-180deg, #fff, #00000005); }
.subject-links-wrapper a.show-more-trigger, .subject-links-wrapper a.show-less-container {
  display: inline-block; padding: 7px 18px; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer;
  background-color: var(--primary-color); background-image: var(--primary-gradient); color: #fff; border: 1px solid var(--primary-color);
}
.subject-links-wrapper a.show-more-trigger:hover, .subject-links-wrapper a.show-less-container:hover { background-image: none; color: #fff; }
.subject-links-wrapper a.show-less-container { margin-top: 15px; }
.category-section { margin: 30px 0 20px; }
.category-section h3 { font-size: 1.1rem; font-weight: 700; color: #33333396; text-align: center; letter-spacing: 0.5px; margin-bottom: 15px; }
.cat-rule { opacity: 0.1; width: 60%; margin: 20px auto; }
@media (max-width: 767px) {
  .theme-overview .wrapper { padding: 35px 8px 20px; }
  .theme-overview h2 { font-size: 26px; max-width: 300px; margin-left: auto; margin-right: auto; }
  .subject-links-wrapper ul a { padding: 5px 10px; font-size: 14px; margin-bottom: 9px; }
  .subject-links-wrapper ul a img { height: 18px; }
  .subject-links-wrapper .list-inline-item { margin-right: 0; }
  #initial-view li.list-inline-item:nth-last-child(-n+7):not(:last-child) { display: none; }
  #trigger-li { display: block; }
  .subject-links-wrapper a.show-more-trigger { padding: 5px 15px; font-size: 14px; margin-bottom: 9px; }
}

/* ── 7 reviews ── */
.homepage-reviews .wrapper { min-height: 400px; }
.grid { column-count: 4; column-gap: 1rem; }
.grid-item { display: inline-block; width: 100%; margin-bottom: 1rem; }
.card3 { border: 0; border-radius: 20px; padding: 10px; }
.grid-item:nth-child(10n+1) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #ffd7ba; }
.grid-item:nth-child(10n+2) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #d8e2dc; }
.grid-item:nth-child(10n+3) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #fcd5ce; }
.grid-item:nth-child(10n+4) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #fae1dd; }
.grid-item:nth-child(10n+5) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #f8edeb; }
.grid-item:nth-child(10n+6) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #e2e9e5; }
.grid-item:nth-child(10n+7) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #ece4db; }
.grid-item:nth-child(10n+8) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #fec5bb; }
.grid-item:nth-child(10n+9) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #fec89a; }
.grid-item:nth-child(10n) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #e8e8e4; }
.review-stars { color: var(--primary-color); letter-spacing: 1px; margin-bottom: 8px; }
.card3 .card-text { font-size: 17px; font-weight: 400; font-style: italic; line-height: 28px; }
.card3 hr { max-width: 25px; border-top: 1px solid #0000001f; opacity: 1; margin: 14px 0; }
.card3 .card-title { font-size: 16px; font-weight: 600; color: var(--primary-color); }
@media (max-width: 1199px) { .grid { column-count: 3; } }
@media (max-width: 767px) {
  .grid { column-count: 2; column-gap: 0.5rem; }
  .grid-item { margin-bottom: 0.5rem; }
  .card3 { padding: 0; }
  .card3 .card-body { padding: 11px 11px 14px; }
  .card3 .card-text { font-size: 13px; line-height: 20px; hyphens: auto; }
  .card3 hr { max-width: 20px; margin: 10px 0; }
  .card3 .card-title { font-size: 13px; }
}
/* Two columns would leave about 110 px of text: a Swedish compound breaks mid-word. */
@media (max-width: 359px) { .grid { column-count: 1; } }

/* ── 8 USPs ── */
.usp .wrapper { background: #f8f0e2; padding: 50px 30px; }
.usp h2 { font-size: 36px; font-weight: 800; color: var(--text-color); margin-bottom: 35px; }
.usp-box { background: #faf8f0; border-radius: 30px; padding: 35px 30px 10px; }
.usp-box p { font-size: 18px; display: flex; line-height: 24px; margin-bottom: 25px; }
.usp-box .material-symbols-outlined { color: #20a165; margin-right: 10px; }
.usp .button { margin: 0; }
@media (max-width: 767px) {
  .usp .wrapper { padding: 35px 20px; }
  .usp h2 { font-size: 26px; }
  .usp-box { padding: 35px 20px 10px; border-radius: 20px; }
  .usp-box p { font-size: 16px; line-height: 22px; margin-bottom: 23px; }
}

/* ── 9 FAQ (the accordion is in components.css) ── */
.all-link { display: flex; align-items: center; color: var(--primary-color); margin-top: 15px; }
.all-link .material-symbols-outlined { margin-left: 2px; }
.all-link:hover { color: var(--text-color); }

/* ── 10 SEO text ── */
.seo-text-title { font-size: 34px; font-weight: 800; color: var(--primary-color); margin-bottom: 10px; }
.card2 { background: #faf8f0; border: 0; border-radius: 20px; padding: 10px; }
.card2 p, .card2 li { font-size: 17px; line-height: 28px; }
.card2 h3 { font-size: 24px; font-weight: 800; margin: 20px 0 10px; }
.card2 a { color: var(--primary-color); }
.card2 ul { list-style: none; margin: 5px 0; padding: 0; }
.card2 li { position: relative; padding-left: 35px; margin-bottom: 22px; }
.card2 li::before {
  content: "auto_awesome"; font-family: "Material Symbols Outlined"; position: absolute; left: 0; top: 0; font-size: 20px; color: var(--primary-color);
  font-feature-settings: "liga";
}
@media (max-width: 767px) { .seo-text-title { font-size: 26px; } .card2 { padding: 0; } }

/* Under reduced motion everything stands where it ends. */
@media (prefers-reduced-motion: reduce) {
  .homepage-top h1, .homepage-top .col-md-7 > p, .homepage-top .col-md-7 > .button, .cta-text { opacity: 1; animation: none; }
  .slider1, .slider2, .slider3 { animation: none; }
}