@font-face {
  font-family: 'gothambold';
  src: url('../fonts/gotham/gothambold-webfont.woff2') format('woff2'),
    url('../fonts/gotham/gothambold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'gothambook';
  src: url('../fonts/gotham/gothambook-webfont.woff2') format('woff2'),
    url('../fonts/gotham/gothambook-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --poppin-font: "Poppins", sans-serif;
  --gothambold: "gothambold";
  --gothambook: "gothambook";
  --lato-font: "Lato", sans-serif;
  --roboto-font: "Roboto", sans-serif;
  --rubik-font: 'Rubik', sans-serif;
  --urbanist-font: 'Urbanist', sans-serif;
  --color-black: #000;
  --color-light-black: #181818;
  --color-theme: #ECF6F4;
  --color-green: #008171;
  --color-blue: #0061FF;
  --color-white: #fff;
  --radius-normal: 8px;
}

header {
  font-family: var(--poppin-font) !important;
  background-color: var(--color-theme);
  padding-top: 0 !important;
  transition: all 0.5s ease-in-out;
}

header.fixed-top {
  background-color: var(--color-theme);
  transition: all 0.2 ease-in-out;
}

header.blue-header {
  background-color: #F7F8FF;
  transition: all 0.2 ease-in-out;
}

#gunitime-hero-carousel {
  font-family: var(--poppin-font) !important;
  background-color: var(--color-theme);
  padding-top: 0 !important;
}

.btn-theme {
  color: var(--color-white);
  border-radius: var(--radius-normal);
  width: fit-content;
  font-family: var(--lato-font);
}

.btn-theme.blue {
  background-color: var(--color-blue);
}

.btn-theme.green {
  background: var(--color-green);
}

.btn-theme.white,
.btn-theme.white:hover {
  background: var(--color-white) !important;
  color: var(--color-green) !important;
}

.btn-theme.lg {
  padding: .75rem 1.5rem;
  font-size: 1rem;
}

.btn-theme.alt,
.btn-theme.alt:hover {
  background: transparent !important;
  color: var(--color-blue) !important;
  border: 1px solid var(--color-blue) !important;
}

.gap-0-5 {
  gap: 0.5rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gunitime-logo {
  width: 100px;
  height: 100px;
  transition: all 0.2s ease-in-out;
}

.gunitime-logo.small {
  width: 50px;
  height: 50px;
  transition: all 0.2s ease-in-out;
}

.btn:hover {
  color: var(--color-white) !important;
}

@media (max-width: 768px) {
  .btn-theme.lg {
    padding: .5rem 1rem;
    font-size: .75rem;
  }

  .gunitime-logo {
    width: 50px;
    height: 50px;
  }
}