@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">หน้าแรก</a></li>
                    <!-- <li><a href="#" class="text-dark-gray">About</a></li> -->
                    <li class="text-dark-gray">เกี่ยวกับเรา</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">เกรทเธอร์ เชียงใหม่ มีจุดมุ่งหมายเพื่อการฟื้นคืนจิตวิญญาณเมืองเชียงใหม่ ผ่านแนวความคิด เชื่อมโยงราก คัดสรรเรื่อง สร้างสรรค์งาน โดยมุ่งเน้นความร่วมมือระหว่างทุกภาคส่วนในจังหวัดเชียงใหม่ในการฟื้น สืบสาน ต่อยอด และขยายผลมรดกภูมิปัญญาทางวัฒนธรรมและธรรมชาติล้านนาอันทรงคุณค่าไปสู่วิถีชีวิตร่วมสมัยที่สร้างการขับเคลื่อนเศรษฐกิจสร้างสรรค์ในพื้นที่จังหวัดเชียงใหม่ โดยขยายผลไปในระดับภูมิภาค ระดับชาติ และนานาชาติ</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