@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;
}

/* Figma Styles of your File */
:root {
  /* Sizes */
  --max-content-width: 1392px;

  --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: #246bf0;
  --light-onprimary: #ffffff;
  --light-primarycontainer: #d3e2ff;
  --light-onprimarycontainer: #3a61a9;
  --light-inverseprimary: #6198ff;
  --light-secondary: #2e3040;
  --light-onsecondary: #ffffff;
  --light-secondarycontainer: #cfd4fa;
  --light-onsecondarycontainer: #2c3471;
  --light-tertiary: #d1f144;
  --light-ontertiary: #2e3040;
  --light-tertiarycontainer: #eef3d6;
  --light-ontertiarycontainer: #95ad2d;
  --light-surface: #f8f8ff;
  --light-onsurface: #3c3e4d;
  --light-onsurfacevariant: #696b7a;
  --light-surfacecontainerlowest: #f7faff;
  --light-surfacecontainerlow: #f2f3fa;
  --light-surfacecontainer: #eeeff8;
  --light-surfacecontainerhigh: #e6e7ee;
  --light-surfacecontainerhighest: #e0e1e8;
  --light-error: #e8475f;
  --light-onerror: #ffffff;
  --light-errorcontainer: #ffe4e8;
  --light-onerrorcontainer: #c4354d;
  --light-outline: #b9bac3;
  --light-outlinevariant: #dee0ef;
  --light-inversesurface: #2e3040;
  --light-inverseonsurface: #f8f8ff;
  --light-white: #ffffff;
  --dark-primary: #4988ff;
  --dark-onprimary: #ffffff;
  --dark-primarycontainer: #283a5c;
  --dark-onprimarycontainer: #83aeff;
  --dark-secondary: #c9cef9;
  --dark-onsecondary: #2d2e37;
  --dark-secondarycontainer: #3b3f61;
  --dark-onsecondarycontainer: #dde0f8;
  --dark-tertiary: #a6c12c;
  --dark-ontertiary: #2d2e37;
  --dark-tertiarycontainer: #50533f;
  --dark-onttertiarycontainer: #cfea5b;
  --dark-error: #fb5b73;
  --dark-onerror: #ffffff;
  --dark-errorcontainer: #5c3441;
  --dark-onerror-container: #ffb6c1;
  --dark-surface: #2c2d36;
  --dark-onsurface: #ecedf5;
  --dark-onsurfacevariant: #9e9fab;
  --dark-inverseprimary: #246bf0;
  --dark-inversesurface: #f8f8ff;
  --dark-inverseonsurface: #3c3e4d;
  --dark-surfacecontainerlowest: #2f303b;
  --dark-surfacecontainerlow: #31323d;
  --dark-surfacecontainer: #343541;
  --dark-surfacecontainerhigh: #393a47;
  --dark-surfacecontainerhighest: #424352;
  --dark-outline: #656774;
  --dark-outlinevariant: #3e434e;
  --fixed-primaryfixed: #246bf0;
  --fixed-onprimaryfixed: #ebf2ff;
  --fixed-onprimaryfixedvariant: #c1d7ff;
  --fixed-secondaryfixed: #2e3040;
  --fixed-onsecondaryfixed: #f3f3f4;
  --fixed-onsecondaryfixedvariant: #60637a;
  --fixed-tertiaryfixed: #d1f144;
  --fixed-ontertiaryfixed: #2e3040;
  --fixed-ontertiaryfixedvariant: #7c8d42;
  --linear-gradient-hover: linear-gradient(45deg, #248AF0, #A430E7);
  --linear-gradient-active: linear-gradient(
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.2)
  );
  --linear-gradient-lime: linear-gradient(
    134.11deg,
    rgba(209, 241, 68, 1) 0%,
    rgba(83, 242, 69, 1) 100%
  );
  --linear-gradient-blue: linear-gradient(45deg, #2C3471, #444D99);
  --added-bandec-gradient: radial-gradient(
    closest-side,
    rgba(207, 38, 43, 1) 0%,
    rgba(105, 19, 22, 1) 100%
  );
  --added-metro-gradient: radial-gradient(
    closest-side,
    rgba(179, 227, 81, 1) 0%,
    rgba(87, 157, 49, 1) 100%
  );
  --added-bpa-gradient: radial-gradient(
    closest-side,
    rgba(60, 74, 38, 1) 0%,
    rgba(86, 98, 58, 1) 100%
  );
  --added-transactionstate-completed: #10d05d;
  --added-master-card-gradient: radial-gradient(
    closest-side,
    rgba(57, 79, 89, 1) 0%,
    rgba(47, 47, 47, 1) 100%
  );
  --added-visa-gradient: radial-gradient(
    closest-side,
    rgba(50, 55, 155, 1) 0%,
    rgba(36, 40, 70, 1) 100%
  );
  --added-amex-gradient: radial-gradient(
    closest-side,
    rgba(38, 166, 209, 1) 0%,
    rgba(19, 90, 156, 1) 100%
  );

  /* Fonts */
  --display-display-large-font-family: Onest, sans-serif;
  --display-display-large-font-size: 57px;
  --display-display-large-line-height: 52px;
  --display-display-large-font-weight: 700;
  --display-display-large-font-style: normal;
  --display-display-medium-font-family: Onest, sans-serif;
  --display-display-medium-font-size: 45px;
  --display-display-medium-line-height: 44px;
  --display-display-medium-font-weight: 700;
  --display-display-medium-font-style: normal;
  --display-display-small-font-family: Onest, sans-serif;
  --display-display-small-font-size: 36px;
  --display-display-small-line-height: 34px;
  --display-display-small-font-weight: 700;
  --display-display-small-font-style: normal;
  --headline-headline-large-font-family: Onest, 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: Onest, sans-serif;
  --headline-headline-medium-font-size: 28px;
  --headline-headline-medium-line-height: 29px;
  --headline-headline-medium-font-weight: 700;
  --headline-headline-medium-font-style: normal;
  --headline-headline-small-font-family: Onest, sans-serif;
  --headline-headline-small-font-size: 24px;
  --headline-headline-small-line-height: 24px;
  --headline-headline-small-font-weight: 700;
  --headline-headline-small-font-style: normal;
  --title-title-large-font-family: Onest, sans-serif;
  --title-title-large-font-size: 22px;
  --title-title-large-line-height: 22px;
  --title-title-large-font-weight: 700;
  --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: Onest, sans-serif;
  --title-title-small-font-size: 14px;
  --title-title-small-line-height: 18px;
  --title-title-small-font-weight: 700;
  --title-title-small-font-style: normal;
  --body-body-large-font-family: Onest, sans-serif;
  --body-body-large-font-size: 16px;
  --body-body-large-line-height: 19px;
  --body-body-large-font-weight: 400;
  --body-body-large-font-style: normal;
  --body-body-medium-font-family: Onest, 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: Onest, sans-serif;
  --body-body-small-font-size: 12px;
  --body-body-small-line-height: 14px;
  --body-body-small-font-weight: 400;
  --body-body-small-font-style: normal;
  --label-label-large-font-family: Onest, sans-serif;
  --label-label-large-font-size: 14px;
  --label-label-large-line-height: 18px;
  --label-label-large-font-weight: 600;
  --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: Onest, sans-serif;
  --label-label-small-font-size: 11px;
  --label-label-small-line-height: 16px;
  --label-label-small-font-weight: 500;
  --label-label-small-font-style: normal;
  --label-label-xs-font-family: Onest, 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;
  --headline-headline-large-letter-spacing: -0.4px;
  --title-title-medium-letter-spacing: 0.1px;
  --label-label-medium-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);

}