/* =============================================================================
   DEPRECATED — The raw CSS below has been refactored into the modules above.
   It is kept here only as a fallback during the migration period.
   Once all modules are verified, remove everything below this comment.
   ============================================================================= */

/* Legacy Google Fonts (now in _base.css) */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Inika:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Bakbak+One&display=swap");

html {
  font-size: 16px !important;

  /* for small screen font size 14px */

  @media (max-width: 768px) {
    & {
      font-size: 14px !important;
    }
  }
}

body {
  font-family: "Source Sans 3" !important;
}

a {
  font-family: "Source Sans 3" !important;
}

/* reset style */

#main-notification-wrapper {
  display: none;
}

.display-01 {
  color: var(--tertiary-500, #37506e);

  /* Display 01/Bold/140 */
  font-family: "Source Sans 3";
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 4.2rem */
}

.heading-01 {
  color: var(--tertiary-500, #37506e);
  /* Heading 01/Semibold */
  font-family: "Source Sans 3";
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.heading-02 {
  color: var(--tertiary-500, #37506e);

  /* Heading 02/Semibold */
  font-family: "Source Sans 3";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.heading-03 {
  color: var(--tertiary-500, #37506e);
  /* Heading 03/Bold/130 */
  font-family: "Source Sans 3";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 1.4625rem */
}

.paragraph-01 {
  color: var(--tertiary-400, #5f738b);

  /* Paragraph 01/Regular */
  font-family: "Source Sans 3";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.paragraph-01-medium {
  color: var(--tertiary-400, #5f738b);

  /* Paragraph 01/Medium/150 */
  font-family: "Source Sans 3";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 1.6875rem */
}

.button-01 {
  color: var(--tertiary-500, #37506e);

  /* Button 01/Medium */
  font-family: "Source Sans 3";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.button-02 {
  color: var(--tertiary-500, #37506e);

  /* Button 02/Medium */
  font-family: "Source Sans 3";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.subtitle-01 {
  color: var(--tertiary-500, #37506e);

  /* Subtitle 01/Medium/150 */
  font-family: "Source Sans 3";
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 1.3125rem */
}

.subtitle-02 {
  color: var(--tertiary-500, #37506e);

  /* Subtitle 02/Semibold */
  font-family: "Source Sans 3";
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.color-01 {
  color: var(--Primary-500, #ff3366);
}

/* 
Typography end


*/

/* 
Form elements styles


*/

/* utility class */

.mb-4 {
  margin-bottom: 1rem;
}

/* 

For fix issue
*/

footer {
  position: inherit !important;
}

.team-training-design-accordion {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: start;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 54%, #fff1f5 100%);
  border: 1px solid #ebeef1;
  box-shadow: 0 1rem 3rem rgba(8, 15, 52, 0.08);
  padding: 3rem;
}

.team-training-design-accordion__intro {
  position: sticky;
  top: 6rem;
}

.team-training-design-accordion__label,
.team-training-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: #fff1f5;
  color: #ff3366;
  font-family: "Source Sans 3";
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.375rem 0.875rem;
}

.team-training-design-accordion__intro h2,
.team-training-faq__header h2 {
  margin: 0;
  color: #37506e;
  font-family: "Source Sans 3";
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
}

.team-training-design-accordion__intro p {
  max-width: 31rem;
  margin: 1rem 0 0;
  color: #5f738b;
  font-family: "Source Sans 3";
  font-size: 1.125rem;
  line-height: 1.6;
}

.team-training-design-accordion__panel,
.team-training-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.team-training-design-accordion__item,
.team-training-faq__item {
  overflow: hidden;
  border: 1px solid #ebeef1;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(8, 15, 52, 0.06);
}

.team-training-design-accordion__trigger,
.team-training-faq__question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  background: #ffffff;
  color: #37506e;
  cursor: pointer;
  font-family: "Source Sans 3";
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 1.25rem 1.5rem;
  text-align: left;
}

.team-training-design-accordion__trigger[aria-expanded="true"],
.team-training-faq__question[aria-expanded="true"] {
  background: #f6f6fa;
  color: #ff3366;
}

.team-training-design-accordion__trigger:hover,
.team-training-design-accordion__trigger:focus-visible,
.team-training-faq__question:hover,
.team-training-faq__question:focus-visible {
  background: #fff1f5;
  color: #ff3366;
  outline: none;
}

.team-training-design-accordion__icon,
.team-training-faq__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
}

.team-training-design-accordion__icon svg,
.team-training-faq__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.team-training-design-accordion__icon svg path,
.team-training-faq #course-questions .team-training-faq__icon svg path,
.team-training-faq__list#course-questions .team-training-faq__icon svg path {
  stroke: currentColor !important;
}

.team-training-design-accordion__content-inner,
.team-training-faq__answer-inner {
  border-top: 1px solid #ebeef1;
  color: #5f738b;
  font-family: "Source Sans 3";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  padding: 1.5rem;
}

.team-training-design-accordion__content-inner p:last-child,
.team-training-design-accordion__content-inner ul:last-child,
.team-training-design-accordion__content-inner ol:last-child,
.team-training-faq__answer-inner p:last-child,
.team-training-faq__answer-inner ul:last-child,
.team-training-faq__answer-inner ol:last-child {
  margin-bottom: 0;
}

.team-training-faq {
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
}

.team-training-faq__header {
  margin-bottom: 2rem;
  text-align: center;
}

.team-training-faq #course-questions,
.team-training-faq__list#course-questions {
  box-shadow: none;
}

@media (max-width: 1023px) {
  .team-training-design-accordion {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }

  .team-training-design-accordion__intro {
    position: static;
  }
}

@media (max-width: 767px) {
  .team-training-design-accordion {
    border-radius: 1rem;
    padding: 1.25rem;
  }

  .team-training-design-accordion__intro h2,
  .team-training-faq__header h2 {
    font-size: 1.5rem;
  }

  .team-training-design-accordion__intro p {
    font-size: 1rem;
  }

  .team-training-design-accordion__trigger,
  .team-training-faq__question {
    font-size: 1rem;
    padding: 1rem;
  }

  .team-training-design-accordion__content-inner,
  .team-training-faq__answer-inner {
    padding: 1rem;
  }
}

/*
Custom Course style
*/

/* .cs-course-grid {
  & .cs-course-wrap {
    flex-direction: row !important;
    & .cs-course-item {
      min-width: 18rem;
      flex-direction: column;
      height: 30rem !important;
      & .cs-course-card-image {
        width: 100% !important;

        img {
          width: 100%;
          height: 12.5rem !important;
        }
      }
      & .cs-course-card-info {
        flex-direction: column;
        padding: 0 1rem;
        width: 100% !important;

        & > div{
            padding: 0 !important;
        }
      }
    }

 
  }
} */

button#cs-course-list-btn.active,
button#cs-course-grid-btn.active,
button#cs-post-grid-btn.active,
button#cs-post-list-btn.active {
  border: 1px solid #3f4d97;

  & path {
    fill: #3f4d97;
  }
}

/* .tw-cs-course-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 4fr));
  gap: 1.5rem;
} */

/* background gradient */
.cs-cat-list-bg {
  /* background: linear-gradient(
      90deg,
      rgba(16, 33, 125, 0.7) 0%,
      rgba(22, 194, 213, 0.7) 181.79%
    ),
    var(--Secondary-600, #14b1c2); */
  background-color: #47678e;
}

/* hero background */

.cs-hero-bg {
  background: linear-gradient(90deg,
      rgba(22, 194, 213, 0.7) -18.8%,
      rgba(16, 33, 125, 0.7) 51.74%);
}

/* 
Single course banner
*/

.cs-single-course-banner {
  background: linear-gradient(90deg,
      rgba(16, 33, 125, 0.7) 38.22%,
      rgba(22, 194, 213, 0.7) 100%);
}

/* 
Single course sidebar start
*/

.cs-sidebar-nav-active {
  display: flex;
  width: 11.5rem;
  height: 2.2rem;
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-2, 0.25rem);
  border-radius: var(--Spacing-5, 24px);
  border: var(--Spacing-0, 1px) solid var(--Primary-400, #3f4d97);
  background: var(--Primary-Smooth, #f6f6fa);
}

.cs-single-group-btn {
  & .the_course_button {
    & .course_button.button {
      margin: 0;
      padding: 0 !important;
    }

    & a {
      display: flex;
      height: 3.125rem;
      justify-content: center;
      align-items: center;
      gap: var(--Spacing-3, 0.5rem);
      border-radius: 32px;
      background: #f9a31a;
      color: #fff !important;
      font-size: 1rem;
      margin: 0;
      padding: 1.7rem 0 !important;
      cursor: pointer;
      transition: all 0.3s ease-in-out;

      &:hover {
        background: #fab548;
        color: var(--White, #fff) !important;

        /* change stroke color of path */

        & path {
          stroke: var(--White, #fff);
        }
      }
    }
  }

  & .button.paid_course {
    background: none;
    padding: 0;
  }

  & .extra_details {
    color: #000;
  }
}

#cs-single-course-sidebar,
.cs-bundle-courses-sidebar {

  & input[type="number"]::-webkit-outer-spin-button,
  & input[type="number"]::-webkit-inner-spin-button,
  & input[type="number"] {
    -webkit-appearance: none;
    margin: 0;
  }
}

.cs-single-course-info {
  & .course_details {
    & ul {
      & li {
        &:not(.gift_this_course) {
          display: none;
        }
      }
    }
  }

  & .course_sharing {
    display: none;
  }

  & .gift_course_button {
    display: flex;
    width: 100%;
    height: 3.125rem;
    justify-content: center;
    border: 0.0729px solid #0f217d;
    color: #0f217d !important;
    align-items: center;
    gap: var(--Spacing-3, 0.5rem);
    border-radius: 2rem;
    background: var(--Primary-Smooth, #f6f6fa);
    /* justify-self: end; */
    /* margin: 1rem auto; */
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;

    &:hover {
      background: var(--Primary-500, #3f4d97);
      color: var(--White, #fff) !important;
    }
  }
}

.cs-bundle-course-info {
  & .course_details {
    & ul {
      & li {
        &:not(.gift_this_course) {
          display: none;
        }
      }
    }
  }

  & .gift_course_button {
    display: flex;
    width: 100%;
    height: 3.125rem;
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-3, 0.5rem);
    border-radius: var(--Spacing-6, 32px);
    background: var(--Primary-Smooth, #fff);
    /* justify-self: end; */
    /* margin: 1rem auto; */
    margin-top: 0.5rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    color: var(--Primary-500, #3f4d97) !important;
    font-weight: 600;

    &:hover {
      background: var(--Primary-500, #3f4d97);
      color: var(--White, #fff) !important;
    }
  }
}

/* responsive for single course sidebar */

/* For large devices */

@media (min-width: 1538px) {
  #cs-single-course-sidebar {
    right: 10% !important;
  }
}

/* For medium devices */

@media (min-width: 1024px) and (max-width: 1439px) {
  #cs-single-course-sidebar {
    right: 1% !important;
  }
}

/*
Single course sidebar end
*/

.cs-common-accordion-content p {
  color: var(--Neutral-300, #73828a);

  /* Subtitle 01/Medium/150 */
  font-family: Lato;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 1.3125rem */
}

/* footer footermenu-items css */
.footermenu-items li a {
  font-size: 1.125rem;
  font-style: normal;
  color: #73828a;
  font-weight: 500;
  line-height: 150%;
}

/* footer footermenu-items heading css */
.footer-heading-cs {
  margin-bottom: 1.5rem;
}

/* footer social-icons css */
#footer-social-icons ul li i:hover {
  color: #64667c;
}

#footer-social-icons ul li i {
  color: #64667c;
  border: 1px solid;
  border-radius: 12px;
  padding: 4px;
  transition-duration: 500ms;
  transition-property: color;
}

/* footer navigation widgets css */
#cs-footer-sidebar #nav_menu-3 {
  max-width: 100%;
}

#cs-footer-sidebar #nav_menu-2 {
  max-width: 100%;
}

#cs-footer-sidebar h4.footertitle {
  font-size: 1.125rem;
  color: #37506e;
  letter-spacing: 1px;
  line-height: normal;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

#cs-footer-sidebar ul li a {
  color: #37506e !important;
  font-size: 1rem;
}

.footerwidget li {
  line-height: 1.2rem !important;
}

.footerwidget ul {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* header css */
/* Hide the submenu initially */
.cs-menu-subcategory {
  display: none;
}

/* Show the submenu when hovering over .cs-popular_categories */
.cs-popular_categories:hover+.cs-menu-subcategory {
  display: block;
}

/* mini-cart css Start*/
.items span,
bdi {
  color: #2e4450;
}

.items-price p {
  margin-bottom: 0rem !important;
}

/* Course Categories css Start*/
.categories-grid {
  width: 100%;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 768px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 425px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
}

.cat-title {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Hiding single course page taxonomy*/
.single-texonomy {
  display: none !important;
}

/* Mini Cart Style*/
.cart-wrapper {
  border-radius: 16px;
  background-color: #f6f6fa;
}

.mini-cart-container {
  flex-direction: column;
  width: 34.125rem !important;
  margin-right: 14rem;
  padding: 1rem;
}

@media only screen and (max-width: 768px) {
  .mini-cart-container {
    display: none;
  }
}

ul.woocommerce-mini-cart {
  margin: 0px !important;
}

li.woocommerce-mini-cart-item.mini_cart_item {
  padding-bottom: 1rem;
}

.cart-items img {
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  width: 200px !important;
  height: 140px !important;
}

.overlay-content {
  border-bottom-left-radius: 16px;
  border-top-left-radius: 16px;
  background-color: #000;
  opacity: 0;
  width: 200px;
  height: 140px;
}

.overlay-content:hover {
  opacity: 0.7;
  transition: all 0.5s ease;
}

& .overlay-content a {
  transform: translateX(-30%);
  color: #fff;
  font-size: 42px;
}

.overlay-content a:hover {
  color: #fcfcfc !important;
}

#cs-minicart-pricing p strong {
  font-size: 1.5rem;
  color: #2e4450;
  font-style: normal;
  font-weight: 500 !important;
  line-height: normal;
}

#cs-minicart-pricing p span {
  font-size: 1.5rem;
  color: #2e4450;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
}

#minicart-btn .checkout {
  display: none;
}

#minicart-btn a {
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  background-color: #83a7d3;
  padding: 17px 44px;
  border-radius: 8px;
  color: #fff;
}

#minicart-btn a:hover {
  background-color: #6491c8;
}

/*Mobile nav Menu Css*/
.cs-mb-nav-links {
  display: none;
  top: 0px;
}

/*Mobile nav Scrollbar Css*/
#cs-submenu-scrollbar ul {
  max-height: 20rem;
  overflow: auto;
}

#cs-submenu-scrollbar ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 3px;
}

#cs-submenu-scrollbar ::-webkit-scrollbar-thumb {
  border-radius: 18px;
  background-color: rgba(0, 0, 0, 0.205);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.199);
}

/* to show profile user name */

.cs-mb-profile-wrap .loggedin_user img+span.vibebp_name {
  display: block;
}

/* animation for bundle sidebar fade in */

#cs-bundle-sidebar.tw-fixed {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Live Students Studying Now - Pulse Animation */
.est-live-student-learning {
  display: flex;
  align-items: center;
}

.est-live-student-learning .live-icon {
  position: relative;
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
}

.est-live-student-learning .live-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 2px solid #22c55e;
  border-radius: 50%;
  animation: liveBip 1.5s ease-out infinite;
}

@keyframes liveBip {
  0% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }

  100% {
    width: 20px;
    height: 20px;
    opacity: 0;
  }
}

.est-live-student-learning .live-count {
  transition: opacity 0.3s ease-in-out;
}

/* End Live Students Studying Now */

.strikethrough {
  position: relative;
}

.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid red;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

/* slick slider css */
.cs-slider-course-lists {
  & button.slick-arrow {
    display: flex;
    width: var(--Spacing-9, 3.5rem);
    height: var(--Spacing-9, 3.5rem);
    padding: var(--Spacing-0, 0.65625rem);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 1.75rem;
    background: linear-gradient(180deg, #fff 0%, #c7d4ff 79.5%);
  }

  & button.slick-prev {
    rotate: 180deg;
    position: absolute;
    z-index: 49;
    top: 50%;
    transform: translate(50%, 50%);
  }

  & button.slick-next {
    position: absolute;
    z-index: 49;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
}

.cs-testimonials-slider {
  & .slick-dots {
    display: flex;
    justify-content: center;

    margin: 1rem 0;
    padding: 1rem 0;

    list-style-type: none;

    li {
      margin: 0 0.25rem;
    }

    & button {
      display: block;
      width: 1rem;
      height: 1rem;
      padding: 0;

      border: none;
      border-radius: 100%;
      background-color: #e7e9f2;

      text-indent: -9999px;
    }

    li.slick-active button {
      background-color: #0f217d;
    }
  }
}

/* Front Page Css */
.cs-topBar-bg {
  background: linear-gradient(90deg, #f2f2f2 0%, #fff 50%, #f2f2f2 100%);
  border-top: var(--Spacing-1, 2px) solid var(--Primary-50, #e7e9f2);
  border-bottom: var(--Spacing-1, 2px) solid var(--Primary-50, #e7e9f2);
}

@keyframes autoplay2 {
  0% {
    top: 100%;
  }

  5% {
    top: 0%;
  }

  28.33% {
    top: -100%;
  }

  100% {
    top: -100%;
  }
}

@media (max-width: 768px) {
  .slide-wrapper {
    position: relative;
    overflow: hidden;
    height: 1.75rem;
  }

  .slide-wrapper>* {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    animation: 14s autoplay2 infinite ease-in-out;
  }

  .slide-wrapper>*:nth-child(1) {
    animation-delay: 0s;
  }

  .slide-wrapper>*:nth-child(2) {
    animation-delay: 4s;
  }

  .slide-wrapper>*:nth-child(3) {
    animation-delay: 8s;
  }

  .slide-wrapper>*:nth-child(4) {
    animation-delay: 12s;
  }
}

.cs-line-style::before {
  position: absolute;
  content: "";
  opacity: 1;
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid;
  border-color: #f00;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.cs-product-quantity-input::-webkit-outer-spin-button,
.cs-product-quantity-input::-webkit-inner-spin-button,
#cs-bulk-course-quantity::-webkit-outer-spin-button,
#cs-bulk-course-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cs-product-quantity-input,
#cs-bulk-course-quantity {
  -moz-appearance: textfield;
}

.cs-dot {
  transition: all 0.3s;
}

/* Mobile nav icon css */
@keyframes zoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.cs-zoom-in {
  animation: zoomIn 0.3s ease-out forwards;
}

.cs-icon-position {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 100;
  opacity: 1;
}

@keyframes fadeInLeftToRight {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.cs-fade-in-left-to-right {
  animation: fadeInLeftToRight 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

#cs-parent-scrollbar {
  height: 100% !important;
  overflow: auto !important;
}

#cs-parent-scrollbar ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 3px;
}

#cs-parent-scrollbar ::-webkit-scrollbar-thumb {
  border-radius: 18px;
  background-color: rgba(0, 0, 0, 0.205);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.199);
}

@keyframes fadeInRightToLeft {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.cs-fade-in-right-to-left {
  animation: fadeInRightToLeft 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

/* single course description content css */

.cs-course-sneak-peak .vibe_editor_media {
  width: 10rem;
  height: auto;
  /* border: 1px solid #000; */
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
}

.cs-des-article-content p {
  font-size: 1.125rem;
}

.cs-des-article-content ul {
  list-style: disc;
  list-style-position: outside;
  margin-left: 1.125rem;
}

.cs-singleCourse-content.cs-show-content {
  max-height: fit-content;
}

.cs-show-content {
  display: inline;
  margin-top: 16px;
}

.cs-price-line-style::before {
  position: absolute;
  content: "";
  opacity: 1;
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid;
  border-color: #2e4450;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

/* gravity form */

form#gform_14 {
  & input#gform_submit_button_14 {
    display: flex;
    width: 34.5rem;
    height: 3rem;
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-2, 0.25rem);
    border-radius: var(--Spacing-3, 0.5rem);
    background: var(--Secondary-300, #63d6e3);
    color: var(--Primary-500, #0f217d);
    /* Heading 03/Bold */
    font-family: Lato;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
  }

  & .cs_subscription_email input {
    border-radius: var(--Spacing-3, 0.5rem);
    border: 1px solid var(--White, #fff);
    background: var(--Primary-Smooth, #f6f6fa);
    display: flex;
    width: 100%;
    height: var(--Spacing-8, 3rem);
    padding: var(--Spacing-4, 1rem) var(--Spacing-3, 0.5rem) var(--Spacing-4, 1rem) var(--Spacing-4, 1rem);
    align-items: center;
  }

  & .gform_footer.top_label {
    margin: 0;
  }
}

/* common modal css */

.cs-course-modal-content__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & iframe {
    width: 100%;
    max-height: 450px;
  }
}

/* Home exclusive img css */
.cs-exclusive-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: top;
}

/* Food Hygine categoryPage */
.cs-fhcat-btn {
  color: var(--Neutral-500, #2e4450);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  width: auto;
  text-wrap: wrap;
  line-height: 130%;
  border-radius: var(--Spacing-3, 8px);
  border: 2px solid white;
  background: var(--White, #fff);
  padding: 1rem;
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease;
}

.cs-fhcat-btn:hover {
  border-color: #0f217d;
  color: #3f4d97;
}

/* Testimonial Slider css: */

#cs-slider-testimonial-section .cs-testimonial-next {
  background-color: #fff;
  position: absolute;
  padding: 5px;
  left: 60%;
  bottom: 1rem;
}

#cs-slider-testimonial-section .cs-testimonial-prev {
  background-color: #fff;
  position: absolute;
  padding: 5px;
  right: 60%;
  bottom: 1rem;
}

#cs-slider-testimonial-section .slick-dots {
  margin-top: 2rem;
}

/* Our Course page Css */
.cs-course-cat-heading {
  font-weight: 600;
  padding: 1rem 1.5rem;
  border-radius: var(--Spacing-3, 8px);
  border: 1px solid var(--primary-400, #10217d);
  width: auto;
  text-align: center;
  background: transparent;
  text-decoration: none;
  color: transparent;
  background: linear-gradient(90deg,
      rgba(16, 33, 125, 0.7) 0%,
      rgba(22, 194, 213, 0.7) 181.79%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  transition: all 0.3s ease;
}

.cs-course-cat-heading:hover,
.cs-course-cat-heading.active {
  color: white;
  background:
    linear-gradient(90deg,
      rgba(16, 33, 125, 0.7) 0%,
      rgba(22, 194, 213, 0.7) 181.79%),
    var(--Secondary-600, #14b1c2);
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

.cs-smooth-scroll {
  scroll-padding-top: 20px;
}

.cs-smooth-scroll a {
  transition:
    color 0.1s ease,
    transform 0.3s ease;
}

.cs-smooth-scroll a:hover {
  color: white;
  transform: scale(1.03);
}

.cs-our-courses-spacing {
  margin-top: 80px !important;
}

@media (min-width: 320px) and (max-width: 435px) {
  .cs-our-courses-spacing {
    margin-top: 10px !important;
  }
}

.pricing-table-items tr td svg {
  margin: 0 auto !important;
}

.bold-text {
  font-weight: 700 !important;
}

.faq-item.active {
  border-radius: 0.5rem 0.5rem 0px 0px !important;
}

div#nav_menu-4 {
  padding: 0px 0px;
  margin-top: 2.5rem;
}

footer ul li a {
  font-size: 1.125rem !important;
}

.footer-confidence-section {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.footer-confidence-section .heading {
  display: inline-block;
  background: #f6f6f6;
  padding: 0 0.5rem;
  z-index: 9;
  position: relative;
}

.footer-confidence-section:after {
  content: "";
  position: absolute;
  height: 2px;
  width: 18%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #37506E;
}

.footer-confidence-section:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 18%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #37506E;
}

@media only screen and (max-width: 1216px) {
  .footer-confidence-section:after {
    width: 10%;
  }

  .footer-confidence-section:before {
    width: 10%;
  }
}


@media only screen and (max-width: 1024px) {
  .footer-confidence-section:after {
    width: 14%;
  }

  .footer-confidence-section:before {
    width: 14%;
  }
}

.footer-check-button {
  margin-top: 10px;
}

.footermodal {
  z-index: 999;
}

.footermodal.active {
  display: block;
}

.footermodal.none {
  display: none;
}

#twpreloader {
  display: none;
  background: rgb(255 255 255 / 88%);
  z-index: 99 !important;
  position: fixed !important;
}

.vibebp-login-user .loggedin_user img {
  display: none !important;
}

.logged-out .vibe-login-desktop.vibebp-login {
  padding: 0px !important;
  border: none !important;
  margin-left: 2rem !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table th {
  width: 50% !important;
}

/* body .registration_message{ 
  position: relative;
  font-size: 0px;
}
body .registration_message::before{ 
  content: "Congratulations on successfully registering with Care Skills Training!";
  position: relative;
  font-size: 1rem;
  left: 0px;
  visibility: visible;
  overflow: visible;
  top: 0px;
  z-index: 9;
} */

.best-value {
  margin-top: -8px !important;
  margin-right: -10px !important;
}

.best-value p {
  font-size: 14px !important;
}

.lowercase-text {
  text-transform: lowercase !important;
}

.product-quantity-control button {
  padding: 0px 0px 2px 0px !important;
  height: 20px !important;
  width: 20px !important;
  border-radius: 100px !important;
  line-height: 0px !important;
  border: 1px solid #73828a;
  background: transparent;
  background-color: transparent !important;
  color: #73828a !important;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}

.product-quantity-control button:hover {
  background-color: #73828a !important;
  color: #ffffff !important;
}

.product-quantity-control input {
  width: 48px;
  height: 32px;
  border-radius: 0px;
  border: 1px solid #bec5c9;
  text-align: center;
  background-color: transparent;
}

.tw-red-color {
  color: red !important;
}

.cross-sell-product .tw-full-width {
  width: 100% !important;
}

.cross-sell-product .cross-sell-button:hover {
  background-color: #ffffff !important;
  color: #394c62 !important;
}

.cross-sell-product .cross-sell-button:hover svg path {
  stroke: #394c62 !important;
}

.indigator-button {
  background-color: #14c228;
}

@media only screen and (max-width: 640px) {
  .pricing-sponsors-mobile {
    margin-top: 3rem;
  }
}

@media only screen and (max-width: 1230px) {
  .pricing-padding-mobile-section {
    padding: 0 1rem;
  }
}

@media only screen and (max-width: 1216px) {
  .pricing-padding-mobile-section {
    padding: 0 0rem;
  }

  .pricing-padding-mobile-section .tw-container {
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media only screen and (max-width: 1023px) {
  .pricing-section-mobile-container {
    max-width: 500px;
    margin: 0 auto;
  }

  .tw-custom-order {
    order: 3;
  }

  #cs-footer {
    padding-bottom: 2rem !important;
  }

  .footer-mobile-two-col {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-mobile-two-col>div {
    margin: 0px !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}

@media only screen and (max-width: 768px) {
  .vibe-mobile .loggedin_user img+span.vibebp_name {
    display: block !important;
  }
}

@media only screen and (max-width: 767px) {
  .footerwidget ul {
    gap: 0.5rem;
  }

  #cs-footer-sidebar h4.footertitle {
    margin-bottom: 1rem;
  }

  .footer-heading-cs {
    margin-bottom: 1rem;
  }

  #cs-footer-sidebar .tw-grid {
    gap: 2rem !important;
  }

  .footer-pay-image {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.c-name {
  top: 22% !important;
  font-size: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.c-course {
  top: 30% !important;
  font-size: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.c-date {
  top: 41% !important;
  font-size: 7px !important;
  left: 14% !important;
}

.c-id {
  top: 31% !important;
  font-size: 7px !important;
  left: 60% !important;
}

@media only screen and (max-width: 640px) {
  .footer-mobile-two-col {
    flex-wrap: wrap;
  }

  .footer-mobile-two-col>div {
    width: 100% !important;
    max-width: 100% !important;
  }

  #cs-footer-sidebar h4.footertitle {
    margin-bottom: 1rem;
  }

  .footer-mobile-two-col {
    gap: 2rem !important;
  }

  #cs-footer-sidebar .tw-grid {
    gap: 2rem !important;
  }

  .modal-max-w {
    max-width: 475px;
    margin: 0 auto;
  }

  .c-name {
    top: 30.5% !important;
    font-size: 0.7rem !important;
  }

  .c-course {
    top: 39% !important;
    font-size: 0.5rem !important;
  }

  .c-date {
    width: 100%;
    top: 40.4% !important;
    font-size: 0.3rem !important;
    left: 108% !important;
  }

  .c-id {
    width: 100%;
    top: 44% !important;
    font-size: 0.3rem !important;
    left: 102% !important;
  }
}

@media only screen and (max-width: 475px) {
  .modal-max-w {
    max-width: 320px;
    margin: 0 auto;
  }

  .c-name {
    top: 17.5% !important;
    font-size: 0.5rem !important;
  }

  .c-course {
    top: 22.5% !important;
    font-size: 0.4rem !important;
  }

  .c-date {
    width: 100%;
    top: 21% !important;
    font-size: 0.3rem !important;
    left: 108% !important;
  }

  .c-id {
    width: 100%;
    top: 23% !important;
    font-size: 0.3rem !important;
    left: 102% !important;
  }
}

/* Mega Menu css: */
.cs-menu-courses-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1280px) {
  .cs-menu-courses-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.menu-icon-custom:first-child::after {
  content: url("https://careskillstraining.org/wp-content/uploads/2024/09/fire-menu-icon.svg");
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.cs-sale-text {
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 89.6px */
  color: #ff9201;
  -webkit-text-stroke: 1px var(--White, #fff);
}

.cs-coupon-css {
  color: #0f217d !important;
  font-weight: 700;
  border-radius: 8.431px;
  border: 1.581px dashed var(--Primary-500, #0f217d);
  background: var(--Primary-50, #e7e9f2);
}

.cs-deals-bg {
  background: rgba(255, 255, 255, 0.4);
}

.cs-image-css {
  padding-left: 128px;
  padding-bottom: 128px;
}

@media (min-width: 320px) and (max-width: 425px) {
  .cs-sale-text {
    font-size: 48px;
  }

  .cs-image-css {
    padding-left: 50px;
    padding-bottom: 50px;
  }
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: #fab548 !important;
}

.woocommerce .cart .button,
.woocommerce .cart input.button {
  background-color: #37506e !important;
}

.woocommerce .cart .button,
.woocommerce .cart input.button:hover {
  background-color: #fab548 !important;
}

/* Order Received Page */

.custom-width-billing {
  width: 40% !important;
}

.custom-width-order {
  width: 60% !important;
}

.woocommerce-order-received .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 10px !important;
}

.woocommerce-order-received .woocommerce-order-overview::before {
  display: none !important;
}

.woocommerce-order-received .woocommerce-order {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
}

.woocommerce-order-received .woocommerce-notice {
  padding: 16px 20px;
  box-shadow: 0px 4px 20px 0px #00000014;
  border-radius: 8px;
  border-left: 4px solid;
  border-color: #16c2d5;
  font-size: 18px;
  color: #586973;
  margin-bottom: 40px;
}

.woocommerce-order-received .woocommerce-order-overview li {
  background: #f6f6fa;
  border-radius: 8px;
  border: none !important;
  padding: 16px !important;
  margin-right: 0px !important;
}

.woocommerce-order-received .order-col {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0px 4px 4px 0px #00000014;
}

.woocommerce-order-received .order-lable {
  font-size: 18px;
  color: #73828a;
  margin-bottom: 5px;
  text-transform: capitalize;
  font-family: "Lato" !important;
}

.woocommerce-order-received .order-value {
  font-size: 24px !important;
  color: #2e4450;
  font-weight: 600;
}

.woocommerce-order-received .woocommerce-order-overview .woocommerce-Price-amount bdi {
  color: #14b1c2;
}

.woocommerce-order-received .custom-shadaw {
  box-shadow: 0px 4px 20px 0px #00000014;
}

.woocommerce-order-received .red-price .woocommerce-Price-amount bdi {
  color: red;
}

/* Order Received Page */
.woocommerce-order-received .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 10px !important;
}

.woocommerce-order-received .woocommerce-order-overview::before {
  display: none !important;
}

.woocommerce-order-received .woocommerce-order {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
}

.woocommerce-order-received .woocommerce-notice {
  padding: 16px 20px;
  box-shadow: 0px 4px 20px 0px #00000014;
  border-radius: 8px;
  border-left: 4px solid;
  border-color: #16c2d5;
  font-size: 18px;
  color: #586973;
  margin-bottom: 40px;
}

.woocommerce-order-received .woocommerce-order-overview li {
  background: #f6f6fa;
  border-radius: 8px;
  border: none !important;
  padding: 16px !important;
  margin-right: 0px !important;
}

.woocommerce-order-received .order-col {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0px 4px 4px 0px #00000014;
}

.woocommerce-order-received .order-lable {
  font-size: 18px;
  color: #73828a;
  margin-bottom: 5px;
  text-transform: capitalize;
  font-family: "Lato" !important;
}

.woocommerce-order-received .order-value {
  font-size: 24px !important;
  color: #2e4450;
  font-weight: 600;
}

.woocommerce-order-received .woocommerce-order-overview .woocommerce-Price-amount bdi {
  color: #14b1c2;
}

.woocommerce-order-received .custom-shadaw {
  box-shadow: 0px 4px 20px 0px #00000014;
}

.woocommerce-order-received .red-price .woocommerce-Price-amount bdi {
  color: red;
}

.single-course-sidebar-price {
  padding: 5px 14px 14px;
  padding-bottom: 0px;
}

.single-course-sidebar-price h2 {
  font-size: 26px;
  margin: 0 0 10px;
}

.single-course-sidebar-price .price {
  font-size: 34px !important;
  font-weight: bold;
  margin-bottom: 10px;
}

.single-course-sidebar-price .price del {
  color: #e07000;
  margin-right: 10px;
  font-weight: 600;
  font-size: 24px;
}

.single-course-sidebar-price .price span {
  color: #6491c8;
  line-height: 42px;
}

.single-course-sidebar-price .quantity-container {
  display: flex;
  align-items: center;
  margin: 0px 0px 0px 0;
}

.single-course-sidebar-price .quantity-container button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  background: #415f82;
  cursor: pointer;
  font-size: 24px;
  padding: 0px;
  border-radius: 0px;
}

.single-course-sidebar-price .quantity-container input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 35px;
  text-align: center;
  font-size: 16px;
  padding: 0px;
  border-radius: 0px;
  border: 1px solid #cecece;
  color: #37506e;
}

.single-course-sidebar-price .dropdown {
  margin: 15px 0;
}

.single-course-sidebar-price .dropdown select {
  width: 100%;
  padding: 5px;
  font-size: 1em;
  border: 1px solid #ddd;
}

.single-course-sidebar-price table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.single-course-sidebar-price table th {
  background: #f7f7f7;
  font-weight: bold;
}

.single-course-sidebar-price table tr.selected td {
  background: #37506e;
  color: #fff;
}

.single-course-sidebar-price table tr.selected img {
  filter: brightness(0) invert(1);
}

.single-course-sidebar-price .add-to-cart {
  display: block;
  width: 100%;
  padding: 12px 10px;
  margin-top: 15px;
  background: #f9a31a;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  color: #ffffff;
  border-radius: 8px;
  letter-spacing: 1px;
  margin-top: 15px;
}

.single-course-sidebar-price .add-to-cart-two {
  background: #37506e !important;
}

.single-course-sidebar-price .add-to-cart:hover {
  background: #37506e;
}

.single-course-sidebar-price .add-to-cart-two:hover {
  background: #1e2c3d !important;
}

.single-course-sidebar-price .quantity {
  margin-bottom: 0px;
}

.single-course-sidebar-price .quantity label {
  margin-bottom: 0px;
}

.single-course-pricing-tabs .active-tab {
  background-color: #37506e !important;
  color: #ffffff !important;
  border-radius: 8px 8px 0 0 !important;
  min-height: 60px !important;
}

.single-course-pricing-tabs .tab-btn {
  background-color: #dce7f7;
  color: #37506e;
  border-radius: 8px;
}

#main-header-search {
  width: 350px !important;
  transition: 5s;
}

/* preloader for registration page */
#preloader {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: #222222c9;
  z-index: 99;
}

.overlay__inner {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.overlay__content {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.spinner {
  width: 75px;
  height: 75px;
  display: inline-block;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.05);
  border-top-color: #fff;
  animation: spin 1s infinite linear;
  border-radius: 100%;
  border-style: solid;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Student dashboard popup design */
#student-dashboard-popup {
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0px 4px 20px 0px #0000001a;
  width: 300px;
  padding: 25px;
  border-radius: 24px;
  z-index: 1000;
  transition: opacity 0.3s ease;
  right: 15px;
  top: 90px;
}

#student-dashboard-popup ul {
  list-style-type: none;
}

#studentprofilbutton {
  letter-spacing: 1px !important;
  transition: 0.3s;
}

#studentprofilebutton:hover,
#studentprofilebutton:focus,
#studentprofilebutton:focus-visible {
  box-shadow: 0px 0px 0px 4px rgb(249 163 26 / 30%);
}

.password_terms_wrapper {
  display: none !important;
}

#course-sell-price-hidden {
  display: none !important;
}

.vibebp_registration_form form .vibebp_registration_field_wrap .password_fields {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 15px !important;
}

.vibebp_registration_form .password_fields .vibebp_registration_field {
  width: 50% !important;
}

@media only screen and (max-width: 1024px) {
  #cs-single-course-sidebar {
    display: block !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
    padding: 0px !important;
    left: 0px;
    border-radius: 0px !important;
  }

  .single-course-pricing-box {
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0px !important;
  }
}

@media only screen and (max-width: 413px) {
  .vibebp_registration_form form .vibebp_registration_field_wrap .password_fields {
    flex-wrap: wrap !important;
  }

  .vibebp_registration_form .password_fields .vibebp_registration_field {
    width: 100% !important;
  }
}

/* Cart page toggle-css */
#cs-cart-toggle-wrapper .cs-cart-check-box {
  transform: scale(1.2);
}

#cs-cart-toggle-wrapper input[type="checkbox"] {
  position: relative;
  appearance: none;
  width: 45px;
  height: 21px;
  background: #ccc;
  border-radius: 50px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.4s ease;
}

#cs-cart-toggle-wrapper input:checked[type="checkbox"] {
  background: var(--secondary-500, #f9a31a);
}

#cs-cart-toggle-wrapper input[type="checkbox"]::after {
  position: absolute;
  content: "";
  width: 22px;
  height: 20px;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
  transition: 0.4s ease;
}

#cs-cart-toggle-wrapper input:checked[type="checkbox"]::after {
  left: calc(100% - 22px);
}

.single-course-sidebar-price table th {
  background: #f7f7f7;
  font-weight: bold;
}

.single-course-sidebar-price table th,
.single-course-sidebar-price table td {
  text-align: left;
  padding: 5px 10px;
  border: 1px solid #ddd;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 170px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff !important;
  text-align: center;
  font-size: 12px;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Job Ready course singles are marketing pages and keep the shared footer;
   est_job_ready_body_class() in functions.php adds the exemption class. */
.single-course:not(.est-job-ready-course) #cs-footer {
  display: none !important;
}

.woocommerce .cart .button,
.woocommerce .cart input.button:hover {
  background-color: #37506e !important;
  color: #ffffff !important;
}

.woocommerce-cart #cs-footer {
  display: none !important;
}

.e-woocommerce-login-section {
  display: none !important;
}

.woocommerce-page a.button {
  background: #37506e !important;
}

.social-login-buttoons {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.social-login-buttoons a {
  width: 100%;
  display: flex !important;
  gap: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 200px;
  background: #ffffff;
  display: inline-block;
  border-radius: 8px;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #555555 !important;
  padding: 12px 10px;
  box-shadow: 0px 0px 40px 0px #5555550a !important;
  transition: 0.3s;
}

.social-login-buttoons a:hover {
  opacity: 0.7;
}

.social-login-buttoons img {
  width: 20px !important;
}

.social-login-buttoons .facebook-login-button {
  background: #1877f2;
  color: #ffffff !important;
  transition: 0.3s;
}

.header-main-search {
  border: 1px solid transparent !important;
  padding-left: 46px !important;
  transition: 0.3s;
}

.header-main-search:focus {
  border: 1px solid #f9a31a !important;
}

.search-icon-header {
  position: absolute;
  left: 15px;
}

#es-root-search-results {
  border-radius: 0px 0px 4px 4px !important;
}

.search-card {
  border-radius: 4px;
  position: relative;
  border: 1px solid #37506e63 !important;
  transition: 0.3s;
}

.search-card:hover {
  border: 1px solid #f9a31a82 !important;
}

.search-button {
  font-size: 16px !important;
  width: 100% !important;
  padding: 10px 10px !important;
  font-weight: 500;
  transition: 0.3s;
}

.search-overlap-link {
  height: 100%;
  width: 100%;
  display: block;
  overflow: visible;
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
}

.search-overlap-link:hover+div+.s-button-area a {
  background: #f9a31a !important;
  color: #ffffff !important;
  transition: 0.3s;
}

.search-card:has(.search-overlap-link:hover) {
  background: #fef6e8 !important;
  transition: 0.3s;
}

.s-price {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #27394e;
}

.search-card .course-button {
  font-size: 14px;
  border-radius: 100px;
  background: #37506e;
  color: #ffffff;
  font-weight: 400;
  padding: 7px 10px 7px 16px;
  font-family: "Source Sans 3";
  transition: 0.3s;
}

@media only screen and (max-width: 1024px) {
  .bundle-course-card-single {
    position: relative !important;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    padding: 6px !important;
    font-size: 20px !important;
    margin-bottom: 15px !important;
  }

  .without-login a {
    font-size: 16px !important;
  }

  .course-button {
    font-size: 16px !important;
  }
}

@media only screen and (max-width: 992px) {
  .woocommerce .cart .button {
    margin-top: 10px !important;
  }

  .woocommerce-cart table.cart img {
    min-width: 2.2rem !important;
  }

  #main-header-search {
    width: 161px !important;
  }
}

@media only screen and (max-width: 767px) {
  .social-login-buttoons {
    padding: 20px;
  }

  .social-login-buttoons a {
    font-size: 16px !important;
  }

  .without-login {
    margin-left: 17px !important;
    margin-top: 20px !important;
  }

  .without-login a {
    min-width: 180px !important;
  }

  .mobile-style-user-icon {
    padding-left: 20px !important;
    justify-content: start !important;
    margin-top: 20px !important;
  }

  #student-dashboard-popup {
    position: absolute;
    background-color: #ffffff;
    box-shadow: 0px 4px 20px 0px #0000001a;
    width: 100%;
    padding: 25px;
    border-radius: 0px;
    z-index: 1000;
    transition: opacity 0.3s ease;
    top: 76px;
    left: 0;
  }
}

@media only screen and (max-width: 480px) {
  .social-login-buttoons a {
    font-size: 12px !important;
  }
}

/* New home page design */

.home-shortcode-course-main .elementor-shortcode {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.overlap-llink {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
}


#cs-footer {
  background: url(https://stag.essentialsafetytraining.org.uk/wp-content/uploads/2025/02/footer-frame.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}

#certificateVarify {
  height: 60px !important;
  position: relative;
}

#cs-footer .varifyButton {
  position: absolute;
  width: 120px !important;
  height: 46px !important;
  right: 7px;
  top: 50%;
  margin-top: 0px !important;
  padding: 0px 0px !important;
  transform: translateY(-50%);
  font-size: 18px !important;
  font-weight: 600 !important;
  transition: 0.3s;
}


#footer-social-icons .footer--social-icon {
  border: 1px solid #ebeef1;
  border-radius: 100px;
  padding: 3px;
  width: 37px;
  height: 37px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}

#footer-social-icons .footer--social-icon:hover {
  opacity: 0.5;
}

#footer-social-icons .footer--social-icon img {
  width: 20px;
}

/* ======= Header new mega menu design ======== */
.course-mega-menu-template {
  display: none;
  max-width: 1400px !important;
}

.desktop-mega-menu {
  gap: 24px;
  width: 100%;
}

.desktop-mega-menu li .course-mega-menu a {
  color: #37506e !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  transition: 0.3s;
}

.desktop-mega-menu li .course-mega-menu a:hover {
  color: #f9a31a !important;
}

.desktop-mega-menu>li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.desktop-mega-menu .course-mega-menu {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 50px;
}

.desktop-mega-menu li span {
  width: 20px;
}

.course-mega-menu-template {
  position: absolute;
  width: 100%;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
}

.desktop-mega-menu .course-main-card {
  display: flex;
}

.desktop-mega-menu .course-image {
  width: 30% !important;
}

.desktop-mega-menu .course-lists {
  display: none;
}

.desktop-mega-menu .course-title {
  display: none;
}

.desktop-mega-menu .tw-cs-course-card-image {
  height: auto !important;
}

.desktop-mega-menu .course-image {
  border-radius: 16px 0px 0px 16px !important;
}

.desktop-mega-menu .course-image::before {
  display: none !important;
}

.desktop-mega-menu .course-card-content {
  width: 70% !important;
  border-radius: 0px 16px 16px 0px;
}

.desktop-mega-menu .course-title-two {
  height: auto !important;
  font-size: initial !important;
}

.desktop-mega-menu .course-title-two a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #37506e !important;
  transition: 0.3s;
}

.desktop-mega-menu .course-title-two a:hover {
  color: #f9a31a !important;
}

.desktop-mega-menu .course-button {
  display: none !important;
}

.desktop-mega-menu .course-button-two {
  display: flex !important;
  font-size: 14px !important;
  border-radius: 100px;
  background: transparent;
  color: #f9a31a !important;
  font-weight: 400;
  padding: 8px 10px 8px 14px !important;
  font-family: "Source Sans 3";
  transition: 0.3s;
  border: 1px solid #f9a31a;
  gap: 7px;
  display: flex;
  align-items: center;
  line-height: 0;
}

.desktop-mega-menu .home-course-main:hover .course-button {
  background: #f9a31a;
  color: #ffffff !important;
}

.desktop-mega-menu .home-course-main:hover .course-button-two img {
  filter: brightness(0) invert(1);
}

.desktop-mega-menu .home-course-main {
  border: none !important;
  box-shadow: none;
  transform: none;
}

.desktop-mega-menu .course-card-content {
  background: #ffffff;
}

.desktop-mega-menu .overlap-llink {
  display: none;
}

@media only screen and (max-width: 1400px) {
  .desktop-mega-menu li .course-mega-menu a {
    font-size: 16px !important;
  }

  .desktop-mega-menu {
    gap: 15px;
    width: 100%;
  }

  .without-login a {
    font-size: 15px !important;
    width: 145px !important;
    padding: 10px 8px !important;
  }

  #main-header-search {
    width: 200px !important;
    transition: 5s;
  }
}

@media only screen and (max-width: 1300px) {
  .desktop-mega-menu {
    gap: 20px;
  }
}


.pricing-contact-button:hover {
  background: linear-gradient(90deg, #ffecca 0%, #d6e8ff 100%);
}

.pricing-selections .item-price.active {
  background: linear-gradient(90deg, #ffecca 0%, #d6e8ff 100%);
}

.monthly-total-price .pricing-contact-button {
  font-size: 18px;
  text-align: center;
  justify-content: center;
  width: 200px;
  margin: 0 auto;
  background: linear-gradient(90deg, #ffecca 0%, #d6e8ff 100%);
  transition: 0.3s;
}

.monthly-total-price .pricing-contact-button:hover {
  background: linear-gradient(90deg, #cfe4ff 0%, #ffe9c3 100%);
}

@media only screen and (max-width: 1100px) {
  .parsent-text {
    display: block;
    margin-left: 0px !important;
    width: 100px;
    text-align: center;
    margin-top: 8px;
  }
}

@media only screen and (max-width: 767px) {
  #personal-content {
    max-width: 500px;
    margin: 0 auto;
  }

  .item-price span {
    font-size: 18px !important;
  }

  .item-price .price-text {
    font-size: 24px !important;
  }

  .item-price .price-text span {
    font-size: 14px !important;
  }
}

@media only screen and (max-width: 556px) {
  .team-add-cart {
    font-size: 14px !important;
  }

  .team-minus-button,
  .team-plus-button {
    width: 30px !important;
    height: 30px !important;
  }

  .team-minus-button img,
  .team-plus-button img {
    width: 14px;
  }

  .item-price span {
    font-size: 14px !important;
  }

  .item-price .price-text {
    font-size: 18px !important;
  }

  .item-price .price-text span {
    font-size: 12px !important;
  }

  .item-price img {
    width: 15px !important;
  }

  .item-price .tw-flex {
    gap: 5px !important;
  }
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 4px;
  margin-top: 0px !important;
  transition:
    max-height 0.3s ease,
    background 0.3s ease;
}

.accordion-header span {
  cursor: pointer;
}

.accordion-content.active {
  max-height: 200px;
  /* Adjust as needed for smooth expansion */
  background: #fff;
  border-radius: 4px;
  margin-top: 10px !important;
}

#notification-img img {
  object-fit: cover;
}

.buy-more-save-more {
  background: #feccc5 !important;
  text-align: center;
  color: #415f82;
  font-weight: 700;
  text-transform: uppercase;
  transform: scaleY(1.5);
  border-radius: 2px;
  padding: 0px 12px;
  font-size: 12px;
  letter-spacing: 1px;
  display: inline-block;
  line-height: 20px;
}

.buy-more-sticker {
  margin-top: -77px;
  margin-left: -63px;
  position: absolute;
}

#priceTable .selected .yollow {
  color: #fff200 !important;
}

#priceTable span.price-left {
  display: inline-block;
  min-width: 80px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.team-minus-button,
.team-plus-button {
  transition: 0.3s;
}

.team-minus-button:hover {
  background: #f9a31a !important;
}

.team-plus-button:hover {
  background: #f9a31a !important;
}

.team-plus-button:hover img,
.team-minus-button:hover img {
  filter: brightness(0) invert(1);
}

.cs-details-arrow {
  display: flex;
  align-items: center;
}

.cs-common-accordion-title h3,
.cs-common-accordion-title .details {
  transition: 0.3s;
}

.cs-common-accordion-title:hover h3,
.cs-common-accordion-title:hover .details {
  color: #f9a31a !important;
}

.woocommerce-mini-cart__buttons .wc-forward {
  background: #37506e !important;
  opacity: 1 !important;
}

.woocommerce-mini-cart__buttons .wc-forward:hover {
  background: #f9a31a !important;
}

.woocommerce-cart table.shop_table td small {
  color: white;
  font-weight: 700;
  font-size: 12px;
  background: #f9a31a;
  padding: 2px 6px;
  border-radius: 4px;
}

.woocommerce-cart table.shop_table td .first-payment-date small {
  color: #37506e !important;
  background: #fde2b8 !important;
  font-weight: 600 !important;
}

.tw-scrollbar-thin {
  -webkit-overflow-scrolling: touch;
  /* Enables momentum scroll on iOS */
  scrollbar-width: thin;
}

.sneak-peek .slider-nav {
  width: 21% !important;
}

.sneak-peek .tw-cursor-pointer {
  width: 100% !important;
}

.sneak-peek .slick-slide {
  padding-bottom: 10px !important;
}

.sneak-peek .slick-prev {
  position: absolute;
  bottom: -42px;
  left: 0%;
  z-index: 99;
  width: 40px;
  height: 26px;
  padding: 0px;
  line-height: 0;
  border-radius: 2px;
  background: #37506e;
  transition: 0.3s;
}

.sneak-peek .slick-prev:hover {
  background: #f9a31a;
}

.sneak-peek .slick-next {
  position: absolute;
  bottom: -42px;
  right: 0%;
  z-index: 99;
  width: 40px;
  height: 26px;
  padding: 0px;
  line-height: 0;
  border-radius: 2px;
  background: #37506e;
  transition: 0.3s;
}

.sneak-peek .slick-next:hover {
  background: #f9a31a;
}

.sneak-peek .tw-space-y-4 .slick-list {
  margin-top: 0px !important;
}

@media only screen and (max-width: 480px) {
  .sneak-peek .slick-slide {
    padding-bottom: 0px !important;
  }

  .sneak-peek .slick-prev {
    position: absolute;
    bottom: -42px;
    left: 200%;
    z-index: 99;
    width: 28px;
    height: 15px;
    padding: 0px 0px 3px;
    line-height: 0;
    border-radius: 2px;
    background: #37506e;
    transition: 0.3s;
  }

  .sneak-peek .slick-next {
    position: absolute;
    bottom: -42px;
    right: -230%;
    z-index: 99;
    width: 28px;
    height: 15px;
    padding: 0px 0px 3px;
    line-height: 0;
    border-radius: 2px;
    background: #37506e;
    transition: 0.3s;
  }
}

.pricing-quantity-yearly .q-style {
  border: 1px solid #ffffff;
  padding: 0px;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 0px;
  text-align: center;
  transition: 0.3s;
}

.pricing-quantity-yearly .q-style:hover {
  background: #f9a31a;
  border-color: #f9a31a;
}

/* sldier single course page */
.custom-slider-container {
  display: flex;
  gap: 20px;
  overflow: hidden;
  min-height: 485px;
}

.single-course .course-video iframe {
  width: 100%;
  height: 420px;
}

.custom-thumbnails {
  display: flex;
  flex-direction: column;
  width: 18%;
  gap: 14px;
}

.custom-thumbnails img {
  width: 100%;
  border: 2px solid #d3d3d3;
  border-radius: 4px;
  cursor: pointer;
  transition: border 0.3s;
  height: 23%;
  object-fit: cover;
}

.custom-thumbnails img.active {
  border: 2px solid #f9a31a;
}

#custom-slider .custom-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #37506e;
  width: 82%;
  padding: 8px;
  border-radius: 4px;
}

#custom-slider .custom-preview.first {
  background: #37506e00;
  padding: 0px;
}

/* #custom-slider .custom-preview img {
  width: 100%;
  height: 100%;
} */
#custom-slider .custom-preview {
  position: relative;
}

#custom-slider .preview-title {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translateX(-50%);
  right: 10px;
  color: #414143;
  padding: 8px 12px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  font-family: "Reckless Neue";
  display: none;
}

@media only screen and (max-width: 1300px) {
  .custom-slider-container {
    min-height: 380px;
  }

  .custom-thumbnails {
    width: 22%;
  }

  #custom-slider .custom-preview {
    width: 78%;
  }

  #custom-slider .preview-title {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translateX(-50%);
    right: 10px;
    color: #414143;
    padding: 8px 12px;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    display: none;
  }

  .custom-thumbnails img {
    border: 2px solid #d3d3d3;
    height: 22%;
  }
}

@media only screen and (max-width: 1150px) {
  .custom-slider-container {
    min-height: 280px;
  }
}

@media only screen and (max-width: 1024px) {
  .custom-thumbnails img {
    height: 23%;
  }

  #custom-slider .preview-title {
    top: 52%;
    font-size: 12px;
  }
}

@media only screen and (max-width: 556px) {
  .custom-thumbnails img {
    height: 23%;
  }

  #custom-slider .preview-title {
    top: 51%;
    font-size: 8px;
  }

  .custom-slider-container {
    min-height: 237px;
  }
}

.single-pricing-section-new {
  max-width: 600px;
  margin: 0 auto;
}

.single-pricing-section-new .add-to-cart,
.single-course-sidebar-price .add-to-cart-me {
  display: block;
  width: 100%;
  padding: 12px 10px;
  margin-top: 15px;
  background: #f9a31a;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: #ffffff;
  border-radius: 8px;
  letter-spacing: 1px;
  margin-top: 15px;
}

.single-pricing-section-new table th {
  background: #f7f7f7;
  font-weight: bold;
}

.single-pricing-section-new table th,
.single-pricing-section-new table td {
  text-align: left;
  padding: 5px 10px;
  border: 1px solid #ddd;
}

.single-pricing-section-new .pricing-section {
  width: 100%;
}

.single-pricing-section-new .add-to-cart:hover,
.single-course-sidebar-price .add-to-cart-me:hover {
  background: #5f738b;
}

.single-pricing-section-new span.price-left {
  display: inline-block;
  min-width: 80px;
}

.woocommerce .woocommerce-cart-form a.remove {
  display: block;
  font-size: 18px;
  height: 20px;
  width: 20px;
  line-height: 17px;
  border-radius: 100%;
  color: #37506e !important;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid #37506e;
  text-align: center;
}

.single-course-pricing-table {
  border: 1px solid;
  border-radius: 8px;
  border-image-source: linear-gradient(90deg, #ffecca 0%, #d6e8ff 100%);
  border-image-slice: 1;
  border-image-repeat: stretch;
  overflow: hidden;
  /* helps with rounded corners inside */
}

.single-course-pricing-table .pricing-heading {
  border-bottom: 2px solid;
  border-radius: 8px;
  border-image-source: linear-gradient(90deg, #ffecca 0%, #d6e8ff 100%);
  border-image-slice: 1;
  border-image-repeat: stretch;
}

#personal-content .team-minus-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
  padding: 0px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 0px;
  text-align: center;
  transition: 0.3s;
}

#personal-content .team-plus-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
  padding: 0px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 0px;
  text-align: center;
  transition: 0.3s;
}

#personal-content .team-minus-button img,
#personal-content .team-plus-button img {
  filter: brightness(0) invert(1);
  width: 11px;
}

#team-quantity {
  height: 34px !important;
  width: 60px !important;
  font-size: 18px !important;
  color: #37506e;
}

.tw-cursor-pointer.active {
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #37506e;
}

/* ============ Lost password page style ============= */
.lost-password-section input {
  padding: 8px 10px !important;
  border: 1px solid #ced4da !important;
  height: 38px !important;
  border-radius: 4px !important;
  width: 100% !important;
}

.lost-password-section input[type="submit"] {
  background: #324964 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  line-height: 19px !important;
  height: 38px !important;
  transition: 0.3s;
}

.lost-password-section input[type="submit"]:hover {
  background: #f9a31a !important;
}

.lost-password-section .back-to-login {
  margin-top: 40px;
  margin-bottom: 0px;
}

.lost-password-section .back-to-login a {
  font-size: 16px;
  font-weight: 400;
  color: #3b5374;
  transition: 0.3s;
}

.lost-password-section .back-to-login a:hover {
  color: #f9a31a;
}

.lost-password-section .back-to-login {
  margin-top: 30px !important;
  margin-bottom: 0px !important;
  text-align: center !important;
}

/* ============ Lost password page style END ============= */

/* =================== Hide footer on login page ============== */

.page-id-69095 #cs-footer {
  display: none !important;
}

/* =============== Single course page design new ==============*/
#cs-course-content-nav-wrapper {
  display: flex !important;
  gap: 25px;
  justify-content: space-evenly;
  margin-top: 30px;
}

#cs-course-content-nav-wrapper a {
  width: 25%;
  color: #37506e;
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  border: 1px solid #c1c9d2;
  padding: 8px 8px;
  transition: 0.3s;
}

#cs-course-content-nav-wrapper a:hover,
#cs-course-content-nav-wrapper a:focus,
#cs-course-content-nav-wrapper a:active {
  background: #37506e;
  color: #ffffff;
}

#cs-course-content-nav-wrapper a.active {
  background: #37506e;
  color: #ffffff;
}

.course-overview-single li {
  margin-bottom: 0px;
}

.course-overview-single li svg {
  width: 26px;
}

.course-overview-single ul {
  column-count: 2;
  gap: 30px;
}

.cs-des-article-content p {
  font-size: 16px;
  color: #37506e;
  text-align: justify !important;
}

.course-includes ul {
  column-count: 2;
  gap: 30px;
}

.course-includes li {
  margin-bottom: 0px;
}

.single-hightlight-section {
  position: relative;
}

.single-hightlight-section::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 8px;
  background: #6491c8;
  top: 0;
  left: 0;
}

.cs-curriculum-accordion {
  padding: 14px 20px;
}

.cs-common-accordion-content {
  padding-top: 0px !important;
}

.cs-curriculum-accordion .cs-details-arrow svg {
  width: 30px;
  height: 30px;
}

.tw-divide-y-2> :not([hidden])~ :not([hidden]) {
  border-top-width: 1px !important;
  /* override with same specificity */
}

.cs-curriculum-accordion:first-child {
  border-top: none !important;
}

.cs-details-arrow svg path {
  stroke: #6e7485;
}

.cs-curriculum-accordion .cs-common-accordion-title h3 {
  margin-left: -5px;
}

.cs-curriculum-accordion .cs-common-accordion-title:hover svg path {
  stroke: #f9a31a;
}

.training-trust-section .cpd-main-area {
  border: 1px solid #ebeef1;
  padding: 40px;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }

  70% {
    transform: scale(1.8);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.pulse-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.4);
  animation: pulse-ring 1.5s ease-out infinite;
  z-index: 1;
}

@keyframes upskillPlayPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.78);
    opacity: 0.65;
  }

  65% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.55);
    opacity: 0;
  }
}

@keyframes upskillPlayBreath {

  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

.home-upskill-business-section .video-play-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
}

.home-upskill-business-section .video-play-core {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: radial-gradient(circle at center, rgba(249, 163, 26, 0.24) 0%, rgba(249, 163, 26, 0.04) 72%, rgba(249, 163, 26, 0) 100%);
  z-index: 1;
  animation: upskillPlayBreath 2.2s ease-in-out infinite;
  pointer-events: none;
}

.home-upskill-business-section .video-play-button svg {
  position: relative;
  z-index: 5;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 0 8px rgba(249, 163, 26, 0.35));
}

.home-upskill-business-section .video-play-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  border-radius: 9999px;
  background: rgba(249, 163, 26, 0.08);
  border: 1px solid rgba(249, 163, 26, 0.28);
  transform: translate(-50%, -50%);
  animation: upskillPlayPulse 2.4s ease-out infinite;
  z-index: 2;
  pointer-events: none;
}

.home-upskill-business-section .video-play-ring-2 {
  width: 118px;
  height: 118px;
  animation-delay: 0.6s;
  background: rgba(249, 163, 26, 0.05);
  border-color: rgba(249, 163, 26, 0.22);
}

.home-upskill-business-section .video-play-ring-3 {
  width: 140px;
  height: 140px;
  animation-delay: 1.2s;
  opacity: 0.28;
  background: transparent;
  border-color: rgba(249, 163, 26, 0.18);
}

.home-upskill-business-section .video-play-ring-4 {
  width: 162px;
  height: 162px;
  animation-delay: 1.8s;
  opacity: 0.2;
  background: transparent;
  border-color: rgba(249, 163, 26, 0.14);
}

.home-upskill-business-section .tw-group:hover .video-play-button svg {
  transform: scale(1.08);
}

#course-questions ul {
  padding: 20px 50px;
  box-shadow: 0px 5px 16px 0px #080f340f;
}

#course-questions .faq-warp-single {
  border-bottom: 1px solid #ebeef1;
  padding: 16px 0px;
}

#course-questions .faq-warp-single:last-child {
  border-bottom: none !important;
}

#course-questions svg path {
  stroke: #37506e !important;
}

#filterSelect {
  border: 1px solid #ebeef1;
  border-radius: 0px !important;
  width: 160px;
  font-size: 16px !important;
  color: #4e4e4e;
}

.dot-icon {
  font-size: 26px !important;
  line-height: 0px;
  position: relative;
  top: -7px;
}

.single-review-item {
  border-bottom: 1px solid #ebeef1;
}

.single-review-item:last-child {
  border-bottom: none !important;
}

@media only screen and (max-width: 1366px) {
  #course-questions ul {
    padding: 10px 20px;
    box-shadow: 0px 5px 16px 0px #080f340f;
  }

  .training-trust-section .cpd-main-area {
    border: 1px solid #ebeef1;
    padding: 20px;
  }
}

@media only screen and (max-width: 1200px) {
  #cs-course-content-nav-wrapper {
    display: flex !important;
    gap: 10px;
    justify-content: space-evenly;
    margin-top: 30px;
  }

  .course-overview-single {
    padding: 20px !important;
  }

  .single-hightlight-section {
    padding: 20px !important;
  }
}

@media only screen and (max-width: 1023px) {
  #top-infiniteloop .slide-wrapper {
    width: 100% !important;
    margin: 0px;
    max-width: 100%;
  }

  #cs-single-course-banner {
    padding-top: 30px !important;
  }

  .single-course-main-heading {
    font-size: 26px !important;
  }

  .right-margin {
    margin-right: 0px !important;
  }

  #cs-course-content-nav-wrapper {
    margin-right: 0px !important;
  }
}

@media only screen and (max-width: 639px) {
  .main-single-course-banner {
    height: 350px !important;
  }

  .single-course-main-heading {
    font-size: 24px !important;
  }

  #cs-course-content-nav-wrapper a {
    font-size: 16px;
    padding: 4px 2px;
  }

  #cs-course-content-nav-wrapper {
    gap: 4px;
  }

  .course-overview-single ul {
    column-count: 1;
    gap: 19px;
  }
}

@media only screen and (max-width: 556px) {
  .main-single-course-banner {
    height: 208px !important;
  }

  .cs-curriculum-accordion {
    padding: 10px 10px;
  }

  .cs-common-accordion-content {
    padding-top: 14px !important;
  }

  .c-full-mobile {
    width: 100% !important;
  }

  .c-full-mobile:nth-child(2) {
    margin-top: 5px !important;
  }

  .cpd-main-area .cpd-item {
    flex-wrap: wrap;
  }

  .single-course-video {
    height: 300px !important;
  }

  .training-trust-section {
    gap: 20px !important;
  }

  .training-trust-section ul .img {
    width: 35px;
  }

  .training-trust-section ul img {
    width: 25px !important;
  }

  .training-trust-section ul p {
    width: 75% !important;
    line-height: 24px !important;
  }

  .cpd-main-area p {
    font-size: 16px !important;
  }

  .course-overview-single h2,
  #cs-course-info h3,
  .single-hightlight-section h2,
  .training-trust-section h3,
  #course-reviews h2,
  #course-questions h3 {
    font-size: 24px !important;
  }

  .faq-warp-single h3 {
    font-size: 18px !important;
    line-height: 22px !important;
  }

  .course-includes ul {
    column-count: 1;
    gap: 30px;
  }

  #course-questions .cs-common-accordion-title h3 {
    font-size: 17px !important;
  }

  .cpd-main-area .text-item h4 {
    font-size: 18px !important;
  }

  .course-curriculmn-single {
    justify-content: space-between !important;
  }

  .course-curriculmn-single .c-full-mobile {
    justify-content: space-between;
    justify-content: space-between;
  }

  .course-curriculmn-single .tw-items-center {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .course-curriculmn-single .c-full-mobile2 {
    width: 190px !important;
  }
}

/* Top floating bar desing */

#copyButton {
  padding: 0;
  position: relative;
  top: 10px;
  left: 42px;
}

.request-invoice-button {
  margin-right: 20px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #37506e !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  transition: 0.3s;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  min-width: 140px !important;
}

.request-invoice-button:hover {
  color: #f9a31a !important;
}

.hot-deal-menu {
  color: #37506e !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  transition: 0.3s;
  display: flex;
  min-width: 93px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-right: 20px;
}

.hot-deal img {
  position: relative;
  bottom: 3px;
}

/* ============ New blog page design =============== */
.blog-feature-post-slider {
  position: relative;
}

.blog-feature-post-slider::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: transparent;
  transition:
    transform 1.5s ease,
    opacity 1.5s ease,
    visibility 0s linear 1.5s;
}

.feature-blog-slider .slick-current+.blog-feature-post-slider::before {
  background: linear-gradient(180deg,
      rgba(71, 103, 142, 0) 0%,
      #47678e 50.96%,
      #47678e 100%) !important;
  transition:
    transform 1.5s ease,
    opacity 1.5s ease,
    visibility 0s linear 0s;
}

.feature-blog-slider .slick-slider {
  margin: 0 -15px;
}

.feature-blog-slider .slick-slide {
  padding: 10px;
  margin-right: 13px;
  margin-left: 13px;
}

.feature-blog-slider .item-content {
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 1.5s ease,
    opacity 1.5s ease,
    visibility 0s linear 1.5s;
}

.feature-blog-slider .slick-current+.slick-slide .item-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 1.5s ease,
    opacity 1.5s ease,
    visibility 0s linear 0s;
}

.feature-blog-slider {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
  /* smooth fade */
}

.feature-blog-slider.is-loading {
  opacity: 0;
  visibility: hidden;
}

.category-slider-items .slick-track {
  display: flex;
  gap: 20px;
}

.category-slider-items .slick-slide:focus {
  border-color: #f9a31a !important;
}

.cat-card.is-active {
  border-color: #f9a31a !important;
}

.toc-details[open] .toc-chevron {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.toc-details .toc-chevron {
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.relevant-details[open] .relevant-chevron {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.relevant-details .relevant-chevron {
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

#blog-right-sidebar .toc-details summary {
  border-radius: 8px 8px 0px 0px !important;
}

/* Simple spinner */
#blog-preloader {
  display: none;
  /* hidden by default */
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 100px 0;
}

#blog-preloader::after {
  content: "";
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top-color: #f9a31a;
  /* highlight colour */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#blog-right-sidebar {
  position: relative;
}

/* pin absolute bottom inside this */
/* Default: no sticky; JS controls fixed/absolute states */
#blog-right-sidebar .table-ofcontents {
  will-change: top, left, width;
  border-radius: 0px 0px 8px 8px;
}

.single-blog-content h2,
.single-blog-content h3,
.single-blog-content h4,
.single-blog-content h5,
.single-blog-content h6 {
  color: #37506e !important;
  margin-bottom: 10px !important;
  margin-top: 15px !important;
}

.single-blog-content .post-content p {
  color: #27394e !important;
  font-size: 18px !important;
}

.single-blog-content .post-content p:first-child {
  margin-top: 0px !important;
}

.relevent-courses-list .slick-track::before {
  display: none;
}

.relevent-courses-list .slick-slider {
  margin: 0 -10px;
}

.relevent-courses-list .slick-slide {
  margin-right: 10px;
  margin-left: 10px;
}

.relevent-courses-list .slick-prev,
.relevent-courses-list .slick-next {
  position: absolute;
  bottom: -60px;
  /* move arrows below slider */
  transform: none;
  top: auto;
  background: transparent;
  z-index: 10;
}

/* Place arrows next to each other, centered */
.relevent-courses-list .slick-prev {
  left: 50%;
  transform: translateX(-50px);
  /* shift left */
}

.relevent-courses-list .slick-next {
  left: 50%;
  transform: translateX(10px);
  /* shift right */
}

.featured-blog-posts .slick-prev,
.featured-blog-posts .slick-next {
  position: absolute;
  bottom: -60px;
  /* move arrows below slider */
  transform: none;
  top: auto;
  background: transparent;
  z-index: 10;
}

/* Place arrows next to each other, centered */
.featured-blog-posts .slick-prev {
  left: 50%;
  transform: translateX(-80px);
}

.featured-blog-posts .slick-next {
  right: 50%;
  transform: translateX(80px);
}

#post-main .wp-block-list li {
  font-size: 18px !important;
}

@media only screen and (max-width: 767px) {
  .blog-feature-post-slider::before {
    background: linear-gradient(180deg,
        rgba(71, 103, 142, 0) 0%,
        #47678edf 50.96%,
        #47678e 100%) !important;
    transition:
      transform 1.5s ease,
      opacity 1.5s ease,
      visibility 0s linear 0s;
  }

  .feature-blog-slider .item-content {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #post-main .post-content h2 {
    font-size: 22px !important;
  }

  /* Cancel the sibling "current slide" animation */
  .feature-blog-slider .slick-current+.slick-slide .item-content {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .featured-blog-posts .tw-pointer-events-none {
    display: none !important;
  }

  .category-slider-items .slick-track {
    gap: 7px;
  }
}

.single-blog-content .cta-banner-blog h2 {
  color: #f9a31a !important;
  margin-top: 0px !important;
}

.single-blog-content .cta-banner-blog p {
  color: #e5e7eb !important;
}

.single-blog-content .cta-banner-blog a {
  text-decoration: none !important;
}

.single-blog-content .cta-banner-blog img {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.single-blog-content .blog-cta-banner-2 a {
  border-color: #f9a31a !important;
  transition: 0.3s;
}

.single-blog-content .blog-cta-banner-2 a:hover {
  border-color: #ffffff !important;
}

.single-blog-content .blog-cta-banner-2 a:hover svg path {
  fill: #ffffff !important;
}

.single-blog-content .blog-cta-banner-2 p {
  color: #e5e7eb !important;
  font-weight: 400 !important;
  margin-bottom: 6px !important;
}

.single-blog-content .blog-cta-banner-2 h2 {
  color: #ffffff !important;
  margin-top: 0px !important;
}

.prime-banner p {
  font-size: 16px !important;
}

@media only screen and (max-width: 767px) {
  .single-blog-content .cta-banner-blog {
    display: flex !important;
    flex-direction: column-reverse !important;
    padding: 30px 15px !important;
  }

  .single-blog-content .cta-banner-blog p {
    font-size: 16px !important;
  }
}

/* ============ Marketing Promotional Banner Design =============== */
.est-promotional-banner .top-heading,
.est-promotional-banner .heading-three,
.est-promotional-banner .heading-five {
  font-family: "Bebas Neue", sans-serif;
  line-height: 0.8em;
}

.est-promotional-banner .heading-two,
.est-promotional-banner .heading-four,
.est-promotional-banner .heading-six,
.est-promotional-banner .apply-coupon-text {
  font-family: "Poppins", sans-serif;
}

.est-promotional-banner .heading-five {
  font-family: "Fjalla One", sans-serif;
}

.est-promotional-banner .coupon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.est-promotional-banner .coupon-box {
  display: flex;
  align-items: center;
  background-color: #f9a31a;
  border: 1px solid #37506e;
  min-height: 52px;
  min-width: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media only screen and (max-width: 767px) {
  .est-promotional-banner .coupon-box {
    min-width: 300px;
    margin: 0 auto;
  }
}

.est-promotional-banner .coupon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0px;
  border-right: 1px solid #ffffff;
  width: 15%;
  text-align: center;
}

.est-promotional-banner .coupon-icon img {
  display: block;
  position: relative;
  left: 4px;
}

.est-promotional-banner .coupon-code {
  color: #ffffff;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.5px;
  width: 55%;
  padding: 0 20px;
  text-align: center;
  font-family: "Poppins", sans-serif;
}

.est-promotional-banner .copy-btn {
  text-transform: capitalize !important;
  background-color: #ffffff !important;
  color: #37506e !important;
  font-weight: 600;
  font-size: 20px;
  border-radius: 8px !important;
  padding: 6px 16px;
  margin-right: 5px;
  cursor: pointer;
  width: 30%;
  transition: 0.3s;
}

.est-promotional-banner .copy-btn:hover {
  background-color: #ff7b00 !important;
}

.est-promotional-banner .copy-btn:active {
  opacity: 0.8;
}

.est-promotional-banner .help-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  cursor: pointer;
}

.est-promotional-banner .help-icon:hover {
  background: transparent !important;
}

/* Tooltip box */
.est-promotional-banner .help-tooltip {
  position: absolute;
  bottom: 105%;
  left: 70%;
  transform: translateX(-50%) scale(0.9);
  background: #fff;
  color: #021b25;
  width: 280px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease-in-out;
  z-index: 50;
}

/* Tooltip arrow */
.est-promotional-banner .help-tooltip::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Show tooltip on hover */
.est-promotional-banner .help-icon:hover .help-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* Tooltip list styling */
.est-promotional-banner .help-tooltip ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.est-promotional-banner .help-tooltip li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  color: #253746;
  line-height: 1.4;
}

/* Custom orange icon bullet */
.est-promotional-banner .help-tooltip li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #f9a31a;
  background: white;
  margin-top: 4px;
}

/* Hover glow effect for icon */
.est-promotional-banner .help-icon img {
  transition: filter 0.3s ease;
}

.est-promotional-banner .coupon-copy-text {
  display: none;
  color: #ffffffb3;
  font-weight: 500;
  font-size: 16px;
  margin-top: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* Show animation */
.est-promotional-banner .coupon-copy-text.show {
  display: block;
  opacity: 1;
}

@media only screen and (max-width: 1024px) {
  .est-promotional-banner .coupon-wrapper {
    justify-content: center;
  }

  .est-promotional-banner .coupon-code {
    font-size: 22px;
  }
}

/* === Flotingbar timer ====== */
.floting-bar-design .coupon-area {
  max-width: min-content;
}

.countdown-wrapper {
  display: flex;
  gap: 0px;
  align-items: center;
  justify-content: center;
  width: 204px;
}

.countdown-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: transparent;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.count-number {
  width: 34px;
  height: 30px;
  font-size: 28px;
  font-weight: 700;
  color: #042853 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent !important;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.countdown-wrapper .dot{
    font-size: 28px;
    color: #042853;
    font-weight: 700;
    position: relative;
    top: -2px;
}
.count-label {
  width: 100%;
  font-size: 10px;
  text-align: center;
  line-height: 14px;
  font-weight: 400;
  margin-top: 5px;
  color: #ffffff;
  display: block;
  font-family: "Poppins", sans-serif;
}

.hide {
  display: none !important;
}

/* ============== Floting bar responsive ============ */
@media only screen and (max-width: 1600px) {

  .floting-bar-design .heading-first,
  .floting-bar-design .heading-common {
    font-size: 22px !important;
  }

  .floting-bar-design .heading-middle-one {
    font-size: 40px !important;
  }

  .floting-bar-design .flotingbar-cta {
    font-size: 16px !important;
    width: 190px !important;
  }
  .floting-bar-design .flotingbar-cta div{
     font-size: 18px !important;
  }
}

@media only screen and (max-width: 1400px) {
  .floting-bar-design .heading-middle-one {
    font-size: 36px !important;
  }

  .floting-bar-design .heading-first {
    margin-right: 0px !important;
  }

  .floting-bar-design .heading-first,
  .floting-bar-design .heading-common {
    font-size: 20px !important;
  }

  .floting-bar-design .heading-first {
    margin-right: 10px !important;
  }

  .floting-bar-design .flotingbar-cta {
    width: 10rem !important;
    font-size: 16px !important;
    height: 44px !important;
    margin-left: 0px;
  }

  .floting-bar-design .flotingbar-cta div {
    font-size: 16px !important;
  }

  .floting-bar-design .countdown-wrapper {
    gap: 0.1rem !important;
  }
.countdown-wrapper .dot {
    font-size: 20px;
  }
  .floting-bar-design .count-number {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }

  .floting-bar-design .countdown-wrapper {
    width: auto !important;
  }
  .floting-bar-design .october-sale{
    display: none !important;
  }
}




/* =========== Global Button Style ========== */

.global-button-style {
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.global-button-style:before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

.global-button-style:hover {
  transform: scale(1.03);
}

.global-button-style:hover::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}





@media only screen and (max-width: 1024px) {}


/* ====================== Footer Design =============== */

/* =============================================================================
   Job Ready Programme home page — grid visibility hooks
   -----------------------------------------------------------------------------
   Two independent channels so the category filter and the desktop/mobile cap
   can never clobber each other: assets/js/pages/job-ready-home.js owns
   --filtered-out, applyCap() owns --capped. Hook classes rather than Tailwind
   utilities because that file is not covered by tailwind.config.js's content
   globs (./assets/js/*.js is single-level), so a utility named only there
   would be purged. This stylesheet is enqueued unconditionally.
   ============================================================================= */
.cs-jrh-card-item--filtered-out,
.cs-jrh-card-item--capped {
  display: none !important;
}

/* =============================================================================
   Job Ready Programme — content grid across the laptop band
   -----------------------------------------------------------------------------
   tailwind.config.js caps `tw-container` at 1216px, which is the design grid at
   1920 (Figma 9332:31658 / 9332:34179 put every section at x=352 w=1216). The
   laptop frames draw a narrower column: 8237:71145 and 8249:126913 are both
   1280 wide with 128px margins, so the content is 1024px.

   Scoped to these two pages rather than set as the global `xl` container width,
   because no other page of the site has a laptop frame to justify narrowing it
   from 1216 to 1024 across this band.

   `#id .class` outranks Tailwind's class-level max-width, so no !important.
   ============================================================================= */
@media only screen and (min-width: 1216px) and (max-width: 1365px) {
  #cs-job-ready .tw-container,
  #cs-job-ready-home .tw-container {
    max-width: 1024px;
  }
}

/* =============================================================================
   Job Ready Programme — section rhythm
   -----------------------------------------------------------------------------
   The Figma frames separate consecutive sections by a constant gap: 56px at
   desktop and laptop (997->1053, 1772->1828, 3855->3911, 4462->4518,
   5281->5337 in 9332:31658), 48px on mobile (1105.8->1153.8, 2856.8->2904.8 in
   8240:83245). The sections themselves each shipped `tw-py-16 lg:tw-py-20`,
   which put ~160px between them.

   Owned here rather than by editing each section's utilities because three of
   them — the FAQ section, the trusted-by strip and the stats strip — are shared
   with other pages, and threading a spacing argument through partials that have
   no other reason to take one buys nothing. The scoping ids keep those
   partials' own padding everywhere else on the site; `!important` is required
   on the reset because `important: true` in tailwind.config.js compiles every
   utility with it, so id specificity alone loses. With both flagged important,
   the id-scoped selector out-ranks the bare utility class.

   Adjacent-sibling margin, not `space-y`: a section that returns early because
   it has no authored content emits no element, so it contributes no gap.

   Two opt-outs, both semantic rather than a list of section names:

   - .cs-section-band  draws its own background band. Its vertical padding is
                       the inside of that band, not inter-section space, so the
                       reset must not touch it. It still takes the rhythm
                       margin, because the band's own edge is where the gap
                       starts.
   - .cs-section-detached  is out of flow (the fixed mobile buy bar). Neither
                       rule applies; a margin would move it up the viewport.
   - .cs-section-flush  is a band the frames run against the band above it:
                       9332:31658 ends the hero and starts the trusted-by strip
                       at the same y=743, and 9332:34179 runs the hero, the
                       stats strip and the trusted-by strip as one unbroken
                       column of colour. It keeps its own padding, like any
                       band, and takes no rhythm margin.

                       Declared by the section rather than inferred from
                       position (.cs-section-band + .cs-section-band): that
                       selector is true today and would silently attach the
                       behaviour to the first pair of unrelated bands that ends
                       up adjacent. The rule names the strips' own ids as well,
                       so a strip that returns early leaves the ordinary rhythm
                       in place for whatever does follow the hero.
   ============================================================================= */
#cs-job-ready > *:not(.cs-section-band):not(.cs-section-detached),
#cs-job-ready-home > *:not(.cs-section-band):not(.cs-section-detached) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#cs-job-ready > * + *:not(.cs-section-detached),
#cs-job-ready-home > * + *:not(.cs-section-detached) {
  margin-top: 48px;
}

@media only screen and (min-width: 1024px) {
  #cs-job-ready > * + *:not(.cs-section-detached),
  #cs-job-ready-home > * + *:not(.cs-section-detached) {
    margin-top: 56px;
  }
}

/*
 * The flush case. !important for the same reason the padding reset above needs
 * it: every utility compiles with it, so a section carrying its own tw-mt-*
 * would otherwise out-rank this.
 */
#cs-job-ready > #cs-job-ready-stats.cs-section-flush,
#cs-job-ready > #cs-trusted-by.cs-section-flush,
#cs-job-ready-home > #cs-trusted-by.cs-section-flush {
  margin-top: 0 !important;
}

/* =============================================================================
   Job Ready Programme — trusted-by strip band padding
   -----------------------------------------------------------------------------
   The desktop frames draw the strip as a 254px band holding 40px above and
   below its content (9332:31658 / 9332:34179). The partial ships
   `tw-py-10 lg:tw-py-14`, which grows it to 56px from the laptop width up —
   which is what every other page drawing the strip already has, and must keep.

   .cs-section-band deliberately exempts the strip from the rhythm rule's
   padding reset, so the correction belongs in the same id-scoped block rather
   than in the shared partial. !important because `important: true` in
   tailwind.config.js compiles `lg:tw-py-14` with it, so id specificity alone
   loses.
   ============================================================================= */
#cs-job-ready > #cs-trusted-by,
#cs-job-ready-home > #cs-trusted-by {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}