body{
  font-family: 'Roboto';
  background-color: #f8f9fa
}

div#social-links {
  padding: 0;
  margin: 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand .brand-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
}

.navbar-custom {
  background: linear-gradient(to right, #001f3f, #003366, #001f3f);
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle box-shadow */
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text, 
.navbar-custom .nav-link{
  color:white;
}

.footer-custom{
  background-color: darkblue;
  color: white;
}

.my-button {
background-color:darkblue;
color:white;
}

.my-button:hover{
  background-color: darkblue;
  color:white;
}


div#social-links ul{
  all: unset;
}

div#social-links ul li {
  display:inline-block;
}          
div#social-links ul li a {
  padding: 5px;
  border: 1px solid #cccccc;
  margin: 1px;
  font-size: 25px;
  color: #1f1f1f;
  background-color: #ffffff;
}

@media only screen and (min-width: 960px){
.flow-text {
  font-size: 1.68rem;
}
}

@media only screen and (min-width: 930px){
.flow-text {
  font-size: 1.656rem;
}
}

  @media only screen and (min-width: 900px){
.flow-text {
  font-size: 1.632rem;
}
  }

  @media only screen and (min-width: 870px){
.flow-text {
  font-size: 1.608rem;
}
  }

  @media only screen and (min-width: 840px){
.flow-text {
  font-size: 1.584rem;
}
  }
  @media only screen and (min-width: 810px){
.flow-text {
  font-size: 1.56rem;
}
  }

  @media only screen and (min-width: 780px){
.flow-text {
  font-size: 1.536rem;
}
  }

  @media only screen and (min-width: 750px){
.flow-text {
  font-size: 1.512rem;
}
  }
  @media only screen and (min-width: 720px){
.flow-text {
  font-size: 1.488rem;
}
  }
  @media only screen and (min-width: 690px){
.flow-text {
  font-size: 1.464rem;
}
  }
  @media only screen and (min-width: 660px){
.flow-text {
  font-size: 1.44rem;
}
  }
  @media only screen and (min-width: 630px){
.flow-text {
  font-size: 1.416rem;
}
  }
  @media only screen and (min-width: 600px){
.flow-text {
  font-size: 1.392rem;
}
  }
  @media only screen and (min-width: 570px){
.flow-text {
  font-size: 1.368rem;
}
  }
  @media only screen and (min-width: 540px){
.flow-text {
  font-size: 1.344rem;
}
  }
  @media only screen and (min-width: 510px){
.flow-text {
  font-size: 1.32rem;
}
  }
  @media only screen and (min-width: 480px){
.flow-text {
  font-size: 1.296rem;
}
  }
  @media only screen and (min-width: 450px){
.flow-text {
  font-size: 1.272rem;
}
  }
  @media only screen and (min-width: 420px){
.flow-text {
  font-size: 1.248rem;
}
  }

  @media only screen and (min-width: 390px){
.flow-text {
  font-size: 1.224rem;
}
  }
  @media only screen and (min-width: 360px){
.flow-text {
  font-size: 1.2rem;
}
  }

  .banner-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 1;
}

.banner-title {
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.banner-description {
  font-size: 1.2rem;
  color: #eee;
}

.banner-updated {
  color: #ccc;
}



.banner-container {
  display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(to right, #001f3f, #003366, #001f3f); /* Dark blue gradient */
    background-size: cover;
    background-repeat: no-repeat;
}

.banner-text {
  padding: 20px;
  text-align: center;
  animation: fadeInUp 2s ease-out;
}

.banner-title{
  font-size: 3em; font-family: 'Pacifico', cursive;
  color: white;
  text-shadow: 2px 2px 4px black;
}

.banner-description{
  text-align: start;
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.banner-container:hover .banner-text {
  opacity: 0.9;
}

iframe{
  aspect-ratio: 16/9;
  display: block;
  height: auto !important;;
  width: 100%; 
}