/* Variables */
:root {
  --base-font-inter: "Inter", Helvetica, Arial, sans-serif;
  --base-font-roboto: "Roboto", Helvetica, Arial, sans-serif;
  --base-font-golos-text: "Golos Text", Helvetica, Arial, sans-serif;
  --base-font-proxima-nova: "Proxima Nova", Helvetica, Arial, sans-serif;
  --base-font-helvetica-neue: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --base-font-sitka-small: "Sitka Small", "Times New Roman", serif;
  --base-font-avenir-next-cyr: "Avenir Next Cyr", Helvetica, Arial, sans-serif;
  --base-font-beau-sans-pro: "Beau Sans Pro", Helvetica, Arial, sans-serif;
  --base-font-clear-sans: "Clear Sans", Helvetica, Arial, sans-serif;
  --base-font-din-pro: "DIN Pro", Helvetica, Arial, sans-serif;
  --base-font-exo: "Exo", Helvetica, Arial, sans-serif;
  --base-font-lato: "Lato", Helvetica, Arial, sans-serif;
  --base-font-liberation-serif: "Liberation Serif", "Times New Roman", serif;
  --base-font-museo-sans: "Museo Sans", Helvetica, Arial, sans-serif;
  --base-font-neusa-next-pro: "Neusa Next Pro", Helvetica, Arial, sans-serif;
  --base-font-spectral: "Spectral", "Times New Roman", serif;
  --base-font-ubuntu: "Ubuntu", Helvetica, Arial, sans-serif;

  --dark-color: var(--main-color);
  --main-color: #1f1f1f;
  --secondary-color: #6a6a6a;
  --light-color: #a5a5a5;
  --error-color: #e40000;
  --white-color: #ffffff;
  --white-secondary-color: #f8f8f8;
  --link-color: #303aff;
  --accent-color: #ffff00;
  --surface-light-color: #e9e9e9;

  --main-bg: var(--white-color);
  --grey-bg: var(--white-secondary-color);
  --light-grey-bg: var(--grey-bg);

  --border-color: var(--main-color);
  --line-color: var(--border-color);

  --input-border-color: var(--main-color);
  --input-border-focus-color: var(--input-border-color);

  --block-space: 120px;
  --block-space-lg: var(--block-space);

  --content-top-space: 30px;

  --gutter-x: 20px;
  --gutter-y: 20px;

  --container-width: 1440px;

  --box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);

  --header-height: 110px;
  --header-default-height: 110px;
  --fixedHeaderHeight: var(--header-height);
  --menuTopSpace: var(--header-height);

  --banner-lg-height: 650px;
  --banner-lg-padding: 80px;
}

html.is-scrolled {
  --header-height: 80px;
}

@media (max-width: 1499.98px) {
  :root {
    --container-width: 1280px;
  }
}

@media (max-width: 1349.98px) {
  :root {
    --container-width: 1120px;
  }
}

@media (max-width: 1199.98px) {
  :root {
    --container-width: 940px;

    --header-height: 100px;
    --header-default-height: 100px;

    --block-space: 60px;

    --banner-lg-height: 450px;
    --banner-lg-padding: 30px;
    --mobile-footer-buttons-height: 60px;
    --mobile-footer-space: 0;
  }

  :root:has(.mobile-footer-buttons) {
    --mobile-footer-space: var(--mobile-footer-buttons-height);
  }

  html.is-scrolled {
    --header-height: 70px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --container-width: 700px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --container-width: 520px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --container-width: calc(100vw - 30px);
  }
}
/* ! Variables */