/* CSS Variables - Desktop defaults (grouped by section) */
:root {
  /* Global colors */
  --color-hero-text: #3B59FA;
  --color-body-text: rgba(25, 28, 29, 1);
  --color-page-bg: #ffffff;

  /* Secondary section colors */
  --color-bg-dark: rgba(35, 35, 41, 1);
  --color-primary-blue: rgba(28, 48, 180, 1);
  --color-card-bg: rgba(34, 56, 202, 1);
  --color-text-mint: rgba(208, 237, 213, 1);

  /* Tertiary section colors */
  --color-tertiary-title: rgba(18, 81, 46, 1);

  /* Fourth section colors */
  --color-fourth-bg: rgba(224, 235, 254, 1);
  --color-fourth-title: rgba(33, 51, 191, 1);

  /* Tertiary section background */
  --soft-green-to-white: linear-gradient(
    to top,
    rgba(214, 234, 209, 1) 2%,
    rgba(255, 255, 255, 1) 100%
  );

  /* Hero section font sizes */
  /* Original 1440px design based on vw */
  --font-size-hero-title: clamp(24px, 5.625vw, 81px);        /* 5.625vw at 1440px → 81px */
  --font-size-hero-subtitle: clamp(12px, 2.778vw, 40px);     /* 40px at 1440px screen (2.778vw) */

  /* Feature grid font sizes */
  --font-size-feature-grid-title: clamp(18.88px, 4.167vw, 60px); /* 60px at 1440px screen (4.167vw) */
  --font-size-card-title: clamp(16px, 1.597vw, 23px); /* 23px at 1440px screen */

  /* Secondary section font sizes */
  --font-size-secondary-section-title: clamp(18.88px, 4.167vw, 60px); /* 60px at 1440px screen (4.167vw) */
  /* These clamps were already vw-based; max now matches 1440px value */
  --font-size-secondary-section-text-first: clamp(12.48px, 1.597vw, 23px);  /* 1.597vw → 23px at 1440px screen */
  --font-size-secondary-section-text-second: clamp(12.48px, 1.55vw, 22.32px);
  /* Card text followed max(0.875rem, 1.75vw) originally */
  --font-size-secondary-card-text: clamp(12px, 1.597vw, 23px);              /* 1.597vw → 23px */
  --font-size-secondary-overlay: clamp(18.88px, 4.25vw, 61.2px);
  --font-size-secondary-number: clamp(24px, 5.5vw, 79.2px);                  /* 5.5vw → 79.2px */
  --font-size-secondary-number-large: clamp(28px, 6.2vw, 89.28px);           /* 6.2vw → 89.28px */
  --font-size-secondary-number-large-stat: clamp(28px, 6.2vw, 89.28px);
  --font-size-secondary-unit: clamp(16px, 4.8vw, 69.12px);                   /* 4.8vw → 69.12px */
  --font-size-secondary-stat-unit: clamp(16px, 2.22vw, 32px);

  /* Tertiary section font sizes (shares scales but has its own vars) */
  --font-size-tertiary-title: clamp(20px, 4.167vw, 60px); /* 60px at 1440px screen */
  --font-size-tertiary-subtitle: clamp(14px, 1.597vw, 23px); /* 23px at 1440px screen */
  --font-size-tertiary-grid-title: clamp(14px, 1.597vw, 23px); /* 23px at 1440px screen */
  --font-size-tertiary-grid-text: clamp(14px, 1.597vw, 23px);  /* 23px at 1440px screen */
  --font-size-tertiary-overlay-text: clamp(10px, 1.5vw, 22px); /* 1.5vw at 1440px → 22px, larger than before */

  /* Fourth section font sizes (desktop, 1440px base) */
  --font-size-fourth-title: clamp(24px, 4.167vw, 60px); /* 60px at 1440px screen (4.167vw) */
  --font-size-fourth-subtitle: clamp(13px, 1.597vw, 23px); /* 23px at 1440px screen */
  --font-size-fourth-grid-text: clamp(13px, 1.597vw, 23px);
  --font-size-fourth-overlay-text: clamp(8px, 1.25vw, 18px); /* 1.25vw at 1440px → 18px */

  /* Fifth section colors */
  --color-fifth-card-bg: rgba(243, 244, 255, 1);

  /* Fifth section font sizes (desktop, 1440px base) */
  --font-size-fifth-title: clamp(24px, 4.167vw, 60px);
  --font-size-fifth-card-text: clamp(14px, 1.597vw, 23px);

  /* Sixth section font sizes (desktop, 1440px base) */
  --font-size-sixth-title: clamp(24px, 4.167vw, 60px);
  --font-size-sixth-text: clamp(14px, 1.597vw, 23px);

  /* Seventh section font sizes (desktop, 1440px base) */
  --font-size-seventh-title: clamp(24px, 4.167vw, 60px);
  --font-size-seventh-text: clamp(14px, 1.597vw, 23px);

  /* Eighth section font sizes (desktop, 1440px base) */
  --font-size-eighth-title: clamp(24px, 4.167vw, 60px);
  --font-size-eighth-card-text: clamp(12px, 1.319vw, 19px); /* 19px at 1440px screen */

  /* Final section font sizes (desktop, 1440px base) */
  --font-size-final-text: clamp(12px, 1.111vw, 16px);
}

body {
  margin: 0;
  font-family: "Google Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 300;
  color: var(--color-body-text);
  background-color: var(--color-page-bg);
}

.p10a img {
  width: 100%;
  display: block;
}

.page {
  margin: 0 auto;
  max-width: 1440px;
  width: 100%;
  padding-block: 23px 100px;
  gap: 0;
  display:flex;
  flex-direction: column;
}

/* Give every top-level section inside .page the same top padding */
.page > section {
  /* 60px at 1440px screen */
  padding-top: clamp(32px, 4.167vw, 60px);
}

/* Hero section */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-hero-text);
  position: relative;
  aspect-ratio: 1392 / 800;
  margin: 0 clamp(0px, 1.6vw, 24px);
  width: calc(100% - (2 * clamp(0px, 1.6vw, 24px)));
  /* 70px at 1440px screen */
  padding-bottom: clamp(32px, 4.861vw, 70px);
}

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__title-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  column-gap: clamp(86.4px, 21vw, 302.4px);
  margin-right: clamp(30px, 2.083vw, 90px);
}

.hero__title {
  margin: 0;
  font-size: var(--font-size-hero-title);
  font-weight: 500;
}

.hero__title-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero__subtitle {
  position: absolute;
  top: 100%;
  margin: 0px auto 0px;
  text-align: right;
  font-size: var(--font-size-hero-subtitle);
  font-weight: 500;
}

/* Feature grid section */

.feature-grid {
  padding-inline: clamp(23px, 1.667vw, 24px);
  /* Match previous vertical gap between sections */
  padding-bottom: clamp(32px, 4.861vw, 70px); 
}

.feature-grid__title {
  font-size: var(--font-size-feature-grid-title);
  font-weight: 500;
  text-align: center;
}

.feature-grid__items {
  display: grid;
  margin-top: clamp(40px, 6.944vw, 100px);
  gap: clamp(10px, 1.597vw, 23px); /* 23px at 1440px screen */
}

.feature-card {
  padding: 8px 0;
}

.feature-card__image {
  border-radius: clamp(10px, 1.736vw, 25px); /* 25px at 1440px screen */
  overflow: hidden;
}

.feature-card__image img {
  border-radius: clamp(10px, 1.736vw, 25px);
}

.feature-card__title {
  margin-top: 20px;
  font-size: var(--font-size-card-title);
  font-weight: 500;
  line-height: 1.2;
}

/* Secondary section */

.secondary-section {
  background-color: var(--color-primary-blue);
  width: 100%;
  padding-top: clamp(30px, 4.063vw, 58px);
  /* Add bottom spacing within the blue background instead of using page gap */
  padding-bottom: clamp(32px, 4.861vw, 70px);
}

.secondary-section__block {
  display: flex;
  flex-direction: column;
}

.secondary-section__block--first {
  margin-bottom: clamp(60px, 6.944vw, 100px);
}

.secondary-section__title {
  font-size: var(--font-size-secondary-section-title);
  font-weight: 500;
  text-align: center;
  color: var(--color-text-mint);
  margin: 0;
}

.secondary-section__block--first .secondary-section__title {
  margin-bottom: clamp(60px, 6.944vw, 100px);
}

.secondary-section__block--second{
  max-width: 1157px;
  margin: 0 auto;
  width: 100%;
}

.secondary-section__block--second .secondary-section__title {
  margin-bottom: clamp(40px, 4.861vw, 70px);
}

.secondary-section__image {
  width: 100%;
  display: block;
}

.secondary-section__block--first .secondary-section__image {
  margin-bottom: clamp(40px, 5.903vw, 85px);
}

.secondary-section__text {
  font-size: var(--font-size-secondary-section-text-first);
  font-weight: 400;
  color: var(--color-text-mint);
  margin: 0 auto;
  width: 47.5%;
  text-align: center;
}

.secondary-section__block--first .secondary-section__text {
  margin-bottom: clamp(60px, 6.944vw, 100px);
}

.secondary-section__cards {
  display: flex;
  gap: 25px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.secondary-section__cards--first {
  justify-content: center;
  flex-wrap: wrap;
}

.secondary-section__cards--second {
  display: grid;
  grid-template-columns: repeat(3, clamp(0px, 25.625vw, 369px));
  column-gap: 25px;
  row-gap: 25px;
  justify-content: center;
  align-items: start;

}

.secondary-section__cards--second .secondary-card--no-bg {
  width: 100%;
  max-width: 369px;
  justify-self: center;
}

.secondary-section__cards--second .secondary-card__text {
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

.secondary-card {
  background-color: var(--color-card-bg);
  width: clamp(0px, 25.556vw, 368px);
  min-height: clamp(0px, 28.194vw, 406px);
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: clamp(10px, 1.736vw, 25px);
  overflow: hidden;
}

.secondary-card--no-bg {
  background-color: transparent;
  height: auto;
  width: 100%;
}

/* "Smooth by design" cards should NOT be rounded */
.secondary-section__cards--second .secondary-card--no-bg {
  border-radius: 0;
  overflow: visible;
}

.secondary-section__cards--second .secondary-card--no-bg .secondary-card__image,
.secondary-section__cards--second .secondary-card--no-bg .secondary-card__image img {
  border-radius: 0;
}

.secondary-card__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(5px, 0.75vw, 10px);
  flex-shrink: 0;
}

.secondary-card--second .secondary-card__content {
  position: relative;
  flex-direction: column;
  padding-bottom: clamp(5px, 0.75vw, 10.8px); /* 10.8px at 1440px screen */
}

.secondary-card--first .secondary-card__content {
  padding: clamp(20px, 2.778vw, 40px);
}



.secondary-card__content--centered {
  align-items: center;
  justify-content: center;
}

.secondary-card__text-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-secondary-overlay);
  font-weight: 500;
  color: var(--color-text-mint);
  z-index: 2;
}

.secondary-card--second .secondary-card__text-overlay {
  flex-direction: row;
  align-items: baseline;
}  

.secondary-card__number {
  line-height: 1;
  display: block;
  position: relative;
  font-size: 0;
}

.secondary-card--second .secondary-card__number {
  display: inline-block;
}

.secondary-card__digit {
  display: inline-block;
  position: relative;
  font-size: var(--font-size-secondary-number);
}

.secondary-card--second .secondary-card__digit {
  font-size: var(--font-size-secondary-number-large);
}

.secondary-card__digit--zero {
  position: relative;
}

.secondary-card__unit {
  line-height: 1;
  display: block;
  font-size: var(--font-size-secondary-unit);
}

.secondary-card__unit--inline {
  display: inline-block;
  margin-left: 0.2em;
}

.secondary-card__image {
  width: 100%;
  display: block;
}

.secondary-card__image--stat {
  border-radius: clamp(10px, 1.736vw, 25px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(96px, 10vw, 140px);
}

.secondary-card__stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-mint);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  position: relative;
}

.secondary-card__stat-number {
  font-size: var(--font-size-secondary-number-large-stat);
  line-height: 1;
}

.secondary-card__stat-unit {
  font-size: var(--font-size-secondary-stat-unit);
  line-height: 1;
  margin-top: clamp(-14px, -0.97vw, 0px);
  padding: clamp(2px, 0.139vw, 3px) clamp(0px, 0.694vw, 10px);
  border: clamp(2px, 0.139vw, 3px) solid var(--color-text-mint);
  border-radius: clamp(6px, 0.521vw, 10px);
  position: static;
}

.secondary-card__image--overlay {
  position: absolute;
  height: 30%;
  width: auto;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

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

.secondary-card__images-container {
  z-index: 2;
  position: absolute;
  top: clamp(-95px, calc(-45px - (50 * (100vw - 641px) / 799)), -45px);
  left: clamp(0px, 5.625vw, 81px);
}

.secondary-card__image--absolute {
  position: absolute;
  width: auto;
  height: auto;
  z-index: 1;
  top: clamp(0px, 2.639vw, 38px);
  pointer-events: none;
  display: block;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.secondary-card__image--absolute img {
  width: 100%;
  height: auto;
  display: block;
}

.secondary-card__image--right {
  margin-top: clamp(0px, 1.319vw, 19px);
  margin-left: clamp(0px, 5.625vw, 81px);
  width: clamp(0px, 8.264vw, 119px);
  z-index: 0;
}

.secondary-card__image--left {
  width: clamp(0px, 7.5vw, 108px); /* 108px at 1440px, minimum 0 */
  z-index: 1;
}

.secondary-section__cards--second .secondary-card--no-bg .secondary-card__image {
  margin-bottom: clamp(20px, 2.083vw, 30px);
}

.secondary-card--no-bg .secondary-card__image {
  margin-bottom: 0;
}

.secondary-card__text {
  font-size: var(--font-size-secondary-card-text);
  font-weight: 400;
  color: var(--color-text-mint);
  margin: 0;
  padding: 0 32px;
  text-align: center;
}
.secondary-section__cards--first .secondary-card__text:nth-child(2) {
  padding: 0 clamp(10px, 1.563vw, 24px);
}

.secondary-card.secondary-card--first .secondary-card__text:nth-child(2){
  padding-bottom: clamp(10px, 2.778vw, 40px);
}

.secondary-card--second {
  position: relative;
  justify-content: center;

}

.secondary-card--third {
  justify-content: center;
  gap: clamp(0px, 3.681vw, 53px); /* 53px gap at 1440px */
}

/* Tertiary section */

.tertiary-section {
  width: 100%;
  background: var(--soft-green-to-white);
  padding-bottom: clamp(32px, 4.861vw, 70px);
}

.tertiary-section__inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.tertiary-section__header {
  text-align: center;

}

.tertiary-section__title {
  font-size: var(--font-size-tertiary-title);
  font-weight: 500;
  margin: 0;
  color: var(--color-tertiary-title);
}

.tertiary-section__subtitle {
  margin: 0 auto;
  margin-top: max(16px, 1.111vw);
  font-size: var(--font-size-tertiary-subtitle);
  font-weight: 500;
  color: var(--color-tertiary-title);
  max-width: clamp(320px, 56.25vw, 810px);
  
}

.tertiary-section__image {
  width: 100%;
  display: block;
}

.tertiary-section__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(10px, 1.736vw, 25px);
}

.tertiary-section__image--1 {
  overflow: hidden;
}

.tertiary-section__image--1 img {
  width: 100%;
  border-radius: 0;
  object-position: left center;
}

/* 96px vertical space between first and second image at 1440px */
.tertiary-section__image--2 {
  margin-top: clamp(40px, 6.667vw, 96px); /* 6.667vw of 1440px → 96px */
}

.tertiary-section__content {
  /* 142px margins on a 1440px design → ~9.861vw */
  margin-inline: clamp(32px, 9.861vw, 142px);
}

.tertiary-section__title-secondary {
  /* 30px between second image and this title at 1440px */
  margin-top: clamp(16px, 2.083vw, 30px); /* 2.083vw of 1440px → 30px */
  margin-bottom: 0;
  text-align: center;
  font-size: var(--font-size-tertiary-grid-title);
  font-weight: 500;
  text-align: center;
}

.tertiary-section__grid {
  /* 98px between title-secondary and grid at 1440px */
  margin-top: clamp(40px, 6.806vw, 98px); /* 6.806vw of 1440px → 98px */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 121.8px row gap & 24px column gap at 1440px */
  row-gap: clamp(48px, 6.944vw, 100px);           /* 6.944vw of 1440px → 100px */
  column-gap: clamp(16px, 1.667vw, 24px);           /* 1.667vw of 1440px → 24px */
}

.tertiary-card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.736vw, 25px); /* 25px at 1440px screen */
}

.tertiary-card__image {
  border-radius: clamp(10px, 1.736vw, 25px);
  overflow: hidden;
  position: relative;
}

.tertiary-card__image img {
  width: 100%;
  height: auto;
  display: block;
}

.tertiary-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tertiary-card__overlay-text {
  font-size: var(--font-size-tertiary-overlay-text);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  max-width: 95%;
  margin: 0;
  background-color: rgba(34, 34, 34, 0.86);
  border-radius: clamp(10px, 1.042vw, 15px); /* 15px at 1440px screen */
  padding: 12.5px clamp(12px, 1.5vw, 20px);
}

/* Second card in the 2x2 grid: 215px top margin at 1440px (≈14.93vw) */
.tertiary-section__grid .tertiary-card:nth-child(2) {
  margin-top: clamp(80px, 14.93vw, 215px);
}

.tertiary-card__text {
  margin: 0;
  font-size: var(--font-size-tertiary-grid-text);
  font-weight: 500;
  text-align: left;
}

/* Fourth section */

.fourth-section {
  width: 100%;
  background-color: var(--color-fourth-bg);
  padding-top: max(80px, 5.556vw);
  padding-bottom: clamp(60px, 6.944vw, 100px);
}

.fourth-section__inner {
  margin: 0 auto;
  /* 142px at 1440px screen */
  padding-inline: clamp(24px, 9.861vw, 142px);
  display: flex;
  flex-direction: column;
}

.fourth-section__header {
  max-width: 1110px;
  margin: 0 auto;
  text-align: center;
}

.fourth-section__title {
  font-size: var(--font-size-fourth-title);
  font-weight: 500;
  margin: 0;
  color: var(--color-fourth-title);
}

.fourth-section__subtitle {
  /* 40.5px between title and subtitle at 1440px */
  margin-top: clamp(20px, 2.8125vw, 40.5px); /* 2.8125vw of 1440px → 40.5px */
  font-size: var(--font-size-fourth-subtitle);
  font-weight: 500;
  color: var(--color-fourth-title);
}

.fourth-section__hero {
  /* 70.5px below subtitle at 1440px */
  margin-top: clamp(32px, 4.8958vw, 70.5px); /* 4.8958vw of 1440px → 70.5px */
  position: relative;
}

.fourth-section__image {
  width: 100%;
  display: block;
}

.fourth-section__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(10px, 1.736vw, 25px);
}

.fourth-section__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(16px, 2.222vw, 32px);
  pointer-events: none;
}

.fourth-section__label {
  font-size: var(--font-size-fourth-grid-text);
  font-weight: 400;
  color: #ffffff;
  max-width: clamp(120px, 21.25vw, 306px);
}

.fourth-section__overlay-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 0.833vw, 12px);
  max-width: clamp(120px, 17.08vw, 246px);
  margin-right: clamp(32px, 4.17vw, 60px);
  margin-top: clamp(80px, 26.04vw, 375px); 
}
.fourth-section__label--left {
  margin-top: clamp(32px, 8.402vw, 121px);
  margin-left: clamp(16px, 4.652vw, 67px);

}

.fourth-section__badge-image {
  width: clamp(20px, 1.944vw, 28px);
  height: clamp(20px, 1.944vw, 28px);
  display: block;
}

.fourth-section__badge-image img {
  width: 100%;
  height: auto;
  display: block;
}

.fourth-section__body {
  /* 30px between hero image and this text at 1440px */
  margin-top: clamp(16px, 2.083vw, 30px); /* 2.083vw of 1440px → 30px */
  font-size: var(--font-size-fourth-grid-text);
  font-weight: 500;
  color: var(--color-body-text);
  text-align: center;
}

.fourth-section__grid {
  /* 80.5px between body text and grid at 1440px */
  margin-top: clamp(32px, 5.5903vw, 80.5px); /* 5.5903vw of 1440px → 80.5px */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 81.8px row gap & 27px column gap at 1440px */
  row-gap: clamp(32px, 5.6806vw, 81.8px);  /* 5.6806vw → 81.8px */
  column-gap: clamp(16px, 1.875vw, 27px);  /* 1.875vw → 27px */
}

.fourth-card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.083vw, 30px);
}

.fourth-card__image {
  border-radius: clamp(10px, 1.736vw, 25px);
  overflow: hidden;
  position: relative;
}

/* First card in grid has centered text overlay */
.fourth-card:first-child .fourth-card__image {
  position: relative;
}

.fourth-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: start;
  justify-content: center;
  padding: clamp(16px, 2.222vw, 32px);
  pointer-events: none;
}

.fourth-card__overlay-text {
  font-size: var(--font-size-fourth-overlay-text);
  font-weight: 500;
  color: #ffffff;
  text-align: left;
  max-width: clamp(50px, 17.778vw, 256px); /* 256px at 1440px screen */
  margin-top: clamp(48px, 21.181vw, 305px); /* 305px at 1440px screen */
  margin-left: clamp(0px, 0.694vw, 10px); /* 10px at 1440px screen */
  height: clamp(0px, 10.208vw, 147px); /* 147px at 1440px screen */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* First card overlay text should be black instead of white */
.fourth-card:first-child .fourth-card__overlay-text {
  color: var(--color-body-text);
}

.fourth-card__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Third card image with background color */
.fourth-card:nth-child(3) .fourth-card__image {
  background-color: rgba(209, 223, 244, 1);
}

.fourth-card__text {
  margin: 0;
  font-size: var(--font-size-fourth-grid-text);
  font-weight: 500;
  color: var(--color-body-text);
  text-align: left;
}

/* Fifth section */

.fifth-section {
  width: 100%;
  padding-top: max(80px, 5.556vw);
  padding-bottom: clamp(32px, 4.861vw, 70px);
}

.fifth-section__inner {
  margin: 0 auto;
  padding-inline: clamp(24px, 9.375vw, 135px);
  display: flex;
  flex-direction: column;
}

.fifth-section__title {
  font-size: var(--font-size-fifth-title);
  font-weight: 500;
  margin: 0;
  text-align: center;
  color: var(--color-body-text);
}

.fifth-section__cards {
  /* 74.5px between title and cards at 1440px */
  margin-top: clamp(32px, 5.1736vw, 74.5px); /* 5.1736vw of 1440px → 74.5px */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3.0556vw, 44px); /* 3.0556vw of 1440px → 44px */
}

.fifth-card {
  background-color: var(--color-fifth-card-bg);
  /* 562px × 304px at 1440px */
  width: clamp(240px, 39.0278vw, 562px);  /* 39.0278vw → 562px */
  min-height: clamp(200px, 21.111vw, 304px);  /* 21.111vw → 304px */
  height: auto;
  /* 20px margin top at 1440px */
  padding: 0;
  border-radius: clamp(10px, 1.736vw, 25px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.389vw, 20px) clamp(24px, 4.444vw, 64px) clamp(24px, 4.444vw, 64px);
}

.fifth-card__image {
  /* 61px wide at 1440px */
  aspect-ratio: 61 / 67;  
  width: clamp(30px, 4.2361vw, 61px); /* 4.2361vw of 1440px → 61px */
  height: clamp(33px, 4.6528vw, 67px); /* 4.6528vw of 1440px → 67px */
  /* Ensure image keeps aspect ratio — do not crop or stretch */
  display: flex;
  justify-content: center;
  align-items: center;
}

.fifth-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* changed from cover to contain to avoid cropping */
  display: block;
}

.fifth-card__text {
  /* 14px gap between image and text at 1440px */
  margin-top: clamp(8px, 0.9722vw, 14px); /* 0.9722vw → 14px */
  font-size: var(--font-size-fifth-card-text);
  font-weight: 500;
  color: var(--color-body-text);
  text-align: left;
  flex: 1;
}

/* Sixth section */

.sixth-section {
  width: 100%;
  padding-top: clamp(20px, 2.083vw, 30px);
  padding-bottom: clamp(40px, 3.4722vw, 50px);
}

.sixth-section__inner {
  margin: 0 auto;
  /* 142px margins left/right at 1440px */
  margin-inline: clamp(24px, 9.8611vw, 142px); /* 9.8611vw of 1440px → 142px */
  display: flex;
  flex-direction: column;
}

.sixth-section__title {
  font-size: var(--font-size-sixth-title);
  font-weight: 500;
  margin: 0 auto;
  text-align: center;
  color: var(--color-body-text);
  width: fit-content;
}

.sixth-section__image {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 50px between title and image at 1440px */
  margin-top: clamp(20px, 3.4722vw, 50px); /* 3.4722vw of 1440px → 50px */
  /* 1156px × 638px container at 1440px */
  width: clamp(280px, 80.2778vw, 1156px); /* 80.2778vw of 1440px → 1156px */
  height: clamp(200px, 44.3056vw, 638px); /* 44.3056vw of 1440px → 638px */
  background-color: rgba(236, 237, 255, 1);
  border-radius: clamp(10px, 1.736vw, 25px);
}

.sixth-section__image img {
  /* 802px × 640px image at 1440px */
  width: clamp(200px, 55.6944vw, 802px); /* 55.6944vw of 1440px → 802px */
  height: clamp(160px, 44.4444vw, 640px); /* 44.4444vw of 1440px → 640px */
  object-fit: contain;
  display: block;
}

.sixth-section__text {
  /* 30px between image and text at 1440px */
  margin-top: clamp(16px, 2.2vw, 30px); /* 2.0833vw of 1440px → 30px */
  font-size: var(--font-size-sixth-text);
  font-weight: 500;
  color: var(--color-body-text);
  text-align: center;
}

/* Seventh section */

.seventh-section {
  width: 100%;
  padding-top: clamp(20px, 2.083vw, 30px);
  padding-bottom: clamp(40px, 3.4722vw, 50px);
}

.seventh-section__inner {
  margin: 0 auto;
  /* 142px margins left/right at 1440px */
  margin-inline: clamp(24px, 9.8611vw, 142px); /* 9.8611vw of 1440px → 142px */
  display: flex;
  flex-direction: column;
}

.seventh-section__title {
  font-size: var(--font-size-seventh-title);
  font-weight: 500;
  margin: 0 auto;
  text-align: center;
  color: var(--color-body-text);
  width: fit-content;
}

.seventh-section__images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.1111vw, 16px);
  /* 50px between title and images at 1440px */
  margin-top: clamp(20px, 3.4722vw, 50px); /* 3.4722vw of 1440px → 50px */
}

.seventh-section__image {
  display: block;
  border-radius: clamp(10px, 1.736vw, 25px);
  overflow: hidden;
}

.seventh-section__image--first {
  /* 466px × 578px at 1440px */
  width: clamp(200px, 32.3611vw, 466px); /* 32.3611vw of 1440px → 466px */
  height: clamp(200px, 40.1389vw, 578px); /* 40.1389vw of 1440px → 578px */
}

.seventh-section__image--second,
.seventh-section__image--third {
  /* 321px × 578px at 1440px */
  width: clamp(150px, 22.2917vw, 321px); /* 22.2917vw of 1440px → 321px */
  height: clamp(200px, 40.1389vw, 578px); /* 40.1389vw of 1440px → 578px */
}

.seventh-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.seventh-section__text {
  /* 30px between images and text at 1440px */
  margin-top: clamp(16px, 2.2vw, 30px); /* 2.2vw of 1440px → 30px */
  font-size: var(--font-size-seventh-text);
  font-weight: 500;
  color: var(--color-body-text);
  text-align: center;
}

/* Eighth section */

.eighth-section {
  width: 100%;
  padding-top: clamp(20px, 2.083vw, 30px);
  padding-bottom: clamp(40px, 3.4722vw, 50px);
}

.eighth-section__inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eighth-section__title {
  font-size: var(--font-size-eighth-title);
  font-weight: 500;
  margin: 0 auto;
  text-align: center;
  color: var(--color-body-text);
  width: fit-content;
  max-width: clamp(0px, 80.28vw, 1156px);
}

.eighth-section__cards {
  display: flex;
  gap: clamp(12px, 1.7361vw, 25px); /* 1.7361vw of 1440px → 25px */
  /* 50px between title and cards at 1440px */
  margin-top: clamp(20px, 3.4722vw, 50px); /* 3.4722vw of 1440px → 50px */
}

.eighth-card {
  /* 564px × 228px at 1440px */
  width: clamp(280px, 39.1667vw, 564px); /* 39.1667vw of 1440px → 564px */
  height: clamp(180px, 15.8333vw, 228px); /* 15.8333vw of 1440px → 228px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.222vw, 32px);
  background-color: rgba(236, 237, 255, 1);
  border-radius: clamp(10px, 1.736vw, 25px);
}

.eighth-card__image {
  display: block;
  flex-shrink: 0;
}

.eighth-card--left .eighth-card__image {
  /* 270px × 39px at 1440px */
  width: clamp(150px, 18.75vw, 270px); /* 18.75vw of 1440px → 270px */
  height: clamp(20px, 2.7083vw, 39px); /* 2.7083vw of 1440px → 39px */
}

.eighth-card--right .eighth-card__image {
  /* 223px × 30px at 1440px */
  width: clamp(120px, 15.4861vw, 223px); /* 15.4861vw of 1440px → 223px */
  height: clamp(15px, 2.0833vw, 30px); /* 2.0833vw of 1440px → 30px */
}

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

.eighth-card__text {
  /* Content max width: 328px at 1440px */
  max-width: clamp(200px, 22.7778vw, 328px); /* 22.7778vw of 1440px → 328px */
  margin-top: clamp(12px, 1.5vw, 22px);
  font-size: var(--font-size-eighth-card-text);
  font-weight: 400;
  color: var(--color-body-text);
  text-align: center;
}

.eighth-card--right .eighth-card__text {
  /* Content max width: 380px at 1440px */
  max-width: clamp(220px, 26.3889vw, 380px); /* 26.3889vw of 1440px → 380px */
}

/* Final section */

.final-section {
  width: 100%;
  padding-top: clamp(20px, 2.083vw, 30px);
  padding-bottom: clamp(40px, 3.4722vw, 50px);
}

.final-section__inner {
  margin: 0 auto;
  /* 1320px text width at 1440px = 60px margin on each side */
  margin-inline: clamp(24px, 4.1667vw, 60px); /* 4.1667vw of 1440px → 60px */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-section__text {
  font-size: var(--font-size-final-text);
  font-weight: 400;
  color: #9aa0a6;
  text-align: center;
  margin: 0;
}