"Departments"
Bootstrap 4.1.1 Snippet by saikrishna99666

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="department"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="department-top text-center"> <h4>Our Departments</h4> <img src="images/heartbeat.png" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eius inventore magni quod voluptate, molestiae eos odio illo.</p> </div> </div> <div class="col-md-12"> <div class="row"> <div class="col-md-4 nav"> <a class="nav-link mr-4 mb-4" data-toggle="pill" href="#neuro"> <img src="images/dep-3.png" alt=""> <p>Neurology</p> </a> <a class="nav-link mb-4" data-toggle="pill" href="#gastro"> <img src="images/dep-4.png" alt=""> <p>Gastrology</p> </a> <a class="nav-link mr-4 mb-4" data-toggle="pill" href="#urology"> <img src="images/dep-5.png" alt=""> <p>Urology</p> </a> <a class="nav-link mb-4" data-toggle="pill" href="#dental"> <img src="images/dep-6.png" alt=""> <p>Dental Care</p> </a> <a class="nav-link mr-4 mb-4" data-toggle="pill" href="#gyneco"> <img src="images/dep-7.png" alt=""> <p>Gynecology</p> </a> <a class="nav-link mb-4" data-toggle="pill" href="#child"> <img src="images/dep-8.png" alt=""> <p>Child Care</p> </a> </div> <div class="col-md-8 tab-content"> <div class="tab-pane fade show active" id="medicine" role="tabpanel"> <div class="row"> <div class="col-md-12 box-heading"> <h4>Generel Medicine</h4> </div> <div class="col-md-7 content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod labore animi ratione a. Facilis voluptatibus nesciunt voluptate, totam tempore quia culpa, reprehenderit harum reiciendis optio consequuntur odit possimus perferendis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, vitae facilis. Deserunt consequatur possimus ratione voluptate perspiciatis. Tempora excepturi illo reprehenderit delectus.</span> </p> <ul class="list-unstyled"> <li><i class="fa fa-check"></i> Facilis voluptatibus nesciunt.</li> <li><i class="fa fa-check"></i> Consectetur adipisicing elit.</li> <li><i class="fa fa-check"></i> Deserunt consequatur.</li> </ul> </div> <div class="col-md-5 image-box"> <img src="images/tab-1.jpg" alt="" class="img-fluid"> <a href="">Read More</a> </div> </div> </div> <div class="tab-pane fade" id="cardio" role="tabpanel"> <div class="row"> <div class="col-md-12 box-heading"> <h4>Cardiology</h4> </div> <div class="col-md-7 content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod labore animi ratione a. Facilis voluptatibus nesciunt voluptate, totam tempore quia culpa, reprehenderit harum reiciendis optio consequuntur odit possimus perferendis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, vitae facilis. Deserunt consequatur possimus ratione voluptate perspiciatis. Tempora excepturi illo reprehenderit delectus.</span> </p> <ul class="list-unstyled"> <li><i class="fa fa-check"></i> Facilis voluptatibus nesciunt.</li> <li><i class="fa fa-check"></i> Consectetur adipisicing elit.</li> <li><i class="fa fa-check"></i> Deserunt consequatur.</li> </ul> </div> <div class="col-md-5 image-box"> <img src="images/tab-2.jpg" alt="" class="img-fluid"> <a href="">Read More</a> </div> </div> </div> <div class="tab-pane fade" id="neuro" role="tabpanel"> <div class="row"> <div class="col-md-12 box-heading"> <h4>Neurology</h4> </div> <div class="col-md-7 content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod labore animi ratione a. Facilis voluptatibus nesciunt voluptate, totam tempore quia culpa, reprehenderit harum reiciendis optio consequuntur odit possimus perferendis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, vitae facilis. Deserunt consequatur possimus ratione voluptate perspiciatis. Tempora excepturi illo reprehenderit delectus.</span> </p> <ul class="list-unstyled"> <li><i class="fa fa-check"></i> Facilis voluptatibus nesciunt.</li> <li><i class="fa fa-check"></i> Consectetur adipisicing elit.</li> <li><i class="fa fa-check"></i> Deserunt consequatur.</li> </ul> </div> <div class="col-md-5 image-box"> <img src="images/tab-3.jpg" alt="" class="img-fluid"> <a href="">Read More</a> </div> </div> </div> <div class="tab-pane fade" id="gastro" role="tabpanel"> <div class="row"> <div class="col-md-12 box-heading"> <h4>Gastrology</h4> </div> <div class="col-md-7 content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod labore animi ratione a. Facilis voluptatibus nesciunt voluptate, totam tempore quia culpa, reprehenderit harum reiciendis optio consequuntur odit possimus perferendis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, vitae facilis. Deserunt consequatur possimus ratione voluptate perspiciatis. Tempora excepturi illo reprehenderit delectus.</span> </p> <ul class="list-unstyled"> <li><i class="fa fa-check"></i> Facilis voluptatibus nesciunt.</li> <li><i class="fa fa-check"></i> Consectetur adipisicing elit.</li> <li><i class="fa fa-check"></i> Deserunt consequatur.</li> </ul> </div> <div class="col-md-5 image-box"> <img src="images/tab-4.jpg" alt="" class="img-fluid"> <a href="">Read More</a> </div> </div> </div> <div class="tab-pane fade" id="urology" role="tabpanel"> <div class="row"> <div class="col-md-12 box-heading"> <h4>Urology</h4> </div> <div class="col-md-7 content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod labore animi ratione a. Facilis voluptatibus nesciunt voluptate, totam tempore quia culpa, reprehenderit harum reiciendis optio consequuntur odit possimus perferendis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, vitae facilis. Deserunt consequatur possimus ratione voluptate perspiciatis. Tempora excepturi illo reprehenderit delectus.</span> </p> <ul class="list-unstyled"> <li><i class="fa fa-check"></i> Facilis voluptatibus nesciunt.</li> <li><i class="fa fa-check"></i> Consectetur adipisicing elit.</li> <li><i class="fa fa-check"></i> Deserunt consequatur.</li> </ul> </div> <div class="col-md-5 image-box"> <img src="images/tab-5.jpg" alt="" class="img-fluid"> <a href="">Read More</a> </div> </div> </div> <div class="tab-pane fade" id="dental" role="tabpanel"> <div class="row"> <div class="col-md-12 box-heading"> <h4>Dental Care</h4> </div> <div class="col-md-7 content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod labore animi ratione a. Facilis voluptatibus nesciunt voluptate, totam tempore quia culpa, reprehenderit harum reiciendis optio consequuntur odit possimus perferendis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, vitae facilis. Deserunt consequatur possimus ratione voluptate perspiciatis. Tempora excepturi illo reprehenderit delectus.</span> </p> <ul class="list-unstyled"> <li><i class="fa fa-check"></i> Facilis voluptatibus nesciunt.</li> <li><i class="fa fa-check"></i> Consectetur adipisicing elit.</li> <li><i class="fa fa-check"></i> Deserunt consequatur.</li> </ul> </div> <div class="col-md-5 image-box"> <img src="images/tab-6.jpg" alt="" class="img-fluid"> <a href="">Read More</a> </div> </div> </div> <div class="tab-pane fade" id="gyneco" role="tabpanel"> <div class="row"> <div class="col-md-12 box-heading"> <h4>Gynecology</h4> </div> <div class="col-md-7 content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod labore animi ratione a. Facilis voluptatibus nesciunt voluptate, totam tempore quia culpa, reprehenderit harum reiciendis optio consequuntur odit possimus perferendis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, vitae facilis. Deserunt consequatur possimus ratione voluptate perspiciatis. Tempora excepturi illo reprehenderit delectus.</span> </p> <ul class="list-unstyled"> <li><i class="fa fa-check"></i> Facilis voluptatibus nesciunt.</li> <li><i class="fa fa-check"></i> Consectetur adipisicing elit.</li> <li><i class="fa fa-check"></i> Deserunt consequatur.</li> </ul> </div> <div class="col-md-5 image-box"> <img src="images/tab-7.jpg" alt="" class="img-fluid"> <a href="">Read More</a> </div> </div> </div> <div class="tab-pane fade" id="child" role="tabpanel"> <div class="row"> <div class="col-md-12 box-heading"> <h4>Child Care</h4> </div> <div class="col-md-7 content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod labore animi ratione a. Facilis voluptatibus nesciunt voluptate, totam tempore quia culpa, reprehenderit harum reiciendis optio consequuntur odit possimus perferendis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, vitae facilis. Deserunt consequatur possimus ratione voluptate perspiciatis. Tempora excepturi illo reprehenderit delectus.</span> </p> <ul class="list-unstyled"> <li><i class="fa fa-check"></i> Facilis voluptatibus nesciunt.</li> <li><i class="fa fa-check"></i> Consectetur adipisicing elit.</li> <li><i class="fa fa-check"></i> Deserunt consequatur.</li> </ul> </div> <div class="col-md-5 image-box"> <img src="images/tab-8.jpg" alt="" class="img-fluid"> <a href="">Read More</a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <h1>Our Medical Services</h1> <section class="service-area2"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="service2-top text-center"> <h4>Our Medical Services</h4> <img src="images/heartbeat.png" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint eius inventore magni quod voluptate, molestiae eos odio illo.</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-5.png" alt=""> </div> <div class="box-content"> <h6>Medical Counseling</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-2.png" alt=""> </div> <div class="box-content"> <h6>Emergency Care</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-8.png" alt=""> </div> <div class="box-content"> <h6>Inhouse Pharmecy</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-4.png" alt=""> </div> <div class="box-content"> <h6>24 Hours Service</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-7.png" alt=""> </div> <div class="box-content"> <h6>Special Care Unit</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-6.png" alt=""> </div> <div class="box-content"> <h6>Rehabilition Center</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-9.png" alt=""> </div> <div class="box-content"> <h6>Outdoor Checkup</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-1.png" alt=""> </div> <div class="box-content"> <h6>Professional Doctors</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="service2-box d-flex"> <div class="box-icon"> <img src="images/service-3.png" alt=""> </div> <div class="box-content"> <h6>Exclusive Blood Bank</h6> <p>Lorem ipsum dolor sit amet, consectet commodi sit veniam adipisicing.</p> </div> </div> </div> </div> </div> </section>
/* ==================== ##. Department Area ==================== */ html { color: #222222; font-size: 14px; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } .department { padding: 80px 0 65px; } .department .department-top h4 { color: #222222; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; position: relative; } .department .department-top h4:before { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; left: 50%; margin-left: -35px; margin-bottom: -23px; } .department .department-top h4:after { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; right: 50%; margin-right: -33px; margin-bottom: -23px; } .department .department-top img { margin-bottom: 5px; } .department .department-top p { font-size: 16px; color: #969696; max-width: 550px; margin: auto; line-height: 28px; margin-bottom: 75px; } .department .nav { padding-left: 15px; } .department .nav a.nav-link { width: 47%; height: 110px; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); padding-top: 18px; } .department .nav a.nav-link img { max-width: 42px; margin-bottom: 10px; } .department .nav a.nav-link p { font-size: 15px; color: #222222; font-weight: 600; text-transform: uppercase; } .department .nav a.active { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .department .nav a.active p { color: #00a3c8; } .department .tab-content .tab-pane { padding: 18px 25px 22px; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); } .department .tab-content .tab-pane .box-heading h4 { color: #222222; font-weight: 600; margin-bottom: 12px; } .department .tab-content .tab-pane .content-box p { font-size: 16px; line-height: 32px; margin-bottom: 20px; } .department .tab-content .tab-pane .content-box p span { display: block; font-size: 15px; color: #969696; margin-top: 10px; } .department .tab-content .tab-pane .content-box ul li { font-size: 15px; color: #969696; margin-bottom: 12px; } .department .tab-content .tab-pane .content-box ul li i { color: #00a3c8; margin-right: 8px; } .department .tab-content .tab-pane .image-box img { margin-top: 10px; margin-bottom: 20px; } .department .tab-content .tab-pane .image-box a { font-size: 16px; color: #00a3c8; font-weight: 600; padding: 8px 30px; border: 1px solid #00a3c8; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; float: right; } .department .tab-content .tab-pane .image-box a:hover { background: #00a3c8; color: #fff; } /* ==================== ##. Department Area 2 ==================== */ .department-area2 { padding: 80px 0 0; } .department-area2 .department2-top h4 { color: #222222; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; position: relative; } .department-area2 .department2-top h4:before { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; left: 50%; margin-left: -35px; margin-bottom: -23px; } .department-area2 .department2-top h4:after { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; right: 50%; margin-right: -33px; margin-bottom: -23px; } .department-area2 .department2-top img { margin-bottom: 5px; } .department-area2 .department2-top p { font-size: 16px; color: #969696; max-width: 550px; margin: auto; line-height: 28px; margin-bottom: 75px; } .department-area2 .nav { padding-left: 15px; margin-bottom: 30px; } .department-area2 .nav a.nav-link { width: 18%; height: 125px; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; border: 1px solid #eeeeee; padding-top: 26px; } .department-area2 .nav a.nav-link img { max-width: 42px; margin-bottom: 10px; } .department-area2 .nav a.nav-link p { font-size: 15px; color: #222222; font-weight: 600; text-transform: uppercase; } .department-area2 .nav a.active { border-color: #dddddd; } .department-area2 .nav a.active p { color: #00a3c8; } .department-area2 .tab-content .tab-pane { padding: 18px; border: 1px solid #eeeeee; } .department-area2 .tab-content .tab-pane .image-box a { font-size: 16px; color: #00a3c8; font-weight: 600; padding: 8px 30px; border: 1px solid #00a3c8; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; float: right; } .department-area2 .tab-content .tab-pane .image-box a:hover { background: #00a3c8; color: #fff; } .department-area2 .tab-content .tab-pane .content-box h4 { color: #222222; font-weight: 600; margin-bottom: 12px; } .department-area2 .tab-content .tab-pane .content-box p { font-size: 16px; line-height: 32px; margin-bottom: 20px; } .department-area2 .tab-content .tab-pane .content-box p span { display: block; color: #969696; margin-top: 10px; } .department-area2 .tab-content .tab-pane .content-box ul { margin-bottom: 35px; } .department-area2 .tab-content .tab-pane .content-box ul li { font-size: 15px; color: #969696; margin-bottom: 12px; } .department-area2 .tab-content .tab-pane .content-box ul li i { color: #00a3c8; margin-right: 8px; } .department-area2 .tab-content .tab-pane .content-box a { font-size: 16px; color: #00a3c8; font-weight: 600; padding: 8px 30px; border: 1px solid #00a3c8; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; } .department-area2 .tab-content .tab-pane .content-box a:hover { background: #00a3c8; color: #fff; } .department-padding { padding-bottom: 88px; } /* ==================== ##. Department Area 3 ==================== */ .department-area3 { padding: 80px 0 52px; } .department-area3 .department3-top h4 { color: #222222; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; position: relative; } .department-area3 .department3-top h4:before { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; left: 50%; margin-left: -35px; margin-bottom: -23px; } .department-area3 .department3-top h4:after { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; right: 50%; margin-right: -33px; margin-bottom: -23px; } .department-area3 .department3-top img { margin-bottom: 5px; } .department-area3 .department3-top p { font-size: 16px; color: #969696; max-width: 550px; margin: auto; line-height: 28px; margin-bottom: 75px; } .department-area3 .department-box { padding: 22px 25px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; -ms-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; margin-bottom: 30px; } .department-area3 .department-box .box-icon img { max-width: 50px; margin-right: 30px; margin-top: 5px; } .department-area3 .department-box .box-content h5 { color: #222222; text-transform: uppercase; font-weight: 600; margin-bottom: 7px; } .department-area3 .department-box .box-content p { font-size: 15px; color: #666666; line-height: 25px; margin-bottom: 7px; } .department-area3 .department-box .box-content a { color: #00a3c8; font-weight: 600; } .department-area3 .department-box .box-content a:hover { color: #008FD5; } .department-area3 .department-box:hover { -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } /* ==================== ##. Department Area 4 ==================== */ .department-area4 { padding: 80px 0 52px; } .department-area4 .department4-top h4 { color: #222222; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; position: relative; } .department-area4 .department4-top h4:before { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; left: 50%; margin-left: -35px; margin-bottom: -23px; } .department-area4 .department4-top h4:after { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; right: 50%; margin-right: -33px; margin-bottom: -23px; } .department-area4 .department4-top img { margin-bottom: 5px; } .department-area4 .department4-top p { font-size: 16px; color: #969696; max-width: 550px; margin: auto; line-height: 28px; margin-bottom: 75px; } .department-area4 .department-box { border: 1px solid #eeeeee; padding: 30px 25px 40px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; -ms-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; margin-bottom: 35px; } .department-area4 .department-box .box-icon { background: #eeeeee; width: 90px; height: 90px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin: auto; margin-bottom: 25px; } .department-area4 .department-box .box-icon img { max-width: 45px; margin-top: 22px; } .department-area4 .department-box .box-content h5 { color: #222222; text-transform: uppercase; font-weight: 600; margin-bottom: 15px; } .department-area4 .department-box .box-content p { font-size: 15px; color: #969696; line-height: 25px; margin-bottom: 25px; } .department-area4 .department-box .box-content a { color: #00a3c8; border: 1px solid #eeeeee; padding: 8px 20px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } .department-area4 .department-box .box-content a:hover { background: #00a3c8; color: #fff; border-color: #00a3c8; } .department-area4 .department-box:hover { -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.07); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.07); } /* Our Medical Services*/ /* ==================== ##. Service Area 2 ==================== */ .service-area2 { padding: 80px 0 55px; } .service-area2 .service2-top h4 { color: #222222; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; position: relative; } .service-area2 .service2-top h4:before { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; left: 50%; margin-left: -35px; margin-bottom: -23px; } .service-area2 .service2-top h4:after { position: absolute; content: ''; background: #00a3c8; width: 30px; height: 3px; bottom: 0; right: 50%; margin-right: -33px; margin-bottom: -23px; } .service-area2 .service2-top img { margin-bottom: 5px; } .service-area2 .service2-top p { font-size: 16px; color: #969696; max-width: 550px; margin: auto; line-height: 28px; margin-bottom: 75px; } .service-area2 .service2-box { padding: 18px 25px; border: 1px solid #eeeeee; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; -ms-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; margin-bottom: 30px; } .service-area2 .service2-box .box-icon img { padding-top: 20px; margin-right: 20px; } .service-area2 .service2-box .box-content h6 { color: #222222; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; } .service-area2 .service2-box .box-content p { font-size: 15px; color: #666666; letter-spacing: 0; } .service-area2 .service2-box:hover { -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); }

Related: See More


Questions / Comments: