html {
  font-size: 13px;
}

body {
  font-family: "Ubuntu", sans-serif;
  padding-top: 70px;
  color: #333;
  background-color: #ffffff;
  line-height: 1.6;
}

.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.section-border {
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

footer {
  background-color: #f8f9fa;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #ddd;
}

.img-fluid {
  max-width: 100%;
  height: auto;
  padding-top: 20px;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h2,
h3 {
  color: #222;
}
/* Restore responsive and alignment for images */
.img-fluid {
  max-width: 100%;
  height: auto;
  padding-top: 20px;
}

@media (max-width: 767px) {
  .img-fluid {
    max-width: 60%; /* Smaller image on mobile */
    float: left; /* Align image to the left */
    margin-right: 10px;
    display: block;
  }

  .navbar-dark .navbar-nav .nav-link,
  .navbar-dark .navbar-brand {
    color: #ffffff; /* Bright white for improved visibility on mobile */
  }

  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus,
  .navbar-dark .navbar-brand:hover,
  .navbar-dark .navbar-brand:focus {
    color: #cccccc; /* Slightly darker white for hover/focus state on mobile */
  }

  .navbar-dark .navbar-toggler {
    border-color: rgba(
      255,
      255,
      255,
      0.7
    ) !important; /* Brighter border for visibility on mobile */
  }

  .navbar-dark .navbar-toggler-icon {
    filter: brightness(
      200%
    ) !important; /* Brighter icon for visibility on mobile */
  }

  .navbar-dark .navbar-toggler:hover,
  .navbar-dark .navbar-toggler:focus {
    border-color: rgba(
      255,
      255,
      255,
      1
    ) !important; /* Fully white border on hover/focus on mobile */
  }
}

.navbar-dark .navbar-nav .nav-link {
  color: #ffffff; /* Bright white for improved visibility */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #cccccc; /* Slightly darker white for hover/focus state */
}

.navbar-dark .navbar-brand {
  color: #ffffff; /* Bright white for navbar brand */
}

.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
  color: #cccccc; /* Slightly darker white for navbar brand hover/focus state */
}

.navbar-dark .navbar-toggler {
  border-color: rgba(
    255,
    255,
    255,
    0.7
  ) !important; /* Brighter border for better visibility */
}

.navbar-dark .navbar-toggler-icon {
  filter: brightness(
    200%
  ) !important; /* Increase brightness of the hamburger icon */
}

.navbar-dark .navbar-toggler:hover,
.navbar-dark .navbar-toggler:focus {
  border-color: rgba(
    255,
    255,
    255,
    1
  ) !important; /* Fully white border on hover/focus */
}

@media (prefers-color-scheme: dark) {
  .navbar-dark .navbar-nav .nav-link,
  .navbar-dark .navbar-brand {
    color: #ffffff !important;
  }

  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus,
  .navbar-dark .navbar-brand:hover,
  .navbar-dark .navbar-brand:focus {
    color: #cccccc !important;
  }

  .navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.7) !important;
  }

  .navbar-dark .navbar-toggler-icon {
    filter: brightness(200%) !important;
  }

  .navbar-dark .navbar-toggler:hover,
  .navbar-dark .navbar-toggler:focus {
    border-color: rgba(255, 255, 255, 1) !important;
  }
}