@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="images/logo_thegreaterchiangmai_2.png" 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" data-wow-delay="0.2s">
                <img src="images/about/01pic_about.jpg" alt="GREATER CHIANG MAI"/>
            </div>
            <div class="col-12 col-lg-4 col-md-6 wow animate__fadeIn" data-wow-delay="0.4s">
                <img src="images/about/02pic_about.jpg" alt="GREATER CHIANG MAI"/>
            </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 cover-background md-h-500px sm-h-350px wow animate__fadeInLeft" style="background-image:url('images/banner/image_2.jpg');"><div class="h-sm-400px"></div></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">GREATER CHIANG MAI</h5>
                    </div>
                </div>
                <div class="row row-cols-1 row-cols-xl-2 row-cols-lg-1 row-cols-md-2 row-cols-sm-2 justify-content-center m-0">
                    <!-- start feature box item-->
                    <div class="col margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
                        <div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">01.</span>We believe in Tradition</div>
                        <p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                    </div>
                    <!-- end feature box item-->
                    <!-- start feature box item-->
                    <div class="col margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
                        <div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">02.</span>We believe in Culture</div>
                        <p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                    </div>
                    <!-- end feature box item-->
                    <!-- start feature box item-->
                    <div class="col lg-margin-six-bottom md-margin-40px-bottom last-paragraph-no-margin text-center text-md-start">
                        <div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">03.</span>We believe in Rituals</div>
                        <p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                    </div>
                    <!-- end feature box item-->
                    <!-- start feature box item-->
                    <div class="col last-paragraph-no-margin text-center text-md-start">
                        <div class="text-extra-dark-gray margin-10px-bottom alt-font"><span class="text-deep-pink margin-10px-right d-block d-md-inline-block sm-no-margin">04.</span>We believe in relation</div>
                        <p class="w-90 sm-w-100">Lorem Ipsum is simply text the printing and typesetting standard industry. Lorem Ipsum has been the industry's standard dummy text.</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">Title</span>
                <p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
                <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">Title</span>
                <p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
                <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">Title</span>
                <p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been standard dummy text ever since. Lorem Ipsum been the industry. Lorem Ipsum has been.</p>
                <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 -->
<!-- start section -->
<section class="p-0 bg-light-gray wow animate__fadeIn">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-lg-5 order-1 order-lg-2 text-center text-lg-start offset-lg-1 md-padding-50px-all sm-padding-15px-lr">
                <i class="fas fa-quote-left text-deep-pink icon-medium margin-15px-bottom"></i>
                <h5 class="text-extra-dark-gray alt-font text-uppercase font-weight-700">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h5>
                <p class="w-90 md-w-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                <img src="images/signature-dark.png" alt="" class="margin-15px-top">
                <span class="text-extra-dark-gray text-large d-block margin-30px-top alt-font font-weight-600">Name Surname</span>
                <span class="d-block">Greater Chiang Mai</span>
            </div>
            <div class="col-12 col-lg-6 order-2 order-lg-1 text-center align-self-end">
                <img src="images/about/03_about_us_greaterchiangmai.jpg" alt="GREATER CHIANG MAI">
            </div>
        </div>
    </div>
</section>
<!-- end section -->
<!-- start call to action section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8 col-md-10 text-center">
            </div>
        </div>
    </div>
</section>
<!-- end call to action section -->

@stop

@section('js')

@endsection