/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.72rem, 0.8102rem + -0.1002vw, 0.7901rem);
  --step--1: clamp(0.8889rem, 0.8857rem + 0.0159vw, 0.9rem);
  --step-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.0446rem + 0.4018vw, 1.4063rem);
  --step-2: clamp(1.2656rem, 1.125rem + 0.7031vw, 1.7578rem);
  --step-3: clamp(1.4238rem, 1.2028rem + 1.1049vw, 2.1973rem);
  --step-4: clamp(1.6018rem, 1.2747rem + 1.6354vw, 2.7466rem);
  --step-5: clamp(1.802rem, 1.336rem + 2.3303vw, 3.4332rem);
  --step-6: clamp(2.0273rem, 1.3804rem + 3.2346vw, 4.2915rem);
  --step-7: clamp(2.2807rem, 1.3996rem + 4.4053vw, 5.3644rem);

  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --space-3xl: clamp(5rem, 4.7826rem + 1.087vw, 5.625rem);
  --space-4xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
  --space-5xl: clamp(7rem, 6.6957rem + 1.5217vw, 7.875rem);
  --space-6xl: clamp(8rem, 7.6522rem + 1.7391vw, 9rem);
  --space-7xl: clamp(9rem, 8.6087rem + 1.9565vw, 10.125rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 3.4348rem + 2.8261vw, 5.625rem);
  --space-3xl-4xl: clamp(5rem, 4.3913rem + 3.0435vw, 6.75rem);
  --space-4xl-5xl: clamp(6rem, 5.3478rem + 3.2609vw, 7.875rem);
  --space-5xl-6xl: clamp(7rem, 6.3043rem + 3.4783vw, 9rem);
  --space-6xl-7xl: clamp(8rem, 7.2609rem + 3.6957vw, 10.125rem);

  /* Custom pairs */
  --space-m-2xl: clamp(1.5rem, 0.4565rem + 5.2174vw, 4.5rem);
  --space-l-3xl: clamp(2rem, 0.7391rem + 6.3043vw, 5.625rem);
  --space-xl-4xl: clamp(3rem, 1.6957rem + 6.5217vw, 6.75rem);
  --space-2xl-5xl: clamp(4rem, 2.6522rem + 6.7391vw, 7.875rem);
}


/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|5|6|7|8|9,m-2xl|l-3xl|xl-4xl|2xl-5xl&g=s,l,xl,12 */

@font-face {
  font-family: "Mestre Bold";
  src: url("./assets/fonts/Mestre-Bold.woff") format("woff"),
  url("./assets/fonts/Mestre-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Mestre Body";
  src: url("./assets/fonts/Mestre-Medium.woff") format("woff"),
  url("./assets/fonts/Mestre-Medium.woff") format("woff2");
}


html,
body {
  height: 100%;
  margin: 0;
  background-color: #002c5d;
  font-size: 16px;
}

.container {
  height: 100%;
  background-image: url("./assets/bg-banner.jpg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row-container{
  display: flex;
  width: 768px;
  max-width: 768px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xl, 90px);
  padding: var(--space-2xl, 64px) var(--space-m, 24px);
  @media (max-width: 768px){
    gap: var(--space-xl, 48px);
  }
}
.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xl, 72px);
  align-self: stretch;

  @media (max-width: 768px){
    gap: var(--space-xl, 48px);
    width: 100%;
  }
}

.small-container{
  display: flex;
  max-width: 534px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-l, 36px);
  @media (max-width: 768px){
    width: 100%;
    gap: var(--space-m, 24px);
  }
}



h1 {
  color: white;
  font-family: "Mestre Bold";
  font-size: var(--step-5);
  font-style: normal;
  font-weight: 600;
  line-height: 105%; /* 57.75px */
  letter-spacing: -1.1px;
  margin: 0;
}

.contact-text {
  font-family: "Mestre Body";
  color: white;
  font-size: var(--step-1);
  font-style: normal;
  font-weight: 600;
  line-height: 27px; /* 122.727% */
  letter-spacing: -0.44px;

  & a{
    font-family: "Mestre Body";
    color: white;
    font-size: var(--step-1);
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: -0.44px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }
}

.tag-update{
  display: flex;
  padding: var(--space-3xs) var(--space-s);
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  background: #AAD4EC;
  font-family: "Mestre Body";
}

@media screen and (max-width: 768px) {
  .container {
    background-position: center;
    min-height: 100vh; /* Ensure minimum height on mobile */
  }

  .row-container {
    padding: var(--space-l, 32px) var(--space-s, 16px);
    gap: var(--space-l, 32px);
  }

  .content {
    gap: var(--space-l, 32px);
  }

  .small-container {
    gap: var(--space-m, 24px);
    padding: 0;
  }

  h1 {
    font-size: var(--step-4);
    letter-spacing: -0.8px;
  }

  .contact-text,
  .contact-text a {
    font-size: var(--step-0);
    line-height: 1.5;
  }

  .tag-update {
    padding: var(--space-2xs) var(--space-xs);
  }
}

@media screen and (max-width: 375px) {
  .row-container {
    padding: var(--space-m, 24px) var(--space-xs, 12px);
  }

  h1 {
    font-size: var(--step-3);
  }
}