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

html, body {
  font-family: 'Lora', serif;
}

body, header {
  background-color: #DED7B1;
}

/* Header Styling */

header {
  width: 100%;
  position: fixed;
  top: 0;
}

.navbar li {
  padding: 0.625em;  /* 10px */
}

.navbar li a {
  text-decoration: none;
  font-size: 1.25rem;  /* 20px */
} 

.nav-link:hover {
  cursor: pointer;
  opacity: 0.75;
  border-bottom: 0.125em solid #E08F62;
}

.shopping-cart-container {
  display: inline-block;
  position: relative;
}

.shopping-cart-count {
  position: absolute;
  bottom: -13px;
  right: -2px;
  z-index: 1;
  visibility: hidden;
}

/* Main Content Styling */

/* Section 1 */
.farm-food-intro-text {
  padding: 3.125em 1.875em;  /* 50px 30px */
  margin: 0 auto;
  margin-top: 9.375em; /* 150px */
  width: 90%;
}

.farm-food-intro-text p {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
}

.highlight {
  background-color: rgba(224, 143, 98, 0.5);
  padding: 0 0.3125em;  /* 0 5px */
}


/* Section 2 */
.section2-content {
  background-color: #9DAB86;
  width: 80%;
  margin: 0 auto;
}

.section2-content, .row-item {
  padding: 1.875em;
}

.row1, .row2, .row-item {
  display: flex;
  align-items: center;
}

.row1, .row2 {
  justify-content: center;
  padding: 0.625em;  /* 10px */
}

.row-item {
  justify-content: space-evenly;
}

.row-item img {
  margin-right: 1.875em;  /* 30px */
}


/* Section 3 */
.about-text {
  padding: 2.5em 3.125em;  /* 40px 50px */
  margin: 6.25em 0;  /* 100px 0px */
  text-align: center;
  width: 100%;
  font-size: 1.25rem;  /* 20px */
  font-style: italic;
}

.about-text p {
  margin-bottom: 0;
}

.nutrition-signup {
  width: 70%;
  margin: 6.25em auto;   /* 100px auto */
  padding: 2.5em;  /* 400px */
  text-align: center;
  border: 1px solid #E08F62;
}

.nutrition-signup h2, .nutrition-signup h3 {
  text-align: center;
  padding: 0.625em 0;  /* 10px 0px */
}

.signup-btn {
  background-color: #E08F62;
  border: none;
  border-radius: 100px;
  color: #ffffff;
  padding: 0.625em 3.125em;  /* 10px 50px */
  font-size: 1.125rem;  /* 18px */
  font-weight: bold;
  margin-top: 0.625em;  /* 10px */
}


/* Section 4 */
.section4-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 12.5em;  /* 200px */
  margin-bottom: 3.125em;  /* 50px */
  padding: 1.25em 0;  /* 20px 0px */
}

.section4-img {
  height: 500px;
  width: auto;
  border-radius: 15px;
}

.next-steps-list {
  width: 80%;
  padding: 0.625em 0;  /* 10px 0px */
  margin-bottom: 1.25em;  /* 20px */
}

.section4-title {
  padding: 0.9375em 0;  /* 15px 0px */
}

.list-item {
  list-style: none;
  text-align: left;
  font-size: 1.375rem;   /* 22px */
  padding: 0.5em 0;  /* 8px 0px */
}


/* Meet Team Page Styling */

.team-pics {
  margin-top: 8.125em;  /* 130px */
}

.founders-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}

.founders-text {
  margin-left: 3.125em;  /* 50px */
}

.founders-description, .meet-founders-title {
  text-align: left;
}


.meet-founders-title {
  padding-bottom: 0.9375em;   /* 15px */
}

.other-members {
  padding-top: 3.4375em;  /* 55px */
}

.members-text {
  padding-bottom: 3.4375em;  /* 55px */
  text-align: center;
  font-size: 1.25rem;  /* 20px */
}

.members-pics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.founders-img {
  height: 350px;
  width: auto;
  border-radius: 25px;
  border: 10px double #9DAB86;
  padding: 0.3125em;  /* 5px */
}

.member-img {
  height: 250px;
  width: auto;
  border-radius: 25px;
  border: 10px solid white;
  margin: 0.3125em;  /* 5px */
}



/* Contact Page Styling */

.contact-form-container{
  padding: 2em 0em;
  border: 2px solid #9DAB86;
  border-radius: 1em;
  margin: 10em 2em;
}

.contact-form-container h2 {
  text-align: center;
  padding: 0 0 1.25em 0; /* 0 0 20px 0 */
}
form input[type=text], form input[type=submit], form input[type=email], form label, form button, form textarea {
  display: block;
  margin: 0 auto;
  text-align: center;
 
}

form input[type=text], form input[type=email], form textarea {
  margin-bottom: 0.625em;  /* 10px */
  height: 2.5em;
  width: 80%;
}

form label {
  padding-top: 1.25em;  /* 20px */
}

textarea#message {
  height: 250px;
  resize: none;
  margin-top: 1.875em;   /* 30px */
}

.send-message-btn {
  background-color: #CC7351;
  border: none;
  border-radius: 100px;
  color: #ffffff;
  padding: 0.625em 3.125em;   /* 10px 50px */
  font-size: 1rem;    /* 16px */
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-top: 1.875em;   /* 30px */
}


/* Shop Styling */


.shopping-item {
  padding: 0.625em 1.25em;   /* 10px 20px */
}

.shopping-item:hover {
  background-color: #6D8B74;
  
}

.add-cart-btn {
  border: none;
  border-radius: 15px;
  padding: 0.625em 0.9375em;    /* 10px 15px */
  background-color: #58A0C8;
}

.add-cart-btn:hover {
  cursor: pointer;
  opacity: 0.75;
}


.shop-container {
  margin-top: 9.375em;   /* 150px */
}

.shop-header {
  text-align: center;
  font-size: 1.25rem;    /* 20px */
  font-weight: bold;
}

.shop-items {
  padding: 1.875em 0;    /* 30px 0px */
}

.item-img {
  height: 250px;
  width: 200px;
  border: 10px solid white;
}

.shop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.item-description {
  height: 350px;
  width: 350px;
  margin: 1.25em 0;    /* 20px 0px */
}

.item-title {
  padding-top: 0.3125em;    /* 5px */
}


/* Shopping Bag */

.cart-container {
  background-color: white;
  border: 2px solid #5F7161;
  border-radius: 15px;
  margin: 7.8125em auto 2.5em auto;   /* 125px auto 40px auto */
  width: 100%;
  padding: 1.25em;  /* 20px */
}

.cart-title, .cart-subtitle {
  text-align: center;
}

.cart-items-container {
  width: 80%;
  margin: 0 auto;
}

.cart-item-container {
  margin-top: 3.125em;    /* 50px */
  display: flex;
  justify-content: center;
  align-items: center;
}

.cart-item-details {
  margin-left: 1.25em;   /* 20px */
}

.cart-btns {
  margin-top: 0.9375em;   /* 15 px */
}

.cart-update-btn, .cart-remove-btn {
  padding: 0.3125em 0.625em;   /* 5px 10px */
  border: none;
  border-radius: 5px;
}

.cart-update-btn {
  margin-right: 0.3125em;  /* 5px */
  background-color: #D7D7D7;
}

.cart-remove-btn {
  margin-left: 0.3125em;   /* 5px */
  background-color: #E43636;
}

.cart-update-btn:hover {
  cursor: pointer;
  border: 1px solid black;
}

.cart-remove-btn:hover {
  cursor: pointer;
  border: 1px solid black;
}

.cart-quantity-input {
  width: 50%;
  text-align: center;
}

.pmt-btn-container {
  text-align: center;
  padding: 1.25em 0;    /* 20px 0px */
  display: none;
}

.go-to-pmt-btn {
  padding: 0.625em 0.9375em;    /* 10px 15px */
  background-color: #5F7161;
  border-radius: 5px;
  text-decoration: none;
  color: #EFEAD8;
}

.go-to-pmt-btn:hover {
  text-decoration: none;
  color: #EFEAD8;
  opacity: 0.85;
}

.img-container {
  height: 150px;
  width: 150px;
  background-image: url('/images/shop-pictures/artichokes.jpg');
  background-size: cover;
  border-radius: 5px;
}

.no-items {
  text-align: center;
}

.order-summary-container {
  text-align: center;
}

.order-summary-details {
  margin: 2.5em auto;   /* 40px auto */
  text-align: center;
}

.order-detail p {
  text-align: center;
}


/* Checkout Styling */

hr {
  color: black;
}

.checkout-container {
  text-align: center;
  background-color: white;
  padding: 2em 0em;
  border: 2px solid #9DAB86;
  border-radius: 1em;
  width: 100%;
  margin: 5em auto 10em auto;
  box-sizing: border-box;
}

.checkout-sub-container {
  border: 1px solid black;
  margin: 0 auto;     /* 0px 100px */
  padding: 0.625em 0;   /* 10px 0px */
}

.checkout-title {
  text-align: center;
  margin-top: 9.375em;     /* 150px */
}

input#promo {
  width: 50%;
}

.pickup-information-container {
  margin: 1.875em 0;    /* 30px 0px */
}

.summary-container {
  padding: 3.125em;    /* 50px */
  margin: 0 auto;
}

.summary-item {
  line-height: 0.75em;
  padding-left: 1.875em;   /* 30px */
  display: flex;
  justify-content: center;
  align-items: center;
}


.summary-item-name {
  margin-right: 0.3125em;   /* 5px */
}

.summary-item-price {
  margin-left: 0.3125em;   /* 5px */
}

.promo-btn {
  padding: 0.3125em 0.625em;    /* 5px 10px */
  background-color: #6D8B74;
  border: none;
  color: #EFEAD8;
}

.promo-btn:hover {
  opacity: 0.85;
}

.place-order-link {
  color: #EFEAD8;
  text-decoration:none;
  padding: 0.3125em 0.625em;    /* 5px 10px */
  background-color: #5F7161;
  margin: 0.625em 0;        /* 10px 0px */      
}

.place-order-link:hover {
  text-decoration: none;
  color: #EFEAD8;
  opacity: 0.85;
}


/* After Purchase Styling */

lottie-player {
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

.success-msg, .thank-you-msg {
  text-align: center;
}

.success-msg {
  margin-top: 3.125em;     /* 50px */
  font-size: 2rem;    /* 32px */
}

.thank-you-msg {
  margin-top: 1.875em;    /* 30px */
  font-size: 1.75rem;    /* 28px */
}

#animation {
  margin: 0 auto;
  text-align: center;
}

/* Footer Styling */

#footer {
  display: block;
  width: 100%;
  /* bottom: 0;
  left: 0;
  right: 0;
  margin: 0; */
}

.curve svg {
  display: block;
  margin-bottom: 0;
}


#footer .copyright {
  text-align: center;
  bottom: 0;
  background-color: #9DAB86;
  padding-bottom: 1.25em;   /* 20px */
}

#footer .newsletter {
  text-align: center;
  padding-bottom: 0.625em;   /* 10px */
  font-size: 1.25rem;      /* 20px */
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-top: 1.875em;    /* 30px */
}


#footer .section-2 {
  background-color: #9DAB86;
}

#footer .section-2 button {
  background-color: #CC7351;
  border: none;
  border-radius: 100px;
  color: #ffffff;
  padding: 0.625em 3.125em;   /* 10px 50px */
  text-align: center;  
  font-size: 1rem;     /* 16px */
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-top: 0.625em;     /* 10px */
}

.email-subscribe {
  margin: 0 auto;
  text-align: center;
  height: auto;
  width: 85%;
  padding-bottom: 3.125em;     /* 50px */
}

#footer .section-2 input[type=text] {
  width: 100%;
  padding: 0.75em 1.25em;   /* 12px 20px */
  margin: 0.5em 0;      /* 8px 0px */
  box-sizing: border-box;
}


/* Responsive Screen Styling */

@media (max-width: 480px) {
  .section4-container {
    display: block;
  }

  .section4-img{
    height: 350px;
    display: block;
    margin: 0 auto;
  }

  .section4-part2 {
    margin-left: 30px;
    margin-top: 10px;
  }

  .section4-title {
    text-align: center;
  }
 
  .next-steps-list {
    margin: 0 auto;
  }

  .row1, .row2 {
    display: block;
  }

  .row-item {
    justify-content: center;
  }

  .row-item img {
    height: 100px;
    width: 100px;
  }

  .email-subscribe {
    text-align: center;
  }


  .w3-input {
    width: 80%;
  }

  .founders-container {
    display: block;
    width: 100%;
  }

  .meet-founders-title, .founders-description {
    text-align: center;
  }

  .founders-text {
    text-align: center;
    margin: 20px auto 0 auto;
  }

  .founders-img {
    display: block;
    margin: 0 auto;
    height: 250px;
    width: auto;
  }

  .contact-form-container {
    width: 80%;
  }

  #contact-form {
    width: 100%;
  }

  #contact-form input, textarea#message {
    width: 80%;
  }

  /* .cart-btns {
    display: block;
    margin: 0 auto;
  } */

  /* .cart-item-description {
    display: flex;
    justify-content: space-between;
  } */

  p.cart-item-name, p.cart-item-price {
    text-align: center;
  }

  .cart-update-btn, .cart-remove-btn {
    font-size: 14px;
    margin-top: 10px;
    width: 100%;
  }

  .cart-remove-btn {
    margin-left: 0px;
  }

  .checkout-title {
    margin-top: 100px;
  }

  .checkout-sub-container {
    width: 80%;
  }

  .checkout-container h2 {
    margin-bottom: 10px;
  }

  .lottie-container {
    display: block;
    margin: 0 auto;
    height: 300px;
    width: 300px;
  }
}

@media (min-width: 480px) and (max-width: 768px) {
  .section4-part2 {
    margin-left: 30px;
  }

  .section2-content {
    width: 100%;
  }

  .founders-img {
    width: 350px;
    height: auto;
  }

  .checkout-sub-container {
    width: 80%;
  }

  .checkout-title {
    margin-top: 120px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .checkout-sub-container {
    width: 80%;
  }

  .checkout-container, .cart-container {
    width: 80%;
  }

  .checkout-title {
    margin-top: 120px;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
   .checkout-sub-container {
    width: 80%;
  }

  .checkout-container, .cart-container {
    width: 80%;
  }

  .checkout-title {
    margin-top: 120px;
  }
}

@media (min-width: 1281px) {
   .checkout-sub-container {
    width: 80%;
  }

  .checkout-container, .cart-container {
    width: 80%;
  }

  .checkout-title {
    margin-top: 120px;
  }

  .billing-info-form, .payment-information-form, .pickup-details-form {
    width: 50%;
    margin: 0 auto;
  }
}