.container1{
    width: 90%;
    padding: 20px;
    margin-left:80px;
   margin-top:0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.container2{
    width: 90%;
    padding: 20px;
    margin-left:80px;
   margin-top:-10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.box{
    width: 250px;
    height: 200px;
    background: rgb(236, 232, 223);
margin: 0px 10px;
transition: 1s;

}
.box:hover{
    transform: scale(1.1);
    background: #324d4e;
    z-index: 1;
    color:white;
    box-shadow: 2px 2px 2px #000;
    
}
h4{
    text-align:center;
    font-size:20px;
    margin-top:10px;
}
.box i{
    margin-left:10px;
}
button a{
    font-size:18px;
    text-align: center; 
    background-color: aqua;
}
 button a :hover{
background-color: black;
color:aqua;
}

.header1 {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight:  100;
	letter-spacing: 2px;
	text-align: center;
	color: #f35626;
	background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 10s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

@media only screen and (max-width: 905px) 
{
 .container1, 
.container2 
{
 flex-direction: column; 
align-items: center; 
} 
.box 
{
 width: 80%; 
margin: 10px auto;
 }
}