.grids {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px ;
  flex-grow: 1;
  list-style: none;
}

.h-250 {
  height: 250px;
}

body {
  font-size: 18px;
}


.banner-background {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url('/assets/images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.banner-background h1 {
  color: white; /* Keep the text white for contrast */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.navbar {
    background-color: #1D57A1; /* A deep shade of blue */
}

div a {
    color: #2E8BD1; /* A fresher shade of blue for links */
}

h1, h2, h3, h4, .alert-heading {
    color: #2E8BD1; /* Same fresh blue for the titles */
}

.bg-middle {
  background-color: #2E8BD1; /* Background color for some background elements */
}

.alert {
    border-color: #E1F2FF; /* Light blue for alerts border and background */
    background-color: #E1F2FF;
    color: #1D57A1; /* Dark blue for alert text */
}

i, .text-muted {
    color: #A8C1D4; /* A muted, softer shade of blue for icons and muted text */
}

.bg-light {
    background-color: #E1F2FF; /* Light blue background for some background elements */
}

.card, .btn {
    border-color: #2E8BD1; /* Blue border for cards and buttons */
    color: #2E8BD1; /* Blue text for buttons */
}

.btn:hover, .btn:focus, .btn:active {
    background-color: #2E8BD1; /* Darker blue when hovering over buttons */
    color: #E1F2FF; /* Light text when hovering over buttons */
}