/* Theming CSS */
  /* Header color */
  .u-org--header {
    background-color: #000 !important;
  }


  /* Header text color */
  .u-org--header {
    color: #fff;
  }

  button.u-org--header.appheader__button:hover,
  button.u-org--header.appheader__button:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  button.u-org--header:not(.appnav__link):hover,
  button.u-org--header:not(.appnav__link):active,
  button.u-org--header:not(.appnav__link):focus {
    color: #fff;
  }

  button.u-org--header.appheader__searchbutton,
  button.u-org--header.appheader__categoriesbutton,
  input[type="search"].u-org--header {
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  button.u-org--header.appheader__searchbutton:hover,
  button.u-org--header.appheader__searchbutton:active,
  button.u-org--header.appheader__searchbutton:focus,
  button.u-org--header.appheader__searchbutton:focus-visible,
  button.u-org--header.appheader__categoriesbutton:hover,
  button.u-org--header.appheader__categoriesbutton:active,
  button.u-org--header.appheader__categoriesbutton:focus,
  button.u-org--header.appheader__categoriesbutton:focus-visible,
  input[type="search"].u-org--header:hover,
  input[type="search"].u-org--header:active,
  input[type="search"].u-org--header:focus,
  input[type="search"].u-org--header:focus-visible {
    border-color: rgba(255, 255, 255, 0.5) !important;
  }

  input[type="search"].u-org--header:focus {
    border-color: transparent !important;
  }

  .u-org--header .search__input--appheader:not(:focus):-ms-input-placeholder {
    color: #fff;
  }

  .u-org--header .search__input--appheader:not(:focus)::-ms-input-placeholder {
    color: #fff;
  }

  .u-org--header .search__input--appheader:not(:focus)::placeholder {
    color: #fff;
  }


  /* Organization color */
  .u-orgcolor--color,
  .u-orgcolor--hovercolor:hover {
    color: #F1204A !important;
  }
  .u-orgcolor--bg,
  .u-orgcolor--hoverbg:hover {
    background-color: #F1204A !important;
  }
  .u-orgcolor--border,
  .u-orgcolor--border:link,
  .u-orgcolor--border:visited,
  .u-orgcolor--border:hover,
  .u-orgcolor--border:active,
  .u-orgcolor--border:focus {
    border-color: #F1204A;
    color: #F1204A;
  }
  .u-orgcolor--borderonly,
  .u-orgcolor--borderonly:link,
  .u-orgcolor--borderonly:visited,
  .u-orgcolor--borderonly:hover,
  .u-orgcolor--borderonly:active,
  .u-orgcolor--borderonly:focus {
    border-color: #F1204A;
  }
  .u-orgcolor--borderhover:hover,
  .u-orgcolor--borderhover:hover {
    border-color: #F1204A;
  }
  .u-orgcolor--svgfill {
    color: #F1204A;
    fill: #F1204A;
  }
  .u-orgcolor--svgstroke {
    color: #F1204A;
    stroke: #F1204A;
  }
  .u-orgcolor--svgall {
    color: #F1204A;
    fill: #F1204A;
    stroke: #F1204A;
  }
  .u-org--svgactive[data-active="true"],
  .u-org--svgactive:hover {
    color: #F1204A !important;
    stroke: #F1204A !important;
  }
  .u-org--barchart:after {
    background-color: #F1204A !important;
  }
  .u-org--piechart {
    color: rgba(0, 0, 0, 0.15);
    stroke: #F1204A;
  }
  .u-org--tooltip {
    background-color: #F1204A;
  }
  .u-org--tooltiptop:before {
    border-top-color: #F1204A;
  }
  .u-org--tooltipright:before {
    border-right-color: #F1204A;
  }
  .u-org--tooltipbottom:before {
    border-bottom-color: #F1204A;
  }
  .u-org--tooltipleft:before {
    border-left-color: #F1204A;
  }
  .updatecard__heading--new:before {
    background-color: #F1204A;
  }
  .session:before {
    background-color: #F1204A;
  }
  .activityprogress__value {
    background-color: #F1204A;
  }
}
  .iconbutton,
  .comments__headerbutton, {
    color: #F1204A;
  }

  .u-org--catalogflag {
    background-image: linear-gradient(225deg, #F1204A 50%, transparent 50%);
  }

  .u-org--catalogflagsearch {
    background-image: linear-gradient(225deg, #F1204A 50%, transparent 50%);
  }

  .u-org--catalogflag-in-progress {
    background-image: linear-gradient(225deg, #fff 47%, #F1204A 3%, transparent 50%);
    border-top: 1px solid #F1204A;
    border-right: 1px solid #F1204A;
    svg {
      color: #F1204A;
    }
  }

  .u-org--enrollmentmsgimage {
    background-color: #F1204A
  }

  .u-org--catalogflagbg {
    background-image: linear-gradient(225deg, #F1204A 50%, transparent 50%);
  }
  .u-org--catalogflagfill {
    color: #F1204A;
    fill: #F1204A;
  }

  .u-org--tabactive,
  .u-org--tab:hover,
  .u-org--tab:active,
  .u-org--tab:focus {
    border-color: #F1204A;
  }
  .link--primary,
  .u-org--link,
  .u-org--link:link,
  .u-org--link:visited,
  .u-org--link:hover,
  .u-org--link:active,
  .u-org--link:focus {
    color: #F1204A;
  }
  .u-org--linkhover:hover,
  .u-org--linkhover:active,
  .u-org--linkhover:focus {
    color: #F1204A;
  }

.button--primary:not([disabled]),
  .button--primary:link,
  .button--primary:visited,
  .button--primary:hover,
  .button--primary:active,
  .button--primary:focus,
  .blankslate .button,
  .coursebar__btn--active,
  .coursebar__btn--active:hover,
  .coursebar__btn--active:focus,
  .tagbutton--selected:not(.tagbutton--taxonomy) {
    background-color: #F1204A !important;
    border-color: #F1204A !important;
    color: #fff !important;
  }


  .tooltip {
    background-color: #F1204A;
  }
  .tooltip--left::before {
    border-left-color: #F1204A;
  }
  .tooltip--right::before {
    border-right-color: #F1204A;
  }
  .tooltip--bottom::before,
  .tooltip--bottom-left::before,
  .tooltip--bottom-right::before {
    border-bottom-color: #F1204A;
  }
  .tooltip--top::before,
  .tooltip--top-left::before,
  .tooltip--top-right::before {
    border-top-color: #F1204A;
  }
  .checkbox--primary .checkbox__input:checked + .checkbox__ui {
    background-color: #F1204A;
    border: 2px solid #F1204A;
  }
  .question .checkbox__input:checked + .checkbox__ui {
    background-color: #F1204A;
    border: 1px solid #F1204A;
  }
  .question .radio__input:checked + .radio__ui {
    border-color: #F1204A;
  }
  .question .radio__input:checked + .radio__ui::before {
    background-color: #F1204A;
  }
  .assessment__completedicon, .assessment__gradingicon {
    background-color: #F1204A;
  }
  .enrollmentmsg__image.enrollmentmsg__image--complete  {
    background-color: #F1204A;
  }

  .rank__listitem .radio__input:checked + .radio__ui {
    border-color: #F1204A;
  }
  .rank__listitem .radio__input:checked + .radio__ui::before {
    background-color: #F1204A;
  }
  .sharelinks__link:hover,
  .sharelinks__link:focus,
  .sharelinks__link.button:hover,
  .sharelinks__link.button:focus {
    color: #F1204A;
  }
  .rating input[type="radio"]:not([disabled]) + label {
    color: #F1204A;
  }
  .courselist__item[data-status="completed"] .courselist__marker, .courselist__item[data-status="in-progress"] .courselist__marker,
  .pathmenu__sectionitem[data-status="completed"] .pathmenu__itemmarker, .pathmenu__sectionitem[data-status="in-progress"] .pathmenu__itemmarker {
    color: #F1204A;
  }
  .courselist__item[data-status="in-progress"]:not([data-shape]) .courselist__marker {
    border-color: #F1204A;
  }

    .u-org--catalogflag-in-progress svg {
    color: #F1204A;
  }
}
  .pageoutline__currentlink,
  .pageoutline__currentlink:hover,
  .pageoutline__currentlink:focus {
    color: #F1204A;
  }
  .tagbutton--selected,
  .tagbutton--selected:hover,
  .tagbutton--selected:active,
  .tagbutton--selected.tagbutton--taxonomy:hover,
  .tagbutton--selected.tagbutton--taxonomy:active {
    border-color: inherit !important;
    background-color: #F1204A;
  }
  .tagbutton--selected.tagbutton--taxonomy {
    background-color: #F1204A0c !important;
    border-color: #F1204A !important;
  }
  .datepicker .pika-prev,
  .datepicker .pika-next {
    border: 1px solid #F1204A;
  }
  .datepicker .pika-prev,
  .datepicker .is-rtl .pika-next {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2025'%20version%3D'1.1'%3E%3Cpolyline%20fill%3D'none'%20stroke%3D'%23F1204A'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20points%3D'16.7%209.4%2011.6%2012.4%2016.6%2015.3'%2F%3E%3C%2Fsvg%3E");
  }
  .datepicker .pika-next,
  .datepicker .is-rtl .pika-prev {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20version%3D'1.1'%20viewBox%3D'0%200%2030%2025'%3E%3Cpath%20d%3D'M12.6%209.5L17.7%2012.4%2012.6%2015.3'%20fill-opacity%3D'0'%20stroke%3D'%23F1204A'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
  }
  .datepicker .is-today .pika-button {
    color: #F1204A;
  }
  .datepicker .is-selected .pika-button,
  .datepicker .is-selected .pika-button:hover {
    background: #F1204A;
  }
  .banner__icon {
    color: #F1204A;
    background: #F1204A;
  }

  /* Branding logo */
  .header__titleicon.u-org--titleicon {
    max-width: 120px;
  }
  @media (min-width: 370px) {
    .header__titleicon.u-org--titleicon {
      max-width: 160px;
    }
  }
  .u-org--titleicon + .header__titletext,
  .u-org--titleicon + .sidemenu__titletext {
    display: none;
  }
  .u-org--header .header__titlelink {
    text-overflow: clip;
  }

  /* Custom CSS */
  /* new_single_course_main */
.new_single_course_main .singcourses_banner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  background: #EDBBE8;
  padding: 50px 80px;
  justify-content: space-between;
  align-items: center;
  margin-inline: -15px;
}
.award__skills{
 display:none;
}
.new_single_course_main .singcourses_banner h1 {
  color: #000;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 113%; /* 72.32px */
  letter-spacing: -1.28px;
  margin-bottom: 14px;
}

.new_single_course_main .singcourses_banner .content {
  max-width: 481px;
}
.new_single_course_main .singcourses_banner .content > div {
  display: flex;
  color: var(--TikTok-Black, #000);
  text-align: center;
  font-size: var(--B3, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
  gap: 8px;
}
.new_single_course_main .singcourses_banner img {
  max-width: 262px;
}

.new_single_course_main .singcourses_banner p {
  color:#000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin-bottom: 16px;
}

.new_single_course_main .singcourses_banner svg { 
  margin-right: -6px;
  margin-top: -3px;
}

/* Banner background is now the same red as the button used to be, so the
   button is switched to white-on-red for contrast — this keeps the CTA's
   own chevron icon in its natural red (matching the general svg rule
   above) instead of needing a separate override. */
.new_single_course_main .singcourses_banner a {   
  font-size: 14px; 
  font-weight: 600;
  line-height: 140%; /* 19.6px */
  border-radius: 48px; 
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: fit-content;
  margin-top: 36px;
}

.new_single_course_main .coursepage__nav.coursepage__nav--prev,
.new_single_course_main .course__fullwidthcontainer,
.new_single_course_main .enrollmentmessage.enrollmentmessage--in-progress,
.new_single_course_main h1.u-headingpage--activity.activityheading__name,
.new_single_course_main
  ul.activityheading__meta.activitymeta.activitymeta--heading,
.new_single_course_main .activityheading__quickstart,
.new_single_course_main span.activitysection__toggle {
  display: none;
}

.new_single_course_main ul.activityheading__actions {
  border: 0;
  padding: 0;
  margin: 0;
}
.new_single_course_main .course__content {
    margin-top: 20px;
}

.new_single_course_main section.activitysection {
    margin-top: 0;
    max-width: 1400px;
    margin-inline: auto;
}

/* Width increase for the course-list section only — the banner (a sibling
   of .course__contentcontainer, not a descendant) is untouched by this.
   Matches the platform's own .course__header/.course__contentcontainer
   pattern (margin: 0 auto; width: 90%) instead of a negative-margin bleed,
   which fought with that native centering rule. */
.new_single_course_main .course__contentcontainer {
  min-width: 85%;
  margin-inline: auto;
}

.new_single_course_main .activitysection ul.cardgrid {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}

.new_single_course_main .activitysection ul.cardgrid li.cardgrid__item {
    width: 100%;
    padding: 20px;
    align-items: center;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.new_single_course_main .activitysection ul.cardgrid li.cardgrid__item .activitycard {
    display: flex;
    gap: 24px;
    align-items: center;
}

.new_single_course_main .activitycard__imagecontainer.catalogflag__container {
    flex: 0 0 200px;
    max-width: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.new_single_course_main h3.u-headingitem.activitycard__name {
    color: var(--TikTok-Black, #000);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 22px */
    letter-spacing: -0.4px;
    text-decoration: none !important;
    order: 1;
    margin-top: 12px;
}

.new_single_course_main .activitycard__textcontainer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.new_single_course_main ul.activitymeta.activitycard__meta {
    order: 0;
    justify-content: start !important;
    flex-direction: row-reverse;
    gap: 8px;
    color: var(--Black, #000);
    text-align: center;
    font-family: "TikTok Sans Text";
    font-size: var(--B3, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 19.6px */
}
/* Native red star-rating polygon icon swapped via JS (enhanceCourseCards
   in index.html) for this custom star path. */
.new_single_course_main .activitycard__meta svg.tta_meta_star {
  width: 10px;
  height: 9px;
  flex-shrink: 0;
  fill: var(--Blaze, #f1204a);
}
/* Gray dot — a real <li><svg>…</svg></li> inserted via JS between the
   rating and duration <li>s (not a ::after character), so it sits exactly
   between "★ 4.8" and "12 mins" regardless of the row-reverse order above. */
.new_single_course_main .activitycard__meta li.tta_meta_dot_sep {
  display: flex;
  align-items: center;
  list-style: none;
}
.new_single_course_main .activitycard__meta li.tta_meta_dot_sep svg {
  width: 4px;
  height: 4px;
  aspect-ratio: 1 / 1;
  fill: #a0a0a0;
  flex-shrink: 0;
}

/* Course description — populated by JS (enhanceCourseCards in index.html)
   only where real summary text has been supplied; cards with no summary
   simply show no description line. */
.new_single_course_main .activitycard__summary {
  order: 2;
  margin: 4px 0 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
}

/* "Start Learning" pill — a plain <span> (not a real <a>), since the whole
   card is already one big real Intellum link (a.activitycard wraps
   everything); nesting a second real link inside it would be invalid
   markup and risk breaking the card's own click behavior. Purely visual —
   clicking anywhere on the card, including this pill, navigates via the
   card's real href. */
.new_single_course_main .activitycard__startlearning {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--black-30, rgba(0, 0, 0, 0.30));
  border-radius: 48px;
  padding: 10px 22px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.new_single_course_main .activitysection ul.cardgrid li.cardgrid__item:hover .activitycard__startlearning {
  background: #F1204A;
  color: #fff;
  border-color: #F1204A;
}

/* Continue Learning — logged-in-only widget, inserted via JS right after
   .singcourses_banner (enhanceCourseCards/fetchAndRenderContinueLearning in
   index.html). Reuses the same red-fill/gray-track progress bar and pill
   button language as the Achievements page's .progress_bar/.continue_btn. */
.new_single_course_main .tta_continuelearning {
  max-width: 1400px;
  margin-inline: auto;
}
.new_single_course_main .tta_continuelearning h2 {
  color: var(--TikTok-Black, #000);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.64px;
  margin-bottom: 24px; 
  padding-bottom: 24px; 
  border-bottom: 0.694px solid rgba(0, 0, 0, 0.2);
  margin-top: 60px;


}
.new_single_course_main .tta_continuelearning__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.new_single_course_main .tta_continuelearning__card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
}
.new_single_course_main .tta_continuelearning__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.new_single_course_main .tta_continuelearning__body {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.new_single_course_main .tta_continuelearning__title {
  color: var(--TikTok-Black, #000);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 6px;
}
.new_single_course_main .tta_continuelearning__desc {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.new_single_course_main .tta_continuelearning__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.new_single_course_main .tta_continuelearning__progress {
  flex: 1;
  min-width: 0;
}
/* Sub-course-level items carry no real percentage (see index.html) — shown
   as a discrete status badge instead of a fabricated progress bar. */
.new_single_course_main .tta_continuelearning__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eee;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.new_single_course_main .tta_continuelearning__statusdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f1204a;
  flex-shrink: 0;
}
.new_single_course_main .tta_continuelearning__pct {
  color: #000;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 8px;
}
.new_single_course_main .tta_continuelearning__bar {
  background: #eee;
  height: 6px;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.new_single_course_main .tta_continuelearning__bar span {
  background: #f1204a;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 100px;
}
.new_single_course_main .tta_continuelearning__btn {
  flex: 0 0 auto;
  margin-left: auto;
  background: #EEE;
  height: 40px;
  padding: 0 16px;
  border-radius: 100px;
  color: #000;
  text-align: center;
  font-size: 14px; 
  line-height: 40px;
  white-space: nowrap;
  font-weight: 600;
}
.new_single_course_main .tta_continuelearning__card:hover .tta_continuelearning__btn {
  background: #f1204a;
  color: #fff;
}
.new_single_course_main a.tta_continuelearning__card {
    padding: 20px 24px;
}
@media (max-width: 900px) {
  .new_single_course_main .tta_continuelearning__grid {
    grid-template-columns: 1fr;
  }
.new_single_course_main .activitysection ul.cardgrid li.cardgrid__item .activitycard {
    flex-wrap: wrap;
}

.new_single_course_main .activitycard__startlearning {
    margin-right: auto;
    margin-left: 0;
}
}
/* End Continue Learning */

/* End new_single_course_main */
/* New Courses */
.new_courses_main article.coursepage__contentmain.course {
  padding-inline: 0;
}
.new_courses_main .achievement_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 24px;
}


.new_courses_main button.achievement_filters__btn {
   color: var(--TikTok-Black, #000);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 16.8px */
    letter-spacing: -0.12px;
    border-radius: 4px;
    background: #EEE !important;
    display: flex;
    padding: 7px 10px !important;
    justify-content: center;
    align-items: center;
}
.new_courses_main button.achievement_filters__btn.active {
    color: var(--TikTok-White, #FFF);
    background: var(--TikTok-Black, #000)!important;
}
.new_courses_main .courses_banner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  background: var(--Muse, #edd4b2);
  padding: 50px 80px;
  justify-content: space-between;
  align-items: center;
}

.new_courses_main .courses_banner h1 {
  color: var(--TikTok-Black, #000);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: 113%; /* 81.36px */
  letter-spacing: -1.44px;
}

.new_courses_main .courses_banner > div {
  max-width: 489px;
}

.new_courses_main .courses_banner img {
  max-width: 313px;
}

.new_courses_main .courses_banner p {
  color: var(--TikTok-Black, #000);
  font-size: var(--B4, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
  margin: 0;
  padding-top: 14px;
}

.new_courses_main header.course__headercontainer,
.new_courses_main .course__contentcontainer span.activitysection__toggle,
.new_courses_main .activitysection li.cardgrid__item .catalogflag,
.new_courses_main
  ul.activitymeta.activitycard__meta
  li.activitymeta__item.activitymeta__item--highlighted.u-org--catalogflagfill {
  display: none;
}

.new_courses_main .course__contentcontainer .activitysection__name,
.new_single_course_main .course__contentcontainer .activitysection__name {
  color: var(--TikTok-Black, #000);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 32px */
  letter-spacing: -0.64px;
  margin-top: 64px;
}

.new_courses_main .course__contentcontainer section.activitysection header,
.new_single_course_main
  .course__contentcontainer
  section.activitysection
  header {
  border-bottom: 0.694px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.new_courses_main .course__contentcontainer header button,
.new_single_course_main .course__contentcontainer header button {
  margin: 0;
  padding: 0;
  background: transparent !important;
}

/* Hide every activitysection's own header except the first ("Explore Media
   Buying learning paths") — the filter bar (All Courses / Media Buying
   Path / Creative Expert) already covers switching between them, so the
   second section's native "Explore Creative learning paths" heading +
   toggle button would just be a redundant duplicate. */
.new_courses_main #course_content section.activitysection:nth-of-type(n + 2) > header {
  display: none;
}
.new_courses_main .activitysection li.cardgrid__item {
  border-radius: 13.889px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: var(--TikTok-White, #fff);
  padding: 20px 24px;
  width: 100%;
  margin: 0;
}

.new_courses_main .activitysection li.cardgrid__item .activitycard {
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
  height: 100%;
  justify-content: space-between;
}

.new_courses_main .activitysection h3.u-headingitem.activitycard__name {
  margin: 0;
}

.new_courses_main .activitysection .activitycard__name {
  text-decoration: none !important;
  color: var(--TikTok-Black, #000);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 22px */
  letter-spacing: -0.4px;
  padding-bottom: 16px;
}

.new_courses_main .activitysection p.activitycard__summary {
  color: rgba(0, 0, 0, 0.8);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.new_courses_main .activitysection .activitycard__textcontainer:before {
  /* Real per-path Skills Tag is set by JS as the --path-tag/--path-tag-bg/
     --path-tag-color custom properties, and the [data-has-tag] attribute
     below is only added once a real tag resolves (see applyDynamicPathTags()
     in index.html) — so a path with no tag assigned in Admin renders no
     pill at all, instead of a wrong placeholder label. text-transform
     forces caps regardless of the label's own casing. */
  content: var(--path-tag, "");
  text-transform: uppercase;
  border-radius: 30px;
  background: var(--path-tag-bg, var(--Blaze, #f1204a));
  max-width: fit-content;
  display: none;
  padding: 6px 12px;
  align-items: center;
  gap: 4px;
  color: var(--path-tag-color, var(--TikTok-White, #fff));
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.16px;
  margin-bottom: 16px;
}

.new_courses_main
  .activitysection
  .activitycard__textcontainer[data-has-tag]:before {
  display: flex;
}

.new_courses_main .activitysection ul.cardgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
}
.new_courses_main .course__contentcontainer {
  padding-inline: 20px;
}
.new_courses_main ul.activitymeta.activitycard__meta:before {
  /* Real per-path count is set by JS as the --course-count custom
     property (see the Courses page script in index.html); "11 COURSES"
     is only the fallback shown until that fetch resolves. */
  content: var(--course-count, "11 COURSES");
}
.new_courses_main ul.activitymeta.activitycard__meta {
  justify-content: start !important;
  padding-top: 7px;
  color: var(--TikTok-Black, #000);
  font-size: 10px;
  font-weight: 700;
  gap: 7px;
  align-items: center;
}

.new_courses_main .activitymeta svg {
  color: #f1204a;
  margin-top: -1px;
}
@media (max-width: 800px) {
  .new_courses_main .courses_banner {
    padding-inline: 20px;
    justify-content: center;
  }

  .new_courses_main .courses_banner > div {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .new_courses_main .activitysection ul.cardgrid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
  }
}
/* End New Courses */
/* New Webinar listing page */
.new_webinar_main header.pageheader {
  flex-direction: row;
  padding-inline: 0;
  padding-bottom: 16px !important;
}

.new_webinar_main label.search__label {
  top: auto;
  left: 15px;
}

.new_webinar_main input#events-search {
  padding-left: 20px !important;
  border: 0 !important;
  padding-block: 0 !important;
}

.new_webinar_main form#events-search-form {
  padding-block: 2px;
}

.new_webinar_main .splitrow__column.splitrow__column--search {
  margin: 0;
}

.new_webinar_main ul.tabs__tablist.tabs__tablist--page {
  margin: 24px auto 0;
  border: 0;
}

.new_webinar_main nav.tabs {
  border: 0;
}

.new_webinar_main a.tabs__tab.u-org--tab {
  border-radius: 4px;
  line-height: 35px;
  padding-block: 0;
  padding-inline: 10px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
}

.new_webinar_main ul.tabs__tablist.tabs__tablist--page {
  gap: 8px;
}

.new_webinar_main .main__header.main__header--events {
  margin-bottom: 20px;
}

.new_webinar_main section.main__content.main__content--browse {
  padding-inline: 0;
  margin-top: 0px;
}

.new_webinar_main section.main__content li.session.session--index {
  gap: 24px;
  border-top: 0;
}

.session__media.session__media--index {
  margin-right: 0;
}

.tta_session_tag {
  font-size: 10px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.2px;
}

.new_webinar_main .session__content.session__content--index {
  gap: 12px;
  padding: 0;
}

.new_webinar_main .u-headingitem.session__title {
  color: var(--TikTok-Black, #000);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 19.8px */
  letter-spacing: -0.36px;
}

.new_webinar_main li.session__metaitem {
  color: var(--TikTok-Black, #000);
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}

.new_webinar_main .button.session__actionsbutton.button--primary {
  color: var(--White, #fff);
  text-align: center;
  font-size: var(--B3, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
  padding: 12px 16px;
  max-width: fit-content;
}
.new_webinar_main .session__actions.session__actions--index {
  margin: 0;
}

.new_webinar_main .tta_session_region {
  text-align: right;
  font-size: 11.37px !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: normal;
  letter-spacing: -0.341px !important;
}

.new_webinar_main .session__media--index img {
  height: 112px !important;
}

.new_webinar_main .session__media--index {
  max-width: 200px;
  height: 112px !important;
}
@media (max-width: 1140px) {
  .new_webinar_main section.main__content,
  .new_webinar_main .main__header.main__header--events {
    margin-inline: 20px;
  }
}
/* End New Webinar listing page */

/* New Get Started */
.new_get_strt_main .get_strt_banner {
  background-color: #baf6f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-left: 20px;
}

.new_get_strt_main .get_strt_banner h1 {
  color: var(--TikTok-Black, #000);
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 108%; /* 69.12px */
  letter-spacing: -1.92px;
  max-width: 574px;
}

.get_strt_banner div {
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
}
.new_get_strt_main .page__header {
  padding-top: 40px;
}

.new_get_strt_main .page__header h1,
.new_get_strt_main .page__courses article[data-item-id="5393010"] h2,
.new_get_strt_main .page__courses article[data-item-id="5393013"] h2 {
  color: var(--TikTok-Black, #000);
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 28px */
  letter-spacing: -0.56px;
  border-bottom: 0.694px solid var(--TikTok-Black, #000);
  padding-bottom: 20px;
  margin: 0;
}

.new_get_strt_main .gstt_new .page__courses article[data-item-id="5393009"] p {
  color: var(--TikTok-Black, #000);
  font-size: var(--B4, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
  font-family: "TikTok Sans";
}
.new_get_strt_main .page__courses article[data-item-id="5393010"],
.new_get_strt_main
  .page__courses
  article[data-item-id="5393010"]
  + .articles-grid {
  background: #edd4b2;
  padding-inline: 54px;
  max-width: 1548px;
  margin-bottom: 0;
}
.new_get_strt_main .page__courses article[data-item-id="5393010"] {
  padding-top: 64px;
  padding-bottom: 32px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393010"]
  + .articles-grid {
  padding-bottom: 64px;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393010"]
  + .articles-grid
  article {
  background: white;
  padding: 16px;
  border-radius: 12px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393010"]
  + .articles-grid
  article
  .pgresource {
  gap: 20px;
  padding-bottom: 56px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393010"]
  + .articles-grid
  article
  .pgresource
  .pgresource__title,
.new_get_strt_main
  .page__courses
  article[data-item-id="5393013"]
  + .articles-grid
  article
  .pgresource
  .pgresource__title {
  color: var(--TikTok-Black, #000);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393010"]
  + .articles-grid
  article
  .pgresource
  .pgresource__imagecontainer {
  border-radius: 12px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393010"]
  + .articles-grid
  article
  .pgresource:after {
  content: "Watch Now";
  color: var(--Text-Primary-Text, #121212);
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 15.556px */
  border-radius: 100px;
  border: 0.694px solid var(--Lines-Line-1, #121212);
  padding: 11px;
  position: absolute;
  bottom: 16px;
  left: 16px;
}
.new_get_strt_main .page__courses article[data-item-id="5393013"] {
  margin-top: 72px;
  margin-bottom: 38px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393013"]
  + .articles-grid {
  gap: 66px 32px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393013"]
  + .articles-grid
  .pgresource {
  gap: 20px;
  padding-bottom: 45px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393013"]
  + .articles-grid
  article
  .pgresource:after {
  content: "Read More ";
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 155%; /* 15.556px */
  border-radius: 100px;
  padding: 4px 32px 4px 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url("https://i.ibb.co/GQsYh7XK/Union.png");
  background-color: #f1204a;
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 12px;
}
.new_get_strt_main
  .page__courses
  article[data-item-id="5393013"]
  + .articles-grid
  article
  .pgresource
  .pgresource__imagecontainer {
  border-radius: 8px;
}

.new_get_strt_main
  .page__courses
  article[data-item-id="5393013"]
  + .articles-grid
  article
  .pgresource
  .pgresource__description {
  color: var(--black-70, rgba(0, 0, 0, 0.7));
  font-size: var(--B4, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
  font-family: "TikTok Sans";
  margin-top: 8px;
}
@media (min-width: 1025px) {
  .new_get_strt_main .get_strt_banner {
    background-image: url("https://i.ibb.co/ychpmC9p/get-started-banner.png");
    background-repeat: no-repeat;
    background-position: right;
    min-height: 409px;
  }
  .get_strt_banner img {
    display: none;
  }
}

@media (max-width: 1024px) {
  .get_strt_banner div {
    padding: 40px 20px 40px 0;
  }
}

@media (max-width: 767px) {
  .new_get_strt_main .page__courses article[data-item-id="5393010"],
  .new_get_strt_main
    .page__courses
    article[data-item-id="5393010"]
    + .articles-grid {
    padding-inline: 20px;
  }
  .new_get_strt_main .page__courses article[data-item-id="5393010"] {
    padding-top: 34px;
  }
  .new_get_strt_main
    .page__courses
    article[data-item-id="5393010"]
    + .articles-grid {
    padding-bottom: 34px;
  }
  .new_get_strt_main .page__courses article[data-item-id="5393013"] {
    margin-top: 40px;
  }
  .new_get_strt_main
    .page__courses
    article[data-item-id="5393013"]
    + .articles-grid {
    gap: 32px;
  }
}
/* End New Get Started */

/*  */
.banner_container h1 {
  color: #fff;
  font-size: 72px;
  font-weight: 700;
  line-height: 113%; /* 81.36px */
  letter-spacing: -1.44px;
}
.banner_container p {
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 113%; /* 24.86px */
  letter-spacing: -0.44px;
}
.new_achivement_banner {
  background: #000;
  padding: 13px 60px 5px;
}

.banner_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.banner_container img {
  max-width: 521px;
}
/* Force TikTok Sans (loaded via JS in index.html) to override the
   platform theme's "Roboto"-labelled custom font on this page. */
.new_achiv_main,
.new_get_strt_main *,
.new_achiv_main *,
.new_webinar_main *,
.wd_details_main *,
.new_courses_main *,
.new_single_course_main * {
  font-family: "TikTok Sans", sans-serif !important;
}

.new_achiv_main .categoryheader .categoryheader__actions {
  display: none;
}

.new_achiv_main .categoryheader .categoryheader__content {
  max-width: 100%;
}

.new_achiv_main .categoryheader .categoryheader__content h1.u-headingpage,
.new_achiv_main h1.u-headingpage--activity.activityheading__name {
  color: var(--TikTok-Black, #000);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 32px */
  letter-spacing: -0.64px;
  padding-bottom: 20px;
  border-bottom: 0.694px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 24px;
}

.new_achiv_main .categoryheader__title {
  padding-bottom: 20px;
  border-bottom: 0.694px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 24px;
}

.new_achiv_main .categoryheader__description,
.new_achiv_main .course__description p {
  color: #000000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
  white-space: pre-line;
}
.new_achiv_main .course__content {
  margin-top: 0;
}
.new_achiv_main article.coursepage__contentmain.course {
  padding-inline: 0;
}

.new_achiv_main
  .enrollmentmessage.enrollmentmessage--in-progress.enrollmentmessage--collection,
.new_achiv_main ul.activityheading__meta.activitymeta.activitymeta--heading,
.new_achiv_main ul.activityheading__actions {
  display: none;
}
.new_achiv_main header.categoryheader {
  padding-bottom: 20px;
}
.new_achiv_main .filtercontent .mediablocklist,
.new_achiv_main .activitysection ul.cardgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.new_achiv_main .filtercontent .mediablocklist li,
.new_achiv_main .activitysection ul.cardgrid li {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: var(--TikTok-White, #fff);
  width: 100%;
  padding: 24px;
  margin: 0;
}
.new_achiv_main .filtercontent .mediablocklist li article {
  flex-direction: row-reverse;
}
.new_achiv_main .filtercontent .mediablocklist li article,
.new_achiv_main .activitysection ul.cardgrid li .activitycard {
  border: 0;
  align-items: center;
  gap: 24px;
  height: 100%;
  display: flex;
}

.new_achiv_main ul.activitymeta.activitycard__meta {
  display: none;
}
.new_achiv_main .filtercontent .mediablocklist li article .mediablock__title a,
.new_achiv_main ul.cardgrid .activitycard .activitycard__name {
  color: #000000;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.16px;
  padding-bottom: 4px;
  text-decoration: none;
}
.new_achiv_main .activitycard__imagecontainer {
  width: 25%;
  margin-bottom: 0;
}

.new_achiv_main .activitycard__textcontainer {
  width: 75%;
  padding-right: 0px;
}

.new_achiv_main .filtercontent .mediablocklist li article .mediablock__summary,
.new_achiv_main ul.cardgrid .activitycard .activitycard__summary {
  color: rgba(0, 0, 0, 0.7);
  font-size: 13px;
  font-weight: 400;
  line-height: 140%; /* 16.8px */
  margin-bottom: 0;
}
.new_achiv_main .meta_options {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  gap: 10px;
}
.new_achiv_main .share_meta a,
.new_achiv_main .share_btn {
  color: var(--Black, #000);
  font-size: var(--B3, 14px);
  font-weight: 700;
  line-height: 140%; /* 19.6px */
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.new_achiv_main .social_btns {
  position: absolute;
  background: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 13px;
  gap: 10px;
  display: none;
  top: 25px;
}
.new_achiv_main .share_btn a:hover {
  color: #f1204a;
}
.new_achiv_main .share_btn.active .social_btns {
  display: flex;
}
.new_achiv_main .share_meta {
  display: flex;
  gap: 12px;
  padding-top: 12px;
}
.new_achiv_main .achievement_earned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--TikTok-Black, #000);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.2px;
  background: #2dccd3;
  padding: 6px 12px 6px 8px;
  border-radius: 100px;
  margin-block: 6px;
}

.new_achiv_main .achievement_filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 24px;
}

.new_achiv_main .achievement_filters__btn {
  border: none;
  background: #eee;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 7px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.new_achiv_main .achievement_filters__btn:hover {
  background: #ddd;
}

.new_achiv_main .achievement_filters__btn.active {
  background: #000;
  color: #fff;
}

.new_achiv_main .progress_bar h3 {
  color: #000000;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 16.8px */
}

.new_achiv_main .progress_bg {
  background: #eeeeee;
  height: 6px;
  min-width: 120px;
  margin-top: 8px;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.new_achiv_main .progress_bg .progress_fill {
  background: #f1204a;
  position: absolute;
  width: 70%;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 100px;
}

.new_achiv_main .continue_btn {
  background: #eee;
  height: 40px;
  padding: 12px 16px;
  border-radius: 100px;
  color: #000000;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 19.6px */
  text-decoration: none;
}

.new_achiv_main .continue_btn:hover {
  background: #f1204a;
  color: #ffffff;
}
.new_achiv_main a.continue_btn.get_started_btn {
  background: #f1204a;
  color: #ffffff;
}
.new_achiv_main h2.u-headingsection--activity.activitysection__name {
  color: #000000;
  font-size: 32px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.64px;
}

.new_achiv_main .activitysection__header--pathsection {
  padding-bottom: 16px;
  border-bottom: 0.694px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  margin-bottom: 30px;
  background: transparent !important;
  padding-inline: 0;
  margin-inline: 0;
}

.new_achiv_main
  .activitysection__header--pathsection
  span.activitysection__toggle {
  display: none;
}
.achiv_cta {
  padding: 30px 60px;
  text-align: center;
}

.cta_container {
  background-image: url("https://i.ibb.co/hxrQmhwf/Block.png");
  display: flex;
  flex-direction: column;
  min-height: 228px;
  justify-content: center;
  border-radius: 20px;
  align-items: center;
}

.achiv_cta h2 {
  color: #ffffff;
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 32px */
  letter-spacing: -0.64px;
  padding-bottom: 20px;
}

.achiv_cta p {
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin-bottom: 30px;
}

.achiv_cta a {
  border-radius: 48px;
  background: #f1204a;
  max-width: fit-content;
  padding: 15px 19px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
}
.new_achiv_main form#topic-search-form input#topic-search {
  border-radius: 27px !important;
  border: 0 !important;
  background: #fff;
  box-shadow: none !important;
}

.new_achiv_main form#topic-search-form {
  border-radius: 27px;
  border: 1px solid #ccc;
  background: #fff;
  padding-block: 4px;
}

.new_achiv_main svg.search__icon {
  margin-top: 4px !important;
}
.new_achiv_main .filterlayout__mainheading:before {
  content: "See how you’re progressing ";
  color: #000000;
  font-size: 32px;
  font-weight: 700;
  line-height: 100%; /* 32px */
  letter-spacing: -0.64px;
}

.new_achiv_main .filterlayout__mainheading {
  padding-bottom: 16px;
  border-bottom: 0.694px solid rgba(0, 0, 0, 0.2);
}
@media (max-width: 1000px) {
  .new_achiv_main .filtercontent .mediablocklist,
  .new_achiv_main .activitysection ul.cardgrid {
    grid-template-columns: 1fr;
  }
  .banner_container {
    flex-wrap: wrap;
    gap: 40px;
  }
  .banner_container img {
    max-width: 100%;
  }
}
@media (max-width: 500px) {
  .wd_details_main .page__courses,
  .wd_details_main header.page__header {
    padding-inline: 20px;
  }
  .new_achivement_banner {
    padding: 13px 20px 5px;
  }
  .new_achiv_main .new_achivement_banner .banner_container h1 {
    color: #000000;
    font-size: 60px;
    font-weight: 700;
    line-height: 113%;
    letter-spacing: -1.44px;
  }
  .new_achiv_main h1.u-headingpage--activity.activityheading__name {
    margin-inline: 20px;
  }
  .new_achiv_main .course__content {
    padding-inline: 20px;
  }
  .achiv_cta {
    padding: 30px 20px;
    text-align: center;
  }
  .achiv_cta .cta_container {
    padding: 20px;
  }
  .new_achiv_main .filterlayout__mainheading {
    flex-direction: column;
    gap: 15px;
  }

  .banner_container p {
    font-size: 20px;
    line-height: 113%; /* 22.6px */
    letter-spacing: -0.4px;
  }
  .new_achivement_banner {
    padding-inline: 15px;
    padding-top: 60px;
    padding-bottom: 30px;
  }
  .banner_container h1 {
    font-size: 48px;
    letter-spacing: -0.96px;
  }
  .new_achiv_main .filtercontent .mediablocklist li article {
    padding: 10px;
    gap: 10px;
  }
  .new_achiv_main .filtercontent .share_meta a {
    font-size: 12px;
  }
  .new_achiv_main .filtercontent .share_meta {
    gap: 8px;
  }
  .new_achiv_main .filtercontent .continue_btn {
    padding: 12px 14px;
    font-size: 12px;
  }
  .achiv_cta {
    padding: 30px 15px;
  }
  .cta_container {
    padding: 60px 30px;
  }
}
/* new_BBLove */
.main--student {
  margin-bottom: 0 !important;
}

.new_BBLove .pageoutline {
  display: none;
}

article.new_BBLove {
  padding: 0;
  margin-bottom: 0px;
  font-family: "TikTok Sans";
}

.new_BBLove header.page__header {
  max-width: 100%;
  margin: 0;
  padding-block: 60px;
  padding-inline: 86px;
}
.muse_color,
.blaze_color {
  background: #edd4b2;
}
.muse_color header.page__header,
.dawn_color header.page__header {
  background-color: #4a0505;
}
.muse_color h1.banner_title {
  color: #fbeb35;
}
.muse_color .banner_desc,
.blaze_color h1.banner_title,
.blaze_color .banner_desc,
.dawn_color .banner_desc {
  color: #ffffff;
}
.muse_color .course_card .pgpost h2 {
  color: #4a0505;
}
.muse_color h1.banner_title {
  max-width: 530px;
}
.shimmer_color {
  /* background: #baf6f0; */
}
.shimmer_color header.page__header {
  background-color: #2dccd3;
  background-image: url(https://i.ibb.co/xqxRx16D/supercharg-banner-bg.png);
  background-size: cover;
  background-position: center;
}
.shimmer_color h1.banner_title,
.shimmer_color .course_card .pgpost h2 {
  color: #033624;
}
.shimmer_color .banner_desc {
  color: #000000 !important;
}
.blaze_color header.page__header {
  background-color: #f1204a;
}
.blaze_color .course_card .pgpost h2,
.dawn_color .course_card .pgpost h2 {
  color: #f1204a;
}
.dawn_color {
  background-color: #edbbe8;
}
.dawn_color h1.banner_title {
  color: #edbbe8;
}
.new_BBLove h1.banner_title {
  font-size: 66px;
  font-weight: 700;
  line-height: 100%;
}
.new_BBLove .banner_desc {
  font-size: 24px;
  line-height: 120%; /* 28.8px */
  margin-top: 36px;
}

.new_BBLove .new_banner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.new_BBLove .new_banner .image-side {
  max-width: 450px;
}

.new_BBLove .new_banner .content-side {
  max-width: 860px;
}
.new_BBLove .page__courses {
  display: grid;
  gap: 25px;
  padding: 40px 40px 0px 40px;
}

.new_BBLove .page__courses .course_card {
  background: white;
  border-radius: 22px;
  max-width: 1173px;
  padding: 60px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  gap: 20px;
}
.new_BBLove .course_card article {
  max-width: 100%;
  margin: 0;
}

.new_BBLove .course_card .pgpost h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 100%; /* 42px */
  margin: 0;
}

.new_BBLove .course_card .pgpost p {
  color: #000000;
  font-size: 20px;
  line-height: 120%; /* 28.8px */
  margin-top: 24px;
  margin-bottom: 10px;
  font-family: "TikTok Sans";
}
@media (min-width: 1024px) {
  .shimmer_color header.page__header,
  article.blaze_color .page__header,
  article.dawn_color .page__header {
    min-height: 512px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: space-evenly;
  }
  article.blaze_color .page__header,
  article.dawn_color .page__header {
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
  }
  article.blaze_color .page__header .image-side,
  article.dawn_color .page__header .image-side {
    opacity: 0;
  }
  article.blaze_color .page__header {
    background-image: url(https://i.ibb.co/Z1BJ9yVJ/smart-achieve-more-with-less-banner.png);
  }
  article.dawn_color .page__header {
    background-image: url(https://i.ibb.co/NkkvRhr/sell-more-with-tiktok-shop-banner.png);
  }
}
@media (max-width: 1173px) {
  .new_BBLove header.page__header {
    padding-inline: 40px;
  }
}
@media (max-width: 1024px) {
  .new_BBLove .page__courses .course_card {
    padding: 40px;
  }
  .new_BBLove h1.banner_title {
    font-size: 42px;
  }
  .new_BBLove .banner_desc {
    font-size: 20px;
    margin-top: 24px;
  }
}

@media (max-width: 600px) {
  .new_BBLove .new_banner {
    flex-direction: column;
  }
  .new_BBLove header.page__header {
    padding-block: 40px;
    padding-inline: 20px;
  }
  .new_BBLove .new_banner .image-side {
    margin: auto;
  }
  .new_BBLove .page__courses {
    padding: 40px 20px 0px;
  }
  .new_BBLove .page__courses .course_card {
    padding: 20px;
  }
  .new_BBLove .course_card .pgpost h2 {
    font-size: 28px;
  }
  .new_BBLove .course_card .pgpost p {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 20px;
  }
}
/* new_BBLove End */
/* =====================================================
   Sign Up for TikTok Academy — crimson_color banner
   Placed after new_BBLove/creative_hub's shared rules (not alongside the
   other muse/shimmer/blaze/dawn color blocks above) so these font-size/
   padding overrides — which those other variants never needed — actually
   win the cascade: with equal selector specificity, source order is the
   tiebreaker, and the shared .new_BBLove h1.banner_title rule above would
   otherwise win just by coming later in the file.
   ===================================================== */
.crimson_color header.page__header {
  background-color: #4a0505;
  padding: 60px 80px;
}
.crimson_color h1.banner_title {
  color: #edbbe8;
  font-size: 64px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.96px;
  margin-bottom: 14px;
}
.crimson_color .banner_desc,
.crimson_color .banner_footer_note,
.crimson_color .banner_bullet {
  color: #ffffff;
  font-family: "TikTok Sans Text", "TikTok Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
}
.crimson_color .banner_desc {
  margin-bottom: 24px;
}
.crimson_color .banner_bullet .tick-icon path {
  fill: #ffffff;
}
.crimson_color .banner_cta {
  display: flex;
  width: 165px;
  height: 54px;
  padding: 12px 16px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-align: center;
  font-family: "TikTok Sans Text", "TikTok Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
}
/* Nav simplification for this page only — body gets the crimson_color
   class via JS (applyClass() in index.html) alongside the content-main
   element, so this can't leak onto any other page sharing the same
   generic .appnav/.appheader__section markup. */
body.crimson_color .appnav.appnav--text,
body.crimson_color .appheader__section.u-org--header .appheader__search,
body.crimson_color .appheader__section.u-org--header .appheader__categories {
  display: none !important;
}
/* Header "Enroll Now" button — inserted via JS right after the native
   Log In button (see index.html), same pill CTA style used elsewhere on
   this page. */
.tta-header-enroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  padding: 10px 20px;
  background: #f1204a;
  color: #fff !important;
  border-radius: 999px;
  font-family: "TikTok Sans Text", "TikTok Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 140%;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s;
}
.tta-header-enroll-btn:hover {
  background: #d91f43;
}
/* Native "Log In" button — transparent/borderless per Figma, this page only */
body.crimson_color button.button--appheader {
  background-color: transparent !important;
  border: 0 !important;
}
/* Banner image — the shared .new_banner--featured layout (content-side
   max-width:55% / image-side max-width:40%) only has its own responsive
   fallback below 768px (stacked); between that and 1440px the image was
   getting visibly clipped on the right instead of shrinking cleanly, so
   it's hidden in that range here (this page only) and the text takes the
   full width instead. Below 768px the shared stacked layout already
   handles it fine, so this only needs to cover down to 769px. */
@media (max-width: 1440px) and (min-width: 769px) {
 
  body.crimson_color .new_banner--featured .content-side {
    max-width: 100%;
  }
}
/* End crimson_color banner */

/* "See what you'll learn" section — built by JS in index.html, which
   pairs Admin's own heading/desc block with the Vimeo video block that
   immediately follows it, so this is unscoped to crimson_color's own
   color rules (the section itself keeps its Figma-spec Muse background
   regardless of the page's banner color theme). */
.see-what-learn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px; 
  margin: 0 auto;
  padding: 52px 40px;
  border-radius: 20px;
  background: #edd4b2;
  box-sizing: border-box;
  max-width: 1440px;
  width: 100%; 
}
.see-what-learn__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  max-width: 788px;
}
.see-what-learn__text {
  flex: 1;
  min-width: 0;
}
.see-what-learn__text h2 {
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.64px;
  margin: 0 0 16px;
}
.see-what-learn__text p {
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin: 0;
}
.see-what-learn__video {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  aspect-ratio: 220 / 390;
  border-radius: 16px;
  overflow: hidden;
}
/* !important throughout: the platform's own .activity__video/iframe CSS
   ships its own width/height and can outrank a plain override on
   specificity, silently leaving the video at its native embed size
   instead of filling this container (the "video not showing" symptom
   reported live — the iframe was rendering at its default size, not
   actually hidden, just too small/oddly placed to notice on the page). */
.see-what-learn__video figure.pgmedia,
.see-what-learn__video .pgmedia__videowrapper,
.see-what-learn__video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
}
.see-what-learn__video .pgmedia__loading,
.see-what-learn__video .pgmedia__caption {
  display: none;
}
@media (max-width: 900px) {
  .see-what-learn {
    width: 90%;
    padding: 32px 24px;
    gap: 32px;
  }
  .see-what-learn__row {
    flex-direction: column;
    gap: 32px;
  }
  .see-what-learn__video {
    width: 200px;
  }
}
/* End "See what you'll learn" section */

/* "What you'll learn" section — built by JS in index.html, which pairs
   Admin's own heading/desc/pills block with the 3 resource-link cards
   (Courses / Webinars On-Demand / Videos) that immediately follow it. */
.what-you-learn { 
  max-width: 1440px;
  margin: 0 auto;
  padding: 52px 40px;
  border-radius: 20px;
  background: #edbbe8;
  box-sizing: border-box;
}
.what-you-learn__header h2 {
  margin: 0 0 8px;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.64px;
}
.what-you-learn__header > p {
  margin: 0 0 24px;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.what-you-learn__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0 0 32px;
  margin: 0 0 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.what-you-learn__pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.what-you-learn__pills li img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}
.what-you-learn__cards {
  display: flex;
  align-items: stretch;
  gap: 24px;
}
.what-you-learn__cards > exceed-request-trigger-on-action,
.what-you-learn__cards > a.pgresource {
  display: flex;
  flex: 1;
  min-width: 0;
}
.what-you-learn__cards .pgresource {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 30px 20px 20px;
  gap: 20px;
  background: #fff;
  border-radius: 14px;
  box-sizing: border-box;
  text-decoration: none !important;
}
/* display:contents un-boxes this wrapper so its children (attribution,
   title, description) become direct flex items of .pgresource alongside
   .pgresource__imagecontainer — needed so all four can be independently
   reordered below; without it, title+description would stay bundled
   together inside this div and couldn't be split apart by .imagecontainer
   the way the Figma order (title, image, description) requires. */
.what-you-learn__cards .pgresource__content {
  display: contents;
}
.what-you-learn__cards .pgresource__attribution {
  display: none;
}
.what-you-learn__cards .pgresource__title {
  order: 1;
  width: 100%;
  margin: 0;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.4px;
  text-decoration: none !important;
}
.what-you-learn__cards .pgresource__imagecontainer {
  order: 2;
  width: 100%;
  height: 220px;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.what-you-learn__cards .pgresource__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.what-you-learn__cards .pgresource__description {
  order: 3;
  width: 100%;
  margin: 0;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
/* Native truncate widget (data-behavior="truncate") hides the rest of the
   text behind .truncate__overflow and adds an ellipsis via
   .truncate__lastline--truncated:after — undone here so the full
   description shows instead of being cut after ~2 lines. */
.what-you-learn__cards .pgresource__description .truncate__lastline--truncated:after {
  display: none;
}
.what-you-learn__cards .pgresource__description span.truncate__overflow {
  display: inline;
}
@media (max-width: 900px) {
  .what-you-learn {
    width: 90%;
    padding: 32px 24px;
  }
  .what-you-learn__cards {
    flex-direction: column;
  }
}
/* End "What you'll learn" section */

/* "Get better results with less guesswork" CTA — built by JS in
   index.html, which adds this class to Admin's own heading/desc/button
   pgpost block right after "What you'll learn" (a plain article, no
   pairing/restructuring needed, unlike the two sections above it). */
.cta-guesswork { 
  max-width: 1440px !important;
  margin: 0 auto;
  padding: 64px 40px;
  border-radius: 20px;
  background-color: #4a0505;
  background-image: url("https://i.ibb.co/kV0vJN1C/Block-1.png");
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}
.cta-guesswork .pgpost h2 {
  margin: 0 0 16px;
  color: #fff;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.8px;
}
/* The description <p> vs. the <p> that just wraps the CTA button share no
   other distinguishing class in Admin's markup — :has() picks out the
   button-wrapping one so each gets different spacing/typography. */
.cta-guesswork .pgpost p:not(:has(a)) {
  margin: 0 auto 32px;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.85);
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.cta-guesswork .pgpost p:has(a) {
  margin: 0;
}
/* Redeclares the header banner's exact button size directly (rather than
   relying on .crimson_color .banner_cta's own rule reaching this far) —
   confirmed live that inheriting it left the button visibly taller/wider
   than the header's "Enroll Now" here, so this pins width/height/padding
   explicitly to match it. */
.cta-guesswork .banner_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 165px;
  height: 54px;
  padding: 12px 16px;
  margin: 0;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .cta-guesswork {
    width: 90%;
    padding: 40px 24px;
  }
  .cta-guesswork .pgpost h2 {
    font-size: 28px;
  }
}
/* End "Get better results with less guesswork" CTA */

/* =====================================================
   "Webinar" style collection banners (.wod_main / .wod_banner)
   Config-driven in index.html (WEBINAR_BANNER_PAGES) — currently just
   /student/collection/3587660-webinars-on-demand, but any future page
   using this exact design only needs a new entry there, no new CSS.
   ===================================================== */
.wod_main article.coursepage__contentmain.course {
  padding-inline: 0;
}
.wod_main .course__headercontainer {
  display: none;
}
.wod_banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 356px;
  padding-inline: 100px;
  box-sizing: border-box;
  /* Green fades left-to-right into transparent, revealing the glint image
     (positioned right, behind the gradient) underneath it — #033624 alone
     is the fallback base so the left edge is always fully opaque green
     even before/without the image loading. */
  background:
    linear-gradient(to right, #033624 0%, #033624 60%, rgba(3, 54, 36, 0) 100%),
    url("https://i.ibb.co/m5Z6pw9Y/TIKTOK-TONAL-16x9-GLINT-THRIVE-20-2-1.png") no-repeat right center / cover,
    #033624;
}
.wod_banner h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--TikTok-White, #fff);
  font-family: "TikTok Sans", sans-serif;
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: 113%;
  letter-spacing: -1.44px;
}
.wod_banner img {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 246px;
  height: 240.12px;
  object-fit: contain;
}
@media (max-width: 900px) {
  .wod_banner {
    flex-direction: column;
    text-align: center;
    min-height: unset;
    padding: 40px 24px;
    gap: 24px;
  }
  .wod_banner h1 {
    font-size: 44px;
  }
  .wod_banner img {
    width: 160px;
    height: 156px;
  }
}
/* End "Webinar" style collection banners */
/* GS on Tiktok */
.gstt_new .enrollmentmessage.enrollmentmessage--passed,
.gstt_new .pageoutline,
.gstt_new .page__metaratings,
.gstt_new .pgheading__actions,
.gstt_new .pgheading__meta.activitymeta,
.gstt_new .articles-grid article .pgresource .pgresource__attribution {
  display: none;
}
.gstt_new {
  padding: 0;
}
.gstt_new header.page__header {
  max-width: 100%;
  margin-block: 0;
  margin-bottom: -20px;
}
.gstt_new .pgheading {
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
  padding-top: 20px;
}
.gstt_new header.page__header .banner-img img {
  height: 450px;
  object-fit: cover;
  width: 100%;
}

.gstt_new .page__courses article {
  max-width: 1440px;
  width: 100%;
}
.gstt_new .page__courses > article:first-child p {
  margin-block: 15px;
}

.gstt_new .articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1440px;
  gap: 20px;
  margin-inline: auto;
  width: 100%;
}

.gstt_new .articles-grid article {
  margin-block: 0;
}
.gstt_new .articles-grid article .pgresource {
  margin-block: 0;
  flex-direction: column-reverse;
  padding: 0;
  border: 0;
  gap: 10px;
}

.gstt_new .articles-grid article .pgresource > div {
  width: 100%;
  margin: 0;
  max-width: 100%;
}

.gstt_new .articles-grid article .pgresource .pgresource__imagecontainer {
  min-height: 190px;
}
.gstt_new .articles-grid article .pgresource:hover {
  box-shadow: none;
}
/* Replaces Intellum's own (unreliable) truncate widget — see fixTruncatedDescriptions()
   in index.html, which rebuilds the clean full text here. Shown in full, no
   line-clamp — the widget's own truncation was the source of the duplicate/
   cut-off text bug, so this just displays the complete description. */
.gstt_new .articles-grid article .pgresource .tta_desc_clamped {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  text-overflow: unset;
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .gstt_new .page__courses {
    padding-inline: 40px;
  }
  .gstt_new .pgheading {
    padding-inline: 40px;
  }
}
@media (max-width: 1024px) {
  .gstt_new .articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .gstt_new .page__courses {
    padding-inline: 20px;
  }
  .gstt_new .pgheading {
    padding-inline: 20px;
  }
}
@media (max-width: 600px) {
  .gstt_new .articles-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
  .gstt_new .articles-grid article .pgresource .pgresource__imagecontainer {
    min-height: unset;
  }
  .gstt_new header.page__header .banner-img img {
    height: 250px;
  }
  .gstt_new .page__courses {
    padding-inline: 16px;
  }
  .gstt_new .pgheading {
    padding-inline: 16px;
  }
}
@media (min-width: 481px) and (max-width: 600px) {
  .gstt_new .articles-grid article .pgresource .pgresource__imagecontainer {
    min-height: unset;
    height: auto;
  }
  .gstt_new .articles-grid article .pgresource .pgresource__imagecontainer img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}
/* End GS on Tiktok */
.main-content-style
  [class*="videoAgendaSectionItem-module-container"].item-after-launch
  > div:nth-child(1)
  > :nth-child(1) {
  width: 20%;
}
.main-content-style
  [class*="videoAgendaSectionItem-module-container"].item-after-launch
  > div:nth-child(1)
  > :nth-child(2) {
  width: 30%;
}
.main-content-style
  [class*="videoAgendaSectionItem-module-container"].item-after-launch
  > div:nth-child(1)
  > :nth-child(3) {
  width: 30%;
}
.main-content-style
  [class*="videoAgendaSectionItem-module-container"].item-after-launch
  > div:nth-child(1)
  > :nth-child(4) {
  width: 10%;
}
.main-content-style
  [class*="videoAgendaSectionItem-module-container"]
  > div:nth-child(1)
  [class*="videoAgendaSectionItem-module-noBottomMargin"] {
  //font-size: 30px !important;
}
main#main {
  margin-bottom: 0px;
}
.tiktok-custom-footer {
  background: #000;
  padding: 40px 48px;
  width: 100%;
}

.tiktok-custom-footer__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.tiktok-custom-footer__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tiktok-custom-footer__right a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

.tiktok-custom-footer__right a:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .tiktok-custom-footer {
    padding: 40px 24px;
  }

  .tiktok-custom-footer__container {
    flex-direction: column;
    gap: 32px;
  }

  .tiktok-custom-footer__logo {
    width: 170px;
  }

  .tiktok-custom-footer__left {
    margin-inline: auto;
  }

  .tiktok-custom-footer__right {
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
}
.custom-bottom-banner {
  padding: 12px 80px 60px;
}

.custom-bottom-banner-content {
  background: #1f1f1f;
  color: white;
  max-width: 50vw;
  margin-inline: auto;
  text-align: center;
  padding: 60px;
  border-radius: 14px;
}

.custom-bottom-banner-content h2 {
  font-size: 40px;
  line-height: 44px;
  margin-inline: auto;
  margin-bottom: 23px;
}

.custom-bottom-banner-content p {
  font-weight: 400;
  max-width: 460px;
  margin-inline: auto;
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.5;
}

.custom-bottom-banner-content a {
  background: #f1204a;
  color: white;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
  text-decoration: none;
  text-transform: none !important;
  font-variant: normal !important;
  font-variant-caps: normal !important;
}

.custom-bottom-banner-content a:hover {
  background: white;
  color: black;
  text-decoration: none;
}

/* ========================= */
/* Responsive Styles */
/* ========================= */

@media (max-width: 1024px) {
  .custom-bottom-banner {
    padding: 24px 40px 40px;
  }

  .custom-bottom-banner-content {
    max-width: 100%;
    padding: 50px 40px;
  }

  .custom-bottom-banner-content h2 {
    font-size: 30px;
    line-height: 34px;
  }
}

@media (max-width: 768px) {
  .custom-bottom-banner {
    padding: 20px 20px 28px;
  }

  .custom-bottom-banner-content {
    padding: 40px 24px;
    border-radius: 12px;
  }

  .custom-bottom-banner-content h2 {
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 16px;
  }

  .custom-bottom-banner-content a {
    padding: 14px 20px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .custom-bottom-banner {
    padding: 16px 16px 20px;
  }

  .custom-bottom-banner-content {
    padding: 32px 20px;
  }

  .custom-bottom-banner-content h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .custom-bottom-banner-content a {
    font-size: 14px;
    padding: 14px 18px;
  }
}

/* AFTER launch date */
.main-content-style
  [class*="videoAgendaSectionItem-module-container"].item-before-launch
  > div:nth-child(1) {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  width: 100%;
  padding-block: 40px;
  gap: 1rem;
}

.main-content-style
  [class*="videoAgendaSectionItem-module-container"].item-after-launch
  > div:nth-child(1) {
  display: flex;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  padding-block: 40px;
  gap: 1rem;
  width: 100%;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .main-content-style
    [class*="videoAgendaSectionItem-module-container"].item-after-launch
    > div:nth-child(1) {
    flex-direction: column;
  }
  .launch-btn-wrapper {
    text-align: left !important;
    padding-top: 10px;
  }
  .main-content-style
    [class*="videoAgendaSectionItem-module-container"].item-after-launch
    > div:nth-child(1)
    > :nth-child(1) {
    width: 100%;
  }
  .main-content-style
    [class*="videoAgendaSectionItem-module-container"].item-after-launch
    > div:nth-child(1)
    > :nth-child(2) {
    width: 100%;
  }
  .main-content-style
    [class*="videoAgendaSectionItem-module-container"].item-after-launch
    > div:nth-child(1)
    > :nth-child(3) {
    width: 100%;
  }
  .main-content-style
    [class*="videoAgendaSectionItem-module-container"].item-after-launch
    > div:nth-child(1)
    > :nth-child(4) {
    width: 100%;
  }
}

.main-content-style
  [class*="videoAgendaSectionItem-module-container"].item-after-launch-ended
  > div:nth-child(1) {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding-block: 40px;
  gap: 1rem;
  width: 100%;
}

.launch-btn-wrapper {
  text-align: center;
}
.launch-btn-wrapper a {
  padding: 15px;
  background: #f1204a;
  border-radius: 100px;
  font-size: 15.116px !important;
  font-weight: 700;
}
.launch-btn-wrapper a:hover {
  text-decoration: none;
}

button.uikitButtonsButton-module-element-tWqcL.uikitButtonsButton-module-isSizeMedium-UM7ej.uikitButtonsButton-module-isVariantGhost-aRKlj.uikitButtonsButton-module-isColorPrimary-7-muM {
  background: white;
  color: black;
}
.learning-objectives-list {
  list-style: none;
  padding-left: 0;
}

.learning-objectives-list li {
  position: relative;
  padding-left: 18px;
}

.learning-objectives-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

.main-content-style [class*="videoAgenda-module-title_container"] {
  font-size: 56px;
  font-weight: 700;
  color: #baf6f0;
  border: 0;
}

.videoAgendaSection-module-container-cCIkh
  + .videoAgendaSection-module-container-cCIkh {
  border-top: 1px solid #fff !important;
}

[class*="videoContent-module-agendaContainer"]
  :nth-child(2)
  [class*="videoAgendaSection-module-container"]
  > :nth-child(1) {
  border-bottom: 1px solid white;
}
[class*="videoContent-module-agendaContainer"]
  :nth-child(2)
  [class*="videoAgendaSection-module-container"] {
      border-top: 1px solid white;
}

.main-content-style
  [class*="videoAgendaSectionItem-module-container"]:last-child {
  border-bottom: 0 !important;
}

.main-content-style
  [class*="videoAgendaSectionItem-module-container"]
  > div:nth-child(1)
  * {
  margin: 0;
  color: white !important;
  font-size: 25px;
  line-height: 1.2;
}
.main-content-style [class*="videoAgendaSectionItem-module-container"] {
  padding: 0;
  border: 0;
  margin: 0;
  border-bottom: 1px solid white;
  border-radius: 0;
}

.main-content-style
  [class*="videoContent-module-agendaContainer"]
  [class*="videoAgendaSectionItem-module-container"]
  > div:nth-child(2) {
  display: none;
}
.main-content-style [class*="videoContent-module-agendaContainer"] {
  border-radius: 22px;
  padding: 60px 111px;
  background: #033624;
}
/* ========================= */
/* 📱 <= 1440px */
/* ========================= */
@media (max-width: 1440px) {
  .main-content-style [class*="videoContent-module-agendaContainer"] {
    padding: 50px 40px;
  }

  .main-content-style [class*="videoAgenda-module-title_container"] {
    font-size: 48px;
  }
}

/* ========================= */
/* 📱 <= 1024px (tablet) */
/* ========================= */
@media (max-width: 1024px) {
  .flex-div {
    margin-bottom: 30px !important;
  }
  .main-content-style {
    padding-top: 30px !important;
  }
  .main-content-style [class*="videoContent-module-agendaContainer"] {
    padding: 40px 25px;
  }

  .main-content-style
    [class*="videoAgendaSectionItem-module-container"]
    > div:nth-child(1)
    * {
    font-size: 20px;
  }

  .main-content-style [class*="videoAgenda-module-title_container"] {
    font-size: 40px;
  }
}

/* ========================= */
/* 📱 <= 768px (mobile) */
/* ========================= */
@media (max-width: 768px) {
  .flex-div {
    margin-bottom: 16px !important;
  }
  .main-content-style {
    padding-top: 16px !important;
  }
  .main-content-style [class*="videoContent-module-agendaContainer"] {
    padding: 30px 20px;
    border-radius: 16px;
  }

  /* stack layout */
  .main-content-style
    [class*="videoAgendaSectionItem-module-container"]
    > div:nth-child(1) {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 6px;
    padding-block: 25px;
  }

  .main-content-style
    [class*="videoAgendaSectionItem-module-container"]
    > div:nth-child(1)
    * {
    font-size: 18px;
  }

  .main-content-style [class*="videoAgenda-module-title_container"] {
    font-size: 32px;
  }
}

/* ========================= */
/* 📱 <= 480px (small mobile) */
/* ========================= */
@media (max-width: 480px) {
  .main-content-style [class*="videoContent-module-agendaContainer"] {
    padding: 25px 15px;
  }

  .main-content-style
    [class*="videoAgendaSectionItem-module-container"]
    > div:nth-child(1)
    * {
    font-size: 16px;
  }

  .main-content-style [class*="videoAgenda-module-title_container"] {
    font-size: 26px;
  }
}

.main-content-style
  [class*="videoContent-module-agendaContainer"]
  [class*="videoContentSchedule-module-container"] {
  display: none;
}

.main-content-style {
  max-width: 1389px !important;
  padding-inline: 0 !important;
}
.main-content-style h1 {
  display: none;
}
.main-content-style [class*="videoContentInformationMeta-module-meta"] {
  display: none;
}
.main-content-style [class*="videoContentActions-module-container"] {
  display: none;
}
.flex-div {
  display: flex;
  gap: 30px;
  margin-bottom: 60px;
}
.flex-div > * {
  width: 50%;
  margin-bottom: 0 !important;
  border-radius: 22px;
  padding: 28px 35px;
}
.flex-div > div {
  background: #2dccd3;
}
.flex-div > section {
  background: #baf6f0;
}
.extra-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.extra-container img {
  max-width: 470px;
}
.flex-div [class*="videoContentInformation-module-description"] {
  font-size: 45px;
  line-height: 51px;
  letter-spacing: -0.96px;
  font-weight: 700;
  color: black;
}
/* .flex-div [class*="videoContentInformation-module-description"] p {
  font-size: 26px !important;
  line-height: 34px !important;
  letter-spacing: -0.52px !important;
  font-weight: 600;
} */

.flex-div [class*="videoContentInformation-module-description"] > :first-child {
  font-size: 48px !important;
  line-height: 48px !important;
  letter-spacing: -0.52px !important;
  font-weight: 600;
  margin-bottom: 24px;
}

.flex-div
  [class*="videoContentInformation-module-description"]
  > :nth-child(2) {
  margin-bottom: 60px;
  font-size: 28px;
  font-weight: 400;
}
.flex-div [class*="videoContentInformation-module-description"] ul {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}
/* ========================= */
/* 📱 <= 1024px (tablet) */
/* ========================= */
@media (max-width: 1024px) {
  .flex-div {
    flex-direction: column;
  }

  .flex-div > * {
    width: 100%;
  }

  .extra-container img {
    max-width: 100%;
  }

  .flex-div [class*="videoContentInformation-module-description"] {
    font-size: 32px;
    line-height: 40px;
  }

  .flex-div [class*="videoContentInformation-module-description"] ul {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ========================= */
/* 📱 <= 768px (mobile) */
/* ========================= */
@media (max-width: 768px) {
  .flex-div {
    gap: 16px;
    margin-bottom: 40px;
  }

  .flex-div > * {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .flex-div [class*="videoContentInformation-module-description"] {
    font-size: 24px;
    line-height: 32px;
  }

  .flex-div [class*="videoContentInformation-module-description"] ul {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ========================= */
/* 📱 <= 480px (small mobile) */
/* ========================= */
@media (max-width: 480px) {
  .flex-div > * {
    padding: 16px 12px;
  }

  .flex-div [class*="videoContentInformation-module-description"] {
    font-size: 20px;
    line-height: 28px;
  }

  .flex-div [class*="videoContentInformation-module-description"] ul {
    font-size: 14px;
    line-height: 22px;
  }
}

.countdown-section-style {
  padding: 40px 90px;
  background: black;
  border-radius: 22px;
  max-width: 1389px;
}

/* hide title */
.countdown-section-style [class*="videoCountdown-module-title"] {
  display: none;
}

/* numbers */
.countdown-section-style [class*="countdown_item"] > :nth-child(1) {
  color: #baf6f0;
  font-size: 84.688px;
  font-weight: 700;
  line-height: 97.391px;
  letter-spacing: -3.388px;
}

/* labels */
.countdown-section-style [class*="countdown_item"] > :nth-child(2) {
  color: #baf6f0;
  font-size: 16.736px;
  font-weight: 400;
  line-height: 23.43px;
  margin-bottom: 20px;
}

.countdown-section-style button {
  border-radius: 100px;
}

/* ========================= */
/* 📱 RESPONSIVE START */
/* ========================= */

/* <= 1440px */
@media (max-width: 1440px) {
  .countdown-section-style {
    padding: 40px 20px;
  }
}

/* <= 1024px */
@media (max-width: 1024px) {
  .countdown-section-style {
    padding: 30px 20px;
    text-align: center;
  }

  .countdown-section-style [class*="countdown_item"] > :nth-child(1) {
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -2px;
  }

  .countdown-section-style [class*="countdown_item"] > :nth-child(2) {
    font-size: 14px;
  }
}

/* <= 768px */
@media (max-width: 768px) {
  .countdown-section-style {
    padding: 25px 15px;
  }

  .countdown-section-style [class*="countdown_item"] > :nth-child(1) {
    font-size: 42px;
    line-height: 50px;
  }

  .countdown-section-style [class*="countdown_item"] > :nth-child(2) {
    font-size: 12px;
  }
}

/* <= 480px */
@media (max-width: 480px) {
  .countdown-section-style {
    padding: 20px 12px;
  }

  .countdown-section-style [class*="countdown_item"] > :nth-child(1) {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1px;
  }

  .countdown-section-style [class*="countdown_item"] > :nth-child(2) {
    font-size: 11px;
    margin-bottom: 12px;
  }
}

.hero-section-style {
  width: 100%;
  max-width: 1389px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-top: 50px;
  gap: 40px;
}

/* LEFT SIDE */
.hero-section-style .inner-left {
  width: 50%;
}

.hero-section-style .inner-left img {
  max-width: 216px;
  width: 100%;
  height: auto;
  margin-bottom: 60px;
}

.hero-section-style .inner-left h2 {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.1;
  color: black;
  margin-bottom: 14px;
  max-width: 450px;
}

.hero-section-style .inner-left p {
  font-size: 32px;
  line-height: 1.3;
  color: black;
}

/* RIGHT IMAGE */
.hero-section-style .inner-right {
  display: flex;
}
.hero-section-style .inner-right img {
  max-width: 100%;
  height: auto;
}

/* ========================= */
/* 📱 RESPONSIVE BREAKPOINTS */
/* ========================= */

/* <= 1024px (tablet) */
@media (max-width: 1024px) {
  .hero-section-style {
    flex-direction: column;
    text-align: center;
  }

  .hero-section-style .inner-left {
    width: 100%;
  }

  .hero-section-style .inner-left h2 {
    font-size: 48px;
    max-width: unset;
  }

  .hero-section-style .inner-left p {
    font-size: 22px;
  }

  .hero-section-style .inner-right img {
    position: static;
  }
}

/* <= 768px (mobile) */
@media (max-width: 768px) {
  .hero-section-style .inner-left img {
    max-width: 160px;
    margin-bottom: 30px;
  }

  /*.hero-section-style .inner-left h2 {
    font-size: 32px;
  }*/

  .flex-div
    [class*="videoContentInformation-module-description"]
    > :first-child {
    font-size: 32px !important;
  }

  .hero-section-style .inner-left p {
    font-size: 18px;
  }
}

/* <= 480px (small mobile) */
@media (max-width: 480px) {
  /*.hero-section-style .inner-left h2 {
    font-size: 26px;
  }*/

  .flex-div
    [class*="videoContentInformation-module-description"]
    > :nth-child(2) {
    font-size: 20px;
    line-height: 20px;
  }

  .flex-div
    [class*="videoContentInformation-module-description"]
    > :first-child {
    font-size: 26px !important;
    line-height: 26px !important;
  }

  .hero-section-style .inner-left p {
    font-size: 16px;
  }
}
@media (max-width: 1440px) {
  [class*="video-module-container"] {
    padding-inline: 15px;
  }
}
/* Styling End Here */

/* .learning-objectives-list {
    list-style: disc;
    list-style-position: inside;
} */

.hidden {
  display: none;
}
.set-width {
  max-width: 1100px;
}

button.uikitButtonsButton-module-element-tWqcL.uikitButtonsButton-module-isSizeMedium-UM7ej.uikitButtonsButton-module-isVariantDefault-bS138.uikitButtonsButton-module-isColorPrimary-7-muM {
  background: #f1204a;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.info-card h2 {
  margin-bottom: 16px;
  color: #4a0505;
  font-size: 22px;
  font-weight: 700;
}

.info-card h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 22px;
}

.info-card p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

.info-card hr {
  margin-top: 20px !important;
}

.info-card ul {
  list-style: none;
  padding: 0;
}

.info-card {
  border: 0.2px solid #000;
  border-radius: 10px;
  padding: 60px;
}

.instructor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.instructor-avatar {
  width: 64px;
  height: 64px;
  background: #ff2d55;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.instructor-info h3,
.instructor-info p {
  margin: 0;
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-card {
    padding: 30px;
  }
}

.why-section {
  background: #000;
  padding: 80px 60px;
  border-radius: 12px;
  margin-top: 3rem;
}

.why-container {
  max-width: 900px;
}

.why-label {
  color: #ff2d55;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
}

.why-title {
  color: white;
  font-size: 28px;
  margin-bottom: 48px;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.why-item {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.why-item h3 {
  color: white;
  margin: 0;
  font-size: 22px;
}

.why-item p {
  margin: 0;
  color: white;
  font-size: 18px;
  font-weight: 300;
}

.why-button {
  margin-top: 40px;
}

.register-btn {
  display: inline-block;
  background: #f1204a;
  color: white;
  padding: 6px 40px;
  border-radius: 30px;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 18px;
  transition: 0.3s;
}

.register-btn:hover {
  background: #ff1744;
}

@media (max-width: 768px) {
  .why-button .register-btn {
    font-size: 12px !important;
    text-align: center;
    line-height: 1.4em;
  }
}

.why-icon {
  flex-shrink: 0;
}

/* Hide Filters on all sessions */
.splitrow__column.splitrow__column--inlinefilters {
  display: none;
}

/* Hide the original 'Events' text for logged-in view.
   Scoped to .new_webinar_main (added by JS only on /student/all_sessions) so
   this doesn't also match /student/my_events and /student/requested_events,
   which share the exact same header markup. */
#main.new_webinar_main
  > div.main__header.main__header--events
  > header
  > div
  > h1.u-headingpage,
body.body--logged-out.a11y-nofocus
  main#main.main.main--student.new_webinar_main
  div.main__header.main__header--events
  header.pageheader
  div.pageheader__heading
  h1.u-headingpage {
  visibility: hidden;
  position: relative;
}

/* Replace with 'See latest webinars on TikTok' for both views */
#main.new_webinar_main
  > div.main__header.main__header--events
  > header
  > div
  > h1.u-headingpage::after,
body.body--logged-out.a11y-nofocus
  main#main.main.main--student.new_webinar_main
  div.main__header.main__header--events
  header.pageheader
  div.pageheader__heading
  h1.u-headingpage::after {
  content: "See latest webinars on TikTok";
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  color: inherit; /* Match the color of the original text */
  font-size: inherit; /* Match the font size of the original text */
}

/*Change locale menu text color to white */
#app-locale-trigger {
  color: white;
}
button .menulist__optionname {
  color: white;
}
.menulist__trigger:not(.menulist__trigger--button):hover,
.menulist__trigger:not(.menulist__trigger--button):active {
  background-color: black;
}

#catalog_home_page.main__content.main__content--catalog {
  margin-top: 0px;
  max-width: 1440px;
  padding: 64px 0 0;
}

/* Hides tracking login message */
.publiclogin__message {
  display: none;
}

#award_page > div > article > div.award__content.award__content--withbg > p {
  display: none;
}

#main
  > div.js-react-my-learning
  > div:nth-child(2)
  > div
  > div.uikitModalsModal-module-dialog-Gue0n.uikitModalsModal-module-isFluid-VhXLV
  > div
  > div
  > div
  > div.credentialModal-module-header-kItxK
  > div.credentialModal-module-subject-ihtjg {
  display: none;
}

/* Hides Credential header in modal */
.credentialModal-module-subject-ihtjg {
  display: none;
}

/* Replaces Credential header in modal with "Achievement Unlocked!" */
.credentialModal-module-subject-ihtjg:after {
  content: "Achievement Unlocked!";
}

/* Hides Credential header in letter*/
.award__congrats {
  display: none;
}

/* Hides More Credential h3 on Profile page*/
h3.uikitContentTypo-module-element-rNmnU
  uikitContentTypo-module-isVariantSupport03-pfpmf
  uikitContentTypo-module-isModifierMedium-6TX0U
  profileCredentialsCategoryList-module-title-yx61S {
  display: none;
}

/* Hides Credential header on Profile page*/
header.profileCredentials-module-header-q-iDq > h2 {
  display: none;
}

/* Hides Credential header on Profile page*/
header.profileCredentials-module-header-q-iDq h2 {
  display: none;
}

/* Replaces Credential header with Achievements on Profile page*/
.profileCredentials-module-header-q-iDq:before {
  content: "Achievements";
  font-size: 1.25rem;
}

/* Hides More Credential h3 on Profile page*/
.profileCredentialsCategoryList-module-category-ovSRK > h3 {
  display: none;
}

/* Hides number ticker in Credentials header on Profile page*/
div.uikitInsigniasInsignia-module-text-Tq2KF {
  display: none;
}

svg.rating__star {
  max-width: 20px !important;
}

// login css
.publiclogin__pageheading {
  display: none;
}
h1.publiclogin__pageheading {
  display: none !important;
}
.publiclogin__pageheading,
h1.publiclogin__pageheading {
  display: none !important;
}

.publiclogin__heading,
.u-headingdialog {
  display: none;
}
.login__form .noresults__heading {
  display: none;
}
.login__form .noresults__text {
  display: none;
}
.noresults__image {
  width: 350px;
  height: unset;
}
.dialog__contentbody .u-headingdialog {
  display: none;
}
.dialog__contentbody svg {
  width: 350px !important;
}
.login__title {
  font-size: 32px;
  font-weight: 500;
  margin-block: 12px;
}

.login__subtitle {
  font-size: 16px;
  max-width: 318px;
  margin: 0 auto;
}
.login__form {
  max-width: 450px !important;
}

// event page
/* Main container */
.mockup {
  overflow-x: hidden !important;
}

/* Hero Section */
.hero-section {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 100vh !important;
  background-color: #000 !important;
  color: #fff !important;
  padding: 0 200px !important;
}

.hero-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 40px !important;
  align-items: flex-start !important;
}

.hero-content h1 {
  font-size: 48px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.hero-content .highlight {
  color: #e81155 !important;
}

.cta-hero {
  background-color: #e81155 !important;
  border: 1px solid #e81155 !important;
  color: #fff !important;
  margin-top: 30px !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  display: inline-block !important;
}

.hero-content p {
  font-size: 18px !important;
  margin-top: 20px !important;
}

.cta-button {
  margin-top: 30px !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  display: inline-block !important;
}

.hero-video {
  flex: 1 !important;
}

/* Product Vision Section */
.product-vision {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 100px 400px !important;
  background-color: #fff !important;
  color: #000 !important;
}

.vision-content {
  max-width: 50% !important;
}

.vision-content h2 {
  font-size: 40px !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
  font-weight: 300 !important;
}

.vision-content .highlight {
  color: #ff0050 !important;
}

.vision-content p {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 300 !important;
}

.vision-image {
  max-width: 40% !important;
  display: flex !important;
  justify-content: center !important;
}

.vision-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  display: block !important;
}

/* Creative Section */
.creative-section {
  text-align: center !important;
  padding: 100px 400px !important;
  background: #f9f9f9 !important;
}

.creative-section h1 {
  font-size: 4rem !important;
  font-weight: bold !important;
  margin: 0 !important;
}

.creative-section .highlight {
  color: #ff2d55 !important;
}

.creative-section p {
  font-size: 18px !important;
  color: #555 !important;
  margin: 8px 0 !important;
}
/* TikTok One Section */
.tiktok-one {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 30px !important;
  padding: 100px 400px !important;
}

.tiktok-one-video {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

.tiktok-one-content {
  flex: 1 !important;
  text-align: left !important;
}

.tiktok-one-content h2 {
  font-weight: 300 !important;
  font-size: 40px !important;
  margin-bottom: 0 !important;
}

.tiktok-one-content p {
  font-weight: 300 !important;
  color: #555 !important;
  line-height: 1.4 !important;
  margin-top: 8px !important;
}

.waitlist-button {
  display: inline-block !important;
  margin-top: 15px !important;
  padding: 16px !important;
  border: 1px solid black !important;
  color: black !important;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  border-radius: 25px !important;
  text-decoration: none !important;
}
/* Brand Building Section */
.brand-building {
  text-align: center !important;
  padding: 100px 400px !important;
  background: #f9f9f9 !important;
}

.brand-building h1 {
  font-size: 4rem !important;
  font-weight: bold !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.brand-building .highlight {
  color: #ff2d55 !important;
}

.brand-building p {
  color: #555 !important;
  margin: 8px auto !important;
  max-width: 600px !important;
}

/* Brand Solutions Section */
.brand-solutions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  padding: 100px 400px !important;
}

.solutions-content {
  flex: 1 !important;
  text-align: left !important;
}

.solutions-content h2 {
  font-size: 40px !important;
  font-weight: 300 !important;
}

.solutions-subtext {
  padding-left: 18px !important;
  color: #333 !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
}

.solutions-list {
  padding-left: 18px !important;
  color: #333 !important;
  margin-top: 2px !important;
  font-family: inherit !important;
  font-weight: 300 !important;
}

.solutions-list li {
  margin-block: 4px !important;
}

/* Solutions Image */
.solutions-image {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

.solutions-image img {
  max-width: 300px !important;
  border-radius: 8px !important;
}
/* General Section Styling */
.brand-impact {
  margin: 0 !important;
  padding: 100px 200px !important;
  background: #f9f9f9 !important;
}

.brand-impact-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.brand-impact-header h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: bold !important;
}

.cta-button {
  font-size: 14px !important;
  border: 1px solid #ccc !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  background: #fff !important;
  padding: 15px 30px !important;
  text-decoration: none !important;
  color: #000 !important;
  transition: background 0.3s ease !important;
}

.cta-button:hover {
  background: #eaeaea !important;
}

/* Carousel Container */
.carousel-container {
  margin-top: 30px !important;
  overflow: hidden !important;
  width: 1200px !important;
  max-width: 100% !important;
  position: relative !important;
}

.carousel-track {
  display: flex !important;
  transition: transform 0.3s ease !important;
  width: 2400px !important;
}

/* Carousel Items */
.carousel-item {
  width: 600px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #000 !important;
  display: flex !important;
  border-radius: 10px !important;
  transition: transform 0.3s ease !important;
}

.carousel-item:hover {
  transform: scale(1.02) !important;
}

.video-wrapper {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

.carousel-text {
  margin-left: 20px !important;
}

.brand-name {
  margin: 0 0 8px 0 !important;
  font-weight: bold !important;
  font-size: 28px !important;
}

.brand-quote {
  font-size: 16px !important;
  margin: 5px 0 0 !important;
}

/* Carousel Navigation Buttons */
.carousel-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 20px !important;
}

.carousel-btn {
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer !important;
  margin-right: 10px !important;
  transition: background 0.3s ease !important;
}

.carousel-btn:hover {
  background: #eaeaea !important;
}

/* Section Padding */
.section-padding {
  text-align: center !important;
  padding: 80px 10% !important;
}

/* Main Heading */
.main-heading {
  font-size: 4rem !important;
  font-weight: bold !important;
  margin: 0 !important;
}

/* Highlight Text */
.highlight-text {
  color: #ff2d55 !important;
}

/* Subtext */
.subtext {
  color: #555 !important;
  margin: 8px auto !important;
  max-width: 600px !important;
  font-size: 1.2rem !important;
}

/* Content Section */
.content-section {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  padding: 100px 10% !important;
  background: #f9f9f9 !important;
}

/* Content Text */
.content-text {
  flex: 1 !important;
  text-align: left !important;
  max-width: 500px !important;
}

/* Content Title */
.content-title {
  font-size: 2.5rem !important;
  line-height: 1.2 !important;
  margin: 0 0 20px !important;
  font-weight: 300 !important;
}

/* Content Description */
.content-description {
  font-size: 1.1rem !important;
  line-height: 1.75 !important;
  font-weight: 300 !important;
  margin: 0 !important;
}

/* Content Image */
.content-image {
  max-width: 40% !important;
  display: flex !important;
  justify-content: center !important;
}

.content-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  display: block !important;
}

.courses {
  background-color: #000 !important;
  color: #fff !important;
  padding: 76px 129px !important;
}
.courses__title {
  margin: 0 auto 54px !important;
  font-size: 60px !important;
  text-align: center !important;
}
.course-card {
  border: 1px solid #fff !important;
  padding: 28px 31px !important;
  max-width: 410px !important;
  border-radius: 20px !important;
}

.course-card__label {
  display: inline-block !important;
  border-radius: 5px !important;
  border: 1px solid #fff !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
}

.course-card__title {
  margin: 37px 0 8px !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

.course-card__description {
  font-size: 18px !important;
  margin: 0 0 24px !important;
}

.course__btn {
  background: none !important;
  border: 1px solid !important;
  color: inherit !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.course-card__button {
  border-radius: 16px !important;
  background: #f1204a !important;
  border: #f1204a !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
}

.courses__action {
  display: flex !important;
  margin: 8px auto 0 !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  justify-content: center !important;
  gap: 8px !important;
}
.courses__carousel {
  width: 100% !important;
  max-width: 1271px !important;
  overflow: hidden !important;
  margin-inline: auto !important;
}

.courses__list {
  display: flex !important;
  transition: transform 0.5s ease !important;
  width: 300% !important;
  gap: 18px !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .content-section {
    flex-direction: column !important;
    text-align: center !important;
  }

  .content-text {
    text-align: center !important;
    max-width: 100% !important;
  }

  .content-image {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding: 60px 5% !important;
  }

  .main-heading {
    font-size: 2.5rem !important;
  }

  .subtext {
    font-size: 1rem !important;
  }

  .content-title {
    font-size: 2rem !important;
  }

  .content-description {
    font-size: 1rem !important;
  }

  .cta-button {
    padding: 12px 16px !important;
    font-size: 0.8rem !important;
  }

  .content-section {
    padding: 60px 5% !important;
  }
}

@media (max-width: 480px) {
  div#public-login-dialog .dialog__contentbody svg {
    width: 240px !important;
    height: 125px !important;
  }
  .appheader__titleimage {
    max-width: 90px;
    max-height: 100%;
  }
  .main-heading {
    font-size: 2rem !important;
  }

  .content-title {
    font-size: 1.8rem !important;
  }

  .content-description {
    font-size: 0.95rem !important;
  }

  .cta-button {
    padding: 10px 14px !important;
  }
}

@media (max-width: 1200px) {
  .brand-impact {
    padding: 80px 100px !important;
  }
  .creative-section {
    padding: 80px 200px !important;
  }
  .tiktok-one {
    padding: 80px 200px !important;
  }
  .brand-building {
    padding: 80px 200px !important;
  }
  .brand-solutions {
    padding: 80px 200px !important;
  }
}

@media (max-width: 900px) {
  .hero-section,
  .product-vision {
    flex-direction: column !important;
    text-align: center !important;
    padding: 50px 80px !important;
  }

  .hero-content,
  .vision-content {
    max-width: 100% !important;
    padding: 20px !important;
    align-items: center !important;
  }

  .hero-video {
    margin-top: 20px !important;
  }

  .vision-image {
    max-width: 100% !important;
    margin-top: 20px !important;
  }
  .brand-impact {
    padding: 60px 50px !important;
  }

  .brand-impact-header {
    flex-direction: column !important;
    text-align: center !important;
  }

  .cta-button {
    margin-top: 10px !important;
  }

  .carousel-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .carousel-text {
    margin-left: 0 !important;
    margin-top: 15px !important;
  }
  .brand-solutions {
    flex-direction: column !important;
    text-align: center !important;
    padding: 60px 100px !important;
  }

  .solutions-content {
    text-align: center !important;
  }

  .solutions-subtext,
  .solutions-list {
    padding-left: 0 !important;
  }

  .solutions-image img {
    max-width: 250px !important;
  }
  .creative-section {
    padding: 60px 100px !important;
  }

  .creative-section h1 {
    font-size: 3rem !important;
  }

  .creative-section p {
    font-size: 16px !important;
  }
  .tiktok-one {
    flex-direction: column !important;
    text-align: center !important;
    padding: 60px 100px !important;
  }

  .tiktok-one-video iframe {
    width: 280px !important;
    height: 450px !important;
  }

  .tiktok-one-content {
    text-align: center !important;
  }
  .brand-building {
    padding: 60px 100px !important;
  }

  .brand-building h1 {
    font-size: 3rem !important;
  }
}

@media (max-width: 600px) {
  .brand-impact {
    padding: 40px 20px !important;
  }

  .brand-impact-header h2 {
    font-size: 20px !important;
  }

  .brand-name {
    font-size: 24px !important;
  }

  .brand-quote {
    font-size: 14px !important;
  }

  .carousel-btn {
    width: 35px !important;
    height: 35px !important;
  }
  .brand-solutions {
    padding: 40px 20px !important;
  }

  .solutions-content h2 {
    font-size: 32px !important;
  }

  .solutions-subtext {
    font-size: 16px !important;
  }

  .solutions-list {
    font-size: 14px !important;
  }

  .solutions-image img {
    max-width: 200px !important;
  }
  .hero-section {
    padding: 30px !important;
  }

  .hero-content h1 {
    font-size: 32px !important;
  }

  .hero-content p,
  .vision-content p {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .cta-button {
    font-size: 14px !important;
    padding: 12px 24px !important;
  }

  .product-vision {
    padding: 40px 20px !important;
  }

  .creative-section {
    padding: 40px 20px !important;
  }

  .creative-section h1 {
    font-size: 2.5rem !important;
  }

  .creative-section p {
    font-size: 14px !important;
  }

  .tiktok-one {
    padding: 40px 20px !important;
  }

  .tiktok-one-content h2 {
    font-size: 32px !important;
  }

  .tiktok-one-content p {
    font-size: 14px !important;
  }

  .tiktok-one-video iframe {
    width: 100% !important;
    height: auto !important;
  }
  .brand-building {
    padding: 40px 20px !important;
  }

  .brand-building h1 {
    font-size: 2.5rem !important;
  }

  .brand-building p {
    font-size: 14px !important;
  }
}

/* Card 1 */
a[href="/student/videos/on-demand/891"]
  .videosCardContent-module-metaContainer-vk0Cy
  > * {
  display: none;
}
a[href="/student/videos/on-demand/891"]
  .videosCardContent-module-metaContainer-vk0Cy::after {
  content: "From viral Thai dances to unique challenges, we explore how global cultures collide and connect on TikTok.";
  display: block;
  font-size: 14px; /* adjust as needed */
  color: #333;
  padding: 5px 0; /* optional styling */
}

/* Card 2 */
a[href="/student/videos/on-demand/892"]
  .videosCardContent-module-metaContainer-vk0Cy
  > * {
  display: none;
}
a[href="/student/videos/on-demand/892"]
  .videosCardContent-module-metaContainer-vk0Cy::after {
  content: "In the first of our 'Get Creative' series, discover TikTok Creative Center, our ultimate resource for demystifying what's trending on TikTok!";
  display: block;
  font-size: 14px;
  color: #333;
  padding: 5px 0;
}

/* Card 3 */
a[href="/student/videos/on-demand/893"]
  .videosCardContent-module-metaContainer-vk0Cy
  > * {
  display: none;
}
a[href="/student/videos/on-demand/893"]
  .videosCardContent-module-metaContainer-vk0Cy::after {
  content: "Symphony Assistant is an all-new AI production tool for brands to generate video content for Tiktok with minimal inputs.";
  display: block;
  font-size: 14px;
  color: #333;
  padding: 5px 0;
}

/* .coursepage article.coursepage__contentmain.page .course__content {
    display: flex;
    flex-direction: column-reverse;
} */
.coursepage
  article.coursepage__contentmain.course
  .collapsible
  ul.cardgrid
  .truncate__lastline--truncated:after {
  display: none;
}
.coursepage
  article.coursepage__contentmain.course
  .collapsible
  ul.cardgrid
  span.truncate__overflow {
  display: block;
}
.coursepage
  article.coursepage__contentmain.course
  .collapsible
  ul.cardgrid
  .activitycard__name {
  height: auto;
  max-height: 100%;
}
.coursepage article.coursepage__contentmain.course p.summary {
  line-height: 20px;
  margin-bottom: 0;
  margin-top: 10px;
  font-weight: 100;
  font-size: 14px;
  color: #7e7a7a;
  letter-spacing: 0.5px;
}
[data-controller="catalogs"] .appfooter__link.appfooter__link--poweredby {
  display: none;
}
div#public-login-dialog .dialog__contentbody svg {
  height: 130px !important;
}
.testing .cardgrid__item {
  width: 100%;
  border: 1px solid #00000029;
  border-radius: 12px;
  padding: 10px;
}
.testing .double_click_protection {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 24px;
}
.testing .activitycard__imagecontainer {
  max-width: 220px;
  border-radius: 8px;
  overflow: hidden;
}
.custom-sectionz {
  max-width: 1100px;
  margin: 0 auto;
}

/* Webinars On-Demand section (/student/all_sessions) */
.custom-section {
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 24px auto;
  padding: 64px 54px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: #edbbe8;
  border-radius: 16px;
  box-sizing: border-box;
}

.custom-section__header {
  display: flex;
  width: 100%;
  padding-bottom: 27.778px;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.custom-section__heading {
  margin: 0;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.64px;
}

.custom-section__subheading {
  margin: 12px 0 0;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.custom-section .custom-card-grid {
  width: 100%;
  margin-top: 40px;
}

.custom-card {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border-radius: 24px;
  box-sizing: border-box;
}

.custom-card__imagewrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 16px;
  overflow: hidden;
}

.custom-card__imagering {
  display: block;
  width: 52%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.6),
    0 0 0 8px rgba(255, 255, 255, 0.2);
}

.custom-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-card__replays {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: rgba(255, 255, 255, 0.75);
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.custom-card__hashtag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: #fff;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}

.custom-card__title {
  margin: 0;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 100%;
}

.custom-card__watchnow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.custom-card__watchnow svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .custom-section {
    padding: 32px 20px;
  }
  .custom-section__header {
    flex-direction: column;
  }
}
.testing .activitycard__textcontainer {
  width: 100%;
}
@media (max-width: 768px) {
  .testing .activitycard__imagecontainer {
    max-width: unset;
  }
  .testing .double_click_protection {
    flex-direction: column;
  }
}

@media screen and (min-width: 480px) {
  .media-certificate-desktop-img {
    display: block;
  }
  .media-certificate-mobile-img {
    display: none;
  }
}
@media screen and (max-width: 479px) {
  .media-certificate-desktop-img {
    display: none;
  }
  .media-certificate-mobile-img {
    display: block;
  }
}
.appfooter__link {
  display: none;
}
.uikitGridsColumn-module-element-eR0IY
  .uikitInsigniasInsignia-module-text-Tq2KF {
  display: block;
}
.custom-appended-message {
  display: flex;
  margin-top: 2px !important;
  align-items: flex-start !important;
}

/* Course Modules page CTA */
.tta-cta-section {
  padding: 40px 48px 60px;
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
}

.tta-cta__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #000;
}

.tta-cta__desc {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
}

.tta-cta__btn {
  display: inline-block;
  background: #f1204a;
  color: #fff;
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.tta-cta__btn:hover {
  background: #d41f46;
  color: #fff;
  text-decoration: none;
}

/* ========================================
   Symphony / Featured Banner
   ======================================== */
.new_banner--featured {
  min-height: 240px;
  padding: 36px 48px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
}

.new_banner--featured .content-side {
  position: relative;
  z-index: 1;
  max-width: 55%;
  flex-shrink: 0;
}

.new_banner--featured .image-side {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  max-width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.new_banner--featured .image-side img {
  max-width: 100%;
  height: auto;
  display: block;
}

.new_banner--featured .banner_title {
  color: #000;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 10px;
}

.new_banner--featured .banner_desc {
  color: #fff;
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.4;
  font-weight: 500;
  max-width: 420px;
}

.banner_bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.banner_bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000;
  font-size: 1rem;
  padding: 4px 0;
  line-height: 1.4;
  font-weight: 500;
}

.banner_bullet .tick-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.banner_cta {
  display: inline-block;
  background: #f1204a;
  color: #fff !important;
  padding: 13px 40px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none !important;
  margin-bottom: 12px;
  transition: background 0.2s;
}

.banner_cta:hover {
  background: #d91f43 !important;
  color: #fff !important;
}

.banner_footer_note {
  color: #000;
  font-size: 1rem;
  margin: 0;
  font-weight: 500;
}

.bb-watermarks {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  pointer-events: none;
  z-index: 0;
}

.bb-watermarks span {
  display: block;
  flex-shrink: 0;
}

.bb-watermarks span svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .new_banner--featured {
    padding: 28px 24px;
    flex-direction: column;
  }

  .new_banner--featured .content-side {
    max-width: 100%;
  }

  .new_banner--featured .image-side {
    max-width: 100%;
    justify-content: center;
  }

  .bb-watermarks {
    display: none;
  }
}

/* =====================================================
   Creative Hub — Get Started With Creative on TikTok
   ===================================================== */
.creative_hub .pageoutline,
.creative_hub .page__metaratings,
.creative_hub .pgheading__actions,
.creative_hub .pgheading__meta.activitymeta {
  display: none;
}
.creative_hub {
  padding: 0;
}
/* Let new_BBLove handle header padding — only override max-width/margin */
.creative_hub header.page__header {
  max-width: 100%;
  margin: 0;
  padding-inline: clamp(20px, calc(-110px + 17vw), 140px);
  background-image: none !important;
  background-color: #033624 !important;
}
.creative_hub h1.banner_title,
.creative_hub .banner_desc {
  color: #ffffff !important;
  margin-bottom: 20px;
  max-width: 800px;
}

/* Remove banner's own horizontal padding so the header's padding-inline
   is the single source of left/right spacing — equal on both sides */
.creative_hub .new_banner--featured {
  padding-left: 0;
  padding-right: 0;
}

/* Allow both sides to shrink as viewport narrows so the image-side is never
   clipped by overflow:hidden on the banner container */
.creative_hub .new_banner--featured .image-side {
  flex-shrink: 1;
  min-width: 0;
}
.creative_hub .new_banner--featured .content-side {
  min-width: 0;
}

/* ── Bullets: single horizontal row with per-bullet icons ── */
.creative_hub .banner_bullets {
  display: flex;
  flex-direction: row;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin-top: 28px;
  flex-wrap: wrap;
}
@media (max-width: 1496px) and (min-width: 1174px) {
  /* Give image-side a slightly tighter cap so content-side has enough room */
  .creative_hub .new_banner--featured .image-side {
    max-width: 38%;
  }
  .creative_hub .new_banner--featured .content-side {
    max-width: 58%;
  }
}
@media (max-width: 1173px) {
  .creative_hub .new_banner--featured .image-side {
    max-width: 35%;
  }
  .creative_hub .new_banner--featured .content-side {
    max-width: 60%;
  }
}
@media (max-width: 768px) {
  .creative_hub header.page__header {
    padding-inline: 20px;
  }
  .creative_hub .banner_bullets {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .creative_hub .new_banner--featured {
    padding-bottom: 0;
  }
  .creative_hub .new_banner--featured .content-side {
    max-width: 100%;
  }
  .creative_hub .new_banner--featured .image-side {
    max-width: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .creative_hub .new_banner--featured .image-side img {
    width: auto;
    max-width: 280px;
    height: auto;
    display: block;
  }
}

/* ── Path cards ── */
.creative_hub_page .ch-paths-section {
  padding: 64px clamp(20px, calc(-110px + 17vw), 140px);
}

.creative_hub_page .ch-paths__heading {
  font-size: 32px;
  font-weight: 500;
  color: #000;
  margin: 0 0 20px;
  line-height: 1.2;
  letter-spacing: -0.84px;
}

.creative_hub_page .ch-paths__rule {
  border: none;
  border-top: 1.5px solid #000000;
  margin: 0 0 32px;
}

.creative_hub_page .ch-paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.creative_hub_page .ch-path-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.32);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.creative_hub_page .ch-path-card__title {
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin: 0;
  line-height: 1.2;
}

.creative_hub_page .ch-path-card__desc {
  font-size: 17px;
  color: #000000;
  line-height: 1.5;
  margin: 0;
  font-family: "TikTok Sans";
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.16px;
  font-optical-sizing: auto;
}

.creative_hub_page .ch-path-card__media {
  flex: 1;
}

.creative_hub_page .ch-path-card__img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

.creative_hub_page .ch-path-card__img-placeholder {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #e8e8e8;
}

.creative_hub_page .ch-path-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1204a;
  color: #fff !important;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
  align-self: flex-start;
  font-family: "TikTok Sans";
}
.creative_hub_page .ch-path-card__btn:hover {
  background: #d91f43 !important;
}
.creative_hub_page .ch-path-card__btn-icon {
  height: 10px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* ── Webinars ── */
.creative_hub_page .ch-webinars-section {
  background: #e7d1af;
  padding: 72px 40px;
  overflow: hidden;
  margin: 0 clamp(0px, calc(-50px + 10vw), 100px) 40px;
  border-radius: 14px;
}
.creative_hub_page .ch-webinars-section .webinar-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
  margin-bottom: 48px;
}
.creative_hub_page .ch-webinars-section .webinar-heading__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.creative_hub_page .ch-webinars-section .webinar-heading h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.84px;
  color: #000000;
  margin: 0;
}
.creative_hub_page .ch-webinars-section .webinar-subtitle {
  font-size: 17px;
  color: #000000;
  margin: 0;
  font-family: "TikTok Sans";
  font-weight: 300;
}
.creative_hub_page .ch-webinars-section .webinar-arrows {
  display: flex;
  gap: 16px;
}
.creative_hub_page .ch-webinars-section .arrow-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #000;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  transition: background 0.3s;
}
.creative_hub_page .ch-webinars-section .arrow-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.creative_hub_page .ch-webinars-section .webinar-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 0 12px;
}
.creative_hub_page .ch-webinars-section .webinar-card {
  flex: 0 0 calc(33.333% - 11px);
  min-width: calc(33.333% - 11px);
  background: #fff;
  border-radius: 20px;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  overflow: hidden;
}
.creative_hub_page .ch-webinars-section .webinar-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}
.creative_hub_page .ch-webinars-section a.webinar-tag:hover {
  opacity: 0.8;
}
.creative_hub_page .ch-webinars-section .webinar-tag {
  display: inline-block;
  padding: 2px 20px;
  border-radius: 30px;
  font-size: 9px;
  font-weight: 700;
  color: white;
  align-self: flex-start;
  margin-top: 20px;
  letter-spacing: 1px;
  font-family: "TikTok Sans";
  font-weight: 900;
}
.creative_hub_page .ch-webinars-section .webinar-card h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin-top: 20px;
  color: black;
  flex: 1;
  font-family: "TikTok Sans";
}
.creative_hub_page .ch-webinars-section .webinar-card a:not(.webinar-tag) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 1px solid #121212;
  border-radius: 100px;
  color: #121212 !important;
  font-size: 12px;
  font-weight: 500;
  margin-top: 10px;
  align-self: flex-start;
  text-decoration: none !important;
  transition:
    background 0.2s,
    color 0.2s;
  font-family: "TikTok Sans";
}
.creative_hub_page
  .ch-webinars-section
  .webinar-card
  a:not(.webinar-tag):hover {
  background: #f1204a;
  color: #fff !important;
  border-color: #f1204a;
}
/* Tag link — keep identical look to the span version, no underline/border bleed */
.creative_hub_page .ch-webinars-section .webinar-card a.webinar-tag {
  text-decoration: none !important;
  border: none !important;
  cursor: pointer;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .creative_hub_page .ch-webinars-section {
    margin-inline: 16px;
    padding-inline: 24px;
  }
  .creative_hub_page .ch-webinars-section .webinar-card {
    flex: 0 0 calc(50% - 8px);
    min-width: calc(50% - 8px);
  }
}
@media (max-width: 768px) {
  .creative_hub_page .ch-paths-section {
    padding: 20px;
  }
  .creative_hub_page .ch-paths__grid {
    grid-template-columns: 1fr;
  }
  .creative_hub_page .ch-webinars-section {
    padding: 48px 20px;
    margin-inline: 0;
    border-radius: 0;
  }
  .creative_hub_page .ch-webinars-section .webinar-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
  }
  .creative_hub_page .ch-webinars-section .webinar-heading h2 {
    font-size: 26px;
  }
  .creative_hub_page .ch-webinars-section .webinar-subtitle {
    font-size: 15px;
  }
  .creative_hub_page .ch-webinars-section .arrow-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .creative_hub_page .ch-webinars-section .webinar-card {
    flex: 0 0 100%;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .creative_hub_page .ch-webinars-section {
    padding: 36px 16px;
  }
  .creative_hub_page .ch-webinars-section .webinar-heading h2 {
    font-size: 22px;
  }
  .creative_hub_page .ch-webinars-section .webinar-heading {
    margin-bottom: 24px;
  }
  .creative_hub_page .ch-webinars-section .webinar-card {
    padding: 20px 16px;
  }
}
/* ── Webinar skeleton loader ── */
@keyframes ch-wskel-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.creative_hub_page .webinar-skeleton-card {
  flex: 0 0 calc(33.333% - 11px);
  min-width: calc(33.333% - 11px);
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.creative_hub_page .wskel-img {
  height: 180px;
  border-radius: 12px;
}
.creative_hub_page .wskel-tag {
  height: 20px;
  width: 70px;
  border-radius: 999px;
}
.creative_hub_page .wskel-title {
  height: 16px;
  width: 90%;
  border-radius: 4px;
}
.creative_hub_page .wskel-title--short {
  width: 60%;
}
.creative_hub_page .wskel-btn {
  height: 36px;
  width: 120px;
  border-radius: 999px;
  margin-top: 4px;
}
.creative_hub_page .wskel-img,
.creative_hub_page .wskel-tag,
.creative_hub_page .wskel-title,
.creative_hub_page .wskel-btn {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 800px 100%;
  animation: ch-wskel-shimmer 1.4s infinite linear;
}
/* End Creative Hub */
.creative_hub_page .ch-banner-logo {
  margin-bottom: 14px !important;
}

/* =====================================================
   Catalog Page Redesign (/student/catalog)
   ===================================================== */

/* Event card action button */
.catalogcard__content--event .catalogcard__actions a {
  padding: 12px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

/* Utility: hide sections by class */
.section-hide {
  display: none;
}

/* Section wrapper (max-width container) */
.section-wrapper {
  max-width: 1400px;
  margin-inline: auto;
}

/* Align content with nav bar on desktop */
@media (min-width: 1024px) {
  #catalog_home_page .main__content {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* ── Learning paths section (IIFE 1 styling) ── */
.learning-paths-section .catalogcards__headertext {
  width: 100%;
}
.learning-paths-section .u-headingsection {
  font-size: 42px;
  font-weight: 500;
  line-height: 100%;
  color: black;
  letter-spacing: -0.84px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid black;
}
.learning-paths-section .catalogcards__description {
  display: none;
}
.learning-paths-section .catalogcards__listitem {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.learning-path-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: black;
}
.learning-path-content .learning-path-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: -0.56px;
}
.learning-path-content .learning-path-description {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  margin-bottom: 0;
}
.learning-path-content .learning-path-btn {
  padding: 12px 16px;
  color: white;
  background: #f1204a;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  max-width: fit-content;
}
.learning-path-content .learning-path-btn:hover {
  text-decoration: none;
}

/* Learning path tags */
.lp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 20px;
}
.lp-tag {
  display: inline-block;
  padding: 4px 10px;
  border: none;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #4a0505;
  background: #edd4b2;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.6;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.lp-tag:hover {
  text-decoration: none;
}

.catalogcards__listitem img {
  border-radius: 20px;
}

/* ── Webinar section (IIFE 1 styling) ── */
.webinar-section .catalogcards__header,
.webinar-section .catalogcards__scrollcontainer {
  max-width: 1400px;
  margin: 0 auto;
}
.webinar-section .catalogcards__headertext {
  width: 100%;
}
.webinar-section .catalogcards__heading {
  font-size: 42px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.84px;
  color: black;
}
.webinar-section .catalogcards__description,
.webinar-section .catalogcards__footer {
  display: none;
}
.webinar-section .catalogcards__listitem {
  display: flex;
  flex-direction: column;
}
.catalogcards__listitem .catalogcard--event {
  background: white;
  border-radius: 20px;
  padding: 20px;
  border: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.webinar-section .catalogcard__content--event {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.catalogcards__listitem .catalogcard--event .catalogcard__heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: black;
  margin-bottom: 16px;
}
.catalogcards__listitem .catalogcard--event .catalogcard__actionsbutton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border: 1px solid #000 !important;
  border-radius: 100px !important;
  color: black !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: transparent !important;
  align-self: flex-start !important;
  text-decoration: none !important;
  width: auto !important;
  min-width: unset !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.catalogcards__listitem
  .catalogcard--event
  .catalogcard__actionsbutton:hover:not([disabled]) {
  background: #f1204a !important;
  color: white !important;
  border-color: #f1204a !important;
  text-decoration: none !important;
}
.webinar-section .catalogcard__heading a,
.webinar-section .catalogcard__heading a:visited {
  color: black;
  text-decoration: none;
}
.webinar-section .catalogcard__heading a:hover {
  text-decoration: none;
}
.webinar-section .catalogcard__actions {
  margin-top: auto;
  margin-bottom: 20px;
}
.catalogcards__listitem .catalogcard--event .catalogcard__time {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.webinar-section .catalogcards__headertext {
  border-bottom: 1px solid black;
  margin-bottom: 48px;
  padding-bottom: 28px;
}
.webinar-section .catalogcard__content--event .catalogcard__actions a {
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
}

@media (max-width: 768px) {
  .webinar-section .catalogcards__headertext {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .webinar-section .catalogcards__listitem {
    flex: 0 0 48% !important;
    min-width: 48% !important;
  }
}
@media (max-width: 430px) {
  .webinar-section .catalogcards__listitem {
    flex: 0 0 100% !important;
    min-width: 100% !important;
  }
}

/* ── Top webinar banner ── */
.top-webinar-banner {
  width: 100%;
  background: #f1204a;
  padding: 14px 20px;
  position: relative;
  z-index: 999999;
  display: block !important;
}
.top-webinar-banner-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.banner-label,
.banner-text,
.banner-link {
  color: #fff;
  font-size: 14px;
}
.banner-text {
  font-weight: 700;
}
.banner-link {
  text-decoration: underline;
}
.banner-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .top-webinar-banner {
    padding: 12px 40px 12px 16px;
  }
  .banner-content {
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
  .banner-label,
  .banner-text,
  .banner-link {
    font-size: 12px;
  }
  .banner-link {
    width: 100%;
    text-align: center;
  }
}

/* ── Hero container (hidden — video section is the visible entry point) ── */
.hero-container {
  display: none;
}

/* ── Video section ── */
.video-container {
  max-width: 1400px;
  background: transparent;
  line-height: 0;
  font-size: 0;
  position: relative;
  padding-top: 64px;
  padding-bottom: 64px;
  margin: auto;
 margin-top:30px;
}
.video-container > * {
  width: 100%;
  display: block;
}
.video-container .hero {
  border-radius: 20px;
  overflow: hidden;
}
.video-container .hero-overlay {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding-inline: 20px;
  text-align: center;
  color: #fff;
  z-index: 10;
  line-height: normal;
  font-size: 16px;
}
.video-container .hero-overlay p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 24px;
  color: #fff;
}
.video-container .hero-overlay .register-now {
  display: inline-block;
  padding: 12px 28px;
  background: #f1204a;
  color: #fff;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.video-container .hero-overlay .register-now:hover {
  background: #d0153e;
  text-decoration: none;
}
.video-container .hero-overlay .hero-subtext {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  margin-top: 16px;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .video-container {
    padding-inline: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .video-container .hero {
    border-radius: 12px;
    min-height: 480px;
    position: relative !important;
    overflow: hidden;
  }
  /* !important throughout: the Northpass carousel widget (.hero--carousel)
     ships its own CSS for .hero__link/.hero__image/img with selectors that
     can outrank these on specificity, silently reverting the image back to
     normal in-flow sizing — which on mobile (a much taller-aspect image
     than desktop) rendered as an empty box with the photo squeezed to
     near-nothing. Forcing every layer of the wrapper chain to fill .hero
     and forcing the image itself to absolute+cover guarantees our sizing
     wins regardless of their rule order/specificity. */
  .video-container .hero .hero__link,
  .video-container .hero picture.hero__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .video-container .hero img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .video-container .hero-overlay p {
    font-size: 15px;
    margin-bottom: 16px;
  }
  .video-container .hero-overlay .register-now {
    padding: 10px 22px;
    font-size: 14px;
    marin-top: 35px !important;
  }
  .video-container .hero-overlay .hero-subtext {
    font-size: 12px;
    margin-top: 10px;
  }
}

/* ── Learning paths (IIFE 2) ── */
.learing-path-container {
  padding: 64px 0 0;
}
.learing-path-container h3 {
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.84px;
  color: black;
  padding-bottom: 28px;
  border-bottom: 1px solid black;
}
.mobile-br {
  display: none;
}

/* Scoped .flex-div override — prevents conflict with TikTok World page */
.learing-path-container .flex-div {
  display: flex;
  gap: 32px;
  margin-top: 70px;
  margin-bottom: 0 !important;
}
.learing-path-container .flex-div > * { 
  border-radius: unset !important;
  padding: 0 !important;
  background: none !important;
}
.learing-path-container .flex-div .flex-div-inner  {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
 

.flex-div-inner {
  width: 50%;
}
.flex-div-inner img {
  width: 100%;
  display: block;
}
.flex-div-inner h4 {
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -0.56px;
  color: #000;
  margin-bottom: 12px;
}
.flex-div-inner p {
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: #000;
  margin-bottom: 24px;
}
.learing-path-container .flex-div-inner h4 {
  color: #000;
}
.learing-path-container .flex-div-inner h4 .buying-expert {
  color: #f1204a;
  font-weight: 700;
}
.learing-path-container .flex-div-inner h4 .creative-expert {
  color: #2dccd3;
  font-weight: 700;
}
.learing-path-container .flex-div-inner p {
  color: #000;
}
.flex-div-inner a:not(.lp-tag) {
  padding: 12px 28px;
  color: white;
  background: #f1204a;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 32px;
}
.flex-div-inner a:not(.lp-tag):hover {
  text-decoration: none;
}

/* ── Webinars (IIFE 2) ── */
.webinars-container {
  background: #e7d1af;
  padding: 72px 0;
  overflow: hidden;
}
.webinar-heading-wrapper {
  padding-bottom: 0;
}
.webinar-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid #000;
  margin-bottom: 48px;
}
.webinar-heading h3 {
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.84px;
  color: black;
}
.webinar-arrows {
  display: flex;
  gap: 16px;
}
.webinar-arrows--bottom {
  display: none;
}
.arrow-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  cursor: pointer;
  font-size: 24px;
  transition: 0.3s;
  -webkit-appearance: none;
}
.arrow-btn:hover {
  background: #000;
  color: white;
}
.webinar-slider-wrapper {
  max-width: 1400px;
  margin-inline: auto;
}
.webinar-cards {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.webinar-cards::-webkit-scrollbar {
  display: none;
}
.webinar-card {
  flex: 0 0 calc(25% - 12px);
  min-width: calc(25% - 12px);
  max-width: calc(25% - 12px);
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.webinar-tag {
  display: inline-block;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  color: white;
  margin-bottom: 16px;
  align-self: flex-start;
  text-decoration: none !important;
}
a.webinar-tag:hover,
a.webinar-tag:focus,
a.webinar-tag:visited {
  text-decoration: none !important;
}
.webinar-date {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.webinar-card h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
  color: black;
}
.webinar-card a:not(.webinar-tag) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid #000;
  border-radius: 100px;
  color: black;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: auto;
  align-self: flex-start;
  text-decoration: none !important;
}
.webinar-card a:not(.webinar-tag):hover {
  text-decoration: none;
  color: white;
  background: #f1204a;
}
.webinar-card img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

/* ── Video series (IIFE 2) ── */
.video-series-container {
  text-align: center;
  color: white;
}
.video-series-container .section-wrapper {
  background: #033624;
  border-radius: 14px;
  padding: 64px 92px;
}
.video-series-container h2 {
  font-size: 42px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.84px !important;
  margin-bottom: 18px !important;
  font-family: "TikTok Sans", sans-serif !important;
}
.video-series-container > .section-wrapper > p {
  font-size: 18px !important;
  line-height: 1.4 !important;
  max-width: 550px;
  margin-inline: auto;
  margin-bottom: 64px;
  letter-spacing: 0 !important;
  font-family: "TikTok Sans", sans-serif !important;
  font-weight: 300;
}
.flex-three {
  display: flex;
  gap: 20px;
  text-align: left;
}
.flex-three-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1;
}
.flex-three-inner img {
  width: 100%;
  display: block;
}
.flex-three-inner h3 {
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.44px !important;
  font-family: "TikTok Sans", sans-serif !important;
  margin: 0 !important;
}
.flex-three-inner p {
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 24px !important;
  margin: 0;
  letter-spacing: 0 !important;
  font-family: "TikTok Sans", sans-serif !important;
  margin-bottom: 0 !important;
}
.flex-three-inner a {
  padding: 12px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  background: #fff;
  max-width: fit-content;
  color: black;
  text-decoration: none !important;
  margin-top: auto;
  letter-spacing: 0 !important;
  font-family: "TikTok Sans", sans-serif !important;
}
.flex-three-inner a:hover {
  text-decoration: none;
  background: #f1204a;
  color: white;
}

/* ── Catalog skeleton loader ── */
@keyframes wskel-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.webinar-skeleton-card {
  flex: 0 0 320px;
  min-width: 320px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.wskel-img {
  height: 180px;
  border-radius: 12px;
}
.wskel-tag {
  height: 20px;
  width: 70px;
  border-radius: 999px;
}
.wskel-date {
  height: 14px;
  width: 60px;
  border-radius: 4px;
}
.wskel-title {
  height: 16px;
  width: 90%;
  border-radius: 4px;
}
.wskel-title--short {
  width: 60%;
}
.wskel-btn {
  height: 36px;
  width: 120px;
  border-radius: 999px;
  margin-top: 4px;
}
.wskel-img,
.wskel-tag,
.wskel-date,
.wskel-title,
.wskel-btn {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 800px 100%;
  animation: wskel-shimmer 1.4s infinite linear;
}
.webinar-cards:has(.webinar-skeleton-card) {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 4px;
}
.webinar-cards:has(.webinar-skeleton-card)::-webkit-scrollbar {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 1460px) {
  .section-wrapper {
    padding-inline: 30px;
  }
  .webinar-slider-wrapper {
    padding-inline: 30px;
  }
  .video-series-container {
    padding-inline: 30px;
  }
}

@media (max-width: 1024px) {
  .learing-path-container h3,
  .webinar-heading h3,
  .video-series-container h2 {
    font-size: 36px;
  }
  .learing-path-container .flex-div {
    gap: 24px;
  }
  .flex-div-inner h4 {
    font-size: 22px;
  }
  .webinar-card {
    min-width: 300px;
    max-width: 300px;
  }
  .video-series-container .section-wrapper {
    padding: 40px;
  }
  .flex-three {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .mobile-block {
    display: block;
  }
  .mobile-br {
    display: inline;
  }

  .learing-path-container {
    padding: 40px 0;
  }
  .learing-path-container h3 {
    font-size: 30px;
  }
  .learing-path-container .flex-div {
    flex-direction: column;
    margin-top: 40px;
  }
  .flex-div-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .flex-div-inner img {
    order: -1;
    margin-bottom: 16px;
  }
  .learing-path-container .flex-div-inner h4 {
    margin-bottom: 16px;
  }
  .flex-div-inner a:not(.lp-tag) {
    align-self: flex-start;
  }

  .webinars-container {
    padding: 48px 0;
  }
  .webinar-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
  }
  .webinar-heading h3 {
    font-size: 30px;
    line-height: 1.1;
  }
  .webinar-arrows--top {
    display: none;
  }
  .webinar-arrows--bottom {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-inline: 16px;
  }
  .arrow-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .webinar-slider-wrapper {
    padding-inline: 16px;
  }
  .webinar-cards {
    gap: 16px;
    padding-inline-end: 16px;
  }
  .webinar-card {
    min-width: 280px;
    max-width: 280px;
  }

  .video-series-container {
    padding: 50px 16px;
    padding-top: 0;
  }
  .video-series-container .section-wrapper {
    padding: 32px 20px;
  }
  .video-series-container h2 {
    font-size: 30px;
  }
  .flex-three {
    flex-direction: column;
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .section-wrapper {
    padding-inline: 16px;
  }
  .webinar-heading h3,
  .video-series-container h2 {
    font-size: 26px;
  }
  .flex-div-inner h4,
  .webinar-card h4,
  .flex-three-inner h3 {
    font-size: 18px;
  }
  .flex-div-inner p,
  .flex-three-inner p {
    font-size: 16px;
    line-height: 1.6;
  }
  .webinar-slider-wrapper {
    padding-inline: 12px;
  }
  .webinar-cards {
    padding-inline-end: 12px;
  }
  .webinar-card {
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }
  .video-series-container .section-wrapper {
    padding: 24px 16px;
  }
  .flex-three-inner a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
/* End Catalog Page Redesign */

/* =====================================================
   Achievements Catalog Page Background
   (student/catalog/list?category_ids=46032-achievements)

   CSS can't read the URL, so this is scoped via :has() on
   the page's unique heading marker
   (h1[data-test-target="tiktok-academy-achievements"]).
   That attribute only exists on this one category page, so
   the rule can never match any other catalog/list page.
   ===================================================== */

h1[data-test-target="tiktok-academy-achievements"] {
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 32px */
  letter-spacing: -0.64px;
}

body:has(h1[data-test-target="tiktok-academy-achievements"])
  .categoryheader__backlink {
  display: none;
}
.new_achiv_main .catalogflag {
  display: none !important;
}
.new_achiv_main .sharelinks__icon {
  height: 16px;
  width: 16px;
}
.new_achiv_main .linkedin_add_btn {
  min-width: max-content;
}
.new_achiv_main .activitycard__image {
  position: relative;
  height: auto;
  top: 0 !important;
  width: 100%;
  transform: none;
}

.new_achiv_main .activitycard__imagecontainer::before {
  display: none;
}
.webinar_page_banner {
  background: #4a0505;
}
.webinar_page_heading h1 {
  color: #ffffff;
}

/* ── Webinars page (/student/all_sessions) list redesign ──
   Scoped under body.tta_webinars_list_page (added by JS only on that exact
   URL) so none of this leaks onto other pages sharing the same generic
   .session/.tabs/.pageheader classes. */
body.tta_webinars_list_page .pageheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 24px;
}
body.tta_webinars_list_page .pageheader__heading h1 {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin: 0;
}
body.tta_webinars_list_page .splitrow__column--search {
  width: auto;
  max-width: 360px;
  flex: 0 0 auto;
}
body.tta_webinars_list_page .search {
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.tta_webinars_list_page .search__input {
  border: none;
  outline: none;
  font-size: 15px;
  flex: 1;
  background: transparent;
}
body.tta_webinars_list_page .search__icon {
  width: 18px;
  height: 18px;
  color: #999;
  flex: 0 0 auto;
}

/* Secondary filter row (Filter by Topic / City / Location / Instructor /
   Date / Virtual Only) isn't part of this design — hidden entirely. */
body.tta_webinars_list_page .splitrow__column--inlinefilters {
  display: none;
}
body.tta_webinars_list_page .splitrow {
  margin: 0;
}

/* Tabs → pill style */
body.tta_webinars_list_page .tabs__tablist--page {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  border: none;
}
body.tta_webinars_list_page .tabs__tablistitem {
  margin: 0;
}
body.tta_webinars_list_page .tabs__tab {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #000;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
}
body.tta_webinars_list_page .tabs__tab--selected,
body.tta_webinars_list_page .tabs__tab.u-org--tabactive {
  background: #000;
  color: #fff;
}

/* Month group headings ("July 2026") — flat list in this design */
body.tta_webinars_list_page .session__containerheading {
  display: none;
}

/* Session list rows */
body.tta_webinars_list_page ul.session__container {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.tta_webinars_list_page li.session.session--index {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid #ececec;
}
body.tta_webinars_list_page .session__media--index {
  position: relative;
  flex: 0 0 280px;
  width: 280px;
  border-radius: 10px;
  overflow: hidden;
  height: 160px;
}
body.tta_webinars_list_page .session__media--index img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
body.tta_webinars_list_page .tta_session_region {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
body.tta_webinars_list_page .session__content--index {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.tta_webinars_list_page .tta_session_tag {
  order: 0;
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
body.tta_webinars_list_page .session__dates--index {
  order: 1;
  font-size: 13px;
  font-weight: 700;
  color: #000;
}
body.tta_webinars_list_page .tta_session_countdown {
  color: #f1204a;
  font-weight: 800;
}
body.tta_webinars_list_page .session__title {
  order: 2;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin: 0;
}
body.tta_webinars_list_page .session__title a {
  color: #000;
  text-decoration: none;
}
body.tta_webinars_list_page .session__meta--index {
  order: 3;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.tta_webinars_list_page .session__metaitem {
  font-size: 14px;
  color: #000;
}
body.tta_webinars_list_page .session__metalink {
  display: none;
}
body.tta_webinars_list_page .session__actions--index {
  flex: 0 0 auto;
}
body.tta_webinars_list_page .session__actionsbutton {
  display: inline-block;
  background: #f1204a;
  color: #fff;
  border-radius: 999px;
  padding: 14px 30px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: none;
}
body.tta_webinars_list_page .session__actionsbutton.tta_unenroll_btn {
  background: #cfc9c9;
  font-size: 14px;
  font-weight: normal;
  padding: 12px 16px;
  cursor: pointer;
}
body.tta_webinars_list_page .session__actionsbutton.tta_unenroll_btn:hover {
  background: #bdb7b7;
}

@media (max-width: 767px) {
  body.tta_webinars_list_page .pageheader {
    flex-direction: column;
    align-items: stretch;
  }
  body.tta_webinars_list_page .splitrow__column--search {
    max-width: 100%;
  }
  body.tta_webinars_list_page li.session.session--index {
    flex-wrap: wrap;
  }
  body.tta_webinars_list_page .session__media--index {
    flex: 1 1 100%;
    width: 100%;
  }
  body.tta_webinars_list_page .session__actions--index {
    flex: 1 1 100%;
  }
  body.tta_webinars_list_page .session__actionsbutton {
    display: block;
    text-align: center;
  }
}

/* ── Webinar Details page hero (/student/page/...) ──
   Scoped under .wd_details_main (added by JS only on pages that actually
   have the webinar hero + schedule markup) so this can't leak onto any
   other page. */
.wd_details_main .wd_hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  background: #edd4b2;
  padding: 60px;
  margin-bottom: 8px;
}

.wd_details_main .wd_hero__left .pgheading__name {
  margin: 0 0 16px;
  color: #000;
  font-size: 40px;
  font-weight: 700;
  line-height: 108%;
  letter-spacing: -0.8px;
}

.wd_details_main .wd_hero__date {
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

/* Not-enrolled hero never has a .wd_hero__speaker row (no Instructor info
   exists in that page's DOM) — enrolled hero always does. That structural
   difference is used here instead of a JS flag: the date only needs this
   extra spacing when there's no speaker row right after it. */
.wd_details_main .wd_hero__left:not(:has(.wd_hero__speaker)) .wd_hero__date {
  margin-bottom: 16px;
}

.wd_details_main .wd_hero__countdown {
  color: #f1204a;
  font-weight: 800;
}

.wd_details_main .wd_hero__speaker {
  font-size: 12px;
  font-weight: 500;
  color: #000;
  margin-bottom: 16px;
}

.wd_details_main .wd_hero__left .session__actionsbutton,
.wd_details_main .wd_event_card__enroll,
.wd_details_main .wd_add_to_calendar__btn {
  max-width: fit-content;
  background: #f1204a;
  border-radius: 999px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--White, #fff);
  text-align: center;
  font-size: var(--B3, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  border: none;
  cursor: pointer;
}

.wd_details_main .wd_add_to_calendar {
  position: relative;
  display: inline-block;
}

.wd_add_to_calendar__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.wd_add_to_calendar__menu[hidden] {
  display: none;
}

.wd_add_to_calendar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
}

.wd_add_to_calendar__item:hover {
  background: #f5f5f5;
}

.wd_add_to_calendar__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

.wd_add_to_calendar__item--google .wd_add_to_calendar__icon {
  background-color: #4285f4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM5 8V6h14v2H5z'/%3E%3C/svg%3E");
}

.wd_add_to_calendar__item--outlook .wd_add_to_calendar__icon {
  background-color: #0078d4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM5 8V6h14v2H5z'/%3E%3C/svg%3E");
}

.wd_add_to_calendar__item--apple .wd_add_to_calendar__icon {
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM5 8V6h14v2H5z'/%3E%3C/svg%3E");
}

.wd_details_main .wd_hero__right {
  position: relative;
  flex: 0 0 auto;
  width: 540px;
  max-width: 100%;
}

.wd_details_main .wd_hero__right .hero.hero--course {
  position: relative !important;
  width: 540px;
  max-width: 100%;
  height: 300px !important;
  border-radius: 16px;
  overflow: hidden;
  padding-top: 0 !important;
}

.wd_details_main .wd_hero__right .hero__image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 16px;
}

.wd_details_main .wd_hero__region {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.wd_details_main .page {
  padding: 0 !important;
}

@media (max-width: 900px) {
  .wd_details_main .wd_hero {
    flex-direction: column;
    align-items: stretch;
    padding: 32px 20px;
    gap: 24px;
  }
  .wd_details_main .wd_hero__left,
  .wd_details_main .wd_hero__right {
    max-width: 100%;
  }
  .wd_details_main .wd_hero__left .pgheading__name {
    font-size: 30px;
  }
}
/* Webinar Details page — below-hero content
   (Overview / Learning Objectives / Event Details / Speakers).
   Overview + Learning Objectives are admin-authored pgpost blocks — the
   admin editor's inline style="color:#Fe2c55" isn't guaranteed to be there
   (it gets stripped/edited per page), so this targets every section's
   heading structurally instead: the direct <h2> child of .pgpost. That
   matches Overview/Learning Objectives/Speakers, and also (redundantly but
   harmlessly) the JS-built Event Details heading below, which already has
   its own identical rule. */
.wd_details_main .page__courses .pgpost > h2 {
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 32px !important; 
  line-height: 100%;
  letter-spacing: -0.64px;
  padding-bottom: 16px;
  margin: 0 0 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.wd_details_main .page__courses .pgpost p,
.wd_details_main .page__courses .pgpost li {
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 16px;
  line-height: 150%;
  color: #000;
}

.wd_details_main .page__courses .pgpost ol {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The Overview text used to sit in a light-grey rounded box (inline
   styled by the admin editor) — the new design shows it as plain text. */
.wd_details_main .page__courses .pgpost div[style*="f5f5f5" i] {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Event Details heading — this article is generated by JS (not an
   admin-authored pgpost block), so it gets its own real class here instead
   of the inline style="color:#Fe2c55" trick used for admin content. */
.wd_details_main .wd_event_wrap__heading {
  color: #000;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.64px;
  padding-bottom: 16px;
  margin: 0 0 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* Event Details (built by JS from real page data — title, schedule date,
   topic tag, enroll button clone) */
.wd_details_main .wd_event_card {
  background: #f5f5f5;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wd_details_main .wd_event_card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wd_details_main .wd_event_card__actionrow {
  display: flex;
}

.wd_details_main .wd_event_card__actionrow:empty {
  display: none;
}

.wd_details_main .wd_event_card__tag {
  display: inline-block;
  padding: 6px 12px;
  color: var(--TikTok-Black, #000);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.2px;
  border-radius: 100px;
}

.wd_details_main .wd_event_card__date {
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #000;
}

.wd_details_main .wd_event_card__countdown {
  color: #fe2c55;
  font-weight: 800;
}

.wd_details_main .wd_event_card__title {
  margin: 0;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

.wd_details_main .wd_event_card__desc {
  margin: 0;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}
.wd_details_main ul.pgheading__meta.activitymeta.activitymeta--heading,
.wd_details_main .coursepage__sessions {
  display: none;
}

/* Not-enrolled variant of this page (see the hero-redesign script's
   sessionListItem fallback in index.html) renders admin content as a flat
   .course__description block with <h3> section headings instead of the
   .page__courses .pgpost / <h2> structure the enrolled variant uses — same
   visual treatment as the .pgpost rules above, just re-targeted at that
   different markup so both variants end up looking identical. */
.wd_details_main .course__description h3 {
 
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
   
   
  line-height: 100%;
  letter-spacing: -0.64px;
  padding-bottom: 16px;
  margin: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.wd_details_main .course__description h3:first-child {
  margin-top: 0;
}
.wd_details_main .course__description p,
.wd_details_main .course__description li {
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 16px;
  line-height: 150%;
  color: #000;
}
.wd_details_main .course__description ul,
.wd_details_main .course__description ol {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 

/* Not-enrolled variant only: the "Choose an Upcoming Session" filter
   widget + session list sits below the description — its Enroll link has
   already been moved up into the hero by the JS, so showing the now-empty
   leftover widget here would break the "identical to enrolled" design.
   Enrolled variant never renders this element at all, so this is scoped
   safely under .wd_details_main without needing extra conditions. */
.wd_details_main .course__content > section.activitysection {
  display: none;
}

.wd_details_main ul.pgheading__actions {
  padding: 0;
  margin: 0;
  border: 0;
}

@media (max-width: 600px) {
  .wd_details_main .wd_event_card__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Speakers — static template only (no JS wiring). Rida/content team pastes
   this markup directly into each page's own "Speakers" pgpost block and
   fills in the real photo/name/role per webinar:

  <div class="wd_speakers_card">
    <div class="wd_speaker">
      <div class="wd_speaker__photo">
        <img src="PHOTO_URL" alt="">
      </div>
      <div class="wd_speaker__name">Full Name</div>
      <div class="wd_speaker__role">Job Title,<br>Team Name</div>
    </div>
    <!-- repeat .wd_speaker per speaker -->
  </div>
*/
.wd_details_main .wd_speakers_card {
  background: #edbbe8;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
}

.wd_details_main .wd_speaker {
  width: 160px;
}

.wd_details_main .wd_speaker__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: rgba(
    0,
    0,
    0,
    0.12
  ); /* placeholder fill until a real <img> is added */
  min-height: 183px;
}

.wd_details_main .wd_speaker__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Folded-corner ribbon in the top-right of each photo */

.wd_details_main .wd_speaker__name {
  color: var(--TikTok-Black, #000);
  font-size: 20.098px;
  font-style: normal;
  font-weight: 700;
  line-height: 115%;
  padding-top: 11px;
  padding-bottom: 4px;
}

.wd_details_main .wd_speaker__role {
  color: var(--TikTok-Black, #000);
  font-size: 12.368px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

@media (max-width: 600px) {
  .wd_details_main .wd_speakers_card {
    padding: 20px;
    gap: 16px;
  }
  .wd_details_main .wd_speaker {
    width: calc(50% - 8px);
  }
}
.wd_speakers_card {
  display: none !important;
}
/* End Webinar Details page hero */

/* Cannes page */
.cannes_banner {
  display: flex;
  min-height: 452px;
  justify-content: space-between;
  padding-inline: 70px;
  align-items: center;
  flex-wrap: wrap;
  background-color: #000000;
  background-image: url("https://i.ibb.co/JwGf63h5/HERO-2.png");
  background-size: cover;
}

.cannes_banner img {
  max-width: 480px;
  width: 100%;
}

.cannes_banner h1 {
  color: var(--TikTok-White, #fff);
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 113%; /* 72.32px */
  letter-spacing: -1.28px;
  margin-bottom: 14px;
}
/*
.cannes_banner div {
  max-width: 553px;
}
 */
.cannes_banner p {
  color: var(--TikTok-White, #fff);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  padding-bottom: 24px;
  max-width: 460px;
  margin: 0;
}

.cannes_banner a {
  color: var(--White, #fff);
  text-align: center;
  font-size: var(--B3, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
  padding: 12px 16px;
  border-radius: 48px;
  background: var(--Blaze, #f1204a);
  display: inline-block;
}

.cannes_main article.pgcomponent[data-display-style="normal"] h2 {
  color: var(--TikTok-Black, #000);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 32px */
  letter-spacing: -0.64px;
}
.cannes_main article.pgcomponent[data-display-style="normal"] h2 span {
  color: var(--Blaze, #f1204a);
}

.cannes_main article.pgcomponent[data-display-style="normal"] p {
  color: rgba(0, 0, 0, 0.7);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  border-bottom: 0.694px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 16px;
}
.cannes_main .articles-grid article {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: var(--TikTok-White, #fff);
  padding: 16px;
}

.cannes_main .articles-grid article h3 {
  color: var(--TikTok-Black, #000);
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 8px;
  text-decoration: none !important;
}

.cannes_main .articles-grid article .pgresource {
  gap: 20px;
}

.cannes_main .articles-grid article p {
  color: var(--black-70, rgba(0, 0, 0, 0.7));
  font-size: var(--B3, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.6px */
}

/* Reserves 2 lines' worth of height even when a description is short
   enough to only wrap to 1 line, so the speaker name/role block lines up
   at the same vertical position across every card in the row. */
.cannes_main .articles-grid article .tta_desc_clamped {
  min-height: 42px; /* 14px * 150% line-height * 2 lines */
}

.cannes_main header.page__header {
  display: none;
}

/* Speaker name/role block — split out of the description text by
   fixTruncatedDescriptions() in index.html (Admin pastes "[Name] [Role]"
   into the description field on this page only). */
.cannes_main .articles-grid article .tta_desc_speaker {
  margin-top: 16px;
}
.cannes_main .articles-grid article .tta_desc_speaker__name {
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  margin: 0;
}
.cannes_main .articles-grid article .tta_desc_speaker__role {
  color: var(--black-70, rgba(0, 0, 0, 0.6));
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  margin: 4px 0 0;
}

.cannes_main article.pgcomponent[data-item-id="5643984"] + .articles-grid {
  grid-template-columns: 1fr;
}
.cannes_main
  article.pgcomponent[data-item-id="5643984"]
  + .articles-grid
  article.pgcomponent {
  padding: 0;
  border: 0;
}
.cannes_main
  article.pgcomponent[data-item-id="5643984"]
  + .articles-grid
  article.pgcomponent
  .pgresource__content {
  display: none;
}
.cannes_main
  article.pgcomponent[data-item-id="5643984"]
  + .articles-grid
  article.pgcomponent
  .pgresource__imagecontainer {
  min-height: 524px;
  border-radius: 20px;
}
.cannes_main article.pgcomponent[data-item-id="5643986"] {
  padding: 44px 54px 40px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background: var(--Dawn, #edbbe8);
  margin-bottom: 0;
}
.cannes_main article.pgcomponent[data-item-id="5643986"] + .articles-grid {
  padding: 0px 54px 64px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background: var(--Dawn, #edbbe8);
  margin-bottom: 0;
}
.cannes_main article.pgcomponent[data-item-id="5643979"] + .articles-grid {
  grid-template-columns: repeat(2, 1fr);
}
.cannes_main article.pgcomponent[data-item-id="5643979"] + .articles-grid {
  grid-template-columns: repeat(2, 1fr);
}
.cannes_main
  article.pgcomponent[data-item-id="5643979"]
  + .articles-grid
  .pgresource__imagecontainer {
  min-height: 300px;
  border-radius: 8px;
}
.cannes_main
  article.pgcomponent[data-item-id="5643979"]
  + .articles-grid
  .pgresource__imagecontainer {
  min-height: 300px;
  border-radius: 8px;
}

.cannes_main
  article.pgcomponent[data-item-id="5643984"]
  + .articles-grid
  article.pgcomponent
  .pgresource__imagecontainer,
.cannes_main
  article.pgcomponent[data-item-id="5646561"]
  + .articles-grid
  article.pgcomponent
  .pgresource__imagecontainer {
  padding: 0;
  min-height: unset;
  height: auto;
}

.cannes_main
  article.pgcomponent[data-item-id="5643984"]
  + .articles-grid
  article.pgcomponent
  .pgresource__imagecontainer
  img,
.cannes_main
  article.pgcomponent[data-item-id="5646561"]
  + .articles-grid
  article.pgcomponent
  .pgresource__imagecontainer
  img {
  position: unset;
  transform: unset;
  display: block;
  width: 100%;
  height: auto;
}

.cannes_main
  article.pgcomponent[data-item-id="5643984"]
  + .articles-grid
  article.pgcomponent
  .pgresource__imagecontainer
  img,
.cannes_main
  article.pgcomponent[data-item-id="5646583"]
  + .articles-grid
  article.pgcomponent
  .pgresource__imagecontainer
  img {
  position: unset;
  transform: unset;
  display: block;
  width: 100%;
  height: auto;
}

.cannes_main
  article.pgcomponent[data-item-id="5643979"]
  + .articles-grid
  .pgresource__imagecontainer:before {
  content: "";
  background: url("https://i.ibb.co/qMC9rYz9/Video-Button.png");
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 1;
  background-size: contain;
  top: 46%;
}

.cannes_main
  article.pgcomponent[data-item-id="5643979"]
  + .articles-grid
  .pgresource__imagecontainer:before {
  content: "";
  background: url("https://i.ibb.co/qMC9rYz9/Video-Button.png");
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 1;
  background-size: contain;
  top: 46%;
}

@media (max-width: 500px) {
  .cannes_banner {
    flex-wrap: wrap;
    padding-inline: 20px;
    padding-top: 50px;
    gap: 30px;
  }

  .cannes_main article.pgcomponent[data-item-id="5643979"] + .articles-grid {
    grid-template-columns: 1fr;
  }

  .cannes_main article.pgcomponent[data-item-id="5643986"],
  .cannes_main article.pgcomponent[data-item-id="5643986"] + .articles-grid {
    padding: 20px;
  }
}
.new_single_course_main header.course__headercontainer {
    display:none;
}
.new_single_course_main .activityheading__progress-bar {
    display: none;
}
@media (max-width: 700px) {
    .crimson_color header.page__header {
       padding:20px 20px;
    }
}