.elementor-3292 .elementor-element.elementor-element-72b468b{--display:flex;}.elementor-3292 .elementor-element.elementor-element-a71a52e{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-05e2737 *//* ==============================
   Main Container
============================== */

.main-container {
  max-width: 100%;
  margin: auto;
  padding: 0px 20px;
  background: #f8f9fc;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ==============================
   Breadcrumb
============================== */

.breadcrumb {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  font-size: 14px;

  margin-bottom: 18px;

  color: #777;

}



.breadcrumb a {

  color: #0077b6;

  text-decoration: none;

  font-weight: 500;

  transition: all 0.3s ease;

}



.breadcrumb a:hover {

  color: #48CAE4;

  text-decoration: underline;

}



.breadcrumb span {

  color: #999;

  font-size: 16px;

}



.breadcrumb .current {

  color: #555;

  font-weight: 600;

}
/* ==============================
   Heading Section
============================== */

.heading-section {
  text-align: center;
  margin-bottom: 50px;
  padding: 40px 20px 20px;
}


.heading-section h1 {
  font-size: 36px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
}


.heading-section p {
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.5;
}


.update-note {
  font-size: 14px;
  color: #888;
  margin-top: 10px;
}



/* ==============================
   Chapter Box
============================== */

.chapter-box {

  background: white;
  max-width: 85%;
  margin: auto;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: all 0.3s ease;

}



/* ==============================
   Chapter Header
============================== */

.chapter-header {

  padding: 15px 25px;

  background: linear-gradient(to right, #90E0EF, #fbd780);

  color: #1a1a1a;

  font-size: 22px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0,0,0,0.1);

  display: flex;
  justify-content: space-between;
  align-items: center;

}


.chapter-header:hover {

  background: linear-gradient(to right, #48CAE4, #90E0EF);

  transform: scale(1.02);

  box-shadow: 0 6px 12px rgba(0,0,0,0.25);

}



/* Plus Minus Indicator */

.indicator {

  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.3s ease;

}


.chapter-header:hover .indicator {

  transform: scale(1.2);

}



/* ==============================
   Topics Dropdown
============================== */


.topics {

  padding: 0 20px;

  background: #f0f0f0;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    padding 0.3s ease;

}


.topics.show {

  max-height: 200px;

  padding: 15px 20px;

  opacity: 1;

}



/* ==============================
   Topic Buttons
============================== */


.topics button {

  padding: 10px 18px;

  background: linear-gradient(to right, #ffffff, #fff3cd);

  border: 2px solid #fbd780;

  color: #333;

  font-weight: 500;

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.25s ease;

  min-width: 180px;

}



.topics button:hover {

  background: linear-gradient(to right, #48CAE4, #90E0EF);

  color: #fff;

  transform: translateY(-2px) scale(1.02);

  box-shadow: 0 6px 12px rgba(0,0,0,0.15);

}



.topics button.active {

  background: #007bff;

  color: #fff;

  border-color: #007bff;

}



/* ==============================
   Extra Navigation
============================== */

.extra-navigation {

  margin-top: 50px;

  text-align: center;

  padding: 30px 20px;

  background: #f8f9fc;

  border-radius: 12px;

}


.extra-navigation h2 {

  margin-bottom: 25px;

  font-size: 26px;

  color: #222;

  font-weight: 600;

}


/* Navigation Cards */

.nav-cards {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 15px;

}


.nav-card {

  padding: 14px 22px;

  background: #ffffff;

  border: 2px solid #ddd;

  border-radius: 12px;

  text-decoration: none !important;

  color: #333;

  font-weight: 500;

  font-size: 16px;

  transition: all 0.3s ease;

  min-width: 180px;

  display: inline-block;

}


.nav-card,
.nav-card:visited,
.nav-card:hover,
.nav-card:active {

  text-decoration: none;

  color: inherit;

}


.nav-card:hover {

  background: linear-gradient(to right, #48CAE4, #90E0EF);

  color: #fff;

  transform: translateY(-4px) scale(1.03);

  box-shadow: 0 8px 18px rgba(0,0,0,0.15);

}


.nav-card.active {

  background: #007bff;

  color: #fff;

  border-color: #007bff;

  box-shadow: 0 6px 14px rgba(0,0,0,0.15);

}


.nav-card:focus {

  outline: none;

  box-shadow: 0 0 0 3px rgba(72,202,228,0.5);

}



/* ==============================
   Mobile Responsive
============================== */

@media(max-width:600px) {


.heading-section h1 {
  font-size: 26px;
}


.heading-section p {
  font-size: 16px;
}


.chapter-box {
  max-width: 100%;
}


.chapter-header {

  font-size: 18px;
  padding: 14px 18px;

}


.indicator {

  font-size: 26px;

}


.topics button {

  width: 100%;

}


.nav-card {

  width: 100%;
  max-width: 300px;

}


}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-94c1e1f *//* Navigation Section */
.extra-navigation {
  margin-top: 50px;
  text-align: center;
  padding: 30px 20px;
  background: #f8f9fc;
  border-radius: 12px;
}

/* Heading */
.extra-navigation h2 {
  margin-bottom: 25px;
  font-size: 26px;
  color: #222;
  font-weight: 600;
}

/* Card Container */
.nav-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Individual Card */
.nav-card {
  padding: 14px 22px;
  background: #ffffff;
  border: 2px solid #ddd;
  border-radius: 12px;
  text-decoration: none !important; /* force remove */
  color: #333;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
  min-width: 180px;
  display: inline-block; /* 🔥 important fix */
}

/* 🔥 FORCE REMOVE UNDERLINE (important) */
.nav-card,
.nav-card:visited,
.nav-card:hover,
.nav-card:active {
  text-decoration: none;
  color: inherit;
}

/* Hover Effect */
.nav-card:hover {
  background: linear-gradient(to right, #48CAE4, #90E0EF);
  color: #fff;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* Active Page */
.nav-card.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* 🔥 Focus (Accessibility + mobile tap highlight) */
.nav-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(72, 202, 228, 0.5);
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .nav-card {
    width: 100%;
    max-width: 300px;
  }
}/* End custom CSS */