<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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <div class="section-block-grey"> <div class="container"> <div class="section-heading center-holder"> <h3>Doing the right thing at the right time</h3> <div class="section-heading-line"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>incididunt ut labore et dolore magna aliqua.</p> </div> <div class="row mt-60"> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2"> <div class="serv-section-2-icon"> <i class="fas fa-gem"></i> </div> <div class="serv-section-desc"> <h4>Planning</h4> <h5>Business Planning</h5> </div> <div class="section-heading-line-left"></div> </div> </div> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2 serv-section-2-act"> <div class="serv-section-2-icon serv-section-2-icon-act"> <i class="fas fa-cogs"></i> </div> <div class="serv-section-desc"> <h4>Management</h4> <h5>Retirement Planning</h5> </div> <div class="section-heading-line-left"></div> </div> </div> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2"> <div class="serv-section-2-icon"> <i class="fas fa-signature"></i> </div> <div class="serv-section-desc"> <h4>Accumulation</h4> <h5>Support and Sell</h5> </div> <div class="section-heading-line-left"></div> </div> </div> </div> <div class="row mt-60"> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2"> <div class="serv-section-2-icon"> <i class="fas fa-shield-alt"></i> </div> <div class="serv-section-desc"> <h4>Security </h4> <h5>Secure Business</h5> </div> <div class="section-heading-line-left"></div> </div> </div> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2 serv-section-2-act"> <div class="serv-section-2-icon serv-section-2-icon-act"> <i class="far fa-clock"></i> </div> <div class="serv-section-desc"> <h4>24/7 Available </h4> <h5>All time available </h5> </div> <div class="section-heading-line-left"></div> </div> </div> <div class="col-md-4 col-sm-12 col-12"> <div class="serv-section-2"> <div class="serv-section-2-icon"> <i class="fas fa-signature"></i> </div> <div class="serv-section-desc"> <h4> Customer Support </h4> <h5>Support and Sell</h5> </div> <div class="section-heading-line-left"></div> </div> </div> </div> </div> </div>

.mt-60{ margin-top:60px; } .section-block-grey { padding: 90px 0px 90px 0px; background-color: #f9f9f9; } .serv-section-2 { position: relative; border: 1px solid #eee; background: #fff; box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16); border-radius: 5px; overflow: hidden; padding: 30px; } .serv-section-2:before { position: absolute; top: 0; right: 0px; z-index: 0; content: " "; width: 120px; height: 120px; background: #f5f5f5; border-bottom-left-radius: 136px; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .serv-section-2-icon { position: absolute; top: 18px; right: 22px; max-width: 100px; z-index: 1; text-align: center; } .serv-section-2-icon i { color: #5f27cd; font-size: 48px; line-height: 65px; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .serv-section-desc { position: relative; } .serv-section-2 h4 { color: #333; font-size: 20px; font-weight: 500; line-height: 1.5; } .serv-section-2 h5 { color: #333; font-size: 17px; font-weight: 400; line-height: 1; margin-top: 5px; } .section-heading-line-left { content: ''; display: block; width: 100px; height: 3px; background: #5f27cd; border-radius: 25%; margin-top: 15px; margin-bottom: 5px; } .serv-section-2 p { margin-top: 25px; padding-right: 50px; } .serv-section-2:hover .serv-section-2-icon i { color: #fff; } .serv-section-2:hover:before { background: #5f27cd; }