@use '../utils' as *;

  /*
 ::::::::::::::::::::::::::
  WORK AREA CSS
 ::::::::::::::::::::::::::
 */

// === service sytle 1 ===


// === work sytle 1 ===

.work {
  .single-items {
    display: flex;
    align-items: start;
    margin-top: 30px;

    .icon {
      height: 50px;
      width: 50px;
      text-align: center;
      line-height: 50px;
      border-radius: 50%;
      background-color: var(--ztc-bg-bg-2);
      margin-right: 16px;
      transition: all .4s;
    }

    &:hover {
      .icon {
        background-color: var(--ztc-bg-main-bg-1);
        transition: all .4s;
      }
    }
  }

  .heading1 {
    padding-right: 60px;

    @media #{$md} {
      padding-right: 0;
    }
    @media #{$xs} {
      padding-right: 0;
    }
  }

  .work-images {
    position: relative;
    .image {
      margin-top: 30px;
      img {
        width: 100%;
        border-radius: 7px;
      }
    }

    .bg-image {
      position: absolute;
      top: 160px;
      right: 50px;
      z-index: -1;
    }
  }
}

// === work sytle 1 ===

// === work sytle 2 ===

.work2 {
  .work2-box {
    .image {
      border-radius: 7px;
      overflow: hidden;
      img {
        width: 100%;
        transition: all .4s;
      }
    }
    padding: 24px;
    border-radius: 7px;
    margin-top: 30px;
    transition: all .4s;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: var(--ztc-bg-bg-4);
      border: 1px solid var(--ztc-bg-bg-5);
      z-index: -111;
      border-radius: 7px;
      transition: all .4s;
    }

    &:hover {
      .image {
        img {
          transition: all .4s;
          transform: scale(1.1) rotate(2deg);
        }
      }

      &::after {
        border: 1px solid var(--ztc-bg-main-bg-4);
        transition: all .4s;
      }
    }
  }
}

// === work sytle 2 ===

// === work sytle 3 ===

.work3 {
  .big-image {
    text-align: end;
    @media #{$md} {
      text-align: start;
      margin-top: 30px;
    }
    @media #{$xs} {
      text-align: start;
      margin-top: 30px;
    }

    img {
      border-radius: 4px;
    }
  }

  .work3-box {
    border: 1px solid #EEEFF1;
    border-radius: 7px;
    padding: 24px;
    margin-top: 30px;
    transition: all .4s;
    position: relative;

    span.stap {
      display: inline-block;
      padding: 10px 20px;
      border-radius: 7px;
      border: 2px solid var(--ztc-bg-main-bg-3);
      font-size: var(--f-fs-font-fs16);
      line-height: var(--f-fs-font-fs16);
      font-weight: var(--f-fw-semibold);
      color: var(--ztc-bg-main-bg-3);
      transition: all .4s;
    }

    h3 {
      a {
        padding: 16px 0px;
      }
    }


    &:hover {
      &::after {
        opacity: 1;
        transition: all .4s;
      }
      transform: translateY(-10px);

      .heading3 {
        h3 {
          a {
            color: #fff;
            transition: all .4s;
          }
        }
        p {
          color: #fff;
            transition: all .4s;
        }
      }

      span.stap {
        background-color: var(--ztc-bg-color-w);
        color: var(--ztc-bg-main-bg-3);
        transition: all .4s;
        border: 2px solid var(--ztc-bg-color-w);
        text-transform: uppercase;
      }
    }

    &::after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
       width: 100%;
       background-color: var(--ztc-bg-main-bg-3);
      transition: all .4s;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 7px;
      z-index: -1;
      opacity: 0;
    }
  }
}

// === work sytle 3 ===

// === work sytle 4 ===

.work4 {
  .work4-box {
    border: 1px solid #EEEFF1;
    border-radius: 7px;
    padding: 32px 24px;
    margin-top: 30px;
    position: relative;
    transition: all .4s;

    span.after {
      display: inline-block;
      color: var(--ztc-bg-main-bg-2);
      font-size: var(--f-fs-font-fs16);
      line-height: var(--f-fs-font-fs16);
      font-weight: var(--f-fw-semibold);
      position: relative;
      margin-bottom: 16px;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 6px;
      background-color: var(--ztc-bg-main-bg-2);
      transition: all .4s;
      
    }

    &:hover {
      background-color: var(--ztc-bg-color-w);
      border: 1px solid var(--ztc-bg-color-w);
      transition: all .4s;
      box-shadow: rgba(0, 0, 0, 0.068) 0px 20px 30px;
      transform: translateY(-10px);
      
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background-color: var(--ztc-bg-main-bg-2);
        transition: all .4s;
      }
    }
  }

  .work4-box.active {
    background-color: var(--ztc-bg-color-w);
      border: 1px solid var(--ztc-bg-color-w);
      transition: all .4s;
      box-shadow: rgba(0, 0, 0, 0.068) 0px 20px 30px;
      transform: translateY(-10px);
      
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background-color: var(--ztc-bg-main-bg-2);
        transition: all .4s;
      }
  }
}

// === work sytle 4 ===


// === work sytle 4 ===

.about-work {

  
  .work4-box {
    border: 2px solid var(--ztc-bg-bg-5);
    border-radius: 7px;
    padding: 32px 24px;
    margin-top: 30px;
    position: relative;
    transition: all .4s;
    background-color: var(--ztc-bg-bg-4);

    span.after {
      display: inline-block;
      color: var(--ztc-bg-main-bg-4);
      font-size: var(--f-fs-font-fs16);
      line-height: var(--f-fs-font-fs16);
      font-weight: var(--f-fw-semibold);
      position: relative;
      margin-bottom: 16px;
    }


    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 6px;
      background-color: var(--ztc-bg-main-bg-4);
      transition: all .4s;
      
    }

    &:hover {
      transition: all .4s;
      box-shadow: rgba(0, 0, 0, 0.068) 0px 20px 30px;
      transform: translateY(-10px);
      
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background-color: var(--ztc-bg-main-bg-4);
        transition: all .4s;
      }
    }
  }

}

// === about work sytle 4 ===

// === work sytle 5 ===

.work5 {
  .main-shape {
    margin-top: 30px;
    text-align: center;

    @media #{$md} {
      display: none;
    }
    @media #{$xs} {
      display: none;
    }
  }
  .work-box {
    padding: 24px;
    position: relative;
    margin-top: 30px;

    p {
      padding: 8px 0px 16px 0px;
    }

    .learn {
      display: inline-block;
      color: var(--Home-Page-4-Text-colors, #05092B);
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 16px; /* 100% */
      transition: all .4s;

      span {
        display: inline-block;
        transform: rotate(-45deg);
      }
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: #F5F6F9;
      border-radius: 4px;
      z-index: -2;
    }

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, #3B32F6 0%, #49A6FF 100%);
      border-radius: 4px;
      z-index: -1;
      transform: rotateY(80deg);
      opacity: 0;
      transition: all .4s;
    }

    .number {
      -webkit-text-stroke-width: 2;
      -webkit-text-stroke-color: var(--Home-Page-4-Text-colors, #05092B);
      font-family: Figtree;
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px; /* 100% */
      position: absolute;
      bottom: 10px;
      right: 15px;
      transition: all .4s;
    }

    &:hover {
      transition: all .4s;

      &::before {
        transform: rotateY(0deg);
        opacity: 1;
        transition: all .4s;
      }
        h4 {
          a {
            transition: all .4s;
            color: #fff;
          }
        }
        p {
          color: #ffffffcb;
          transition: all .4s;
        }
        .learn {
          transition: all .4s;
          color: #fff;
        }
        .number {
          color: #fff;
          transition: all .4s;
        }
    }
  }
}

// === work sytle 5 ===

// === work sytle 7 ===

.work7 {
  img {
    width: 100%;
  }

  .heading7 {
    padding-left: 30px;
    .work-box {
      display: flex;
      align-items: start;
      margin-top: 30px;
      .icon {
        margin-right: 30px;
        span {
          height: 17px;
          width: 17px;
          text-align: center;
          line-height: 17px;
          font-size: 11px;
          color: #02000E;
          border: 1px solid #02000E;
          border-radius: 50%;
          display: inline-block;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            top: 30px;
            left: 7px;
            height: 50px;
            width: 1px;
            background-color: #02000E;
          }
        }
      }
      &:hover {
        h4 {
          a {
            color: #0061FF;
          }
        }
        span {
          height: 17px;
          width: 17px;
          text-align: center;
          line-height: 17px;
          font-size: 11px;
          color: #0061FF;
          border: 1px solid #0061FF;
          border-radius: 50%;
          display: inline-block;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            top: 30px;
            left: 7px;
            height: 50px;
            width: 1px;
            background-color: #0061FF;
          }
        }

      }
    }
  }
}

// === work sytle 7 ===

// === work sytle 9 ===

.works9 {
  .work-box {
    margin-top: 30px;
    text-align: center;
    .image {
      img {
        width: 100%;
      }
    }
    .heading-area {
      display: inline-block;
      background-color: #F3F5F2;
      padding: 20px 36px;
      border-radius: 4px;
      transition: all .4s;
      margin-top: 30px;
      h4 {
        a {
          display: inline-block;
          color: var(--Text-Color, #181818);
          font-size: 20px;
          font-style: normal;
          font-weight: 600;
          line-height: 20px; /* 100% */
        }
      }
      p {
        color: var(--Paragraph-Color, #646375);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 26px; /* 162.5% */
        padding-top: 16px;
      }
    }

    &:hover {
      .heading-area {
        transform: translateY(-10px);
        transition: all .4s;
        background-color: #A2EA61;
      }
    }
  }
}

// === work sytle 9 ===

// === case sytle 9 ===

.case9 {
  position: relative;

  .case9-slider {
    margin-top: 60px;

    .single-slider {
      position: relative;
      margin: 0px 10px;

      .image {
        border-radius: 8px;
        overflow: hidden;
        img {
          width: 100%;
          transition: all .4s;
        }
      }
      .heading-area {
        position: absolute;
        bottom: 30px;
        margin: 0px 30px;
        background-color: #fff;
        border-radius: 8px;
        padding: 28px;
        p {
          color: var(--Paragraph-Color, #646375);
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 16px; /* 100% */
          text-transform: uppercase;
        }
        h5 {
          a {
            display: inline-block;
            color: var(--Text-Color, #181818e0);
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px; /* 100% */
            padding-top: 16px;
            transition: all .4s;
          }
        }
        .arrow {
          display: inline-block;
          height: 48px;
          width: 48px;
          text-align: center;
          line-height: 48px;
          background-color: #A2EA61;
          border-radius: 50%;
          color: #181818;
          font-size: 20px;
          transform: rotate(-45deg);
          position: absolute;
          top: -24px;
          right: -24px;
        }
      }

      &:hover {
        transition: all .4s;
        .image {
          img {
            transition: all .4s;
            transform: scale(1.1) rotate(2deg);
          }
        }
        .heading-area {
          h5 {
            a {
              color: #A2EA61;
              transition: all .4s;
            }
          }
        }
      }
    }
  }

  .arrows-button {
    text-align: end;

    button {
      border: none;
      color: #181818;
      height: 56px;
      width: 56px;
      line-height: 56px;
      text-align: center;
      border-radius: 50%;
      font-size: 22px;
      background-color: #fff;
      transition: all .4s;
      margin-right: 10px;

      &:hover {
        background-color: #A2EA61;
        transition: all .4s;
      }
    }
  }
}

// === case sytle 9 ===

// === case sytle 10 ===

.case10 {
  .case-box {
    margin-top: 30px;
    position: relative;

    .image {
      border-radius: 8px;
      overflow: hidden;
      img {
        width: 100%;
        transition: all .4s;
      }
    }
    .hover-area {
      position: absolute;
      margin: 0px 24px;
      bottom: 24px;
      padding: 24px;
      overflow: hidden;
      h4 {
        a {
          display: inline-block;
          color: #FFF;
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          line-height: 20px; /* 100% */
          transform: translateY(100px);
          transition: all .4s;
          position: relative;
          z-index: 2;
        }
      }
      p {
        color: rgba(255, 255, 255, 0.80);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
        padding: 16px 0px;
        transform: translateY(140px);
        transition: all .4s;
        position: relative;
        z-index: 2;
      }

      a.learn {
        display: inline-block;
        color: #FFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px; /* 100% */
        transform: translateY(100px);
        transition: all .4s;
        position: relative;
        z-index: 2;

        span {
          display: inline-block;
          transform: rotate(-45deg);
        }
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 10px;
        width: 100%;
        border-radius: 7px;
        background: #24908D;
        transition: all .4s;
        z-index: 0;
      }
    }

    &:hover {
      transition: all .4s;

      .image {
        img {
          transition: all .4s;
          transform: scale(1.1) rotate(2deg);
        }
      }
      .hover-area {
        h4 {
          a {
            display: inline-block;
            color: #FFF;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 20px; /* 100% */
            transform: translateY(0);
          transition: all .4s;
          }
        }
        p {
          color: rgba(255, 255, 255, 0.80);
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 24px; /* 150% */
          padding: 16px 0px;
          transform: translateY(0);
          transition: all .4s;
        }
  
        a.learn {
          display: inline-block;
          color: #FFF;
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          line-height: 20px; /* 100% */
          transform: translateY(0);
          transition: all .4s;
        }

        &::after {
          height: 180px;
          transition: all .4s;
          border-radius: 8px;
        }
      }
    }
  }
}

// === case sytle 10 ===

   /*
 ::::::::::::::::::::::::::
  WORK AREA CSS
 ::::::::::::::::::::::::::
 */