/* ==========================================================================
   Metamorph Pre School — Our Promise page
   Breakpoints: laptop <= 1366px, tablet <= 1024px, mobile <= 767px
   ========================================================================== */

.big-heading {
	color: #0a303a;
	font-family: var(--font-display);
	line-height: 1.1em;
	white-space: nowrap;
	transform-origin: left center;
}

.promise-title {
	color: #0a303a;
}

.promise-text {
	line-height: 1.7em;
}

.promise-text p {
	margin: 0;
}

/* ---------- Title banner (background slideshow) ---------- */
.promise-hero {
	position: relative;
	overflow: hidden;
	margin-top: -187px;
	padding: 100px 30px 0;
}

.promise-hero__slideshow {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.promise-hero__slide {
	position: absolute;
	inset: 0;
	background-position: 50% 50%;
	background-size: cover;
	opacity: 0;
	transition: opacity .5s ease;
}

.promise-hero__slide.is-active {
	opacity: 1;
}

.promise-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: #000000;
	opacity: .25;
}

.promise-hero__row {
	display: flex;
	position: relative;
	min-height: 53vh;
	max-width: 1260px;
	margin: 0 auto;
}

.promise-hero__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.promise-hero__col--text  { width: 40%; }
.promise-hero__col--empty { width: 60%; }

.promise-hero__title {
	margin: 0;
	color: #FFFFFF;
	font-family: var(--font-display);
	font-size: 86px;
	font-weight: 900;
	line-height: 1.1em;
	letter-spacing: 3.4px;
	text-transform: uppercase;
}

/* ---------- Every day ---------- */
.every-day {
	padding: 2% 0 0;
}

.every-day__inner {
	padding: 10px;
}

.every-day__word-wrap {
	margin: 100px 0 20px;
}

.every-day__word {
	padding: 0 0 0 130px;
	font-size: 187px;
}

.every-day__title {
	margin: 0 0 0 29%;
	color: #0a303a;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.2em;
	letter-spacing: 3.4px;
}

/* ---------- Intro text ---------- */
.promise-intro {
	position: relative;
	z-index: 2;
	padding: 36px 30px 0;
}

.promise-intro__row {
	display: flex;
	max-width: 1260px;
	margin: 0 auto;
}

.promise-intro__col {
	min-height: 1px;
}

.promise-intro__col--empty { width: 30%; }

.promise-intro__col--text {
	width: 70%;
}

.promise-intro__wrap {
	padding: 0 20% 0 0;
}

.promise-intro__text {
	margin-bottom: 20px;
	line-height: 1.7em;
}

.promise-intro__text p {
	margin: 0;
}

.promise-intro__spacer {
	height: 50px;
}

/* ---------- Path with leaves ---------- */
.promise-path {
	position: relative;
	margin: -119px 0 -70px;
	padding: 0 30px;
}

.promise-path__container {
	padding: 10px;
}

.promise-path__inner {
	display: flex;
	padding: 0 30px;
	background-image: url("../images/path-1.svg");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: auto;
}

.promise-path__col {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-end;
	width: 50%;
}

.promise-path__col--leaves {
	padding: 0 0 152px 45px;
}

.promise-path__col--tree {
	padding: 0 60px 106px 0;
}

.promise-path__leaf--small {
	padding: 0 0 40px;
}

.promise-path__leaf--big {
	padding: 0 0 0 50px;
}

.promise-path__tree {
	width: 100%;
	text-align: end;
}

/* ---------- Logo video ---------- */
.promise-video {
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin-top: 80px;
	padding: 80px 0;
}

.promise-video__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.promise-video__bg video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: translate(-50%, -50%);
}

.promise-video__overlay {
	position: absolute;
	inset: 0;
	background-color: #A3A3A373;
	opacity: .46;
}

.promise-video__inner {
	position: relative;
	padding: 10px;
}

.promise-video__spacer--top {
	height: 267px;
	margin-bottom: 20px;
}

.promise-video__spacer--bottom {
	height: 167px;
}

.promise-video__play {
	margin-bottom: 20px;
	text-align: center;
}

.promise-video__play-btn {
	display: inline-block;
	padding: 25px 50px;
	border: 0;
	border-radius: 4px;
	background-color: rgba(2, 1, 1, 0);
	color: #FFFFFF;
	font-size: 85px;
	line-height: 1;
	transition: all .3s;
}

.promise-video__play-btn svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.promise-video__play-btn:hover,
.promise-video__play-btn:focus {
	color: var(--accent-1);
}

/* ---------- Expertise ---------- */
.expertise-intro {
	overflow: hidden;
	padding: 0 0 3%;
}

.expertise-intro__word-wrap {
	margin: 123px 0 20px;
}

.expertise-intro__word {
	padding: 0 0 0 130px;
	font-size: 240px;
}

.expertise-intro__title {
	margin: 0 0 20px;
	padding: 0 0 0 30%;
	color: #0a303a;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 800;
	line-height: 1.1em;
	letter-spacing: 3.4px;
}

.expertise-intro__text {
	padding: 0 10% 0 30%;
	line-height: 1.7em;
}

.expertise-intro__text p {
	margin: 0;
}

/* ---------- Split sections (card + photo) ---------- */
.promise-split {
	position: relative;
	overflow: hidden;
}

.promise-split__row {
	display: flex;
	position: relative;
	max-width: 1260px;
	margin: 0 auto;
}

.promise-split__col {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 50%;
}

.promise-card {
	z-index: 1;
	padding: 60px;
	border-radius: 8px;
	background-color: #FFFFFF;
}

.promise-photo {
	text-align: center;
}

.promise-photo img {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: 7px;
}

/* Safe and child-friendly environment */
.safe {
	padding: 75px 30px 62px;
	background-color: #FCD9007D;
}

.safe__list {
	--icon-size: 20px;
	--icon-color: var(--accent-1);
	--text-color: var(--text);
	padding-top: 10px;
}

.safe__list .icon-list__icon {
	padding-right: 10px;
}

.safe__list .icon-list__text {
	font-family: var(--font-text);
	font-size: 17px;
	font-weight: bold;
	line-height: 1.7em;
}

.safe__list .icon-list__item:not(:last-child) {
	padding-bottom: 7.5px;
}

.safe__list .icon-list__item:not(:first-child) {
	margin-top: 7.5px;
}

.safe__photo {
	margin: 198px 0 -167px -40px;
	text-align: start;
}

/* A smart investment */
.investment {
	padding: 96px 30px 102px;
	background-color: #F3D1D1;
}

.investment__bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-image: url("../images/snail.svg");
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: auto;
}

.investment__photo-col {
	justify-content: center;
}

.investment__photo {
	margin: 137px -40px -109px 0;
}

/* ==========================================================================
   RESPONSIVE — LAPTOP (<= 1366px)
   ========================================================================== */
@media (max-width: 1366px) {
	.every-day__word {
		font-size: 200px;
	}

	.every-day__title {
		margin-left: 30%;
	}

	.promise-intro {
		padding: 9px 30px 0;
	}

	.expertise-intro__word {
		font-size: 200px;
	}
}

/* ==========================================================================
   RESPONSIVE — TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.promise-title,
	.expertise-intro__title {
		line-height: 1.2em;
	}

	.promise-hero {
		margin-top: 0;
		padding: 100px 30px;
	}

	.promise-hero__row {
		min-height: 0;
		max-width: 1024px;
	}

	.promise-hero__col--text  { width: 60%; }
	.promise-hero__col--empty { width: 40%; }

	.promise-hero__title {
		font-size: 70px;
	}

	.every-day__inner {
		max-width: 1024px;
	}

	.every-day__word-wrap {
		margin-top: 0;
	}

	.every-day__word {
		padding: 0;
		font-size: 130px;
		transform: none !important;
	}

	.every-day__title {
		font-size: 30px;
	}

	.promise-intro {
		padding: 0 30px;
	}

	.promise-intro__row {
		flex-wrap: wrap;
	}

	.promise-intro__col--empty { width: 45%; }
	.promise-intro__col--text  { width: 100%; }

	.promise-path {
		margin: -100px 0 -90px;
	}

	.promise-path__col--tree {
		padding: 0 20px 165px 0;
	}

	.promise-video {
		margin-top: 0;
	}

	.promise-video__spacer--top,
	.promise-video__spacer--bottom {
		height: 10px;
	}

	.expertise-intro {
		margin-top: 70px;
		padding: 0 30px;
	}

	.expertise-intro__word-wrap {
		margin-top: 0;
	}

	.expertise-intro__word {
		padding: 0;
		font-size: 130px;
		transform: none !important;
	}

	.expertise-intro__title,
	.expertise-intro__text {
		padding: 0;
	}

	.expertise-intro__title {
		font-size: 30px;
	}

	.promise-split__row {
		flex-wrap: wrap;
		max-width: 1024px;
	}

	.promise-split__col {
		width: 100%;
	}

	.promise-card {
		padding: 20px;
	}

	.safe {
		margin-bottom: 70px;
		padding: 50px 30px 100px;
	}

	.safe__list {
		padding-top: 0;
	}

	.safe__photo-col,
	.investment__card {
		margin-top: 10px;
	}

	.safe__photo,
	.investment__photo {
		margin: 0;
		transform: none !important;
	}

	.investment {
		padding: 100px 30px 0;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
	.promise-hero {
		padding: 70px 20px;
	}

	.promise-hero__overlay {
		opacity: .12;
	}

	.promise-hero__col--text {
		width: 100%;
	}

	.promise-hero__col--empty {
		display: none;
	}

	.promise-hero__title {
		font-size: 58px;
	}

	.every-day {
		padding: 10% 2% 0;
	}

	.every-day__word {
		font-size: 65px;
	}

	.every-day__title {
		margin-left: 0;
		font-size: 30px;
		line-height: 1.3em;
		letter-spacing: 3.3px;
	}

	.promise-intro {
		padding: 6px 20px 0;
	}

	.promise-intro__col--empty,
	.promise-intro__col--text {
		width: 100%;
	}

	.promise-intro__wrap {
		padding: 0;
	}

	.promise-intro__btn {
		position: relative;
		z-index: 5;
	}

	.promise-intro__spacer {
		display: none;
	}

	.promise-path {
		margin: 0 0 -100px;
		padding: 0 20px;
	}

	.promise-path__container {
		padding: 0;
	}

	.promise-path__inner {
		flex-wrap: wrap;
		padding: 0;
	}

	.promise-path__col {
		width: 100%;
	}

	.promise-path__col--leaves {
		padding: 0 0 0 30px;
	}

	.promise-path__col--tree {
		margin-top: -160px;
	}

	.promise-path__tree {
		margin: 0 -20px 0 0;
		width: calc(100% + 20px);
	}

	.promise-video {
		margin-top: 20px;
		padding: 30px 20px 20px;
	}

	.promise-video__inner {
		padding: 0;
	}

	.promise-video__spacer--top,
	.promise-video__spacer--bottom {
		height: 50px;
	}

	.promise-video__play {
		text-align: left;
	}

	.promise-video__play-btn {
		padding: 0;
		font-size: 60px;
	}

	.expertise-intro {
		margin-top: 50px;
		padding: 0 20px;
	}

	.expertise-intro__word {
		font-size: 65px;
	}

	.expertise-intro__title {
		line-height: 1.3em;
	}

	.promise-split--reverse-mobile .promise-split__row {
		flex-direction: column-reverse;
	}

	.promise-card {
		margin-top: 20px;
	}

	.promise-card .stack > * + * {
		margin-top: 20px;
	}

	.promise-title {
		font-size: 30px;
		line-height: 1.3em;
	}

	.safe {
		margin-bottom: 60px;
		padding: 20px 20px 70px;
	}

	.safe__photo-col {
		margin-top: 0;
	}

	.investment {
		padding: 70px 20px 75px;
	}

	.investment__bg {
		background-size: contain;
	}
}