body {
  margin: 0;
  font-family: sans-serif;
}

.card-container {
  display: flex; /* Use flexbox for responsive layout */
  flex-wrap: wrap; /* Allow cards to wrap to the next line on smaller screens */
  justify-content: center; /* Center the cards horizontally */
}

.card {
  background-color: #f2f2f2;
  border: 1px solid #ccc; /* Add a thin border */
  border-radius: 10px;
  padding: 20px;
  margin: 10px;
  flex: 1; /* Allow cards to grow and shrink to fill available space */
  min-width: 200px; /* Set a minimum width for cards */
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) { /* Adjust for different screen sizes */
  .card {
    flex-basis: 100%; /* Make cards occupy the full width on smaller screens */
  }
}

.header {
  text-align: left;
}

.underline {
  border: none;
  border-top: 3px solid #8b8989;
  width: 100%;
  margin-top:-20px; /* Adjust this value to control the gap */
}


header {
	background-color: #333;
	color: #fff;
	padding: 10px;
}


main {
	display: flex; /* Use flexbox for layout */
}


.content {
	flex: 4; /* Content section takes 80% of the width */
	padding: 20px;
}

/* Side bar */

.sidebar {
	flex: 1; /* Sidebar takes 20% of the width */
	background-color: #f0f0f0;
	padding: 20px;
}

/* Navigation Menu */

.header-container { 
  width: 80%; /* Adjust this value to control the width of the header content */
  margin: 0 auto; /* Center the header container horizontally */
}

header {
  background-color: #333;
  color: #fff;
  position: fixed;
  top: 0;
  left: 100; /* Ensure header starts at the very left */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0; /* Remove top/bottom padding */
}

nav {
  position: absolute;
  right: 100px; 
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}