@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
:root {
  --g-white: hsl(0, 0%, 100%);
  --g-gold: hsl(36, 59%, 63%);
  --g-dark: hsl(223, 17%, 16%);
  --g-blue: hsl(197, 100%, 48%);
  --g-pink: hsl(339, 78%, 48%);
  --g-yellow: hsl(38, 97%, 60%);
  --g-black: hsl(0, 0%, 0%);
  --g-transparent: hsla(0, 0%, 0%, 0);
  --g-shadow: hsl(211, 49%, 63%);
  --linkedin: hsl(201, 100%, 35%);
  --instagram: hsl(319, 63%, 45%);
  --twitter: #00acee;
  --youtube: hsl(0, 100%, 50%);
  --github: #333333;
  --behance: hsl(226, 100%, 51%);
  --dribbble: hsl(337, 79%, 61%);
}

* body {
  margin: 0;
  padding: 0;
}

/* Dark Mode 
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--g-dark);
    color: var(--g-white);
  }
}
*/

.color-white {
  color: var(--g-white);
}

.color-gold {
  color: var(--g-gold);
}

.color-dark {
  color: var(--g-dark);
}

.color-blue {
  color: var(--g-blue);
}

.color-pink {
  color: var(--g-pink);
}

.color-yellow {
  color: var(--g-yellow);
}

.color-black {
  color: var(--g-black);
}

.color-transparent {
  color: var(--g-transparent);
}

.color-shadow {
  color: var(--g-shadow);
}

.bg-color-white {
  background-color: var(--g-white);
}

.bg-color-gold {
  background-color: var(--g-gold);
}

.bg-color-dark {
  background-color: var(--g-dark);
}

.bg-color-blue {
  background-color: var(--g-blue);
}

.bg-color-pink {
  background-color: var(--g-pink);
}

.bg-color-yellow {
  background-color: var(--g-yellow);
}

.bg-color-black {
  background-color: var(--g-black);
}

.bg-color-transparent {
  background-color: var(--g-transparent);
}

.bg-color-shadow {
  background-color: var(--g-shadow);
}

.border-color-white {
  border-color: var(--g-white) !important;
}

.border-color-gold {
  border-color: var(--g-gold) !important;
}

.border-color-dark {
  border-color: var(--g-dark) !important;
}

.border-color-blue {
  border-color: var(--g-blue) !important;
}

.border-color-pink {
  border-color: var(--g-pink) !important;
}

.border-color-yellow {
  border-color: var(--g-yellow) !important;
}

.border-color-black {
  border-color: var(--g-black) !important;
}

.font-lc {
  font-family: 'Luckiest Guy';
  font-size: 1.5rem;
}

.font-itc {
  font-size: 2rem;
}

.font-dark {
  color: var(--g-dark);
}

.font-big {
  font-size: 3rem;
}

.font-medium {
  font-size: 1.25rem;
}

.aic {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.jcc {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.fd-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.fd-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.header-area {
  padding-bottom: 0.15rem;
  border-bottom: solid 0.25rem var(--g-dark);
  -webkit-box-shadow: 0 0 10px var(--g-gold);
          box-shadow: 0 0 10px var(--g-gold);
}

.nav-item {
  padding: 0 1.5rem;
}

.nav-item a {
  color: var(--g-dark);
}

.our-story a:hover, .our-story a:focus, .our-story a:active, .our-story .active {
  color: var(--g-blue) !important;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--g-dark);
}

.our-work a:hover, .our-work a:focus, .our-work a:active, .our-work .active {
  color: var(--g-pink) !important;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--g-dark);
}

.contact-btn a {
  padding: 0.25rem 1.5rem;
  border: solid 0.25rem var(--g-dark);
  border-radius: 2.5rem;
}

.contact-btn a:hover, .contact-btn a:focus, .contact-btn a:active, .contact-btn .active {
  background-color: var(--g-yellow) !important;
  color: var(--g-dark) !important;
}

.hero {
  height: 85vh;
}

.hero .container-lg {
  height: calc(100%);
}

.hero-block {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.hero-cta {
  padding: 0 1rem;
}

.input-cta {
  border-radius: 2rem 0 0 2rem;
  outline: none !important;
}

.input-cta:hover, .input-cta:focus, .input-cta:active {
  border: 1px solid var(--g-dark);
  -webkit-box-shadow: 0 0 10px var(--g-shadow);
          box-shadow: 0 0 10px var(--g-shadow);
}

.btn-cta {
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  color: var(--g-white);
  border-radius: 0 2rem 2rem 0;
  background-color: var(--g-dark);
  border: none;
  white-space: nowrap;
}

.btn-cta:hover, .btn-cta:focus, .btn-cta:active {
  color: var(--g-dark);
  background-color: var(--g-gold);
}

.hero-title {
  font-size: 4rem;
  color: var(--g-white);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--g-dark);
}
/*# sourceMappingURL=style.css.map */