:root {
    --menu-gap                    : 20px;
    /* main-menu */
    --main-menu-height            : 90px;
    --main-menu-padding-y         : 10px;
    --main-menu-padding-x         : 24px;
    --main-menu-bg-color          : #fff;
    /* menu-items */
    --menu-item-padding-x         : 16px;
    --menu-item-height            : 38px;
    --menu-item-bg                : transparent;
    --menu-item-bg-hover          : var(--bg-light);
    --menu-item-color             : #444;
    --menu-item-color-hover       : #212529;
    --menu-item-radius            : 0px;
    /* upper-menu */
    --upper-menu-height           : 30px;
    /* menu-right */
    --menu-right-gap              : var(--menu-gap);
    /* Sub-menu ul */
    --sub-menu-padding            : 8px;
    --sub-menu-bg-color           : #fff;
    --sub-menu-radius             : 0px;
    --sub-menu-radius-border-width: 01px;
    --sub-menu-radius-border-color: #000;
    --sub-menu-box-shadow         : var(--shadow-2);
    /* sub-menu-items */
    --sub-menu-item-color         : #444;
    --sub-menu-item-color-hover   : #212529;
    --sub-menu-item-padding       : 8px 16px;
    --sub-menu-item-bg            : transparent;
    --sub-menu-item-bg-hover      : #fff;
    --sub-menu-item-radius        : 0px;
    /* btn-menu (phone call + search) */
    --btn-topbar-bg               : #BD5B5B;
    --btn-topbar-bg-hover         : #692727;
    --btn-topbar-color            : #ffffff;
    --btn-topbar-border-color     : #692727;
    --btn-topbar-border-width     : 1px;
    --btn-topbar-radius           : 20px;
    --btn-topbar-transform        : normal;
    --btn-menu-gap                : var(--menu-gap);
    /* slide-menu after breckpoint */
    --slide-menu-bg               : #fff;
    --slide-menu-width            : 380px;
    /* burger*/
    --burger-size                 : 60px;
    --burger-color                : #212529;
    /* icon-menu */
    --icon-menu-color             : #444;
    --icon-menu-color-hover       : #212529;
    --icon-menu-size              : 20px;
    --icon-menu-gap               : var(--menu-gap);
    /* mega-menu */
    --megamenu-column             : 4;
    --megamenu-padding            : 40px 40px 42px 40px;
    --megamenu-margin             : 100px;
    --megamenu-column-rule        : 1px solid #ccc;
    --megamenu-column-gap         : 48px;
    /* upper-menu items text style */
    --upper-menu-font-size        : 16px;
    --upper-menu-font-weight      : 300;
    --upper-menu-font-style       : normal;
    --upper-menu-text-transform   : none;
    /* level0-menu items text style */
    --level0-menu-font-size       : 16px;
    --level0-menu-font-weight     : 400;
    --level0-menu-font-style      : normal;
    --level0-menu-text-transform  : uppercase;
    /* Sub-title text style */
    --sub-title-font-size         : 16px;
    --sub-title-font-weight       : 300;
    --sub-title-font-style        : italic;
    --sub-title-text-transform    : none;
    --sub-title-color             : #ddd;
    /* Link-image */
    --link-image-width            : 250px;
    --link-image-gap              : 16px;
    /* icons */
    --icon-size                   : 16px;
    --icon-padding-top            : 4px;
    --icon-gap                    : 16px;
    /* arrows */
    --menu-arrow-stroke           : 2;
    --menu-arrow-submenu-display  : block;
}
/* Topbar button (phone) */
@media {
    .btn-topbar {
        background-color: var(--btn-topbar-bg);
        color           : var(--btn-topbar-color);
        border          : var(--btn-topbar-border-width) var(--btn-topbar-border-color) solid;
        border-radius   : var(--btn-topbar-radius);
    }
    .btn-topbar:hover {
        background-color: var(--btn-1-bg-hover);
        color           : var(--btn-1-color);
    }
}
/* main-menu */
@media {
    main {
        margin-top: var(--main-menu-height);
    }
    #main-menu {
        background     : var(--main-menu-bg-color);
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        height         : var(--main-menu-height);
        padding        : var(--main-menu-padding-y) var(--main-menu-padding-x);
        position       : fixed;
        z-index        : 100;
        top            : 0;
        width          : 100%;
        white-space    : nowrap;
        border-bottom:1px solid #000;
    }
}
/* logo */
@media {
    #main-menu .logo > img {
        height: 50px;
    }
    #slide-menu .logo {
        display: none;
    }
}
/* slide-menu */
@media {
    #slide-menu {
        height        : 100%;
        display       : flex;
        flex-direction: column;
        padding       : 0 16px;
    }
    .menu-breakpoint > #slide-menu {
        position        : fixed;
        z-index         : 100;
        top             : var(--main-menu-height);
        left            : 100%;
        height          : calc(100vh - var(--main-menu-height));
        background-color: var(--slide-menu-bg);
        width           : var(--slide-menu-width);
        padding         : 16px;
        transition      : all ease 0.2s;
    }
    .menu-breakpoint > #slide-menu.menu-open {
        left: calc(100% - var(--slide-menu-width));
    }
    #main-menu:not(.menu-breakpoint).menu-align-left #slide-menu {
        margin-right: auto;
    }
    #main-menu:not(.menu-breakpoint).menu-align-left #slide-menu > ul {
        justify-content: flex-start;
    }
    #main-menu:not(.menu-breakpoint).menu-align-right #slide-menu {
        margin-left: auto;
    }
    #main-menu:not(.menu-breakpoint).menu-align-right #slide-menu > ul {
        justify-content: flex-end;
    }
}
/* upper-menu*/
@media {
    #main-menu:not(.menu-breakpoint) #slide-menu > ul.upper-menu > li > a {
        font-size     : var(--upper-menu-font-size);
        font-weight   : var(--upper-menu-font-weight);
        text-transform: var(--upper-menu-text-transform);
        font-style    : var(--upper-menu-font-style);
        height        : 100%;
    }
    #main-menu:not(.menu-breakpoint) #slide-menu > ul.upper-menu > li {
        height: 100%;
    }
    #main-menu:not(.menu-breakpoint) #slide-menu > ul.upper-menu {
        height: var(--upper-menu-height);
    }
}
/* down-menu */
@media {
    #slide-menu:not(.menu-breakpoint) > ul:not(.upper-menu) > li > a {
        font-size     : var(--level0-menu-font-size);
        font-weight   : var(--level0-menu-font-weight);
        text-transform: var(--level0-menu-text-transform);
        font-style    : var(--level0-menu-font-style);
    }
}
/* sub-title */
@media {
    #slide-menu .menu-level-1 a .menu-title {
        font-size     : 18px;
        font-weight   : 400;

    }
    #slide-menu .menu-level-1 li:nth-child(2) {
   display:none;

    }


    #slide-menu a .menu-sub-title {
        font-size     : var(--sub-title-font-size);
        font-weight   : var(--sub-title-font-weight);
        text-transform: var(--sub-title-text-transform);
        font-style    : var(--sub-title-font-style);
    }
}
/* menu right */
@media {
    #main-menu .menu-right {
        display    : flex;
        gap        : var(--menu-right-gap);
        align-items: center;
    }
    #main-menu.menu-breakpoint .menu-right {
        padding-right: calc(var(--burger-size) + var(--menu-right-gap));
    }
}
/* icon-menu */
@media {
    #icon-menu {
        display    : flex;
        align-items: center;
        gap        : var(--icon-menu-gap);
    }
    #icon-menu a {
        color    : var(--icon-menu-color);
        font-size: var(--icon-menu-size);
    }
    #icon-menu a:hover {
        color: var(--icon-menu-color-hover);
    }
    #icon-menu.menu-collapsed {
        padding-bottom: var(--icon-menu-gap);
    }
}
/* menu-level-0 */
@media {
    .menu-level-0 {
        display        : flex;
        align-items    : center;
        justify-content: center;
        flex           : 1 1 auto;
    }
    /* .menu-level-0 > li {
        height: 100%;
    } */
    .menu-level-0 > li > a {
        height       : var(--menu-item-height);
        display      : block;
        padding      : 0 var(--menu-item-padding-x);
        background   : var(--menu-item-bg);
        display      : flex;
        align-items  : center;
        transition   : background 0.2s ease;
        border-radius: var(--menu-item-radius);
        color        : var(--menu-item-color) !important;
    }
    .menu-level-0 > li:hover > a {
        background: var(--menu-item-bg-hover);
        color     : var(--menu-item-color-hover) !important;
    }
    .menu-breakpoint .menu-level-0 {
        flex-direction: column;
        align-items   : flex-start;
        flex          : 0 0 auto;
    }
    .menu-breakpoint .menu-level-0 > li {
        width : 100%;
        height: auto;
    }
    .menu-breakpoint .menu-level-0 a {
        padding: 16px;
        height : max-content;
    }
}
/* menu-level-1+ */
@media {
    .sub-menu {
        position: relative;
    }
    .sub-menu ul {
        display         : none;
        flex-direction  : column;
        position        : absolute;
        padding         : var(--sub-menu-padding);
        background-color: var(--sub-menu-bg-color);
        border-radius   : var(--sub-menu-radius);
        width           : max-content;
        border          : var(--sub-menu-radius-border-width) solid var(--sub-menu-radius-border-color);
    }
    #main-menu:not(.megamenu).sub-menu ul {
        box-shadow: var(--sub-menu-box-shadow);
    }
    #main-menu:not(.menu-breakpoint).megamenu #slide-menu > ul > li > ul {
        box-shadow: var(--sub-menu-box-shadow);
    }
    #main-menu.menu-breakpoint .sub-menu ul {
        box-shadow: none;
    }
    #slide-menu li > a + ul:hover,
    #slide-menu li:hover > a + ul {
        display: flex;
        z-index: 1;
    }
    .sub-menu li a {
        display      : block;
        padding      : var(--sub-menu-item-padding);
        background   : var(--sub-menu-item-bg);
        transition   : background 0.2s ease;
        border-radius: var(--sub-menu-item-radius);
        color        : var(--sub-menu-item-color) !important;
            border: 1px solid transparent;
    }
    .sub-menu li a:hover {
        background: var(--sub-menu-item-bg-hover);
        color     : var(--sub-menu-item-color-hover) !important;
        border:1px solid #000;
    }
    .menu-level-2,
    .menu-level-3,
    .menu-level-4 {
        top : 0;
        left: 100%;
    }
    #slide-menu .return {
        display: none;
    }
    #slide-menu.menu-breakpoint:not(.menu-open) ul {
        box-shadow: none;
    }
    .menu-breakpoint .sub-menu ul {
        position        : fixed;
        display         : flex;
        z-index         : 100;
        top             : var(--main-menu-height);
        left            : 100%;
        height          : calc(100vh - var(--main-menu-height));
        background-color: var(--slide-menu-bg);
        width           : var(--slide-menu-width);
        padding         : 16px;
        transition      : all ease 0.2s;
        border-radius   : 0;
        border          : none;
    }
    .menu-breakpoint .sub-menu.active > ul {
        left: calc(100% - var(--slide-menu-width));
    }
    .menu-breakpoint #slide-menu .return {
        display: block;
    }
    .menu-breakpoint .return > a {
        font-weight: bolder;
        display    : flex;
        align-items: center;
        gap        : 16px;
    }
    .menu-breakpoint .sub-menu > a {
        display        : flex;
        justify-content: space-between;
        align-items    : center;
    }
}
/* svg menu-arrow */
@media {
    .menu-breakpoint #slide-menu .return svg {
        stroke      : var(--menu-item-color);
        stroke-width: 2;
        transform   : rotate(180deg);
    }
    svg.menu-arrow {
        display     : var(--menu-arrow-display);
        stroke      : var(--menu-item-color);
        stroke-width: 2 var(--menu-arrow-stroke);
        display     : var(--menu-arrow-submenu-display);
        align-self  : center;
        padding     : var(menu-arrow-padding);
    }
    #main-menu.megamenu:not(.menu-breakpoint) svg.menu-arrow,
    #main-menu:not(.menu-breakpoint) > #slide-menu > ul > li > a svg.menu-arrow {
        display: none;
    }
    .menu-breakpoint svg.menu-arrow {
        display: block;
    }
}
/* burger */
@media {
    #burger {
        display        : none;
        cursor         : pointer;
        align-items    : center;
        justify-content: center;
        height         : var(--burger-size);
        width          : var(--burger-size);
        transition     : transform 400ms;
        user-select    : none;
        position       : absolute;
        right          : var(--main-menu-padding-x);
    }
    .menu-breakpoint #burger {
        display: flex;
    }
    #burger.active {
        transform: rotate(45deg);
    }
    #burger .line {
        fill          : none;
        transition    : stroke-dasharray 400ms, stroke-dashoffset 400ms;
        stroke        : var(--burger-color);
        stroke-width  : 3;
        stroke-linecap: round;
    }
    #burger .top {
        stroke-dasharray: 40 121;
    }
    #burger .bottom {
        stroke-dasharray: 40 121;
    }
    #burger.active .top {
        stroke-dashoffset: -68px;
    }
    #burger.active .bottom {
        stroke-dashoffset: -68px;
    }
}
/* mask */
@media {
    #mask {
        display         : none;
        top             : var(--main-menu-height);
        left            : 0;
        position        : fixed;
        width           : 100vw;
        height          : calc(100vh - var(--main-menu-height));
        background-color: rgba(0, 0, 0, 0);
        transition      : all ease 0.2s;
    }
    #mask.active {
        display         : block;
        background-color: rgba(0, 0, 0, 0.8);
    }
}
/* phone */
@media (max-width:600px) {
    :root {
        --slide-menu-width: 100%;
    }
}
/* btn-menu */
@media {
    #btn-menu {
        display: flex;
        gap    : var(--btn-menu-gap);
    }
    #btn-menu.menu-collapsed {
        flex-wrap     : wrap;
        padding-bottom: var(--btn-menu-gap);
        z-index       : 0;
    }
}
/* search */
@media {
    #search [type="search"] {
        border-top-right-radius   : 0;
        border-bottom-right-radius: 0;
        border-right              : none !important;
        min-width                 : 64px;
    }
    #search {
        flex-wrap: nowrap;
        min-width: 175px;
    }
}
/* image */
@media {
    #slide-menu ul ul li.link-image a,
    #slide-menu ul ul li.link-image img {
        width     : 100%;
        height    : 100%;
        object-fit: cover;
    }
    #slide-menu ul ul li.link-image {
        width         : var(--link-image-width);
        margin        : calc(var(--sub-menu-padding)* -1);
        padding-bottom: var(--link-image-gap);
        border-radius : var(--sub-menu-item-radius) var(--sub-menu-item-radius) 0 0;
        overflow      : hidden;
    }
    /* img-left */
    #main-menu:not(.menu-breakpoint):not(.megamenu) #slide-menu ul ul.link-image.img-left {
        padding-left: calc(var(--link-image-width) + var(--link-image-gap));
    }
    #main-menu:not(.menu-breakpoint):not(.megamenu) #slide-menu ul ul li.link-image.img-left {
        position     : absolute;
        top          : 0;
        left         : 0;
        margin       : 0;
        padding      : 16px;
        height       : 100%;
        border-radius: var(--sub-menu-item-radius) 0 0 var(--sub-menu-item-radius);
    }
    /* img-right */
    #main-menu:not(.menu-breakpoint):not(.megamenu) #slide-menu ul ul.link-image.img-right {
        padding-right: calc(var(--link-image-width) + var(--link-image-gap));
    }
    #main-menu:not(.menu-breakpoint):not(.megamenu) #slide-menu ul ul li.link-image.img-right {
        position     : absolute;
        top          : 0;
        right        : 0;
        margin       : 0;
        padding      : 0;
        height       : 100%;
        border-radius: 0 var(--sub-menu-item-radius) var(--sub-menu-item-radius) 0;
    }
    /* img-bottom */
    #slide-menu:not(.megamenu) ul ul li.link-image.img-bottom {
        order         : 1;
        padding-bottom: 0;
        margin-top    : var(--link-image-gap);
        border-radius : 0 0 var(--sub-menu-item-radius) var(--sub-menu-item-radius);
    }
    #main-menu.menu-breakpoint #slide-menu.menu-open ul ul li.link-image {
        border-radius: var(--sub-menu-item-radius);
        padding      : 0;
        width        : 100%;
        margin       : var(--link-image-gap) 0;
    }
    #main-menu.megamenu:not(.menu-breakpoint) #slide-menu > ul ul li.link-image {
        width        : 100%;
        border-radius: var(--sub-menu-item-radius);
        padding      : 0;
        margin       : unset;
    }
}
/* icons */
@media {
    #slide-menu a {
        display: flex;
        gap    : var(--icon-gap);
    }
    #slide-menu a i {
        font-size  : var(--icon-size);
        padding-top: var(--icon-padding-top);
    }
}
/* logo-center menu */
@media {
    #main-menu.logo-center:not(.menu-breakpoint) .menu-left .logo {
        display: none;
    }
    #main-menu.logo-center:not(.menu-breakpoint) #slide-menu {
        display              : grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows   : 100%;
        grid-template-areas  : "menu-1 image menu-2";
    }
    #main-menu.logo-center:not(.menu-breakpoint) #slide-menu.double-menu {
        grid-template-rows : var(--upper-menu-height) var(--menu-item-height);
        grid-template-areas: "menu-1 image menu-2" "menu-3 image menu-4";
    }
    #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :first-child {
        grid-area      : image;
        width          : 100%;
        display        : flex;
        justify-content: center;
        align-items    : center;
    }
    #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(2),
    #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(4) {
        justify-content: flex-end;
    }
    #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(3),
    #main-menu.logo-center:not(.menu-breakpoint) #slide-menu > :nth-child(5) {
        justify-content: flex-start;
    }
}
/* megamenu */
@media {
    .megamenu:not(.menu-breakpoint) .menu-level-1 > li > a > .menu-title {
        font-weight: bold;
    }
    .megamenu:not(.menu-breakpoint) #slide-menu > ul > li > ul {
        padding: var(--megamenu-padding);
        margin : 0 var(--megamenu-margin);
        width  : calc(100% - var(--megamenu-margin) - var(--megamenu-margin));
        left   : 0;
    }
    .megamenu:not(.menu-breakpoint) .sub-menu {
        position: unset;
        /* page-break-inside: avoid; */
        /* break-inside: avoid-column; */
    }
    .megamenu:not(.menu-breakpoint) .sub-menu ul {
        width: 100%;
    }
    .megamenu:not(.menu-breakpoint) .sub-menu ul li.breack-after {
        break-after: column;
    }
    .megamenu:not(.menu-breakpoint) .sub-menu ul li.breack-before {
        break-before: column;
    }
    .megamenu:not(.menu-breakpoint) #slide-menu .sub-menu:hover > ul {
        display     : block;
        column-count: var(--megamenu-column);
        column-rule : var(--megamenu-column-rule);
        column-gap  : var(--megamenu-column-gap);
        column-fill : balance;
    }
    .megamenu:not(.menu-breakpoint) #slide-menu .sub-menu:hover > ul ul {
        position     : relative;
        display      : flex;
        left         : 0;
        padding-left : 0;
        padding-right: 0;
    }
}