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

:root {
  --primary-color: #ecc311;
  --secondary-color: #141414;
  --accent-color: #ecc311;
  --active-color: #ecc311;

  --btn-transition-duration: 0.4s;
  --btn-transition-timing: ease-out;
  --btn-transition: all 0.4s ease-out;

  --btn-primary-color: #000000;
  --btn-primary-txt-color: #ffffff;
  --btn-secondary-color: #000000;
  --btn-secondary-txt-color: #ffffff;
  --btn-active-color: #ecc311;
  --btn-active-txt-color: #ffffff;
  --btn-active-border-color: #ecc311;
  --btn-calendar-color: #ecc311;
  --btn-calendar-border-color: #ecc311;
  --btn-calendar-txt-color: #141414;
  --hover-btn-primary-color: #ecc311;
  --hover-btn-primary-txt-color: #ffffff;
  --hover-btn-secondary-color: #262626;
  --hover-btn-calendar-color: #d6b300;
  --hover-btn-calendar-txt-color: #141414;
  --hover-btn-active: #d6b300;

  --navigation-bg-color: #141414;
  --navigation-txt-color: #ffffff;
  --lang-select-bg-color: #141414;
  --lang-select-border-color: #ffffff;
  --lang-select-txt-color: #ffffff;
  --lang-select-hover-bg-color: #ffffff;
  --lang-select-hover-txt-color: #141414;
  --lang-select-active-bg-color: #ffffff;
  --lang-select-active-txt-color: #141414;

  --main-basket-color: #ffffff;
  --main-basket-count-bg-color: #ecc311;
  --main-basket-count-color: #141414;
  --float-basket-color: #ecc311;
  --float-basket-count-bg-color: #ecc311;
  --float-basket-count-color: #141414;

  --footer-bg-color: #141414;
  --footer-txt-color: #cbd5e0;

  --focus-outline-color: #ecc311;
  --focus-outline-width: 2px;
  --focus-outline-style: solid;
  --focus-outline-offset: 2px;

  --txt-color: #141414;
  --txt-color-secondary: #3b3b3b;
  --txt-description: #595959;
  --border-color: rgba(0, 0, 0, 0.12);
  --section-bg-color: rgba(236, 195, 17, 0.08);

  --radius: 0px;
  --radius-small: 0px;

  font-family: 'Oswald', Arial, Helvetica, sans-serif;
}

body {
  background-color: #f7f8fa;
  color: var(--txt-color);
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-weight: 300;
  letter-spacing: 0.62px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: 0.62px;
  text-transform: uppercase;
}

.navigation-bar {
  background-color: var(--navigation-bg-color) !important;
  border-bottom: 2px solid var(--primary-color);
}

.button,
.btn,
.btn-small,
.btn-white,
.btn-theme,
.btn-black-white,
.btn-theme-second,
.more-link a,
.btn-theme-submit {
  border: none;
  border-right: 4px solid var(--primary-color);
  font-size: 16px;
  font-weight: 400;
  background: var(--btn-primary-color);
  color: var(--btn-primary-txt-color);
  text-transform: uppercase;
  text-align: center;
  padding: 28px 45px;
  display: inline-block;
  line-height: .8;
  letter-spacing: 1.6px;
  position: relative;
  outline: none;
  transition: var(--btn-transition);
  border-radius: var(--radius);
}

.button:hover,
.button:focus,
.button:active,
.btn:hover,
.btn:focus,
.btn:active,
.btn-small:hover,
.btn-small:focus,
.btn-small:active,
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-black-white:hover,
.btn-black-white:focus,
.btn-black-white:active,
.btn-theme-second:hover,
.btn-theme-second:focus,
.btn-theme-second:active,
.more-link a:hover,
.more-link a:focus,
.more-link a:active,
.btn-theme-submit:hover,
.btn-theme-submit:focus,
.btn-theme-submit:active {
  color: var(--hover-btn-primary-txt-color, #ffffff);
  background: var(--hover-btn-primary-color);
  text-decoration: none;
}

.footer {
  font-size: 15px;
  letter-spacing: 0.5px;
}

.footer-primary,
.footer-secondary,
.footer-secondary strong,
.footer p,
.footer a,
.footer strong {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  letter-spacing: 0.5px;
}