<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 sm-margin-20px-bottom">
<div class="services-block padding-45px-tb padding-25px-lr sm-padding-35px-tb sm-padding-20px-lr xs-padding-30px-tb xs-padding-15px-lr last-paragraph-no-margin wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
<div class="title-box margin-25px-bottom sm-margin-15px-bottom">
<i class="fas fa-map-marker-alt text-theme-color"></i>
<div class="box-circle-large"></div>
<div class="box-circle-small"></div>
</div>
<div class="text-extra-dark-gray text-uppercase text-small font-weight-600 alt-font margin-5px-bottom">
Visit Our Office
</div>
<p class="center-col">300 jaipur Avenue,<br> Sydney BMW 2000</p>
</div>
</div>
</div>
</div>
.services-block {
background: #fff;
border-radius: 7px;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.padding-25px-lr {
padding-left: 25px;
padding-right: 25px;
}
.padding-45px-tb {
padding-top: 45px;
padding-bottom: 45px;
}
.services-block .title-box {
position: relative;
padding: 20px 0;
font-size: 60px;
line-height: 1;
width: 2em;
margin-left: auto;
margin-right: auto;
}
.services-block .box-circle-large {
left: 0;
bottom: 0;
width: 1.37em;
height: 1.37em;
background: rgba(78, 74, 200, 0.1);
}
.services-block .box-circle-large, .services-block .box-circle-small {
position: absolute;
border-radius: 50%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.services-block .box-circle-small {
top: 0;
right: 0;
width: 0.59em;
height: 0.59em;
background: rgba(128, 137, 255, 0.1);
}
.margin-5px-bottom {
margin-bottom: 5px;
}
.font-weight-600 {
font-weight: 600;
}
.text-extra-dark-gray {
color: #232323;
}
.alt-font {
font-family: 'Poppins', sans-serif;
font-weight: 500;
}
.last-paragraph-no-margin p:last-of-type {
margin-bottom: 0;
}
.center-col {
float: none;
margin-left: auto;
margin-right: auto;
}
.services-block:focus, .services-block:hover {
animation-name: elementor-animation-wobble-to-bottom-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.services-block:hover {
background: #292dc2;
background: -webkit-linear-gradient(
-45deg
, #292dc2, #0084e9);
background: -moz-linear-gradient(-45deg, #292dc2, #0084e9);
background: -o-linear-gradient(-45deg, #292dc2, #0084e9);
background: linear-gradient(
-45deg
, #292dc2, #0084e9);
}
.services-block:active, .services-block:focus, .services-block:hover {
animation-name: elementor-animation-wobble-to-bottom-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.services-block:hover i {
animation-name: elementor-animation-wobble-to-top-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.services-block:hover .box-circle-large {
background: rgba(255, 255, 255, 0.1);
}
.services-block:hover .box-circle-large {
transform: scale(1.2);
}
.services-block:hover .box-circle-small {
background: rgba(255, 255, 255, 0.2);
}
.services-block:hover .box-circle-small {
transform: translate3d(0, -35%, 0) rotate(
0deg
);
}
.services-block:hover h3, .services-block:hover p, .services-block:hover i, .services-block:hover a, .services-block:hover .text-extra-dark-gray {
color: #fff;
}
.services-block:hover i {
animation-name: elementor-animation-wobble-to-top-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
@keyframes elementor-animation-wobble-to-top-right {
16.65% {
transform: translate(8px, -8px);
}
33.3% {
transform: translate(-6px, 6px);
}
49.95% {
transform: translate(4px, -4px);
}
66.6% {
transform: translate(-2px, 2px);
}
83.25% {
transform: translate(1px, -1px);
}
100% {
transform: translate(0, 0);
}
}
