Skip to content
Chat history

You said:
Uploaded image
Ik zou graag de tekst kleur van de testimonial die in het wit staat aanpassen 

Dit is de code:

<div class="w-full testimonials-slider-parent">
  <div class="testimonials-slider-wrapper">
    <div class="testimonials-slider">
      {% if module.display_mode == 'all' %}
      
      {% for row in hubdb_table_rows(5499999, "testimonial_language")  %}
      <div class="testimonials-slider-main">
        <div class="testimonials-slider-main-inner">
          <div class="!h-auto flex flex-col justify-between rounded-md shadow-lg mb-4 testimonials-slider-inner">
            <div class="flex flex-col items-center justify-start px-12 pt-12 !text-white">
              <div class="testimonials-slider-upper-content !text-white text-center">
                <span class="mb-4 text-xl font-black font-mont"></span>
                <p class="text-base text-center">
                  
                </p>            
              </div>
            </div>

            <div class="flex flex-col items-center justify-end student-details">
              <div class="testimonials-slider-bottom-content">
                <div class="px-12 mb-4">
                  <span class="text-lg font-black text-white font-mont"></span> - <span class="text-lg text-white"></span>
                </div>
                <div class="student-picture rounded-full border-4 border-white w-[120px] h-[120px] overflow-hidden mb-[-60px]">
                  <img src="{% if row.student_picture.url %}{% else %}https://6240600.fs1.hubspotusercontent-na1.net/hubfs/6240600/profile-image.jfif{% endif %}" class="relative -translate-y-1/2 top-1/2" width="120">
                </div>
                <div class="flex flex-col items-center justify-end w-full pt-16 pb-6 rounded-b-md ratings">
                  <div class="text-sm text-brandorange">
                    {% for x in range(0,row.rating.name) %}
                    <i class="fas fa-star fa-xs "></i>
                    {% endfor %}

                    {% if row.rating.name < 5 %}
                    {% for y in range(row.rating.name, 5)%}
                    <i class="far fa-star fa-xs "></i>
                    {% endfor %}
                    {% endif %}
                  </div>
                </div>            
              </div>
            </div>
          </div> 
        </div>
      </div>
      {% endfor %}

      {% else %}
      
      {% for item in module.slider_group %}
      <div class="testimonials-slider-main">
        <div class="testimonials-slider-main-inner">
          <div class="!h-auto flex flex-col justify-between rounded-md shadow-lg mb-4 testimonials-slider-inner">
            <div class="flex flex-col items-center justify-start px-12 pt-12 !text-white">
              <div class="testimonials-slider-upper-content !text-white text-center">
                <span class="mb-4 text-xl font-black font-mont"></span>
                <p class="text-base text-center">
                  
                </p>            
              </div>
            </div>

            <div class="flex flex-col items-center justify-end student-details">
              <div class="testimonials-slider-bottom-content">
                <div class="px-12 mb-4">
                  <span class="text-lg font-black text-white font-mont"></span> - <span class="text-lg text-white"></span>
                </div>
                <div class="student-picture rounded-full border-4 border-white w-[120px] h-[120px] overflow-hidden mb-[-60px]">
                  <img src="{% if item.hubdbrow_field.columns.student_picture.url %}{% else %}https://6240600.fs1.hubspotusercontent-na1.net/hubfs/6240600/profile-image.jfif{% endif %}" class="relative -translate-y-1/2 top-1/2" width="120">
                </div>
                <div class="flex flex-col items-center justify-end w-full pt-16 pb-6 rounded-b-md ratings">
                  <div class="text-sm text-brandorange">
                    {% for x in range(0,item.hubdbrow_field.columns.rating.name) %}
                    <i class="fas fa-star fa-xs "></i>
                    {% endfor %}

                    {% if item.hubdbrow_field.columns.rating.name < 5 %}
                    {% for y in range(item.hubdbrow_field.columns.rating.name, 5)%}
                    <i class="far fa-star fa-xs "></i>
                    {% endfor %}
                    {% endif %}
                  </div>
                </div>            
              </div>
            </div>
          </div> 
        </div>
      </div>
      {% endfor %}
      
      {% endif %} 
    </div>
  </div>
</div>  
ChatGPT said:

Thought for 17s
Je tekst blijft wit door de utility !text-white (de ! maakt het important in Tailwind). Je hebt ’m twee keer staan, op de container én op .testimonials-slider-upper-content. Daardoor overschrijft het elke andere kleur.

Snelste fix (aanbevolen): verwijder !text-white en geef gewenste kleur aan titel/tekst
Pas dit in beide branches aan (zowel row als item):

<!-- WAS: <div class="flex flex-col items-center justify-start px-12 pt-12 !text-white"> -->
<div class="flex flex-col items-center justify-start px-12 pt-12">

  <!-- WAS: <div class="testimonials-slider-upper-content !text-white text-center"> -->
  <div class="testimonials-slider-upper-content text-center">
    <span class="mb-4 text-xl font-black font-mont text-brandblue">
      
    </span>
    <p class="text-base text-center text-gray-900">
      
    </p>
  </div>
</div>
En hetzelfde voor de module.slider_group-tak:

<div class="flex flex-col items-center justify-start px-12 pt-12">
  <div class="testimonials-slider-upper-content text-center">
    <span class="mb-4 text-xl font-black font-mont text-brandblue">
      
    </span>
    <p class="text-base text-center text-gray-900">
      
    </p>
  </div>
</div>
Vervang text-brandblue en text-gray-900 door jouw gewenste Tailwind-kleuren (of gebruik text-[#123456] voor een hex).

Alternatief (als je !text-white niet kunt verwijderen)
Overschrijf per element met een eigen important kleur:

<p class="text-base text-center !text-gray-900">
  
</p>
of met CSS:

.testimonials-slider .testimonials-slider-upper-content p{ color:#111827 !important; }
Let op: Onderaan staan nog text-white-classes voor naam/taal. Die laat je gewoon staan als die wit moeten blijven.

You said:
Ik heb ook css nodig voor de naam/taal die moeten kleurcode #6E7481 - zelfde geldt voor testimonial text

Dit is de module.html (HTML+Hubl) code:
<div class="w-full testimonials-slider-parent">
  <div class="testimonials-slider-wrapper">
    <div class="testimonials-slider">
      {% if module.display_mode == 'all' %}
      
      {% for row in hubdb_table_rows(5499999, "testimonial_language")  %}
      <div class="testimonials-slider-main">
        <div class="testimonials-slider-main-inner">
          <div class="!h-auto flex flex-col justify-between rounded-md shadow-lg mb-4 testimonials-slider-inner">
            <div class="flex flex-col items-center justify-start px-12 pt-12 !text-white">
              <div class="testimonials-slider-upper-content !text-white text-center">
                <span class="mb-4 text-xl font-black font-mont"></span>
                <p class="text-base text-center">
                  
                </p>            
              </div>
            </div>

            <div class="flex flex-col items-center justify-end student-details">
              <div class="testimonials-slider-bottom-content">
                <div class="px-12 mb-4">
                  <span class="text-lg font-black text-white font-mont"></span> - <span class="text-lg text-white"></span>
                </div>
                <div class="student-picture rounded-full border-4 border-white w-[120px] h-[120px] overflow-hidden mb-[-60px]">
                  <img src="{% if row.student_picture.url %}{% else %}https://6240600.fs1.hubspotusercontent-na1.net/hubfs/6240600/profile-image.jfif{% endif %}" class="relative -translate-y-1/2 top-1/2" width="120">
                </div>
                <div class="flex flex-col items-center justify-end w-full pt-16 pb-6 rounded-b-md ratings">
                  <div class="text-sm text-brandorange">
                    {% for x in range(0,row.rating.name) %}
                    <i class="fas fa-star fa-xs "></i>
                    {% endfor %}

                    {% if row.rating.name < 5 %}
                    {% for y in range(row.rating.name, 5)%}
                    <i class="far fa-star fa-xs "></i>
                    {% endfor %}
                    {% endif %}
                  </div>
                </div>            
              </div>
            </div>
          </div> 
        </div>
      </div>
      {% endfor %}

      {% else %}
      
      {% for item in module.slider_group %}
      <div class="testimonials-slider-main">
        <div class="testimonials-slider-main-inner">
          <div class="!h-auto flex flex-col justify-between rounded-md shadow-lg mb-4 testimonials-slider-inner">
            <div class="flex flex-col items-center justify-start px-12 pt-12 !text-white">
              <div class="testimonials-slider-upper-content !text-white text-center">
                <span class="mb-4 text-xl font-black font-mont"></span>
                <p class="text-base text-center">
                  
                </p>            
              </div>
            </div>

            <div class="flex flex-col items-center justify-end student-details">
              <div class="testimonials-slider-bottom-content">
                <div class="px-12 mb-4">
                  <span class="text-lg font-black text-white font-mont"></span> - <span class="text-lg text-white"></span>
                </div>
                <div class="student-picture rounded-full border-4 border-white w-[120px] h-[120px] overflow-hidden mb-[-60px]">
                  <img src="{% if item.hubdbrow_field.columns.student_picture.url %}{% else %}https://6240600.fs1.hubspotusercontent-na1.net/hubfs/6240600/profile-image.jfif{% endif %}" class="relative -translate-y-1/2 top-1/2" width="120">
                </div>
                <div class="flex flex-col items-center justify-end w-full pt-16 pb-6 rounded-b-md ratings">
                  <div class="text-sm text-brandorange">
                    {% for x in range(0,item.hubdbrow_field.columns.rating.name) %}
                    <i class="fas fa-star fa-xs "></i>
                    {% endfor %}

                    {% if item.hubdbrow_field.columns.rating.name < 5 %}
                    {% for y in range(item.hubdbrow_field.columns.rating.name, 5)%}
                    <i class="far fa-star fa-xs "></i>
                    {% endfor %}
                    {% endif %}
                  </div>
                </div>            
              </div>
            </div>
          </div> 
        </div>
      </div>
      {% endfor %}
      
      {% endif %} 
    </div>
  </div>
</div>  


Dit is module.css code:

@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css');


body.no-overflow { overflow-x:unset; }


.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-brandindigo {
  --tw-gradient-from: #34009E;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(52 0 158 / 0));
}

.from-brandgreen {
  --tw-gradient-from: #00C389;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 195 137 / 0));
}

.to-brandgreen {
  --tw-gradient-to: #00C389;
}

.to-brandindigo {
  --tw-gradient-to: #34009E;
}

.testimonials-slider {
  margin-left: 0;
  gap: 40px;
} 

/* .testimonials-slider .testimonials-slider-inner {  
width: calc(50% - 15px);
} */

.testimonials-slider  .student-picture {
  width: 100%;
  max-width: 120px;
  height: 120px;
}

.testimonials-slider .student-picture img {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials-slider-inner {
  background-color: #6E7481;
  overflow: hidden;
}

.student-details {
  text-align: center;
  position: relative;
}

.student-details:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 55%;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.ratings { 
  position: relative;
  z-index: 2;
}

.testimonials-slider .student-picture{
  margin: 0 auto;
}

.testimonials-slider-main-inner {
    margin: 0 30px;
}

.testimonials-slider .slick-prev, .testimonials-slider .slick-next {
    background-color: rgb(255 81 0 / var(--tw-bg-opacity));
}

.testimonials-slider .slick-prev:before, .testimonials-slider .slick-next:before {
    display: none;
}

.testimonials-slider .slick-prev svg, .testimonials-slider .slick-next svg {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.testimonials-slider .slick-prev svg path, .testimonials-slider .slick-next svg path {
    fill: #fff;
}

.testimonials-slider .slick-prev, .testimonials-slider .slick-next {
    width: 100%;
    max-width: 35px;
    height: 40px;
    padding: 5px;
}

.testimonials-slider .slick-prev {
    left: -40px;
}

.testimonials-slider .slick-next {
    right: -40px;
}


.testimonials-slider .slick-prev.slick-disabled, .testimonials-slider .slick-next.slick-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}

@media(max-width: 1080px){
  .student-details:before { height: 45%; }
}

@media(max-width: 991px){
  .testimonials-slider-parent .swiper-slide.w-\[400px\] { width: 100%;}
  .testimonials-slider-main-inner { margin: 0; }
  .testimonials-slider-parent { padding-top: 80px; }
  .testimonials-slider .slick-next { top: -35px; right: 0; }
  .testimonials-slider .slick-prev { top: -35px; left: unset; right: 70px; }
  
  
  .student-details:before { height: 50%; }
}

Kan je mij de juiste code geven om de tekstkleur te veranderne?
ChatGPT said:

Thought for 29s
Helemaal—je kunt dit puur met CSS oplossen, zonder je HTML/HUBL aan te passen. Voeg onderstaande regels onderaan je module.css toe.

/* Testimonial body-tekst */
.testimonials-slider .testimonials-slider-upper-content p {
  color: #6E7481 !important; /* overschrijft de geërfde !text-white */
}

/* Naam + taal (onderaan, in de witte zone) */
.testimonials-slider .testimonials-slider-bottom-content .px-12 span {
  color: #6E7481 !important; /* overschrijft de text-white utility */
}
Dat is voldoende om:

de testimonial tekst (<p>…</p>) naar #6E7481 te zetten, ook al erft het wit van de parent met !text-white;

zowel naam als taal (beide <span>s binnen .px-12) naar #6E7481 te forceren, ondanks text-white op de elementen.

Tip: in HubSpot kan caching meespelen. Publiceer de module/thema opnieuw en hard refresh (⌘/Ctrl+Shift+R) om het direct te zien.

You said:
Kan ik dit gewoon onderaan de css zetten? Kan je mij de hele css code geven met de deze 2 nieuwe lijnen zodat ik het gewoon kan copy en paste
ChatGPT said:
Ja, je kunt dit gewoon onderaan je module.css plakken. Hier is je complete CSS met de twee extra regels toegevoegd onderaan — copy/paste klaar:

@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css');


body.no-overflow { overflow-x:unset; }


.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-brandindigo {
  --tw-gradient-from: #34009E;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(52 0 158 / 0));
}

.from-brandgreen {
  --tw-gradient-from: #00C389;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 195 137 / 0));
}

.to-brandgreen {
  --tw-gradient-to: #00C389;
}

.to-brandindigo {
  --tw-gradient-to: #34009E;
}

.testimonials-slider {
  margin-left: 0;
  gap: 40px;
} 

/* .testimonials-slider .testimonials-slider-inner {  
width: calc(50% - 15px);
} */

.testimonials-slider  .student-picture {
  width: 100%;
  max-width: 120px;
  height: 120px;
}

.testimonials-slider .student-picture img {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials-slider-inner {
  background-color: #f5f5f5;
  overflow: hidden;
}

.student-details {
  text-align: center;
  position: relative;
}

.student-details:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 55%;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.ratings { 
  position: relative;
  z-index: 2;
}

.testimonials-slider .student-picture{
  margin: 0 auto;
}

.testimonials-slider-main-inner {
    margin: 0 30px;
}

.testimonials-slider .slick-prev, .testimonials-slider .slick-next {
    background-color: rgb(255 81 0 / var(--tw-bg-opacity));
}

.testimonials-slider .slick-prev:before, .testimonials-slider .slick-next:before {
    display: none;
}

.testimonials-slider .slick-prev svg, .testimonials-slider .slick-next svg {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.testimonials-slider .slick-prev svg path, .testimonials-slider .slick-next svg path {
    fill: #fff;
}

.testimonials-slider .slick-prev, .testimonials-slider .slick-next {
    width: 100%;
    max-width: 35px;
    height: 40px;
    padding: 5px;
}

.testimonials-slider .slick-prev {
    left: -40px;
}

.testimonials-slider .slick-next {
    right: -40px;
}

.testimonials-slider .slick-prev.slick-disabled, .testimonials-slider .slick-next.slick-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none;
}

@media(max-width: 1080px){
  .student-details:before { height: 45%; }
}

@media(max-width: 991px){
  .testimonials-slider-parent .swiper-slide.w-\[400px\] { width: 100%;}
  .testimonials-slider-main-inner { margin: 0; }
  .testimonials-slider-parent { padding-top: 80px; }
  .testimonials-slider .slick-next { top: -35px; right: 0; }
  .testimonials-slider .slick-prev { top: -35px; left: unset; right: 70px; }
  .student-details:before { height: 50%; }
}

/* ========================= */
/* Toegevoegd: tekstkleur fix */
/* ========================= */

/* Testimonial body-tekst */
.testimonials-slider .testimonials-slider-upper-content p {
  color: #6E7481 !important; /* overschrijft geërfde !text-white */
}

/* Naam + taal (beide spans in de witte zone) */
.testimonials-slider .testimonials-slider-bottom-content .px-12 span {
  color: #6E7481 !important; /* overschrijft text-white op de spans */
}

/* Titel (bovenaan de testimonial) */
.testimonials-slider .testimonials-slider-upper-content > span {
  color: #6E7481 !important;
}

/* Titel spacing + tighter line-height */
.testimonials-slider .testimonials-slider-upper-content > span {
  display: block;                 /* maakt margin-bottom effectief */
  margin-bottom: 24px !important; /* overschrijft Tailwind mb-4 (16px) */
  line-height: 1.2 !important;    /* compacter dan default */
}

/* ===== Slick arrows: verticaal centreren links/rechts ===== */
.testimonials-slider { 
  position: relative; /* referentie voor absolute posities */
}

.testimonials-slider .slick-prev,
.testimonials-slider .slick-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Links en rechts naast de kaarten */
.testimonials-slider .slick-prev { left: -48px !important; }
.testimonials-slider .slick-next { right: -48px !important; }

/* Optioneel: iets dichterbij op small screens */
@media (max-width: 991px) {
  .testimonials-slider .slick-prev { left: 8px !important; }
  .testimonials-slider .slick-next { right: 8px !important; }
}

/* === Slick arrows: square + extra inner padding === */
.testimonials-slider .slick-prev,
.testimonials-slider .slick-next {
  border-radius: 0 !important;   /* geen afgeronde hoeken */
  width: 44px !important;
  height: 44px !important;
  padding: 10px !important;       /* meer ruimte tussen rand en arrow */
  box-sizing: content-box;        /* padding telt niet af van het icoon */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Zorg dat het icoon mooi schaalt binnen de padding */
.testimonials-slider .slick-prev svg,
.testimonials-slider .slick-next svg {
  width: 100% !important;
  height: 100% !important;
}

/* (optioneel) Hover: iets donkerder oranje voor feedback */
.testimonials-slider .slick-prev:hover,
.testimonials-slider .slick-next:hover {
  filter: brightness(0.95);
}

/* ===== MOBILE: arrows onder de testimonials ===== */
@media (max-width: 640px) {
  /* Maak plaats onderaan de slider voor de pijlen */
  .testimonials-slider {
    position: relative;
    padding-bottom: 96px; /* ruimte voor de 2 knoppen */
  }

  /* Zet de pijlen onderaan i.p.v. midden naast de cards */
  .testimonials-slider .slick-prev,
  .testimonials-slider .slick-next {
    position: absolute !important;
    top: auto !important;
    bottom: 24px !important;     /* afstand tot onderzijde */
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;     /* jouw extra lucht in de oranje box */
    border-radius: 0 !important;  /* niet rond */
    z-index: 5;
  }

  /* Links & rechts uitlijnen binnen de slider */
  .testimonials-slider .slick-prev { left: 16px !important; }
  .testimonials-slider .slick-next { right: 16px !important; }
}

/* Laat schaduw onder de slide zichtbaar zijn */
.testimonials-slider .slick-list {
  overflow: visible !important;
}

/* Alleen-onder schaduw voor de card */
.testimonials-slider .testimonials-slider-inner {
  /* zachte, uitsluitend “downward” shadow via negatieve spread */
  box-shadow:
    0 22px 30px -16px rgba(17, 24, 39, 0.18),
    0 8px 12px -10px rgba(17, 24, 39, 0.12) !important;
}

/* Extra ruimte zodat de schaduw mooi kan uitlopen */
.testimonials-slider .slick-list {
  padding-bottom: 24px;
  margin-bottom: -24px; /* compenseert de extra hoogte */
}

/* Mobile: iets meer ruimte i.v.m. pijlen onderaan */
@media (max-width: 640px) {
  .testimonials-slider .slick-list {
    padding-bottom: 36px;
    margin-bottom: -36px;
  }
}

/* Laat schaduw onder de slide doorlopen, maar toon géén volgende slide */
.testimonials-slider .slick-list {
  overflow-x: hidden !important;  /* geen ‘peek’ rechts/links */
  overflow-y: visible !important; /* schaduw mag onder uitsteken */
}

/* =========================
   MOBILE CLEAN SET (≤640px)
   ========================= */
@media (max-width: 640px) {
  /* 1) Slider-breedte en ademruimte */
  .testimonials-slider-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 2) Geen verticale 'micro scroll' in/om de slider */
  .testimonials-slider .slick-list {
    overflow-x: hidden !important;  /* geen peek naar volgende slide */
    overflow-y: hidden !important;  /* voorkomt kleine verticale scroll */
    padding-bottom: 0 !important;   /* reset eerdere hacks */
    margin-bottom: 0 !important;
  }

  /* 3) Extra witruimte ONDERIN de slider zelf,
        zodat arrows + schaduw ruimte hebben zonder page-scroll */
  .testimonials-slider {
    position: relative;
    padding-bottom: 88px !important; /* ruimte voor arrows + schaduw */
  }

  /* 4) Subtiele, kortere schaduw op de card */
  .testimonials-slider .testimonials-slider-inner {
    background-color: #F6F7F9;
    box-shadow:
      0 12px 18px -14px rgba(17, 24, 39, 0.14),
      0 5px 10px -8px  rgba(17, 24, 39, 0.10) !important; /* kort & licht */
    overflow: visible;  /* inhoud mag, maar ancestor ‘list’ kapt niet af */
    border-radius: 12px;
  }

  /* 5) Slides iets compacter zodat de totale hoogte rustiger is */
  .testimonials-slider .slick-slide { padding: 0 6px !important; }
  .student-details:before { height: 46%; }  /* lagere witte voet */
  .testimonials-slider  .student-picture { max-width: 104px; height: 104px; }

  /* 6) Typografie: net wat efficiënter voor hoogte */
  .testimonials-slider .testimonials-slider-upper-content > span {
    margin-bottom: 18px !important;
    line-height: 1.2 !important;
  }
  .testimonials-slider .testimonials-slider-upper-content p {
    line-height: 1.5 !important;
  }

  /* 7) Arrows onderaan, gecentreerd (zonder extra scroll) */
  .testimonials-slider .slick-prev,
  .testimonials-slider .slick-next {
    position: absolute !important;
    top: auto !important;
    bottom: 20px !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;     /* extra lucht in de oranje box */
    border-radius: 0 !important;
    z-index: 10;
  }
  /* centreer: prev iets links van midden, next iets rechts */
  .testimonials-slider .slick-prev { left: calc(50% - 50px) !important; }
  .testimonials-slider .slick-next { left: calc(50% + 14px) !important; }
}