<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="section-ptb bg-white bg-5">
<div class="container">
<div class="row text-center">
<div class="col-12">
<div class="heading mb-80">
<h2>Testimonials</h2>
<p class="mb-20">Looked up one of the more obscure Latin words, consectetur, from <br class="d-none d-md-block"> a Lorem Ipsum passage, and going</p>
<hr class="line bw-2 mx-auto line-sm mb-5">
<hr class="line bw-2 mx-auto">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="client-testimonial position-relative">
<div class="client-nav">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#client1" data-toggle="tab">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/1.png" alt="Client Image">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#client2" data-toggle="tab">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/2.png" alt="Client Image">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#client3" data-toggle="tab">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/3.png" alt="Client Image">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#client4" data-toggle="tab">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/4.png" alt="Client Image">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#client5" data-toggle="tab">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/5.png" alt="Client Image">
</a>
</li>
</ul>
</div>
<div class="row text-center">
<div class="col-10 col-md-8 col-lg-6 mx-auto">
<div class="tab-content">
<div class="tab-pane fade show active" id="client1">
<div class="client-thumb mx-auto mb-25">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/1.png" alt="Client Image">
</div>
<div class="client-desc bg-white d-flex align-items-center">
<div class="text mx-auto">
<h4 class="mb-10">Evelyn Riley</h4>
<h6>Hade Of Idea</h6>
<p>Richard McClintock, a Latin professor at Hampden <br class="d-none d-lg-block">College in Virginia, looked up one of the more obscure Latin words</p>
</div>
</div>
</div>
<!-- Single Client End -->
<div class="tab-pane fade" id="client2">
<div class="client-thumb mx-auto mb-25">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/2.png" alt="Client Image">
</div>
<div class="client-desc bg-white d-flex align-items-center">
<div class="text mx-auto">
<h4 class="mb-10">Ethan Green</h4>
<h6>Photograper</h6>
<p>Many desktop publishing packages and web page editors <br class="d-none d-lg-block"> now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum'</p>
</div>
</div>
</div>
<!-- Single Client End -->
<div class="tab-pane fade" id="client3">
<div class="client-thumb mx-auto mb-25">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/3.png" alt="Client Image">
</div>
<div class="client-desc bg-white d-flex align-items-center">
<div class="text mx-auto">
<h4 class="mb-10">Marie Soto</h4>
<h6>Designer</h6>
<p>Virginia, looked up one of the more obscure Latin <br class="d-none d-lg-block"> words, consectetur, from a Lorem Ipsum passage, and going through the cites of looked</p>
</div>
</div>
</div>
<!-- Single Client End -->
<div class="tab-pane fade" id="client4">
<div class="client-thumb mx-auto mb-25">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/4.png" alt="Client Image">
</div>
<div class="client-desc bg-white d-flex align-items-center">
<div class="text mx-auto">
<h4 class="mb-10">Willie Munoz</h4>
<h6>Content Writer</h6>
<p>Words which don't look even slightly believable. <br class="d-none d-lg-block">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything</p>
</div>
</div>
</div>
<!-- Single Client End -->
<div class="tab-pane fade" id="client5">
<div class="client-thumb mx-auto mb-25">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/5.png" alt="Client Image">
</div>
<div class="client-desc bg-white d-flex align-items-center">
<div class="text mx-auto">
<h4 class="mb-10">Susan Gardner</h4>
<h6>Manager</h6>
<p>The point of using Lorem Ipsum is that it has a more <br class="d-none d-lg-block"> normal distribution of letters, as opposed to using 'Content here, content here point of using</p>
</div>
</div>
</div>
<!-- Single Client End -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
html{font-size:10px}body{font-size:1.4rem}.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{border:none;}
.h2, h2 {font-size: 5rem;text-shadow: 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff, 1px 1px 5px #252920;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom:1.5rem;font-family:"Dosis", sans-serif;font-weight:600;line-height:1.2;color:#1c223a;}
.client-testimonial .drop-shadow {
-webkit-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2));
-moz-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2));
-o-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2));
filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2)); }
.bg-5 {
background-image: url("http://regaltheme.com/tf/multi/rnr/assets/img/bg/5.png");
background-position: center 65%;
background-size: auto;
background-repeat: no-repeat;
}
.client-testimonial .client-nav .nav-item {
position: absolute;
z-index: 5;
width: 10.5rem; }
.client-testimonial .client-nav .nav-item:nth-child(1) {
top: 2.5rem;
right: 16%;
width: 7rem; }
.client-testimonial .client-nav .nav-item:nth-child(2) {
bottom: 3rem;
right: 0; }
@media (min-width: 1281px) {
.client-testimonial .client-nav .nav-item:nth-child(2) {
right: -3rem; } }
.client-testimonial .client-nav .nav-item:nth-child(3) {
bottom: 9rem;
left: 4%; }
.client-testimonial .client-nav .nav-item:nth-child(4) {
top: -2rem;
left: 0;
width: 7rem; }
@media (min-width: 1281px) {
.client-testimonial .client-nav .nav-item:nth-child(4) {
left: -8rem; } }
.client-testimonial .client-nav .nav-item:nth-child(5) {
top: -9rem;
right: 0;
width: 7rem; }
@media (min-width: 1281px) {
.client-testimonial .client-nav .nav-item:nth-child(5) {
right: -5.5rem; } }
@media (max-width: 767.98px) {
.client-testimonial .client-nav .nav-item {
position: relative !important;
top: 0 !important;
left: 0 !important;
right: inherit;
width: 7rem !important; } }
.client-testimonial .tab-content .fade {
-webkit-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in; }
.client-testimonial .tab-content .client-thumb {
width: 10.5rem; }
.client-testimonial .tab-content .client-desc {
-webkit-box-shadow: 0px 15px 50px 0px rgba(115, 115, 115, 0.06);
box-shadow: 0px 15px 50px 0px rgba(115, 115, 115, 0.06);
min-height: 21rem;
padding: 2rem; }
.client-testimonial .tab-content .client-desc h6 {
font-size: 1.3rem; }
.section-ptb, .section-pt, .section-pb {
padding-top: 12rem;
padding-bottom: 12rem; }
@media (min-width: 768px) and (max-width: 991.98px) {
.section-ptb, .section-pt, .section-pb {
padding-top: 8rem;
padding-bottom: 8rem; } }
@media (max-width: 767.98px) {
.section-ptb, .section-pt, .section-pb {
padding-top: 6rem;
padding-bottom: 6rem; } }
hr.line {
margin: 0;
border-color: #1c223a;
border-width: 1px;
width: 4.5rem; }
hr.line.line-sm {
width: 8.6rem;
}
hr.line.bw-2 {
border-width: 2px;
}
.mb-5 {
margin-bottom: 0.5rem !important;
}
.mb-80 {
margin-bottom: 8rem !important; }
.mb-20 {
margin-bottom: 2rem !important; }
.mb-25 {
margin-bottom: 2.5rem !important; }
img {
max-width: 100%; }
