/******* text with images section start ********/







@media only screen and (min-width: 1281px) {
.text-with-images {
    background-position: 100% 47%;
/*     padding-bottom: 110px !important; */
}
}
.text-with-images {
    position: relative;
    padding-bottom: 20px;
/*     background-image: url("https://resources.epiqsolutions.com/hubfs/Group%202155%201.png"); */
/*   background-image: url("https://resources.epiqsolutions.com/hubfs/back_image_2.png");
    
    background-size: cover; */
}


.text-with-images .top-text-outer {
    position: relative;
    padding-top: 280px;
    background-color: #080808;
}

.text-with-images .top-text h2.title {
    color: #FEFEFE;
    font-family: DM Sans;
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 20px;
}
.text-with-images .top-text .title-part-second {
    color: #00C14E;
}
.text-with-images .top-text {
    max-width: 650px;
/*     padding-bottom: 220px; */
    padding-bottom: 80px;
}
.text-with-images .top-text .descrip span {
    display: block;
    color:#FEFEFE;
    font-family: DM Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0.6px;
    max-width: 563px;
}

.text-with-images .image-box {
  position: relative;
  background: linear-gradient(181.37deg, #090909 42.85%, rgba(7, 28, 16, 0.74) 58.89%, rgba(6, 48, 23, 0.56) 78.63%, rgba(3, 103, 43, 0) 97.99%, rgba(0, 193, 78, 0) 146.5%);
  padding-bottom: 129px;
}

.text-with-images .image-box .image-box-background {
/*   position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://resources.epiqsolutions.com/hubfs/Group%202155%201.png');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1; */
}

.text-with-images .image-box h2.title {
/*     color: #fefefe;
    display: inline-block;
    font-family: DM Mono;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1.6px;
    line-height: 100%;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 0; */
  display: none
}
.text-with-images .image-box h2.title::before {
/*     position: absolute;
    content: '';
    width: 1000px;
    height: 1px;
    z-index: 9;
    background: #F7F7F7;
    left: -925px;
    top: -15px; */
  display: none;
}
.text-with-images .image-box-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding-top: 70px;
/*     padding-bottom: 700px; */
    position: relative;
}
.text-with-images .image-box-inner::before {
/*     position: absolute;
    content: '';
    width: 100%;
    height: 200px;
    background: #090909;
    top: -21px;
    right: 0;
    z-index: -1; */
}
.text-with-images .image-single {
    min-height: 696px;
    padding: 20px;
    border: 1px solid #FEFEFE;
    border-radius: 5px;
    background-color: #141514;
}
.text-with-images .image-single.third-image .image-box-first {
    max-width: 255px;
}
.text-with-images .image-single img {
    width: 100%;
}
.image-single.first-image .image-single-inner {
  position: relative;
    display: flex;
    height: 100%;
  
}
.image-single.first-image .image-single-inner .image-box-first {
    line-height: 0;

}
.image-single.third-image .image-single-inner {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-content: space-between;
    position: relative;
    overflow: hidden;
}
.image-single.third-image .image-single-inner .image-box-second {
    line-height: 0;
}
.first-img{
    position: absolute;
   top: 430px;
   animation: progress 2s linear;
    animation-play-state: paused;
  animation-delay: calc(var(--scroll ) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.second-img{
    position: absolute;
   top: 90px;
   animation: progress2 2s linear;
    animation-play-state: paused;
  animation-delay: calc(var(--scroll ) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.third-img{
    position: absolute;
   top: 0;
   animation: progress3 2s linear;
    animation-play-state: paused;
  animation-delay: calc(var(--scroll ) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.fourth-img{
    position: absolute;
    bottom: 0px;
    left: 0;
     animation: progress4 2s linear;
    animation-play-state: paused;
  animation-delay: calc(var(--scroll ) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
}
@media only screen and (max-width: 1440px) {
    .text-with-images::after {
        height: 1500px;
    }
  }
  @media only screen and (max-width: 1024px) {
    .text-with-images .top-text-outer {
        padding-top: 180px;
    }
    .text-with-images .top-text {
        padding-bottom: 80px;
    }
    .text-with-images .image-box-inner {
        padding-top: 50px;
        padding-bottom: 55px;
    }
  }
  @media only screen and (max-width: 991px) {
    .text-with-images .image-single {
        min-height: 450px;
    }
  }
@media only screen and (max-width: 768px) {
   .text-with-images .top-text {
    padding-bottom: 80px;
  }
}

@media (min-width: 767px) and (max-width: 991px) {
  .image-single.second-image {
    overflow-y: hidden;
  }

  .image-single.second-image .image-single-inner {
    position: relative;
  }
  .first-img {
    position: absolute;
    top: 294px;
    animation: progress_tablet 2s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll ) * -1s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }
  
  .second-img{
    position: absolute;
    top: 0px;
    animation: progress2_tablet 2s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll ) * -1s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
  
}
  @media only screen and (max-width: 574px) {
    .first-img  {
  position: initial;
      animation: none;
}
       .second-img  {
  position: relative;
         animation: none;
}
         .third-img   {
  position: relative;
           animation: none;
}
        .fourth-img {
  position: relative;
          animation: none;
}
    

    .text-with-images .top-text-outer {
        padding-top: 100px;
    }
    .text-with-images .top-text h2.title {
        font-size: 40px;
        letter-spacing: 1.2px;
    }
    .text-with-images .top-text .title-part-second {
        display: block;
    }
    .text-with-images {
/*         background-image: url(https://resources.epiqsolutions.com/hs-fs/hubfs/top-section-bg-mobile.png?width=360&height=1575&name=top-section-bg-mobile.png); */
/*         background-position: unset; */
      background-image: url("https://resources.epiqsolutions.com/hubfs/career_mobile_background.png");
      background-size: cover;
/*     padding-bottom: 365px; */
    position: relative;
    background-position: bottom;
      background-size: 100% 103%;
    padding-bottom: 330px;
     
    }
    .text-with-images .top-text {
        padding-bottom: 75px;
    }
    .text-with-images .image-box h2.title {
/*         font-size: 12px; */
      display: none;
    }
    .image-single.second-image {
        display: none;
    }
    .text-with-images .image-single {
        min-height: unset;
        padding: 0;
    }
    .text-with-images .image-box-inner {
        background: #141514;
        border-radius: 5px;
        border: 1px solid #FEFEFE;
        padding: 15px 30px 15px 15px;
        margin-top: 43px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 8px;
        align-items: end;
    }
    .image-single.third-image .image-single-inner {
        flex-direction: column-reverse;
        gap: 8px;
        align-items: end;
    }
    .text-with-images .image-single {
        border: none;
    }
    .text-with-images .image-single.third-image .image-box-first {
        max-width: 208px;
    }
    .image-single.first-image .image-single-inner .image-box-first {
        max-width: 230px;
    }
    .text-with-images .image-box h2.title:before {
/*     left: -940px; */
      display: none;
}
  }

@keyframes progress_tablet {

  5%{
     top: 294px;
  }
    10%{
     top:0;
  }

}

@keyframes progress2_tablet {
  5%{
     top: 0px;
  }
    10%{
     top: 200px;
  }

}


@keyframes progress {

  5%{
     top: 430px;
  }
    10%{
     top:0;
  }

}
@keyframes progress2 {
  5%{
     top: 90px;
  }
    10%{
     top: 320px;
  }

}
@keyframes progress3 {
  8%{
     top: 0;
  }
    13%{
     top: 485px;
  }

}
@keyframes progress4 {
  8%{
     left: 0;
  }
    10%{
     left: -380px;
  }

}

/******* text with images section end ********/