.wrapper{
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0, 70%) minmax(0px, 1fr);
}

nav{
  background-color:#73797F;
  height: 75px;
  grid-column-start:1;
  grid-column-end:4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding-left: 3%;
  padding-right: 3%;
  
  
}
.homehero{
  background-color: #CBE4FF ;
  padding:20px;
  margin-top:25px;
  margin-bottom: 25px;
}
.homehero img{
  width: 100%;
  height: 60vh;
  object-fit: cover;
}
.imgcontainer{
  padding: 20px;
  width:32%;
}
.imgcontainer img{
  width:100%;
  object-fit: contain;

}
nav h1{
  font-size: 24pt;
  margin-bottom: 0px;
}
nav ul{
  display:flex;
  list-style-type: none;
  color:white;
}
nav li{
  padding: 1rem;
  color: white;
}
nav a{
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-weight: bold;
  
}
nav a:hover{
  color: #06597F;
}

nav svg{
  fill: white;
}
body{
  padding:0;
  margin:0;
  font-family: sans-serif;
  background-color:#E7F2FF
}
header{
  grid-column-start:2;
  grid-column-end:3;
  
}
main{
  grid-column-start:2;
  grid-column-end:3;
  display:flex;
  justify-content: space-between;
  margin-top:25px;
  margin-bottom: 25px;

}
main div{
  width:30%;
  height: 500px;
  background-color: #06597F;
  padding:20px;
  display:flex;
  flex-direction: column;
  align-items: center;
  color: white;

}
main h2{
  margin-top: 30px;
}
main div svg{
  width: 40%;
  

  fill: white;
}

* {
  box-sizing: border-box;
}
section{
  grid-column-start:2;
  grid-column-end:3;
  background-color:#B9C2CC;
  margin-top:25px;
  margin-bottom: 25px;
  display:flex;
  justify-content: space-between;
  


}
section div{
  color: white;
  width: 68%;
}
section div h1{
  margin-top: 55px;
  text-align:center;
  font-size: 24pt;
}
section div p{
  padding-left: 50px;
  padding-right: 50px;
}
footer{
  background-color: #E7F2FF;
  height: 75px;
  grid-column-start:1;
  grid-column-end:4;
}
@media only screen and (max-width: 992px){
  .wrapper{
    display: grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: minmax(0px, 1fr) minmax(0, 768px) minmax(0px, 1fr)
  
  }

}
@media only screen and (max-width: 768px){
  .wrapper{
    display: grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: minmax(0px, 0) minmax(0, 100%) minmax(0px, 0)
  
  }

  main{
    flex-wrap: wrap;
    justify-content: center;
  }
  main div{
    width:95%;
    margin-bottom: 25px;
    height: 425px;
  }
  nav{
    flex-wrap: wrap;
    height:auto;
    text-align: center;
  }
  nav h1{
    width:100%;
  }
  nav ul{
    width:100%;
    flex-wrap: wrap;
    padding:0px;
  }
  nav ul li{
    width:100%;
    display:flex;
    justify-content: center;
  }
 
  section{
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding-top: 25px;
    padding-bottom: 25px;
    
  }
  section div{
    width:95%;
  }
  .imgcontainer{
    width:60%;
  }
  section div h1{
    margin-top: 10px;
  }
}