[data-theme-transition] .button,
[data-theme-transition] .bar,
[data-theme-transition] .nav-menu,
[data-theme-transition] .tertiary {
    transition: none !important;
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--background);
  font-family: 'Montserrat', sans-serif;
}

@font-face {
  font-family: Avenir-Light;
  src: url(Avenir/Avenir-Light-07.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Avenir-Roman;
  src: url(Avenir/Avenir-Roman-12.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Avenir-Medium;
  src: url(Avenir/Avenir-Medium-09.ttf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Avenir-Heavy;
  src: url(Avenir/Avenir-Heavy-05.ttf);
  font-weight: normal;
  font-style: normal;
}

.pt-serif-regular-italic {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: italic;
}

/* Tokens */
:root {
  /* Primitive Tokens */
  --color-grey-100: #f7f8f9;
  --color-grey-200: #e5e5e5;
  --color-grey-300: #dcdfe4;
  --color-grey-400: #cecece;
  --color-grey-500: #545964;
  --color-grey-600: #222526;
  --color-green-100: #43c54b;
  --color-green-200: #37a93f;
  --color-green-300: #1e5f22;
  --color-purple-100: #ed47a6;
  --color-purple-200: #986080;
  --color-black: #16191c;

  /* Light Semantic Tokens */
  --btn-primary: var(--color-green-200);
  --btn-primary-hover: var(--color-green-100);
  --btn-primary-shadow: var(--color-green-300);
  --btn-secondary-fill: var(--color-grey-100);
  --btn-secondary-shadow: var(--color-grey-200);
  --btn-secondary-fill-hover: var(--color-grey-200);
  --btn-secondary-shadow-hover: var(--color-grey-400);
  --btn-tertiary: var(--color-grey-600);
  --btn-tertiary-hover: var(--color-green-200);
  --btn-tertiary-pressed: var(--color-green-100);
  --divider: var(--color-green-200);
  --background: var(--color-grey-100);
  --background-secondary: var(--color-grey-300);
  --text-primary: var(--color-grey-600);
  --text-secondary: var(--color-grey-500);
  --logo: var(--color-green-200);

  /* Toggle Theme tokens */
  --toggle-width: 80px;
  --toggle-height: 40px;
  --toggle-padding: 4px;
  --toggle-bg-light: var(--background-secondary);
  --toggle-bg-dark: var(--background-secondary);
  --toggle-knob-size: 32px;
  --toggle-duration: 0.4s;
  --sun-color: #facc15; /* Yellow for sun */
  --moon-color: #6366f1; /* Purple for moon */

  /* Typography Tokens */

  /* Display */
  --display-font-family: "Montserrat", sans-serif;
  --display-font-weight: 800;

  --display-large-font-size: 90px;
  --display-medium-font-size: 70px;
  --display-small-font-size: 50px;

  /* Headline */
  --headline-font-family: "Montserrat", sans-serif;
  --headline-font-weight: 700;

  --headline-large-font-size: 64px;
  --headline-medium-font-size: 52px;
  --headline-small-font-size: 44px;

  /* Title */
  --title-font-family: "Avenir-Medium", sans-serif;
  --title-font-weight: normal;

  --title-large-font-size: 32px;
  --title-medium-font-size: 28px;
  --title-small-font-size: 24px;

  /* Headline Caption */
  --headline-caption-font-family: "PT Serif", serif;
  --headline-caption-font-weight: normal;
  --headline-caption-font-style: italic;

  --headline-caption-large-font-size: 24px;
  --headline-caption-medium-font-size: 20px;
  --headline-caption-small-font-size: 18px;

  /* Label */
  --label-font-family: "Avenir-Heavy", sans-serif;
  --label-font-weight: normal;

  --label-large-font-size: 16px;
  --label-medium-font-size: 15px;
  --label-small-font-size: 14px;

  /* Body Caption */
  --body-font-family: "Avenir-Roman", sans-serif;
  --body-font-weight: normal;

  --body-large-font-size: 20px;
  --body-medium-font-size: 18px;
  --body-small-font-size: 16px;

  --body-large-line-height: 28px;
  --body-medium-line-height: 26px;
  --body-small-line-height: 24px;

  /* SBody Caption */
  --sbody-font-family: "Avenir-Light", sans-serif;
  --sbody-font-weight: normal;

  --sbody-large-font-size: 16px;
  --sbody-medium-font-size: 14px;
  --sbody-small-font-size: 12px;

  /* Spacing tokens */

  /* Content-unit */
  --content-unit-padding-large: 128px 20px; /* For tablet and desktop */
  --content-unit-padding-small: 96px 20px; /* For mobile */

  --first-content-unit-padding-large: 208px 20px 128px; /* For tablet and desktop */
  --first-content-unit-padding-small: 176px 20px 96px; /* For mobile */
  --first-content-unit-padding-xsmall: 190px 20px 96px; /* For mobile after header logo change */

  --looking-for-more-work-margin-large: 128px auto 0; /* For desktop */
  --looking-for-more-work-margin-medium: 80px auto 0; /* For tablet */
  --looking-for-more-work-margin-small: 64px auto 0; /* For mobile */

  --looking-for-more-work-padding-large: 48px; /* For tablet and desktop */
  --looking-for-more-work-padding-small: 32px; /* For mobile */

  /* H2 */
  --h2-padding-large: 0 auto 32px; /* For tablet and desktop */
  --h2-padding-small: 0 auto 24px; /* For mobile */
}

/* Dark Tokens */
:root[data-theme="dark"] {
  /* Dark Mode Primitive Tokens */
  --color-grey-100: #1D2125; /* Background or darkest grey */
  --color-grey-200: #2C333A;
  --color-grey-300: #2A363D;
  --color-grey-400: #37464F;
  --color-grey-500: #BDBDBD; /* Secondary text or lighter grey */
  --color-grey-600: #EBEBEB; /* Primary text or lightest grey */
  --color-green-100: #72CF6D; /* Bright green for highlights or buttons */
  --color-green-200: #63AD5F;
  --color-green-300: #346732; /* Darker green for shadows or borders */
  --color-purple-100: #ED47A6; /* Highlight or accent color */
  --color-purple-200: #986080; /* Subtle purple for complementary designs */
  --color-black: #16191C; /* True black for background or deepest shadows */
}



/* ----------------------- */
/* Light/Dark Theme Toggle */
/* ----------------------- */

.toggle-container {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--background-secondary);
  border-radius: var(--toggle-height);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: var(--toggle-padding);
}

.toggle-knob {
  position: absolute;
  top: 50%;
  left: var(--toggle-padding);
  width: var(--toggle-knob-size);
  height: var(--toggle-knob-size);
  background: var(--text-primary);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: translate(0, -50%);
  transition: transform var(--toggle-duration);
}

.toggle-container[data-theme="dark"] .toggle-knob {
  transform: translate(calc(var(--toggle-width) - var(--toggle-knob-size) - 2 * var(--toggle-padding)), -50%);
}

.icon {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 1;
}

.icon img {
  width: 24px; /* Adjust as needed */
  height: 24px;
}

.sun-icon {
  left: 8px;
  color: var(--sun-color);
  opacity: 1;
  transition: opacity var(--toggle-duration);
}

.moon-icon {
  right: 8px;
  color: var(--moon-color);
  opacity: 0;
  transition: opacity var(--toggle-duration);
}

.toggle-container[data-theme="dark"] .sun-icon {
  opacity: 0;
}

.toggle-container[data-theme="light"] .sun-icon {
  opacity: 1;
  transition-delay: 0.3s; /* Delay the sun icon’s opacity transition */
}

.toggle-container[data-theme="dark"] .moon-icon {
  opacity: 1;
}

.toggle-container[data-theme="dark"] .moon-icon {
  opacity: 1;
  transition-delay: 0.3s; /* Delay the moon icon’s opacity transition */
}

/* --------------------------- */
/* END Light/Dark Theme Toggle */
/* --------------------------- */





/* --------------------- */
/* Responsive Typography */
/* --------------------- */

@media (min-width: 1024px) {
  /* Desktop */
  :root {
    --display-font-size: var(--display-large-font-size);
    --headline-font-size: var(--headline-large-font-size);
    --title-font-size: var(--title-large-font-size);
    --headline-caption-font-size: var(--headline-caption-large-font-size);
    --label-font-size: var(--label-large-font-size);
    --body-font-size: var(--body-large-font-size);
    --body-line-height: var(--body-large-line-height);
    --sbody-font-size: var(--sbody-large-font-size);
    --content-unit-padding: var(--content-unit-padding-large);
    --first-content-unit-padding: var(--first-content-unit-padding-large);
    --h2-padding: var(--h2-padding-large);
    --looking-for-more-work-margin: var(--looking-for-more-work-margin-large);
    --looking-for-more-work-padding: var(--looking-for-more-work-padding-large);

  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet */
  :root {
    --display-font-size: var(--display-medium-font-size);
    --headline-font-size: var(--headline-medium-font-size);
    --title-font-size: var(--title-medium-font-size);
    --headline-caption-font-size: var(--headline-caption-medium-font-size);
    --label-font-size: var(--label-medium-font-size);
    --body-font-size: var(--body-medium-font-size);
    --body-line-height: var(--body-medium-line-height);
    --sbody-font-size: var(--sbody-medium-font-size);
    --content-unit-padding: var(--content-unit-padding-large);
    --first-content-unit-padding: var(--first-content-unit-padding-large);
    --h2-padding: var(--h2-padding-large);
    --looking-for-more-work-margin: var(--looking-for-more-work-margin-medium);
    --looking-for-more-work-padding: var(--looking-for-more-work-padding-large);
  }
}

@media (max-width: 767px) {
  /* Mobile */
  :root {
    --display-font-size: var(--display-small-font-size);
    --headline-font-size: var(--headline-small-font-size);
    --title-font-size: var(--title-small-font-size);
    --headline-caption-font-size: var(--headline-caption-small-font-size);
    --label-font-size: var(--label-small-font-size);
    --body-font-size: var(--body-small-font-size);
    --body-line-height: var(--body-small-line-height);
    --sbody-font-size: var(--sbody-small-font-size);
    --content-unit-padding: var(--content-unit-padding-small);
    --first-content-unit-padding: var(--first-content-unit-padding-small);
    --h2-padding: var(--h2-padding-small);
    --looking-for-more-work-margin: var(--looking-for-more-work-margin-small);
    --looking-for-more-work-padding : var(--looking-for-more-work-padding-small);

  }
}

@media only screen and (max-width: 403px) {
  :root {
    --first-content-unit-padding: var(--first-content-unit-padding-xsmall);
  }
}


/* ------------------------- */
/* END Responsive Typography */
/* ------------------------- */




/* ------- */
/* Buttons */
/* ------- */

.button {
  padding: 16px 32px;
  border-radius: 4px;
  font-family: var(--label-font-family);
  font-weight: var(--label-font-weight);
  font-size: var(--label-font-size);
  transition: all 0.2s;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

.main {
  background-color: var(--btn-primary);
  color: var(--background);
  border: 2px solid var(--btn-primary-shadow);
  box-shadow: 0 4px 0px var(--btn-primary-shadow);
}

.main:hover {
  background-color: var(--btn-primary-hover);
}

.secondary {
  background-color: var(--btn-secondary-fill);
  color: var(--text-primary);
  border: 2px solid var(--btn-secondary-shadow);
  box-shadow: 0 4px 0px var(--btn-secondary-shadow);
}

.secondary:hover {
  background-color: var(--btn-secondary-fill-hover);
  border: 2px solid var(--btn-secondary-shadow-hover);
  box-shadow: 0 4px 0px var(--btn-secondary-shadow-hover);
}

.main:active, .secondary:active {
  box-shadow: none;
  transform: translate(0, 4px);
  transition: all .25s ease-in-out;
}

.tertiary {
  background: none;
  color: var(--btn-tertiary);
  font-family: var(--label-font-family);
  font-weight: var(--label-font-weight);
  font-size: var(--label-font-size);
  transition: all 0.2s;
  border: none;
  padding: 0;
  cursor: pointer;
}

.tertiary:hover {
  color: var(--btn-tertiary-hover);
  text-decoration: underline;
}

.tertiary:active {
  color: var(--btn-tertiary-pressed);
  text-decoration: underline;
}

.left-column-block .main {
  margin-right: 16px;
}

.example-img-block {
  display: flex;
  gap: 2em;
  margin: auto;
}

.example-img-column-block>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ----------- */
/* END Buttons */
/* ----------- */




/* ---------- */
/* Typography */
/* ---------- */

h1 {
  font-family: var(--display-font-family);
  font-weight: var(--display-font-weight);
  font-size: var(--display-font-size);
  color: var(--text-primary);
  margin-bottom: 16px;
}

h2 {
  font-family: var(--headline-font-family);
  font-weight: var(--headline-font-weight);
  font-size: var(--headline-font-size);
  color: var(--text-primary);
  margin: var(--h2-padding);
}

h3 {
  font-family: var(--title-font-family);
  font-weight: var(--title-font-weight);
  font-size: var(--title-font-size);
  color: var(--text-primary);
  margin-bottom: 16px;
}

h4 {
  font-family: var(--headline-caption-font-family);
  font-weight: var(--headline-caption-font-weight);
  font-size: var(--headline-caption-font-size);
  font-style: var(--headline-caption-font-style);
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 16px;
}

h5 {
  font-family: var(--label-font-family);
  font-weight: var(--label-font-weight);
  font-size: var(--label-font-size);
  color: var(--text-primary);
}

p {
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  font-size: var(--body-font-size);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--body-line-height);
}

.p2 {
  font-family: var(--sbody-font-family);
  font-weight: var(--sbody-font-weight);
  font-size: var(--sbody-font-size);
  color: var(--text-primary);
}

p strong {
  font-family: "Avenir-Heavy", sans-serif;
  color: var(--text-primary);
}

ul, li {
  color: var(--text-primary);
  padding-bottom: 16px;
}

.padding-bottom-xsmall {
  padding-bottom: 32px;
}

.padding-bottom-small {
  padding-bottom: 64px;
}

.no-padding-top {
  padding-top: 0 !important;
}

/* -------------- */
/* END Typography */
/* -------------- */




/* ----------------------- */
/* Content Unit Containers */
/* ----------------------- */

.hero-unit, .home-hero-container {
  padding: var(--first-content-unit-padding);
}

.home-hero-container {
  display: flex;
  min-height: 100vh;
}

.home-hero-unit {
  max-width: 1152px;
  align-items: center;
  margin: auto;
  display: flex;
  gap: 2em;
}

.content-unit, .home-content-unit {
  padding: var(--content-unit-padding);
  margin: auto;
}

.home-content-unit {
  max-width: 1520px;
}

.secondary-unit {
  background-color: var(--background-secondary);
}

.primary-unit {
  background-color: var(--background);
}

.text-container {
  max-width: 600px; 
  margin: auto;
}

.text-container-large {
  max-width: 800px; 
  margin: auto;
}

.divider {
  width: 100px;
  height: 3px;
  background-color: var(--divider);
  margin: 0 auto 48px;
}

.looking-for-work {
  margin: var(--looking-for-more-work-margin)
}

.case-image {
  max-width: 1170px;
  margin: auto;
;}

.case-image>img, .image-container>img {
  width: 100%;
}

.left-column-block {
  flex: 1;
}

.right-column-block {
  flex: 1;
  text-align: center;
}

.right-column-block>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.case-study-container {
  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 64px;
}

.image-container {
  position: relative;
  aspect-ratio: 16 / 9;
}

.divider-small, .divider-small-mobile {
  display: none;
  width: 100%;
  height: 1px;
  background-color: var(--background-secondary);
  margin-bottom: 32px;
}

/* --------------------------- */
/* END Content Unit Containers */
/* --------------------------- */


/* --------------------- */
/* All Case Studies Page */
/* --------------------- */


.all-case-studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px 32px;
}

.all-case-article img {
  width: 100%;
  object-fit: cover;
  background: #ddd;
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
}

/* ------------------------- */
/* END All Case Studies Page */
/* ------------------------- */



/* ------ */
/* Footer */
/* ------ */

.contact-new {
  gap: 1em;
  margin: auto;
}

footer, footer .p2 {
  background-color: #16191C;
  color: #BDBDBD !important;
}

footer h3, .social i {
  color: #EBEBEB !important;
}

.art>img {
  width: 100%;
}

.art {
  padding-top: 120px;
}

.row.primary {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch;
  gap: 15%;
  padding-left: 5%;
}

.column {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.contact {
  gap: 1em;
  margin: auto;
}

.contact p {
  text-align: justify;
  line-height: 2;
  margin: 0;
  color: #a7a7a7;
}

div.social {
  display: flex;
  font-size: 2em;
  flex-direction: row;
  gap: 1em;
}

.social i {
  color: #bac6d9;
}

.social i:hover {
  color: #959aa1;
}

/* ---------- */
/* END Footer */
/* ---------- */




/* ------ */
/* Header */
/* ------ */

.header-new {
  background-color: var(--background);
  position: fixed;
  width: 100%;
  z-index: 2;
}

.nav-container {
  display: flex;
  align-items: center;
  gap: 5em; 
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1520px;
    width: 100%;
    margin: auto;
    padding: 20px 20px;
    gap: 32px;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background);
    padding: 0;
}

.navbar>a,
.nav-item>a {
    text-decoration: none;
}

/* hamburger menu */
.hamburger {
  display: none;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #101010;
}

.hamburger .bar {
  background-color: var(--text-primary);
}

.nav-item {
    margin-left: 5em;
    list-style: none;
    padding: 0;
}

.nav-logo {
    font-size: 1.4em;
    font-weight: 600;
    color: #63AD5F;
}

.nav-logo:hover {
    color: #52904f;
    text-decoration: underline !important;
} 

/* ---------- */
/* END Header */
/* ---------- */




/* --------- */
/* Logo Grid */
/* --------- */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 8px auto 48px;
}

.single-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Ensures it spans the container */
  margin: 8px auto 48px;
}

.logo-item {
    width: 100%;
    aspect-ratio: 8 / 5;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.solo-item {
  width: calc((100% - (16px * 5)) / 6); 
}

/* ------------- */
/* END Logo Grid */
/* ------------- */




/* ------------ */
/* Contact Page */
/* ------------ */

input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 16px;
  border-radius: 4px;
  background-color: var(--background);
  border: 1px solid var(--text-secondary);
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  font-size: var(--body-font-size);
  color: var(--text-secondary);
}

form {
  text-align: left;
  font-family: 'Montserrat', Helvetica, sans-serif;
}

label {
  font-size: 18px;
}

/* ---------------- */
/* END Contact Page */
/* ---------------- */




/* ------------------ */
/* View More Projects */
/* ------------------ */

.view-more-projects-container {
  display: flex;
  gap: 2em;
}

.more-projects-grid-item>a>img:hover {
    opacity: 0.6;
    transition: opacity .25s ease-in-out;
}

.more-projects-grid-item {
    flex: 1;
    text-align: center;
}

.more-projects-grid-item>a>img {
    width: 100%;
    margin-bottom: 16px;
    aspect-ratio: 16 / 9;
}

.more-projects-grid-item>a {
    text-decoration: none;
}


/* ---------------------- */
/* END View More Projects */
/* ---------------------- */


/* ------------- */
/* @media 1023px */
/* ------------- */

@media (max-width: 1023px) {
  /* Logo Grid */
  .logo-grid {
      grid-template-columns: repeat(3, 1fr);
  }

  .solo-item {
    width: calc((100% - (16px * 2)) / 3); 
  }

  /* Homepage Case Studies */
  .case-study-container {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }

  /* Tablet Divider */
  .divider-small {
    display: block;
  }

  /* Remove 100vh on homepage hero */
  .home-hero-container {
    min-height: 0;
  }

  /* Header */
  .nav-container {
    gap: 4em;
  }

  .nav-container {
    gap: 4em;
  }

  .nav-item {
    margin-left: 4em;
  }

  /* Footer */
  div.social {
    font-size: 1.6em;
  } 

  .row.primary {
      padding-top: 32px;
  }

  .art {
      padding-top: 80px;
  }

  .contact-new {
    padding-bottom: 32px;
  }
}

/* ------------- */
/* @media 767px */
/* ------------- */

@media only screen and (max-width: 767px) {
  /* Full-width buttons */
  .main, .secondary {
    display: block;
    width: 100%;
  }  

  /* Change home hero and view more projects to one column */
  .home-hero-unit, .view-more-projects-container {
    flex-direction: column !important;
    align-items: center;
  }

  .left-column-block,
  .right-column-block {
      flex: none;
      width: 100%;
      margin: 0;
  }

  .left-column-block .main {
    margin-bottom: 16px;
  }

  /* Mobile Divider */
  .divider-small-mobile {
    display: block;
    margin: 0;
  }

  /* Header */
  .nav-menu {
      padding: 0;
      margin: 0;
      position: fixed;
      left: -100%;
      top: 4em;
      flex-direction: column;
      width: 100%;
      text-align: center;
      transition: 0.3s;
      box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.2);
  }

  /* All Case Studies */
  .all-case-studies-grid {
    grid-template-columns: 1fr;
  }

  .nav-menu.active {
      left: 0;
  }

  .nav-item {
      margin: 2.5em 0;
  }

  .hamburger {
      display: block;
      cursor: pointer;
  }

  .hamburger.active .bar:nth-child(2) {
      opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
      -webkit-transform: translateY(8px) rotate(45deg);
      transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
      -webkit-transform: translateY(-8px) rotate(-45deg);
      transform: translateY(-8px) rotate(-45deg);
  }

  .toggle-container {
      order: -1; /* Move to the left of the hamburger */
  }

  .nav-container {
      gap: 2em !important;
  }

  /* Footer */
  .row.primary {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 3em 0 0 5%;
  }

  .art {
      padding-top: 0px;
  }

  .example-img-block{
    flex-direction: column !important;
    align-items: center;
  }
}

/* Logo Grid */
@media (max-width: 500px) {
  .logo-grid {
      grid-template-columns: repeat(2, 1fr);
  }

  .solo-item {
    width: calc((100% - 16px) / 2); 
  }
}

/* Header Nav Menu - adjusted due to logo height change */
@media only screen and (max-width: 403px) {
  .nav-menu {
      top: 94px !important;
  }
}