/*#############################################################################
# FOOTER
#############################################################################*/


footer#main-footer {
  background: #f7f8fb;
  padding: 60px 0;

  font-size: rem-calc(14px);
  color: $color-secondary;

  .sempli-logo {
    width: 130px;
    margin: 0 0 20px 0;

    a {
      display: block;
      background: url("/assets/swl/interface/sempli-logo.svg") no-repeat 50% 50%;
      background-size: 116px 30px;
      height: 0;
      width: 130px;
      padding-top: 40px;
      margin: 0;
      overflow: hidden;
    }
  }

  p.sempli-description {
    padding-right: 40px;
  }

  p.with-love {
    img.icon {
      display: inline-block;
      width: 16px;
      margin: 0 0 -3px 3px;
    }
  }

  .site-sections-block {
    margin: 0 0 30px;

    h5 {
      color: $color-secondary-dark;
      margin: 0 0 10px;
    }

    ul.site-sections {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    a.link-item {
      color: $color-secondary;

      &:hover {
        color: $color-text;
      }

      &.active {
        color: $color-text;
      }
    }
  }
}

/*=============== FOOTER SEMPLI 2.0 ===============*/
.active {
  color: #4335f9;
}

.footer-main-container {
  width: 100%;
  margin-top: 100px;
  background-color: #F7F8FB;

  .footer-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 20px 40px;
    font-size: 14px;

    .footer-icons {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #AFB3C0;

      .footer-logo-sempli {
        width: 100px;
      }

      .footer-social-networks {
        display: flex;
        flex-direction: row;
        gap: 15px;

        @media screen and (max-width: 600px) {
          gap: 5px;
        }

        .footer-social-networks-icon {
          width: 24px;
          transition: opacity .3s;
          opacity: .5;

          &:hover {
            opacity: 1;
          }
        }
      }
    }

    .footer-texts {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      gap: 50px;
      padding-top: 20px;

      @media screen and (max-width: 600px) {
        display: flex;
        flex-direction: column;
      }

      .footer-text {
        height: 100%;
        display: flex;
        flex-direction: column;
        line-height: 1.5;
        gap: 15px;

        &.footer-width-40 {
          width: 40%;

          @media screen and (max-width: 600px) {
            width: 100%;
          }
        }

        &.footer-width-30 {
          width: 30%;

          @media screen and (max-width: 600px) {
            width: 100%;
          }
        }

        .footter-sempli-description {
          padding-right: 30px;
        }

        .icon-with-love {
          color: #4335f9;
        }

        .footer-logos {
          width: 100%;
          display: flex;
          align-items: flex-end;
          flex-wrap: wrap;
          gap: 20px;

          @media screen and (max-width: 600px) {
            gap: 10px;
          }

          .footer-logo-link {
            height: 100%;

            .footter-logo-link-img {
              display: flex;
              max-width: 100px;
              max-height: 45px;
              transition: opacity .3s;

              &:hover {
                opacity: .7;
              }
            }
          }
        }

        .footer-link {
          width: 100%;
          display: flex;
          flex-direction: column;

          .footer-link-item {
            padding: 4px 0;
            display: inline-block;
            &:hover, &:focus {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .footer-custom-text {
      height: 100%;
      display: flex;
      flex-direction: column;
      line-height: 1.5;

      .footer-title-bold {
        font-weight: 600;
      }

      .footer-link-items {
        display: flex;
        flex-direction: column;
        padding-left: 10px;

        @media screen and (max-width: 600px) {
          padding-left: 0px;
        }

        .footer-link-item {
          padding: 4px 0;
          display: inline-block;
          &:hover, &:focus {
            text-decoration: underline;
          }
        }
      }
    }

    .footer-space-top {
      margin-top: 80px;
    }

    .footer-paragraph {
      text-align: left;

      @media screen and (max-width: 600px) {
        text-align: center;
      }
    }
  }
}

/*=============== END FOOTER SEMPLI 2.0 ===============*/