@font-face {
  font-family: 'Sora SemiBold';
  src: url('your-app-assets/fonts/Sora-SemiBold-subset.woff2') format('woff2'),
    url('your-app-assets/fonts/Sora-SemiBold-subset.woff') format('woff'),
    url('your-app-assets/fonts/Sora-SemiBold-subset.ttf') format('truetype');
}

@font-face {
  font-family: 'Sora Regular';
  src: url('your-app-assets/fonts/Sora-Regular-subset.woff2') format('woff2'),
    url('your-app-assets/fonts/Sora-Regular-subset.woff') format('woff'),
    url('your-app-assets/fonts/Sora-Regular-subset.ttf') format('truetype');
}

:root {
  --color-white: #ffffff;
  --color-dark-blue: #0c2445;
  --color-grey: #f2f2f2;
  --color-blue: #0e2d58;
  --color-violet: #7291f9;
  --color-red: #e94259;
  --color-yelow: #f5b333;
  --color-light-glue: #52c3fb;

  --font-size-h1: 64px;
  --font-line-h1: 110%;
  --fontfamily-h1: 'Sora SemiBold';
  --font-h1: var(--font-size-h1) / var(--font-line-h1) var(--fontfamily-h1);

  --font-size-numeric: 58px;
  --font-line-numeric: 115%;
  --fontfamily-numeric: 'Sora SemiBold';
  --font-numeric: var(--font-size-numeric) / var(--font-line-numeric)
    var(--fontfamily-numeric);

  --font-size-h2: 46px;
  --font-line-h2: 110%;
  --fontfamily-h2: 'Sora SemiBold';
  --font-h2: var(--font-size-h2) / var(--font-line-h2) var(--fontfamily-h2);

  --font-size-h3: 24px;
  --font-line-h3: 115%;
  --fontfamily-h3: 'Sora SemiBold';
  --font-h3: var(--font-size-h3) / var(--font-line-h3) var(--fontfamily-h3);

  --font-size-c1: 20px;
  --font-line-c1: 115%;
  --fontfamily-c1: 'Sora SemiBold';
  --font-c1: var(--font-size-c1) / var(--font-line-c1) var(--fontfamily-c1);

  --font-size-h4: 18px;
  --font-line-h4: 115%;
  --fontfamily-h4: 'Sora SemiBold';
  --font-h4: var(--font-size-h4) / var(--font-line-h4) var(--fontfamily-h4);

  --font-size-btn: 17px;
  --font-line-btn: 125%;
  --fontfamily-btn: 'Sora SemiBold';
  --font-btn: var(--font-size-btn) / var(--font-line-btn) var(--fontfamily-btn);

  --font-size-text: 17px;
  --font-line-text: 140%;
  --fontfamily-text: 'Sora Regular';
  --font-text: var(--font-size-text) / var(--font-line-text)
    var(--fontfamily-text);

  --font-size-c2: 16px;
  --font-line-c2: 115%;
  --fontfamily-c2: 'Sora SemiBold';
  --font-c2: var(--font-size-c2) / var(--font-line-c2) var(--fontfamily-c2);

  --font-size-c3: 14px;
  --font-line-c3: 115%;
  --fontfamily-c3: 'Sora SemiBold';
  --font-c3: var(--font-size-c3) / var(--font-line-c3) var(--fontfamily-c3);

  --font-size-small-text: 14px;
  --font-line-small-text: 115%;
  --fontfamily-small-text: 'Sora Regular';
  --font-small-text: var(--font-size-small-text) / var(--font-line-small-text)
    var(--fontfamily-small-text);

  --header-horizontal-paddding: 50px;

  --section-horizontal-paddding: 150px;
  /* --section-vertical-gap: 150px; */

  --header-height: 84px;

  --circle-offset-bottom: 0px;
  --circle-radius-min: 0px;
  --circle-radius-max: 0px;

  --main-delay: 150ms
  --main-animation: 200ms ease-in-out;
}

@media screen and (max-width: 1400px) {
  :root {
    --section-horizontal-paddding: 50px;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --section-horizontal-paddding: 20px;

    --header-horizontal-paddding: 20px;

    --header-height: 80px;
  }
}

@media screen and (max-width: 639px) {
  :root {
    --section-horizontal-paddding: 10px;

    --header-horizontal-paddding: 10px;

    --header-height: 60px;
  }
}