:root {
  font-size: 16px;
}

:root {
  --padding: 8px;
  --color-border: rgb(0, 0, 0);

  --ff: "Iosevka", sans-serif;

  --fTitle: bold clamp(1.5rem/1.4 , 2vw + 1rem, 4rem/1.4) var(--ff);
  --fSubTitle: clamp(1rem/1.4 , 2vw + 1rem, 1.5rem/1.4) var(--ff);
  --fNormal: clamp(1rem/1.4 , 2vw + 0.5rem , 1.3rem/1.4) var(--ff);
  --fSmall: 0.8rem var(--ff);

  --base-font-size: 1rem/1.4 var(--ff);
  --toc-title-size: bold 1.15rem/1.4 var(--ff);

  --subsection-title: bold 1.75rem/1.4 var(--ff);
  --dialog-title: bold 1.75rem/2 var(--ff);
  --dialog-section-title: bold 1.125rem/2 var(--ff);
  --text-font-size: clamp(13px, 2cqi, 16px);
  --card-title-font-size: 16px;
  --card-description-font-size: 14px;
  --section-margin: clamp(64px, 10cqi, 280px);

}

:root {
  --c100: hsl(0, 0%, 0%);
  --c80: hsl(0, 0%, 20%);
  --c70: hsl(0, 0%, 30%);
  --c50: hsl(0, 0%, 50%);
  --c30: hsl(0, 0%, 70%);
  --c0: hsl(0, 0%, 100%);
} @media (prefers-color-scheme: dark) {
:root {
  --c0: hsl(0, 0%, 0%);
  --c30: hsl(0, 0%, 30%);
  --c50: hsl(0, 0%, 50%);
  --c70: hsl(0, 0%, 70%);
  --c80: hsl(0, 0%, 80%);
  --c100: hsl(0, 0%, 100%);
}
}

html {
  scrollbar-gutter: stable;
}

header {
  .navbar, #nav-top-hr {
    /* display: none; */
  }
}

html:has(dialog[open]) {
  overflow: hidden;
}

div, p {
  font: var(----fNormal);
  color: var(--c80);
}

.bundle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 0px;
}

.bundle-info-container {
  flex: 1 0 65%;
  display: flex;
  flex-direction: column;
  /* background-color: rgb(255, 255, 224); */
  justify-content: center;
}

.bundle-sidebar-card {
  flex: 1 0 30%;
  align-self: flex-start;
  position: sticky;
  top: 20px;
  border: 1px solid var(--c50);
  background-color: var(--dimcolor);

}

.bundle-landing-title {
  flex: 1 1 100%;
  text-align: center;
  font: var(--fTitle);
  color: var(--c100);
}

.bundle-landing-subtitle {
  flex: 1 1 100%;
  text-align: center;
  font: var(--fSubTitle);
  color: var(--c50);
}

.bundle-divider-line {
  flex: 1 1 100%;
  width: 100%;
}

.bundle-landing-introduction, .bundle-landing-infographic {
  flex: 1 1 100%;
  text-align: center;
  padding: var(--padding);
  font: var(--fNormal);
}

.bundle-landing-infographic > img{
    border: 1px solid var(--linecolor);
}

.bundle-landing-badge-container, .bundle-landing-rating-student-count-container,
.bundle-landing-general-info-container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  margin: 2px 0px;
  justify-content:center;
  gap: 8px;
  width: 100%;
}

.bundle-landing-badge {
  border: 1px solid var(--color-border);
  padding: 1px 5px;
  border-radius: 10px;
  font: var(--fSmall);
  background-color: var(--c100);
  color: var(--c0);
}

.bundle-landing-badge-Bestseller, .bundle-landing-badge-bestseller {
  background-color: yellow;
  color: black;
}

.bundle-landing-badge-Beginner,
.bundle-landing-badge-beginner,
.bundle-landing-badge-Intermediate,
.bundle-landing-badge-intermediate,
.bundle-landing-badge-enrolled {
  background-color: rgb(59, 255, 88);
  color: black;
}

.bundle-landing-badge-Advance,
.bundle-landing-badge-advance {
  background-color: rgb(255, 0, 0);
  color: white;
}

.bundle-rating-star-container {

}

.bundle-rating-star {
  color: red;
}

.bundle-landing-section-title {
  margin: 24px 0px;
  font: var(--subsection-title);
  text-align: left;
  color: var(--c100);
}

.bundle-landing-highlights-container,
.bundle-landing-learnings-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0px 8px;
  flex: 1 1 100%;
}

.bundle-landing-learnings-container {
  padding: 4px;
  /* border: 1px solid black; */
  /* background-color: rgb(243, 243, 243); */
}

.bundle-landing-highlight {
  flex: 1 0 30%;
  max-width: 50%;
  /* padding: 1px 0px; */
  text-align: left;
  display: inline-flex;
  margin: 4px 0px;
  font: var(--fNormal);
}

.bundle-landing-videomessage-container {
  flex: 1 1 100%;
}

.bundle-landing-icon {
  display: inline-flex;
  padding-top: 2px;
}

.bundle-landing-learning {
  display: inline-flex;
  flex: 1 1 45%;
  max-width: 50%;
  margin: 4px 0px;
}

.bundle-course-collection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1 1 100%;
  justify-content: center;
}

.bundle-hw-collection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1 1 100%;
  justify-content: center;
}

.bundle-course-card, .bundle-course-card-showcase {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex: 1 1 20%;
  max-width: 25%;
  /* border-radius: 10px; */
  justify-content: flex-start;
  align-content: flex-start;
  /* box-shadow: 0px 0px 2px 0px var(--prebgcolor); */
  border: 1px solid var(--linecolor);
  background-color: var(--dimcolor);
  transition-duration: 0.5s;
  /* max-height: 400px; */
  font: var(--fSmall);
  img {
    display: block;
    /* border-radius: 10px 10px 0 0; */
  }
}

.bundle-hw-card {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  flex: 1 1 30%;
  max-width: 33%;
  justify-items: center;
  justify-content: flex-start;
  align-content: flex-start;
  /* border: 1px solid var(--linecolor); */
  font: var(--fSmall);
  img {
    margin: auto;
    flex: 1 1 100%;
    /* border: 1px solid var(--linecolor); */
    /* border-radius: 50%; */
    max-width: 100%;
  }
  div {
    text-align: center;
    flex: 1 1 100%;
  }
  .bundle-hw-card-title {
    font-size: 16px;
    font-weight: bold;
  }

  .bundle-hw-card-description {
    font-size: 12px;
    padding: 12px;
  }
}

.bundle-course-card:hover {
  box-shadow: 0px 0px 4px 0px var(--prebgcolor);
  cursor: pointer;
  transform: scale(1.025);
}

.bundle-course-card-showcase:hover {
  box-shadow: 0px 0px 4px 0px var(--prebgcolor);
  cursor: pointer;
  transform: scale(1.025);
}

.bundle-course-card-cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.bundle-course-card-title {
  font-weight: bold;
  margin: 8px 0px;
  padding: 0px 8px;
  font: var(--fNormal);
  font-weight: bold;
  text-align: center;
}

.bundle-course-card-description {
  font: var(--fSmall);
  padding: 0px 8px 8px 8px;
  text-align: center;

}

.bundle-course-sample-certificate {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  padding: 8px;
  justify-content: center;

  figure {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

.bundle-course-sample-certificate-caption {
  flex: 1 1 100%;
  padding-top: 8px;
  min-width: 100%;
  text-align: center;
}

:focus {
    outline: none;
}

.bundle-landing-course-details-dialog-container {
  width: 600px;
  max-height: 90vh;
  padding: 0px;
  background-color: var(--bgcolor);
  color: var(--fontcolor);
}

.bundle-landing-course-details-dialog-container::backdrop {
  background-color: hsl(0 0% 0% / 0.5);
}

.bundle-landing-dialog-details {
  display: flex;
  flex-wrap: wrap;
}

.bundle-landing-dialog-details-description {
  flex: 1 1 100%;
  min-width: 100%;
}

.bundle-landing-dialog-nav, .bundle-landing-dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: var(--theme-primary);
  text-align: center;
  cursor: pointer;
  color: var(--fontcolor);
  font-weight: bold;
  text-decoration: none !important;
}

.bundle-landing-dialog-nav {
  border-bottom: 1px solid var(--linecolor);
}

.bundle-landing-dialog-footer {
  position: sticky;
  bottom: 0px;
  border-top: 1px solid var(--linecolor);
}

.bundle-landing-dialog-footer:hover {
  text-decoration: none;
}

.bundle-landing-course-details-dialog-title {
  flex: 1 1 100%;
  min-width: 100%;
  text-align: center;
  color: var(--c100);
  font: var(--dialog-title);
}

.bundle-landing-course-details-dialog-section-container {
  flex: 1 1 100%;
  border: 1px var(--linecolor) solid;
  background-color: var(--dimcolor);
  padding: 16px;
  margin: 8px;
}

.bundle-landing-course-details-dialog-section-title {
  flex: 1 1 100%;
  font: var(--dialog-section-title);
  min-width: 100%;
  color: var(--c80);
  border-bottom: 1px var(--linecolor) solid;
}

.bundle-landing-course-details-dialog-section-description {
  flex: 1 1 100%;
  font: var(--fNormal);
  color: var(--c50);
  min-width: 100%;
  margin: 16px 0px;
}

.bundle-landing-course-details-dialog-section-chapter {
  display: inline-flex;
  font: var(--fNormal);
  min-width: 100%;
  color: var(--chapter);
  /* font-weight: bold; */
}

.bundle-landing-footer-sticky {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--bgcolor);
  position: sticky;
  bottom: 0px;
  align-items: center;
  z-index: 2;
  margin-top: 10px;
  border-top: 1px solid var(--linecolor);
  align-self: flex-start;
  margin: 0px;
  width: 100%;
}

.bundle-landing-footer-sticky-text {
  flex: 1 1 100%;
  margin: 0px;
  padding: 8px 4vw;
  text-align: center;

  font-size: var(--fNormal);
  color: var(--fontcolor);

  b {
    color: var(--fontcolor);
  }
  code {
    font-size: var(--fNormal);
  }
}

.bundle-landing-discount-text {
  /* background-color: var(--theme-primary); */
  padding: 1px 4px;
  color: var(--cafe) !important;
}

.bundle-landing-footer-sticky-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  gap: 4px;
  padding: 8px 0px;
  a {
    text-decoration: none;
    flex: 1 1 100%;
    width: 100%;

    button {
      margin: 0 0 8px 0;
    }
  }
}

.bundle-landing-footer-sticky-cta-button {
  flex: 1 1 100%;
  min-width: 100%;
  height: 42px;
  font-size: var(--fNormal);
  border-radius: 20px;
  padding: 0px 20px;
  background-color: var(--bgcolor);
  border-color: var(--prebgcolor);
}

.bundle-landing-footer-sticky-cta-button:hover {
  background-color: var(--cafe);
}

.bundle-landing-footer-sticky-cta-button:active {
  transform: translateY(1px);
}

.bundle-landing-footer-sticky-cta-button-primary {
  background-color: var(--theme-primary);
}


.bundle-landing-instructors-containter {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  justify-content: center;
  align-items: start;
  min-width: 100%;
}

.bundle-landing-instructor-card {
  flex: 1 1 45%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  /* max-width: 50%; */
}

.bundle-sidebar-card-title {
  flex: 1 1 100%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 8px;
}

.bundle-sidebar-card-subtitle {
  flex: 1 1 100%;
  text-align: center;
  font-size: var(--fNormal);
}

.bundle-landing-instructor-bio-container {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
}

.bundle-landing-instructor-bio-image {
  flex: 1 1 auto;
  max-width: 5rem;
  img {
    border: 1px var(--linecolor) solid;
    border-radius: 50%;
  }
}

.bundle-landing-instructor-bio-text-container {
  flex: 1 1 50%;
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
}

.bundle-landing-instructor-bio-name {
  flex: 1 1 100%;
  font-size: var(--fNormal);
  font-weight: bold;
}

.bundle-landing-instructor-bio-designation, .bundle-landing-instructor-bio-orgs {
  flex: 1 1 100%;
  font-size: var(--fNormal);
  font-weight: bold;
}

.bundle-landing-instructor-bio-details {
  flex: 1 1 100%;
  font-size: var(--fNormal);
}

.bundle-landing-instructor-bio-links-container {
  flex: 1 1 100%;
  display: flex;
}

.bundle-landing-instructor-bio-links {
  margin-right: 4px;
}

.bundle-landing-todo {
  border: 1px dotted black;
  background-color: azure;
}

.bundle-sidebar-highlights-container {
  display: flex;
  padding: 16px;
  .bundle-landing-highlight {
    min-width: 100%;
    margin: 2px 0px;
  }
}

.bundle-landing-sidebar-cta-hr {
  width: 90%;
}

.bundle-landing-sidebar-cta {
  display: flex;
}

.bundle-landing-faqs {

}

.bundle-landing-faq-q, .bundle-landing-faq-a {
  margin: 0px;
  padding: 0px;
}

.bundle-landing-faq-a {
  color: var(--c50);
}

.bundle-landing-toc-entry {
  /* border: 1px solid var(--linecolor); */
  margin: 8px 0px;
}

.bundle-landing-toc-content {
  margin: var(--padding);
}

.bundle-landing-course-details-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  align-items: center;
}

.bundle-landing-course-details {
  border: 1px solid var(--linecolor);
  margin: 16px 0px;
  background-color: var(--dimcolor);
}

.bundle-landing-course-details-cover {
  flex: 1 1 40%;

  img {
    border-radius: 10px;
  }
}

.bundle-landing-course-details-highlights {
  flex: 1 1 50%;
}

.bundle-landing-toc-entry-details > summary {
  padding: var(--padding);
  text-align: center;
}

.bundle-landing-toc-entry-details:hover > summary {
  background-color: var(--theme-primary);
}

.bundle-landing-toc-entry-details[open] > summary {
  border: none;
}

.bundle-landing-toc-entry-details-title {
  font-weight: bold;
  background-color: var(--c70);
  color: var(--c0);
  padding: var(--padding);
}

.bundle-landing-toc-entry-details-chapter-list {
  padding-left: var(--padding);
}

.bundle-landing-toc-entry-title {
  flex: 1 1 100%;
  background-color: var(--theme-primary);
  display: block;
  font: var(--toc-title-size);
  color: var(--c100) !important;
  text-decoration: none;
  position: sticky;
  top: 0px;
  padding: 8px;
  border-bottom: 1px solid var(--linecolor);
}

.bundle-landing-toc-entry-title:visited {
  color: var(--c100);
}

@media screen and (max-width: 771px) {
  .bundle-info-container,
  .bundle-sidebar-card,
  .bundle-course-card,
  .bundle-hw-card,
  .bundle-landing-highlight,
  .bundle-landing-learning,
  .bundle-landing-instructor-card,
  .bundle-landing-course-details-dialog-container  {
    min-width: 100%;
  }

  .bundle-landing-course-details-dialog-container {
    max-height: 90vh;
  }

  .bundle-sidebar-card {
    display: none;
  }

  .bundle-course-card {
    min-width: 47%;
  }

  .bundle-landing-course-details-cover {
    min-width: 100%;
  }

  .bundle-landing-course-details-highlights {
    min-width: 100%;
  }

  .bundle-course-card-showcase {
    min-width: 100%;
  }
}

.bundle-landing-yt-container {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  margin: 8px;
}

@media (min-width: 771px) and (max-width: 1366px) {
  .bundle-container {
    width: 100%;
    margin: auto;
  }

  .bundle-info-container {
  min-width: 100%;
  }

  .bundle-sidebar-card {
    display: none;
  }

  .bundle-course-card {
    min-width: 30%;
  }

  .bundle-course-card-showcase {
    min-width: 45%;
  }
}