<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 class="second-section"> <div class="container about-section"> <div class="row"> <div class="col-sm-4 for-color"> <div class="about"> <h2 class="wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.2s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s;">About Us</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley </p> <a href="about-us.html" class="about-bt hvr-bounce-to-right">Read More <span class="text-right"><i class="fa fa-inverse fa-long-arrow-right"></i></span></a> </div> <!-- /.about --> </div> <!-- /.col-lg-4 col-md-4 col-sm-4 --> <div class="col-sm-8 service service_heading "> <h2 class="wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.2s" id="servicehome" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s;">Services</h2> <div class="row"> <div class="col-xs-4 col-sm-2 col-md-2"> <img src="http://demo.lorvent.com/consultancy/images/icons/business.png" class="img-responsive serv" alt="business"> </div> <div class="col-md-4 col-sm-4 col-xs-8"> <div class="business2 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.2s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s;"> <p class="newse2">Business Consulting</p> <p class="news6">There are many variations of passages of Lorem Ipsum available majority have suffered.</p> </div> <!-- /.business --> </div> <!-- /.col-lg-4 col-md-4 col-sm-4 --> <div class="col-xs-4 col-sm-2 col-md-2"> <img src="http://demo.lorvent.com/consultancy/images/icons/business.png" class="img-responsive serv" alt="lawyer"> </div> <div class="col-md-4 col-sm-4 col-xs-8"> <div class="business2 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.2s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s;"> <p class="newse2">Lawyer Consulting</p> <p class="news6">There are many variations of passages of Lorem Ipsum available majority have suffered.</p> </div> <!-- /.business --> </div> <!-- /.col-lg-4 col-md-4 col-sm-4 --> <div class="col-xs-4 col-sm-2 col-md-2"> <img src="http://demo.lorvent.com/consultancy/images/icons/business.png" class="img-responsive serv" alt="online"> </div> <div class="col-md-4 col-sm-4 col-xs-8"> <div class="business2 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.4s;"> <p class="newse2">Online Consulting</p> <p class="news6">There are many variations of passages of Lorem Ipsum available majority have suffered.</p> </div> <!-- /.business --> </div> <!-- /.col-lg-4 col-md-4 col-sm-4 --> <div class="col-xs-4 col-sm-2 col-md-2"> <img src="http://demo.lorvent.com/consultancy/images/icons/business.png" class="img-responsive serv" alt="it management"> </div> <div class="col-md-4 col-sm-4 col-xs-8"> <div class="business2 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.4s;"> <p class="newse2">IT Managment</p> <p class="news6">There are many variations of passages of Lorem Ipsum available majority have suffered.</p> </div> <!-- /.business --> </div> <!-- /.col-lg-4 col-md-4 col-sm-4 --> </div> <!-- /.row --> </div> <!-- /.service --> </div> <!-- /.row --> </div> <!-- /.container --> </div>

/*========================== ABOUT PAGE STYLES =======================*/ .style { margin: 0 17px 90px 0; line-height: 35px; font-size: 16px; } .second-section { float: left; width: 100%; background: url(../images/icons/strech-bar.png) left top no-repeat; background-size: 100% 100%; margin-top: -6px; } .second-section2 { float: left; width: 100%; background: url(../images/icons/strech2.png) left top no-repeat; background-size: 100% 100%; margin-top: -20px; } .about2 { background: #fe5722; padding: -2px 15px 95px 0; color: #FFFFFF; } .about2 h2 { font-size: 25px; color: #FFF; text-transform: uppercase; background: transparent url("../images/icons/h2-line.png") no-repeat scroll left bottom; padding-bottom: 2px; margin-bottom: 21px; font-weight: 600; margin-top: 18px; } .services { font-size: 25px; color: #FFF; text-transform: uppercase; background: transparent url("../images/icons/h2-line.png") no-repeat scroll left bottom; padding-bottom: 4px; margin-bottom: 21px; font-weight: 600; margin-top: 6px; } .about { background: #03a9f5; padding: 0 15px 90px 0; margin-top: -20px; } .about h2 { font-size: 25px; color: #fff; text-transform: uppercase; background: url(../images/icons/h2-line.png) left bottom no-repeat; padding-top: 80px; padding-bottom: 10px; margin-bottom: 40px; font-weight: 600; } .about2 h2 { font-size: 25px; color: #fff; text-transform: uppercase; background: url(http://demo.lorvent.com/consultancy/images/icons/h2-line.png) left bottom no-repeat; padding-top: 100px; padding-bottom: 10px; margin-bottom: 38px; font-weight: 600; } .about p { font-size: 16px; color: #fff; line-height: 26px; padding: 0 30px 88px 0; } .about-bt { color: #fff; font-size: 16px; border: 1px solid #fff; padding: 9px 10px 9px 15px; margin-bottom: 20%; } .about-bt i { padding-left: 20px; } .about-bt:hover { color: #fff; } .about-bt2 { color: #fff; font-size: 16px; border: 1px solid #fff; padding: 9px 10px 9px 15px; margin-bottom: 15%; } .about-bt2 i { padding-left: 20px; } .about-bt2:hover { color: #fff; } .service { background-color: #f1f1f1; margin-top: 14px; } .service h2 { font-size: 25px; text-transform: uppercase; padding-bottom: 12px; margin-bottom: -1px; font-weight: 600; margin-top: 58px; } #servicehome { font-size: 25px; color: #0E4971; text-transform: uppercase; background: url(http://demo.lorvent.com/consultancy/images/icons/h2-lineb.png) left bottom no-repeat; padding-top: 66px; margin: 0 0 39px 40px; font-weight: 600; padding-bottom: 10px; } #servicehome1 { font-size: 25px; color: #114366; text-transform: uppercase; background: url(http://demo.lorvent.com/consultancy/images/icons/h2-lineb.png) left bottom no-repeat; padding-top: 100px; margin: 0 0 40px 40px; font-weight: 600; padding-bottom: 10px; } #servicehome2 { font-size: 25px; text-transform: uppercase; background: url(http://demo.lorvent.com/consultancy/images/icons/h2-lineb.png) left bottom no-repeat; margin: 108px 0 25px; padding-bottom: 15px; } .online { float: left; width: 100%; background: url(../images/icons/online.png) left top no-repeat; } .dedicated { float: left; width: 100%; background: url(../images/icons/dedicated.png) left top no-repeat; } .it { float: left; width: 100%; background: url(../images/icons/it.png) left top no-repeat; } .business2 { margin-bottom: 32px; } .business, .online, .it, .dedicated { padding-left: 89px; margin-bottom: 32px; } .business h3, .it h3, .online h3 { font-family: "Karla", sans-serif; font-size: 18px; color: #072643; text-transform: uppercase; margin-bottom: 7px; line-height: 20px; } .business p, .it p, .online p { font-size: 15px; color: #698591; line-height: 26px; font-family: "Karla", sans-serif; } .logo-align { margin-top: 92px; } /*========================== ABOUT PAGE STYLES END =======================*/