/* Change the primary color to gold for Bootstrap components */
.btn-primary,
.navbar-primary .navbar-nav .nav-link,
.text-primary,
a {
    color: gold !important;  /* Set the text color to gold */
}

.btn-primary:hover,
.navbar-primary .navbar-nav .nav-link:hover,
a:hover {
    color: darkgoldenrod !important;  /* Change the hover color to a darker gold */
    text-decoration: none;  /* Optional: Remove underline on hover */
}

.bg-primary {
    background-color: gold !important;  /* Set background color for primary elements */
}

.bg-primary:hover {
    background-color: darkgoldenrod !important;  /* Hover effect for primary background */
}


.footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
}



.banner {

  height: 150vh; 
/*  min-height: 300px; */
  max-height: 900px; 

  @media (max-width: 992px) { 
      height: 60vh;
      max-height: 700px;
  }

  @media (max-width: 768px) { 
      height: 40vh;
  }

  @media (max-width: 480px) { 
      height: 30vh;
  }

  background:
  linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
  radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 60%),
  url('../img/MCB_1920x1080.jpg') no-repeat center center;
  background-size: cover;

}



.banner .container {
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
}