:root {
  
/* //////// shadows //////// */
  --card-shadow-default: 0px 7px 15px 0px rgba(0, 0, 0, 0.15);
  --card-shadow-hover: 0px 7px 15px 5px rgba(0, 0, 0, 0.15);
  --button-shadow: 0px 0px 10px 0px rgba(54, 204, 54, 1);

/* //////// colors //////// */
  --icon-primary: #85E085;
  --icon-logo: #36CC36;
  --icon-toggle: var(--text-secondary);

  --text-primary: #0D0D0D;
  --text-secondary: #262626;
  --text-brand: #36CC36;

  --surface-bg: #DDF4DD;
  --surface-primary: #EBFAEB;
  --surface-secondary: #FFFFFF;
  --surface-brand: #36CC36;

  --button-primary-default: var(--surface-brand);
  --button-primary-hover: #5CD65C;

  --nav-link-default: var(--text-primary);
  --nav-link-hover: #85E085;
  --nav-link-active: #36CC36;

  --sidemenu-bg: rgba(0, 0, 0, 0.75);
  --sidemenu-surface: #36CC36;
  --sidemenu-text-default: #0D0D0D;
  --sidemenu-text-active: #ffffff;

  --seperator-line: rgba(0, 0, 0, 0.2);
  
/* //////// spaces //////// */
  --design-max-width: 1120px;
  --design-x-padding: 0px;
  --sections-space: 124px;
  --content-space-1: 18px;
  --content-space-2: 48px;
  --content-space-3: 84px;

/* //////// fonts //////// */
  --font-main: "Inter", system-ui, sans-serif;

  --text-xs: 12px;
  --text-sm: 18px;
  --text-md: 20px;
  --text-lg: 24px;
  --text-xl: 40px;
  --text-2xl: 64px;

  --lh-tight: 1;
  --lh-normal: 1.2;
  --lh-loose: 1.7;

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

  html[data-theme='dark'] #theme-toggle #dark-icon, html[data-theme='light'] #theme-toggle #light-icon {
    display: none;
  }

html[data-theme='dark'] {
  /* //////// shadows //////// */
  --card-shadow-default: 0px 7px 15px 0px rgba(0, 0, 0, 0.15);
  --card-shadow-hover: 0px 7px 15px 5px rgba(0, 0, 0, 0.15);
  --button-shadow: 0px 0px 10px 0px rgba(54, 204, 54, 1);

/* //////// colors //////// */
  --icon-primary: #85E085;
  --icon-logo: #36CC36;

  --text-primary: #F2F2F2;
  --text-secondary: #E6E6E6;
  --text-brand: #36CC36;

  --surface-bg: hsl(120, 60%, 5%);
  --surface-primary: hsl(120, 60%, 10%);
  --surface-secondary: hsl(120, 60%, 15%);;
  --surface-brand: #36CC36;

  --button-primary-default: var(--surface-brand);
  --button-primary-hover: #5CD65C;

  --nav-link-default: var(--text-primary);
  --nav-link-hover: #85E085;
  --nav-link-active: #36CC36;

  --sidemenu-bg: rgba(0, 0, 0, 0.75);
  --sidemenu-surface: #36CC36;
  --sidemenu-text-default: #0D0D0D;
  --sidemenu-text-active: #ffffff;

  --seperator-line: rgba(255, 255, 255, 0.2);
  
}

/* tablet */
@media only screen and (max-width: 1200px) and (min-width: 769px) {
  :root {
/* //////// spaces //////// */
    --design-max-width: 720px;
    --design-x-padding: 0px;
    --sections-space: 124px;
    --content-space-1: 18px;
    --content-space-2: 60px;
    --content-space-3: 84px;
  }

  .frame-4 {
    height: calc(167px + 10px) !important;
  }
  .frame-5 {
    top: calc(79px + 10px) !important;
    left: 264px !important;
  }
  .frame-6 {
    top: calc(-4px + 10px) !important;
    left: 102px !important;
  }
  .frame-7 {
    top: calc(-10px + 10px) !important;
    left: 423px !important;
  }

  .desktop .main {
    padding-bottom: 20px;
    overflow: hidden;
  }

}

/* mobile */
@media only screen and (max-width: 768px) {
  :root {
/* //////// spaces //////// */
    --design-max-width: 1120px;
    --design-x-padding: 16px;
    --sections-space: 88px;
    --content-space-1: 18px;
    --content-space-2: 42px;
    --content-space-3: 72px;

/* //////// fonts //////// */
    --text-xs: 12px;
    --text-sm: 16px;
    --text-md: 18px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 36px;
  }



  .frame-4 {
    width: 100% !important;
    max-width: 350px !important;
    /* width: fit-content !important; */
    height: fit-content !important;
    display: inline-flex !important;
    flex-direction: column !important;
    padding: 24px 0;
  }
  .frame-5 {
    width: 100% !important;
    position: unset !important;
    order: 2 !important;
    z-index: 1 !important;
  }
  .frame-6 {
    width: 100% !important;
    position: unset !important;
    order: 1 !important;
    z-index: 2 !important;
  }
  .frame-7 {
    width: 100% !important;
    position: unset !important;
    order: 3 !important;
  }

  .navbar {
    display: none !important;
  }

  .type-toggle-state {
    display: flex !important;
  }

  #sidemenu-wrapper {
    display: block !important;
  }

  .price-card {
    width: 100% !important;
  }
}