/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* header */

#header {
  position: fixed;
  z-index: 3;
  width: 100%;
  height: var(--header-height);
}

#header > div {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#header .logo {
  position: absolute;
  z-index: 80;
  width: 134px;
  margin-left: 0;
}

#header .logo > a > img:not(.logo_main) {
  display: none;
}

/* menu */

header .menu ul {
  margin: 0;
  padding: 0;
}

header .menu .menu-item {
  list-style: none;
  color: var(--color-blanc);
}

#menu_top {
  position: relative;
  z-index: 8;
}

#menu_top ul li.contact a:hover {
  background-color: var(--color-tertiary);
  background-image: url("../images/base/bouton_blanc.svg");
  color: var(--color-blanc);
}
#menu_top ul li.linkedin {
  background: none;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#menu_top ul li.linkedin a {
  display: inline-block;
  aspect-ratio: 1;
  width: auto;
  border: 1px solid var(--color-tertiary);
}

@media (max-width: 1199px) {
  #header > div.container {
    width:100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
    padding: var(--gap-m);

    height: var(--header-height);
    position: relative;
    align-items: center;
    background: white;
  }

  #header .container:before {
     content: ""; 
     position: absolute; 
    top: 100%;
    background:url('../images/custom/vague_header_mobile.svg') left top / auto repeat-x;
    left: 0;
    width: 100%;
    height: 5px;
    z-index:3;
     -webkit-filter: drop-shadow( 0 0 5px rgba(0,0,0,0.2));
             filter: drop-shadow( 0 0 5px rgba(0,0,0,0.2));
     pointer-events: none;

  }
  #header .container:after {
    content:'';
    position: absolute;
    top:100%;
    left:0;
    width:100%;
    height:13px;
    background:white;
    z-index:4;
    -webkit-transform:translateY(-12px);
        -ms-transform:translateY(-12px);
            transform:translateY(-12px);
    pointer-events:none;
  }
  
  body.open #header {
    background: var(--color-blanc);
  }

  #header .logo {
    position: absolute;
    left: var(--gap-m);
    top: var(--gap-m);
    z-index: 9;
    z-index: 0;
  }
  #header.header_landing .logo {
    left:50%;
    -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
            transform:translateX(-50%);
  }

  #header .logo,
  #header .logo a,
  #header .logo a img {
    width: 134px;
    height: 77px;
    display: inline-block;
  }
  #header .logo a img {
    -o-object-fit: contain;
       object-fit: contain;
  }

  #menu_top ul li.linkedin a {
    height: 42px;
    background: var(--color-blanc) url("../images/base/linkedin.svg") no-repeat
      center / 55%;
  }

  #header a.bouton {
    padding: 0.7rem 2.2em 0.7rem 0.7rem;
    color: var(--color-tertiary);
    border-color: var(--color-tertiary);
    background: url("../images/base/bouton_tertiary.svg") no-repeat right 0.7rem
      center / 1rem;
  }
  #menu_top ul li.contact {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    margin-bottom: 1.5em;
  }

  #menu_top ul li.contact a {
    border: 1px solid;
    background: var(--color-blanc) url("../images/base/bouton_tertiary.svg")
      no-repeat right 1em center / 1.25em;
    display: block;
    font-family: var(--font-primary, Anton);
    font-size: var(--fs-h3, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-h3, 22px);
    letter-spacing: var(--Global-layout-interlettrage, 1px);
    text-transform: uppercase;
    color: var(--color-tertiary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: var(--gap-s, 10px);
  }

  /* start of menu open */

  body.open #header {
    height: 100vh;
    overflow-y: scroll;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

  body.open #header .logo {
  }

  body.open #header .logo > a > img.logo_main {
  }

  body.open #header .logo > a > img:not(.logo_main) {
    display: initial;
  }

  #header .menu {
    display: none;
    padding: 0 var(--gap-m);
  }

  #header .menu_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }

  #menu_principal {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }

  body.open #header .menu_container {
    padding-top: var(--header-height);
  }
  body.open #header  .container:before {
    opacity:0;
  }
  body.open #header .menu_container .menu {
    margin-top: 2rem;
    display: block;
    width: 100%;
  }
  body.open #header .logo,
  body.open #header a.bouton {
    /*! display: none; */
  }
  body.open #header .container {
    /*! justify-content: flex-start; */
    padding-top: 20px;
  }
  #menu_top ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #menu_top ul li {
    width: 100%;
  }

  /* tog menu */
  #togMenu {
    position: relative;
    top: 0;
    right: 0;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    z-index: 4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    cursor: pointer;
    color: var(--color-secondary);
    text-transform: uppercase;
    padding: var(--gap-s, 10px);
    align-items: center;
    gap: var(--gap-s, 10px);
  }
  #togMenu > span {
    color: var(--color-secondary, #fff);
    font-family: var(--font-primary, Anton);
    font-size: var(--fs-h3, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-h3, 22px); /* 122.222% */
    letter-spacing: var(--Global-layout-interlettrage, 1px);
    text-transform: uppercase;
  }
  #togMenu:not(.open) > span {
    display:none;
  }
  #togMenu.open {
    width: auto;
  }

  #togMenu .burger {
    display: block;
    width: 44px;
    height:35px;
    position: relative;

    -webkit-transform: translateY(0px);

        -ms-transform: translateY(0px);

            transform: translateY(0px);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }

  .burger span {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--color-secondary);
    border: 0px solid;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }

  #burger span#t1 {
    top: 15%;
  }

  #burger span#t2 {
    top: calc(50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  #burger span#t3 {
    bottom: calc(15% - 1px);
  }

  #togMenu.open .burger span {
    width: 102%;
    height: 5px;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }

  #togMenu.open #burger span#t1 {
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
  }

  #togMenu.open #burger span#t2 {
    display: none;
  }

  #togMenu.open #burger span#t3 {
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 0;
  }

  /* end of tog menu */
  /* start of menu mobile */
  #header .menu > ul {
    width: 100%;
    margin: 0 auto;
    font-size: 18px;
    min-height: calc(100% - 5rem - 48px - 5rem - 4rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  #header .menu a {
    color: var(--color-secondary, #fff);
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;

    letter-spacing:0.035em;
    text-transform: uppercase;
    text-decoration: none;
  }

  #header .menu > ul > li:not(:last-child) {
    margin-bottom: 0;
  }

  #header .menu-item-has-children > a {
    position: relative;
    padding-right: 25px;
  }
  #header #menu_principal > ul > li {
    /*! border-bottom: 1px solid; */
  }
  #header #menu_principal > ul > li > a {
    padding-right: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--gap-m, 30px);
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    padding: var(--gap-m) 40px var(--gap-m) 0;
    border-bottom: 2px solid;
  }

  #header .menu > ul > li > .sub-menu {
    /*! margin-top: 0.875rem; */
    padding-left: 1.88rem;
    display: none;
  }

  #header .menu > ul > li.open > .sub-menu {
    display: block;
    padding-left:0;
  }

  #header .menu > ul > li {
    position: relative;
  }

  #header .menu > ul > li .tog {
    position: absolute;
    right: 0px;
    top: var(--gap-m);
    z-index: 1;
    height: 30px;
    width: 40px;
    margin-right: 5px;
    margin-left: 5px;
    background: url("../images/base/tog.svg") no-repeat center center / 20px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 0;
  }

  .menu_with_submenus .submenu-toggle.active {
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }

  #header .menu > ul > li > .sub-menu > li {
    padding: 6px 0;
  }

  #header .menu > ul > li > .sub-menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 8px 0;
    font-size:calc(1.25 * var(--fs-m));
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #header .menu > ul > li > .sub-menu a img {
    max-width:100px;
    aspect-ratio:1;
    -o-object-fit:contain;
       object-fit:contain;
  }
  #header .menu a:hover,
  #header .menu .current-menu-item > a,
  #header .menu .current-menu-parent > a,
  #header .menu .current-menu-ancestor > a {
    color: var(--color-primary);
  }

  #menu_top > ul > li.lien-devis.current-menu-item > a {
    color: var(--color-blanc);
  }

  #menu_top {
    padding-bottom: var(--header-height);
  }
}

@media (min-width: 1200px) {
  #header .container {
    padding: var(--gap) var(--gap-m);
    margin: 0 auto;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: space-between;
    height: var(--header-height);
    position: relative;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: white;
  }

  #header .container:before {
     content: ""; 
     position: absolute; 
    top: 100%;
    background:url('../images/custom/vague_header.svg') left top / auto repeat-x;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
     -webkit-filter: drop-shadow( 0 0 5px rgba(0,0,0,0.2));
             filter: drop-shadow( 0 0 5px rgba(0,0,0,0.2));
     pointer-events: none;
  }
  #header .container:after {
    content:'';
    position: absolute;
    top:100%;
    left:0;
    width:100%;
    height:13px;
    background:white;
    z-index:4;
    -webkit-transform:translateY(-12px);
        -ms-transform:translateY(-12px);
            transform:translateY(-12px);
    pointer-events:none;
  }

  .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
    #header.header_landing .logo {
    left:50%;
    -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
            transform:translateX(-50%);
  }

  #header .logo img {
    -webkit-transition: all 0.3s ease 0.3s;
    -o-transition: all 0.3s ease 0.3s;
    transition: all 0.3s ease 0.3s;
  }

  #header #togMenu {
    display: none;
  }

  #header .container {
    -webkit-transition: all 0.4s ease 0.2s;
    -o-transition: all 0.4s ease 0.2s;
    transition: all 0.4s ease 0.2s;
  }

  #header .menu {
    -webkit-transition:
      opacity 0.4s ease,
      -webkit-transform 0.4s ease 0.3s;
    transition:
      opacity 0.4s ease,
      -webkit-transform 0.4s ease 0.3s;
    -o-transition:
      opacity 0.4s ease,
      transform 0.4s ease 0.3s;
    transition:
      opacity 0.4s ease,
      transform 0.4s ease 0.3s;
    transition:
      opacity 0.4s ease,
      transform 0.4s ease 0.3s,
      -webkit-transform 0.4s ease 0.3s;
  }
  #header {
    position: absolute;
  }
  /*
  .scrolled #header:not(:hover) {
    height: var(--scrolled-header-height);
  }
  .scrolled #header .logo img {
    width: 70px;
    transition: var(--ease);
  }
  .scrolled.scrollingUp #header .logo img,
  .scrolled #header:hover .logo img {
    width: 100%;
    transition: all 0.3s ease 0.3s;
  }
  .scrolled:not(.scrollingUp) #header .container {
    height: var(--scrolled-header-height);
    border: none;
  }
  .scrolled #header:hover .container:before,
  body.scrolled.scrollingUp #header .container:before {
    background: var(--color-blanc);
  }
  .scrolled.scrollingUp #header .container,
  .scrolled #header:hover .container {
    height: var(--header-height);
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
  }
  .scrolled:not(.scrollingUp) #header .menu {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-200%);
  }
  .scrolled #header:hover .menu {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0%);
  }
  .scrolled .entete {
  padding-top: calc(var(--scrolled-header-height) + 50px);
}  
  */

  #header .menu_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
  }

  #header .menu {
    text-decoration: none;
  }

  #header .menu a {
    font-size: var(--fs-base);
    text-decoration: none;
  }

  #header .menu > ul {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: stretch;
    margin: 0;
    text-wrap: balance;
    position: relative;
    z-index: 4;
    width: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  #header .menu > ul > li.gammes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: unset;
  }
  #header .menu > ul > li:not(.gammes) {
    position:relative;
  }

  #header .menu > ul > li.menu-item-has-children > a {
    padding-right: 18px;
  }

  #menu_principal > ul > li.menu-item-has-children > a {
    background: url("../images/base/tog.svg") no-repeat right 0.3em / 10px 10px;
  }

  #menu_top > ul > li.menu-item-has-children > a {
    background: url("../images/base/tog.svg") no-repeat right 0.3em / 10px 10px;
  }

  #menu_top ul li.linkedin a {
    height: 48px;
    background: url("../images/base/linkedin.svg") no-repeat center / 40%;
    border: 1px solid var(--color-primary);
  }

  #menu_principal {
    position: relative;
    z-index: 1;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  #menu_principal > ul > li {
    padding:0 var(--gap) 0 0;
    border-right:1px solid var(--color-secondary);
  }
  #menu_principal > ul > li:last-child {
    padding-right:0;
    border-right:none;
  }
  #menu_principal > ul > li > a {
    color: var(--color-secondary, #212C55);
    text-align: center;
    font-family: var(--font-secondary, Poppins);
    font-size: var(--fs-base, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-base, 20px); /* 125% */
    text-transform: uppercase;
  }

  #header .menu > ul > li .sub-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    background: var(--color-blanc);
    top: 100%;
    
    /*! min-width: 100%; */
    
    text-wrap: nowrap;
    
    z-index: 5;
    
    -webkit-box-align: stretch;
    
        -ms-flex-align: stretch;
    
            align-items: stretch;
    gap: 2%;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
            transform: translateY(-20px);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    
    pointer-events: none;
    
    -webkit-box-shadow:0px 5px 0 0px rgba(0,0,0,0.125);
    
            box-shadow:0px 5px 0 0px rgba(0,0,0,0.125)
  }
   #header .menu > ul > li:not(.gammes) .sub-menu {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     left:0;
     width:300px;   
       padding:calc(2 * var(--gap-l)) 2%  var(--gap) 2%;
  }
  #header .menu > ul > li.gammes .sub-menu {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    left: calc(var(--gap-m) * -1);
    width: calc(100% + (2 * var(--gap-m)));
    padding:calc(2 * var(--gap-xl)) 2%  var(--gap-xl) 2%;
  }
  

  
  #header .menu > ul > li:last-child .sub-menu,
  #header .menu > ul > li.align_right .sub-menu {
    left: auto;
    right: 0;
  }

  #header .menu > ul > li:hover .sub-menu {
    opacity: 1;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
    pointer-events: all;
  }

  #header #menu_top > ul > li {
    position: relative;
  }
  #menu_principal > ul > li:not(.gammes) > ul > li {
    width:100%;
    text-align:left;
  } 

  #menu_principal > ul > li.gammes > ul > li {
    width: 23%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:stretch;
        -ms-flex-align:stretch;
            align-items:stretch
  }
  #menu_principal > ul > li:not(.gammes) > ul > li a {
    text-wrap: wrap;
    width:100%;
    text-align:left;
    display:block;
    padding:1em ;
    color: var(--color-secondary);
    font-family: var(--font-secondary);
    font-size: var(--fs-base);
    font-style: normal;
    font-weight: 700;
    line-height: var(--lh-base);
    text-transform: uppercase;
  }



#menu_principal > ul > li > ul > li.menu-item-object-gamme a  {
   position:relative;
  color: var(--color-primary, #F6A131);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-primary);
  font-size: var(--fs-l);
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh-l); /* 95.652% */
  text-transform: uppercase;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  border: none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  justify-content:flex-start;

}

.menu-item-object-gamme a:before {
  position:absolute;
  top:0%;
  left:0%;

  content:'';
  width:100%;
  aspect-ratio:1;
  background:var(--color-primary-light);
  border-radius:50%;
  z-index:0;
  
}
.menu-gamme-image {
    aspect-ratio: 1;
    -o-object-fit: contain;
       object-fit: contain;
    position:relative;
    margin-bottom:var(--gap);
    
}
  #header .menu .sub-menu .current-menu-item > a {
    color: var(--color-primary);
  }
  #header .menu a:hover,
  #header .menu .current-menu-item > a,
  #header .menu .current-menu-parent > a,
  #header .menu .current-menu-ancestor > a,
  #header .menu .sub-menu a:hover {
    color: var(--color-tertiary);
  }

  #menu_top ul li:not(.contact) a {
    color: var(--color-primary) !important;
  }
  #menu_top ul li:not(.contact):hover a {
    color: var(--color-tertiary) !important;
  }
}
@media (min-width: 1400px) {
  #header .container {
    width:1360px;
  }
  #header .menu > ul > li.gammes .sub-menu {
    padding: var(--gap-xl) 2%  var(--gap-l) 2%;
  }
   #header .menu > ul > li:not(.gammes) .sub-menu {
  
       padding:  calc(1.2 * var(--gap-l)) 2% calc(0.5 * var(--gap)) 2%;
  }
}