@font-face {
  font-family: 'Dela Gothic One';
  src: url('../fonts/DelaGothicOne.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Variable.ttf') format('truetype');
  font-weight: 100 900; /* Specify the supported weight range */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-Variable.ttf') format('truetype');
  font-weight: 100 900; /* Specify the supported weight range */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gentium Book Basic';
  src: url('../fonts/Gentium-Book-Italic.ttf') format('truetype');
  font-weight: 100 900; /* Specify the supported weight range */
  font-style: normal;
  font-display: swap;
}

/* Figma Styles of your File */
:root {
  /* Sizes */
  --max-content-width: 2000px;
  --navigation-mobile-min-width: 256px;
  --navigation-mobile-max-width: 360px;

  --testimonial-card-width-desktop: 368px;
  --testimonial-slider-content-width-desktop: 1168px;

  --testimonial-card-width-mobile: 320px;
  --testimonial-slider-content-width-mobile: 1024px;

  --testimonial-card-height: 248px;
  --testimonial-card-gap: 32px;

  /* Colors */
  --light-primary: #2757dc;
  --light-onPrimary: #ffffff;
  --light-secondary: #293959;
  --light-onSecondary: #ffffff;
  --light-secondaryContainer: #e7edf9;
  --light-onSecondaryContainer: #2d3c5a;
  --light-tertiary: #ddff57;
  --light-surface: #fdfdff;
  --light-surfaceTransparent: rgb(253 253 255 / 0);
  --light-onSurface: #2a2b33;
  --light-onSurfaceVariant: #6b6b73;
  --light-surfaceContainerLow: #f2f3f7;
  --light-error: #e8475f;
  --light-outline: #9d9fb2;
  --light-outlineVariant: #dee0ef;
  --light-inverseSurface: #2a2b33;
  --light-inverseOnSurface: #fdfdff;
  --fixed-onPrimaryFixed: #ebf2ff;
  --fixed-onPrimaryFixedVariant: #c1d7ff;
  --fixed-secondaryFixed: #616688;
  --fixed-onSecondaryFixed: #f3f3f4;
  --fixed-onSecondaryFixedVariant: #a3a8d0;
  --fixed-tertiaryFixed: #ddff57;
  --fixed-whatsapp: #25d366;
  --fixed-phoneInputHover: rgba(0, 0, 0, 0.5);
  --fixed-phoneInputFocus: rgba(0, 0, 0, 0.2);
  --linear-gradientBlue: linear-gradient(
    107deg,
    #444df3 17.17%,
    #9730f2 87.07%
  );
  --linear-gradientDark: linear-gradient(
    103deg,
    #0c1b31 0%,
    #0d2e54 100%
  );
  --radial-gradientDark: radial-gradient(
    50.74% 60.92% at 50% 55.31%,
    #0d2e54 0%,
    #0c1b31 100%
  );

  /* Fonts */
  --display-display-large-font-family: 'Dela Gothic One', sans-serif;
  --display-display-large-font-size: 57px;
  --display-display-large-line-height: 52px;
  --display-display-large-font-weight: 400;
  --display-display-large-font-style: normal;
  --display-display-medium-font-family: 'Dela Gothic One', sans-serif;
  --display-display-medium-font-size: 45px;
  --display-display-medium-line-height: 44px;
  --display-display-medium-font-weight: 400;
  --display-display-medium-font-style: normal;
  --display-display-small-font-family: 'Dela Gothic One', sans-serif;
  --display-display-small-font-size: 36px;
  --display-display-small-line-height: 34px;
  --display-display-small-font-weight: 400;
  --display-display-small-font-style: normal;
  --display-display-small-letter-spacing: -1px;
  --headline-headline-large-font-family: 'Rubik', sans-serif;
  --headline-headline-large-font-size: 32px;
  --headline-headline-large-line-height: 32px;
  --headline-headline-large-font-weight: 700;
  --headline-headline-large-font-style: normal;
  --headline-headline-medium-font-family: 'Rubik', sans-serif;
  --headline-headline-medium-font-size: 28px;
  --headline-headline-medium-line-height: 28px;
  --headline-headline-medium-font-weight: 700;
  --headline-headline-medium-font-style: normal;
  --headline-headline-small-font-family: 'Rubik', sans-serif;
  --headline-headline-small-font-size: 24px;
  --headline-headline-small-line-height: 28px;
  --headline-headline-small-font-weight: 600;
  --headline-headline-small-font-style: normal;
  --title-title-large-font-family: 'Rubik', sans-serif;
  --title-title-large-font-size: 22px;
  --title-title-large-line-height: 22px;
  --title-title-large-font-weight: 600;
  --title-title-large-font-style: normal;
  --title-title-medium-font-family: 'Onest', sans-serif;
  --title-title-medium-font-size: 18px;
  --title-title-medium-line-height: 19px;
  --title-title-medium-font-weight: 700;
  --title-title-medium-font-style: normal;
  --title-title-small-font-family: 'Rubik', sans-serif;
  --title-title-small-font-size: 14px;
  --title-title-small-line-height: 19.6px;
  --title-title-small-font-weight: 600;
  --title-title-small-font-style: normal;
  --body-body-large-font-family: 'Rubik', sans-serif;
  --body-body-large-font-size: 16px;
  --body-body-large-line-height: 18px;
  --body-body-large-font-weight: 400;
  --body-body-large-font-style: normal;
  --body-body-medium-font-family: 'Rubik', sans-serif;
  --body-body-medium-font-size: 14px;
  --body-body-medium-line-height: 18px;
  --body-body-medium-font-weight: 400;
  --body-body-medium-font-style: normal;
  --body-body-small-font-family: 'Rubik', sans-serif;
  --body-body-small-font-size: 12px;
  --body-body-small-line-height: 14.4px;
  --body-body-small-font-weight: 400;
  --body-body-small-font-style: normal;
  --label-label-large-font-family: 'Rubik', sans-serif;
  --label-label-large-font-size: 14px;
  --label-label-large-line-height: 18px;
  --label-label-large-font-weight: 600;
  --label-label-large-medium-font-weight: 500;
  --label-label-large-font-style: normal;
  --label-label-medium-font-family: 'Onest', sans-serif;
  --label-label-medium-font-size: 12px;
  --label-label-medium-line-height: 13px;
  --label-label-medium-font-weight: 600;
  --label-label-medium-font-style: normal;
  --label-label-small-font-family: 'Rubik', sans-serif;
  --label-label-small-font-size: 10px;
  --label-label-small-line-height: 13px;
  --label-label-small-font-weight: 500;
  --label-label-small-font-style: normal;
  --label-label-xs-font-family: 'Rubik', sans-serif;
  --label-label-xs-font-size: 8px;
  --label-label-xs-line-height: 16px;
  --label-label-xs-font-weight: 500;
  --label-label-xs-font-style: normal;

  --body-body-large-letter-spacing: 0.5px;
  --body-body-medium-letter-spacing: 0.25px;
  --headline-headline-large-letter-spacing: -0.4px;
  --title-title-medium-letter-spacing: 0.1px;
  --label-label-medium-letter-spacing: 0.3px;

  /* Promo Banner Name */
  --promo-banner-name-font-family: 'Rubik', sans-serif;
  --promo-banner-name-font-size: 18px;
  --promo-banner-name-line-height: 21px;
  --promo-banner-name-font-weight: 600;
  --promo-banner-name-letter-spacing: -0.3px;

  /* Effects */
  --floating-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.5);
  --section-box-shadow: 0px 140px 112px -149px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 0.3s ease-in-out;
}