<div class="container">
<div class="row">
<div class="col-md-5 about-info">
<h3>We are with you , <br>
every step of the way</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti, esse sunt explicabo neque. Beatae eligendi illum doloremque assumenda earum distinctio! Corrupti, unde.</p>
</div>
<div class="col-md-7">
<div class="full-width">
<div class="owl-carousel">
<div class="item">
<img src="http://www.tolmatol.com/uploads-images/our-services-carousel/data-center.png" alt="">
<h4>Heading one</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti </p>
<a href="#"><i class="fa fa-chevron-right"></i></a>
</div>
<div class="item">
<img src="http://www.tolmatol.com/uploads-images/our-services-carousel/artificial-intelligence.png" alt="">
<h4>Heading two</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti </p>
<a href="#"><i class="fa fa-chevron-right"></i></a>
</div>
<div class="item">
<img src="http://www.tolmatol.com/uploads-images/our-services-carousel/data-center.png" alt="">
<h4>Heading three</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti </p>
<a href="#"><i class="fa fa-chevron-right"></i></a>
</div>
<div class="item">
<img src="http://www.tolmatol.com/uploads-images/our-services-carousel/artificial-intelligence.png" alt="">
<h4>Heading four</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti </p>
<a href="#"><i class="fa fa-chevron-right"></i></a>
</div>
<div class="item">
<img src="http://www.tolmatol.com/uploads-images/our-services-carousel/data-center.png" alt="">
<h4>Heading five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti </p>
<a href="#"><i class="fa fa-chevron-right"></i></a>
</div>
<div class="item">
<img src="http://www.tolmatol.com/uploads-images/our-services-carousel/data-center.png" alt="">
<h4>Heading five</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga veritatis officiis labore ullam eaque, error, velit corrupti </p>
<a href="#"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { overflow-x: hidden; }
.full-width { width: 85vw;}
.owl-nav {
display: inline-block;
}
.about-info { margin: 40px 0px;}
.about-info h3 { margin: 0px 0px 40px 0px; font-weight: 700; font-size: 3em;}
.owl-nav button {
background: #f1f1f1 !important;
margin: 0px 5px 0px 0px;
width: 35px;
height: 35px; outline: none;
}
.owl-nav button span {
font-size: 40px;
line-height: 25px;
color: #333;
}
.item { border-radius: 8px; background: #f7fcff; text-align: center; margin: 40px 0px; position: relative; overflow: hidden; padding: 30px;}
.item img { width: 64px !important; margin: 10px auto 10px auto; }
.item h4 { display: block; margin-bottom: 30px;}
.item:before{ content: '';
position: absolute;
width: 300px;
height: 300px;
background: #2196f3;
border-radius: 100%;
top: -110px;
right: -89px;
opacity: 0.06;
z-index: 1; }
.item a { width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 40px; background: #2196F3; display: block; text-align: center; margin: auto; color: #fff; font-size: 18px;}
.owl-nav button:hover {
background: #85c6f9 !important;
} </style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: false,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:2,
nav:false
},
1000:{
items:3 ,
nav:true,
loop:false
}
}
})
})
</script>