#footer {
  --shape-fill: var(--color-white);
  position: relative;
  isolation: isolate;
  padding-top: calc(
    clamp(39.19px, 9.051vw + 10.228px, 184px) +
      clamp(40px, 5.229vw + 9.882px, 104px)
  );
  padding-bottom: clamp(40px, 5.229vw + 9.882px, 104px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);

  /* shape */
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: -1px;
    display: block;
    width: 100%;
    height: clamp(39.19px, 9.051vw + 10.228px, 184px);
    background-color: var(--shape-fill);
    mask: bottom / clamp(433px, 100vw + 113px, 2033px)
      clamp(109px, 25.063vw + 28.8px, 510px) no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2033' height='510' fill='black' viewBox='0 0 2033 510'%3E%3Cpath fill='currentColor' d='M2033 255c0 140.833-455.1 255-1016.5 255C455.103 510 0 395.833 0 255S455.103 0 1016.5 0C1577.9 0 2033 114.167 2033 255'/%3E%3C/svg%3E");
    shape-rendering: crispEdges;
  }

  .footer_mid {
    display: flex;
    gap: var(--gap-l);
    flex-direction: column;
    align-items: center;
    text-align: center;

    .content_menus,
    .logo_socials {
      display: flex;
      gap: var(--gap-s);
      flex-direction: column;
      align-items: center;

      .button {
        white-space: nowrap;
      }

      .divider {
        width: 100%;
        height: 2px;
        border-radius: var(--border-radius-max);
        background-color: hsl(from var(--color-white) h s l / 0.2);
      }
    }

    .content_menus {
      .footer_menu {
        max-width: 240px;
        margin-inline: auto;

        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          border-radius: var(--border-radius-max);
          background-color: hsl(from var(--color-white) h s l / 0.2);
          margin-bottom: var(--gap-m);
        }

        .menu-item {
          list-style: none;
          margin-bottom: calc(var(--gap-s) / 2);

          a {
            font-weight: 400;
            text-decoration: none;
          }

          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .breheny_group {
    display: flex;
    gap: var(--gap-m);
    flex-direction: row;
    background-color: hsl(from var(--color-white) h s l / 0.15);
    padding: var(--gap-s) var(--gap-s) var(--gap-s) var(--gap-m);
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    border-radius: var(--gap-s);

    @media (max-width: 940px) {
      flex-direction: column;
    }

    .logos_container {
      display: flex;
      flex-direction: row;
      gap: calc(var(--gap-s) / 2);

      .site_logo_container {
        display: flex;
        background: var(--color-white);
        flex-direction: row;
        padding: calc(var(--gap-s) / 2);
        justify-content: center;
        align-items: center;
        border-radius: var(--border-radius-m);
        transition: opacity 0.4s ease;

        &:hover {
          opacity: 0.7;
        }

        .site_logo {
          width: 158px;
          height: 69px;
          background: center / contain no-repeat;
        }
      }
    }
  }

  @media (max-width: 780px) {
    .breheny_group {
      text-align: center;

      div.logos_container {
        flex-direction: column;
      }
    }
  }

  /* responsive */
  @media (width >= 768px) {
    .footer_mid {
      text-align: initial;

      .content_menus {
        flex: 1;
        flex-direction: row;
        gap: calc(var(--gap-l) * 2);

        > * {
          flex: 0 1 240px;
        }

        .footer_menu {
          position: relative;
          isolation: isolate;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: calc(0px - var(--gap-l));
            width: 2px;
            height: 100%;
            margin-bottom: 0;
          }
        }
      }
    }
  }

  @media (width >= 1200px) {
    .footer_mid {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;

      .content_menus {
        align-items: flex-start;
      }
    }
  }
}

.end_of_page {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap-xs) var(--gap-m);
  justify-content: center;
  text-align: center;

  .marketing_by {
    display: flex;
    align-items: center;
    gap: var(--gap-xxs);

    a {
      height: 20px;
      transition: opacity 0.4s ease;

      &:hover {
        opacity: 0.7;
      }
    }
  }

  @media (width >= 992px) {
    flex-direction: row;
    justify-content: space-between;
  }
}