:root {
  --font-default: Poppins;
  --text-color: #1e1e1e;
  --border-gray: #d9d9d9;
  --button-radius: 16px;
  --button-bg: #1f1f1f;
  --button-bg-outline: #ffffff;
  --button-hover-bg: #4a4a4a;
  --button-text-color: #ffffff;
  --button-text-color-outline: #1e1e1e;
  --button-padding: 10px 15px;
  --button-small-padding: 8px 25px;
  --button-medium-padding: 12px 18px;
  --button-large-padding: 12px 25px;
  --button-font-size: 14px;
  --button-medium-font-size: 16px;
  --button-gray: #f5f5f5;
  --button-gray-hover: #e6e6e6;
  --bg-orange: #e8594b;
}

/* font */
.text-default {
  font-family: var(--font-default);
  font-style: normal;
}

.color-default {
  color: var(--text-color);
}

.color-hover {
  color: var(--bg-orange) !important;
}

/* borders */
.border-default {
  border: 1px solid var(--border-gray);
}

/* background */
.bg-orange {
  background-color: var(--bg-orange);
}

.border-default-top {
  border-top: 1px solid var(--border-gray);
}

.border-default-right {
  border-right: 1px solid var(--border-gray);
}

.border-default-left {
  border-left: 1px solid var(--border-gray);
}

.border-default-bottom {
  border-bottom: 1px solid var(--border-gray);
}

/* buttons */
.btn-default {
  border: 1px solid var(--button-bg);
  background-color: var(--button-bg);
  border-radius: var(--button-radius);
  color: var(--button-text-color);
  width: fit-content;
  padding: var(--button-padding);
  font-size: var(--button-font-size);
  font-weight: 500;
  transition: all 0.3s ease;
  line-height: inherit;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-family: var(--font-default);
}

.btn-default.--outline {
  background-color: var(--button-bg-outline);
  color: var(--button-text-color-outline);
}

.btn-default.--small {
  font-size: var(--button-font-size);
  padding: var(--button-small-padding);
}

.btn-default.--medium {
  font-size: var(--button-medium-font-size);
  padding: var(--button-medium-padding);
}

.btn-default.--large {
  font-size: var(--button-medium-font-size);
  padding: var(--button-large-padding);
}

.btn-default.--search {
  font-weight: 600;
  border-radius: 12px;
}

.btn-default:hover {
  background-color: var(--button-hover-bg);
  cursor: pointer;
}

.btn-default.--outline:hover {
  background-color: var(--button-bg);
  color: var(--button-text-color);
}

.btn-default.--inactive {
  pointer-events: none;
}

.btn-gray {
  background-color: var(--button-gray);
}

.btn-gray:hover {
  background-color: var(--button-gray-hover);
}

select.btn-default {
  border: 1px solid var(--button-bg);
  background-color: var(--button-bg);
  border-radius: var(--button-radius);
  color: var(--button-text-color);
  width: auto;
  min-width: 0;
  padding: var(--button-padding);
  font-size: var(--button-font-size);
  font-weight: 500;
  transition: all 0.3s ease;
  line-height: inherit;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-family: var(--font-default);
}

select.btn-default.--outline {
  background-color: var(--button-bg-outline);
  color: var(--button-text-color-outline);
}

select.btn-default.--small {
  font-size: var(--button-font-size);
  padding: var(--button-small-padding);
}

select.btn-default.--medium {
  font-size: var(--button-medium-font-size);
  padding: var(--button-medium-padding);
}

select.btn-default.--large {
  font-size: var(--button-medium-font-size);
  padding: var(--button-large-padding);
}

select.btn-default.--search {
  font-weight: 600;
  border-radius: 12px;
}

select.btn-default:hover {
  background-color: var(--button-hover-bg);
  cursor: pointer;
}

select.btn-default.--outline:hover {
  background-color: var(--button-bg);
  color: var(--button-text-color);
}

select.btn-default.--inactive {
  pointer-events: none;
}

/*temp*/

/*//////// main ////////*/
/* main headline */
.scrolled {
  transform: translateY(-37px);
}

.scrolled > #nav-menu {
  padding-top: 8px;
  padding-bottom: 8px;
}