195 lines
5.1 KiB
Sass
195 lines
5.1 KiB
Sass
/*******************************************************/
|
|
/******************* ## Features Area *******************/
|
|
/*******************************************************/
|
|
.feature-item
|
|
transition: 0.5s
|
|
border-radius: 10px
|
|
margin-bottom: 30px
|
|
padding: 40px 40px 20px
|
|
background: $lighter-color
|
|
border: 1px solid $border-color
|
|
+res-bl(md)
|
|
margin-top: 0
|
|
+res-bl(xs)
|
|
+gapLR(padding, 30px)
|
|
.icon
|
|
z-index: 1
|
|
line-height: 1
|
|
transition: 0.5s
|
|
font-size: 55px
|
|
position: relative
|
|
margin-bottom: 50px
|
|
color: $primary-color
|
|
&:before
|
|
content: ''
|
|
+size(50px)
|
|
z-index: -1
|
|
transition: 0.5s
|
|
background: white
|
|
+poLB(15px, -10px)
|
|
border-radius: 50%
|
|
&:hover
|
|
background: white
|
|
border-radius: 20px
|
|
box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25)
|
|
.icon
|
|
color: $secondary-color
|
|
&:before
|
|
background: rgba($secondary-rgb, 0.1)
|
|
|
|
&.style-two
|
|
background: white
|
|
border-radius: 10px
|
|
.icon
|
|
margin-bottom: 18px
|
|
color: $secondary-color
|
|
&:before
|
|
display: none
|
|
.content
|
|
h5
|
|
margin-bottom: 0
|
|
letter-spacing: -1px
|
|
p
|
|
transition: 0.5s
|
|
&:hover
|
|
background: $primary-color
|
|
border-color: $primary-color
|
|
box-shadow: 10px 4px 40px rgba(99, 171, 69, 0.5)
|
|
.icon,
|
|
.content p,
|
|
.content h5 a
|
|
color: white
|
|
|
|
&.style-three
|
|
border: none
|
|
border-radius: 10px
|
|
margin-bottom: 10px
|
|
padding: 50px 50px 30px
|
|
height: calc(100% - 10px)
|
|
background: $heading-color
|
|
+res-bl(ms)
|
|
+gapLR(padding, 35px)
|
|
+res-bl(xs)
|
|
+gapLR(padding, 25px)
|
|
.icon,
|
|
.content p,
|
|
.content h3 a,
|
|
.content h6 a,
|
|
.icon-title h5 a
|
|
color: white
|
|
.icon
|
|
margin-bottom: 25px
|
|
&:before
|
|
display: none
|
|
.content h3
|
|
+res-bl(lb)
|
|
font-size: 25px
|
|
&.bgc-primary
|
|
background: $primary-color
|
|
&.bgc-secondary
|
|
background: $secondary-color
|
|
&.bgc-pink
|
|
background: #FD4C5C
|
|
.icon-title
|
|
display: flex
|
|
margin-bottom: 6px
|
|
align-items: center
|
|
.icon
|
|
margin-right: 30px
|
|
margin-bottom: 15px
|
|
+res-bl(xs)
|
|
font-size: 45px
|
|
margin-right: 20px
|
|
h5
|
|
line-height: 1.3
|
|
margin-top: -7px
|
|
margin-bottom: 15px
|
|
+res-bl(xs)
|
|
font-size: 20px
|
|
|
|
.features-content-part
|
|
max-width: 580px
|
|
.section-title
|
|
max-width: 500px
|
|
|
|
.features-customer-box
|
|
+res-ab(md)
|
|
display: flex
|
|
align-items: center
|
|
.image
|
|
flex: none
|
|
max-width: 50%
|
|
position: relative
|
|
+res-bl(md)
|
|
max-width: none
|
|
+gapLR(margin, 15px)
|
|
.content
|
|
margin-left: -20%
|
|
background: white
|
|
border-radius: 20px
|
|
padding: 50px 55px 40px 30%
|
|
padding-left: calc(20% + 55px)
|
|
border: 1px solid $border-color
|
|
box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25)
|
|
+res-bl(md)
|
|
margin-left: 0
|
|
margin-top: -35px
|
|
padding: 70px 45px 30px
|
|
+res-bl(xs)
|
|
+gapLR(padding, 25px)
|
|
h6
|
|
font-size: 18px
|
|
|
|
.feature-authors
|
|
display: flex
|
|
align-items: center
|
|
> *
|
|
+size(50px)
|
|
border-radius: 50%
|
|
border: 2px solid white
|
|
img
|
|
margin-right: -15px
|
|
> span
|
|
color: white
|
|
line-height: 46px
|
|
text-align: center
|
|
background: $secondary-color
|
|
|
|
/* Features Two */
|
|
.features-wrap-two
|
|
+res-ab(lg)
|
|
margin-right: -350px
|
|
|
|
.features-image-two
|
|
img
|
|
border-radius: 10px
|
|
|
|
/* Features Three */
|
|
.features-area-three
|
|
+gapLR(margin, 30px)
|
|
+res-bl(lg)
|
|
+gapLR(margin, 15px)
|
|
.row
|
|
--bs-gutter-x: 10px
|
|
|
|
|
|
.about-feature-two
|
|
.feature-item.style-two:hover
|
|
background: $secondary-color
|
|
border-color: $secondary-color
|
|
box-shadow: 10px 4px 40px rgba(247, 146, 30, 0.5)
|
|
.shape
|
|
+poLT(0, 28px)
|
|
max-width: 15%
|
|
|
|
/* Feature FAQ Page */
|
|
.faq-page-featuers
|
|
.feature-item.style-three
|
|
height: calc(100% - 30px)
|
|
padding-bottom: 20px
|
|
margin-bottom: 30px
|
|
padding-top: 40px
|
|
+res-ab(xs)
|
|
+gapLR(padding, 40px)
|
|
.icon
|
|
font-size: 45px |