{% extends 'main.html' %}
{% load static %}

{% block title %} Shiftingbd | About Us {% endblock title %}

{% block content %}
  <!-- page-title -->
  <div class="cmt-page-title-row about-p">
    <div class="cmt-page-title-row-inner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="page-title-heading">
                        <h2 class="title">About Us</h2>
                    </div>
                    <div class="breadcrumb-wrapper">
                        <span>
                            <a title="Homepage" href="{% url 'home' %}">Home</a>
                        </span>
                        <span>About Us</span>
                    </div>
                </div>
            </div>
        </div>
    </div>                    
</div><!-- page-title end-->


<!--site-main start-->
<div class="site-main">


<!--about_fea-section-->
<section class="cmt-row about_fea-section clearfix">
    <div class="container">
        {% for aboutUs in aboutUs %}
        <div class="row">
            <div class="col-lg-6 col-md-7 col-sm-9 mt-0 mx-auto">
                <!-- ttm_single_image-wrapper -->
                <div class="ttm_single_image-wrapper">
                    <img class="img-fluid" src="{{aboutUs.image.url}}" alt="image">
                </div>
            </div>
            <div class="col-lg-6 col-md-10">
                <div class="pt-10 res-991-pt-30 text-justify">
                    <!-- section title -->
                    <div class="section-title">
                        <div class="title-header">
                            <h5>ABOUT SHIFTING BD</h5>
                            <h2 class="title">{{ aboutUs.about_title }}</h2>
                        </div>
                        <div class="heading-seperator"><span></span></div>
                    </div><!-- section title end -->
                    <p>{{ aboutUs.about_details }}</p>
                    <p>{{ aboutUs.about_details2 }}</p>
                    <p></p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mt-15">
                                <h5><i class="fa fa-long-arrow-right mr-2"></i>Our Vision</h5>
                                <p> {{ aboutUs.our_vision }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mt-15">
                                <h5><i class="fa fa-long-arrow-right mr-2"></i>Our Mission</h5>
                                <p>{{ aboutUs.our_mission }}</p>
                            </div>
                        </div>
                    </div>
                    <a class="cmt-btn cmt-btn-size-md cmt-btn-shape-square cmt-btn-style-border cmt-btn-color-dark mt-15" href="#">Read More</a>
                </div>
            </div>
        </div><!-- row end -->
        {% endfor %}
        <div class="mt-60 mb-50 res-991-mt-40 res-991-mb-30">
            <span class="cmt-horizontal_sep"></span>
        </div>
        

            <div class="container">
            <div class="section-title">
                        <div class="title-header text-center">
                            <h5>OUR PARTNERS</h5>
                            <h2 class="title">Check the Menmber of Brand!</h2>
                        </div>
                        <div class="heading-seperator"><span></span></div>
                    </div>
            <section class="customer-logos slider pb-100 pt-20">
                {% for aboutBrand in aboutBrand %}
                <div class="slide"><a href="#"><img src="{{ aboutBrand.slider_image.url }}"></a></div>
                {% endfor %}
            </section>
            </div>




        <div class="row featuredbox-number">
            {% for aboutFeature in aboutFeature %}
            <div class="col-md-4">
                <!--featured-icon-box-->
                <div class="featured-icon-box icon-align-before-content icon-ver_align-top mb-20">
                    <div class="featured-icon">
                        <div class="cmt-icon cmt-icon_element-fill cmt-icon_element-color-grey cmt-icon_element-size-xs cmt-icon_element-style-rounded"> 
                            <i class="{{ aboutFeature.feature_icone }}"></i>
                        </div>
                    </div>
                    <div class="featured-content">
                        <div class="featured-title">
                            <h5>{{ aboutFeature.feature_title }}</h5>
                        </div>
                        <div class="featured-desc">
                            <p>{{ aboutFeature.feature_details }}</p>
                        </div>
                    </div>
                </div><!-- featured-icon-box end-->
            </div>
            {% endfor %}
        </div>
    </div>
</section>
<!--about_fea-section end-->


<section class="cmt-row broken-section clearfix">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="row no-gutters">
                    <div class="col-lg-6">
                        <div class="cmt-bg cmt-col-bgcolor-yes cmt-left-span cmt-bgcolor-darkgrey z-index-2 spacing-10">
                            <div class="cmt-col-wrapper-bg-layer cmt-bg-layer">
                                <div class="cmt-col-wrapper-bg-layer-inner"></div>
                            </div>
                            <div class="layer-content">
                                <!-- section title -->
                                {% for aboutUs in aboutUs %}
                                <div class="section-title">
                                    <div class="title-header">
                                        <h5>ABOUT SHIFTING BD</h5>
                                        <h2 class="title">{{ aboutUs.shifting_expriance_title }}</h2>
                                    </div>
                                    <div class="heading-seperator"><span></span></div>
                                </div><!-- section title end -->
                                <p>{{ aboutUs.expriance_details }}</p>
                                {% endfor %}
                                <div class="pt-15">
                                    {% for aboutProgress in aboutProgress %}
                                    <!-- cmt-progress-bar -->
                                    <div class="cmt-progress-bar" data-percent="{{aboutProgress.values}}%">
                                        <div class="progressbar-title">{{ aboutProgress.progress_title }}</div>
                                        <div class="progress-bar-inner">
                                            <div class="progress-bar progress-bar-color-bar_skincolor"></div>
                                        </div>
                                        <div class="progress-bar-percent" 
                                        data-percentage="{{aboutProgress.values}}">
                                        {{aboutProgress.values}}%
                                    </div>
                                    </div><!-- cmt-progress-bar end -->
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="cmt-bgcolor-skincolor pt-40 pl-40 pb-40 h-100 res-991-ml_15 res-991-mr_15">
                            <div class="cmt-bg cmt-right-span cmt-col-bgimage-yes col-bg-img-four">
                                <div class="cmt-col-wrapper-bg-layer cmt-bg-layer">
                                    <div class="cmt-col-wrapper-bg-layer-inner"></div>
                                </div>
                                <div class="layer-content"></div>
                                <img src="images/bg-image/col-bgimage-4.jpg" class="cmt-equal-height-image" alt="bg-image">
                                <!-- {% for aboutUs in aboutUs %}
                                <img src="{{ aboutUs.site_image.url }}" class="cmt-equal-height-image" alt="bg-image">
                                {% endfor %} -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<!--action-row-section-->
<div class="cmt-row action-row-section cmt-bgcolor-skincolor cmt-bg cmt-bgimage-yes bg-img3 clearfix mt-15">
    <div class="cmt-row-wrapper-bg-layer cmt-bg-layer"></div>
    <div class="container">
        <!-- row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="text-center">
                    <div class="featured-icon-box icon-align-top-content style4 text-center">
                        <div class="featured-icon">
                            <div class="cmt-icon cmt-icon_element-onlytxt cmt-icon_element-color-white cmt-icon_element-size-lg">
                               <i class="fas fa-tram"></i>
                            </div>
                        </div>
                        <div class="featured-content">
                            <div class="featured-desc">
                                <p>Transport  Special Offers</p>
                            </div>
                            <div class="featured-title">
                                <h5>Get A Free Transporting Services</h5>
                            </div>
                        </div>
                    </div>
                    <a class="cmt-btn cmt-btn-size-md cmt-btn-shape-square cmt-btn-style-border cmt-btn-color-white mt-15" href="" title="">Get In Touch</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--action-row-section end-->


<!--fid-section-->
<section class="cmt-row fid-border-section mt_60 res-991-mt-0 clearfix">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="cmt-bgcolor-grey z-index-2 position-relative">
                    <div class="row no-gutters cmt-vertical_sep">
                        {% for aboutBottom in aboutBottom %}
                        <div class="col-lg-3 col-md-6 col-sm-6 cmt-box-col-wrapper">
                            <!-- cmt-fid -->
                            <div class="cmt-fid inside cmt-fid-with-icon cmt-fid-view-lefticon style2">
                                <div class="cmt-fid-icon-wrapper cmt-textcolor-skincolor">
                                    <i class="{{ aboutBottom.icone }}"></i>
                                </div>
                                <div class="cmt-fid-contents">
                                    <h4 class="cmt-fid-inner">
                                        <span   data-appear-animation="animateDigits" 
                                                data-from="0" 
                                                data-to="{{ aboutBottom.values }}" 
                                                data-interval="15" 
                                                data-before="" 
                                                data-before-style="sup" 
                                                data-after="" 
                                                data-after-style="sub" 
                                                class="numinate">{{ aboutBottom.values }}
                                        </span>
                                        <sub>+</sub>
                                    </h4>
                                    <h3 class="cmt-fid-title">{{ aboutBottom.titles }}</h3>
                                </div>
                            </div><!-- cmt-fid end -->
                        </div>
                        {% endfor %}
                    </div><!-- row end -->
                </div>
            </div>
        </div>
    </div>
</section>
<!--fid-section end-->


</div><!--site-main end-->

{% endblock %}