512 lines
12 KiB
Sass
512 lines
12 KiB
Sass
/*******************************************************/
|
|
/****************** ## Common Classes *****************/
|
|
/*******************************************************/
|
|
.page-wrapper
|
|
position: relative
|
|
z-index: 9
|
|
width: 100%
|
|
margin: 0 auto
|
|
overflow: hidden
|
|
min-width: 300px
|
|
|
|
.container
|
|
+res-ab(xl)
|
|
max-width: $container
|
|
padding-left: $gutter/2
|
|
padding-right: $gutter/2
|
|
&.container-1400
|
|
max-width: 1430px
|
|
&.container-1500
|
|
max-width: 1530px
|
|
|
|
.container-fluid
|
|
+res-ab(sm)
|
|
+gapLR(padding, 25px)
|
|
+res-ab(lb)
|
|
+gapLR(padding, 70px)
|
|
|
|
.row
|
|
--bs-gutter-x: 30px
|
|
|
|
.no-gap
|
|
--bs-gutter-x: 0
|
|
|
|
.col-small
|
|
+res-bl(xs)
|
|
width: 100%
|
|
|
|
|
|
|
|
@for $i from 1 through 2
|
|
.gap-#{10 * $i}
|
|
--bs-gutter-x: #{10px * $i}
|
|
|
|
@for $i from 3 through 15
|
|
.gap-#{10 * $i}
|
|
+res-ab(xxl)
|
|
--bs-gutter-x: #{10px * $i}
|
|
|
|
.row-cols-xl-7
|
|
> *
|
|
+res-ab(xl)
|
|
width: 14.2857%
|
|
flex: 0 0 auto
|
|
|
|
/** Section Title style **/
|
|
.section-title
|
|
margin-top: -10px
|
|
position: relative
|
|
h2
|
|
margin-bottom: 15px
|
|
letter-spacing: -1px
|
|
text-transform: capitalize
|
|
+res-bl(sm)
|
|
font-size: 35px
|
|
+res-bl(xs)
|
|
font-size: 30px
|
|
span
|
|
color: white
|
|
border-radius: 25px
|
|
display: inline-block
|
|
padding: 0 10px 0 15px
|
|
background: $secondary-color
|
|
p
|
|
+res-ab(xs)
|
|
font-size: 18px
|
|
span
|
|
color: white
|
|
font-weight: 500
|
|
padding-left: 8px
|
|
padding-right: 5px
|
|
border-radius: 12px
|
|
background: $secondary-color
|
|
&.bgc-primary
|
|
background: $primary-color
|
|
|
|
.subtitle
|
|
font-weight: 600
|
|
padding: 3px 20px
|
|
border: 1px solid
|
|
border-radius: 30px
|
|
background: #F0F7ED
|
|
color: $primary-color
|
|
display: inline-block
|
|
+res-ab(sm)
|
|
font-size: 18px
|
|
|
|
/* Divider */
|
|
.divider
|
|
z-index: 1
|
|
text-align: center
|
|
position: relative
|
|
&:before
|
|
z-index: -1
|
|
content: ''
|
|
+poLT(0, 50%)
|
|
+size(100%, 1px)
|
|
background: $border-color
|
|
> span
|
|
line-height: 1.4
|
|
background: white
|
|
border-radius: 20px
|
|
display: inline-block
|
|
padding: 4px 20px 7px
|
|
border: 1px solid $border-color
|
|
box-shadow: 0px 10px 60px rgba(151, 151, 151, 0.25)
|
|
> span
|
|
color: white
|
|
font-size: 0.88em
|
|
border-radius: 12px
|
|
padding: 1px 10px 2px
|
|
background: $secondary-color
|
|
|
|
&.style-two
|
|
> span
|
|
color: white
|
|
border: none
|
|
font-size: 14px
|
|
padding: 2px 10px 2px
|
|
background: $primary-color
|
|
span
|
|
padding: 0
|
|
font-size: 1em
|
|
background: transparent
|
|
|
|
/** Button style **/
|
|
.theme-btn,
|
|
a.theme-btn
|
|
color: white
|
|
cursor: pointer
|
|
transition: 0.4s
|
|
font-weight: 600
|
|
overflow: hidden
|
|
text-align: center
|
|
padding: 11px 36px
|
|
border-radius: 30px
|
|
position: relative
|
|
align-items: center
|
|
display: inline-flex
|
|
justify-content: center
|
|
text-transform: capitalize
|
|
background: $primary-color
|
|
+res-bl(xs)
|
|
padding: 8px 28px
|
|
span
|
|
transition: 0.4s
|
|
&:before
|
|
opacity: 0
|
|
transition: 0.4s
|
|
position: absolute
|
|
content: attr(data-hover)
|
|
transform: translateY(150%)
|
|
i
|
|
transition: 0.4s
|
|
margin-left: 10px
|
|
&.style-two
|
|
i
|
|
transform: rotate(-45deg)
|
|
&:hover
|
|
span
|
|
transform: translateY(-150%)
|
|
&:before
|
|
opacity: 1
|
|
&.bgc-secondary
|
|
background: $secondary-color
|
|
&.style-three
|
|
border: 1px solid
|
|
&:not(:hover)
|
|
color: $heading-color
|
|
background: transparent
|
|
&:hover
|
|
border-color: $primary-color
|
|
&.style-four
|
|
background: transparent
|
|
border: 1px solid white
|
|
&:hover
|
|
background: $primary-color
|
|
border-color: $primary-color
|
|
|
|
/* Read More */
|
|
.read-more
|
|
align-items: center
|
|
display: inline-flex
|
|
text-transform: capitalize
|
|
i
|
|
color: white
|
|
float: right
|
|
transition: 0.5s
|
|
margin-top: -2px
|
|
margin-left: 5px
|
|
font-size: 0.9em
|
|
+circle($primary-color, 20px)
|
|
&:hover
|
|
text-decoration: underline
|
|
i
|
|
background: $secondary-color
|
|
|
|
/* List style One */
|
|
.list-style-one
|
|
li
|
|
display: flex
|
|
align-items: center
|
|
margin-bottom: 12px
|
|
i
|
|
font-size: 18px
|
|
margin-right: 15px
|
|
color: $secondary-color
|
|
|
|
/* List Style Two */
|
|
.list-style-two
|
|
li
|
|
display: flex
|
|
font-weight: 500
|
|
margin-bottom: 16px
|
|
align-items: center
|
|
+res-ab(xs)
|
|
font-size: 18px
|
|
&:before
|
|
flex: none
|
|
color: white
|
|
content: "\f00c"
|
|
font-size: 12px
|
|
margin-right: 10px
|
|
+circle($secondary-color, 24px)
|
|
font-family: "Font Awesome 5 Pro"
|
|
|
|
/* List Style Three */
|
|
.list-style-three
|
|
li
|
|
display: flex
|
|
margin-bottom: 16px
|
|
align-items: center
|
|
&:before
|
|
content: "\f105"
|
|
margin-right: 8px
|
|
margin-bottom: -2px
|
|
font-family: "Font Awesome 5 Pro"
|
|
|
|
/* List Style Four */
|
|
.list-style-four
|
|
li
|
|
display: flex
|
|
margin-bottom: 18px
|
|
+res-ab(xs)
|
|
font-size: 18px
|
|
&:before
|
|
content: "\f00c"
|
|
margin-right: 12px
|
|
color: $primary-color
|
|
font-family: "Font Awesome 5 Pro"
|
|
|
|
/** Social Link One **/
|
|
.social-style-one
|
|
flex-wrap: wrap
|
|
display: inline-flex
|
|
+gapLR(margin, -5px)
|
|
a
|
|
color: white
|
|
+gapLR(margin, 5px)
|
|
+circle(rgba(255, 255, 255, 0.1), 45px)
|
|
&:hover
|
|
background: $primary-color
|
|
|
|
/** Social Link Two **/
|
|
.social-style-two
|
|
flex-wrap: wrap
|
|
display: inline-flex
|
|
+gapLR(margin, -5px)
|
|
a
|
|
+gapLR(margin, 5px)
|
|
color: $secondary-color
|
|
+circle(rgba($secondary-rgb, 0.15), 35px)
|
|
&:hover
|
|
color: white
|
|
background: $secondary-color
|
|
|
|
|
|
/* Tab Style One */
|
|
.tab-style-one
|
|
border-bottom: 1px solid $border-color
|
|
li
|
|
margin-right: 30px
|
|
a
|
|
@extend %h4
|
|
margin-bottom: -1px
|
|
padding: 0 20px 16px
|
|
display: inline-block
|
|
border-bottom: 2px solid transparent
|
|
+res-bl(md)
|
|
padding-bottom: 10px
|
|
font-size: 20px !important
|
|
&:first-child
|
|
padding-left: 0
|
|
&.active
|
|
color: $primary-color
|
|
border-bottom-color: $primary-color
|
|
+res-bl(sm)
|
|
border-bottom-color: transparent
|
|
|
|
/*** Preloader style ** */
|
|
.preloader
|
|
position: fixed
|
|
left: 0
|
|
top: 0
|
|
width: 100%
|
|
height: 100%
|
|
z-index: 9999999
|
|
+flexcenter(center)
|
|
background-color: white
|
|
background-repeat: no-repeat
|
|
background-position: center center
|
|
.custom-loader
|
|
width: 75px
|
|
height: 75px
|
|
border-radius: 50%
|
|
background-color: transparent
|
|
border: 2px solid $heading-color
|
|
border-top: 2px solid $primary-color
|
|
border-bottom: 2px solid $primary-color
|
|
-webkit-animation: 1s preloader linear infinite
|
|
animation: 1s preloader linear infinite
|
|
|
|
/* Pagination */
|
|
.pagination
|
|
align-items: center
|
|
+gapLR(margin, -5px)
|
|
li
|
|
margin: 10px 5px 0
|
|
a,
|
|
.page-link
|
|
padding: 0
|
|
font-size: 20px
|
|
box-shadow: none
|
|
font-weight: 600
|
|
color: $base-color
|
|
+circle(transparent, 44px)
|
|
border: 1px solid $border-color
|
|
line-height: 42px
|
|
&.disabled,
|
|
&:last-child
|
|
.page-link
|
|
border-radius: 50%
|
|
&.active,
|
|
&:hover:not(.disabled)
|
|
.page-link
|
|
color: white
|
|
background: $secondary-color
|
|
border-color: $secondary-color
|
|
|
|
/* Rating */
|
|
.ratting
|
|
line-height: 1
|
|
align-items: center
|
|
display: inline-flex
|
|
i
|
|
margin: 3px
|
|
color: $secondary-color
|
|
font-size: 13px
|
|
span
|
|
margin-left: 7px
|
|
&.style-two
|
|
i
|
|
margin: 6px
|
|
font-size: 18px
|
|
color: $primary-color
|
|
|
|
|
|
/* Slick Arrows */
|
|
.slick-arrow
|
|
font-size: 20px
|
|
transition: 0.5s
|
|
padding-top: 2px
|
|
+circle(white, 65px)
|
|
color: $heading-color
|
|
box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15)
|
|
&:focus,
|
|
&:hover
|
|
background: $primary-color
|
|
|
|
/*** Slick Dots ***/
|
|
.slick-dots
|
|
flex-wrap: wrap
|
|
+flexcenter(center)
|
|
li
|
|
+size(7px)
|
|
margin: 0 7px
|
|
cursor: pointer
|
|
transition: 0.5s
|
|
border-radius: 50%
|
|
position: relative
|
|
background: $primary-color
|
|
&:before
|
|
+size(0)
|
|
content: ''
|
|
+absmiddle()
|
|
transition: 0.5s
|
|
border-radius: 50%
|
|
border: 1px solid $primary-color
|
|
button
|
|
opacity: 0
|
|
&.slick-active
|
|
+gapLR(margin, 15px)
|
|
&:before
|
|
+size(22px)
|
|
|
|
/*** Scroll Top style ***/
|
|
.scroll-top
|
|
+size(56px)
|
|
z-index: 99
|
|
color: white
|
|
font-size: 24px
|
|
cursor: pointer
|
|
text-align: center
|
|
border-radius: 50%
|
|
background-color: transparent
|
|
background-repeat: no-repeat
|
|
background-size: cover
|
|
animation: pulse 2s infinite
|
|
|
|
/* Text White */
|
|
.text-white
|
|
*, a,
|
|
.read-more,
|
|
.counter-text-wrap .count-text
|
|
color: white
|
|
&.section-title p span
|
|
background: $primary-color
|
|
.subtitle
|
|
background: rgba(255, 255, 255, 0.05)
|
|
border-color: rgba(255, 255, 255, 0.1)
|
|
|
|
/*Project Filter*/
|
|
.filter-btns-one
|
|
display: flex
|
|
flex-wrap: wrap
|
|
+gapLR(margin, -5px)
|
|
li
|
|
cursor: pointer
|
|
transition: 0.5s
|
|
font-weight: 500
|
|
padding: 5px 20px
|
|
margin: 0 5px 10px
|
|
color: $heading-color
|
|
border: 1px solid $border-color
|
|
+res-ab(ms)
|
|
font-size: 18px
|
|
+res-bl(xs)
|
|
+gapLR(padding, 15px)
|
|
&.active
|
|
background: $secondary-color
|
|
border-color: $secondary-color
|
|
|
|
/* Before After None */
|
|
.before-after-none
|
|
&:after,
|
|
&:before
|
|
display: none
|
|
|
|
/* Position */
|
|
.rel
|
|
position: relative
|
|
|
|
@for $i from 0 through 5
|
|
.z-#{0 + $i}
|
|
z-index: 0 + $i
|
|
|
|
.overlay
|
|
+overlay(#1D231F, 0.95)
|
|
|
|
/* Backgruond Size */
|
|
.bgs-cover
|
|
background-size: cover
|
|
background-position: center
|
|
.bgp-top
|
|
background-repeat: no-repeat
|
|
background-position: top center
|
|
.bgp-bottom
|
|
background-repeat: no-repeat
|
|
background-position: bottom center
|
|
|
|
/* Color + Background */
|
|
.bg-black
|
|
background-color: black
|
|
.bgc-black
|
|
background-color: $heading-color
|
|
.bgc-lighter
|
|
background-color: $lighter-color
|
|
.bgc-primary
|
|
background-color: $primary-color
|
|
.bgc-secondary
|
|
background-color: $secondary-color
|
|
|
|
/* Border Radius */
|
|
@for $i from 1 through 6
|
|
.br-#{5 * $i}
|
|
border-radius: 5px * $i
|
|
|
|
|
|
/* Color Two */
|
|
.color-two
|
|
--primary-color: #E65A11
|
|
.theme-btn
|
|
color: white |