* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.btn-grad {background-image: linear-gradient(to right, #5DFB57 0%, #57D5FB  100%)}
.btn-grad {
   margin: 10px;
   padding: 15px 45px;
   transition: 0.5s;
   color: white;            
   box-shadow: 0 0 20px #eee;
   border-radius: 10px; 
   outline: none;
 }

 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }

 body{
    font-size: 18px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

 section .container {
  padding: 70px 0;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

.col {
  width: 100%;
  
}



.row {
  padding: 0 4%;
  text-align: center;
}

.section__first--container {
  background-color:  hsl(220, 16%, 96%);
  
}

.section__second--container {
  background-color: hsl(0, 0%, 97%);;
  
}

.section__first--container img {
  padding: 50px 0 30px 0;
}

.section__second--container .col {
  background-color: #fff;
  text-align: left;
  padding: 0;
  margin-top: 5% ;
  margin-bottom: 5%;
}


.section__second--container .col h2 {
  text-align: center;
}


.section__second--container .col p,
.section__second--container .col h3,
.section__second--container .col h4,
.section__second--container .col h5 {
  padding: 10px 4%;
}

.section__second--container .col h5 {
  font-size: 14px;
}

.section__second--container .col P {
padding-bottom: 30px;
font-size: 14px;
}

.section__second--container .first__col {
  background-color: hsl(0, 0%, 97%);;
}