@extends('layouts.layout')

@section('content')
    <!--  section  -->
    <section class="parallax-section single-par" data-scrollax-parent="true">
        <div class="bg par-elem " data-bg="{{ asset('assets/images/awards-page-header-image.webp') }}"
            data-scrollax="properties: { translateY: '30%' }"></div>
        <div class="overlay op7"></div>
            <div class="container">
            <div class="section-title center-align big-title">
                <h2><span>Sustainability</span></h2>
                <span class="section-separator"></span>
                <div class="breadcrumbs fl-wrap"><a href="{{ route('home.index') }}">Home</a><span>Sustainability</span>
                </div>
            </div>
        </div>
        <div class="header-sec-link">
            <a href="#sec1" class="custom-scroll-link"><i class="fal fa-angle-double-down"></i></a>
        </div>
    </section>
    <!--  section  end-->

    <section>
        <div class="container">
            <div class="section-title">
                <h2> ESG & Sustainability</h2>
                <div class="section-subtitle">Our Approach</div>
                <span class="section-separator"></span>
                <p>For us, sustainability is more than a commitment—it’s a responsibility. As
                    one of the leaders in student accommodation, we continuously seek ways to reduce our
                    environmental footprint, support communities, and inspire sustainable living. <br>
                    From eco-friendly initiatives to responsible corporate practices, we’re building a greener
                    future—one step at a time.</p>
            </div>
            <!--Cards-->
                <div class="cards-content mt-4 mb-5">
                    <div class="row justify-content-evenly" style="gap:40px;">
                        <!-- Card 1 -->

                            <div class="col-xs-12 col-sm-4 card">
                                <div class="card-body" style="text-align: center;">
                                    <h5 class="card-title">Sustainable Living</h5>
                                    <p class="card-text">Empowering students to make eco-conscious choices in their daily
                                        lives.
                                    </p>
                                </div>
                            </div>

                        <!-- Card 2 -->
                            <div class="col-xs-12 col-sm-4 card">
                                <div class="card-body" style="text-align: center;">
                                    <h5 class="card-title">Responsible Operations</h5>
                                    <p class="card-text"> Implementing greener alternatives across our company.</p>
                                </div>
                            </div>
                        <!-- Card 3 -->
                        <div class="col-xs-12 col-sm-4 card">
                            <div class="card-body" style="text-align: center;">
                                    <h5 class="card-title">Future Commitments</h5>
                                    <p class="card-text">Investing in long-term sustainability projects that make an impact.
                                    </p>
                                </div>
                            </div>
                    </div>
                </div>

                <!--Sustainability Initiatives-->
                <div class="reverse-cards-wrapper">
                    <h2 class="content-headers">Sustainability Initiatives</h2>
                    <div class="row reverse-cards">
                        <!-- Initiative 1 -->
                        <div class="col-12 reverse-card">
                            <div class="reverse-card-inner reverse-card-inner-left "
                                style="background-color:#9A1029; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1);">
                                <h6>British Heart Foundation: <br> Hangers for Hearts
                                </h6>
                                <p>
                                    <strong>Giving Clothes a Second Life</strong> <br>Instead of discarding old clothes,
                                    students can donate to the British Heart Foundation, reducing textile waste while
                                    supporting life-saving heart and circulatory research.
                                </p>
                            </div>
                            <div class="reverse-card-inner reverse-card-inner-right">
                                <img src="/images/sustainablity_hanger_for_hearts.jpg" alt="" />
                            </div>
                        </div>
                        <!-- Initiative 2 -->
                        <div class="col-12 reverse-card">
                            <div class="reverse-card-inner reverse-card-inner-left"
                                style="background-color:#FED356; box-shadow: 1px 6px 6px 2px rgba(0, 0, 0, 0.1);">
                                <h6>Bottle Up: <br> Hydration Without Waste</h6>
                                <p>
                                    <strong>Refill, Reuse, Reduce </strong><br> We provide reusable and refillable water
                                    bottles, encouraging students to ditch single-use plastics and adopt an eco-friendly
                                    hydration habit.For every bottle sold, Bottle Up donates 100 litres of clean drinking water to the Made Blue Foundation.
                                </p>
                            </div>
                            <div class="reverse-card-inner reverse-card-inner-right">
                                <img src="/images/sustainability_bottle_up.jpg" alt="" />
                            </div>
                        </div>

                        <!-- Initiative 3 -->
                        <div class="col-12 reverse-card">
                            <div class="reverse-card-inner reverse-card-inner-left"
                                style="background-color:#9E7AAC; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1);">
                                <h6>Brompton Bikes: <br>Ride Towards a Greener Future</h6>
                                <p><strong>Sustainable Mobility</strong> <br>We offer bike hire at our residences, making it
                                    easier for students to choose cycling over cars and public transport, reducing emissions
                                    while promoting a healthy lifestyle.</p>
                            </div>
                            <div class="reverse-card-inner reverse-card-inner-right">
                                <img src="/images/sustainability_brompton_bike.png" alt="" />
                            </div>
                        </div>

                        <!-- Initiative 4 -->
                        <div class="col-12 reverse-card">
                            <div class="reverse-card-inner reverse-card-inner-left"
                                style="background-color:#7A7925; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1);">
                                <h6>Marie Curie: <br>Repurposing for a Purpose</h6>
                                <p><strong>Charity & Sustainability</strong> <br>Through our housekeeping team, we collect
                                    and donate left-behind items to Marie Curie, ensuring that nothing goes to waste and
                                    those in need benefit.</p>
                            </div>
                            <div class="reverse-card-inner reverse-card-inner-right">
                                <img src="/images/sustainability_marie_curie.png" alt="" />
                            </div>
                        </div>
                    </div>
                </div>

                <!--Company Sustainability Practices-->
                <div class="cards-content mt-4 mb-5">
                    <h2 class="content-headers">Company Sustainability Practices</h2>

                    <div class="d-flex justify-content-center gap-3">
                        <div class="card flex-grow-1 text-center col-md-4 col-sm-12 col-xs-12 d-flex flex-column" style="height: 100%;">
                            <img src="/images/sustainablity_digital_approach.jpg" class="card-img-top"
                                alt="Digital First Approach">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title">Digital First Approach</h5>
                                <p class="card-text flex-grow-1">We prioritise paperless solutions to reduce our
                                    environmental impact.</p>
                            </div>
                        </div>
                        <div class="card flex-grow-1 text-center d-flex flex-column col-md-4 col-sm-12 col-xs-12" style="height: 100%;">
                            <img src="/images/sustainablity_electricy_vehicle.jpg" class="card-img-top"
                                alt="Electric Vehicles">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title">Electric Vehicles</h5>
                                <p class="card-text flex-grow-1">All company vehicles are fully electric, reducing carbon
                                    emissions.</p>
                            </div>
                        </div>
                        <div class="card flex-grow-1 text-center d-flex flex-column col-md-4 col-sm-12 col-xs-12" style="height: 100%;">
                            <img src="/images/sustainablity_laundry.jpg" class="card-img-top"
                                alt="Recycling Linens & Laundry">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title">Recycling Linens & Laundry</h5>
                                <p class="card-text flex-grow-1">Reusing materials to minimise waste and support a circular
                                    economy.</p>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </section>
@endsection