/*******************************************************/
/******************  ## 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-1520
            max-width: 1550px
        &.container-1200
            max-width: 1230px
        &.container-1290
            max-width: 1320px
        &.container-1050
            max-width: 1080px
        
.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 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: -8px
    position: relative
    .sub-title
        font-size: 20px
        display: inline-block
        color: $primary-color
        text-transform: uppercase
        font-family: $heading-font
    h2
        text-transform: capitalize
        +res-bl(lg)
            font-size: 45px
        +res-bl(md)
            font-size: 40px
        +res-bl(sm)
            font-size: 35px
        +res-bl(xs)
            font-size: 30px
   
/** Button style **/
.theme-btn,
a.theme-btn
    color: white
    cursor: pointer
    font-size: 18px
    transition: 0.5s
    text-align: center
    padding: 11px 36px
    align-items: center
    display: inline-flex
    justify-content: center
    font-family: $heading-font
    text-transform: uppercase
    background: $primary-color
    i
        font-size: 14px
        margin-left: 7px
        margin-top: -2px
    &:hover
        color: $heading-color
        background: $secondary-color
    +res-bl(sm)
        padding: 10px 25px
    &.style-two
        color: $heading-color
        background: $secondary-color
        &:hover
            color: white
            background: $primary-color
    &.style-three
        color: white
        border: 1px solid
        background: transparent
        &:hover
            background: $primary-color
            border-color: $primary-color

/* Read More */
.read-more
    align-items: center
    display: inline-flex
    color: $primary-color
    font-family: $heading-font
    text-transform: capitalize
    text-decoration: underline
    i
        transition: 0.5s
        margin-top: -3px
        margin-left: 8px
        font-size: 0.8em
    &:hover
        color: $primary-color
    
/* More Btn */
.more-btn
    +size(50px)
    color: white
    line-height: 50px
    text-align: center
    display: inline-block
    background: $primary-color
    &:hover
        color: white
      
/* List style One */
.list-style-one
    li
        display: flex
        &:not(:last-child)
            margin-bottom: 6px
        &:before
            flex: none
            +size(16px)
            color: white
            font-size: 8px
            margin-top: 6px
            content: "\f00c"
            line-height: 16px
            text-align: center
            margin-right: 12px
            border-radius: 50%
            background: $primary-color
            font-family: 'Font Awesome 5 Pro'
        
/** Social Link One **/
.social-style-one
    flex-wrap: wrap
    display: inline-flex
    +gapLR(margin, -5px)
    a
        +gapLR(margin, 5px)
        color: $base-color
        border: 1px solid rgba(255, 255, 255, 0.1)
        +circle(transparent, 45px)
        &:hover
            color: white
            background: $primary-color
            border-color: $primary-color
        
/** Social Link Three **/
.social-style-three
    flex-wrap: wrap
    display: inline-flex
    +gapLR(margin, -7.5px)
    a
        +gapLR(margin, 7.5px)
        &:hover
            color: $primary-color
        
/** Social Link Four **/
.social-style-four
    flex-wrap: wrap
    display: inline-flex
    +gapLR(margin, -35px)
    a
        +gapLR(margin, 35px)
        i
            margin-right: 10px
            color: $primary-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
        
/** Food Menu Tab **/
.food-menu-tab
    +gapLR(margin, -15px)
    justify-content: center
    +res-bl(md)
        +gapLR(margin, -7.5px)
    li
        margin: 0 15px 30px
        +res-bl(md)
            margin: 0 7.5px 15px
    .nav-link
        +flexcenter(center)
        flex-direction: column
        padding: 22px 33px 18px
        background: transparent
        border: 1px solid $border-color
        +res-bl(lg)
            padding: 17px 20px 13px
        +res-bl(md)
            +gapLR(padding, 15px)
        +res-bl(sm)
            padding-top: 12px
            padding-bottom: 8px
        i
            line-height: 1
            font-size: 45px
            color: $primary-color
            +res-bl(lg)
                font-size: 30px
            +res-bl(sm)
                display: none
        span
            @extend %heading
            font-size: 24px
            margin-top: 10px
            +res-bl(lg)
                font-size: 20px
            +res-bl(sm)
                margin-top: 0
                font-size: 16px
        &.active
            border-color: $primary-color
        
/*** 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
        text-align: center
        +res-ab(sm)
            font-size: 24px
        a,
        .page-link
            padding: 0
            +size(60px)
            box-shadow: none
            line-height: 58px
            color: $base-color
            border: 1px solid $border-color
            +res-bl(sm)
                +size(45px)
                line-height: 43px
        &.disabled,
        &:last-child
            .page-link
                color: white
                border-radius: 0
                background: $heading-color
                border-color: $heading-color
        &.active,
        &:hover:not(.disabled)
            .page-link
                color: white
                background: $primary-color
                border-color: $primary-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
    display : flex !important
    flex-wrap: wrap
    +flexcenter(center)
    li
        cursor: pointer
        +size(10px)
        margin: 0 7px
        transition: 0.5s
        border-radius: 5px
        background: $primary-color
        button
            opacity: 0
        &.slick-active
            width: 30px

/*** Scroll Top style ***/
.scroll-top
    +size(80px)
    z-index: 99
    color: white
    font-size: 24px
    cursor: pointer
    text-align: center
    line-height: 80px
    border-radius: 50%
    background-color: transparent
    background-image: url(../images/shapes/scroll-top-bg.png)
    background-repeat: no-repeat
    background-size: cover
    animation: pulse 2s infinite
    +res-bl(lg)
        +size(60px)
        line-height: 60px
  
/* Text White */
.text-white
    *, a,
    .read-more,
    .counter-text-wrap .count-text
        color: white
    .sub-title
        color: $secondary-color
        
/* Wave Shapes */
.wave-shapes
    position: absolute
    z-index: -1
    top: 0
    left: -100px
    +size(calc(100% + 100px), 100%)
    .shape
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        animation: leftRightOne 6s infinite
        &.two
            animation-delay: 3s
        
/*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($heading-color, 0.75)
    &:before
        mix-blend-mode: multiply
    
/* Backgruond Size */
.bgs-cover
    background-size: cover
    background-position: center
.bgp-top
    background-repeat: no-repeat
    background-position: top 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
.bgc-dark-green
    background-color: #1E3233
    
/* 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