/* =========================================================
   Course Pages — Creative Content Design
   Scoped to .course-course-detaila-inner / .course-details-content
   so nothing outside the 8 "Courses" nav pages is affected.
   ========================================================= */

/* ---------- Hero / intro block ---------- */
.course-course-detaila-inner .details-inner.cd-hero {
  position: relative;
  padding: 34px 34px 30px;
  margin-bottom: 30px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(253, 140, 0, 0.10), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(0, 33, 71, 0.06), transparent 45%),
    #fbfbfd;
  border: 1px solid #f0f0f3;
  overflow: hidden;
}
.course-course-detaila-inner .details-inner.cd-hero::before {
  content: "\f10e";
  font-family: "FontAwesome";
  position: absolute;
  right: 18px;
  top: 6px;
  font-size: 90px;
  line-height: 1;
  color: var(--main-color, #fd8c00);
  opacity: 0.08;
  pointer-events: none;
}
.course-course-detaila-inner .details-inner.cd-hero h1.title,
.course-course-detaila-inner .details-inner.cd-hero h3.title {
  position: relative;
  padding-left: 18px;
  margin-bottom: 16px;
}
.course-course-detaila-inner .details-inner.cd-hero h1.title::before,
.course-course-detaila-inner .details-inner.cd-hero h3.title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--main-color, #fd8c00), #ffb35c);
}
.course-course-detaila-inner .details-inner.cd-hero p:first-of-type {
  font-size: 17px;
  color: var(--heading-color, #002147);
  font-weight: 500;
  line-height: 1.75;
}

/* image frame around the main course thumbnail */
.course-course-detaila-inner .thumb.cd-thumb-frame {
  position: relative;
  margin: 0 0 34px;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--main-color, #fd8c00), var(--heading-color, #002147));
}
.course-course-detaila-inner .thumb.cd-thumb-frame img {
  border-radius: 12px;
  display: block;
  width: 100%;
}

/* small eyebrow label used above section headings */
.cd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--main-color, #fd8c00);
  background: rgba(253, 140, 0, 0.1);
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 12px;
}
.cd-kicker i { font-size: 12px; }

/* ---------- Feature / highlight card grid ---------- */
.cd-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 22px 0 34px;
}
.cd-feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.cd-feature-card {
  position: relative;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  padding: 22px 20px 20px;
  box-shadow: 0 6px 18px rgba(0, 33, 71, 0.05);
  transition: 0.3s ease;
}
.cd-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(0, 33, 71, 0.12);
  border-color: rgba(253, 140, 0, 0.25);
}
.cd-feature-card .cd-icon {
  height: 46px;
  width: 46px;
  min-width: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--main-color, #fd8c00), #ffab3d);
  color: #fff;
  font-size: 19px;
  margin-bottom: 14px;
  box-shadow: 0 8px 16px rgba(253, 140, 0, 0.28);
}
.cd-feature-card h6 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--heading-color, #002147);
  margin-bottom: 6px;
}
.cd-feature-card p {
  font-size: 14px;
  color: var(--paragraph-color, #565872);
  margin-bottom: 0;
  line-height: 1.65;
}

/* ---------- Exam / topic comparison cards ---------- */
.cd-exam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 22px 0 30px;
}
.cd-exam-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eef0f4;
  box-shadow: 0 6px 18px rgba(0, 33, 71, 0.05);
  display: flex;
  flex-direction: column;
  transition: 0.3s ease;
}
.cd-exam-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(0,33,71,.12); }
.cd-exam-card .cd-exam-head {
  padding: 16px 20px;
  background: linear-gradient(120deg, var(--heading-color, #002147), #143b6b);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-exam-card .cd-exam-head i {
  height: 30px;
  width: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.cd-exam-card .cd-exam-head span {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.cd-exam-card .cd-exam-body { padding: 18px 20px 20px; flex: 1; }
.cd-exam-card .cd-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  padding: 7px 0;
  border-bottom: 1px dashed #edeef2;
}
.cd-exam-card .cd-stat-row:last-of-type { border-bottom: 0; }
.cd-exam-card .cd-stat-row .cd-stat-label {
  color: var(--paragraph-color, #565872);
  font-weight: 500;
}
.cd-exam-card .cd-stat-row .cd-stat-value {
  color: var(--heading-color, #002147);
  font-weight: 700;
  text-align: right;
}
.cd-exam-card .cd-exam-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--paragraph-color, #565872);
  background: #fbf7f0;
  border-left: 3px solid var(--main-color, #fd8c00);
  padding: 9px 12px;
  border-radius: 0 8px 8px 0;
  line-height: 1.6;
}

/* difficulty rating variants on the head */
.cd-exam-card.diff-veryhigh .cd-exam-head { background: linear-gradient(120deg, #a3001e, #d81e3f); }
.cd-exam-card.diff-high .cd-exam-head { background: linear-gradient(120deg, #b25400, var(--main-color, #fd8c00)); }
.cd-exam-card.diff-moderate .cd-exam-head { background: linear-gradient(120deg, #0d7a4f, #1DC295); }

/* ---------- Tag / pill rows (subjects, companies, exams, difficulty) ---------- */
.cd-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 28px;
}
.cd-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 600;
  background: #fff;
  border: 1px solid #e9ebf1;
  color: var(--heading-color, #002147);
  box-shadow: 0 4px 10px rgba(0,33,71,.05);
}
.cd-tag i { color: var(--main-color, #fd8c00); font-size: 12px; }
.cd-tag.tag-solid {
  background: linear-gradient(120deg, var(--main-color, #fd8c00), #ffab3d);
  border-color: transparent;
  color: #fff;
}
.cd-tag.tag-solid i { color: #fff; }
.cd-tag.tag-navy { background: var(--heading-color, #002147); border-color: transparent; color: #fff; }
.cd-tag.tag-navy i { color: #ffb35c; }
.cd-tag.diff-veryhigh { background: #fdecec; border-color: #f6c6c6; color: #a3001e; }
.cd-tag.diff-veryhigh i { color: #a3001e; }
.cd-tag.diff-high { background: #fff2e2; border-color: #ffd8a3; color: #b25400; }
.cd-tag.diff-high i { color: #b25400; }
.cd-tag.diff-moderate { background: #e8f8f1; border-color: #b7ecd6; color: #0d7a4f; }
.cd-tag.diff-moderate i { color: #0d7a4f; }

/* ---------- Topic cards (paragraph-heavy pages like IPM) ---------- */
.cd-topic-cards { margin: 24px 0 30px; }
.cd-topic-card {
  position: relative;
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(0, 33, 71, 0.05);
}
.cd-topic-card .cd-topic-num {
  min-width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(253, 140, 0, 0.1);
  color: var(--main-color, #fd8c00);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-topic-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--heading-color, #002147);
  margin-bottom: 8px;
}
.cd-topic-card p { margin-bottom: 8px; }
.cd-topic-card p:last-child { margin-bottom: 0; }
.cd-topic-card:nth-child(even) { background: #fbf9f5; }

/* ---------- Career / salary cards (CLAT) ---------- */
.cd-career-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0 30px;
}
.cd-career-card {
  position: relative;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  padding: 18px 20px;
  padding-right: 100px;
  box-shadow: 0 6px 18px rgba(0, 33, 71, 0.05);
  transition: 0.3s ease;
}
.cd-career-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,33,71,.1); }
.cd-career-card h6 {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading-color, #002147);
  margin-bottom: 4px;
}
.cd-career-card p { font-size: 13.5px; color: var(--paragraph-color, #565872); margin: 0; }
.cd-career-card .cd-salary-badge {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--heading-color, #002147), #143b6b);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  min-width: 78px;
}

/* ---------- Generic highlight / callout box ---------- */
.cd-info-highlight {
  position: relative;
  background: linear-gradient(120deg, #fff7ec, #fff);
  border: 1px solid #ffe3b8;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 20px 0 28px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cd-info-highlight i {
  height: 34px;
  width: 34px;
  min-width: 34px;
  border-radius: 9px;
  background: var(--main-color, #fd8c00);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.cd-info-highlight p { margin: 0; font-size: 14.5px; color: var(--heading-color, #002147); font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .cd-feature-grid,
  .cd-feature-grid.cols-2,
  .cd-exam-grid,
  .cd-career-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .cd-feature-grid,
  .cd-feature-grid.cols-2,
  .cd-exam-grid,
  .cd-career-grid {
    grid-template-columns: 1fr;
  }
  .cd-career-card { padding-right: 20px; }
  .cd-career-card .cd-salary-badge {
    position: static;
    transform: none;
    display: inline-block;
    margin-top: 10px;
  }
  .course-course-detaila-inner .details-inner.cd-hero { padding: 24px 20px; }
}