html {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  background-color: white;
  
}
header {
  display:flex;
  flex-direction: column;
}

#logo1{
  width:10%;
  height:10%;
  margin: 0 45%;
}
.navbar {
  display:flex;
  justify-content: space-around;
  margin: 0 20px;
}

.navbar p{
  display: inline-block;
  padding: 20px 20px;
  font-size:1.5rem;
}

.navbar a{
  color:rgb(0,0,0);
  
}

.navbar a:hover{
  color: rgb(106, 90, 205);
}

header h1{
   text-align: center;
}

.mission {
  background-image: url(push.jpeg);
  color: rgb(255,255,255);
  height: 700px;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  margin: 0 auto;
  width: 80%;
  display: flex;
}

.mission p{
margin: auto;
text-align:center;
background-color: rgb(180,180,180);
font-size:2rem;
}

.expertise h2, p {
  text-align: center;
}

.image-container{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-evenly;
  margin: 0 auto;
}

.img-container img{
    width: 300px;
    height:200px;
    display:inline-block;
    padding-top: 50px;
    flex-shrink:1;
}

.img-container h5{
    width: 100%;
    margin-top: 15px;
    margin-left:35%;
    
}


.trainers{
  display:flex; 
  flex-wrap: wrap;
  justify-content:space-evenly;
  margin: 0 auto;
  /*background-image: url(./gym-background.jpeg);
  color: rgb(255,255,255);*/
}

.item img{
    width: 400px;
    height:300px;
    display:inline-block;
    padding-top: 50px;
}

.item h3,h4{
    display:block;
    width: 100%;
    text-align:center;
}

#contact{
  display:block;
  text-align:center;
  margin-top: 10%;
}

.contact_info{
  display:block;
  text-align:center;
  margin-top: 10%;
  background-color: rgb(240,240,240);
}

h2{
  padding-top:3em;
}

@media only screen and (max-width: 480px) {
  header h1{
    display:none;
  }
}

@media only screen and (max-width: 480px) {
  header h1{
    display:none;
  }
  .navbar p{
    font-size: 1rem;
  }

  #logo1{
    width:20%;
    height:20%;
    margin-left: 50%;
    margin-right:50%;
  }
}