body {
  font-family: "Roboto", sans-serif;
}

.wrapper {
  max-width: 1576px;
  margin: 0 auto;
}

/* ----------------- */

.menu-item a svg,
.menu-item a img {
  filter: none;
}
.__custom {
  background: #fff;
  box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.25);
  padding: 0 30px;
}

.__custom nav.navbar {
  padding: 0;
}

.navbar-nav {
  gap: 50px;
  align-items: center;
}

.navbar-toggler {
  margin: 20px 0;
}

.custom-menu {
  position: absolute;
  padding-top: 10px;
  top: 75px;
}

.sub-menu {
  display: none;
}

.sub-menu li {
  padding: 10px;
  display: flex;
}

#primary-menu {
  gap: 50px;
  align-items: center;
}

.menu-item a {
  color: #211e1f;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  gap: 5px;
  align-items: center;
  white-space: nowrap;
  transition: 0.1s;
  width: 100%;
  line-height: normal;
}

.sub-menu .menu-item a {
  font-weight: 500;
}

.sub-menu .menu-item:hover a {
  text-decoration: underline;
}

.menu-item a:hover,
.menu-item-has-children:hover > a {
  color: #0484fc;
}

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children:hover a svg {
  transform: scaleY(-1);
}

.menu-item-has-children:hover a svg path {
  fill: #0484fc;
}

/* .menu-item-has-children:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M7.5 11.25L1.875 5.625L3.75088 3.75L7.5 7.5L11.2491 3.75L13.125 5.625L7.5 11.25Z' fill='currentColor'/%3E%3C/svg%3E");
  width: 15px;
  height: 19px;
  margin-left: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


.menu-item-has-children:focus:after,
.menu-item-has-children:hover:after,
.menu-item-has-children.focus:after,
.menu-item-has-children:hover:focus:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M7.5 3.75L1.875 9.375L3.75088 11.25L7.5 7.5L11.2491 11.25L13.125 9.375L7.5 3.75Z' fill='%230484FC'/%3E%3C/svg%3E");
  color: #0484fc;
} */

#navbarNav > ul > li:last-child a {
  padding: 15px 30px;
  border-radius: 50px;
  background: #f15e22;
  color: #fff;
  transition: all ease 0.5s;
}

#navbarNav > ul > li:last-child a:hover {
  background: #f90;
  box-shadow: 0 4px 30px 0 rgba(255, 153, 0, 0.7);
}

#navbarNav > ul > .menu-item:not(:last-child) {
  padding: 27.5px 0;
}

/* span.sub {
  font-size: small;
} */

/* UI Reco */


/* span.super {
  background: #0484fc;
  width: fit-content;
  padding: 5px;
  border-radius: 5px;
  transition: 0.3s ease-in-out;
}

span.sub {
  color: #3f4040;
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  text-transform: none;
}


.sub-menu .menu-item a:hover span.super {
  background: #f15e22;
} */

@media (min-width: 1400px) {
  .menu-item:hover .custom-menu .sub-menu {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(33, 30, 31, 0.15);
    list-style: none;
    min-width: 150px;
  }

  /* #menu-item-121 .sub {
    display: block;
    height: 125px;
    overflow: hidden;
    white-space: normal;
  }

  #menu-item-131 .sub,
  #menu-item-133 .sub {
    display: block;
    height: 100px;
    overflow: hidden;
    white-space: normal;
  }

  #menu-item-132 .sub {
    display: block;
    height: 75px;
    overflow: hidden;
    white-space: normal;
  } */
}

@media all and (max-width: 1399px) {
  .navbar-nav {
    align-items: start;
    margin: 25px 0;
    gap: 10px;
    max-height: 500px;
    overflow: auto;
  }

  #primary-menu {
    gap: 25px;
    align-items: flex-start;
    margin-top: 25px;
    overflow: scroll;
    height: 500px;
  }

  #navbarNav > ul > .menu-item {
    padding: 0 !important;
  }

  .menu-item-has-children a svg {
    display: none;
  }

  .custom-menu {
    position: relative;
    padding-top: 0;
    top: 0;
  }

  .sub-menu {
    display: block;
  }

  .sub-menu li {
    width: 300px;
    padding: 10px 0;
    list-style: none;
  }

  .menu-item:hover > .sub-menu {
    display: flex;
    flex-direction: column;
    padding: 0 2rem;
    left: 0;
  }
}

@media all and (max-width: 355px) {
  .sub-menu li {
    width: auto;
  }

  .menu-item:hover > .sub-menu {
    padding: 0 0 0 2rem;
  }
}

@media (max-width: 767px) {
  .__custom {
    padding: 0 20px;
  }
}