/* ================================
   Typography Scale & Utilities
================================ */

:root {

  /* ================================
     Font Sizes
     ================================ */
  --font-3xl: 30px;
  --font-2xl: 26px;
  --font-xl: 22px;
  --font-lg: 18px;
  --font-md: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  --font-xs: 10px;

  /* ================================
     Font Weights
     ================================ */
  --fw-regular: 400;
  --fw-semibold: 600;

  /* ================================
    SVG Sizes
    ================================ */
  --svg-2xs: 12px;
  --svg-xs: 16px;
  --svg-sm: 18px;
  --svg-md: 22px;  
  --svg-lg: 30px;
  --svg-xl: 80px;

    /* Spacing Scale (px/rem) */
  --space-sm: 4px;
  --space-default: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 28px;
  --space-4xl: 32px;
  --space-5xl: 36px;
  --space-6xl: 40px;
  --space-7xl: 44px;
  --space-8xl: 48px;

  /* Border Radius */
  --radius-xs: 5px;
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-xl: 30px;

  /* Layout */
  --container-width: 1280px;
  --gutter: 20px;

  /* ================================
    Main Colors
    ================================ */
  --blue: #5787B5;
  --blue-75: rgba(87, 135, 181, 0.75);
  --blue-50: rgba(87, 135, 181, 0.50);
  --blue-25: rgba(87, 135, 181, 0.25);

  --purple: #50154B;
  --purple-75: rgba(80, 21, 75, 0.75);
  --purple-50: rgba(80, 21, 75, 0.50);
  --purple-25: rgba(80, 21, 75, 0.25);

  --black: #333333;
  --black-75: rgba(51, 51, 51, 0.75);
  --black-50: rgba(51, 51, 51, 0.50);
  --black-25: rgba(51, 51, 51, 0.25);

  --white: #FFFFFF;
  --black-friday: #2E3338;

  /* ================================
     Complementary Colors
     ================================ */
  --yellow: #EDB600;
  --yellow-75: rgba(237, 182, 0, 0.75);
  --yellow-50: rgba(237, 182, 0, 0.50);
  --yellow-25: rgba(237, 182, 0, 0.25);

  --green: #31A56B;
  --green-75: rgba(49, 165, 107, 0.75);
  --green-50: rgba(49, 165, 107, 0.50);
  --green-25: rgba(49, 165, 107, 0.25);

  /* ================================
     Secondary Neutral Colors
     ================================ */
  --grey-light: #ECECEC;
  --grey-light-75: rgba(236, 236, 236, 0.75);
  --grey-light-50: rgba(236, 236, 236, 0.50);
  --grey-light-25: rgba(236, 236, 236, 0.25);

  --grey-dark: #555555;
  --grey-dark-75: rgba(85, 85, 85, 0.75);
  --grey-dark-50: rgba(85, 85, 85, 0.50);
  --grey-dark-25: rgba(85, 85, 85, 0.25);

  --pitch-black: #000000;
  --pitch-black-75: rgba(0, 0, 0, 0.75);
  --pitch-black-50: rgba(0, 0, 0, 0.50);
  --pitch-black-25: rgba(0, 0, 0, 0.25);

  --gradient-IVE: linear-gradient(91deg, rgba(80, 21, 75, 0.90) 0%, rgba(87, 135, 181, 0.90) 100%);
}

/* Spacing Utilities (Margin & Padding) */
.m-sm     { margin: var(--space-sm); }
.m-md     { margin: var(--space-md); }
.m-lg     { margin: var(--space-lg); }
.m-xl     { margin: var(--space-xl); }
.m-2xl    { margin: var(--space-2xl); }
.m-3xl    { margin: var(--space-3xl); }

.p-sm     { padding: var(--space-sm); }
.p-md     { padding: var(--space-md); }
.p-lg     { padding: var(--space-lg); }
.p-xl     { padding: var(--space-xl); }

.mt-sm    { margin-top: var(--space-sm); }

.pt-xl    { padding-top: var(--space-xl); }

/* Border Radius */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }

/* Container */
.container {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Grid System */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(-1 * var(--gutter) / 2);
	margin-right: calc(-1 * var(--gutter) / 2);
}

.col {
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
  box-sizing: border-box;
  flex-grow: 1;
}

/* 12-column widths */
.col-1  { width: 8.3333%; }
.col-2  { width: 16.6666%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6666%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6666%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6666%; }
.col-12 { width: 100%; }

/* Font Size Utilities */
.text-3xl { font-size: var(--font-3xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-xl  { font-size: var(--font-xl); }
.text-lg  { font-size: var(--font-lg); }
.text-md  { font-size: var(--font-md); }
.text-sm  { font-size: var(--font-sm); }
.text-xs  { font-size: var(--font-xs); }

/* Font Weight Utilities */
.semibold { font-weight: var(--fw-semibold); }
.regular  { font-weight: var(--fw-regular); }

/* SVG Icons Sizes */
.svg-2xs { width: var(--svg-2xs); height: var(--svg-2xs); }
.svg-xs  { width: var(--svg-xs);  height: var(--svg-xs); }
.svg-sm  { width: var(--svg-sm);  height: var(--svg-sm); }
.svg-md  { width: var(--svg-md);  height: var(--svg-md); }
.svg-lg  { width: var(--svg-lg);  height: var(--svg-lg); }
.svg-xl  { width: var(--svg-xl);  height: var(--svg-xl); }

.no-click {
	pointer-events: none;
}

body {
	color: #555 !important;
	overflow-x: hidden !important;
}

.course_container {
	padding: var(--space-5xl) 0 var(--space-8xl);
}


#course {
	ul, ol {
		list-style: inside !important; 
	}

	ul li p, ol li p {
		display: inline;
	}
}


/* ----------------------------------------------- SECTION WIDTHS --------------------------------------------------- */
.main_width {
	width: 100%;
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;

	@media (max-width: 1280px) {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		max-width: calc(100vw - 40px); 
		max-width: calc(100dvw - 40px);
	}
 
	@media (max-width: 980px) {
		width: 100%;
		padding-left: 0px !important;
		padding-right: 0px !important;
		max-width: calc(100vw - 40px);
		max-width: calc(100dvw - 40px);
	}
}

.main_width.min_width,
.et_pb_row.min_width {
	max-width: 100% !important;
}

.max_width,
.et_pb_row.max_width,
*:not(.slick-track) > .et_pb_row.max_width {
	width: 100% !important;
	max-width: none !important;
}

@media (max-width: 479px) {
    .et_pb_post h2.course_title.highlight {
        font-size: var(--font-2xl) !important;
    }
}

.et_pb_post { margin-bottom: 0 !important;}

/* ----------------------------------------------- GENERAL COURSE PAGE --------------------------------------------------- */
.course_title {
	display: flex;
	align-items: stretch;
	gap: var(--space-md);
	font-size: var(--font-2xl);
	font-weight: 600;
	color: var(--purple);
	padding: 0;
	padding-bottom: 0 !important;

	&.highlight {
		&::before {
			content: '';
			display: block;
			border-left: var(--blue);
		}
	}
}

.course_banner-keyinfo,
.course_footer-keyinfo {
	display: inline-grid;
	grid-template-columns: repeat(2, auto);
	column-gap: var(--space-4xl);
	row-gap: var(--space-md);
	justify-content: start;

	.k_section {
		align-self: start;

		display: flex;
		align-items: center;
		gap: var(--space-md);

		span svg {
			height: var(--svg-sm) !important;
		}

		> div {
			font-size: var(--font-base);
			color: var(--black);
		}
	}
}

.course-promo_box {
  padding: 8px 12px;
  background-color: var(--black);
  border-radius: var(--radius-lg);
  color: var(--white);
  font-weight: var(--fw-regular);
  display: flex;
  justify-content: space-between;

	>* {
		font-size: var(--font-md) !important;
		font-weight: var(--fw-regular);
	}

	.coupon_blue {
		margin-left: 0;
        margin-right: 5px;
	}

	h4 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		color: var(--white);
		padding: 0;
		gap: 15px;

		.main_svg {
			max-width: 250px;
		}

		>span:nth-child(2) { 
			line-height: var(--space-4xl);
		}
	}



	@media (max-width: 600px) {
		flex-direction: column;
	}

	@media (max-width: 768px) {
		h4 span.coupon_label {
			margin-top: 10px !important;
			margin-right: 0 !important;
			margin-left: 0 !important;
		}
	}
}

.promo_divi_container {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-bottom: var(--space-default) !important; 
	margin-top: var(--space-2xl) !important;  

	@media (max-width: 1280px) {
		padding-left: 30px;
		padding-right: 30px;
	}

	@media (max-width: 980px) {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

.course-info_box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--space-3xl);
	row-gap: var(--space-default);
	padding: var(--space-md) var(--space-lg);
	border: 1px solid var(--grey-light);
	border-radius: var(--radius-lg);

	> div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--space-default);

		> div {
			display: flex;
			align-items: flex-start;
			gap: var(--space-default);
		}

		p {
			padding: 0 !important;
		}
	}

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

	&[data-info=schedule] {
		grid-template-columns: 1fr;
	}
}

.main-dropdown_select {
	z-index: 7;
	position: relative;
	display: grid;
	width: max-content;

	> *:not(.dropdown) {
		justify-content: space-between;
		gap: var(--space-md);
		width: 100%;
	}

	&.open {
		z-index: 999 !important;
		
		.dropdown {
			display: grid;
		}
	}

	.dropdown_title {
		display: none;
		color: var(--purple) !important;
		font-size: var(--font-base);
		font-weight: var(--fw-semibold);
	}

	&.highlight {
		padding-left: var(--space-md);
	}

	&.flip {
		.dropdown {
			top: auto !important;
			bottom: calc(100% + var(--space-sm)) !important;
		}
	}

	.dropdown {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		width: auto;
		top: calc(100% + var(--space-sm));
		background-color: var(--white);

		padding: var(--space-sm);
		gap: var(--space-sm);

		border: 1px solid;
		border-radius: var(--radius-lg);

		> * {
			cursor: pointer;
			text-transform: capitalize;
			border: none;
			border-radius: var(--radius-lg);
			color: var(--black);

			padding: 3px 10px;
			display: flex;
			justify-content: center;
			text-align: center;
			gap: var(--space-md);
			
			background-color: var(--white);
			&.active {
				color: var(--white);
			}
		}
	}

	&.events {
		.dropdown {
			> * {
				border: 1px solid;
				&:hover {
					color: var(--white);
				}
			}
		}
	}


	/* Coloring */
	.dropdown {
		border-color: var(--purple);
		
		> * {
			&:hover {
				background-color: var(--purple-25);
			}

			&.active {
				background-color: var(--purple);
			}
		}
	}

	&.events {
		.dropdown {
			> * {
				border-color: var(--purple-25);
				background-color: var(--purple-25);
				&:hover {
					border-color: var(--purple);
					background-color: var(--purple);
				}
			}
		}
	}

	&.blue {
		.dropdown {
			border-color: var(--blue);
			
			> * {
				&:hover {
					background-color: var(--blue-25);
				}

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

		&.events {
			.dropdown {
				> * {
					border-color: var(--blue-25);
					background-color: var(--blue-25);
					&:hover {
						border-color: var(--blue);
						background-color: var(--blue);
					}
				}
			}
		}
	}

	&.green {
		.dropdown {
			border-color: var(--green);
			
			> * {
				&:hover {
					background-color: var(--green-25);
				}

				&.active {
					background-color: var(--green);
				}
			}
		}

		&.events {
			.dropdown {
				> * {
					border-color: var(--green-25);
					background-color: var(--green-25);
					&:hover {
						border-color: var(--green);
						background-color: var(--green);
					}
				}
			}
		}
	}
}
/* ----------------------------------------------- COURSE BANNER --------------------------------------------------- */
#course-banner {
	position: relative;
	z-index: 9;

	padding: var(--space-5xl) 0 var(--space-7xl);

	> .course_banner-img {
		position: absolute;
		inset: 0;
		overflow: hidden;
		z-index: 0;

		> img {
			position: absolute;
			inset: 0;
			width: 100vmax;
			height: 100%;
			object-fit: cover;
			transform: translateX(25%);
			min-width: 450px;
		}
	}

	> div {
		display: grid;
		row-gap: var(--space-5xl);
		grid-template-columns: 1fr;

		.course_banner-header {

			display: flex;
			flex-direction: column;
			gap: var(--space-default);

			.banner_btns {
				display: flex;
				align-items: stretch;
				justify-content: flex-start;
				gap: var(--space-default);
				align-items: flex-start;

				> span {

					&.label_btn {
						height: 30px;
						padding: 0 var(--space-md);
						background-color: var(--yellow);
						border: 1px solid var(--yellow);
						border-radius: var(--radius-lg);
						color: var(--purple);
						text-transform: uppercase;
						display: flex;
						align-items: center;
						justify-content: center;

						&.black_friday {
							background-color: var(--black-friday);
							color: var(--white);
							border: 1px solid var(--black-friday);
							text-transform: capitalize;
							font-weight: var(--fw-semibold);

							svg {
								height: 18px;
								margin-right: 0.4em;
								
								path {
									fill: var(--white);
								}
							}
						}
					}
					
					svg {
						width: auto;
						height: 30px;
						path { fill: var(--blue); }
					}
				}
			}

			.course_banner-titles {
				display: flex;
				flex-direction: column;

				* {
					padding: 0;
				}

				h1 {
					color: var(--purple);
				}

				h2 {
					color: var(--black);
					font-size: var(--font-base);
					font-weight: var(--fw-semibold);
				}

				p {
					color: var(--black);
				}
			}
			
		}

		.info {
			display: grid;
			gap: var(--space-lg);
			justify-items: start;
			
		}
	}
}

@media (min-width: 1280px) {
	#course-banner {
		.course_banner-header, 
		.info {
			max-width: 750px !important;
		}
	}
}

@media (max-width: 1280px) {
	#course-banner {
		.course_banner-header, 
		.info {
			max-width: 500px !important;
		}
	}
}

@media (max-width: 980px) {
	#course-banner {
		.course_banner-header, 
		.info {
			max-width: 100% !important;
		}
	}
}

@media (max-width: 980px) {
	#course-banner {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-top: 200px !important;

		> .course_banner-img {
			> img {
				top: var(--space-2xl);
				position: absolute;
				left: 0;
				width: 100%;
				height: auto;
				object-fit: cover;
				object-position: center top;
				z-index: 0;
				transform: scale(1.5);
			}
		}

		.main-dropdown_select {
			width: auto !important;
		}
	}

	#course-banner.add_overlay.overlay_gradient::after {
		content: "";
		background: linear-gradient(
			0deg,
			rgba(236, 236, 236, 1) 67%,
			rgba(236, 236, 236, 0.95) 70%,
			rgba(236, 236, 236, 0.7) 80%,
			rgba(236, 236, 236, 0.5) 90%,
			rgba(236, 236, 236, 0.1) 98%,
			rgba(236, 236, 236, 0) 100%
		);
	}
}

@media (max-width: 520px) {
	#course-banner.add_overlay.overlay_gradient::after {
		background: linear-gradient(
			0deg,
			rgba(236, 236, 236, 1) 75%,
			rgba(236, 236, 236, 0.95) 78%,
			rgba(236, 236, 236, 0.7) 86%,
			rgba(236, 236, 236, 0.5) 90%,
			rgba(236, 236, 236, 0.1) 98%,
			rgba(236, 236, 236, 0) 100%
		) !important;
	}
}

/* ----------------------------------------------- TAB CONTROLS --------------------------------------------------- */
#course-tab_controls {

	nav {
		display: flex;
		align-items: stretch;
		align-content: center;
		gap: var(--space-md);
		padding: var(--space-xl) 0;

		&::-webkit-scrollbar-track {
			background-color: var(--white);
		}

		&::-webkit-scrollbar-thumb {
			border-color: var(--white);
		}

		> * {
			flex-shrink: 0;
		}
	}

	&.fixed {
		position: sticky;
		top: 74px;
		z-index: 8;
		background: white;
		transition: all ease-in-out 200ms;

		&.stuck {
			box-shadow: 0 2px 5px rgba(0,0,0,.2);

			nav {
				padding: var(--space-default) var(--space-sm);
			}
		}

		@media (max-width: 600px) {
			top: 64px;
		}
	}
}

/* ----------------------------------------------- COURSE OVERVIEW --------------------------------------------------- */
#course-overview {
	margin-top: var(--space-md);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-2xl);
	
	/* Columns */
	.main_column {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xl);

		grid-column: span 9;

		.course_container {
			margin-bottom: 40px;
		}

		.course_livestream {
			background: var(--grey-light);
			border-radius: var(--radius-lg);
			display: flex;
			align-items: center;
			gap: var(--space-default);
			padding: var(--space-default) var(--space-default);
		}

		p {
			font-size: var(--font-md) !important;
			line-height: 26px !important;
		}

		a {
			color: var(--purple);
			text-decoration: underline;
			&:hover {
				font-weight: bold;
			}
		}

		ul, ol {
			padding-left: 1em;

			> li {
				padding: var(--space-default) 0;
			}
		}
	}

	.side_column {
		grid-column: span 3;
	}

	@media (min-width: 981px) {
		.main_column .course_container:last-child {
			margin-bottom: 0;
		}
	}

	@media (max-width: 980px) {
		gap: var(--space-2xl);

		.side_column,
		.main_column {
			grid-column: span 12;
		}
	}

}

/* ----------------------------------------------- COURSE OVERVIEW --------------------------------------------------- */
#course-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);

	> .btn_cont {
		padding: var(--space-md) var(--space-xl);
		border-radius: var(--radius-lg);
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-lg);

		> div {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: var(--space-sm);

			> div {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: var(--space-md);

				> * {
					width: 100%;
				}
			}
		}

		.main_btn {
			width: 100%;

			&.black_friday {
				background-color: transparent !important;
				border: 1px solid var(--black-friday) !important;
				color: var(--black-friday) !important;
				text-transform: capitalize !important;
				font-weight: var(--fw-semibold);

				> span.coupon_label {
					@media (max-width: 768px) {
						margin-top: 0px !important;
						margin-left: 5px !important;
					}
				}
			}
		}
	}

	> .cont {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-md);

		h5 {
			font-size: var(--font-lg);
			color: var(--purple);
			padding-bottom: 0;
		}

		#course_lp {
			margin-top: 0;

			.course_lp_item {
				flex-basis: 100%;
				
				.cont {
					border-radius: var(--radius-lg);
					overflow: hidden;
				}
			}
		}
	}

}

/* ----------------------------------------------- COURSE MODULES --------------------------------------------------- */
#course-modules,
#course-optional_modules {

	&#course-modules {
		h4 {
			margin-top: var(--space-xl);
		}
	}
	
	&#course-optional_modules {
		.description {
			margin-bottom: var(--space-2xl);
		}
	}

	> div > div {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--space-xl);
		row-gap: var(--space-md);

		> * {
			width: 100%;
			grid-column: span 12;
		}

		.part-picker {
			grid-column: span 3;

			@media (max-width: 980px) {
				grid-column: span 12;
			}
			
			button {
				text-align: left;
				justify-content: space-between;
			}
			
			> button {
				padding: var(--space-default) var(--space-lg);
			}
		}

		.module-count {
			justify-self: flex-end;
			grid-column: span 9;

			display: flex;

			> div {
				padding: var(--space-sm) var(--space-lg) ;
				display: flex;
				flex-wrap: wrap;
				gap: var(--space-xl);

				border-radius: var(--space-xl);
				border: 1px solid var(--blue);
				background: var(--white);

				> div {
					display: flex;
					align-items: center;
					gap: var(--space-default);
				}
			}

			@media (max-width: 980px) {
				grid-column: span 12;
			}
		}
	}

	.cont {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		align-items: flex-start;
		gap: var(--space-xl);

		> .summary {
  			grid-column: span 3;

			display: grid;
			align-items: stretch;

			max-height: 350px;
			overflow-x: hidden;
			border-radius: var(--radius-lg);
			border: 1px solid var(--blue);

			button {
				display: flex;
				gap: var(--space-default);
				align-items: flex-start;
				> span {
					margin-top: 1px;
				}
			}

			.module_label {
				font-weight: var(--fw-semibold);

				.date {
					font-weight: var(--fw-regular);
					color: var(--grey-dark);
					white-space: nowrap !important;
					transition: all linear 200ms;
				}
			}
			
			button,
			option {
				text-align: left;
				border: none;
				padding: var(--space-default) var(--space-lg);
				background-color: var(--white);
				transition: all linear 200ms;
				color: var(--black);

				&:hover,
				&.active,
				[selected] {
					background-color: var(--purple);
					color: var(--white);

					.main_svg {
						svg * {
							fill: var(--white) !important;
						}
					}

					.date {
						color: var(--white);
					}
				}
 
				&.active,
				[selected] {
					font-weight: var(--fw-semibold);
				}
			}

			@media (max-width: 980px) {
				display: none;
			}

			&.main_scroll {
				&::-webkit-scrollbar-track {
					background-color: var(--blue);
					border-top-right-radius: var(--radius-lg);
					border-bottom-right-radius: var(--radius-lg);
					overflow: hidden;
				}

				&::-webkit-scrollbar-thumb {
					background-color: var(--white);
					border-color: var(--blue);
				}
				
				&::-webkit-scrollbar-thumb:hover {
					background-color: var(--purple);
				}

			}

		}

		> .summary-mobile {
			width: 100%;
			display: none;

			@media (max-width: 980px) {
				display: block;
			}
			
			grid-column: span 12;

			.main_btn {
				text-align: left !important;
				padding: 3px var(--space-lg);

				.module_summary_inner {
					display: inline;
					white-space: normal; 
				}

				.module_label,
				.main_svg.svg_blue.svg_small {
					display: inline;
					vertical-align: middle;
				}

				.main_svg.svg_blue.svg_small {
					margin-left: 0.4em;
					line-height: 1;
				}
			}

			> select {
				width: 100%;
				overflow: hidden;
				border-radius: var(--radius-lg);
				border: 1px solid var(--blue);
				display: grid;
				position: relative;
				max-width: 100%;
				background-color: var(--purple);
				color: var(--white);
				padding: var(--space-default) var(--space-lg);

				&::after {
  					content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E ");
					height: 30px;
					width: 30px;
				}

				option {
					text-align: left;
					border: none;
					padding: var(--space-default) var(--space-lg);
					background-color: var(--white);
					color: var(--black);
					transition: all linear 200ms;

					&:hover,
					&[selected] {
						background-color: var(--purple);
						color: var(--white);
						background-color: var(--purple);
						color: var(--white);
					}
				}
			}
		}

		.dropdown {
			
			button {
				text-align: left;
				justify-content: left !important; 

				.module_summary_inner {
					display: inline;
					white-space: normal;
				}

				.module_label,
				.main_svg.svg_blue.svg_small {
					display: inline;
					vertical-align: middle;
				}

				.main_svg.svg_blue.svg_small {
					margin-left: 0.4em;
					line-height: 1;
				}
			}
		}

		> .module-cont {
  			grid-column: span 9;

			@media (max-width: 980px) {
  				grid-column: span 12;
			}

			background-color: var(--white);
			border: 1px solid var(--blue);
			border-radius: var(--radius-lg);

			padding: var(--space-lg);
			padding: var(--space-2xl);

			.module {
				display: none;

				&.open {
					display: grid;
				}

				grid-template-columns: 1fr;
				gap: var(--space-lg);

				.title {
					> h5 {
						font-size: var(--font-md);
					}

					> div {
						display: flex;
						align-items: stretch;
						flex-wrap: wrap;
						gap: var(--space-xl);

						> div {
							display: flex;
							align-items: center;
							gap: var(--space-default);
						}

						span.main_svg_circle {
							padding: 4px;
							svg {
								height: 13px;
								width: 13px;
							}
						}
						
						span.main_svg {
							svg {
								height: 21px !important;
								width: 21px !important;
							}
						}
					}
				}

				> .info {
					display: flex;
					flex-direction: column;
					align-items: stretch;
					row-gap: var(--space-2xl);

					&:has(.video-cont) {
						display: grid;
						grid-template-columns: 1fr 1fr;
						column-gap: var(--space-3xl);

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

					ul, ol {
						padding: var(--space-lg) 0;
						padding-left: 1em;
					}
					
					.video-cont {
						display: flex;
						flex-direction: column;
						gap: var(--space-default);

						h6 {
							font-size: var(--font-md);
						}

						> div {
							display: grid;
							gap: var(--space-md);

							> .video {
								overflow: hidden;
								border: 1px solid var(--blue);
								border-radius: var(--radius-lg);
							}
						}
					}

					.module-speakers {
						display: grid;
						grid-template-columns: auto 1fr;
						gap: var(--space-default);

						> div {
							display: grid;
							gap: var(--space-default);
						}
					}
				}

			}
		}

	}
}

/* ----------------------------------------------- COURSE SPONSORS --------------------------------------------------- */
#course-qualifications {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);

  > .cont {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    flex-wrap: wrap;

    > div {
      flex: 1 1 calc(33.333% - var(--space-lg));
      min-width: 0;
      padding: var(--space-lg);
      border: 1px solid var(--grey-light);
      border-radius: var(--radius-lg);

      display: grid;
      gap: var(--space-default);

      > .head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-lg);
      }

      img {
        max-width: 200px;
      }
    }
  }

  @media (max-width: 768px) {
    > .cont {
      flex-wrap: wrap;

      > div {
        flex-basis: 100%;
      }
    }
  }
}


/* ----------------------------------------------- COURSE SPONSORS --------------------------------------------------- */
#course-sponsors {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: var(--space-3xl);

	> div {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: var(--space-lg);

		> div {

			&:not(:last-child) {
				border-right: 1px solid var(--grey-light);
				padding-right: var(--space-lg);
			}

			h5 {
				margin-bottom: var(--space-lg);
			}

			> div {
				display: flex;
				align-items: stretch;
				gap: var(--space-lg);

				img {
					max-width: 200px;
				}
			}
		}
	}
}

/* ----------------------------------------------- COURSE TESTIMONIALS --------------------------------------------------- */
#course-testimonials {
	width: 100%;
	left: 0;
	margin-left: 0;
	background: var(--gradient-IVE);
	padding: var(--space-4xl);
	max-width: none !important;

	> .course_container {
		max-width: 96%;
		margin: 0 auto;
		padding: 0 1rem;
	}

	h2, p {
		color: var(--white);
		text-align: center;
	}

	h2 {
		font-weight: var(--fw-semibold);
	}

	p {
		font-size: var(--font-md);
	}

	@media (max-width: 980px) {
		padding: var(--space-4xl) 0;

		> .course_container {
			max-width: 100%;
		}
	}

	/* ----------------------------------------- */
	/* Testimonial Slider */
	/* ----------------------------------------- */

	.testimonial-slider {
		margin: 0 auto;
		padding: var(--space-xl) 1rem;
		box-sizing: border-box;
		max-width: calc(3 * 420px + 60px);

		> .slick-list {
			> .slick-track {
				margin-top: 25px !important;
			}
		}

		.testimonial_item {
			position: relative;
			background: var(--white);
			padding: var(--space-md);
			border-radius: var(--radius-xl);
			box-sizing: border-box;
			margin: 0 10px;
			display: flex;
			flex-direction: column;
			width: 100%;
			min-width: 0;
			max-width: 420px;
			flex: 0 0 auto;

			&::before {
				content: "";
				position: absolute;
				top: -1.5rem;
				left: 50%;
				transform: translateX(-50%);
				width: 3rem;
				height: 3rem;
				background-color: var(--white);
				border-radius: 50%;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&::after {
				content: "";
				position: absolute;
				top: -1rem;
				left: 50%;
				transform: translateX(-50%);
				width: 2rem;
				height: 2rem;
				background-color: var(--blue);
				mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M34.71,17.3c-.83-.59-1.89-.89-3.18-.89-.9,0-1.75,.19-2.55,.57-.8,.38-1.44,.94-1.93,1.67-.49,.73-.73,1.65-.73,2.76,0,.97,.22,1.77,.65,2.39,.43,.62,.97,1.09,1.61,1.41,.64,.31,1.28,.47,1.9,.47,.45,0,.82-.03,1.09-.1,.28-.07,.5-.17,.68-.31l.26,.16c-.31,.73-.77,1.44-1.38,2.13-.61,.69-1.32,1.34-2.13,1.93-.82,.59-1.71,1.08-2.68,1.46l3.59,2.66c1.28-.55,2.47-1.38,3.57-2.47,1.09-1.09,1.98-2.36,2.66-3.8,.68-1.44,1.02-2.94,1.02-4.5,0-1.18-.2-2.25-.6-3.2-.4-.95-1.02-1.73-1.85-2.32Z'/><path d='M21.95,17.3c-.83-.59-1.89-.89-3.18-.89-.9,0-1.75,.19-2.55,.57-.8,.38-1.44,.94-1.93,1.67-.49,.73-.73,1.65-.73,2.76,0,.97,.22,1.77,.65,2.39,.43,.62,.97,1.09,1.61,1.41,.64,.31,1.28,.47,1.9,.47,.45,0,.82-.03,1.09-.1,.28-.07,.5-.17,.68-.31l.26,.16c-.31,.73-.77,1.44-1.38,2.13-.61,.69-1.32,1.34-2.13,1.93-.82,.59-1.71,1.08-2.68,1.46l3.59,2.66c1.28-.55,2.47-1.38,3.57-2.47,1.09-1.09,1.98-2.36,2.66-3.8,.68-1.44,1.02-2.94,1.02-4.5,0-1.18-.2-2.25-.6-3.2-.4-.95-1.02-1.73-1.85-2.32Z'/><path d='M25.08,.5C11.62,.5,.72,11.41,.72,24.86c0,4.68,1.32,9.05,3.61,12.77L.56,49.5l11.38-4.12c3.79,2.43,8.3,3.84,13.13,3.84,13.45,0,24.36-10.91,24.36-24.36S38.53,.5,25.08,.5Zm0,45.49c-4.06,0-7.99-1.15-11.39-3.33l-1.34-.86-1.5,.54-5.23,1.89,1.79-5.64,.45-1.41-.78-1.26c-2.05-3.32-3.13-7.15-3.13-11.07C3.94,13.21,13.42,3.73,25.08,3.73s21.13,9.48,21.13,21.13-9.48,21.13-21.13,21.13Z'/></svg>") no-repeat center/contain;
				background-repeat: no-repeat;
				z-index: 11;
			}

			.cont {
				.head {
				display: flex;
				align-items: center;
				margin-bottom: var(--space-sm) !important;
				position: relative;

				.img_cont {
					height: 4.5rem;
					border-radius: 50%;
					border: 2px solid var(--blue);
					overflow: hidden;

					img {
						width: 100%;
						height: auto;
						display: block;
					}
				}

				.info {
					flex-grow: 1;

					h3 {
						margin: 0;
						font-size: var(--font-md) !important;
						color: var(--purple);
						font-weight: var(--fw-regular) !important;
						position: relative;

						.main_svg.svg_large {
							display: none !important;
						}
					}

					h5 {
						margin: 0;
						font-size: var(--font-xs) !important;
						color: var(--black) !important;
					}
				}
				}

				.desc {
					p {
						margin: 0;
						flex-grow: 1;
						font-size: var(--font-base) !important;
						color: var(--black) !important;
						line-height: 1.5;
						text-align: left !important;
					}

					a {
						color: var(--purple);
						text-decoration: underline;
					}
				}
			}
		}
	}

	.slick-slider .slick-arrow.slider-next { right: -20px; }
	.slick-slider .slick-arrow.slider-prev {
		left: -20px;
		transform: rotate(180deg);
	}

	@media (max-width: 1200px) {
		.testimonial-slider {
			max-width: calc(2 * 420px + 20px);
		}
	}

	@media (max-width: 800px) {
		.slick-slider .slick-arrow.slider-next { right: -5px; }
		.slick-slider .slick-arrow.slider-prev {
			left: -5px;
			transform: rotate(180deg);
		}
		.testimonial-slider {
			max-width: 420px;
			padding: var(--space-xl) 0;
		}
	}
}

/* ----------------------------------------------- COURSE SATISFACTION --------------------------------------------------- */
#course-satisfaction {
  .cont {
    border-radius: var(--radius-lg);
    border: 1px solid var(--grey-light);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);

    > .info {
      flex-basis: calc(100% - 150px - var(--space-xl));
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      > div {
        display: flex;
        gap: var(--space-default);
      }

      > b {
        color: var(--purple);
        margin-bottom: var(--space-default);
      }

      > a {
        margin-top: var(--space-default);
      }
    }

    > .img_cont {
      flex-basis: 150px;
      min-width: 150px;

      img {
        max-width: 150px;
        height: auto;
      }
    }

	@media (max-width: 768px) {
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0px !important;

	> .info {
		flex-basis: 0;
		flex-grow: 1;
		min-width: 0;
	}

	> .img_cont {
		flex-basis: auto;
		flex-shrink: 0;
		width: 80px;
		min-width: 80px;

		img {
		max-width: 100%;
		height: auto;
		display: block;
		padding: var(--space-default);
		}
	}
	}
  }
}


/* ----------------------------------------------- COURSE FAQs --------------------------------------------------- */
#course-faqs {
	background: var(--grey-light);

	.faq_category_section {
		padding: var(--space-xl) 0 !important;
	}

	.faq_category_section:last-child {
		padding-bottom: 0 !important;
	}

	.main_toggle {
		transition: 0.3s ease;
		border-radius: var(--radius-xl);
		background: var(--white);
		padding: var(--space-default) 12px !important;
		border: 0 !important;
		margin-bottom: var(--space-default);

		> h4 {
			font-size: var(--font-md) !important;
			color: var(--black) !important;
		}
	}
}

/* ----------------------------------------------- COURSE FOOTER CONTROLS --------------------------------------------------- */
#course-footer_controls {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
	background: var(--grey-light);
	padding: var(--space-md) 0;
	transform: translateY(100%);
	transition: transform 0.3s ease;

	&.stuck {
		transform: translateY(0%);
	}

	.main_scroll {
		overflow-y: visible;
	}

	h4 {
		color: var(--purple);
		padding: 0;
	}

	nav {
		display: grid;
		gap: var(--space-lg);
		align-items: center;
		grid-template-columns: repeat(4, 1fr);

		.footer_title {
			.title_row {
				align-items: center;
				padding-bottom: var(--space-default);

				svg {
					flex-shrink: 0;
					height: var(--space-4xl);
					fill: var(--blue);
				}
			}

			> p {
				font-size: var(--font-sm);
			}
		}

		.course_footer-keyinfo {
			grid-column: span 2;
		}

		.btn_cont {
			display: grid;
			gap: var(--space-default);

			> *,
			.main_btn{
				width: 100%;
			}
		}

		.course-venue_picker {
			.dropdown {
				top: auto;
				bottom: calc(100% + var(--space-sm));
			}
		}
	}

	.footer_mobile_button {
		display: none;

		a {
			display: block;
			width: 100%;
			text-align: center;
			max-width: none;
		}
	}
}
	
@media (max-width: 980px) {

	#course-footer_controls .footer_mobile_button {
		display: block !important;
	}

	#course-footer_controls nav {
		display: none !important;
	}
}

/* ----------------------------------------------- COURSE MULTIMEDIA --------------------------------------------------- */
#course-multimedia {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);

	> .cont {
		display: grid;
		gap: var(--space-xl);
		align-items: stretch;
		grid-template-columns: repeat(2, 1fr);

		.video {
			border: 1px solid var(--grey-light);
			border-radius: var(--radius-lg);
			overflow: hidden;
		}

		.gallery {
			border-radius: var(--radius-lg);
			border: 1px solid var(--blue);
			overflow: hidden;

			.slick-list,
			.slick-track {
				height: 100%;
			}

			.slick-track {
				display: flex;
				> * {
					height: inherit;
					display: flex;
					justify-content: center;
					align-items: center;
					img {
						width: 100%;
						object-fit: cover;
					}
				}
			}

			.slick-dots {

				button::before {
					height: var(--space-lg);
					width: var(--space-lg);
					color: var(--blue);
					opacity: 1;
				}

				li.slick-active button::before,
				li:hover button::before {
						color: var(--purple);
				}
			}
		}
	}
}

/* ----------------------------------------------- COURSE KEY FEATURES --------------------------------------------------- */
#course-key_features {
	div {
		margin-top: var(--space-xl);
		border-radius: var(--radius-lg);
		border: 1px solid var(--grey-light);
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--space-4xl);
		row-gap: var(--space-2xl);
		padding: var(--space-lg);
		width: 100%;

		> h5 {
			padding-bottom: 0;
		}

		> div {
			display: flex;
			gap: var(--space-default);
			border: none;
			padding: 0;
			margin-top: 0;

			> div {
				display: flex;
				flex-direction: column;
				border: none;
				padding: 0;
				margin-top: 0;
			}
		}
	}

	@media (max-width: 980px) {
		div {
			grid-template-columns: 1fr 1fr; 
		}
    }

    @media (max-width: 600px) {
		div {
      		grid-template-columns: 1fr; 
	  	}
    }
}

/* ----------------------------------------------- COURSE CLINICAL CENTRE --------------------------------------------------- */
#course-clinical_centre {
	background-size: cover !important;
	background-position: center 45% !important;
	background-repeat: no-repeat !important;
	> div {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-md);

		> p {
			color: var(--white);
		}

		> h4 {
			color: var(--white);
		}

		> a {
			text-transform: uppercase;
		}
	}
}


/* ----------------------------------------------- COURSE SPEAKERS --------------------------------------------------- */
#course-speakers {
  .speaker_lp_item {
    .img_cont {
      width: 150px !important;

      img {
        width: 150px !important;
      }
    }

	@media (max-width: 450px) {
        padding: var(--space-lg) 5px !important;
	  }
	}

	#speaker_lp {
		@media (max-width: 360px) {
			display: block !important;
		}
	}
}




/* ----------------------------------------------- Toggle --------------------------------------------------- */
.main_toggle {
	transition: 0.3s ease;
	border-radius: var(--radius-xl);
	background: var(--white);
	padding: var(--space-default) 12px !important;
	border: 0 !important;
	margin-bottom: var(--space-default);

	> h4 {
		font-size: var(--font-md) !important;
		color: var(--black) !important;
	}

	.toggle_close {
		transform: rotate(180deg);

		svg {
			margin: 1px 0 -1px 0;
		}
	}
}


/* ----------------------------------------------- Course Pricing - NEW --------------------------------------------------- */
#course-pricing {

	.main_toggle {
		margin-bottom: 0;
	}

	.cont {
		margin-top: var(--space-8xl);
		.main_toggle {
			border-radius: var(--radius-lg);
			border: 1px solid var(--grey-light) !important;
		}
	}

	.cont[data-has-side="0"] {
		display: grid;
		grid-template-columns: 410px minmax(0, 1fr);
		gap: var(--space-xl);
		align-items: start;

		.pricing { grid-column: 1; }

		.col-terms {
			margin-top: 0;
			grid-column: 2;
			display: grid;
			gap: var(--space-md);
		}
	}

	.col-terms {
		margin-top: var(--space-lg);
		grid-column: 2;
		display: grid;
		gap: var(--space-md);
	}

	.pricing {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xl);
		align-items: flex-start;
	}

	.main-dropdown_select {
		width: 100% !important;
	}

	.main_btn {
		padding: var(--space-default) !important;
		display: inline-flex !important;
	}

	.col-featured {
		flex: 0 0 410px;
		max-width: 410px;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		min-width: 0;

		.main_btn {
			display: block;
			width: 100%;
			text-align: center;
			padding: var(--space-md);
		}
	}

	.col-side {
		flex: 1 1 0;
		min-width: 380px;
		max-width: none;
		width: auto;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-xl);
		align-items: flex-start;

		.card {
			flex: 0 0 270px;
			width: 270px;
			max-width: 270px;
			border: 1px solid var(--purple-25);
			background: var(--white);

			.card-rows {
			border-top: 1px solid var(--purple-25);
			padding: 0 var(--space-xl);
			}

			.card-label {
			top: -23px;
			left: 50%;
			transform: translateX(-50%);
			}
		}

		.card[data-discount="discount"] .card-label {
			background: var(--purple);
			color: var(--white);
		}
	}

	.card {
		position: relative;
		background: var(--white);
		border: 1px solid var(--purple-50);
		border-radius: var(--radius-sm);
		padding: var(--space-md) 0;
		display: flex;
		flex-direction: column;
	}

	.card-featured {
		max-width: 410px;
		width: 100%;
		border: 1px solid var(--purple);
		background: #f7f7fa;

		.card-rows {
			border-top: 1px solid var(--purple);
			padding: 0 var(--space-xl);
		}
	}

	.card-label {
		display: none;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
		background: var(--yellow);
		color: var(--purple);
		font-weight: var(--fw-semibold);
		font-size: var(--font-base);
		line-height: 1;
		padding: var(--space-sm) var(--space-md);
		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
		white-space: nowrap;
		z-index: 2;
	}

	/* labels visibility */
	[data-price-type="launch"] .card-label,
	[data-price-type="early"] .card-label,
	.col-side .card[data-discount="discount"] .card-label {
		display: inline-flex;
	}

	.card-price {
		display: flex;
		justify-content: center;
		align-items: baseline;
		gap: 10px;

		.price { font-weight: var(--fw-semibold); line-height: 1.1; color: var(--black); }
		.price-strike { color: var(--black); text-decoration: line-through; }
	}

	.card-rows { display: grid; gap: 10px; padding: 0 var(--space-default); }

	.row {
		display: grid;
		grid-template-columns: 1fr 50px;
		align-items: start;
		gap: var(--space-sm);
		padding-top: var(--space-sm);

		+ .row { border-top: 1px dashed var(--purple-25); }

		/* allow to fill icon space */
		&.full {
			display: block !important;
		}

		.main_svg.svg_purple.svg_smaller {
			display: inline;
			vertical-align: middle;
		}

		.row-kicker { grid-column: 1; grid-row: 1; font-size: var(--font-sm); color: var(--purple); }
		.row-title  { grid-column: 1; grid-row: 2; font-size: var(--font-md); font-weight: var(--fw-semibold); color: var(--black); }
		.row-info   { font-size: var(--font-base); font-weight: var(--fw-regular);}

		.row-icon {
			grid-column: 2;
			grid-row: 1 / span 2;
			align-self: start;
			justify-self: end;
			margin-top: var(--space-sm);
			width: 30px; height: 30px;
			display: flex; align-items: center; justify-content: center;
			background: #ccc;

			svg { width: 70%; height: 70%; object-fit: contain; display: block; fill: var(--white); }
		}

		&[data-company="ive"]  .row-icon  { background: var(--blue); }
		&[data-company="isvps"] .row-icon { background: var(--purple); }
		&[data-company="hau"]  .row-icon  { background: var(--black); }
	}

	@media (max-width: 960px) {
		.cont[data-has-side="0"] { grid-template-columns: 1fr; }

		.card-label { position: static; transform: none; margin: 0 auto 8px; }

		.col-featured,
		.col-side { flex: 1 1 100%; max-width: 100%; }

		.col-featured { margin-bottom: var(--space-lg);}

		.card-featured { max-width: 100%; }

		.cont[data-has-side="0"] .col-terms { grid-column: 1; }

		.col-side {
			min-width: 0;

			.card {
			flex: 1 1 100%;
			width: 100%;
			max-width: 100%;
			}
		}

		.card-label,
		.card-featured .card-label,
		.col-side .card .card-label {
			position: relative;
			margin: -12px auto;
			left: auto;
			transform: none;
		}
	}
}