<!--what-we-offer-area start-->
<div class="what-we-offer-area gray-bg ptb-80">
    <div class="col-lg-12">
        <div class="section-title roboto">
            <h1>What we <span>offer</span></h1>
        </div>
    </div>
    <div class="total-what-we-do carsoule-btn">
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/01.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Securities Services</a></h3>
            </div>
            <div class="what-we-content"> <span>Donec vitae hendrerit arcu, sit
                        amet faucibus nisl. Cras pretium arcu ex. Aenean posuere
                    libero eu augue condimentum rhoncus. Praesent</span> </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/02.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Finance Support</a></h3>
            </div>
            <div class="what-we-content"> <span>Donec vitae hendrerit arcu, sit
                        amet faucibus nisl. Cras pretium arcu ex. Aenean posuere
                    libero eu augue condimentum rhoncus. Praesent</span> </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/03.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Investments Bonds</a></h3>
            </div>
            <div class="what-we-content"> <span>Donec vitae hendrerit arcu, sit
                        amet faucibus nisl. Cras pretium arcu ex. Aenean posuere
                    libero eu augue condimentum rhoncus. Praesent</span> </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/01.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Securities Services</a></h3>
            </div>
            <div class="what-we-content"> <span>Donec vitae hendrerit arcu, sit
                        amet faucibus nisl. Cras pretium arcu ex. Aenean posuere
                    libero eu augue condimentum rhoncus. Praesent</span> </div>
        </div>
    </div>
</div>
<!--what-we-offer-area end-->

            
            

                

/*==== what we offer===== */
.def-hover-eff > a {
  display: block;
  position: relative;
  transition: all 0.3s ease 0s;
  overflow:hidden
}
.def-hover-eff > a::before {
  background: #2395ec none repeat scroll 0 0;
  content: "";
  height: 50%;
  left: 50%;
  opacity: 0.5;
  position: absolute;
  top: 25%;
  width:0;
  transition: all 0.5s ease 0s;
}
.def-hover-eff a:hover::before {
    width: 100%;
	top:0;
	left:0;
	height: 100%;
}
.what-we-img  a::after {
  background: rgba(0, 0, 0, 0) url("images/icons/icon.png") no-repeat scroll -24px -20px;
  content: "";
  display: block;
  height: 32px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.3s ease 0s;
  width: 32px;
  z-index: 2;
}
.what-we-img:hover  a::after {
  transform: translate(-50%, -50%) scale(1);
}
.what-we-heading h3 {
  font-size: 22px;
  margin-top: 25px;
}
.what-we-content > span {
  color: #4a4d4f;
  letter-spacing: 1px;
  line-height: 25px;
}
.total-what-we-do.slick-slider {
  float: left;
  width: 100%;
}
                
            

		
$('.total-what-we-do').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 5000,
dots: false,
arrows: true,
prevArrow: '
',
nextArrow: '
',
responsive: [
{  breakpoint: 1169,  settings: { slidesToShow: 3,  }  },
{  breakpoint: 969,   settings: { slidesToShow: 2,  }  },
{  breakpoint: 767,   settings: { slidesToShow: 1, }   },
]
});	
		
	

                
<!--what-we-offer-area start-->
<div class="what-we-offer-area gray-bg ptb-80">
    <div class="total-what-we-res carosule-pagi carsoule-pagi-2 ">
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/01.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Securities Services</a></h3>
            </div>
            <div class="what-we-content">
                <span>Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras
                        pretium arcu ex. Aenean posuere libero eu augue condimentum
                    rhoncus. Praesent</span>
            </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/02.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Finance Support</a></h3>
            </div>
            <div class="what-we-content">
                <span>Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras
                        pretium arcu ex. Aenean posuere libero eu augue condimentum
                    rhoncus. Praesent</span>
            </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/03.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Investments Bonds</a></h3>
            </div>
            <div class="what-we-content">
                <span>Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras
                        pretium arcu ex. Aenean posuere libero eu augue condimentum
                    rhoncus. Praesent</span>
            </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/01.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Securities Services</a></h3>
            </div>
            <div class="what-we-content">
                <span>Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras
                        pretium arcu ex. Aenean posuere libero eu augue condimentum
                    rhoncus. Praesent</span>
            </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/05.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Securities Services</a></h3>
            </div>
            <div class="what-we-content">
                <span>Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras
                        pretium arcu ex. Aenean posuere libero eu augue condimentum
                    rhoncus. Praesent</span>
            </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/06.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Securities Services</a></h3>
            </div>
            <div class="what-we-content">
                <span>Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras
                        pretium arcu ex. Aenean posuere libero eu augue condimentum
                    rhoncus. Praesent</span>
            </div>
        </div>
        <div class="col-12">
            <div class="what-we-img def-hover-eff">
                <a href="#"><img src="images/blog/07.jpg" alt=""></a>
            </div>
            <div class="what-we-heading">
                <h3><a href="#">Securities Services</a></h3>
            </div>
            <div class="what-we-content">
                <span>Donec vitae hendrerit arcu, sit amet faucibus nisl. Cras
                        pretium arcu ex. Aenean posuere libero eu augue condimentum
                    rhoncus. Praesent</span>
            </div>
        </div>
    </div>
</div>
<!--what-we-offer-area end-->

                
            

                

/*==== what we offer===== */
.def-hover-eff > a {
  display: block;
  position: relative;
  transition: all 0.3s ease 0s;
  overflow:hidden
}
.def-hover-eff > a::before {
  background: #2395ec none repeat scroll 0 0;
  content: "";
  height: 50%;
  left: 50%;
  opacity: 0.5;
  position: absolute;
  top: 25%;
  width:0;
  transition: all 0.5s ease 0s;
}
.def-hover-eff a:hover::before {
    width: 100%;
	top:0;
	left:0;
	height: 100%;
}
.what-we-img  a::after {
  background: rgba(0, 0, 0, 0) url("images/icons/icon.png") no-repeat scroll -24px -20px;
  content: "";
  display: block;
  height: 32px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.3s ease 0s;
  width: 32px;
  z-index: 2;
}
.what-we-img:hover  a::after {
  transform: translate(-50%, -50%) scale(1);
}
.what-we-heading h3 {
  font-size: 22px;
  margin-top: 25px;
}
.what-we-content > span {
  color: #4a4d4f;
  letter-spacing: 1px;
  line-height: 25px;
}
.total-what-we-do.slick-slider {
  float: left;
  width: 100%;
}
.carosule-pagi .slick-dots li {
  background: transparent none repeat scroll 0 0;
  border: 2px solid #2395ec;
  border-radius: 100%;
  display: inline-block;
  height: 16px;
  margin: 0 5px;
  position: relative;
  width: 16px;
}
.carosule-pagi .slick-dots li button {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  border-radius: 100%;
  bottom: 0;
  display: block;
  height: 4px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  text-indent:-9999px;
  padding:0
}
.carosule-pagi .slick-dots li:hover button,.carosule-pagi .slick-dots li.slick-active button {
  background: #2395ec none repeat scroll 0 0;
}
                
            

		
$('.total-what-we-res').slick({
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
autoplaySpeed: 5000,
dots: true,
arrows: false,
responsive: [
{  breakpoint: 1169,  settings: { slidesToShow: 3,  }  },
{  breakpoint: 969,   settings: { slidesToShow: 3,  }  },
{  breakpoint: 767,   settings: { slidesToShow: 1, }   },
]
});