<div class="map-contact clearfix">
<div class="googleMap-info">
<div class="map-2" id="googleMap"></div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="main-contact-info">
<ul class="contact-info">
<li><h3>contact info</h3></li>
<li>
<i class="fa fa-map-marker"></i>
<div class="text">
<p>777 Seventh Road. Bonosri</p>
<p>Rampura - Dhaka.</p>
</div>
</li>
<li>
<i class="fa fa-phone"></i>
<div class="text">
<p>+11 (019) 25184203</p>
<p>+11 (019) 25184203</p>
</div>
</li>
<li>
<i class="fa fa-paper-plane-o"></i>
<div class="text">
<p>domain@email.com</p>
<p>mail@email.com</p>
</div>
</li>
<li>
<div class="social-share contact-social">
<ul class="clearfix">
<li><a href="#"><i class="fa fa-google"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

#googleMap.map-2 {height: 500px;}
.contact-info li h3 {
    color: #1b1b1b;
    font-size: 22px;
    margin: 7px 0;
    text-transform: uppercase;
}
.contact-info > li {
    border-bottom: 1px solid #ddd;
    display: block;
    float: none;
    height: 95px;
    padding: 30px;
}
.contact-info {
    background: #fff none repeat scroll 0 0;
    bottom: -40px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.35);
    position: absolute;
    width: 400px;
}
.contact-info > li > i {
	color: #555;
	float: left;
	font-size: 16px;
	margin-right: 15px;
	margin-top: 12px;
}
.contact-info  li .text {overflow: hidden;}
.contact-info li .text p {color: #555;}
/* social-share */
.contact-social.social-share li a {
	margin-left: 60px;
	opacity: 1;
}
.contact-social.social-share li a i {
	color: #555;
	font-size: 22px;
	margin-right: 0;
}
.contact-social.social-share {
	margin-top: 0;
	position: inherit;
}
.contact-social ul {padding: 8px 0;}