@extends('includes.master')
@section('title', 'About Temple')

@section('style-section')
    <style>
        @media (max-width: 768px) {
            p {
                text-align: justify !important;
            }
        }

        .img-fluid {
            max-width: 50% !important;
        }
    </style>
@section('content')
    <!-- ======= Temple Services Section ======= -->
    <section id="temple-services" class="temple-services"
        style="background-image: url({{ asset('assets/img/elegant-background-with-mandala.png') }});background-size: auto;">
        <div class=" responsive-container">
            <div class="container-fluid">
                <h2 id="temple-services mb-4" class="text-center bottomborder"
                    style="font-weight:bold!important;font-size: 35px!important;padding:20px;">About {{ GetProjectName() }}
                </h2>
                <div class="row ">
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/img/about-group1/4.jpg') }}" class="img-fluid about-temple-img"
                            style="border-radius: 50%;">
                    </div>
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/img/about-group1/5.jpg') }}" class="img-fluid about-temple-img"
                            style="border-radius: 50%;">
                    </div>
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/img/about-group1/6.jpg') }}" class="img-fluid about-temple-img"
                            style="border-radius: 50%;">
                    </div>

                    <div class="col-md-4 mt-5">
                        <h5 id="temple-services" class="text-center mb-4">WHO WE ARE</h5>
                        <p style="text-align:left;">
                            A Landmark to bring unique Spiritual, Cultural and Language experience representing World
                            Tamils.
                        </p>
                    </div>
                    <div class="col-md-4 mt-5">
                        <h5 id="temple-services" class="text-center mb-4">WHAT WE DO</h5>

                        <p>The people of the world should know the Tamil language. </p>

                    </div>
                    <div class="col-md-4 mt-5 mb-5">
                        <h5 id="temple-services" class="text-center mb-4">VISION</h5>
                        <p>The people of the world should understand Tamil Culture. </p>
                    </div>
                </div>

            </div>


        </div>
    </section><!-- End Temple Services Section -->
@endsection
<script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        window.scrollTo({
            top: 225,
            behavior: 'smooth'
        });
    });
</script>