/*`xxl` applies to x-large devices (large desktops, less than 1400px)*/

@media (max-width: 1399.98px) {}


@media (max-width: 1299.98px) {}


/*`xl` applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {}


/*lg` applies to medium devices (tablets, less than 992px)*/

@media (max-width: 991.98px) {

    :root {
        --px-content: 95% !important;
    }

    .off-canvas-right .mfp-content {
        background-color: #000 !important;
        width: 100%;
    }

    .off-canvas .mfp-close svg {
        /*filter: invert(1);*/
    }

    .mobile-sidebar .nav-vertical>li>a {
        color: #fff;
        font-size: 1rem;
    }

    .mobile-sidebar .nav-vertical>li+li {
        border-top: 1px solid #242424;
    }

    .mobile-sidebar .nav-vertical>li>a img {
        filter: brightness(0) saturate(100%) invert(99%) sepia(8%) saturate(46%) hue-rotate(158deg) brightness(120%) contrast(100%);
    }

    .mobile-nav .button {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: unset;
        min-height: unset;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0;
        padding: 0.25rem;
        border: 1px solid rgba(255, 255, 255, .09);
        color: #fff;
        font-size: 16px;
        line-height: 0.8;
    }

    .mobile-nav .button .icon-menu {
        line-height: 1;
    }

    .mobile-nav .button .icon-menu:before {
        content: "\f0c9";
        font-family: "Font Awesome 6 Pro";
        font-weight: 700;
    }

    .header-search {
        margin-right: 1rem !important;
    }


    .banner-page .text-box {
        width: 93% !important;
    }


    .box-content-service{
        height: 100%;
    }


    .section-bg-wave:before{
        clip-path: url(#section-wawe-clip-path-1-mb);
    }

    .section-bg-wave:after{
        clip-path: url(#section-wawe-clip-path-2-mb);
    }

    .review-thumb-slide{
        width: 60%;
    }


    .box-icon-footer .icon-box-img{
        width: 40px !important;
    }

    .box-icon-footer .icon-box-text h3{
        font-size: 0.875rem;
    }

    .line-our-team{
        display: none;
    }


}

/*`md` applies to small devices (landscape phones, less than 768px)*/

@media (max-width: 767.98px) {
    :root {
        --px-content: 105% !important;
    }

    body {
        font-size: 0.875rem !important;
    }

    .banner-page .text-box {
        width: 90% !important;
    }

    .box-content-service{
        height: auto;
    }

    .wrapper-slide-review{
        width: 80%;
    }


    .row-blog-overflow .box-blog-post .box-text{
        position: relative;
    }

    .box-blog-post.box-vertical .box-text{
        padding: 0.75rem 0 0;
    }

}

/*`sm` applies to x-small devices (portrait phones, less than 576px)*/

@media (max-width: 575.98px) {}


/* Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {
    .col-lg-auto {
        flex-basis: auto;
        max-width: fit-content;
    }

    .justify-content-lg-between {
        justify-content: space-between;
    }

    .justify-content-lg-end {
        justify-content: flex-end;
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse;
    }

    /*===*/

    #header .header-top ul li{
        font-size: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
    }

    #header li.header-social-icons .social-icons{
        width: 180px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #header li.header-social-icons .social-icons:after{
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: -1;
    }

    #header li.header-social-icons .social-icons a{
        font-size: 1rem;
    }

    #header .html .header-button{
        width: 180px;
        height: 80px;
        background: rgba(0, 0, 0, 0.45);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #header .html .header-button .button.primary{
        color: #000;
        border-radius: 50rem !important;
        font-size: 1rem;
    }



    .header-nav .sub-menu,
    .active>ul.children,
    .active>ul.sub-menu:not(.nav-dropdown) {
        display: none !important;
        padding: 0;
        /*min-width: unset;*/
        border: 0;
        border-radius: 0.25rem;
        background-color: #fff;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

    .header-nav .menu-item {
        width: unset !important;
        min-width: unset !important;
        position: relative;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .header-nav .menu-item a {
        font-weight: 600;
        font-size: 1rem;
        text-transform: uppercase;
        color: #fff0b5 !important;
    }

    .header-nav .menu-item.active a,
    .header-nav .menu-item:hover a{
        color: #f6d34c !important;   
    }

    .header-nav .sub-menu>.menu-item>a {
        padding: 0.75rem 0;
        font-size: 15px;
        font-weight: 500;
        color: #000;
        text-transform: capitalize;
    }

    .header-nav .sub-menu>.menu-item:hover>a {
        color: var(--primary-color);
    }

    .header-nav .menu-item:hover>.sub-menu {
        display: block !important;
        animation: menu 0.3s;
    }

    .header-nav .sub-menu .menu-item>.sub-menu {
        position: absolute;
        left: 100%;
        top: 0;
        z-index: 10;
    }

    .header-nav .sub-menu li {
        display: block;
    }

    @keyframes menu {
        0% {
            transform: translateY(20px);
            opacity: 0
        }

        100% {
            transform: translateY(0px);
            opacity: 1
        }
    }
}

/* X-Large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up)*/

@media (min-width: 1500px) {}