#sec-4 {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 3rem 1rem;
  position: relative;
  isolation: isolate;

  background-image: url(../../images/sec-4-imgs/bg.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

#sec-4 main {
  display: flex;
  flex-direction: column;
}

#sec-4 .header-cont {
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;

  margin-bottom: 1.6rem;
}

#sec-4 h1 {
  font-size: clamp(3.2rem , 5vw, 4.6rem);
  color: white;
}

#sec-4 .prod-cont {
  display: flex;
}

#sec-4 .img-cont {
  display: flex;
}

#sec-4 .img1,
#sec-4 .img3 {
  align-items: center;
}

#sec-4 .img1 {
  margin-right: -1rem;
}

#sec-4 .img3 {
  margin-left: -1rem;
}

#sec-4 .img2 {
  position: relative;

  display: flex;
  justify-content: center;
}


#sec-4 .img2::before,
#sec-4 .img2::after {
  content: '';
  position: absolute;
  bottom: -2rem;
  border-radius: 50%;

  width: 4rem;
  height: 4rem;

  background-repeat: no-repeat;
  background-position: center center;
}

#sec-4 .img2::before {
  background-image: url(../../images/sec-4-imgs/arrow-left.png);
  margin-right: 5rem;
}

#sec-4 .img2::after {
  background-image: url(../../images/sec-4-imgs/right-arrow.png);
  margin-left: 5rem;
}

/* #sec-4 .img2::before:hover,
#sec-4 .img2::after:hover {
  cursor: pointer;
} */

#sec-4 .img2 img {
  box-shadow: 4px 4px 5px;
}

@media screen and (min-width: 990px ) {
  #sec-4 {
    padding: 7rem 3.5rem 6.2rem;
  }

  #sec-4 .img2::before,
  #sec-4 .img2::after {
    bottom: -4rem;
    width: 8rem;
    height: 8rem;
  }

  #sec-4 .img2::before {
    margin-right: 8rem;
  }

  #sec-4 .img2::after {
    margin-left: 8rem;
  }
}