/* ==========================
   General Styling
   ========================== */

/* Logo styling */
.logo {
  max-width: 120px;
  margin: 10px;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.1);
}

/* Header and footer styling */
.header {
  background-color: #1a1a2e; /* Dark blue */
  color: #e0e0e0; /* Light grey */
  padding: 0px 0;
  text-align: center;
}

footer {
  background-color: #1a1a2e; /* Darker blue */
  color: #e0e0e0; /* Light grey */
  font-size: 0.9rem;
  padding: 15px 0;
  text-align: center;
}

footer a {
  color: #e0e0e0; /* Light grey */
  text-decoration: none;
}

footer a:hover {
  color: #a3a3a3; /* Subtle grey */
}

/* ==========================
   Navbar Styling
   ========================== */

.navbar-custom {
  background-color: #1a1a2e; /* Dark blue */
  padding-top: 0.5rem; /* Reduce top padding */
  padding-bottom: 0.5rem; /* Reduce bottom padding */
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: #e0e0e0; /* Light grey */
  padding-top: 0.25rem; /* Reduce top padding for links */
  padding-bottom: 0.25rem; /* Reduce bottom padding for links */
}
.navbar-brand {
  font-size: 1.25rem; /* Adjust font size if needed */
}
.navbar-custom .nav-link:hover {
  color: #a3a3a3; /* Subtle grey */
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5); /* White border with transparency */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* ==========================
   Header Styling
   ========================== */

.header-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #e0e0e0; /* Light grey */
}

.header-subtitle {
  font-size: 1.2rem;
  font-style: italic;
  color: #a3a3a3; /* Subtle grey */
}

/* ==========================
   Card Styling
   ========================== */

.card {
  border: none;
  /* background-color: #1f4068; */
  color: #e0e0e0; /* Light grey */
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.card-title {
  color: #1a1a2e; /* Light grey */
}

.card-text {
  color: #a3a3a3; /* Subtle grey */
}


/* ==========================
   Map Styling
   ========================== */

#map {
  height: 500px; /* Set to 500px or your preferred height */
  width: 100%;
  border: 2px solid #1a1a2e; /* Dark blue border */
}

/* ==========================
   Table Styling
   ========================== */

.table {
  background-color: #1f4068; /* Medium dark blue */
  color: #e0e0e0; /* Light grey */
}

.table td,
.table th {
  vertical-align: middle;
  border-color: #1a1a2e; /* Darker blue */
}

.table-hover tbody tr:hover {
  background-color: #1a1a2e; /* Darker blue */
}

/* ==========================
   Button Styling
   ========================== */

.button-gap {
  margin-left: 10px; /* Adjust the value as needed */
}


.btn-primary {
  background-color: #0d6efd; /* Default Bootstrap primary blue */
  border: 1px solid #0d6efd; /* Match the background color */
  color: #ffffff; /* White text for contrast */
  padding: 0.5rem 1rem; /* Add padding for better spacing */
  border-radius: 5px; /* Rounded corners for a modern look */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.btn-primary:hover {
  background-color: #084298; /* Darker blue for hover effect */
  border-color: #084298; /* Match the hover background */
  color: #ffffff; /* Keep white text */
}

.btn-primary:active {
  background-color: #052c65; /* Even darker blue for active state */
  border-color: #052c65; /* Match the active background */
  color: #ffffff; /* Keep white text */
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2); /* Add inset shadow for pressed effect */
}

.btn-primary:focus {
  outline: none; /* Remove default focus outline */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); /* Add a focus ring */
}

.btn-secondary {
  background-color: #a3a3a3; /* Subtle grey */
  border-color: #a3a3a3;
  color: #1a1a2e; /* Dark blue */
}

.btn-secondary:hover {
  background-color: #e0e0e0; /* Light grey */
  border-color: #e0e0e0;
  color: #1a1a2e; /* Dark blue */
}

/* ==========================
   Responsive Adjustments
   ========================== */

@media (max-width: 576px) {
  .logo {
    max-width: 80px;
  }

  .header-title {
    font-size: 2rem;
  }

  .header-subtitle {
    font-size: 1rem;
  }
}

.custom-bg {
  background-color: #1a1a2e; /* Replace with your desired color */
  color: white; 
}

/* Style for categories */
.list-group-item {
  background-color: #f8f9fa; /* Light gray for categories */
  color: #000; /* Black text */
}

/* Active category styling */
.list-group-item.active {
  background-color: #1a1a2e; /* Bootstrap primary color */
  color: #fff; /* White text */
}

.small-tight {
  margin-bottom: 0.2rem; /* Adjust spacing as needed */
  line-height: 1.2; /* Adjust line height for tighter spacing */
}

.icon-gap {
  margin-right: 0.5rem; /* Adjust the value as needed */
}
.card-img-top {
  max-height: 100px;
  width: auto;
  display: block;
  margin: 20px auto 0 auto; /* Adds a 10px top margin */
}