.problem-solution-section {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: auto;
  align-items: stretch;
  max-width: 1440px;
}

@media only screen and (max-width: 1024px) {
  .problem-solution-section {
    flex-direction: column;
    gap: 25px;
    margin: 0 11px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .problem-solution-section {
    margin: 50px 58px 117px;
  }
}

.problem-solution-section .problem-card,
.solution-card {
  flex: 1;
  padding: 36px 30px;
  border-radius: 20px;
}

.problem-solution-section .problem-card {
  background-color: #ffecec;
}

.problem-solution-section .solution-card {
  background-color: #eaffea;
}

.problem-solution-section .problem-header,
.solution-header {
  width: 126px;
  height: 45px;
  flex-grow: 0;
  margin-bottom: 22px;
  border-radius: 100px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.problem-solution-section .problem-header i,
.solution-header i {
  width: 25px;
  height: 25px;
}

.problem-solution-section .problem-card .problem-header i {
  background: #de4b4b;
}

.problem-solution-section .solution-card .solution-header i {
  background: #00b67a;
}

.problem-solution-section .problem-card .problem-header {
  border: solid 2px #de4b4b;
}

.problem-solution-section .solution-card .solution-header {
  border: solid 2px #00b67a;
}

.problem-solution-section .problem-card .problem-header p,
.solution-card .solution-header p {
  font-weight: 600;
  font-size: 20px;
  margin: 0;
}

.problem-solution-section .problem-card .problem-header p {
  color: #de4b4b;
}

.solution-card .solution-header p {
  color: #00b67a;
}

.problem-solution-section .problem-text,
.solution-text {
  font-size: 24px;
  margin: 0;
}

@media only screen and (max-width: 768px) {
  .problem-solution-section .problem-text,
  .solution-text {
    font-size: 19px;
    padding-bottom: 8px;
  }
}