/*======= Service =======*/
.service-item {
border-radius: 10px;
background: $white;
box-shadow: 0px 10px 30px rgba(225, 225, 225, 0.64);
padding: 40px 25px 55px;
@include transition(0.3s);
position: relative;
z-index: 1;
@include respond-between(lg, xl) {
padding: 35px 20px 40px;
}
.icon {
height: 110px;
width: 110px;
line-height: 1;
background-color: rgba($primary-color, 0.1);
@include transition(0.3s);
margin-bottom: 20px;
font-size: 50px;
color: $primary-color;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
@include respond-between(lg, xl) {
height: 80px;
width: 80px;
font-size: 30px;
}
}
&.text-center {
.icon {
margin-left: auto;
margin-right: auto;
}
}
&.color-2 {
.icon {
color: #00978e;
background-color: rgba(#00978e, 0.1);
}
}
&.color-3 {
.icon {
color: #fbb81b;
background-color: rgba(#fbb81b, 0.1);
}
}
&.color-4 {
.icon {
color: #ef452e;
background-color: rgba(#ef452e, 0.1);
}
}
.title {
font-size: 21px;
@include transition(0.3s);
margin-bottom: 15px;
font-weight: 600;
@include respond-below(xl) {
font-size: 18px;
}
a {
color: $black;
}
}
p {
@include transition(0.3s);
}
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/shape/service-dot.png);
background-position: center;
background-repeat: no-repeat;
z-index: -1;
@include transition(0.3s);
opacity: 0;
visibility: hidden;
}
&:hover {
background-color: $primary-color;
box-shadow: 0px 10px 30px rgba(239, 239, 239, 0.79);
.icon {
background-color: $white;
}
.title,
p {
color: $white;
}
&::before {
opacity: 1;
visibility: visible;
}
}
}
.service-item-two {
background-color: $soft-blue;
padding: 40px 35px;
.icon {
color: #ef452e;
font-size: 40px;
line-height: 1;
margin-bottom: 20px;
}
.title {
font-size: 24px;
margin-bottom: 20px;
font-weight: 600;
@include respond-between(lg, xl) {
font-size: 22px;
}
@include respond-below(sm) {
font-size: 22px;
}
a {
color: $black;
}
}
&.color-1 {
.icon {
color: #ef452e;
}
}
&.color-2 {
.icon {
color: #fbb81b;
}
}
&.color-3 {
.icon {
color: #006de8;
}
}
&.color-4 {
.icon {
color: #00978e;
}
}
}
.service-item-three {
box-shadow: 0px 10px 29.7px 0.3px rgba(225, 225, 225, 0.64);
padding: 45px 20px 50px;
position: relative;
overflow: hidden;
@include transition(0.3s);
background-color: $white;
z-index: 5;
.icon {
font-size: 50px;
color: $primary-color;
margin-bottom: 35px;
@include transition(0.3s);
line-height: 1;
}
.title {
font-size: 22px;
margin-bottom: 10px;
@include respond-between(lg, xl) {
font-size: 18px;
}
}
p {
@include transition(0.3s);
}
.service-link {
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
background: $primary-color;
color: $white;
font-size: 14px;
right: 0;
bottom: 0;
position: absolute;
@include transition(0.3s);
}
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/shape/service-dot.png);
background-position: center;
background-repeat: no-repeat;
z-index: -1;
@include transition(0.3s);
opacity: 0;
visibility: hidden;
}
&:hover {
background-color: $primary-color;
.icon {
color: $white;
}
.title,
p {
color: $white;
}
&::before {
opacity: 1;
visibility: visible;
}
.service-link {
background-color: $white;
color: $primary-color;
}
}
}
.service-item-four {
.services-thumb {
margin-bottom: 30px;
position: relative;
z-index: 2;
img {
width: 100%;
}
}
.icon {
width: 90px;
height: 90px;
background: $white;
filter: drop-shadow(0px 3px 30px rgba(0, 0, 0, 0.07));
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-bottom: 30px;
margin-left: 20px;
margin-top: -90px;
position: relative;
z-index: 5;
img {
max-width: 55px;
max-width: 55px;
}
}
.services-content {
.title {
font-size: 24px;
color: $black;
border-bottom: 2px $border-color solid;
padding-bottom: 25px;
margin-bottom: 30px;
position: relative;
font-weight: 600;
@include respond-below(sm) {
font-size: 22px;
}
&::before {
position: absolute;
content: "";
width: 80px;
height: 3px;
background: $primary-color;
left: 0;
bottom: -3px;
}
}
.service-link {
font-weight: 700;
color: $black;
line-height: 50px;
padding: 0 30px;
border: 3px solid $primary-color;
border-radius: 5px;
margin-top: 37px;
@include transition(0.3s);
position: relative;
z-index: 1;
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
@include transition(0.3s);
z-index: -1;
background-color: $primary-color;
}
i {
position: relative;
top: 2px;
margin-left: 5px;
}
&:hover {
color: $white;
border-color: $primary-color;
&::before {
width: 100%;
}
}
}
}
&.no-border {
.services-content {
.title {
border: none;
padding-bottom: 0;
margin-bottom: 20px;
&::before {
display: none;
}
}
}
}
}
.service-item-five {
a {
position: relative;
display: block;
background-color: $white;
box-shadow: 0px 8px 16px 0px rgba(0, 109, 232, 0.04);
@include transition(0.3s);
z-index: 2;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: $secondary-color;
padding: 35px 40px;
@include respond-between(lg, xl) {
padding: 30px;
font-size: 18px;
}
@include respond-below(md) {
padding: 30px;
font-size: 18px;
}
i {
color: $text-color-2;
@include transition(0.3s);
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
@include respond-between(lg, xl) {
right: 20px;
}
}
&::before {
position: absolute;
content: "\f41b";
font-family: "Font Awesome 5 Brands";
font-size: 80px;
line-height: 1;
top: 5px;
left: 5px;
color: #fff;
z-index: -1;
opacity: 0;
visibility: hidden;
@include transition(0.3s);
font-weight: 300;
}
&:hover {
background: $primary-color;
&,
& i {
color: $white;
}
&::before {
opacity: 0.1;
visibility: visible;
}
}
}
}
.service-item-six {
color: $text-color-2;
border: 2px solid #e3eeff;
padding: 40px 30px;
position: relative;
overflow: hidden;
.icon {
font-size: 60px;
line-height: 1;
color: $primary-color;
margin-bottom: 30px;
}
.title {
font-size: 24px;
margin-bottom: 20px;
font-weight: 600;
@include respond-between(lg, xl) {
font-size: 24px;
}
@include respond-below(lg) {
font-size: 24px;
}
}
.service-link {
font-weight: 700;
color: $text-color-2;
margin-top: 15px;
&:hover {
color: $primary-color;
}
}
.count {
position: absolute;
font-size: 200px;
color: #f5f6f7;
right: 18px;
bottom: 0;
font-family: "GilroyBold";
font-weight: 700;
z-index: -1;
line-height: 1;
@include respond-below(xl) {
font-size: 160px;
}
}
}
.service-item-seven {
color: $text-color-2;
border: 15px solid $soft-blue;
padding: 45px 35px;
position: relative;
overflow: hidden;
@include respond-below(xl) {
padding: 40px 30px;
border-width: 10px;
}
.icon {
font-size: 80px;
line-height: 1;
color: $primary-color;
margin-bottom: 30px;
}
.title {
font-size: 36px;
margin-bottom: 20px;
@include respond-below(xl) {
font-size: 28px;
}
}
.service-link {
font-weight: 700;
color: $text-color-2;
margin-top: 15px;
&:hover {
color: $primary-color;
}
}
}
.service-item-eight {
position: relative;
overflow: hidden;
.service-img {
img {
width: 100%;
}
}
.services-overlay {
position: absolute;
bottom: -110px;
left: 0;
width: 100%;
height: 180px;
background-color: rgba($secondary-color, 0.7);
padding: 20px 40px 40px;
@include transition(0.3s);
@include respond-between(lg, xl) {
padding: 20px 20px 20px;
}
@include respond-below(xl) {
bottom: -115px;
}
@include respond-below(sm) {
padding: 20px 20px 20px;
}
.icon {
position: absolute;
top: -20px;
left: 20px;
height: 70px;
width: 70px;
background: $primary-color;
color: $white;
font-size: 30px;
line-height: 1;
text-align: center;
line-height: 70px;
}
p {
color: $white;
font-size: 14px;
padding-top: 20px;
}
.title {
padding-left: 80px;
font-size: 20px;
@include respond-below(xl) {
font-size: 18px;
}
a {
color: $white;
}
}
}
&:hover {
& .services-overlay {
bottom: 0;
background-color: rgba($primary-color, 0.9);
}
}
}
.service-section {
&.service-with-shape {
position: relative;
margin-top: -235px;
z-index: 22;
&::before {
content: "";
position: absolute;
left: 70px;
right: 70px;
top: 0;
background-color: $primary-color;
height: 450px;
z-index: -1;
@include respond-below(lg) {
left: 20px;
right: 20px;
}
@include respond-below(sm) {
left: 0;
right: 0;
}
}
.section-title {
position: relative;
z-index: 1;
.title {
font-size: 55px;
@include respond-between(lg, xl) {
font-size: 42px;
}
@include respond-below(lg) {
font-size: 46px;
}
@include respond-below(md) {
font-size: 40px;
}
@include respond-below(sm) {
font-size: 26px;
}
}
.ring-shape {
position: absolute;
height: 60px;
width: 60px;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.1);
top: -40px;
right: 50px;
transform: scale(0);
@include animation(scale 15s linear infinite);
z-index: -1;
@include respond-below(sm) {
height: 40px;
width: 40px;
}
}
&::before {
position: absolute;
content: "";
height: 145px;
width: 145px;
border: 10px solid rgba(255, 255, 255, 0.1);
top: -10px;
left: 10px;
transform: rotate(-15deg);
z-index: -1;
@include animation(rotate 30s linear infinite);
@include respond-below(lg) {
height: 120px;
width: 120px;
}
@include respond-below(sm) {
width: 80px;
height: 80px;
border-width: 5px;
}
}
&::after {
position: absolute;
content: "";
height: 80px;
width: 80px;
border: 10px solid rgba(255, 255, 255, 0.1);
bottom: -100px;
right: 10px;
transform: rotate(-15deg);
z-index: -1;
@include animation(rotateTwo 30s linear infinite);
@include respond-below(sm) {
height: 60px;
width: 60px;
border-width: 5px;
}
}
}
}
&.service-with-shape-two {
position: relative;
z-index: 2;
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 450px;
z-index: -1;
background-image: url(../img/shape/service-bg.jpg);
background-size: cover;
background-position: center;
}
.square-shape {
position: absolute;
content: "";
height: 145px;
width: 145px;
border: 10px solid rgba($white, 0.1);
top: 80px;
left: 50px;
transform: rotate(-15deg);
z-index: -1;
@include animation(rotate 30s linear infinite);
}
.square-shape-two {
position: absolute;
content: "";
height: 80px;
width: 80px;
border: 10px solid rgba(255, 255, 255, 0.1);
right: 80px;
top: 200px;
transform: rotate(-15deg);
z-index: -1;
@include animation(rotateTwo 30s linear infinite);
}
.section-title {
position: relative;
z-index: 1;
.title {
font-size: 55px;
@include respond-between(lg, xl) {
font-size: 42px;
}
@include respond-below(lg) {
font-size: 46px;
}
@include respond-below(md) {
font-size: 40px;
}
@include respond-below(sm) {
font-size: 26px;
}
}
.ring-shape {
position: absolute;
height: 60px;
width: 60px;
border-radius: 50%;
border: 5px solid rgba($white, 0.1);
top: -40px;
right: 50px;
transform: scale(0);
@include animation(scale 15s linear infinite);
z-index: -1;
}
}
}
}
.service-details-text-block {
padding-left: 50px;
@include respond-below(lg) {
padding-left: 0;
}
.service-support-btn {
margin-top: 40px;
background: #ff5f6e;
text-align: center;
padding: 20px 40px;
position: relative;
display: inline-block;
z-index: 5;
p {
color: $white;
font-size: 14px;
}
span {
color: $white;
font-weight: 700;
font-size: 23px;
}
i {
position: absolute;
top: 8px;
left: 10px;
opacity: 0.05;
color: $white;
font-size: 60px;
z-index: -1;
}
}
}
.services-details-imgs {
.img-two {
img {
margin-top: -170px;
border: 14px solid $white;
}
}
}