/*******************************************************/
/*****************  02. 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-fluid
    &.gap-wide
        +res-ab(xxl)
            +gapLR(padding, 55px)
   
.no-gap
    +colgap(0)
    
.small-gap
    +colgap(10px)
    
.medium-gap
    +res-ab(xxl)
        +colgap(65px)
    
.large-gap
    +res-ab(xxl)
        +colgap(100px)
    
.col-small
    +res-bl(xs)
        flex: 0 0 100%
        max-width: 100%
        
.row
    --bs-gutter-x: 30px
        
.row-cols-xl-7
    > *
        +res-ab(xl)
            width: 14.2857%
            flex: 0 0 auto
    
/** Section Title style **/
.section-title
    margin-top: -7px
    .sub-title
        font-size: 18px
        font-weight: 700
        align-items: center
        display: inline-flex
        color: $secondary-color
        text-decoration: underline
        &:after,
        &:before
            float: left
            line-height: 0
            font-size: 40px
            font-weight: 300
            content: "\f141"
            font-family: 'Font Awesome 5 Pro'
        &:before
            margin-right: 20px
        &:after
            margin-left: 20px
            display: none
        &.style-two
            color: $primary-color
            text-decoration: none
            &:before
                content: url(../images/shapes/section-subtitle-line.png)
                margin: -15px 15px 0 -25px
            &:after
                display: none
                
    h2
        margin-bottom: 25px
        +res-bl(md)
            font-size: 35px
        +res-bl(ms)
            font-size: 30px
            line-height: 1.3
    &.text-center
        .sub-title
            &:after
                display: block
            &.style-two
                &:after,
                &:before
                    display: none
   
/** Button style **/
.theme-btn,
a.theme-btn
    z-index: 1
    color: white
    cursor: pointer
    overflow: hidden
    transition: 0.5s
    font-weight: 700
    border-radius: 5px
    text-align: center
    padding: 12px 30px
    align-items: center
    position: relative
    display: inline-flex
    justify-content: center
    text-transform: capitalize
    background: $primary-color
    i
        font-size: 13px
        transition: 0.5s
        margin-left: 10px
    &:after
        content: ''
        +size(100%)
        z-index: -1
        left: 0
        top: 0
        transition: 0.75s
        position: absolute
        transform: scaleX(0)
        transform-origin: 0 50%
        background: $secondary-color
    &:hover
        &:after
            transform: scaleX(1)
            transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
        i
            margin-left: 13px;
            margin-right: -3px
    &.style-two
        background: $secondary-color
        &:after
            background: $primary-color
    &.style-three
        color: $heading-color
        background: transparent
        border: 1px solid transparentize($primary-color, 0.8)
        +res-ab(sm)
            +gapTB(padding, 10px)
        &:after
            background: $primary-color
        &:hover
            color: white
            border-color: $primary-color
        &.white-btn
            color: white
            border-color: white
        
    +res-bl(sm)
        padding: 9px 25px

/* Details Btn */
.details-btn
    font-size: 22px
    +circle(white, 70px)
    display: inline-block
    color: $primary-color
    +res-bl(ms)
        +size(45px)
        font-size: 16px
        line-height: 45px

/* Read More */
.read-more
    font-weight: 500
    align-items: center
    display: inline-flex
    text-decoration: underline
    text-transform: capitalize
    i
        float: right
        font-weight: 400
        margin-left: 7px
        transition: 0.5s
    &:hover
        color: $secondary-color
        i
            margin-left: 10px
      
/* List style One */
.list-style-one
    li
        display: flex
        &:not(:last-child)
            margin-bottom: 25px
        &:before
            flex: none
            color: white
            margin-top: 3px
            font-size: 18px
            font-weight: 600
            content: "\f00c"
            margin-right: 25px
            +circle($primary-color, 45px)
            font-family: 'Font Awesome 5 Pro'
            +res-bl(xs)
                +size(40px)
                margin-top: 5px
                font-size: 14px
                line-height: 40px
                margin-right: 15px
        .content
            h5
                +res-ab(xs)
                    font-size: 20px
            p
                margin-bottom: 0
                
/* List style Two */
.list-style-two
    li
        display: flex
        &:not(:last-child)
            margin-bottom: 10px
        &:before
            +size(5px)
            content: ''
            flex: none
            margin-top: 13px
            margin-right: 15px
            border-radius: 50%
            background: $secondary-color
        
/* List style Three */
.list-style-three
    li
        display: flex
        &:not(:last-child)
            margin-bottom: 10px
        &:before
            flex: none
            content: "\f00c"
            margin-right: 11px
            color: $yellow-color
            font-family: 'Font Awesome 5 Pro'
        
/* List style Four */
.list-style-four
    li
        display: flex
        +res-ab(xs)
            font-size: 18px
        &:not(:last-child)
            margin-bottom: 10px
        &:before
            flex: none
            +size(18px)
            font-size: 10px
            margin-top: 7px
            font-weight: 600
            content: "\f00c"
            line-height: 14px
            border: 2px solid
            text-align: center
            margin-right: 15px
            border-radius: 50%
            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
        +circle(white, 40px)
        border: 1px solid $border-color
        +gapLR(margin, 5px)
        &:hover
            color: white
            background: $primary-color
            border-color: $primary-color
        
/** Social Link Two **/
.social-style-two
    flex-wrap: wrap
    display: inline-flex
    +gapLR(margin, -5px)
    a
        margin: 10px 5px 0
        +circle(white, 45px)
        color: $primary-color
        box-shadow: 10px 0 30px rgba(175, 175, 175, 0.3)
        &:hover
            color: white
            background: $primary-color
        
/** Social Link Three **/
.social-style-three
    flex-wrap: wrap
    display: inline-flex
    +gapLR(margin, -7.5px)
    a
        +gapLR(margin, 7.5px)
        

/*** Preloader style ** */
.preloader
    position: fixed
    left: 0
    top: 0
    width: 100%
    height: 100%
    z-index: 9999999
    background-color: #FFFFFF
    background-repeat: no-repeat
    background-position: center center
    background-image: url(../images/preloader.gif)

/* Pagination */    
.pagination
    align-items: center
    +gapLR(margin, -5px)
    li
        margin: 10px 5px 0
        a,
        .page-link
            padding: 0
            +size(45px)
            box-shadow: none
            font-weight: 600
            line-height: 43px
            text-align: center
            border-radius: 50%
            color: $heading-color
            border: 2px solid $border-color
        &.disabled,
        &:last-child
            .page-link
                border-radius: 50%
        &.active,
        &:hover:not(.disabled)
            .page-link
                color: white
                background: $yellow-color
                border-color: $yellow-color
        &.dot
            +size(10px)
            border-radius: 50%
            border: 2px solid $border-color
        
/* Rating */
.ratting
    line-height: 1
    align-items: center
    display: inline-flex
    i
        margin: 3px
        color: #f1b000
        font-size: 14px
                
/*** Slick Dots ***/
.slick-arrow
    +size(55px)
    font-size: 18px
    transition: 0.5s
    background: white
    border-radius: 5px
    color: $secondary-color
    box-shadow: 10px 0 60px rgba(109, 109, 109, 0.2)
    &:focus,
    &:hover
        color: white
        background: $secondary-color
        box-shadow: 10px 0 60px rgba(118, 167, 19, 0.3)
                
/*** Slick Dots ***/
.slick-dots
    flex-wrap: wrap
    margin-top: 20px
    +flexcenter(center)
    li
        position: relative
        cursor: pointer
        +size(10px)
        transition: 0.5s
        margin: 10px 5px 0
        border-radius: 50%
        background: transparent
        border: 2px solid $secondary-color
        button
            opacity: 0
        &.slick-active
            background: $secondary-color

/*** Scroll Top style ***/
.scroll-top
    position: fixed
    bottom: 25px
    right: 0
    +size(40px)
    z-index: 99
    color: white
    display: none
    font-size: 14px
    cursor: pointer
    line-height: 40px
    border-radius: 5px
    background: $primary-color
    animation: pulse 2s infinite
  
/* Text White */
.text-white
    *, a,
    .count-text,
    .footer-newsletter-content .sub-title
        color: white
    li li
        .dropdown-btn
            span
                color: $heading-color
    .copyright-area
        p
            opacity: 0.5
        a
            opacity: 0.5
            &:hover
                opacity: 1
            
/* Video Play */
.video-play
    color: white
    font-size: 18px
    display: inline-block
    +circle($orange-color, 90px)
    +res-bl(sm)
        +size(70px)
        font-size: 16px
        line-height: 70px
        
/* Video Play With Text */
.video-play-text
    display: flex
    align-items: center
    i
        color: white
        font-size: 14px
        margin-right: 15px
        +circle($secondary-color, 55px)
    span
        font-weight: 500
        text-decoration: underline
        
/* 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: 4px 20px
        border-radius: 5px
        margin: 0 5px 10px
        color: $heading-color
        +res-bl(xs)
            +gapLR(padding, 15px)
        &.current
            background: white
            color: $secondary-color
            text-decoration: underline
            box-shadow: 10px 0 60px rgba(195, 195, 195, 0.5)
            
.filter-btns-two
    display: flex
    flex-wrap: wrap
    font-weight: 500
    +gapLR(margin, -18px)
    +res-ab(md)
        font-size: 18px
    +res-bl(sm)
        +gapLR(margin, -8px)
    li
        cursor: pointer
        transition: 0.5s
        margin: 0 18px 10px
        border-bottom: 3px solid transparent
        +res-bl(sm)
            +gapLR(margin, 8px)
        &.current
            color: $primary-color
            border-color: $primary-color
                
            

/* Position */
.rel
    position: relative
    
@for $i from 0 through 5
    .z-#{0 + $i}
        z-index: 0 + $i
    
.overlay
    +overlay($heading-color, 0.75)
    
/* Backgruond Size */
.bgs-cover
    background-size: cover
    background-position: center
    
/* Color + Background */
.bgc-black
    background-color: #070c13
.bgc-primary
    background-color: $primary-color
.bgc-secondary
    background-color: $secondary-color
.bgc-dark-blue
    background-color: $dark-blue-color
.bgc-lighter
    background-color: $lighter-color
.color-secondary
    color: $secondary-color
.bgc-black-with-lighting
    background: #1e1e22
    &:after,
    &:before
        position: absolute
        +size(450px)
        z-index: -1
        content: ''
        border-radius: 50%
        background: $orange-color
        animation: zoomInOut 5s infinite
    &:after
        right: -8%
        top: -15%
        filter: blur(110px)
    &:before
        left: -10%
        top: 20%
        filter: blur(350px)
        animation-delay: 2.5s
    
/* Border Radius */
@for $i from 1 through 6
    .br-#{5 * $i}
        border-radius: 5px * $i
    
/* Home One */
.home-one
    font-family: 'Catamaran', sans-serif
    .count-text,
    .price-and-btn .price,
    .blog-item .content h4,
    h1, h2, h3, h4, h5, h6,
    .blog-item .content .date,
    .h1, .h2, .h3, .h4, .h5, .h6,
    .blog-item .content .post-by a,
    .work-process-item .number
        font-family: 'Kumbh Sans', sans-serif
    
    a:hover,
    .details-btn,
    .slick-arrow,
    .counter-item > i,
    .section-title h2 span,
    .blog-item .content .date,
    .style-two .counter-title,
    .section-title .sub-title,
    .list-style-two li a:hover,
    .social-style-two a:not(:hover)
        color: $orange-color
        
    .theme-btn,
    .scroll-top,
    .details-btn:hover,
    .slick-arrow:hover,
    .slick-arrow:focus,
    .list-style-two li:before,
    .list-style-one li:before,
    .social-style-two a:hover,
    .work-process-item .icon i,
    .slick-dots li.slick-active,
    .theme-btn.style-three:after,
    .list-style-two li:hover:before,
    .work-process-item:hover .icon i,
    .hidden-bar .social-style-one a:hover,
    .widget_nav_menu .list-style-two li:hover:before
        background: $orange-color
        
    .slick-dots li,
    .theme-btn.style-three:hover,
    .work-process-item .icon:before,
    .hidden-bar .social-style-one a:hover
        border-color: $orange-color
        
    .slick-arrow:focus,
    .slick-arrow:hover,
    .details-btn:hover,
    .theme-btn.style-three,
    .social-style-two a:hover,
    .hidden-bar .social-style-one a:hover
        color: white
        
    .theme-btn
        border-radius: 27px
        &:after
            background: black
        
    .slick-arrow
        border-radius: 50%
        
    .preloader
        background-image: url(../images/preloader2.gif)
        
    .text-center
        .sub-title
            &:after,
            &:before
                display: block
            
/* Home Two */
.home-two
    h2
        +res-ab(md)
            font-size: 42px