/******* 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;
    background-color: transparent;
  }
  .text-with-images .top-text h2.title {
    font-size: 40px;
    letter-spacing: 1.2px;
    width: 310px;
  }
  .text-with-images .top-text .title-part-second {
    display: block;
  }
  .text-with-images {

    background-image: url("https://resources.epiqsolutions.com/hubfs/Epiq-Solutions-2023/CSS-Images-Do-Not-Delete/Career-mobile.png");
    background-size: cover;
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;

  }
  .text-with-images::after {
	content: "";
	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) 98.99%, rgba(0, 193, 78, 0) 146.5%);
	height: 40%;
	position: absolute;
	width: 100%;
	bottom: -27px;
	left: 0;
	z-index: -1;
}
  .hs-content-id-139475237752 .applications-home {
    margin-top: -150px !important;
  }
  .text-with-images .top-text {
    padding-bottom: 50px;
  }
  .text-with-images .image-box{
    margin-top: -1px;
    background: transparent;
    padding-bottom: 129px;
  }

  .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; */
    padding-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;
  }
  .hs-content-id-139475237752 .mobile-head-bg ,.hs-content-id-139475237752 .header-wrapper,.hs-content-id-139475237752 .text-with-images .top-text-outer{
    background: transparent !important;
  }
/*   .hs-content-id-139475237752 .text-with-images {
    background-size: 100% 100%;
  } */
  .hs-content-id-139475237752 .text-with-images .top-text .descrip span {
    max-width: 272px;
  }
  .hs-content-id-139475237752 .header-wrapper.header-black.mid-absolute {
    background: #000 !important;
  }
  .hs-content-id-139475237752 .here-what-section .title-box h2.title {
    max-width: 280px;
  }
  .hs-content-id-139475237752 .here-what-section {
    padding-top: 50px;
  }
  .hs-content-id-139475237752 .join-epic-box .join-inner-text {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 525px) {
.text-with-images::after {
	height: 60%;
}  
}
@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 ********/