#hero{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 20vh;
    background: rgb(16,78,47);
    background: linear-gradient(90deg, rgb(190, 209, 190) 0%, rgb(159, 199, 173) 20%, rgb(89, 179, 134) 100%);
  }
  #hero span{
    color: #000;
    font-family: 'Times New Roman', Times, serif;
  }
  
  #hero h1{
    font-family: 'Times New Roman', Times, serif;
    color: white;
    font-size: 4vw;
  }


#contenido{
    margin: 30px;
    padding-bottom: 20px;
    width: auto;
    text-align: justify;
}

.cards{
	width: 100%;
	display: flex;
	margin: auto;
}
.cards h2{
    text-align: center;
    padding-bottom: 20px;
}
.cards .card{
	width: 100%;
	margin: 15px 30px;
    padding: 15px 40px;
	border-radius: 6px;
	overflow: hidden;
	background:#fff;
	border: 2px solid #48BF84;
	transition: all 400ms ease-out;
	cursor: default;
}
.cards .card i{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #48BF84;
}


.cards .mision{
    padding: 40px;
    max-width: 500px;
}
.cards .vision{
    padding: 40px;
    max-width: 500px;
}

#contenido span{
    color: #48BF84;
}
#contenido ul{
    display: grid;
    list-style-type: disc;
}
#contenido ul li{
    font-weight: 700;
}
#contenido i{
    cursor: default;
}
#contenido .valores{
    margin: 30px;
}



@media screen and (max-width: 720px) {
    #hero h1{
      font-size: 30px;
    }
    #contenido{
        margin: 0;
    }


    .cards{
		flex-wrap: wrap;
	}
	.card{
		margin: 15px;
        padding: 20px;
	}
}