/home/infinitibizsol/www.mediaeclips.com/wp-content/themes/ziptech/scss/sections/ Current File: /home/infinitibizsol/www.mediaeclips.com/wp-content/themes/ziptech/scss/sections/_about.scss
/*========================================*/
/*---------- [_Section_About] ------------*/
/*========================================*/
.about-image-box-style1 {
  position: relative;
  .about-image1 {
    position: absolute;
    left: 0;
    width: 250px;
    bottom: 60px;
    border: 10px solid #fff;
    z-index: 1;
  }
  .about-image2 {
    width: 465px;
    margin-left: 60px;
    clip-path: polygon(0% 0%, 100% 0, 100% 87%, 87% 100%, 0% 100%);
    @media screen and (max-width: 1024px) {
      width: 520px;
    }
    @media screen and (max-width: 767px) {
      margin-left: 0;
    }
    @media screen and (max-width: 768px) {
      width: 530px;
    }
    @media screen and (max-width: 425px) {
      width: 400px;
    }
    @media screen and (max-width: 375px) {
    }
    @media screen and (max-width: 320px) {
    }
  }
  .about-badge1 {
    position: absolute;
    width: 130px;
    right: 45px;
    background: #fff;
    top: 60px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #b8a1942b;
    animation: pulse 2s infinite;
    @media screen and (max-width: 1024px) {
      right: -30px;
    }
    @media screen and (max-width: 768px) {
      right: 40px;
    }
    @media screen and (max-width: 425px) {
      display: none;
    }
  }
  &.dot-circle {
    &:after {
      left: -75px;
      top: -75px;
      width: 250px;
      height: 250px;
      border-radius: 50%;
    }
  }
}
.about-image-box-style2 {
  position: relative;
  @media screen and (max-width: 425px) {
    margin-bottom: 40px;
  }
  .experience {
    background: url(../images/bg/2.jpg);
    text-align: center;
    position: absolute;
    background-size: cover;
    width: 230px;
    height: 230px;
    right: 140px;
    bottom: 50px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    border-radius: 50%;
    @media only screen and (max-width: 991px) {
      right: 300px;
      bottom: 30px;
    }
    @media only screen and (max-width: 425px) {
      display: none;
    }
    &:after {
      content: "";
      background: rgba(var(--webex-primary-color-rgb), 0.92);
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 0;
      border-radius: 50%;
    }
    .experience-year {
      z-index: 1;
      position: relative;
      color: #fff;
      font-size: 84px;
      line-height: 75px;
      margin-bottom: 10px;
      -webkit-text-fill-color: #bc917600;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #ffffff;
      font-family: var(--body-font);
    }
    .experience-text {
      z-index: 1;
      position: relative;
      color: #fff;
      margin-bottom: 0;
    }
  }
  .about-image1 {
    position: absolute;
    right: -110px;
    width: 415px;
    bottom: 45px;
    border: 15px solid #ffffff;
    z-index: 3;
    @media only screen and (max-width: 991px) {
      right: 0;
    }
  }
  .about-image2 {
    width: 490px;
    margin-left: 70px;
    position: relative;
    overflow: hidden;
    &:before {
      position: absolute;
      top: 0;
      left: -80%;
      z-index: 2;
      display: block;
      content: "";
      width: 50%;
      height: 100%;
      background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
      background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.2)));
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
      -webkit-transform: skewX(-25deg);
      -ms-transform: skewX(-25deg);
      transform: skewX(-25deg);
      z-index: 1;
    }
    @media only screen and (max-width: 1024px) {
      margin-left: 0;
    }
    @media screen and (max-width: 425px) {
      width: 100%;
    }
    &:hover {
      &:before {
        -webkit-animation: shine 1.3s;
        animation: shine 1.3s;
      }
    }
  }
  .video-popup-left {
    top: 30px;
    right: 60px;
    left: auto;
    z-index: 1;
    a {
      border-radius: 0;
      background: var(--webex-primary-color);
      &:before {
        border-radius: 0;
      }
      &:after {
        border-radius: 0;
        border: 2px solid var(--webex-primary-color);
      }
    }
  }
  &.about-side-line {
    &:after {
      content: "";
      position: absolute;
      border: 80px solid var(--webex-primary-color2);
      width: 400px;
      height: 400px;
      right: -230px;
      top: 20px;
      border-radius: 50%;
      z-index: -1;
      opacity: 0.08;
      @media only screen and (max-width: 991px) {
        right: 0;
      }
      @media screen and (max-width: 425px) {
        display: none;
      }
    }
  }
}
.about-image-box-style3 {
  position: relative;
  height: 100%;
  .about-image1 {
    position: absolute;
    left: 0;
    width: 420px;
    top: 240px;
    z-index: 1;
    @media screen and (max-width: 1024px) {
      left: 10px;
      top: 285px;
    }
  }
  .about-image2 {
    width: 520px;
    clip-path: polygon(0% 5%, 100% 0, 100% 87%, 100% 100%, 10% 100%);
    float: right;
    margin-bottom: 150px;
    @media screen and (max-width: 425px) {
      margin-bottom: 0;
    }
  }
  .years-of-experience {
    position: absolute;
    bottom: 110px;
    right: 60px;
    width: 275px;
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    align-items: center;
    -ms-flex-align: start;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.07);
    border-right: 8px solid var(--webex-primary-color);
    padding-left: 45px;
    padding-right: 40px;
    padding-top: 25px;
    padding-bottom: 22px;
    border-radius: 15px;
    border-bottom-right-radius: 0;
    z-index: 1;
    @media screen and (max-width: 425px) {
      bottom: 30px;
    }
    span {
      font-weight: bold;
      line-height: 1;
      display: block;
      font-size: 64px;
      color: var(--webex-primary-color2);
      margin-right: 20px;
      margin-top: 0px;
      letter-spacing: -0.04em;
    }
  }
  &.dot-circle {
    &:after {
      right: auto;
      left: 0;
      top: 0;
      width: 170px;
      height: 200px;
    }
  }
}
.about-image-box-style4 {
  position: relative;
  height: 100%;
  .about-image1 {
    position: absolute;
    left: 200px;
    width: 385px;
    top: 200px;
    z-index: 1;
    @media screen and (max-width: 1024px) {
      left: 115px;
      top: 285px;
      width: 278px;
    }
    @media screen and (max-width: 768px) {
      right: 100px;
      left: auto;
      bottom: 60px;
      top: auto;
    }
  }
  .about-image2 {
    width: 430px;
    margin-bottom: 150px;
    @media screen and (max-width: 425px) {
      margin-bottom: 0;
    }
  }
  .years-of-experience {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 175px;
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    -ms-flex-align: start;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.07);
    border-radius: 50%;
    padding: 30px;
    border-top-right-radius: 0;
    z-index: 1;
    @media screen and (max-width: 1024px) {
      left: -1px;
      bottom: 200px;
    }
    @media screen and (max-width: 768px) {
      bottom: 80px;
      left: 15px;
    }
    @media screen and (max-width: 425px) {
      bottom: 30px;
    }
    span {
      font-weight: bold;
      line-height: 1;
      display: block;
      font-size: 64px;
      color: var(--webex-primary-color2);
      margin-right: 20px;
      margin-top: 0px;
      letter-spacing: -0.04em;
    }
  }
  &.dot-circle {
    &:after {
      right: 35px;
      left: auto;
      top: 35px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
  }
}
.about-image-box-style5 {
  position: relative;
  @media screen and (max-width: 425px) {
    margin-bottom: 40px;
  }
  .about-image1 {
    position: absolute;
    right: 0;
    width: 275px;
    bottom: 45px;
    z-index: 3;
    @media only screen and (max-width: 991px) {
      right: 50px;
    }
  }
  .about-image2 {
    width: 450px;
    margin-right: 70px;
    position: relative;
    overflow: hidden;
    &:before {
      position: absolute;
      top: 0;
      left: -80%;
      z-index: 2;
      display: block;
      content: "";
      width: 50%;
      height: 100%;
      background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
      background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.2)));
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
      -webkit-transform: skewX(-25deg);
      -ms-transform: skewX(-25deg);
      transform: skewX(-25deg);
      z-index: 1;
    }
    @media only screen and (max-width: 1024px) {
      margin-left: 0;
      margin-bottom: 50px;
    }
    @media screen and (max-width: 425px) {
      width: 100%;
    }
    &:hover {
      &:before {
        -webkit-animation: shine 1.3s;
        animation: shine 1.3s;
      }
    }
  }
  .video-popup-left {
    top: 30px;
    right: 60px;
    left: auto;
    z-index: 1;
    a {
      border-radius: 0;
      background: var(--webex-primary-color);
      &:before {
        border-radius: 0;
      }
      &:after {
        border-radius: 0;
        border: 2px solid var(--webex-primary-color);
      }
    }
  }
  &.about-side-line {
    &:after {
      content: "";
      position: absolute;
      border: 80px solid var(--webex-primary-color2);
      width: 400px;
      height: 400px;
      right: -35px;
      top: 35px;
      z-index: -1;
      opacity: 0.08;
      @media only screen and (max-width: 991px) {
        right: 0;
      }
      @media screen and (max-width: 425px) {
        display: none;
      }
    }
  }
}
.about-style4-info-box,
.about-style3-info-box {
  position: relative;
  display: block;
  margin-bottom: 30px;
  .title {
    text-transform: capitalize;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    span {
      margin-right: 15px;
      &:before {
        color: var(--webex-primary-color);
      }
    }
  }
  .text {
    margin: 0;
  }
}
.experience {
  background: url(../images/bg/2.jpg);
  padding: 40px;
  text-align: center;
  position: relative;
  background-size: cover;
  &:after {
    content: "";
    background: rgba(var(--webex-primary-color-rgb), 0.92);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 0;
  }
  .experience-year {
    z-index: 1;
    position: relative;
    color: #fff;
    font-size: 84px;
    line-height: 75px;
    -webkit-text-fill-color: #bc917600;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
    font-family: var(--body-font);
  }
  .experience-text {
    z-index: 1;
    position: relative;
    color: #fff;
    margin-bottom: 5px;
  }
}
//About Section Styles
.about-us-section-style3 {
  .about-style3-author-area {
    display: flex;
    align-items: center;
    @media screen and (max-width: 425px) {
      align-items: start;
      flex-direction: column;
    }
    .author-content-area {
      .author-content {
        .author-image {
          margin-right: 15px;
          border: 2px solid var(--webex-primary-color);
          max-width: 65px;
          border-radius: 50%;
          img {
            border-radius: 50%;
          }
        }
      }
    }
  }
}
.signature {
  width: 110px;
}