@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.cap {
  text-transform: uppercase;
}

.rotate-90 {
  transform: rotate(90deg) !important;
}

.rotate-180 {
  transform: rotate(180deg) !important;
}

.rotate-270 {
  transform: rotate(270deg) !important;
}

.col-white {
  color: white;
}

.dis-none {
  display: none;
}

.img-container.triple-image img:nth-child(1) {
  display: block;
  position: absolute;
}

.img-container.triple-image img:not(:nth-child(1)) {
  display: none;
}

@media screen and (min-width: 768px) {
  .img-container.triple-image img:nth-child(2) {
    display: block;
    position: absolute;
  }
  .img-container.triple-image img:not(:nth-child(2)) {
    display: none;
  }
}

@media screen and (min-width: 1120px) {
  .img-container.triple-image img:nth-child(3) {
    display: block;
    position: absolute;
  }
  .img-container.triple-image img:not(:nth-child(3)) {
    display: none;
  }
}

:root {
  --peach: rgb(231, 129, 107);
  --black: rgb(29, 28, 30);
  --white: rgb(255,255,255);
  --light-peach: rgb(255, 173, 155);
  --dark-grey: rgb(51, 49, 54);
  --light-grey: #979797;
  --f400: 400;
  --f500: 500;
  --f600: 600;
  --f700: 700;
}

html, body, div, span, applet, object, iframe,
h1,
footer h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, 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: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  outline: none;
  border: none;
  background: none;
}

a {
  color: #000;
  text-decoration: none;
}

body, *, :root {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

:root {
  font-family: 'Jost', sans-serif;
  font-size: 62.5%;
}


h1,
footer h1 {
  font-size: 3.2rem;
  line-height: 3.6rem;
  font-weight: var(--f500);
}

@media screen and (min-width: 768px) {
  
  h1,
  footer h1 {
    font-size: 4.8rem;
    line-height: 4.8rem;
  }
}

footer h1 {
  font-size: 3.2rem;
}

@media screen and (min-width: 768px) {
  footer h1 {
    font-size: 4rem;
  }
}

h2 {
  font-size: 2.8rem;
  line-height: 3.6rem;
  letter-spacing: 0.14rem;
  font-weight: var(--f600);
}

@media screen and (min-width: 768px) {
  h2 {
    font-size: 4rem;
    line-height: 4.8rem;
    letter-spacing: 0.2rem;
  }
}

h3 {
  font-size: 2rem;
  letter-spacing: 0.5rem;
  font-weight: var(--f500);
  line-height: 2.6rem;
}

h4 {
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
}

p {
  font-size: 1.5rem;
  line-height: 2.5rem;
  font-weight: var(--f400);
}

@media screen and (min-width: 768px) {
  p {
    font-size: 1.6;
    line-height: 2.6rem;
  }
}

a.navbar__header-link {
  font-size: 2.4rem;
  letter-spacing: 0.2rem;
  line-height: 2.5rem;
  color: var(--white);
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  a.navbar__header-link {
    font-size: 1.4rem;
    letter-spacing: 0.2rem;
    line-height: 1.4rem;
    color: var(--black);
  }
}

footer .links a {
  font-size: 1.4rem;
  line-height: 1.4rem;
  letter-spacing: 0.2rem;
  color: var(--white);
}

.bold {
  font-weight: var(--f700);
}

textarea {
  font-family: 'Jost', sans-serif;
}

main.__about {
  grid-template-rows: 71.5rem 86.5rem 118.8rem 86.5rem 0.1rem;
  row-gap: 12rem;
  grid-template-areas: "hero    hero     hero"
 "talent-card talent-card talent-card"
 "...  location-cards  ..."
 "deal-card   deal-card     deal-card"
 "...       ...       ...";
}

@media screen and (min-width: 768px) {
  main.__about {
    grid-template-rows: 63.2rem 73.6rem 123rem 73.6rem 0.1rem;
    grid-template-areas: "...     hero      ..."
 "... talent-card ..."
 "..... location-cards ..."
 "...       deal-card     ..."
 "...       ...       ...";
  }
}

@media screen and (min-width: 1120px) {
  main.__about {
    row-gap: 16rem;
    grid-template-rows: 48rem 64rem 36.4rem 64rem 0.1rem;
    grid-template-areas: "hero"
 " talent-card  "
 "location-cards"
 "   deal-card  "
 "       .      ";
  }
}

main.__about .about__hero {
  grid-area: hero;
}

main.__about .about-info-card.talent {
  grid-area: talent-card;
}

main.__about .location-cards {
  grid-area: location-cards;
}

main.__about .about-info-card.deal {
  grid-area: deal-card;
}

body {
  max-width: 111.1rem;
  height: 100vh;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(100%, 1111px);
  grid-template-areas: "header"
 "main"
 "footer";
}

@media screen and (min-width: 1120px) {
  body {
    max-width: 100%;
    grid-template-columns: 1fr minmax(1000px, 1111px) 1fr;
    grid-template-areas: "...    header    ..."
 "...     main     ..."
 "footer footer footer";
  }
}

body header {
  grid-area: header;
}

body main {
  grid-area: main;
}

body footer {
  grid-area: footer;
}

main {
  height: auto;
  display: grid;
  grid-template-columns: 2.4rem 1fr 2.4rem;
}

@media screen and (min-width: 768px) {
  main {
    grid-template-columns: 3.9rem 1fr 3.9rem;
  }
}

@media screen and (min-width: 1120px) {
  main {
    grid-template-columns: 100%;
  }
}

main.__home {
  grid-template-rows: 84.3rem 79.8rem 139.6rem 0.1rem;
  row-gap: 12rem;
  grid-template-areas: "hero    hero     hero"
 "... project-type-cards ..."
 "...  about-cards  ..."
 "...   .......     ...";
}

@media screen and (min-width: 768px) {
  main.__home {
    grid-template-rows: 84.3rem 79.8rem 67rem 0.1rem;
    grid-template-areas: "...     hero      ..."
 "... project-type-cards ..."
 "..... about-cards ..."
 "...       ...     ...";
  }
}

@media screen and (min-width: 1120px) {
  main.__home {
    row-gap: 16rem;
    grid-template-rows: 64rem 64rem 41.2rem 3rem;
    grid-template-areas: "hero"
 "project-type-cards"
 "about-cards"
 ".";
  }
}

main.__home .home__hero {
  grid-area: hero;
}

main.__home .project-type-cards {
  grid-area: project-type-cards;
}

main.__home .about-cards {
  grid-area: about-cards;
}

main.__web-design {
  grid-template-rows: 32rem 306.8rem 52.4rem 0.1rem;
  row-gap: 9.6rem;
  grid-template-areas: "hero    hero     hero"
 "...   project-cards  ..."
 "...  project-type-cards ..."
 "...   .......     ...";
}

@media screen and (min-width: 768px) {
  main.__web-design {
    grid-template-rows: 25.2rem 203rem 42.4rem 0.1rem;
    row-gap: 12rem;
    grid-template-areas: "...     hero      ..."
 "...   project-cards  ..."
 "...  project-type-cards ..."
 "...       ...     ...";
  }
}

@media screen and (min-width: 1120px) {
  main.__web-design {
    grid-template-rows: 25.2rem 98.8rem 30.8rem 0.1rem;
    grid-template-areas: "hero"
 "project-cards"
 "project-type-cards"
 ".";
  }
}

main.__web-design .shared__hero {
  grid-area: hero;
}

main.__web-design .project-type-cards {
  grid-area: project-type-cards;
}

main.__web-design .project-cards {
  grid-area: project-cards;
}

footer {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: 2.4rem 1fr 2.4rem;
  grid-template-rows: 19rem 18.9rem 6.4rem 2.4rem 3.5rem 0.1rem 3.2rem 10.6rem 4rem 7.8rem 4rem 7.8rem 4rem 2.4rem 6.4rem;
  grid-template-areas: "... call-to-action ..." "... call-to-action ..." "...      ...       ..." "...      logo      ..." "...      ...       ..." "...     divider    ..." "...      ...       ..." "...     links      ..." "...      ...       ..." "...    address     ..." "...      ...       ..." "...    contact     ..." "...      ...       ..." ".  socialMedia-icons ." "...      ...       ...";
}

@media screen and (min-width: 768px) {
  footer {
    grid-template-columns: 1fr 23.3rem 27.3rem 18.4rem 1fr;
    grid-template-rows: 26.4rem 8.6rem 8rem 2.7rem 4rem 0.1rem 3.1rem 7.8rem 8rem;
    grid-template-areas: "... call-to-action call-to-action call-to-action ..." "... call-to-action call-to-action call-to-action ..." "...          ...          ...        ...         ..." "...        logo       links        links         ..." "...          ...          ...        ...         ..." "...       divider     divider     divider        ..." "...          ...          ...        ...         ..." "...    address    contact   socialMedia-icons    ..." "...          ...          ...        ...         ...";
  }
}

@media screen and (min-width: 1120px) {
  footer {
    grid-template-columns: 1fr 38.1rem 55rem 18.4rem 1fr;
    grid-template-rows: 22rem 7.2rem 7.1rem 2.8rem 4rem 0.1rem 3.1rem 7.8rem 7.2rem;
    grid-template-areas: "... call-to-action call-to-action call-to-action ..." "... call-to-action call-to-action call-to-action ..." "...          ...          ...        ...         ..." "...        logo       links        links         ..." "...          ...          ...        ...         ..." "...       divider     divider     divider        ..." "...          ...          ...        ...         ..." "...    address    contact   socialMedia-icons    ..." "...          ...          ...        ...         ...";
  }
}

footer .call-to-action {
  grid-area: call-to-action;
}

footer .logo-container {
  grid-area: logo;
}

footer .divider {
  grid-area: divider;
}

footer .links {
  grid-area: links;
}

footer .address {
  grid-area: address;
}

footer .contact {
  grid-area: contact;
}

footer .socialMedia-icons {
  grid-area: socialMedia-icons;
}

main.__app-design {
  grid-template-rows: 32rem 255rem 52.4rem 0.1rem;
  row-gap: 9.6rem;
  grid-template-areas: "hero    hero     hero"
 "...   project-cards  ..."
 "...  project-type-cards ..."
 "...   .......     ...";
}

@media screen and (min-width: 768px) {
  main.__app-design {
    grid-template-rows: 25.2rem 168.8rem 42.4rem 0.1rem;
    row-gap: 12rem;
    grid-template-areas: "...     hero      ..."
 "...   project-cards  ..."
 "...  project-type-cards ..."
 "...       ...     ...";
  }
}

@media screen and (min-width: 1120px) {
  main.__app-design {
    row-gap: 16rem;
    grid-template-rows: 25.2rem 98.8rem 30.8rem 0.1rem;
    grid-template-areas: "hero"
 "project-cards"
 "project-type-cards"
 ".";
  }
}

main.__app-design .shared__hero {
  grid-area: hero;
}

main.__app-design .project-type-cards {
  grid-area: project-type-cards;
}

main.__app-design .project-cards {
  grid-area: project-cards;
}

main.__graphic-design {
  grid-template-rows: 32rem 151.4rem 52.4rem 0.1rem;
  row-gap: 9.6rem;
  grid-template-areas: "hero    hero     hero"
 "...   project-cards  ..."
 "...  project-type-cards ..."
 "...   .......     ...";
}

@media screen and (min-width: 768px) {
  main.__graphic-design {
    grid-template-rows: 25.2rem 100.4rem 42.4rem 0.1rem;
    row-gap: 12rem;
    grid-template-areas: "...     hero      ..."
 "...   project-cards  ..."
 "...  project-type-cards ..."
 "...       ...     ...";
  }
}

@media screen and (min-width: 1120px) {
  main.__graphic-design {
    row-gap: 16rem;
    grid-template-rows: 25.2rem 47.8rem 30.8rem 0.1rem;
    grid-template-areas: "hero"
 "project-cards"
 "project-type-cards"
 ".";
  }
}

main.__graphic-design .shared__hero {
  grid-area: hero;
}

main.__graphic-design .project-type-cards {
  grid-area: project-type-cards;
}

main.__graphic-design .project-cards {
  grid-area: project-cards;
}

main.__locations {
  grid-template-rows: 222.2rem 0.1rem;
  row-gap: 12rem;
  grid-template-areas: "map-cards    map-cards     map-cards"
 "...       ...       ...";
}

@media screen and (min-width: 768px) {
  main.__locations {
    grid-template-rows: 227.5rem 0.1rem;
    grid-template-areas: "...     map-cards      ..."
 "...       ...       ...";
  }
}

@media screen and (min-width: 1120px) {
  main.__locations {
    row-gap: 16rem;
    grid-template-rows: 104.2rem 0.1rem;
    grid-template-areas: "map-cards"
 "      .       ";
  }
}

main.__locations .map-cards {
  grid-area: map-cards;
}

main.__contact {
  grid-template-rows: 76.4rem 118.8rem 0.1rem;
  row-gap: 12rem;
  grid-template-areas: "form           form          form"
 ".........   location    ........."
 "...             ...           ...";
}

@media screen and (min-width: 768px) {
  main.__contact {
    grid-template-rows: 71.1rem 123rem 0.1rem;
    grid-template-areas: "...     form      ..."
 ".........    location     ........."
 "...       ...       ...";
  }
}

@media screen and (min-width: 1120px) {
  main.__contact {
    row-gap: 16rem;
    grid-template-rows: 48rem 36.4rem 0.1rem;
    grid-template-areas: "form"
 "location"
 "      .       ";
  }
}

main.__contact .form-container {
  grid-area: form;
}

main.__contact .location-cards {
  grid-area: location;
}

button,
.button {
  font-family: 'Jost', sans-serif;
  width: 15.2rem;
  height: 5.6rem;
  line-height: 5.6rem;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  font-weight: var(--f500);
  border-radius: 0.8rem;
  z-index: 500;
  text-transform: uppercase;
}

button.light,
.button.light {
  background: var(--white);
  color: var(--dark-grey);
}

button.dark,
.button.dark {
  background: var(--peach);
  color: var(--white);
}

button:hover,
button .light:hover,
button .dark:hover,
.button:hover,
.button .light:hover,
.button .dark:hover {
  cursor: pointer;
  background: var(--light-peach);
  color: var(--white);
}

header {
  height: 9.6rem;
  width: 100%;
  max-width: 1111px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.4rem;
  position: relative;
  z-index: 50;
  background: var(--white);
}

@media screen and (min-width: 768px) {
  header {
    height: 15.5rem;
    padding: 0 3.9rem;
  }
}

@media screen and (min-width: 1120px) {
  header {
    padding: 0;
  }
}

.logo-container {
  flex: 0 0 auto;
  max-width: 20.2rem;
}

.logo-container img {
  width: 100%;
}

nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  height: 100%;
}

.menu-button {
  margin-top: -5px;
  width: 2.4rem;
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.menu-button span {
  height: 0.4rem;
  width: 100%;
  background: var(--black);
  transition: all 250ms ease-in-out;
  transform-origin: 0.9px 2px;
}

.menu-button span:not(:nth-child(3)) {
  margin-bottom: 0.4rem;
}

@media screen and (min-width: 768px) {
  .menu-button {
    display: none;
  }
}

span.clicked:nth-child(1) {
  transform: rotate(45deg);
}

span.clicked:nth-child(2) {
  transform: scale(0.1, 0.1);
  opacity: 0;
}

span.clicked:nth-child(3) {
  transform: rotate(-45deg);
}

.navigation-links {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 23.5rem;
  padding: 4.8rem 2.5rem;
  position: absolute;
  top: 9.6rem;
  right: 0;
  left: 0;
  background: var(--dark-grey);
  transform-origin: 0 0;
  opacity: 0;
  transition: all 250ms ease-in-out;
}

@media only screen and (max-width: 768px) {
  .navigation-links.inactive {
    user-select: none;
    transform: scale(1, 0.3);
  }
  .navigation-links.inactive * {
    user-select: none;
    pointer-events: none;
  }
}

.navigation-links.active {
  transform: scale(1, 1);
  opacity: 1;
}

.navigation-links a:hover {
  text-decoration: underline;
}

.navigation-links a:not(:nth-child(3)) {
  margin-bottom: 3.2rem;
}

@media screen and (min-width: 768px) {
  .navigation-links a:not(:nth-child(3)) {
    margin-bottom: unset;
    margin-right: 4.2rem;
  }
}

@media screen and (min-width: 768px) {
  .navigation-links {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    position: unset;
    opacity: 1;
    top: unset;
    left: unset;
    right: unset;
    color: var(--black);
    height: auto;
    width: auto;
    background: transparent;
    padding: 0;
  }
}

.dark-backdrop {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--black);
  transform-origin: 0 0;
  transform: scale(1, 1);
  opacity: 0.8;
  transition: all 200ms ease-in-out;
}

.dark-backdrop.inactive {
  user-select: none;
  opacity: 0;
  transform: scale(1, 0);
}

@media screen and (min-width: 768px) {
  .dark-backdrop {
    background: transparent;
    display: none;
    user-select: none;
  }
}

.project-type-cards {
  row-gap: 2.4rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(autofill, 25rem);
}

@media screen and (min-width: 768px) {
  .project-type-cards {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(autofill, 20rem);
  }
}

@media screen and (min-width: 1120px) {
  .project-type-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    column-gap: 3rem;
  }
}

.project-type-card {
  grid-column: 1/2;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

.project-type-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--black);
  z-index: -1;
  opacity: 0.7;
  border-radius: 1.5rem;
}

.project-type-card:hover::after {
  background: var(--peach);
}

.project-type-card:hover {
  cursor: pointer;
}

.project-type-card .text-container {
  color: var(--white);
}

.project-type-card .text-container .project-card__title {
  margin-bottom: 1.2rem;
}

@media screen and (min-width: 768px) {
  .project-type-card .text-container .project-card__title {
    margin-bottom: 2.4rem;
  }
}

.project-type-card .text-container .discriptor {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.project-type-card .text-container .discriptor img {
  margin-left: 1.8rem;
}

.project-type-card .img-container {
  position: absolute;
  object-fit: cover;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.project-type-card .img-container img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 1.5rem;
}

@media screen and (min-width: 1120px) {
  .project-type-card:nth-child(2) {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  .project-type-card:not(:nth-child(2)) {
    grid-column: 2/3;
  }
  .project-type-card:last-child:not(:nth-child(4)) {
    grid-row: 1/3;
  }
}

footer::before {
  content: '';
  grid-column: 1/4;
  grid-row: 2/16;
  background: var(--black);
  z-index: -1;
}

@media screen and (min-width: 768px) {
  footer::before {
    grid-column: 1/6;
    grid-row: 2/10;
  }
}

.call-to-action {
  background: var(--peach);
  border-radius: 1.5rem;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: center;
  padding: 6.4rem 0;
  position: relative;
  overflow: hidden;
}

.call-to-action *:not(img) {
  z-index: 5;
}

@media screen and (min-width: 768px) {
  .call-to-action {
    padding: 5.7rem 0;
  }
}

@media screen and (min-width: 1120px) {
  .call-to-action {
    padding: 7.1rem 9.6rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }
}

.call-to-action .text-container h1 {
  padding-bottom: 1.6rem;
  width: 27.9rem;
  text-align: center;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .call-to-action .text-container h1 {
    padding-bottom: 1.3rem;
    width: 28.7rem;
    line-height: 4rem;
  }
}

@media screen and (min-width: 1120px) {
  .call-to-action .text-container h1 {
    text-align: left;
    width: 26.9rem;
    margin-left: unset;
  }
}

.call-to-action .text-container p {
  width: 27.9rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .call-to-action .text-container p {
    width: 43.3rem;
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 1120px) {
  .call-to-action .text-container p {
    text-align: left;
    width: 43rem;
  }
}

.call-to-action img {
  user-select: none;
  position: absolute;
  top: 50%;
  transform: translate(4%, -50%);
}

@media screen and (min-width: 768px) {
  .call-to-action img {
    transform: translateX(5%);
  }
}

@media screen and (min-width: 768px) {
  .call-to-action img {
    right: 0;
    transform: translate(0%, -50%);
  }
}

footer .logo-container {
  margin: auto;
}

@media screen and (min-width: 768px) {
  footer .logo-container {
    margin: 0;
  }
}

footer span.divider {
  height: 1px;
  background: var(--white);
  opacity: 0.1;
}

footer .links {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: center;
}

@media screen and (min-width: 768px) {
  footer .links {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
  }
  footer .links li:not(:nth-last-child(1)) {
    margin-right: 4.2rem;
  }
}

footer .links li:hover {
  cursor: pointer;
}

footer .address {
  color: var(--light-grey);
  text-align: center;
}

footer .address p:nth-child(1) {
  font-weight: var(--f600);
}

@media screen and (min-width: 768px) {
  footer .address {
    text-align: left;
  }
}

footer .contact {
  color: var(--light-grey);
  text-align: center;
}

footer .contact p:nth-child(1) {
  font-weight: var(--f600);
}

@media screen and (min-width: 768px) {
  footer .contact {
    text-align: left;
  }
}

footer .socialMedia-icons {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  footer .socialMedia-icons {
    justify-content: flex-end;
    align-items: flex-end;
  }
}

.footer-social-icon:hover {
  fill: var(--light-peach);
  cursor: pointer;
}

footer .socialMedia-icons a:not(:nth-last-child(1)) {
  margin-right: 1.6rem;
}

.hero__shared-banner {
  background: var(--peach);
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: center;
  padding: 6.4rem 0;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .hero__shared-banner {
    padding: 5.7rem 0;
    border-radius: 1.5rem;
  }
}

.hero__shared-banner .text-container {
  margin: auto;
}

.hero__shared-banner .text-container h1 {
  padding-bottom: 1.6rem;
  width: 27.9rem;
  text-align: center;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .hero__shared-banner .text-container h1 {
    padding-bottom: 1.3rem;
    width: 28.7rem;
    line-height: 4rem;
  }
}

@media screen and (min-width: 1120px) {
  .hero__shared-banner .text-container h1 {
    width: 38rem;
  }
}

.hero__shared-banner .text-container p {
  width: 27.9rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .hero__shared-banner .text-container p {
    width: 43.3rem;
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 1120px) {
  .hero__shared-banner .text-container p {
    width: 41rem;
  }
}

.hero__shared-banner img {
  position: absolute;
  top: 50%;
  transform: translate(4%, -50%);
}

@media screen and (min-width: 768px) {
  .hero__shared-banner img {
    transform: translateX(5%);
  }
}

@media screen and (min-width: 768px) {
  .hero__shared-banner img {
    right: 0;
    transform: translate(0%, -50%);
  }
}

.project-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto-fit, 47.8rem);
  row-gap: 4rem;
}

@media screen and (min-width: 768px) {
  .project-cards {
    grid-template-rows: repeat(auto-fit, 31rem);
  }
}

@media screen and (min-width: 1120px) {
  .project-cards {
    grid-template-rows: repeat(2, 47.8rem);
    grid-template-columns: repeat(3, 35rem);
    gap: 3.2rem 3rem;
  }
}

.project-card {
  border-radius: 1.5rem;
  margin: 0 auto;
  max-width: 32.7rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  background: #FDF3F0;
  overflow: hidden;
}

.project-card:hover {
  background: var(--peach);
  cursor: pointer;
}

.project-card:hover .text-container p, .project-card:hover .text-container h3 {
  color: white;
}

@media only screen and (min-width: 768px) and (max-width: 1110px) {
  .project-card {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    max-width: 68.9rem;
  }
}

@media screen and (min-width: 1120px) {
  .project-card {
    max-width: unset;
  }
}

.project-card .img-container {
  flex: 0 0 0;
  height: 32rem;
}

@media only screen and (min-width: 768px) and (max-width: 1110px) {
  .project-card .img-container {
    flex: 0 0 50%;
  }
}

.project-card .img-container img {
  width: 100%;
}

.project-card .text-container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  flex: 1 0 auto;
  text-align: center;
  padding: 0 4rem;
}

@media only screen and (min-width: 768px) and (max-width: 1110px) {
  .project-card .text-container {
    flex: 0 0 50%;
  }
}

.project-card .text-container h3 {
  color: var(--peach);
  text-transform: uppercase;
  flex-grow: 0;
  padding-bottom: 1.6rem;
}

.project-card .text-container p {
  flex-grow: 0;
}

.about-cards,
.location-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto-fill, 36.4rem);
  gap: 8rem;
}

@media screen and (min-width: 768px) {
  .about-cards,
  .location-cards {
    gap: 3.2rem;
  }
}

@media screen and (min-width: 1120px) {
  .about-cards,
  .location-cards {
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column: 1/2;
    gap: 3rem;
  }
}

.about-cards .about-card,
.about-cards .location-card,
.location-cards .about-card,
.location-cards .location-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 20.2rem 1fr;
  row-gap: 4.8rem;
  justify-items: center;
}

.about-cards .about-card .text-container h3, .about-cards .about-card .text-container p,
.about-cards .location-card .text-container h3,
.about-cards .location-card .text-container p,
.location-cards .about-card .text-container h3,
.location-cards .about-card .text-container p,
.location-cards .location-card .text-container h3,
.location-cards .location-card .text-container p {
  text-align: center;
}

.about-cards .about-card .text-container h3,
.about-cards .location-card .text-container h3,
.location-cards .about-card .text-container h3,
.location-cards .location-card .text-container h3 {
  margin-bottom: 3.4rem;
}

.about-cards .about-card .img-container,
.about-cards .location-card .img-container,
.location-cards .about-card .img-container,
.location-cards .location-card .img-container {
  height: 20.2rem;
  width: 20.2rem;
  position: relative;
}

.about-cards .about-card .img-container img,
.about-cards .location-card .img-container img,
.location-cards .about-card .img-container img,
.location-cards .location-card .img-container img {
  position: absolute;
}

.about-cards .location-card h3,
.location-cards .location-card h3 {
  text-transform: uppercase;
}

.about-cards .location-card button,
.location-cards .location-card button {
  margin-top: -2.6rem;
}

@media screen and (min-width: 768px) {
  .about-cards .location-card button,
  .location-cards .location-card button {
    margin-top: -7.6rem;
  }
}

@media screen and (min-width: 1120px) {
  .about-cards .location-card button,
  .location-cards .location-card button {
    margin-top: -5.6rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1110px) {
  .about-cards .about-card,
  .location-cards .about-card {
    grid-template-columns: 20.2rem 1fr;
    grid-template-rows: 1fr;
    column-gap: 4.8rem;
    align-items: center;
  }
  .about-cards .about-card .text-container h3, .about-cards .about-card .text-container p,
  .location-cards .about-card .text-container h3,
  .location-cards .about-card .text-container p {
    text-align: left;
  }
  .about-cards .about-card .text-container h3,
  .location-cards .about-card .text-container h3 {
    margin-bottom: 1.6rem;
  }
}

main {
  position: relative;
}

main .leaf-image {
  display: none;
}

@media screen and (min-width: 1120px) {
  main .leaf-image {
    display: unset;
  }
}

.leaf-image {
  z-index: -50;
  position: absolute;
}

main.__home .leaf-image.top {
  top: 47.6rem;
  left: -16.4rem;
  transform: translate(0, -30%);
}

main.__home .leaf-image.bottom {
  transform: rotate(180deg);
  bottom: -13rem;
  right: -16.4rem;
}

main.__about .leaf-image.top {
  top: 47.6rem;
  left: -16.4rem;
  transform: translate(0, -30%);
}

main.__about .leaf-image.bottom {
  transform: rotate(180deg);
  bottom: 47rem;
  right: -55.4rem;
}

main.__contact .leaf-image.bottom {
  transform: rotate(180deg);
  bottom: -19rem;
  right: -16.4rem;
}

main.__web-design .leaf-image.top,
main.__app-design .leaf-image.top,
main.__graphic-design .leaf-image.top {
  top: 26.6rem;
  left: -16.4rem;
  transform: translate(0, -30%);
}

.home__hero {
  background: var(--peach);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 8rem 11.8rem 1.4rem 10rem 2.4rem 5.6rem 1fr;
  grid-template-areas: "....."
 "title"
 "....."
 "context"
 "....."
 "button"
 ".....";
  justify-items: center;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .home__hero {
    border-radius: 1.5rem;
    grid-template-rows: 6.1rem 13.7rem 3.6rem 7.1rem 2.6rem 5.6rem 1fr;
    grid-template-areas: "....."
 "title"
 "....."
 "context"
 "....."
 "button"
 ".....";
  }
}

@media screen and (min-width: 1120px) {
  .home__hero {
    grid-template-rows: 14.5rem 13.7rem 3.7rem 7.1rem 4.7rem 5.6rem 14.5rem;
    grid-template-columns: 9.5rem 47.5rem 1fr;
    grid-template-areas: "...    ...   ..."
 "...  title   ..."
 "...   ...    ..."
 "... context  ..."
 "...   ...    ..."
 "...  button  ..."
 "...   ...    ...";
    justify-items: left;
  }
}

.home__hero .hero__title {
  grid-area: title;
}

.home__hero .hero__context {
  grid-area: context;
}

.home__hero .hero__button {
  grid-area: button;
}

.home__hero .hero__title,
.home__hero .hero__context,
.home__hero .hero__button {
  z-index: 5;
}

.home__hero .hero__title,
.home__hero .hero__context {
  color: var(--white);
  max-width: 32.7rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .home__hero .hero__title {
    max-width: 57.3rem;
  }
}

@media screen and (min-width: 1120px) {
  .home__hero .hero__title {
    max-width: 47.5rem;
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .home__hero .hero__context {
    max-width: 44.5rem;
  }
}

@media screen and (min-width: 1120px) {
  .home__hero .hero__context {
    max-width: 43.5rem;
    text-align: left;
  }
}

.home__hero .hero__bk-img {
  width: 64rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 0;
}

@media screen and (min-width: 768px) {
  .home__hero .hero__bk-img {
    left: unset;
    right: -8.5rem;
    top: 10.2rem;
    transform: translateY(0%);
  }
}

@media screen and (min-width: 1120px) {
  .home__hero .hero__bk-img {
    right: 0;
    left: unset;
    top: 0;
    transform: translateY(0%);
  }
}

.home__hero .hero__phone-img {
  position: absolute;
  bottom: -36rem;
  z-index: 0;
}

@media screen and (min-width: 1120px) {
  .home__hero .hero__phone-img {
    right: -8rem;
    bottom: -24rem;
  }
}

.about-info-card {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin: 0 auto;
  background: #FDF3F0;
  overflow: hidden;
  border-radius: 1.5rem;
}

.about-info-card.hero {
  background: var(--peach);
}

.about-info-card.hero .text-container {
  color: var(--white);
}

.about-info-card.hero .text-container h2 {
  color: inherit;
}

@media screen and (min-width: 1120px) {
  .about-info-card {
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .about-info-card.normal-row {
    flex-direction: row;
  }
}

.about-info-card__bk-image {
  opacity: 0.25;
  position: absolute;
  left: 0;
  bottom: -3rem;
  transform: rotate(180deg);
  user-select: none;
}

.about-info-card__bk-image.hero-bg-image {
  right: 0%;
  left: unset;
  top: 20rem;
  width: 29.2rem;
  opacity: 1;
  transform: none;
}

@media screen and (min-width: 768px) {
  .about-info-card__bk-image.hero-bg-image {
    right: unset;
    left: -10rem;
    top: -10rem;
    width: 64rem;
  }
}

@media screen and (min-width: 1120px) {
  .about-info-card__bk-image.hero-bg-image {
    left: 0;
    bottom: 0;
    top: unset;
  }
}

@media screen and (min-width: 1120px) {
  .about-info-card__bk-image {
    left: 0;
    bottom: 0;
    opacity: 0.2;
  }
  .about-info-card__bk-image.special-bg-image {
    left: 50%;
    transform: translate(-30%, 0) rotate(180deg);
  }
}

.about-info-card .img-container {
  width: 100%;
  height: 32rem;
  flex: 0 0 32rem;
}

@media screen and (min-width: 1120px) {
  .about-info-card .img-container {
    height: 100%;
    width: auto;
    flex: 0 0 47.6rem;
  }
}

.about-info-card .img-container img {
  width: 100%;
  height: 32rem;
  object-fit: cover;
  object-position: center;
}

@media screen and (min-width: 1120px) {
  .about-info-card .img-container img {
    height: 100%;
    width: auto;
    flex: 0 0 64rem;
  }
}

.about-info-card .text-container {
  width: 100%;
  width: 32.7rem;
  flex: 1 0 auto;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .about-info-card .text-container {
    width: 57.2rem;
  }
}

@media screen and (min-width: 1120px) {
  .about-info-card .text-container {
    align-items: flex-start;
    padding: 0 9.3rem;
  }
}

.about-info-card .text-container *:not(:nth-last-child(1)) {
  margin-bottom: 2.4rem;
}

.about-info-card .text-container h2 {
  color: var(--peach);
  font-weight: var(--f500);
}

@media screen and (min-width: 1120px) {
  .about-info-card .text-container h2 {
    text-align: left;
  }
}

.about-info-card .text-container p {
  text-align: center;
}

@media screen and (min-width: 1120px) {
  .about-info-card .text-container p {
    text-align: left;
  }
}

.map-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto-fit, 1fr);
  gap: 0.4rem;
}

@media screen and (min-width: 768px) {
  .map-cards {
    gap: 12rem;
  }
}

@media screen and (min-width: 1120px) {
  .map-cards {
    gap: 3rem;
  }
}

.map-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 32rem 39.4rem;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .map-card {
    gap: 3rem;
  }
}

@media screen and (min-width: 1120px) {
  .map-card {
    grid-template-columns: 73rem 1fr;
  }
  .map-card:nth-child(even) {
    grid-template-columns: 1fr 73rem;
  }
  .map-card:nth-child(even) .map {
    grid-column: 1/2;
  }
  .map-card:nth-child(even) .text-container {
    grid-column: 2/3;
  }
}

.map-card .map {
  grid-row: 1/2;
  width: 100%;
  height: 32rem;
  z-index: 0;
}

@media screen and (min-width: 768px) {
  .map-card .map {
    border-radius: 1.5rem;
  }
}

@media screen and (min-width: 1120px) {
  .map-card .map {
    grid-column: 2/3;
  }
}

.map-card .text-container {
  grid-row: 2/3;
  height: 100%;
  background: #FDF3F0;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

@media screen and (min-width: 768px) {
  .map-card .text-container {
    border-radius: 1.5rem;
    padding: 0 7.5rem;
    align-items: flex-start;
    text-align: left;
  }
}

@media screen and (min-width: 1120px) {
  .map-card .text-container {
    grid-row: auto;
    grid-column: 1/2;
  }
}

.map-card .text-container img {
  position: absolute;
  bottom: -50;
}

@media screen and (min-width: 1120px) {
  .map-card .text-container img {
    left: 0;
    bottom: 0;
  }
}

.map-card .text-container h1 {
  color: var(--peach);
  margin-bottom: 2.4rem;
}

.map-card .text-container .info-container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .map-card .text-container .info-container {
    flex-direction: row;
  }
}

.map-card .text-container .info-container .address {
  margin-bottom: 2.4rem;
}

@media screen and (min-width: 768px) {
  .map-card .text-container .info-container .address {
    margin-bottom: unset;
    margin-right: 11.1rem;
  }
}

.map-card .text-container .info-container .address p:nth-child(1), .map-card .text-container .info-container .contact p:nth-child(1) {
  font-weight: var(--f600);
}

main.__contact .form-container {
  background: var(--peach);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 7.2rem 2.4rem;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 1120px) {
  main.__contact .form-container {
    padding: 0 9.5rem;
    flex-direction: row;
    justify-content: space-between;
  }
}

main.__contact .form-container img.hero-img {
  position: absolute;
}

main.__contact .form-container img.hero-img:nth-child(1) {
  left: 50%;
  transform: translate(-35%);
}

main.__contact .form-container img.hero-img:nth-child(2) {
  display: none;
}

@media screen and (min-width: 768px) {
  main.__contact .form-container img.hero-img:nth-child(1) {
    display: none;
  }
  main.__contact .form-container img.hero-img:nth-child(2) {
    display: block;
    top: -5rem;
    left: -10rem;
  }
}

main.__contact .form-container .text-container {
  text-align: center;
  color: var(--white);
  margin-bottom: 4rem;
}

@media screen and (min-width: 768px) {
  main.__contact .form-container .text-container {
    text-align: left;
  }
}

@media screen and (min-width: 1120px) {
  main.__contact .form-container .text-container {
    max-width: 44.5rem;
  }
}

main.__contact .form-container .text-container h1 {
  margin-bottom: 2.4rem;
}

main.__contact .form-container .text-container p {
  max-width: 57.3rem;
}

main.__contact .form-container form {
  max-width: 57.3rem;
  width: 100%;
  display: flex;
  flex-flow: column;
}

@media screen and (min-width: 1120px) {
  main.__contact .form-container form {
    width: 38rem;
  }
}

main.__contact .form-container form input,
main.__contact .form-container form textarea {
  outline: none;
  border: none;
  background: none;
}

main.__contact .form-container form .form-item:nth-child(3) {
  margin-bottom: 4rem;
}

main.__contact .form-container form .form-item {
  width: 100%;
  position: relative;
  margin-bottom: 2rem;
  border-bottom: 1px solid white;
}

main.__contact .form-container form .form-item input,
main.__contact .form-container form .form-item textarea {
  width: 100%;
  height: 5rem;
  padding-left: 2rem;
  font-size: 1.5rem;
  color: white;
}

main.__contact .form-container form .form-item input:focus-within + label,
main.__contact .form-container form .form-item input:not(:placeholder-shown) + label,
main.__contact .form-container form .form-item textarea:focus-within + label,
main.__contact .form-container form .form-item textarea:not(:placeholder-shown) + label {
  transform: scale(0.7, 0.7) translate(-1rem, -3rem);
  opacity: 0.3;
}

main.__contact .form-container form .form-item label {
  font-size: 1.5rem;
  position: absolute;
  left: 2rem;
  bottom: 1.5rem;
  color: white;
  opacity: 0.5;
  transform: scale(1, 1);
  transition: transform 150ms ease-in-out;
}

main.__contact .form-container form .form-item span {
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  transform: scaleX(0);
  bottom: 0;
  left: 0;
  transform-origin: 0px 0px;
  transition: transform 150ms ease-in-out;
}

main.__contact .form-container form .form-item:focus-within span {
  transform: scaleX(1);
}

main.__contact .form-container form .form-item textarea {
  height: 8rem;
}

main.__contact .form-container form .form-item textarea + label {
  bottom: 6rem;
}

main.__contact .form-container form .form-item textarea:focus-within + label,
main.__contact .form-container form .form-item textarea:not(:placeholder-shown) + label {
  transform: scale(0.7, 0.7) translate(-2rem, -4rem);
}

main.__contact .form-container form .error {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 1rem;
  color: var(--white);
  transition: opacity 450ms ease;
  user-select: none;
}

main.__contact .form-container form .error img {
  width: 2rem;
  height: 2rem;
  margin-left: 0.8rem;
}

main.__contact .form-container form .error.false {
  opacity: 0;
}

main.__contact .form-container form .error.true {
  opacity: 1;
}

main.__contact .form-container form button {
  align-self: center;
}

@media screen and (min-width: 768px) {
  main.__contact .form-container form button {
    align-self: flex-end;
  }
}
/*# sourceMappingURL=masterstyle.css.map */