@import url('variables.css');
@import url('global.css');

/* Optional base font rule  ********/
:root {
	--font-main: "Martel Sans", sans-serif;
}

html {
	font-family: var(--font_body);
	color: var(--color_text--default);
	background-color: var(--color_background--surface);

}

body {}

main {
	margin-bottom: 5rem;

}



.button {
	background-color: var(--color_button--green);
	border: none;
	border-radius: 25px;
}

.btn {
	border-radius: 25px;
	pointer-events: auto;
	cursor: pointer;
	background-color: var(--color_button--green);

	border: none;
	padding: .5rem 2rem;
	margin: 0;
	width: fit-content;
	font-size: inherit;
	position: relative;
	display: inline-block;
}

.btn::before,
.btn::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.button--calypso {
	overflow: hidden;

	font-size: 1.15rem;
	/* border-radius: 0.85rem; */
	color: #fff;
}

.button--calypso span {
	display: block;
	color: var(--color_background--surface);

	position: relative;
	/* mix-blend-mode: difference; */
	z-index: 3;
}

.button--calypso:hover span {
	animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
}

@keyframes MoveScaleUpInitial {
	to {
		transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
		opacity: 0;
	}
}

@keyframes MoveScaleUpEnd {
	from {
		transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
		opacity: 0;
	}

	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.button--calypso::before {
	content: '';
	background: #000;
	background: var(--color_button);
	width: 120%;
	height: 0;
	padding-bottom: 120%;
	top: -110%;
	left: -10%;
	border-radius: 50%;
	transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
}

.button--calypso:hover::before {
	transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--calypso::after {
	content: '';
	background: var(--color_button);
	transform: translate3d(0, -100%, 0);
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--calypso:hover::after {
	transform: translate3d(0, 0, 0);
	transition-duration: 0.05s;
	transition-delay: 0.4s;
	transition-timing-function: linear;
}


.l-header {
	margin-top: 1.8rem;
	display: flex;
	height: 5.5rem;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4rem;
}

.header__logo {
	margin-bottom: 2rem;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;

}

.header__links {
	margin-top: 1rem;
	display: flex;
	gap: 2rem;
}

.header__links>a {
	color: var(--color_text--default);
	font-weight: var(--font_weigtht--normal);
	opacity: 0.8;
	text-decoration: none;

}

.header__links>a:hover {
	text-decoration: none;
	opacity: 1;
	font-weight: var(--font_weight--semibold);
}

.header__button {
	background-color: var(--color_button--green);
	opacity: .8;
	font-size: 0.9rem;
	padding-inline: 1.5rem;

}

.header__button:hover {
	background-color: var(--color_background--surface);
	/* border: 2px solid var(--color_button--light); */
	color: var(--color_button--light);
	font-weight: var(--font_weight--semibold);
	box-shadow: inset 0 0 0 2px var(--color_button--light);


}

section.container--wide {
	padding-inline: calc(var(--space_gutter) + var(--space_1));
}

.hero {
	display: flex;
	flex-direction: row;
	height: 40rem;
	justify-content: space-between;
}

.l-hero {
	/* l-hero__left l-hero */
}

.l-hero__left,
.l-hero__middle {
	flex: 0 0 300px;
}

.l-hero__middle {
	flex: 0 1 600px;
}

.l-hero__right {

	flex: 2.5 1 0;

}

.l-hero__left {
	display: flex;
	flex-direction: column;
	overflow: visible;
	/* width:calc(100% - 20ch) */
	max-width: 36%;
	gap: 2rem;
	flex: 2 1 auto;

}

.l-hero__left>*+*+* {
	/* margin-top:2.5rem; */
}

.hero__rating {
	font-size: 0.8rem;
	display: flex;
	align-items: baseline;
	z-index: 3;

}

.hero__bubble {
	display: flex;
	background-color: var(--color_button--light);
	border-radius: var(--radius_button);
	margin-right: 0.25rem;
	padding-inline: 0.4rem;
	padding-block: 0.25rem 0.125rem;
	color: var(--color_background--surface);
	align-items: center;
	gap: 0.2rem;
}


.hero__rating li {
	list-style-type: none;
	display: inline;
	vertical-align: middle;
}



.hero__rating-text {
	color: var(--color_text--subtle);
	opacity: 0.8;
	font-size: 1rem;
	line-height: 0;
}

.hero__star {
	display: block;
	margin-bottom: 5px;
}

.l-hero__left>.hero__title {
	margin-top: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	white-space: normal;
	overflow: visible;
	z-index: 2;
	font-weight: var(--font_weight--semibold);
	line-height: 1.5;
	font-size: calc(var(--font_size--xxlarge) + 0.2rem);

	margin-bottom: -1rem;

}

.c-hero__highlight {
	position: relative;

}

.hero__highlight::after {
	content: "";
	position: absolute;

	top: 0;
	bottom: 5px;
	left: 0;
	right: -15px;

	z-index: -2;

	background-color: var(--color_background--surface);
	border-radius: 2rem;
}

.hero__highlight--first::after {
	z-index: -1;
}

.hero__highlight--last::after {
	top: 10px;
}


.l-hero__left>.hero__text {

	line-height: 1.5;
	opacity: .75;
	padding-right: 3rem;
}



.l-hero__left>button {
	background-color: var(--color_button--green);
	max-width: fit-content;
	border: none;
	border-radius: 25px;
	font-weight: var(--font_weight--bold);
}

.hero__button:hover {
	background-color: var(--color_background--surface);
	/* border: 2px solid var(--color_button--light); */
	color: var(--color_button);
	font-weight: var(--font_weight--semibold);
	box-shadow: inset 0 0 0 2px var(--color_button);

}

.l-hero__avatars {
	margin-top: 5rem;
	display: flex;
	gap: 0.8rem;

}

.hero__avatar-text {
	font-size: var(--font_size--small);
	line-height: var(--font_height--small);
	max-width: 50%;
	color: var(--color_text--brown--2);
	font-weight: var(--font_weight--semibold);
}

.hero__avatar-text>span {
	color: var(--color-text--lightBrown--2);
}

.hero__avatars {
	display: flex;
}

.hero__avatar-image {
	width: 2rem;
	height: 2rem;
	border-radius: 1rem;

}

.hero__avatars>*:not(:last-child) {
	margin-right: -0.5rem;
}


.l-hero__middle {
	margin-right: 2rem;
}


.l-hero__middle>.hero__image {

	object-fit: cover;
	max-height: 100%;
	width: 100%;
	border-radius: var(--radius_image);
	min-height: 100%;
	position: relative;
	z-index: 1;

}

.l-hero__right {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 1rem;
	justify-content: flex-end;
}

.l-hero__right>.hero__title {
	font-size: var(--font_size--large);
	line-height: 1.3;
	font-weight: var(--font_weight--semibold);
	white-space: pre;

}

.c-hero__highlight {

	white-space: pre;
}

.l-hero__right>.hero__text {

	line-height: var(--font_height--small);
	color: var(--color_text--subtle);
	white-space: pre;
}

.l-hero__right>.hero__image {

	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	border-radius: var(--radius_image);
	object-position: bottom;
}


@media (max-width: 828px) {
	.hero {
		flex-wrap: wrap;
		height: auto;
		gap: 3rem;
	}

	.l-hero__middle {
		flex: 1 1 400px;

		margin: 0;
	}

	.l-hero__left {
		max-width: 100%;
		flex: 1 1 auto;
		align-items: center;
	}



	.l-hero__left > .hero__title {
		white-space: normal;
		text-align: center;
    align-items: center;
    margin-top:0;

		font-size: 2.4rem;
	}
	

	.hero__text {
		text-align: center;
		padding-right:0 !important;
	}
}

/**********
- about
**********/


.l-about {
	margin-top: 5rem;
}

.about__title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
}

.about__title>h2 {
	max-width: 28ch;

}

.about__title>p {
	font-size: 1.5rem;
	opacity: .8;
}

.about__card {
	margin-top: 1.5rem;
	display: flex;
	max-height: auto;
	gap: 3.5rem;
	background-color: var(--color_card_background--brown);
	border-radius: var(--radius_image);
	flex-wrap: wrap;



}

.about__image {
	min-width: 0;
	width: auto;
	object-fit: cover;
	border-radius: var(--radius_image);
	object-position: top;
	flex: 1 1 300px;
	max-height: 700px;



}

.l-about__content {
	display: flex;
	flex-direction: column;
	flex: 2 1 430px;

}

.about__content {
	margin: 2.8rem;
	margin-left: 0;
	margin-bottom: 1rem;

	padding: 2rem;
	background-color: var(--color_background--surface);
	border-radius: var(--radius_image);

}

.about__content>*+* {
	margin-bottom: 1rem;
}

.about__content-title {
	margin-bottom: 2rem;
}


.about__bubbles {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	;
	margin-bottom: 1rem;

}

.about__bubble {
	background-color: var(--color_background--surface);
	border-radius: var(--radius_image);
	padding: 4px 8px;

	display: flex;
	align-items: center;
	gap: 0.5rem;

	font-size: 1rem;
}

.about__icon {
	width: 1.5rem;
	height: 1.5rem;
}

@media (max-width: 828px) {
	.about__card {

		flex-direction: column;
		gap: 1.5rem;
		padding-inline: 1.3rem;
		padding-top: 1.5rem;

	}

	.about__content {
		margin-top: 0;
		margin-right: 0;

	}

	.about__image {
		max-height: 400px;
	}
}

/**********
- degrees
**********/

.l-degree {
	margin-top: 5rem;
}

.l-degree>h2 {
	text-align: center;
}

.w-degree__cards {
	display: flex;
	margin-top: 2rem;
	gap: 2rem;
	flex-wrap: wrap;
}



.degree__cards {
	display: flex;
	flex-direction: column;
	flex: 1 1 300px;
	gap: 2rem;
}

.degree__image {
	max-width: 30rem;
	border-radius: var(--radius_image);
	object-fit: contain;
	min-width: 0;
	height: 100%;
	display: none;
}

.degree__card>svg {
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 3.5rem;

}

.degree__card>svg>* {
	fill: white;
}

.degree__card>h3 {
	font-size: 1.5rem;
}


.degree__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	background-color: var(--color_card_background--brown);
	border-radius: var(--radius_image);
	font-size: .8rem;
	flex: 1 1 auto;
}

.degree__card--big>svg {
	margin-bottom: 1rem;

}

/**********
- offer
**********/

.l-offer {
	margin-top: 5rem;
	padding-block: 3rem;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;

}



.offer__bg {
	position: absolute;
	z-index: 0;
	opacity: .25;
	filter: blur(120px);
	height: 280px;
	top: -10%;
	border-radius: 20%
}

.offer__bg--right {
	background-color: #E4A98D;
	right: 5%;
	width: 45%;
	transform: rotate(355deg);


}

.offer__bg--left {
	background-color: #8F9F70;

	left: 5%;

	width: 45%;

	transform: rotate(7deg);

}

.offer__title {
	position: relative;
	z-index: 1;
	margin-inline: auto;
	line-height: 1.5;
	font-weight: var(--font_weight--semibold);
	font-size: 2rem;
	max-width: min(60%, 100%);
	text-align: center;
	opacity: 1;
}

.offer__details {
	position: relative;
	z-index: 1;
	margin-inline: auto;
	line-height: 1.5;
	font-size: 1rem;
	max-width: 60%;
	text-align: center;
}

.offer__button {
	width: fit-content;
}

.offer__title--dimmed {
	opacity: .8;
}

@media (max-width: 828px) {
	.offer__title {
		max-width: 90vw;
	}

}

/* ******* 
 - faq 
******* */

.faq-section {

	margin: 50px auto;
	margin-top: 7rem;
	padding: 20px;
	display: flex;
	gap: 5vw;

	flex-wrap: wrap;
}

.faq-details {
	flex: 1 1 350px;
}

.faq-title {
	font-size: 2.5rem;
	margin-bottom: 20px;

}

.faq-p {
	font-size: 1rem;

}

.faq-item {
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
	padding-inline: 2rem;

}

.faq-container {
	flex: 2 1 400px
}

.faq-question {

	color: var(--color_text--default);
	width: 100%;
	font-size: 1.3rem;
	background: none;
	border: none;
	outline: none;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	white-space: normal;
}

.faq-question:active {
	background-color: var(--color_card_background--brown);
}

.faq-question:hover,
.faq-question:focus {
	background-color: inherit;
}

.faq-question .icon {
	color: var(--color_text--default);
	transition: transform 0.3s ease;
	font-size: 1.2rem;
}

.faq-answer {
	font-size: .9rem;
	color: var(--color_text--details);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.3s ease;
	padding: 0 0;
}

.faq-answer p {
	margin: 10px 0;
}

.faq-item.active .faq-answer {
	max-height: 200px;
	/* enough for content */
	padding: 10px 0;
}

.faq-item.active .faq-question .icon {
	transform: rotate(180deg);
	content: "–";
}

.faq-item.active {
	background-color: var(--color_card_background--brown);
	border-bottom: none;
	border-radius: 1rem;
}

/**********
- action
**********/

.l-action {
	display: flex;
	gap: 4rem;

	margin-top: 7rem;
	background-color: var(--color_card_background--brown);
	border-radius: var(--radius_image);
	padding-block: 3rem;
	padding-inline: 3rem !important;


}

.action__left {
	flex: 1 1 400px;
	display: flex;
	gap: 3rem;
	flex-direction: column;
	margin-top: 2rem;
}

.action__title {
	font-size: 1.7rem;
}

.action__button {
	width: fit-content;
	felx: 0 0 auto;
}

.action__right {
	flex: 0 1 400px;
	position: relative;
	height: 300px;

}

.action__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.action__image--top {
	min-width: 100%;
	position: relative;
	z-index: 1;
}

.action__image--bottom {
	position: absolute;
	height: 100%;
	z-index: 0;
	left: -22%;
}

@media (max-width: 828px) {
	.l-action {
		margin-inline: 1rem;
	}

	.action__left,
	.action__left .btn {
		max-width: 100%;
	}


	.action__right {
		display: hidden;
	}


}

/* popup modal */


.m-container {
	height: 200vh;
	background-image: url(assets/laptop.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.modal {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	/* height: 60px; */
	background: rgba(51, 51, 51, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: 0.4s;
	z-index: 3;
}

.modal-container {
	display: flex;
	max-width: 720px;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	position: absolute;
	opacity: 0;
	pointer-events: none;
	transition-duration: 0.3s;
	background: #fff;
	transform: translateY(100px) scale(0.4);
}

.modal-title {
	font-size: 26px;
	margin: 0;
	font-weight: 400;
	color: #55311c;
}

.modal-desc {
	margin: 6px 0 30px 0;
}

.modal-left {
	padding: 60px 30px 20px;
	background: #fff;
	flex: 1.5;
	transition-duration: 0.5s;
	transform: translateY(80px);
	opacity: 0;
}

.modal-button {
	color: #7d695e;
	font-family: "Nunito", sans-serif;
	font-size: 18px;
	cursor: pointer;
	border: 0;
	outline: 0;
	padding: 10px 40px;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
	transition: 0.3s;
}

.modal-button:hover {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.8);
}

.modal-right {
	flex: 2;
	font-size: 0;
	transition: 0.3s;
	overflow: hidden;
}

.modal-right img {
	width: 100%;
	height: 100%;
	transform: scale(2);
	object-fit: cover;
	transition-duration: 1.2s;
}

.modal.is-open {
	height: 100%;
	background: rgba(51, 51, 51, 0.85);
}

.modal.is-open .modal-button {
	opacity: 0;
}

.modal.is-open .modal-container {
	opacity: 1;
	transition-duration: 0.6s;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.modal.is-open .modal-right img {
	transform: scale(1);
}

.modal.is-open .modal-left {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 0.1s;
}

.modal-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-buttons a {
	color: rgba(51, 51, 51, 0.6);
	font-size: 14px;
}

.sign-up {
	margin: 60px 0 0;
	font-size: 14px;
	text-align: center;
}

.sign-up a {
	color: #8c7569;
}

.input-button {
	padding: 8px 12px;
	outline: none;
	border: 0;
	color: #fff;
	border-radius: 4px;
	background: #8c7569;
	font-family: "Nunito", sans-serif;
	transition: 0.3s;
	cursor: pointer;
}

.input-button:hover {
	background: #55311c;
}

.input-label {
	font-size: 11px;
	text-transform: uppercase;
	font-family: "Nunito", sans-serif;
	font-weight: 600;
	letter-spacing: 0.7px;
	color: #8c7569;
	transition: 0.3s;
}

.input-block {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-bottom: 20px;
	transition: 0.3s;
}

.input-block input {
	outline: 0;
	border: 0;
	padding: 4px 0 0;
	font-size: 14px;
	font-family: "Nunito", sans-serif;
}

.input-block input::placeholder {
	color: #ccc;
	opacity: 1;
}

.input-block:focus-within {
	border-color: #8c7569;
}

.input-block:focus-within .input-label {
	color: rgba(140, 117, 105, 0.8);
}

.icon-button {
	outline: 0;
	position: absolute;
	right: 10px;
	top: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	background: 0;
	padding: 0;
	cursor: pointer;
}

.scroll-down {
	position: fixed;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #7d695e;
	font-size: 32px;
	font-weight: 800;
	transform: translate(-50%, -50%);
}

.scroll-down svg {
	margin-top: 16px;
	width: 52px;
	fill: currentColor;
}

@media (max-width: 750px) {
	.modal-container {
		width: 90%;
	}

	.icon-button.close-button svg {
		fill: black;
	}

	.modal-right {
		display: none;
	}
}

/* -- services */

.l-services {
	margin-top: 5rem;
}

.card-wrapper {
	max-width: 1100px;
	margin: 0 auto 35px;
	padding: 20px 10px;
	overflow: hidden;
}

.card-list .card-item {
	list-style: none;
	height: auto;
}

.card-list .card-item .card-link {
	user-select: none;
	display: block;
	background: #fdf7f7;
	padding: 18px;
	border-radius: 12px;
	text-decoration: none;
	border: 2px solid transparent;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
	transition: 0.2s ease;
	min-height: 600px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.services__content-title {
	margin-inline: auto;
	width: fit-content;
}

.card-list .card-item .card-link:active {
	cursor: grabbing;
}

.card-list .card-item .card-link:hover {
	border-color: var(--color_text--subtle);
}

.card-list .card-link .card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
}

.card-list .card-link .badge {
	color: var(--color_text--details);
	margin: 16px 0 18px;
	padding: 8px 16px;
	font-weight: 500;
	font-size: 0.95rem;
	background: var(--color_card_background--brown);
	width: fit-content;
	border-radius: 50px;
}

.card-list .card-link .s-badge {
	font-size: .7rem;
}

.card-list .card-link .card-title {
	font-size: 1rem;
	color: var(--color_text--default);
	;
	line-height: 1.5;

}

.card-list .card-link .card-button {
	height: 35px;
	width: 35px;
	color: var(--color_text--details);
	border-radius: 50%;
	margin: 30px 0 5px;
	background: none;
	cursor: pointer;
	transform: rotate(-45deg);
	border: 2px solid var(--color_text--details);
	transition: 0.4s ease;
}

.card-list .card-link:hover .card-button {
	color: #fff;
	background: var(--color_text--details);
}

.card-wrapper .swiper-pagination-bullet {
	height: 13px;
	width: 13px;
	opacity: 0.5;
	background: var(--color_text--details);
}

.card-wrapper .swiper-pagination-bullet-active {
	opacity: 1;
}

.card-wrapper .swiper-slide-button {
	color: var(--color_text--details);
	margin-top: -35px;
}

@media screen and (max-width: 768px) {
	.card-wrapper {
		margin: 0 10px 25px;
	}

	.card-wrapper .swiper-slide-button {
		display: none;
	}
}

/* -- ages */

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-family: sans-serif
}

body {
	margin: 0
}

section {
	display: block
}

canvas,
video {
	vertical-align: baseline;
	display: inline-block
}

[hidden] {
	display: none
}

a {
	background-color: #0000
}

a:active,
a:hover {
	outline: 0
}

svg:not(:root) {
	overflow: hidden
}

code {
	font-family: monospace;
	font-size: 1em
}

button {
	color: inherit;
	font: inherit;
	margin: 0
}

button {
	overflow: visible
}

button {
	text-transform: none
}

button {
	-webkit-appearance: button;
	cursor: pointer
}

button::-moz-focus-inner {
	border: 0;
	padding: 0
}

* {
	box-sizing: border-box
}

html {
	height: 100%
}

.w-inline-block {
	max-width: 100%;
	display: inline-block
}

p {
	margin-top: 0;
	margin-bottom: 10px
}

.w-embed:before,
.w-embed:after {
	content: " ";
	grid-area: 1/1/2/2;
	display: table
}

.w-embed:after {
	clear: both
}

button,
[type=button] {
	cursor: pointer;
	-webkit-appearance: button;
	border: 0
}

.w-background-video {
	color: #fff;
	height: 500px;
	position: relative;
	overflow: hidden
}

.w-background-video>img {
	object-fit: cover;
	z-index: -100;
	background-position: 50%;
	background-size: cover;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	inset: -100%
}

.w-background-video>video::-webkit-media-controls-start-playback-button {
	-webkit-appearance: none;
	display: none !important
}

.w-tabs {
	position: relative
}

.w-tabs:before,
.w-tabs:after {
	content: " ";
	grid-area: 1/1/2/2;
	display: table
}

.w-tabs:after {
	clear: both
}

.w-tab-menu {
	position: relative
}

.w-tab-link {
	vertical-align: top;
	text-align: left;
	cursor: pointer;
	color: #222;
	background-color: #ddd;
	padding: 9px 30px;
	text-decoration: none;
	display: inline-block;
	position: relative
}

.w-tab-link.w--current {
	background-color: #c8c8c8
}

.w-tab-link:focus {
	outline: 0
}

.w-tab-content {
	display: block;
	position: relative;
	overflow: hidden
}

.w-tab-pane {
	display: none;
	position: relative
}

.w--tab-active {
	display: block
}

@media screen and (max-width:479px) {
	.w-tab-link {
		display: block
	}
}

@keyframes spin {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

:root {

	--color--background-dark-1: #1d1d1d;
	--font-family--geist: Geist, sans-serif;
	--color--accent-color: #f6fc8f;
	--heading--h1: 4.6rem;
	--heading--h2: 4rem;
	--heading--h3: 3rem;
	--heading--h4: 2rem;
	--heading--h5: 1.4rem;
	--heading--h6: 1.1rem;
	--spacing--sm: 2.25rem;
	--color--divider-grey\<deleted\|variable-9956ef44-55fe-a8dc-bc68-6dccf8e2e07c\>: #b4b4b4;
	--text-size--medium: 1.25rem;
	--color--transparent: transparent;
	--border-radius--round: 999rem;
	--color--copy-dark: #1d1d1d;
	--spacing--xs: .8rem;
	--text-size--large: 1.7rem;
	--container--small: 62rem;
	--page-padding--desktop: 4rem;
	--page-padding--tablet: 4vw;
	--color--copy-grey: #757575;
	--container--large: 100rem;
	--color--copy-bright: #e2d6f7;
	--border-radius--small: 1rem;
	--border-radius--medium: 2.5rem;
	--color--background-dark-2: #343434;
	--color--backgorund-bright-1: #ffddc3;
	--color--background-bright-2: #e3deda;
	--container--medium: 80rem;
	--container--tiny: 32rem;
	--spacing--xxs: .5rem;
	--spacing--md: 6rem;
	--spacing--xl: 9rem;
	--text-size--small: 1.1rem;
	--text-size--tiny: .9rem
}

body {}

.l-ages {
	padding-inline: var(--space_gutter);
	max-width: var(--width_wide);
	margin-inline: auto;
}

.auto-tabs-menu.w-tab-menu * {
	text-decoration: none;
}

p {
	margin-bottom: 0;
	line-height: 1.4
}

a {
	color: inherit;
	text-decoration: underline
}

.button {
	border: .1em solid var(--color--transparent);
	border-radius: var(--border-radius--round);
	background-color: var(--color--accent-color);
	color: var(--color--copy-dark);
	text-align: center;
	letter-spacing: -.03rem;
	text-transform: uppercase;
	padding: 1.2rem 3rem;
	font-size: 1.2rem;
	font-weight: 600
}

.button:hover {
	border-color: var(--color--accent-color);
	background-color: var(--color--transparent);
	color: var(--color--accent-color)
}

.page-padding {
	padding-right: var(--page-padding--desktop);
	padding-left: var(--page-padding--desktop)
}

.container-large {
	max-width: var(--container--large);
	width: 100%;
	margin-left: auto;
	margin-right: auto
}

.section-tabs-autoplay {
	background-color: var(--color_background--surface);
	padding-top: 5rem;
	padding-bottom: 5rem
}

.auto-tabs-progress-bar {
	border-radius: var(--border-radius--round);
	background-color: #d56605;
	background-image: linear-gradient(180deg, #b9670d, #caa431);
	width: .3rem;
	height: 50%;
	margin-left: -.3rem;
	position: absolute;
	inset: 0% auto 0% 0%
}

.copy-small {
	font-size: 1.05rem;
	line-height: 1.4
}

.auto-tabs-content {
	background: var(--color_card_background--brown);
	border-radius: .75rem;
	flex: 1;
	height: 78svh;
	min-height: 40rem;
	margin-right: -4rem;
	overflow: clip
}

.auto-tabs-button-text {
	white-space: nowrap;
	font-weight: 600;
	line-height: .9
}

.auto-tabs-icon {
	width: 1.1rem;
	height: 1.1rem
}

.icon-component {
	display: block
}

.heading-style-h4 {
	letter-spacing: 0;
	text-transform: none;
	font-size: 2rem;
	line-height: 1.2
}

.auto-tabs-content-inner {
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 4.5rem 4.5rem 4.5rem 0;
	display: flex
}

.auto-tabs-content-inner.is-right-align {
	padding-left: 4.5rem;
	padding-right: 0
}

.auto-tabs-animate-from-right {
	border: 1px solid #ffffff24;
	border-radius: .75rem 0 0 .75rem;
	width: 100%;
	height: 100%;
	margin-right: -1px;
	position: relative;
	overflow: clip
}

.video-icon {
	width: 100%;
	padding-left: .2em
}

.overflow-hidden {
	overflow: hidden
}

.auto-tabs-button {
	background-color: var(--color--transparent);
	color: #7e7e7e;
	margin-bottom: .8rem;
	padding: 0;
	position: absolute;
	inset: auto auto 0% 0%
}

.pause-icon {
	height: 100%
}

.auto-tabs-menu {
	border-left: .3rem solid #7171714d;
	width: 50%;
	min-width: 34rem;
	max-width: 44rem;
	margin-top: 4.5rem;
	margin-bottom: 4.5rem;
	padding-right: 11rem
}

.auto-tabs-link {
	color: var(--color_text--default);
	background-color: #0000;
	border-left: .3rem solid #0000;
	margin-left: -.3rem;
	padding: 1rem 0 1rem 2rem;
	transition: color .4s, border-color .4s
}

.auto-tabs-link.w--current {
	color: var(--color_text--details);
	background-color: #0000;
	border-left-color: #4D4D4D50;
}

.auto-tabs-animate-from-left {
	border: 1px solid #ffffff24;
	border-top-right-radius: .75rem;
	border-bottom-right-radius: .75rem;
	width: 100%;
	height: 100%;
	margin-left: -1px;
	position: relative;
	overflow: clip
}

.auto-tabs-description {
	margin-top: .7rem
}

.cover-100--absolute {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0%
}

.autoplay-tabs-custom-js {
	display: none
}

.auto-tabs-content-item {
	width: 100%;
	height: 100%;
	overflow: clip
}

.auto-tabs-wrapper {
	justify-content: space-between;
	align-items: center;
	display: flex
}

.auto-tabs-button-inner {
	grid-column-gap: .4rem;
	grid-row-gap: .4rem;
	justify-content: flex-start;
	align-items: center;
	display: flex
}

.auto-tabs-button-inner.is-absolute {
	position: absolute;
	inset: 0% auto auto 0%
}

.pause-icon-component {
	height: 100%
}

.auto-tabs-component {
	position: relative
}

.autoplay-tabs-custom-css {
	display: none
}

.auto-tabs-component>h2 {
	text-align: center;

}

@media (min-width:700px) {
	.auto-tabs-component>h2 {
		margin-bottom: 4rem;
	}
}

@media screen and (max-width:991px) {

	.page-padding {
		padding-right: var(--page-padding--tablet);
		padding-left: var(--page-padding--tablet)
	}

	.auto-tabs-content {
		aspect-ratio: 3/2;
		flex: none;
		height: auto;
		min-height: 30rem;
		margin-right: 0
	}

	.auto-tabs-button {
		justify-content: center;
		align-items: center;
		margin-bottom: 0;
		display: flex;
		inset: 0% auto auto 0%
	}

	.auto-tabs-menu {
		width: 100%;
		min-width: auto;
		max-width: none;
		margin-bottom: 3rem
	}

	.auto-tabs-wrapper {
		flex-flow: column;
		justify-content: space-between;
		align-items: stretch
	}
}

@media screen and (max-width:767px) {
	.auto-tabs-menu {
		padding-right: 0
	}
}

@media screen and (max-width:600px) {
	.auto-tabs-component>h2 {
		font-size: 2rem;
	}

	.auto-tabs-link-titel * {
		font-size: 1.5rem;
	}
}

@media screen and (max-width:479px) {

	.auto-tabs-content {
		aspect-ratio: 2/3
	}

	.auto-tabs-button {
		inset: 0% auto auto 0%
	}
}

/*-- footer*/
/* ---------------------------------- */
/* BURGER ICON */
/* ---------------------------------- */
.burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 999;
}

#burger {
	padding: 5px;
	border-radius: 3px;
}

.burger span {
	width: 25px;
	height: 3px;
	background: var(--color_text--default);
	transition: 0.3s ease;
}

/* Burger becomes X */
.burger.active span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.burger.active span:nth-child(2) {
	opacity: 0;
}

.burger.active span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ---------------------------------- */
/* RESPONSIVE DROPDOWN MENU */
/* ---------------------------------- */
@media (max-width: 768px) {
	.l-header {
		position: relative;
	}

	.header__links,
	.header__cta {
		display: none;
	}

	.burger {
		display: flex;
	}

	/* OPEN MENU STYLING */
	.header__links.active {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 5.5rem;
		right: 4%;
		left: 4%;
		padding: 2rem 1.5rem;
		background: var(--color_background--surface);
		border-radius: 0.75rem;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

		/* polished spacing */
		gap: 1.2rem;
		text-align: center;
		animation: dropdown 0.25s ease;
		z-index: 20;
	}

	.header__links.active a {
		font-size: 1.1rem;
		font-weight: var(--font_weight--semibold);
		opacity: 1;
	}

	.header__cta.active {
		display: block;
		width: 100%;
		margin-top: 1rem;
		text-align: center;
		animation: fadein 0.3s ease;
		position: static;
	}
}

/* Small animations */
@keyframes dropdown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* -- footer */
.footer {
	margin-top: 4rem;
	padding: 3rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--color_text--default);
	opacity: 0.9;
	font-size: 0.95rem;
}

.footer__content {
	display: flex;
	justify-content: space-between;
	gap: 3rem;
	align-items: flex-start;
	flex-wrap: wrap;
}

.footer__logo img {
	max-width: 240px;
	object-fit: contain;
}

.footer__hours h4,
.footer__contact h4 {
	font-weight: var(--font_weight--semibold);
	margin-bottom: 0.8rem;
	opacity: 0.9;
}

.footer__hours p,
.footer__contact p {
	margin: 0.2rem 0;
	opacity: 0.8;
}

.footer__contact a {
	color: var(--color_text--default);
	text-decoration: none;
}

.footer__contact a:hover {
	text-decoration: underline;
	opacity: 1;
}

.footer__bottom {
	text-align: center;
	margin-top: 2.5rem;
	opacity: 0.6;
	font-size: 0.85rem;
}

.footer__bottom p {
	margin: 0.2rem 0;
}

/* ---------- Responsive ---------- */
@media (max-width:768px) {
	.footer__content {
		flex-direction: column;
		align-items: center;
	}
}