@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="SustainabilityPage InnerPage">

        <!-- Sustainability -->
        <section id="Sustainability">
            <div class="container">
                <div class="tleWrap mblView">
                    <h2 class="mTle">{{ $cms->title }}</h2>
                </div>
                <div class="dFlx">
                    <div class="ritSd">
                        <div class="dFlx">
                            <div class="lftImg wow animate__fadeInUp" data-wow-duration="1s">
                                <div class="backImg">
                                    <img src="{{ $cms->image_one_value }}" loading="lazy" width="610" height="600"
                                        alt="{{ $cms->title }}">
                                </div>
                                <div class="backImg">
                                    <img src="{{ $cms->image_two_value }}" loading="lazy" width="610" height="600"
                                        alt="{{ $cms->title }}">
                                </div>
                            </div>
                            <div class="ritSd wow animate__fadeInRight" data-wow-duration="1.2s">
                                <div class="backImg">
                                    <img src="{{ $cms->image_three_value }}" loading="lazy" width="610" height="600"
                                        alt="{{ $cms->title }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lftSd wow animate__fadeInLeft" data-wow-duration="1s">
                        <div class="tleWrap deskview">
                            <h2 class="mTle">{{ $cms->title }}</h2>
                        </div>
                        <div class="cntWrap">
                            {!! $cms->description !!}
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- Safety -->
        <section id="Safety">
            <div class="container">
                <div class="tleWrap moblview wow animate__fadeInUp" data-wow-duration="1s">
                    <h2 class="mTle">{{ $cms->health_safety_title }}</h2>
                </div>
                <div class="dFlx">
                    <div class="lfSd wow animate__fadeInLeft" data-wow-duration="1s">
                        <div class="bgImg">
                            <img src="{{ $cms->health_safety_image_value }}" loading="lazy" width="790" height="482"
                                alt="{{ $cms->health_safety_title }}">
                        </div>
                    </div>
                    <div class="ritSd wow animate__fadeInUp" data-wow-duration="1s">
                        <div class="tleWrap">
                            <h2 class="mTle">{{ $cms->health_safety_title }}</h2>
                        </div>
                        {!! $cms->health_safety_description !!}
                        <div class="btnSec">
                            <button href="#!" class="cta-button" aria-label="Download Report" data-label="Download Report"
                                data-bs-toggle="modal" data-bs-target="#Sustainability-Sec">
                                Download Report
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>
    @include('frontend::frontend.modals.sustainability-modal')
@endsection