/*******************************************************/
/******************  ## 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