/*================================================
Testimonials Area CSS
=================================================*/
.testimonials-item {
  .testimonials-item-box {
      text-align: center;
      background-color: #fee9ca;
      padding: 30px;
      border-radius: 50%;

      .icon {
          margin-bottom: 20px;

          i {
              display: inline-block;
              height: 65px;
              width: 65px;
              line-height: 65px;
              background-color: $white-color;
              color: $main-color;
              font-size: 30px;
              border-radius: 50px;
              transition: $transition;
          }
      }
      p {
          margin-bottom: 0;
          font-size: 15px;
          font-style: italic;
      }
      .info-box {
          margin-top: 20px;

          h3 {
              margin-bottom: 0;
              font-size: 25px;
          }
          span {
              display: block;
              color: $main-color;
              font-size: 15px;
              margin-top: 5px;
              font-weight: 600;
          }
      }
      &:hover {
          .icon {
              i {
                  background-color: $main-color;
                  color: $white-color;
              }
          }
      }
  }
  .testimonials-image {
      margin-top: 20px;

      img {
          width: auto;
          margin: auto;
      }
  }
}
.testimonials-slides {
  &.owl-theme {
      .owl-nav {
          margin-top: 0;
          transition: $transition;
          opacity: 0;
          visibility: hidden;
          line-height: .01;

          [class*=owl-] {
              margin: 0;
              position: absolute;
              left: -60px;
              top: 40%;
              transform: translateY(-40%);
              padding: 0;
              background: $main-color;
              color: $white-color;
              border-radius: 50px;
              transition: $transition;
              width: 50px;
              height: 50px;
              line-height: 65px;
              text-align: center;
              font-size: 45px;

              &.owl-next {
                  left: auto;
                  right: -60px;
              }
              &:hover {
                  color: $white-color;
                  background-color: $optional-color;
              }
          }
      }
      &:hover {
          .owl-nav {
              opacity: 1;
              visibility: visible;
          }
      }
  }
}
.testimonials-area {
  &.bg-color {
      background-color: #fef3e6;
  }
}
.feedback-slides {
  .feedback-item {
      .feedback-image {
          position: relative;
          padding: 5px;
          
          img {
              border-radius: 50%;
          }
          &::before {
              position: absolute;
              content: "";
              height: 100%;
              width: 100%;
              background-color: $main-color;
              left: 0;
              right: 0;
              top: 0;
              z-index: -1;
              border-radius: 50%;
              transition: $transition;
              animation: border-transform-default 30s linear infinite alternate forwards;
          }
      }
      .feedback-content {
          p {
              font-size: 24px;
              margin-bottom: 0;
              font-style: italic;
          }
          .feedback-info {
              margin-top: 25px;

              h4 {
                  font-size: 25px;
                  margin-bottom: 12px;
              }
              span {
                  font-size: $font-size;
                  color: $main-color;
                  font-weight: 600;
              }
          }
      }
  }
  &.owl-theme {
      .owl-nav {
          margin-top: 0;
          transition: $transition;
          line-height: .01;
          position: absolute;
          right: 0;
          bottom: 0;

          [class*=owl-] {
              margin: 0;
              padding: 0;
              background: $main-color;
              color: $white-color;
              border-radius: 50px;
              transition: $transition;
              width: 50px;
              height: 50px;
              line-height: 65px;
              text-align: center;
              font-size: 45px;

              &.owl-next {
                  position: relative;
                  left: 15px;
              }
              &:hover {
                  color: $white-color;
                  background-color: $optional-color;
              }
          }
      }
  }
}
/*================================================
Gallery Area CSS
=================================================*/
.single-gallery-box {
    text-align: center;
    position: relative;
    margin-bottom: 30px;

    &::before {
        width: 100%;
        content: '';
        position: absolute;
        height: 100%;
        background-color: #000000;
        left: 0;
        top: 0;
        transition: $transition;
        opacity: 0;
        visibility: hidden;
        border-radius: 15px;
    }
    img {
        border-radius: 15px;
    }
    .gallery-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        font-size: 35px;
        color: $white-color;
        margin-top: 20px;
        opacity: 0;
        visibility: hidden;
    }
    &:hover {
        &::before {
            opacity: .30;
            visibility: visible;
        }
        .gallery-btn {
            opacity: 1;
            visibility: visible;
            margin-top: 0;
        }
    }
}
.view-btn {
    text-align: center;
    margin-top: 15px;

    .default-btn {
        color: $white-color;
    }
}

/*================================================
Support Area CSS
=================================================*/
.support-list-item {
    padding-left: 0;
    margin-bottom: 0;
    text-align: center;

    li {
        display: inline-block;
        list-style-type: none;
        margin-right: 60px;
        margin-bottom: 30px;

        &:last-child {
            margin-right: 0;
        }
        img {
            margin-bottom: 25px;
        }
        span {
            display: block;
            font-size: 25px;
            color: $black-color;
            font-weight: 600;
        }
    }
}

/*================================================
Choose Area CSS
=================================================*/
.single-choose {
    text-align: center;
    margin-bottom: 30px;

    .icon {
        margin-bottom: 20px;

        i {
            display: inline-block;
            height: 60px;
            width: 60px;
            line-height: 60px;
            background-color: $main-color;
            color: $white-color;
            font-size: 35px;
            border-radius: 50px;
            transition: $transition;
        }
    }
    .content {
        h3 {
            font-size: 25px;
            margin-bottom: 12px;
        }
        p {
            margin-bottom: 0;
        }
    }
    &:hover {
        .icon {
            i {
                background-color: $optional-color;
            }
        }
    }
}
.choose-image {
    position: relative;

    .choose-image-shape {
        .shape-1 {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            animation: moveLeftBounce 3s linear infinite;
        }
        .shape-2 {
            position: absolute;
            right: -10%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            animation: moveLeftBounce 3s linear infinite;
            z-index: -1;
        }
        .shape-3 {
            position: absolute;
            bottom: 10%;
            left: 12%;
            z-index: -1;
            animation: moveLeftBounce 3s linear infinite;
        }
    }
}
.single-choose-item {
    span {
        font-size: 20px;
        color: $main-color;
        font-weight: 600;
        font-family: $optional-font-family;
    }
    h3 {
        font-size: 45px;
        margin-top: 12px;
        margin-bottom: 15px;
    }
    .choose-btn {
        margin-top: 30px;
    }
}