.services-style-one {
    background-color: rgb(234 251 253);
    position: relative;
    padding-top: 20px;
    padding-bottom: 30px
}

.services-style-one:before {
    content: '';
    width: 100%;
    height: 251px;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0
}

.services-style-one .single-service-one {
    padding: 30px;
    padding-bottom: 40px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(194 215 218);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 15px 30px 0 rgba(255, 228, 228, .3);
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
    margin-top:30px;
}
@media(min-width:768px){
  .services-style-one .single-service-one {
    height:320px;  
  }  
}
.services-style-one .single-service-one:before {
    content: '';
    width: 600px;
    height: 600px;
    border-radius: 50%;
    position: absolute;
    /*top: 47%;*/
    /*left: 5%;*/
    bottom: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    background-color: #2bcaff;
    z-index: 8;
    transition: all .4s ease
}

.services-style-one .single-service-one .hover-block:after,
.services-style-one .single-service-one .hover-block:before {
    content: '';
    width: 600px;
    height: 600px;
    border-radius: 50%;
    position: absolute
}

.services-style-one .single-service-one .hover-block:before {
    bottom: 65%;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    background-color: #00b1eb;
    z-index: 10;
    transition: all .4s ease
}

.services-style-one .single-service-one .hover-block:after {
    background-color: #02c0ff;
    bottom: 32%;
    left: 52%;
    /*bottom: 45%;*/
    /*left: 50%;*/
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    z-index: 9;
    transition: all .4s ease
}

.services-style-one .single-service-one i {
    font-size: 64px;
    color: #5cda6b;
    transition: all .4s ease;
    position: relative;
    z-index: 10
}

.services-style-one .single-service-one h3 {
    color: #273167;
    font-size: 20px;
    line-height: 34px;
    margin: 0;
    margin-top: 17px;
    margin-bottom: 35px;
    transition: all .4s ease;
    position: relative;
    z-index: 10
}

.services-style-one .single-service-one p {
    color: #777b92;
    font-size: 17px;
    letter-spacing: 0.5px;
    line-height: 30px;
    margin: 0;
    margin-bottom: 23px;
    transition: all .4s ease;
    position: relative;
    z-index: 10
}

.services-style-one .single-service-one .line-block {
    display: block;
    background-color: #5dda6c;
    width: 41px;
    height: 2px;
    margin-bottom: 20px;
    transition: all .4s ease;
    position: relative;
    z-index: 10
}

.services-style-one .single-service-one a.more-link {
    display: inline-block;
    vertical-align: middle;
    /*text-transform: uppercase;*/
    color: rgb(39 49 103);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1em;
    transition: all .4s ease;
    position: relative;
    z-index: 10;
    border-radius: 7px;
    border: 2px solid rgb(39 49 103);
    padding: 10px 12px;
}

.services-style-one .single-service-one:hover {
    background-color: #5fd7ff;
    border-color: #5fd7ff
}

.services-style-one .single-service-one:hover a.more-link,
.services-style-one .single-service-one:hover h3,
.services-style-one .single-service-one:hover i,
.services-style-one .single-service-one:hover p {
    color: #fff;
    border-color: #fff
}

.services-style-one .single-service-one:hover .line-block {
    background-color: #fff
}

.services-style-one .single-service-one:hover:before {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    transition-delay: .2s
}

.services-style-one .single-service-one:hover .hover-block:before {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    transition-delay: .1s
}

.services-style-one .single-service-one:hover .hover-block:after {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-5%, 0)
}

.dmarketing{
    /*font-family:system-ui;*/
    /*background-image:url(../images/about/people-g496b5c635_1920.png);*/
    background-size: cover;
    background-repeat: no-repeat;
}
.card {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 5%);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
}
/*--------------------HOW WE WORK----------------------------*/
.how_we_work .position-relative{
  color:white;
  background:rgb(27 177 220)!important;  
}
.how_we_work .circle{
    width: 60px;
    height: 60px;
    top: -30px;
    border-width: 4px !important;
}
/*-----------------Website design and development services--------*/
.web_design_and_development .inner_box_wb{
    background-color: #145889;
    color:white;
}
@media(min-width: 768px)
{
.web_design_and_development .inner_box_wb{
    height:485px;
}
}
@media(min-width: 992px)
{
.web_design_and_development .inner_box_wb{
    height:400px;
}
}