@font-face {
    font-family: 'Roboto-Bold';
    src: url('fonts/Roboto-Bold.woff2') format('woff2'),
        url('fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('fonts/Roboto-Black.woff2') format('woff2'),
        url('fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-ExtraBold';
    src: url('fonts/Roboto-ExtraBold.woff2') format('woff2'),
        url('fonts/Roboto-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('fonts/Roboto-Light.woff2') format('woff2'),
        url('fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('fonts/Roboto-Medium.woff2') format('woff2'),
        url('fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-SemiBold';
    src: url('fonts/Roboto-SemiBold.woff2') format('woff2'),
        url('fonts/Roboto-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('fonts/Roboto-Thin.woff2') format('woff2'),
        url('fonts/Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}




:root {
  /* fonts */
  --font-roboto-bold: "Roboto-SemiBold";
  --font-roboto-regular:"Roboto-Regular";  
  --font-roboto-light:"Roboto-Light";

  /* font sizes */
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-xl: 20px;
  --font-size-17xl: 36px;
  --font-size-mini: 15px;
  --font-size-29xl: 48px;
  --font-size-xl-9: 20.9px;
  --font-size-lg-3: 18.3px;
  --font-size-5xl: 24px;
  --font-size-47xl: 66px;
  --font-size-18xl: 37px;
  --font-size-lg-8: 18.8px;
  --font-size-mid-9: 17.9px;
  --font-size-smi: 13px;

  /* Colors */
  --base-white: #fff;
  --color-black: #000;
  --color-yellowgreen-100: #a8d641;
  --black-black-70: #283646;
  --color-darkslategray-100: #0d3b5a;
  --color-gray-100: #222;
  --color-whitesmoke: #f2f2f2;
  --color-cornflowerblue: #2292df;
  --color-slategray-100: #7f848e;
  --black-black-30: #77808b;
  --color-dimgray: #535353;

  /* Gaps */
  --gap-181xl: 200px;
  --gap-xl: 20px;
  --gap-xl-9: 20.9px;
  --gap-21xl: 40px;
  --gap-7xl: 26px;
  --gap-0: 0px;
  --gap-base: 16px;
  --gap-2xs: 11px;
  --gap-41xl: 60px;
  --gap-3xs: 10px;
  --gap-36xl: 55px;
  --gap-lgi: 19px;
  --gap-51xl: 70px;
  --gap-26xl: 45px;
  --gap-12xl: 31px;
  --gap-6xl: 25px;
  --gap-9xl: 28px;

  /* Paddings */
  --padding-4xl: 23px;
  --padding-11xl: 30px;
  --padding-xl: 20px;
  --padding-78xl: 97px;
  --padding-mini: 15px;
  --padding-sm: 14px;
  --padding-base-5: 15.5px;
  --padding-3xl: 22px;
  --padding-29xl: 48px;
  --padding-5xl: 24px;
  --padding-2xs: 11px;
  --padding-97xl: 116px;
  --padding-5xs: 8px;
  --padding-81xl: 100px;
  --padding-71xl: 90px;

  /* Border radiuses */
  --br-8xs: 5px;
  --br-5xs: 8px;
  --br-3xs: 10px;
}



body {
  margin: 0;
  line-height: normal;
  font-family: var(--font-roboto-regular), sans-serif;
}

.popup-overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
}