:root {
    /* border-width */
    --border-width-0 : 0px;
    --border-width-1 : 1px;
    --border-width-2 : 2px;
    --border-width-3 : 3px;
    --border-width-4 : 4px;
    --border-width-6 : 6px;
    /* border-radius */
    --border-radius-none : 0px;
    --border-radius-xs : 4px;
    --border-radius-sm : 8px;
    --border-radius-md : 12px;
    --border-radius-lg : 16px;
    --border-radius-xl : 20px;
    --border-radius-2xl : 24px;
    --border-radius-full : 9999px;
    /* spacing */
    --spacing-0 : 0px;
    --spacing-2 : 2px;
    --spacing-4 : 4px;
    --spacing-6 : 6px;
    --spacing-8 : 8px;
    --spacing-10 : 10px;
    --spacing-12 : 12px;
    --spacing-16 : 16px;
    --spacing-20 : 20px;
    --spacing-24 : 24px;
    --spacing-32 : 32px;
    --spacing-40 : 40px;
    --spacing-48 : 48px;
    --spacing-56 : 56px;
    --spacing-64 : 64px;
    --spacing-72 : 72px;
    --spacing-80 : 80px;
    --spacing-96 : 96px;
    --spacing-72 : 72px;
    --spacing-80 : 80px;
    --spacing-96 : 96px;
    --spacing-120 : 120px;
    --spacing-140 : 140px;
}
/* colors */
:root {
  /* White Shades */
  --white-1000: #FFFFFF; /* White 1000 */
  --white-900:  rgba(255, 255, 255, 0.90);
  --white-800:  rgba(255, 255, 255, 0.80);
  --white-700:  rgba(255, 255, 255, 0.70);
  --white-600:  rgba(255, 255, 255, 0.60);
  --white-500:  rgba(255, 255, 255, 0.50);
  --white-400:  rgba(255, 255, 255, 0.40);
  --white-300:  rgba(255, 255, 255, 0.30);
  --white-200:  rgba(255, 255, 255, 0.20);
  --white-100:  rgba(255, 255, 255, 0.10);
  --white-50:   rgba(255, 255, 255, 0.05);

 /* BLACK Shades */

  --black-1000: rgba(9, 9, 11, 0.96);
  --black-900:  rgba(9, 9, 11, 0.90);
  --black-800:  rgba(9, 9, 11, 0.80);
  --black-700:  rgba(9, 9, 11, 0.70);
  --black-600:  rgba(9, 9, 11, 0.60);
  --black-500:  rgba(9, 9, 11, 0.50);
  --black-400:  rgba(9, 9, 11, 0.40);
  --black-300:  rgba(9, 9, 11, 0.30);
  --black-200:  rgba(9, 9, 11, 0.20);
  --black-100:  rgba(9, 9, 11, 0.10);
  --black-50:   rgba(9, 9, 11, 0.05);

 /* GRAY Shades */

  --gray-1000: #060D14;
  --gray-900:  #1F262C;
  --gray-800:  #394046;
  --gray-700:  #52585F;
  --gray-600:  #6B7177;
  --gray-500:  #84898F;
  --gray-400:  #C4C7CC;
  --gray-300:  #DADDE0;
  --gray-200:  #E8EAED;
  --gray-100:  #F2F4F7;
  --gray-50:   #FAFBFC;

/* SLAT Shades */

  --slat-1000: #041527;
  --slat-900:  #152232;
  --slat-800:  #253244;
  --slat-700:  #37465B;
  --slat-600:  #425166;
  --slat-500:  #4E5D73;
  --slat-400:  #CED3D9;
  --slat-300:  #DCE0E5;
  --slat-200:  #EAEDF1;
  --slat-100:  #F2F4F7;
  --slat-50:   #FAFBFC;

/* BLUE Shades */

  --blue-1000: #07132E;
  --blue-900:  #0A1D47;
  --blue-800:  #0A2869;
  --blue-700:  #06369E;
  --blue-600:  #0C3CC4;
  --blue-500:  #155DFC;
  --blue-400:  #9EBCFF;
  --blue-300:  #C7D8FF;
  --blue-200:  #DEE8FF;
  --blue-100:  #EDF2FC;
  --blue-50:   #FAFBFF;


/* LIGHT BLUE Shades */

  --light-blue-1000: #041027;
  --light-blue-900:  #112748;
  --light-blue-800:  #0A4589;
  --light-blue-700:  #0768CF;
  --light-blue-600:  #007BE5;
  --light-blue-500:  #0D99FF;
  --light-blue-400:  #80CAFF;
  --light-blue-300:  #BDE3FF;
  --light-blue-200:  #DBEEFC;
  --light-blue-100:  #F2F9FF;
  --light-blue-50:   #FAFDFF;

/* GREEN Shades */

  --green-1000: #0A2019;
  --green-900:  #00381E;
  --green-800:  #01562E;
  --green-700:  #008043;
  --green-600:  #009951;
  --green-500:  #14AE5C;
  --green-400:  #84E0A3;
  --green-300:  #AFF3C6;
  --green-200:  #CFF7DA;
  --green-100:  #EBFFEE;
  --green-50:   #F5FFF6;


/* YELLOW Shades */

  --yellow-1000: #322000;
  --yellow-900:  #674100;
  --yellow-800:  #966400;
  --yellow-700:  #EBAC00;
  --yellow-600:  #FAC505;
  --yellow-500:  #FFD71D;
  --yellow-400:  #FFE166;
  --yellow-300:  #FFE98E;
  --yellow-200:  #FFF3C2;
  --yellow-100:  #FFFBEB;
  --yellow-50:   #FFFDF5;


/* ORANGE Shades */

  --orange-1000: #2E1500;
  --orange-900:  #6D3200;
  --orange-800:  #984F06;
  --orange-700:  #DE8212;
  --orange-600:  #F2941A;
  --orange-500:  #FFAE3D;
  --orange-400:  #FFC36E;
  --orange-300:  #FCD19C;
  --orange-200:  #FFE0C2;
  --orange-100:  #FFF4E5;
  --orange-50:   #FFFBF5;


/* RED Shades */

  --red-1000: #280000;
  --red-900:  #4B0909;
  --red-800:  #810B0B;
  --red-700:  #C90007;
  --red-600:  #DB1C26;
  --red-500:  #F1343D;
  --red-400:  #FF9EA3;
  --red-300:  #FFC9CC;
  --red-200:  #FCDDDF;
  --red-100:  #FFF0F1;
  --red-50:   #FFF5F5;


/* PINK Shades */

  --pink-1000: #27020B;
  --pink-900:  #4E0314;
  --pink-800:  #7E051F;
  --pink-700:  #C20635;
  --pink-600:  #D91A43;
  --pink-500:  #F73558;
  --pink-400:  #FF9EB0;
  --pink-300:  #FFC9D3;
  --pink-200:  #FCDDE3;
  --pink-100:  #FFF0F3;
  --pink-50:   #FFF5F7;

}

:root {
  /* Font Families & Weights */
  --font-family-inter: 'Inter', sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* Titles */
.title-x-large {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 64px;
  line-height: 70px;
  letter-spacing: -0.03em; /* -3% */
  /* Usage: Main screen title, only once per screen */
}

.title-large {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -0.03em;
  /* Usage: Split screen into sections */
}

.title-medium {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.02em; /* -2% */
  /* Usage: Organize info within categories */
}

.title-small {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.02em;
  /* Usage: Handle substantial content */
}

.title-x-small {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 24px;
  line-height: 26px;
  letter-spacing: -0.02em;
  /* Usage: (Need description) */
}

.title-2x-small {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-bold);
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -0.02em;
  /* Usage: (Need description) */
}

/* Body Large */
.body-large-regular {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-regular);
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

.body-large-medium {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

.body-large-semibold {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

/* Body Medium */
.body-medium-regular {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-regular);
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

.body-medium-medium {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

.body-medium-semibold {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-semibold);
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

/* Body Base */
.body-base-regular {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-regular);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

.body-base-medium {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

.body-base-semibold {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-semibold);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

/* Body Small */
.body-small-regular {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-regular);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

.body-small-medium {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

.body-small-semibold {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.01em;
  /* Usage: (Need description) */
}

/* Body XSmall */
.body-xsmall-regular {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-regular);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0em;
  /* Usage: (Need description) */
}

.body-xsmall-medium {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0em;
  /* Usage: (Need description) */
}

.body-xsmall-semibold {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0em;
  /* Usage: (Need description) */
}

/* Caption */
.caption-regular {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-regular);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0em;
  /* Usage: (Need description) */
}

.caption-medium {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-medium);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0em;
  /* Usage: (Need description) */
}

.caption-semibold {
  font-family: var(--font-family-inter);
  font-weight: var(--weight-semibold);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0em;
  /* Usage: (Need description) */
}

footer {background-position:center 0px; background-repeat:no-repeat; background-size:cover; border-top:var(--border-width-1) solid var(--black-50); position:relative;}
footer::before {content:""; background-image:url(../img/BACK.svg); background-position:center 0px; background-repeat:no-repeat; background-size:cover; transform:rotate(180deg); width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:-1;}
.text-gray {color:var(--gray-1000);}

/*mobile version*/
@media(max-width:992px){
.title-x-large {font-size:38px; line-height:48px;}
.title-large {font-size:32px; line-height:38px;}
.title-medium {font-size:28px; line-height:34px;}
.title-small {font-size:26px; line-height:32px;}
.title-x-small {font-size:20px; line-height:24px;}
.title-2x-small {font-size:18px; line-height:22px;}
.body-large-regular {font-size:18px; line-height:28px;}
.body-large-medium {font-size:18px; line-height:28px;}
.body-large-semibold {font-size:18px; line-height:28px;}
.body-medium-regular {font-size:16px; line-height:24px;}
.body-medium-medium {font-size:16px; line-height:24px;}
.body-medium-semibold {font-size:16px; line-height:24px;}

footer::before{background-image:url(../img/hero-bg-mobile.svg);background-position:center 0px; background-repeat:no-repeat;background-size:cover;}
footer .logo{margin-left:-10px;}
}