:root {
  --white: #ffffff;
  --white1 :#F3F3F3;
  --white10: rgba(255, 255, 255, 0.1);
  --white20: rgba(255, 255, 255, 0.2);
  --white70: rgba(255, 255, 255, 0.7);
  --white80: rgba(255, 255, 255, 0.8);
  --black: #000;
  --black10: rgba(0, 0, 0, 0.1);
  --black20: rgba(0, 0, 0, 0.2);
  --black30: rgba(0, 0, 0, 0.3);
  --black50: rgba(0, 0, 0, 0.5);
  --black70: rgba(0, 0, 0, 0.7);
  --primary: #3c7af5;
  --secondary: #eff4fe;
  --green: #35bd78;
  --grey: #787f84;
  --darkerGray: #101010;
  --darkestGray: #2d2d2d;
  --lightGray: #303030;
  --light-green: #cbe7be;
  --link:#0050A1;
  --purple: #e1d3fa;
  --grey-border: #e4e8ed;
  --grey-border-3: #e4e7ec;
  --grey-bg: #f4f6f8;
  --grey-bg-2: #e0e2e5;
  --grey-3: #787f85;
  --grey-4: #d9d9d9;
  --grey-5: #6e6e6e;
  --grey-6: #F5F5F5;
  --grey-7: #4E4E4E;
  --grey-8: #F1F1F1;
  --grey-9: #FAFAFA;
  --blue2: #0050a1;
  --red: #e93e3e;
  --lighterYellow: #f7e5b1;
  --header-space: 80px;
  --radius12: 12px;
  --radius10: 10px;
  --radius8: 8px;
  --radius15: 15px;
  --radius20: 20px;
  /*fonts */
  --text-h1: 64px;
  --text-h2: 48px;
  --text-h3: 32px;
  --text-h4: 24px;
  --text-h5: 18px;
  --text-h6: 14px;
  --text-para: 16px;
  --text-small: 12px;

  --space-default: 1rem;
  --space-l1-lg: 4rem;
  --space-l2-lg: 3rem;
  --space-l3-lg: 2.5rem;
  --space-l4-lg: 2rem;
  --space-l5-lg: 1.5rem;
  --space-l6-lg: 1rem;
  --space-l1-sm: calc(var(--space-l1-lg) / 4);
  --space-l2-sm: calc(var(--space-l2-lg) / 4);
  --space-l3-sm: calc(var(--space-l3-lg) / 4);
  --space-l4-sm: calc(var(--space-l4-lg) / 4);
  --space-l5-sm: calc(var(--space-l5-lg) / 4);
  --space-l6-sm: calc(var(--space-l6-lg) / 4);
  --space-list-items: 0.5rem;
  
  --fw400:400;
  --fw600:600;
  --fw700:700;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  :root {
    --header-space: 80px;
    --text-h1: 48px;
    --text-h2: 40px;
    --text-h3: 28px;
    --text-h4: 22px;
    --text-h5: 16.5px;
    --text-h6: 13.5px;
    --text-para: 13px;
    --text-small: 12px;
  }
}

@media screen and (max-width: 991px) {
  :root {
    --header-space: 72px;
    --text-h1: 40px;
    --text-h2: 32px;
    --text-h3: 24px;
    --text-h4: 20px;
    --text-h5: 16px;
    --text-h6: 13px;
    --text-para: 14px;
    --text-small: 11px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --text-para: 13px;
  }
}