/* section#ros__footer__s1 */
section#ros__footer__s1 {
  width: 100%;
  padding: 6rem 0;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;

  & * {
    color: #fff;
    font-family: "Inria Sans", sans-serif;
  }

  /*  */
  & .logo__ {
    width: 15rem;
  }

  & .logo__:has(p) {
    width: unset !important;

    & p {
      font-size: 35px;
    }
  }

  /* */
  & ul.social__ {
    display: flex;
    align-items: center;
    gap: 5px;

    & li {
      border: 1px solid #ffffff3d;
      padding: 9px;
      border-radius: 100%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s;

      & a {
        display: contents;
      }

      &:hover {
        border-color: #02ffb29c !important;
        border-radius: 6px !important;
        border-style: dashed;
      }
    }
  }

  /*  */
  & .menu__ {
    border-top: 1px solid #ffffff3d;
    border-bottom: 1px solid #ffffff3d;
    padding: 10px 3rem;

    & ul {
      display: flex;
      gap: 13px;
      flex-wrap: wrap;
      justify-content: center;

      li {
        display: flex;
        align-items: flex-end;

        & a {
          color: #ffffffbd !important;
          transition: 0.5s;

          &:hover {
            color: #60c5bf !important;
            text-shadow: 3px -3px 11px #ffffff;
          }
        }

        &::before {
          content: "";
          width: 5px;
          height: 5px;
          display: block;
          background: #ffffff78;
          border-radius: 100%;
          margin-right: 4px;
        }

        &:hover::before {
          background: #28f600;
          transition: 0.5s;
        }
      }
    }
  }

  /*  */
  & .copyright__ {
    & p {
      font-size: 14px;
      font-family: lora;
    }
  }

  /*  */
  &.style__2 {
    background: #ffffff !important;
    padding: 4rem 0 !important;
    box-shadow: 0px -9px 20px #0000001a;

    & * {
      color: #000;
    }

    & ul.social__ {
      & li {
        border: 1px solid #00000070 !important;

        &:hover {
          border-color: #ff13029c !important;
        }
      }
    }

    & .menu__ {
      border-top: 1px dashed #3131314f;
      border-bottom: 1px dashed #3131314f;

      & ul {
        & li {
          &::before {
            background: #00000078 !important;
          }

          &:hover::before {
            background: #f60000 !important;
            transition: 0.5s;
          }

          & a {
            color: #000 !important;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }
}