body {
  background-color: #181a1b;
  color: #e0e0e0;
}

.bg-dark,
.footer,
footer {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

.bg-light,
.bg-white,
.bg-secondary.bg-opacity-10,
.bg-info.bg-opacity-10,
.bg-info.bg-opacity-25 {
  background-color: #23272b !important;
  color: #e0e0e0 !important;
}

.card {
  background-color: #23272b;
  color: #e0e0e0;
  border: none;
}

.card .card-title,
.card .card-text {
  color: #e0e0e0;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #0056b3;
  border-color: #0056b3;
  color: #fff;
}

a,
a.text-light {
  color: #90caf9 !important;
}

.bg-white {
  background-color: #23272b !important;
}

.shadow,
.shadow-sm {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

.bg-secondary.bg-opacity-10,
.bg-info.bg-opacity-10,
.bg-info.bg-opacity-25 {
  background-color: #23272b !important;
}

.text-dark {
  color: #000000 !important;
}

.text-light {
  color: #e0e0e0 !important;
}

.navbar,
.footer,
footer {
  background-color: #121212 !important;
}

.display-4,
h1,
h2,
h3,
h5 {
  color: #fff;
}

.lead,
p,
small {
  color: #b0b0b0;
}

/* Optional: Make icons pop in dark mode */
.bi {
  filter: brightness(1.5);
}

.hero {
  background-image: url('bannerweb.jpeg');
  background-size: contain;
  background-position: center;
}

.herotext {
  background-color: rgb(255, 255, 255);
  opacity: 0.7;
  text-align: center;
}

.contact {
  font-size: 2.5em;
}

.herocontent {
  justify-content: center !important;
  position: absolute;
  bottom: 0;
}

.gallery-item {
  /* width: 200px; */
  padding: 5px;
}

.award {
  background-color: rgb(255, 255, 255);
  opacity: 0.7;
}

.award img {
  text-align: center;
}

/* Styles for extra small devices (phones) */
@media (max-width: 480px) {
  .hero {
    background-image: url('banner.jpeg');
    background-size: cover;
  }

  .herocontent {
    justify-content: center !important;
    position: absolute;
    bottom: 0;
  }
}

@media (min-width: 481px) and (max-width: 575px) {
  .hero {
    background-size: cover;
  }

  .herocontent {
    justify-content: center !important;
  }

}

@media (min-width: 576px) and (max-width: 767px) {
  .hero {
    background-size: cover;
  }

  .herocontent {
    justify-content: center !important;
  }

}

/* Styles for medium devices (laptops/small desktops) */
@media (min-width: 768px) and (max-width: 991px) {
  .hero {
    background-size: cover;
  }

  .herocontent {
    justify-content: center !important;
  }

}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero {
    background-size: cover;
  }

  .herocontent {
    justify-content: center !important;
  }

}

/* Styles for extra large devices (large desktops/TVs) */
@media (min-width: 1200px) {
  .hero {
    background-size: cover;
  }

  .herocontent {
    justify-content: center !important;
  }

}