282 lines
6.6 KiB
SCSS
282 lines
6.6 KiB
SCSS
@use "../utilities" as *;
|
|
|
|
/**----------------------------------------
|
|
START: Theme Service CSS
|
|
----------------------------------------*/
|
|
.service-section{
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-bottom: 70px;
|
|
@include breakpoint(md){
|
|
padding-bottom: 20px;
|
|
}
|
|
.service-bg{
|
|
@include breakpoint;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.service-info{
|
|
.swiper-arrow{
|
|
@include flex-vertical-center;
|
|
column-gap: 10px;
|
|
.swiper-nav{
|
|
background-color: var(--lt-color-common-white);
|
|
color: var(--lt-color-heading-primary);
|
|
font-size: 18px;
|
|
height: 50px;
|
|
width: 50px;
|
|
@include flex-center;
|
|
@include transition(all 0.3s ease-in-out);
|
|
&:hover{
|
|
background-color: var(--lt-color-theme-primary);
|
|
color: var(--lt-color-common-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.service-carousel{
|
|
padding: 0 10px 50px 20px;
|
|
}
|
|
|
|
.service-item{
|
|
background-color: var(--lt-color-common-white);
|
|
.service-thumb{
|
|
text-align: center;
|
|
position: relative;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
.service-icon{
|
|
background-color: var(--lt-color-theme-primary);
|
|
height: 80px;
|
|
width: 80px;
|
|
@include flex-center;
|
|
margin: 0 auto;
|
|
position: absolute;
|
|
bottom: -40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
img{
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
.service-content{
|
|
padding: 70px 30px 30px 30px;
|
|
@include transition(all 0.3s ease-in-out);
|
|
.title{
|
|
line-height: 1;
|
|
a{
|
|
&:hover{
|
|
color: var(--lt-color-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
.read-more{
|
|
font-family: var(--lt-color-heading-primary);
|
|
color: var(--lt-color-text-body);
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
i{
|
|
margin-left: 5px;
|
|
}
|
|
&:hover{
|
|
color: var(--lt-color-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
&:hover{
|
|
.service-content{
|
|
box-shadow: 0px 16px 40px 0px rgba(15, 27, 36, 0.10);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Service 2 */
|
|
|
|
.service-2{
|
|
position: relative;
|
|
z-index: 1;
|
|
.service-map{
|
|
@include background;
|
|
background-size: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
.truck{
|
|
position: absolute;
|
|
bottom: -35px;
|
|
left: 0;
|
|
@include breakpoint(md){
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.service-items{
|
|
@include breakpoint(min-lg) {
|
|
background-image: url(../img/shapes/service-bg-line.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center -25px;
|
|
background-size: 90%;
|
|
width: 100%;
|
|
height: 100%;
|
|
>div:nth-child(2n+2){
|
|
padding-top: 60px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.service-box{
|
|
.service-icon{
|
|
background: var(--lt-color-common-white);
|
|
box-shadow: 0px 16px 40px 0px rgba(15, 27, 36, 0.10);
|
|
height: 180px;
|
|
width: 180px;
|
|
@include flex-center;
|
|
margin: 0 auto;
|
|
margin-bottom: 25px;
|
|
@include transition(all 0.3s ease-in-out);
|
|
}
|
|
.service-content{
|
|
.title{
|
|
color: var(--lt-color-heading-primary);
|
|
margin-bottom: 15px;
|
|
a{
|
|
&:hover{
|
|
color: var(--lt-color-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
p{
|
|
@include breakpoint(md){
|
|
max-width: 300px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
.read-more{
|
|
font-family: var(--lt-color-heading-primary);
|
|
color: var(--lt-color-text-body);
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
i{
|
|
margin-left: 5px;
|
|
}
|
|
&:hover{
|
|
color: var(--lt-color-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
&:hover{
|
|
.service-icon{
|
|
background-color: var(--lt-color-theme-primary);
|
|
img{
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Service 3 */
|
|
.service-3{
|
|
padding-bottom: 120px;
|
|
@include breakpoint(md){
|
|
padding-bottom: 70px;
|
|
}
|
|
}
|
|
|
|
.service-card{
|
|
padding: 40px 30px;
|
|
border: 1px solid var(--lt-color-border-1);
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
.card-bg{
|
|
@include background;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
@include transition(all 0.3s ease-in-out);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
.service-icon{
|
|
background-color: rgba(254, 86, 36, 0.1);
|
|
color: var(--lt-color-theme-primary);
|
|
font-size: 25px;
|
|
height: 80px;
|
|
width: 80px;
|
|
@include flex-center;
|
|
border-radius: 50%;
|
|
margin-bottom: 30px;
|
|
@include transition(all 0.3s ease-in-out);
|
|
}
|
|
.title{
|
|
margin-bottom: 25px;
|
|
a{
|
|
&:hover{
|
|
color: var(--lt-color-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
p{
|
|
margin-bottom: 25px;
|
|
@include transition(all 0.3s ease-in-out);
|
|
}
|
|
.read-more{
|
|
font-family: var(--lt-ff-heading);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
@include flex-vertical-center;
|
|
column-gap: 5px;
|
|
@include transition(all 0.3s ease-in-out);
|
|
}
|
|
&:hover{
|
|
.card-bg{
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.service-icon{
|
|
background-color: var(--lt-color-common-white);
|
|
color: var(--lt-color-theme-primary);
|
|
}
|
|
.title{
|
|
a{
|
|
color: var(--lt-color-common-white);
|
|
&:hover{
|
|
color: var(--lt-color-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
p{
|
|
color: var(--lt-color-common-white);
|
|
}
|
|
.read-more{
|
|
color: var(--lt-color-common-white);
|
|
&:hover{
|
|
color: var(--lt-color-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* !END: Theme Service CSS */
|