/* General Styles */
.headstyle {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: bisque;
  font-size: 23px;
}

.header {
  grid-area: header; /* Assigns this class to the 'header' grid area */
  background-color: #00796b; /* Teal background for the header */
  padding: 1rem; /* Adds padding inside the header */
}

.nav {
  display: flex; /* Uses flexbox to align nav items */
  justify-content: space-between; /* Spaces out the items between left and right */
  align-items: center; /* Vertically aligns items in the center */
}

.left-nav,
.right-nav {
  display: flex; /* Makes both nav sections flex containers */
  list-style-type: none; /* Removes bullet points from list items */
}

.left-nav {
  justify-content: flex-start; /* Aligns left nav items to the left */
}

.left-nav li a {
  color: white; /* Sets the text color of links to white */
  text-decoration: none; /* Removes underline from links */
  margin-right: 1.5rem; /* Adds space between each link */
  font-weight: bold; /* Makes the text bold */
}

.right-nav {
  justify-content: flex-end; /* Aligns right nav items to the right */
}

.right-nav li {
  position: relative; /* Allows the dropdown menu to be positioned relative to this item */
}

.right-nav li a {
  color: white; /* Sets text color to white */
  text-decoration: none; /* Removes underline */
  margin-left: 1.5rem; /* Adds space between links */
  font-weight: bold; /* Makes text bold */
}

.right-nav li a:hover {
  text-decoration: underline; /* Adds underline when hovered */
}

/* Dropdown styling */
.dropdown-content {
  display: none; /* Hides dropdown menu initially */
  position: absolute; /* Positions the dropdown relative to its parent */
  background-color: #00796b; /* Teal background for the dropdown */
  min-width: 160px; /* Minimum width for the dropdown */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow around the dropdown */
  z-index: 1; /* Ensures the dropdown is above other content */
  right: 0; /* Aligns dropdown to the right edge of the parent */
}

.dropdown-content a {
  color: white; /* White text for dropdown links */
  padding: 12px 16px; /* Adds padding inside each dropdown link */
  text-decoration: none; /* Removes underline */
  display: block; /* Makes links take up the full width of the dropdown */
}

.dropdown-content a:hover {
  background-color: #004d40; /* Changes background color on hover */
}

.dropdown:hover .dropdown-content {
  display: block; /* Shows the dropdown menu when hovering over the parent */
}

.sidebar {
  grid-area: sidebar; /* Assigns this class to the 'sidebar' grid area */
  background-color: #e0e0e0; /* Light gray background for the sidebar */
  padding: 1rem; /* Adds padding inside the sidebar */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
  grid-template-rows: repeat(2, 300px); /* 2 rows of 300px */
  gap: 15px;
  padding: 20px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 30px;
}

.CommonP {
  height: 270px;
  width: 220px;
  border-radius: 50%;
}

.footer {
  grid-area: footer; /* Assigns this class to the 'footer' grid area */
  background-color: #00796b; /* Teal background for the footer */
  padding: 1rem; /* Adds padding inside the footer */
  text-align: center; /* Centers the text inside the footer */
}

.footer p {
  color: white; /* White text color for footer paragraphs */
  font-size: 0.9rem; /* Sets a smaller font size for footer text */
}

.footer a {
  color: white; /* White text color for footer links */
  text-decoration: none; /* Removes underline from links */
  margin-left: 1rem; /* Adds space between links */
}

.footer a:hover {
  text-decoration: underline; /* Adds underline when links are hovered over */
}

.footer-container {
  display: flex; /* Uses flexbox layout for the footer container */
  flex-wrap: wrap; /* Ensures child elements wrap onto multiple lines if needed */
  justify-content: space-between; /* Spaces out child elements evenly across the width */
}

.footer div {
  flex: 1; /* Ensures all child divs inside the footer take equal space */
  margin: 1rem; /* Adds 1rem of margin around the child divs */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .nav {
    display: none; /* Hide default navigation */
  }

  .hamburger {
    display: block; /* Show hamburger menu */
    cursor: pointer;
  }

  .hamburger.active + .nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }

  .sidebar {
    display: none; /* Hide sidebar */
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
  }

  .footer div {
    margin-bottom: 1.5rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr; /* Single column */
  }

  .footer p,
  .footer a {
    font-size: 0.8rem; /* Adjust footer text size */
  }
}