:root {
  /* CHTI_WEBSITE_FONT */
  --typography-herotitle_large: 92px;
  --typography-herotitle_large-rem: 5.75rem;

  --typography-headline_large: 64px;
  --typography-headline_large-rem: 4rem;

  --typography-title_large: 48px;
  --typography-title_large-rem: 3rem;

  --typography-body_large: 20px;
  --typography-body_large-rem: 1.25rem;

  --typography-subtitle_large: 32px;
  --typography-subtitle_large-rem: 2rem;

  --typography-label_large: 14px;
  --typography-label_large-rem: 0.875rem;

  --typography-caption_large: 16px;
  --typography-caption_large-rem: 1rem;

  --typography-herotitle_medium: 64px;
  --typography-herotitle_medium-rem: 4rem;
  --typography-herotitle_small: 48px;
  --typography-herotitle_small-rem: 3rem;

  --typography-headline_medium: 48px;
  --typography-headline_medium-rem: 3rem;
  --typography-headline_small: 32px;
  --typography-headline_small-rem: 2rem;

  --typography-title_medium: 32px;
  --typography-title_medium-rem: 2rem;
  --typography-title_small: 24px;
  --typography-title_small-rem: 1.5rem;

  --typography-subtitle_medium: 24px;
  --typography-subtitle_medium-rem: 1.5rem;
  --typography-subtitle_small: 20px;
  --typography-subtitle_small-rem: 1.25rem;

  --typography-body_medium: 18px;
  --typography-body_medium-rem: 1.125rem;
  --typography-body_small: 16px;
  --typography-body_small-rem: 1rem;

  --typography-caption_medium: 14px;
  --typography-caption_medium-rem: 0.875rem;

  --typography-label_medium: 12px;
  --typography-label_medium-rem: 0.75rem;
  --typography-label_small: 12px;
  --typography-label_small-rem: 0.75rem;

  --typography-caption_small: 12px;
  --typography-caption_small-rem: 0.75rem;
  /* END - CHTI_WEBSITE_FONT */

  /* CHTI_WEBSITE_COLOR */
  --color-theme-blue600: #1c8ee8;
  --color-theme-blue500: #1f9cff;
  --color-theme-blue400: #4dbdff;
  --color-theme-blue300: #98d1ff;
  --color-theme-blue200: #cce8ff;
  --color-theme-blue100: #e9f5ff;

  --color-theme-green600: #25c66f;
  --color-theme-green500: #29da7a;
  --color-theme-green300: #7de8ae;
  --color-theme-green200: #d4f7e4;
  --color-theme-green100: #eafbf2;

  --color-theme-neutral900: #0b1013;
  --color-theme-neutral900-rgb: 11, 16, 19;
  --color-theme-neutral850: #131a20;
  --color-theme-neutral800: #222e38;
  --color-theme-neutral700: #394e60;
  --color-theme-neutral600: #60829f;
  --color-theme-neutral500: #9fb4c6;
  --color-theme-neutral400: #bfcdd9;
  --color-theme-neutral300: #dfe6ec;
  --color-theme-neutral200: #f5f7f9;

  --color-theme-white: #ffffff;
  --color-theme-black: #000000;
  /* END - CHTI_WEBSITE_COLOR */

  /* CHTI_WEBSITE_SPACING */
  --spacing-800: 32px;
  --spacing-800-rem: 2rem;
  --spacing-700: 28px;
  --spacing-700-rem: 1.75rem;
  --spacing-600: 24px;
  --spacing-600-rem: 1.5rem;
  --spacing-4600: 184px;
  --spacing-4600-rem: 11.5rem;
  --spacing-4000: 160px;
  --spacing-4000-rem: 10rem;
  --spacing-400: 16px;
  --spacing-400-rem: 1rem;
  --spacing-3000: 120px;
  --spacing-3000-rem: 7.5rem;
  --spacing-300: 12px;
  --spacing-300-rem: 0.75rem;
  --spacing-2400: 96px;
  --spacing-2400-rem: 6rem;
  --spacing-200: 8px;
  --spacing-200-rem: 0.5rem;
  --spacing-1600: 64px;
  --spacing-1600-rem: 4rem;
  --spacing-1200: 48px;
  --spacing-1200-rem: 3rem;
  --spacing-1000: 40px;
  --spacing-1000-rem: 2.5rem;
  --spacing-100: 4px;
  --spacing-100-rem: 0.25rem;
  --spacing-0: 0px;
  --spacing-0-rem: 0rem;
  /* END - CHTI_WEBSITE_SPACING */

  /* BASE */
  --font-geologica: Geologica;

  --font-size-base: var(--typography-body_small);
  --font-size-base-rem: var(--typography-body_small-rem);
  --font-weight-base: 100;

  --color-primary: var(--color-theme-blue500);
  --color-secondary: var(--color-theme-green500);
  --color-text-light: var(--color-theme-neutral400);
  --color-text-dark: #1e1e1e;

  --background-light: var(--color-theme-white);

  --background-dark: var(--color-theme-neutral850);
  --background-dark-light: var(--color-theme-neutral800);
  /* END - BASE */

  /* header */
  --header-height-rem: 4rem;
  --header-height: 64px;
  --header-z-index: 1000;

  /* company color */
  --color-company-blue: #0981c6;

  --page-max-width: 90rem;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/*  Reset HTML elements styles */
a {
  text-decoration: none;
  color: unset;
}

button {
  border: none;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  outline: none;
  display: block;
  cursor: pointer;
}
/* End - Reset HTML elements styles */

.geologica-font {
  font-family: var(--font-geologica), sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--font-weight-base);
  font-style: normal;
  font-size: var(--font-size-base);
  font-variation-settings: 'slnt' 0, 'CRSV' 0, 'SHRP' 0;
}

body {
  margin: 0;
  line-height: normal;
}

body.light {
  background-color: var(--background-light);
}

body.dark {
  background-color: var(--background-dark);
}

span {
  display: inline-flex;
  align-items: center;
}

.block-container {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

header {
  width: calc(100% - var(--spacing-1200-rem) * 2);
  position: fixed;
  height: var(--header-height-rem);
  padding: 0 var(--spacing-1200-rem);
  background: transparent;
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-600-rem);

  color: var(--color-theme-white);
  z-index: var(--header-z-index);
  transition: background 0.3s ease;
}

@media (max-width: 768px) {
  header.desktop {
    display: none;
  }
}

header.light {
  background: var(--background-light);
  color: var(--color-theme-black);
}

header.dark {
  background: var(--background-dark);
  color: var(--color-theme-white);
}

header > .logo {
  color: var(--color-theme-white);
  transition: color 0.3s ease;
}

header.light > .logo {
  color: var(--color-company-blue);
}

header.dark > .logo {
  color: var(--color-theme-white);
}

header.desktop > .nav-container {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 0;
}

header.desktop > .nav-container > nav {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}

header.desktop > .nav-container > nav::-webkit-scrollbar {
  display: none;
}

header.desktop > .nav-container > .scroll-button {
  border: none;
  cursor: pointer;
  height: var(--header-height-rem);
  padding: 0 var(--spacing-200-rem);
  z-index: 1;
  display: none;
  transition: background 0.3s ease;
}

header.desktop.dark > .nav-container > .scroll-button:hover {
  background: var(--background-dark-light);
}

header.desktop.light > .nav-container > .scroll-button:hover {
  background: var(--color-theme-neutral200);
}

header.desktop > .nav-container > .scroll-button.left > svg {
  transform: rotate(90deg);
}

header.desktop > .nav-container > .scroll-button.disabled > svg {
  color: var(--color-theme-neutral500);
  cursor: not-allowed;
}

header.desktop > .nav-container > .scroll-button.right > svg {
  transform: rotate(-90deg);
}

header.desktop > .nav-container > nav > .navigation-pills {
  display: flex;
  color: var(--color-theme-white);
  height: var(--header-height-rem);
  align-items: center;
  cursor: pointer;
  padding: 0 var(--spacing-300-rem);
  user-select: none;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

header.desktop > .nav-container > nav > a.navigation-pills {
  gap: var(--spacing-200-rem);
}

header.desktop > .nav-container > nav > a.navigation-pills > svg > .arrow-top-right {
  transition: transform 0.3s ease;
}

header.desktop > .nav-container > nav > a.navigation-pills:hover > svg > .arrow-top-right {
  transform: translate(2px, -2px);
}

header.desktop > .nav-container > nav > button.navigation-pills > svg {
  transition: transform 0.3s ease;
}

header.desktop > .nav-container > nav > .navigation-pills.active > svg {
  transform: rotateX(180deg);
}

header.desktop.dark > .nav-container > nav > .navigation-pills {
  color: var(--color-theme-white);
}

header.desktop.dark > .nav-container > nav > a.navigation-pills > svg {
  color: var(--color-primary);
}

header.desktop.light > .nav-container > nav > a.navigation-pills > svg {
  color: var(--color-primary);
}

header.desktop.dark > .nav-container > nav > .navigation-pills:hover {
  background: var(--background-dark-light);
}

header.desktop.dark > .nav-container > nav > .navigation-pills.active {
  background: var(--background-dark-light);
}

header.desktop.light > .nav-container > nav > .navigation-pills {
  color: var(--color-theme-black);
}

header.desktop.light > .nav-container > nav > .navigation-pills:hover {
  background: var(--color-theme-neutral200);
}

header.desktop.light > .nav-container > nav > .navigation-pills.active {
  background: var(--color-theme-neutral200);
}

header.desktop > .nav-popover {
  position: fixed;
  width: 100vw;
  height: 0;
  overflow: hidden;
  left: 0;
  top: var(--header-height-rem);
  transition: height 0.3s ease;
}

header.desktop.dark > .nav-popover {
  background: var(--background-dark-light);
  color: var(--color-theme-white);
}

header.desktop.light > .nav-popover {
  background: var(--color-theme-neutral200);
  color: #131a20;
}

header.desktop > .nav-popover-solution {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--spacing-1200-rem);
}

header.desktop > .nav-popover-solution > .title {
  text-overflow: ellipsis;
  font-style: normal;
  font-weight: 200;
  padding: 0 var(--spacing-200-rem);
  color: #8e98a8;
}

header.desktop > .nav-popover-solution > .item {
  display: flex;
  align-items: center;
  gap: var(--spacing-200-rem);
  padding: var(--spacing-200-rem);
  transition: gap 0.3s ease;
}

header.desktop > .nav-popover-solution > .item:hover {
  gap: var(--spacing-300-rem);
  text-decoration: underline;
}

header.desktop > .nav-popover-service {
  display: flex;
}

header.desktop > .nav-popover-service > .type-group {
  display: flex;
  flex-direction: column;
  width: calc(13.84625rem - 3px);
  border-right: 1px solid var(--color-theme-neutral700);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-theme-neutral700) var(--background-dark);
}

header.desktop.light > .nav-popover-service > .type-group {
  border-color: var(--color-theme-neutral400);
  scrollbar-color: var(--color-theme-neutral400) var(--background-light);
}

header.desktop.dark > .nav-popover-service > .type-group {
  border-color: var(--color-theme-neutral700);
}

header.desktop > .nav-popover-service > .content {
  padding: var(--spacing-1200-rem);
  flex: 1;
}

header.desktop > .nav-popover-service > .content > .service-item {
  display: none;
  gap: var(--spacing-1200-rem);
  align-items: flex-start;
  transition: all 0.3s ease;
  animation: fadeIn 0.3s ease;
}

header.desktop > .nav-popover-service > .content > .service-item.active {
  display: flex;
}

header.desktop > .nav-popover-service > .content > .service-item > .svg-img {
  -webkit-user-drag: none;
}

header.desktop > .nav-popover-service > .content > .service-item > .icon {
  display: none;
}

header.desktop.light > .nav-popover-service > .content > .service-item > .icon.light {
  display: block;
}

header.desktop.dark > .nav-popover-service > .content > .service-item > .icon.dark {
  display: block;
}

header.desktop > .nav-popover-service > .content > .service-item > .link-list {
  margin-top: var(--spacing-200-rem);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400-rem);
}

header.desktop > .nav-popover-service > .content > .service-item > .link-list > .link {
  display: flex;
  gap: var(--spacing-200-rem);
  align-items: center;
  transition: gap 0.3s ease;
}

header.desktop > .nav-popover-service > .content > .service-item > .link-list > .description {
  color: var(--color-theme-neutral500);
  font-size: var(--typography-caption_medium-rem);
  max-width: 17.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}

header.desktop > .nav-popover-service > .content > .service-item > .link-list > .link:hover {
  text-decoration: underline;
  gap: var(--spacing-300-rem);
}
header.desktop > .nav-popover-service > .type-group > .type {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-200-rem) 0 var(--spacing-1200-rem);
  height: 4rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

header.desktop > .nav-popover-service > .type-group > .type:hover:not(.active) {
  background-color: var(--color-theme-neutral850);
}

header.desktop.light > .nav-popover-service > .type-group > .type:hover:not(.active) {
  background-color: var(--color-theme-white);
}

header.desktop > .nav-popover-service > .type-group > .type.active {
  background-color: var(--color-primary);
}

header.desktop.light > .nav-popover-service > .type-group > .type.active {
  color: var(--color-theme-white);
}

header.desktop > .nav-popover-solution > .item :hover {
  color: vat(--color-primary);
}

header.desktop > .nav-popover.active.nav-popover-solution {
  height: 12.375rem;
}

header.desktop > .nav-popover.active.nav-popover-service {
  height: 26rem;
  max-height: calc(100vh - var(--header-height-rem));
}

header.desktop > .nav-right-section {
  margin-left: auto;
  display: flex;
  align-items: center;
}

header.desktop > .nav-right-section > .search {
  cursor: pointer;
  height: 2.25rem;
  width: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--spacing-700-rem);
}

header.desktop.dark > .nav-right-section > .search:hover {
  background: var(--background-dark-light);
}

header.desktop.light > .nav-right-section > .search:hover {
  background: var(--color-theme-neutral200);
}

header.desktop > .nav-right-section > .language-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-300-rem);
  cursor: pointer;
  padding: 0 var(--spacing-300-rem);
  height: 2.25rem;
  user-select: none;
  border-radius: var(--spacing-700-rem);
  transition: background 0.3s ease, color 0.3s ease;
}

header.desktop.dark > .nav-right-section > .language-selector.active {
  background: var(--background-dark-light);
}

header.desktop.light > .nav-right-section > .language-selector.active {
  background: var(--color-theme-neutral200);
}

header.desktop.dark > .nav-right-section > .language-selector:hover {
  background: var(--background-dark-light);
}

header.desktop.light > .nav-right-section > .language-selector:hover {
  background: var(--color-theme-neutral200);
}

header.desktop > .nav-right-section > .contact-us {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-300-rem);
  height: 2.25rem;
  border-radius: var(--spacing-700-rem);
  border: 1px solid var(--color-theme-white);
  cursor: pointer;
  user-select: none;
  margin-left: var(--spacing-200-rem);
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease;
}

header.desktop.light > .nav-right-section > .contact-us {
  color: var(--color-theme-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

header.desktop.dark > .nav-right-section > .contact-us {
  color: var(--color-theme-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

header.desktop > .nav-right-section > .contact-us:hover {
  background: var(--color-theme-blue400);
  border-color: var(--color-theme-blue400);
}

/* main {} */

main > .banner {
  background-color: var(--background-dark);
  padding: var(--header-height-rem) var(--spacing-1200-rem) 0 var(--spacing-1200-rem);
  display: flex;
  flex-direction: column;
  height: 32.5rem;
  justify-content: center;
}

@media (max-width: 768px) {
  main > .banner {
    height: 30rem;
    padding: 0 var(--spacing-400-rem);
  }
}

main > .banner > .banner-span-1 {
  color: var(--color-text-light);
  font-size: 3rem;
}

@media (max-width: 768px) {
  main > .banner > .banner-span-1 {
    font-size: var(--typography-subtitle_large-rem);
  }
}

main > .banner > .banner-span-2 {
  width: fit-content;
  font-size: 6rem;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(to right, var(--color-primary), var(--color-theme-white), var(--color-primary));
  background-clip: text;
}

@media (max-width: 768px) {
  main > .banner > .banner-span-2 {
    font-size: var(--typography-title_large-rem);
  }
}

.gap-hr-wrapper {
  padding: var(--spacing-1200-rem);
  background: var(--background-light);
}

@media (max-width: 768px) {
  .gap-hr-wrapper {
    padding: var(--spacing-600-rem) var(--spacing-400-rem);
  }
}

.gap-hr-wrapper > div {
  background: var(--color-theme-neutral400);
  height: 1px;
  width: 100%;
}

.gap-hr-wrapper.dark {
  background: var(--color-gray-200);
}

.gap-hr-wrapper.dark > div {
  background: rgba(142, 152, 168, 0.6);
}

.frame-427319537 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--color-gray-200);
  min-height: 7.5rem;
  gap: var(--spacing-1200-rem);
  padding: 0 var(--spacing-1200-rem) var(--spacing-1200-rem) calc(100% / 3 + var(--spacing-1200-rem));
  color: var(--color-theme-white);
}

@media (max-width: 768px) {
  .frame-427319537 {
    padding: 0 var(--spacing-400-rem) var(--spacing-1200-rem) var(--spacing-400-rem);
  }
}

.frame-427319537 > .item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300-rem);
  color: var(--color-theme-neutral400);
  justify-content: space-between;
}

@media (max-width: 768px) {
  .frame-427319537 > .item {
    font-size: var(--typography-caption_medium-rem);
  }
}

.frame-427319537 > .item > .link-wrapper {
  padding: var(--spacing-200-rem) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-200-rem);
  font-size: 1.25rem;
}

.frame-427319537 > .item > .link-wrapper:hover {
  text-decoration: underline;
}

.frame-427319537 > .item > .link-wrapper > img,
.frame-427319537 > .item > .link-wrapper > svg {
  transition: transform 0.3s ease;
}

.frame-427319537 > .item > .link-wrapper:not(.blank):hover > img,
.frame-427319537 > .item > .link-wrapper:not(.blank):hover > svg {
  transform: translate(4px, 0);
}

.frame-427319537 > .item > .link-wrapper.blank > svg > .arrow-top-right {
  transition: transform 0.3s ease;
}

.frame-427319537 > .item > .link-wrapper.blank:hover > svg > .arrow-top-right {
  transform: translate(2px, -2px);
}

.frame-427319349,
.frame-427319603 {
  background: var(--color-gray-200);
  margin: 1.5rem var(--spacing-1200-rem);
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .frame-427319349,
  .frame-427319603 {
    margin: 1.5rem var(--spacing-400-rem);
  }
}

.frame-427319349 > img {
  width: 100%;
  object-fit: cover;
  height: 32rem;
  transition: filter 0.3s ease;
  -webkit-user-drag: none;
  filter: brightness(0.6);
}

.frame-427319603 > img {
  width: min(100%, 1440px);
  margin-left: calc(50% - min(100%, 1440px) / 2);
  object-fit: contain;
  transition: filter 0.3s ease;
  -webkit-user-drag: none;
}

@media (max-width: 768px) {
  .frame-427319349 > img {
    height: 20rem;
  }
}

.frame-427319349 > .play-the-video {
  width: 100px;
  height: 100px;
  color: var(--color-theme-neutral400);
  cursor: pointer;

  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-theme-neutral400);
  backdrop-filter: blur(2px);

  transition: background 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.frame-427319349 > .play-the-video:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.frame-427319349 .play-the-video:hover ~ img {
  filter: brightness(0.4);
}

.frame-427319349 > .play-the-video > span {
  z-index: 1;
  text-align: center;
}

.frame-427319349 > .video-dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.frame-427319349 > .video-dialog.active {
  display: flex;
}

.frame-427319349 > .video-dialog > .youtube-iframe {
  width: 100%;
  height: 100%;
}

.frame-427319349 > .video-dialog.active > .close-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.75rem;
  height: 4.75rem;
  top: 0;
  right: 0;
  background: black;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  color: var(--color-theme-neutral400);
  border-left: 1px solid var(--color-theme-neutral500);
  border-bottom: 1px solid var(--color-theme-neutral500);
}

.frame-427319349 > .video-dialog.active > .close-button:hover {
  background: var(--color-theme-blue500);
  color: var(--color-theme-white);
  border-color: var(--color-theme-blue500);
}

/* Frame - 18 */
.frame-18 {
  display: flex;
  padding: var(--spacing-2400-rem) var(--spacing-1200-rem);
  flex-direction: column;
  gap: var(--spacing-600-rem);
  align-self: stretch;
  background: var(--background-dark);
}

@media (max-width: 768px) {
  .frame-18 {
    padding: var(--spacing-1600-rem) var(--spacing-400-rem);
  }
}

.frame-18 > .title {
  color: var(--color-theme-white);
  font-size: var(--typography-title_small-rem);
}

@media (max-width: 768px) {
  .frame-18 > .title {
    font-size: var(--typography-body_small-rem);
  }
}

.frame-18 > .card-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 3rem;
}

@media (max-width: 768px) {
  .frame-18 > .card-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
}

.frame-18 > .card-wrapper > .card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-800-rem);
  position: relative;
}

.frame-18 > .card-wrapper > .card::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1.5rem;
  height: 100%;
  width: 1px;
  background: rgba(142, 152, 168, 0.6);
}

@media (max-width: 768px) {
  .frame-18 > .card-wrapper > .card::after {
    display: none;
  }
}

.frame-18 > .card-wrapper > .card:nth-child(n):nth-last-child(-n + 1)::after {
  display: none;
}

@media (min-width: 769px) and (max-width: 1200px) {
  .frame-18 > .card-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .frame-18 > .card-wrapper > .card:nth-child(n):nth-last-child(-n + 2)::after {
    display: none;
  }
}

@media (min-width: 1201px) {
  .frame-18 > .card-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.frame-18 > .card-wrapper > .card > .image-wrapper {
  height: 14.25rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.frame-18 > .card-wrapper > .card > .image-wrapper > img {
  transition: transform 0.3s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame-18 > .card-wrapper > .card > .image-wrapper:hover > img {
  transform: scale(1.1);
}

.frame-18 > .card-wrapper > .card > .image-wrapper:hover ~ .content > .title {
  text-decoration: underline;
}

.frame-18 > .card-wrapper > .card > .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300-rem);
}

.frame-18 > .card-wrapper > .card > .content > .title {
  color: var(--color-theme-white);
  font-size: var(--typography-subtitle_large-rem);
}

.frame-18 > .card-wrapper > .card > .content > .title:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .frame-18 > .card-wrapper > .card > .content > .title {
    font-size: var(--typography-subtitle_small-rem);
  }
}

.frame-18 > .card-wrapper > .card > .content > .text {
  color: var(--color-text-light);
}

@media (max-width: 768px) {
  .frame-18 > .card-wrapper > .card > .content > .text {
    font-size: var(--typography-caption_small-rem);
    color: var(--color-theme-neutral500);
  }
}

.frame-18 > .card-wrapper > .card > .tags {
  display: flex;
  gap: var(--spacing-200-rem);
}

.frame-18 > .card-wrapper > .card > .tags > .tag {
  padding: var(--spacing-200-rem) var(--spacing-300-rem);
  border-radius: var(--spacing-600-rem);
  border: 1px solid var(--color-theme-white);
  backdrop-filter: blur(2px);
  color: var(--color-text-light);
  transition: background 0.3s ease, border-color 0.3s ease;

  /* disable hover effect */
  cursor: pointer;
  pointer-events: none;
}

/* disable hover effect */
/* .frame-18 > .card-wrapper > .card > .tags > .tag:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
} */

@media (max-width: 768px) {
  .frame-18 > .card-wrapper > .card > .tags > .tag {
    font-size: var(--typography-caption_medium-rem);
  }
}

/* Frame - 427319496 */
.frame-427319496 {
  padding: var(--spacing-4000-rem) var(--spacing-1200-rem) var(--spacing-800-rem) var(--spacing-1200-rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1600-rem);
  background-color: var(--background-light);
}

@media (max-width: 768px) {
  .frame-427319496 {
    padding: var(--spacing-1600-rem) var(--spacing-400-rem) var(--spacing-800-rem) var(--spacing-400-rem);
  }
}

.frame-427319496 > .head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-600-rem);
}

.frame-427319496 > .head > .title {
  color: #1e1e1e;
  font-size: var(--typography-headline_large-rem);
  text-transform: capitalize;
}

@media (max-width: 768px) {
  .frame-427319496 > .head > .title {
    font-size: var(--typography-headline_small-rem);
    color: var(--color-theme-neutral850);
    text-align: center;
  }
}

.frame-427319496 > .head > .description {
  color: var(--color-theme-neutral700);
  font-size: var(--typography-body_large-rem);
}

@media (max-width: 768px) {
  .frame-427319496 > .head > .description {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .frame-427319496 > .head > .description {
    font-size: var(--typography-caption_large-rem);
  }
}

.frame-427319496 > .tabs {
  width: 100%;
  display: grid;
  row-gap: var(--spacing-1600-rem);
  align-items: start;
  justify-items: center;
  max-width: 55rem;
}

@media (max-width: 768px) {
  .frame-427319496 > .tabs {
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    font-size: var(--typography-caption_large-rem);
  }
}

@media (min-width: 769px) {
  .frame-427319496 > .tabs {
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    column-gap: var(--spacing-2400-rem);
  }
}

.frame-427319496 > .tabs > .wrap {
  display: flex;
  position: relative;
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .frame-427319496 > .tabs > .wrap {
    justify-content: center;
  }
}

.frame-427319496 > .tabs > .wrap > .item {
  display: flex;
  gap: var(--spacing-300);
  color: var(--color-theme-neutral500);
  align-items: last baseline;
  position: relative;
  cursor: pointer;
  transition: color 0.3s ease;
}

.frame-427319496 > .tabs > .wrap > .item:hover {
  color: var(--color-theme-neutral600);
}

@media (max-width: 768px) {
  .frame-427319496 > .tabs > .wrap > .item {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 769px) {
  .frame-427319496 > .tabs > .wrap:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--spacing-2400-rem) / 2 * -1);
    width: 1px;
    background-color: var(--color-theme-neutral400);
  }
}

.frame-427319496 > .tabs > .wrap > .item > .value {
  font-size: var(--typography-herotitle_large-rem);
}

@media (max-width: 768px) {
  .frame-427319496 > .tabs > .wrap > .item > .value {
    font-size: var(--typography-herotitle_small-rem);
  }
}

.frame-427319496 > .tabs > .wrap > .item.active > .value {
  color: var(--color-primary);
}

.frame-427319496 > .tabs > .wrap > .item > .unit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
  .frame-427319496 > .tabs > .wrap > .item > .unit {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .frame-427319496 > .tabs > .wrap > .item > .unit {
    font-size: var(--typography-label_medium-rem);
  }
}

.frame-427319496 > .content {
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .frame-427319496 > .content {
    max-height: 11rem;
  }
}

.frame-427319496 > .content > img {
  display: none;
  object-fit: contain;
  animation: fadeIn 0.3s ease;
}

.frame-427319496 > .content > img.active {
  display: block;
  max-width: 100%;
  height: auto;
  position: absolute;
}

@media (max-width: 768px) {
  .frame-427319496 > .content > img.active {
    max-height: 11rem;
  }
}

.frame-427319496 > .content > img.base {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Our Partner */
.our-partner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-800-rem);
  padding: 0 var(--spacing-1200-rem) var(--spacing-2400-rem) var(--spacing-1200-rem);
  overflow: hidden;
  background-color: var(--background-light);
}

.our-partner > .title {
  color: #1e1e1e;
  font-weight: 500;
  font-size: var(--body);
}

.our-partner > .partner-group {
  display: flex;
  transition: transform 0.5s ease;
  height: 5rem;
  flex-wrap: nowrap;
  gap: var(--spacing-300-rem);
}

.our-partner > .partner-group > .partner {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.our-partner > .navigation {
  display: flex;
  gap: var(--spacing-200-rem);
  justify-content: center;
}

.our-partner > .navigation > .nav-button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
  background: #ecf0f4;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.our-partner > .navigation > .nav-button:hover {
  background: var(--color-primary);
}

.our-partner > .navigation > .nav-button.active {
  background: var(--color-primary);
  width: 1.5rem;
}

/* Frame - 427319486 */
.frame-427319486 {
  height: 31.25rem;
  display: flex;
}

@media (max-width: 768px) {
  .frame-427319486 {
    height: 20rem;
  }
}

.frame-427319486 > .content {
  display: flex;
  padding: var(--spacing-1600-rem) var(--spacing-1600-rem) var(--spacing-1600-rem) var(--spacing-1200-rem);
  flex-direction: column;
  background: #e9f5ff;
  flex: 1;
}

@media (max-width: 768px) {
  .frame-427319486 > .content {
    padding: var(--spacing-800-rem) var(--spacing-400-rem) var(--spacing-800-rem) var(--spacing-400-rem);
  }
}

.frame-427319486 > .content > .head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-600-rem);
}

@media (max-width: 768px) {
  .frame-427319486 > .content > .head {
    flex-direction: row;
    justify-content: space-between;
  }
}

.frame-427319486 > .content > .head > .title {
  color: #1e1e1e;
  font-size: 3rem;
}

@media (max-width: 768px) {
  .frame-427319486 > .content > .head > .title {
    font-size: var(--typography-title_small-rem);
  }
}

.frame-427319486 > .content > .head > .icon-group {
  display: flex;
  gap: 0.4375rem;
}

.frame-427319486 > .content > .head > .icon-group > .item {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #bfcdd9;
  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}

.frame-427319486 > .content > .head > .icon-group > .item:hover {
  cursor: pointer;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-theme-white);
}

.frame-427319486 > .content > .bottom-group {
  margin-top: auto;
}

.frame-427319486 > .content > .bottom-group > .row {
  color: var(--color-theme-neutral700);
}

.frame-427319486 > .content > .bottom-group > .row > a:hover {
  text-decoration: underline;
}

.frame-427319486 > .content > .bottom-group > .row > .strong {
  font-weight: 400;
}

.frame-427319486 > .image-wrapper {
  overflow: hidden;
  display: flex;
  justify-content: center;
  width: 50%;
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .frame-427319486 > .image-wrapper {
    width: 0;
  }
}

/* Footer */
footer {
  background: var(--color-theme-neutral900);
  padding: var(--spacing-1200-rem);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-600-rem);
  color: var(--color-theme-white);
}

@media (max-width: 768px) {
  footer {
    padding: var(--spacing-1200-rem) var(--spacing-400-rem);
  }
}

footer > .icon-group {
  display: flex;
  gap: var(--spacing-200-rem);
  padding: var(--spacing-300-rem) 0;

  border-bottom: 1px solid var(--color-theme-neutral700);
}

footer > .icon-group > .right-group {
  margin-left: auto;
  display: flex;
  gap: var(--spacing-200-rem);
}

footer > .icon-group > .right-group > .icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-theme-neutral400);
  border-radius: 50%;
  transition: background 0.3s ease, border-color 0.3s ease;
}

footer > .icon-group > .right-group > .icon-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

footer > .icon-group > .right-group > .text-link {
  height: 2.25rem;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-300-rem);
  background-color: var(--color-primary);
  border-radius: var(--spacing-700-rem);
  transition: background 0.3s ease;
}

footer > .icon-group > .right-group > .text-link:hover {
  background-color: var(--color-theme-blue400);
}

footer > .icon-group > .right-group > .text-link:focus {
  background-color: var(--color-theme-blue600);
}

footer > .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-1200-rem);
}

@media (max-width: 768px) {
  footer > .content {
    grid-template-columns: minmax(0, 1fr);
    /* gap: var(--spacing-600-rem); */
  }
}

footer > .content > .office-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-200-rem) * 2 + var(--spacing-300-rem));
}

footer > .content > .office-group > .office {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200-rem);
  font-size: var(--typography-label_large-rem);
}

footer > .content > .office-group > .office > .title {
  color: var(--color-theme-neutral600);
}

footer > .content > .office-group > .office > .information > .row {
  color: var(--color-theme-white);
}

footer > .content > .office-group > .office > .information > .row > a:hover {
  text-decoration: underline;
}

footer > .content > .office-group > .office > .information > .row > .strong {
  font-weight: 400;
}

footer > .content > .site-map {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--spacing-400-rem) var(--spacing-300-rem);
  grid-template-rows: auto auto;
  padding: var(--spacing-200-rem) 0 var(--spacing-1000-rem) 0;
  /* border-bottom: 1px solid var(--color-theme-neutral700); */
  transition: width 0.3s ease;
  font-size: var(--typography-caption_medium-rem);
}

@media (max-width: 768px) {
  footer > .content > .site-map {
    width: 100%;
    min-width: unset;
  }
}

footer > .content > .site-map > .name {
  color: var(--color-theme-neutral600);
}

footer > .content > .site-map > .content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-300-rem);
}

footer > .content > .site-map > .content > .leaf:hover {
  text-decoration: underline;
}

footer > .bottom-group {
  display: flex;
  padding: calc(var(--spacing-300-rem) + var(--spacing-600-rem)) 0 var(--spacing-300-rem) 0;
  justify-content: space-between;
  color: var(--color-theme-neutral400);
  font-size: var(--typography-caption_medium-rem);
  border-top: 1px solid var(--color-theme-neutral700);
}

@media (max-width: 768px) {
  footer > .bottom-group {
    flex-direction: column;
    gap: var(--spacing-400-rem);
  }
}

header.desktop > .language-selector {
  position: fixed;
  width: 18rem;
  height: 0;
  overflow: hidden;
  display: flex;

  flex-direction: column;
  top: var(--header-height-rem);
  right: 0;
  gap: var(--spacing-600-rem);
  padding: 0 var(--spacing-1200-rem);
  transition: height 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
  z-index: 1001;
  max-height: calc(100vh - var(--header-height-rem) - var(--spacing-1200-rem) * 2);

  scrollbar-width: thin;
}

header.desktop.dark > .language-selector {
  background-color: var(--color-theme-neutral800);
  scrollbar-color: var(--color-theme-neutral700) var(--background-dark);
}

header.desktop.light > .language-selector {
  background-color: var(--color-theme-neutral200);
  scrollbar-color: var(--color-theme-neutral400) var(--background-light);
}

header.desktop > .language-selector.active {
  height: 27.625rem;
  padding: var(--spacing-1200-rem);
  overflow-y: auto;
}

header.desktop > .language-selector > .group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200-rem);
}

header.desktop > .language-selector > .group > .title {
  color: var(--color-theme-neutral600);
}

header.desktop > .language-selector > .group > .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400-rem);
}

header.desktop > .language-selector > .group > .content > .text {
  font-size: var(--typography-body_large-rem);
}

header.desktop > .language-selector > .group > .content > .link.active > .text {
  color: var(--color-primary);
}

header.desktop > .language-selector > .group > .content > .link:hover > .text {
  color: var(--color-primary);
}

header.desktop > .language-selector > .group > .content > .link {
  display: flex;
  gap: var(--spacing-200-rem);
}

header.desktop > .language-selector > .group > .content > .link > .icon > img {
  width: 1.5rem;
  height: 1.5rem;
}

header.mobile {
  display: flex;

  height: var(--header-height-rem);

  padding: 0 var(--spacing-400-rem) 0 0;
  width: calc(100% - var(--spacing-200-rem) * 2);
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (min-width: 769px) {
  header.mobile {
    display: none;
  }
}

header.mobile.dark {
  background-color: var(--color-theme-neutral850);
}

header.mobile.light {
  background-color: var(--color-theme-white);
}

header.mobile > .menu-icon {
  color: var(--color-theme-white);
  width: 3.5rem;
  height: 4rem;
  cursor: pointer;
}

header.mobile > .menu-icon:hover {
  background-color: var(--color-theme-neutral800);
}

header.mobile.light > .menu-icon:hover {
  background-color: var(--color-theme-neutral200);
}

header.mobile.light > .menu-icon {
  color: var(--color-theme-neutral850);
}

header.mobile > .logo {
  position: absolute;
  width: 2rem;
  height: 2rem;
  left: 50%;
  transform: translate(-50%, 0);
}

header.mobile.light > .logo {
  color: var(--color-company-blue);
}

header.mobile > .right-group {
  margin-left: auto;
}

header.mobile > .right-group > .pill-link {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-300-rem);
  height: 2.25rem;
  border-radius: var(--spacing-700-rem);
  background-color: var(--color-primary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

header.mobile.light > .right-group > .pill-link {
  color: var(--color-theme-white);
}

header.mobile > .right-group > .pill-link:hover {
  background-color: var(--color-theme-blue400);
}

header.mobile > .right-group > .pill-link:focus {
  background-color: var(--color-theme-blue600);
}

header.mobile > .side-menu {
  position: fixed;
  overflow: hidden;
  width: 0;
  left: 0;
  top: 0;
}

header.mobile > .side-menu > .mask {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(1px);
  z-index: 1000;
}

header.mobile > .side-menu.active > .mask {
  display: block;
  animation: fadeIn 0.3s ease;
}

header.mobile > .side-menu > nav {
  position: fixed;
  z-index: 1001;
  width: 22rem;
  height: 100vh;
  overflow: auto;
  transform: translateX(-100%);
  background-color: var(--color-theme-neutral850);
  color: var(--color-theme-white);
  transition: transform 0.3s ease-in-out, background-color 0.3s ease, color 0.3s ease;

  scrollbar-width: thin;
  scrollbar-color: var(--color-theme-neutral700) var(--background-dark);
}

header.mobile.light > .side-menu > nav {
  background-color: var(--color-theme-white);
  color: var(--color-theme-neutral850);
  scrollbar-color: var(--color-theme-neutral400) var(--background-light);
}

header.mobile > .side-menu.active > nav {
  transform: translateX(0);
}
header.mobile > .side-menu > nav > .header {
  height: var(--header-height-rem);
  display: flex;
  align-items: center;
}

header.mobile > .side-menu > nav > .header > .icon-button {
  height: 4rem;
  width: 3.5rem;
}

header.mobile > .side-menu > nav > .header > .icon-button:hover {
  background-color: var(--color-theme-neutral800);
}

header.mobile.light > .side-menu > nav > .header > .icon-button:hover {
  background-color: var(--color-theme-neutral200);
}

header.mobile > .side-menu > nav > .label {
  display: flex;
  align-items: center;
  gap: var(--spacing-200-rem);
  cursor: pointer;
  height: 4rem;
  padding: 0 var(--spacing-400-rem) 0 var(--spacing-700-rem);
}

header.mobile > .side-menu > nav > .label:hover {
  background-color: var(--color-theme-neutral900);
}

header.mobile.light > .side-menu > nav > .label:hover {
  background-color: var(--color-theme-neutral200);
}

header.mobile > .side-menu > nav > .dropdown.label > .dropdown-icon {
  transition: transform 0.3s ease;
}

header.mobile > .side-menu > nav > .dropdown.label.active {
  background-color: var(--background-dark-light);
}

header.mobile.light > .side-menu > nav > .dropdown.label.active {
  background-color: var(--color-theme-neutral200);
}

header.mobile > .side-menu > nav > .dropdown.label.active > .dropdown-icon {
  transform: rotateX(180deg);
}

header.mobile > .side-menu > nav > .label.language-selector-label > .content {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}

header.mobile > .side-menu > nav > .label.language-selector-label > .content > .icon {
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

header.mobile > .side-menu > nav > .dropdown.label > .dropdown-icon {
  display: flex;
}

header.mobile > .side-menu > nav > .dropdown-content {
  height: 0;
  overflow: hidden;
  display: flex;
  background-color: var(--color-theme-neutral800);
  flex-direction: column;
  gap: var(--spacing-600-rem);
  padding: 0 var(--spacing-400-rem) 0 var(--spacing-1200-rem);
  transition: height 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
}

header.mobile.light > .side-menu > nav > .dropdown-content {
  background-color: var(--color-theme-neutral200);
}

header.mobile > .side-menu > nav > .dropdown-content.active {
  padding: var(--spacing-400-rem) var(--spacing-400-rem) var(--spacing-400-rem) var(--spacing-1200-rem);
}

header.mobile > .side-menu > nav > .language-selector.active {
  height: 27.625rem;
}

header.mobile > .side-menu > nav > .dropdown-content > .group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200-rem);
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .title {
  color: var(--color-theme-neutral600);
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400-rem);
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .content > .text {
  font-size: var(--typography-body_large-rem);
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .content > .link.active > .text {
  color: var(--color-primary);
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .content > .link:hover > .text {
  color: var(--color-primary);
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .content > .link {
  display: flex;
  gap: var(--spacing-200-rem);
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .content > .link > .arrow-left {
  margin-left: var(--spacing-100-rem);
  transition: transform 0.3s ease;
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .content > .link:hover > .arrow-left {
  transform: translateX(0.25rem);
}

header.mobile > .side-menu > nav > .dropdown-content > .group > .content > .link > .icon > img {
  width: 1.5rem;
  height: 1.5rem;
}

header.mobile > .side-menu > nav > .solutions.active {
  height: 7.875rem;
}

header.mobile > .side-menu > nav > .services.active {
  height: 45.25rem;
}

/* ------------------------------  */
/* Solution Page */

main > .banner-2 {
  padding: calc(var(--header-height-rem) + var(--spacing-1200-rem)) var(--spacing-1200-rem) var(--spacing-2400-rem)
    var(--spacing-1200-rem);
  height: calc(38rem - var(--header-height-rem) - var(--spacing-2400-rem) - var(--spacing-1200-rem));
  position: relative;
  display: flex;
  flex-direction: column;
}

main > .banner-2::before {
  content: '';
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/global/public/images/f23941d-alpha-sig.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.6); /* 調整亮度 */
  z-index: -1;
}

@media (max-width: 768px) {
  main > .banner-2 {
    padding: calc(var(--header-height-rem) + var(--spacing-1200-rem)) var(--spacing-400-rem) var(--spacing-1200-rem)
      var(--spacing-400-rem);
    height: calc(34rem - var(--header-height-rem) - var(--spacing-1200-rem) - var(--spacing-1200-rem));
  }
}

main > .banner-2 > .breadcrumb {
  display: flex;
  color: var(--color-theme-white);
  padding: var(--spacing-200-rem) 0;
}

main > .banner-2 > .breadcrumb > .node {
  display: flex;
  align-items: center;
  font-size: var(--typography-label_large-rem);
}

main > .banner-2 > .breadcrumb > .node:hover {
  text-decoration: underline;
}

main > .banner-2 > .banner-span {
  font-size: var(--typography-herotitle_medium-rem);
  color: var(--color-theme-white);
  max-width: 42rem;
}

@media (max-width: 768px) {
  main > .banner-2 > .banner-span {
    font-size: var(--typography-headline_small-rem);
    max-width: unset;
  }
}

main > .banner-2 > .tag-group {
  margin-top: auto;
  display: flex;
  gap: var(--spacing-200-rem);
  flex-wrap: wrap;
}

main > .banner-2 > .tag-group > .tag {
  display: flex;
  align-items: center;
  color: var(--color-theme-white);
  border-radius: 2.5rem;
  padding: var(--spacing-200-rem) var(--spacing-300-rem);
  border: 1px solid var(--color-theme-white);
  backdrop-filter: blur(2px);

  transition: background 0.3s ease, border-color 0.3s ease;

  /* disable hover effect */
  cursor: default;
  pointer-events: none;
}

/* disable hover effect */
/* main > .banner-2 > .tag-group > .tag:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
} */

main > .block-tab-group {
  display: flex;
  height: 4rem;
  padding-left: var(--spacing-1200-rem);
  position: relative;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-theme-neutral400) var(--background-light);
}

@media (max-width: 768px) {
  main > .block-tab-group {
    padding-left: var(--spacing-400-rem);
  }
}

main > .block-tab-group.pin {
  position: fixed;
  display: none;
  top: var(--header-height-rem);
  min-width: 0;
}

main > .block-tab-group.pin.active {
  display: flex;
  width: calc(100% - var(--spacing-1200-rem));
  background: var(--background-light);
  z-index: 999;
}

@media (max-width: 768px) {
  main > .block-tab-group.pin.active {
    width: calc(100% - var(--spacing-400-rem));
  }
}

main > .block-tab-group::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-theme-neutral400);
}

main > .block-tab-group > .block-tab {
  padding: 0 var(--spacing-300-rem);
  color: var(--color-theme-neutral500);
  cursor: pointer;
  transition: color 0.3s ease-out;
  white-space: nowrap;
  position: relative;
  border-bottom: 1px solid var(--color-theme-neutral400);
}

main > .block-tab-group > .block-tab:hover {
  color: var(--color-theme-neutral850);
}

main > .block-tab-group > .block-tab.active {
  color: transparent;
  position: relative;
}

/* 防止因為文字變粗導致元素寬度變化 */
main > .block-tab-group > .block-tab.active::before {
  content: attr(active-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-theme-neutral850);
  font-weight: 400;
  z-index: -1;
  pointer-events: none;
  animation: fadeIn 0.2s ease;
}

main > .block-tab-group > .block-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  z-index: 1;
}

main > .block-wrapper {
  display: flex;
  flex-direction: row;
  grid-template-columns: 1fr 1fr;
  padding: var(--spacing-3000-rem) calc((100% - 1440px) / 2);
}

@media (max-width: 768px) {
  main > .block-wrapper {
    padding: var(--spacing-1600-rem) 0;
    /* grid-template-columns: 1fr; */
    flex-direction: column;
    gap: var(--spacing-1200-rem);
  }
}

main > .block-wrapper > .block {
  padding: 0 var(--spacing-1200-rem);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-1200-rem);
}

@media (max-width: 768px) {
  main > .block-wrapper > .block {
    padding: 0 var(--spacing-400-rem);
  }
}

main > .big-title > .block > .title {
  font-size: var(--typography-title_large-rem);
  color: var(--color-theme-neutral850);
  /* padding-bottom: var(--spacing-1200-rem); */
}

@media (max-width: 768px) {
  main > .big-title > .block > .title {
    font-size: var(--typography-subtitle_medium-rem);
  }
}

main > .block-wrapper > .block > .text {
  font-size: var(--typography-body_large-rem);
  color: var(--color-theme-neutral700);
}

@media (max-width: 768px) {
  main > .block-wrapper > .block > .text {
    font-size: var(--typography-body_small-rem);
  }
}

main > .block-wrapper > .block > .box-group {
  display: flex;
  gap: var(--spacing-1200-rem);
  flex-wrap: wrap;
}

main > .block-wrapper > .block > .box-group > .box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main > .block-wrapper > .block > .box-group > .box > .value {
  font-size: var(--typography-herotitle_large-rem);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  main > .block-wrapper > .block > .box-group > .box > .value {
    font-size: var(--typography-herotitle_small-rem);
  }
}

main > .block-wrapper > .block > .box-group > .box > .description {
  color: var(--color-theme-neutral850);
}

@media (max-width: 768px) {
  main > .block-wrapper > .block > .box-group > .box > .description {
    font-size: var(--typography-label_medium-rem);
  }
}

main > .bg-blue {
  background-color: var(--color-theme-blue100);
}

main > .bg-white {
  background-color: var(--color-theme-white);
}

main > .block-wrapper > .block > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 29.125rem;
}

main > .block-wrapper > .block > img.none {
  object-fit: none;
}

@media (max-width: 768px) {
  main > .block-wrapper > .block > img {
    max-height: 15rem;
    object-fit: cover;
  }

  main > .block-wrapper > .block > img.sm-contain {
    object-fit: contain;
  }
}

main > .small-title > .block > .title {
  font-weight: 400;
  color: var(--color-theme-neutral850);
  font-size: var(--typography-title_medium-rem);
}

@media (max-width: 768px) {
  main > .small-title > .block > .title {
    font-size: var(--typography-subtitle_small-rem);
  }
}

main > .small-title > .block > .text {
  font-size: var(--typography-subtitle_small-rem);
}

@media (max-width: 768px) {
  main > .small-title > .block > .text {
    font-size: var(--typography-body_small-rem);
  }
}

main > .block-wrapper > .block > .text-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-200-rem);
  /* transition: gap 0.3s ease; */
  cursor: pointer;
}

main > .block-wrapper > .block > .text-link:hover {
  text-decoration: underline;
  /* gap: var(--spacing-300-rem); */
}

main > .related-content {
  padding: var(--spacing-3000-rem) var(--spacing-1200-rem) var(--spacing-4000-rem) var(--spacing-1200-rem);
  display: flex;
  gap: var(--spacing-600-rem);
  flex-direction: column;
}

main > .block-wrapper > .block > .text-link > img,
main > .block-wrapper > .block > .text-link > svg {
  transition: transform 0.3s ease;
}

main > .block-wrapper > .block > .text-link:not(.blank):hover > img,
main > .block-wrapper > .block > .text-link:not(.blank):hover > svg {
  transform: translate(4px, 0);
}

main > .block-wrapper > .block > .text-link.blank > svg > .arrow-top-right {
  transition: transform 0.3s ease;
}

main > .block-wrapper > .block > .text-link.blank:hover > svg > .arrow-top-right {
  transform: translate(2px, -2px);
}

@media (max-width: 768px) {
  main > .related-content {
    padding: calc(var(--spacing-1600-rem) + var(--spacing-600-rem)) var(--spacing-400-rem) var(--spacing-1600-rem)
      var(--spacing-400-rem);
    gap: var(--spacing-400-rem);
  }
}

main > .related-content > .title {
  font-size: var(--typography-subtitle_small-rem);
  color: var(--color-theme-neutral850);
  font-weight: 400;
}

main > .related-content > .card-group {
  display: flex;
  gap: var(--spacing-1200-rem);
  overflow-x: auto;
  padding: var(--spacing-400-rem) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-theme-neutral400) var(--background-light);
}

@media (max-width: 768px) {
  main > .related-content > .card-group {
    flex-direction: column;
    gap: var(--spacing-600-rem);
  }
}

main > .related-content > .card-group > .card {
  display: flex;
  height: 12.5rem;
  min-width: min(30rem, 100%);
  max-width: 30rem;
  gap: var(--spacing-600-rem);
  cursor: pointer;
}

@media (max-width: 768px) {
  main > .related-content > .card-group > .card {
    height: 10rem;
    max-width: unset;
  }
}

main > .related-content > .card-group > .card > .image {
  overflow: hidden;
  max-width: 12.5rem;
  max-height: 12.5rem;
}

main > .related-content > .card-group > .card > .image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

main > .related-content > .card-group > .card:hover > .image > img {
  transform: scale(1.05);
}

main > .related-content > .card-group > .card:hover > .content > .title {
  text-decoration: underline;
}

main > .related-content > .card-group > .card > .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-300-rem);
}

main > .related-content > .card-group > .card > .content > .title {
  font-size: var(--typography-title_medium-rem);
  color: var(--color-theme-neutral850);
  font-weight: 400;
}

@media (max-width: 768px) {
  main > .related-content > .card-group > .card > .content > .title {
    font-size: var(--typography-subtitle_small-rem);
  }
}

main > .related-content > .card-group > .card > .content > .text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  color: var(--color-theme-neutral700);
}

@media (max-width: 768px) {
  main > .related-content > .card-group > .card > .content > .text {
    font-size: var(--typography-label_medium-rem);
  }
}

main > .related-content > .card-group > .card > .content > .link-group {
  margin-top: var(--spacing-300-rem);
  display: flex;
  gap: var(--spacing-200-rem);
}

main > .related-content > .card-group > .card > .content > .link-group > .pill-link {
  height: 2.25rem;
  padding: 0 var(--spacing-300-rem);
  background-color: var(--color-theme-blue100);
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: 1.375rem;
  transition: background-color 0.3s ease;

  /* disable hover effect */
  cursor: default;
  pointer-events: none;
}

/* disable hover effect */
/* main > .related-content > .card-group > .card > .content > .link-group > .pill-link:hover {
  background-color: var(--color-theme-blue200);
} */

main > .document-block {
  background-color: var(--color-theme-neutral850);
  padding: var(--spacing-1200-rem);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300-rem);
}

@media (max-width: 768px) {
  main > .document-block {
    padding: var(--spacing-600-rem) var(--spacing-400-rem);
  }
}

main > .document-block > .title {
  font-size: var(--typography-subtitle_small-rem);
  color: var(--color-theme-white);
}

main > .document-block > .content {
  padding: var(--spacing-300-rem) 0;
  display: flex;
  gap: var(--spacing-600-rem);
}

main > .document-block > .content > .document {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-100-rem);
  color: var(--color-theme-white);
  padding: var(--spacing-100-rem) var(--spacing-200-rem) var(--spacing-100-rem) var(--spacing-100-rem);
  border-radius: var(--spacing-700-rem);
  transition: background-color 0.3s ease;
}

main > .document-block > .content > .document:hover {
  background-color: var(--color-theme-neutral800);
}

main > .document-block > .content > .document:not(:last-child)::after {
  content: '';
  height: 1.5rem;
  width: 1px;
  background: var(--color-theme-neutral700);
  position: absolute;
  right: -0.75rem;
}

/* service page */
main > .banner-3 {
  padding: calc(var(--header-height-rem) + var(--spacing-1200-rem)) var(--spacing-1200-rem) var(--spacing-2400-rem)
    var(--spacing-1200-rem);
  height: calc(38rem - var(--header-height-rem) - var(--spacing-2400-rem) - var(--spacing-1200-rem));
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

@media (max-width: 768px) {
  main > .banner-3 {
    padding: calc(var(--header-height-rem) + var(--spacing-600-rem)) 0 0 0;
    height: unset;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
  }
}

main > .banner-3 > .block {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  main > .banner-3 > .block:not(.image-wrapper) {
    padding: 0 var(--spacing-400-rem);
  }
}

main > .banner-3 > .block > .breadcrumb {
  display: flex;
  color: var(--color-theme-neutral500);
  padding: var(--spacing-200-rem) 0;
}

main > .banner-3 > .block > .breadcrumb > .node {
  display: flex;
  align-items: center;
  font-size: var(--typography-label_large-rem);
}

main > .banner-3 > .block > .breadcrumb > .node:hover {
  text-decoration: underline;
}

main > .banner-3 > .block > .banner-span {
  font-size: var(--typography-headline_large-rem);
  color: #1e1e1e;
  max-width: 42rem;
}

@media (max-width: 768px) {
  main > .banner-3 > .block > .banner-span {
    font-size: var(--typography-headline_small-rem);
    max-width: unset;
  }
}

main > .banner-3 > .block > .tag-group {
  margin-top: auto;
  display: flex;
  gap: var(--spacing-200-rem);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  main > .banner-3 > .block > .tag-group {
    padding: var(--spacing-600-rem) 0;
  }
}

main > .banner-3 > .block > .tag-group > .tag {
  display: flex;
  align-items: center;
  color: var(--color-theme-neutral850);
  background: var(--color-theme-blue100);
  border-radius: 2.5rem;
  font-weight: 400;
  padding: var(--spacing-200-rem) var(--spacing-300-rem);
  transition: background 0.3s ease, border-color 0.3s ease;

  /* disable hover effect */
  cursor: default;
  pointer-events: none;
}

/* disable hover effect */
/* main > .banner-3 > .block > .tag-group > .tag:hover {
  background: var(--color-theme-blue200);
} */

main > .banner-3 > .block.image-wrapper {
  margin-left: auto;
  flex-direction: row;
  position: relative;
  width: calc(50% + 12.5rem);
}

@media (max-width: 768px) {
  main > .banner-3 > .block.image-wrapper {
    width: 100%;
  }
}

main > .banner-3 > .block.image-wrapper > img {
  width: 25rem;
  height: 25rem;
  object-fit: cover;
}

@media (max-width: 768px) {
  main > .banner-3 > .block.image-wrapper > img {
    width: 100%;
    height: 22.5rem;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  main > .banner-3 > .block.image-wrapper > .decorate {
    display: none;
  }
}

main > .banner-3 > .block.image-wrapper > .decorate > .shadow {
  width: 25rem;
  height: 25rem;
  position: absolute;
  background: var(--color-theme-blue100);
  z-index: -1;
  top: 2rem;
  left: 3rem;
}

main > .banner-3 > .block.image-wrapper > .decorate > img {
  position: absolute;
  left: 0;
  bottom: 0;
}

main > .card-1 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1200-rem);
}

main > .card-1 > .block > .title {
  font-size: var(--typography-title_large-rem);
  color: var(--color-theme-neutral850);
}

@media (max-width: 768px) {
  main > .card-1 > .block > .title {
    font-size: var(--typography-subtitle_medium-rem);
  }
}

main > .card-1 > .block > .box-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: unset;
}

@media (max-width: 768px) {
  main > .card-1 > .block > .box-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  main > .card-1 > .block > .box-group {
    grid-template-columns: 1fr;
  }
}

main > .card-1 > .block > .box-group > .box {
  background-color: var(--color-theme-white);
  padding: var(--spacing-600-rem);
  border: 1px solid var(--color-theme-neutral400);
  min-height: calc(17.5rem - var(--spacing-600-rem) * 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-400-rem);
}

@media (min-width: 760px) {
  main > .card-1 > .block > .box-group > .box:not(:last-child) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  main > .card-1 > .block > .box-group > .box {
    min-height: calc(15rem - var(--spacing-600-rem) * 2);
  }

  main > .card-1 > .block > .box-group > .box:nth-child(odd) {
    border-right: none;
  }

  main > .card-1 > .block > .box-group > .box:nth-child(n + 3) {
    border-top: none;
  }
}

@media (max-width: 600px) {
  main > .card-1 > .block > .box-group > .box {
    min-height: calc(10rem - var(--spacing-600-rem) * 2);
  }

  main > .card-1 > .block > .box-group > .box:nth-child(odd) {
    border-right: 1px solid var(--color-theme-neutral400);
  }

  main > .card-1 > .block > .box-group > .box:nth-child(n + 2) {
    border-top: none;
  }
}

main > .card-1 > .block > .box-group > .box > .title {
  color: var(--color-theme-neutral850);
  font-weight: 500;
}

main > .card-1 > .block > .box-group > .box > .description {
  color: var(--color-theme-neutral700);
}

main > .card-2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1200-rem);
}

main > .card-2 > .block > .title {
  font-size: var(--typography-title_large-rem);
  color: var(--color-theme-neutral850);
}

@media (max-width: 768px) {
  main > .card-2 > .block > .title {
    font-size: var(--typography-subtitle_medium-rem);
  }
}

main > .card-2 > .block > .box-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-1600-rem);
}

@media (max-width: 768px) {
  main > .card-2 > .block > .box-group {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-800-rem);
  }
}

main > .card-2 > .block > .box-group > .box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

main > .card-2 > .block > .box-group > .box > img {
  margin-bottom: var(--spacing-300-rem);
}

main > .card-2 > .block > .box-group > .box > .title {
  color: var(--color-theme-neutral850);
  font-weight: 400;
}

main > .card-2 > .block > .box-group > .box > .description {
  color: var(--color-theme-neutral700);
  margin-top: var(--spacing-200-rem);
}

main > .page-name {
  padding: calc(var(--header-height-rem) + var(--spacing-1600-rem)) var(--spacing-1200-rem) var(--spacing-1600-rem)
    var(--spacing-1200-rem);
  color: #1e1e1e;
  font-size: var(--typography-herotitle_medium-rem);
}

@media (max-width: 768px) {
  main > .page-name {
    padding: calc(var(--header-height-rem) + var(--spacing-1200-rem)) var(--spacing-400-rem) var(--spacing-1200-rem)
      var(--spacing-400-rem);
    font-size: var(--typography-headline_small-rem);
  }
}

main > .historical-evolution {
  padding: var(--spacing-600-rem) var(--spacing-1200-rem);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--spacing-600-rem);

  overflow-x: auto;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-theme-neutral400) var(--background-light);
}

@media (max-width: 768px) {
  main > .historical-evolution {
    padding: calc(var(--spacing-1600-rem) + var(--spacing-600-rem)) var(--spacing-400-rem);
    flex-direction: column;
  }
}

main > .historical-evolution > .box {
  min-width: 15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-600-rem);
  align-items: center;
  position: relative;
}

@media (max-width: 768px) {
  main > .historical-evolution > .box {
    flex-direction: row;
    align-items: flex-start;
  }
}

main > .historical-evolution > .box > .time {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  main > .historical-evolution > .box > .time {
    min-width: 4.5rem;
  }
}

@media (min-width: 769px) {
  main > .historical-evolution > .box::before {
    content: '';
    position: absolute;
    top: 3.125rem;
    height: 1px;
    background-color: var(--color-primary);

    left: calc(-1 * var(--spacing-300-rem));
    width: calc(50% + var(--spacing-300-rem) - 0.3125rem - 1px);
  }

  main > .historical-evolution > .box:first-child::before {
    left: calc(-1 * var(--spacing-1200-rem));
    width: calc(50% + var(--spacing-1200-rem) - 0.3125rem - 1px);
  }

  main > .historical-evolution > .box::after {
    content: '';
    position: absolute;
    top: 3.125rem;
    height: 1px;
    background-color: var(--color-primary);

    right: calc(-1 * var(--spacing-300-rem));
    width: calc(50% + var(--spacing-300-rem) - 0.3125rem - 1px);
  }

  main > .historical-evolution > .box:last-child::after {
    right: calc(-1 * var(--spacing-1200-rem));
    width: calc(50% + var(--spacing-1200-rem) - 0.3125rem - 1px);
  }
}

@media (max-width: 768px) {
  main > .historical-evolution > .box::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--spacing-300-rem));
    width: 1px;
    background-color: var(--color-primary);

    left: 6.375rem;
    height: calc(var(--spacing-300-rem));
  }

  main > .historical-evolution > .box:first-child::before {
    height: calc(var(--spacing-600-rem));
    top: calc(-1 * var(--spacing-600-rem));
  }

  main > .historical-evolution > .box::after {
    content: '';
    position: absolute;
    top: calc(0.3125rem * 2 + 2px);
    width: 1px;
    background-color: var(--color-primary);

    left: 6.375rem;
    height: calc(100% - 0.3125rem * 2 - 2px + var(--spacing-300-rem));
  }

  main > .historical-evolution > .box:last-child::after {
    height: calc(100% - 0.3125rem * 2 - 2px + var(--spacing-600-rem));
  }
}

main > .historical-evolution > .box > .pin {
  min-width: calc(0.3125rem * 2 + 1px);
  min-height: calc(0.3125rem * 2 + 1px);
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  background-color: var(--color-theme-white);
}

main > .historical-evolution > .box > .pin.solid {
  background-color: var(--color-primary);
}

main > .historical-evolution > .box > .time > .text {
  font-size: var(--typography-caption_medium-rem);
  color: var(--color-theme-neutral700);
}

@media (max-width: 768px) {
  main > .historical-evolution > .box > .time > .text {
    font-size: var(--typography-caption_small-rem);
  }
}

main > .historical-evolution > .box > .time > .text.strong {
  font-weight: 400;
}

main > .historical-evolution > .box > .description {
  display: flex;
  align-items: center;
}

main > .historical-evolution > .box > .description > .text {
  font-size: var(--typography-caption_medium-rem);
  color: var(--color-theme-neutral700);
  text-align: center;
}

@media (max-width: 768px) {
  main > .historical-evolution > .box > .description > .text {
    font-size: var(--typography-caption_small-rem);
    text-align: unset;
  }
}

main > .block-wrapper > .block > .news-group {
  display: flex;
  flex-direction: column;
}

main > .block-wrapper > .block > .news-group > .news {
  display: flex;
  width: calc(100% - var(--spacing-400-rem) * 2);
  padding: var(--spacing-600-rem) var(--spacing-400-rem);
  gap: var(--spacing-600-rem);
  align-items: center;
  border-bottom: 1px solid var(--color-theme-neutral400);
  transition: background-color 0.3s ease;
}

main > .block-wrapper > .block > .news-group > .news > .group > .icon-link > svg > .arrow-top-right {
  transition: transform 0.3s ease;
}

main > .block-wrapper > .block > .news-group > .news:hover > .group > .icon-link > svg > .arrow-top-right {
  transform: translate(2px, -2px);
}

main > .block-wrapper > .block > .news-group > .news:hover {
  background-color: var(--color-theme-neutral200);
}

main > .block-wrapper > .block > .news-group > .news > .left.group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200-rem);
}

main > .block-wrapper > .block > .news-group > .news > .group > .header {
  display: flex;
}
main > .block-wrapper > .block > .news-group > .news > .group > .header > .icon {
  margin-right: var(--spacing-200-rem);
}

main > .block-wrapper > .block > .news-group > .news > .group > .header > .text {
  color: var(--color-theme-neutral850);
  font-size: var(--typography-caption_medium-rem);
}

main > .block-wrapper > .block > .news-group > .news > .group > .header > .text.strong {
  font-weight: 400;
}

main > .block-wrapper > .block > .news-group > .news > .group > .body > .text {
  color: var(--color-theme-neutral700);
  font-size: var(--typography-caption_medium-rem);
}

main > .block-wrapper > .block.center {
  align-items: center;
  justify-content: center;
}

main > .block-wrapper > .block > .box-group-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

main > .block-wrapper > .block > .box-group-2 > .box {
  height: calc(15rem - var(--spacing-600-rem) * 2);
  padding: var(--spacing-600-rem);
  background-color: var(--color-theme-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-theme-neutral300);
  border-right: 1px solid var(--color-theme-neutral300);
}

main > .block-wrapper > .block > .box-group-2 > .box:nth-child(n + 3) {
  border-bottom: none;
}

main > .block-wrapper > .block > .box-group-2 > .box:nth-child(even) {
  border-right: none;
}

main > .block-wrapper > .block > .box-group-2 > .box > .title {
  color: var(--color-primary);
  font-size: var(--typography-headline_large-rem);
}

@media (max-width: 768px) {
  main > .block-wrapper > .block > .box-group-2 > .box > .title {
    font-size: var(--typography-headline_medium-rem);
  }
}

main > .block-wrapper > .block > .box-group-2 > .box > .description {
  color: var(--color-theme-neutral850);
  font-weight: 500;
}

@media (max-width: 768px) {
  main > .block-wrapper.mobile-reverse {
    flex-direction: column-reverse;
  }
}

#cookie-notice {
  display: none;

  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - var(--spacing-1200-rem) * 2);
  padding: var(--spacing-600-rem) var(--spacing-1200-rem);
  background-color: rgba(var(--color-theme-neutral900-rgb), 0.8);
  align-items: center;
  gap: var(--spacing-600-rem);
  z-index: 9999;
  backdrop-filter: blur(2px);
}

#cookie-notice.active {
  display: flex;
}

@media (max-width: 768px) {
  #cookie-notice {
    width: calc(100% - var(--spacing-400-rem) * 2);
    padding: var(--spacing-600-rem) var(--spacing-400-rem);
    gap: var(--spacing-200-rem);
    flex-direction: column;
    align-items: flex-start;
  }
}

#cookie-notice > .content {
  color: var(--color-theme-white);
  font-size: var(--typography-body_large-rem);
  font-weight: 200;
}

#cookie-notice > .content > .link {
  font-weight: 500;
  text-decoration: underline;
}

#cookie-notice > .accept-button {
  flex-shrink: 0;
  background-color: var(--color-primary);
  color: var(--color-theme-white);
  height: 2.5rem;
  padding: 0 var(--spacing-300-rem);
  border-radius: 2.5rem;
  border: none;
  transition: background-color 0.3s ease;
}

#cookie-notice > .accept-button:hover {
  background-color: var(--color-theme-blue400);
}

/* popup */
#popup-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: rgba(var(--color-theme-neutral900-rgb), 0.8);
  gap: var(--spacing-600-rem);
}

#popup-container:has(:not(:empty)) {
  padding: var(--spacing-600-rem) var(--spacing-1200-rem);
}

@media (max-width: 768px) {
  #popup-container:has(:not(:empty)) {
    padding: var(--spacing-600-rem) var(--spacing-400-rem);
  }
}

.popup-notice {
  width: calc(100% - var(--spacing-1200-rem) * 2);
  gap: var(--spacing-600-rem);
  z-index: 9999;
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.popup-notice.inactive {
  display: none;
}

@media (max-width: 768px) {
  .popup-notice {
    width: calc(100% - var(--spacing-400-rem) * 2);
    gap: var(--spacing-200-rem);
    flex-direction: column;
    align-items: flex-start;
  }
}

.popup-notice > .content {
  display: flex;
  flex-direction: column;
  color: var(--color-theme-white);
  font-size: var(--typography-body_small-rem);
  font-weight: 200;
}

.popup-notice > .content > .popup-row {
  display: flow-root;
}
.popup-notice > .content > .popup-row > .link {
  font-weight: 500;
  text-decoration: underline;
}

.popup-notice > .content > .popup-row > .email-group {
  display: inline-flex;
}

.popup-notice > .content > .popup-row > .popup-copy-btn {
  margin-left: var(--spacing-100-rem);
}

.popup-notice > .popup-accept-btn {
  flex-shrink: 0;
  background-color: var(--color-primary);
  color: var(--color-theme-white);
  height: 2.5rem;
  padding: 0 var(--spacing-300-rem);
  border-radius: 2.5rem;
  border: none;
  transition: background-color 0.3s ease;
}

.popup-notice > .popup-accept-btn:hover {
  background-color: var(--color-theme-blue400);
}