:root {
    --primary-color: #40bdab; /*#ff9155*/
    --secondary-color: #ff9155; /*#40bdab*/
    --thir-color: #21695f; /*#40bdab*/
    --primary-background: #16081a;
    --secondary-background: hsla(0,0%,100%,0.1);
    --box-background: #231526;
    --text-color: #797b7d;
    --title-color: #fff;
    --red-color: #bd4063;
    --blue-color: #0578dc;
    --orange-color: #d54e4e;
    --purple-color: #16081a;
    --primary-gradient: linear-gradient(90deg,var(--orange-color),var(--primary-color));
    --secondary-gradient: linear-gradient(90deg,var(--blue-color),var(--secondary-color));
    /*    --primary-font: "Roboto-Regular";
    --secondary-font: "Roboto-Bold";
    --bold-font: "Roboto-Bold";
    --title-font: "Roboto-Bold";*/
    --break-xs: 599px;
    --break-sm: 959px;
    --break-md: 1279px;
    --break-lg: 1919px;
    --font-weight: 700;
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
}

header {
    position: relative;
    direction: ltr;
    z-index: 99;
}

    header a {
        color: #000 !important;
    }

    header nav {
        /*
        background: #000;
        box-shadow: 0 0 9px 1px rgba(27,27,27,.6);*/
        display: flex;
        z-index: 999;
        font-family: var(--secondary-font);
        font-weight: var(--font-weight);
        width: 100% !important;
        height: 90px;
    }

        header nav .wrapper {
            display: flex;
            justify-content: space-between;
        }

        header nav .menu-bar {
            display: flex;
            justify-content: flex-end;
            flex-grow: 1;
        }

            header nav .menu-bar.left {
                align-items: center;
                display: flex;
            }

                header nav .menu-bar.left a img {
                    width: 55px;
                    max-width: 100%;
                }

            header nav .menu-bar .items {
                flex-grow: 1;
                justify-content: flex-end;
                display: flex;
            }

                header nav .menu-bar .items .nav-item {
                    color: #fff;
                }

                    header nav .menu-bar .items .nav-item .menuTitle {
                        font-size: 14px !important;
                        font-family: var(--secondary-font);
                        text-transform: uppercase;
                        line-height: 25px;
                        font-weight: var(--font-weight);
                    }

                    header nav .menu-bar .items .nav-item .dropdown-item {
                        padding: 0 20px;
                        cursor: pointer;
                        transition-duration: .5s;
                        color: #fff;
                        text-decoration: none;
                        border-bottom: 2px solid transparent;
                        font-size: 16px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                    }

                    header nav .menu-bar .items .nav-item a:not(.sub-item) {
                        padding: 0 20px;
                        cursor: pointer;
                        transition-duration: .5s;
                        border-bottom: 2px solid transparent;
                        height: 100%;
                        display: flex;
                        align-items: center;
                    }

                        header nav .menu-bar .items .nav-item a:not(.sub-item):link,
                        header nav .menu-bar .items .nav-item a:not(.sub-item):visited {
                            color: #fff;
                            text-decoration: none;
                        }

                        header nav .menu-bar .items .nav-item .dropdown-item:hover:not(.dropdown-item),
                        header nav .menu-bar .items .nav-item a:not(.sub-item):hover:not(.dropdown-item) {
                            border-color: var(--primary-color);
                        }

                    header nav .menu-bar .items .nav-item .dropdown-item .drop {
                        display: none;
                        width: 100%;
                        background: #e4f5f2;
                        background-position: top;
                        background-size: cover;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        right: 0;
                        z-index: -1;
                        padding: 0;
                        justify-content: space-evenly;
                        align-items: flex-start;
                        /*box-shadow: 0 0 9px 1px rgba(27,27,27,.6);*/
                    }

                    header nav .menu-bar .items .nav-item .dropdown-item:hover,
                    header nav .menu-bar .items .nav-item a:not(.sub-item):hover {
                        color: #fff;
                        text-decoration: none;
                    }

                        header nav .menu-bar .items .nav-item .dropdown-item:hover .drop,
                        header nav .menu-bar .items .nav-item a:not(.sub-item):hover .drop {
                            display: flex;
                            /*background: url(../img/menu-drop-bg.png) no-repeat;*/
                            -webkit-animation: showNav .25s ease-in-out both;
                            animation: showNav .25s ease-in-out both;
                            z-index: -1;
                        }

                    header nav .menu-bar .items .nav-item .dropdown-item .drop a {
                        opacity: 0;
                        display: block;
                        /*padding: 40px 24px 9px;*/
                        padding: 27px 24px 9px;
                        text-align: center;
                        position: relative;
                    }

                    header nav .menu-bar .items .nav-item .dropdown-item:hover .drop,
                    header nav .menu-bar .items .nav-item a:not(.sub-item):hover .drop {
                        opacity: 1;
                        padding-bottom: 2%;
                    }

                        header nav .menu-bar .items .nav-item .dropdown-item:hover .drop a,
                        header nav .menu-bar .items .nav-item a:not(.sub-item):hover .drop a {
                            opacity: 1;
                            text-transform: uppercase;
                        }

        header nav .deviceNav {
            display: none;
            height: 60px;
            width: 100%;
        }

            header nav .deviceNav .navButton {
                float: right;
                cursor: pointer;
                color: #fff;
                font-size: 2.2em;
            }

        header nav .menu-bar .items .device {
            display: none;
        }

.hoverEffect {
    border-bottom: 2px solid var(--primary-color);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    opacity: 0;
    transition: opacity .5s;
}

header nav .menu-bar .items .nav-item .dropdown-item .drop div a:active .hoverEffect,
header nav .menu-bar .items .nav-item .dropdown-item .drop div a:hover .hoverEffect {
    opacity: 1;
}

.frameImg {
    border-bottom-color: #fff;
    border-left-color: #eee;
    border-radius: 2px;
    border-right-color: #eee;
    border-top-color: #ddd;
    box-shadow: 0 0 0px 0 rgb(0 0 0 / 25%) inset, 0 5px 5px 0px rgb(0 0 0 / 25%);
    box-sizing: border-box;
    display: flex;
    height: 23vh;
    padding: 14px;
    position: relative;
    text-align: center;
    width: 30vh;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}

    .frameImg img {
        max-height: 100%;
        max-width: 100%;
    }

.customer-review .review-comment_avatar .review-comment-avatarthumb, .review-sub-comment_avatar .review-comment-avatarthumb {
    font-size: 47px;
}

.customer-review .content-comment {
    padding: 1%;
}    

.customer-review .content-comment::after {
        content: "";
        border-bottom: 1px solid rgb(242, 242, 242);
        display: block;
        margin: 32px 0px 0px;
    }

    .customer-review .content-comment .review-comment_avatar, .review-sub-comment_avatar {
        display: flex;
        align-items: center;
    }

        .customer-review .content-comment .review-comment_avatar .review-comment_info, .review-sub-comment_avatar .review-comment_info {
            margin: 0 0 0 9px;
        }

    .customer-review .content-comment span.review-reply-button {
        cursor: pointer;
        color: #2196f3;
    }

.review-sub-comment {
    /*margin: 20px 0px 0px;*/
    border-left: 1px solid rgb(238, 238, 238);
    padding: 0px 0px 0px 16px;
}

.custom-control-time >div.mud-input-control > div.mud-input.mud-input-text {
    margin-top: -10px;
}

.custom-header-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .custom-header-info .content-info {
        width: 100%;
        display: flex;
        justify-content: center;
    }
        .custom-header-info .content-info .img {
            background-image: url(/img/background3.png);
            width: 73%;
            background-size: cover;
            display: flex;
            justify-content: center;
            border-radius: 0 100px 0 100px;
        }

.mgb-4{
    margin-bottom: 4%;
}

p {
    padding: 0.5rem;
}

h6 {
    padding: 5px;
    font-size: 25px;
    font-weight: 500;
}

a:hover {
    text-decoration: none !important;
    cursor:pointer;
}

.custom-boxshadow:hover {
    box-shadow: 0px 0px 4px 2px rgb(54 107 98 / 74%);
}

.hover-service:hover {
    background: #e4f5f2;
}

.custom-input-filled .mud-input-underline {
    position: relative;
    transition: background-color 200ms cubic-bezier(0,0,.2,1) 0ms;
    background-color: rgba(0,0,0,.09);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.custom-input-filled .mud-input.mud-input-filled:hover {
    background-color: rgba(0,0,0,.13);
}

.custom-input-filled .mud-input.mud-input-underline:before {
    left: 0;
    right: 0;
    bottom: 0;
    content: " ";
    position: absolute;
    transition: border-bottom-color 200ms cubic-bezier(.4,0,.2,1) 0ms;
    border-bottom: 1px solid var(--mud-palette-lines-inputs);
    pointer-events: none;
}

.custom-input-filled .mud-input > input.mud-input-root {
    padding: 27px 12px 10px;
}

.custom-input-filled .mud-input-label {
    z-index: 1;
    transform: translate(12px,15px) scale(1);
    pointer-events: none;
}

.custom-input-filled .mud-input-control-input-container {
    margin-top: 17px;
}

.custom-input-filled .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: -7px;
}

.custom-input-filled .mud-icon-button-edge-end {
    margin-right: 0px;
}

.custom-select-mb{
    margin-top: 15px;
}

.title-footer {
    margin-bottom: 9%;
}

.frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame-service {
    width: 59%;
    border: 1px solid #eee;
    padding: 27px;
    border-radius: 77px 0 77px 0;
}

.circle-y {
    width: 100px;
    height: 100px;
    background: #ffca1c;
    border-radius: 50%;
}

.imgInfo-top {
    border-radius: 0 122px 0 122px;
    width: 85%;
    height: 231px;
}

.imgInfo-bottom {
    border-radius: 140px 0px 140px 0px;
    width: 88%;
    height: 286px;
}

.frame-working {
    background: #48c1ac;
    height: 39vh;
    padding: 12px;
}

.working-item {
    height: -webkit-fill-available;
    border: 2px solid #fff;
    color: #fff;
}

.footer-page {
    border-bottom: 1px dashed #9b6745;
    margin: 0 0 15px 0;
    padding: 0 0 15px 0;
}



.img-reason {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
}

    .img-reason .img {
        flex: 0 0 23%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
        margin: 15px;
    }

    .img-reason img {
        width: 100%;
    }

.list-file {
    display: flex;
    align-items: center;
    padding: 6px;
}

    .list-file img {
        margin-right: 5px;
    }

img {
    max-width: 100%;
}

@-webkit-keyframes showNav {
    0% {
        opacity: 0;
        height: 0;
        visibility: hidden
    }

    to {
        opacity: 1;
        height: 240px;
        visibility: visible
    }
}

@keyframes showNav {
    0% {
        opacity: 0;
        height: 0;
        visibility: hidden
    }

    to {
        opacity: 1;
        height: 240px;
        visibility: visible
    }
}

table{
    width:100% !important;
}

nav input {
    display: none;
}

@media screen and (max-width: 599px) {
    .frame-service {
        width: 59% !important;
    }
    img {
        max-width: 100% !important;
    }
}

@media screen and (min-width: 600) {
    
}

@media screen and (max-width: 767px) {
    
}

@media screen and (max-width: 959px) {
    .wrapper .btn {
        display: block;
    }

    .wrapper .nav-links {
        position: fixed;
        height: 100vh;
        width: 100%;
        max-width: 350px;
        top: 0;
        left: -100%;
        background: #fff;
        display: block;
        padding: 50px 10px;
        line-height: 50px;
        overflow-y: auto;
        box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
        transition: all 0.3s ease;
    }

    #menu-btn:checked ~ .nav-links {
        left: 0%;
    }

    #menu-btn:checked ~ .btn.menu-btn {
        display: none;
    }

    #close-btn:checked ~ .btn.menu-btn {
        display: block;
    }

    .nav-links li {
        margin: 5px 10px;
    }

        .nav-links li a {
            padding: 0 20px;
            display: block;
            font-size: 17px;
        }

    .nav-links .mobile-item {
        display: block;
        color: #000;
        font-size: 20px;
        font-weight: bold;
        padding-left: 20px;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.3s ease;
        text-transform: uppercase;
    }

    .mega-box {
        position: static;
        top: 65px;
        opacity: 1;
        visibility: visible;
        padding: 0 20px;
        max-height: 100%;
        overflow: hidden;
        transition: all 0.3s ease;
    }

        .mega-box .content {
            box-shadow: none;
            flex-direction: column;
            padding: 0px 20px 0 20px;
        }

            .mega-box .content .row {
                width: 100%;
            }

    .content .row .mega-links {
        border-left: 0px;
        padding-left: 15px;
    }

    .row .mega-links li {
        margin: 0;
    }

    .content .row header {
        font-size: 19px;
    }

    .nav-links li {
        text-align: left;
    }

    nav .wrapper ul.nav-links {
        background: #e4f5f2;
        z-index: 1;
    }

    .custom-header-info .content-info .img {
        width: 100%;
        border-radius: 0 89px 0 89px;
    }

    .frame-service {
        width: 86%;
    }

    .circle-y{
        height: 91px;
    }

    .frame-working{
        height: 32vh;
    }


    .collapse:not(.show) {
        display: none;
    }

    header nav {
        height: 66px;
    }

        header nav .wrapper {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        header nav .deviceNav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header nav .menu-bar {
            height: 100vh;
            width: 0;
            z-index: 1000000000;
            position: absolute;
            right: 0;
            top: 0;
            list-style: none;
            background-color: #e4f5f2;
            padding: 15px 0 0;
            overflow: scroll;
        }

            header nav .menu-bar .logo {
                display: none;
            }

            header nav .menu-bar .items .nav-item {
                font-size: 16px;
            }

            header nav .menu-bar .items {
                flex-grow: 0;
            }

            header nav .menu-bar .items,
            header nav .menu-bar.right {
                flex-direction: column;
                justify-content: flex-start;
                margin-top: 8%;
                width: 100%;
            }

        header nav .menu-bar {
            transition-timing-function: ease-in-out;
            transition: 0.3s;
            transform: translateX(0%);
        }

            header nav .menu-bar .items .nav-item .dropdown-item {
                padding: 0;
                border: 0;
            }

            header nav .menu-bar .items .nav-item .dropdown-item {
                position: relative;
                color: #fff;
                display: block;
                float: none;
            }

            header nav .menu-bar .items .nav-item a:not(.sub-item) {
                position: relative;
                color: #fff;
                display: block;
                float: none;
                padding: 10px 40px 14px 6px;
            }

                header nav .menu-bar .items .nav-item .dropdown-item .menuTitle,
                header nav .menu-bar .items .nav-item .dropdown-item:after,
                header nav .menu-bar .items .nav-item a:not(.sub-item) .menuTitle,
                header nav .menu-bar .items .nav-item a:not(.sub-item):after {
                    display: block;
                    padding: 0 0 0 14px;
                }

                header nav .menu-bar .items .nav-item .dropdown-item .drop,
                header nav .menu-bar .items .nav-item a:not(.sub-item) .drop {
                    visibility: visible;
                    opacity: 1;
                    background: initial;
                    padding: 0;
                    margin: 0;
                    display: initial;
                    justify-content: normal;
                    align-items: normal;
                    position: static;
                    background: none !important;
                }

                header nav .menu-bar .items .nav-item .dropdown-item:hover .drop,
                header nav .menu-bar .items .nav-item a:not(.sub-item):hover .drop {
                    display: contents;
                }

                header nav .menu-bar .items .nav-item .dropdown-item .drop:hover,
                header nav .menu-bar .items .nav-item a:not(.sub-item) .drop:hover {
                    -webkit-animation: none;
                    animation: none;
                    display: initial;
                }

                header nav .menu-bar .items .nav-item .dropdown-item:hover:not(.dropdown-item),
                header nav .menu-bar .items .nav-item a:not(.sub-item):hover:not(.dropdown-item) {
                    background: #2b2e30;
                    border-bottom-color: #2b2e30;
                    border-left: 2px solid var(--primary-color);
                }

                header nav .menu-bar .items .nav-item .dropdown-item .drop a,
                header nav .menu-bar .items .nav-item a:not(.sub-item) .drop a {
                    opacity: 1;
                    border-left: 3px solid transparent;
                    border-bottom: none;
                    padding: 10px 12px 10px 22px;
                    text-align: left;
                    font-size: 14px;
                    font-family: var(--secondary-font);
                    font-weight: var(--font-weight);
                    text-transform: uppercase;
                    line-height: 25px;
                }

                    header nav .menu-bar .items .nav-item .dropdown-item .drop a:hover,
                    header nav .menu-bar .items .nav-item a:not(.sub-item) .drop a:hover {
                        /*background: #2b2e30;
                    border-color: #2b2e30 !important;*/
                        border-left-color: var(--primary-color) !important;
                        color: var(--title-color);
                    }

                    header nav .menu-bar .items .nav-item .dropdown-item .drop a .hoverEffect,
                    header nav .menu-bar .items .nav-item a:not(.sub-item) .drop a .hoverEffect {
                        display: none;
                    }

            header nav .menu-bar .items .device {
                display: inline;
            }

            header nav .menu-bar .closeMenu {
                position: absolute;
                right: 12px;
                top: 5px;
                font-size: 2em;
                color: #000;
                cursor: pointer;
            }

    #dvMobile {
        width: 82%;
    }

    .icon-showmenu {
        position: absolute;
        right: 12px;
        font-size: 2em;
        color: #000;
        cursor: pointer;
    }

    .hideMenu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        cursor: default;
    }

    .showMenu {
        width: 70%;
        opacity: 1;
        visibility: visible;
        pointer-events: initial;
        cursor: initial;
    }

    .img-reason .img {
        flex: 0 0 100%;        
    }
}

@media screen and (max-width: 1279px) and (min-width: 600px) {
    .nav-links li a {
        padding: 9px 11px;
        font-size: 12px;
    }

    .row .mega-links li a {
        padding: 0 6px;
        font-size: 12px;
    }

    .frame-working {
        height: 31vh;
    }

    header nav .menu-bar .items .nav-item .dropdown-item {
        padding: 0 14px;
    }

    header nav .menu-bar .items .nav-item a:not(.sub-item) {
        padding: 0 9px;
        font-size: 12px;
    }

    header nav .menu-bar .items .nav-item .menuTitle {
        font-size: 13px !important;
    }

    header nav .menu-bar .items .nav-item .dropdown-item:hover .drop a,
    header nav .menu-bar .items .nav-item a:not(.sub-item):hover .drop a {
        text-transform: capitalize;
        font-size: 13px;
    }
}

@media screen and (min-width: 1279px) {
    
}

@media screen and (min-width: 1400px) {
    
}