.parent-container {
  position: relative;
  margin: auto;
  margin-bottom: 7.5rem;
  padding: 4.5rem 1.5rem;
  font-size: 2rem;

  font-size: 1.8rem;

  display: flex;
  flex-direction: column;
  gap: 7rem;

  text-align: center;
}

.parent-container > section{
  max-width: 96rem;
}

.banner img{
  position: absolute;
  top: -4.5rem;
  left: 0;
  width: 100vw;

  z-index: -1;
}

.banner h1{
  padding: 4rem 2rem;

  font-size: 4rem;
  color: #FFEB00;
}

.cards-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.card{
  padding: 6rem 2rem;
  max-width: 34.5rem;
  height: 37rem;
  box-shadow: 2px 4px 25px -4px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  background-color: #E8EEF6;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;

  font-size: 2rem;
}

.step{
  background-color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 2rem;

  display: flex;
  align-items: center;
  gap: 1.5rem;

  color: #194993;
  font-weight: 600;
  text-decoration: none;
}

.csv-json-info{
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.csv-json,
.feature{
  padding: 3rem;
  background-color: #172672;
  border-radius: 20px;

  color: #fff;
  font-size: 2rem;
}

.csv-json {
  padding: 3rem;
  min-height: 30rem;
}

.csv-json img{
  display: inline-block;
  margin-top: -12rem;
  width: 10rem;
  height: 10rem;
}

.features-section{
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.final-section{
  padding: 5rem 0;
  font-size: 2.8rem;
}

@media screen and (min-width: 640px){
  .banner h1{
    margin: -6.5rem auto 0;
    max-width: 60rem;
    padding: 5rem;
  }

  .cards-container{
    flex-flow: row wrap;
  }

  .csv-json-info{
    flex-direction: row;
  }

  .card{
    max-width: 45%;
  }

  .features-section{
    flex-flow:row wrap;
  }

  .feature{
    height: 48rem;
    width: 48%;
  }
}

@media screen and (min-width: 960px){
  .card {
      max-width: 33%;
    }

  .features-section {
    padding: 4rem;
  }

  .feature {
    height: 48rem;
    width: 48%;
  }

  .about-csv-json {
    padding: 0 4.5rem;
  }
}

@media screen and (min-width: 1280px) {
  .parent-container > section {
    max-width: 102.4rem;
    margin: auto;
  }

  .card {
    max-width: 33%;
  }

  .features-section {
    padding: 4rem;
  }
}

@media screen and (min-width: 1366px) {
  .parent-container {
    gap: 22rem;
  }
  
  .parent-container > section {
    max-width: 128rem;
  }

  .card {
    max-width: 33%;
  }

  .features-section {
    padding: 4rem;
  }

  .feature {
    height: 48rem;
    width: 23%;
  }
}