<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--===========================================--> <section class="section-75 section-bottom-60 section-md-100 bg-default bg-image" style="background-image: url(http://hmbarman.com/wp-content/uploads/2016/05/slider-03.jpg);"> <div class="container"> <div class="row row-40 no-gutters justify-content-center justify-content-md-end align-items-center"> <div class="col-sm-10 col-md-7 col-lg-6 col-xl-5" style="max-width:430px;"> <div class="box bg-cello section-relative"> <h3 class="text-white abouts_h">About Us</h3> <p class="text-white abouts_p">We are dedicated to providing professional service with the highest degree of honesty and integrity, and strive to add value to our tax and consulting services.</p> <ul class="list-marked"> <li class="text-white">Highly Competent Professionals</li> <li class="text-white">Affordable Prices</li> <li class="text-white">High Successful Recovery</li> </ul> <div class="button-block"><a class="btn btn-icon btn-icon-right btn-white-outline" href="appointment.html"><span class="icon icon-xs-smaller fa-angle-right text-primary"></span>make An Appointment</a></div> </div> </div> <div class="col-sm-10 col-md-4 col-lg-3 col-xl-2 box-list-xs" style="margin-top: 25px;"> <div class="counter-boxed box-xs bg-cello text-center"> <div class="counter animated">23</div> <div class="offset-top-5"> <p class="text-bismark text-sbold">Consultants</p> </div> </div> <div class="counter-boxed box-xs bg-cello text-center"> <div class="counter animated">546</div> <div class="offset-top-5"> <p class="text-bismark text-sbold">Happy Clients</p> </div> </div> <div class="counter-boxed box-xs bg-cello text-center"> <div class="counter animated">17</div> <div class="offset-top-5"> <p class="text-bismark text-sbold" style="line-height:1.2;">Years of Experience</p> </div> </div> </div> </div> </div> </section>

.section-bottom-60 { padding-bottom: 60px; } .section-75 { padding-top: 75px; padding-bottom: 75px; } .bg-image { -webkit-background-size: cover; background-size: cover; background-position: center top; background-repeat: no-repeat; } .row-40 { margin-bottom: -40px; } .align-items-center { align-items: center !important; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; } .row-40 > * { margin-bottom: 40px; } .box { box-shadow: 0 5px 23px 0 rgba(0, 0, 0, 0.3); padding: 50px 30px; } .section-relative { position: relative; } .bg-cello { background: #1e3953; fill: #1e3953; } .bg-cello { color: rgba(255, 255, 255, 0.5); } h3 + p { margin-top: 40px; } .box .abouts_h{ font-size: 45px; font-weight: 700; } .abouts_p{ font-size: 15px; font-weight: 500; } .text-white { color: #fff !important; } * + p, * + p { margin-top: 14px; } h3 + *, .h3 + * { margin-top: 25px; } * + .list-marked, * + .list-ordered { margin-top: 22px; } ul, ol { list-style: none; padding: 0; margin: 0; } .list-marked li { color: #000; position: relative; padding-left: 32px; } .list-marked li:before { position: absolute; top: 1px; left: 0; content: '\2713'; display: inline-block; margin-right: 11px; font-size: 13px; line-height: inherit; vertical-align: middle; color: #93c83f; font-weight: 700; } } .list-marked li:not(:last-child):after { content: ';'; } .list-marked + .button-block { margin-top: 45px; } .btn.btn-icon-right { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .btn.btn-icon { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; } .btn.btn-icon .icon { position: relative; top: 1px; display: inline-block; width: auto; height: auto; line-height: 0; vertical-align: middle; transition: 0s; } .btn.btn-icon-right .icon { margin-left: 10px; } .btn-white-outline .icon.text-primary { color: #fff; } [class*='fa-']:before { font-weight: 400; font-family: 'FontAwesome'; } .icon:before { display: inline-block; font-weight: 400; font-style: normal; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-angle-right:before { content: "\f105"; font-size: 32px; position: relative; left: 5.9em; top: 2px; } .box-list-xs { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.2); } .counter { font: 900 45px/45px "Ubuntu", Helvetica, Arial, sans-serif; margin-bottom: 0; color: #fff; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 1; will-change: transform; } .offset-top-5 { margin-top: 5px; } .text-bismark { color: #496a8a !important; } .box-xs { padding: 38px 20px; } .bg-cello { background: #1e3953; fill: #1e3953; } .box-xs { padding: 38px 20px; border-bottom: 1px solid #2b2828b8; } .text-sbold { font-weight: 600; } .button-block a{ border: 1px solid; border-color: #fff; padding: 11px; color: #fff; font-size: 16px; font-weight: 600; padding-right: 29px; padding-top: 13px; padding-bottom: 13px; } .button-block a:hover{ color: #fff; } @media (max-width: 1599px) and (min-width: 992px){ .list-marked li:before { font-size: 17px; } } @media (max-width: 1599px) and (min-width: 992px){ .list-marked li { padding-left: 24px; font-size: 13px; font-weight: 600; } } @media (min-width: 992px){ .box { padding: 55px 30px 65px 44px; } } @media (min-width: 1200px){ .box { padding: 75px 40px 85px 54px; } } @media (min-width: 768px){ .justify-content-md-end { justify-content: flex-end !important; } } @media (min-width: 768px){ .section-md-100 { padding-top: 100px; padding-bottom: 100px; } }