@font-face {
  font-family: "DIN 2014";
  src: url("../Fonts/DIN2014-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Root font size drives the whole layout (Locofy output uses rem for every
   width; 120rem = the Figma 1920px frame). Two regimes:
     • 1200px–1919px viewport: scale proportionally so the 120rem design
       fits exactly — no horizontal scroll, no fluid-vs-fixed fights.
     • ≥ 1920px: cap at 16px so the design doesn't blow up past its
       intended size on 4K displays.
     • < 1200px: font is fixed at 14px for readability; the layout stops
       scaling here and relies on the responsive overrides further below
       in index.css to stack two-col sections vertically, make images
       full-width, etc. */
html {
  font-size: 16px;
  box-sizing: border-box;
}
@media (min-width: 1200px) and (max-width: 1919px) {
  html { font-size: calc(100vw / 120); }
}
@media (max-width: 1199px) {
  html { font-size: 14px; }
}
*, *::before, *::after { box-sizing: inherit; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Cap and centre the full-bleed design on very wide screens so it doesn't
   stick to the right edge (Locofy's .home uses align-items: flex-end). */
.home {
  max-width: 120rem;
  margin-inline: auto;
}

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

:root {
  /* Common Style Variables */

  /* Color */
  --color-darkslateblue: #10235b;
  --color-deepskyblue: #37b5f4;
  --color-gainsboro-100: #e6e6e6;
  --color-gainsboro-200: #d9d9d9;
  --color-gainsboro-300: rgba(217, 217, 217, 0);
  --color-gray-100: #0e1729;
  --color-gray-200: rgba(0, 0, 0, 0.1);
  --color-gray-300: rgba(0, 0, 0, 0.15);
  --color-gray-400: rgba(255, 255, 255, 0.1);
  --color-silver: rgba(191, 191, 191, 0);
  --color-steelblue: #1f9cdb;
  --color-white: #fff;

  /* Gap */
  --gap-15: 0.937rem;
  --gap-16: 1rem;
  --gap-19: 1.187rem;
  --gap-20: 1.25rem;
  --gap-24: 1.5rem;
  --gap-100: 6.25rem;

  /* Padding */
  --padding-0: 0rem;
  --padding-01: 0;
  --padding-3: 0.187rem;
  --padding-10: 0.625rem;
  --padding-20: 1.25rem;
  --padding-40: 2.5rem;

  /* BorderRadius */
  --br-5: 5px;
  --br-15: 15px;
  --br-50: 50px;

  /* Font */
  --font-din-2014: "DIN 2014", "Archivo Black", Impact, sans-serif;
  --font-figtree: Figtree, system-ui, sans-serif;

  /* FontSize */
  --fs-18: 1.125rem;
  --fs-19: 1.187rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-64: 4rem;
  --fs-100: 6.25rem;

  /* Borders */
  --border-1: 1px solid var(--color-deepskyblue);

  /* WidthHeights */
  --height-2: 0.125rem;
  --height-12: 0.75rem;
  --height-16: 1rem;
  --height-19: 1.187rem;
  --height-22: 1.375rem;
  --height-48: 3rem;
  --height-56: 3.5rem;
  --height-72: 4.5rem;
  --height-720: 45rem;
  --width-24: 1.5rem;
  --width-72: 4.5rem;
  --width-632: 39.5rem;
  --width-653: 40.812rem;
  --width-667: 41.687rem;

  /* LineHeights */
  --lh-18: 1.125rem;
  --lh-22: 1.375rem;
  --lh-26: 1.625rem;
  --lh-32: 2rem;

  /* LetterSpacings */
  --ls-6: 6px;

  --left-0: 0rem;
  --left-20: 1.25rem;
  --top-0: 0rem;
  --top-20: 1.25rem;
}