:root {
	--ink: #000000;
	--white: #ffffff;
	--line: #d9d8d8;
	--green: #1c8a6a;
	--dark: #414351;
	--soft: #f0f0f0;
}

* {
	box-sizing: border-box;
}

body {
	/* margin: 0;
  font-family: "Neue Haas Grotesk Display Pro", Inter, Arial, sans-serif; */
	color: var(--ink);
	background: var(--white);
	/* overflow-x: hidden; */
}

a {
	color: inherit;
}

.course-ctr {
	width: min(1230px, calc(100% - 32px));
	margin-inline: auto;
}

/* width: 100%;
  max-width: 100%;
  overflow-x: clip; */
.top-header {
	position: relative;
}

.nav-row,
.utility-row {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	z-index: 5;
}

.nav-row {
	top: 54px;
	background: var(--white);
	border-bottom: 1px solid #dee2e6;
}

.utility-row {
	top: 0;
	border-bottom: 1px solid #dee2e6;
}

.nav-inner {
	min-height: 74px;
	display: flex;
	align-items: center;
	gap: 22px;
	padding-inline: 12px;
}

.logo {
	width: 240px;
	max-width: 44vw;
}

.main-nav {
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.main-nav a {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	padding: 10px 12px;
}

.menu-course-btn {
	display: none;
}

.utility-inner {
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	padding-inline: 24px;
}

.contact-link {
	font-size: 13px;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--white);
}

.social-icons {
	display: flex;
	gap: 16px;
	align-items: center;
}

.social-icons img {
	width: 16px;
	height: 16px;
}

.danieli {
	width: 250px;
	height: 37px;
	object-fit: contain;
}

.hero {
	height: 630px;
	overflow: hidden;
	position: relative;
}

.hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 152%;
	top: -26%;
	object-fit: cover;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}

.hero-content {
	height: 100%;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	padding: 0 15px 40px;
}

.hero h1 {
	margin: 0;
	color: var(--white);
	font-size: 57.6px;
	line-height: 1.08;
	letter-spacing: 0.03em;
	max-width: 800px;
}

.page-main {
	display: grid;
	grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 66px);
	align-items: start;
	padding: 100px 0;
	min-width: 0;
}

.course-sidebar {
	border: 1px solid var(--line);
	/* display: flex;
  flex-direction: column;
  gap: 24px; */
	position: sticky;
	top: 20px;
	min-width: 0;
	max-width: 100%;
}
.course-sidebar > section {
	padding: 20px;
	border-bottom: 1px solid var(--line);
}
.course-sidebar > .meta-row {
	padding: 0;
}

.side-block {
	min-width: 0;
}

.side-block *:last-child {
	margin-bottom: 0;
}

.side-block h3 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1;
}

.side-block p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.47;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
}

.cost-card {
	border: 1px solid var(--green);
	margin-bottom: 12px;
}

.cost-head {
	background: var(--green);
	color: var(--white);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 700;
}

.cost-head span {
	font-size: 12px;
	font-weight: 450;
}

.cost-body {
	padding: 8px 12px;
	font-size: 16px;
	line-height: 1.47;
}

.meta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-width: 0;
	max-width: 100%;
}

.meta-row > div {
	padding: 20px;
	border-right: 1px solid var(--line);
}

.meta-row > div:last-child {
	border-right: 0;
}

.meta-row h4 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1;
}

.meta-row p {
	margin: 0;
	font-size: 16px;
	line-height: 1.47;
	overflow-wrap: anywhere;
}

.content,
.intro-content {
	display: flex;
	flex-direction: column;
	gap: 75px;
	min-width: 0;
}

@media (max-width: 1150px) {
	.page-main {
		display: flex;
		flex-direction: column;
		gap: 64px;
		padding: 64px 0 100px;
	}

	.course-sidebar {
		position: static;
		width: 100%;
		max-width: 760px;
	}

	.intro-content {
		flex-direction: column-reverse;
	}
}

.section {
	border: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
}

.section h2 {
	margin: 0 0 24px;
	font-size: 40px;
	line-height: 38.4px;
	letter-spacing: 0.02em;
}

.section h3,
.section h4 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1;
}

.section p,
.section li {
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 0.02em;
}

.section ul {
	margin: 0 0 20px;
	padding-left: 24px;
}

.section p.lead {
	font-weight: 700;
}
.benefits {
	margin-top: 64px;
}
.content-ctr img {
	width: 100%;
	max-width: 100%;
}

.course-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 13.8px;
	line-height: 21px;
	padding: 11px 20px;
	border: 1px solid transparent;
	white-space: normal;
	text-align: center;
}

.course-btn-green {
	background: var(--green);
	color: var(--white);
}

.course-btn-outline {
	border-color: var(--green);
	color: var(--green);
	background: var(--white);
}

.course-btn-white {
	background: var(--white);
	color: var(--green);
}

.course-btn-white-outline {
	background: transparent;
	color: var(--white);
	border-color: var(--white);
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.chips h4 {
	width: 100%;
	margin-bottom: 10px;
}

.chip {
	background: var(--dark);
	color: var(--white);
	text-decoration: none;
	font-size: 12px;
	line-height: 1.47;
	padding: 4px 12px;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.quote {
	background: var(--green);
	color: var(--white);
	padding: 22px;
}

.quote p {
	margin: 0 0 8px;
}

#how-it-helps ul,
.dark-list {
	list-style: none;
	padding-left: 0;
}
#how-it-helps ul li,
.dark-list li {
	position: relative;
	margin: 0 0 4px;
	padding: 8px 12px 8px 32px;
	background: var(--dark);
	color: var(--white);
	font-size: 12px;
	line-height: 1.47;
}
#how-it-helps ul li,
.dark-list li {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.9885%201.50421L5.46216%2010.9825L4.98826%2011.5793L4.45139%2011.0384L0.0610352%206.61521L1.02213%205.66123L4.87561%209.54352L11.928%200.662109L12.9885%201.50421Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 8px 50%;
	/* padding-left: 20px; */
}

.media {
	width: 100%;
	height: 300px;
	object-fit: cover;
	max-width: 100%;
}

.recognition {
	margin-top: 24px;
	padding: 20px;
	background: var(--soft);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: center;
}

.recognition img {
	width: 100%;
	max-height: 81px;
	object-fit: contain;
}

.module-grid {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.module {
	border: 1px solid var(--line);
	min-width: 159px;
}

.module h5 {
	margin: 0;
	font-size: 14px;
	line-height: 1;
	padding: 10px;
	border-bottom: 1px solid var(--line);
}

.course-ctr .module .module-description * {
	font-size: 12px;
	line-height: 1.47;
}

.highlighted-text {
	background: var(--green);
	color: var(--white);
	padding: 10px 20px;
	margin-bottom: 8px;
}

.agenda-wrap {
	overflow-x: auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.agenda-grid {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.agenda-item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	width: 200px;
	flex-shrink: 0;
}

.agenda-row .agenda-session {
	display: grid;
	grid-template-columns: 1fr 3fr;
	border-bottom: 1px solid var(--line);
}
.agenda-row .agenda-session .session-time {
	border-right: 1px solid var(--line);
}
.agenda-row .agenda-session > * {
	padding: 10px;
	font-size: 10px;
	font-style: normal;
	font-weight: 450;
	line-height: 120%; /* 12px */
	letter-spacing: 0.4px;
}

.agenda-title {
	padding: 12px;
	background: var(--dark);
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.section .agenda-title * {
	font-size: 12px;
	line-height: 1;
	margin: 0;
	color: var(--white);
}

.agenda {
	width: 100%;
	min-width: 1011px;
	border-collapse: collapse;
}

.agenda th,
.agenda td {
	border: 1px solid var(--line);
	vertical-align: top;
	padding: 10px;
}

.agenda th {
	background: var(--dark);
	color: var(--white);
	font-size: 12px;
	line-height: 1.47;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.agenda td {
	font-size: 10px;
	line-height: 1.2;
}

.travel-item {
	margin-top: 12px;
}

.travel-item h4 {
	display: flex;
	align-items: center;
	gap: 16px;
}

.travel-item img {
	width: 24px;
	height: 24px;
}

.callout {
	background: var(--green);
	color: var(--white);
	padding: 32px;
}

.callout h2 {
	color: var(--white);
}

.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.faq-item {
	border: 1px solid var(--line);
}

.faq-trigger {
	width: 100%;
	border: 0;
	background: var(--white);
	text-align: left;
	font-size: 16px;
	line-height: 22px;
	padding: 20px;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.faq-content {
	display: none;
	border-top: 1px solid var(--line);
	padding: 20px;
	font-size: 16px;
	line-height: 22px;
}

.faq-item.open .faq-content {
	display: block;
}

@media (max-width: 900px) {
	.nav-row,
	.utility-row {
		left: 0;
		right: 0;
		width: 100%;
		transform: none;
	}

	.hero-bg {
		width: 212%;
		height: 100%;
		left: -56%;
		top: 0;
	}

	.hero-content {
		padding: 0 15px 50px;
	}

	.hero h1 {
		font-size: 36px;
		line-height: 43.2px;
	}

	.nav-inner {
		min-height: 78px;
		padding-inline: 15px;
	}

	.logo {
		width: min(240px, 64vw);
		max-width: 100%;
	}

	.menu-course-btn {
		display: inline-flex;
		width: 50px;
		height: 50px;
		background: transparent;
		border: 0;
		font-size: 0;
		position: relative;
	}

	.menu-course-btn::before,
	.menu-course-btn::after {
		content: "";
		position: absolute;
		left: 12px;
		right: 12px;
		height: 1px;
		background: #000;
	}

	.menu-course-btn::before {
		top: 18px;
		box-shadow: 0 9px 0 #000;
	}

	.menu-course-btn::after {
		bottom: 14px;
	}

	.main-nav {
		display: none;
		width: 100%;
		margin: 0;
		padding: 12px 15px 15px;
		border-top: 1px solid var(--line);
		background: var(--white);
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.main-nav.open {
		display: flex;
	}

	.utility-inner {
		justify-content: space-between;
		padding-inline: 24px;
		min-width: 0;
	}

	.contact-link {
		display: none;
	}

	.danieli {
		width: min(250px, 64vw);
		max-width: 64vw;
		flex: 1 1 auto;
		min-width: 0;
	}

	.page-main {
		padding: 0 0 100px;
		min-width: 0;
	}

	.course-sidebar {
		position: static;
		border-left: 0;
		border-right: 0;
		min-width: 0;
	}

	.content,
	.intro-content {
		padding: 0;
		gap: 75px;
		min-width: 0;
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
	}

	.content > * {
		min-width: 0;
		max-width: 100%;
	}

	.content p,
	.content li,
	.content h1,
	.content h2,
	.content h3,
	.content h4,
	.content h5,
	.course-sidebar p,
	.course-sidebar li,
	.course-sidebar h1,
	.course-sidebar h2,
	.course-sidebar h3,
	.course-sidebar h4,
	.content a,
	.content button {
		overflow-wrap: anywhere;
		word-break: normal;
	}

	.chips,
	.button-group {
		min-width: 0;
	}

	.chips .chip,
	.button-group .course-btn {
		max-width: 100%;
	}

	.chips .chip,
	.button-group .course-btn,
	.main-nav a {
		overflow-wrap: anywhere;
		word-break: break-word;
		white-space: normal;
	}

	.section h2 {
		font-size: clamp(30px, 9vw, 40px);
		line-height: 1.05;
	}

	.recognition {
		grid-template-columns: 1fr;
	}

	.recognition img {
		width: 140px;
		justify-self: end;
	}

	.faq-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.course-ctr {
		width: calc(100% - 20px);
	}

	.hero-content {
		padding: 0 10px 42px;
	}

	.hero h1 {
		font-size: clamp(30px, 8.8vw, 36px);
		line-height: 1.15;
	}

	.utility-inner {
		padding-inline: 12px;
		gap: 10px;
	}

	.main-nav a {
		padding: 8px 0;
	}

	.button-group .course-btn,
	.chips .chip {
		width: 100%;
	}

	.meta-row {
		grid-template-columns: 1fr;
	}

	.meta-row > div {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.meta-row > div:last-child {
		border-bottom: 0;
	}

	.section {
		overflow-x: clip;
	}
}
