:root {
  /* FONT */
  --ff-headings: "Darker Grotesque", sans-serif;
  --ff-text: "Inter", sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;

  /* COLORS */
  --clr-black: #202020;
  --clr-black-light: #495057;
  --clr-brown: #866d5c;
}

/* BELOW 1072px */
@media (max-width: 67em) {
  html {
    font-size: 50%;
  }

  .left-side,
  .right-side {
    padding: 0 3rem;
  }
}

/* BELOW 896px */
@media (max-width: 56em) {
  .heading-primary {
    font-size: 8rem;
  }

  .content-box p {
    font-size: 1.8rem;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    color: var(--clr-brown);
  }

  .main-nav-link:hover,
  .main-nav-link:active {
    color: #6e594c;
  }

  .btn-nav {
    background-color: var(--clr-black);
    color: #f8f3ed;
  }

  .btn-nav:hover {
    background-color: transparent;
    outline: 1px solid var(--clr-black);
    color: var(--clr-black);
  }

  .content-box {
    text-align: center;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .modal-text-1 {
    margin-top: 2rem;
  }
}

/* BELOW 592px */
@media (max-width: 37em) {
  .hamburger-menu {
    display: block;
  }

  .main-nav-ul {
    background-color: hsl(0, 0%, 0%, 0.6);
    backdrop-filter: blur(2rem);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    transform: translateX(100%);

    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in;

    gap: 4.8rem;

    opacity: 0;

    pointer-events: none;

    visibility: hidden;
  }

  .nav-open .icon-mobile-menu[name="close-outline"] {
    display: block;
    color: #fff;
  }

  .nav-open .icon-mobile-menu[name="menu-outline"] {
    display: none;
  }

  .nav-open .main-nav-ul {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);

    position: fixed;
    width: 100%;
    height: 100%;
  }

  .nav-open .main-nav-link {
    font-size: 2.4rem;
    color: #fff;
  }

  .modal-container {
    width: 60%;
  }

  .modal-text-1,
  .modal-text-2 {
    text-align: center;
  }
}

/* BELOW 384px */
@media (max-width: 24em) {
  .heading-primary {
    font-size: 7rem;
  }

  .modal-container {
    width: 80%;
  }
}