:root {
    --theme-color: #f8c771;
    --theme-transition: .5s all ease-in-out;
    --theme-transition-fast: .25s all ease-in-out;
}

body{
    overflow-x:hidden;
    
}

/*@media only screen and (min-width: 960px) {
    body {
        margin-top: -18px;
    }
}*/

    .top-bar {
        background-color: #282828;
        clear: both;
        float: left;
        line-height: 45px;
        padding: 0;
        position: relative;
        width: 100%;
        font-size: 12px;
        color: #fff;
    }

    @media only screen and (max-width: 960px) {
        .top-bar {
            line-height: 37px;
        }
    }

    .top-bar a {
        font-size: 12px;
        color: #fff;
    }

        .top-bar a i {
            color: #969696;
        }

    .text-theme {
        color: var(--theme-color);
    }

    .bg-theme {
        background-color: var(--theme-color);
    }

    .navbar-toggler {
        border-color: #fff;
        transition: var(--theme-transition);
    }

        .navbar-toggler:hover {
            background-color: var(--theme-color);
            transition: var(--theme-color);
        }

    .logo {
        background: #000000;
        margin: 0;
        padding: 15px 0 10px;
        text-align: center;
        width: 100%;
        z-index: 9;
        clear: both;
        display: inline-block;
    }

    .menu-container {
        background: #282828;
    }

    #navbar ul.nav a {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        display: block;
        padding: 14px 0;
        color: #fff;
        transition: var(--theme-transition);
    }

        #navbar ul.nav a:hover {
            color: var(--theme-color);
            transition: var(--theme-transition);
        }

        #navbar ul.nav a.active {
            color: var(--theme-color);
        }

    #navbar ul.nav .nav-item {
        text-align: center;
    }


    .footer {
        font-family: "Roboto",sans-serif;
        padding: 40px 0;
    }

        .footer h4 {
            clear: both;
            text-transform: capitalize;
            width: 100%;
            margin-bottom: 15px;
            color: #cccccc;
            font-weight: 100;
            font-size: 20px;
            font-family: "Roboto",sans-serif !important;
        }

        .footer p, .footer .content-footer {
            font-size: 14px;
            color: #707070;
            padding: 30px 0;
            text-align: justify;
        }

            .footer .content-footer a {
                color: #787878;
                transition: var(--theme-transition-fast);
            }

                .footer .content-footer a:hover {
                    color: var(--theme-color);
                    transition: var(--theme-transition-fast);
                }

    .copyright {
        background: #282828;
        border-top: 1px solid #414141;
        padding: 30px 0;
    }

        .copyright .container-copyright, .copyright .container-copyright a {
            margin: 0 auto;
            position: relative;
            clear: both;
            font-family: 'Raleway', sans-serif;
            font-size: 13px;
            color: #666666;
        }

            .copyright .container-copyright a:hover {
                color: var(--theme-color);
                transition: var(--theme-transition);
            }

    a.social-icons {
        font-size: 25px;
        width: 50px;
        height: 50px;
        color: #666666;
        transition: var(--theme-transition);
        border: 1px solid #666666;
        /* border-radius: 15px; */
        padding: 5px 15px;
        text-align: center;
        display: inline-table;
    }

    a:hover.social-icons {
        color: var(--theme-color);
        transition: var(--theme-transition);
    }

    a.social-icons i {
        text-align: center;
    }


    a.social-icon-top i {
        transition: var(--theme-transition-fast);
    }

    a.social-icon-top:hover i {
        color: var(--theme-color);
        transition: var(--theme-transition-fast);
    }

    /* Owl Carousel */

    .owl-prev, .owl-next {
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, .7) !important;
        color: #666666 !important;
        border: 2px solid #666666 !important;
        margin-top: 25px;
    }

        .owl-prev:hover, .owl-next:hover {
            background-color: var(--theme-color) !important;
            transition: var(--theme-transition) !important;
            color: #282828 !important;
        }

        .owl-prev > span, .owl-next > span {
            font-size: 40px;
            line-height: 25px !important;
        }

    .owl-prev {
        margin-right: 15px;
    }

    .owl-item {
        overflow: hidden;
    }

    /*Slider*/
    .slider-area {
        width: 100%;
        height: 80vh;
    }

    .slider-1 {
        background-image: url(/_images/Slider/Slide1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 0px;
        z-index: -1;
        height: 100%;
        width: 100%;
    }

    .slider-2 {
        background-image: url(/_images/Slider/Slide2.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 0px;
        z-index: -1;
        height: 100%;
        width: 100%;
        filter: grayscale(100%) brightness(65%);
        -webkit-filter: grayscale(100%) brightness(65%);
        -moz-filter: grayscale(100%) brightness(65%);
        -ms-filter: grayscale(100%) brightness(65%);
        -o-filter: grayscale(100%) brightness(65%);
    }

        .slider-1 .content, .slider-2 .content {
        }



    .footer-slider {
        position: absolute;
        bottom: 0;
        height: 55px;
        width: 100%;
        background-color: rgba(0, 0, 0, .7);
    }

        .footer-slider a {
            color: #282828 !important;
            transition: var(--theme-transition);
        }

            .footer-slider a:hover {
                color: var(--theme-color) !important;
                background-color: #282828;
                transition: var(--theme-transition);
            }


    @media only screen and (max-width: 960px) {
        .slider-1 {
            background-image: url(/_images/Slider/Slide1-mobile.jpg);
        }

        .footer-slider {
            height: auto;
        }
    }

    .border-title.aligncenter, .border-title-woi.aligncenter {
        text-align: center;
        margin-bottom: 50px;
        position: relative;
        color: #282828;
        font-weight: 100;
    }

        .border-title.aligncenter:before {
            background: url(/_images/divider.png) no-repeat;
            content: "";
            height: 35px;
            left: 0;
            margin: 0 auto;
            position: absolute;
            right: 0;
            bottom: -40px;
            width: 206px;
            z-index: 9;
        }


    p.aligncenter {
        line-height: 30px;
        width: 85%;
    }

    .aligncenter {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .alignjustify {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: justify;
    }

    p.alignjustify {
        line-height: 20px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #999999;
    }

    p.services {
        line-height: 20px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #999999;
    }

    p {
        line-height: 30px;
        margin-bottom: 10px;
        font-size: 18px;
        color: #999999;
    }


    /*Service Area*/
    .service-area {
        position: relative;
    }

        .service-area .content-image {
            position: relative;
            overflow: hidden;
            border: 2px solid #282828;
        }

        .service-area img.thumb {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            -moz-transform: scale(1.2) rotate(5deg);
            -ms-transform: scale(1.2) rotate(5deg);
            -o-transform: scale(1.2) rotate(5deg);
            -webkit-transform: scale(1.2) rotate(5deg);
            transition: var(--theme-transition-fast);
        }

        .service-area:hover img.thumb {
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            -ms-filter: grayscale(0%);
            -o-filter: grayscale(0%);
            -moz-transform: scale(1) rotate(0deg);
            -ms-transform: scale(1) rotate(0deg);
            -o-transform: scale(1) rotate(0deg);
            -webkit-transform: scale(1) rotate(0deg);
            transition: var(--theme-transition-fast);
        }

        .service-area .icon {
            bottom: -20px;
            left: 0;
            margin: 0 auto;
            position: absolute;
            right: 0;
            text-align: center;
            width: 25%;
            height: 20%;
            border: 2px solid #282828;
        }

@media only screen and (max-width: 960px) {
    .service-area .icon {
       
        height:30px;
    }
    }

    .service-area:hover .icon {
        -webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) /*forwards*/;
        animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) /*forwards*/;
    }

    .service-area .icon .icon-symbol {
        height: 100%;
        padding-top: 4%;
        transition: var(--theme-transition);
        background-color: #fff;
        color: #282828;
    }

    .service-area:hover .icon .icon-symbol {
        background-color: var(--theme-color);
        color: #282828;
        padding-top: 4%;
        transition: var(--theme-transition);
    }


    /* MileStone Counter*/
    .bg-milestoneCounter {
        background-image: url(/_images/CTA/MSCounter.jpg);
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        filter: grayscale(100%) brightness(30%);
        -webkit-filter: grayscale(100%) brightness(30%);
        -moz-filter: grayscale(100%) brightness(30%);
        -ms-filter: grayscale(100%) brightness(30%);
        -o-filter: grayscale(100%) brightness(30%);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }


    #MilestoneCounter {
        height: 400px;
    }

    @media only screen and (max-width: 960px) {
        #MilestoneCounter {
            height: 700px;
        }
    }

    .title-milestone {
        font-size: 2vw;
        color: #ccc;
    }

    .counter {
        font-size: 2.2vw;
        color: var(--theme-color);
    }


    /* ----------------------------------------------
 * Generated by Animista on 2023-11-16 10:0:21
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
    /**
 * ----------------------------------------
 * animation flip-horizontal-bottom
 * ----------------------------------------
 */
    @-webkit-keyframes flip-horizontal-bottom {
        0% {
            -webkit-transform: rotateX(90);
            transform: rotateX(90);
        }

        100% {
            -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
        }
    }

    @keyframes flip-horizontal-bottom {
        0% {
            -webkit-transform: rotateX(90);
            transform: rotateX(90);
        }

        100% {
            -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
        }
    }


    .team-image {
        box-sizing: content-box;
        display: inline-block;
        height: 100%;
        margin-bottom: 15px;
        width: 100%;
        padding: 0;
        position: relative;
        text-align: center;
        z-index: 9;
    }


        .team-image img {
            border-radius: 50%;
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            transition: var(--theme-transition-fast);
        }

        .team-image:hover img {
            border-radius: 50%;
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            -ms-filter: grayscale(0%);
            -o-filter: grayscale(0%);
            transition: var(--theme-transition-fast);
        }



    /* News */
    #news .card {
        background-color: rgba(0, 0, 0, .9);
        color: #fff;
    }

        #news .card .card-header {
            overflow: hidden;
            padding: 0;
            border-radius: 0;
        }

        #news .card .card-body {
            position: relative;
            padding-top: 45px;
        }

            #news .card .card-body .date {
                top: -25px;
                left: 0;
                margin: 0 auto;
                position: absolute;
                right: 0;
                text-align: center;
                width: 25%;
                height: 55px;
                border: 2px solid #282828;
                background-color: #000;
                transition: var(--theme-transition);
            }

        #news .card:hover .card-body .date {
            background-color: var(--theme-color);
            transition: var(--theme-transition);
            color: #282828;
        }

        #news .card img {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            -moz-transform: scale(1.2) rotate(5deg);
            -ms-transform: scale(1.2) rotate(5deg);
            -o-transform: scale(1.2) rotate(5deg);
            -webkit-transform: scale(1.2) rotate(5deg);
            transition: var(--theme-transition-fast);
        }

        #news .card:hover img {
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            -ms-filter: grayscale(0%);
            -o-filter: grayscale(0%);
            -moz-transform: scale(1) rotate(0deg);
            -ms-transform: scale(1) rotate(0deg);
            -o-transform: scale(1) rotate(0deg);
            -webkit-transform: scale(1) rotate(0deg);
            transition: var(--theme-transition-fast);
        }

        #news .card .aligncenter {
            color: #999999;
            font-style: italic;
        }

        #news .card .card-title {
            font-family: "Roboto",sans-serif;
            font-size: 25px;
            text-align: center;
        }

        #news .card .card-body a {
            border: 1px solid #000;
            background-color: var(--theme-color);
            color: #282828;
            border-radius: 1px;
            padding: 10px;
            transition: var(--theme-transition-fast);
            text-decoration: none;
            font-style: normal;
        }

            #news .card .card-body a:hover {
                background-color: #282828;
                color: var(--theme-color);
                transition: var(--theme-transition-fast);
            }
    /* Offers */
    #offers .card {
        background-color: rgba(0, 0, 0, .9);
        color: #fff;
    }

        #offers .card .card-header {
            overflow: hidden;
            padding: 0;
            border-radius: 0;
        }

        #offers .card .card-body {
            position: relative;
            padding-top: 45px;
        }





        #offers .card .aligncenter {
            color: #999999;
            font-style: italic;
        }

        #offers .card .card-title {
            font-family: "Roboto",sans-serif;
            font-size: 25px;
            text-align: center;
            font-weight: 100 !important;
            transition: var(--theme-transition);
        }

        #offers .card:hover .card-title {
            color: var(--theme-color);
            transition: var(--theme-transition);
        }



    .darkness {
        filter: brightness(55%);
        -webkit-filter: brightness(55%);
        -moz-filter: brightness(55%);
        -ms-filter: brightness(55%);
        -o-filter: brightness(55%);
    }

    /* Services */
    .img-blackwhite {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: var(--theme-transition);
    }

        .img-blackwhite:hover {
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            -ms-filter: grayscale(0%);
            -o-filter: grayscale(0%);
            transition: var(--theme-transition);
        }

    .content-service-tab1 {
        position: absolute;
        height: 80%;
        background-color: #f5f5f5;
        left: -20%;
        top: 10%;
        width: 100%;
        padding: 25px;
    }

    .content-service-tab2 {
        position: absolute;
        height: 80%;
        background-color: #f5f5f5;
        right: -20%;
        top: 10%;
        width: 100%;
        z-index: 1;
        text-align: right;
        padding: 25px;
    }

    @media only screen and (max-width: 960px) {
        .content-service-tab1 {
            position: relative;
            left: 0;
            top: 0;
            height: 100%;
        }

        .content-service-tab2 {
            position: relative;
            right: 0;
            top: 0;
            height: 100%;
        }
    }

    #offers {
        height: 80vh;
    }

    #news {
        height: 70vh;
    }

    .bg-news {
        background-image: url('/_images/News.jpg');
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        filter: brightness(55%);
        -webkit-filter: brightness(55%);
        -moz-filter: brightness(55%);
        -ms-filter: brightness(55%);
        -o-filter: brightness(55%);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

    @media only screen and (max-width: 960px) {
        #offers {
            height: 110vh;
        }

        #news {
            height: 100vh;
            overflow: hidden;
        }

            #news .px_layer {
                overflow-y: scroll;
            }
            /* ===== Scrollbar CSS ===== */
            /* Firefox */
            #news .px_layer {
                scrollbar-width: auto;
                scrollbar-color: #000000 #ffffff;
            }

                /* Chrome, Edge, and Safari */
                #news .px_layer::-webkit-scrollbar {
                    width: 8px;
                }

                #news .px_layer::-webkit-scrollbar-track {
                    background: #ffffff;
                }

                #news .px_layer::-webkit-scrollbar-thumb {
                    background-color: #000000;
                    border-radius: 0px;
                    border: 0px solid #ffffff;
                }
    }



    .title-service {
        /* font-family: 'Roboto Slab', serif;*/
    }

    h5.border-title.aligncenter.text-white {
        color: #f5f5f5;
    }

    /* Brands */

    #Brands {
        height: 55vh;
    }

    @media only screen and (max-width: 960px) {
        #Brands {
            height: 61vh;
        }
    }

    #Brands img {
        height: 100px;
        width: 100px;
    }

    #Brands .owl-carousel.owl-carousel-brands .owl-item {
        border-radius: 50%;
        background-color: #fff;
        padding: 20px;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        transition: var(--theme-transition);
    }

        #Brands .owl-carousel.owl-carousel-brands .owl-item:hover {
            filter: grayscale(0%);
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            -ms-filter: grayscale(0%);
            -o-filter: grayscale(0%);
            transition: var(--theme-transition);
        }

    @media only screen and (max-width: 960px) {
        #Brands .owl-carousel.owl-carousel-brands .owl-item {
            padding: unset;
        }
    }


    .bg-Brands {
        background-image: url(/_images/CTA/parallax-appointment.jpg);
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%; /*
    filter: grayscale(100%) brightness(30%);
    -webkit-filter: grayscale(100%) brightness(30%);
    -moz-filter: grayscale(100%) brightness(30%);
    -ms-filter: grayscale(100%) brightness(30%);
    -o-filter: grayscale(100%) brightness(30%);*/
        filter: brightness(60%);
        -webkit-filter: brightness(60%);
        -moz-filter: brightness(60%);
        -ms-filter: brightness(60%);
        -o-filter: brightness(60%);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }


    /* Price */
    .price-description > p {
        font-size: 12px;
        margin-bottom: 0px;
    }

    .price-label {
        font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }

    @media only screen and (max-width: 960px) {
        .price-label.h4 {
            font-size: 1.1rem;
        }
    }

    .price-title > h3.h6 {
        margin-bottom: 0px;
    }

    /* CTA */
    .bg-CTA {
        background-image: url(/_images/CTA/CTA.jpg);
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%; /**/
        filter: grayscale(60%) brightness(20%);
        -webkit-filter: grayscale(60%) brightness(20%);
        -moz-filter: grayscale(60%) brightness(20%);
        -ms-filter: grayscale(60%) brightness(20%);
        -o-filter: grayscale(60%) brightness(20%);
        /*   filter: brightness(60%);
    -webkit-filter: brightness(60%);
    -moz-filter: brightness(60%);
    -ms-filter: brightness(60%);
    -o-filter: brightness(60%);*/
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

    #CTA a {
        color: #282828 !important;
        transition: var(--theme-transition);
    }

        #CTA a:hover {
            color: var(--theme-color) !important;
            background-color: #282828;
            transition: var(--theme-transition);
        }


    /* Isotope Grid Gallery */
    .grid {
        background: #DDD;
    }

        /* clear fix */
        .grid:after {
            content: '';
            display: block;
            clear: both;
        }

    /* ---- .element-item ---- */

    /* 5 columns, percentage width */
    .grid-item,
    .grid-sizer {
        width: 20%;
    }

    .grid-item {
        float: left;
        height: 100px;
        background: #0D8;
        border: 2px solid #333;
        border-color: hsla(0, 0%, 0%, 0.7);
    }

    .grid-item--width2 {
        width: 40%;
    }

    .grid-item--height2 {
        height: 200px;
    }


    /* Price */
    #price .col-12.border-bottom.boder-secondary.mb-2 {
        -moz-transition: var(--theme-transition);
        -o-transition: var(--theme-transition);
        -webkit-transition: var(--theme-transition);
        transition: var(--theme-transition);
    }

        #price .col-12.border-bottom.boder-secondary.mb-2:hover {
            background-color: rgba(0,0,0,.8);
            color: #fff;
            -moz-transition: var(--theme-transition);
            -o-transition: var(--theme-transition);
            -webkit-transition: var(--theme-transition);
            transition: var(--theme-transition);
        }

            #price .col-12.border-bottom.boder-secondary.mb-2:hover .price-label {
                color: var(--theme-color);
                -moz-transition: var(--theme-transition);
                -o-transition: var(--theme-transition);
                -webkit-transition: var(--theme-transition);
                transition: var(--theme-transition);
            }

    #price .new-section {
        margin-top: 45px;
    }


    /* Sticky Logo*/

    .sticky-logo {
        position: fixed;
        bottom: 9vh;
        right: 0;
        width: 110px;
        height: 85px;
        background-color: #000;
        z-index: 99;
        display: none;
        transition: all 1s ease;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

        .sticky-logo.is-sticky {
            display: block;
            transition: all 1s ease;
        }

    @media only screen and (max-width: 960px) {
        .sticky-logo {
            width: 100px;
            height: 70px;
            font-size: 10px;
            background-color: rgba(0, 0, 0, .9);
        }
    }



    .divCookie {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        min-height: 200px;
        background-color: rgba(0, 0, 0, .9);
        z-index: 99;
    }

        .divCookie a.btn:hover {
            color: #fff;
        }


/* General */
@media only screen and (max-width: 960px) {
    img.hover {
        filter: grayscale(0%) !important;
        -webkit-filter: grayscale(0%) !important;
        -moz-filter: grayscale(0%) !important;
        -ms-filter: grayscale(0%) !important;
        -o-filter: grayscale(0%) !important;
        -moz-transform: scale(1) rotate(0deg) !important;
        -ms-transform: scale(1) rotate(0deg) !important;
        -o-transform: scale(1) rotate(0deg) !important;
        -webkit-transform: scale(1) rotate(0deg) !important;
        transition: var(--theme-transition) !important;
    }
}