:root {
  --primary-font-family: "Inder", sans-serif;
  --secondary-font-family: "Work Sans", sans-serif;
  --heading-1: 32px;
  --heading-2: 24px;
  --heading-3: 20px;
  --heading-4: 18px;
  --heading-5: 16px;
  --body: 14px;
  --small: 12px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 32px;
  --border-radius-xxl: 50%;
  --white: #FFF;
  --black: #000;
  --black-1: #111;
  --body-text: #333;
  --gray-default: #F5F5F5;
  --gray-2: #E0E0E0;
  --gray-3: #BDBDBD;
  --gray-4: #757575;
  --gray-5: #424242;
  --primary-default: #FB5012;
  --primary-2: #F78937;
  --primary-3: #D43B0F;
  --secondary-default: #12A9FB;
  --secondary-2: #67C7F8;
  --secondary-3: #0C7BC6;
  --red-default: #FF3B30;
  --green-default: #4CAF50;
  --yellow-default: #FFEB3B;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--body-text);
  line-height: 1.4;
}

.overlay {
  visibility: hidden;
}
.overlay.active {
  visibility: visible;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--white);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--primary-font-family);
}

h1 {
  font-size: var(--heading-1);
  font-weight: normal;
}

h2 {
  font-size: var(--heading-2);
}

h3 {
  font-size: var(--heading-3);
}

h4 {
  font-size: var(--heading-4);
}

h5 {
  font-size: var(--heading-5);
}

p,
small {
  font-family: var(--secondary-font-family);
}

p {
  font-size: var(--body);
}

small {
  font-size: var(--small);
}

a {
  text-decoration: none;
}

#navbar,
#navbar-mobile {
  align-items: center;
  text-align: center;
  background: var(--black-1);
  opacity: 0.9;
  width: 100%;
  position: fixed;
  top: 0;
  padding: var(--spacing-md);
  gap: var(--spacing-xxl);
  transition: 500ms;
  z-index: 11;
}
#navbar.top,
#navbar-mobile.top {
  background: transparent;
}

#navbar {
  display: flex;
  justify-content: center;
}
#navbar .navigation-item {
  padding: var(--spacing-sm) var(--spacing-xl);
  border-bottom: 2px solid transparent;
}
#navbar .navigation-item:hover {
  border-bottom: 2px solid var(--primary-default);
  transition: border 500ms ease;
}

.navigation-item {
  font-size: var(--heading-5);
  font-family: var(--primary-font-family);
  color: var(--white);
}

.logo {
  display: flex;
}

#sidebar-mobile {
  display: none;
}
#sidebar-mobile.active {
  transform: translateX(0);
}

.showcase {
  height: 100vh;
  position: relative;
  margin: 0 0 var(--spacing-xxl);
}
.showcase .showcase-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  height: 100%;
  padding: 0 calc(4 * var(--spacing-xxl));
}
.showcase .showcase-wrapper > * {
  color: var(--white);
}
.showcase .showcase-wrapper .showcase-title {
  margin: 0 0 var(--spacing-sm);
}
.showcase .showcase-wrapper .showcase-subtitle {
  margin: 0 0 var(--spacing-lg);
  font-weight: normal;
}
.showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.showcase *:not(.navbar) {
  z-index: 10;
}

.main-button,
.outline-button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--heading-5);
  font-family: var(--primary-font-family);
  border-radius: var(--border-radius-xl);
  transition: all 800ms;
}
.main-button:hover,
.outline-button:hover {
  transition: all 800ms;
  transform: translateY(-3px);
}

.main-button {
  background: var(--primary-default);
  color: var(--white);
}
.main-button:hover {
  background: var(--primary-2);
}

.outline-button {
  background: none;
  border: 2px solid var(--primary-default);
  color: var(--primary-default);
}

.hidden {
  display: none;
}

.main-title {
  margin: 0 0 var(--spacing-xxl);
  text-align: center;
}

.section {
  padding: var(--spacing-xxl);
  margin: 0 0 var(--spacing-xxl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#footer {
  background: var(--black);
  padding: var(--spacing-xxl);
}
#footer .main-footer-wrapper {
  border-bottom: 0.1px solid rgba(255, 255, 255, 0.3);
  margin: 0 0 var(--spacing-xl);
  padding: 0 0 var(--spacing-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xxl);
}
#footer .main-footer-wrapper > div > * {
  color: var(--white);
}
#footer .main-footer-wrapper h4 {
  text-transform: uppercase;
  margin: 0 0 var(--spacing-md);
}
#footer .main-footer-wrapper > div:nth-child(2) {
  display: flex;
  flex-direction: column;
}
#footer .main-footer-wrapper > div:nth-child(2) .phone, #footer .main-footer-wrapper > div:nth-child(2) .email {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--body);
  font-family: var(--primary-font-family);
}
#footer .main-footer-wrapper > div:nth-child(2) .phone {
  margin: 0 0 var(--spacing-sm);
}
#footer .main-footer-wrapper > div:last-child div {
  display: flex;
  gap: var(--spacing-md);
}
#footer .copyright {
  text-align: center;
}
#footer .copyright small {
  color: var(--white);
}/*# sourceMappingURL=style.css.map */