/* 
  Bestand: css/front-page.css
  Doel: Styling voor de unieke onderdelen van de Void Tattoo homepage.
*/


@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Ovo&display=swap');

body{
    font-family: 'Raleway', sans-serif;
}

/* -------------------------------------------------------------
   Tattoo Hero Sectie - Uitgelijnd naar rechts conform screenshot
   ------------------------------------------------------------- */
.billboard-wrap .billboard-bg-img {
    display: flex;
    align-items: center;
    height: 100vh; 
    width: 100%;
    padding-top: 80px; /* Maakt ruimte voor de vaste witte menubalk */
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat;
}

.tattoo-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end; /* Duwt de inhoud volledig naar rechts */
}

.tattoo-hero-content {
    max-width: 650px; 
}

.billboard-wrap h1 {
    font-family: "Rozha One";
    font-size: 110px;
    line-height: 95%;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    margin-bottom: 20px;
    letter-spacing: 2px;
    color: #ffffff;
}

.billboard-wrap p {
    font-weight: 300;
    font-size: 20px;
    line-height: 200%;
    letter-spacing: 0.02em;
    color: #cccccc;
    margin-bottom: 40px;
    font-family: 'Raleway', sans-serif;
}

/* Minimalistische knop met pijltje */
.btn-void {
    border: 1px solid #ffffff; 
    color: #ffffff;
    padding: 12px 35px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-void:hover {
    background-color: #ffffff;
    color: #111111;
}







/* -------------------------------------------------------------
   My Story Sectie Styling (met Text Clip Effect)
   ------------------------------------------------------------- */

/* De hoofdsectie met ademruimte rondom */
.tattoo-story-section {
    width: 100%;
    padding: 164px 0;
    background-color: #ffffff;
}

/* De container die de twee helften netjes naast elkaar zet */
.tattoo-story-container {
    max-width: 1200px; /* Mooie standaard breedte zodat het strak oogt */
    margin: 0 auto;
    display: flex;
    align-items: flex-start; /* Zorgt dat tekst en afbeelding direct bovenaan uitlijnen */
    gap: 80px; /* Ruimte tussen de afbeelding en de tekstkolom */
    padding: 0 20px;
}

/* Linkerkant: De afbeelding container */
.story-visual-box {
    flex: 45; /* Geeft beide kolommen een mooie, gelijke verdeling */
}

/* De afbeelding sluit nu naadloos aan zonder loze witruimte */
h1, h2, h3, h4, h5, h6 {
  position: relative;
  font-weight: 400;
  margin: 0px;
    margin-bottom: 0px;
  background: none;
  line-height: 104%;
  letter-spacing: 0.03em;
  font-family: 'Oswald', sans-serif;
}

.story-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Rechterkant: De complete tekstkolom */
.story-content-box {
    flex: 55;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* De 'MY STORY:' titel */
.story-content-box h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 85px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.9; /* Sluit net zo strak aan als op je foto */
    margin: 0 0 30px 0; /* Verwijdert de padding-top die de titel omlaag duwde */
    letter-spacing: 1px;
    color: #000000;
    letter-spacing: 2.55px;
    padding-top: 90px;
}

/* De tekstparagrafen (De dubbele 15% padding is hier weggehaald) */
.story-text {
    margin-bottom: 40px;
    padding-top: 40px;
}

.story-text p {
    color: #777777; /* Subtiel grijze kleur zoals in het voorbeeld */
    margin: 0 0 20px 0;
    padding-left: 90px; /* Duwt de tekst netjes iets naar binnen ten opzichte van de titel */
    font-size: 18px;
    line-height: 187%;
    font-weight: 400;
    color: #555;
    font-family: 'Raleway', sans-serif;
}

/* De 'Know More' link */
.story-link {
    font-family: 'Impact', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #111111;
    text-decoration: none;
    transition: opacity 0.2s ease;
    display: inline-block;
    padding-left: 90px; /* Zorgt dat de link op dezelfde verticale lijn staat als de tekst */
}

.story-link:hover {
    opacity: 0.6;
}

/* Responsive regels voor mobiel en tablet */
@media (max-width: 900px) {
    .tattoo-story-container {
        flex-direction: column; /* Zet de kolommen netjes onder elkaar op mobiel */
        gap: 40px;
    }
    
    .story-text p, 
    .story-link {
        padding-left: 0; /* Reset de inspringing op mobiele schermen */
    }
}

/* ==========================================================================
   TATTOO ARTICLES SECTIE (Desktop Base)
   ========================================================================== */
.tattoo-articles-section {
    padding: 120px 0; /* Ruime padding boven/onder, zijruimte regelen we via de container */
    background-color: #F9F9F9;
    color: #111111;
}

.tattoo-articles-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px; /* Dit zorgt voor een veilige, strakke zijruimte op desktop */
}

.tattoo-articles-header {
    margin-bottom: 60px;
}

.tattoo-articles-header h2 {
    font-family: 'Oswald', sans-serif; /* Omgezet naar Oswald voor consistentie */
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tattoo-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.tattoo-article-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tattoo-article-image-placeholder {
    width: 100%;
    height: 250px;
    background-color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 40px;
}

.tattoo-article-card h3 {
    font-family: 'Oswald', sans-serif; /* Ook de titels in Oswald voor die premium look */
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.tattoo-article-card h3 a {
    color: #111111;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.tattoo-article-card h3 a:hover {
    opacity: 0.7;
}

.tattoo-article-date {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Zorgt dat de afbeelding-container de juiste verhoudingen behoudt */
.tattoo-article-image-container {
    width: 100%;
    height: 250px;
    overflow: hidden; /* Snijdt uitstekende delen van de foto netjes af */
    background-color: #111111;
}

/* De daadwerkelijke geüploade foto strak trekken */
.tattoo-article-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt dat de foto niet vervormt of uitrekt, maar vult zoals een achtergrond */
    display: block;
    transition: transform 0.4s ease; /* Voorbereiding voor een mooi hover-effect */
}

/* Subtiel premium effect: foto zoomt een klein beetje in als je de kaart hovert */
.tattoo-article-card:hover .tattoo-article-img {
    transform: scale(1.05);
}

/* Zorgt dat de container/kader de perfecte brede 16:9 verhouding krijgt */
.tattoo-article-image-placeholder,
.tattoo-article-image-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* Dit maakt het kader direct rechthoekig zoals in het voorbeeld */
    height: auto; /* Overschrijft de harde 250px hoogte */
    background-color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 40px;
    overflow: hidden; /* Snijdt geüploade foto's netjes af binnen het kader */
}


/* ==========================================================================
   RESPONSIVE REGELS VOOR MOBIEL (Tot 991px en kleiner)
   ========================================================================== */
@media (max-width: 991px) {
    /* 1. Hero aanpassingen */
    .tattoo-hero-container {
        justify-content: center; 
        text-align: center;
        padding: 0 20px;
    }
    
    .billboard-wrap h1 { 
        font-size: 48px; 
    }
    
    .billboard-wrap p { 
        font-size: 16px; 
    }

    /* 2. Articles Sectie Mobiel herstel (GEEN HORIZONTALE SCROLL MEER) */
    .tattoo-articles-section {
        padding: 80px 0; /* Compactere padding boven en onder */
    }

    .tattoo-articles-container {
        padding: 0 20px; /* Veilige mobiele marge aan de zijkanten */
    }

    .tattoo-articles-header {
        margin-bottom: 40px;
        text-align: center; /* Titels netjes centreren op mobiel */
    }

    .tattoo-articles-header h2 {
        font-size: 36px; /* Iets compacter op mobiel */
    }

    /* Grid dwingen naar 1 kolom op smalle schermen */
    .tattoo-articles-grid {
        grid-template-columns: 1fr; 
        gap: 30px;
    }

    .tattoo-article-image-placeholder {
        height: 200px; /* Iets lagere placeholders op mobiel */
    }
}


/* ==========================================================================
   TATTOO GALLERY SECTIE (Jouw Custom Grid Versie)
   ========================================================================== */
.tattoo-gallery-section {
    padding: 164px 0;
    background-color: #F9F9F9;
    color: #111111;
}

.tattoo-gallery-container {
    max-width: 1900px;
    margin: 0 auto;
    padding: 0; /* Sluit naadloos aan op de 1200px randen */
}

/* De header kop (Oswald) */
.tattoo-gallery-header {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 60px;
}

.tattoo-gallery-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 85px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.9;
    margin: 0;
    letter-spacing: 2.55px;
}

/* Jouw unieke Grid, strakgetrokken voor je thema */
.tattoo-gallery-grid-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 gelijke kolommen */
    gap: 15px;                            /* Strakke witruimte tussen de items */
    width: 100%;                          
                     /* Geeft de rows een perfecte hoogte-verhouding op desktop */
}

/* Basis voor de fotokaders */
.gallery-item-v2 {
    background-color: #000000; /* Zwarte achtergrond voor de chique donkere hover */
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    background-color:  #3bbced;
}

/* Zorg dat de afbeeldingen netjes hun vak vullen zonder te vervormen */
.gallery-item-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

/* Hover-effect: foto zoomt een fractie in en wordt heel chique een klein beetje donkerder */
.gallery-item-v2:hover img {
    opacity: 0.85;
    cursor: pointer; 
    transform: scale(1.03);
}

/* --- JOUW EXACTE COÖRDINATEN --- */
.tattoo-gallery-grid-v2 .item-1 { grid-column: 1/2; grid-row: 1/3; }
.tattoo-gallery-grid-v2 .item-2 { grid-column: 2/3; grid-row: 1/4; }
.tattoo-gallery-grid-v2 .item-3 { grid-column: 3/4; grid-row: 1/3; }
.tattoo-gallery-grid-v2 .item-4 { grid-column: 4/5; grid-row: 1/4; }
.tattoo-gallery-grid-v2 .item-5 { grid-column: 1/2; grid-row: 3/7; }
.tattoo-gallery-grid-v2 .item-6 { grid-column: 2/3; grid-row: 4/7; }
.tattoo-gallery-grid-v2 .item-7 { grid-column: 3/4; grid-row: 3/7; }
.tattoo-gallery-grid-v2 .item-8 { grid-column: 4/5; grid-row: 4/7; }

/* -------------------------------------------------------------
   Knoppen & Responsiveness (Mobiel herstel)
   ------------------------------------------------------------- */
.tattoo-gallery-footer {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

.btn-gallery-view {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    background-color: #111111;
    padding: 18px 45px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-gallery-view:hover {
    background-color: #333333;
}

/* Schermbeveiliging voor kleinere monitors */
@media (max-width: 1200px) {
    .tattoo-gallery-container { padding: 0 20px; }
}



/* --- RESPONSIVE VOOR KLEINE SCHERMEN --- */
@media (max-width: 768px) {
    .tattoo-gallery-grid-v2 {
        grid-template-columns: repeat(2, 1fr); 
        aspect-ratio: auto;                     
        height: auto;
    }

    .tattoo-gallery-grid-v2 .item-1 { grid-column: 1/2; grid-row: 1/3; }
    .tattoo-gallery-grid-v2 .item-2 { grid-column: 2/3; grid-row: 1/4; }
    .tattoo-gallery-grid-v2 .item-5 { grid-column: 1/2; grid-row: 3/7; }
    .tattoo-gallery-grid-v2 .item-6 { grid-column: 2/3; grid-row: 4/7; }

    .tattoo-gallery-grid-v2 .item-3 { grid-column: 1/2; grid-row: 7/9; }   
    .tattoo-gallery-grid-v2 .item-4 { grid-column: 2/3; grid-row: 7/10; }  
    .tattoo-gallery-grid-v2 .item-7 { grid-column: 1/2; grid-row: 9/13; }  
    .tattoo-gallery-grid-v2 .item-8 { grid-column: 2/3; grid-row: 10/13; } 
}

/* ==========================================================================
   SKILLS & TESTIMONIAL SECTIE
   ========================================================================== */
.tattoo-skills-testimonial-section {
    padding: 164px 0;
    background-color: #ffffff;
    color: #111111;
}

.tattoo-skills-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* -------------------------------------------------------------
   SKILLS & TESTIMONIAL 1. De Cirkel Statistieken
   ------------------------------------------------------------- */
.skills-circle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 120px; /* Ruimte tussen de cirkels en de review */
    text-align: center;
}

.circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* De vlijmscherpe, dubbele cirkel-look uit het voorbeeld */
.circle-visual {
    width: 140px;
    height: 140px;
    border: 1px solid #f1f5f9; /* Subtiele buitenring */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circle-visual::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid #e2e8f0; /* Strakkere binnenring */
    border-radius: 50%;
    z-index: 1;
}

.circle-percentage {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0px;
    color: #111111;
    z-index: 2;
}

.circle-label {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #111111;
}

/* -------------------------------------------------------------
   SKILLS & TESTIMONIAL 2. De Minimalistische Testimonial Box
   ------------------------------------------------------------- */
/* Zorg dat de wrapper de basis wordt voor de positionering */
.testimonial-wrapper {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    position: relative;
    padding-bottom: 60px; /* Extra ruimte aan de onderkant voor de vierkantjes */
}

/* Het gigantische, lichte aanhalingsteken links */
.testimonial-quote-icon {
    font-family: 'Georgia', serif;
    font-size: 140px;
    line-height: 0.7;
    color: #f1f5f9; /* Hele lichte grijstint zodat de tekst leesbaar blijft */
    user-select: none;
    margin-top: -10px;
}

.testimonial-content-box {
    flex: 1;
}

.testimonial-text {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #222222;
    margin: 0 0 35px 0;
}

/* Meta info onderaan (Auteur en navigatie) */
.testimonial-meta {
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 5px;
}

.testimonial-author {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111111;
    margin-right: 6px;
}

.testimonial-role {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #888888;
}

.testimonial-role::before {
    content: '|';
    margin-right: 8px;
    color: #dddddd;
}

/* De strakke navigatiepijlen rechts */
.testimonial-nav-arrows {
    margin-left: auto; /* Duwt de pijlen helemaal naar de rechterkant */
    display: flex;
    gap: 15px;
}

.nav-arrow {
    background: none;
    border: none;
    font-size: 20px;
    color: #aaaaaa;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.nav-arrow:hover {
    color: #111111;
}

.arrow-left:hover { transform: translateX(-3px); }
.arrow-right:hover { transform: translateX(3px); }

/* Zorg dat de basisstand vloeiend animeert */
.testimonial-content-box {
    flex: 1;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* De tijdelijke klassen die JS gebruikt om de tekst te verschuiven */
.testimonial-slide-left {
    transform: translateX(-30px); /* Klaarzetten aan de linkerkant */
    opacity: 0;
}

.testimonial-slide-right {
    transform: translateX(30px); /* Klaarzetten aan de rechterkant */
    opacity: 0;
}

/* -------------------------------------------------------------
   Minimalistische Vierkante Pagina-indicatoren (Dots)
   ------------------------------------------------------------- */
.testimonial-dots {
    display: flex;
    gap: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* De magische truc voor absolute centrering */
    z-index: 20; /* Zorgt dat ze altijd bovenop liggen en klikbaar blijven */
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    background-color: transparent;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    padding: 0;
}

.testimonial-dot.is-active {
    background-color: #111111;
    border-color: #111111;
}

.testimonial-dot:hover {
    border-color: #111111;
}

/* Mobiele uitlijning: centreer de vierkantjes op telefoons */
@media (max-width: 991px) {
    .testimonial-dots {
        justify-content: center;
        margin-bottom: 20px;
    }
}


/* ==========================================================================
   SKILLS & TESTIMONIAL - RESPONSIVE (Mobiel)
   ========================================================================== */
@media (max-width: 991px) {
    .tattoo-skills-testimonial-section {
        padding: 80px 0;
    }
    
    .tattoo-skills-container {
        padding: 0 20px;
    }

    /* Cirkels naar 2x2 grid op tablets */
    .skills-circle-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-bottom: 80px;
    }

    .testimonial-wrapper {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .testimonial-quote-icon {
        font-size: 90px;
        margin: 0 auto;
    }

    .testimonial-text {
        font-size: 17px;
    }

    .testimonial-meta {
        flex-direction: column;
        gap: 10px;
    }

    .testimonial-role::before {
        display: none;
    }

    .testimonial-nav-arrows {
        margin: 15px auto 0 auto; /* Centreert de pijlen netjes op mobiel */
    }
}

@media (max-width: 480px) {
    /* Alles strak onder elkaar op telefoons */
    .skills-circle-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   VIDEO BANNER / CTA SECTIE 
   ========================================================================== */
.tattoo-video-banner-section {
    padding: 180px 0; /* Diepe padding voor een monumentale look */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:scroll; /* Creëert een subtiel, luxe parallax effect tijdens het scrollen */
    width: 100%;
    color: #ffffff;
}

.tattoo-video-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.video-content-box {
    max-width: 800px; /* Houdt de tekstregels mooi compact */
}

/* 1. De Quote Typografie (Oswald of een serif font afhankelijk van je smaak, hier strak afgesteld) */
.video-content-box h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 45px 0;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Zorgt voor perfecte leesbaarheid op elke foto */
}

/* 2. De "Watch It Now" Knop Base */
.video-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 20px; /* Iets meer ruimte tussen de dubbele cirkel en de tekst */
    text-decoration: none;
    color: #ffffff;
    transition: color 0.3s ease;
}

/* De ronde witte binnencirkel van de knop */
.play-icon-wrap {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111; /* Zwarte speelpijl */
    position: relative; /* Absoluut noodzakelijk voor de buitenring */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* DE NIEUWE BUITENRING: Exact volgens het voorbeeld */
.play-icon-wrap::after {
    content: '';
    position: absolute;
    /* We zetten de ring met negatieve pixels strak buiten de witte cirkel */
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 1px solid rgba(255, 255, 255, 0.4); /* Ragdunne, semi-transparante witte lijn */
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease;
}

/* De SVG speelpijl binnen de cirkel */
.play-icon-wrap svg {
    width: 24px;
    height: 24px;
    margin-left: 2px; /* Mathematische correctie om de pijl optisch perfect in het midden te zetten */
}

.video-play-text {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Hover-animaties voor de knop */
.video-play-btn:hover .play-icon-wrap {
    transform: scale(1.1); /* Cirkel popt subtiel naar voren */
    background-color: #e2e8f0;
}

.video-play-btn:hover {
    color: #e2e8f0;
}

/* ==========================================================================
   RESPONSIVE (Mobiel)
   ========================================================================== */
@media (max-width: 991px) {
    .tattoo-video-banner-section {
        padding: 120px 0;
        background-attachment: scroll; /* Parallax uitschakelen op mobiel voor betere performance */
    }
    
    .tattoo-video-container {
        padding: 0 20px;
    }

    .video-content-box h2 {
        font-size: 28px; /* Compactere tekst op tablets/telefoons */
        line-height: 1.4;
    }
    
    .play-icon-wrap {
        width: 50px;
        height: 50px;
    }
    
    .play-icon-wrap svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   VIDEO BANNER / CTA SECTIE END
   ========================================================================== */