@charset "utf-8";
/* CSS Document */

:root {
  /* Brand palette: --navy is the site's main color, --accent the
     secondary/interactive one. Change these two to re-theme the site. */
  --navy: #2c2950;
  --accent: #6B35FF;
  --accent-dark: #5a25ee;
  --chrome-dark: #100e1c; /* header/footer background -- near-black, darker than --navy */

  /* Category tag colors (course/product categories) -- not brand colors */
  --red: #b20000;
  --orange: #ee4410;
  --pink: #e591a4;
  --blue: #417db3;
  --pista: #86bf8c;
  --yellow: #e5b947;
  --lightgrey: #f1f4f8;
  --teal: #48a8c1;
  --lightOrange: #e89854;
  --khakhiBrown: #a99471;
  --grey: #b2b2b1;
  --white: #ffffff;
  --black: #1a1a2e;
  --lavender: #a19bc2;
}

body {
  font-family: "DM Sans", Arial, system-ui, sans-serif;
  background-color: var(--white);
  font-size: 22px;
  line-height: 31px;
  color: var(--black);
}

figure {
  margin: 0;
}

a,
input,
button,
textarea {
  outline: none !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  -ms-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -moz-transition: all ease-in-out 300ms;
}

.container-fluid,
.container {
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.row > * {
  padding-left: 15px;
  padding-right: 15px;
}

p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

p a {
  text-decoration: none;
  color: inherit;
}

p a:hover {
  color: var(--accent);
}

ul li,
ol li {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

ul li a,
ol li a {
  text-decoration: none;
  color: inherit;
}

ul li a:hover,
ol li a:hover {
  color: var(--accent);
}

/* Common Style Start */
.main-title {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 51px;
  line-height: 62px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.main-title * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.section-title {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-title * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.block-title {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 30px;
  line-height: 37px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.block-title * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.small-title {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 22px;
  line-height: 31px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.small-title * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.large-detail {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 19px;
  line-height: 23px;
  font-weight: normal;
}

.large-detail * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.common-detail {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
}

.common-detail-medium {
  font-family: "DM Sans", Arial, sans-serif;
}

.common-detail * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.small-detail {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 26px;
  font-weight: normal;
}

.small-detail * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.sub-title {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 12px;
  line-height: 18px;
  font-weight: normal;
}

.sub-title * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.sub-title-light {
  font-family: "DM Sans", Arial, sans-serif;
}

.detail * {
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

.btn {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  border: 1.5px solid;
  padding: 9px 22px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-black {
  background-color: var(--navy);
  color: var(--white) !important;
  border-color: var(--navy);
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(44, 41, 80, 0.18);
}

.btn-black:hover {
  border-color: var(--navy) !important;
  color: var(--navy) !important;
  background-color: transparent !important;
  box-shadow: none;
}

.btn-white-border {
  border-color: var(--white);
  color: var(--white);
  padding: 9px 29px;
}

.btn-white-border:hover {
  border-color: var(--black) !important;
  color: var(--white) !important;
  background-color: var(--black) !important;
}

/* Common Style End */

/*==================================================================*/
/*========== Header Start ==========*/
/*==================================================================*/
.header-links {
  margin: 0 auto;
}

/* .header-links > ul {
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
} */

.header-top-inner .navbar-nav {
  flex-direction: row;
  margin: 0;
}

/* .header-links > ul li {
	font-family: 'DM Sans';
	font-size: 12px;
	line-height: 18px;
	color: var(--white);
	list-style-type: none;
	padding: 0 13px;
} */

.header-top-inner .navbar-nav .nav-item {
  padding: 0 13px;
}

.header-top-inner .navbar-nav .nav-link {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--white);
  list-style-type: none;
  padding: 13px 0;
}

.header-top-inner .navbar-nav .nav-link.dropdown-toggle::after {
  display: none;
}

.header-links ul li a:hover,
.header-top-inner .navbar-nav .nav-link:hover,
.header-top-inner .navbar-nav .nav-link.active {
  color: var(--accent);
}

.header-top-inner .navbar-nav .dropdown-menu {
  margin: 0;
  padding: 20px 23px;
  border: none;
  min-width: 250px;
  position: absolute;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.header-top-inner .navbar-nav .dropdown-menu .dropdown-item {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 12px;
  line-height: 35px;
  padding: 0;
  background-color: transparent;
  display: inline-block;
  width: auto;
}

.header-top-inner .navbar-nav .dropdown-menu .dropdown-item:hover,
.header-top-inner .navbar-nav .dropdown-menu .dropdown-item.active {
  /* color: var(--red); */
  margin-left: 13px;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  color: var(--black) !important;
}

.header-top {
  /* padding: 9px 0; */
  background-color: var(--chrome-dark);
}

.header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-btn {
  display: flex;
}

.header-btn .btn {
  text-transform: unset;
  padding: 3px 15px;
}

.header-bottom {
  background-color: var(--chrome-dark);
  padding: 16px 0;
}

.header-bottom .container {
  background-color: #eef1f7;
  border-radius: 14px;
  padding: 8px 24px;
}

.header .navbar {
  padding: 0;
  position: relative;
  justify-content: space-between;
}

.header .navbar .large-detail {
  text-transform: uppercase;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 0 auto;
}

.header-right figure {
  display: flex;
}

.add-to-cart {
  display: block;
  position: relative;
  margin: 0 0 0 24px;
  flex: 0 0 auto;
}

.add-to-cart:hover {
  filter: invert(80%);
  -webkit-filter: invert(80%);
}

.add-to-cart span {
  font-size: 9px;
  line-height: 12px;
  color: var(--white);
  width: 16px;
  height: 16px;
  position: absolute;
  right: -14px;
  top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.favourites {
  display: block;
  position: relative;
  margin: 0 0 0 25px;
  flex: 0 0 auto;
}

.favourites:hover {
  filter: invert(80%);
  -webkit-filter: invert(80%);
}

.favourites span {
  width: 4px;
  height: 4px;
  background-color: var(--accent);
  position: absolute;
  right: -4px;
  top: -2px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.user-icon {
  display: block;
  flex: 0 0 auto;
  margin: 0 0 0 29px;
}

.user-icon:hover {
  filter: invert(80%);
  -webkit-filter: invert(80%);
}

.searchbar {
  max-width: 211px;
  width: 100%;
  text-align: right;
  flex: 0 0 auto;
  position: relative;
}

.searchbar .form-control {
  font-size: 12px;
  line-height: 14px;
  background-color: transparent;
  border: none;
  padding: 6px 0 6px 20px;
  color: var(--black);
  border-bottom: 1px solid #2b2e34;
  box-shadow: none;
  text-align: right;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  font-family: "DM Sans";
}

.searchbar .form-control::placeholder {
  color: #9d9c9c;
}

::-webkit-search-cancel-button {
  display: none !important;
}

.search-icon {
  position: absolute;
  left: 0;
  bottom: 6px;
}

.header-left .dropdown-menu {
  min-width: 249px;
  border: none;
  padding: 33px 21px;
  margin: 0;
  /* margin: 31px 0 0; */
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.header-left .dropdown-menu ul {
  padding: 0;
  margin: 0;
}

.header-left .dropdown-menu ul li {
  list-style-type: none;
}

.header-left .dropdown-menu .small-detail {
  line-height: 35px;
}

.header-left .dropdown-menu .dropdown-item {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 35px;
  padding: 0;
  background-color: transparent !important;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.header-left .dropdown-menu .dropdown-item:hover,
.header-left .dropdown-menu .dropdown-item:active,
.header-left .dropdown-menu .dropdown-item.show {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  background-color: transparent;
  margin-left: 13px;
  color: var(--black) !important;
}

.header-left .dropdown-menu .dropdown-menu {
  background-color: #eef1f7;
  min-width: 187px;
  left: auto;
  right: -100%;
  margin: 0;
  padding: 35px 26px;
  min-height: 346px;
  bottom: 0;
  top: -103px;
}

.header-left .dropend .dropdown-toggle::after {
  display: none;
}

.header-left .dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  box-shadow: none;
}

.header-left > .dropdown > .dropdown-toggle {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 19px;
  line-height: 23px;
  text-transform: uppercase;
  margin: 0;
  padding: 31px 0;
  border-bottom: 2px solid transparent;
}

.header-left > .dropdown > .dropdown-toggle:hover,
.header-left > .dropdown > .dropdown-toggle.show {
  border-bottom: 2px solid #2b2e34;
}

.header-left .dropdown .dropdown-toggle::after {
  display: none;
}

.header-links .dropdown-menu {
  padding: 0;
  margin: 0;
}

.header .navbar-collapse {
  flex: 0 0 auto;
}

/*==================================================================*/
/*========== Header End ==========*/
/*==================================================================*/

/*========== Home Page Start ==========*/
.hero-section {
  background-color: var(--navy);
  padding: 70px 0;
  overflow: hidden;
}

.banner-slider {
  opacity: 0;
}

/* Before Slick runs, every slide is a plain stacked block -- with more than
   one hero slide configured, that briefly renders far taller than the
   single-slide height Slick collapses it to, shoving everything below
   (e.g. the category section) down and then sharply back up once Slick
   initializes. Showing only the first slide until then keeps the section's
   height correct throughout and avoids that layout shift. */
.banner-slider:not(.slick-initialized) .banner-item ~ .banner-item {
  display: none;
}

.banner-slider.slick-initialized {
  opacity: 1;
}

.banner-slider .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 30px 0 0;
  list-style: none;
}

.banner-slider .slick-dots li {
  line-height: 0;
}

.banner-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  font-size: 0;
  text-indent: -9999px;
  cursor: pointer;
}

.banner-slider .slick-dots li.slick-active button {
  background-color: var(--accent);
}

/* Full-bleed diagonal-split banner: used for the homepage hero slider and
   the collection/aanbod banners. Distinct from .hero-section/.hero-row
   below, which is the smaller boxed page header shared by blog/location/
   page/teacher templates. */
.split-banner-wrp {
  overflow: hidden;
}

.split-banner-wrp > .container {
  padding-top: 6px;
  padding-bottom: 26px;
}

.split-banner-wrp--hero .split-banner {
  height: clamp(460px, 34vw, 620px);
}

.split-banner {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Fixed (not min-) height: the media column's width scales with the
     viewport (flex 52%), so without a capped, definite height here the
     photo (width:100%; height:100%) would grow ever taller on wide
     screens as it tries to preserve its own aspect ratio. Clamping the
     row's height and relying on object-fit: cover crops the image
     top/bottom past that cap instead of letting it keep growing. */
  height: clamp(400px, 30vw, 470px);
  overflow: hidden;
}

.split-banner-media {
  position: relative;
  flex: 0 0 52%;
  max-width: 52%;
  clip-path: none;
}

.split-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop from the left, not centered -- keeps the subject (usually
     positioned right-of-frame in these photos) on screen instead of
     losing it off the right edge. */
  object-position: right center;
  display: block;
}

.split-banner-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  border: 2px dashed rgba(255, 255, 255, 0.35);
}

.split-banner-media--placeholder i {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.55);
}

.split-banner-content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 40px 0;
}

.split-banner-inner {
  max-width: 560px;
  width: 100%;
  margin-left: 70px;
  padding-right: 40px;
  color: var(--white);
}

.split-banner-eyebrow {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0 0 14px;
}

.split-banner-inner h1 {
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

.split-banner-inner p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 480px;
}

@media (max-width: 991px) {
  .split-banner {
    flex-direction: column;
    height: auto;
  }
  .split-banner-wrp--hero .split-banner {
    height: auto;
  }
  .split-banner-media {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    height: 260px;
    clip-path: none;
  }
  .split-banner-content {
    padding: 30px 0;
  }
  .split-banner-inner {
    margin: 0;
    padding: 0 24px;
  }
}

.hero-row {
  display: flex;
  align-items: center;
  gap: 60px;
}

.hero-media {
  flex: 0 0 340px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  border: 2px dashed rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media i {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.55);
}

.hero-photo {
  flex: 0 0 380px;
  width: 380px;
  height: 280px;
  overflow: hidden;
  clip-path: none;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop from the left, not centered -- see .split-banner-media img above. */
  object-position: right center;
}

.hero-content {
  flex: 1 1 0%;
  color: var(--white);
}

.hero-content h1 {
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.2;
  margin: 0 0 20px;
}

.hero-content p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 30px;
  max-width: 520px;
}

.wv-location-address {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.85);
  margin: -10px 0 20px !important;
}

.wv-location-map-link {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
}

.wv-location-map-link:hover {
  color: var(--white);
}

.hero-quote {
  border-left: 4px solid var(--accent);
  margin: 0 0 20px;
  padding: 0.4em 1.2em;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
}

.hero-cta {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.hero-cta:hover {
  background-color: transparent;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

@media (max-width: 991px) {
  .hero-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .hero-media {
    width: 220px;
    height: 220px;
    flex: 0 0 220px;
  }
  .hero-photo {
    width: 100%;
    height: 220px;
    flex: 0 0 auto;
    clip-path: none;
  }
  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-quote {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

.category-section {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

.category-main .section-title {
  max-width: 385px;
  width: 100%;
  margin: 0 0 30px;
}

.category-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 130px;
  height: calc(100% - 27px);
  margin: 0 0 27px;
  padding: 20px 40px 20px 20px;
  clip-path: none;
  transition: transform .25s ease;
}

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

.category-card-title {
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-transform: uppercase;
}

.category-section .row {
  margin: 0 -18px;
}

.category-section .row > * {
  padding: 0 18px;
}

.category-wrp {
  padding: 41px 0 28px;
}

.intro-block-wrp {
  padding: 60px 0;
}

.angled-media {
  aspect-ratio: 4 / 3;
  background-color: rgba(255, 255, 255, .08);
  border: 2px dashed rgba(255, 255, 255, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: none;
}

.angled-media i {
  font-size: 64px;
  color: rgba(255, 255, 255, .55);
}

@media (max-width: 767px) {
  .angled-media {
    clip-path: none;
    margin-top: 30px;
  }
}

.our-program-top {
  position: relative;
}

.our-program-top .small-detail {
  position: absolute;
  right: 0;
  bottom: 0;
}

.our-program-top .small-detail a {
  border-bottom: 1px solid #707070;
}

.our-program-top .small-detail a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.our-program-title {
  max-width: 434px;
  width: 100%;
  margin: 0 0 38px;
}

.our-program-title .common-detail {
  line-height: 23px;
  margin: 0 0 11px;
  text-transform: uppercase;
}

.our-program-wrp {
  padding: 55px 0 29px;
}

.our-program-item {
  padding: 0 17px;
  position: relative;
  cursor: pointer;
}

.our-program-details .common-detail h5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 48px;
}

.our-program-slider {
  margin: 0 -17px;
  opacity: 0;
}

.our-program-img {
  position: relative;
  margin: 0 0 23px;
  overflow: hidden;
  clip-path: none;
}

/* Marketing-status label -- shared shape/typography for the course-card label
   (.our-program-img .wv-status-badge) and the course-detail date-picker label
   (.wv-program-option .wv-status-badge); colors below apply to both.
   A plain rectangle, not a button -- no border-radius -- and the background
   is 90% opaque rather than solid. */
.wv-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.our-program-img .wv-status-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
}
.wv-program-option .wv-status-badge {
  margin-left: auto;
  flex-shrink: 0;
}

.wv-status-laatste-kans    { background: rgba(232, 152, 84, 0.9); color: #2B2E34; }
.wv-status-laatste-plekken { background: rgba(238, 68, 16, 0.9); color: var(--white); }
.wv-status-instromen       { background: rgba(72, 168, 193, 0.9); color: var(--white); }
.wv-status-wachtlijst      { background: rgba(229, 185, 71, 0.9); color: #2B2E34; }
.wv-status-verwacht        { background: rgba(161, 155, 194, 0.9); color: #2B2E34; }
.wv-status-start-zeker     { background: rgba(20, 33, 61, 0.9); color: var(--white); }
.wv-status-open            { background: rgba(127, 184, 33, 0.9); color: #2B2E34; }
.wv-status-gesloten        { background: rgba(178, 0, 0, 0.9); color: var(--white); }

/* Free-text highlight label (e.g. "Nieuw"), separate from the status label above */
.our-program-img .wv-highlight-label {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px 14px;
  background: rgba(20, 33, 61, 0.9);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.our-program-img img {
  width: 100%;
  height: 261px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.our-program-item:hover .our-program-img img {
  transform: scale(1.08);
}

.our-program-slider.slick-initialized {
  opacity: 1;
}

.our-program-details .common-detail {
  line-height: 24px;
  margin: 0 0 18px;
}

.our-program-details .common-detail span {
  font-family: "DM Sans", Arial, sans-serif;
}

.our-program-details .common-detail p {
  color: var(--accent);
}

/* Course card start date */
.wv-course-startdate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 500;
  color: #666;
  margin-top: 5px;
}

/* Course card price block */
.wv-price-block {
  display: block;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
.wv-program-startdate {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 6px;
}
.wv-program-label {
  display: inline-block;
  color: #333333;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.06);
  margin-top: 4px;
}
.wv-price-main {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: #333333;
}
.wv-price-member {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 1.25rem;
}
.wv-price-label-member {
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
}
.wv-price-label-normal {
  color: #333333;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
}
/* Course detail price -- single price only, no member/regular split */
.wv-price-single {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 13px 16px;
  margin: 24px 0 20px;
}
.wv-price-table-label {
  color: #555;
  font-size: 0.9rem;
  white-space: nowrap;
}
.wv-price-highlight {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--accent);
}

/* Program date radio selector */
.wv-program-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.4;
  font-size: 0.85rem;
}
.wv-program-option:hover {
  border-color: var(--accent);
  background: #f5f1ff;
}
.wv-program-option input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.wv-program-option.is-selected {
  border-color: var(--accent);
  background: #f5f1ff;
  font-weight: 600;
}
.wv-program-option.is-waitlist {
  color: #999;
  border-color: #e5e7eb;
}
.wv-program-option.is-waitlist:hover {
  border-color: #bbb;
  background: #fafafa;
}
/* Two stacked lines inside the option: start date on top, program code +
   title below it (mirrors themes/utrecht/course_show.blade.php). */
.wv-program-option-date {
  display: block;
}
.wv-program-option-code {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
.wv-program-option.is-waitlist .wv-program-option-code {
  color: #999;
}

/* Qty stepper + enroll button */
.wv-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.wv-qty-stepper {
  display: flex;
  align-items: center;
  border: 2px solid #222;
  border-radius: 6px;
  overflow: hidden;
  height: 46px;
  flex-shrink: 0;
}
.wv-qty-dec, .wv-qty-inc {
  background: #fff;
  border: none;
  width: 42px;
  height: 100%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: #222;
  padding: 0;
  transition: background 0.1s;
}
.wv-qty-dec:hover, .wv-qty-inc:hover {
  background: #f0f0ec;
}
.wv-qty-val {
  min-width: 36px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  user-select: none;
}
.wv-enroll-btn {
  flex: 1;
  min-width: 160px;
  padding: 13px 24px;
  font-size: 1rem;
  text-align: center;
}

/* Primary action buttons — consistent across course page and checkout */
.wv-primary-btn {
  display: block;
  width: 100%;
  padding: 13px 24px;
  font-size: 1rem;
  text-align: center;
}

/* Program status note — e.g. "sold out", "opens on X" (course_show.blade.php) */
.wv-status-note {
  display: block;
  background: rgba(20, 33, 61, 0.06);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 20px 0 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

/* Back / secondary step link */
.wv-back-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 0.82rem;
  color: #888;
  text-decoration: none;
}
.wv-back-link:hover {
  color: #555;
  text-decoration: underline;
}

/* Sticky mobile price/enroll bar on the course detail page -- shown once
   #coursePriceBlock has scrolled out of view (see course-sticky-cta.js).
   Desktop stays unaffected: it's always hidden there via the d-lg-none
   class on the element itself. */
.sticky-course-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--white);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

.sticky-course-cta[hidden] {
  display: none;
}

.sticky-course-cta-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
}

.sticky-course-cta-program {
  font-size: 0.75rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-course-cta-value {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
  white-space: nowrap;
}

.sticky-course-cta-btn {
  flex-shrink: 0;
  padding: 12px 22px;
  font-size: 0.95rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.our-program-details .btn {
  padding: 6px 17px;
}

.slick-arrow {
  border: none;
  background-color: var(--navy);
  width: 55px;
  height: 55px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  z-index: 1;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transform: translate(0, -100px);
  -webkit-transform: translate(0, -100px);
  -moz-transform: translate(0, -100px);
  -ms-transform: translate(0, -100px);
  -o-transform: translate(0, -100px);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.slick-arrow svg {
  max-width: 100%;
  height: auto;
  width: 20px;
}

.slick-arrow:hover {
  background-color: var(--accent);
}

.slick-prev {
  left: -12px;
}

.slick-next {
  right: -12px;
}

.info-block-main .row {
  align-items: center;
  margin: 0 -19px;
}

.info-block-main .row > * {
  padding: 0 19px;
}

.info-block-left {
  color: var(--white);
}

.info-block-left .section-title {
  margin: 0 0 34px;
}

.info-block-left .detail {
  margin: 0 0 36px;
}

.info-block-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.you-might-like-wrp {
  padding: 60px 0;
  background-color: var(--lightgrey);
}

.you-might-like-wrp.bg-white {
  background-color: #fff;
}

.you-might-like-main {
  margin: 0;
  padding: 0;
}

.you-might-like-main > .common-detail {
  text-align: left;
  margin: 0 0 29px;
}

.you-might-like-slider {
  margin: 0 -17px;
  opacity: 0;
}

.you-might-like-slider.slick-initialized {
  opacity: 1;
}

.you-might-like-slider .our-program-img img {
  height: 190px;
}

.you-might-like-slider .our-program-details .common-detail {
  margin: 0 0 21px;
}

.you-might-like-slider .slick-list {
  margin: 0 -5px;
}
.reviews-main {
  padding: 56px 0 42px;
  border-top: 2px dotted #707070;
}

.reviews-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 38px;
  position: relative;
}

.reviews-title > .common-detail {
  text-transform: uppercase;
}

.reviews-title .small-detail {
  position: absolute;
  right: 0;
  top: -3px;
}

.reviews-title .small-detail a {
  display: block;
  border-bottom: 1px solid #707070;
}

/* .reviews-title .small-detail a {
  position: relative;
  display: block;
  text-decoration: none;
}

.reviews-title .small-detail a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1px;
  width: 100%;
  background-color: #707070;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
}

.reviews-title .small-detail a:hover::after {
  transform: scaleX(1);

} */

.reviews-title .small-detail a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.reviews-block {
  padding: 35px 58px;
  background-color: #f2efed;
  height: 100%;
}

.reviews-block .sub-title p span {
  text-transform: uppercase;
}

.reviews-item {
  padding: 0 16px;
  height: auto !important;
}

.reviews-slider {
  margin: 0 -16px;
  opacity: 0;
}

.reviews-slider.slick-initialized {
  opacity: 1;
}

.reviews-slider .slick-track {
  display: flex;
}

.reviews-block > .common-detail {
  text-transform: uppercase;
}

.reviews-block .sub-title p:last-child {
  margin: 20px 0 0;
}

.reviews-block .sub-title .sub-title-light p {
  margin: 0 0 15px;
}

.reviews-block .sub-title .sub-title-light p:last-child {
  margin-bottom: 0;
}

.reviews-slider .slick-arrow {
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
}

.ratings {
  padding: 10px 0 30px;
}

.ratings ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.ratings ul li {
  list-style-type: none;
}

.ratings ul li img {
  width: 20px;
}

.our-offer-wrp {
  background-color: #eef1f7;
  padding: 47px 0 43px;
}

.our-offer-main .large-detail {
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 19px;
}

.our-offer-links ul {
  padding: 0;
  margin: 0;
}

.our-offer-links ul li {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  list-style-type: none;
  padding: 0 0 23px;
}

.our-offer-links ul li li {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 26px;
  padding: 0 0 1px;
}

.our-offer-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slider-details-wrp .info-block-left {
  text-align: left;
}

.slider-details-wrp .info-block-main {
  padding: 0 0 37px;
}

.slider-details-wrp .our-program-details .common-detail p {
  color: var(--white);
}

/*========== Home Page End ==========*/

/*========== Course Details Page Start ==========*/
.course-details-wrp {
  padding: 31px 0 32px;
}

.course-details-img {
  margin: 0 0 35px;
}

/* Jump menu under the course image to the accordion sections further down */
.course-anchor-nav {
  margin: -15px 0 25px;
}

.course-anchor-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.course-anchor-nav li {
  flex: 1 1 120px;
}

.course-anchor-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  background: #f5f4f0;
  border: 1px solid #e5e7eb;
  border-radius: 50px;
  padding: 7px 16px;
  min-height: 36px;
  text-decoration: none;
  transition: 0.15s;
}

.course-anchor-nav a:hover,
.course-anchor-nav a:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: #f5f1ff;
}

.course-details-img img {
  width: 100%;
}

.course-details-bottom .common-detail {
  font-family: "DM Sans", Arial, sans-serif;
}

.course-details-bottom .common-detail:first-child {
  line-height: 24px;
  margin: 0 0 25px;
}

.course-details-bottom .large-detail {
  line-height: 30px;
  margin: 0 0 19px;
}

.course-details-bottom .common-detail:last-child {
  line-height: 30px;
}

/* Bootstrap row/col gutter used only by product_show.blade.php, which still
   uses .row/.col-* + .course-details-left/-right (course_show.blade.php
   moved to .course-details-grid below and no longer has a .row here). */
.course-details-main > .row {
  margin: 0 -17px;
}

.course-details-main > .row > * {
  padding: 0 17px;
}

/* Course detail layout: image / price+CTA "buy box" / description+accordion.
   CSS Grid (not Bootstrap's row/col) so the areas can be reordered per
   breakpoint independently -- mobile stacks image -> price -> content;
   desktop puts price beside image+content stacked in the wider column,
   with the "price" area spanning both rows so it has room to stick. */
.course-details-grid {
  display: grid;
  grid-template-areas:
    "image"
    "price"
    "content";
  row-gap: 30px;
}

.course-details-image-area {
  grid-area: image;
}

.course-details-price-area {
  grid-area: price;
}

.course-details-content-area {
  grid-area: content;
}

@media (min-width: 992px) {
  .course-details-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 34px;
    grid-template-areas:
      "price image"
      "price content";
    align-items: start;
  }

  .course-details-price-area {
    position: sticky;
    /* Offset below the sticky site header (see script.js), not just the
       viewport top -- otherwise this box sticks under the header instead
       of below it. The fallback covers the instant before JS measures it. */
    top: calc(var(--sticky-header-height, 90px) + 24px);
  }
}

.course-details-title .block-title {
  max-width: 300px;
  margin: 0 0 1px;
}

.course-details-title .small-title {
  font-family: "DM Sans", Arial, sans-serif;
  margin: 0 0 10px;
}

.course-details-title {
  margin: 0 0 23px;
  /* Landing spot for the mobile program-change reload (see #course-title in
     course_show.blade.php) -- offset below the sticky site header so the
     title isn't hidden underneath it. */
  scroll-margin-top: calc(var(--sticky-header-height, 90px) + 16px);
}

.course-details-price .block-title,
.course-details-price .small-title {
  color: var(--accent);
}

.course-details-price .block-title {
  margin: 0 0 10px;
}

.choose-date {
  padding: 0;
}

.choose-date .form-select {
  font-size: 14px;
  line-height: 17px;
  text-transform: uppercase;
  color: #ccc6bc;
  padding: 13px 24px;
  border: 1px solid #2b2e34;
  background-image: url("../images/down-arrow.svg");
  background-repeat: no-repeat;
  background-size: 16px 8px;
  background-position: right 19px center;
  box-shadow: none;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  font-family: "DM Sans";
}

.course-faq-wrp > .small-detail {
  font-family: "DM Sans", Arial, sans-serif;
  margin: 0 0 7px;
  text-transform: uppercase;
}

.course-faq-block .accordion-button {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 26px;
  text-transform: uppercase;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--black);
}

.course-faq-block .accordion-item {
  padding: 32px 0;
  border: none;
  border-top: 1px solid #707070;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  /* Landing spot for the course-anchor-nav pills (see course-anchor-nav.js) --
     offset below the sticky site header so the clicked section's title isn't
     hidden underneath it. */
  scroll-margin-top: calc(var(--sticky-header-height, 90px) + 16px);
}

.course-faq-block .accordion-body {
  padding: 16px 0 0;
}

.course-faq-block .accordion-button::before {
  content: "";
  width: 10px;
  height: 2px;
  position: absolute;
  right: 0;
  background-image: none;
  background-color: var(--black);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.course-faq-block .accordion-button::after {
  content: "";
  width: 2px;
  height: 10px;
  position: absolute;
  right: 4px;
  background-image: none;
  background-color: var(--black);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.course-faq-block .accordion-button:not(.collapsed)::after {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.course-faq-wrp {
  padding: 75px 0 0;
}

.lecturere-right .small-detail h5 {
  font-family: "DM Sans", Arial, sans-serif;
  text-transform: uppercase;
}

.course-details-right {
  width: 100%;
}

@media (min-width: 992px) {
  /* Only cap the buy box's own width once it's a sticky sidebar; on mobile it
     should fill the full column (see .course-details-grid). */
  .course-details-right {
    max-width: 395px;
  }
}

.lecturere-details .row {
  margin: 0 -9px;
  align-items: center;
}

.lecturere-details .row > * {
  padding: 0 9px;
}

.lecturere-details {
  margin: 0 0 14px;
}

.lecturere-bottom .small-detail {
  margin: 0 0 26px;
}

/*========== Course Details Page End ==========*/

/*========== Img text Grid Page Start ==========*/
.img-text-grid-main {
  max-width: 756px;
  width: 100%;
  margin: 0 auto;
}

.grid-img img {
  width: 100%;
}

.img-grid-row .row {
  margin: 0 -17px;
}

.img-grid-row .row > * {
  padding: 0 17px;
}

.img-grid-row {
  padding: 39px 0 47px;
}

.text-grid-detail .large-detail {
  line-height: 30px;
  margin: 0 0 19px;
}

.text-grid-detail .common-detail {
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 24px;
}

.text-grid-detail {
  padding: 0 0 62px;
}

.img-text-grid-wrp {
  padding: 30px 0 33px;
}
/*========== Img text Grid Page End ==========*/

/*==================================================================*/
/*========== New Class Add End ==========*/
/*==================================================================*/

.bg-khakhibrown {
  background-color: var(--khakhiBrown);
}

.bg-red {
  background-color: var(--red);
}

.bg-navy {
  background-color: var(--navy);
}

.bg-accent {
  background-color: var(--accent);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-pista {
  background-color: var(--pista);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-lightgrey {
  background-color: var(--lightgrey);
}

.bg-teal {
  background-color: var(--teal);
}

.bg-lightorange {
  background-color: var(--lightOrange);
}

.bg-grey {
  background-color: var(--grey);
}

.bg-white {
  background-color: var(--white);
}

.bg-black {
  background-color: var(--black);
}

.bg-lavender {
  background-color: var(--lavender);
}

/*==================================================================*/
/*========== Footer Start ==========*/
/*==================================================================*/
.footer {
  padding: 68px 0 60px 0;
  background-color: var(--chrome-dark);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 0 0 40px;
}

.footer-col-title {
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-col p,
.footer-col ul,
.footer-col li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col p {
  margin-bottom: 10px;
}

.footer-col a,
.footer-col p {
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 26px;
}

.footer-col ul li a {
  display: inline-block;
}

.footer-col a:hover {
  color: var(--accent);
}

.social-links {
  display: flex;
  gap: 12px;
}

.footer-col .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--navy);
  font-size: 15px;
  transition: .3s;
}

.social-links a:hover {
  background-color: var(--accent);
  color: var(--white);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.footer-bottom-inner p {
  color: rgba(255, 255, 255, .6);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 12px;
  margin: 0;
}

.footer-bottom-inner a {
  color: rgba(255, 255, 255, .6);
  text-decoration: underline;
}

.footer-bottom-inner a:hover {
  color: var(--white);
}

@media (max-width: 991px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

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

/*==================================================================*/
/*========== Footer End ==========*/
/*==================================================================*/

/* Subcollection link nav inside the collection banner */
.subcollection-nav {
  margin: 26px 0 0;
}

.subcollection-nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 4px 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.subcollection-nav ul::-webkit-scrollbar {
  display: none;
}

.subcollection-nav li {
  list-style: none;
  flex: 0 0 auto;
}

.subcollection-nav a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  padding: 9px 20px;
  min-height: 44px;
  text-decoration: none;
  transition: 0.2s;
}

.subcollection-nav a:hover,
.subcollection-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.25);
  border-color: var(--white);
  color: var(--white);
}

.subcollection-nav a.active {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

@media (min-width: 992px) {
  .subcollection-nav ul {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.category-filter-main .our-program-item {
  padding: 0;
}

.category-filter-main .row > * {
  padding: 0 17px;
}

.category-filter-main .row {
  margin: 0 -15px;
}

.category-filter-main .our-program-item {
  margin-bottom: 46px;
}

.category-filter-wrp {
  padding: 25px 0 63px 0;
}

.category-filter-inner {
  margin-bottom: 46px;
}

.category-btns {
  display: flex;
  justify-content: center;
}

.category-btns .btn {
  margin-right: 13px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 17px;
  padding: 13px 25px;
  max-width: 158px;
  width: 100%;
}

.category-btns .active {
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
}

.category-btns > *:last-child {
  margin-right: 0;
}

.category-btns .active  img {
  margin-right: 6px;
}

.category-btns .btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.category-btns .btn:hover img {
  filter: invert(1);
}

/*==================================================================*/
/*========== Course filter sidebar / offcanvas Start ==========*/
/*==================================================================*/

.course-filter-layout {
  align-items: flex-start;
}

.course-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.course-results-count {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
}

.course-results-sort .filter-select {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50px;
  padding: 9px 34px 9px 18px;
  min-height: 44px;
  background: var(--white) url("../images/dd-filter.svg") no-repeat right 16px center;
  background-size: 12px 6px;
  color: var(--black);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.course-results-sort .filter-select:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: none;
}

/* Mobile "Filteren" toggle button */
.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 50px;
  padding: 11px 22px;
  margin-bottom: 20px;
  min-height: 44px;
  cursor: pointer;
  transition: 0.2s;
}

.filter-toggle-btn:hover {
  background: var(--navy);
  color: var(--white);
}

.filter-toggle-btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.filter-count-badge,
.filter-apply-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-count-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50px;
  background: var(--accent);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Panel: offcanvas below lg, static sticky sidebar from lg up (Bootstrap 5.3 responsive offcanvas) */
.course-filter-panel {
  --bs-offcanvas-width: min(380px, 92vw);
  --bs-offcanvas-padding-x: 24px;
  --bs-offcanvas-padding-y: 22px;
  --bs-offcanvas-bg: var(--white);
}

.course-filter-panel .offcanvas-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 18px;
}

.course-filter-panel .offcanvas-title {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.course-filter-panel .btn-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 14px;
  opacity: 1;
  margin: -12px -12px -12px auto;
}

.course-filter-panel .offcanvas-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.course-filter-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.filter-scroll-area {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 2px;
}

.filter-sidebar-head {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.filter-sidebar-head h3 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.filter-clear-link,
.filter-reset-link {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
}

.filter-clear-link:hover,
.filter-reset-link:hover {
  color: var(--accent);
}

/* Active filter pills */
.active-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 13px;
  border: 1px solid var(--navy);
  color: var(--navy);
  background: var(--white);
  border-radius: 50px;
  padding: 5px 6px 5px 14px;
}

.filter-pill a {
  color: var(--navy);
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-pill a:hover,
.filter-pill a:focus-visible {
  background: var(--navy);
  color: var(--white);
  outline: none;
}

/* Accordion */
.filter-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  background: transparent;
}

.filter-accordion .accordion-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.filter-accordion .accordion-button {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  background: transparent;
  padding: 16px 4px;
  box-shadow: none;
  min-height: 44px;
}

.filter-accordion .accordion-button:not(.collapsed) {
  color: var(--navy);
  background: transparent;
  box-shadow: none;
}

.filter-accordion .accordion-button:focus {
  box-shadow: none;
}

.filter-accordion .accordion-button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

.filter-accordion .accordion-button::after {
  width: 12px;
  height: 12px;
  background-size: 12px;
}

.filter-accordion .accordion-body {
  padding: 0 4px 16px;
}

.filter-check-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.filter-check-list .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  margin: 0;
  min-height: 44px;
}

.filter-check-list .form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.filter-check-list .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.filter-check-list .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(107, 53, 255, 0.3);
  border-color: var(--accent);
}

.filter-check-list .form-check-label {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 15px;
  color: var(--black);
  cursor: pointer;
  width: 100%;
}

/* Availability switch */
.filter-availability {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 2px 4px;
  margin: 0;
  min-height: 44px;
}

.filter-availability .form-check-input {
  width: 40px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.filter-availability .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.filter-availability .form-check-label {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
}

/* Apply / clear footer, pinned to the bottom of the panel */
.filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  margin-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.filter-apply-btn {
  border-radius: 50px;
  padding: 12px 26px;
  font-size: 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: opacity .15s ease;
}

/* No unapplied changes yet -- de-emphasize so it's clear there's nothing to apply */
.filter-apply-btn:disabled {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--white) !important;
  opacity: .35;
  cursor: not-allowed;
}

@media (min-width: 992px) {
  .course-filter-layout {
    /* Stretch the filter column to match the (taller) results column so
       the sticky panel below has room to stick as the page scrolls --
       with align-items: flex-start (needed for the mobile toggle button)
       the column is exactly as tall as the panel and sticky never engages. */
    align-items: stretch;
  }

  .course-filter-col {
    position: relative;
  }

  .course-filter-panel {
    position: sticky;
    /* Offset below the sticky site header (see script.js), not just the
       viewport top -- otherwise this panel sticks under the header. */
    top: calc(var(--sticky-header-height, 90px) + 24px);
    max-height: calc(100vh - var(--sticky-header-height, 90px) - 48px);
    /* Clip to that cap instead of letting a tall filter list spill past it --
       without this, overflow stayed visible and the sticky panel's own
       content would render past the viewport (looking like it "disappeared"
       behind the results column) instead of scrolling internally. */
    overflow: hidden;
  }

  .course-filter-panel .offcanvas-body {
    /* Bootstrap's responsive offcanvas sizes .offcanvas-body to its content
       (flex-grow: 0) at this breakpoint, so it never actually reached the
       panel's max-height above for .filter-scroll-area's own overflow to
       kick in. Growing it to fill the panel is what makes that inner
       scroll area (not the whole sticky panel) the thing that scrolls. */
    flex-grow: 1;
    min-height: 0;
  }

  .filter-check-list {
    max-height: none;
  }
}

/*==================================================================*/
/*========== Course filter sidebar / offcanvas End ==========*/
/*==================================================================*/

/* Main-collection landing page: one preview section per subcollection */
.subcollection-section {
  margin-bottom: 50px;
}

.subcollection-section .row {
  margin: 0 -15px;
}

.subcollection-section .row > * {
  padding: 0 15px;
}

.subcollection-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.subcollection-section-head h2 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
  margin: 0;
}

/*category page*/

/*breadcrumb*/

.breadcrumb-wrp {
  padding: 31px 10px;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
}

.breadcrumb-wrp::after {
  position: absolute;
  content: "";
  bottom: 0;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  z-index: -1;
}

.breadcrumb-wrp,
.breadcrumb {
  margin-bottom: 0;
}

.breadcrumb {
  justify-content: center;
}

.breadcrumb-item {
  font-size: 12px;
  line-height: 18px;
  font-family: "DM Sans", Arial, sans-serif;
  color: var(--grey);
  text-transform: uppercase;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--grey);
}

.breadcrumb-item.active {
  color: var(--black);
}

/* .breadcrumb-wrp .breadcrumb>*:first-child {
	color: var(--black);
} */

/*breadcrumb*/

/*teachers overview*/

.teachers-img {
  max-width: 360px;
  height: 262px;
}

.teachers-img * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teachers-right {
  max-width: 746px;
  margin: 0 0 0 auto;
}

.teachers-right .small-title {
  font-family: "DM Sans", Arial, sans-serif;
  margin: 17px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.teachers-right .common-detail {
  margin-bottom: 17px;
  font-family: "DM Sans", Arial, sans-serif;
  text-transform: uppercase;
}

.teachers-right a {
  font-size: 12px;
  line-height: 18px;
  font-family: "DM Sans", Arial, sans-serif;
}

.teachers-right a:hover {
  color: var(--accent);
}

.teachers-overview-main .row {
  align-items: center;
}

.teachers-overview-flx {
  padding: 31px 0;
  border-bottom: 2px dotted #707070;
}

.teachers-overview-flx .row {
  align-items: center;
}

.teachers-overview-wrp {
  margin-bottom: 59px;
}

.teachers-overview-blocks {
  cursor: pointer;
  position: relative;
  transition: 0.4s;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
}

.teachers-overview-blocks:hover {
  background: var(--lightgrey);
}

.teachers-overview-detail-main {
  max-width: 758px;
  margin: 0 auto;
}

.teachers-overview-detail-main .large-detail h5 {
  line-height: 30px;
  margin-bottom: 18px;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
}

.teachers-overview-detail-main .large-detail p {
  font-family: "DM Sans", Arial, sans-serif;
  margin-bottom: 35px;
  font-size: 16px;
  line-height: 24px;
}

.teachers-overview-detail-wrp {
  padding-top: 50px;
  padding-bottom: 61px;
}

.teachers-overview-courses .our-program-title {
  max-width: 100%;
}

.our-program-wrp.teachers-overview-courses {
  padding: 0 0 47px 0;
}

.our-program-wrp.teachers-overview-courses .our-program-main {
  padding: 28px 0 0 0;
  border-top: 2px dotted #707070;
}

/*teachers overview*/

/* ===== FAQ page (search + category sidebar + accordion) ===== */
.faq-page-wrp {
  padding: 60px 0;
}

.faq-page-header {
  margin-bottom: 50px;
}

/* Generic reusable search bar (FAQ listing, teacher listing, ...) */
.page-search-wrap {
  margin-bottom: 40px;
}

.page-search {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.page-search input {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 30px;
  padding: 14px 20px 14px 46px;
  font-family: "DM Sans", Arial, sans-serif;
}

.page-search i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.faq-category-block {
  margin-bottom: 40px;
}

.faq-category-title {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 22px;
  margin-bottom: 10px;
}

.faq-categories-nav {
  background-color: var(--lightgrey);
  border-radius: 8px;
  padding: 24px;
  position: sticky;
  top: 140px;
}

.faq-categories-nav h3 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.faq-categories-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-categories-nav li {
  margin-bottom: 10px;
}

.faq-categories-nav a {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
}

.faq-categories-nav a:hover {
  color: var(--accent);
}

.faq-no-results,
.teacher-no-results {
  font-family: "DM Sans", Arial, sans-serif;
  color: #666;
  text-align: center;
  padding: 40px 0;
  width: 100%;
}

@media (max-width: 991px) {
  .faq-categories-nav {
    position: static;
    margin-bottom: 30px;
  }
}

/*text page*/
.text-page-inner .small-title {
  margin-bottom: 58px;
}

.text-page-wrapper {
  padding: 39px 0 161px 0;
}

.text-page-inner {
  max-width: 758px;
  margin: 0 auto;
}
.text-page-inner .text-page-block .large-detail h5 {
  font-size: 19px;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 19px;
}

.text-page-inner .text-page-block .large-detail p {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 20px;
}

.text-page-inner a {
  color: var(--accent);
  text-decoration: underline;
}
/*text page*/

/* ── Rich-text prose block ─────────────────────────────────────────────── */
/* Apply .wv-prose to any container that holds CKEditor / TinyMCE output.  */
.wv-prose {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--black);
}
.wv-prose h1 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 30px;
  line-height: 1.25;
  margin: 1.5em 0 .5em;
  font-weight: 700;
}
.wv-prose h2 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 24px;
  line-height: 1.3;
  margin: 1.4em 0 .45em;
  font-weight: 700;
}
.wv-prose h3 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.35;
  margin: 1.3em 0 .4em;
  font-weight: 700;
}
.wv-prose h4 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  margin: 1.2em 0 .35em;
  font-weight: 700;
}
.wv-prose h5,
.wv-prose h6 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 1em 0 .3em;
  font-weight: 700;
}
.wv-prose p {
  margin: 0 0 1em;
}
.wv-prose ul,
.wv-prose ol {
  margin: 0 0 1em 1.4em;
  padding: 0;
}
.wv-prose ul { list-style: disc; }
.wv-prose ol { list-style: decimal; }
.wv-prose li { margin-bottom: .35em; }
.wv-prose strong, .wv-prose b { font-family: "DM Sans"; font-weight: 700; }
.wv-prose em, .wv-prose i { font-style: italic; }
.wv-prose a { color: var(--accent); text-decoration: underline; }
.wv-prose a:hover { color: var(--accent); }
.wv-prose blockquote {
  border-left: 4px solid var(--accent);
  margin: 1.2em 0;
  padding: .6em 1.2em;
  color: #555;
  font-style: italic;
}
.wv-prose hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5em 0;
}
.wv-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
  font-size: 15px;
}
.wv-prose table th,
.wv-prose table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}
.wv-prose table th { font-family: "DM Sans"; font-weight: 700; background: #f5f5f5; }
.wv-prose img { max-width: 100%; height: auto; border-radius: 4px; margin: .5em 0; }
/* First child never gets top margin so the block doesn't start with whitespace */
.wv-prose > *:first-child { margin-top: 0; }
.wv-prose > *:last-child  { margin-bottom: 0; }
/* ── end .wv-prose ──────────────────────────────────────────────────────── */

/*link animation*/
.small-detail.link-animate a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.small-detail.link-animate a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #707070;
  transition: width 0.4s ease, opacity 0.4s ease;
  opacity: 1;
  transform-origin: left;
}
.small-detail.link-animate a:hover::after {
  width: 0;
  opacity: 0;
}
.small-detail.link-animate a {
  border-bottom: 1px solid transparent;
}
/*link animation*/


/*# uform */
.uform .form-label {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: #000;
  margin-bottom: 5px;
}

.uform .form-input, .uform .form-textarea, .uform .form-select {
  width: 100%;
  border: 1px solid #2B2E34;
  border-radius: 0;
  padding: 10px;
  font-size: 14px;
  color: #2B2E34;
}


/* popup and form styles */

.popup-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  /* Above the sticky header and the mobile sticky course CTA bar (both
     z-index: 1030), otherwise those fixed bars render over the popup's
     top/bottom edges instead of the popup covering them. */
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup-wrapper .popup-body {
  max-width: 560px;
}
@media (max-width: 767px) {
  .popup-wrapper .popup-body {
    padding: 0 15px;
  }
}
.popup-wrapper .popup-body-2 {
  max-width: 750px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .popup-wrapper .popup-body-2 {
    max-width: 720px;
  }
}
@media (max-width: 767px) {
  .popup-wrapper .popup-body-2 {
    padding: 0 15px;
  }
}

.popup-wrap {
  background-color: var(--white);
  border-radius: 20px;
  overflow: hidden;
}
.popup-wrap .thumb {
  position: relative;
}
.popup-wrap .thumb img {
  width: 100%;
}
.popup-wrap .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 33, 61, 0.55) 0%, rgba(20, 33, 61, 0) 35%);
  pointer-events: none;
}
.popup-wrap .thumb .close {
  z-index: 10;
}
.popup-wrap .thumb .close a,
.popup-close-btn {
  position: absolute;
  right: 20px;
  top: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 33, 61, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s;
}
.popup-close-btn:hover {
  background: var(--accent);
}
.popup-wrap .content {
  padding: 35px 35px 30px;
  background-color: var(--white);
}
@media (max-width: 767px) {
  .popup-wrap .content {
    padding: 25px 25px 20px;
  }
}
.popup-wrap .content .title,
.nice-form .title {
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 12px;
}
@media (max-width: 767px) {
  .popup-wrap .content .title {
    font-size: 20px;
  }
}
.popup-wrap .content p,
.nice-form  p {
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: #444;
  margin-bottom: 22px;
}
@media (max-width: 767px) {
  .popup-wrap .content p {
    font-size: 15px;
  }
}
.popup-wrap .content form .input-wrap,
.nice-form  .row {
  margin-bottom: 16px;
}
.popup-wrap .content form .input-wrap .nice-select,
.nice-form  .nice-select,
.nice-form textarea {
  width: 100%;
  border: 1px solid #2B2E34;
  border-radius: 50px;
  color: #000;
  padding: 0 30px;
}

.nice-form textarea {
  height: 125px;
}
.popup-wrap .content form .input-wrap .nice-select:after,
.nice-form .nice-select:after {
  width: 8px;
  height: 8px;
  right: 20px;
}
.popup-wrap .content form .input-wrap input,
.nice-form .form-group input {
  width: 100%;
  height: 44px;
  border: 1px solid #d8d8d3;
  border-radius: 50px;
  padding: 5px 22px;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.popup-wrap .content form .input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(107, 53, 255, 0.2);
}


.popup-wrap .content form .input-wrap input::-webkit-input-placeholder,
.nice-form .form-group input::-webkit-input-placeholder {
  color: #000;
}
.popup-wrap .content form .input-wrap input:-moz-placeholder,
.nice-form .form-group input::-webkit-input-placeholder {
  color: #000;
}
.popup-wrap .content form .input-wrap input::-moz-placeholder,
.nice-form .form-group input::-moz-placeholder {
  color: #000;
}
.popup-wrap .content form .input-wrap input:-ms-input-placeholder,
.nice-form  .form-group input:-ms-input-placeholder {
  color: #000;
}
.popup-wrap .content form .btn-wrap,
.nice-form .btn-wrap {
  margin-bottom: 25px;
}

.nice-form {
  margin-bottom: 100px;
}

.nice-form .btn {
  margin-top:20px;
}

.nice-form .form-group {
  margin-bottom:20px;
}

.nice-form .form-group label {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: #000;
  margin-top: 10px;
  padding-left:15px;
  margin-bottom:5px;
}

.popup-wrap .content form .btn-wrap button:not(.btn),
.nice-form .btn {
  width: 100%;
  height: 42px;
  border: 1px solid var(--navy);
  border-radius: 10px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: var(--navy);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popup-wrap .content form .btn-wrap button:not(.btn):hover,
.nice-form .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(44, 41, 80, 0.18);
}
.popup-wrap.popup-shadow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.popup-wrap .content form .newsletter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #444;
  font-size: 14px;
  padding-bottom: 12px;
}
.popup-wrap .content form .newsletter-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.popup-wrap-2 {
  position: relative;
  padding: 65px 30px 40px;
  text-align: center;
  background-color:#ffffff;
}
.popup-wrap-2 .close {
  position: absolute;
  right: 25px;
  top: 20px;
  z-index: 10;
}
.popup-wrap-2 .close a {
  color: #000;
  font-size: 20px;
}
.popup-wrap-2 .title {
  font-size: 30px;
  font-weight: 900;
  line-height: 30px;
  color: #000;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .popup-wrap-2 .title {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .popup-wrap-2 p {
    font-size: 16px;
  }
}
.popup-wrap-2 form {
  padding: 0 60px;
  text-align: left;
}
@media (max-width: 767px) {
  .popup-wrap-2 form {
    padding: 0;
  }
}
.popup-wrap-2 form .input-wrap {
  margin-bottom: 20px;
}
.popup-wrap-2 form .input-wrap input {
  width: 100%;
  height: 42px;
  border: 1px solid #2B2E34;
  border-radius: 50px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.popup-wrap-2 form .input-wrap input::-webkit-input-placeholder {
  color: #000;
}
.popup-wrap-2 form .input-wrap input:-moz-placeholder {
  color: #000;
}
.popup-wrap-2 form .input-wrap input::-moz-placeholder {
  color: #000;
}
.popup-wrap-2 form .input-wrap input:-ms-input-placeholder {
  color: #000;
}
.popup-wrap-2 form .input-heading {
  font-size: 19px;
  font-weight: 500;
  color: #000;
  margin-bottom: 30px;
}
.popup-wrap-2 form .input-checkbox {
  margin-bottom: 5px;
}
.popup-wrap-2 form .input-checkbox label {
  font-size: 16px;
  font-weight: 300;
  color: #000;
}
.popup-wrap-2 form .input-radio {
  margin-bottom: 20px;
}
.popup-wrap-2 form .input-radio label {
  font-size: 16px;
  font-weight: 300;
  color: #000;
}
.popup-wrap-2 form .input-btn {
  text-align: center;
}
.popup-wrap-2 form .input-btn button {
  display: inline-block;
  border-radius: 50px;
  padding: 15px 32px;
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  border: 0;
  background: #B4DAC3;
}
.popup-wrap-2.popup-shadow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}


/* ── Checkout / cart text sizing ── */
.faq-title {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
.wv-cart-layout p,
.wv-cart-layout .form-label,
.wv-cart-layout label,
.wv-step2-card p,
.wv-step2-card .form-label,
.wv-step2-card label {
  font-size: 16px;
  line-height: 1.5;
}
.wv-cart-layout .form-control,
.wv-cart-layout .form-select,
.wv-step2-card .form-control,
.wv-step2-card .form-select {
  font-size: 16px;
}
.wv-cart-layout .alert,
.content > .container .alert {
  font-size: 16px;
  line-height: 1.5;
}
.wv-step2-card {
  background: #f8f8f4;
  border-radius: 6px;
  padding: 20px 24px;
}
.wv-step2-card-title {
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.wv-step2-card-subtitle {
  font-size: .85rem;
  color: #666;
  margin-bottom: 16px;
}
/* Recommendation-widget loading skeleton (home + course_show course cards) */
.reco-skeleton-card { pointer-events: none; }
.reco-skeleton-card .our-program-img { aspect-ratio: 360 / 261; overflow: hidden; background: #e9e9e9; }
.reco-skeleton-card .our-program-img img { visibility: hidden; }
.reco-skeleton-card .reco-title-text,
.reco-skeleton-card .wv-price-main {
    color: transparent !important; display: inline-block;
}
.reco-skeleton-card .reco-title-text::before,
.reco-skeleton-card .wv-price-main::before {
    content: ''; display: inline-block; height: 16px; border-radius: 4px; background: #e9e9e9;
}
.reco-skeleton-card .reco-title-text::before { width: 160px; }
.reco-skeleton-card .wv-price-main::before { width: 90px; }
.reco-skeleton-card .btn-black {
    color: transparent !important; background: #e9e9e9 !important; border-color: #e9e9e9 !important;
}

@keyframes reco-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.reco-skeleton-card .our-program-img,
.reco-skeleton-card .reco-title-text::before,
.reco-skeleton-card .wv-price-main::before,
.reco-skeleton-card .btn-black {
    animation: reco-shimmer 1.4s ease-in-out infinite;
}

/* ===== Site header rebuild (static demo content) ===== */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Meta bar (dark navy, header-top) */
.header-top-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-search {
  display: flex;
  align-items: center;
}

.header-search-form {
  overflow: hidden;
}

.header-search-form input {
  width: 0;
  padding: 8px 0;
  margin-right: 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 13px;
  opacity: 0;
  transition: width .3s ease, opacity .3s ease, padding .3s ease, margin-right .3s ease;
}

.header-search-form input::placeholder {
  color: rgba(255, 255, 255, .65);
}

/* Bootstrap's .form-control:focus (higher specificity than the rule above)
   otherwise slaps a white background + blue border/glow onto this input
   the instant JS calls .focus() on it -- kill that here so it stays the
   transparent underline style on the dark bar. */
.header-search-form input:focus {
  background: transparent;
  border-color: transparent;
  border-bottom-color: rgba(255, 255, 255, .5);
  box-shadow: none;
  outline: none;
}

.header-search.active .header-search-form input {
  width: 260px;
  padding: 8px 10px;
  opacity: 1;
  margin-right: 10px;
  border-bottom-color: rgba(255, 255, 255, .5);
}

.search-toggle {
  background: none;
  border: none;
  color: var(--white);
  font-size: 14px;
  padding: 4px;
  cursor: pointer;
  transition: color .2s;
}

.search-toggle:hover {
  color: var(--accent);
}

.header-account {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.header-account:hover {
  color: var(--accent);
}

/* Main bar (light, header-bottom): logo left, nav, cart button right */
.header .navbar-brand {
  padding: 0;
  margin: 10px 0;
  position: relative;
  left: 0;
  transform: none;
}

.header .navbar-brand img {
  max-width: 120px;
  height: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 32px;
}

.main-nav .nav-link {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--black);
  padding: 10px 14px;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-nav .show > .nav-link {
  color: var(--navy);
}

.main-nav .nav-item.dropdown {
  display: flex;
  align-items: center;
}

.main-nav .nav-item.dropdown .nav-link {
  padding-right: 4px;
}

.main-nav .dropdown-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--black);
}

.main-nav .dropdown-caret:hover,
.main-nav .dropdown-caret.show {
  background-color: var(--lightgrey);
  color: var(--navy);
}

.main-nav .dropdown-menu {
  top: 100%;
  left: 0;
  right: auto;
  margin-top: .125rem;
  border: none;
  border-radius: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
  padding: 12px 0;
}

.main-nav .dropdown-item {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  padding: 8px 20px;
}

.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:active {
  background-color: var(--lightgrey);
  color: var(--navy);
}

.main-nav .dropend {
  display: flex;
  align-items: center;
}

.main-nav .dropend .dropdown-item {
  flex: 1;
}

.main-nav .dropend .dropdown-caret {
  margin-right: 6px;
}

.main-nav .dropend > .dropdown-menu {
  top: 0;
  left: 100%;
  right: auto;
  margin-top: 0;
  margin-left: .125rem;
}

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--navy);
  color: var(--white) !important;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--navy);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.cart-btn:hover {
  transform: translateY(-2px);
  background-color: transparent;
  color: var(--navy) !important;
}

.cart-count {
  background-color: var(--accent);
  color: var(--white);
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.mobile-header-icons {
  position: relative;
}

.mobile-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--black) !important;
  font-size: 19px;
}

.mobile-cart-btn .cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
}

.mobile-header-actions {
  margin-bottom: 20px;
}

.mobile-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--lightgrey);
  padding-bottom: 12px;
}

.mobile-search-form input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  padding: 6px 0;
}

.mobile-search-form input:focus {
  outline: none;
}

.mobile-search-form button {
  background: none;
  border: none;
  color: var(--navy);
  font-size: 15px;
  padding: 4px;
  cursor: pointer;
}

.mobile-account-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  padding: 6px 0;
}

.mobile-account-link:hover {
  color: var(--accent);
}

@media (max-width: 991px) {
  .main-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
  }
  .main-nav .nav-link {
    width: 100%;
    padding: 13px 0;
  }
  .main-nav .nav-item.dropdown {
    flex-wrap: wrap;
  }
  .main-nav .nav-item.dropdown > .dropdown-menu {
    flex: 0 0 100%;
    width: 100%;
  }
  .main-nav .dropdown-menu {
    position: static !important;
    box-shadow: none;
    padding: 0 0 0 16px;
    transform: none !important;
  }
  .main-nav .dropend {
    flex-wrap: wrap;
  }
  .main-nav .dropend > .dropdown-menu {
    flex: 0 0 100%;
    width: 100%;
  }
}

/* ===== Newsletter section ===== */
.newsletter-wrp {
  padding: 60px 0;
}

.newsletter-main .section-title,
.newsletter-main .detail {
  color: var(--white);
  max-width: 600px;
}

.newsletter-main .section-title {
  margin-bottom: 18px;
}

.newsletter-main .detail {
  margin-bottom: 36px;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  max-width: 560px;
}

.newsletter-form .form-group {
  flex: 1 1 200px;
  margin: 0;
}

.newsletter-form .form-control {
  width: 100%;
  border: 0;
  border-radius: 30px;
  padding: 12px 20px;
  font-family: "DM Sans", Arial, sans-serif;
}

.newsletter-form .btn {
  flex: 0 0 auto;
}

/* ===== Agenda section ===== */
.agenda-wrp {
  padding: 60px 0;
  background-color: var(--lightgrey);
}

.agenda-left .detail {
  margin: 16px 0 24px;
}

.agenda-right-block {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.agenda-right-block:last-child {
  border-bottom: 0;
}

.agenda-date {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background-color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.agenda-day {
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

.agenda-month {
  color: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}

.agenda-details h4 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  margin: 0 0 4px;
}

.agenda-details h4 a {
  color: var(--black);
}

.agenda-details h4 a:hover {
  color: var(--navy);
}

.agenda-details p {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
}

@media (max-width: 991px) {
  .agenda-right {
    margin-top: 30px;
  }
}

/* ===== Teacher cards (2-column, whole card clickable) ===== */
.teacher-cards-wrp {
  padding: 60px 0;
}

.teacher-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 8px;
  color: var(--black);
  transition: box-shadow .25s ease, transform .25s ease;
}

.teacher-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
  color: var(--black);
}

.teacher-card-img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  overflow: hidden;
  clip-path: none;
}

.teacher-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-card-body h3 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px;
  margin: 0 0 4px;
}

.teacher-card-body p {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* ===== Location cards (3-column, all details shown inline) ===== */
.location-cards-wrp {
  padding: 60px 0;
}

/* Space between the page content above and an inline FAQ listing embedded
   on a CMS page (page_type == 'faq'), matching teacher/location cards. */
.faq-listing-wrp {
  padding-top: 60px;
}

.location-card {
  margin-bottom: 30px;
}

.location-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: none;
}

.location-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-card-body {
  padding: 20px 24px;
}

.location-card-body h3 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 20px;
  margin: 0 0 10px;
}

.location-card-body p {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  color: #666;
  margin: 0 0 10px;
}

.location-card-address {
  font-weight: 600;
  color: var(--black) !important;
}

.location-card-map {
  display: inline-block;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
}

.location-card-map:hover {
  color: var(--accent);
}

/* ===== Reusable per-page FAQ block (<x-faq_block>) ===== */
.page-faq-wrp {
  padding: 60px 0;
}

.page-faq-main .block-title {
  margin-bottom: 38px;
}

/* ===== Blog card (index / home / latest-news reuse) ===== */
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 30px;
  background: var(--white);
  border: 1.5px solid #ece9f8;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(107, 53, 255, .12);
  border-color: var(--accent);
}

.blog-card-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: none;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.blog-card:hover .blog-card-img img {
  transform: scale(1.05);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 24px 24px 28px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-card-tag {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #ede8ff;
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 20px;
}

.blog-card-date {
  display: block;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 13px;
  color: #6b7280;
}

.blog-card-body h3 {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

.blog-card-body h3 a {
  color: var(--navy);
}

.blog-card-body h3 a:hover {
  color: var(--accent);
}

.blog-card-body p {
  flex: 1;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

.blog-card-link {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  margin-top: 4px;
  transition: letter-spacing .2s;
}

.blog-card:hover .blog-card-link {
  letter-spacing: .02em;
}

.blog-card-link:hover {
  color: var(--accent-dark);
}

/* ===== Blog index page ===== */
.blog-page-wrp {
  padding: 60px 0;
}

.blog-page-header {
  margin-bottom: 40px;
}

.blog-no-results {
  font-family: "DM Sans", Arial, sans-serif;
  color: #666;
  text-align: center;
  padding: 40px 0;
  width: 100%;
}

/* ===== Blog detail page ===== */
.blog-detail-date {
  color: rgba(255, 255, 255, .75) !important;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  margin-bottom: 10px !important;
}

.blog-detail-content {
  padding: 50px 0;
}

/* ===== Latest news block (blog_show footer + home) ===== */
.latest-news-wrp {
  padding: 60px 0;
  background-color: var(--lightgrey);
}

.latest-news-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 38px;
}

.latest-news-top .section-title {
  margin-bottom: 0;
}