header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;

  .header-top {
    background: var(--color-secondary-dark);

    .dropdown-menu {
      margin-top: 10px !important;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      border: none;

      a {
        color: var(--color-text);
        padding-top: 10px;
        padding-bottom: 10px;
        font-family: var(--font-family-roboto);
        line-height: 110%;

        &:hover {
          background: var(--color-mustard) !important;
          color: #fff;
        }
      }
    }

    .btn-group {
      position: relative;
    }

    .btn-group:hover {
      &::after {
        content: "";
        display: flex;
        z-index: 3;
        position: absolute;
        width: 100%;
        height: 50%;
        top: 100%;
        left: 0;
      }

      .dropdown-menu {
        display: block !important;
        top: 100% !important;
      }
    }

    .btn-icon-header {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 16px;
      background: var(--color-primary);
      color: #fff;
      border: none;
      outline: none;
      transition: 0.4s;

      @media (width>=768px) {
        width: 48px;
      }

      @media (width<=768px) {
        background: var(--color-secondary);
      }

      &:hover {
        background: var(--color-mustard);
      }
    }

    .btn-header {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 16px;
      background: var(--color-primary);
      color: #fff;
      border: none;
      outline: none;
      transition: 0.4s;
      width: fit-content;
      font-weight: 600;
      cursor: pointer;

      &:hover {
        background: var(--color-mustard);
      }
    }

    .page-width {
      @media (width<520px) {
        padding-inline: 0;
        display: grid !important;
        grid-template-columns: 3fr 5fr;

        .btn-icon-header {
          padding-inline: 0;
          width: 100%;
        }

        .container-contact,
        .container-networks {
          display: grid !important;
        }

        .container-contact {
          grid-template-columns: repeat(3, 1fr);
        }

        .container-networks {
          grid-template-columns: repeat(5, 1fr);
        }
      }
    }
  }

  .content-nav {
    transition: 0.4s;
  }

  &.shadow-sm {
    background: #fefefecf;
    backdrop-filter: blur(4px);

    & .header-body {
      backdrop-filter: none !important;
      background: transparent !important;
      box-shadow: none;

      .content-nav {
        padding-inline: 0 !important;
      }
    }
  }

  .header-body-width {
    transition: 0.4s;
    max-width: 1400px !important;
    margin-top: 1rem;

    @media (width>=768px) {
      margin-top: 1.5rem;
      padding-top: 1rem;
    }
  }

  .header-body.open-sub-menu {
    border-radius: 10px 10px 0 0 !important;
  }

  .header-body-scroll {
    max-width: 1600px !important;
    margin-top: 0;
    padding-top: 0;
  }

  .header-body {
    backdrop-filter: blur(4px);
    background: #fefefecf;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

    &.open-mega-menu {
      border-radius: 10px 10px 0 0;
    }

    .logo-header {
      width: 100%;
      max-width: 150px;

      @media (width<1200px) {
        max-width: 130px;
      }

      @media (width<768px) {
        max-width: 120px;
      }
    }

    .btn-menu-offcavnas {
      border: none;
      outline: none;
      background: transparent;
      align-items: center;
      justify-content: center;
      color: var(--color-text-dark);
    }

    #menu-primary {
      display: flex;
      align-items: center;
      padding: 0;
      margin: 0;
      gap: 2rem;

      li.remove-position-relative {
        position: initial !important;
      }

      li {
        list-style: none;

        a {
          color: #404040;
          transition: 0.4s;
          font-family: var(--font-family-roboto);
          font-size: var(--font-size-content);

          &:hover {
            font-weight: 700;
            color: var(--color-primary);
          }
        }
      }

      li.current-menu-item a {
        font-weight: 700;
        color: var(--color-primary);
      }

      li.menu-item-has-children {
        &:hover {
          &::after {
            content: "";
            height: 50%;
            position: absolute;
            width: 200%;
            left: 0;
            top: auto;
          }
        }
      }

      &>li>a {
        display: flex;
        align-items: center;
        gap: 5px;

        i {
          font-size: 12px;
        }
      }

      .sub-menu {
        display: none;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 10px;
        top: 100%;
        position: absolute;
        border-radius: 0 0 10px 10px;
        background: #fefefecf;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        width: 100%;
        left: 0;
        border-top: 1px solid;
        padding: 3rem 3rem !important;

        li {
          list-style: disc;
          padding: 3px 20px 3px 0;
        }
      }

      li:nth-child(3)::after {
        content: "" !important;
        height: 50% !important;
        top: auto !important;
      }
    }

    .container-sub-menu {
      width: 100%;
      padding: 3rem 2rem;
      border-top: 1px solid;
      display: grid;
      grid-template-columns: 33.3% 1fr;
      gap: 1.5rem;

      .container-list {
        border-right: 1px solid var(--color-primary);
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 0;

        li {
          list-style: disc !important;

          a {
            font-family: var(--font-family-roboto);
            font-size: var(--font-size-content);
            color: #404040;
            transition: 0.4s;

            &:hover {
              color: var(--color-primary);
              font-weight: 700;
            }
          }
        }
      }

      .container-images {
        padding-left: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;

        .button-image {
          width: 100%;
          aspect-ratio: 1;
          border-radius: 23px 100px 23px 23px;
          overflow: hidden;
          background: #fff;
          position: relative;

          span {
            position: absolute;
            left: 0%;
            top: 10%;
            width: fit-content;
            font-family: var(--font-family-antonio);
            font-size: var(--font-size-content-extra-large);
            color: #fff;
            padding: 5px 0;
            text-align: center;
            display: block;
            width: 100%;
            background: linear-gradient(90deg,
                rgb(115, 196, 182) 0%,
                rgba(115, 196, 182, 0.4) 63%,
                rgba(115, 196, 182, 0) 99%);
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.5;
          }

          a {
            position: absolute;
            left: 50%;
            bottom: 10%;
            transform: translateX(-50%);
            width: 65%;
            padding: 10px 30px;
          }
        }
      }
    }

    .mega-menu {
      width: 100%;
      padding: 3rem 2rem;
      border-top: 1px solid;

      .container-list {
        border-right: 1px solid var(--color-primary);

        ul {
          display: flex;
          flex-direction: column;
          gap: 15px;
          padding-left: 0;
        }

        li {
          font-family: var(--font-family-roboto);
          font-size: var(--font-size-content);
          transition: 0.4s;
          display: flex;
          align-items: center;
          gap: 5px;
          cursor: pointer;
          color: #404040;

          i {
            font-size: 12px;
          }

          &:hover {
            color: var(--color-primary);
            font-weight: 500;
          }
        }

        li.active {
          color: var(--color-primary);
          font-weight: 700;
        }
      }

      .container-children {
        padding-left: 2rem;

        ul {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }

        li {
          list-style: inside !important;

          a {
            font-family: var(--font-family-roboto);
            font-size: var(--font-size-content);
            color: #404040;
            transition: 0.4s;
            max-width: 300px;

            &:hover {
              color: var(--color-primary);
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1000px) {
  .container-children li {
    display: flex;
    position: relative;
    padding-left: 15px;
  }

  .container-children li:before {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    background: #404040;
    border-radius: 50%;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
  }
}