:root {
  --clr-primary: #1b3e5a;
  --clr-secondary: #d2dc97;
  --clr-secondarytext: #9d9d9d;
  --clr-white: #fcfcfc;
  --clr-accent: #edebeb;
  --clr-black: #0a0a0a;
  --ff-primary: "Rethink Sans";
  --ff-secondary: "Pacifico";
  --fs-small: clamp(0.66rem, -0.09vi + 0.69rem, 0.63rem);
  --fs-smaller: clamp(0.76rem, 0.08vi + 0.74rem, 0.79rem);
  --fs-b: clamp(0.88rem, 0.32vi + 0.8rem, 1rem);
  --fs-h6: clamp(1rem, 0.65vi + 0.84rem, 1.26rem);
  --fs-h5: clamp(1.15rem, 1.11vi + 0.87rem, 1.59rem);
  --fs-h4: clamp(1.32rem, 1.73vi + 0.89rem, 2rem);
  --fs-h3: clamp(1.52rem, 2.56vi + 0.88rem, 2.52rem);
  --fs-h2: clamp(1.74rem, 3.67vi + 0.83rem, 3.17rem);
  --fs-h1: clamp(2rem, 5.12vi + 0.72rem, 4rem);
  --section-mb: clamp(2rem, -7.481rem + 47.403vw, 20.25rem);
  --section-mrml: clamp(1rem, -1.2696rem + 11.348vw, 6rem);
  --mr: clamp(1rem, calc(-0.364rem + 0.0682 * 100vw), 4.005rem);
  --ml: clamp(1rem, calc(-0.364rem + 0.0682 * 100vw), 4.005rem);
  --section-gap: clamp(2rem, -0.208rem + 11.039vw, 6.25rem);
  --header-gap: clamp(0rem, -5rem + 12.5vw, 6.25rem);
}

/* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
    --fs-small: 0.66rem;
    --fs-smaller: 0.76rem;
    --fs-b: 0.88rem;
    --fs-h6: 1rem;
    --fs-h5: 1.15rem;
    --fs-h4: 1.32rem;
    --fs-h3: 1.52rem;
    --fs-h2: 1.74rem;
    --fs-h1: 2rem;
  }
  @media screen and (min-width: 1025px) {
    :root {
      --fs-small: 0.63rem;
      --fs-smaller: 0.79rem;
      --fs-b: 1rem;
      --fs-h6: 1.26rem;
      --fs-h5: 1.59rem;
      --fs-h4: 2rem;
      --fs-h3: 2.52rem;
      --fs-h2: 3.17rem;
      --fs-h1: 4rem;
    }
  }
}
html {
  box-sizing: border-box;
  font-size: 100%;
  background-color: var(--clr-white);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

input,
button,
textarea,
select {
  font: inherit;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

hr {
  border: 1px solid var(--clr-white);
  opacity: 0.15;
  overflow: visible;
  width: 100%;
}

#root,
#__next {
  isolation: isolate;
}

body {
  margin: 0 auto;
}

section {
  font-family: var(--ff-primary), sans-serif;
  color: var(--clr-primary);
  max-width: 936px;
  display: flex;
  flex-flow: column;
  margin: 0 clamp(1rem, -5.557rem + 16.393vw, 6rem) var(--section-mb);
}

.hero__intro {
  font-family: var(--ff-primary);
  font-size: clamp(0.75rem, 0.334rem + 1.039vw, 1rem);
  font-weight: 400;
  margin: 0 0 clamp(0rem, -1.662rem + 4.156vw, 1rem);
}

h1, h2 {
  font-family: var(--ff-primary);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: clamp(3.125rem, 2.274rem + 4.255vw, 5rem);
}

.hero__text {
  font-family: var(--ff-secondary);
  color: var(--clr-secondary);
}

.hero__text--secondary {
  font-size: var(--fs-h1);
}

a {
  font-family: var(--ff-primary);
  font-size: var(--fs-b);
  color: var(--clr-primary);
  cursor: pointer;
}

.link__styling {
  display: flex;
  justify-content: flex-end;
}

.section-title {
  font-size: var(--fs-h5);
  min-width: 230px;
}

.work-card__title {
  font-size: var(--fs-h5);
  font-weight: 500;
}

.services__title {
  font-size: var(--fs-h6);
  font-weight: 500;
  color: var(--clr-black);
}

.services__description {
  font-size: var(--fs-b);
  font-weight: 400;
  color: var(--clr-secondarytext);
}

h2 {
  text-align: center;
}

h2.contact__cta {
  color: var(--clr-white);
}

.cta--highlight {
  color: var(--clr-white);
  font-family: var(--ff-secondary);
}

.footer__link {
  color: var(--clr-white);
  font-size: var(--fs-small);
}

.footer__rights {
  font-size: var(--fs-smaller);
}

.work-card {
  background-color: var(--clr-accent);
  background-repeat: no-repeat;
  border-radius: 1.5rem;
}

.work-card--1 {
  background-position: 150px 100px;
}

.work-card--2 {
  background-size: 140%;
  background-image: url("/img/brand-images/amo/mockup-amo-card.webp");
  background-position: top 50% right 160%;
}

.work-card--3 {
  background-size: 130%;
  background-image: url("/img/brand-images/bidlabs/mockup-bidlabs-card.webp");
  background-position: bottom 55% left -12px;
}

.work-card--4 {
  background-size: cover;
  background-image: url("/img/brand-images/enchantedkingdom/mockup-enchanted-card.webp");
  background-position: 110px -183px;
}

@font-face {
  font-family: "Rethink Sans";
  src: url("../fonts/rethinksans-variableFont_wght.ttf") format("truetype");
  font-weight: 400 600;
}
@font-face {
  font-family: "Pacifico";
  src: url("../fonts/pacifico-regular.ttf") format("truetype");
  font-weight: 400;
}
.scroller[data-animated=true] {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
          mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated=true] .scroller__inner {
  width: -moz-max-content;
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 10s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction=right] {
  --_animation-direction: reverse;
}

.scroller[data-direction=left] {
  --_animation-direction: forwards;
}

.scroller[data-speed=fast] {
  --_animation-duration: 20s;
}

.scroller[data-speed=slow] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 4rem));
  }
}
.scroller__inner li {
  list-style-type: none;
  display: flex;
  align-items: center;
  height: auto;
}

button {
  font-size: 1em;
  padding: 0;
  border: none;
  background-color: rgba(0, 0, 0, 0);
}

.btn {
  border-radius: 100px;
  padding: 10px 13px;
}

.btn--primary {
  transition: all 150ms;
}

.btn--primary:hover {
  color: white;
  border: none;
  background-color: var(--clr-secondary);
}

.btn--secondary,
.btn--white {
  color: white;
  border: 1px solid var(--clr-white);
  padding: 10px 25px;
  border-radius: 30px;
  align-self: baseline;
}

.btn--white {
  color: var(--clr-secondary);
  font-weight: 500;
  background-color: var(--clr-white);
  border: none;
}

.section__header {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
}

.inline-link {
  display: flex;
  gap: clamp(0.375rem, 0.135rem + 0.96vw, 0.75rem);
}

.section__header--line {
  min-width: 40px;
  max-width: 212px;
  max-height: 2px;
}

button {
  color: var(--clr-primary);
}

.logo__elaine {
  width: clamp(11.25rem, 9.718rem + 7.66vw, 14.625rem);
}

.navigation-bar {
  margin-top: clamp(0.5rem, -0.539rem + 5.195vw, 2.5rem);
}

.navbar__main {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

nav {
  display: none;
}

nav.menu-btn {
  display: block;
}

nav {
  position: fixed;
  z-index: 999;
  width: 40%;
  right: 0;
  top: 0;
  background: var(--clr-primary);
  height: 100vh;
  padding: 1em;
}

ul.primary-nav {
  margin-top: 3em;
}

li a {
  color: var(--clr-white);
  text-decoration: none;
  display: block;
  padding: 0.5em;
  font-size: var(--fs-h4);
  text-align: left;
  transition: all 150ms;
}
li a:hover {
  color: var(--clr-secondary);
}

.mobile-menu-exit {
  float: right;
  margin: 0.5em;
  cursor: pointer;
  width: clamp(1.5rem, 0.151rem + 3.598vw, 2.688rem);
}

.container__hero {
  display: flex;
  flex-flow: column;
  gap: clamp(1.875rem, -0.008rem + 9.416vw, 5.5rem);
}

.scroller {
  max-width: 100%;
  margin: 0 auto var(--section-mb);
  border: 1px solid #d9d9d9;
  border-left-width: 0;
  border-right: 0;
  padding: clamp(0.5rem, -0.1808rem + 3.404vw, 2rem);
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
}

section.featured-work {
  display: flex;
  flex-flow: column;
  gap: var(--section-gap);
  margin: 0 clamp(1rem, -2.443rem + 11.976vw, 6rem) var(--section-mb);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(20rem, 15.584rem + 22.078vw, 28.5rem), 1fr));
  gap: clamp(1rem, 0.656rem + 1.198vw, 1.5rem);
  justify-content: center;
}

.work-card__content {
  height: 360px;
  padding: 2rem;
}

.work-card__title {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  justify-content: space-between;
}

.work-card__category {
  font-weight: 400;
  font-size: var(--fs-b);
}

.work__all-projects {
  display: flex;
  justify-content: end;
}

.container__services {
  display: flex;
  flex-flow: column;
  gap: var(--section-gap);
}

.services__content {
  gap: clamp(0.5rem, -0.189rem + 2.395vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(13.5rem, 9.196rem + 14.97vw, 19.75rem), 1fr));
  padding: clamp(1rem, -2.443rem + 11.976vw, 6rem);
}

.services__card {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  border: 1px solid var(--clr-accent);
  padding: 24px;
  border-radius: 1rem;
}

.services__image {
  height: auto;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.services__image--1,
.services__image--2,
.services__image--3,
.services__image--4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.services__text {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: start;
  gap: 1rem;
}

.container__client {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: clamp(2rem, 0.812rem + 5.941vw, 5rem);
}

.text-lines__client {
  display: flex;
  flex-flow: column;
  gap: clamp(2.5rem, -5.387rem + 17.215vw, 6.75rem);
}

.wrapper__client {
  width: 100%;
}

.steps__wrapper {
  display: flex;
  min-width: 0;
  gap: 16px;
}

.step {
  justify-content: flex-start;
  height: 87px;
  display: flex;
}

.step__text {
  align-self: center;
  text-align: center;
}

.step-divider {
  background-color: var(--clr-primary);
  border-left: 1px solid var(--clr-secondary);
  transform: rotate(15deg);
}

.btn--primary {
  border: 1px solid var(--clr-secondary);
}

.about {
  margin: 0 0 var(--section-mb);
  max-width: none;
}

.container__about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: inset 0 0 0 1px var(--clr-accent);
}

.about__image {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

.about__wrapper {
  display: flex;
  flex-flow: column;
  gap: clamp(2rem, -18.215rem + 31.556vw, 6.438rem);
  padding: clamp(1.5rem, -17.925rem + 36.957vw, 5.75rem) clamp(1rem, -21.853rem + 43.478vw, 6rem) clamp(1.5rem, -12.212rem + 26.087vw, 4.5rem) clamp(1rem, -14.997rem + 30.435vw, 4.5rem);
}

.about__text {
  display: flex;
  flex-flow: column;
  gap: clamp(1rem, 0.968rem + 1.287vw, 1.875rem);
}
.about__text p {
  font-size: var(--fs-b);
}
.about__text svg {
  height: clamp(1.5rem, 0.576rem + 2.02vw, 2rem);
}

.contact {
  margin-bottom: clamp(2rem, 0.119rem + 9.406vw, 6.75rem);
}

.contact__content {
  background-color: var(--clr-secondary);
  display: flex;
  flex-flow: column;
  padding: clamp(1rem, -0.135rem + 5.674vw, 3.5rem) clamp(1rem, -0.759rem + 8.794vw, 4.875rem);
  align-items: center;
  border-radius: 16px;
  gap: clamp(1.5rem, 1.302rem + 0.99vw, 2rem);
}

.container__contact {
  display: flex;
  flex-flow: column;
  gap: var(--section-gap);
}

.contact__btn {
  display: flex;
  flex-flow: row;
  gap: 16px;
}

.footer {
  background-color: var(--clr-primary);
  color: var(--clr-white);
  margin: 0 var(--section-mrml);
}

.container__footer {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 2rem;
  padding: clamp(2rem, 1.546rem + 2.27vw, 3rem) 0;
}

.menu-items {
  display: flex;
  justify-content: space-between;
  gap: clamp(0.5rem, -0.181rem + 3.404vw, 2rem);
}

.footer {
  margin: 0;
  width: 100%;
  max-width: none;
}

@media screen and (min-width: 2000px) {
  .container__about {
    display: flex;
    flex-flow: column;
    max-width: 936px;
    margin: 0 auto;
  }
  .about__text {
    border-top: none;
  }
}
@media screen and (min-width: 1128px) {
  .work-card--1 {
    background-position: 150px 100px;
  }
  .work-card--2 {
    background-size: 160%;
    background-image: url("/img/brand-images/amo/mockup-amo-card.webp");
    background-position: top -12px right 110%;
  }
  .work-card--3 {
    background-size: 130%;
    background-image: url("/img/brand-images/bidlabs/mockup-bidlabs-card.webp");
    background-position: top left -12px;
  }
  .work-card--4 {
    background-size: cover;
    background-image: url("/img/brand-images/enchantedkingdom/mockup-enchanted-card.webp");
    background-position: 110px -183px;
  }
  section {
    margin: 0 auto var(--section-mb);
  }
  section.featured-work {
    margin: 0 auto var(--section-mb);
  }
  .services__content {
    grid-template-columns: repeat(auto-fit, minmax(clamp(12.5rem, 11.811rem + 2.395vw, 13.5rem), 1fr));
    padding: 0;
  }
  .about__wrapper {
    padding-top: 92px;
    padding-bottom: 72px;
    padding-left: 72px;
    padding-right: clamp(6rem, -29.395rem + 50.161vw, 15.75rem);
  }
}
@media screen and (max-width: 1127.995px) {
  .work-card--4 {
    background-size: 90%;
    background-image: url("/img/brand-images/enchantedkingdom/mockup-enchanted-card.webp");
    background-position: bottom 10% right -180%;
  }
}
@media screen and (max-width: 732px) {
  .work-card--1 {
    background-position: 150px 100px;
  }
  .work-card--2 {
    background-size: 170%;
    background-image: url("/img/brand-images/amo/mockup-amo-card.webp");
    background-position: bottom 75% right 100%;
  }
  .work-card--3 {
    background-size: 145%;
    background-image: url("/img/brand-images/bidlabs/mockup-bidlabs-card.webp");
    background-position: bottom 60% right 90%;
  }
  .work-card--4 {
    background-size: 120%;
    background-image: url("/img/brand-images/enchantedkingdom/mockup-enchanted-card.webp");
    background-position: bottom 10% right 130%;
  }
  .text-lines__client {
    gap: clamp(2rem, 0.795rem + 4.819vw, 3rem);
  }
  .steps__wrapper {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: clamp(0rem, -1.205rem + 4.819vw, 1rem);
  }
  .step-divider {
    width: 200px;
    background-color: var(--clr-primary);
    border-bottom: 1px solid var(--clr-secondary);
    transform: none;
  }
  .container__about {
    display: flex;
    flex-flow: column;
  }
  .about__text {
    border-top: none;
  }
}
@media screen and (max-width: 450px) {
  .work-card--1 {
    background-position: 150px 100px;
  }
  .work-card--2 {
    background-size: 170%;
    background-image: url("/img/brand-images/amo/mockup-amo-card.webp");
    background-position: bottom 85% right 120%;
  }
  .work-card--3 {
    background-size: 165%;
    background-image: url("/img/brand-images/bidlabs/mockup-bidlabs-card.webp");
    background-position: bottom 60% right 80%;
  }
  .work-card--4 {
    background-size: 130%;
    background-image: url("/img/brand-images/enchantedkingdom/mockup-enchanted-card.webp");
    background-position: bottom 10% right 90%;
  }
}/*# sourceMappingURL=main.css.map */