/* Course Actions */
.course-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.course-actions .btn {
  flex: 1;
}
/* Course Details Page Specific Styles */
.course-details-section {
  padding: var(--space-2xl) 0;
}
.course-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.course-media {
  position: sticky;
  top: var(--space-xl);
}
.course-main-image {
  position: relative;

  background: var(--grad);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}
.course-image-placeholder img.course-cover-img{

  height:100%;
  object-fit:cover;
  border-radius:var(--radius-lg);
  display:block;
}
.course-badges {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
}

.course-badge {
  background: var(--grad);
  color: var(--white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.preview-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--muted);
}
.preview-item:hover,
.preview-item.active {
  background: rgba(65,105,225,.1);
  border-color: var(--primary);
  color: var(--primary);
}
.course-quick-info {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: var(--space-xl);
}
.course-quick-info h3 {
  margin: 0 0 var(--space-lg) 0;
  color: var(--white);
}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.feature-item i {
  color: var(--primary);
  font-size: 1.25rem;
  width: 24px;
  flex-shrink: 0;
}
.feature-item div {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.feature-item strong {
  color: var(--white);
  font-size: var(--font-sm);
}
.feature-item span {
  color: var(--muted);
  font-size: var(--font-sm);
}
.course-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.course-header {
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: var(--space-xl);
}
.course-header h1 {
  margin: var(--space-sm) 0 var(--space-md) 0;
  color: var(--white);
  font-size: var(--font-3xl);
  line-height: 1.2;
}
.course-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.course-stats .stat {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--muted);
  font-size: var(--font-sm);
}
.course-stats .stat i {
  color: var(--primary);
}
.course-instructor {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: var(--space-xl);
}
.course-instructor h3 {
  margin: 0 0 var(--space-lg) 0;
  color: var(--white);
}
.instructor-card {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.instructor-avatar {
  width: 64px;
  height: 64px;
  background: var(--grad);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.instructor-info h4 {
  margin: 0 0 var(--space-xs) 0;
  color: var(--white);
}
.instructor-info p {
  margin: 0 0 var(--space-sm) 0;
  color: var(--muted);
}
.instructor-credentials {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.credential {
  background: rgba(65,105,225,.15);
  color: var(--primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 500;
}
.instructor-bio {
  color: var(--muted);
  line-height: 1.6;
  font-size: var(--font-sm);
}
.course-pricing-section {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: var(--space-xl);
}
.course-includes h3 {
  margin: 0 0 var(--space-lg) 0;
  color: var(--white);
}
.includes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}
.include-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--muted);
  font-size: var(--font-sm);
}
.include-item i {
  color: var(--success);
  flex-shrink: 0;
}
.guarantee-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--success);
  font-size: var(--font-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: rgba(34,197,94,.1);
  border-radius: var(--radius);
}
/* Curriculum Styles */
.curriculum-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.curriculum-header {
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: var(--space-lg);
}
.curriculum-header h3 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--white);
}
.curriculum-stats {
  color: var(--muted);
  font-size: var(--font-sm);
}
.curriculum-modules {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.module-item {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  overflow: hidden;
}
.module-header {
  padding: var(--space-lg);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}
.module-header:hover {
  background: rgba(255,255,255,.05);
}
.module-info h4 {
  margin: 0 0 var(--space-xs) 0;
  color: var(--white);
}
.module-duration {
  color: var(--muted);
  font-size: var(--font-sm);
}
.toggle-icon {
  color: var(--muted);
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}
.module-content {
  padding: var(--space-lg);
  display: none;
  border-top: 1px solid rgba(255,255,255,.05);
}
.lesson-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.lesson-item:last-child {
  border-bottom: none;
}
.lesson-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--muted);
  font-size: var(--font-sm);
}
.lesson-info i {
  color: var(--primary);
}
.lesson-duration {
  color: var(--muted);
  font-size: var(--font-sm);
}
/* Related Courses */
.related-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
}

/*//description*/
.rich-content img { max-width: 100%; height: auto; }
.rich-content h1, .rich-content h2, .rich-content h3 { color: var(--white); margin: 1.25rem 0 .5rem; }
.rich-content p, .rich-content li { color: var(--muted); line-height: 1.7; }
.rich-content a { color: var(--primary); text-decoration: underline; }
.rich-content ul, .rich-content ol { padding-left: 1.25rem; margin: .75rem 0; }
.rich-content blockquote { border-left: 3px solid rgba(255,255,255,.15); padding-left: .75rem; color: var(--muted); }


/*faq*/
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.faq-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--white);
  font-weight: 600;
  text-align: left;
}

.faq-q:hover { background: rgba(255,255,255,.04); }

.faq-toggle-icon {
  font-size: 1.25rem;
  color: var(--muted);
  transition: transform .2s ease, color .2s ease;
}

.faq-item.open .faq-toggle-icon {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  border-top: 1px solid rgba(255,255,255,.06);
}

.faq-item.open .faq-a {
  max-height: 500px; /* large enough cap for smooth open */
}

.faq-a p {
  margin: 0;
  padding: var(--space-lg);
  color: var(--muted);
  line-height: 1.7;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.syllabus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Maintain responsiveness */
  gap: 1.5rem; /* Slightly increased gap for better separation */
  margin-top: 1.5rem;
}

.syllabus-item {
  display: flex;
  align-items: flex-start; /* Align icon and text at the start */
  padding: 1rem;
  background-color: #1a202c; /* Slightly lighter dark background for the item card */
  border-radius: 8px; /* Rounded corners for a softer look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effects */
}

.syllabus-item:hover {
  transform: translateY(-3px); /* Lift effect on hover */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

.syllabus-icon {
  color: #22c55e; /* Vibrant green check */
  margin-right: 0.75rem; /* More space between icon and text */
  font-size: 1.5rem; /* Larger icon for better visibility */
  flex-shrink: 0; /* Prevent icon from shrinking */
  line-height: 1; /* Ensure consistent vertical alignment */
}

.syllabus-text {
  color: #e5e7eb; /* Near-white text for contrast */
  font-weight: 500;
  line-height: 1.4; /* Improve readability for longer text */
}

.text-muted {
  color: #6b7280; /* Muted gray for no content message */
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}
/* Base Modal Styles */
.course-inquiry-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.course-inquiry-modal:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

.course-inquiry-modal[hidden] {
  display: none;
}

/* Sheet (Modal Content) Styles */
.course-inquiry-sheet {
  background-color: #2c2c3e;
  color: #e0e0f0;
  border-radius: 12px;
  padding: 20px; /* Reduced padding */
  position: relative;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid #061d21;
  transform: translateY(-20px) scale(0.95);
  transition: transform 0.3s ease;
}

.course-inquiry-modal:not([hidden]) .course-inquiry-sheet {
  transform: translateY(0) scale(1);
}

/* Close Button */
.course-inquiry-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.8em;
  color: #fff;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1;
}

.course-inquiry-close:hover {
  background-color: rgba(187, 134, 252, 0.2);
  color: #e0baff;
}

/* Header */
.course-inquiry-head {
  padding-bottom: 15px; /* Reduced padding */
  border-bottom: 1px solid #4a148c;
  margin-bottom: 20px; /* Reduced margin */
}

.course-inquiry-head h3 {
    color: #fff;
  font-size: 1.6em; /* Reduced title size */
  text-align: center;
  margin: 0;
}

/* EmployeeForm Elements */
.course-inquiry-form-row {
  margin-bottom: 12px; /* Reduced margin */
}

.course-inquiry-form-row label {
  display: block;
  margin-bottom: 6px; /* Reduced margin */
  font-weight: bold;
  color: #e0e0f0;
  font-size: 0.95em; /* Slightly smaller label */
}

.course-inquiry-input {
  width: 100%;
  padding: 10px 12px; /* Reduced padding */
    border: 1px solid #061d21;
  border-radius: 6px; /* Reduced radius */
  background-color: #383850;
  color: #e0e0f0;
  font-size: 0.95em; /* Reduced input text size */
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.course-inquiry-input:focus {
  border-color: #bb86fc;
  box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.4); /* Reduced shadow */
  outline: none;
}

.course-inquiry-input::placeholder {
  color: #a0a0b0;
}

textarea.course-inquiry-input {
  resize: vertical;
  min-height: 80px; /* Reduced min-height */
}

/* EmployeeForm Actions (Buttons) */
.course-inquiry-form-actions {
  padding-top: 20px; /* Reduced padding */
  border-top: 1px solid #4a148c;
  margin-top: 20px; /* Reduced margin */
  text-align: right;
}

.course-inquiry-btn {
  padding: 10px 20px; /* Reduced padding */
  border-radius: 6px; /* Reduced radius */
  cursor: pointer;
  font-size: 1em; /* Reduced button text */
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.course-inquiry-btn-primary {
  background-color:var(--grad);
  color: #1a1a2e;
  border: none;
  box-shadow: 0 5px 15px rgba(187, 134, 252, 0.4); /* Reduced shadow */
}

.course-inquiry-btn-primary:hover {
  background-color: #9c5ce6;
  transform: translateY(-2px); /* Reduced lift */
  box-shadow: 0 6px 20px rgba(187, 134, 252, 0.6);
}

.course-inquiry-btn-primary i {
  margin-right: 6px; /* Reduced spacing */
}

/* Alert Messages (Success/Error) */
.course-inquiry-alert {
  padding: 10px 15px; /* Reduced padding */
  margin-bottom: 10px; /* Reduced margin */
  border-radius: 6px; /* Reduced radius */
  font-size: 0.9em; /* Reduced font */
  line-height: 1.4;
}

.course-inquiry-alert-success {
  background-color: #4CAF50;
  color: #ffffff;
  border: 1px solid #388E3C;
}

.course-inquiry-alert-danger {
  background-color: #f44336;
  color: #ffffff;
  border: 1px solid #D32F2F;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .course-inquiry-sheet {
    max-width: 90%;
    margin: 15px auto;
    padding: 15px;
  }
  .course-preview-items {
 margin-top:10px;
}


  .course-inquiry-head h3 {
    font-size: 1.4em;
  }

  .course-inquiry-btn {
    width: 100%;
    margin-top: 10px;
    font-size: 0.95em;
  }
}

@media (max-width: 480px) {
  .course-inquiry-sheet {
    padding: 15px;
  }
.course-preview-items {
 margin-top:10px;
}

  .course-inquiry-head h3 {
    font-size: 1.2em;
  }

  .course-inquiry-close {
    top: 8px;
    right: 8px;
    font-size: 1.5em;
  }
}
@media (max-width: 1024px) {
  .course-details-grid {
    grid-template-columns: 1fr; /* Stack columns on tablets */
    gap: var(--space-xl);
  }

  .course-media {
    position: static; /* Remove sticky behavior on smaller screens */
    top: auto;
  }

  .course-main-image {
    height: 300px; /* Adjust image height for tablets */
  }

  .course-quick-info,
  .course-pricing-section {
    padding: var(--space-lg); /* Slightly reduce padding */
  }

  .syllabus-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Adjust syllabus grid for tablets */
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-xl) 0; /* Adjust section padding */
  }

  .course-main-image {
    height: 250px; /* Further adjust image height for smaller tablets/large phones */
  }

  .course-header h1 {
    font-size: var(--font-2xl); /* Adjust title size */
  }

  .course-actions {
    flex-direction: column; /* Stack action buttons */
    gap: var(--space-sm);
  }

  .course-actions .btn {
    width: 100%; /* Make buttons full width */
  }

  .tabs-nav {
    flex-wrap: wrap; /* Allow tabs to wrap on multiple lines */
    justify-content: center;
    gap: var(--space-sm);
  }

  .tab-btn {
    flex-grow: 1; /* Allow tab buttons to grow */
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-sm);
  }

  .curriculum-header h3,
  .course-quick-info h3,
  .course-instructor h3 {
    font-size: var(--font-xl); /* Adjust heading sizes */
  }

  .module-header,
  .faq-q {
    padding: var(--space-md); /* Adjust module and FAQ header padding */
  }

  .lesson-item {
    padding: var(--space-sm) 0; /* Adjust lesson item padding */
  }

  .includes-grid {
    grid-template-columns: 1fr; /* Stack includes on mobile */
  }

  .syllabus-grid {
    grid-template-columns: 1fr; /* Stack syllabus items on mobile */
  }
}

@media (max-width: 480px) {
  .course-main-image {
    height: 200px; /* Smallest image height for mobile */
    margin-bottom: var(--space-md);
  }

  .course-header h1 {
    font-size: var(--font-xl); /* Smaller title for very small screens */
  }

  .course-badge {
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--font-2xs);
  }

  .preview-item {
    padding: var(--space-sm);
    font-size: var(--font-sm);
  }
.course-preview-items {
 margin-top:10px;
}

  .feature-item strong,
  .feature-item span,
  .include-item span,
  .lesson-info span,
  .lesson-duration,
  .curriculum-stats,
  .module-duration {
    font-size: var(--font-sm); /* Ensure readability of text */
  }

  .price-current {
    font-size: var(--font-2xl); /* Adjust price size */
  }
  .price-original {
    font-size: var(--font-lg);
  }

  .course-quick-info,
  .course-pricing-section,
  .course-instructor {
    padding: var(--space-md); /* Reduce padding on smallest screens */
  }

  .instructor-card {
    flex-direction: column; /* Stack instructor info */
    align-items: center;
    text-align: center;
  }

  .instructor-avatar {
    margin-bottom: var(--space-md);
  }

  .instructor-credentials {
    justify-content: center; /* Center credentials */
  }
}

/* Ensure rich content responsiveness */
.rich-content img {
  max-width: 100%;
  height: auto;
}
.rich-content iframe,
.rich-content video {
  max-width: 100%;
  height: auto;
}