* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --main-color: #c9db76;
  --accent-color: #3b322b;
  --secondary-color: #988486;
  --light-font-color: #e4dede;
  --font-family-main: 'Pontano Sans', sans-serif;
  --font-family-second: adonis-web, sans-serif;
  overscroll-behavior: none;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
  height: 100%;
}
body {
  overflow-x: hidden;
  height: 100%;
}

/* Fonts */
@font-face {
  font-family: adonis-web;
  src: url(https://use.typekit.net/af/807888/00000000000000000001007d/27/l?subset_id=2&fvd=n4&v=3)
      format('woff2'),
    url(https://use.typekit.net/af/807888/00000000000000000001007d/27/d?subset_id=2&fvd=n4&v=3)
      format('woff'),
    url(https://use.typekit.net/af/807888/00000000000000000001007d/27/a?subset_id=2&fvd=n4&v=3)
      format('opentype');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: auto;
}
@font-face {
  font-family: adonis-web;
  src: url(https://use.typekit.net/af/d99a65/000000000000000000010080/27/l?subset_id=2&fvd=n7&v=3)
      format('woff2'),
    url(https://use.typekit.net/af/d99a65/000000000000000000010080/27/d?subset_id=2&fvd=n7&v=3)
      format('woff'),
    url(https://use.typekit.net/af/d99a65/000000000000000000010080/27/a?subset_id=2&fvd=n7&v=3)
      format('opentype');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  font-display: auto;
}
@font-face {
  font-family: adonis-web;
  src: url(https://use.typekit.net/af/0082da/00000000000000000001007f/27/l?subset_id=2&fvd=i4&v=3)
      format('woff2'),
    url(https://use.typekit.net/af/0082da/00000000000000000001007f/27/d?subset_id=2&fvd=i4&v=3)
      format('woff'),
    url(https://use.typekit.net/af/0082da/00000000000000000001007f/27/a?subset_id=2&fvd=i4&v=3)
      format('opentype');
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
  font-display: auto;
}
@font-face {
  font-family: adonis-web;
  src: url(https://use.typekit.net/af/4e9399/000000000000000000010081/27/l?subset_id=2&fvd=i7&v=3)
      format('woff2'),
    url(https://use.typekit.net/af/4e9399/000000000000000000010081/27/d?subset_id=2&fvd=i7&v=3)
      format('woff'),
    url(https://use.typekit.net/af/4e9399/000000000000000000010081/27/a?subset_id=2&fvd=i7&v=3)
      format('opentype');
  font-weight: 700;
  font-style: italic;
  font-stretch: normal;
  font-display: auto;
}

/* Main Page CSS */

.wrapper {
  height: 22.2rem;
  width: 100%;
  background: var(--main-color);
}
header {
  background: inherit;
  width: inherit;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
header.sticky {
  height: 17.6rem;
  position: fixed;
  z-index: 2;
  width: 100vw;
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
}
nav img {
  width: 35.2rem;
}
.links {
  display: flex;
  gap: 3rem;
  font-size: 1.8rem;
  font-family: var(--font-family-main);
}
.links a:link,
.links a:visited {
  color: var(--accent-color);
  text-decoration: none;
  position: relative;
}
.links a::before {
  content: '';
  position: absolute;
  bottom: -0.2rem;
  height: 0.1rem;
  width: 100%;
  transform: scaleX(0);
  background-color: var(--accent-color);
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.links a.expanding::before {
  transform: scaleX(1);
  transform-origin: left;
}
.links a.contracting::before {
  transform: scaleX(0);
  transform-origin: right;
}
.links a.active::before {
  transform: scaleX(1);
}
.main-article,
.second-article,
.collage,
.learn-more,
footer {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.main-article {
  height: 97rem;
  background-color: var(--light-font-color);
  font-style: italic;
}
.main-article h3 {
  font-size: calc(1.6rem * 1.6);
  font-weight: 300;
}
.main-article h1 {
  font-size: calc(4rem * 1.6);
  font-weight: 300;
}
.main-article img {
  width: 67.5rem;
}
.second-article {
  height: 93rem;
  background-color: var(--main-color);
  font-size: calc(1.6rem * 1.6);
  text-align: center;
}
.second-article img {
  height: 72.7rem;
  width: 54.5rem;
}
.article-content {
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 0 20rem;
}
.article-text {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  font-family: var(--font-family-second);
  transition: all 0.3s ease-in;
  transform: translateY(3rem);
  z-index: 1;
}

.second-article .article-text {
  align-items: center;
  width: 50rem;
}
.second-article .article-content {
  align-items: start;
}
.learn-more-btn {
  cursor: pointer;
  position: relative;
  height: 6.3rem;
  width: 18.8rem;
  background-color: var(--accent-color);
  border-radius: 3rem;
  color: #fff;
  letter-spacing: 0.1rem;
  font-size: 1.6rem;
  font-family: var(--font-family-main);
  border: 0.2rem solid var(--accent-color);
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease-in;
}
.learn-more-btn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  transform: scaleY(0);
  z-index: -1;
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.learn-more-btn:hover::before,
.learn-more-btn:focus::before {
  transform: scaleY(1);
}

.learn-more-btn:hover,
.learn-more-btn:focus {
  color: var(--accent-color);
}
.collage {
  background-color: var(--secondary-color);
  align-items: start;
  justify-content: space-around;
}
.collage img {
  max-width: 30%;
  padding: 9rem 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3rem);
  transition: all 0.3s ease-in;
}
.learn-more {
  background-color: var(--light-font-color);
  height: 34rem;
}
.learn-more-content {
  display: flex;
  background-color: var(--main-color);
  justify-content: space-between;
  align-items: center;
  width: 165rem;
  height: 19rem;
  padding: 10rem 13rem;
  font-size: calc(2.8rem * 1.6);
  color: #000;
  font-family: var(--font-family-second);
  letter-spacing: 0.1rem;
  font-weight: 700;
}
.learn-more-content button {
  position: relative;
  height: 5.5rem;
  width: 17rem;
  background-color: var(--secondary-color);
  border: 0.2rem solid var(--secondary-color);
  color: #fff;
  border-radius: 3rem;
  cursor: pointer;
  font-size: calc(0.9rem * 1.6);
  font-family: var(--font-family-main);
  letter-spacing: 0.1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease-in;
  transform: translateY(3rem);
  overflow: hidden;
}
.learn-more-content button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  transform: scaleY(0);
  z-index: -1;
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.learn-more-content button:hover::before,
.learn-more-content button:focus::before {
  transform: scaleY(1);
}
.learn-more-content button:hover,
.learn-more-content button:focus {
  color: var(--secondary-color);
}
footer {
  height: 20rem;
  background-color: var(--accent-color);
  color: var(--light-font-color);
  font-family: var(--font-family-main);
}
.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  transform: translateY(0rem) !important;
}
.learn-more-content p {
  transition: all 0.3s ease-in;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3rem);
}
.footer-wrapper {
  display: flex;
  justify-content: space-between;
  width: 40%;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease-in;
  transform: translateY(2rem);
}
.footer-text {
  font-size: 1.6rem;
  line-height: 3rem;
  letter-spacing: 0.05rem;
  margin-left: -32rem;
}
footer button {
  position: relative;
  font-size: 1.6rem;
  background-color: var(--main-color);
  color: var(--accent-color);
  border: 0.2rem solid var(--main-color);
  cursor: pointer;
  height: 6.3rem;
  width: 18rem;
  border-radius: 3rem;
  transition: all 0.3s ease-in;
  font-family: var(--font-family-main);
  letter-spacing: 0.1rem;
  overflow: hidden;
  z-index: 1;
}
footer button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--accent-color);
  transform: scaleY(0);
  z-index: -1;
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
footer button:hover::before,
footer button:focus::before {
  transform: scaleY(1);
}
footer button:hover,
footer button:focus {
  color: var(--main-color);
}

/* Products Page CSS */
.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3rem);
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.line-products {
  width: 100%;
  height: 0.1rem;
  background-color: var(--accent-color);
}
.main-section-products {
  width: 100%;
  background-color: var(--light-font-color);
  display: flex;
  justify-content: center;
  color: var(--accent-color);
  font-family: var(--font-family-main);
}
.wrapper-products {
  width: 59%;
  padding: 12rem 0;
}
.intro-products {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.7rem;
  font-size: 1.6rem;
}
.intro-products button {
  width: 17rem;
  height: 5.5rem;
  background-color: var(--accent-color);
  border: var(--accent-color) 0.2rem solid;
  border-radius: 3rem;
  color: var(--main-color);
  font-family: var(--font-family-main);
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease-in;
  overflow: hidden;
  z-index: 1;
}
.intro-products button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: var(--main-color);
  transform: scaleY(0);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: bottom;
  z-index: -1;
}
.intro-products button:hover::before,
.intro-products button:focus::before {
  transform: scaleY(1);
}
.intro-products button:hover,
.intro-products button:focus {
  color: var(--accent-color);
}
.intro-products h1,
.menu-products h2,
.find-us-products h1 {
  font-size: calc(4rem * 1.6);
  font-weight: 500;
  letter-spacing: 0.05rem;
  font-family: var(--font-family-second);
}
.menu-products {
  font-size: calc(0.9rem * 1.6);
  padding-bottom: 4.5rem;
}
.menu-products ul,
.intro-products p {
  line-height: calc(1.9rem * 1.6);
}
.menu-products ul {
  padding-left: 4rem;
}
.menu-products h2 {
  font-size: calc(2.8rem * 1.6);
  padding: 3.7rem 0;
}
.span-products {
  padding-top: 1.5rem;
}
.menu-products h3 {
  font-family: var(--font-family-second);
  font-weight: 400;
  font-size: calc(1.6rem * 1.6);
  padding: 3.2rem 0;
}
.find-us-products h1 {
  font-size: calc(2.8rem * 1.6);
  padding: 5rem 0;
}
.find-us-products h2 {
  font-size: calc(1.5rem * 1.6);
  font-weight: 400;
  padding-bottom: 4rem;
}
.market-link,
.market-link:visited {
  color: #000;
  text-decoration: none;
  font-size: calc(1rem * 1.7);
  position: relative;
  font-weight: 700;
}
.market-link:hover,
.market-link:active {
  opacity: 0.8;
}
.market-link::before {
  content: '';
  position: absolute;
  width: 100%;
  bottom: -0.1rem;
  height: 0.1rem;
  background-color: #000;
}
.market-link:hover::before,
.market-link:active::before {
  height: 0.2rem;
}
.maps {
  width: 100%;
  padding-top: 4rem;
}

/* Contact Page CSS */

.main-contact {
  width: 100%;
  min-height: 100vh;
  background-color: var(--light-font-color);
  display: flex;
  justify-content: center;
  font-family: var(--font-family-main);
  color: var(--accent-color);
  font-size: 1.6rem;
  line-height: calc(1.9rem * 1.6);
  letter-spacing: 0.05rem;
}
.main-contact-wrapper {
  display: flex;
  gap: 15rem;
  padding: 20rem 3.5rem;
}
.text-contact {
  width: 90%;
}
.text-contact h1 {
  font-size: calc(4rem * 1.6);
  font-family: var(--font-family-second);
  font-weight: 400;
  letter-spacing: 0.1rem;
  padding-bottom: 5rem;
  color: #111;
}
.form-contact {
  width: 100%;
}
.form-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
  row-gap: 2rem;
  padding-top: 1rem;
}
.cell input {
  width: 100%;
  height: 5.4rem;
  font-size: 1.8rem;
  padding: 1rem;
}
.cell:nth-child(3),
.cell:nth-child(4),
.cell:nth-child(5) {
  grid-column: 1/-1;
}
.required {
  opacity: 0.7;
  font-size: 1.4rem;
}
.smol {
  width: 30rem;
  margin: 4rem 0;
}
#message {
  width: 100%;
  height: 10rem;
  font-size: 1.8rem;
  font-family: var(--font-family-main);
  font-weight: 400;
  padding: 1rem;
}
#message:focus,
.cell input:focus {
  outline: 0.2rem solid #111;
  outline-offset: 0.3rem;
}
.text-contact p:nth-child(5) {
  padding: 2rem 0;
}
.bomboclaatbutton {
  height: 6.3rem;
  width: 13.7rem;
  border-radius: 3rem;
  border: 0.2rem solid #000;
  background-color: #000;
  color: #fff;
  font-size: 1.6rem;
  font-family: var(--font-family-main);
  letter-spacing: 0.1rem;
  cursor: pointer;
  z-index: 1;
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  transition: all 0.3s ease-in;
}
.bomboclaatbutton::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  transform: scaleY(0);
  transform-origin: bottom;
  z-index: -1;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.bomboclaatbutton:hover::before,
.bomboclaatbutton:focus::before {
  transform: scaleY(1);
}
.bomboclaatbutton:hover,
.bomboclaatbutton:focus {
  border: 0.2rem solid var(--secondary-color);

  color: var(--secondary-color);
}
button a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 6rem;
  text-decoration: none;
  color: inherit;
}
.odd-button a {
  line-height: 5.4rem;
}

/* Mobile nav settings */
.menu,
.close {
  height: 5rem;
  right: 0;
  position: absolute;
  cursor: pointer;
  stroke-width: 0.13rem;
  transition: all 0.3s ease-in;
  z-index: 4;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.showBtn {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transition: all 0.3s ease-in;
}
/* Media queries */
@media only screen and (max-width: 1550px) {
  .article-content {
    padding: 0 3rem;
  }
  .main-article {
    height: 80rem;
  }
  .learn-more-content {
    width: 95%;
    padding: 0 1rem;
    font-size: calc(2.4rem * 1.6);
  }
}
@media only screen and (max-width: 1200px) {
  html {
    font-size: 55%;
  }
  .article-content img {
    width: 70%;
  }
  .second-article img {
    width: 40%;
    height: auto;
    object-fit: contain;
  }
  .second-article .article-content {
    justify-content: center;
  }
  .learn-more-content p {
    font-size: calc(2rem * 1.6);
  }
  .footer-text {
    margin-left: initial;
  }
  .footer-wrapper {
    width: 80%;
  }
  footer,
  .main-article,
  .second-article,
  .collage,
  .learn-more {
    height: auto;
    padding: 6rem 0;
  }
  .collage img {
    padding: 0;
  }
  .wrapper-products {
    width: 80%;
    padding: 4rem 0;
  }
}

@media only screen and (max-width: 1000px) {
  .article-content h1 {
    font-size: calc(3rem * 1.6);
  }
  .article-content h3 {
    font-size: calc(1.4rem * 1.6);
  }
  nav {
    width: 90%;
  }
  .learn-more-content p {
    font-size: calc(1.6rem * 1.6);
  }
  nav {
    position: relative;
    z-index: 3;
  }
  .wrapper {
    height: 15rem;
  }
  header.sticky {
    height: 12.6rem;
  }
  .links {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 110vw;
    height: 120vh;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: all 0.3s ease-in;
    flex-direction: column;
    font-size: 4rem;
    align-items: end;
    padding-right: 10rem;
    padding-top: 20rem;
    margin-left: -10rem;
    margin-top: -10rem;
    touch-action: none;
  }
  .article-text img {
    width: 40%;
    height: auto;
    object-fit: contain;
  }
}
@media only screen and (max-width: 800px) {
  .article-content,
  .learn-more-content,
  .main-contact-wrapper {
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 3rem;
  }
  .article-text {
    gap: 3rem;
  }
  .links {
    margin-left: -8rem;
  }
  footer,
  .main-article,
  .second-article,
  .collage,
  .learn-more {
    padding: 2.5rem 0;
  }
  .learn-more-btn {
    margin-bottom: 2.5rem;
  }
  .learn-more-content p {
    font-size: calc(1.2rem * 1.6);
  }
  .second-article img {
    width: 90%;
  }
  .bomboclaatbutton {
    margin: 0 auto;
    margin-top: 2.5rem;
  }
  .main-contact-wrapper {
    padding: 6rem 0;
    width: 95%;
  }
  .contact-flex-wrapper {
    display: flex;
    flex-direction: column;
  }
  nav img {
    width: 30rem;
  }
  .article-content h1 {
    font-size: calc(2.5rem * 1.6);
  }
  .article-content h3 {
    font-size: calc(1.1rem * 1.6);
  }
  .second-article .article-text {
    width: auto;
    gap: 2.5rem;
  }
}
@media only screen and (max-width: 500px) {
  .footer-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .article-text {
    gap: 2rem;
  }
  footer {
    padding: 2rem 0;
  }
  .cell:nth-child(1),
  .cell:nth-child(2) {
    grid-column: 1/-1;
  }
  header.sticky {
    height: inherit;
  }
  .links {
    margin-left: -6rem;
  }
}