/* Opdrachtgevers – breekpunten zoals op de live site: tablet t/m 1024px, mobiel t/m 767px. */

.opdrachtgevers-heading { color: var(--up-button); font: 700 58px/1.2 "Poppins", sans-serif; margin: 0; text-align: center; text-transform: capitalize; }
.opdrachtgevers-button { --bs-btn-border-radius: 4px; --bs-btn-font-size: 18px; --bs-btn-font-weight: 500; --bs-btn-padding-x: 30px; --bs-btn-padding-y: 25px; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--up-button); --bs-btn-hover-color: #0d3276; --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--up-button); --bs-btn-active-color: #0d3276; font-family: "Manrope", sans-serif; text-transform: capitalize; transition: transform .3s; }
.opdrachtgevers-button:hover, .opdrachtgevers-button:focus-visible { transform: scale(.9); }

/* Hero: tekst links, foto met het kaartje van Sunil rechts. */
.opdrachtgevers-hero { display: flow-root; position: relative; z-index: 1; }
.opdrachtgevers-hero__inner { display: flex; min-height: 100vh; padding: 0 6%; }
.opdrachtgevers-hero__content { align-items: flex-start; display: flex; flex: 0 0 50%; flex-direction: column; justify-content: center; min-width: 0; padding-right: 12%; }
.opdrachtgevers-hero__title { color: var(--up-button); font: 400 76px/1 "Poppins", sans-serif; margin: 0 0 20px; text-transform: capitalize; }
.opdrachtgevers-hero__title b { font-weight: 700; }
.opdrachtgevers-hero__lead { color: var(--up-muted); font: 300 15px/1.5 "Manrope", sans-serif; margin: 0 0 60px; position: relative; }
.opdrachtgevers-hero__lead::after { background: #dee9fa; content: ""; height: 10px; left: 0; position: absolute; top: calc(100% + 5px); width: 100%; }
.opdrachtgevers-hero__content .opdrachtgevers-button { margin-bottom: 73px; }
.opdrachtgevers-hero__linkedin { background: var(--up-button); border: 1px solid var(--up-button); border-radius: 50px; color: #fff; display: inline-block; font: 400 14px/1.2 "DM Sans", sans-serif; padding: 14px 30px 12px; text-transform: capitalize; transition: transform .3s ease-out; }
.opdrachtgevers-hero__linkedin:hover, .opdrachtgevers-hero__linkedin:focus-visible { border-color: #0d2d68; color: #fff; transform: translateY(-8px); }
.opdrachtgevers-hero__media { flex: 0 0 50%; min-width: 0; padding: 10px; position: relative; }
.opdrachtgevers-hero__photo { inset: 0; overflow: hidden; position: absolute; }
.opdrachtgevers-hero__photo img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 85%; }
.opdrachtgevers-hero__card { background: #fff; border: 1px solid #c4cbdb; border-radius: 15px; box-shadow: -10px 32px 54px rgba(149, 155, 166, .3); margin: 52% 0 0 -14%; padding: 25px 35px 35px; position: relative; transition: box-shadow .3s; width: 44%; }
.opdrachtgevers-hero__card:hover { box-shadow: 0 0 10px rgba(149, 155, 166, .3); }
.opdrachtgevers-hero__card img { border-radius: 100px; display: block; height: 65px; margin-bottom: 20px; width: 65px; }
.opdrachtgevers-hero__card strong { color: #0d2d68; display: block; font: 500 16px/1.2 "Manrope", sans-serif; margin-bottom: 1px; text-transform: capitalize; }
.opdrachtgevers-hero__card span { color: #323232; display: block; font: 400 14px/1.5 "Manrope", sans-serif; text-transform: capitalize; }

/* Detachering bij 1UP Talent: foto (zoomt bij hover) met paarse gloed links, tekst rechts. */
.opdrachtgevers-about__inner { background: radial-gradient(at 0 50%, rgba(92, 8, 245, .05) 0%, rgba(242, 41, 91, 0) 30%); display: flex; margin-top: 5%; padding: 0 12%; }
.opdrachtgevers-about__media { flex: 0 0 50%; min-width: 0; position: relative; }
.opdrachtgevers-about__photo { height: 100%; min-height: 619px; overflow: hidden; position: relative; z-index: 1; }
.opdrachtgevers-about__photo img { height: 100%; inset: 0; max-width: none; object-fit: cover; position: absolute; transition: transform 1.5s; width: 100%; }
.opdrachtgevers-about__photo:hover img { transform: scale(1.2); }
.opdrachtgevers-about__glow { background: radial-gradient(rgba(92, 8, 245, .42) 0%, rgba(192, 161, 249, 0) 70%); height: 100vh; left: -103.054%; pointer-events: none; position: absolute; top: -87.16%; width: min(52vw, 100%); z-index: 0; }
.opdrachtgevers-about__text { display: flex; flex: 0 0 50%; flex-direction: column; justify-content: center; min-width: 0; padding-left: 8%; }
.opdrachtgevers-about__title { color: var(--up-button); font: 400 58px/1.2 "Poppins", sans-serif; margin: 40px 0 30px; position: relative; text-transform: capitalize; z-index: 0; }
.opdrachtgevers-about__title b { font-weight: 700; }
.opdrachtgevers-about__title::before { background: #dee9fa; content: ""; height: 10px; left: 0; position: absolute; top: 40px; width: 245px; z-index: -1; }
.opdrachtgevers-about__body { color: #1c1c1c; font: 300 15px/1.5 "Manrope", sans-serif; padding-right: 15%; }
.opdrachtgevers-about__body strong { font-weight: 700; }

/* Flipkaarten: draaien bij hover, focus (toetsenbord) en aantikken. */
.opdrachtgevers-services__grid { padding: 20px; }
.opdrachtgevers-services__grid .row { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }
.opdrachtgevers-flip { height: 280px; perspective: 1000px; position: relative; }
.opdrachtgevers-flip__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--up-button); color: #fff; display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 35px; position: absolute; text-align: center; transition: transform .6s ease-in-out; width: 100%; }
.opdrachtgevers-flip__face--front { z-index: 1; }
.opdrachtgevers-flip__face--back { transform: rotateX(-180deg); }
.opdrachtgevers-flip:hover .opdrachtgevers-flip__face--front, .opdrachtgevers-flip:focus-within .opdrachtgevers-flip__face--front { transform: rotateX(180deg); }
.opdrachtgevers-flip:hover .opdrachtgevers-flip__face--back, .opdrachtgevers-flip:focus-within .opdrachtgevers-flip__face--back { transform: none; }
.opdrachtgevers-flip:focus-visible { outline: 2px solid var(--up-heading); outline-offset: 2px; }
.opdrachtgevers-flip__icon { align-self: center; height: 50px; margin-bottom: 36px; width: 50px; }
.opdrachtgevers-flip__title { color: #fff; font: 600 21px/1 var(--up-font-heading); margin: 0 0 20px; }
.opdrachtgevers-flip__face--front .opdrachtgevers-flip__title { margin-bottom: 28px; }
.opdrachtgevers-flip__text { font-size: 14px; font-weight: 700; margin: 0 0 20px; }
.opdrachtgevers-flip__button { align-self: center; border: 2px solid #fff; border-radius: 3px; color: #fff; font-weight: 700; line-height: 1; padding: 12px 24px; transition: color .3s; }
.opdrachtgevers-flip__button:hover, .opdrachtgevers-flip__button:focus-visible { color: #ffe605; }
.opdrachtgevers-services__grid .col-md-4:first-child .opdrachtgevers-flip__button { border-color: #ffe605; }

/* SNA-keurmerk */
.opdrachtgevers-sna__head { margin-top: 15%; padding: 10px calc(6% + 10px); }
.opdrachtgevers-sna__row { display: flex; margin-top: 1%; padding: 0 6%; }
.opdrachtgevers-sna__text { flex: 0 1 70%; min-width: 0; padding: 10px; }
.opdrachtgevers-sna__text p { color: var(--up-muted); font-weight: 700; margin-bottom: 40px; }
.opdrachtgevers-sna__logo { flex: 0 1 51%; min-width: 0; padding-top: 40px; text-align: center; }

/* Quotes uit klantinterviews */
.opdrachtgevers-quotes__inner { margin-top: 15%; padding: 0 6%; }
.opdrachtgevers-quotes__list { display: flex; gap: 5%; margin-top: 5%; }
.opdrachtgevers-quote { flex: 0 1 33%; margin: 0; min-width: 0; }
.opdrachtgevers-quote__logo { border-radius: 100px; display: block; margin-bottom: 18px; width: 12%; }
.opdrachtgevers-quote blockquote { color: #0d2d68; font: 500 16px/1.5 "Manrope", sans-serif; margin: 0 0 15px; }
.opdrachtgevers-quote figcaption { color: #323232; font: 400 15px/1.2 "Manrope", sans-serif; letter-spacing: .5px; text-transform: capitalize; }

/* Logo's van opdrachtgevers: de gedeelde carrousel op de maat van de live site (logo's 70px uit elkaar, pijlen binnen de rand).
   Elk logo krijgt het vak van het hoogste logo (216:233), zodat de hoogte vaststaat voordat de afbeeldingen geladen zijn. */
.opdrachtgevers-clients { padding: 80px 0 139px; }
.opdrachtgevers-clients__inner { padding: 0 10px; }
.opdrachtgevers-clients__carousel { overflow: hidden; width: 97.833%; }
.opdrachtgevers-clients .client-logos { margin: 0 -35px; }
.opdrachtgevers-clients .client-logos .scroller__item { padding: 0 35px; }
.opdrachtgevers-clients .client-logos .scroller__item img { aspect-ratio: 216 / 233; max-height: none; }
.opdrachtgevers-clients .client-logos .scroller__arrow--prev { left: 43px; }
.opdrachtgevers-clients .client-logos .scroller__arrow--next { right: 43px; }

@media (max-width: 1024.98px) {
  .opdrachtgevers-heading { font-size: 45px; }
  .opdrachtgevers-button { --bs-btn-padding-x: 25px; --bs-btn-padding-y: 18px; }
  .opdrachtgevers-hero__inner { flex-direction: column; margin-top: 12%; }
  .opdrachtgevers-hero__content { align-items: center; flex: none; padding: 0 15%; text-align: center; }
  .opdrachtgevers-hero__title { font-size: 55px; }
  .opdrachtgevers-hero__lead { font-size: 14px; }
  .opdrachtgevers-hero__lead::after { left: 50%; margin-left: -205px; width: 410px; }
  .opdrachtgevers-hero__content .opdrachtgevers-button { margin-bottom: 50px; }
  .opdrachtgevers-hero__linkedin { padding: 12px 20px 10px; }
  .opdrachtgevers-hero__media { display: flex; flex: none; flex-direction: column; justify-content: flex-end; margin-top: 10%; min-height: 627px; padding: 0 0 54px; }
  .opdrachtgevers-hero__photo img { width: 75%; }
  .opdrachtgevers-hero__card { margin: 0 0 0 -4%; }
  .opdrachtgevers-about__inner { flex-direction: column-reverse; margin-top: 15%; padding: 0 6%; }
  .opdrachtgevers-about__media { flex: none; margin-top: 10%; }
  .opdrachtgevers-about__glow { left: -50%; top: 3%; }
  .opdrachtgevers-about__text { flex: none; padding: 0; text-align: center; }
  .opdrachtgevers-about__title { font-size: 45px; }
  .opdrachtgevers-about__title::before { left: 50%; margin-left: -95px; top: 28px; width: 190px; }
  .opdrachtgevers-about__body { font-size: 14px; padding: 0 10%; }
  .opdrachtgevers-sna__head, .opdrachtgevers-quotes__inner { margin-top: 25%; }
  .opdrachtgevers-sna__text .opdrachtgevers-button { margin-bottom: 20px; }
  .opdrachtgevers-sna__logo { padding-top: 70px; }
  .opdrachtgevers-quote__logo { width: 25%; }
  .opdrachtgevers-quote blockquote, .opdrachtgevers-quote figcaption { font-size: 14px; }
  .opdrachtgevers-clients__carousel { width: 60%; }
  .opdrachtgevers-flip { cursor: pointer; }
}

@media (max-width: 767.98px) {
  .opdrachtgevers-heading { font-size: 32px; }
  .opdrachtgevers-hero__inner { margin-top: 20%; }
  .opdrachtgevers-hero__content { padding: 0; }
  .opdrachtgevers-hero__title { font-size: 40px; }
  .opdrachtgevers-hero__lead::after { left: 2.5%; margin-left: 0; top: calc(100% + 10px); width: 95%; }
  .opdrachtgevers-hero__media { align-items: center; margin-top: 25%; min-height: 512px; padding: 0; }
  .opdrachtgevers-hero__photo img { height: 100%; object-fit: cover; top: 0; transform: none; width: 100%; }
  .opdrachtgevers-hero__card { margin: 0 0 -94px; width: 94%; }
  .opdrachtgevers-about__inner { margin-top: 70%; }
  .opdrachtgevers-about__photo { min-height: 300px; }
  .opdrachtgevers-about__glow { top: -40%; }
  .opdrachtgevers-about__title { font-size: 32px; }
  .opdrachtgevers-about__title::before { margin-left: -67.5px; top: 15px; width: 135px; }
  .opdrachtgevers-about__body { padding: 0; }
  .opdrachtgevers-sna__head, .opdrachtgevers-quotes__inner { margin-top: 35%; }
  .opdrachtgevers-sna__row { flex-wrap: wrap; }
  .opdrachtgevers-sna__text, .opdrachtgevers-sna__logo { flex-basis: 100%; }
  .opdrachtgevers-quotes__list { flex-wrap: wrap; gap: 50px; justify-content: center; }
  .opdrachtgevers-quote { flex: 0 0 70%; text-align: center; }
  .opdrachtgevers-quote__logo { margin-left: auto; margin-right: auto; }
  .opdrachtgevers-clients__carousel { width: auto; }
}