html, body {
    height: 100%; /* Ensure the body takes up the full height of the viewport */
    margin: 0;
}
#intro {
    background-image: url("../images/background.jpg");
    background-size: 100vw;
    background-repeat:no-repeat;
    background-position: top;
    background-color: black;
    flex: 1; /* Make the intro section take up the remaining space */
    color:white; 
    text-align: center !important;
}
.mask {
  background-color: rgba(0, 0, 0, 0.87);
}
.cover-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Full height for the flex container */
}
main {
    min-height: 80vh; /* Ensure the main section takes up enough space */
    overflow-y: auto; /* Add vertical scrollbar if content overflows */
    padding: 20px;
}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* nav.navbar.navbar-inverse {
    margin-bottom: 0;
}
    */
.navbar .navbar-brand {
  padding: 10px;
}
.navbar .navbar-brand img {
  height: auto;
  width: 80px;
}
/*
.navbar-nav>li>a {
  padding-top: 0px;
  padding-bottom: 0px;
}
.navbar .navbar-nav>li>a {
  background-color: rgb(37, 37, 37);
  color: grey;
}
.navbar .navbar-nav>li.active>a{
  background-color: rgba(37, 37, 37);
  color: white;   
}
.navbar .navbar-nav>li.active>a:focus{
  background-color: rgba(37, 37, 37);
  color: white;   
}      

.navbar .navbar-nav>li.active>a:hover{
  background-color: rgba(37, 37, 37);
} 
.navbar .navbar-nav>li>a:hover {
      background-color: rgb(104, 104, 104);
      color: white;
  }
.navbar .navbar-nav>li>a:focus {
  background-color: rgb(51, 82, 172);
}

li.nav-item .active{
  color: white;
  font-weight: bold;
}

.collapse.navbar-collapse {
    margin-top:  15px;
} */


li.nav-item.active>a {
  color: white;
  font-weight: bold;
}

.gallery-image{
  float:left;
  width:100%;
  margin: 5px;
}