/* 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 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 * {
  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;
}
.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 */
/* 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: 28px;
  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: 14px;
  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: #000;
  font-size: 1.3rem;
  margin: 0 0 16px;
  line-height: 1.2;
  font-weight: 500;
}

.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: 34px;
  padding-bottom: 64px;
  margin: auto;
}
.video-container > * {
  width: 100%;
  display: block;
}
/* ── Custom hero slider (replaces Intellum's native Featured Link
   image/carousel/video widget entirely) ──
   Intellum's own widget silently drops any uploaded video whenever the
   "Display Images in a Carousel" Admin setting is on, even when a video
   is attached to the same entry — a confirmed native platform bug. This
   slider is fully custom-built in JS (see "CUSTOM HERO SLIDER" in the
   Catalog Page Redesign script, near HERO_SLIDES) so image and video
   slides can be mixed freely, per locale, without hitting that bug. */
.tta-hero-slider {
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
}
.tta-hero-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Every slide is stacked in the exact same spot and crossfades via
   opacity — NOT physically slid with a shared track transform. A <video>
   playing behind an ancestor with an animated CSS transform genuinely
   plays (confirmed via console: real decoded frames, currentTime
   advancing) but never visually composites in some Chrome/GPU
   combinations — a known bug. Forcing the video onto its own GPU layer
   (translateZ(0)) didn't fix it either, so removing the moving transform
   from the equation entirely is the reliable fix. */
.tta-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.tta-hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.tta-hero-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.tta-hero-slide picture,
.tta-hero-slide img,
.tta-hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tta-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.tta-hero-arrow svg {
  width: 20px;
  height: 20px;
}
.tta-hero-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}
.tta-hero-arrow--prev {
  left: 20px;
}
.tta-hero-arrow--next {
  right: 20px;
}
.tta-hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.tta-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}
.tta-hero-dot.active {
  background: #fff;
}
@media (max-width: 480px) {
  .video-container {
    padding-inline: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .tta-hero-slider {
    height: 480px;
    border-radius: 12px;
  }
  .tta-hero-dots {
    bottom: 12px;
  }
  .tta-hero-arrow {
    width: 36px;
    height: 36px;
  }
}

/* ── 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 > * {
  width: unset !important;
  border-radius: unset !important;
  padding: 0 !important;
  background: none !important;
}

.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;
}
/* #catalog_home_page .main__content gets a 48px side padding on desktop
   (see "Align content with nav bar" rule above) so every section's content
   lines up with the nav. Every other section is fine with that since they
   don't need edge-to-edge background — but this one does, so it cancels
   the padding with a matching negative margin/width, then re-applies the
   same 48px as its own padding so .section-wrapper/.webinar-slider-wrapper
   inside still line up exactly like every other section. */
@media (min-width: 1024px) {
  .webinars-container {
    margin-inline: -48px;
    width: calc(100% + 96px);
    padding-inline: 48px;
  }
}
.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;
}

@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;
}

.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 {
  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%;
}

.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 {
  color: #000 !important;
  font-family: "TikTok Sans Display", "TikTok Sans", sans-serif;
  font-size: 32px !important;
  font-weight: 700 !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__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;
}

.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;
}

}

 section.webinars-container {
    width: 100%;
    margin: 0;
}

div#catalog_home_page {
    max-width: 100% !important;
}
.catalogcards {
    
    margin-top: 60px !important; 
}