html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./hero.jpg");

/* Set a specific height */
height: 100%;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: repeat-y;
background-size: cover;
position: relative;
top: 0;
}


.navbar {
    overflow: hidden;
    background-color: rgba(104, 45, 30, 0.555);
    /* opacity: 40%; */
    font-family: Arial;
    height: 70px;
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    margin-top: 10px;
    font-family: 'Cinzel', serif;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
    margin-top: 10px;
    font-family: 'Cinzel', serif;
    
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 25px;
    background-color: inherit;
    font-family: 'Cinzel', serif;
    margin: 0; 
  }
  
  button {
    font-size: 20px;
    font-family: 'Cinzel', serif;
    
  }

  .gallery{
    font-size: 14px;
    font-family: 'Cinzel', serif;

  }

  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgba(104, 45, 30, 0.555);
    font-family: 'Cinzel', serif;
    font-size: 20px;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(104, 45, 30, 0.555);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family: 'Cinzel', serif;
    font-size: 20px;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: 'Cinzel', serif;
   
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color:  rgba(104, 45, 30, 0.555);
    font-family: 'Cinzel', serif;
    font-size: 20px;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
    font-size: 20px;
  }


div.navbar.mapNav{
  size: 100%;
  background-color:  rgba(104, 45, 30, 0.555);
color: black;
z-index: 200;
font-size: 20px;
}

h1{
  font-size: 40px;
  color: white;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  
  
}
/* //////hero  */

/* The hero image */


/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
margin-top: 100px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

.mapApi{
  background-color: rgba(0, 0, 0, 0.5);

}

/* /////footer */

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color:  rgba(104, 45, 30, 0.555);
  color: white;
  text-align: center;
  padding-top: 10px;
  text-align: center;
  font-family: 'Cinzel', serif;

}


.missionStatement{
  background-color:rgb(89, 61, 54, .7);
  border: 1px solid black;
  align-self: center;
  padding: 50px; 
  margin: 8%;
  width: 70%;
  color: white;
font-size: 20px;
font-family: 'Cinzel', serif;

  
}

.missionStatement h2{
  text-align: center;
  margin-bottom: 30px;
}


div.gallery {
  margin: 0 auto;
  width: 100%;
}

.galleryImg {
  width: 100%;
  height: 320px;
  object-fit: cover;
}


 div.gallery:hover {
  border: 1px solid #777;
}

div.desc {
  color: white;
  height:483px;
  width: 19%;
  float: left;
  margin-right: 7px;
  margin-top: 15px;
  border: 1px solid #ccc;
  
  padding: 15px;
  text-align: center;
  background-color: rgba(104, 45, 30, 0.555);
}

.fa-search {
  
  float: none;
  color: rgba(104, 45, 30, 0.555);
  display: block;
  text-align: left;
  font-family: 'Cinzel', serif;
 
}


.custom-select{
  color: white;
  margin-top: 15px;
  background-color:rgba(104, 45, 30, 0.555);
  font-size: 15px;
}

.custom-select:hover{
  color: white;
  margin-top: 15px;
  background-color:rgba(104, 45, 30, 0.555);
  font-size: 15px;
}

input{
  background-color:rgba(104, 45, 30, 0.555 );
color: white;
}

.center-div {
  margin: 0 auto;
  width: 90%;
  text-align: center;
}