<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="why-us" class="wrap-bg-second"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-xl-6 col-lg-5 services-detail-why why-us-left-bg2"> </div> <div class="col-xs-12 col-sm-12 col-md-12 col-xl-6 col-lg-7 wrap-padding text-left"> <div class="section-title"> <div> <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> <div class="bar"></div> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br><br></p> <div class="row"> <!-- #counter --> <div class="col-xs-12 col-sm-12 col-md-4"> <div class="info"> <!-- 1 --> <div class="themeioan_counter text-center"><!-- single counter item --> <i class="secondary-color fas fa-chalkboard-teacher fa-3x"></i> <h4>292</h4> <p>Happy Clients</p> </div><!-- end single counter item --> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4"> <!-- .row --> <div class="info"> <!-- 2 --> <div class="themeioan_counter text-center"><!-- single counter item --> <i class="secondary-color fas fa-cubes fa-3x"></i> <h4>196</h4> <p>Recently sold</p> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4"> <div class="info"> <!-- 3 --> <div class="themeioan_counter text-center"><!-- single counter item --> <i class="secondary-color fas fa-user-cog fa-3x"></i> <h4>245</h4> <p>Expert Team</p> </div><!-- end single counter item --> </div> </div> <!-- .row end --> <!-- #counter area end --> </div> </div> </div> </div> </div>

.wrap-bg-second { background-color: #2D323D;} #why-us .why-us-left-bg2 { background-image: url(https://priorlife.by/files/shutterstock_281076014__.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } #why-us .wrap-padding{ max-width: 750px; } .wrap-padding { padding: 110px 80px; } .section-title h3 { font-size: 30px; line-height: 1.2em; font-weight: 700; margin-bottom: 25px; color: #fff; } .text-left .bar { margin: 20px 0; } .bar { height: 6px; width: 90px; background: rgba(251, 129, 34, 0.42); margin: 20px auto; position: relative; } .bar::before { content: ''; position: absolute; left: 45%; top: -3px; height: 12px; width: 10px; background: #fe4c1c; } .text-left .section-title p { margin: 0; } .section-title p { max-width: 580px; font-size: 16px; line-height: 30px; color: #fff; margin: 0 auto; } .wrap-bg-second .themeioan_counter { padding: 30px 10px; background-color: rgb(255, 255, 255, .05); } .themeioan_counter { color: #fff; text-align: center; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin: 15px 0px; padding: 30px 10px; background-color: rgb(255, 255, 255, .05); } .themeioan_counter h4 { font-size: 50px; line-height: 70px; margin: 10px 0px 0px 0px; font-weight: 700; color: #fff; } .themeioan_counter p { margin: 0px; text-transform: uppercase; font-weight: 700; font-size: 13px; }