/* Container for Objectives and Prerequisites */
  .objectives-prerequisites-container {
      display: flex;
      gap: 20px;
      /* Space between Objectives and Prerequisites */
      margin-bottom: 20px;
  }

  /* Objectives and Prerequisites Sections */
  .objectives,
  .prerequisites {
      background-color: #f5f5f5;
      /* Light gray background */
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Subtle box shadow */
      flex: 1;
      /* Equal width for both sections */
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      /* Smooth hover effect */
  }

  .objectives:hover,
  .prerequisites:hover {
      transform: translateY(-2px);
      /* Slight lift on hover */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
      /* Enhanced shadow on hover */
  }

  /* Heading Styles */
  .objectives h3,
  .prerequisites h3 {
      font-size: 18px;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 10px;
  }

  /* List Styles */
  .objectives ul,
  .prerequisites ul {
      list-style-type: disc;
      padding-left: 20px;
      margin: 0;
  }

  .objectives li,
  .prerequisites li {
      font-size: 14px;
      color: #555;
      margin-bottom: 8px;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .objectives-prerequisites-container {
          flex-direction: column;
          /* Stack vertically on smaller screens */
      }

      .objectives,
      .prerequisites {
          padding: 10px;
      }

      .objectives h3,
      .prerequisites h3 {
          font-size: 16px;
      }

      .objectives li,
      .prerequisites li {
          font-size: 12px;
      }
  }

  /* Description Banner Styles */
  .description-banner {
      background-image: url('https://img.freepik.com/free-photo/congratulations-us-young-people-working-call-center-new-deals-is-coming_146671-16375.jpg?ga=GA1.1.691112443.1717062300&semt=ais_hybrid');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 140px 20px 20px 20px;
      /* Adjusted padding to push content down */
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 400px;
  }

      /* Overlay for Better Text Readability */
      .description-banner::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 1;
      }

      /* Details Container Styling */
      .details-container {
          position: relative;
          z-index: 2;
          margin-top: auto;
          border-radius: 10px;
          padding: 20px;
          background-color: rgba(255, 255, 255, 0.9);
          width: 90%;
          margin-left: auto;
          margin-right: auto;
      }

      /* Details Section */
      .details {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 6%;

      }

      .details p {
          font-size: 14px;
          /* margin: 10px 0; */
          color: #333;
          /* Dark text for contrast against white background */
      }

      .details strong {
          color: #333;
      }

      .details-container span {
          color: #333;
      }

      /* Icon Styling */
      .details .icon {
          margin-right: 5px;
          color: #f39c12;
          /* Blue color for icons */
      }

      /* Responsive Design */
      @media (max-width: 768px) {
          .details {
              display: flex;
              align-items: flex-start;
              flex-direction: column;
              gap: 1;

          }

          .description-banner {
              padding: 100px 15px 15px 15px;
              min-height: 200px;
          }

          .details-container {
              width: 95%;
          }

          .details p {
              font-size: 12px;
              margin: 5px 0;
          }
      }

  



  /* Container for Modules */
  .modulegrid {
      display: flex;
      gap: 1rem;
      justify-content: center;
      align-items: stretch;
      /* Ensure all modules stretch to the same height */
      margin-top: 2rem;
      flex-wrap: wrap;
      /* Allow modules to wrap to the next row */
  }

  /* Module with Background Image */
  .module {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      /* Align content at the bottom */
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      /* Rounded corners */
      min-height: 250px;
      /* Minimum height for the module */
      background-size: cover;
      /* Ensure the image covers the entire module */
      background-position: center;
      /* Center the image */
      background-repeat: no-repeat;
      /* Prevent image repetition */
      padding: 20px;
      /* Add padding for spacing */
      width: 530px;
  }

  /* Text Container */
  .text-container {
      background-color: #ffffffb3;
      /* Light gray background with transparency */
      padding: 10px;
      /* Add padding for spacing */
      border-radius: 4px;
      /* Rounded corners */
  }

  /* Text Styling */
  .module h4 {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      /* Dark text color */
      margin: 0 0 5px 0;
      /* Space between title and content */
  }

  .module p {
      font-size: 14px;
      color: #555;
      /* Slightly lighter text color */
      margin: 0;
      line-height: 1.5;
  }

  /* Overlay for Better Text Readability */
  .module::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      /* Dark overlay */
      z-index: 1;
      /* Place overlay above the image but below the content */
      border-radius: 8px;
      /* Rounded corners */
  }

  /* Ensure Text is Above the Overlay */
  .text-container {
      position: relative;
      z-index: 2;
      /* Place text above the overlay */
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .modulegrid {
          flex-direction: column;
          /* Stack modules vertically on smaller screens */
          align-items: center;
          /* Center modules horizontally */
      }

      .module {
          min-height: 150px;
          /* Smaller height for smaller screens */
          padding: 15px;
      }

      .text-container {
          padding: 8px;
          /* Smaller padding for smaller screens */
      }

      .module h4 {
          font-size: 14px;
          /* Smaller font size for smaller screens */
      }

      .module p {
          font-size: 12px;
          /* Smaller font size for smaller screens */
      }
  }

  @media (max-width: 550px) {
      .module {
          width: 100%;
          /* Full width for smaller screens */
          padding: 10px;
      }
  }

  /* Details Container */
  .details-container {
      background-color: #ffffffb3;
      /* White background */
      border-radius: 10px;
      /* Rounded corners */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      /* Subtle shadow */
      padding: 20px;
      /* Add padding for spacing */
  }

  /* Details Section */
  .details p {
      display: flex;
      align-items: center;
      /* Align icon and text vertically */
      font-size: 14px;
      color: #333;
      /* Dark text color */
      margin: 10px 0;
      /* Space between items */
  }

  .details strong {
      margin-left: 10px;
      /* Space between icon and text */
      color: #2c3e50;
      /* Darker color for emphasis */
  }

  /* Icons */
  .icon {
      font-size: 16px;
      /* Icon size */
      color: #f39c12;
      /* Icon color (blue) */
      width: 20px;
      /* Fixed width for alignment */
      text-align: center;
      /* Center the icon */
  }

  /* Hover Effect */
  .details p:hover {
      transform: translateX(5px);
      /* Slight move on hover */
      transition: transform 0.2s ease;
      /* Smooth transition */
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .details p {
          font-size: 12px;
          /* Smaller font size for smaller screens */
      }

      .icon {
          font-size: 14px;
          /* Smaller icon size for smaller screens */
      }
  }

  .details strong {
      margin-right: 5px;
      /* Add space after the colon */
  }

  /* Schedule Container */
  .schedule-container {
      width: 100%;
      margin-top: 20px;
      /* Space below the table */
  }

  /* Schedule Table */
  .schedule-table {
      width: 100%;
      border-collapse: collapse;
      /* Remove space between cells */
      background-color: #ffffff;
      /* White background */
      border-radius: 10px;
      /* Rounded corners */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      /* Subtle shadow */
  }

  /* Table Header */
  .schedule-table thead th {
      background-color: #000;
      /* Black background for header */
      color: #ffffff;
      /* White text for header */
      font-size: 14px;
      font-weight: bold;
      padding: 15px;
      /* Add padding for spacing */
      text-align: left;
      /* Align text to the left */
  }

  /* Table Body */
  .schedule-table tbody td {
      font-size: 14px;
      color: #333;
      /* Dark text color */
      padding: 15px;
      /* Add padding for spacing */
      border-bottom: 1px solid #e0e0e0;
      /* Light border between rows */
  }

  /* Icons */
  .icon {
      font-size: 14px;
      /* Icon size */
      margin-right: 8px;
      /* Space between icon and text */
      color: #f39c12;
      /* White color for icons in the header */
  }

  /* Hover Effect */
  .schedule-table tbody tr:hover {
      background-color: #f5f5f5;
      /* Light gray background on hover */
      transition: background-color 0.2s ease;
      /* Smooth transition */
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .schedule-table thead th {
          font-size: 12px;
          /* Smaller font size for smaller screens */
          padding: 10px;
          /* Smaller padding for smaller screens */
      }

      .schedule-table tbody td {
          font-size: 12px;
          /* Smaller font size for smaller screens */
          padding: 10px;
          /* Smaller padding for smaller screens */
      }

      .icon {
          font-size: 12px;
          /* Smaller icon size for smaller screens */
      }
  }

  @media (max-width: 420px) {

      /* Stack table rows vertically on very small screens */
      .schedule-table,
      .schedule-table thead,
      .schedule-table tbody,
      .schedule-table th,
      .schedule-table td,
      .schedule-table tr {
          display: block;
          /* Change table elements to block for stacking */
      }

      .schedule-table thead {
          display: none;
          /* Hide the header on very small screens */
      }

      .schedule-table tbody tr {
          margin-bottom: 15px;
          /* Add space between rows */
          border: 1px solid #e0e0e0;
          /* Add border to rows */
          border-radius: 8px;
          /* Rounded corners for rows */
          padding: 10px;
          /* Add padding inside each row */
          background-color: #ffffff;
          /* White background for each row */
      }

      .schedule-table tbody td {
          text-align: right;
          /* Align text to the right */
          padding-left: 46%;
          /* Add space for labels */
          position: relative;
          border-bottom: none;
          /* Remove bottom border */
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .schedule-table tbody td::before {
          content: attr(data-label);
          /* Add data-label attribute as pseudo-element */
          position: absolute;
          left: 10px;
          width: 45%;
          text-align: left;
          /* Align labels to the left */
          font-weight: bold;
          color: #000;
          /* Label text color */
      }

      /* Add icons to the labels */
      .schedule-table tbody td::before {
          display: flex;
          align-items: center;
          gap: 8px;
          /* Space between icon and label text */
      }

      /* Add icons for each label */
      .schedule-table tbody td[data-label="Batch"]::before {
          content: "👥 Batch";
          /* Icon for Batch */
      }

      .schedule-table tbody td[data-label="Start Date"]::before {
          content: "📅 Start Date";
          /* Icon for Start Date */
      }

      .schedule-table tbody td[data-label="Schedule"]::before {
          content: "⏰ Schedule";
          /* Icon for Schedule */
      }

      .schedule-table tbody td[data-label="Mode"]::before {
          content: "💻 Mode";
          /* Icon for Mode */
      }

      .schedule-table tbody td[data-label="Status"]::before {
          content: "ℹ️ Status";
          /* Icon for Status */
      }

      /* Remove padding and adjust alignment for the last cell */
      .schedule-table tbody td:last-child {
          border-bottom: none;
      }
  }