.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!-- 
ELEMENTOR HTML WIDGET - RenoVast KOZIJNEN PLAATSEN PAGINA PREMIUM (COMPLETE)
Gebruik dit op de /diensten/kozijnen-plaatsen pagina
UPDATE: Nieuwe afbeeldingen en geoptimaliseerde carousel
-->
<!-- SEO: Titel: Kozijnen Plaatsen | Ramen & Kozijnen | RenoVast | Focus: kozijnen plaatsen Noord-Brabant | Meta: Kozijnen plaatsen door RenoVast: plaatsen en vervangen van kozijnen en ramen in Noord-Brabant. | Featured: 2026/03/zolderraam.webp -->

<!-- SVG Icon Definition -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-kozijnen" viewBox="0 0 100 100"><rect x="15" y="20" width="70" height="60" rx="2" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M50 20 L50 80 M15 50 L85 50" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round"/></symbol>
</svg>

<!-- HERO SECTION MET PARALLAX -->
<div class="renovast-kozijnen-hero" style="background-image: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/01/achtergevel-kozijnen-vervangen-schuifpui-01.webp'); background-size: cover; background-position: center; background-attachment: fixed; position: relative; padding: 180px 0 140px; min-height: 70vh; display: flex; align-items: center; overflow: hidden;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(30, 29, 36, 0.85) 0%, rgba(30, 29, 36, 0.70) 100%);"></div>
    <div style="max-width: 1400px; margin: 0 auto; padding: 0 30px; position: relative; z-index: 2; width: 100%; text-align: center;">
        <div style="max-width: 900px; margin: 0 auto;">
            <div style="display: flex; align-items: center; justify-content: center; gap: 25px; margin-bottom: 35px; flex-wrap: wrap;">
                <img src="https://renovast-bouwservice.nl/wp-content/uploads/2026/02/Kozijnen-plaatsen.png" alt="Kozijnen plaatsen" width="90" height="90" loading="eager" style="width: 90px; height: 90px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 4px 15px rgba(126, 191, 255, 0.4));">
                <h1 class="hero-title" style="font-size: 64px; font-weight: 700; margin: 0; font-family: 'Poppins', sans-serif; text-shadow: 0 4px 20px rgba(0,0,0,0.3); color: #ffffff; line-height: 1.15;"><span class="title-line-1">Kozijnen</span><span class="title-break-mobile"><br/></span><span class="title-line-2"> Plaatsen</span></h1>
            </div>
            <div style="width: 120px; height: 4px; background: #7ebfff; margin: 0 auto 35px; border-radius: 2px; box-shadow: 0 2px 10px rgba(126, 191, 255, 0.5);"></div>
            <p style="font-size: 24px; margin-bottom: 0; opacity: 0.95; font-family: 'Poppins', sans-serif; max-width: 800px; margin-left: auto; margin-right: auto; color: #ffffff; line-height: 1.7; text-shadow: 0 2px 10px rgba(0,0,0,0.2);">Plaatsen en vervangen van kozijnen en schuifpuien voor meer licht en isolatie</p>
        </div>
    </div>
    <!-- Floating Shapes -->
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; overflow: hidden;">
        <div class="floating-shape-1" style="position: absolute; width: 200px; height: 200px; border: 2px solid rgba(126, 191, 255, 0.15); border-radius: 50%; top: 15%; left: 10%; animation: float 20s infinite ease-in-out;"></div>
        <div class="floating-shape-2" style="position: absolute; width: 150px; height: 150px; border: 2px solid rgba(126, 191, 255, 0.12); border-radius: 50%; bottom: 20%; right: 15%; animation: float 25s infinite ease-in-out reverse;"></div>
    </div>
</div>

<!-- INTRO SECTION -->
<div class="renovast-kozijnen-intro" style="background: #ffffff; padding: 100px 0;">
    <div style="max-width: 1400px; margin: 0 auto; padding: 0 30px;">
        <div style="max-width: 950px; margin: 0 auto; text-align: center;">
            <h2 style="font-size: 48px; font-weight: 700; color: #1E1D24; margin-bottom: 30px; font-family: 'Poppins', sans-serif; line-height: 1.2;">Wat Is Kozijnen Plaatsen?</h2>
            <div style="width: 100px; height: 4px; background: linear-gradient(90deg, #7ebfff 0%, #5a9fd4 100%); margin: 0 auto 35px; border-radius: 2px;"></div>
            <p style="font-size: 19px; color: #5E5E5E; line-height: 1.9; margin-bottom: 0; font-family: 'Poppins', sans-serif;">
                Kozijnen plaatsen omvat het plaatsen en vervangen van ramen, deuren en schuifpuien. Bij RenoVast Bouwservice zorgen wij voor een correcte plaatsing, goede isolatie en transparante afspraken.
            </p>
        </div>
    </div>
</div>

<!-- KOZIJNEN CAROUSEL SPECIAL - Alle kozijnen foto's -->
<div class="kozijnen-carousel-wrapper" style="width: 100%; max-width: 1400px; margin: 80px auto; padding: 0 20px;">
    
    <!-- Header -->
    <div style="text-align: center; margin-bottom: 50px;">
        <h2 style="font-size: clamp(32px, 5vw, 48px); font-weight: 700; color: #1E1D24; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">Kozijnen Projecten</h2>
        <div style="width: 100px; height: 4px; background: linear-gradient(90deg, #7ebfff 0%, #5a9fd4 100%); margin: 0 auto 30px; border-radius: 2px;"></div>
        <p style="font-size: clamp(16px, 2vw, 19px); color: #5E5E5E; line-height: 1.8; max-width: 800px; margin: 0 auto; font-family: 'Poppins', sans-serif;">
            Bekijk onze recente kozijnen projecten en schuifpuien
        </p>
    </div>

    <!-- Main Carousel -->
    <div class="kozijnen-carousel" id="kozijnenCarousel" style="position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); background: #ffffff;">
        
        <!-- Carousel Track -->
        <div class="carousel-track" id="kozijnenCarouselTrack" style="display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform;">
            
            <!-- Slide 1: Achtergevel Kozijnen Vervangen -->
            <div class="kozijnen-slide" style="min-width: 100%; position: relative;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
                    <div class="slide-image" style="background-image: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/01/achtergevel-kozijnen-vervangen-schuifpui-01.webp'); background-size: cover; background-position: center; border-radius: 16px 0 0 16px; min-height: 500px;"></div>
                    <div class="slide-content" style="display: flex; flex-direction: column; justify-content: center; padding: 40px; background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%); border-radius: 0 16px 16px 0;">
                        <h3 style="font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #ffffff; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">Achtergevel Kozijnen</h3>
                        <p style="font-size: clamp(16px, 1.8vw, 18px); color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 30px; font-family: 'Poppins', sans-serif;">
                            Complete achtergevel renovatie met nieuwe kozijnen en moderne schuifpui.
                        </p>
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Achtergevel</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Schuifpui</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Renovatie</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 2: Achtergevel Schuifpui -->
            <div class="kozijnen-slide" style="min-width: 100%; position: relative;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
                    <div class="slide-image" style="background-image: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/01/achtergevel-kozijnen-vervangen-schuifpui-02.webp'); background-size: cover; background-position: center; border-radius: 16px 0 0 16px; min-height: 500px;"></div>
                    <div class="slide-content" style="display: flex; flex-direction: column; justify-content: center; padding: 40px; background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%); border-radius: 0 16px 16px 0;">
                        <h3 style="font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #ffffff; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">Moderne Schuifpui</h3>
                        <p style="font-size: clamp(16px, 1.8vw, 18px); color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 30px; font-family: 'Poppins', sans-serif;">
                            Luxe schuifpui met HR++ glas voor optimale isolatie en lichtinval.
                        </p>
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">HR++ Glas</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Modern</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Licht</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 3: Kozijnen Plaatsen 1 -->
            <div class="kozijnen-slide" style="min-width: 100%; position: relative;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
                    <div class="slide-image" style="background-image: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/02/kozijnen-plaatsen1.webp'); background-size: cover; background-position: center; border-radius: 16px 0 0 16px; min-height: 500px;"></div>
                    <div class="slide-content" style="display: flex; flex-direction: column; justify-content: center; padding: 40px; background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%); border-radius: 0 16px 16px 0;">
                        <h3 style="font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #ffffff; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">Kozijnen Vervangen</h3>
                        <p style="font-size: clamp(16px, 1.8vw, 18px); color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 30px; font-family: 'Poppins', sans-serif;">
                            Vervanging van oude kozijnen door energiezuinige moderne varianten.
                        </p>
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Energiezuinig</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Modern</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Isolatie</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 4: Kozijnen Plaatsen 2 -->
            <div class="kozijnen-slide" style="min-width: 100%; position: relative;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
                    <div class="slide-image" style="background-image: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/02/kozijnen-plaatsen2.webp'); background-size: cover; background-position: center; border-radius: 16px 0 0 16px; min-height: 500px;"></div>
                    <div class="slide-content" style="display: flex; flex-direction: column; justify-content: center; padding: 40px; background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%); border-radius: 0 16px 16px 0;">
                        <h3 style="font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #ffffff; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">Voordeur Kozijnen</h3>
                        <p style="font-size: clamp(16px, 1.8vw, 18px); color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 30px; font-family: 'Poppins', sans-serif;">
                            Moderne voordeur met bijpassende kozijnen en veiligheidsbeslag.
                        </p>
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Voordeur</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Veiligheid</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Design</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 5: Zolderraam -->
            <div class="kozijnen-slide" style="min-width: 100%; position: relative;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
                    <div class="slide-image" style="background-image: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/03/zolderraam.webp'); background-size: cover; background-position: center; border-radius: 16px 0 0 16px; min-height: 500px;"></div>
                    <div class="slide-content" style="display: flex; flex-direction: column; justify-content: center; padding: 40px; background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%); border-radius: 0 16px 16px 0;">
                        <h3 style="font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #ffffff; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">Zolderraam Renovatie</h3>
                        <p style="font-size: clamp(16px, 1.8vw, 18px); color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 30px; font-family: 'Poppins', sans-serif;">
                            Zolderraam vervangen met hoogwaardige kozijnen voor optimale isolatie.
                        </p>
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Zolder</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Raam</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Isolatie</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 6: Kozijnen Plaatsen Main -->
            <div class="kozijnen-slide" style="min-width: 100%; position: relative;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
                    <div class="slide-image" style="background-image: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/02/kozijnen-plaatsen.webp'); background-size: cover; background-position: center; border-radius: 16px 0 0 16px; min-height: 500px;"></div>
                    <div class="slide-content" style="display: flex; flex-direction: column; justify-content: center; padding: 40px; background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%); border-radius: 0 16px 16px 0;">
                        <h3 style="font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #ffffff; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">Complete Kozijnen</h3>
                        <p style="font-size: clamp(16px, 1.8vw, 18px); color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 30px; font-family: 'Poppins', sans-serif;">
                            Complete kozijnen renovatie met moderne materialen en professionele afwerking.
                        </p>
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Compleet</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Professioneel</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Afwerking</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 7: Schuur Overkapping -->
            <div class="kozijnen-slide" style="min-width: 100%; position: relative;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; height: 100%;">
                    <div class="slide-image" style="background-image: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/01/schuur-overkapping-01.webp'); background-size: cover; background-position: center; border-radius: 16px 0 0 16px; min-height: 500px;"></div>
                    <div class="slide-content" style="display: flex; flex-direction: column; justify-content: center; padding: 40px; background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%); border-radius: 0 16px 16px 0;">
                        <h3 style="font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #ffffff; margin-bottom: 20px; font-family: 'Poppins', sans-serif;">Schuur Overkapping</h3>
                        <p style="font-size: clamp(16px, 1.8vw, 18px); color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 30px; font-family: 'Poppins', sans-serif;">
                            Schuur overkapping met kozijnen en moderne afwerking voor extra ruimte.
                        </p>
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Overkapping</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Schuur</span>
                            <span style="background: rgba(126, 191, 255, 0.2); color: #7ebfff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-family: 'Poppins', sans-serif;">Berging</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        
        <!-- Navigation Arrows -->
        <button class="carousel-arrow carousel-prev" id="kozijnenCarouselPrev" aria-label="Vorige" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: all 0.3s ease; z-index: 10;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1E1D24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M15 18l-6-6 6-6"/>
            </svg>
        </button>
        
        <button class="carousel-arrow carousel-next" id="kozijnenCarouselNext" aria-label="Volgende" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: all 0.3s ease; z-index: 10;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1E1D24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 18l6-6-6-6"/>
            </svg>
        </button>
        
        <!-- Progress Indicators -->
        <div class="carousel-indicators" id="kozijnenCarouselIndicators" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10;">
            <!-- Indicators worden dynamisch toegevoegd -->
        </div>
        
    </div>

    <!-- Mobile Swipe Hint -->
    <div class="swipe-hint" id="kozijnenSwipeHint" style="text-align: center; margin-top: 20px; opacity: 0; transition: opacity 0.3s ease;">
        <p style="font-size: 14px; color: #7ebfff; font-family: 'Poppins', sans-serif; margin: 0;">
            <span style="display: inline-block; animation: swipeHint 2s infinite;">↔ Swipe voor meer kozijnen projecten</span>
        </p>
    </div>
    
</div>

<!-- DIENSTEN DETAILS SECTION -->
<div class="renovast-kozijnen-details" style="background: #ffffff; padding: 100px 0;">
    <div style="max-width: 1400px; margin: 0 auto; padding: 0 30px;">
        <div style="max-width: 1100px; margin: 0 auto;">
            <h2 style="font-size: 48px; font-weight: 700; color: #1E1D24; margin-bottom: 20px; text-align: center; font-family: 'Poppins', sans-serif;">Wat Bieden Wij?</h2>
            <div style="width: 100px; height: 4px; background: linear-gradient(90deg, #7ebfff 0%, #5a9fd4 100%); margin: 0 auto 60px; border-radius: 2px;"></div>
            
            <div class="features-slider-wrapper" style="position: relative;">
                <div class="features-grid-container" id="features-slider" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; margin-bottom: 80px;">
                    <div class="feature-card" style="background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 45px; border-radius: 16px; border: 1px solid rgba(126, 191, 255, 0.2); box-shadow: 0 8px 30px rgba(0,0,0,0.06); transition: all 0.4s ease; position: relative; overflow: hidden;">
                    <div style="position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, #7ebfff 0%, #5a9fd4 100%);"></div>
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #7ebfff 0%, #5a9fd4 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; box-shadow: 0 6px 20px rgba(126, 191, 255, 0.3); font-size: 28px; font-weight: 700; color: #ffffff; font-family: 'Poppins', sans-serif;">★</div>
                    <h3 style="font-size: 28px; font-weight: 700; color: #1E1D24; margin-bottom: 18px; font-family: 'Poppins', sans-serif;">Kozijnen Plaatsen</h3>
                    <p style="font-size: 17px; color: #5E5E5E; line-height: 1.8; margin: 0; font-family: 'Poppins', sans-serif;">Plaatsen van nieuwe kozijnen en ramen.</p>
                </div>
                
                <div class="feature-card" style="background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 45px; border-radius: 16px; border: 1px solid rgba(126, 191, 255, 0.2); box-shadow: 0 8px 30px rgba(0,0,0,0.06); transition: all 0.4s ease; position: relative; overflow: hidden;">
                    <div style="position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, #7ebfff 0%, #5a9fd4 100%);"></div>
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #7ebfff 0%, #5a9fd4 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; box-shadow: 0 6px 20px rgba(126, 191, 255, 0.3); font-size: 28px; font-weight: 700; color: #ffffff; font-family: 'Poppins', sans-serif;">★</div>
                    <h3 style="font-size: 28px; font-weight: 700; color: #1E1D24; margin-bottom: 18px; font-family: 'Poppins', sans-serif;">Vervangen</h3>
                    <p style="font-size: 17px; color: #5E5E5E; line-height: 1.8; margin: 0; font-family: 'Poppins', sans-serif;">Vervangen van oude kozijnen door energiezuinige varianten.</p>
                </div>
                
                <div class="feature-card" style="background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 45px; border-radius: 16px; border: 1px solid rgba(126, 191, 255, 0.2); box-shadow: 0 8px 30px rgba(0,0,0,0.06); transition: all 0.4s ease; position: relative; overflow: hidden;">
                    <div style="position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, #7ebfff 0%, #5a9fd4 100%);"></div>
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #7ebfff 0%, #5a9fd4 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; box-shadow: 0 6px 20px rgba(126, 191, 255, 0.3); font-size: 28px; font-weight: 700; color: #ffffff; font-family: 'Poppins', sans-serif;">★</div>
                    <h3 style="font-size: 28px; font-weight: 700; color: #1E1D24; margin-bottom: 18px; font-family: 'Poppins', sans-serif;">Schuifpuien</h3>
                    <p style="font-size: 17px; color: #5E5E5E; line-height: 1.8; margin: 0; font-family: 'Poppins', sans-serif;">Schuifpuien en grote glaspartijen plaatsen.</p>
                </div>
                
                <div class="feature-card" style="background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 45px; border-radius: 16px; border: 1px solid rgba(126, 191, 255, 0.2); box-shadow: 0 8px 30px rgba(0,0,0,0.06); transition: all 0.4s ease; position: relative; overflow: hidden;">
                    <div style="position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, #7ebfff 0%, #5a9fd4 100%);"></div>
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #7ebfff 0%, #5a9fd4 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; box-shadow: 0 6px 20px rgba(126, 191, 255, 0.3); font-size: 28px; font-weight: 700; color: #ffffff; font-family: 'Poppins', sans-serif;">★</div>
                    <h3 style="font-size: 28px; font-weight: 700; color: #1E1D24; margin-bottom: 18px; font-family: 'Poppins', sans-serif;">Isolatie</h3>
                    <p style="font-size: 17px; color: #5E5E5E; line-height: 1.8; margin: 0; font-family: 'Poppins', sans-serif;">Goede aansluiting en isolatie rond kozijnen.</p>
                </div>
                </div>
                            </div>
            
            <div style="background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%); padding: 60px 50px; border-radius: 20px; margin-bottom: 50px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); position: relative; overflow: hidden;">
                <div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(126, 191, 255, 0.05); border-radius: 50%;"></div>
                <div style="position: absolute; bottom: -30px; left: -30px; width: 150px; height: 150px; background: rgba(126, 191, 255, 0.05); border-radius: 50%;"></div>
                <div style="position: relative; z-index: 1;">
                    <h3 style="font-size: 36px; font-weight: 700; color: #ffffff; margin-bottom: 40px; font-family: 'Poppins', sans-serif;">Onze Aanpak</h3>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="padding: 20px 0; color: #BBBBBB; font-family: 'Poppins', sans-serif; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: flex-start; gap: 20px;">
                            <span style="color: #7ebfff; font-weight: 700; font-size: 24px; flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(126, 191, 255, 0.15); border-radius: 50%;">✓</span>
                            <span style="flex: 1;">Vrijblijvend gesprek om uw kozijnwensen te bespreken</span>
                        </li>
                        <li style="padding: 20px 0; color: #BBBBBB; font-family: 'Poppins', sans-serif; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: flex-start; gap: 20px;">
                            <span style="color: #7ebfff; font-weight: 700; font-size: 24px; flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(126, 191, 255, 0.15); border-radius: 50%;">✓</span>
                            <span style="flex: 1;">Transparante offerte met duidelijke kosten en planning</span>
                        </li>
                        <li style="padding: 20px 0; color: #BBBBBB; font-family: 'Poppins', sans-serif; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: flex-start; gap: 20px;">
                            <span style="color: #7ebfff; font-weight: 700; font-size: 24px; flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(126, 191, 255, 0.15); border-radius: 50%;">✓</span>
                            <span style="flex: 1;">Veilige uitvoering met correcte plaatsing en isolatie</span>
                        </li>
                        <li style="padding: 20px 0; color: #BBBBBB; font-family: 'Poppins', sans-serif; font-size: 18px; display: flex; align-items: flex-start; gap: 20px;">
                            <span style="color: #7ebfff; font-weight: 700; font-size: 24px; flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(126, 191, 255, 0.15); border-radius: 50%;">✓</span>
                            <span style="flex: 1;">Geen onverwachte kosten - alles wordt vooraf besproken en bevestigd</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CTA SECTION -->
<div class="renovast-kozijnen-cta" style="background: linear-gradient(135deg, #7ebfff 0%, #5a9fd4 100%); padding: 120px 0; text-align: center; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://renovast-bouwservice.nl/wp-content/uploads/2026/01/achtergevel-kozijnen-vervangen-schuifpui-01.webp'); background-size: cover; background-position: center; opacity: 0.1;"></div>
    <div style="max-width: 1400px; margin: 0 auto; padding: 0 30px; position: relative; z-index: 2;">
        <h2 style="font-size: 52px; font-weight: 700; color: #ffffff; margin-bottom: 30px; font-family: 'Poppins', sans-serif; text-shadow: 0 4px 20px rgba(0,0,0,0.2);">Klaar Voor Nieuwe Kozijnen?</h2>
        <p style="font-size: 22px; color: #ffffff; margin-bottom: 45px; opacity: 0.95; font-family: 'Poppins', sans-serif; max-width: 750px; margin-left: auto; margin-right: auto; line-height: 1.7;">Neem contact met ons op voor een vrijblijvend gesprek en ontvang een transparante offerte.</p>
        <a href="/offerte-aanvragen?dienst=Kozijnen%20plaatsen" id="kozijnen-offerte-cta" style="display: inline-block; padding: 20px 50px; background: #ffffff; color: #7ebfff; text-decoration: none; border-radius: 12px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 19px; transition: all 0.4s ease; box-shadow: 0 10px 35px rgba(0,0,0,0.25);">Vrijblijvende Offerte Aanvragen</a>
    </div>
</div>

<!-- STYLES -->
<style>
@keyframes float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    33% { transform: translateY(-20px) translateX(10px); }
    66% { transform: translateY(10px) translateX(-10px); }
}

/* Carousel Styles */
.kozijnen-carousel-wrapper {
    margin: 80px 0;
}

.kozijnen-carousel {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
    min-width: 100%;
    position: relative;
}

.slide-image {
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.slide-content {
    padding: 40px;
    background: linear-gradient(135deg, #1E1D24 0%, #2a2930 100%);
    color: #ffffff;
}

/* Navigation Arrows */
.carousel-arrow {
    opacity: 0.9;
    transition: all 0.3s ease;
}

.carousel-arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 25px rgba(0,0,0,0.3) !important;
}

.carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-arrow svg {
    transition: stroke 0.3s ease;
}

.carousel-arrow:hover svg {
    stroke: #7ebfff;
}

/* Indicators */
.carousel-indicators {
    display: flex;
    gap: 12px;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-indicator.active {
    background: #7ebfff;
    border-color: #7ebfff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(126, 191, 255, 0.5);
}

.carousel-indicator:hover {
    background: rgba(126, 191, 255, 0.7);
    border-color: #7ebfff;
}

/* Swipe Hint Animation */
@keyframes swipeHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* Feature Card Hover Effects */
.feature-card {
    position: relative;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(126, 191, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 16px;
    pointer-events: none;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(126, 191, 255, 0.25) !important;
    border-color: rgba(126, 191, 255, 0.5) !important;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover > div:last-child {
    box-shadow: 0 12px 35px rgba(126, 191, 255, 0.5) !important;
    transform: scale(1.08) rotate(2deg);
}

/* CTA Button Hover */
#kozijnen-offerte-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 45px rgba(0,0,0,0.35) !important;
    background: #f8f9fa !important;
}

/* Title Line Break on Mobile */
.title-break-mobile {
    display: none;
}

@media (min-width: 769px) {
    .hero-title {
        display: inline-block !important;
    }
    .title-break-mobile {
        display: none !important;
    }
    .title-line-1::after {
        content: '';
    }
    .title-line-2 {
        margin-left: 0;
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .renovast-kozijnen-hero {
        padding: 120px 0 90px !important;
        background-attachment: scroll !important;
        min-height: 60vh !important;
    }
    .renovast-kozijnen-hero h1.hero-title {
        font-size: 38px !important;
        line-height: 1.3 !important;
        display: block !important;
        text-align: center !important;
    }
    .title-break-mobile {
        display: inline !important;
    }
    .title-line-1 {
        display: inline !important;
        line-height: 1.2 !important;
    }
    .title-line-2 {
        display: inline !important;
        margin-left: 0 !important;
        line-height: 1.2 !important;
    }
    .renovast-kozijnen-details {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .renovast-kozijnen-details > div {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }
    .renovast-kozijnen-hero svg,
    .renovast-kozijnen-hero img {
        width: 70px !important;
        height: 70px !important;
    }
    .renovast-kozijnen-hero p {
        font-size: 18px !important;
    }
    .renovast-kozijnen-intro {
        padding: 60px 0 !important;
    }
    .renovast-kozijnen-intro h2 {
        font-size: 36px !important;
    }
    .renovast-kozijnen-intro p {
        font-size: 17px !important;
    }
    .kozijnen-carousel-wrapper {
        padding: 0 20px;
        margin: 60px 0;
    }
    .kozijnen-carousel {
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
    .carousel-slide > div {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .slide-image {
        min-height: 250px;
        border-radius: 16px 16px 0 0;
    }
    .slide-content {
        padding: 30px 25px;
        border-radius: 0 0 16px 16px;
    }
    .carousel-arrow {
        width: 44px;
        height: 44px;
        left: 15px !important;
        right: 15px !important;
    }
    .carousel-prev {
        left: 15px !important;
    }
    .carousel-next {
        right: 15px !important;
    }
    .carousel-indicators {
        bottom: 15px;
        gap: 8px;
    }
    .carousel-indicator {
        width: 10px;
        height: 10px;
    }
    .swipe-hint {
        display: block;
        opacity: 1;
    }
    .renovast-kozijnen-details {
        padding: 60px 0 !important;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    .renovast-kozijnen-details > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    .renovast-kozijnen-details > div > div {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }
    .renovast-kozijnen-details h2 {
        font-size: 36px !important;
        padding: 0 20px;
    }
        .renovast-kozijnen-cta {
        padding: 80px 0 !important;
    }
    .renovast-kozijnen-cta h2 {
        font-size: 36px !important;
    }
    .renovast-kozijnen-cta p {
        font-size: 18px !important;
    }
    .renovast-kozijnen-cta a {
        padding: 18px 40px !important;
        font-size: 17px !important;
    }
}
</style>

<script>
(function() {
    'use strict';
    
    class KozijnenCarousel {
        constructor() {
            this.carousel = document.getElementById('kozijnenCarousel');
            this.track = document.getElementById('kozijnenCarouselTrack');
            this.slides = this.track.querySelectorAll('.kozijnen-slide');
            this.prevBtn = document.getElementById('kozijnenCarouselPrev');
            this.nextBtn = document.getElementById('kozijnenCarouselNext');
            this.indicatorsContainer = document.getElementById('kozijnenCarouselIndicators');
            this.swipeHint = document.getElementById('kozijnenSwipeHint');
            
            this.currentSlide = 0;
            this.isDragging = false;
            this.startX = 0;
            this.currentX = 0;
            this.autoPlayInterval = null;
            
            this.init();
        }
        
        init() {
            this.createIndicators();
            this.setupEventListeners();
            this.updateCarousel();
            this.startAutoPlay();
            this.showSwipeHint();
        }
        
        createIndicators() {
            this.indicatorsContainer.innerHTML = '';
            this.slides.forEach((_, index) => {
                const indicator = document.createElement('button');
                indicator.className = 'carousel-indicator';
                indicator.setAttribute('aria-label', `Ga naar project ${index + 1}`);
                indicator.addEventListener('click', () => this.goToSlide(index));
                this.indicatorsContainer.appendChild(indicator);
            });
        }
        
        setupEventListeners() {
            // Navigation buttons
            this.prevBtn.addEventListener('click', () => this.prevSlide());
            this.nextBtn.addEventListener('click', () => this.nextSlide());
            
            // Touch events
            this.track.addEventListener('touchstart', (e) => this.handleTouchStart(e), { passive: true });
            this.track.addEventListener('touchmove', (e) => this.handleTouchMove(e), { passive: true });
            this.track.addEventListener('touchend', () => this.handleTouchEnd());
            
            // Mouse events for desktop
            this.track.addEventListener('mousedown', (e) => this.handleMouseDown(e));
            this.track.addEventListener('mousemove', (e) => this.handleMouseMove(e));
            this.track.addEventListener('mouseup', () => this.handleMouseUp());
            this.track.addEventListener('mouseleave', () => this.handleMouseUp());
            
            // Keyboard navigation
            this.carousel.addEventListener('keydown', (e) => this.handleKeyboard(e));
            
            // Pause on hover
            this.carousel.addEventListener('mouseenter', () => this.stopAutoPlay());
            this.carousel.addEventListener('mouseleave', () => this.startAutoPlay());
            
            // Visibility change
            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    this.stopAutoPlay();
                } else {
                    this.startAutoPlay();
                }
            });
            
            // Resize
            window.addEventListener('resize', () => this.handleResize());
        }
        
        handleTouchStart(e) {
            this.startX = e.touches[0].clientX;
            this.isDragging = true;
            this.track.classList.add('dragging');
            this.stopAutoPlay();
        }
        
        handleTouchMove(e) {
            if (!this.isDragging) return;
            
            this.currentX = e.touches[0].clientX;
            const diff = this.currentX - this.startX;
            const translateX = -(this.currentSlide * 100) + (diff / this.track.offsetWidth) * 100;
            
            this.track.style.transform = `translateX(${translateX}%)`;
        }
        
        handleTouchEnd() {
            if (!this.isDragging) return;
            
            this.isDragging = false;
            this.track.classList.remove('dragging');
            
            const diff = this.currentX - this.startX;
            const threshold = this.track.offsetWidth / 4;
            
            if (Math.abs(diff) > threshold) {
                if (diff > 0) {
                    this.prevSlide();
                } else {
                    this.nextSlide();
                }
            } else {
                this.updateCarousel();
            }
            
            this.startAutoPlay();
        }
        
        handleMouseDown(e) {
            this.startX = e.clientX;
            this.isDragging = true;
            this.track.classList.add('dragging');
            this.stopAutoPlay();
            e.preventDefault();
        }
        
        handleMouseMove(e) {
            if (!this.isDragging) return;
            
            this.currentX = e.clientX;
            const diff = this.currentX - this.startX;
            const translateX = -(this.currentSlide * 100) + (diff / this.track.offsetWidth) * 100;
            
            this.track.style.transform = `translateX(${translateX}%)`;
        }
        
        handleMouseUp() {
            if (!this.isDragging) return;
            
            this.isDragging = false;
            this.track.classList.remove('dragging');
            
            const diff = this.currentX - this.startX;
            const threshold = this.track.offsetWidth / 4;
            
            if (Math.abs(diff) > threshold) {
                if (diff > 0) {
                    this.prevSlide();
                } else {
                    this.nextSlide();
                }
            } else {
                this.updateCarousel();
            }
            
            this.startAutoPlay();
        }
        
        handleKeyboard(e) {
            switch(e.key) {
                case 'ArrowLeft':
                    this.prevSlide();
                    break;
                case 'ArrowRight':
                    this.nextSlide();
                    break;
                case 'Home':
                    this.goToSlide(0);
                    break;
                case 'End':
                    this.goToSlide(this.slides.length - 1);
                    break;
            }
        }
        
        handleResize() {
            this.updateCarousel();
        }
        
        goToSlide(index) {
            this.currentSlide = index;
            this.updateCarousel();
            this.stopAutoPlay();
            this.startAutoPlay();
        }
        
        nextSlide() {
            this.currentSlide = (this.currentSlide + 1) % this.slides.length;
            this.updateCarousel();
        }
        
        prevSlide() {
            this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
            this.updateCarousel();
        }
        
        updateCarousel() {
            const translateX = -this.currentSlide * 100;
            this.track.style.transform = `translateX(${translateX}%)`;
            
            // Update indicators
            const indicators = this.indicatorsContainer.querySelectorAll('.carousel-indicator');
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === this.currentSlide);
                indicator.setAttribute('aria-current', index === this.currentSlide ? 'true' : 'false');
            });
            
            // Update ARIA labels
            this.slides.forEach((slide, index) => {
                slide.setAttribute('aria-hidden', index === this.currentSlide ? 'false' : 'true');
            });
        }
        
        startAutoPlay() {
            this.stopAutoPlay();
            this.autoPlayInterval = setInterval(() => {
                this.nextSlide();
            }, 5000);
        }
        
        stopAutoPlay() {
            if (this.autoPlayInterval) {
                clearInterval(this.autoPlayInterval);
                this.autoPlayInterval = null;
            }
        }
        
        showSwipeHint() {
            if (window.innerWidth <= 767) {
                setTimeout(() => {
                    if (this.swipeHint) {
                        this.swipeHint.style.opacity = '1';
                        setTimeout(() => {
                            this.swipeHint.style.opacity = '0';
                        }, 3000);
                    }
                }, 2000);
            }
        }
    }
    
    // Initialize carousel when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => new KozijnenCarousel());
    } else {
        new KozijnenCarousel();
    }
})();

</script>/* End custom CSS */