{% include 'design/_includes/header.html' %}
<div class="sectionScrollMain">
        <section class="sectionScroll banenrSection">
            
                <!--  <div class="iframeOuter">
                <iframe width="1905" height="784" src="https://www.youtube.com/embed/EngW7tLk6R8?controls=0&autoplay=1&mute=1&playsinline=1&loop=1&playlist=EngW7tLk6R8"></iframe>
            </div> -->
            <!-- <div class="bannerImageBox">
                <img src="{{ siteUrl }}images/homeBanner.png" class="bannerImage" />
            </div> -->
            <div class="bannerSliderOuter">
            <div class="bannerSlider">
                <div class="bannerSlide">
                    <div class="bannerSlideInner">
                        <div class="heroVideo">
                           <video width="320" height="240" preload="auto" id="video1" autoplay="" muted="" loop="" playsinline="">
                                <source src="{{ siteUrl }}videos/dummy-video.mp4" type="video/mp4" controls="false"/>
                            </video> 
                            
                        </div>  
                            <!-- <div class="iframeOuter">
                                <iframe width="1905" height="784" src="https://www.youtube.com/embed/EngW7tLk6R8?controls=0&autoplay=1&mute=1&playsinline=1&loop=1&playlist=EngW7tLk6R8"></iframe>
                            </div> -->
                           
                             <div class="bannerImgMobile">
                                <img src="{{ siteUrl }}images/homeBanner.png" class="bannerImage" />
                            </div>
                                                    
                        <div class="bannerContent">
                            <h1>Real power. <br> Real solutions. <br> Real change.</h1>
                        </div>
                    </div>
                </div>
                <div class="bannerSlide">
                    <div class="bannerSlideInner">
                        <div class="heroVideo">
                            <video width="320" height="240" preload="auto" id="video1" autoplay="" muted="" loop="" playsinline="">
                                <source src="{{ siteUrl }}videos/home.mp4" type="video/mp4" controls="false"/>
                            </video> 
                            
                        </div>  
                         <div class="bannerImgMobile">
                                <img src="{{ siteUrl }}images/assemblies-banner.png" class="bannerImage" />
                            </div>
                                                    
                            <div class="bannerContent">
                                <h1>A permanent voice <br> for people & planet</h1>
                            </div>
                    </div>
                    </div>
                    <div class="bannerSlide">
                        <div class="bannerSlideInner">
                                <!-- <div class="iframeOuter">
                                    <iframe width="1905" height="784" src="https://www.youtube.com/embed/EngW7tLk6R8?controls=0&autoplay=1&mute=1&playsinline=1&loop=1&playlist=EngW7tLk6R8"></iframe>
                                </div>   -->
                                  <div class="bannerImageBox">
                                <img src="{{ siteUrl }}images/homeBanner.png" class="bannerImage" />
                            </div>
                                 <div class="bannerImgMobile">
                                    <img src="{{ siteUrl }}images/homeBanner.png" class="bannerImage" />
                                </div>
                                                        
                                <div class="bannerContent">
                                    <h1>Global governance, <br> built by citizens</h1>
                                </div>
                        </div>
                    </div>
                    <div class="bannerSlide">
                    <div class="bannerSlideInner">
                        <div class="heroVideo">
                            <video width="320" height="240" preload="auto" id="video1" autoplay="" muted="" loop="" playsinline="">
                                <source src="{{ siteUrl }}videos/home.mp4" type="video/mp4" controls="false"/>
                            </video> 
                            
                        </div>  
                         <div class="bannerImgMobile">
                            <img src="{{ siteUrl }}images/assemblies-banner.png" class="bannerImage" />
                        </div>
                                                    
                            <div class="bannerContent">
                                <h1>A new era in global<br/>decision-making</h1>
                            </div>
                    </div>
                    </div>
            </div></div>
        </section>
        <section class="sectionScroll textSection withImage">
            <div class="sectionBg">
                <img src="{{ url('images/vision.png') }}" alt="vision image"/>
            </div>
            <div class="textContent">
                    <div class="textContentBox">
                    <h2>A new people-powered <br/> institution shaping the <br/> world’s future</h2>
                    <h4>An inclusive and permanent Global Citizens’ Assembly <br/> —for everyone, by everyone—tackling the world's most <br/> pressing challenges.</h4>
                    <a href="#" class="allBtn">learn more </a>
                    </div>
            </div>
        </section>
        <section class="sectionScroll videoSection">       
            <div class="customVideoWrap">
                <div class="fullWidthVideoBlock">
                    <img src="{{ url('images/timeline2024.png') }}" alt="timeline Image" class="fullWidthVideoImg"/>
                    <span class="imgCaption">Photo by Yannis H on Unsplash</span>
                    <a href="#" data-bs-toggle="modal" data-bs-target="#myVideo" class="playVideo"><img src="{{ url('images/play-icon.svg') }}" alt="Play icon"/></a>
                </div>
            <!-- <div class="youtubeVideo">
                <div class="posterImg">
                    <img src="{{ siteUrl }}images/video-poster.png" id="videoPoster" />
                    <div class="play" id="youtubeplay1"> <img src="{{ siteUrl }}images/play-icon.svg" alt="Play Icon" /></div> 
                </div>
                    <iframe id="youtubeVideo1" src="https://www.youtube.com/embed/9xwazD5SyVg?controls=1&showinfo=0&mute=0&playsinline=1&loop=1"  allowfullscreen   allowtransparency allow="autoplay" ></iframe>
            </div> -->
            <!----<div class="vimeoVideo">
                <div class="posterImg">
                    <img src="{{ siteUrl }}images/video-poster.png" id="videoPoster" />
                    <div class="play" id="vimeoplay1"> <img src="{{ siteUrl }}images/play-icon.svg" alt="Play Icon" /></div> 
                </div>
                <iframe id="vimeoVideo1" src="https://player.vimeo.com/video/225519343?controls=1&showinfo=0&playsinline=1&loop=1" allow="autoplay; encrypted-media" allowfullscreen ></iframe>
            </div>
                <div class="uploadVideo">
                <div class="posterImg">
                        <img src="{{ siteUrl }}images/video-poster.png" id="videoPoster" />
                        <div class="play" id="uploadplay1"> <img src="{{ siteUrl }}images/play-icon.svg" alt="Play Icon" /></div> 
                </div>
                    
                <video width="320" height="240" controls id="video1">
                    <source src="{{ siteUrl }}videos/dummy-video.mp4" type="video/mp4" controls="false"/>
                </video>
            </div> -->
            </div>
        </section>
                    
        <section class="sectionScroll imgSliderSection">
            <div class="imgSliderOuter">
                <div class="imgSlider owl-carousel">
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide1.png') }}" alt="image slide 1"/>
                        </div>
                    </div>
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide2.png') }}" alt="image slide 2"/>
                        </div>
                    </div>
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide3.png') }}" alt="image slide 3"/>
                        </div>
                    </div>
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide3.png') }}" alt="image slide 3"/>
                        </div>
                    </div>
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide2.png') }}" alt="image slide 2"/>
                        </div>
                    </div>
                        <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide1.png') }}" alt="image slide 1"/>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="sectionScroll textSection textDark">                
            <div class="textContent">
                    <div class="textContentBox">
                    <label class="textLabel">Assemblies</label>
                    <h2>A new approach to <br/> global challenges</h2>
                    <h4>The Global Citizens’ Assembly starts with you. From local community<br/> assemblies to a global Core Assembly, people everywhere are shaping <br/>decisions on climate, technology, and governance.</h4>
                    <a href="#" class="allBtn">about assemblies</a>
                    </div>
            </div>
        </section>
        <section class="sectionScroll imgSliderSection">
            <div class="imgSliderOuter">
                <div class="imgSlider  owl-carousel">
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide1.png') }}" alt="image slide 1"/>
                        </div>
                    </div>
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide2.png') }}" alt="image slide 2"/>
                        </div>
                    </div>
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide3.png') }}" alt="image slide 3"/>
                        </div>
                    </div>
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide3.png') }}" alt="image slide 3"/>
                        </div>
                    </div>
                    <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide2.png') }}" alt="image slide 2"/>
                        </div>
                    </div>
                        <div class="imgSlide">
                        <div class="imgSlideBox">
                            <img src="{{ url('images/slide1.png') }}" alt="image slide 1"/>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="sectionScroll textSection textDark">                
            <div class="textContent">
                    <div class="textContentBox">
                    <label class="textLabel">Coalition</label>
                    <h2>This isn’t just an idea. <br/> It’s a movement.</h2>
                    <h4>Believe in people-powered change? Support the Global Citizens’  <br/> Assembly and help establish a permanent, citizen-led governance <br/> model for a fairer, more inclusive future.</h4>
                    <a href="#" class="allBtn">Join Coalition</a>
                    </div>
            </div>
        </section>
        <section class="sectionScroll  textSection withImage">
            <div class="sectionBg">
                <img src="{{ url('images/image-text-bg.png') }}" alt="vision image"/>
            </div>
            <div class="textContent">
                    <div class="textContentBox">
                    <h2>Putting people at <br/> the heart of COP30</h2>
                    <h4>By November 2025, the Global Citizens’ Assembly, <br/> backed by Brazil’s government, will shape COP30 <br/> and build the foundation for a new global institution.</h4>
                    <a href="#" class="allBtn">see our cop30 goals</a>
                    </div>
            </div>
        </section>
        <section class="sectionScroll testimonialSection">                
            <div class="tetsimonialOuter">
                <div class="testimonialSlider">
                    <div>
                        <div class="testimonialContent">
                            <span> <img src="{{ url('images/quote.png') }}" alt="quote image"/></span>
                                <p>I have learned a lot of new information, and to be honest, some of them have made me fearful concerning our future and the future of our children.</p>
                            <span>-Yarslav, Assembly member from Ukraine</span>
                        </div>
                    </div>
                    <div>
                        <div class="testimonialContent">
                            <span> <img src="{{ url('images/quote.png') }}" alt="quote image"/></span>
                                <p>I have learned a lot of new information, and to be honest, some of them have made me fearful concerning our future and the future of our children.</p>
                            <span>-Yarslav, Assembly member from Ukraine</span>
                        </div>
                    </div>
                        <div>
                        <div class="testimonialContent">
                            <span> <img src="{{ url('images/quote.png') }}" alt="quote image"/></span>
                                <p>I have learned a lot of new information, and to be honest, some of them have made me fearful concerning our future and the future of our children.</p>
                            <span>-Yarslav, Assembly member from Ukraine</span>
                        </div>
                    </div>
                        <div>
                        <div class="testimonialContent">
                            <span> <img src="{{ url('images/quote.png') }}" alt="quote image"/></span>
                                <p>I have learned a lot of new information, and to be honest, some of them have made me fearful concerning our future and the future of our children.</p>
                            <span>-Yarslav, Assembly member from Ukraine</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
</div>
<section class="networkSection">                
    <div class="textContent">
            <div class="textContentBox">
            
            <h3>A citizen-led response to the <br/> climate crisis </h3>
            <p>The climate emergency demands bold, collective action—but our current global  governance systems aren’t up to the task. A Permanent Global Citizens’ Assembly gives  people a legitimate voice in shaping climate solutions that work for all. Around the  world, citizens’ assemblies are already driving real impact, cutting through polarization,  and accelerating change.</p>
            <a href="#" class="allBtn loaderBtn">hear their stories of impact</a>
            </div>
    </div>
    <div class="networkImg">
        <div class="networkGlobe">
             <img src="{{ url('images/globe-home.png') }}" alt="globe image"/>
        </div>
        <div class="storyPersonList">
            <a class="storyPerson"><img src="{{ url('images/story-1.png') }}" alt="quote image"/></a>
            <a class="storyPerson"><img src="{{ url('images/story-2.png') }}" alt="quote image"/></a>
            <a class="storyPerson"> <img src="{{ url('images/story-1.png') }}" alt="quote image"/></a>
            <a class="storyPerson"><img src="{{ url('images/story-2.png') }}" alt="quote image"/></a>
            <a class="storyPerson"> <img src="{{ url('images/story-1.png') }}" alt="quote image"/></a>
            <a class="storyPerson"><img src="{{ url('images/story-2.png') }}" alt="quote image"/></a>
            <a class="storyPerson"> <img src="{{ url('images/story-1.png') }}" alt="quote image"/></a>
        </div>
    </div>
</section>
<div class="modal fade customModal" id="myVideo" tabindex="-1"  aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fluid">
        <div class="modal-content ">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="videoBlock">
                <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
            </div>
           
        </div>
    </div>
</div>
               
            
{% include 'design/_includes/footer.twig' %}