/* -------------------------------------------------------------------------- */
/*                            intern_changes.css                              */
/* -------------------------------------------------------------------------- */

/* ==========================================================================
   SECTION: Enrollment Options (#training_options)
   --------------------------------------------------------------------------
   IMPROVEMENT: Improves responsive layout and column behavior.
   - Ensures equal height columns
   - Fixes flex wrapping for smaller screens
   ========================================================================== */

#training_options .row {
  display: flex;
  flex-wrap: wrap;
}

#training_options .col-md-4 {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

/* ==========================================================================
   SECTION: Pricing Cards (.pricing)
   --------------------------------------------------------------------------
   - Overrides inline 'height: 70vh' with 'height: 100%' for compact fit.
   - Enforces equal height columns via flexbox.
   - Pins buttons to bottom using flex-grow and margin-auto.
   ========================================================================== */

.pricing {
  border: 1px solid #eb5b19 !important;
  /* Updated border color */
  border-radius: 8px;
  box-shadow: 2px 2px 8px #eb5b19 !important;
  /* Updated box shadow */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  text-align: center;
  height: 100% !important;
  /* Critical: Overrides inline height: 70vh */
  background-color: #fff;
  min-height: auto !important;
}

.pricing .pricing-title {
  font-weight: bold;
  min-height: 50px;
  /* Ensure title areas are consistent */
  font-size: 1.25rem;
  color: #333;
}

.pricing .pricing-price {
  margin-bottom: 1.5rem;
  color: #1c1a1f;
}

/* Feature Lists inside Pricing Cards */
.pricing .list-unstyled {
  text-align: left !important;
  flex-grow: 1;
  /* Allows the list to take up available space */
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  color: #555;
  margin-bottom: 0;
}

.pricing .list-unstyled li {
  margin-bottom: 0.5rem;
}

/* Pricing Action Buttons */
.pricing .btn {
  width: 100%;
  /* Make buttons full width of the card */
  padding: 0.75rem 1rem;
  font-weight: 500;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
    background-color 0.2s;
  margin-top: auto;
  /* Push button to the bottom */
  background-color: #f23e36;
  border-color: #f23e36;
  color: #fff;
  border-radius: 0.25rem;
  box-shadow: none;
}

.pricing .btn:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background-color: #d9342d;
  /* Darker shade for hover */
  border-color: #d9342d;
  color: #fff;
}

/* Separator Line */
.pricing hr {
  display: none !important;
  /* Visual removal requested by user */
}

/* ==========================================================================
   SECTION: Bootcamp & Features (#bootcamp)
   --------------------------------------------------------------------------
   IMPROVEMENT: Standardizes shadow and border styles for feature widgets.
   ========================================================================== */

#bootcamp .shadow {
  border: 1px solid #eb5b19;
  box-shadow: 2px 2px 8px #eb5b19 !important;
}

/* ==========================================================================
   SECTION: FAQ Accordion (#faq)
   --------------------------------------------------------------------------
   IMPROVEMENT: Implements a "Pill Style" accordion with custom icons.
   - Rounded corners and border for a clean look
   - Blue highlight (#2176c8) for active questions
   - Custom Plus (+) and Minus (-) icons using pseudo-elements
   - Responsive layout fixes for mobile
   ========================================================================== */

/* 1. Base State: All questions (default) */
#faq .accordion .btn-link {
  background-color: #ffffff;
  color: #000000;
  width: 100%;
  text-align: left;
  border-radius: 30px;
  padding: 15px 20px;
  text-decoration: none;
  /* Removes default Bootstrap underline */
  font-weight: 600;
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  /* Optional: adds definition when white */
  transition: all 0.3s ease;
  /* Smooth color transition */
  box-shadow: none !important;
  /* Removes Bootstrap focus blue glow */

  /* Layout properties for icon spacing */
  justify-content: space-between;
  /* Push icon to right */
  gap: 18px;
  /* Space between text and icon */
  white-space: normal;
  /* Allow text wrapping */
  line-height: 1.4;
}

/* 2. Open State: ONLY the clicked/active item */
#faq .accordion .btn-link[aria-expanded="true"] {
  background-color: #2176c8 !important;
  color: #ffffff !important;
  border-color: #2176c8;
}

/* 3. Plus icon (Default/Closed) */
#faq .accordion .btn-link::after {
  content: "+";
  font-size: 22px;
  font-weight: bold;
  margin-left: auto;
  color: #2176c8;
  /* Plus is blue when button is white */
  transition: transform 0.3s ease;

  /* Icon positioning fix */
  flex-shrink: 0;
  /* Icon never shrinks */
  width: 24px;
  text-align: center;
}

/* 4. Minus icon (When Open) */
#faq .accordion .btn-link[aria-expanded="true"]::after {
  content: "−";
  color: #ffffff;
  /* Minus is white when button is blue */
}

/* 5. Clean up: Remove hover effects that might interfere */
#faq .accordion .btn-link:hover {
  text-decoration: none;
  color: #000;
  /* Keeps text black on hover if closed */
}

#faq .accordion .btn-link[aria-expanded="true"]:hover {
  color: #fff;
  /* Keeps text white on hover if open */
}

/* Optional: slightly tighter padding on small screens */
@media (max-width: 576px) {
  #faq .accordion .btn-link {
    padding: 14px 16px;
    font-size: 14px;
  }
}

/* ==========================================================================
   SECTION: Typography & Readability
   --------------------------------------------------------------------------
   IMPROVEMENT: Implements justified text alignment for professional readability
   across Overview, Curriculum, and Benefits sections.
   ========================================================================== */

#program p,
#training_options p,
#curriculum .card-body p,
#bootcamp p,
.course-details p {
  text-align: justify;
}

/* ==========================================================================
   SECTION: Benefits Header (#training_options)
   --------------------------------------------------------------------------
   IMPROVEMENT: Transforms the inline span into a unified H3-style header
   ========================================================================== */

#training_options .lead.text-dark.fw-7,
#training_options h3.text-center {
  display: block;
  text-align: center;
  font-weight: 800 !important;
  margin-bottom: 2.5rem;
  /* Increased spacing */
  font-size: 2.5rem;
  letter-spacing: 0px;
  /* Clean look */
  color: #212529 !important;
  padding-top: 1rem;
  font-family: inherit;
}

/* ==========================================================================
   SECTION: Benefits List Items
   --------------------------------------------------------------------------
   ========================================================================== */

#training_options .column p {
  display: flex;
  align-items: flex-start;
  /* Aligns icon with top of text */
  text-align: left !important;
  /* Left align for list readability */
  margin-bottom: 1.25rem;
  /* Space between items */
  font-size: 1rem;
  color: #555;
  /* Softer text color */
  line-height: 1.5;
}

#training_options .column p img {
  margin-right: 12px;
  /* Gap between icon and text */
  margin-top: 4px;
  /* Optical alignment with text cap-height */
  flex-shrink: 0;
  /* Prevents icon from squishing */
  width: 20px;
  /* Force consistent icon size */
  height: 20px;
}

/* ==========================================================================
   SECTION: Breadcrumb CTA Button
   --------------------------------------------------------------------------
   IMPROVEMENT: Customizes the 'Get In Touch' button in the breadcrumb bar
   with a distinct red attention color.

   ========================================================================== */

.container-fluid.bg-light .btn-earlyrise {
  background-color: #f50101 !important;
  border: 1px solid #f50101 !important;
  color: #fff !important;
  text-decoration: none;
  opacity: 1;
}

.container-fluid.bg-light .btn-earlyrise:hover {
  background-color: #d00000 !important;
  /* Darker shade for hover */
  border-color: #d00000 !important;
  color: #fff !important;
}

/* ==========================================================================
   SECTION: Last Paragraph Text Justification
   --------------------------------------------------------------------------
   IMPROVEMENT: Justifies the last paragraph text for professional readability.
   ========================================================================== */
.space-ptb .col-lg-7 .mt-4 .container {
  text-align: justify;
}

#faq .accordion .card {
  box-shadow: none !important;
  border: none;
  background: transparent;
}

#faq .accordion .card-header {
  background: transparent;
  border: none;
  padding: 5px 0;
}

.course-section .row > div {
  display: flex;
}

.course-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.course-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.space-ptb .col-lg-7 {
  text-align: justify;
}

.mt-4 {
  text-align: justify;
}
/* Bootcamp card alignment fix */
#bootcamp .row > .col-sm-6 {
  display: flex;
}

#bootcamp .shadow {
  display: flex;
  flex-direction: column;
  height: 100%;
}