/*
color: #3F8A22; //green
color: #D1CE77; //brown
color: #F8F8F8; //lite-gray
color: #918F89; //gray
color: #66645F; //dark-gray			
color: #FCFDFF; //white
*/
body {
  background-color: #FCFDFF;
  margin: 0px;
  overflow-x: hidden;
}

#hero {
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
  height: 270px;
  background-image: url("../img/ADHero.png");
  background-color: #FCFDFF; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.heroText {
  font-family: BarlowLight, sans-serif;
  font-size: 48px;
  padding-top: 140px;	
  padding-left: 20px;
  color: #FCFDFF;
}

.cards {
  width: 100vw;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 10px;
  background-color: #F8F8F8;
}

a {
  text-decoration: none;	
}

.exampleCard {
  width: 45vw;
  height: 250px;
  background-color: #FCFDFF;
  border-radius: 12px;
  padding-top: 30px;
  padding-left: 30px;
}

.exampleCardText {
  font-family: BarlowLight, sans-serif;
  font-size: 18px;
  color: #FCFDFF;
}

#bumper {
  width: 100vw;
  height: 20px;
  background-color: #F8F8F8;
}

#footer {
  font-family: BarlowLight, sans-serif;
  width: 100vw;
  height: 64px;
  background-color: #FCFDFF;
  color: #918F89;
}

.footerleft {
  float: left;
  text-align: left;
  margin-left: 20px;
  margin-top: 10px;
  font-size: 12px;
}

.footerright {
  float: right;
  text-align: right;
  margin-right: 30px;
  margin-top: 10px;
  font-size: 12px;
}



@media only screen and (max-width: 900px) {
  .exampleCard {
    width: 90vw;
    height: 300px;
  }
}