Feature

                

<!-- Feature style-01 are start -->
<div class="feature-area ptb-80">
    <div class="row">
        <div class="col-lg-3 col-md-6 col-12">
            <div class="single-feature text-center blue">
                <div class="feature-icon mb-30">
                    <a href="#">
                        <i class="icon-vector"></i>
                    </a>
                </div>
                <div class="feature-heading roboto">
                    <a href="#">Incredible Design</a>
                </div>
                <div class="feature-mini-icon">
                    <i class="zmdi zmdi-close"></i>
                </div>
                <div class="feature-content">
                    <span>Lorem ipsum dolort amet sectetur elit In augue nisl, ornare
                        volutpat aliquam eget
                        etlibura</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12">
            <div class="single-feature text-center purple">
                <div class="feature-icon mb-30">
                    <a href="#">
                        <i class="icon-layers"></i>
                    </a>
                </div>
                <div class="feature-heading roboto">
                    <a href="#">Amazing Elements</a>
                </div>
                <div class="feature-mini-icon">
                    <i class="zmdi zmdi-close"></i>
                </div>
                <div class="feature-content">
                    <span>Lorem ipsum dolort amet sectetur elit In augue nisl, ornare
                        volutpat aliquam eget
                        etlibura</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12">
            <div class="single-feature text-center green">
                <div class="feature-icon mb-30">
                    <a href="#">
                        <i class="icon-cup"></i>
                    </a>
                </div>
                <div class="feature-heading roboto">
                    <a href="#">Easy Customization</a>
                </div>
                <div class="feature-mini-icon">
                    <i class="zmdi zmdi-close"></i>
                </div>
                <div class="feature-content">
                    <span>Lorem ipsum dolort amet sectetur elit In augue nisl, ornare
                        volutpat aliquam eget
                        etlibura</span>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12">
            <div class="single-feature text-center orange">
                <div class="feature-icon mb-30">
                    <a href="#">
                        <i class="icon-earphones-alt"></i>
                    </a>
                </div>
                <div class="feature-heading roboto">
                    <a href="#">Friendly Support</a>
                </div>
                <div class="feature-mini-icon">
                    <i class="zmdi zmdi-close"></i>
                </div>
                <div class="feature-content">
                    <span>Lorem ipsum dolort amet sectetur elit In augue nisl, ornare
                        volutpat aliquam eget
                        etlibura</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Feature style-01 are end  -->

            
            

                

        /*==== featured area===== */
        .feature-icon a {
          border: 3px solid #2395ec ;
          border-radius: 100%;
          display: block;
          font-size: 45px;
          height: 150px;
          margin: auto;
          text-align: center;
          width: 150px;
          color: #2395ec;
        }
        .purple .feature-icon a {
          border: 3px solid #8F8BD5 ;
        }
        .green .feature-icon a {
          border: 3px solid #98C830 ;
        }
        .orange .feature-icon a {
          border: 3px solid #E69020 ;
        }

        .purple .feature-icon a i {
            color:#8F8BD5
        }
        .green .feature-icon a i {
            color:#98C830
        }
        .orange .feature-icon a i {
            color:#E69020
        }

        .single-feature:hover .feature-icon a i {
            color:#fff
        }
        .feature-icon a i {
          display: block;
          line-height: 150px;
        }
        .single-feature:hover .feature-icon a{
            background:#2395ec;
            border-color:#2395ec;
            color:#fff
        }
        .single-feature.purple:hover .feature-icon a{
            background:#8F8BD5;
            border-color:#8F8BD5;
        }
        .single-feature.green:hover .feature-icon a{
            background:#98C830;
            border-color:#98C830;
        }
        .single-feature.orange:hover .feature-icon a{
            background:#E69020;
            border-color:#E69020;
        }
        .single-feature:hover .feature-icon a i{
            animation: 2s ease 0s normal none infinite running rotate;
        }
        .feature-heading > a {
          display: block;
          font-size: 20px;
          letter-spacing: 1px;
          line-height: 27px;
          margin-bottom: 10px;
        }
        .single-feature:hover .feature-heading > a {
          color: #2395ec;
        }
        .single-feature.purple:hover .feature-heading > a {
          color: #8F8BD5;
        }
        .single-feature.green:hover .feature-heading > a {
          color: #98C830;
        }
        .single-feature.orange:hover .feature-heading > a {
          color: #E69020;
        }

        .feature-content > span {
            color: #4a4d4f;
            letter-spacing: 0.8px;
        }
        .feature-mini-icon {
          color: #2395ec;
        }
        .purple .feature-mini-icon {
          color: #8F8BD5;
        }

        .green .feature-mini-icon {
          color: #98C830;
        }
        .orange .feature-mini-icon {
          color: #E69020;
        }
                
            

                

        <!--==== Feature style-02 are start====
        ============================================= -->
        <div class="feature-area grey-2-bg ptb-80">
        <div class="container">
        <div class="row">
        <div class="col-lg-4 col-md-4 col-12">
        <div class="single-feature single-feature-2 text-center blue">
        <div class="feature-icon">
        <a href="#">
        <i class="icon-vector"></i>
        </a>
        </div>
        <div class="feature-text-container">
        <div class="feature-heading roboto">
        <a href="#">Incredible Design</a>
        </div>
        <div class="feature-content">
        <span>Morbi aliquam venenatis libero fertum. Rean fermentum auctor arcat dictums eros efficitur</span>
        </div>
        </div>
        </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
        <div class="single-feature single-feature-2 text-center blue">
        <div class="feature-icon">
        <a href="#">
        <i class="icon-screen-desktop"></i>
        </a>
        </div>
        <div class="feature-text-container">
        <div class="feature-heading roboto">
        <a href="#">100% Responsive</a>
        </div>
        <div class="feature-mini-icon">
        </div>
        <div class="feature-content">
        <span>Morbi aliquam venenatis libero fertum. Rean fermentum auctor arcat dictums eros efficitur</span>
        </div>
        </div>
        </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
        <div class="single-feature single-feature-2 text-center blue">
        <div class="feature-icon">
        <a href="#">
        <i class="icon-cup"></i>
        </a>
        </div>
        <div class="feature-text-container">
        <div class="feature-heading roboto">
        <a href="#">Tons of features</a>
        </div>
        <div class="feature-mini-icon">
        </div>
        <div class="feature-content">
        <span>Morbi aliquam venenatis libero fertum. Rean fermentum auctor arcat dictums eros efficitur</span>
        </div>
        </div>
        </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
        <div class="single-feature single-feature-2 text-center blue">
        <div class="feature-icon">
        <a href="#">
        <i class="icon-eye"></i>
        </a>
        </div>
        <div class="feature-text-container">
        <div class="feature-heading roboto">
        <a href="#">Retina Ready</a>
        </div>
        <div class="feature-mini-icon">
        </div>
        <div class="feature-content">
        <span>Morbi aliquam venenatis libero fertum. Rean fermentum auctor arcat dictums eros efficitur</span>
        </div>
        </div>
        </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
        <div class="single-feature single-feature-2 text-center blue">
        <div class="feature-icon">
        <a href="#">
        <i class="icon-graph"></i>
        </a>
        </div>
        <div class="feature-text-container">
        <div class="feature-heading roboto">
        <a href="#">Fully Customizable</a>
        </div>
        <div class="feature-mini-icon">
        </div>
        <div class="feature-content">
        <span>Morbi aliquam venenatis libero fertum. Rean fermentum auctor arcat dictums eros efficitur</span>
        </div>
        </div>
        </div>
        </div>
        <div class="col-lg-4 col-md-4 col-12">
        <div class="single-feature single-feature-2 text-center blue">
        <div class="feature-icon">
        <a href="#">
        <i class="icon-heart"></i>
        </a>
        </div>
        <div class="feature-text-container">
        <div class="feature-heading roboto">
        <a href="#">Friendly Support</a>
        </div>
        <div class="feature-mini-icon">
        </div>
        <div class="feature-content">
        <span>Morbi aliquam venenatis libero fertum. Rean fermentum auctor arcat dictums eros efficitur</span>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <!--feature area 02 are end-->

                
            

                
                
        /*==== For feature 02===== */
        .single-feature-2 .feature-icon a {
          border: medium none;
          font-size: 40px;
          height: auto;
          margin: auto;
          width: auto;
        }
        .single-feature-2 .feature-icon {
          float: left;
          width: 20%;
        }
        .single-feature-2 .feature-text-container {
          float: right;
          padding-left: 30px;
          text-align: left;
          width: 80%;
        }
        .single-feature-2 .feature-icon a i {
          display: block;
          line-height: normal;
        }
        .single-feature.single-feature-2:hover .feature-icon a {
          background: transparent;
        }
        .single-feature.single-feature-2:hover .feature-icon a i {
          color:#2395ec;
        }
        .single-feature-2 .feature-content > span {
          letter-spacing: inherit;
        }
        .single-feature-2 {
          margin-bottom: 60px;
          overflow: hidden;
        }
        .col-lg-4:nth-last-child(-n+3) .single-feature-2{
            margin-bottom: 0;
        }