{% extends 'site_body.html.twig' %}
{% block page_container %}
<!-- Banner Section Start -->
<section class="banner position-relative">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-interval="7000">
<div class="carousel-inner">
<div class="carousel-item active position-relative">
<img src="{{ asset('build/images/banners/female-scientiest.jpg') }}" class="d-block w-100 object-fit-cover" alt="banner-image">
<div class="overlay"></div>
<div class="carousel-caption w-lg-60 p-2 start-0 end-0 text-center m-auto">
<h3 class="green mt-1 mb-2 fadeInDown animated">Join the Movement for Gender Equity in Geoscience.</h3>
<h1 class="white pb-3 mt-1 mb-2 fadeInDown animated">Empowering the Next Generation of Women in Geoscience</h1>
<p class="h6 m-0 fst-italic pb-3 fadeInDown animated">Discover a world where young African females lead the future of geoscience. Through mentorship, education, and career development, we open doors to a field where women thrive as innovators, researchers, and conservation champions.</p>
<a class="btn text-uppercase mt-6 fadeInDown animated">Learn More</a>
</div>
</div>
<div class="carousel-item position-relative ">
<img src="{{ asset('build/images/banners/conservative.jpg') }}" class="d-block w-100 object-fit-cover" alt="banner-image">
<div class="overlay"></div>
<div class="carousel-caption w-lg-60 p-2 start-0 end-0 text-center m-auto">
<h3 class="green mt-1 mb-2 fadeInDown animated">Protecting the Past, Shaping Tomorrow.</h3>
<h1 class="white pb-3 mt-1 mb-2 fadeInDown animated">Heritage, Her Future — Women at the Heart of Geoheritage Conservation</h1>
<p class="h6 m-0 fst-italic pb-3 fadeInDown animated">From classrooms to communities, we inspire young women to safeguard Africa's rich geoheritage. By promoting awareness, conservation, and sustainable tourism, we nurture female leaders who will preserve the planet for generations to come.</p>
<a class="btn text-uppercase mt-6 fadeInDown animated">Join Campaign</a>
</div>
</div>
<div class="carousel-item position-relative">
<img src="{{ asset('build/images/banners/climate-desastas.png') }}" class="d-block w-100 object-fit-cover" alt="banner-image">
<div class="overlay"></div>
<div class="carousel-caption w-lg-60 p-2 start-0 end-0 text-center m-auto">
<h3 class="green mt-1 mb-2 fadeInDown animated">Donate And Help</h3>
<h1 class="white pb-3 mt-1 mb-2 fadeInDown animated ">Empowering Women to Lead Climate and Disaster Resilience Efforts</h1>
<p class="h6 m-0 fst-italic pb-3 fadeInDown animated">Through disaster risk reduction, climate change resilience, and geotourism, we equip young African females to be at the forefront of sustainable development. Together, we create strong, adaptable communities ready to face the future.</p>
<a class="btn text-uppercase mt-6 fadeInDown animated">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!-- Banner Section End -->
<!-- To-Do Section Start -->
<section class="to-do pb-10 position-relative">
<div class="container">
<div class="to-do-inner text-center ">
<div class="row justify-content-center gx-lg-5 gx-md-4 gy-4">
<div class="col-lg-4 col-md-6">
<div class="to-do-box bg-white d-flex rounded-1">
<a href="{{ path('route_211') }}" class="py-7 px-6 border border-3 border-grey rounded-1">
<div class="box-icon mb-4 h2">
<i class="fa fa-address-book-o bg-green rounded-circle white border border-5 border-grey" aria-hidden="true"></i>
</div>
<div class="box-body">
<h4 class="mb-2">Our Mission</h4>
<p class="mb-0 grey">{{ setting('app_mission') }}</p>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="to-do-box d-flex rounded-1 bg-white">
<a href="campaign-detail.html" class="py-7 px-6 border border-3 border-grey rounded-1">
<div class="box-icon mb-4 h2">
<i class="fa fa-globe bg-green rounded-circle white border border-5 border-grey" aria-hidden="true"></i>
</div>
<div class="box-body">
<h4 class="mb-2">Our Vision </h4>
<p class="mb-0 grey">{{ setting('app_vision') }}</p>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="to-do-box d-flex rounded-1 bg-white">
<a href="contact.html" class="py-7 px-6 border border-3 border-grey rounded-1">
<div class="box-icon mb-4 h2">
<i class="fa fa-users bg-green rounded-circle white border border-5 border-grey" aria-hidden="true"></i>
</div>
<div class="box-body">
<h4 class="mb-2">Become A Volunteer</h4>
<p class="mb-0 grey">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- To-Do Section End -->
<!-- About Us Section Start -->
<section class="about-us ">
<div class="container">
<div class="about-us-inner border-dashed-bottom pb-8">
<div class="row gx-lg-5 align-items-center gy-4 ">
<div class="col-lg-6">
<div class="about-us-images">
<div class="row gx-md-3 align-items-center gy-3">
<div class="col-lg-6 col-md-6">
<div class="left-image">
<div class="about-us-image mb-2">
<img src="{{ asset('themes/castine/assets/images/planting%26working/1.jpg') }}" alt="Plant" class="w-100 rounded-1">
</div>
<div class="about-us-image">
<img src="{{ asset('themes/castine/assets/images/planting%26working/2.jpg') }}" alt="Plant" class="w-100 rounded">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="right-image text-center">
<div class="about-us-image">
<img src="{{ asset('themes/castine/assets/images/planting%26working/3.jpg') }}" alt="Plant" class="w-100 rounded-1">
</div>
<a href="#">
<div class="exp-box bg-green rounded-1 px-6 pb-7 pt-3 border border-white overflow-hidden">
<div class="exp-badge mb-5">
<span class="h2 fw-semibold text-capitalize white bg-darkgreen py-3 px-4 rounded-bottom-1">5</span>
</div>
<p class="h4 fw-semibold text-capitalize white mb-0">Years of experience in company</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-us-content text-center text-lg-start">
<div class="about-us-title">
<h5 class="mb-2"><i class="fa fa-handshake-o pe-2" aria-hidden="true"></i> About Us</h5>
<h2 class="mb-3">Building a legacy of empowered women in <span class="green">Geoscience</span></h2>
</div>
<div class="about-us-info pb-4 mb-4 border-dashed-bottom">
{{ content.body|raw }}
</div>
<div class="inquiry-box bg-grey p-4 rounded-1 d-flex">
<div class="inquiry-box-icon">
<a href="#" class="h3 white"><i class="fa fa-volume-control-phone bg-darkgreen rounded-circle text-center me-3" aria-hidden="true"></i></a>
</div>
<div class="inquiry-box-info">
<h6 class="green mb-1">For any inquiries call the hotline:</h6>
<p class="darkgreen fw-semibold h3 oswald">{{ setting('primary_number') }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Us Section End -->
<!-- Partner Section Start -->
<section class="partner pt-4 pb-10">
<div class="container">
<div class="partner-inner text-center">
<div class="partner-info mb-6 w-lg-50 m-auto">
<h2 class="mb-1"><span class="green"> Our </span> partner</h2>
<p class="mb-0">Meet the allies driving our mission forward—our partners are dedicated champions of women's empowerment, geoheritage conservation, and sustainable community development.</p>
</div>
<div class="slider partner-slide">
<div class="box1 d-flex justify-content-center">
<img src="{{ asset('themes/castine/assets/images/logo/3.jpg') }}" alt="partner-img">
</div>
<div class="box2 d-flex justify-content-center">
<img src="{{ asset('themes/castine/assets/images/logo/4.jpg') }}" alt="partner-img">
</div>
<div class="box3 d-flex justify-content-center">
<img src="{{ asset('themes/castine/assets/images/logo/5.jpg') }}" alt="partner-img">
</div>
<div class="box4 d-flex justify-content-center">
<img src="{{ asset('themes/castine/assets/images/logo/6.jpg') }}" alt="partner-img">
</div>
<div class="box5 d-flex justify-content-center">
<img src="{{ asset('themes/castine/assets/images/logo/3.jpg') }}" alt="partner-img">
</div>
<div class="box6 d-flex justify-content-center">
<img src="{{ asset('themes/castine/assets/images/logo/4.jpg') }}" alt="partner-img">
</div>
<div class="box7 d-flex justify-content-center">
<img src="{{ asset('themes/castine/assets/images/logo/5.jpg') }}" alt="partner-img">
</div>
<div class="box8 d-flex justify-content-center">
<img src="{{ asset('themes/castine/assets/images/logo/6.jpg') }}" alt="partner-img">
</div>
</div>
</div>
</div>
</section>
<!-- Partner Section End -->
<!-- Time to Change Section Start -->
<section class="time-to-change py-10 position-relative z-0">
<div class="time-to-change-bg-overlay overlay z-n1"></div>
<div class="container">
<div class="time-to-change-inner text-center">
<div class="row gx-lg-5 gy-4 align-items-center">
<div class="col-lg-6">
<div class="time-to-change-left">
<div class="time-to-change-info mb-4 text-lg-start">
<h5 class="mb-2 white"><i class="fa fa-handshake-o pe-2" aria-hidden="true"></i> Time to change</h5>
<h2 class="white mb-2">We take action. To make <span class="green">better changes</span></h2>
<p class="white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="counter text-center">
<div class="row">
<div class="col-lg-6 col-md-6 p-0">
<div class="counter-box white px-2 py-6 border-end border-bottom border-1 border-light">
<span class="roboto h1 num" data-val="20"></span><span class="roboto h1">+</span>
<p class="mb-0 h6 fst-italic">Projets Done</p>
</div>
</div>
<div class="col-lg-6 col-md-6 p-0">
<div class="counter-box white px-2 py-6 border-bottom border-1 border-light">
<span class="roboto h1 num" data-val="15"></span><span class="roboto h1">+</span>
<p class="mb-0 h6 fst-italic">Case Solved</p>
</div>
</div>
<div class="col-lg-6 col-md-6 p-0">
<div class="counter-box white px-2 py-6 border-end border-1 border-light">
<span class="roboto h1 num" data-val="10"></span><span class="roboto h1">+</span>
<p class="mb-0 h6 fst-italic">Fund Raise</p>
</div>
</div>
<div class="col-lg-6 col-md-6 p-0 ">
<div class="counter-box white px-2 py-6 border-0">
<span class="roboto h1 num" data-val="50"></span><span class="roboto h1">+</span>
<p class="mb-0 h6 fst-italic">Happy Volunteers</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="time-to-change-right position-relative">
<div class="lightgallery-box " id="lightgallery-video">
<a data-src="https://www.youtube.com/watch?v=XHOmBV4js_E" class="h1 z-1 text-white border border-6 bprder-grey rounded-1 d-flex align-items-center justify-content-center w-100">
<i class="fa fa-play-circle-o opacity-75" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Time to Change Section End -->
<!-- Gallery Section Start -->
<section class="gallery pt-10 pb-2">
<div class="container">
<div class="gallery-inner">
<div class="gallery-info w-lg-50 text-center m-auto">
<h5 class="mb-2 "><i class="fa fa-handshake-o pe-2" aria-hidden="true"></i> Amazing work</h5>
<h2 class=" mb-2">Our key <span class="green">priorities</span></h2>
<p class="mb-4">Discover our core priorities—empowering women in geoscience, conserving geoheritage, and fostering resilient communities through education, advocacy, and sustainable development.</p>
</div>
<div class="lightbox">
<div class="row g-md-3 gy-3 justify-content-center" id="what-we-do-widget">
{{ sonata_block_render({'name':'whatWeDoWidget'}) }}
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section End -->
<!-- Donate Section Start -->
<section class="donate-suggetion position-relative z-0">
<div class="container">
<div class="donate-suggetion-inner">
<div class="row gx-lg-4 gy-4">
<div class="col-lg-6">
<div class="donate-suggetion-box py-9 px-8 border border-6 border-grey rounded-1 d-flex position-relative z-0">
<div class="image-overlay w-100 m-0 z-n1 opacity-75"></div>
<div class="suggetion-icon me-4 h2">
<a href="event-detail.html"><i class="fa fa-heart-o white bg-green text-center rounded-circle" aria-hidden="true"></i></a>
</div>
<div class="suggetion-info white">
<h3 class="white mb-2"><a href="campaign-list.html">Your Donation can save someone's life</a></h3>
<p class="mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="clean-suggetion-box py-9 px-8 border border-6 border-grey rounded-1 d-flex position-relative z-0">
<div class="image-overlay w-100 m-0 z-n1 opacity-75"></div>
<div class="suggetion-icon me-4 h2">
<a href="event-detail.html"><i class="fa fa-globe white bg-green text-center rounded-circle" aria-hidden="true"></i></a>
</div>
<div class="suggetion-info white">
<h3 class="white mb-2"><a href="event-detail.html">Clean eco energy to save the world</a></h3>
<p class="mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Donate Section End -->
<!-- Vision & Mission Section Start -->
<section class="vision-mission pb-10 bg-darkgreen position-relative z-n1">
<div class="overlay"></div>
<div class="container">
<div class="vision-mission-inner text-center w-lg-50 m-auto white">
<div class="vision-mission-title mb-4">
<h5 class="mb-2 white"><i class="fa fa-handshake-o pe-2" aria-hidden="true"></i> Vision & Mission</h5>
<h2 class=" white"><span class="green">Love </span>nature, <span class="green">save </span>nature, and stay close to nature</h2>
</div>
<p class="mb-0" style="font-size:17px">From classrooms to communities, we inspire young women to safeguard
Africa's rich geoheritage. By promoting awareness, conservation, and sustainable
tourism, we nurture female leaders who will preserve the planet for generations
to come.</p>
</div>
</div>
</section>
<!-- Vision & Mission Section End -->
<!-- Volunteer Section Start -->
<section class="volunteer py-2">
<div class="inner-volunteer">
<div class="row align-items-center p-0 gx-0">
<div class="col-lg-6">
<div class="volunteer-img-slider pe-3">
<div class="slider volunteer-slider">
<div class="box1 d-flex justify-content-center mx-1">
<img src="{{ asset('themes/castine/assets/images/planting%26working/11.jpg') }}" alt="volunteer-img" class="w-100 rounded-1">
</div>
<div class="box2 d-flex justify-content-center mx-1">
<img src="{{ asset('themes/castine/assets/images/planting%26working/4.jpg') }}" alt="volunteer-img" class="w-100 rounded-1">
</div>
<div class="box3 d-flex justify-content-center mx-1">
<img src="{{ asset('themes/castine/assets/images/planting%26working/5.jpg') }}" alt="volunteer-img" class="w-100 rounded-1">
</div>
<div class="box4 d-flex justify-content-center mx-1">
<img src="{{ asset('themes/castine/assets/images/planting%26working/1.jpg') }}" alt="volunteer-img" class="w-100 rounded-1">
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="volunteer-left white bg-green text-center text-lg-start py-2">
<div class="volunteer-title">
<h5 class="mb-2 white"><i class="fa fa-handshake-o pe-2" aria-hidden="true"></i>How we help</h5>
<h2 class=" mb-1 white">Become a <span class="darkgreen">Volunteer</span></h2>
</div>
<div class="volunteer-info">
<p class="mb-4">Join our community of changemakers and make a lasting impact—volunteer with us to empower young women and protect Africa's geoheritage.</p>
<a href="{{ path('route_219') }}" class="btn btn2">Join us now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Volunteer Section End -->
<!-- Event Section Start -->
<section class="event py-10">
<div class="container">
<div class="event-inner text-center">
<div class="event-title w-lg-60 m-auto mb-4">
<h5 class="mb-2 "><i class="fa fa-handshake-o pe-2" aria-hidden="true"></i> Helping hands</h5>
<h2 class=" mb-1">We're on a mission to protect our beloved <span class="green">environment!</span></h2>
<p class="mb-0">Don’t miss out on our upcoming events—connect, learn, and be part of the movement for women's empowerment and geoheritage conservation.</p>
</div>
<div class="event-list text-lg-start">
<div class="event-box p-4 mb-4 bg-white rounded-1">
<div class="row align-items-center gx-lg-5 gy-4">
<div class="col-lg-4">
<div class="event-image">
<a href="event-detail.html"><img src="{{ asset('themes/castine/assets/images/planting%26working/9.jpg') }}" alt="event-img" class="w-100 rounded"></a>
</div>
</div>
<div class="col-lg-6">
<div class="event-info">
<div class="event-info-top pb-4 mb-4 border-dashed-bottom">
<h3 class="mb-2"><a href="event-detail.html" class="darkgreen">Corporate Eco Day <span class="green"> Event</span></a></h3>
<p class="mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="event-info-bottom">
<h6 class="mb-3">Location- Tokyo, Japan</h6>
<p>June 21 @ 12:30 am - 2:00 am</p>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="join-event-btn text-lg-end">
<a href="event-detail.html" class="btn btn1">Join Event</a>
</div>
</div>
</div>
</div>
<div class="event-box p-4 mb-4 bg-white rounded-1">
<div class="row align-items-center gx-lg-5 gy-4">
<div class="col-lg-4">
<div class="event-image">
<a href="event-detail.html"><img src="{{ asset('themes/castine/assets/images/planting%26working/8.jpg') }}" alt="event-img" class="w-100 rounded"></a>
</div>
</div>
<div class="col-lg-6">
<div class="event-info">
<div class="event-info-top pb-4 mb-4 border-dashed-bottom">
<h3 class="mb-2"><a href="event-detail.html" class="darkgreen">Lets fight to<span class="green"> Save animals</span></a></h3>
<p class="mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="event-info-bottom">
<h6 class="mb-3">Location- Florida, USA</h6>
<p>June 21 @ 12:30 am - 2:00 am</p>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="join-event-btn text-lg-end">
<a href="event-detail.html" class="btn btn1">Join Event</a>
</div>
</div>
</div>
</div>
<div class="event-box p-4 mb-6 bg-white rounded-1">
<div class="row align-items-center gx-lg-5 gy-4">
<div class="col-lg-4">
<div class="event-image">
<a href="event-detail.html"><img src="{{ asset('themes/castine/assets/images/banner-slider/3.jpg') }}" alt="event-img" class="w-100 rounded"></a>
</div>
</div>
<div class="col-lg-6">
<div class="event-info">
<div class="event-info-top pb-4 mb-4 border-dashed-bottom">
<h3 class="mb-2"><a href="event-detail.html" class="darkgreen">Standup for <span class="green"> Racial Justice</span> in nature</a></h3>
<p class="mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="event-info-bottom">
<h6 class="mb-3">Location- Sydney, Australia</h6>
<p>June 21 @ 12:30 am - 2:00 am</p>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="join-event-btn text-lg-end">
<a href="event-detail.html" class="btn btn1">Join Event</a>
</div>
</div>
</div>
</div>
</div>
<div class="all-event-btn w-lg-60 m-auto">
<p class="mb-4">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="event-list.html" class="btn btn1">View all events</a>
</div>
</div>
</div>
</section>
<!-- Event Section End -->
<!-- Help Section Start -->
<section class="help position-relative z-2">
<div class="overlay z-n1"></div>
<div class="container">
<div class="inner-help text-center">
<div class="row align-items-center gx-lg-5 gy-5 gy-lg-0">
<div class="col-lg-6">
<div class="help-left my-6 text-lg-start">
<div class="help-title">
<h5 class="mb-2 white"><i class="fa fa-handshake-o pe-2" aria-hidden="true"></i> Help us now</h5>
<h2 class=" mb-2 white">Heavan is right here hence <span class="green">let us save it today</span></h2>
</div>
<div class="help-info white">
<p class="mb-4">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="contact.html" class="btn btn1">Explore more</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="help-form py-9 px-6 bg-green rounded-1">
<div class="form-title mb-4">
<h2 class="white">Do you have any <span class="darkgreen">Questions</span>?</h2>
</div>
<form>
<div class="row">
<div class="col-lg-6 col-md-6">
<input type="text" placeholder="Full Name" class="mb-4">
</div>
<div class="col-lg-6 col-md-6">
<input type="tel" placeholder="Phone No." class="mb-4">
</div>
<div class="col-lg-6 col-md-6">
<input type="email" placeholder="Email Address" class="mb-4" required>
</div>
<div class="col-lg-6 col-md-6">
<input type="text" placeholder="Subject" class="mb-4">
</div>
</div>
<textarea placeholder="Message" rows="4" class="mb-4"></textarea>
<button class="btn btn2">Get Involve Today</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Help Section End -->
<!-- Blog Section Start -->
<section class="blog pb-10 pt-11 latest-home-posts">
<div class="container">
<div class="blog-inner">
<div class="blog-title text-center w-lg-60 m-auto mb-4">
<h5 class="mb-2 "><i class="fa fa-handshake-o pe-2" aria-hidden="true"></i> Our blog offers</h5>
<h2 class=" mb-1">Recent <span class="green">Posts</span> and <span class="green">updates</span></h2>
<p class="mb-0">Stay informed with our latest stories, insights, and updates on women's empowerment in geoscience, geoheritage conservation, and community resilience.</p>
</div>
<div class="blog-posts">
<div class="row align-items-center gy-4">
{{ sonata_block_render({'name':'latestHomePosts'}) }}
</div>
</div>
</div>
</div>
</section>
<!-- Blog Section End -->
{% endblock %}