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

/* ---------- Shared bits ---------- */
.container {
	max-width: 1260px;
	margin-right: auto;
	margin-left: auto;
}

.big-word {
	color: #0a303a;
	font-family: var(--font-display);
	font-size: 240px;
	line-height: 1.1em;
	white-space: nowrap;
}

.display-title {
	margin: 0;
	color: #0a303a;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 800;
	letter-spacing: 3.6px;
}

.body-text {
	font-family: var(--font-text);
	font-size: 17px;
	line-height: 1.8em;
	text-align: justify;
}

.body-text p {
	margin: 0;
}

/* ==========================================================================
   HERO (background video)
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	margin-top: -44px;
	padding: 7% 0 0;
	background-color: rgba(160, 195, 206, 0);
}

.hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

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

.hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .38);
	opacity: .22;
	transition: background 1.1s, opacity 1.1s;
}

.hero:hover .hero__overlay {
	background-color: #000000;
	opacity: .28;
}

.hero__inner {
	position: relative;
	min-height: 77vh;
}

.hero--mobile {
	display: none;
}

/* ==========================================================================
   GALLERY CAROUSEL
   ========================================================================== */
.gallery {
	position: relative;
	padding: 30px 0 0;
}

.gallery__wrap {
	padding: 10px;
}

.gallery__carousel {
	position: relative;
}

.gallery__swiper {
	margin: 0 30px;
}

.gallery__swiper .swiper-slide {
	text-align: center;
}

.gallery__swiper img {
	display: inline-block;
	border-radius: 20px;
	vertical-align: baseline;
}

.gallery__arrow {
	display: flex;
	position: absolute;
	top: 50%;
	z-index: 1;
	padding: 0;
	border: 0;
	background: transparent;
	color: #0A303A;
	font-size: 28px;
	line-height: 1;
	transform: translateY(-50%);
	cursor: pointer;
}

.gallery__arrow svg {
	width: 1em;
	height: 1em;
	fill: #0A303A;
}

.gallery__arrow--prev { left: 0; }
.gallery__arrow--next { right: 0; }

/* ==========================================================================
   INTRO — "Where little minds blossom with joy"
   ========================================================================== */
.intro {
	overflow: hidden;
	margin-top: 66px;
	padding: 0 30px 20px;
}

.intro__row {
	display: flex;
}

.intro__col {
	display: flex;
	flex-direction: column;
	position: relative;
}

.intro__col--word {
	width: 33.492%;
	justify-content: flex-start;
	padding: 0 0 130px;
}

.intro__word {
	padding: 0 0 163px 130px;
	font-size: 220px;
	line-height: 1em;
}

.intro__col--text {
	width: 66.508%;
	justify-content: flex-end;
	padding: 0 200px 0 20px;
}

.intro__title {
	margin-bottom: 20px;
	padding-top: 140px;
	line-height: 1.4em;
	letter-spacing: 3.4px;
}

/* ==========================================================================
   FEATURES — vertical tabs + illustration
   ========================================================================== */
.features {
	overflow: hidden;
	margin-top: 20px;
	padding: 0 30px;
}

.features__row {
	display: flex;
	align-items: center;
}

.features__col {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 1px;
}

.features__col--tabs {
	width: 72.381%;
	justify-content: center;
}

.features__col--people {
	width: 16.825%;
	justify-content: flex-end;
	align-self: stretch;
	padding: 10px;
}

.features__col--tree {
	width: 10.1%;
	justify-content: flex-end;
	align-self: stretch;
	padding: 10px;
}

.features__people {
	margin: 0 -30px 20px 0;
	text-align: end;
}

.features__btn {
	margin-top: -21px;
	text-align: center;
}

.features__tree {
	text-align: end;
}

.features__tree img {
	width: 100%;
}

/* Tabs */
.tabs {
	display: flex;
	flex-direction: row-reverse;
}

.tabs__titles {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-shrink: 0;
	width: 39%;
	padding: 20px;
}

.tabs__title,
.tabs__mobile-title {
	position: relative;
	padding: 5px;
	color: #20323D;
	font-family: var(--font-comic);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	outline: none;
	transition: color .3s;
}

.tabs__title.is-active,
.tabs__mobile-title.is-active {
	color: #167287;
}

.tabs__panels {
	flex-grow: 1;
	min-width: 0;
}

.tabs__mobile-title {
	display: none;
}

.tabs__panel {
	display: none;
}

.tabs__panel.is-active {
	display: block;
}

.tabs__slide {
	position: relative;
	height: 380px;
	overflow: hidden;
	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTI4IDMzMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNDQzLjk0MSAzMy4yMWM0OSAuMTMyIDYzLTEuMjQ4IDc2IDExLjEzMiAxNS45MiAxNS4xNjEgMy45NTQgMzYuMjg0LTguNzExIDY4LjUyMmwtLjA5Ny40NzhjMC0yLjgxOC0uMTM1LTIuNTQ4LS40MDYuODA5LTIuMTA4IDUuNDA4LTQuMjI2IDExLjEyNi02LjIyOCAxNy4xNzhhNTA4LjkyOSA1MDguOTI5IDAgMCAxLTMuNTU5IDguMDk2Yy0zLjQ3IDcuNzIzLTEyLjI4MSAxMy42MTYtMjYuNDM0IDE3LjY3OWEyMi44NzcgMjIuODc3IDAgMCAwLTE2LjU2NSAyMS45ODkgMjEuNTUgMjEuNTUgMCAwIDAgMTUuNzMyIDIwLjc0OWM5LjkzNyAyLjc4NSAxNi4zNzUgNy45NjggMTkuMzE1IDE1LjU0OS4wODYuMjIuMTcuNDQ3LjI1Mi42NzcgMS42NiA1Mi45NTEgOC4yOSA5MC4wNDUtNi45MzYgOTQuNDI1LTQxLjMwMiAxMS44ODEtMjk0LjM2MyAyMi43OTQtNDA0Ljg2MyAxNy4zMzgtNDguNTgxLTIuNC03My4wNS01MC42ODYtODAuNDgtMTA4Ljg3LS4xMjUtMi43MTcuMDg3LTUuMjg1Ljk5Mi03LjYxOSAyLjk0LTcuNTggOS4zNzktMTIuNzYzIDE5LjMxNS0xNS41NDlBMjEuNTUgMjEuNTUgMCAwIDAgMzcgMTc1LjA0M2EyMi40MiAyMi40MiAwIDAgMC0xNi4zNC0yMS41OGMtMTMuMDUtMy42NzYtMTkuNTc2LTkuMzg1LTE5LjU3Ni0xNy4xMjYgMC0uODIzLS4wMS0xLjU5Ni0uMDI4LTIuMzIyQzYuNzEgODYuMTQ4IDIxLjIzMSA0Mi44MzEgNDAuOTQxIDIyLjc3MmM1NS43NTYtNTYuNzQ1IDMyNyAxMC40MzcgNDAzIDEwLjQzN3oiIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPgo=") no-repeat;
	mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTI4IDMzMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNDQzLjk0MSAzMy4yMWM0OSAuMTMyIDYzLTEuMjQ4IDc2IDExLjEzMiAxNS45MiAxNS4xNjEgMy45NTQgMzYuMjg0LTguNzExIDY4LjUyMmwtLjA5Ny40NzhjMC0yLjgxOC0uMTM1LTIuNTQ4LS40MDYuODA5LTIuMTA4IDUuNDA4LTQuMjI2IDExLjEyNi02LjIyOCAxNy4xNzhhNTA4LjkyOSA1MDguOTI5IDAgMCAxLTMuNTU5IDguMDk2Yy0zLjQ3IDcuNzIzLTEyLjI4MSAxMy42MTYtMjYuNDM0IDE3LjY3OWEyMi44NzcgMjIuODc3IDAgMCAwLTE2LjU2NSAyMS45ODkgMjEuNTUgMjEuNTUgMCAwIDAgMTUuNzMyIDIwLjc0OWM5LjkzNyAyLjc4NSAxNi4zNzUgNy45NjggMTkuMzE1IDE1LjU0OS4wODYuMjIuMTcuNDQ3LjI1Mi42NzcgMS42NiA1Mi45NTEgOC4yOSA5MC4wNDUtNi45MzYgOTQuNDI1LTQxLjMwMiAxMS44ODEtMjk0LjM2MyAyMi43OTQtNDA0Ljg2MyAxNy4zMzgtNDguNTgxLTIuNC03My4wNS01MC42ODYtODAuNDgtMTA4Ljg3LS4xMjUtMi43MTcuMDg3LTUuMjg1Ljk5Mi03LjYxOSAyLjk0LTcuNTggOS4zNzktMTIuNzYzIDE5LjMxNS0xNS41NDlBMjEuNTUgMjEuNTUgMCAwIDAgMzcgMTc1LjA0M2EyMi40MiAyMi40MiAwIDAgMC0xNi4zNC0yMS41OGMtMTMuMDUtMy42NzYtMTkuNTc2LTkuMzg1LTE5LjU3Ni0xNy4xMjYgMC0uODIzLS4wMS0xLjU5Ni0uMDI4LTIuMzIyQzYuNzEgODYuMTQ4IDIxLjIzMSA0Mi44MzEgNDAuOTQxIDIyLjc3MmM1NS43NTYtNTYuNzQ1IDMyNyAxMC40MzcgNDAzIDEwLjQzN3oiIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPgo=") no-repeat;
	-webkit-mask-size: cover;
	mask-size: cover;
}

.tabs__slide.animated {
	animation-duration: .8s;
}

.tabs__slide-bg {
	position: absolute;
	inset: 0;
	background-position: 50% 50%;
	background-size: cover;
	transform: scale(1);
	transition: transform 6s linear;
}

.tabs__panel.is-active .tabs__slide-bg.is-zoomed {
	transform: scale(1.3);
}

/* ==========================================================================
   AGES
   ========================================================================== */
.ages {
	position: relative;
	overflow: hidden;
	padding: 150px 0;
}

.ages__bg {
	position: absolute;
	inset: 0;
	background-image: url("../images/illustration-right-cut-Green.webp");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: auto;
	will-change: transform;
}

.ages__inner {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}

.ages__head {
	max-width: 1300px;
	margin: 0 auto;
}

.ages__word-wrap {
	margin-bottom: 20px;
}

.ages__word {
	padding: 0 0 0 130px;
	transform-origin: left center;
}

.ages__title {
	padding: 0 130px 50px 0;
	line-height: 1em;
	text-align: end;
}

.ages__cards {
	display: flex;
	max-width: 1319px;
	margin: 0 auto;
}

.ages__col {
	display: flex;
	flex-direction: column;
	width: 25%;
	padding: 0 25px;
}

.age-card {
	position: relative;
	padding: 20px 0 65px;
	text-align: center;
	transition: background .3s;
}

.age-card--purple { z-index: 1; background-color: #B24E9A73; }
.age-card--purple:hover { background-color: #B24E9A42; }
.age-card--peach { background-color: #FFBDAC; }
.age-card--peach:hover { background-color: #FFD3C9; }
.age-card--blue { background-color: #1BA7DC7A; }
.age-card--blue:hover { background-color: #CFEFF7; }
.age-card--yellow { background-color: #FCD9007D; }
.age-card--yellow:hover { background-color: #FCD9004F; }

.age-card__img {
	display: inline-block;
	width: 85%;
	margin: 0 0 15px;
}

.age-card__img a {
	display: inline;
}

.age-card__img img {
	display: block;
	width: 100%;
	line-height: 0;
}

.age-card__img img:hover {
	animation: wobbleHorizontal 1s ease-in-out 1;
}

.age-card__content {
	padding: 0 20px;
}

.age-card__title {
	margin: 20px 0;
	font-family: var(--font-comic);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.21em;
}

.age-card__title a {
	color: inherit;
}

.age-card--purple .age-card__title { color: #B24E9A; }
.age-card--peach .age-card__title  { color: #e95d3a; }
.age-card--blue .age-card__title   { color: #167287; }
.age-card--yellow .age-card__title { color: #F68F29; }

.age-card__desc {
	margin: 0;
	color: var(--accent-3);
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 1.7em;
}

.age-card--yellow .age-card__desc {
	line-height: 1.6em;
}

/* ==========================================================================
   VISIT — "Come visit a pre-school with difference"
   ========================================================================== */
.visit {
	overflow: hidden;
	padding: 0 30px;
}

.big-word-wrap {
	margin-bottom: 20px;
}

.visit__word {
	padding: 0 0 0 130px;
	transform-origin: left center;
}

.visit__row {
	display: flex;
	max-width: 900px;
	margin: 0 auto;
}

.visit__col {
	padding: 10px;
}

.visit__col--img {
	width: 39.222%;
}

.visit__col--text {
	width: 60.778%;
}

.visit__people {
	text-align: center;
}

.visit__title {
	margin-bottom: 20px;
	line-height: 1.3em;
}

.visit__text {
	padding: 0 0 10px;
}

/* ==========================================================================
   PATH — leaves, tree and dashed path
   ========================================================================== */
.path {
	position: relative;
	overflow: hidden;
	margin: -140px 0 -70px;
	padding: 0 30px;
}

.path .container {
	padding: 10px;
}

.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;
}

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

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

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

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

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

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

/* ==========================================================================
   CONTACT STRIP (with snail)
   ========================================================================== */
.contact-strip {
	position: relative;
	overflow: hidden;
	padding: 0 0 120px 20px;
}

.contact-strip__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;
	will-change: transform;
}

.contact-strip__row {
	display: flex;
	position: relative;
	max-width: 1015px;
	margin: 0 auto;
}

.contact-strip__col {
	width: 33.333%;
}

.contact-strip__item {
	margin: 0;
	color: #0a303a;
	font-family: var(--font-comic);
	font-weight: 800;
}

.contact-strip__item a {
	color: inherit;
}

.contact-strip__col--address .contact-strip__item { margin-left: 3px; }
.contact-strip__col--phone .contact-strip__item   { margin-left: 7px; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog {
	position: relative;
	overflow: hidden;
	padding: 70px 30px 20px;
}

.blog__bg {
	position: absolute;
	inset: 0;
	background-color: #FCD9007D;
	background-image: url("../images/illustration-mountain.svg");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: auto;
	will-change: transform;
}

.blog__inner {
	position: relative;
}

.blog__title {
	margin: 0 0 20px;
	padding: 0 0 20px;
	color: #20323D;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: normal;
	line-height: 1.6em;
	letter-spacing: 1.3px;
	text-align: center;
}

.blog__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px 40px;
	margin-bottom: 20px;
}

.post-card {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--accent-8);
	text-align: center;
}

.post-card__thumb {
	display: block;
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	padding-bottom: 56%;
	overflow: hidden;
}

.post-card__thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.01);
	transition: filter .3s;
}

.post-card:hover .post-card__thumb img {
	filter: brightness(115%);
}

.post-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	margin: 15px;
	padding: .6em 1.2em;
	border-radius: 999px;
	background-color: var(--accent-2);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.post-card__text {
	padding: 0;
}

.post-card__title {
	margin: 0 0 15px;
	color: var(--accent-3);
	font-family: var(--font-comic);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3em;
}

.post-card__title a {
	color: var(--accent-3);
}

.post-card__title a:hover {
	color: var(--accent-1);
}

.blog__footer {
	display: flex;
	margin-top: -30px;
	padding: 0 30px;
}

.blog__footer-col {
	display: flex;
	width: 33.333%;
}

.blog__footer-col--btn {
	justify-content: center;
	align-items: center;
}

.blog__footer-col--tree {
	padding: 10px;
}

.blog__tree {
	width: 100%;
	margin: 40px 3px -27px 0;
	text-align: end;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials {
	position: relative;
	overflow: hidden;
	background-color: #96C34DBF;
	background-image: url("../images/illustration-people-4.svg");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: 28vw auto;
}

.testimonials__col {
	position: relative;
	z-index: 0;
	padding: 130px 0;
	background-image: url("../images/approuach-bg-right.svg");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: auto;
}

.testimonials__overlay {
	position: absolute;
	inset: 0;
	background-image: url("../images/approuach-bg-left.svg");
	background-position: top left;
	background-repeat: no-repeat;
	pointer-events: none;
}

.testimonials__head {
	position: relative;
	padding: 0 30px;
}

.testimonials__head-inner {
	padding: 10px;
}

.testimonials__title {
	margin-bottom: calc(20px + 3%);
	color: #20323D;
	line-height: 1.1em;
	text-align: center;
}

.testimonials__intro {
	margin-bottom: 2%;
	font-family: var(--font-text);
	font-size: 17px;
	line-height: 27px;
	text-align: center;
}

.testimonials__intro p {
	margin: 0;
}

.testimonials__body {
	position: relative;
	z-index: 2;
}

.testimonials__swiper {
	width: 95%;
	padding-bottom: 40px;
}

.testimonials__swiper .swiper-slide {
	padding: 20px;
}

.testimonial {
	text-align: center;
}

.testimonial__content {
	position: relative;
	padding: 20px;
	border-radius: 23px;
	background-color: #F9FAFA;
}

.testimonial__content::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -7px;
	left: calc(50% - 7px);
	width: 14px;
	height: 14px;
	background-color: #F9FAFA;
	transform: scaleX(.75) rotate(-45deg);
}

.testimonial__text {
	color: var(--text);
	font-family: var(--font-comic);
	font-size: 18px;
	font-style: italic;
	line-height: 1.8em;
}

.testimonial__footer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
	padding: 0 20px;
}

.testimonial__image img {
	width: 50px;
	height: 50px;
	border-radius: 999px;
	object-fit: cover;
	vertical-align: baseline;
}

.testimonial__image {
	line-height: 27px;
}

.testimonial__cite {
	display: flex;
	flex-direction: column;
	margin-left: 20px;
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
}

.testimonial__name {
	color: var(--text);
	font-family: var(--font-comic);
	font-weight: 700;
}

.testimonial__role {
	color: var(--text);
	font-family: var(--font-display);
	font-weight: 400;
}

.testimonials__pagination.swiper-pagination {
	bottom: 10px;
	color: #FFFFFF;
	line-height: 27px;
}

.testimonials__pagination .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	margin: 0 6px !important;
	background: #000000;
	opacity: .2;
}

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

/* ==========================================================================
   CALL TO ACTION BOXES
   ========================================================================== */
.cta {
	overflow: hidden;
	padding: 100px 10px;
}

.cta__row {
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
}

.cta__col {
	display: flex;
	align-items: center;
	width: 33.333%;
	padding: 15px;
}

.cta__col:not(:first-child) {
	align-items: flex-start;
}

.cta-box {
	width: 100%;
	padding: 20px 30px;
	border: 1px solid #D8D8D8;
	box-shadow: 8px 8px 0 0 #EDEDED;
	text-align: start;
	transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}

.cta-box__icon {
	display: block;
	width: max-content;
	font-size: 55px;
	line-height: 0;
	text-align: center;
	transition: all .3s;
}

.cta-box__icon svg {
	position: relative;
	display: block;
	width: 1em;
	height: 1em;
}

.cta-box--green .cta-box__icon  { color: #B1D27C; fill: #B1D27C; }
.cta-box--blue .cta-box__icon   { color: #1BA7DC; fill: #1BA7DC; }
.cta-box--yellow .cta-box__icon { color: #FCD900; fill: #FCD900; }

.cta-box--green:hover  { border-color: #96C34D; box-shadow: 10px 10px 0 0 #96C34D; }
.cta-box--blue:hover   { border-color: #1BA7DC; box-shadow: 10px 10px 0 0 #1BA7DC; }
.cta-box--yellow:hover { border-color: #FCD900; box-shadow: 10px 10px 0 0 #FCD900; }

.cta-box__title {
	margin: .6em 0;
	color: var(--accent-3);
	font-family: var(--font-comic);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.21em;
}

.cta-box__title a {
	color: inherit;
}

.cta-box__desc {
	margin: 0;
	color: #E86936;
	font-size: 16px;
	font-weight: 800;
	line-height: 27px;
}

/* ==========================================================================
   RESPONSIVE — LAPTOP (<= 1366px)
   ========================================================================== */
@media (max-width: 1366px) {
	.intro__word {
		padding: 0 0 48% 10%;
	}

	.intro__title {
		line-height: 1.3em;
	}

	.post-card__thumb {
		margin-bottom: 0;
		padding-bottom: 57%;
	}

	.post-card__title {
		margin-bottom: 19px;
	}
}

/* ==========================================================================
   RESPONSIVE — TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.container {
		max-width: 1024px;
	}

	.big-word {
		font-size: 130px;
	}

	.display-title {
		font-size: 30px;
	}

	/* Hero */
	.hero {
		margin-top: 0;
		padding: 10% 0 0;
	}

	.hero__inner {
		min-height: 40vh;
	}

	/* Gallery */
	.gallery__swiper img {
		width: 100%;
	}

	/* Intro */
	.intro {
		margin-top: 0;
		padding: 70px 30px 0;
	}

	.intro__row {
		flex-wrap: wrap;
	}

	.intro__col--word,
	.intro__col--text {
		width: 100%;
		padding: 0;
	}

	.intro__word {
		padding: 0;
		font-size: 130px;
		line-height: 1em;
	}

	.intro__title {
		padding-top: 0;
		font-size: 30px;
	}

	/* Features */
	.features {
		margin-top: 20px;
		padding: 0 30px;
	}

	.features__row {
		flex-wrap: wrap;
	}

	.features__col--tabs {
		width: 100%;
	}

	.features__col--people,
	.features__col--tree {
		width: 85%;
		padding: 0;
	}

	.features__people,
	.features__tree {
		display: none;
	}

	.features__btn {
		margin-top: 30px;
		text-align: left;
	}

	.tabs__title {
		line-height: 1;
	}

	/* Ages */
	.ages {
		padding: 70px 0 0;
	}

	.ages__head {
		padding: 0 30px;
	}

	.ages__word {
		padding: 0;
		transform: none !important;
	}

	.ages__title {
		padding: 0 0 50px;
		text-align: start;
	}

	.ages__cards {
		flex-wrap: wrap;
		padding: 0 30px;
	}

	.ages__col {
		width: 50%;
	}

	.ages__col:nth-child(1) { padding: 20px 0 0 10px; }
	.ages__col:nth-child(2) { padding: 0 10px 0 0; }
	.ages__col:nth-child(3) { padding: 0 0 0 10px; }
	.ages__col:nth-child(4) { padding: 20px 10px 0 0; }

	/* Visit */
	.visit {
		padding: 70px 30px 0;
	}

	.visit__word {
		padding: 0;
		transform: none !important;
	}

	.visit__row {
		padding: 0 0 20%;
	}

	.visit__people {
		margin-top: 60px;
		transform: none !important;
	}

	/* Path */
	.path {
		margin: -300px 0 -90px;
	}

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

	/* Contact strip */
	.contact-strip__row {
		flex-wrap: wrap;
	}

	.contact-strip__col {
		width: 50%;
	}

	.contact-strip__col--address {
		margin-bottom: 20px;
	}

	.contact-strip__bg {
		width: 100% !important;
		transform: none !important;
	}

	/* Blog */
	.blog {
		padding: 70px 30px 20px;
	}

	.blog__title {
		margin: 20px 0 20px;
		padding: 0;
		font-size: 129px;
		line-height: 1.1em;
		text-align: start;
	}

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

	/* Testimonials */
	.testimonials {
		padding: 0 0 200px;
		background-position: bottom center;
		background-size: 44vw auto;
	}

	.testimonials__col {
		padding: 80px 30px 0;
		background-position: bottom center;
	}

	.testimonials__title {
		line-height: 1.2em;
	}

	.testimonials__intro {
		line-height: 24px;
	}

	/* CTA */
	.cta {
		padding: 60px 30px 100px;
	}

	.cta__col:nth-child(1) { padding: 0 10px 0 0; }
	.cta__col:nth-child(2) { padding: 0 5px; }
	.cta__col:nth-child(3) { padding: 0 0 0 10px; }

	.cta-box__desc {
		line-height: 24px;
	}

	.age-card__title,
	.cta-box__title {
		line-height: 1.2em;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
	.container {
		max-width: 767px;
	}

	.big-word {
		font-size: 80px;
	}

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

	/* Hero */
	.hero--desktop {
		display: none;
	}

	.hero--mobile {
		display: block;
		margin-top: 0;
		padding: 0;
	}

	.hero--mobile .hero__inner {
		min-height: 60vh;
	}

	.hero--mobile .hero__video video {
		object-fit: contain;
	}

	/* Gallery */
	.gallery__swiper img {
		width: auto;
	}

	/* Intro */
	.intro {
		margin-top: 50px;
		padding: 0 20px;
	}

	.intro__word {
		font-size: 80px;
	}

	.intro__title {
		margin-bottom: 10px;
		line-height: 1.3em;
	}

	/* Features */
	.features {
		margin-top: 0;
		padding: 10px 20px 0;
	}

	.features__col--people,
	.features__col--tree {
		width: 100%;
	}

	.features__btn {
		display: none;
	}

	.tabs {
		display: block;
	}

	.tabs__titles {
		display: none;
	}

	.tabs__mobile-title {
		display: block;
		padding: 10px;
		line-height: 1.5;
	}

	/* Ages */
	.ages {
		padding: 50px 20px 0;
	}

	.ages__bg {
		background-position: top right;
		background-size: 140px auto;
		transform: none !important;
	}

	.ages__head {
		padding: 0;
	}

	.ages__word-wrap {
		margin-bottom: 10px;
	}

	.ages__title {
		padding: 0 0 20px;
		line-height: 1.4em;
	}

	.ages__cards {
		padding: 0 10%;
	}

	.ages__col,
	.ages__col:nth-child(n) {
		width: 100%;
		padding: 0 0 30px;
	}

	/* Visit */
	.visit {
		padding: 50px 20px 0;
	}

	.big-word-wrap {
		margin-bottom: 10px;
	}

	.visit__row {
		flex-direction: column-reverse;
	}

	.visit__col {
		width: 100%;
		padding: 0;
	}

	.visit__col--img {
		padding: 30px 0 0;
	}

	.visit__people {
		margin-top: 0;
	}

	.visit__people img {
		width: 50%;
	}

	.visit__title {
		margin-bottom: 10px;
	}

	.visit__text {
		padding: 0;
	}

	/* Path */
	.path {
		margin: -200px 0 -100px;
	}

	.path__inner {
		flex-wrap: wrap;
	}

	.path__col {
		width: 100%;
	}

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

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

	.path__tree {
		width: calc(100% + 120px);
		margin: 0 -120px 0 0;
		padding: 40px 0 0;
	}

	/* Contact strip */
	.contact-strip {
		padding: 20px 20px 90px;
	}

	.contact-strip__bg {
		background-size: 270px auto;
	}

	.contact-strip__col {
		width: 100%;
	}

	.contact-strip__col--address,
	.contact-strip__col--phone {
		margin-bottom: 13px;
	}

	.contact-strip__col--address .contact-strip__item { margin-left: 0; }
	.contact-strip__col--phone .contact-strip__item   { margin: 0 5px 0 0; }

	/* Blog */
	.blog {
		padding: 60px 20px 40px;
	}

	.blog__title {
		margin: 0;
		padding: 20px 0 10px;
		font-size: 80px;
	}

	.blog__grid {
		margin-bottom: 0;
	}

	.post-card__thumb {
		padding-bottom: 54%;
	}

	.post-card__title {
		font-size: 17px;
	}

	.blog__footer {
		flex-wrap: wrap;
		margin-top: 0;
		padding: 20px 0 0;
	}

	.blog__footer-col {
		width: 100%;
	}

	.blog__footer-col--btn {
		justify-content: flex-start;
		margin: 0 0 20px;
	}

	.blog__tree {
		margin: 0 0 -30px;
		text-align: center;
	}

	/* Testimonials */
	.testimonials {
		padding: 50px 20px 200px;
		background-size: 76% auto;
	}

	.testimonials__col {
		padding: 20px 0 0;
	}

	/* CTA */
	.cta {
		padding: 18px 20px 30px;
	}

	.cta__row {
		flex-wrap: wrap;
	}

	.cta__col,
	.cta__col:nth-child(n) {
		width: 100%;
	}

	.cta__col:nth-child(1) { margin: 0 0 10px; padding: 0; }
	.cta__col:nth-child(2) { margin: 0 0 10px; padding: 20px 0 0; }
	.cta__col:nth-child(3) { padding: 20px 0 0; }

	.cta-box__icon {
		font-size: 40px;
	}

	.cta-box__title {
		font-size: 24px;
		line-height: 1.21em;
	}

	.age-card__title {
		font-size: 24px;
		line-height: 1.21em;
	}

	.path {
		padding: 0 20px;
	}

	.path__inner {
		padding: 0 20px;
	}

	.testimonials__head {
		padding: 0 20px;
	}

	.testimonials__title {
		font-size: 26px;
		line-height: 1.2em;
	}
}