/* Global Styles */
body {
  font-family: "Poppins", sans-serif;
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto; /* Center container */
}

/* Learning Content Layout */
.learning-content {
  display: flex; /* Use flexbox for layout */
}

/* Categories Sidebar */
.categories {
  width: 25%; /* Set width for the left sidebar */
  padding: 20px;
  border-right: 1px solid #ddd; /* Optional border for separation */
}

.categories h2 {
  margin-bottom: 10px;
}

.categories ul {
  list-style-type: none; /* Remove bullet points */
  padding: 0; /* Remove padding */
}

.categories ul li {
  margin-bottom: 10px;
}

.categories ul li a {
  text-decoration: none; /* Remove underline from links */
  color: #007bff; /* Link color */
}

/* Courses Section */
.courses {
  width: 75%; /* Set width for the right side */
  padding: 20px;
  display: flex; /* Use flexbox for the courses layout */
  flex-wrap: wrap; /* Allow wrapping to next line on smaller screens */
  gap: 20px; /* Space between course cards */
}

/* Course Card Styles */
.course-card {
  border: 1px solid #ddd;
  border-radius: 5px; /* Optional rounded corners for cards */
  padding: 10px;
  display: flex; /* Use flexbox for card layout */
  flex-direction: column; /* Stack children vertically */
  justify-content: space-between; /* Push button to bottom */
  flex: 1 1 calc(33.333% - 20px); /* Responsive sizing for three cards in a row */
  box-sizing: border-box; /* Include padding in width calculation */
  align-items: center;
}

/* Image Styling with Equal Height */
.course-card img {
  width: 80%; /* Make image responsive */
  height: 150px; /* Set equal height for all images */
}

/* Title (H3) Styling */
.course-card h3 {
  margin-top: 10px; /* Space above the title */
  margin-bottom: 8px; /* Space below the title for consistent alignment */
  text-align: left; /* Align all titles to the left */
}

/* Paragraph Styling */
.course-card p {
  margin-top: 0; /* Remove default margin above paragraph */
  margin-bottom: 10px; /* Consistent spacing below paragraph */
  text-align: center; /* Align all paragraphs to the left */
}

/* Button Styles */
.btn-primary {
  background-color: #007bff; /* Primary button color */
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  text-align: center; /* Center text in button */
  border-radius: 5px; /* Rounded corners for button */
}

/* Button Hover Effect */
.btn-primary:hover {
  background-color: #0056b3; /* Darker shade on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .learning-content {
    flex-direction: column; /* Stack sidebar and courses vertically on smaller screens */
    align-items: center; /* Center align items on small screens */
    width: 100%; /* Full width on smaller screens */
  }

  .categories {
    width: 100%; /* Sidebar takes full width on small screens */
    border-right: none; /* Remove border on small screens */
    margin-bottom: 20px; /* Space between sidebar and courses section */
    padding-bottom: 10px; /* Padding at the bottom of the sidebar if needed*/
    text-align: center;
  }

  .courses {
    flex-direction: column; /* Stack cards vertically on smaller screens */
    align-items: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    gap: 10px;
  }

  .course-card {
    flex-basis: auto;
    margin-bottom: 20px;
    max-width: 90%;
    box-shadow: none;
    border-radius: 5px;
  }
}
/* Modal Styles */
.modal {
  position: fixed; /* Stay in place */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the modal */
  background-color: white;
  padding: 20px 30px;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center; /* Center align text */
  z-index: 1000; /* Ensure it's on top of other elements */
  display: none; /* Initially hidden */
}

.modal h2 {
  color: #333; /* Darker text for title */
}

.modal p {
  color: #555; /* Subtle text for message */
}

.modal button {
  margin-top: 15px;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.modal button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* Overlay Styles */
.overlay {
  position: fixed; /* Cover the entire screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  z-index: 999; /* Just below the modal */
  display: none; /* Initially hidden */
}