/* Base settings with improved background and text rendering */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  background: #e8eff7; /* Softer background to reduce eye strain */
  color: #212529;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

/* Navigation improvements for aesthetics and UX */
.navbar {
  background-color: #2c3e50; /* Darker shade for more contrast */
  padding: 0.8rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Soft shadow for depth */
}

.nav-link {
  font-weight: bold;
  color: #ecf0f1;
  transition: color 0.3s, background-color 0.3s;
}

.nav-link:hover, .nav-link.active {
  color: #d35400; /* Vibrant color for hover and active state */
  background-color: #ecf0f1; /* Light background on hover for better visibility */
  border-radius: 5px; /* Rounded corners for links */
}

/* Enhanced Typography */
h1, h2, h3, h4 {
  font-family: 'Merriweather', serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle text shadow for headers */
}

h1 {
  font-size: 2.8rem;
  color: #2c3e50;
  margin-bottom: 1.2rem;
}

h2 {
  color: #34495e;
  margin-bottom: 1rem;
}

p {
  font-size: 1.2rem;
}

/* Refined Buttons */
.btn-primary {
  background-color: #3498db; /* More vibrant blue */
  border: none;
  padding: 12px 25px;
  font-size: 1.1rem;
  border-radius: 6px; /* Rounded edges for buttons */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-primary:hover {
  background-color: #2980b9;
  transform: scale(1.05); /* Slight increase in scale on hover */
}

/* Carousel with more engaging design */
.carousel-item {
  position: relative; /* Needed for positioning the caption */
  color: #fff;
}

.carousel-caption {
  background: rgba(44, 62, 80, 0.75); /* Darker background for better readability */
  padding: 1.5rem;
  border-radius: 8px;
  position: absolute; /* Positioned to not take space and be over image */
  bottom: 20%; /* Position from bottom */
  right: 10%; /* Margin from right */
}

/* Cards with elevated aesthetic */
.card {
  margin-top: 20px;
  border: 1px solid #ddd; /* Subtle border */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px); /* Moves card up slightly on hover */
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.card img {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-body {
  padding: 20px;
}

/* Footer enhancements */
.footer {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 1.2rem 0;
  text-align: center;
}