@extends('layouts.frontendTemplate')

@section('main')

<!-- start page title section -->
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-xl-8 col-md-6 text-center text-md-start">
                <!-- start page title -->
                <h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">About us</h1>
                <!-- end page title -->
            </div>
            <div class="col-xl-4 col-md-6 alt-font breadcrumb justify-content-center justify-content-md-end text-small sm-margin-10px-top">
                <!-- start breadcrumb -->
                <ul>
                    <li><a href="{{url('')}}" class="text-dark-gray">Home</a></li>
                    <!-- <li><a href="#" class="text-dark-gray">About</a></li> -->
                    <li class="text-dark-gray">About us</li>
                </ul>
                <!-- end breadcrumb -->
            </div>
        </div>
    </div>
</section>
<!-- end page title section -->
<!-- start section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-4 text-center text-lg-start md-margin-30px-bottom md-padding-80px-lr sm-padding-15px-lr wow animate__fadeIn">
            <img src="{{ url('images/logo_greatercm_red.png') }}" width="240" class="logo-dark margin-20px-bottom" alt="GREATER CHIANG MAI">
                <!-- <h5 class="alt-font font-weight-700 text-extra-dark-gray text-uppercase w-80 lg-w-100">THE GREATER CHIANG MAI</h5> -->
                <div class="separator-line-verticle-extra-small bg-extra-dark-gray w-50 md-w-70 mx-auto ms-lg-0 margin-30px-bottom md-margin-20px-bottom"></div>
                <p class="w-95 lg-w-100">Greater Chiang Mai emphasizes the reviving Chiang Mai Spirituality through the concept of connecting the roots, curating issues and creating projects. To connect threads of tradition to contemporary people, such that culture is an unbroken chain.</p>
                <p class="w-95 lg-w-100">We work closely and efficiently with all sectors in Chiang Mai in reviving, preserving, continuing and expanding valuable Lanna cultural and natural heritage to contemporary way of life and driving creative economy in Chiang Mai, Northern Region, Thailand and other countries.</p>
                <!-- <a class="btn btn-small btn-dark-gray font-weight-700" href="team-simple.html">Meet Out Team</a> -->
            </div>
            <div class="col-12 col-lg-4 col-md-6 sm-margin-15px-bottom wow animate__fadeIn team-style-1" data-wow-delay="0.2s">
                <figure class="mb-0">
                    <div class="team-image">
                        <img src="images/about/01pic_about.jpg" alt="Aracha Boon-Long, Co-Founder"/>
                        <div class="team-overlay bg-deep-pink opacity-medium"></div>
                        <div class="overlay-content d-flex flex-column justify-content-center text-center text-white padding-30px-lr">
                            <span class="alt-font text-large d-block">อรช บุญ-หลง</span>
                            <span class="alt-font text-large d-block margin-10px-bottom">Aracha Boon-Long</span>
                            <span class="d-block">ผู้ร่วมก่อตั้ง</span>
                            <span class="d-block margin-15px-bottom">Co-Founder</span>
                            <span class="d-block text-small">Tel <a class="text-white" href="tel:+66983505444">+66 (0) 98 350 5444</a></span>
                            <span class="d-block text-small">Email <a class="text-white" href="mailto:aracha.b@greaterchiangmai.com">aracha.b@greaterchiangmai.com</a></span>
                        </div>
                    </div>
                </figure>
            </div>
            <div class="col-12 col-lg-4 col-md-6 wow animate__fadeIn team-style-1" data-wow-delay="0.4s">
                <figure class="mb-0">
                    <div class="team-image">
                        <img src="images/about/02pic_about.jpg" alt="Chittiwat Pornprasert, Documentary director"/>
                        <div class="team-overlay bg-deep-pink opacity-medium"></div>
                        <div class="overlay-content d-flex flex-column justify-content-center text-center text-white padding-30px-lr">
                            <span class="alt-font text-large d-block">จิตรทิวัส พรประเสริฐ</span>
                            <span class="alt-font text-large d-block margin-10px-bottom">Chittiwat Pornprasert</span>
                            <span class="d-block">ผู้อำนวยการฝ่ายสารคดี</span>
                            <span class="d-block margin-15px-bottom">Documentary director</span>
                            <span class="d-block text-small">Tel <a class="text-white" href="tel:+66813786086">+66 (0) 81 378 6086</a></span>
                            <span class="d-block text-small">Email <a class="text-white" href="mailto:chittiwat.p@greaterchiangmai.com">chittiwat.p@greaterchiangmai.com</a></span>
                        </div>
                    </div>
                </figure>
            </div>
        </div>
    </div>
</section>
<!-- end section -->
<!-- start feature box section -->
<section class="p-0 wow animate__fadeIn bg-light-gray">
    <div class="container-fluid">
        <div class="row row-cols-1 row-cols-lg-2">
            <div class="col d-flex align-items-center justify-content-center md-h-500px sm-h-350px wow animate__fadeInLeft">
                <img src="{{ url('images/logo_greatercm_red.png') }}" width="320" class="mw-100" alt="GREATER CHIANG MAI">
            </div>
            <div class="col padding-five-tb padding-five-half-lr lg-padding-50px-tb md-padding-70px-tb md-padding-15px-lr wow animate__fadeInRight">
                <div class="row justify-content-center m-0">
                    <div class="col-12 col-md-12 col-sm-8 margin-four-bottom lg-margin-six-bottom md-margin-40px-bottom sm-margin-30px-bottom sm-no-padding-lr text-center text-md-start">
                        <h5 class="alt-font text-extra-dark-gray text-center text-lg-start text-uppercase font-weight-700 md-w-70 mx-auto mx-lg-0 md-no-margin-bottom sm-w-100">How we work</h5>
                    </div>
                </div>
                <div class="row row-cols-1 justify-content-center m-0">
                    <!-- start feature box item-->
                    <div class="col margin-four-bottom md-margin-30px-bottom last-paragraph-no-margin text-center text-md-start">
                        <span class="text-deep-pink alt-font margin-10px-right d-block d-md-inline-block sm-no-margin">01.</span>
                        <p class="d-md-inline">Initiate, collaborate, support cultural and natural heritage projects, both traditional and contemporary, emphasizing Chiang Mai Spirituality Revival which connects the roots, curating issues and creating projects in Chiang Mai, Thailand and International networks for the interest of public</p>
                    </div>
                    <!-- end feature box item-->
                    <!-- start feature box item-->
                    <div class="col margin-four-bottom md-margin-30px-bottom last-paragraph-no-margin text-center text-md-start">
                        <span class="text-deep-pink alt-font margin-10px-right d-block d-md-inline-block sm-no-margin">02.</span>
                        <p class="d-md-inline">Driving the projects with full support and commitments of the academic, private, governmental and public partners in Chiang Mai and other areas</p>
                    </div>
                    <!-- end feature box item-->
                    <!-- start feature box item-->
                    <div class="col last-paragraph-no-margin text-center text-md-start">
                        <span class="text-deep-pink alt-font margin-10px-right d-block d-md-inline-block sm-no-margin">03.</span>
                        <p class="d-md-inline">Co-creating multidisciplinary knowledge and training to pass on the experiences to the next generation</p>
                    </div>
                    <!-- end feature box item-->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end feature box section -->
<!-- start counter section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4">
            <!-- start counter item-->
            <div class="col text-center md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp">
                <div class="counter-feature-box-1 w-100 padding-5px-all">
                    <div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
                        <i class="icon-camera icon-medium text-medium-gray margin-15px-bottom"></i>
                        <h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="450" data-speed="2000">450</h6>
                        <span>IMAGES</span>
                    </div>
                </div>
            </div>
            <!-- end counter item-->
            <!-- start counter item-->
            <div class="col text-center md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp" data-wow-delay="0.2s">
                <div class="counter-feature-box-1 w-100 padding-5px-all">
                    <div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
                        <i class="icon-laptop icon-medium text-medium-gray margin-15px-bottom"></i>
                        <h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="390" data-speed="2000">390</h6>
                        <span>VDO</span>
                    </div>
                </div>
            </div>
            <!-- end counter item-->
            <!-- start counter item-->
            <div class="col text-center xs-margin-15px-bottom wow animate__fadeInUp" data-wow-delay="0.4s">
                <div class="counter-feature-box-1 w-100 padding-5px-all">
                    <div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
                        <i class="icon-mic icon-medium text-medium-gray margin-15px-bottom"></i>
                        <h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="580" data-speed="2000">580</h6>
                        <span>SOUND</span>
                    </div>
                </div>
            </div>
            <!-- end counter item-->
            <!-- start counter item-->
            <div class="col text-center wow animate__fadeInUp" data-wow-delay="0.6s">
                <div class="counter-feature-box-1 w-100 padding-5px-all">
                    <div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
                        <i class="far fa-file icon-medium text-medium-gray margin-15px-bottom"></i>
                        <h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="674" data-speed="2000">674</h6>
                        <span>DOCUMENTS</span>
                    </div>
                </div>
            </div>
            <!-- end counter item-->
        </div>
    </div>
</section>
<!-- end feature box section -->
<!-- start parallax section -->
<section class="wow animate__fadeIn p-0 parallax one-fourth-screen md-h-500px sm-h-350px background-position-x-50" data-parallax-background-ratio="0.5" style="background-image: url('images/banner/02banner.jpg')"></section>
<!-- end parallax section -->
<!-- start information section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row justify-content-center">
            <!-- start feature box item -->
            <div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-60px-bottom sm-margin-40px-bottom text-center text-md-start wow animate__fadeInRight">
                <h5 class="text-light-gray font-weight-300 alt-font mb-0">01</h5>
                <span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">ROOT</span>
                <div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
            </div>
            <!-- end feature box item -->
            <!-- start feature box item -->
            <div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-60px-bottom sm-margin-40px-bottom text-center text-md-start wow animate__fadeInRight" data-wow-delay="0.2s">
                <h5 class="text-light-gray font-weight-300 alt-font mb-0">02</h5>
                <span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">CURATE</span>
                <div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
            </div>
            <!-- end feature box item -->
            <!-- start feature box item -->
            <div class="col-12 col-lg-4 col-md-6 col-sm-8 text-center text-md-start wow animate__fadeInRight" data-wow-delay="0.4s">
                <h5 class="text-light-gray font-weight-300 alt-font mb-0">03</h5>
                <span class="text-extra-dark-gray alt-font text-large margin-15px-bottom d-block md-margin-5px-bottom">CREATE</span>
                <div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto mx-md-0"></div>
            </div>
            <!-- end feature box item -->
        </div>
    </div>
</section>
<!-- end information sevtion -->
<!-- start section -->
<section class="extra-big-section parallax wow animate__fadeIn" data-parallax-background-ratio="0.5" style="background-image: url('images/banner/03banner.jpg')">
    <div class="opacity-full-dark bg-extra-dark-gray"></div>
    <div class="container position-relative">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8 col-md-11 text-center">
                <div class="alt-font text-medium-gray text-uppercase text-small margin-20px-bottom">Greater Chiang Mai</div>
                <h5 class="text-light-gray alt-font margin-40px-bottom sm-margin-30px-bottom">Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry.</h5>
               <!-- <a href="portfolio-full-width-grid-overlay.html" class="btn btn-medium btn-white btn-rounded">Latest Portfolio</a> -->
            </div>
        </div>
    </div>
</section>
<!-- end section -->
<!-- start clients logo section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row row-cols-1 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 align-items-center">
            <!-- start client logo item -->
            <div class="col margin-three-bottom text-center wow animate__fadeInDown">
                <a href="#"><img src="images/logo-7.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.2s">
                <a href="#"><img src="images/logo-8.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.4s">
                <a href="#"><img src="images/logo-7.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.6s">
                <a href="#"><img src="images/logo-8.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col md-margin-three-bottom text-center wow animate__fadeInDown">
                <a href="#"><img src="images/logo-7.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col md-margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.2s">
                <a href="#"><img src="images/logo-8.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col xs-margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.4s">
                <a href="#"><img src="images/logo-7.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col text-center wow animate__fadeInDown" data-wow-delay="0.6s">
                <a href="#"><img src="images/logo-8.png" alt=""></a>
            </div>
            <!-- end client logo item -->
        </div>
    </div>
</section>
<!-- end clients logo section -->

@stop

@section('js')

@endsection