:root {
       --sp-wit: #FFFFDD;
       --sp-roze: #FF8D91;
       --sp-rood: #FF4C3A;
       --sp-blauw: #00FFFF;
       --sp-dblauw: #261D63;
       --sp-lblauw: #E8F4FD;
       --bs-body-bg: #6D44EE;
   }

   body {
       font-family: "Ubuntu", sans-serif;
       font-weight: 400;
       font-style: normal;
       color: var(--sp-wit);
       font-size: 1.125rem;
   }

   body p {
       line-height: 2rem;
   }

   h1,
   h2,
   h3,
   h4,
   .h1,
   .h2,
   .h3,
   .h4 {
       font-family: "Passion One", sans-serif;
       font-weight: 400;
       font-style: normal;
   }


   h1 {
       font-size: clamp(1.625rem, 4vw + 1rem, 4rem);
   }

   li.nav-item{
    font-family: "Passion One", sans-serif;
    font-size: 1.425rem;
    text-transform: uppercase;
   }

    li.nav-item a {
        color:#ffd;
        text-decoration: none;
    }


   .rotate {
       transform: rotate(-7deg);
   }

   h2.h1.rotate {
       font-size: clamp(1.625rem, 4vw + 1rem, 4rem);
       /* max-width: 480px; */

   }

   h2.h1.rotate::after {
       background: url('data:image/svg+xml, <svg width="84" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="-17.32 -17.39 122.24 122.29"><path d="M79.24 72.2801C73.09 78.4001 66.34 82.59 57.78 84.51C48.2303 86.6202 38.2566 85.6318 29.3069 81.6883C20.3571 77.7448 12.8972 71.0515 8.01 62.5801C-0.859999 47.0501 -0.120012 26.7 11.31 12.68C16.39 6.45997 21.56 2.17994 30.02 1.89994H31.02C35.0062 1.98012 38.8938 3.15357 42.2588 5.29203C45.6238 7.43049 48.3368 10.452 50.102 14.0269C51.8673 17.6018 52.617 21.5927 52.2693 25.5645C51.9215 29.5363 50.4897 33.3364 48.13 36.5501C47.47 37.4801 46.48 38.17 46.84 39.46C46.9633 39.8311 47.1928 40.1579 47.5 40.3999C49.01 41.5099 50.29 39.81 51.5 38.99C55.9706 35.9071 61.4324 34.6074 66.8125 35.346C72.1926 36.0846 77.1021 38.8081 80.5765 42.9817C84.051 47.1553 85.8392 52.4773 85.5901 57.9021C85.3409 63.327 83.0724 68.4625 79.23 72.3001L79.24 72.2801Z" stroke="%23FF4C3A" stroke-width="3.50494" stroke-miterlimit="10"></path><path d="M47.86 75.68C41.5334 75.6875 35.3165 74.0278 29.8356 70.8677C24.3547 67.7077 19.8034 63.159 16.64 57.68C9.56004 45.29 10.53 29.38 19.01 18.99C23.3 13.73 26.0101 11.9899 30.3501 11.8599H30.9701C33.1305 11.9222 35.2326 12.5753 37.0481 13.7481C38.8636 14.9208 40.323 16.5685 41.2681 18.5122C42.2132 20.456 42.6077 22.6216 42.4088 24.7737C42.21 26.9259 41.4253 28.9824 40.14 30.72L40.07 30.8001C37.12 34.3301 36.19 38.15 37.31 42.16C38.0338 44.6702 39.5622 46.8731 41.6601 48.43C43.6549 49.9136 46.074 50.7165 48.5601 50.72C51.7433 50.6383 54.7871 49.3972 57.12 47.23L57.2901 47.0999C59.2237 45.792 61.5056 45.0953 63.84 45.0999C66.1809 45.0931 68.4712 45.7817 70.4203 47.0782C72.3694 48.3746 73.8897 50.2208 74.7884 52.3824C75.687 54.5439 75.9236 56.9236 75.4682 59.2198C75.0127 61.516 73.8857 63.6252 72.23 65.2801C66.98 70.5001 61.85 73.4599 55.6 74.8599C53.0581 75.4176 50.4624 75.6927 47.86 75.68Z" stroke="%23FF4C3A" stroke-width="3.50494" stroke-miterlimit="10"></path><path d="M65.2199 58.2C61.3299 62.07 57.8 64.1399 53.43 65.1299C51.6014 65.5374 49.7334 65.7421 47.86 65.74C43.2836 65.7529 38.7849 64.5576 34.8184 62.2749C30.8519 59.9923 27.5582 56.7033 25.27 52.74C20.27 43.98 20.87 32.42 26.71 25.26C29.19 22.21 30.05 21.8599 30.08 21.8399C30.2745 21.8022 30.4719 21.7823 30.67 21.7801" stroke="%23FF4C3A" stroke-width="3.50494" stroke-miterlimit="10"></path></svg>');
       content: '';
       position: absolute;
       top: 10px;
       right: -90px;
       height: 120px;
       width: 120px;
       background-size: 135px;
   }


   h2 {
       font-size: clamp(1.125rem, 4vw + 0.5rem, 3rem);
   }

   h3 {
       font-size: clamp(1.5rem, 2vw + 0.5rem, 2.2rem);
   }

   .passion-one-regular {
       font-family: "Passion One", sans-serif;
       font-weight: 400;
       font-style: normal;
   }

   .ubuntu-regular {
       font-family: "Ubuntu", sans-serif;
       font-weight: 400;
       font-style: normal;
   }

   blockquote {
       position: relative;
       max-height: 280px !important;
   }


   blockquote p.h1 {
       font-size: clamp(1.125rem, 4vw + 0.5rem, 3rem);

   }

   blockquote::before {
       background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0.02 0 73.73 55.3"><g clip-path="url(%23clip0_428_196)"><path d="M64.2302 1C62.0919 0.179493 59.7927 -0.134609 57.5128 0.0822778C55.2328 0.299165 53.034 1.04117 51.0889 2.25012C49.1437 3.45908 47.5049 5.1022 46.3011 7.05054C45.0973 8.99888 44.3611 11.1995 44.1502 13.48L41.1502 44.9401C41.0386 46.1178 41.3153 47.2996 41.9383 48.3053C42.5612 49.311 43.496 50.0853 44.6002 50.51L45.7302 50.9501C46.8359 51.3756 48.0507 51.4269 49.1885 51.0964C50.3263 50.7659 51.3244 50.0717 52.0302 49.12L70.8102 23.79C72.1762 21.9484 73.0979 19.8158 73.5032 17.559C73.9085 15.3021 73.7863 12.9821 73.1463 10.7803C72.5063 8.57845 71.3657 6.55441 69.8138 4.86646C68.2619 3.1785 66.3406 1.87238 64.2002 1.05005" fill="%23FF8D91"></path><path d="M23.13 4.97998C20.9918 4.15947 18.6926 3.84537 16.4126 4.06226C14.1327 4.27915 11.9339 5.02115 9.98876 6.2301C8.04359 7.43906 6.40485 9.08218 5.20101 11.0305C3.99718 12.9789 3.26096 15.1796 3.05006 17.4601L0.0500591 48.92C-0.0615456 50.0978 0.215223 51.2797 0.838145 52.2854C1.46107 53.2911 2.39593 54.0653 3.50006 54.49L4.64006 54.9301C5.74456 55.3531 6.95713 55.4033 8.0928 55.0729C9.22847 54.7425 10.2249 54.0497 10.93 53.1001L29.76 27.7201C31.1264 25.8792 32.0485 23.7472 32.4544 21.4908C32.8604 19.2345 32.7391 16.9149 32.1001 14.7131C31.4611 12.5114 30.3216 10.4872 28.7708 8.79883C27.2199 7.11041 25.2997 5.80337 23.16 4.97998" fill="%23FF8D91"></path></g><defs><clipPath id="clip0_428_196"><rect width="73.74" height="55.29" fill="white"></rect></clipPath></defs></svg>');
       content: "";
       position: absolute;
       top: 0;
       left: 12%;
       width: 80px;
       height: 60px;
       z-index: -1;
       background-size: 80px;
   }

   blockquote::after {
       background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0.02 0 73.73 55.3"><g clip-path="url(%23clip0_428_196)"><path d="M64.2302 1C62.0919 0.179493 59.7927 -0.134609 57.5128 0.0822778C55.2328 0.299165 53.034 1.04117 51.0889 2.25012C49.1437 3.45908 47.5049 5.1022 46.3011 7.05054C45.0973 8.99888 44.3611 11.1995 44.1502 13.48L41.1502 44.9401C41.0386 46.1178 41.3153 47.2996 41.9383 48.3053C42.5612 49.311 43.496 50.0853 44.6002 50.51L45.7302 50.9501C46.8359 51.3756 48.0507 51.4269 49.1885 51.0964C50.3263 50.7659 51.3244 50.0717 52.0302 49.12L70.8102 23.79C72.1762 21.9484 73.0979 19.8158 73.5032 17.559C73.9085 15.3021 73.7863 12.9821 73.1463 10.7803C72.5063 8.57845 71.3657 6.55441 69.8138 4.86646C68.2619 3.1785 66.3406 1.87238 64.2002 1.05005" fill="%23FF8D91"></path><path d="M23.13 4.97998C20.9918 4.15947 18.6926 3.84537 16.4126 4.06226C14.1327 4.27915 11.9339 5.02115 9.98876 6.2301C8.04359 7.43906 6.40485 9.08218 5.20101 11.0305C3.99718 12.9789 3.26096 15.1796 3.05006 17.4601L0.0500591 48.92C-0.0615456 50.0978 0.215223 51.2797 0.838145 52.2854C1.46107 53.2911 2.39593 54.0653 3.50006 54.49L4.64006 54.9301C5.74456 55.3531 6.95713 55.4033 8.0928 55.0729C9.22847 54.7425 10.2249 54.0497 10.93 53.1001L29.76 27.7201C31.1264 25.8792 32.0485 23.7472 32.4544 21.4908C32.8604 19.2345 32.7391 16.9149 32.1001 14.7131C31.4611 12.5114 30.3216 10.4872 28.7708 8.79883C27.2199 7.11041 25.2997 5.80337 23.16 4.97998" fill="%23FF8D91"></path></g><defs><clipPath id="clip0_428_196"><rect width="73.74" height="55.29" fill="white"></rect></clipPath></defs></svg>');
       content: "";
       position: absolute;
       right: 12%;
       bottom: 0;
       width: 80px;
       height: 60px;
       z-index: -1;
       background-size: 80px;
       transform: rotate(180deg);
   }

   .sp-wit {
       color: var(--sp-wit);
   }

   .sp-rood {
       color: var(--sp-rood);
   }

   .sp-roze {
       color: var(--sp-roze);
   }

   .sp-blauw {
       color: var(--sp-blauw);
   }

   .sp-dblauw {
       color: var(--bs-body-bg);
   }

   .bg-dblauw {
       background: var(--sp-dblauw);
   }

   a.cta {
       color: var(--bs-body-bg);
       background: var(--sp-wit);
       padding: 0.585rem 2rem;
       border-radius: 2rem;
       text-decoration: none;
   }

   .bottom-20 {
       bottom: 20%;
   }

   .bottom-20 h2 {
       text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
   }

   .copyright {
       color: #fff;
       font-size: 14px;

   }

   .copyright a {
       color: #fff;
       text-decoration: none;
   }

   .copyright a:hover {
       text-decoration: underline;
   }

   .cta-buttons .luisteren a.cta {
       background: var(--bs-body-bg);
       color: var(--sp-blauw);
       gap: 1rem;
   }

   ul.nav {
       font-size: 1.625rem;
       gap: 0 2rem;
       text-transform: uppercase;
   }

   ul.nav li {
       max-width: 130px;
       line-height: 1;
   }

   ul.nav li a {
       color: var(--sp-wit);
       text-decoration: none;
   }

   ul.nav li:first-child a {
       color: var(--sp-roze);
   }

   .transition,
   .logo img,
   .logo,
   .cta {
       -webkit-transition: all 0.2s;
       transition: all 0.2s
   }

   .svg-cta-container {
       position: relative;
       /* max-width: 500px; */
       /* Gelijk aan je SVG-breedte */
       /* margin: 0 auto; */
   }

   .svg-cta-bg {
       width: 100%;
       height: auto;
       display: block;
   }

   .cta-buttons {
       position: absolute;
       top: 50%;
       right: 30%;
       transform: translateY(-50%);
       font-size: 1rem;
       background: #FFD;
       border-radius: 10px;
       padding: 10px 0 5px;
   }

   .icon-pattern {
       position: relative;
       margin-top: -130px;
       width: 100%;
       display: block;
   }

   .icon-pattern::after {
       background-image: url('../img/icon-pattern.svg');
       background-repeat: repeat;
       background-size: 300px;
       height: 500px;
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       /* Alternatief voor width:100% */
       width: 100vw;
       /* Optie B: viewport breedte */
       margin-left: calc(-50vw + 50%);
       /* Centreren bij viewport breedte */
       z-index: -1;
   }

   .animated-pattern {
       position: relative;
       margin-top: -130px;
       width: 100%;
       display: block;
       overflow: hidden;
       /* Zorgt dat het scrollende patroon niet zichtbaar is buiten de container */
   }

   .animated-pattern {
       height: 560px;
   }

   .animated-pattern.twee {
       height: 350px;
       position: absolute;
       z-index: 0;
       margin-top: -220px;
   }

   .animated-pattern.twee::after {
       background-size: 290px auto;
       opacity: 0.5;
       animation: scrollPatternReverse 220s linear infinite;
   }

   .navbar-toggler {
       background: #ffd;
       border: none;
   }

   #offcanvasNavbar {
    background:var(--sp-rood);
    color:#fff;
   }

   /* Nieuwe keyframes voor tegengestelde richting */
   @keyframes scrollPatternReverse {
       0% {
           transform: translateX(-66.6%);
       }

       100% {
           transform: translateX(0);
       }
   }

   .animated-pattern::after {
       background-image: url('../img/icon-pattern.svg');
       background-repeat: repeat;
       background-size: 300px auto;
       height: 100%;
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 300%;
       z-index: -1;
       animation: scrollPattern 240s linear infinite;
       will-change: transform;
   }

   @keyframes scrollPattern {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-66.6%);
           /* Schuift 2 van de 3 patronen */
       }
   }



   .sponsors {
       background: var(--sp-lblauw);
       color: var(--sp-dblauw);
   }

   .sponsors h2 {
       color: var(--sp-dblauw);
   }

   .bg-roze {
       background: var(--sp-roze);
   }

   .logo.skutsjepodcast {
       width: 250px;
   }

   .logo {
       background: #fff;
       padding: 20px;
       box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
       display: flex;
       justify-content: center;
       align-items: center;
       border-radius: 1rem;
       height: 100%;
   }

   .col-lg-2:nth-child(even) .logo,
   .col-lg-2:nth-child(odd):hover .logo {
       transform: rotate(2deg);
   }

   .col-lg-2:nth-child(odd) .logo,
   .col-lg-2:nth-child(even):hover .logo {
       transform: rotate(-2deg);
   }


   .logo img {
       max-height: 120px;
       width: auto;
       filter: grayscale(1);
   }

   .logo:hover img {
       filter: grayscale(0);
   }

   .socials ul {
       list-style: none;
       padding: 0;
       margin: 0;
   }

   .socials ul li {
       margin: 0 5px;
   }

   .socials ul li:first-child {
       margin-left: 0;
   }

   .socials ul li:last-child {
       margin-right: 0;
   }

   .socials svg {
       width: 65px;
   }

   a.cta.spnsor {
       background: var(--sp-rood);
       color: var(--sp-dblauw);
       transform: translateY(20px);
       position: relative;
       display: inline-block;
       top: 50px;
   }


   @media (min-width:768px) {
       .over-ons {
           margin-top: -160px;
       }
   }

   @media (min-width:1200px) {}

   /* Tablets */
   @media (max-width: 1024px) {}

   @media (max-width: 575.98px) {
       .cta-buttons {
           background: none;
           text-align: center;
       }

       .animated-pattern {
           height: 240px;
       }

       .cta-buttons h2 {
           background: #FFD;
           display: inline-block;
           padding: 2px;
           border-radius: 4px;
       }

       .cta-buttons a.cta {
           border: 2px solid #ffd;
       }
   }

   /* Mobiel */
   @media (max-width: 767.98px) {

       h2.h1.rotate::after {
           position: absolute;
           top: 34px;
           right: 25px;
           height: 27px;
           width: 26px;
           background-size: 30px;
       }

       .animated-pattern {
           margin-top: 0px;
       }
   }

   /* Extra kleine schermen */
   @media (max-width: 480px) {}


   /* Animation-specific styles for Skutsje Podcast */

   /* General animation classes */
   .gsap-reveal {
       opacity: 0;
   }

   .gsap-reveal-stagger {
       opacity: 0;
   }

   /* Hover effects enhancement */
   .cta {
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .cta:hover {
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }

   /* Social icons hover enhancement */
   .socials svg {
       transition: transform 0.3s ease, filter 0.3s ease;
   }

   .socials svg:hover {
       filter: drop-shadow(0 0 5px var(--sp-blauw));
   }

   /* Logo animations */
   .logo {
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   /* Blockquote animation enhancement */
   blockquote {
       transition: transform 0.3s ease;
   }

   blockquote:nth-child(1) {
       color: var(--sp-blauw);
       transform: rotate(-7deg);
   }

   blockquote:nth-child(2) {
       color: var(--sp-roze);
       transform: rotate(7deg);
   }

   blockquote:nth-child(2) .h4 {
       color: var(--sp-blauw);
   }

   blockquote:nth-child(2)::after,
   blockquote:nth-child(2)::before {
       background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0.02 0 73.73 55.3"><g clip-path="url(%23clip0_428_196)"><path d="M64.2302 1C62.0919 0.179493 59.7927 -0.134609 57.5128 0.0822778C55.2328 0.299165 53.034 1.04117 51.0889 2.25012C49.1437 3.45908 47.5049 5.1022 46.3011 7.05054C45.0973 8.99888 44.3611 11.1995 44.1502 13.48L41.1502 44.9401C41.0386 46.1178 41.3153 47.2996 41.9383 48.3053C42.5612 49.311 43.496 50.0853 44.6002 50.51L45.7302 50.9501C46.8359 51.3756 48.0507 51.4269 49.1885 51.0964C50.3263 50.7659 51.3244 50.0717 52.0302 49.12L70.8102 23.79C72.1762 21.9484 73.0979 19.8158 73.5032 17.559C73.9085 15.3021 73.7863 12.9821 73.1463 10.7803C72.5063 8.57845 71.3657 6.55441 69.8138 4.86646C68.2619 3.1785 66.3406 1.87238 64.2002 1.05005" fill="%2300FFFF"></path><path d="M23.13 4.97998C20.9918 4.15947 18.6926 3.84537 16.4126 4.06226C14.1327 4.27915 11.9339 5.02115 9.98876 6.2301C8.04359 7.43906 6.40485 9.08218 5.20101 11.0305C3.99718 12.9789 3.26096 15.1796 3.05006 17.4601L0.0500591 48.92C-0.0615456 50.0978 0.215223 51.2797 0.838145 52.2854C1.46107 53.2911 2.39593 54.0653 3.50006 54.49L4.64006 54.9301C5.74456 55.3531 6.95713 55.4033 8.0928 55.0729C9.22847 54.7425 10.2249 54.0497 10.93 53.1001L29.76 27.7201C31.1264 25.8792 32.0485 23.7472 32.4544 21.4908C32.8604 19.2345 32.7391 16.9149 32.1001 14.7131C31.4611 12.5114 30.3216 10.4872 28.7708 8.79883C27.2199 7.11041 25.2997 5.80337 23.16 4.97998" fill="%2300FFFF"></path></g><defs><clipPath id="clip0_428_196"><rect width="73.74" height="55.29" fill="white"></rect></clipPath></defs></svg>');
   }

   /* blockquote:hover {
       transform: translateY(-5px);
   } */

   /* Hero section enhancements */
   .hero {
       overflow: hidden;
   }

   .hero img {
       transition: transform 0.5s ease;
   }

   /* Animated pattern enhancements */
   .animated-pattern {
       position: relative;
   }

   /* Text animation helpers */
   .char-reveal {
       display: inline-block;
       opacity: 0;
       transform: translateY(20px);
   }

   .word-reveal {
       display: inline-block;
       opacity: 0;
       transform: translateY(20px);
   }

   /* Parallax effect helpers */
   .parallax {
       overflow: hidden;
       position: relative;
   }

   .parallax-bg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 120%;
       z-index: -1;
   }

   /* Sponsor logo hover effects */
   .logo:hover {
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }

   /* Navigation animation helpers */
   nav a {
       position: relative;
       overflow: hidden;
   }

   nav a::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 0;
       height: 2px;
       background-color: var(--sp-blauw);
       transition: width 0.3s ease;
   }

   nav a:hover::after {
       width: 100%;
   }

   /* SVG animation helpers */
   svg path {
       transition: stroke 0.3s ease, fill 0.3s ease;
   }

   /* Scroll indicator */
   .scroll-indicator {
       position: absolute;
       bottom: 30px;
       left: 50%;
       transform: translateX(-50%);
       width: 30px;
       height: 50px;
       border: 2px solid var(--sp-wit);
       border-radius: 15px;
       opacity: 0.7;
   }

   .scroll-indicator::before {
       content: '';
       position: absolute;
       top: 10px;
       left: 50%;
       width: 6px;
       height: 6px;
       margin-left: -3px;
       background-color: var(--sp-wit);
       border-radius: 50%;
       animation: scrollIndicator 2s infinite;
   }

   @keyframes scrollIndicator {
       0% {
           transform: translateY(0);
           opacity: 1;
       }

       100% {
           transform: translateY(15px);
           opacity: 0;
       }
   }

   /* Mobile optimizations */
   @media (max-width: 768px) {
       .gsap-mobile-no-animation {
           opacity: 1 !important;
           transform: none !important;
       }
   }