#header-section {
    /* height: 70px; */
    /* background-color: rgba(255,255,0,0.5); */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}
#header-primary {
    z-index: 100;
}
#header-secondary {
    z-index: 99;
}
.header-section {
    position: relative;
}
.header-section,
.header-container,
.header-row {
    width: 100%;
}
.header-container {
    transition: box-shadow 1s ease;
    -webkit-transition: box-shadow 1s ease;
    -moz-transition: box-shadow 1s ease;
    -ms-transition: box-shadow 1s ease;
    -o-transition: box-shadow 1s ease;
}
.header-section,
.header-row {
    height: 65px;
}

.header-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 0 20px;
    z-index: 10;
}
.header-col {
    position: relative;
}
.header-col.this-col-left,
.header-col.this-col-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 300px;
    /* background-color: rgba(255,0,255,0.5); */
}
.header-col.this-col-left {
    justify-content: flex-start;
}
.header-col.this-col-right {
    justify-content: flex-end;
}
.header-col.this-col-center {
    width: calc(100% - 600px);
    flex: 1 0 0;
}

/* logo */
.logo-on-header {
    position: relative;
}
.logo-on-header .logo {
    position: relative;
    display: block;
    /* width: 262px;
    height: 20px; */
    width: 250px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

/* fixed */
#header-primary.fixed .header-container,
#header-secondary.fixed .header-container {
    position: fixed;
    top: 0;
}

/* ============================================================================================== */
/* ========================================= header primary ===================================== */
/* ============================================================================================== */

#header-primary,
#header-primary .header-container {
    background-color: rgba(var(--cpn-color-white),1);
    /* background-color: rgba(255,255,0,1) !important; */
}
/* #header-primary .header-container:before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid rgba(var(--cpn-color-black-dark),0.1);
} */
#header-primary .header-col.this-col-left .site-menu-item.is-search {
    display: none;
}
#header-primary .header-row::before {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid rgba(var(--cpn-color-black),0.05);
}

#header-primary .site-menu-btn,
#header-primary a.site-menu-btn,
#header-secondary .site-menu-btn,
#header-secondary a.site-menu-btn {
    color: rgba(var(--cpn-color-black),1);
}

/* --------------------------------------------------------------- */
/* ---------------------------- langs ---------------------------- */
/* --------------------------------------------------------------- */

.langs-control-group,
.langs-control-btn {
    position: relative;
}
.langs-control-dropdown {
    position: absolute;
    top: 40px;
    right: -30px;
    visibility: hidden;
    /* visibility: inherit; */
    /* display: none; */
    width: 230px;
    background-color: rgba(var(--cpn-color-white), 1);
    border: 1px solid rgba(225, 225, 225, 1);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.05);
    z-index: 10;
    border-radius: 20px;
    overflow: auto;
    padding: 20px 30px;
}
.langs-control-group.open .langs-control-dropdown {
    /* background-color: #ccc; */
    visibility: inherit;
}
ul.langs-control-items,
ul.langs-control-items>li.langs-control-item {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.langs-control-items>li.langs-control-item {
    padding: 10px 0;
}
ul.langs-control-items>li+li.langs-control-item {
    border-top: 1px solid rgba(var(--cpn-color-black), 0.05);
}
.langs-control-item-btn {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    color: rgba(var(--cpn-color-black), 1);
    text-decoration: none !important;
    text-align: left;
}
.langs-control-item-btn>.text {
    width: calc(100% - 20px);
}
.langs-control-item-btn>.icon {
    width: 20px;
    text-align: center;
    font-size: 12px;
    opacity: 0;
}
.langs-control-item-btn.active>.icon,
.langs-control-item-btn:hover>.icon {
    opacity: 1;
}

/* ============================================================================================== */
/* ======================================== header secondary ==================================== */
/* ============================================================================================== */

#header-secondary .header-container {
    background-color: rgba(var(--cpn-color-gray-light),1);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#header-secondary .header-row {
    overflow: hidden;
}
#header-secondary .header-row:before,
#header-secondary .header-row:after {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
/* #header-secondary .header-row:before {
    top: 0;
    border-top: 1px solid rgba(var(--cpn-color-black-dark),0.05);
    z-index: 1;
} */
#header-secondary .header-row:after {
    bottom: 0;
    border-bottom: 1px solid rgba(var(--cpn-color-black-dark),0.05);
    z-index: 1;
}
#header-secondary.fixed .header-row:before,
#header-secondary.fixed .header-row:after,
#header-secondary.active .header-row:before,
#header-secondary.active .header-row:after {
    opacity: 1;
}
#header-secondary .header-col {
    z-index: 2;
}

#header-secondary .site-menu-btn:hover,
#header-secondary .site-menu-btn.active,
#header-secondary.fixed .site-menu-btn:hover,
#header-secondary.fixed .site-menu-btn.active,
#header-secondary.hover .site-menu-btn:hover,
#header-secondary.hover .site-menu-btn.active,
#header-secondary.active .site-menu-btn:hover,
#header-secondary.active .site-menu-btn.active {
    color: rgba(var(--cpn-color-primary),1) !important;
}

#header-secondary.fixed .header-container,
#header-secondary.active .header-container {
    background-color: rgba(var(--cpn-color-white),1);
}

/* --------------------------------------------------------------- */
/* -------------------------- on banner -------------------------- */
/* --------------------------------------------------------------- */

#header-secondary.on-banner {
    position: absolute;
    top: 65px;
}
#header-secondary.on-banner .header-container {
    background-color: rgba(var(--cpn-color-white),0.1);
}
#header-secondary.on-banner.fixed .header-container,
#header-secondary.on-banner.hover .header-container,
#header-secondary.on-banner.active .header-container {
    background-color: rgba(var(--cpn-color-white),1);
}

#header-secondary.on-banner .header-container::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-backdrop-filter: saturate(100%) blur(50px);
    -moz-backdrop-filter: saturate(100%) blur(50px);
    -ms-backdrop-filter: saturate(100%) blur(50px);
    -o-backdrop-filter: saturate(100%) blur(50px);
    backdrop-filter: saturate(100%) blur(50px);
    z-index: 1;
}

#header-secondary.on-banner .header-row:before,
#header-secondary.on-banner .header-row:after {
    opacity: 0;
}
#header-secondary.on-banner.fixed .header-row:before,
#header-secondary.on-banner.fixed .header-row:after,
#header-secondary.on-banner.hover .header-row:before,
#header-secondary.on-banner.hover .header-row:after,
#header-secondary.on-banner.active .header-row:before,
#header-secondary.on-banner.active .header-row:after {
    opacity: 1;
}

#header-secondary.on-banner .site-menu-btn,
#header-secondary.on-banner.text-color-white .site-menu-btn {
    color: rgba(var(--cpn-color-white),1);
}
#header-secondary.on-banner.text-color-black .site-menu-btn,
#header-secondary.on-banner.fixed .site-menu-btn,
#header-secondary.on-banner.hover .site-menu-btn,
#header-secondary.on-banner.active .site-menu-btn {
    color: rgba(var(--cpn-color-black),1);
} 

/* disable */
#header-secondary.on-banner-disable {
    position: relative !important;
    top: 0 !important;
}

/* ============================================================================================== */
/* =============================================== menu ========================================= */
/* ============================================================================================== */

.site-menu-group,
.site-menu-item,
.site-menu-btn {
    position: relative;
}

ul.site-menu-group,
ul.site-menu-group>li.site-menu-item {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.site-menu-btn {
    display: flex;
}
.site-menu-btn,
.site-menu-btn a {
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: var(--cpn-transition-all-fast);
    -moz-transition: var(--cpn-transition-all-fast);
    -ms-transition: var(--cpn-transition-all-fast);
    -o-transition: var(--cpn-transition-all-fast);
    transition: var(--cpn-transition-all-fast);
}
.site-menu-btn.cursor-default {
    cursor: default;
}

/* dropdown */
.site-menu-btn.has-dropdown {
    padding-right: 15px;
}
.site-menu-btn.has-dropdown>.icon {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10px;
    width: 10px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
}
.site-menu-btn.has-dropdown.active>.icon {
    transform: rotate(180deg);
}

.site-menu-btn-icon {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 25px;
    line-height: 25px;
}
.site-menu-btn-icon>.icon {
    font-size: 22px;
    height: 0;
}
.site-menu-btn-icon>.icon+.text,
.site-menu-btn-icon>.text+.icon {
    margin-left: 10px;
}

.nav-menu-site-project-btn>.icon {
    font-size: 10px;
}

.site-menu-btn-icon>.icon.arrow {
    font-size: 10px;
}
.site-menu-btn-icon>.text+.icon.arrow  {
    margin-left: 8px;
}


/* --------------------------------------------------------------- */
/* ------------------------ menu horizontal ---------------------- */
/* --------------------------------------------------------------- */

.site-menu-group.horizontal {
    display: flex;
    flex-wrap: nowrap;
}
.site-menu-group.horizontal {

}

ul.site-menu-group.horizontal.x-spacing {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
}
ul.site-menu-group.horizontal.x-spacing>li {
    padding: 0 15px;
}

ul.site-menu-group.horizontal.x-spacing-min {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}
ul.site-menu-group.horizontal.x-spacing-min>li {
    padding: 0 10px;
}

ul.site-menu-group.horizontal.x-spacing-max {
    width: calc(100% + 50px);
    margin-left: -25px;
    margin-right: -25px;
}
ul.site-menu-group.horizontal.x-spacing-max>li {
    padding: 0 25px;
}

ul.site-menu-group.horizontal.divider {
    margin-left: -20px;
    margin-right: -20px;
}
ul.site-menu-group.horizontal.divider>li {
    padding: 0 20px;
}
ul.site-menu-group.horizontal.divider>li+li:before {
    position: absolute;
    content: "";
    height: 20px;
    top: 50%;
    margin-top: -10px;
    left: 0;
    border-left-style: solid;
    border-left-width: thin;
    border-left-color: rgba(var(--cpn-color-black-dark),0.15);
}

/* --------------------------------------------------------------- */
/* ------------------------- menu vertical ----------------------- */
/* --------------------------------------------------------------- */

ul.site-menu-group.vertical,
ul.site-menu-group.vertical>li {

}
ul.site-menu-group.vertical .site-menu-btn {
    display: inline;
}

ul.site-menu-group.vertical .site-menu-group.is-dropdown {
    font-size: 14px;
}
ul.site-menu-group.vertical .site-menu-group.is-dropdown>li {
    padding-left: 20px;
}
ul.site-menu-group.vertical .site-menu-group.is-dropdown>li:before {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 5px;
    left: 5px;
    top: 9px;
    background-color: rgba(var(--cpn-color-black),0.2);
}


/* ============================================================================================== */
/* ======================================== header primary ====================================== */
/* ============================================================================================== */

#header-primary .header-row>.header-col.this-col-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
#header-section.fixed-header-primary #header-primary.fixed .header-container {
    box-shadow: 0 10px 80px rgba(0,0,0,0.3);
}

/* ============================================================================================== */
/* ======================================= header secondary ===================================== */
/* ============================================================================================== */

/* #header-secondary .header-row>.header-col.this-col-left,
#header-secondary .header-row>.header-col.this-col-right {
    background-color: rgba(255,255,0,0.2);
} */
#header-secondary .header-row>.header-col.this-col-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#header-secondary .header-row>.header-col.this-col-center {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: rgba(255,0,255,0.1); */
}
#header-secondary .header-row>.header-col.this-col-center>nav,
#header-secondary .header-row>.header-col.this-col-center ul.site-menu-group {
    height: 100%;
    justify-content: center;
}
#header-secondary .header-row>.header-col.this-col-center ul.site-menu-group>li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#header-section[data-header="site"] #header-secondary .header-col.this-col-left,
#header-section[data-header="site"] #header-secondary .header-col.this-col-right {
    /* visibility: hidden;     */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
#header-section[data-header="site"] #header-secondary .header-col.this-col-left {
    left: -200px;
}
#header-section[data-header="site"] #header-secondary .header-col.this-col-right {
    right: -200px;
}

#header-section[data-header="site"] #header-secondary.fixed .header-col.this-col-left,
#header-section[data-header="site"] #header-secondary.fixed .header-col.this-col-right {
    /* visibility: visible;     */
    opacity: 1;
    pointer-events: visible;
}
#header-section[data-header="site"] #header-secondary.fixed .header-col.this-col-left {
    left: 0;
}
#header-section[data-header="site"] #header-secondary.fixed .header-col.this-col-right {
    right: 0;
}

#header-section.fixed-header-secondary #header-secondary.fixed .header-container,
#header-section #header-secondary.active .header-container {
    box-shadow: 0 10px 80px rgba(0,0,0,0.3);
}

/* ============================================================================================== */
/* =========================================== dropdown ========================================= */
/* ============================================================================================== */

/* #header-secondary.fixed .header-dropdown-container.show{
    position: fixed;
} */

.header-dropdown-container {
    position: relative;
    display: none;
    /* display: block !important; */
    width: 100%;
    height: 600px;
    background-color: rgba(var(--cpn-color-gray-light),1);
    color: rgba(var(--cpn-color-black),1);
    /* box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5); */
    /* overflow-y: auto; */
    z-index: 10;
}
.header-dropdown-container.show {
    display: block;
}
.header-dropdown-container>.header-dropdown-container-inside {
    position: relative;
    width: 100%;
    height: 100%;
}
.header-dropdown-container>.header-dropdown-container-inside .container {
    position: relative;
    max-width: 100%;
    width: 1000px;
    /* margin: 80px auto; */
    padding-top: 80px;
    padding-bottom: 80px;
}
.header-dropdown-container a,
.header-dropdown-container button {
    text-decoration: none !important;
    outline: none !important;
    color: rgba(var(--cpn-color-black),1);
}
.header-dropdown-container .menu-title {
    position: relative;
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
}
.header-dropdown-container .menu-title.underline {
    border-bottom: 1px solid rgba(var(--cpn-color-black),0.15);
    margin-bottom: 25px;
    padding-bottom: 25px;
}
.header-dropdown-container .menu-title>.icon {
    font-size: 18px;
    margin-right: 5px;
}
.header-dropdown-container .menu-text {
    position: relative;
    font-size: 15px;
    line-height: 30px;
}
.header-dropdown-container .menu-title-link,
.header-dropdown-container .menu-text-link {
    display: inline-block;
    cursor: pointer;
    -webkit-transition:var(--cpn-transition-all-fast);
    -moz-transition:var(--cpn-transition-all-fast);
    -ms-transition:var(--cpn-transition-all-fast);
    -o-transition:var(--cpn-transition-all-fast);
    transition:var(--cpn-transition-all-fast);
}
.header-dropdown-container .menu-title-link:hover,
.header-dropdown-container .menu-title-link.active {
    color: rgba(var(--cpn-color-primary),1);
}

.dropdown-menu-project-row,
.dropdown-menu-project-col {
    position: relative;
}
.dropdown-menu-project-row {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}
.dropdown-menu-project-col.this-col-main {
    width: 280px;
    /* background-color: rgba(255,255,0,0.1); */
}
.dropdown-menu-project-col.this-col-sub {
    width: calc(100% - 280px);
}

.dropdown-menu-project-row ul.dropdown-menu-group,
.dropdown-menu-project-row ul.dropdown-menu-group>li,
.dropdown-menu-project-row ul.sub-dropdown-menu-group,
.dropdown-menu-project-row ul.sub-dropdown-menu-group>li {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
.dropdown-menu-project-row ul.dropdown-menu-group+ul.dropdown-menu-group {
    margin-top: 30px;
}

/**/
.dropdown-menu-project-col.this-col-sub .menu-row,
.dropdown-menu-project-col.this-col-sub .menu-row>.menu-col {
    position: relative;
}
.dropdown-menu-project-col.this-col-sub .menu-row {
    display: none;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.dropdown-menu-project-col.this-col-sub .menu-row.enable {
    display: flex;
}
.dropdown-menu-project-col.this-col-sub .menu-row>.menu-col {}
.dropdown-menu-project-col.this-col-sub .menu-row>.menu-col.this-col-category {
    width: 280px;
    flex: 1 0 0;
}
.dropdown-menu-project-col.this-col-sub .menu-row>.menu-col.this-col-location {
    width: calc(100% - 280px);
}

/* category */

/* zone */
.zone-row,
.zone-row>.zone-col,
.zone-group {
    position: relative;
}
.zone-row {
    display: flex;
    flex-wrap: nowrap;
}
.zone-row>.zone-col {
    width: 50%;
}
.zone-group+.zone-group {
    margin-top: 25px;
}
.zone-group ul.sub-dropdown-menu-group {
    column-count: 2;
}

/* ============================================================================================== */
/* ======================================= modal nav menu ======================================= */
/* ============================================================================================== */

.modal-nav-menu .modal-dialog,
.modal-nav-menu .modal-content  {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    min-width: 0;
    border-radius: 0;
    border: none;
    /* background: none; */
    box-shadow: none;
}
.modal-nav-menu .modal-dialog {
    width: 800px;
    min-height: 300px;
    transform: none;
    transform: translateX(0) !important;
    margin: 0 0 0 auto;
    transition: margin 0.3sease-out;
    overflow: hidden;
}
.modal-nav-menu .modal-content  {
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}
.modal-nav-menu .modal-body {
    padding: 80px 100px;
}

/* close */
.modal-nav-menu .btn-close {
    transform: translateY(-50%);
    top: 50%;
    right: 25px;
}

/* header */
.modal-nav-menu .modal-header,
.modal-nav-menu .modal-footer {
    height: 100px;
    padding: 30px 50px;
}
.modal-nav-menu .modal-header .btn-close {
    position: absolute;
}
.modal-nav-menu .modal-header .modal-title-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    width: 100%;
    padding-right: 30px;
}
.modal-nav-menu .modal-header .modal-title-row>.modal-title-col {
    position: relative;
}
.modal-nav-menu .modal-header .modal-title-row>.modal-title-col.this-col-left {
    text-align: left;
    flex: 1 0 0;
    width: calc(100% - 170px);
}
.modal-nav-menu .modal-header .modal-title-row>.modal-title-col.this-col-center {
    display: none;
    text-align: center;
}
.modal-nav-menu .modal-header .modal-title-row>.modal-title-col.this-col-right {
    text-align: right;
    width: 170px;
    display: flex;
    justify-content: flex-end;
}

#nav-menu-site-project-popup .modal-body {
    text-align: center;
}
#nav-menu-site-project-popup ul.site-menu-group {}
#nav-menu-site-project-popup ul.site-menu-group>li.site-menu-item+li.site-menu-item {
    border-top: 1px solid rgba(var(--cpn-color-black),0.08);
}
#nav-menu-site-project-popup .site-menu-btn {
    justify-content: center;
    padding: 10px 0;
}

/* body */
.modal-nav-menu .modal-body .btn-close {
    position: fixed;
    right: 50px;
}

/* menu */
.modal-nav-menu .modal-body ul.site-menu-group.vertical+ul.site-menu-group.vertical {
    margin-top: 25px;
}
.modal-nav-menu .modal-body .site-menu-btn {
    color: rgba(var(--cpn-color-black), 1);
}
.modal-nav-menu .modal-body .site-menu-btn:hover,
.modal-nav-menu .modal-body .site-menu-btn.active {
    color: rgba(var(--cpn-color-primary), 1);
}
.modal-nav-menu .modal-body ul.site-menu-group.vertical>li.open .site-menu-group.is-dropdown {
    padding-bottom: 10px;
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {
    .header-section,
    .header-row {
        height: 60px;
    }
    #header-secondary.on-banner {
        top: 60px;
    }
}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {
    .header-section,
    .header-row {
        height: 60px;
    }
    #header-secondary.on-banner {
        top: 60px;
    }
}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {  

    .header-section,
    .header-row {
        height: 55px;
    }
    #header-secondary.on-banner {
        top: 55px;
    }
    .logo-on-header .logo {
        width: 220px;
        height: 15px;
    }

    /* ============================================================================================== */
    /* ======================================== header secondary ==================================== */
    /* ============================================================================================== */
    
    #header-secondary .header-row>.header-col.this-col-left,
    #header-secondary .header-row>.header-col.this-col-right {
        width: 220px;
    }
    #header-secondary .header-row>.header-col.this-col-center {
        width: calc(100% - 440px);
    }

}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* .header-section,
    .header-row {
        height: 55px;
    }
    #header-secondary.on-banner {
        top: 55px;
    }
    .logo-on-header .logo {
        width: 220px;
        height: 15px;
    } */
    #header-section[data-header="site"] #header-secondary {
        display: none;
    }

    /* ============================================================================================== */
    /* ======================================== header secondary ==================================== */
    /* ============================================================================================== */
   
    #header-secondary .header-row>.header-col.this-col-left,
    #header-secondary .header-row>.header-col.this-col-right {
        width: 50%;
    }
    #header-secondary .header-row>.header-col.this-col-center {
        display: none;
    }

    /* col right */
    #header-primary .header-col.this-col-right .site-menu-item.is-lang  {
        display: none;
    }
    #header-primary .header-col.this-col-right .site-menu-item.is-search:before {
        display: none;
    }
    /* #header-primary .header-col.this-col-right .site-menu-item.is-menu .site-menu-btn>.text {
        display: none;
    } */

}

/* md - sm - xs */
@media (max-width:  991.98px) {

    #header-section[data-header="site"] #header-secondary {
        display: none;
    }
    /* #header-section[data-header="site-project"] #header-secondary {
        display: none;
    } */

    /* ============================================================================================== */
    /* ======================================= modal nav menu ======================================= */
    /* ============================================================================================== */

    .modal-nav-menu .modal-dialog {
        max-width: 100%;
        transform: translateX(0) !important;
    }    

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* ============================================================================================== */
    /* ======================================= modal nav menu ======================================= */
    /* ============================================================================================== */

    .modal-nav-menu .modal-dialog {
        width: 600px;
    }

    /* ============================================================================================== */
    /* ========================================= header primary ===================================== */
    /* ============================================================================================== */

    #header-primary .header-row>.header-col.this-col-left,
    #header-primary .header-row>.header-col.this-col-right {
        width: 200px;
    }
    #header-primary .header-row>.header-col.this-col-center {
        width: calc(100% - 400px);
    }

    /* col left */
    /* #header-primary .header-col.this-col-left .site-menu-item.is-call {
        display: none;
    }
    #header-primary .header-col.this-col-left .site-menu-item.is-search {
        display: flex;
    }
    #header-primary .header-col.this-col-left .site-menu-item.is-search:before {
        display: none;
    } */

    /* col right */
    #header-primary .header-col.this-col-right .site-menu-item.is-lang  {
        display: none;
    }
    #header-primary .header-col.this-col-right .site-menu-item.is-search:before {
        display: none;
    }
    #header-primary .header-col.this-col-right .site-menu-item.is-menu .site-menu-btn>.text {
        display: none;
    }

}

/* sm - xs */
@media (max-width: 767.98px) {   

    /* ============================================================================================== */
    /* ========================================= header primary ===================================== */
    /* ============================================================================================== */

    #header-primary .header-row>.header-col.this-col-left,
    #header-primary .header-row>.header-col.this-col-right {
        width: 30px;
    }
    #header-primary .header-row>.header-col.this-col-center {
        width: calc(100% - 60px);
    }

    /* col left */
    #header-primary .header-col.this-col-left .site-menu-item.is-call {
        display: none;
    }
    #header-primary .header-col.this-col-left .site-menu-item.is-search {
        display: flex;
    }
    #header-primary .header-col.this-col-left .site-menu-item.is-search:before {
        display: none;
    }

    /* col right */
    #header-primary .header-col.this-col-right .site-menu-item.is-lang,
    #header-primary .header-col.this-col-right .site-menu-item.is-search {
        display: none;
    }
    #header-primary .header-col.this-col-right .site-menu-item.is-menu:before {
        display: none;
    }
    #header-primary .header-col.this-col-right .site-menu-item.is-menu .site-menu-btn>.text {
        display: none;
    }

    /* ============================================================================================== */
    /* ======================================== header secondary ==================================== */
    /* ============================================================================================== */
    
    #header-section[data-header="site"] #header-secondary {
        display: none;
    }

}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* ============================================================================================== */
    /* ======================================= modal nav menu ======================================= */
    /* ============================================================================================== */

    .modal-nav-menu .modal-dialog {
        width: 500px;
    }
    .modal-nav-menu .modal-body {
        padding: 80px;
    }
    
}

/* xs */
@media (max-width: 575.98px) {

    .modal-nav-menu .modal-content {
        border-radius: 0;
    }
    .modal-nav-menu .modal-header,
    .modal-nav-menu .modal-footer {
        height: 80px;
        padding: 20px 30px;
    }
    .modal-nav-menu .modal-body {
        padding: 50px 50px;
    }
    .modal-nav-menu .modal-header .modal-title-row {
        padding-right: 50px !important;
    }

    /* logo */
    .logo-on-header .logo {
        width: 185px;
        height: 14px;
    }

    /**/
    .modal-nav-menu .modal-header .modal-title-row>.modal-title-col.this-col-left {
        width: calc(100% - 140px);
    }
    .modal-nav-menu .modal-header .modal-title-row>.modal-title-col.this-col-right {
        width: 140px;
    }

}

/* xs custom */
@media (max-width: 399.98px) {}