@extends('frontend.layouts.app')

@section('title')
Climate Change | Philippine Green Building Initiative (PGBI)
@endsection

@section('seo')
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Climate Change | Philippine Green Building Initiative (PGBI)" />
<meta property="og:url" content="{{ url('climate-change') }}" />
<meta property="og:site_name" content="Climate Change | Philippine Green Building Initiative (PGBI)" />
<meta property="og:image" content="{{ asset('images/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/meta-thumbnail.jpg') }}" />
@endsection

@section('content')
{{-- BANNER --}}
<div class="container-fluid px-0 mb-5 bg-bannner" style="background-image: url('{{ asset('images/banner-other.jpg') }}');">
</div>

<div class="container mb-5 overflow-hidden">
  <h2 class="fw-bold mb-5" data-aos="fade-up" data-aos-duration="1000">GREEEN Buildings</h2>

  <h2 class="color-light-green fw-semibold" data-aos="fade-up" data-aos-duration="2000">CLIMATE CHANGE RESILIENT PILIT HOUSE</h2>
  <h2 class="fw-semibold mb-5" data-aos="fade-up" data-aos-duration="3000">GREEEN Kamagong Award</h2>

  <div class="row gy-5 mb-5">
    <div class="col-12 col-md" data-aos="fade-right" data-aos-duration="1500">
      <p>CLIMATE CHANGE RESILIENT PILOT HOUSE</p>
      <p>GREEN Kamagong Award</p>
      <p>Annual Energy Use Savings: 53 to 92%</p>
      <p>Renewable Energy Use:  16.58%</p>
      <p>Energy Utilization Index (EUI) in kWh/Sq M/Year: ≤ 10.6</p>
      <p>Annual Greenhouse Gas Emissions Reduced (in CO2): ≥ 0.4 tCo2/Yr</p>
      <p>Site Utilization & Environmental Response: Sustainable</p>
      <p>Material Use and Sourcing: Low Impact</p>
      <p>Solid Waste Collection & Segregation: Practiced</p>
      <p>Annual Water Use Savings: ≥ 23%</p>
      <p>Passive Design (Daylightning & Natural Ventilation): Excellent</p>
      <p>Thermal: Acceptable</p>
      <p>Indoor Air Quality: Acceptable</p>
      <p>GREEEN Construction & Building Operations: Practiced & Documented</p>
      <p>Climate Change Resiliency: Prepared</p>

      <div class="d-md-block d-none" style="margin-bottom: 26rem"></div>

      <div class="row">
        <div class="col-6 col-md-5">
          <div class="vstack gap-2">
            <a href="{{ url('museum') }}">
              <button class="text-white text-decoration-none py-3 w-100 bg-light-green border-0">NEXT</button>
            </a>

            <a href="{{ url('greeen-building') }}">
              <button class="text-white text-decoration-none py-3 w-100 bg-light-green border-0">PREVIOUS</button>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md">
      <div class="img-effect mb-3" data-aos="fade-left" data-aos-duration="1000" style="background-image: url('{{ asset('images/greeen-4.jpg') }}');">
        <div class="align-self-end p-4">
          <span class="text-white">Lorem Ipsum viverra mauris</span>
        </div>
      </div>
      <div class="img-effect mb-3" data-aos="fade-left" data-aos-duration="2000" style="background-image: url('{{ asset('images/greeen-5.jpg') }}');">
        <div class="align-self-end p-4">
          <span class="text-white">Lorem Ipsum viverra mauris</span>
        </div>
      </div>
      <div class="img-effect mb-3" data-aos="fade-left" data-aos-duration="3000" style="background-image: url('{{ asset('images/greeen-6.jpg') }}');">
        <div class="align-self-end p-4">
          <span class="text-white">Lorem Ipsum viverra mauris</span>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection