<div class="edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--19">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">About Us</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item"><a href="<?php echo base_url();?>">Home</a></li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">About Us</li>
            </ul>
        </div>
    </div>
</div>
<div class="section-gap-large edu-about-area about-style-7 pb-5">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-5">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <h2 class="title"><?php echo $content_1->heading; ?></h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p><?php echo $content_1->sub_heading; ?></p>
                    </div>
                    <ul class="features-list" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <p><?php echo $content_1->content ?></p>
                    </ul>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="about-image-gallery">
                    <img class="main-img-1" src="<?php echo base_url(); ?><?php echo $content_1->image;?>" alt="About Image">
                   
                    <ul class="shape-group">
                        <li class="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                            <img data-depth="2" src="<?php echo front_css(); ?>images/about/shape-38.png" alt="Shape">
                        </li>
                        <li class="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                            <img data-depth="-2" src="<?php echo front_css(); ?>images/about/shape-37.png" alt="Shape">
                        </li>
                        <li class="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                            <img data-depth="-1.8" src="<?php echo front_css(); ?>images/about/shape-04.png" alt="Shape">
                        </li>
                        <li class="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                            <img src="<?php echo front_css(); ?>images/counterup/shape-02.png" alt="Shape">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <ul class="shape-group">
        <li class="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200"></li>
    </ul>
</div>

<section class="why-choose-area-2 section-gap-large">
    <div class="container edublink-animated-shape">
        <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
            
            <h2 class="title"><?php echo $content_2->heading; ?></h2>
            <span class="pre-title"><?php echo $content_2->sub_heading; ?></span>
            <span class="shape-line"><i class="icon-19"></i></span>
        </div>
        <div class="row g-5">
            <?php foreach ($content_2_i as $key => $content): ?>    
                <div class="col-lg-4" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <div class="why-choose-box features-box color-primary-style">
                        <div class="icon">
                            <img src="<?php echo base_url()?><?php echo $content->image; ?>" alt="<?php echo $content->heading; ?>" style="width: 40px;">
                        </div>
                        <div class="content">
                            <h4 class="title"><?php echo $content->heading; ?></h4>
                            <p><?php echo mb_strimwidth($content->des, 0, 100, "..."); ?></p>
                        </div>
                    </div>
                </div>
            <?php endforeach ?>
        </div>
        <ul class="shape-group">
            <li class="shape-5" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                <span></span>
            </li>
        </ul>
    </div>
    <ul class="shape-group">
        <li class="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
            <span data-depth="1"></span>
        </li>
        <li class="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
            <img data-depth="-2" src="<?php echo front_css(); ?>images/about/shape-13.png" alt="shape">
        </li>
        <li class="shape-3 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
            <span data-depth="-1"></span>
        </li>
        <li class="shape-4 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
            <img data-depth="2" src="<?php echo front_css(); ?>images/about/shape-40.png" alt="shape">
        </li>
    </ul>
</section>

<div class="cta-area-1 mb-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8">
                <div class="home-four-cta edu-cta-box cta-style-3 bg-image bg-image--16">
                    <div class="inner">
                        <div class="testimonial-heading-area">
                            <div class="section-title section-left sal-animate text-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                                <h2 class="title"><?php echo $content_3->heading?></h2>
                                <p class="text-white" ><?php echo $content_3->sub_heading?></p>
                            </div>
                        </div>
                    </div>
                    <ul class="shape-group">
                        <li class="shape-01 scene">
                            <img data-depth="2" src="<?php echo front_css(); ?>images/cta/shape-06.png" alt="shape">
                        </li>
                        <li class="shape-02 scene">
                            <img data-depth="-2" src="<?php echo front_css(); ?>images/cta/shape-12.png" alt="shape">
                        </li>
                        <li class="shape-03 scene">
                            <img data-depth="-3" src="<?php echo front_css(); ?>images/cta/shape-04.png" alt="shape">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="why-choose-area-3 edu-section-gap mt-5 pb-5">
    <div class="container">
        <div class="row row--45">
            <div class="section-title-flex section-title" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                <div class="left-content">
                    <h2 class="title"><?php echo $content_4_i->heading; ?></h2>
                    <span class="shape-line"><i class="icon-19"></i></span>
                </div>
                <div class="right-content">
                    <p><?php echo $content_4_i->sub_heading; ?></p>
                </div>
            </div>
        </div>

        <div class="row g-5">
            <?php foreach ($content_4_ii as $key => $content): ?>   
                <div class="col-lg-4" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <div class="why-choose-box-2 features-box color-primary-style">
                        <div class="icon">
                            <i class="fa <?php echo $content->icon; ?>"></i>
                        </div>
                        <div class="content">
                            <h4 class="title"><?php echo $content->heading; ?></h4>
                            <p><?php echo mb_strimwidth($content->sub_heading, 0, 100, "..."); ?></p>
                        </div>
                    </div>
                </div>
            <?php endforeach ?>
        </div>
    </div>
    <ul class="shape-group">
        <li class="shape-1 scene">
            <span data-depth=".8"></span>
        </li>
        <li class="shape-2 scene">
            <img data-depth="-2" src="<?php echo front_css(); ?>images/about/shape-13.png" alt="shape">
        </li>
        <li class="shape-3">
            <img data-parallax='{"x": 0, "y": 100}' src="<?php echo front_css(); ?>images/faq/shape-12.png" alt="shape">
        </li>
    </ul>
</section>
 <div class="edu-team-area team-area-5 section-gap-large pt-5 pb-5">
    <div class="container">
        <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
            <span class="pre-title"><?php echo $content_6_i->sub_heading; ?></span>
            <h2 class="title"><?php echo $content_6_i->heading; ?></h2>
            <span class="shape-line"><i class="icon-19"></i></span>
        </div>
        <div class="row g-5">
            <?php foreach ($content_6_ii as $key => $instractor):?>
                <div class="col-lg-4 col-md-6" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <div class="edu-team-grid team-style-2">
                        <div class="inner">
                            <div class="thumbnail-wrap">
                                <div class="thumbnail">
                                    <a href="#">
                                        <img src="<?php echo base_url(); ?><?php echo $instractor->image; ?>" alt="<?php echo $instractor->name; ?>">
                                    </a>
                                </div>
                                <!-- <ul class="team-share-info">
                                    <li><a href="#"><i class="icon-facebook"></i></a></li>
                                    <li><a href="#"><i class="icon-twitter"></i></a></li>
                                    <li><a href="#"><i class="icon-linkedin2"></i></a></li>
                                </ul> -->
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="team-details.html"><?php echo $instractor->name; ?></a></h5>
                                <span class="designation"><?php echo $instractor->designation; ?></span>
                                <p><?php echo $instractor->des; ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
    <ul class="shape-group">
        <li class="shape-1 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
            <span data-depth=".8"></span>
        </li>
        <li class="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
            <img data-depth="-2" src="<?php echo front_css(); ?>images/about/shape-13.png" alt="shape">
        </li>
        <li class="shape-3" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
            <span></span>
        </li>
    </ul>
</div>