/* 確保所有父層容器都不會切斷 Sticky 效果 */
#landing-main-content,
.entry-content,
.site-content {
  overflow: visible !important;
}

html,
body {
  overflow-x: visible !important;
}


:root {
  --bg-color: #FFFFFF;
  --text-color: #32413C;

  /* Navbar Styles moved out of :root */
}

/* Layout Constraints: Fix for Problem 3 */
#app-root,
.navbar-container {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Button & Interactive Element Refinement (Scale-Only Feedback): Fix for Problem 4 */
/* Neutralize default hover colors for specified elements inside landing-main-content */
/* Neutralize default hover colors for specified elements inside main-content */
#main-content button,
#main-content .tab-btn,
#main-content .tutor-btn,
#main-content .base-btn {
  transition: transform 0.2s ease-in-out !important;
}

/* Apply Scale Effect on Hover */
#main-content button:hover,
#main-content .tab-btn:hover,
#main-content .tutor-btn:hover,
#main-content .base-btn:hover,
#main-content .action-link:hover,
.sticky-footer .base-btn:hover {
  transform: scale(1.03);
  /* Note: To fully neutralize color shifts, specific existing hover rules need to be overridden. 
     For now, we implement the physical 'Press' effect requested. */
}

/* Apply Scale Effect on Active/Click */
#main-content button:active,
#main-content .tab-btn:active,
#main-content .tutor-btn:active,
#main-content .base-btn:active,
#main-content .action-link:active,
.sticky-footer .base-btn:active {
  transform: scale(0.97);
}


html {
  font-size: 15px !important;
  /* Resolution: Set a fixed baseline */
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
  /* Resolution: Ensure box-sizing is global */
}

/* Navbar Styles */
.navbar-container {
  display: flex;
  justify-content: space-between;
  /* Align logo left, nav right */
  align-items: center;
  padding: 1rem 2rem;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  /* Subtle shadow for white nav */
  width: 100%;
}

.custom-logo-link {
  display: flex;
  align-items: center;
}

.custom-logo {
  height: 36px;
  /* Constrain height to smaller size */
  width: auto;
  /* Maintain aspect ratio */
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  color: #565B66;
  /* Dark gray for text on white */
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: color 0.2s;
}

.nav-item:hover {
  color: #FFCE64;
  /* Brand highlight color */
}

/* Icons */
.nav-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.navbar-wrapper,
.navbar-wrapper>div,
.navbar-wrapper div *:not(button, .chakra-avatar, .chakra-avatar__initials, div[data-popper-placement='bottom-end']) {
  background-color: var(--bg-color);
  color: var(--text-color)
}

.navbar-wrapper div[data-popper-placement='bottom-end'] {
  border-radius: 0.375rem
}

.login-page,
.signup-page,
.reset-password-page,
.confirmation-page {
  background-color: var(--bg-color)
}

/* From 094c308365445f8e.css */
.carousel .control-arrow,
.carousel.carousel-slider .control-arrow {
  -webkit-transition: all .25s ease-in;
  -moz-transition: all .25s ease-in;
  -ms-transition: all .25s ease-in;
  -o-transition: all .25s ease-in;
  transition: all .25s ease-in;
  opacity: .4;
  filter: alpha(opacity=40);
  position: absolute;
  z-index: 2;
  top: 20px;
  background: none;
  border: 0;
  font-size: 32px;
  cursor: pointer
}

.carousel .control-arrow:focus,
.carousel .control-arrow:hover {
  opacity: 1;
  filter: alpha(opacity=100)
}

.carousel .control-arrow:before,
.carousel.carousel-slider .control-arrow:before {
  margin: 0 5px;
  display: inline-block;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  content: ""
}

.carousel .control-disabled.control-arrow {
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: inherit;
  display: none
}

.carousel .control-prev.control-arrow {
  left: 0
}

.carousel .control-prev.control-arrow:before {
  border-right: 8px solid #fff
}

.carousel .control-next.control-arrow {
  right: 0
}

.carousel .control-next.control-arrow:before {
  border-left: 8px solid #fff
}

.carousel-root {
  outline: none
}

.carousel {
  position: relative;
  width: 100%
}

.carousel * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.carousel img {
  width: 100%;
  display: inline-block;
  pointer-events: none
}

.carousel .carousel {
  position: relative
}

.carousel .control-arrow {
  outline: 0;
  border: 0;
  background: none;
  top: 50%;
  margin-top: -13px;
  font-size: 18px
}

.carousel .thumbs-wrapper {
  margin: 20px;
  overflow: hidden
}

.carousel .thumbs {
  -webkit-transition: all .15s ease-in;
  -moz-transition: all .15s ease-in;
  -ms-transition: all .15s ease-in;
  -o-transition: all .15s ease-in;
  transition: all .15s ease-in;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  list-style: none;
  white-space: nowrap
}

.carousel .thumb {
  -webkit-transition: border .15s ease-in;
  -moz-transition: border .15s ease-in;
  -ms-transition: border .15s ease-in;
  -o-transition: border .15s ease-in;
  transition: border .15s ease-in;
  display: inline-block;
  margin-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  border: 3px solid #fff;
  padding: 2px
}

.carousel .thumb:focus {
  border: 3px solid #ccc;
  outline: none
}

.carousel .thumb.selected,
.carousel .thumb:hover {
  border: 3px solid #333
}

.carousel .thumb img {
  vertical-align: top
}

.carousel.carousel-slider {
  position: relative;
  margin: 0;
  overflow: hidden
}

.carousel.carousel-slider .control-arrow {
  top: 0;
  color: #fff;
  font-size: 26px;
  bottom: 0;
  margin-top: 0;
  padding: 5px
}

.carousel.carousel-slider .control-arrow:hover {
  background: rgba(0, 0, 0, .2)
}

.carousel .slider-wrapper {
  overflow: hidden;
  margin: auto;
  width: 100%;
  -webkit-transition: height .15s ease-in;
  -moz-transition: height .15s ease-in;
  -ms-transition: height .15s ease-in;
  -o-transition: height .15s ease-in;
  transition: height .15s ease-in
}

.carousel .slider-wrapper.axis-horizontal .slider {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex
}

.carousel .slider-wrapper.axis-horizontal .slider .slide {
  flex-direction: column;
  flex-flow: column
}

.carousel .slider-wrapper.axis-vertical {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex
}

.carousel .slider-wrapper.axis-vertical .slider {
  -webkit-flex-direction: column;
  flex-direction: column
}

.carousel .slider {
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  width: 100%
}

.carousel .slider.animated {
  -webkit-transition: all .35s ease-in-out;
  -moz-transition: all .35s ease-in-out;
  -ms-transition: all .35s ease-in-out;
  -o-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out
}

.carousel .slide {
  min-width: 100%;
  margin: 0;
  position: relative;
  text-align: center
}

.carousel .slide img {
  width: 100%;
  vertical-align: top;
  border: 0
}

.carousel .slide iframe {
  display: inline-block;
  width: calc(100% - 80px);
  margin: 0 40px 40px;
  border: 0
}

.carousel .slide .legend {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -45%;
  width: 90%;
  border-radius: 10px;
  background: #000;
  color: #fff;
  padding: 10px;
  font-size: 12px;
  text-align: center;
  opacity: .25;
  -webkit-transition: opacity .35s ease-in-out;
  -moz-transition: opacity .35s ease-in-out;
  -ms-transition: opacity .35s ease-in-out;
  -o-transition: opacity .35s ease-in-out;
  transition: opacity .35s ease-in-out
}

.carousel .control-dots {
  position: absolute;
  bottom: 0;
  margin: 10px 0;
  padding: 0;
  text-align: center;
  width: 100%;
  z-index: 1
}

@media (min-width:960px) {
  .carousel .control-dots {
    bottom: 0
  }
}

.carousel .control-dots .dot {
  -webkit-transition: opacity .25s ease-in;
  -moz-transition: opacity .25s ease-in;
  -ms-transition: opacity .25s ease-in;
  -o-transition: opacity .25s ease-in;
  transition: opacity .25s ease-in;
  opacity: .3;
  filter: alpha(opacity=30);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .9);
  background: #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  cursor: pointer;
  display: inline-block;
  margin: 0 8px
}

.carousel .control-dots .dot.selected,
.carousel .control-dots .dot:hover {
  opacity: 1;
  filter: alpha(opacity=100)
}

.carousel .carousel-status {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  font-size: 10px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
  color: #fff
}

.carousel:hover .slide .legend {
  opacity: 1
}

/* From 6e69174d2e237432.css */
@supports(padding-bottom:constant(safe-area-inset-bottom)) {
  .theme-provider-root :root {
    --safe-area-inset-bottom: constant(safe-area-inset-bottom)
  }
}

@supports(padding-bottom:env(safe-area-inset-bottom)) {
  .theme-provider-root :root {
    --safe-area-inset-bottom: env(safe-area-inset-bottom)
  }
}

.theme-provider-root .responsive-table th {
  text-align: left
}

@media only screen and (max-width:48em) {

  .theme-provider-root .responsive-table table,
  .theme-provider-root .responsive-table tbody,
  .theme-provider-root .responsive-table td,
  .theme-provider-root .responsive-table th,
  .theme-provider-root .responsive-table thead,
  .theme-provider-root .responsive-table tr {
    display: block
  }

  .theme-provider-root .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px
  }

  .theme-provider-root .responsive-table th {
    font-size: .5rem
  }

  .theme-provider-root .responsive-table td {
    border: none;
    position: relative;
    padding: 8px 12px
  }

  .theme-provider-root .responsive-table tbody>tr:last-child {
    padding-bottom: 12px;
    margin-bottom: 12px
  }

  .theme-provider-root .responsive-table tbody>tr+tr {
    border-top: 1px solid #ccc;
    margin-top: 12px
  }

  .theme-provider-root .responsive-table.lineitems-table td {
    padding: 12px 0 0
  }
}

@supports(padding:max(0px)) {

  .theme-provider-root .course-main-wrapper div.sticky-footer:has(.sticky-button),
  .theme-provider-root .course-main-wrapper+div.sticky-footer:has(.sticky-button) {
    padding: 12px max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    z-index: 100
  }
}

.theme-provider-root .custom-page .sticky-button {
  bottom: calc(constant(safe-area-inset-bottom)) !important;
  bottom: calc(env(safe-area-inset-bottom)) !important;
  border-radius: 20px;
  width: 95%;
  left: 54% !important;
  transform: translateX(-50%);
  padding: 1rem;
  position: fixed
}

.theme-provider-root .by-kaik,
.theme-provider-root .by-kaik a {
  color: #999
}

.theme-provider-root .by-kaik a:hover {
  text-decoration: underline
}

.theme-provider-root .navbar-burger {
  display: block
}

.theme-provider-root .is-main-content {
  background-color: #f5f6f7
}

.theme-provider-root .card-img-top {
  width: 100%;
  object-fit: contain
}

.theme-provider-root form .is-error,
.theme-provider-root form .is-error:focus {
  border-color: red
}

.theme-provider-root .chakra-avatar img {
  background-color: #fff;
  border-radius: 50%
}

/* Extracted from HTML */
.nprogress {
  pointer-events: none
}

.nprogress .bar {
  background: #32413C;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px
}

.nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  -webkit-box-shadow: 0 0 10px #32413C, 0 0 5px #32413C;
  -moz-box-shadow: 0 0 10px #32413C, 0 0 5px #32413C;
  box-shadow: 0 0 10px #32413C, 0 0 5px #32413C;
  opacity: 1;
  -webkit-transform: rotate(3deg)translate(0px, -4px);
  -moz-transform: rotate(3deg)translate(0px, -4px);
  -ms-transform: rotate(3deg)translate(0px, -4px);
  -o-transform: rotate(3deg)translate(0px, -4px);
  transform: rotate(3deg)translate(0px, -4px)
}

.nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 15px;
  right: 15px
}

.nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #32413C;
  border-left-color: #32413C;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  -moz-animation: nprogress-spinner 400ms linear infinite;
  -o-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite
}

:host,
:root,
[data-theme] {
  --chakra-ring-inset: var(--chakra-empty,
      /*!*/
      /*!*/
    );
  --chakra-ring-offset-width: 0px;
  --chakra-ring-offset-color: #fff;
  --chakra-ring-color: rgba(66, 153, 225, 0.6);
  --chakra-ring-offset-shadow: 0 0 #0000;
  --chakra-ring-shadow: 0 0 #0000;
  --chakra-space-x-reverse: 0;
  --chakra-space-y-reverse: 0;
  --chakra-colors-transparent: transparent;
  --chakra-colors-current: currentColor;
  --chakra-colors-black: #000000;
  --chakra-colors-white: #FFFFFF;
  --chakra-colors-whiteAlpha-50: rgba(255, 255, 255, 0.04);
  --chakra-colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
  --chakra-colors-whiteAlpha-200: rgba(255, 255, 255, 0.08);
  --chakra-colors-whiteAlpha-300: rgba(255, 255, 255, 0.16);
  --chakra-colors-whiteAlpha-400: rgba(255, 255, 255, 0.24);
  --chakra-colors-whiteAlpha-500: rgba(255, 255, 255, 0.36);
  --chakra-colors-whiteAlpha-600: rgba(255, 255, 255, 0.48);
  --chakra-colors-whiteAlpha-700: rgba(255, 255, 255, 0.64);
  --chakra-colors-whiteAlpha-800: rgba(255, 255, 255, 0.80);
  --chakra-colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
  --chakra-colors-blackAlpha-50: rgba(0, 0, 0, 0.04);
  --chakra-colors-blackAlpha-100: rgba(0, 0, 0, 0.06);
  --chakra-colors-blackAlpha-200: rgba(0, 0, 0, 0.08);
  --chakra-colors-blackAlpha-300: rgba(0, 0, 0, 0.16);
  --chakra-colors-blackAlpha-400: rgba(0, 0, 0, 0.24);
  --chakra-colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
  --chakra-colors-blackAlpha-600: rgba(0, 0, 0, 0.48);
  --chakra-colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
  --chakra-colors-blackAlpha-800: rgba(0, 0, 0, 0.80);
  --chakra-colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
  --chakra-colors-gray-10: #F7F7F7;
  --chakra-colors-gray-50: #F0F1F2;
  --chakra-colors-gray-100: #E1E3E6;
  --chakra-colors-gray-150: #D3D5D9;
  --chakra-colors-gray-200: #C4C7CC;
  --chakra-colors-gray-300: #A6AAB3;
  --chakra-colors-gray-400: #898E99;
  --chakra-colors-gray-500: #6B7280;
  --chakra-colors-gray-600: #565B66;
  --chakra-colors-gray-700: #40444D;
  --chakra-colors-gray-800: #2B2E33;
  --chakra-colors-gray-850: #202226;
  --chakra-colors-gray-900: #15171A;
  --chakra-colors-red-50: #FFF5F5;
  --chakra-colors-red-100: #FED7D7;
  --chakra-colors-red-200: #FEB2B2;
  --chakra-colors-red-300: #FC8181;
  --chakra-colors-red-400: #F56565;
  --chakra-colors-red-500: #E53E3E;
  --chakra-colors-red-600: #C53030;
  --chakra-colors-red-700: #9B2C2C;
  --chakra-colors-red-800: #822727;
  --chakra-colors-red-900: #63171B;
  --chakra-colors-orange-50: #FFFAF0;
  --chakra-colors-orange-100: #FEEBC8;
  --chakra-colors-orange-200: #FBD38D;
  --chakra-colors-orange-300: #F6AD55;
  --chakra-colors-orange-400: #ED8936;
  --chakra-colors-orange-500: #DD6B20;
  --chakra-colors-orange-600: #C05621;
  --chakra-colors-orange-700: #9C4221;
  --chakra-colors-orange-800: #7B341E;
  --chakra-colors-orange-900: #652B19;
  --chakra-colors-yellow-50: #FFFFF0;
  --chakra-colors-yellow-100: #FEFCBF;
  --chakra-colors-yellow-200: #FAF089;
  --chakra-colors-yellow-300: #F6E05E;
  --chakra-colors-yellow-400: #ECC94B;
  --chakra-colors-yellow-500: #D69E2E;
  --chakra-colors-yellow-600: #B7791F;
  --chakra-colors-yellow-700: #975A16;
  --chakra-colors-yellow-800: #744210;
  --chakra-colors-yellow-900: #5F370E;
  --chakra-colors-green-50: #F0FFF4;
  --chakra-colors-green-100: #C6F6D5;
  --chakra-colors-green-200: #9AE6B4;
  --chakra-colors-green-300: #68D391;
  --chakra-colors-green-400: #48BB78;
  --chakra-colors-green-500: #38A169;
  --chakra-colors-green-600: #2F855A;
  --chakra-colors-green-700: #276749;
  --chakra-colors-green-800: #22543D;
  --chakra-colors-green-900: #1C4532;
  --chakra-colors-teal-50: #E6FFFA;
  --chakra-colors-teal-100: #B2F5EA;
  --chakra-colors-teal-200: #81E6D9;
  --chakra-colors-teal-300: #4FD1C5;
  --chakra-colors-teal-400: #38B2AC;
  --chakra-colors-teal-500: #319795;
  --chakra-colors-teal-600: #2C7A7B;
  --chakra-colors-teal-700: #285E61;
  --chakra-colors-teal-800: #234E52;
  --chakra-colors-teal-900: #1D4044;
  --chakra-colors-blue-50: #ebf8ff;
  --chakra-colors-blue-100: #bee3f8;
  --chakra-colors-blue-200: #90cdf4;
  --chakra-colors-blue-300: #63b3ed;
  --chakra-colors-blue-400: #4299e1;
  --chakra-colors-blue-500: #3182ce;
  --chakra-colors-blue-600: #2b6cb0;
  --chakra-colors-blue-700: #2c5282;
  --chakra-colors-blue-800: #2a4365;
  --chakra-colors-blue-900: #1A365D;
  --chakra-colors-cyan-50: #EDFDFD;
  --chakra-colors-cyan-100: #C4F1F9;
  --chakra-colors-cyan-200: #9DECF9;
  --chakra-colors-cyan-300: #76E4F7;
  --chakra-colors-cyan-400: #0BC5EA;
  --chakra-colors-cyan-500: #00B5D8;
  --chakra-colors-cyan-600: #00A3C4;
  --chakra-colors-cyan-700: #0987A0;
  --chakra-colors-cyan-800: #086F83;
  --chakra-colors-cyan-900: #065666;
  --chakra-colors-purple-50: #FAF5FF;
  --chakra-colors-purple-100: #E9D8FD;
  --chakra-colors-purple-200: #D6BCFA;
  --chakra-colors-purple-300: #B794F4;
  --chakra-colors-purple-400: #9F7AEA;
  --chakra-colors-purple-500: #805AD5;
  --chakra-colors-purple-600: #6B46C1;
  --chakra-colors-purple-700: #553C9A;
  --chakra-colors-purple-800: #44337A;
  --chakra-colors-purple-900: #322659;
  --chakra-colors-pink-50: #FFF5F7;
  --chakra-colors-pink-100: #FED7E2;
  --chakra-colors-pink-200: #FBB6CE;
  --chakra-colors-pink-300: #F687B3;
  --chakra-colors-pink-400: #ED64A6;
  --chakra-colors-pink-500: #D53F8C;
  --chakra-colors-pink-600: #B83280;
  --chakra-colors-pink-700: #97266D;
  --chakra-colors-pink-800: #702459;
  --chakra-colors-pink-900: #521B41;
  --chakra-colors-linkedin-50: #E8F4F9;
  --chakra-colors-linkedin-100: #CFEDFB;
  --chakra-colors-linkedin-200: #9BDAF3;
  --chakra-colors-linkedin-300: #68C7EC;
  --chakra-colors-linkedin-400: #34B3E4;
  --chakra-colors-linkedin-500: #00A0DC;
  --chakra-colors-linkedin-600: #008CC9;
  --chakra-colors-linkedin-700: #0077B5;
  --chakra-colors-linkedin-800: #005E93;
  --chakra-colors-linkedin-900: #004471;
  --chakra-colors-facebook-50: #E8F4F9;
  --chakra-colors-facebook-100: #D9DEE9;
  --chakra-colors-facebook-200: #B7C2DA;
  --chakra-colors-facebook-300: #6482C0;
  --chakra-colors-facebook-400: #4267B2;
  --chakra-colors-facebook-500: #385898;
  --chakra-colors-facebook-600: #314E89;
  --chakra-colors-facebook-700: #29487D;
  --chakra-colors-facebook-800: #223B67;
  --chakra-colors-facebook-900: #1E355B;
  --chakra-colors-messenger-50: #D0E6FF;
  --chakra-colors-messenger-100: #B9DAFF;
  --chakra-colors-messenger-200: #A2CDFF;
  --chakra-colors-messenger-300: #7AB8FF;
  --chakra-colors-messenger-400: #2E90FF;
  --chakra-colors-messenger-500: #0078FF;
  --chakra-colors-messenger-600: #0063D1;
  --chakra-colors-messenger-700: #0052AC;
  --chakra-colors-messenger-800: #003C7E;
  --chakra-colors-messenger-900: #002C5C;
  --chakra-colors-whatsapp-50: #dffeec;
  --chakra-colors-whatsapp-100: #b9f5d0;
  --chakra-colors-whatsapp-200: #90edb3;
  --chakra-colors-whatsapp-300: #65e495;
  --chakra-colors-whatsapp-400: #3cdd78;
  --chakra-colors-whatsapp-500: #22c35e;
  --chakra-colors-whatsapp-600: #179848;
  --chakra-colors-whatsapp-700: #0c6c33;
  --chakra-colors-whatsapp-800: #01421c;
  --chakra-colors-whatsapp-900: #001803;
  --chakra-colors-twitter-50: #E5F4FD;
  --chakra-colors-twitter-100: #C8E9FB;
  --chakra-colors-twitter-200: #A8DCFA;
  --chakra-colors-twitter-300: #83CDF7;
  --chakra-colors-twitter-400: #57BBF5;
  --chakra-colors-twitter-500: #1DA1F2;
  --chakra-colors-twitter-600: #1A94DA;
  --chakra-colors-twitter-700: #1681BF;
  --chakra-colors-twitter-800: #136B9E;
  --chakra-colors-twitter-900: #0D4D71;
  --chakra-colors-telegram-50: #E3F2F9;
  --chakra-colors-telegram-100: #C5E4F3;
  --chakra-colors-telegram-200: #A2D4EC;
  --chakra-colors-telegram-300: #7AC1E4;
  --chakra-colors-telegram-400: #47A9DA;
  --chakra-colors-telegram-500: #0088CC;
  --chakra-colors-telegram-600: #007AB8;
  --chakra-colors-telegram-700: #006BA1;
  --chakra-colors-telegram-800: #005885;
  --chakra-colors-telegram-900: #003F5E;
  --chakra-colors-brand-primaryColor: #FFCE64;
  --chakra-colors-brand-titleColor: #000000;
  --chakra-colors-brand-secondaryTitleColor: #565B66;
  --chakra-colors-brand-colorMode: light;
  --chakra-colors-brand-secondaryColor: #FFF;
  --chakra-colors-brand-backgroundColor: #fff;
  --chakra-colors-brand-primary-50: #46544f;
  --chakra-colors-brand-primary-100: #5a6662;
  --chakra-colors-brand-primary-200: #848d8a;
  --chakra-colors-brand-primary-300: #adb3b1;
  --chakra-colors-brand-primary-400: #d6d9d8;
  --chakra-colors-brand-primary-500: #FFCE64;
  --chakra-colors-brand-primary-600: #32413C;
  --chakra-colors-brand-primary-700: #19201e;
  --chakra-colors-brand-primary-800: #0f1312;
  --chakra-colors-brand-primary-900: #040605;
  --chakra-colors-brand-orange-500: #F97316;
  --chakra-colors-brand-defaultBlue-50: #1988ff;
  --chakra-colors-brand-defaultBlue-100: #3295ff;
  --chakra-colors-brand-defaultBlue-200: #66afff;
  --chakra-colors-brand-defaultBlue-300: #99caff;
  --chakra-colors-brand-defaultBlue-400: #cce4ff;
  --chakra-colors-brand-defaultBlue-500: #007bff;
  --chakra-colors-brand-defaultBlue-600: #0056b2;
  --chakra-colors-brand-defaultBlue-700: #003d7f;
  --chakra-colors-brand-defaultBlue-800: #00244c;
  --chakra-colors-brand-defaultBlue-900: #000c19;
  --chakra-borders-none: 0;
  --chakra-borders-1px: 1px solid;
  --chakra-borders-2px: 2px solid;
  --chakra-borders-4px: 4px solid;
  --chakra-borders-8px: 8px solid;
  --chakra-fonts-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --chakra-fonts-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --chakra-fonts-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --chakra-fontSizes-3xs: 0.45rem;
  --chakra-fontSizes-2xs: 0.625rem;
  --chakra-fontSizes-xs: 0.75rem;
  --chakra-fontSizes-sm: 0.875rem;
  --chakra-fontSizes-md: 1rem;
  --chakra-fontSizes-lg: 1.125rem;
  --chakra-fontSizes-xl: 1.25rem;
  --chakra-fontSizes-2xl: 1.5rem;
  --chakra-fontSizes-3xl: 1.875rem;
  --chakra-fontSizes-4xl: 2.25rem;
  --chakra-fontSizes-5xl: 3rem;
  --chakra-fontSizes-6xl: 3.75rem;
  --chakra-fontSizes-7xl: 4.5rem;
  --chakra-fontSizes-8xl: 6rem;
  --chakra-fontSizes-9xl: 8rem;
  --chakra-fontWeights-hairline: 100;
  --chakra-fontWeights-thin: 200;
  --chakra-fontWeights-light: 300;
  --chakra-fontWeights-normal: 400;
  --chakra-fontWeights-medium: 500;
  --chakra-fontWeights-semibold: 600;
  --chakra-fontWeights-bold: 700;
  --chakra-fontWeights-extrabold: 800;
  --chakra-fontWeights-black: 900;
  --chakra-letterSpacings-tighter: -0.05em;
  --chakra-letterSpacings-tight: -0.025em;
  --chakra-letterSpacings-normal: 0;
  --chakra-letterSpacings-wide: 0.025em;
  --chakra-letterSpacings-wider: 0.05em;
  --chakra-letterSpacings-widest: 0.1em;
  --chakra-lineHeights-3: .75rem;
  --chakra-lineHeights-4: 1rem;
  --chakra-lineHeights-5: 1.25rem;
  --chakra-lineHeights-6: 1.5rem;
  --chakra-lineHeights-7: 1.75rem;
  --chakra-lineHeights-8: 2rem;
  --chakra-lineHeights-9: 2.25rem;
  --chakra-lineHeights-10: 2.5rem;
  --chakra-lineHeights-normal: normal;
  --chakra-lineHeights-none: 1;
  --chakra-lineHeights-shorter: 1.25;
  --chakra-lineHeights-short: 1.375;
  --chakra-lineHeights-base: 1.5;
  --chakra-lineHeights-tall: 1.625;
  --chakra-lineHeights-taller: 2;
  --chakra-radii-none: 0;
  --chakra-radii-sm: 0.125rem;
  --chakra-radii-base: 0.25rem;
  --chakra-radii-md: 0.375rem;
  --chakra-radii-lg: 0.5rem;
  --chakra-radii-xl: 0.75rem;
  --chakra-radii-2xl: 1rem;
  --chakra-radii-3xl: 1.5rem;
  --chakra-radii-full: 9999px;
  --chakra-space-1: 0.25rem;
  --chakra-space-2: 0.5rem;
  --chakra-space-3: 0.75rem;
  --chakra-space-4: 1rem;
  --chakra-space-5: 1.25rem;
  --chakra-space-6: 1.5rem;
  --chakra-space-7: 1.75rem;
  --chakra-space-8: 2rem;
  --chakra-space-9: 2.25rem;
  --chakra-space-10: 2.5rem;
  --chakra-space-12: 3rem;
  --chakra-space-14: 3.5rem;
  --chakra-space-16: 4rem;
  --chakra-space-20: 5rem;
  --chakra-space-24: 6rem;
  --chakra-space-28: 7rem;
  --chakra-space-32: 8rem;
  --chakra-space-36: 9rem;
  --chakra-space-40: 10rem;
  --chakra-space-44: 11rem;
  --chakra-space-48: 12rem;
  --chakra-space-52: 13rem;
  --chakra-space-56: 14rem;
  --chakra-space-60: 15rem;
  --chakra-space-64: 16rem;
  --chakra-space-72: 18rem;
  --chakra-space-80: 20rem;
  --chakra-space-96: 24rem;
  --chakra-space-px: 1px;
  --chakra-space-0-5: 0.125rem;
  --chakra-space-1-5: 0.375rem;
  --chakra-space-2-5: 0.625rem;
  --chakra-space-3-5: 0.875rem;
  --chakra-shadows-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --chakra-shadows-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --chakra-shadows-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --chakra-shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --chakra-shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --chakra-shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --chakra-shadows-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --chakra-shadows-outline: 0 0 0 3px rgba(66, 153, 225, 0.6);
  --chakra-shadows-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --chakra-shadows-none: none;
  --chakra-shadows-dark-lg: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px;
  --chakra-sizes-1: 0.25rem;
  --chakra-sizes-2: 0.5rem;
  --chakra-sizes-3: 0.75rem;
  --chakra-sizes-4: 1rem;
  --chakra-sizes-5: 1.25rem;
  --chakra-sizes-6: 1.5rem;
  --chakra-sizes-7: 1.75rem;
  --chakra-sizes-8: 2rem;
  --chakra-sizes-9: 2.25rem;
  --chakra-sizes-10: 2.5rem;
  --chakra-sizes-12: 3rem;
  --chakra-sizes-14: 3.5rem;
  --chakra-sizes-16: 4rem;
  --chakra-sizes-20: 5rem;
  --chakra-sizes-24: 6rem;
  --chakra-sizes-28: 7rem;
  --chakra-sizes-32: 8rem;
  --chakra-sizes-36: 9rem;
  --chakra-sizes-40: 10rem;
  --chakra-sizes-44: 11rem;
  --chakra-sizes-48: 12rem;
  --chakra-sizes-52: 13rem;
  --chakra-sizes-56: 14rem;
  --chakra-sizes-60: 15rem;
  --chakra-sizes-64: 16rem;
  --chakra-sizes-72: 18rem;
  --chakra-sizes-80: 20rem;
  --chakra-sizes-96: 24rem;
  --chakra-sizes-px: 1px;
  --chakra-sizes-0-5: 0.125rem;
  --chakra-sizes-1-5: 0.375rem;
  --chakra-sizes-2-5: 0.625rem;
  --chakra-sizes-3-5: 0.875rem;
  --chakra-sizes-max: max-content;
  --chakra-sizes-min: min-content;
  --chakra-sizes-full: 100%;
  --chakra-sizes-3xs: 14rem;
  --chakra-sizes-2xs: 16rem;
  --chakra-sizes-xs: 20rem;
  --chakra-sizes-sm: 24rem;
  --chakra-sizes-md: 28rem;
  --chakra-sizes-lg: 32rem;
  --chakra-sizes-xl: 36rem;
  --chakra-sizes-2xl: 42rem;
  --chakra-sizes-3xl: 48rem;
  --chakra-sizes-4xl: 56rem;
  --chakra-sizes-5xl: 64rem;
  --chakra-sizes-6xl: 72rem;
  --chakra-sizes-7xl: 80rem;
  --chakra-sizes-8xl: 90rem;
  --chakra-sizes-prose: 60ch;
  --chakra-sizes-container-sm: 640px;
  --chakra-sizes-container-md: 768px;
  --chakra-sizes-container-lg: 1024px;
  --chakra-sizes-container-xl: 1280px;
  --chakra-zIndices-hide: -1;
  --chakra-zIndices-auto: auto;
  --chakra-zIndices-base: 0;
  --chakra-zIndices-docked: 10;
  --chakra-zIndices-dropdown: 1000;
  --chakra-zIndices-sticky: 1100;
  --chakra-zIndices-banner: 1200;
  --chakra-zIndices-overlay: 1300;
  --chakra-zIndices-modal: 1400;
  --chakra-zIndices-popover: 1500;
  --chakra-zIndices-skipLink: 1600;
  --chakra-zIndices-toast: 1700;
  --chakra-zIndices-tooltip: 1800;
  --chakra-transition-property-common: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  --chakra-transition-property-colors: background-color, border-color, color, fill, stroke;
  --chakra-transition-property-dimensions: width, height;
  --chakra-transition-property-position: left, right, top, bottom;
  --chakra-transition-property-background: background-color, background-image, background-position;
  --chakra-transition-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --chakra-transition-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --chakra-transition-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --chakra-transition-duration-ultra-fast: 50ms;
  --chakra-transition-duration-faster: 100ms;
  --chakra-transition-duration-fast: 150ms;
  --chakra-transition-duration-normal: 200ms;
  --chakra-transition-duration-slow: 300ms;
  --chakra-transition-duration-slower: 400ms;
  --chakra-transition-duration-ultra-slow: 500ms;
  --chakra-blur-none: 0;
  --chakra-blur-sm: 4px;
  --chakra-blur-base: 8px;
  --chakra-blur-md: 12px;
  --chakra-blur-lg: 16px;
  --chakra-blur-xl: 24px;
  --chakra-blur-2xl: 40px;
  --chakra-blur-3xl: 64px;
  --chakra-breakpoints-base: 0em;
  --chakra-breakpoints-sm: 30em;
  --chakra-breakpoints-md: 48em;
  --chakra-breakpoints-lg: 62em;
  --chakra-breakpoints-xl: 80em;
  --chakra-breakpoints-2xl: 96em;
}

.chakra-ui-light :host:not([data-theme]),
.chakra-ui-light :root:not([data-theme]),
.chakra-ui-light [data-theme]:not([data-theme]),
[data-theme=light] :host:not([data-theme]),
[data-theme=light] :root:not([data-theme]),
[data-theme=light] [data-theme]:not([data-theme]),
:host[data-theme=light],
:root[data-theme=light],
[data-theme][data-theme=light] {
  --chakra-colors-chakra-body-text: var(--chakra-colors-gray-800);
  --chakra-colors-chakra-body-bg: var(--chakra-colors-white);
  --chakra-colors-chakra-border-color: var(--chakra-colors-gray-200);
  --chakra-colors-chakra-inverse-text: var(--chakra-colors-white);
  --chakra-colors-chakra-subtle-bg: var(--chakra-colors-gray-100);
  --chakra-colors-chakra-subtle-text: var(--chakra-colors-gray-600);
  --chakra-colors-chakra-placeholder-color: var(--chakra-colors-gray-500);
}

.chakra-ui-dark :host:not([data-theme]),
.chakra-ui-dark :root:not([data-theme]),
.chakra-ui-dark [data-theme]:not([data-theme]),
[data-theme=dark] :host:not([data-theme]),
[data-theme=dark] :root:not([data-theme]),
[data-theme=dark] [data-theme]:not([data-theme]),
:host[data-theme=dark],
:root[data-theme=dark],
[data-theme][data-theme=dark] {
  --chakra-colors-chakra-body-text: var(--chakra-colors-whiteAlpha-900);
  --chakra-colors-chakra-body-bg: var(--chakra-colors-gray-800);
  --chakra-colors-chakra-border-color: var(--chakra-colors-whiteAlpha-300);
  --chakra-colors-chakra-inverse-text: var(--chakra-colors-gray-800);
  --chakra-colors-chakra-subtle-bg: var(--chakra-colors-gray-700);
  --chakra-colors-chakra-subtle-text: var(--chakra-colors-gray-400);
  --chakra-colors-chakra-placeholder-color: var(--chakra-colors-whiteAlpha-400);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  font-feature-settings: "kern";
}

:where(*, *::before, *::after) {
  border-width: 0;
  border-style: solid;
  box-sizing: border-box;
  word-wrap: break-word;
}

main {
  display: block;
}

hr {
  border-top-width: 1px;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

:where(pre, code, kbd, samp) {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

:where(b, strong) {
  font-weight: bold;
}

small {
  font-size: 80%;
}

:where(sub, sup) {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

:where(button, input, optgroup, select, textarea) {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

:where(button, input) {
  overflow: visible;
}

:where(button, select) {
  text-transform: none;
}

:where(button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner) {
  border-style: none;
  padding: 0;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

:where([type="checkbox"], [type="radio"]) {
  box-sizing: border-box;
  padding: 0;
}

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

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

input[type="search"] {
  appearance: textfield;
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none !important;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: -webkit-box;
  display: -webkit-list-item;
  display: -ms-list-itembox;
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

:where(blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre) {
  margin: 0;
}

button {
  background: transparent;
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

:where(ol, ul) {
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

:where(button, [role="button"]) {
  cursor: pointer;
}

button::-moz-focus-inner {
  border: 0 !important;
}

table {
  border-collapse: collapse;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}

:where(button, input, optgroup, select, textarea) {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, video) {
  max-width: 100%;
  height: auto;
}

[data-js-focus-visible] :focus:not([data-focus-visible-added]):not([data-focus-visible-disabled]) {
  outline: none;
  box-shadow: none;
}

select::-ms-expand {
  display: none;
}

:root,
:host {
  --chakra-vh: 100vh;
}

@supports (height: -webkit-fill-available) {

  :root,
  :host {
    --chakra-vh: -webkit-fill-available;
  }
}

@supports (height: -moz-fill-available) {

  :root,
  :host {
    --chakra-vh: -moz-fill-available;
  }
}

@supports (height: 100dvh) {

  :root,
  :host {
    --chakra-vh: 100dvh;
  }
}

body {
  font-family: var(--chakra-fonts-body);
  color: var(--chakra-colors-chakra-body-text);
  background: #fff;
  transition-property: background-color;
  transition-duration: var(--chakra-transition-duration-normal);
  line-height: var(--chakra-lineHeights-base);
}

*::-webkit-input-placeholder {
  color: var(--chakra-colors-chakra-placeholder-color);
}

*::-moz-placeholder {
  color: var(--chakra-colors-chakra-placeholder-color);
}

*:-ms-input-placeholder {
  color: var(--chakra-colors-chakra-placeholder-color);
}

*::placeholder {
  color: var(--chakra-colors-chakra-placeholder-color);
}

*,
*::before,
::after {
  border-color: var(--chakra-colors-gray-100);
}

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #32413C;

  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #32413C, 0 0 5px #32413C;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  bottom: auto;
  right: 15px;
  left: auto;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #32413C;
  border-left-color: #32413C;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }

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

.css-13kivgx {
  z-index: 20;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: var(--chakra-sizes-full);
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen and (min-width: 48em) {
  .css-13kivgx {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
  }
}

.css-16yalih {
  background: #FFF;
}

.css-syhgrc {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #FFF;
  color: #565B66;
  min-height: var(--chakra-sizes-16);
  max-width: 100%;
  padding-left: var(--chakra-space-3);
  padding-right: var(--chakra-space-1);
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: var(--chakra-space-3);
}

@media screen and (min-width: 30em) {
  .css-syhgrc {
    gap: var(--chakra-space-5);
  }
}

@media screen and (min-width: 48em) {
  .css-syhgrc {
    padding-left: var(--chakra-space-10);
    padding-right: var(--chakra-space-8);
  }
}

.css-h4l6u0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: start;
  justify-content: start;
  width: 100%;
  margin-right: auto;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (min-width: 62em) {
  .css-h4l6u0 {
    width: auto;
  }
}

.css-hn1hi0 {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  color: inherit;
}

.css-hn1hi0:hover,
.css-hn1hi0[data-hover] {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.css-hn1hi0:focus-visible,
.css-hn1hi0[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.css-hn1hi0:focus,
.css-hn1hi0[data-focus] {
  box-shadow: var(--chakra-shadows-none);
}

.css-tvr4qf {
  width: auto;
  max-height: var(--chakra-sizes-12);
}

.css-u6wubg {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

@media screen and (min-width: 62em) {
  .css-u6wubg {
    display: none;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
}

.css-n82a7a {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline: 2px solid transparent;
  outline-offset: 2px;
  line-height: 1.2;
  border-radius: var(--chakra-radii-md);
  font-weight: var(--chakra-fontWeights-semibold);
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  height: var(--chakra-sizes-12);
  min-width: var(--chakra-sizes-12);
  font-size: var(--chakra-fontSizes-lg);
  -webkit-padding-start: var(--chakra-space-6);
  padding-inline-start: var(--chakra-space-6);
  -webkit-padding-end: var(--chakra-space-6);
  padding-inline-end: var(--chakra-space-6);
  padding: 0px;
  color: #565B66;
}

.css-n82a7a:focus-visible,
.css-n82a7a[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.css-n82a7a:disabled,
.css-n82a7a[disabled],
.css-n82a7a[aria-disabled=true],
.css-n82a7a[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--chakra-shadows-none);
}

.css-n82a7a:active,
.css-n82a7a[data-active] {
  background: var(--chakra-colors-gray-200);
}

.css-n82a7a:hover,
.css-n82a7a[data-hover] {
  background: var(--chakra-colors-transparent);
}

.css-onkibi {
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
  vertical-align: middle;
}

.css-8qgqc0 {
  display: none;
}

@media screen and (min-width: 62em) {
  .css-8qgqc0 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

.css-1ievikz {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 0px;
}

.css-19t2ho9 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.css-1jorqgp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.css-qvkail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-padding-start: var(--chakra-space-2);
  padding-inline-start: var(--chakra-space-2);
  -webkit-padding-end: var(--chakra-space-2);
  padding-inline-end: var(--chakra-space-2);
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  font-size: var(--chakra-fontSizes-md);
  font-weight: 500;
  color: #565B66;
}

.css-qvkail:hover,
.css-qvkail[data-hover] {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.css-qvkail:focus,
.css-qvkail[data-focus] {
  box-shadow: var(--chakra-shadows-none);
}

.css-5fam4c {
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: #565B66;
  margin-left: calc(var(--chakra-space-1-5) * -1);
  margin-right: var(--chakra-space-1-5);
}

.css-1qq679y {
  z-index: 10;
}

.css-1c9mrcf {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  --popper-bg: var(--chakra-colors-white);
  --popper-arrow-bg: var(--popper-bg);
  --popper-arrow-shadow-color: var(--chakra-colors-gray-200);
  width: 216px;
  border-color: inherit;
  border-radius: var(--chakra-radii-md);
  z-index: inherit;
  background: #FFF;
  border: var(--chakra-borders-none);
  padding: var(--chakra-space-2);
  box-shadow: var(--chakra-shadows-md);
}

.chakra-ui-dark .css-1c9mrcf:not([data-theme]),
[data-theme=dark] .css-1c9mrcf:not([data-theme]),
.css-1c9mrcf[data-theme=dark] {
  --popper-bg: var(--chakra-colors-gray-700);
  --popper-arrow-shadow-color: var(--chakra-colors-whiteAlpha-300);
}

.css-1c9mrcf:focus-visible,
.css-1c9mrcf[data-focus-visible] {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--chakra-shadows-outline);
}

.css-zdx2uo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0px;
}

.css-1fhv80r {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  display: block;
  -webkit-padding-start: var(--chakra-space-3);
  padding-inline-start: var(--chakra-space-3);
  -webkit-padding-end: var(--chakra-space-3);
  padding-inline-end: var(--chakra-space-3);
  padding-top: var(--chakra-space-2);
  padding-bottom: var(--chakra-space-2);
  border-radius: var(--chakra-radii-md);
  color: #565B66;
}

.css-1fhv80r:focus-visible,
.css-1fhv80r[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.css-1fhv80r:hover,
.css-1fhv80r[data-hover] {
  background-color: var(--chakra-colors-gray-200);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.css-1fhv80r:focus,
.css-1fhv80r[data-focus] {
  box-shadow: var(--chakra-shadows-none);
}

.css-1bu2sz6 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.css-1bu2sz6:hover,
.css-1bu2sz6[data-hover] {
  border-color: var(--chakra-colors-brand-primaryColor);
  border-bottom-width: 5px;
  padding-top: 5px;
  -webkit-transition: 300ms;
  transition: 300ms;
}

.css-3waawt {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-padding-start: var(--chakra-space-2);
  padding-inline-start: var(--chakra-space-2);
  -webkit-padding-end: var(--chakra-space-2);
  padding-inline-end: var(--chakra-space-2);
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  font-size: var(--chakra-fontSizes-md);
  font-weight: 500;
  color: #565B66;
}

.css-3waawt:focus-visible,
.css-3waawt[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.css-3waawt:hover,
.css-3waawt[data-hover] {
  color: var(--chakra-colors-brand-primaryColor);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.css-3waawt:focus,
.css-3waawt[data-focus] {
  box-shadow: var(--chakra-shadows-none);
}

.custom-style-28 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.css-jnf4e3 {
  color: var(--chakra-colors-brand-secondaryTitleColor);
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  border-color: var(--chakra-colors-brand-secondaryTitleColor);
  width: var(--chakra-sizes-8);
  height: var(--chakra-sizes-8);
  line-height: 0;
}

.css-jnf4e3:hover,
.css-jnf4e3[data-hover] {
  color: var(--chakra-colors-brand-primaryColor);
  border-color: var(--chakra-colors-brand-primaryColor);
}

.css-v5w1at {
  width: 18px;
  height: 18px;
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
}

.css-dops9q {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline: 2px solid transparent;
  outline-offset: 2px;
  line-height: 1.2;
  border-radius: var(--chakra-radii-md);
  font-weight: var(--chakra-fontWeights-semibold);
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  height: var(--chakra-sizes-10);
  min-width: var(--chakra-sizes-10);
  font-size: var(--chakra-fontSizes-md);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  background: var(--chakra-colors-brand-primary-500);
  color: #fff;
}

.css-dops9q:focus-visible,
.css-dops9q[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.css-dops9q:disabled,
.css-dops9q[disabled],
.css-dops9q[aria-disabled=true],
.css-dops9q[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--chakra-shadows-none);
}

.css-dops9q:hover,
.css-dops9q[data-hover] {
  background: var(--chakra-colors-brand-primary-600);
}

.css-dops9q:hover:disabled,
.css-dops9q[data-hover]:disabled,
.css-dops9q:hover[disabled],
.css-dops9q[data-hover][disabled],
.css-dops9q:hover[aria-disabled=true],
.css-dops9q[data-hover][aria-disabled=true],
.css-dops9q:hover[data-disabled],
.css-dops9q[data-hover][data-disabled] {
  background: var(--chakra-colors-brand-primary-500);
}

.css-dops9q:active,
.css-dops9q[data-active] {
  background: var(--chakra-colors-brand-primary-700);
}

.css-dops9q[disabled],
.css-dops9q.disabled,
.css-dops9q[disabled]:hover,
.css-dops9q.disabled:hover {
  background-color: var(--chakra-colors-brand-primaryColor);
  opacity: 0.4;
}

.css-a9p3w9 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0px;
  color: #565B66;
  background: #FFF;
  padding: var(--chakra-space-4);
  padding-bottom: var(--chakra-space-36);
  margin-bottom: var(--chakra-space-20);
  overflow-y: scroll;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: var(--chakra-space-16);
}

@media screen and (min-width: 62em) {
  .css-a9p3w9 {
    display: none;
  }
}

.container-block {
  width: var(--chakra-sizes-full);
}

.css-uezbfx {
  overflow-anchor: none;
  padding-top: var(--chakra-space-0-5);
  padding-bottom: var(--chakra-space-0-5);
  border-top-width: 0;
  border-color: var(--chakra-colors-gray-50);
}

.css-uezbfx:last-of-type {
  border-bottom-width: 1px;
}

.css-1rr26c4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  font-size: var(--chakra-fontSizes-md);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  padding-top: var(--chakra-space-2);
  padding-bottom: var(--chakra-space-2);
  color: #565B66;
  text-align: left;
}

.css-1rr26c4:focus-visible,
.css-1rr26c4[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.css-1rr26c4:disabled,
.css-1rr26c4[disabled],
.css-1rr26c4[aria-disabled=true],
.css-1rr26c4[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.css-1rr26c4:focus,
.css-1rr26c4[data-focus] {
  box-shadow: var(--chakra-shadows-none);
}

.css-1rr26c4:hover,
.css-1rr26c4[data-hover] {
  cursor: pointer;
}

.css-1rr4qq7 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.css-5x431e {
  width: var(--chakra-sizes-6);
  height: var(--chakra-sizes-6);
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transform-origin: center;
  font-size: 1.25em;
  vertical-align: middle;
}

.css-mxa4qn {
  padding-top: var(--chakra-space-2);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  padding-bottom: var(--chakra-space-5);
}

.css-18pglp6 {
  width: var(--chakra-sizes-full);
  padding-left: var(--chakra-space-2);
  border-left: 1px;
  border-style: solid;
  border-color: var(--chakra-colors-gray-50);
}

.css-1n4pzuf {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  padding-top: var(--chakra-space-2);
  padding-bottom: var(--chakra-space-2);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  display: block;
  width: 100%;
  color: #565B66;
}

.css-1n4pzuf:focus-visible,
.css-1n4pzuf[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.css-1n4pzuf:hover,
.css-1n4pzuf[data-hover] {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.css-1n4pzuf:focus,
.css-1n4pzuf[data-focus] {
  box-shadow: var(--chakra-shadows-none);
}

.css-khini5 {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  color: inherit;
  display: block;
  width: var(--chakra-sizes-full);
}

.css-khini5:focus-visible,
.css-khini5[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.css-khini5:hover,
.css-khini5[data-hover] {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.css-khini5:focus,
.css-khini5[data-focus] {
  box-shadow: var(--chakra-shadows-none);
}

.layout-main {
  padding-top: 0px;
  width: var(--chakra-sizes-full);
}

@media screen and (min-width: 48em) {
  .layout-main {
    padding-top: 0px;
  }
}

.course-hero-container {
  width: 100%;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  max-width: var(--chakra-sizes-6xl);
  padding-top: var(--chakra-space-12);
}

@media screen and (min-width: 48em) {
  .course-hero-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: var(--chakra-space-16);
  }
}



.section-top {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-flex: 0 0 66.6666%;
  -ms-flex: 0 0 66.6666%;
  flex: 0 0 66.6666%;
  -webkit-padding-start: var(--chakra-space-2);
  padding-inline-start: var(--chakra-space-2);
  -webkit-padding-end: var(--chakra-space-2);
  padding-inline-end: var(--chakra-space-2);
  padding-bottom: var(--chakra-space-8);
  max-width: var(--chakra-sizes-3xl);
}

.hero-layout-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-4);
}

.hero-title-main {
  font-family: var(--chakra-fonts-heading);
  font-weight: var(--chakra-fontWeights-bold);
  line-height: 1.33;
  font-size: var(--chakra-fontSizes-xl);
  color: var(--chakra-colors-brand-titleColor);
}

@media screen and (min-width: 48em) {
  .hero-title-main {
    line-height: 1.2;
    font-size: var(--chakra-fontSizes-4xl);
  }
}

.hero-desc-text {
  color: #666;
}

.css-19lo6pj {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style-type: none;
  gap: 0.5rem;
  padding: 0px;
}

.css-1yp4ln {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
}

.css-1j2ljnj {
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: var(--chakra-fontSizes-xs);
  font-weight: var(--chakra-fontWeights-bold);
  background: var(--badge-bg);
  color: var(--badge-color);
  box-shadow: var(--badge-shadow);
  --badge-color: var(--chakra-colors-brand-primary-500);
  --badge-shadow: inset 0 0 0px 1px var(--badge-color);
  white-space: normal;
  border-radius: var(--chakra-radii-md);
  -webkit-padding-start: var(--chakra-space-2);
  padding-inline-start: var(--chakra-space-2);
  -webkit-padding-end: var(--chakra-space-2);
  padding-inline-end: var(--chakra-space-2);
  padding-top: var(--chakra-space-1);
  padding-bottom: var(--chakra-space-1);
}

.chakra-ui-dark .css-1j2ljnj:not([data-theme]),
[data-theme=dark] .css-1j2ljnj:not([data-theme]),
.css-1j2ljnj[data-theme=dark] {
  --badge-color: rgba(132, 141, 138, 0.8);
}

.hero-author-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  width: var(--chakra-sizes-full);
}

@media screen and (min-width: 48em) {
  .hero-author-row {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.hero-author-link {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  color: inherit;
}

.hero-author-link:hover,
.hero-author-link[data-hover] {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.hero-author-link:focus-visible,
.hero-author-link[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.hero-author-img-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--chakra-space-2);
}

.hero-author-name {
  font-size: var(--chakra-fontSizes-md);
  color: var(--chakra-colors-gray-700);
}

.nav-sticky-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  -webkit-padding-start: var(--chakra-space-2);
  padding-inline-start: var(--chakra-space-2);
  -webkit-padding-end: var(--chakra-space-2);
  padding-inline-end: var(--chakra-space-2);
  margin-top: var(--chakra-space-6);
  margin-bottom: var(--chakra-space-6);
  top: 66px;
  /* Adjusted for flush fit with navbar (36px logo + 30px padding) */
  z-index: 10;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen and (min-width: 48em) {
  .nav-sticky-area {
    -webkit-padding-start: 0px;
    padding-inline-start: 0px;
    -webkit-padding-end: 0px;
    padding-inline-end: 0px;
    top: 66px;
    /* Adjusted for flush fit with navbar */
  }
}

.container-block {
  width: var(--chakra-sizes-full);
}

.nav-tabs-container {
  position: relative;
  display: block;
  z-index: 5;
  -webkit-margin-start: -30px;
  margin-inline-start: -30px;
  -webkit-margin-end: -30px;
  margin-inline-end: -30px;
  height: 48px;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
  border-width: 1px 0;
  border-color: var(--chakra-colors-gray-50);
  background: #fff;
}

@media screen and (min-width: 48em) {
  .nav-tabs-container {
    -webkit-margin-start: 0px;
    margin-inline-start: 0px;
    -webkit-margin-end: 0px;
    margin-inline-end: 0px;
    height: 65px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
}

.nav-tabs-inner {
  width: 100%;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
  max-width: 1140px;
  overflow-x: hidden;
  -webkit-padding-start: 0px;
  padding-inline-start: 0px;
  -webkit-padding-end: 0px;
  padding-inline-end: 0px;
  padding-bottom: 0px;
}

.nav-tabs-inner:hover {
  overflow-x: auto;
}

.nav-tabs-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: var(--chakra-space-4);
  height: var(--chakra-sizes-12);
}

.tab-btn {
  background: transparent;
  border: none;
  font-weight: 500;
  color: #4A5568;
  /* Gray 700 */
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-size: 1rem;
}

.tab-btn:hover {
  color: #3182ce;
  /* Blue 500 */
}

.tab-btn.active {
  color: #2b6cb0;
  /* Blue 600 */
  border-bottom-color: #2b6cb0;
  font-weight: 700;
}

@media screen and (min-width: 48em) {
  .nav-tabs-flex {
    height: var(--chakra-sizes-16);
  }
}

.css-631dnd {
  --skeleton-start-color: var(--chakra-colors-gray-100);
  --skeleton-end-color: var(--chakra-colors-gray-400);
  background: var(--skeleton-start-color);
  border-color: var(--skeleton-end-color);
  opacity: 0.7;
  border-radius: var(--chakra-radii-sm);
  -webkit-animation: 0.8s linear infinite alternate animation-14pkoxc;
  animation: 0.8s linear infinite alternate animation-14pkoxc;
  box-shadow: var(--chakra-shadows-none);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  cursor: default;
  color: var(--chakra-colors-transparent);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: var(--chakra-sizes-5);
  width: 100px;
}

.chakra-ui-dark .css-631dnd:not([data-theme]),
[data-theme=dark] .css-631dnd:not([data-theme]),
.css-631dnd[data-theme=dark] {
  --skeleton-start-color: var(--chakra-colors-gray-800);
  --skeleton-end-color: var(--chakra-colors-gray-600);
}

.css-631dnd::before,
.css-631dnd::after,
.css-631dnd * {
  visibility: hidden;
}

@media screen and (min-width: 48em) {
  .css-631dnd {
    height: var(--chakra-sizes-6);
  }
}

@-webkit-keyframes animation-14pkoxc {
  from {
    border-color: var(--skeleton-start-color);
    background: var(--skeleton-start-color);
  }

  to {
    border-color: var(--skeleton-end-color);
    background: var(--skeleton-end-color);
  }
}

@keyframes animation-14pkoxc {
  from {
    border-color: var(--skeleton-start-color);
    background: var(--skeleton-start-color);
  }

  to {
    border-color: var(--skeleton-end-color);
    background: var(--skeleton-end-color);
  }
}

.main-columns-wrapper {
  display: block;
  margin-bottom: var(--chakra-space-10);
}

@media screen and (min-width: 48em) {
  .main-columns-wrapper {
    display: none;
  }
}

.sidebar-column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  scroll-margin-top: var(--chakra-space-40);
  scrollbar-gutter: stable;
}

@media screen and (min-width: 48em) {
  .sidebar-column {
    top: var(--chakra-space-24);
    position: -webkit-sticky;
    position: sticky;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    padding-bottom: 100px;
  }
}

.sidebar-column:hover {
  overflow-y: auto;
}

.sidebar-content-stack {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-4);
}

.purchase-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-4);
  border-radius: var(--chakra-radii-lg);
  box-shadow: var(--chakra-shadows-sm);
  border-width: 1px;
  border-color: var(--chakra-colors-gray-100);
  background: var(--chakra-colors-white);
  width: var(--chakra-sizes-full);
}

.purchase-card-media {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0px;
  width: var(--chakra-sizes-full);
}

.purchase-cover-link {
  border-radius: .25rem;
  position: relative;
  display: block;
}

.purchase-cover-link:hover,
.purchase-cover-link[data-hover] {
  cursor: pointer;
}

.purchase-cover-link:hover .player-icon,
.purchase-cover-link[data-hover] .player-icon {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: -webkit-transform 0.3s ease-in-out 0s;
  transition: transform 0.3s ease-in-out 0s;
}

.purchase-cover-img {
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  width: 100%;
}

.preview-overlay {
  text-align: center;
}

.preview-icon-bg {
  color: #000;
}

.preview-icon {
  width: var(--chakra-sizes-6);
  height: var(--chakra-sizes-6);
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
}

.preview-label {
  display: block;
  text-align: center;
  color: #fff;
}

.student-count-row {
  padding-top: var(--chakra-space-2);
  padding-bottom: var(--chakra-space-2);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  width: var(--chakra-sizes-full);
  font-size: var(--chakra-fontSizes-sm);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--chakra-colors-gray-50);
  color: var(--chakra-colors-gray-600);
}

.general-icon {
  width: var(--chakra-sizes-4);
  height: var(--chakra-sizes-4);
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
  margin-right: var(--chakra-space-1);
}

.features-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: left;
  -webkit-box-align: left;
  -ms-flex-align: left;
  align-items: left;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-2);
  -webkit-padding-start: var(--chakra-space-3);
  padding-inline-start: var(--chakra-space-3);
  -webkit-padding-end: var(--chakra-space-3);
  padding-inline-end: var(--chakra-space-3);
  padding-bottom: var(--chakra-space-4);
  font-size: var(--chakra-fontSizes-sm);
  width: var(--chakra-sizes-full);
}

@media screen and (min-width: 62em) {
  .features-block {
    -webkit-padding-start: var(--chakra-space-4);
    padding-inline-start: var(--chakra-space-4);
    -webkit-padding-end: var(--chakra-space-4);
    padding-inline-end: var(--chakra-space-4);
  }
}

.features-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: left;
  -webkit-box-align: left;
  -ms-flex-align: left;
  align-items: left;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-1);
}

.features-title {
  font-family: var(--chakra-fonts-heading);
  line-height: 1.33;
  color: var(--chakra-colors-brand-titleColor);
  font-weight: var(--chakra-fontWeights-normal);
  font-size: var(--chakra-fontSizes-sm);
}

@media screen and (min-width: 48em) {
  .features-title {
    line-height: 1.2;
  }
}

.feature-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--chakra-colors-gray-600);
}

.custom-style-22 {
  font-weight: var(--chakra-fontWeights-bold);
  color: var(--chakra-colors-gray-600);
}

.custom-style-42 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-width: 1px;
  border-radius: var(--chakra-radii-md);
  border-color: var(--chakra-colors-gray-100);
  background: #fff;
  box-shadow: var(--chakra-shadows-sm);
  width: var(--chakra-sizes-full);
  font-size: var(--chakra-fontSizes-sm);
  overflow: hidden;
}

.custom-style-62 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-2);
  background: #fff;
  padding: var(--chakra-space-4);
}

.custom-style-69 {
  font-weight: var(--chakra-fontWeights-bold);
  font-size: var(--chakra-fontSizes-lg);
  color: #000000;
}

.custom-style-35 {
  background-color: var(--chakra-colors-gray-50);
  -webkit-padding-start: var(--chakra-space-1-5);
  padding-inline-start: var(--chakra-space-1-5);
  -webkit-padding-end: var(--chakra-space-1-5);
  padding-inline-end: var(--chakra-space-1-5);
  padding-top: var(--chakra-space-0-5);
  padding-bottom: var(--chakra-space-0-5);
}

.custom-style-56 {
  word-break: break-word;
  white-space: pre-wrap;
  letter-spacing: .05em;
  color: var(--chakra-colors-gray-700);
}

.custom-style-3 {
  width: var(--chakra-sizes-full);
  margin-top: auto;
}

.custom-style-52 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-2);
}

.custom-style-43 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline: 2px solid transparent;
  outline-offset: 2px;
  line-height: 1.2;
  font-weight: var(--chakra-fontWeights-semibold);
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  height: var(--chakra-sizes-12);
  min-width: var(--chakra-sizes-12);
  -webkit-padding-start: var(--chakra-space-6);
  padding-inline-start: var(--chakra-space-6);
  -webkit-padding-end: var(--chakra-space-6);
  padding-inline-end: var(--chakra-space-6);
  background: var(--chakra-colors-brand-primary-500);
  color: #32413C;
  width: var(--chakra-sizes-full);
  font-size: 16px;
  border-radius: var(--chakra-radii-md);
  padding-top: var(--chakra-space-4);
  padding-bottom: var(--chakra-space-4);
}

.custom-style-43:focus-visible,
.custom-style-43[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-43:disabled,
.custom-style-43[disabled],
.custom-style-43[aria-disabled=true],
.custom-style-43[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--chakra-shadows-none);
}

.custom-style-43:hover,
.custom-style-43[data-hover] {
  /* background: var(--chakra-colors-brand-primary-600); Neutralized */
}

.custom-style-43:hover:disabled,
.custom-style-43[data-hover]:disabled,
.custom-style-43:hover[disabled],
.custom-style-43[data-hover][disabled],
.custom-style-43:hover[aria-disabled=true],
.custom-style-43[data-hover][aria-disabled=true],
.custom-style-43:hover[data-disabled],
.custom-style-43[data-hover][data-disabled] {
  /* background: var(--chakra-colors-brand-primary-500); Neutralized */
}

.custom-style-43:active,
.custom-style-43[data-active] {
  /* background: var(--chakra-colors-brand-primary-700); Neutralized */
}

.custom-style-43[disabled],
.custom-style-43.disabled,
.custom-style-43[disabled]:hover,
.custom-style-43.disabled:hover {
  background-color: var(--chakra-colors-brand-primaryColor);
  opacity: 0.4;
}

.custom-style-5 {
  margin-right: var(--chakra-space-1);
  white-space: break-spaces;
  word-break: break-all;
}

.custom-style-36 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline: 2px solid transparent;
  outline-offset: 2px;
  line-height: 1.2;
  font-weight: var(--chakra-fontWeights-semibold);
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  height: var(--chakra-sizes-12);
  min-width: var(--chakra-sizes-12);
  font-size: var(--chakra-fontSizes-lg);
  -webkit-padding-start: var(--chakra-space-6);
  padding-inline-start: var(--chakra-space-6);
  -webkit-padding-end: var(--chakra-space-6);
  padding-inline-end: var(--chakra-space-6);
  border: 1px solid;
  border-color: currentColor;
  color: var(--chakra-colors-brand-primary-600);
  background: var(--chakra-colors-transparent);
  border-radius: var(--chakra-radii-md);
  width: var(--chakra-sizes-full);
}

.custom-style-36:focus-visible,
.custom-style-36[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.base-btn__group[data-attached][data-orientation=horizontal]>.custom-style-36:not(:last-of-type) {
  -webkit-margin-end: -1px;
  margin-inline-end: -1px;
}

.base-btn__group[data-attached][data-orientation=vertical]>.custom-style-36:not(:last-of-type) {
  margin-bottom: -1px;
}

.custom-style-36:active,
.custom-style-36[data-active] {
  background: var(--chakra-colors-brand-primary-100);
}

.custom-style-36:hover,
.custom-style-36[data-hover] {
  background-color: #32413C;
  color: #fff;
  border: var(--chakra-borders-none);
}

.custom-style-36:disabled,
.custom-style-36[disabled],
.custom-style-36[aria-disabled=true],
.custom-style-36[data-disabled] {
  color: var(--chakra-colors-white);
  background-color: var(--chakra-colors-gray-300);
  border: var(--chakra-borders-none);
  cursor: not-allowed;
  opacity: 0.5;
}

.custom-style-64 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

.custom-style-32 {
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
}

.custom-style-9 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-16);
}

.custom-style-51 {
  font-family: var(--chakra-fonts-heading);
  line-height: 1.33;
  color: var(--chakra-colors-brand-titleColor);
  font-size: var(--chakra-fontSizes-xl);
  font-weight: var(--chakra-fontWeights-bold);
  margin-bottom: var(--chakra-space-4);
}

@media screen and (min-width: 48em) {
  .custom-style-51 {
    line-height: 1.2;
  }
}

.custom-style-13 {
  white-space: pre-line;
}

.custom-style-13.ck-content {
  overflow-x: hidden;
}

.custom-style-13.ck-content h2,
.custom-style-13.ck-content h3,
.custom-style-13.ck-content h4 {
  margin-bottom: 1rem;
  font-weight: 500;
}

.custom-style-13.ck-content h2 {
  font-size: 1.75rem;
}

.custom-style-13.ck-content h3 {
  font-size: 1.3125rem;
}

.custom-style-13.ck-content h4 {
  font-size: 1.2rem;
}

.custom-style-13.ck-content p {
  margin-bottom: 1rem;
}

.custom-style-13.ck-content blockquote {
  background-color: #f5f5f5;
  padding: 15px 10px;
  margin-bottom: 1rem;
}

.custom-style-13.ck-content blockquote p {
  margin-bottom: 0px;
}

.custom-style-13.ck-content ul,
.custom-style-13.ck-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.custom-style-13.ck-content a {
  font-weight: 500;
  color: #32413C;
}

.custom-style-13.ck-content a:hover {
  color: #32413C;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.custom-style-13.ck-content figure.table {
  margin: 0.9em auto;
  display: table;
  width: 100%;
}

.custom-style-13.ck-content figure.table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
}

.custom-style-13.ck-content figure.table table td,
.custom-style-13.ck-content figure.table table th {
  min-width: 2em;
  padding: 0.4em;
  border: 1px solid;
  border-color: var(--chakra-colors-gray-200);
}

.custom-style-13.ck-content figure.table table th {
  font-weight: var(--chakra-fontWeights-bold);
  background: hsla(0, 0%, 0%, 5%);
}

.custom-style-13.ck-content figure.table table td:empty::before {
  content: "";
  display: table-cell;
  height: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.custom-style-13.ck-content [dir="rtl"] figure.table table th {
  text-align: right;
}

.custom-style-13.ck-content [dir="ltr"] figure.table table th {
  text-align: left;
}

.custom-style-13.ck-content figure.table>figcaption {
  display: table-caption;
  caption-side: top;
  word-break: break-word;
  text-align: center;
  color: var(--ck-color-table-caption-text);
  background-color: var(--ck-color-table-caption-background);
  padding: 0.6em;
  font-size: 0.75em;
}

.custom-style-13.ck-content figure.image:not(.image-style-align-right):not(.image-style-align-left):not(.image-style-align-center) {
  width: 100%;
}

.custom-style-13.ck-content .image_resized {
  display: inline-block;
}

.custom-style-13.ck-content .image-style-align-center>img,
.custom-style-13.ck-content .image_resized.image-style-align-center {
  display: block;
  margin: 0 auto;
}

.custom-style-13.ck-content figure.image.image-style-align-center {
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.custom-style-13.ck-content .image-style-align-left>img,
.custom-style-13.ck-content .image_resized.image-style-align-left {
  display: block;
  margin-left: 0px;
  margin-right: auto;
}

.custom-style-13.ck-content .image-style-align-right>img,
.custom-style-13.ck-content .image_resized.image-style-align-right {
  display: block;
  margin-left: auto;
  margin-right: 0px;
}

.custom-style-13.ck-content .image-mobile-only,
.custom-style-13.ck-content .image-mobile-only.image_resized {
  display: none;
}

@media only screen and (max-width: 48em) {

  .custom-style-13.ck-content .image-desktop-only,
  .custom-style-13.ck-content .image-desktop-only.image_resized {
    display: none;
  }

  .custom-style-13.ck-content .image-mobile-only,
  .custom-style-13.ck-content .image-mobile-only.image_resized {
    display: block;
  }
}

.css-903tt4 {
  margin-bottom: var(--chakra-space-8);
  width: var(--chakra-sizes-full);
}

.css-1lbiir8 {
  display: grid;
  grid-gap: var(--chakra-space-2);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media screen and (min-width: 30em) {
  .css-1lbiir8 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.css-1mc3pmg {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.css-10g5epe {
  width: var(--chakra-sizes-5);
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: #61ce70;
  height: var(--chakra-sizes-6);
}

.css-1aaulm2 {
  font-size: var(--chakra-fontSizes-md);
  color: var(--chakra-colors-gray-700);
  margin-left: var(--chakra-space-2);
}

.custom-style-24 {
  font-family: var(--chakra-fonts-heading);
  line-height: 1.33;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: var(--chakra-colors-brand-titleColor);
  font-size: var(--chakra-fontSizes-xl);
  font-weight: var(--chakra-fontWeights-bold);
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: var(--chakra-space-4);
}

@media screen and (min-width: 48em) {
  .custom-style-24 {
    line-height: 1.2;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.custom-style-67 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  color: var(--chakra-colors-gray-600);
  width: var(--chakra-sizes-full);
  margin-top: var(--chakra-space-2);
}

@media screen and (min-width: 48em) {
  .custom-style-67 {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: auto;
    margin-top: 0px;
  }
}

.custom-style-31 {
  font-size: var(--chakra-fontSizes-sm);
  font-weight: var(--chakra-fontWeights-normal);
}

.custom-style-63 {
  font-size: var(--chakra-fontSizes-sm);
  font-weight: var(--chakra-fontWeights-normal);
  -webkit-margin-start: var(--chakra-space-1);
  margin-inline-start: var(--chakra-space-1);
  -webkit-margin-end: var(--chakra-space-1);
  margin-inline-end: var(--chakra-space-1);
  color: var(--chakra-colors-gray-600);
}

.custom-style-4 {
  border-radius: var(--chakra-radii-md);
  box-shadow: 0 1px 6px 0 hsla(0, 0%, 0%, 0.075);
  width: var(--chakra-sizes-full);
  overflow: hidden;
}

.custom-style-21 {
  border-top-width: 1px;
  border-color: inherit;
  overflow-anchor: none;
  border: var(--chakra-borders-none);
}

.custom-style-21:last-of-type {
  border-bottom-width: 1px;
}

.custom-style-74 {
  font-family: var(--chakra-fonts-heading);
  font-weight: var(--chakra-fontWeights-bold);
  font-size: var(--chakra-fontSizes-3xl);
  line-height: 1.33;
}

@media screen and (min-width: 48em) {
  .custom-style-74 {
    font-size: var(--chakra-fontSizes-4xl);
    line-height: 1.2;
  }
}

.custom-style-40 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  font-size: var(--chakra-fontSizes-md);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  padding-top: var(--chakra-space-2);
  padding-bottom: var(--chakra-space-2);
  padding: var(--chakra-space-2);
  background-color: var(--chakra-colors-gray-50);
}

.custom-style-40:focus-visible,
.custom-style-40[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-40:hover,
.custom-style-40[data-hover] {
  background: var(--chakra-colors-blackAlpha-50);
}

@media screen and (min-width: 30em) {
  .custom-style-40 {
    padding: var(--chakra-space-4);
  }
}

.custom-style-40:disabled,
.custom-style-40[disabled],
.custom-style-40[aria-disabled=true],
.custom-style-40[data-disabled] {
  cursor: text;
}

.custom-style-12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: var(--chakra-space-2);
  width: var(--chakra-sizes-full);
}

.custom-style-15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

@media screen and (min-width: 48em) {
  .custom-style-15 {
    -webkit-align-self: start;
    -ms-flex-item-align: start;
    align-self: start;
  }
}

.custom-style-16 {
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: var(--chakra-colors-brand-primaryColor);
  opacity: 1;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transform-origin: center;
  font-size: 1.25em;
  vertical-align: middle;
}

.custom-style-39 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: var(--chakra-fontSizes-sm);
  color: var(--chakra-colors-gray-600);
  font-weight: 700;
}

@media screen and (min-width: 48em) {
  .custom-style-39 {
    font-size: var(--chakra-fontSizes-md);
  }
}

.custom-style-10 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-0-5);
  margin-left: auto;
  margin-right: var(--chakra-space-2);
  text-align: right;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--chakra-fontSizes-xs);
  color: var(--chakra-colors-gray-600);
}

@media screen and (min-width: 48em) {
  .custom-style-10 {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: var(--chakra-space-2);
    font-size: var(--chakra-fontSizes-sm);
  }
}

.custom-style-71 {
  padding-top: var(--chakra-space-2);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  padding-bottom: var(--chakra-space-5);
  padding: 0px;
}

.custom-style-47 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: var(--chakra-space-3);
  border-top-width: 1px;
  border-color: var(--chakra-colors-gray-50);
  padding-top: var(--chakra-space-3);
  padding-bottom: var(--chakra-space-3);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
}

@media screen and (min-width: 30em) {
  .custom-style-47 {
    -webkit-padding-start: var(--chakra-space-6);
    padding-inline-start: var(--chakra-space-6);
    -webkit-padding-end: var(--chakra-space-6);
    padding-inline-end: var(--chakra-space-6);
  }
}

.custom-style-50 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: var(--chakra-space-2);
}

.custom-style-17 {
  color: var(--chakra-colors-gray-200);
}

.custom-style-26 {
  width: var(--chakra-sizes-3);
  height: var(--chakra-sizes-3);
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
  display: block;
}

@media screen and (min-width: 30em) {
  .custom-style-26 {
    width: var(--chakra-sizes-4);
    height: var(--chakra-sizes-4);
  }
}

.custom-style-57 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--chakra-line-clamp);
  line-clamp: var(--chakra-line-clamp);
  --chakra-line-clamp: 1;
  color: var(--chakra-colors-gray-600);
  font-size: var(--chakra-fontSizes-sm);
  width: 100%;
}

.custom-style-7 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: var(--chakra-space-2);
  font-size: var(--chakra-fontSizes-sm);
  color: var(--chakra-colors-gray-600);
}

@media screen and (min-width: 30em) {
  .custom-style-7 {
    gap: var(--chakra-space-4);
  }
}

.custom-style-20 {
  font-size: var(--chakra-fontSizes-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--chakra-line-clamp);
  line-clamp: var(--chakra-line-clamp);
  --chakra-line-clamp: 1;
  text-align: right;
}

@media screen and (min-width: 48em) {
  .custom-style-20 {
    font-size: var(--chakra-fontSizes-sm);
  }
}

.custom-style-60 {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-padding-start: var(--chakra-space-1);
  padding-inline-start: var(--chakra-space-1);
  -webkit-padding-end: var(--chakra-space-1);
  padding-inline-end: var(--chakra-space-1);
  text-transform: uppercase;
  font-size: var(--chakra-fontSizes-xs);
  border-radius: var(--chakra-radii-sm);
  font-weight: var(--chakra-fontWeights-bold);
  background: var(--badge-bg);
  color: var(--badge-color);
  --badge-color: var(--chakra-colors-gray-500);
  --badge-shadow: inset 0 0 0px 1px var(--badge-color);
  box-shadow: 0 0 0 1px var(--chakra-colors-brand-primaryColor);
}

.chakra-ui-dark .custom-style-60:not([data-theme]),
[data-theme=dark] .custom-style-60:not([data-theme]),
.custom-style-60[data-theme=dark] {
  --badge-color: rgba(196, 199, 204, 0.8);
}

.custom-style-23 {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  font-size: var(--chakra-fontSizes-xs);
  color: var(--chakra-colors-brand-primaryColor);
}

.custom-style-23:hover,
.custom-style-23[data-hover] {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.custom-style-23:focus-visible,
.custom-style-23[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-34 {
  scroll-margin-top: 144px;
}

.custom-style-14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.custom-style-44 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  gap: var(--chakra-space-4);
}

@media screen and (min-width: 30em) {
  .custom-style-44 {
    gap: var(--chakra-space-6);
  }
}

.custom-style-59 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}

.custom-style-25 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-2);
}

.custom-style-76 {
  font-family: var(--chakra-fonts-heading);
  font-weight: var(--chakra-fontWeights-bold);
  line-height: 1.33;
  font-size: var(--chakra-fontSizes-md);
}

@media screen and (min-width: 30em) {
  .custom-style-76 {
    font-size: var(--chakra-fontSizes-lg);
  }
}

@media screen and (min-width: 48em) {
  .custom-style-76 {
    line-height: 1.2;
  }
}

.custom-style-68 {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  color: var(--chakra-colors-gray-600);
}

.custom-style-68:hover,
.custom-style-68[data-hover] {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.custom-style-68:focus-visible,
.custom-style-68[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-38 {
  color: var(--chakra-colors-gray-600);
  font-size: var(--chakra-fontSizes-sm);
}

@media screen and (min-width: 30em) {
  .custom-style-38 {
    font-size: var(--chakra-fontSizes-md);
  }
}

.custom-style-75 {
  color: var(--chakra-colors-gray-600);
  font-size: var(--chakra-fontSizes-sm);
  line-height: 1.625;
}

.custom-style-75>p {
  margin-bottom: 0.5rem;
}

.custom-style-75>p:last-of-type {
  margin-bottom: 0px;
}

.custom-style-75>p>a {
  color: var(--chakra-colors-brand-primaryColor);
}

.custom-style-75>p>a:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.custom-style-77 {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: var(--chakra-fontSizes-sm);
  color: var(--chakra-colors-gray-600);
}

.custom-style-77:focus-visible,
.custom-style-77[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-77:hover,
.custom-style-77[data-hover] {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.css-fnk4jc {
  font-size: var(--chakra-fontSizes-md);
  font-weight: var(--chakra-fontWeights-semibold);
  margin-top: var(--chakra-space-2);
  margin-bottom: var(--chakra-space-2);
  color: var(--chakra-colors-gray-700);
}

.custom-style-46 {
  border-color: var(--chakra-colors-gray-50);
  margin-top: 0px;
}

.custom-style-65 {
  border-top-width: 1px;
  overflow-anchor: none;
  border-color: var(--chakra-colors-gray-10);
}

.custom-style-65:last-of-type {
  border-bottom-width: 1px;
}

.custom-style-19 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: calc(100% + 1rem);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  font-size: var(--chakra-fontSizes-md);
  padding-top: var(--chakra-space-2);
  padding-bottom: var(--chakra-space-2);
  -webkit-padding-start: var(--chakra-space-3);
  padding-inline-start: var(--chakra-space-3);
  -webkit-padding-end: var(--chakra-space-3);
  padding-inline-end: var(--chakra-space-3);
  -webkit-margin-start: calc(var(--chakra-space-3) * -1);
  margin-inline-start: calc(var(--chakra-space-3) * -1);
  -webkit-margin-end: calc(var(--chakra-space-3) * -1);
  margin-inline-end: calc(var(--chakra-space-3) * -1);
  overflow: hidden;
}

.custom-style-19:focus-visible,
.custom-style-19[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-19:hover,
.custom-style-19[data-hover] {
  background: var(--chakra-colors-blackAlpha-50);
}

.custom-style-19:disabled,
.custom-style-19[disabled],
.custom-style-19[aria-disabled=true],
.custom-style-19[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.custom-style-19[aria-expanded=true],
.custom-style-19[data-expanded] {
  background: var(--chakra-colors-gray-10);
  color: var(--chakra-colors-gray-700);
}

.custom-style-66 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: left;
}

.custom-style-70 {
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
  opacity: 1;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transform-origin: center;
  font-size: 1.25em;
  vertical-align: middle;
}

.custom-style-54 {
  padding-top: var(--chakra-space-1);
  padding-bottom: var(--chakra-space-3);
  text-align: left;
  font-size: var(--chakra-fontSizes-sm);
  line-height: 1.625;
  -webkit-padding-start: 0px;
  padding-inline-start: 0px;
  -webkit-padding-end: 0px;
  padding-inline-end: 0px;
}

.custom-style-1 {
  -webkit-flex: 0 0 33.3333%;
  -ms-flex: 0 0 33.3333%;
  flex: 0 0 33.3333%;
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  display: none;
}

@media screen and (min-width: 48em) {
  .custom-style-1 {
    display: block;
  }
}

.custom-style-30 {
  display: block;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: var(--chakra-sizes-full);
  border-top-width: 1px;
  border-color: var(--chakra-colors-gray-100);
  background: var(--chakra-colors-white);
  z-index: 100;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-top: 12px;
}

@media screen and (min-width: 48em) {
  .custom-style-30 {
    display: none;
  }
}

.custom-style-18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 0px;
  -webkit-margin-start: var(--chakra-space-2);
  margin-inline-start: var(--chakra-space-2);
  -webkit-margin-end: var(--chakra-space-2);
  margin-inline-end: var(--chakra-space-2);
  background: var(--chakra-colors-white);
}

@media screen and (min-width: 30em) {
  .custom-style-18 {
    -webkit-margin-start: 0px;
    margin-inline-start: 0px;
    -webkit-margin-end: 0px;
    margin-inline-end: 0px;
  }
}

.custom-style-41 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0px;
  margin-right: var(--chakra-space-2);
}

.custom-style-2 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  outline: 2px solid transparent;
  outline-offset: 2px;
  line-height: 1.2;
  font-weight: var(--chakra-fontWeights-semibold);
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  height: var(--chakra-sizes-12);
  min-width: var(--chakra-sizes-12);
  -webkit-padding-start: var(--chakra-space-6);
  padding-inline-start: var(--chakra-space-6);
  -webkit-padding-end: var(--chakra-space-6);
  padding-inline-end: var(--chakra-space-6);
  background: var(--chakra-colors-brand-primary-500);
  color: #000;
  border-radius: var(--chakra-radii-md);
  font-size: var(--chakra-fontSizes-md);
  width: var(--chakra-sizes-full);
}

.custom-style-2:focus-visible,
.custom-style-2[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-2:disabled,
.custom-style-2[disabled],
.custom-style-2[aria-disabled=true],
.custom-style-2[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--chakra-shadows-none);
}

.custom-style-2:hover,
.custom-style-2[data-hover] {
  /* background: var(--chakra-colors-brand-primary-600); Neutralized */
}

.custom-style-2:hover:disabled,
.custom-style-2[data-hover]:disabled,
.custom-style-2:hover[disabled],
.custom-style-2[data-hover][disabled],
.custom-style-2:hover[aria-disabled=true],
.custom-style-2[data-hover][aria-disabled=true],
.custom-style-2:hover[data-disabled],
.custom-style-2[data-hover][data-disabled] {
  /* background: var(--chakra-colors-brand-primary-500); Neutralized */
}

.custom-style-2:active,
.custom-style-2[data-active] {
  /* background: var(--chakra-colors-brand-primary-700); Neutralized */
}

.custom-style-2[disabled],
.custom-style-2.disabled,
.custom-style-2[disabled]:hover,
.custom-style-2.disabled:hover {
  background-color: var(--chakra-colors-brand-primaryColor);
  opacity: 0.4;
}

.custom-style-27 {
  white-space: pre-wrap;
}

.custom-style-58 {
  margin-right: var(--chakra-space-1);
}

.custom-style-48 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  outline: 2px solid transparent;
  outline-offset: 2px;
  line-height: 1.2;
  border-radius: var(--chakra-radii-md);
  font-weight: var(--chakra-fontWeights-semibold);
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  height: var(--chakra-sizes-10);
  min-width: var(--chakra-sizes-10);
  font-size: var(--chakra-fontSizes-md);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  background: var(--chakra-colors-gray-100);
  padding: 0px;
  visibility: hidden;
  position: fixed;
  bottom: var(--chakra-space-40);
  right: var(--chakra-space-5);
  background-color: var(--chakra-colors-blackAlpha-600);
  color: var(--chakra-colors-white);
}

.custom-style-48:focus-visible,
.custom-style-48[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-48:disabled,
.custom-style-48[disabled],
.custom-style-48[aria-disabled=true],
.custom-style-48[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--chakra-shadows-none);
}

.custom-style-48:hover,
.custom-style-48[data-hover] {
  background: var(--chakra-colors-gray-200);
}

.custom-style-48:hover:disabled,
.custom-style-48[data-hover]:disabled,
.custom-style-48:hover[disabled],
.custom-style-48[data-hover][disabled],
.custom-style-48:hover[aria-disabled=true],
.custom-style-48[data-hover][aria-disabled=true],
.custom-style-48:hover[data-disabled],
.custom-style-48[data-hover][data-disabled] {
  background: var(--chakra-colors-gray-100);
}

.custom-style-48:active,
.custom-style-48[data-active] {
  background: var(--chakra-colors-gray-300);
}

.custom-style-48[disabled],
.custom-style-48.disabled,
.custom-style-48[disabled]:hover,
.custom-style-48.disabled:hover {
  background-color: var(--chakra-colors-brand-primaryColor);
  opacity: 0.4;
}

@media screen and (min-width: 30em) {
  .custom-style-48 {
    bottom: var(--chakra-space-24);
    right: var(--chakra-space-10);
  }
}

@media screen and (min-width: 96em) {
  .custom-style-48 {
    right: 15%;
  }
}

.custom-style-6 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  outline: 2px solid transparent;
  outline-offset: 2px;
  line-height: 1.2;
  border-radius: var(--chakra-radii-md);
  font-weight: var(--chakra-fontWeights-semibold);
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-normal);
  height: var(--chakra-sizes-10);
  min-width: var(--chakra-sizes-10);
  font-size: var(--chakra-fontSizes-md);
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  background: var(--chakra-colors-gray-100);
  padding: 0px;
  position: fixed;
  bottom: var(--chakra-space-28);
  right: var(--chakra-space-5);
  z-index: 100;
  background-color: var(--chakra-colors-blackAlpha-600);
  color: var(--chakra-colors-white);
}

.custom-style-6:focus-visible,
.custom-style-6[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.custom-style-6:disabled,
.custom-style-6[disabled],
.custom-style-6[aria-disabled=true],
.custom-style-6[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--chakra-shadows-none);
}

.custom-style-6:hover,
.custom-style-6[data-hover] {
  background: var(--chakra-colors-gray-200);
}

.custom-style-6:hover:disabled,
.custom-style-6[data-hover]:disabled,
.custom-style-6:hover[disabled],
.custom-style-6[data-hover][disabled],
.custom-style-6:hover[aria-disabled=true],
.custom-style-6[data-hover][aria-disabled=true],
.custom-style-6:hover[data-disabled],
.custom-style-6[data-hover][data-disabled] {
  background: var(--chakra-colors-gray-100);
}

.custom-style-6:active,
.custom-style-6[data-active] {
  background: var(--chakra-colors-gray-300);
}

.custom-style-6[disabled],
.custom-style-6.disabled,
.custom-style-6[disabled]:hover,
.custom-style-6.disabled:hover {
  background-color: var(--chakra-colors-brand-primaryColor);
  opacity: 0.4;
}

@media screen and (min-width: 30em) {
  .custom-style-6 {
    bottom: var(--chakra-space-12);
    right: var(--chakra-space-10);
  }
}

@media screen and (min-width: 96em) {
  .custom-style-6 {
    right: 15%;
  }
}

.custom-style-37 {
  width: 100%;
  -webkit-padding-start: var(--chakra-space-4);
  padding-inline-start: var(--chakra-space-4);
  -webkit-padding-end: var(--chakra-space-4);
  padding-inline-end: var(--chakra-space-4);
  max-width: 1140px;
  color: var(--chakra-colors-gray-500);
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
  margin-bottom: var(--chakra-space-8);
  padding-top: var(--chakra-space-8);
  padding-bottom: var(--chakra-space-8);
}

@media screen and (min-width: 48em) {
  .custom-style-37 {
    margin-bottom: 0px;
  }
}

.custom-style-61 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--chakra-space-2);
  margin-bottom: var(--chakra-space-4);
}

@media screen and (min-width: 48em) {
  .custom-style-61 {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: var(--chakra-space-8);
  }
}

.custom-style-53 {
  font-size: var(--chakra-fontSizes-sm);
}

.custom-style-28 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.custom-style-49 {
  width: var(--chakra-sizes-4);
  height: var(--chakra-sizes-4);
  display: inline-block;
  line-height: 1em;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: currentColor;
}

.custom-style-33 {
  margin-left: var(--chakra-space-2);
}

.custom-style-55 {
  opacity: 0.6;
  border: 0;
  border-color: inherit;
  border-style: solid;
  border-bottom-width: 1px;
  width: 100%;
}

.custom-style-29 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--chakra-colors-gray-400);
  font-size: var(--chakra-fontSizes-sm);
  padding-top: var(--chakra-space-3);
  text-align: center;
  margin-bottom: var(--chakra-space-2);
}

@media screen and (min-width: 62em) {
  .custom-style-29 {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.custom-style-8 {
  max-width: 100%;
  text-align: center;
}

@media screen and (min-width: 62em) {
  .custom-style-8 {
    max-width: 80%;
    text-align: left;
  }
}

@media screen and (min-width: 62em) {
  .custom-style-11 {
    margin-left: auto;
  }
}

.custom-style-72 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
}

@media screen and (min-width: 62em) {
  .custom-style-72 {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.custom-style-73 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.custom-style-73:hover,
.custom-style-73[data-hover] {
  color: #000;
}

.css-1x34k5y {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--chakra-colors-gray-400);
  font-size: var(--chakra-fontSizes-sm);
  padding-bottom: var(--chakra-space-8);
}

@media screen and (min-width: 62em) {
  .css-1x34k5y {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding-bottom: 0px;
  }
}

.css-1x34k5y a {
  display: block;
  text-align: center;
}

.css-lys50q {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: var(--chakra-sizes-full);
  margin-top: var(--chakra-space-4);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

@media screen and (min-width: 48em) {
  .css-lys50q {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
}

.css-lys50q a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  display: inline;
}

.css-tx5moa {
  transition-property: var(--chakra-transition-property-common);
  transition-duration: var(--chakra-transition-duration-fast);
  transition-timing-function: var(--chakra-transition-easing-ease-out);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  color: inherit;
  display: inline;
}

.css-tx5moa:hover,
.css-tx5moa[data-hover] {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.css-tx5moa:focus-visible,
.css-tx5moa[data-focus-visible] {
  box-shadow: var(--chakra-shadows-outline);
}

.hero-series-title {
  background-color: #FFCE64;
  color: #32413C;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-main-title .highlight-yellow {
  /* background-color: #FFCE64; Removed as per request to move highlight to series title specifically, or user implies series title gets it now. 
     The user asked "help me add yellow brand background" to hero-series-title. 
     The previous highlight-yellow rule can stay if used elsewhere, but looking at previous summary, 
     it seems the user moved the highlight. HTML doesn't seem to use .highlight-yellow on main title anymore? 
     Let's just fix the syntax and add the new rule. 
  */
  background-color: #FFCE64;
  color: #32413C;
  /* Dark text on yellow */
  padding: 0 4px;
  border-radius: 6px;
  display: inline-block;
}

.hero-description {
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  color: #666 !important;
  margin-bottom: 2rem !important;
}

/* Stats Box Layout */
/* Stats Box Layout */
.hero-stats {
  display: flex;
  justify-content: flex-start;
  /* Left align */
  gap: 0.5rem;
  /* Tighter gap */
  margin-bottom: 2rem;
  width: auto;
  flex-wrap: wrap;
  margin-top: -1rem;
  /* Pull closer to description */
}

.stat-box {
  background-color: #f7f9fa;
  /* Light background for tag feel */
  border-radius: 6px;
  padding: 4px 10px;
  /* Very compact padding */
  text-align: center;
  flex: 0 0 auto;
  box-shadow: none;
  /* Remove shadow for flat tag look */
  border: 1px solid #e1e4e8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-number {
  font-size: 1rem;
  /* Standard readable size */
  font-weight: 700;
  color: #32413C;
  margin-bottom: 0;
  line-height: 1.2;
}

.stat-label {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

/* Refactored Inline Styles */
.highlight-text {
  box-shadow: inset 0 -0.3em 0 #FFCE64;
}

.avatar-img {
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-sm {
  width: 32px;
  height: 32px;
}

.avatar-lg {
  width: 96px;
  height: 96px;
}

.preview-overlay-container {
  z-index: 3;
  transition: transform 0.3s ease-in-out 0s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-button-bg {
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 8px;
}

.embed-responsive-container {
  position: relative;
  padding-bottom: 56.2493%;
  height: 0;
}

.embed-responsive-item {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}

.collapse-animation {
  overflow: hidden;
  /* transition: all 0.3s ease-out; Left to JS or future enhancement */
}

.collapse-open {
  display: block;
  opacity: 1;
  height: auto;
}


.collapse-closed {
  display: none;
  opacity: 0;
  height: 0px;
}

html {
  scroll-behavior: smooth;
}

.sticky-hidden {
  opacity: 0;
  transform: translateY(100px) translateZ(0);
}

.text-decoration-none {
  text-decoration: none;
}


.collapse-icon-open {
  transform: rotate(-180deg);
}

/* Mobile Tabs Optimization */
@media (max-width: 768px) {
  .tab-btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.5rem;
  }

  .nav-tabs-flex {
    gap: 0.5rem !important;
  }
}

/* Lecturer Section Styles */
.fc-about-row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  /* Centers the image block */
  padding: 3rem 2rem;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  /* Subtle premium shadow */
}

/* Media query removed to enforce stacked layout on all screens */

.fc-about-col {
  width: 100%;
  /* Full width for text block */
  max-width: 600px;
  /* Constrain width for readability if needed */
  /* Text inside is left-aligned by default */
}

.fc-about-portrait {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  /* Center the image */
  width: 100%;
  /* Ensure it spans width so centering works */
}

.fc-eyebrow {
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFCE64;
  /* Brand yellow */
  text-transform: none;
  /* Remove uppercase for natural quote feel */
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  display: inline-block;
  /* Allows width to fit content for centering */
  width: 100%;
}

.fc-eyebrow::before {
  content: "“";
  margin-right: 0.5rem;
  font-size: 1.2em;
}

.fc-eyebrow::after {
  content: "”";
  margin-left: 0.5rem;
  font-size: 1.2em;
}

.fc-about-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #32413C;
  /* Dark Slate Gray */
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.fc-about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.fc-about-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: #565B66;
}

/* Bullet points (optional customization) */
.fc-about-list li::before {
  content: "•";
  color: #FFCE64;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.fc-social-icons {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.social-icon-link {
  color: #A0AEC0;
  /* Gray 400 */
  transition: color 0.2s;
  display: flex;
  /* Ensure SVG centering */
}

.social-icon-link:hover {
  color: #32413C;
  /* Darker on hover */
}

.social-icon-link.youtube:hover {
  color: #FF0000;
}

.social-icon-link.instagram:hover {
  color: #E1306C;
}

.social-icon-link.facebook:hover {
  color: #1877F2;
}

.social-icon-link.tiktok:hover {
  color: #000000;
}

.fc-about-ctas {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.fc-cta {
  background-color: #FFCE64;
  color: #32413C;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s;
  display: inline-block;
}

.fc-cta:hover {
  background-color: #FFD633;
  /* Slightly lighter yellow */
  transform: translateY(-2px);
}

.fc-link {
  color: #565B66;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s;
}

.fc-link:hover {
  color: #32413C;
}

/* Ensure image respects container but stays circular/sized as defined inline */
.hero-author-img-box img.avatar-lg {
  /* Inherits circular style from utility class */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Testimonials Section Styles */
.fc-testimonials {
  padding: 4rem 1rem;
  background-color: #fff;
}

.fc-t-head {
  text-align: center;
  margin-bottom: 3rem;
}

.fc-t-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1A202C;
  line-height: 1.3;
}

/* Grid Layout */
.fc-t-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .fc-t-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columns on Desktop */
  }
}

/* Card Common Styles */
.fc-t-card {
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

/* Video Card (Spans full width on mobile, maybe strictly grid on desktop?)
   User asked for video on left, text on right. */

.fc-t-video {
  /* On mobile, standard card stacking */
}

@media (min-width: 768px) {

  /* On desktop, span 2 columns and use flex row */
  .fc-t-video {
    grid-column: 1 / -1;
    /* Span full width */
    flex-direction: row;
    align-items: center;
    /* Center vertically */
    gap: 2rem;
  }
}

.fc-t-video-wrap {
  width: 100%;
}

@media (min-width: 768px) {
  .fc-t-video-wrap {
    flex: 0 0 50%;
    /* Video takes 50% width */
  }
}

/* Quote Text Styling */
.fc-quote-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #4A5568;
  margin-bottom: 1rem;
  flex: 1;
  /* Pushes author to bottom in text cards */
}

.fc-t-video .fc-quote-text {
  /* In video card, margin top is handled by structure, but flex 1 is good */
  flex: unset;
  /* Let it flow naturally */
  margin-top: 1rem;
}

/* Author Section */
.fc-t-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  /* Push to bottom if flex column */
}

.fc-name {
  font-weight: 700;
  color: #2D3748;
  display: block;
}

.fc-role {
  font-size: 0.875rem;
  color: #718096;
  display: block;
}

/* Letter Avatar for Text Cards */
.fc-letter-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FFCE64;
  /* Brand Yellow */
  color: #32413C;
  /* Dark text */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Enhanced Video Text Layout - Desktop */
.fc-t-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  /* Take remaining space next to video */
  margin-top: 1rem;
}

@media (min-width: 768px) {
  /* On Desktop, make the content area (Author + Quote) also a row? 
     No, the user wants [Left Column: Name/Role] [Right Column: Quote] 
     inside the Text Area next to the video. */

  /* First, ensure the card itself is video left, content right (handled by previous rule) */
  /* Now style content internally */

  .fc-t-video .fc-t-content {
    flex-direction: row;
    align-items: flex-start;
    margin-top: 0;
    /* Align with video top */
    gap: 1.5rem;
  }

  /* Author Column */
  .fc-t-video .fc-t-author {
    flex-direction: column;
    /* Stack Name / Role */
    align-items: flex-start;
    width: 5em;
    /* Narrow column for author */
    flex-shrink: 0;
    margin-top: 0;
  }

  /* Update Typography for this layout */
  .fc-t-video .fc-name {
    font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #1A202C;
    /* Darker */
  }

  .fc-t-video .fc-role {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #718096;
    word-break: break-word;
    /* Ensure wrapping in specific column */
  }

  /* Quote takes remaining space */
  .fc-t-video .fc-quote-text {
    flex: 1;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.2rem;
    /* Visual alignment with name top */
    color: #4A5568;
    line-height: 1.6;
    text-align: justify;
  }
}

/* ========================================
   Testimonials Section Styles
   ======================================== */

.testimonial-section {
  padding: 4rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-header {
  text-align: center;
  margin-bottom: 3rem;
}

.testimonial-eyebrow {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFCE64;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.testimonial-title {
  font-size: 2rem;
  font-weight: 700;
  color: #32413C;
  line-height: 1.3;
  margin: 0;
}

.testimonial-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1rem;
}

/* Testimonial Card Base Styles */
.testimonial-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Video Testimonial Card */
.testimonial-video-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.testimonial-video-wrapper {
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}

.testimonial-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Removed spacing */
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testimonial-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #32413C;
}

.testimonial-role {
  font-size: 0.9rem;
  color: #718096;
}

.testimonial-quote {
  font-size: 1rem;
  line-height: 1.7;
  color: #4A5568;
  margin: 0;
}

/* Text Testimonial Card */
.testimonial-text-card {
  display: flex;
  gap: 1.5rem;
  /* Increased for more spacing */
  align-items: center;
  /* Center avatar vertically */
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 64px;
  /* Increased from 48px */
  height: 64px;
  /* Increased from 48px */
  border-radius: 50%;
  background: linear-gradient(135deg, #FFCE64 0%, #FFB84D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  /* Increased from 1.25rem */
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
}

.testimonial-text-card .testimonial-content {
  flex: 1;
}

.testimonial-text-card .testimonial-author {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  /* Reduced from 0.75rem */
}

.testimonial-text-card .testimonial-role::before {
  content: "•";
  margin: 0 0.25rem;
  color: #CBD5E0;
}

/* Responsive Design */
@media (min-width: 768px) {
  .testimonial-video-card {
    flex-direction: row;
  }

  .testimonial-video-wrapper {
    width: 45%;
    min-width: 280px;
  }

  .testimonial-content {
    flex: 1;
  }
}

@media (min-width: 1024px) {
  .testimonial-section {
    padding: 5rem 0;
  }

  .testimonial-title {
    font-size: 2.5rem;
  }
}

/* ========================================
   Video Thumbnail & Play Overlay Styles
   ======================================== */

.video-thumbnail-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  /* Bottom alignment */
  justify-content: flex-start;
  /* Left alignment */
  padding: 1rem;
  /* Spacing from edges */
  background: transparent;
  /* Remove dark overlay */
  border-radius: 12px;
  transition: background 0.3s ease;
}

.video-thumbnail-container:hover .video-play-overlay {
  background: transparent;
  /* Keep transparent on hover */
}

.video-play-button {
  width: 56px;
  /* Reduced from 80px */
  height: 56px;
  /* Reduced from 80px */
  border-radius: 50%;
  background: rgba(255, 206, 100, 0.95);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-play-button:hover {
  transform: scale(1.15);
  /* Slightly more scale for smaller button */
  background: rgba(255, 206, 100, 1);
}

.video-play-button svg {
  color: #32413C;
  margin-left: 3px;
  /* Adjusted for smaller size */
  width: 32px;
  /* Reduced icon size */
  height: 32px;
  /* Reduced icon size */
}

/* Iframe styling when video is loaded */
.video-thumbnail-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: none;
}

/* ========================================
   Footer Three Column Layout
   ======================================== */

.footer-three-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1;
  min-width: 200px;
}

.footer-left {
  text-align: left;
}

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

.footer-right {
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .footer-three-column {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    text-align: center;
    justify-content: center;
  }
}

/* ========================================
   Course Features Section Styles
   ======================================== */

.course-features-section {
  padding: 4rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

.features-header {
  text-align: center;
  margin-bottom: 3rem;
}

.features-eyebrow {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFCE64;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.features-title {
  font-size: 1.75rem;
  /* Reduced from 2rem */
  font-weight: 700;
  color: #32413C;
  line-height: 1.4;
  margin: 0;
}

.features-highlight {
  background: linear-gradient(180deg, transparent 60%, #FFCE64 60%);
  padding: 0 0.25rem;
}

.features-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 0 1rem;
}

/* Feature Card Base */
.feature-card {
  display: flex;
  gap: 2rem;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Progressive shadow effect for visual hierarchy */
.feature-card:nth-child(1) {
  box-shadow: 0 2px 12px rgba(255, 206, 100, 0.1);
}

.feature-card:nth-child(2) {
  box-shadow: 0 4px 16px rgba(255, 206, 100, 0.15);
}

.feature-card:nth-child(3) {
  box-shadow: 0 6px 20px rgba(255, 206, 100, 0.2);
}

.feature-card:hover {
  transform: translateY(-4px);
}

/* Enhanced hover shadow based on card position */
.feature-card:nth-child(1):hover {
  box-shadow: 0 8px 24px rgba(255, 206, 100, 0.2);
}

.feature-card:nth-child(2):hover {
  box-shadow: 0 10px 28px rgba(255, 206, 100, 0.25);
}

.feature-card:nth-child(3):hover {
  box-shadow: 0 12px 32px rgba(255, 206, 100, 0.3);
}

/* Left Layout: Image Left, Content Right */
.feature-card-left {
  flex-direction: row;
}

/* Right Layout: Content Left, Image Right */
.feature-card-right {
  flex-direction: row-reverse;
}

.feature-image {
  flex: 0 0 55%;
  /* Optimal balance: golden ratio */
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

.feature-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

.feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #32413C;
  margin: 0;
  line-height: 1.3;
}

.feature-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #4A5568;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .course-features-section {
    padding: 3rem 0;
  }

  .features-title {
    font-size: 1.5rem;
    /* Reduced from 1.75rem */
  }

  .feature-card,
  .feature-card-left,
  .feature-card-right {
    flex-direction: column;
    padding: 1.5rem;
  }

  .feature-image {
    flex: 0 0 auto;
    width: 100%;
  }

  .features-container {
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .course-features-section {
    padding: 5rem 0;
  }

  .features-title {
    font-size: 2rem;
    /* Reduced from 2.5rem */
  }
}

/* ========================================
   Course Outline Section Header Styles
   ======================================== */

.course-sections-wrapper {
  padding: 4rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

.course-outline-header {
  text-align: center;
  margin-bottom: 3rem;
}

.outline-eyebrow {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFCE64;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.outline-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #32413C;
  line-height: 1.4;
  margin: 0 0 1rem 0;
}

.outline-subtitle {
  font-size: 1rem;
  color: #4A5568;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .course-sections-wrapper {
    padding: 3rem 0;
  }

  .outline-title {
    font-size: 1.5rem;
  }

  .outline-subtitle {
    font-size: 0.95rem;
  }
}

@media (min-width: 1024px) {
  .course-sections-wrapper {
    padding: 5rem 0;
  }

  .outline-title {
    font-size: 2rem;
  }
}

/* ========================================
   Pragmatics Section Styles
   ======================================== */

.fc-pragmatics {
  padding: 2rem 0;
  /* Reduced from 4rem */
  max-width: 1200px;
  margin: 0 auto;
}

.fc-pragmatics-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem;
  /* Reduced from 3rem */
  padding: 0 1rem;
}

.fc-pragmatics-kicker {
  color: #64748B;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-style: italic;
}

.fc-pragmatics-subtitle {
  color: #64748B;
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 1rem;
}

/* Override feature-card for this section to stack vertically */
.fc-prag-card {
  flex-direction: column !important;
  /* Force vertical stack */
  padding: 0 !important;
  /* Remove padding to let image bleed? No, screenshot has padding maybe? Or image is inside padding? */
  overflow: hidden;
  /* Ensure image fits corners */
  align-items: stretch !important;
  gap: 0 !important;
}

/* If the user wants the card style (border/shadow) but different layout */
/* Screenshot show solid yellow/black headers on images... that comes from the image itself? Yes */
/* The card white background wraps both image and text */

/* Reset padding for the card content wrapper if needed */
.fc-prag-content {
  padding: 1.5rem;
}

.fc-prag-visual {
  width: 100%;
  margin: 0;
}

.fc-prag-visual img {
  width: 100%;
  height: auto;
  display: block;
  /* If we want image to flush with top corners, we need to remove parent padding */
  /* Since I set padding: 0 on .fc-prag-card, the image will touch edges */
}

.fc-prag-card-text {
  color: #4A5568;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .fc-pragmatics-cards {
    flex-direction: column;
  }

  .fc-prag-card {
    max-width: 100%;
  }
}

/* Fix layout for Pragmatics cards to be side-by-side on desktop */
@media (min-width: 769px) {
  .fc-pragmatics-cards {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }

  .fc-prag-card {
    flex: 1;
    width: 50%;
    /* Ensure equal width */
  }
}

/* Explicitly enforce stacked layout for Pragmatics cards on mobile */
@media (max-width: 768px) {
  .fc-pragmatics-cards {
    display: flex;
    flex-direction: column !important;
    gap: 1.5rem;
  }

  .fc-prag-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Force override for pragmatics card padding with high specificity */
.fc-pragmatics .fc-prag-card {
  padding: 0 !important;
  border: 1px solid #E2E8F0;
  /* Maintain border */
}

/* Ensure image fills the width completely and handle border radius */
.fc-prag-visual img {
  width: 100%;
  max-width: none;
  border-radius: 0;
  /* Let container clip it */
  margin: 0;
  display: block;
}

/* ========================================
   Learning Method Section Styles
   ======================================== */

.fc-method {
  padding: 4rem 1rem;
  background: #FAFBFC;
  /* Light gray background to separate from pragmatics */
}

.fc-method-container {
  max-width: 1000px;
  margin: 0 auto;
}

.fc-method-head {
  text-align: center;
  margin-bottom: 3rem;
}

.fc-method-kicker {
  color: #64748B;
  font-size: 1.1rem;
  font-style: italic;
  margin-bottom: 0.5rem;
}

.fc-method-title {
  font-size: 2rem;
  font-weight: 700;
  color: #32413C;
  line-height: 1.4;
  margin-bottom: 0;
}

.fc-method-intro {
  text-align: center;
  color: #4A5568;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.fc-method-steps {
  display: flex;
  flex-direction: column;
  /* Stacked layout as requested */
  gap: 3rem;
  margin-bottom: 4rem;
}

.fc-method-step {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fc-step-media {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fc-step-content-box {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.fc-step-number {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: #FFCE64;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #32413C;
  font-size: 1.25rem;
}

.fc-step-content {
  flex: 1;
}

.fc-step-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #32413C;
  margin-bottom: 0.75rem;
}

.fc-step-text {
  color: #4A5568;
  line-height: 1.6;
  margin: 0;
}

/* Promise Box Styles */
.fc-method-promise {
  background: #FFCE64;
  /* Brand Yellow */
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  color: #32413C;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(255, 206, 100, 0.3);
}

.fc-promise-text {
  font-size: 1.2rem;
  line-height: 1.8;
  margin: 0;
}

.fc-promise-text strong {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.fc-promise-highlight {
  display: inline-block;
  background: #32413C;
  color: #FFCE64;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  margin-top: 1.5rem;
}