asan-service/sass/components/footer.scss

.site--footer {
  padding-top: 20px;
  background: #fff;

  section {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .apps {
    .btns {
      text-align: center;
      button {
        margin: 0 10px;
        border: none;
        background: transparent;
        cursor: pointer;
        height: 80px;

        img {
          height: 100%;
        }
      }
    }
  }

  .r1 {
    a {
      b {
        display: inline-block !important;
        direction: ltr !important;
        color: rgba(#000, 0.5);
        @extend %defaultTransition;
      }

      &:hover {
        b {
          color: $theme;
        }
      }
    }
    i {
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  .r2 {
    ul {
      display: flex;
      justify-content: space-between;

      @media (max-width: 575px) {
        flex-wrap: wrap;

        li {
          flex-basis: 50%;
          margin-left: 0 !important;
          margin-right: 0 !important;
          margin-bottom: 30px !important;

          img {
            width: 90% !important;
            max-width: 90px;
          }
        }
      }

      li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        text-align: center;
        margin: 0 15px;

        img {
          display: block;
          width: 60px;

          @media (max-width: 768px) {
            width: 40px;
          }
        }
        p {
          margin-top: 10px;
          font-family: 'iranYekanB';
          font-size: 14px;
          color: rgba(#000, 0.6);

          @media (max-width: 768px) {
            font-size: 12px;
          }
        }
      }
    }
  }

  .r3 {
    h3 {
      margin-bottom: 20px;

      @media (min-width: 575px) and (max-width: 768px) {
        font-size: 16px;
      }
    }

    ul {
      li {
        margin-bottom: 10px;

        a {
          padding: 10px 0;
          @extend %defaultTransition;
          @media (min-width: 575px) and (max-width: 768px) {
            font-size: 14px;
          }

          &:hover {
            color: $theme;
          }
        }
      }
    }

    .r3-3 {
      ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        li {
          display: block;
          margin-left: 30px;

          img {
            width: 25px;
          }
        }
      }

      .newsletter {
        margin-top: 30px;

        .inputBox {
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          input {
            border: none;
            background: #f5f5f5;
            @include borderRadius(5px);
            padding: 10px;
            flex-grow: 1;
            margin-bottom: 5px;

            @media (min-width: 575px) and (max-width: 768px) {
              width: 50%;
              font-size: 10px;
              padding: 11px 10px;

              &::placeholder {
                font-size: 10px;
              }
            }
          }

          button {
            cursor: pointer;
            border: none;
            margin-right: 4px;
            background: $theme;
            @include borderRadius(5px);
            padding: 9px;
            color: #fff;
            margin-bottom: 5px;

            @media (min-width: 575px) and (max-width: 768px) {
              font-size: 12px;
            }

            &:disabled {
              background: #8a92a9;
            }
          }
        }
      }
    }
  }

  .r4 {
    .bg {
      padding-top: 10px;
      padding-bottom: 10px;
      @include borderRadius(10px);
      background: $theme;
    }

    .logo {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      @media (max-width: 768px) {
        margin-bottom: 20px;
        justify-content: center;
      }

      a {
        display: inline-block;
        overflow: hidden;
        height: 52px;

        svg {
          width: 200px;

          @media (max-width: 270px) {
            max-width: 200px;
            width: 100%;
          }

          * {
            fill: #fff;
          }
        }
      }
    }

    .companies {
      ul {
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        @media (max-width: 768px) {
          justify-content: space-around;
        }

        li {
          display: block;
          margin-right: 10px;

          img {
            width: 52px;

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

            @media (max-width: 400px) {
              width: 40px;
            }

            @media (max-width: 270px) {
              width: 30px;
            }
          }
        }
      }
    }
  }

  .r5 {
    h3 {
      margin-bottom: 20px;
    }

    p {
      @media (max-width: 1200px) {
        text-align: justify;
      }
    }

    .btns {
      margin-top: 10px;

      a {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;

        &:hover {
          span {
            color: $theme;
          }
          i {
            color: $theme;
            margin-right: 8px;
          }
        }

        span {
          color: rgba(#000, 0.6);
          font-family: 'iranYekanB';
          @extend %defaultTransition;
        }

        i {
          color: rgba(#000, 0.6);
          margin-right: 4px;
          @extend %defaultTransition;
        }
      }
    }
  }

  .r6 {
    background: #f5f5f5;
    text-align: center;
    padding: 8px 0;

    a {
      display: inline-block;
      font-size: 14px;
      direction: ltr !important;

      @media (max-width: 500px) {
        font-size: 12px;
      }
    }
  }
}