.page {
  overflow-x: hidden;
  max-width: 100vw;
  .is-layout-constrained {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
  }
  .about-top {
	background-color: var(--smx-color-white);
	height: calc(84vh - 86px);
	overflow: hidden;
	position: relative;

	@media (max-width: 767px) {
	  height: calc(95vh - 86px);
	  padding-top: var(--space-lg);
	}

	&::before {
	  content: '';
	  position: absolute;
	  inset: -50px 0;
	  background-image: url('../../images/people-working-pc-about-us.webp');
	  background-size: contain;
	  background-position: left bottom;
	  background-repeat: no-repeat;
	  z-index: 0;
	  will-change: transform;
	  transform: translateY(var(--parallax-offset, 0));
	  left: 44%;
	  width: 100%;

	  @media (max-width: 767px),
		(min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		background-size: contain;
		background-position: center bottom;
		background-image: url('../../images/business-people-on-pc-m.webp');
		left: 0;
	  }
	}

	.is-layout-constrained {
	  height: 84vh;

	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  position: relative;
	  overflow: visible;

	  @media (max-width: 767px),
		(min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		padding: var(--space-md);
		padding-top: var(--space-lg);
		justify-content: flex-start;
		height: 82vh;
	  }

	  h3.wp-block-heading,
	  h2.wp-block-heading {
		max-width: 40%;
		font-size: var(--font-title-sm);
		line-height: var(--font-title-sm);
		margin-bottom: var(--space-sm);
		margin-top: var(--space-sm);
		font-weight: 400;

		@media (max-width: 767px),
		  (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		  max-width: 100%;
		}
	  }

	  h2.wp-block-heading {
		@media (max-width: 767px),
		  (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		  max-width: 100%;
		  font-size: var(--font-title-md);
		  line-height: 1.24;
		}
	  }

	  h4 {
		font-size: var(--font-size-base);
		padding-bottom: var(--space-sm);
	  }

	  .wp-block-quote {
		max-width: 40%;
		padding: 0;
		margin: 0;
		border-bottom: 1.6px solid var(--smx-color-primary);
		@media (max-width: 767px),
		  (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		  max-width: 100%;
		  font-size: var(--font-text);
		  padding-bottom: var(--space-sm);
		}
	  }

	  p {
		font-size: var(--font-text);
		max-width: 40%;
		@media (max-width: 767px),
		  (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		  max-width: 100%;
		  z-index: 1;
		}
	  }
	}
  }

  .about-numbers {
	background-color: var(--smx-color-background-dark);
	padding: var(--space-xxl) 0;

	@media (max-width: 768px) {
	  padding: var(--space-xxl) var(--space-md);
	  padding-top: var(--space-lg);
	}

	.swiper {
	  padding: var(--space-md) 0;
	  overflow: visible;

	  .card {
		user-select: none;
		background: var(--smx-color-black);
		border-radius: var(--border-radius-lg);
		max-width: calc(calc(1200px / 3) - calc(3 * 0.5rem));
		text-align: right;
		overflow: hidden;
		position: relative;

		height: 26rem;

		@media (max-width: 768px) {
		  max-width: 320px;
		}

		h4 {
		  font-size: var(--font-title-xl);
		  font-weight: bolder;
		  color: var(--smx-color-primary);
		  margin: var(--space-lg);
		  margin-bottom: 0;
		}
		h5 {
		  font-size: var(--font-size-lg);
		  color: var(--smx-color-primary);
		  margin: 0 var(--space-lg);
		}
		p {
		  margin: 0 var(--space-lg);
		  font-size: var(--font-size-base);
		  color: var(--smx-color-background-light);
		}

		img {
		  position: absolute;
		  left: 0;
		  right: 0;
		  bottom: 0;
		}
	  }

	  .swiper-pagination {
		background: var(--smx-color-black);
		border-radius: var(--border-radius-lg);
		display: inline-block;
		width: auto;
		padding: var(--space-sm) var(--space-lg);
		margin-bottom: -2rem;
		display: flex;
		gap: 1.6rem;

		@media (max-width: 768px) {
		  gap: 0.86rem;
		}
	  }

	  .swiper-pagination-bullet {
		display: block;
	  }

	  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
	  .swiper-pagination-horizontal.swiper-pagination-bullets
		.swiper-pagination-bullet {
		width: 4rem;
		min-height: 0.48rem;
		border-radius: var(--border-radius-lg);

		@media (max-width: 768px) {
		  width: 2.68rem;
		  min-height: 0.24rem;
		}
	  }
	}
  }

  .about-timeline {
	padding: var(--space-xl) 0;
	background: var(--smx-color-white);

	h2 {
	  font-size: var(--font-subtitle);
	  color: var(--smx-color-primary);
	  strong {
		color: var(--smx-color-text-bold);
	  }
	}

	@media (max-width: 768px) {
	  padding: var(--space-xxl) var(--space-md);
	  padding-top: var(--space-lg);
	}

	.swiper {
	  padding: var(--space-md) 0;
	  margin-bottom: var(--space-lg);
	  overflow: visible;

	  .card {
		user-select: none;
		background: var(--smx-color-background-light);
		border-radius: var(--border-radius-lg);
		max-width: 360px;
		text-align: left;
		overflow: visible;
		position: relative;
		min-height: 240px;
		margin-top: 2rem;

		&:before {
		  content: '';
		  z-index: -1;
		  height: 3px;
		  width: 100%;
		  background: purple;
		  position: absolute;
		  top: -2.5rem;
		  left: 1rem;
		}

		&:last-child {
		  &:before {
			display: none;
		  }
		}

		@media (max-width: 768px) {
		  max-width: 320px;
		}

		.tag {
		  display: block;
		  margin-left: var(--space-lg);
		  margin-top: var(--space-lg);
		  font-weight: bold;
		  font-size: var(--font-size-lg);
		  color: var(--smx-color-white);
		  position: absolute;
		  top: -5rem;
		  left: -1.6rem;
		  border-radius: var(--border-radius-full);
		  background-color: var(--smx-color-primary);
		  padding: var(--space-xs) var(--space-lg);
		}

		h4 {
		  font-size: var(--font-size-lg);
		  font-weight: bolder;
		  line-height: var(--font-size-lg);
		  color: var(--smx-color-primary);
		  margin: var(--space-lg);
		  margin-bottom: 0;
		}

		h5 {
		  font-size: var(--font-text);
		  line-height: 1.12;
		  font-weight: normal;
		  color: var(--smx-color-primary);
		  margin: var(--space-xs) var(--space-lg);
		}

		p {
		  margin: 0 var(--space-lg);
		  font-size: var(--font-text);
		  margin-top: var(--space-sm);
		  margin-bottom: var(--space-lg);
		}
	  }

	  .swiper-pagination {
		background: var(--smx-color-white);
		border-radius: var(--border-radius-lg);
		display: inline-block;
		width: auto;
		padding: var(--space-sm) var(--space-lg);
		margin-bottom: -2rem;
		display: flex;
		gap: 1.6rem;

		@media (max-width: 768px) {
		  gap: 0.86rem;
		  padding: 0;
		}
	  }

	  .swiper-pagination-bullet {
		display: block;
	  }

	  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
	  .swiper-pagination-horizontal.swiper-pagination-bullets
		.swiper-pagination-bullet {
		width: 4rem;
		min-height: 0.48rem;
		border-radius: var(--border-radius-lg);

		@media (max-width: 768px) {
		  width: 10px;
		  min-height: 10px;
		  border-radius: 10px;
		}
	  }

	  .swiper-slide {
		.tag {
		  background-color: #44069c;
		}
		.card {
		  &:before {
			background-color: #44069c;
		  }
		}

		&:nth-child(1) {
		  .tag {
			background-color: #82069c;
		  }

		  .card {
			&:before {
			  background-color: #82069c;
			}
		  }
		}

		&:nth-child(2) {
		  .tag {
			background-color: #78069c;
		  }
		  .card {
			&:before {
			  background-color: #78069c;
			}
		  }
		}

		&:nth-child(3) {
		  .tag {
			background-color: #6e069c;
		  }
		  .card {
			&:before {
			  background-color: #6e069c;
			}
		  }
		}

		&:nth-child(4) {
		  .tag {
			background-color: #64069c;
		  }
		  .card {
			&:before {
			  background-color: #64069c;
			}
		  }
		}

		&:nth-child(5) {
		  .tag {
			background-color: #5a069c;
		  }
		  .card {
			&:before {
			  background-color: #5a069c;
			}
		  }
		}

		&:nth-child(6) {
		  .tag {
			background-color: #50069c;
		  }
		  .card {
			&:before {
			  background-color: #50069c;
			}
		  }
		}

		&:nth-child(7) {
		  .tag {
			background-color: #44069c;
		  }
		  .card {
			&:before {
			  background-color: #44069c;
			}
		  }
		}
	  }
	}
  }

  .about-certs {
	background: var(--smx-color-black);
	margin-top: 0;
	position: relative;
	overflow: hidden;
	padding: var(--space-xl) 0;
	min-height: 74vh;
	min-height: 620px;
	@media (max-width: 767px),
	  (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
	  height: auto;
	}

	@media (max-width: 1024px) {
	  padding-left: var(--space-md);
	  padding-right: var(--space-md);
	}

	&::before {
	  content: '';
	  position: absolute;

	  inset: -50px 0;
	  background-image: url('../../images/bg-certs.webp');
	  background-size: 100%;
	  background-position: center;
	  z-index: -1;
	  will-change: transform;
	  transform: translateY(var(--parallax-offset, 0));
	  z-index: 0;

	  @media (max-width: 767px),
		(min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		opacity: 0.2;
		background-size: cover;
		background-position: left center;
	  }
	}
	.is-layout-constrained {
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: right;
	  height: 67vh;
	  min-height: 620px;

	  @media (max-width: 767px),
		(min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		height: auto;
	  }

	  h2.wp-block-heading {
		font-size: var(--font-title-sm);
		@media (max-width: 767px),
		  (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		  font-size: var(--font-size-lg);
		}
	  }

	  p {
		color: var(--smx-color-background-light);
		font-size: var(--font-text);
		margin-top: var(--space-sm);
	  }

	  .wp-block-group.abria {
		border-top: 1.6px solid var(--smx-color-primary);
		margin-top: var(--space-md);
		padding-top: var(--space-md);

		h2.wp-block-heading {
		  font-size: var(--font-subtitle);
		}
	  }

	  h3.wp-block-heading {
		font-size: var(--font-size-lg);
	  }
	}

	@media (min-width: 1024px) {
	  .is-layout-constrained > * {
		width: 50%;
		margin-left: 50% !important;
	  }
	}

	.list-certs_img {
	  display: flex;
	  gap: 0.6rem;

	  .certs_img {
		max-height: 82px;
		img {
		  display: block;
		  width: auto;
		  height: 64px;
		  object-fit: contain;
		}
	  }
	}

	figure {
	  display: block;
	  img {
		display: block;
	  }
	}
  }

  .about-prizes {
	min-height: 286px;
	background: var(--smx-color-white);
	margin-top: 0;
	position: relative;
	overflow: hidden;
	padding: var(--space-xl) 0;

	@media (max-width: 1024px) {
	  padding-left: var(--space-md);
	  padding-right: var(--space-md);
	  min-height: 0;
	}

	&::before {
	  content: '';
	  position: absolute;

	  inset: -50px 0;
	  background-image: url('../../images/prizes.webp');
	  background-size: 100%;
	  background-position: center;
	  z-index: -1;
	  will-change: transform;
	  transform: translateY(var(--parallax-offset, 0));
	  z-index: 0;

	  @media (max-width: 768px) {
		background-size: cover;
		opacity: 0.4;
	  }
	}

	h2.wp-block-heading {
	  max-width: 460px;
	  font-size: var(--font-subtitle);
	}

	.list-prizes_img {
	  display: flex;
	  gap: 1.1rem;
	  width: 50%;

	  @media (max-width: 768px) {
		width: 100%;
	  }
	}

	.prizes_img {
	  flex: 0 0 auto;
	  border-radius: var(--border-radius-md);
	  border: 1px solid var(--smx-color-background-light);
	  padding: var(--space-md);
	  backdrop-filter: blur(1rem);
	  box-shadow: 0 0 1rem rgba(var(--smx-color-background-dark-rgb), 0.1);
	  transition:
		transform 0.3s ease-in-out,
		box-shadow 0.6s ease-in-out;

	  &:hover {
		box-shadow: 0 0 1.6rem rgba(var(--smx-color-background-dark-rgb), 0.3);
		transform: scale(1.03);
	  }

	  @media (max-width: 768px) {
		flex: auto;
		padding: var(--space-xs);
	  }
	}

	.prizes_img img {
	  display: block;
	  border-radius: var(--border-radius-sm);
	  height: 86px;
	  width: auto;
	  object-fit: contain;
	  mix-blend-mode: multiply;
	  -webkit-mix-blend-mode: multiply;
	}
  }

  .about-leadership {
	display: none;
	position: relative;
	overflow: hidden;
	padding: var(--space-xl) 0;

	> h2.wp-block-heading {
	  font-size: var(--font-title-md);
	  font-weight: 500;
	}

	.leadership-main {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 1rem;
	  align-items: start;

	  @media (max-width: 767px),
		(min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
		grid-template-columns: 1fr;
	  }

	  .card-leadership {
		border-radius: var(--border-radius-xl);
		background: var(--smx-color-white);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		height: 100%;

		.cargo {
		  display: block;
		  font-size: var(--font-size-base);
		  color: var(--smx-color-text-bold);
		  font-weight: 600;
		}

		h3 {
		  font-size: var(--font-title-sm);
		  color: var(--smx-color-primary-contrast);
		  margin-bottom: var(--space-lg);
		}

		.content {
		  padding: var(--space-lg);
		  flex-grow: 1;
		}

		.thumb {
		  img {
			display: block;
			object-fit: contain;
			width: 100%;
			height: auto;
		  }
		}
	  }
	}

	.leadership-others {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 1rem;
	  align-items: start;

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

	  .card {
		border-radius: var(--border-radius-lg);
		background: var(--smx-color-white);
		overflow: hidden;
		display: flex;

		.cargo {
		  display: block;
		  font-size: var(--font-size-base);
		  color: var(--smx-color-text-bold);
		  font-weight: 600;
		}

		h4 {
		  font-size: var(--font-text-base);
		  color: var(--smx-color-primary);
		}

		.content {
		  padding: var(--space-lg);
		  flex-grow: 1;
		}

		.thumb {
		  width: 96px;

		  img {
			display: block;
			object-fit: contain;
			width: 100%;
			height: auto;
		  }
		}
	  }
	}
  }

  .about-executives {
	padding: var(--space-lg) 0;

	.card {
	  display: grid;
	  grid-template-columns: 0.42fr 1fr;
	  background: var(--smx-color-white);
	  overflow: hidden;
	  border-radius: var(--border-radius-lg);
	  align-items: center;
	  @media (max-width: 768px) {
		gap: 0;
		display: flex;
		flex-direction: column-reverse;
	  }

	  figure {
		padding: var(--space-md);
		padding-bottom: 0;
		min-width: 120px;
		height: auto;
		align-items: flex-end;
		@media (max-width: 768px) {
		  padding: 0 var(--space-sm);
		  height: 100%;
		  display: flex;
		}
	  }

	  div {
		padding: var(--space-lg);
		padding-left: var(--space-sm);

		@media (max-width: 768px) {
		  padding-left: var(--space-lg);

		  h4 {
			color: var(--smx-color-text-bold);
			margin: 0;
			font-size: var(--font-size-base);
		  }

		  h3 {
			margin-top: 0;
			margin-bottom: var(--space-md);
			font-size: var(--font-subtitle);
			color: var(--smx-color-primary-contrast);
		  }

		  p {
			margin: 0;
			font-size: var(--font-size-base);
		  }
		}
	  }
	}
  }

  .smx-map,
  .smx-map .container {
	min-height: 630px;

	@media (max-width: 768px) {
	  min-height: 100px;
	}
  }
}