/* Learn Section */

  .learnSection {
    display: flex;
    flex-direction: column;
    color:white;
    background-color: #167ab4;
    margin-top: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    justify-content: space-around;
    align-items: start;
  }

  .learnSectionContent{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }

  .learnSection h2{
    padding-bottom: 10px;
  }

  .learnSectionContent p{
    color: white;
    font-size: 1.25rem;
  } 

  .learnSectionContent .container{
    padding-left: 30px;
    padding-right: 30px;
  }

  .learnSectionContent img{
    height: 300px;
    margin-bottom: 20px;
  }

/* Plan section */

.planSection {
  color:white;
}

.planSection {
  display: flex;
  flex-direction: column;
  background-color: #735b8f;
  padding-top: 30px;
  padding-bottom: 30px;
  justify-content: space-between;
  align-items: center;
}

.planSectionContent{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.planSectionContent p{
  color: white;
  font-size: 1.25rem;
} 

.planSectionContent .container{
  padding-left: 30px;
  padding-right: 30px;
}

.planSectionContent img{
  height: 400px;
  width: 500px;
}
  
@media only screen and (min-width: 498){


}


@media only screen and (min-width: 640px){

  .learnSection{
    flex-direction: column;
    align-items: center;
  }

  .learnSection h2{
    font-size: 1.75rem;
  }

}

@media only screen and (min-width: 768px) {



}

@media only screen and (min-width: 1025px) {

  /* Learn Section */


  .learnSectionContent{
      flex-direction: row;
      justify-content: space-around;
      justify-content: center;
      align-items: center;
  }

  .learnSectionContent .container{
    padding-right: 0px;
    max-width: 50%;
  }

  .learnSectionContent img{
    padding-left: 15%;
  } 
  
  

  /* Plan Section */

  .planSectionContent{
    flex-direction: row;
    flex-direction: row-reverse;
  }

  .planSectionContent .container{
    padding-right: 0px;
    max-width: 50%;
  }

  .planSectionContent img{
    padding-right: 20px;
  } 
  
  .planSectionContent .container h3{
    text-align: left;
  }


}

@media only screen and (max-width: 1026px){


}