/*all visible items on page
on all pages*/
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background: #f4f7f2;
  color: #2f3e2f;
}

/*all h1 headers 
on all pages*/
body h1 {
  color: #3a5a40;
  margin:0;
  font-family: 'Patrick Hand', sans-serif;
  font-weight: 700;
  font-size: 7rem;
}

/* adjust h1 for mobile devices, makes smaller*/
@media (max-width: 768px) {
  body h1 {
    font-weight: 700;
    font-size: 4rem;
  }
}

/*all h2 headers
on all pages*/
body h2 {
  color: #3a5a40;
  margin: 0;
}

/*header style, insert background image
on all pages*/
header {
  text-align: right;
  background-image: url('images/cacao_slice.jpg');
  background-size: contain;
  width: 100%;
  aspect-ratio: 4032/637;
  background-position: center;
  background-repeat: no-repeat;
}

/*main section between header and footer
all pages*/
main {
  padding-bottom: 2rem;
  text-align: center;
}

/*footer
on all pages*/
footer {
  background: #9ec992;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/*general image style, if no other specs
on all pages*/
img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

/*not sure wht this does, really
on all pages*/
html {
  scroll-behavior: smooth;
}

/*headline moved down from header to top of main
on all pages*/
.headline {
  background: #9ec992;
  padding-top: 2rem;
  padding-bottom: 1rem;
  box-sizing: border-box;
}

.headline-top img {
  width: 6rem;
  height: auto;
}

/*wrapper for logo and h1*/
.headline-top {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  position: relative;
  left: -5rem;
}

/*move logo around for mobile*/
@media (max-width: 768px) {
  .headline-top {
    gap: 2rem;
    position: relative;
    left: -3rem;
  }

  .headline-top img {
    width: 4rem;
    height: auto;
  }
}

/* main style, wrapper for image and text,
on all pages */
.main-div {
  display: flex;
  padding: 2rem 18vw;
  gap: 4vw;
  align-items: center
}

/*same as before, but have image and text switch sides*/
.main-div.reverse {
  flex-direction: row-reverse;
}

/*wrapper for the image of the main-div*/
.main-img-box {
  justify-content: center;
}

/*image of main div, could probably remove general image styling above?*/
.main-img {
  width: 30vw;
  height: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/*wrapper for text of main div*/
.main-text {
  width: 30vw;
  hyphens: auto;
}

/*text headline of main div*/
.main-text h3 {
  text-align: center;
}

/*text of main div*/
.main-text p {
  text-align: justify;
}

/*text subsection titles*/
.main-text h4 {
  text-align: left;
}

/*lists of main div*/
.main-text ul {
  text-align: left;
}

/* adjust for mobile devices such that image above text, text not block and as wide as the phone screen*/
@media (max-width: 768px) {
  .main-div, .main-div.reverse {
    flex-direction: column;
    align-items: center;
  }

  .main-img, .main-text {
    width: 100%
  }

  .main-text p {
    text-align: center;
  }
}

/*wrapper for contact information grid 
on contact page*/
.Contacts {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 30px;
  justify-content: center;
  margin-bottom: 24px;
}

/*title for each contact item*/
.Contact h3 {
  text-align: center;
}

/*'text' for each contact item*/
.Contact p {
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* adjust for mobile devices that items are in a column*/
@media (max-width: 768px) {
  .Contacts {
    grid-template-columns: 1fr;
  }

  .Contact p {
    text-align: left;
  }
}

/*change size of google maps map for mobile
on contact page*/
@media (max-width: 768px) {
  iframe {
    width: max-content;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/*name styline ing About us section*/
.name {
  font-variant: small-caps;
  font-weight: 600;
  color: #3a5a40;
}