/* ========================================================================
   Design Configs
   1.Colors
   2.Shadows
   3.Spacing
 ========================================================================== */
:root {
  /* primary color */
  --primary-color-50: #EAF5F1;
  --primary-color-100: #BFDFD4;
  --primary-color-200: #A0D0C0;
  --primary-color-300: #74BBA3;
  --primary-color-400: #59AD91;
  --primary-color-500: #309975;
  --primary-color-600: #2C8B6A;
  --primary-color-700: #226D53;
  --primary-color-800: #1A5440;
  --primary-color-900: #144031;
  /* secondary color */
  --secondary-color-50: #EEF7F0;
  --secondary-color-100: #CBE7D0;
  --secondary-color-200: #B2DCBA;
  --secondary-color-300: #8FCC9A;
  --secondary-color-400: #79C286;
  --secondary-color-500: #58B368;
  --secondary-color-600: #50A35F;
  --secondary-color-700: #3E7F4A;
  --secondary-color-800: #306239;
  --secondary-color-900: #254B2C;
  /* secondary lime color */
  --secondary-lime-color-50: #FBFBF1;
  --secondary-lime-color-100: #F3F3D3;
  --secondary-lime-color-200: #EEEDBE;
  --secondary-lime-color-300: #E6E4A1;
  --secondary-lime-color-400: #E1DF8E;
  --secondary-lime-color-500: #D9D772;
  --secondary-lime-color-600: #C5C468;
  --secondary-lime-color-700: #9A9951;
  --secondary-lime-color-800: #77763F;
  --secondary-lime-color-900: #5B5A30;
  /* gray color */
  --gray-color-50: #ECEDF0;
  --gray-color-100: #C5C8D0;
  --gray-color-200: #A9ADB9;
  --gray-color-300: #828898;
  --gray-color-400: #6A7185;
  --gray-color-500: #454D66;
  --gray-color-600: #3F465D;
  --gray-color-700: #313748;
  --gray-color-800: #262A38;
  --gray-color-900: #1D202B;
  /* first colors */
  --primary-color: var(--primary-color-500);
  --secondary-color: var(--secondary-color-500);
  --tertiary-color: var(--secondary-lime-color-500);
  /* text colors */
  --primary-text-color: var(--gray-color-500);
  --secondary-text-color: var(--gray-color-200);
  /* other colors */
  --white: #ffffff;
  --background-light: #f7f7f7;
  --valid-color: #4FC263;
  --invalid-color: #DB3F3F;
  --red-color: #D02A2A;
  --border-primary-color: #7949FF;
  /* Shadow colors*/
  --shadow-1-color: rgba(16, 24, 40, 0.05);
  --shadow-2-color: rgba(75, 75, 75, 0.08);
  --shadow-3-color: rgba(16, 24, 40, 0.1);
  --shadow-4-color: rgba(16, 24, 40, 0.1);
  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-160: 160px;
  --spacing-192: 192px;
}

.shadow-1 {
  box-shadow: 0px 1px 2px var(--shadow-1-color);
}

.shadow-2 {
  box-shadow: 3px 1px 12px var(--shadow-2-color);
}

.shadow-3 {
  box-shadow: 0px 10px 15px -3px var(--shadow-3-color);
}

.shadow-4 {
  box-shadow: 0px 25px 50px -12px var(--shadow-4-color);
}

.paragraf-1 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.paragraf-2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.paragraf-3 {
  font-size: 1rem;
  line-height: 1.75rem;
}

.paragraf-4 {
  font-size: 0.875rem;
  line-height: 1.125rem;
}

.gap-16 {
  gap: var(--spacing-16);
}

.gap-24 {
  gap: var(--spacing-24);
}

.gap-24 {
  gap: var(--spacing-24);
}

.gap-48 {
  gap: var(--spacing-48);
}

.zindex-10 {
  z-index: 10;
}

.zindex-20 {
  z-index: 20;
}

.zindex-30 {
  z-index: 30;
}

.zindex-40 {
  z-index: 40;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
  .order-0\@s {
    order: 0;
  }
  .order-1\@s {
    order: 1;
  }
  .order-2\@s {
    order: 2;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .order-0\@m {
    order: 0;
  }
  .order-1\@m {
    order: 1;
  }
  .order-2\@m {
    order: 2;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .order-0\@l {
    order: 0;
  }
  .order-1\@l {
    order: 1;
  }
  .order-2\@l {
    order: 2;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .order-0\@xl {
    order: 0;
  }
  .order-1\@xl {
    order: 1;
  }
  .order-2\@xl {
    order: 2;
  }
}