:root {
  --white: #ffffff;
  --ghost-white: #fafaff;

  --primary-black: #000000;
  --secondary-black: #1f1f1f;
  --tertiary-black: #2f2f2f;
  --quaternary-black: #484848;
  --quinary-black: #1e1e1e;
  --light-blue: #03a9f4;
  --alice-blue: #f6fdff;
  --primary-blue: #1b1aff;
  --secondary-blue: #0100df;
  --primary-dark-blue: #01007b;
  --tertiary-dark-blue: #00004c;
  --quarter-dark-blue: #00004d;
  --quinary-dark-blue: #000049;
  --red: #ff0000;
  --periwinkle: #9c9cd9;
  --grey: #818181;
  --dark-gray: #8f8f8f;
  --light-gray: #aeaeae;
  --medium-gray: #747474;

  --divider: #959595;
  --primary-dim-gray: #494949;
  --secondary-dim-gray: #6d6d6d;
  --tertiary-dim-gray: #727272;
  --quaternary-dim-gray: #f9f9f9;
  --quinary-dim-gray: #797979;

  --bg-in-the-dark: #40409c;
  --primary-color-soft: #f7f6ff;
  --secondary-color-soft: #edfaff;
  --primary-muted: #f5f5f5;
  --secondary-muted: #5c5c5c;
  --tertiary-muted: #b0b0b0;
  --quaternary-muted: #8a8a8a;
  --quinary-muted: #4e4e4e;

  --primary-purple: #e3e3ff;

  /* shadow */
  --primary-shadow: 0px 4px 4px 0px #00000040;
  --secondary-shadow: 0px 4px 4px 0px #5c5bff4f;
  --tertiary-shadow: 6px 0px 18.2px 0px #00000040;
  --quaternary-shadow: 0px 4px 5.6px 0px #00000040;
  --quinary-shadow: 0px 2px 5.3px 0px #ebe9ff;
  --senary-shadow: 0px 4px 13.9px 5px #01007b70;

  /* gradient */
  --primary-gradient: linear-gradient(
    90deg,
    #9595ff 0%,
    var(--primary-blue) 100%
  );
  --secondary-gradient: linear-gradient(180deg, #7978ff 0%, #3b3aff 100%);

  /* border */
  --primary-border: 2.5px solid var(----bg-in-the-dark);
  /* input */
  --primary-border-input: 1px solid #929292;
  --secondary-border-input: 1px solid #c7c7c7;
  --tertiary-border-input: 1px solid var(--divider);

  /* transition */
  --primary-transition-shorthand: 200ms ease-in-out;

  /* dashboard */
  --height-dashboard-nav: 88px;
  --width-dashboard-aside: calc(349px - 2rem);
  --padding-top-dashboard-main: 46px;
  --padding-right-dashboard-main: 60px;
  --padding-left-dashboard-main: 64px;
  --padding-y-dashboard-main: calc(
    var(--height-dashboard-nav) + var(--padding-top-dashboard-main)
  );
  --padding-dashboard-main: calc(
      var(--height-dashboard-nav) + var(--padding-top-dashboard-main)
    )
    var(--padding-right-dashboard-main) 0
    calc(var(--width-dashboard-aside) + var(--padding-left-dashboard-main));

  /* landing */
  --padding-top-nav-landing: 53px;
  --padding-left-nav-landing: 97px;
  --padding-right-nav-landing: 98px;
  --height-nav-landing: 42px;

  --actual-padding-top-hero: 42px;
  --padding-top-hero: calc(
    var(--padding-top-nav-landing) + var(--height-nav-landing) +
      var(--actual-padding-top-hero)
  );

  /* mental heath section */
  --padding-top-mental-health: 47px;

  /* feature section */
  --padding-top-feature: 108px;
  --padding-bottom-feature: 139px;

  /* teenager section */
  --padding-top-teenager: 61px;

  /* percentage section */
  --padding-top-percentage: 103px;
  --padding-botton-percentage: 293px;

  /* team section */
  --padding-top-team: 107px;
  --padding-bottom-team: 234px;

  /* footer */
  --padding-top-footer: 53px;

  /* screens */
  --sm: 430px;
  --md: 744px;
  --lg: 1024px;
  --xl: 1280px;
}