/*============================================
   Table of contents
        1. Base Css
        2. Blog Css
        3. Other Page Css
        4. Header Css
        5. Welcome Banner Css
        6. services Css
        7. why choose Css
        8. work area Css
        9. client area Css
        10. price area Css
        11. blog area Css
        12. Footer area Css
        13. Responsive Css
 ===========================================*/


/*============================================
       1. Base Css
 ===========================================*/    
@charset "UTF-8"
    
$Karla-font: 'Karla', sans-serif
$color-highlight-one: #666666
$color-highlight-two: #999999
$color-highlight-three: #010101
$color-highlight-four: #e3e3e3
$color-highlight-five: #f9f9f9
$color-highlight-six: #f9f9f9
$color-highlight-seven: #f6f6f8
$color-highlight-eight: #cccccc
$color-white: #ffffff
$color-black: #000000
$color-orange: #ff4800

@import "base.sass"

.item-start-start
    display: flex
    justify-content: flex-start
    align-items: flex-start
.item-start-center
    display: flex
    justify-content: flex-start
    align-items: center
.item-end-end
    display: flex
    justify-content: flex-end
    align-items: flex-end
.item-center-center
    display: flex
    justify-content: center
    align-items: center
.height-100
    height: 100%
.width-100
    width: 100%
.overflow-fix
    float: left
    width: 100%
    height: auto
.item-full-center-content
    display: flex
    justify-content: center
    align-items: center
    width: 100%
    height: 100%
    position: relative
    padding-right: 4.25rem
    padding-left: 4.25rem
.button-bg-one
    width: 200px
    height: 60px
    background-color: $color-orange
    padding: 21px 20px
    color: $color-white
    font-family: $Karla-font
    font-size: 16px
    font-weight: 700
    text-transform: uppercase
    letter-spacing: 0.4px
    border: 0
    border-radius: 3px
.sinle-input-field
    background-color: $color-white
    color: $color-black
    font-family: $Karla-font
    font-size: 16px
    font-weight: 400
    letter-spacing: -0.24px
    padding: 20px 0
    border-radius: 3px
    border: 1px solid #00000000
.inline-from
    max-width: 300px
    width: 100%
    position: relative
    input
        padding: 15px 19px 15px 15px
        width: 100%
        height: 44px
        background-color: #f1f1f3
        border: 1px solid transparent
        border-radius: 2px
        &:focus
            border-color: $color-orange
    button
        position: absolute
        top: 0
        right: 15px
        height: 44px
        border: 0
        background: transparent
        i
            line-height: 44px
            font-size: 16
            color: $color-highlight-one
            width: 30px
            text-align: right
.arow-button
    background-image: none
    width: 34px
    height: 34px
    background-color: $color-highlight-eight
    color: $color-white
    border-radius: 3px
    &:hover
        background-color: $color-orange
    i
        color: #f1f1f3
        font-size: 20px
        font-weight: 400
        text-transform: uppercase
        letter-spacing: 0.5px
        width: 100%
        line-height: 35px
        text-align: center
.section-title
    .title
        h2
            color: $color-highlight-two
            font-family: $Karla-font
            font-size: 16px
            font-weight: 700
            text-transform: uppercase
            letter-spacing: 0.4px
    .sub-tag
        margin-top: 30px
        h3
            color: $color-highlight-three
            font-family: $Karla-font
            font-size: 36px
            font-weight: 700
            letter-spacing: -1.26px
            line-height: 37px
.swiper-control
    .swiper-button-next
        @extend .arow-button
        i
    .swiper-button-prev
        @extend .arow-button
        i
/*============================================
       2. Blog Css
 ===========================================*/    
@import "blog-01.sass"
@import "blog.sass"
/*============================================
       3. Other Page Css
 ===========================================*/   
@import "other-page.sass"

.mouse-cursor
    position: fixed
    top: -18px
    left: -18px
    height: 40px
    width: 40px
    z-index: 99
    opacity: 0
    border: 1px solid $color-orange
    border-radius: 50%
    pointer-events: none
    cursor: none
    &::before
        content: ""
        height: 100%
        width: 100%
        position: absolute
        left: 0
        top: 0
        border-radius: 50%
        transition: all .03 $easeOutQuad
    .tag-mouse-over &
        border: 0
        background: #00000030
.mouse-cursor-dot
    @extend .mouse-cursor
    border: 0
    &::before
        background: $color-orange
        height: 10px
        width: 10px
        left: calc( 50% - 5px )
        top: calc( 50% - 5px )
        transition: all .03 $easeOutQuad
        .tag-mouse-over &
            background: $color-white
/*============================================
       4. Header Css
 ===========================================*/   
.heade-not-fixed
    .header-area
        position: relative
    .header-area.addBackground
        position: fixed
.header-area.addBackground
    background: #fff
    padding-top: 10px
    transition: 0.5s
    box-shadow: 0px 0px 2px #ff48002b

.header-area
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: auto
    padding: 40px 0px
    padding-bottom: 10px
    background: transparent
    z-index: 11
    .row
        align-items: center
    .logo-area
        a
            img
        h2
            text-transform: uppercase
            font-weight: 600
    .nav-menu-area
        ul
            display: flex
            justify-content: flex-start
            align-items: center
            flex-wrap: wrap
            li
                margin-right: 40px
                position: relative
                a
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 400
                    letter-spacing: -0.24px
                    padding: 10px 0px
                &:hover
                    a
                        color: $color-orange
                    ul
                        
                        z-index: 2
                        top: 50px
                        opacity: 1
                        visibility: visible
                        .menu-item-has-children, .page_item_has_children
                            &:after
                                content: '\f2fb'
                                display: inline-block
                                font: normal normal normal 14px/1 'Material-Design-Iconic-Font'
                                font-size: inherit
                                text-rendering: auto
                                -webkit-font-smoothing: antialiased
                                -moz-osx-font-smoothing: grayscale
                                position: absolute
                                right: 20px
                                top: 15px
                                color: $color-orange
                        li
                            
                            a
                                color: $color-black
                            &:hover
                                ul
                                    opacity: 1
                                    visibility:  visible
                                    li
                                        &:hover
                                            ul
                                                opacity: 1
                                                visibility:  visible
                                        ul
                                            opacity: 0
                                            visibility: hidden
                            ul
                                opacity: 0
                                visibility: hidden

            ul
                position: absolute
                top: 100px
                right: 0
                background: #fff
                width: 280px
                opacity: 0
                visibility: hidden
                transition: .5s
                li
                    margin-right: 0
                    width: 100%
                    a
                        padding: 13px 30px 
                        border-left: 3px solid $color-orange
                        border-bottom: 1px solid #e4e4e4
                    ul
                        position: absolute
                        left: 280px
                        top: 0 !important


    .lg-none
        display: none
    .social-and-menu-area
        .social-area
            ul
                display: flex
                justify-content: flex-end
                align-items: center
                li
                    a
                        margin-left: 25px
                        i
                            color: $color-highlight-two
                            font-size: 18px
                            font-weight: 400
                            line-height: 24px
                    &:hover
                        a
                            i
                                color: $color-highlight-two
                                font-size: 18px
                                font-weight: 400
                                line-height: 24px
                                color: $color-orange
    .menu-bar-area
        display: none
        .bar-icon
            span
                transition: .3s
            span
            span
.swiper-wrapper
    height: 100%
/*============================================
       5. Welcome Banner Css
 ===========================================*/  
.welcome-banner-area
    height: 100vh
    display: flex
    justify-content: flex-start
    align-items: center
    overflow-x: hidden
    .swiper-control
        .welcome-banner-next
            right: 100px
            @extend .arow-button
            i
        .welcome-banner-prev
            left: 100px
            @extend .arow-button
            i
    .welcome-banner-slider
        width: 100%
        height: 100%
        .welcome-banner-single-slide
            background-size: cover
            position: relative
            width: 100%
            height: 100%
            .dot-bg-animation
                position: absolute
                left: 0
                top: 0
                width: 100%
                height: 100%
            .container
                position: relative
                display: flex
                justify-content: flex-start
                align-items: center
                height: 100%
                .banner-position-area
                    position: absolute
                    right: -250px
                    bottom: 0
                    -ms-flex: 0 0 65%
                    flex: 0 0 65%
                    max-width: 65%
                    height: 100%
                    @extend .item-end-end
                    img
                .row
                    width: 100%

.email-box-area
    .title 
        margin-bottom: 40px
        h2
            color: $color-black
            font-family: $Karla-font
            font-size: 58px
            font-weight: 700
            line-height: 72px
            letter-spacing: -3px
    svg
        display: none
    .content
        margin-bottom: 70px
        p
            color: $color-highlight-one
            font-family: $Karla-font
            font-size: 18px
            font-weight: 400
            line-height: 30px
            letter-spacing: -0.27px
    .email-box
        .form-single
            float: left
            width: 100%
            margin-bottom: 10px
            position: relative
            input
                @extend .sinle-input-field
                padding-left: 55px
                width: 100%
                max-width: 370px
                &:focus
                    border-color: $color-orange
            i
                color: #cccccc
                padding: 20px 0px
                padding-left: 20px
                font-size: 24px
                font-weight: 400
                letter-spacing: -0.36px
                position: absolute
                left: 0
                top: 0
                line-height: 25px
        .sub-btn
            margin-top: 10px
            height: auto
            @extend .button-bg-one
            color: #ffffff
        
/*============================================
       6. services Css
 ===========================================*/  
.seen-fetrued-area
    padding-top: 80px
    .seen-fetrued
        display: flex
        justify-content: space-between
        align-items: center
        margin-top: 30px
        padding-bottom: 80px
        border-bottom: 1px solid #e4e4e4
        flex-wrap: wrap
        .seen-fetrued-img
            margin-top: 10px
            img
                max-height: 50px
.services-area
    padding-top: 100px
    margin-bottom: 125px
    .services-slide-contro-area
        .services-slide-contro
            max-width: 100px
            width: 100%
            overflow: hidden
            display: block
            position: relative
            height: 40px
            margin: 20px auto
            .swiper-button-next, .swiper-button-prev
                margin-top: 0px
                top: 0px
        display: none
    .services-list
        margin-top: 75px
        border: 1px solid $color-highlight-four
        margin-left: 0
        margin-right: 0
        .col-lg-3
            padding: 0
            &:last-child
                .single-service
                    border-right: 0px solid $color-highlight-four
        .single-service
            padding-left: 30px
            padding-top: 50px
            padding-bottom: 45px
            padding-right: 30px
            border-right: 1px solid $color-highlight-four
            border-top: 4px solid transparent
            transition: .3s
            height: 100%
            &:hover
                border-top-color: $color-orange
                background: $color-highlight-five
                .read-more
                    a
                        color: $color-orange
                    i
                        color: $color-orange
                            
            .img
                max-height: 44px
                margin-bottom: 43px
                img
                    width: auto
                    height: 44px
                    font-size: 46px
                    font-weight: 400
                    letter-spacing: -1.61px
            .title
                margin-bottom: 22px
                h2
                    color: $color-highlight-three
                    font-family: $Karla-font
                    font-size: 20px
                    font-weight: 700
                    letter-spacing: -0.7px
            .content
                margin-bottom: 40px
                color: $color-highlight-two
                font-family: $Karla-font
                font-size: 15px
                font-weight: 400
                line-height: 26px
            .read-more
                display: flex
                justify-content: flex-start
                align-items: center
                a
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 14px
                    font-weight: 400
                    text-transform: uppercase
                    letter-spacing: 0.35px
            i
                margin-left: 5px
                font-size: 19px
                letter-spacing: 0.4px
                position: relative
                top: 0px
/*============================================
       7. why choose Css
 ===========================================*/  
.why-choose-area
    background-position: left center
    background-repeat: no-repeat
    background-attachment: fixed
    .why-img-area
        height: 100%
        display: flex
        justify-content: flex-start
        align-items: flex-end
        img
    .why-choose-content
        margin-top: 43px
        .content
            color: $color-highlight-two
            font-family: $Karla-font
            font-size: 16px
            font-weight: 400
            line-height: 26px
        .singlle-content-area
            margin-bottom: 50px
            .singlle-content-title
                margin-bottom: 23px
                color: #181b31
                font-family: $Karla-font
                font-size: 20px
                font-weight: 700
                line-height: 48px
                letter-spacing: -0.5px
            .singlle-content-content
                color: $color-highlight-two
                font-family: $Karla-font
                font-size: 16px
                font-weight: 400
                line-height: 30px
        .button-area
            margin-top: 30px
            margin-bottom: 170px
            .icon-button
                a
                    @extend .button-bg-one
                    color: #fff
                    display: flex
                    justify-content: center
                    align-items: center
                    i
                        margin-left: 5px
                        position: relative
                        top: 1px
/*============================================
       8. work area Css
 ===========================================*/  
.work-area
    padding-top: 133px
    padding-bottom: 144px
    .work-tab-are
        .row
            align-items: flex-end
        .work-title-slider
            .work-single-title
                p
                    color: $color-highlight-two
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 400
                    text-transform: uppercase
                    letter-spacing: 0.4px
                    background: transparent
                    border: 0px
                    cursor: pointer
                    &:hover
                        color: $color-highlight-three
            .swiper-slide-thumb-active
                .work-single-title
                    p
                        color: $color-highlight-three
        .work-wiper-arow
            display: flex
            justify-content: flex-end
            align-items: center
            .swiper-button-next
                position: relative
                top: auto
                right: auto
                bottom: auto
                left: auto
            .swiper-button-prev
                position: relative
                top: auto
                right: auto
                bottom: auto
                left: auto
                margin-right: 10px
    .work-tab-content
        .work-content-slider
            padding-top: 110px
            padding-bottom: 47px
        .work-list-area
            .work-single-item
                border-radius: 3px
                background: $color-white
                transition: .3s
                margin-bottom: 100px
                &:hover
                    box-shadow: 0 30px 100px rgba(204, 211, 215, 0.75)
                .work-image
                    max-height: 271px
                    overflow: hidden 
                    img
                        width: 100%
                .work-single-content
                    padding-top: 30px
                    padding-bottom: 35px
                    padding-left: 35px
                    padding-right: 39px
                    .work-tag
                        margin-bottom: 15px
                        a
                            color: $color-highlight-one
                            font-family: $Karla-font
                            font-size: 14px
                            font-weight: 400
                            text-transform: uppercase
                            letter-spacing: 0.35px
                    .work-title
                        height: 30px
                        overflow: hidden
                        margin-bottom: 10px
                        h2
                            color: $color-black
                            font-family: $Karla-font
                            font-size: 26px
                            font-weight: 700
                            letter-spacing: -0.91px
                    .work-content
                        height: 60px
                        overflow: hidden
                        p
                            color: $color-highlight-two
                            font-family: $Karla-font
                            font-size: 16px
                            font-weight: 400
                            line-height: 26px
                &:hover
                    .work-title
                        h2
                            a
                                color: $color-orange
    .work-cunter-area
        display: flex
        flex-wrap: wrap
        margin-right: 0
        margin-left: 0
        width: 100%
        .count-single
            display: flex
            flex-wrap: wrap
            span
                color: $color-black
                font-family: $Karla-font
                font-size: 60px
                font-weight: 700
                letter-spacing: -2.1px
                margin-right: 15px
                line-height: 70px
            p
                color: $color-highlight-one
                font-family: $Karla-font
                font-size: 18px
                font-weight: 400
                margin-top: 10px
                line-height: 27px
                text-transform: uppercase
                letter-spacing: -0.63px

/*============================================
       9. Client area Css
 ===========================================*/  
.client-area
    margin-top: 138px
    margin-bottom: 125px
    .row
        align-items: flex-end
    .swiper-control
        display: flex
        justify-content: flex-end
        align-items: center
        .swiper-button-next
            position: relative
            top: auto
            right: auto
            bottom: auto
            left: auto
        .swiper-button-prev
            position: relative
            top: auto
            right: auto
            bottom: auto
            left: auto
            margin-right: 10px
    .client-list
        margin-top: 87px
        padding-bottom: 133px
        border-bottom: 1px solid #e4e4e4
        .single-client
            width: 100%
            padding-top: 40px
            padding-bottom: 50px
            padding-left: 50px
            padding-right: 50px
            border: 1px solid #e3e3e3
            background-color: transparent
            float: left
            &:hover
                background-color: $color-highlight-seven
            .single-client-logo
                margin-bottom: 37px 
                @extend .overflow-fix
                img
                    height: 40px
                    width: auto
                    float: left
            .single-client-content
                margin-bottom: 50px
                @extend .overflow-fix
                color: $color-highlight-three
                font-size: 18px
                font-weight: 400
                line-height: 30px
            .bottom-content-client
                @extend .overflow-fix
                display: flex
                align-items: center
                .single-client-img
                    img
                        width: 53px
                        height: 53px
                        border-radius: 50%
                    margin-right: 22px
                .single-client-detail
                    .single-client-name
                        h2
                            color: $color-highlight-three
                            font-family: $Karla-font
                            font-size: 20px
                            font-weight: 700
                            line-height: 30px
                            letter-spacing: -0.5px
                    .single-client-compnay
                        p
                            color: $color-highlight-two
                            font-family: $Karla-font
                            font-size: 14px
                            font-weight: 400
                            line-height: 30px
                .single-client-qt
                    margin-left: auto
                    img
                        width: 54px
                        height: 54px
                        color: #f1f1f3
                        font-size: 72px
                        font-weight: 400
                        line-height: 30px
/*============================================
       10. price area Css
 ===========================================*/  
.price-area
    padding-bottom: 144px
    .section-contenet-border
        border: 1px solid $color-highlight-four
        margin-top: 84px
    .swiper-slide
        &:first-child
            .price-single-item
                border-left: 0
        &:last-child
            .price-single-item
                border-right: 0
    .swiper-slide-active
        .price-single-item
            border: 1px solid $color-highlight-four
            background-color: #f6f6f8
            border-top: 0
            border-bottom: 0
    .swiper-control
        display: flex
        justify-content: flex-end
        align-items: center
        .swiper-button-next
            position: relative
            top: auto
            right: auto
            bottom: auto
            left: auto
        .swiper-button-prev
            position: relative
            top: auto
            right: auto
            bottom: auto
            left: auto
            margin-right: 10px
    .row
        align-items: flex-end
    .price-swiper-control
        margin-bottom: 0px
    .price-pagination-area
        display: none
        .swiper-pagination-price
            display: flex
            justify-content: center
            align-items: center
            width: 100%
            .swiper-pagination-bullet
                width: 35px
                border-radius: 0px
                height: 3px
                margin-top: 10px
                background: $color-highlight-seven
                opacity: 1
            .swiper-pagination-bullet-active
                background: $color-orange
    
    .price-single-item
        padding: 42px 30px 50px 30px    
        border: 1px solid transparent
        border-top: 0
        border-bottom: 0
        height: 100%
        &:hover
            border: 1px solid $color-highlight-four
            background-color: #f6f6f8
            border-top: 0
            border-bottom: 0
        .price-type
            display: flex
            justify-items: flex-start
            align-items: center
            h6
                color: $color-black
                font-family: $Karla-font
                font-size: 18px
                font-weight: 700
                line-height: 72px
                text-transform: uppercase
                letter-spacing: 1.8px
            span
                width: 68px
                height: 22px
                background-color: $color-orange
                color: $color-white
                font-family: $Karla-font
                font-size: 12px
                font-weight: 700
                line-height: 22px
                text-align: center
                text-transform: uppercase
                letter-spacing: 0.3px
                border-radius: 3px
                margin-left: 13px
                padding: 0 5px
        .price-rate
            p
                span
                    color: $color-highlight-two
                    font-family: $Karla-font
                    font-size: 20px
                    font-weight: 400
                    line-height: 72px
                    text-transform: uppercase
                    font-weight: 400
                    letter-spacing: -0.5px
                    &:nth-child(1)
                        color: #669900
                    &:nth-child(2)
                        color: #669900
                    &:last-child
                        margin-left: 5px
        .price-congif
            color: $color-highlight-two
            font-family: $Karla-font
            font-size: 16px
            font-weight: 400
            line-height: 22px
            padding-bottom: 20px
        .price-body
            ul
                li
                    color: $color-highlight-one
                    font-family: $Karla-font
                    font-size: 16px
                    font-weight: 400
                    line-height: 24px
                    text-transform: uppercase
                    letter-spacing: 0.8px
                    padding: 28px 0
                    border-top: 1px solid $color-highlight-four
        .price-buy-btn
            margin-top: 70px
            a
                border: 1px solid transparent
                color: $color-orange
                font-family: $Karla-font
                font-size: 16px
                font-weight: 700
                line-height: 30px
                text-transform: uppercase
                letter-spacing: 0.4px
                padding: 15px 0
                display: block
                text-align: center
        &:hover
            .price-buy-btn
                a
                    background: $color-orange
                    color: $color-white
                    border-color: $color-orange
/*============================================
       11. blog area Css
 ===========================================*/  
.blog-area
    padding-top: 133px
    padding-bottom: 152px
    .row
        align-items: flex-end
    .swiper-control
        display: flex
        justify-content: flex-end
        align-items: center
        .swiper-button-next
            position: relative
            top: auto
            right: auto
            bottom: auto
            left: auto
        .swiper-button-prev
            position: relative
            top: auto
            right: auto
            bottom: auto
            left: auto
            margin-right: 10px
    .blog-list-area
        margin-top: 103px
    .blog-single-item
        background: $color-white
        &:hover
            .blog-title
                h2
                    color: $color-orange
        .blog-image
            min-height: 197px
            max-height: 197px
            overflow-y: hidden
            img
                width: 100%
        .blog-content
            padding: 28px 35px 27px 35px
            .blog-tag
                display: flex
                a
                    font-size: 14px
                    font-weight: 400
                    // Text style for "E, xperien"
                    color: $color-black
                    font-weight: 700
                span
                    color: $color-highlight-two
                    font-weight: 400
                    padding-left: 10px
                    border-left: 1px solid $color-highlight-two
                    margin-left: 10px
            .blog-title
                margin-top: 22px
                h2
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 23px
                    font-weight: 700
                    letter-spacing: -0.84px
.number-area
    padding: 65px
    .row
        align-items: center
    .number-left
        h3
            color: $color-white
            font-size: 30px
            font-weight: 700
            letter-spacing: -0.45px
        h5 
            color: $color-white
            font-size: 16px
            font-weight: 400
            line-height: 30px
    .number-right
        h3 
            color: $color-white
            font-size: 48px
            font-weight: 400
            line-height: 48px
            letter-spacing: -0.72px
.post-comment-area
    background-color: #f3f3f3
    padding-bottom: 115px
    .post-comment-title
        margin-bottom: 40px
        h2
            color: $color-black
            font-family: $Karla-font
            font-size: 22px
            font-weight: 700
            line-height: 26px
            letter-spacing: -0.33px
    .single-input-textarea
        input
            background-color: $color-white
            width: 100%
            border: 1px solid transparent
            color: $color-black
            font-family: $Karla-font
            font-size: 16px
            font-weight: 400
            padding: 20px
            margin-bottom: 30px
        textarea
            background-color: $color-white
            width: 100%
            border: 1px solid transparent
            color: $color-black
            font-family: $Karla-font
            font-size: 16px
            font-weight: 400
            padding: 20px
            height: 261px
            margin-bottom: 30px
        button
            @extend .button-bg-one
            height: auto
.search-blog-area
    margin-bottom: 75px
    width: 100%
    input
        color: $color-highlight-two
        font-family: $Karla-font
        font-size: 16px
        width: 100%
        font-weight: 400
        padding: 15px 20px 
        letter-spacing: -0.24px
        border: 1px solid #d9d9d9
        background-color: $color-white
/*============================================
       12. Footer area Css
 ===========================================*/  
.footer-area
    .footer-top-area
        .footer-widget-padding
            padding-top: 118px
        .footer-single-content
            .logo-area
                margin-bottom: 50px
                a
                    img
            .contact-area-footer
                p
                    color: $color-highlight-two
                    font-weight: 400
                    letter-spacing: 0.35px
                    line-height: 24px
                    text-transform: uppercase
                h3
                    color: $color-black
                    font-family: $Karla-font
                    font-size: 20px
                    font-weight: 400
                h4
                    font-size: 16px
                    font-weight: 400
                    line-height: 30px
        .footer-single-content
            .title
                margin-bottom: 33px
                h2 
                    color: $color-black
                    font-size: 22px
                    font-weight: 700
                    letter-spacing: -0.55px
                    line-height: 24px
            ul
                li
                    a
                        color: $color-highlight-two
                        font-size: 16px
                        font-weight: 400
                        padding: 9px 0
            .footer-form 
                p
                    color: $color-highlight-two
                    font-size: 16px
                    font-weight: 400
                .subscrib-input-field
                    margin-top: 43px
                    @extend .inline-from
                    input
                    .sub-submite
                        position: absolute
                        top: 0
                        right: 0
                        width: 50px !important
                        z-index: 1
                        height: 100%
                        background: transparent !important
                        opacity: 0
                        cursor: pointer
                    i
                        position: absolute
                        top: 14px
                        right: 20px
    .footer-bottom-area
        margin-top: 46px
        .row
            border-top: 1px solid #e3e3e3
            padding: 40px 0
            align-items: center
        .copyright-text 
            p
                color: $color-highlight-one
                font-family: $Karla-font
                font-size: 16px
                font-weight: 400
                line-height: 24px
                font-weight: 400
        .social-area
            ul
                display: flex
                justify-content: flex-end
                align-items: center
                li
                    margin-left: 20px
                    a
                        color: $color-highlight-two
                        font-size: 16px
                        font-weight: 400
                        letter-spacing: -0.24px
                    &:hover
                        a
                            color: $color-orange
// a3
.modal
    display: none
    overflow: hidden
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 30
    -webkit-overflow-scrolling: touch
    outline: none
.gallery-caption, .bypostauthor
    opacity: 1
.slinky-theme-default
    background: transparent 
.social-area
    padding-bottom: 0px
.slinky-theme-default a:not(.back):active
    background: transparent
.slinky-theme-default a:not(.back):hover
    background: transparent
body.admin-bar .header-area
	margin-top: 32px
.mouse-icon-none
    display: none
// elementor css editor
.elementor-editor-active
    
// .elementor-editor-active
//     margin-top: 100px



.elementor-editor-active img
    margin-top: 0px
    margin-bottom: 0px
.othe-page-main-area img
    margin-top: 0px
    margin-bottom: 0px
/*============================================
       13. Responsive Css
 ===========================================*/  
@import "responsive.sass"