@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --font-primary: 'DM Sans';

  --Labels-Vibrant-Controls-Primary-: #404040;
  --Labels-Vibrant-Controls-Tertiary-: #d9d9d9;
  --Brand-Color-Codes-Rain-Forest: #1a4338;
  --Brand-Color-Codes-RF-MSG-20: #277154;
  --Brand-Color-Codes-White-Green: #e4f2e6;
  --color-black: #000;
  --color-darkgray: #b3a4a4;
  --color-darkslategray-100: #414947;
  --color-darkslategray-200: #3e3e3e;
  --color-darkslategray-300: #195037;
  --color-darkslategray-400: #12352b;
  --color-gray-100: rgba(255, 255, 255, 0.4);
  --color-gray-200: rgba(255, 255, 255, 0.8);
  --color-gray-300: rgba(0, 0, 0, 0.8);
  --color-gray-400: rgba(0, 0, 0, 0.9);
  --color-gray-500: rgba(255, 255, 255, 0.6);
  --color-mediumseagreen: #3ab67d;
  --color-white: #fff;
  --color-whitesmoke: #f7f7f7;
  --Dark-RF-10: #131b19;
  --RF-Grey-GG-10: #f8f9f9;
  --RF-Grey-GG-40: #b3c0bd;
  --RF-Grey-GG-60: #809790;
  --common-color: #ffffff;

  /* Gaps */
  --gap-0: 0px;
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-14: 14px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-28: 28px;
  --gap-30: 30px;
  --gap-40: 40px;
  --gap-48: 48px;
  --gap-100: 100px;
  --gap-8_79: 8.79px;

  /* Padding */
  --padding-0: 0px;
  --padding-4: 4px;
  --padding-8: 8px;
  --padding-12: 12px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-28: 28px;
  --padding-30: 30px;
  --padding-40: 40px;
  --padding-64: 64px;
  --padding-80: 80px;
  --padding-100: 100px;

  /* Border Radius */
  --br-8: 8px;
  --br-10: 10px;
  --br-14: 14px;
  --br-16: 16px;
  --br-30: 30px;
  --br-40: 40px;
  --br-48: 48px;

  /* Font Sizes */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* Line Heights */
  --lh-24: 24px;
  --lh-28: 28px;

  /* Shadows */
  --shadow-drop: 4px 6px 20px 3px rgba(0, 0, 0, 0.1);

  /* Gradients */
  --gradient-1: linear-gradient(180deg, var(--color-white), #697572);
  --gradient-2: linear-gradient(96.84deg, var(--color-black), rgba(0, 0, 0, 0));
}

html,
body {
  margin: 0;
  padding: 0;
  line-height: normal;
  font-family: var(--font-primary);
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}


.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}