/*============================================
   Display 1440.98px
 ===========================================*/
@media only screen and (min-width: 300px) and (max-width: 1440.98px)
    .welcome-banner-area
        .swiper-control
            .welcome-banner-next
                right: 40px
                bottom: 40px
                top: auto
                i
            .welcome-banner-prev
                left: auto
                top: auto
                right: 80px
                bottom: 40px
                i
        .welcome-banner-slider
            .welcome-banner-single-slide
                .dot-bg-animation
                .container
                    .banner-position-area
                        right: -140px
                        img
                    .row
    .email-box-area
        .title 
            margin-bottom: 20px
            h2
                font-size: 44px
                line-height: 45px
        .content
            margin-bottom: 20px
            display: none
    .services-area
        .services-list
            .single-service
                padding: 30px
                &:hover
                    .read-more
                        a
                        i
                                
                .img
                    img
                .title
                    h2
                .content
                    p
                .read-more
                    a
                i
    .work-area
        .work-tab-are
            .row
            .work-title-slider
                margin-top: 5px
                .work-single-title
                    p
                        font-size: 13px
                        font-weight: 600
                        &:hover
                .swiper-slide-active
                    .work-single-title
                        p
            .work-wiper-arow
                .swiper-button-next
                .swiper-button-prev
        .work-tab-content
            .work-content-slider
            .work-list-area
                .work-single-item
                    &:hover
                    .work-image
                        img
                    .work-single-content
                        padding-top: 30px
                        padding-bottom: 35px
                        padding-left: 35px
                        padding-right: 39px
                        .work-tag
                            margin-bottom: 35px
                            a
                        .work-title
                            h2
                                a
                        .work-content
                            p
                    &:hover
                        .work-title
                            h2
                                a
        .work-cunter-area
            .count-single
                span
                p
    .number-area
        .row
        .number-left
            h3
                font-size: 24px
            h5 
        .number-right
            h3 
                font-size: 37px
/*============================================
   Display 1199px
 ===========================================*/
@media only screen and (min-width: 300px) and (max-width: 1199px)
    .has-3-columns
        .wp-block-quote
            p
                padding-left: 25px
            cite
                padding-left: 65px
                &:after
                    left: 32px
/*============================================
   Display 991px
 ===========================================*/
@media only screen and (min-width: 300px) and (max-width: 991.98px)
    .mobile-menu
        padding-top: 80px !important
        .responsive-menu-me
            background: transparent
        .menu-testing-menu-container
            ul
                li
                    a
                        padding: 10px 20px
                    ul
        .social-and-menu-area
            margin-top: 50px
            .social-area
                ul
                    justify-content: center
    .respons-menu-open
        &:after, &:before
            content: ""
            display: block
            height: 100%
            position: absolute
            width: 1px
            left: 0
            top: 0
            background: #fe581736
        &:after
            left: 25%
        &:before
            left: 75%
        position: fixed
        width: 0%
        height: 100%
        max-width: 100%
        top: 0
        left: 0
        z-index: 9
        background: #f1f1f1
        display: block !important
        padding: 0px
        overflow: hidden
        transition: .5s

        .social-and-menu-area.lg-none
            display: block !important
            ul
                justify-content: center
                margin-top: 20px
    .res-menu-opn
        .respons-menu-open
            width: 100%
            overflow-y: auto
        .menu-bar-area
            z-index: 10
            span
                transform: rotate(45deg)
    .header-area
        .sm-none
            display: none
        .logo-area
            a
                img
        .nav-menu-area
            ul.nav-menu
                li
                    a
                    &:hover
                        a
        .social-and-menu-area
            .social-area
                ul
                    li
                        a
                            margin-left: 20px
                            i
                        &:hover
                            a
                                i
        .menu-bar-area
            display: block
            .bar-icon
                float: right
                display: block
                width: 100%
                height: auto
                max-width: 30px
                cursor: pointer
                span
                    width: 100%
                    height: 3px
                    display: block
                    background: #fe5817
                    float: left
                    margin: 2px auto
            position: relative
    .email-box-area
        .title 
            h2
                font-size: 45px
        .content
            margin-bottom: 20px
    .services-area
        .services-slide-contro-area
            display: block
        .services-list
            .col-lg-3
                &:last-child
                    .single-service
                        border-right: 0px solid $color-highlight-four
                &:nth-child(2n+0)
                    .single-service
                        border-right: 0px solid $color-highlight-four
    .why-choose-area 
        .row
        .why-img-area
            img
        .why-choose-content
            .content
                p
            .singlle-content-area
                .singlle-content-title
                    h2
                .singlle-content-content
                    p
            .button-area
                .icon-button
                    a
                    i
    .price-area
        .section-contenet-border
        .swiper-slide
            &:first-child
                .price-single-item
            &:last-child
                .price-single-item
        .swiper-slide-active
                .price-single-item
        .price-pagination-area
            display: flex

        .price-single-item
            &:hover
            .price-type
                h6
                span
            .price-rate
                p
                    span
                        &:nth-child(1)
                        &:nth-child(2)
                        &:last-child
            .price-congif
                p
                    font-size: 14px
            .price-body
                ul
                    li
                        p
            .price-buy-btn
                a
            &:hover
                .price-buy-btn
                    a
    .work-area
        .work-cunter-area
            .count-single
                margin: 10px auto
                span
                p
    
    .number-area
        .row
        .number-left
            h3
                font-size: 24px
            h5 
        .number-right
            h3 
                font-size: 27px
@media only screen and (min-width: 300px) and (max-width: 767.98px)
    body.admin-bar .header-area
        margin-top: 0
    body.admin-bar.home.blog .header-area
        margin-top: 32px
    body.admin-bar.home.blog .header-area.addBackground
        margin-top: 0px
    .home.blog .main-blog-area.blog-list-page
        margin-top: 30px
    .main-blog-area
        .blog-post-header-area
            h1
                font-size: 30px
                line-height: 30px
            p
                text-align: center
        .post-navigation
    .blog-list-single-item
        padding-bottom: 30px
        margin-top: 20px
        .blog-list-content
            margin-top: 0px
    .header-area
        .logo-area
            a
                img
        .nav-menu-area
            ul.nav-menu
                li
                    a
                    &:hover
                        a
        .sm-none
            display: none
        .social-and-menu-area
            .social-area
                ul
                    li
                        a
                            margin-left: 20px
                            i
                        &:hover
                            a
                                i
    
    
    .work-area
        .work-tab-are
            .work-wiper-arow
                display: flex
                justify-content: flex-start
                align-items: center
                margin-top: 40px
                .swiper-button-next
                .swiper-button-prev
    .blog-area
        .row
        .swiper-control
            .swiper-button-next
            .swiper-button-prev
        .blog-list-area
        .blog-single-item
            &:hover
                .blog-title
                    h2
            .blog-image
                img
            .blog-content
                padding: 18px 25px 27px 25px
                .blog-tag
                    display: block
                    
                    a
                    span
                        margin-left: 0px
                        margin-top: 10px
                        display: block
                .blog-title
                    h2
                        font-size: 18px
    .section-title
        .sub-tag
            h3
                font-size: 33px
    .number-area
        .row
        .number-left
            h3
                font-size: 22px
            h5 
        .number-right
            h3 
                text-align: right
    .seen-fetrued-area
        .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
    .footer-top-area
        .footer-single-content
            .logo-area
                a
                    img
            .contact-area-footer
                p
                h3
                h4
        .footer-single-content
            margin-top: 10px
            .title
                h2
            .link-area
                ul
                    li
                        a
                        &:hover
                            a
            .footer-form
                p
                .subscrib-input-field
                    input
                    button
                        i
    .footer-bottom-area
        .row
        .copyright-text 
            p
        .social-area
            ul
                li
                    a
                    &:hover
                        a
/*============================================
   Display 575px
 ===========================================*/
@media only screen and (min-width: 300px) and (max-width: 575.98px)
    .seen-fetrued-area
        .seen-fetrued
            padding-bottom: 30px
    .services-area
        padding-top: 50px
        margin-bottom: 35px
        .services-list
            margin-top: 40px
    .why-choose-area .why-choose-content .button-area
        margin-bottom: 50px
    .work-area
        padding-top: 63px
        padding-bottom: 40px
    .work-area .work-tab-content .work-list-area .work-single-item
        margin-bottom: 40px
    .client-area
        margin-top: 60px
        margin-bottom: 65px
        .client-list
            margin-top: 57px
            padding-bottom: 73px
    .price-area
        padding-bottom: 55px
    .blog-area
        padding-top: 60px
        padding-bottom: 60px
    .footer-area .footer-top-area .footer-widget-padding
        padding-top: 10px
    .widget
        margin-bottom: 20px
    .footer-area .footer-bottom-area
        margin-top: 0
    .single-comment-post-area
        .comment-meta
            display: block !important
            .comment-metadata
                border-top: 0px !important
                margin-left: 0px !important
            .comment-author
                .fn
                    border-top: 0px !important
        .arado-comment-area
            ol
                li
                    ol
                        padding-left: 15px
                        li
                            ol
                                padding-left: 5px
                                li
            .comment-body
                .reply
                    padding-left: 15px
    .blog-list-content
        padding-left: 0px
        h1
            font-size: 36px
            line-height: 36px
        h2
            font-size: 29px
            line-height: 30px
        h3
            font-size: 26px
            line-height: 26px
        h4
            font-size: 22px
            line-height: 22px
        h5
            font-size: 18px
            line-height: 18px
        h6
            font-size: 14px
            line-height: 14px
        .wp-block-quote
            p
                padding-left: 15px
            cite
                &:after
                br
        .wp-block-quote[style="text-align:right"]
            p
                padding-right: 15px
            cite
    .respons-menu-open
        ul.nav-menu
            li
                a
                    // font-size: 20px !important
                    // padding: 10px 0px
                    // text-transform: uppercase
    .button-bg-one
        padding: 15px 10px
    .section-title
        text-align: center
        .sub-tag
            margin-top: 5px
            h3
    .email-box-area
        text-align: center
        .title 
            h2
                font-size: 25px
                line-height: 25px
                br
                    display: none
        .content
            p
                font-size: 15px
                line-height: 18px
        .email-box
            .form-single
                width: 100%
                position: relative
                max-width: 300px
                margin: 0 auto
                display: block
                float: none
                margin-bottom: 10px
                input
                    padding: 15px 0px
                    padding-left: 50px
                    max-width: calc( 100% - 50px )
                    &:focus
                        border-color: $color-orange
                i
                    line-height: 15px
                    left: 22px
            button
            .ajax-loader
                position: absolute
    .welcome-banner-area
        .swiper-control
            .welcome-banner-next
                right: auto
                left: calc( 50% + 5px )
                i
            .welcome-banner-prev
                left: calc( 50% - 40px)
                top: auto
                right: auto
                bottom: 40px
                i
        .welcome-banner-slider
            .welcome-banner-single-slide
                .dot-bg-animation
                .container
                    .banner-position-area
                        right: -80px
                        img
                    .row
                        width: unset
    .why-choose-area 
        .row
        .why-img-area
            img
        .why-choose-content
            text-align: center
            .content
                p
            .singlle-content-area
                .singlle-content-title
                    h2
                .singlle-content-content
                    p
            .button-area
                .icon-button
                    margin: 0 auto
                    a
                        margin: 0 auto
                    i
    .services-area
        .services-list
            .single-service
                text-align: center
                .read-more
                    justify-content: center
    .work-area
        .work-tab-are
            .row
            .work-title-slider
                .swiper-slide
                    -ms-flex: 0 0 50%
                    flex: 0 0 50%
                    max-width: 50%
                    margin: 0 !important
                    .work-single-title
                        text-align: center
                .swiper-wrapper
                    display: -ms-flexbox
                    display: flex
                    -ms-flex-wrap: wrap
                    flex-wrap: wrap
                .work-single-title
                    p
                        font-size: 15px
                        margin-top: 10px
                        &:hover
                .swiper-slide-active
                    .work-single-title
                        p
            .work-wiper-arow
                justify-content: center
                .swiper-button-next
                .swiper-button-prev
        .work-tab-content
            .work-content-slider
                padding-top: 60px
                padding-bottom: 0
                text-align: center
            .work-list-area
                .work-single-item
                    &:hover
                    .work-image
                        img
                    .work-single-content
                        padding-top: 30px
                        padding-bottom: 35px
                        padding-left: 35px
                        padding-right: 39px
                        .work-tag
                            margin-bottom: 35px
                            a
                        .work-title
                            h2
                                a
                        .work-content
                            p
                    &:hover
                        .work-title
                            h2
                                a
        .work-cunter-area
            .count-single
                justify-content: center
                align-items: center
                span
                p
    .client-area
        .row
        .swiper-control
            justify-content: center
            margin-top: 40px
            .swiper-button-next
            .swiper-button-prev
        .client-list
            .single-client
                width: 100%
                padding-top: 30px
                padding-bottom: 30px
                padding-left: 20px
                padding-right: 20px
                &:hover
                .single-client-logo
                    img
                        margin: 0 auto
                        float: none
                        display: block
                .single-client-content
                    text-align: center
                    p
                .bottom-content-client
                    display: block
                    text-align: center
                    .single-client-img
                        img
                            
                    .single-client-detail
                        .single-client-name
                            h2
                        .single-client-compnay
                            p
                    .single-client-qt
                        img
                            width: 25px
                            height: auto
    .price-area
        .section-contenet-border
        .swiper-slide
            &:first-child
                .price-single-item
            &:last-child
                .price-single-item
        .swiper-slide-active
            .price-single-item
        .price-pagination-area
            justify-content: center
            margin-top: 40px
            display: flex
        .price-single-item
            text-align: center
            &:hover
            .price-type
                justify-content: center
                h6
                span
            .price-rate
                p
                    span
                        &:nth-child(1)
                        &:nth-child(2)
                        &:last-child
            .price-congif
                p
            .price-body
                ul
                    li
                        p
            .price-buy-btn
                a
            &:hover
                .price-buy-btn
                    a
    .blog-area
        .row
        .swiper-control
            justify-content: center
            margin-top: 40px
            .swiper-button-next
            .swiper-button-prev
    .footer-top-area
        .footer-single-content
            .logo-area
                a
                    img
                        margin: 0 auto
            .contact-area-footer
                text-align: center
                p
                h3
                h4
        .footer-single-content
            text-align: center
            .title
                h2
            .link-area
                ul
                    li
                        a
                        &:hover
                            a
            .footer-form
                p
                .subscrib-input-field
                    margin: 0 auto
                    input
                    button
                        i
    .footer-bottom-area
        .row
        .copyright-text 
            p
                text-align: center
        .social-area
            ul
                justify-content: center !important
                margin-top: 10px
                li
                    a
                    &:hover
                        a
    .number-area
        padding: 20px 10px
    .price-area .price-single-item .price-buy-btn
        margin-top: 0px
    .blog-banner-area
        margin-top: calc( 91px + 12px)
        margin-bottom: 20px
    .blog-ditail-area
        .post-nagivation-area
            display: block
            margin-bottom: 10px
            padding-top: 30px
            margin-top: 30px
        blockquote.blockquote-area
            .blockquote-description
                border-left: 2px solid $color-orange !important
                padding-left: 15px !important
                p
        .blog-sub-title-area
            h3
                text-align: center
                font-size: 20px !important
        .post-content-area
            padding-right: 0px
            .bog-single-title-area
                h2
                    text-align: center
                    font-size: 25px
            .blog-date-area
                flex-wrap: wrap
                margin-bottom: 25px
                .user-blog
                    p
                        padding-left: 5px
        .blog-content-area
            text-align: center
        .share-ares-post
            justify-content: center
        .post-tag-area
            ul
                flex-wrap: wrap
                justify-content: center
/*============================================
   Display landscape
 ===========================================*/
@media only screen and (min-width: 300px) and (max-width: 800px) and (orientation: landscape)
    .respons-menu-open
        ul.nav-menu
            li
                a
                    // font-size: 20px !important
                    // padding: 10px 0px
                    // text-transform: uppercase