@charset "utf-8";
/* CSS Document */
/* Colors 
Dark Green 
•	rgba(75, 93, 53, 1)
Olive Green 
•	rgba(143, 140, 99, 1)
 Cream/Beige 
•	rgba(251, 214, 172, 1)
Golden Brown
rgba(163, 109, 33, 1)
Dark Brown rgba(74,42,10,1.00)
Orange
rgba(239, 144, 37, 1)
Bright Orange
rgba(250, 163, 35, 1)
Golden Yellow
rgba(247, 181, 42, 1)
Light Cream Yellow
rgba(254, 223, 157, 1)
Off-White / Very Light Cream
rgba(255, 245, 224, 1)
*/

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1400px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  background-color: rgba(255, 245, 224, 1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  background-color: rgba(255, 245, 224, 1);
  position: relative;
}

.logo img {
  height: 250px;
  width: auto;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.navbar ul li a {
  text-decoration: none;
  color: rgba(75, 93, 53, 1);
  font-weight: bold;
  transition: color 0.3s ease;
}

.navbar ul li a:hover,
.navbar ul li a.active {
  color: rgba(247, 181, 42, 1);
}

.jumbotron {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.jumbotron-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jumbotron-text h3,
.jumbotron-text p {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.jumbotron-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  color: rgba(51,25,1,1.00);
}

.jumbotron-text p {
	font-size: 1.4rem;
}


.section-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 30px;
  border: 2px solid rgba(75, 93, 53, 0.3);
  border-radius: 20px;
  background-color: rgba(251, 214, 172, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.section-container.reverse {
  flex-direction: row-reverse;
}

.section-container img.container-image {
  width: 30%;
  border-radius: 12px;
}

.section-container .text-content {
  display: flex;
  flex-direction: column;
  width: 60%;
}

.section-container h3 {
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: rgba(51,25,1,1.00);
}

.section-container p {
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(74, 42, 10, 1.00);
}

.section-container a {
  color: rgba(74, 42, 10, 1.00);
}

.section-container a:hover,
.section-container a.active {
  color: rgba(247, 181, 42, 1);
}
.section-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.daily-leaf {
  background-color: rgba(251, 214, 172, 0.3);
  border: 2px dashed rgba(75, 93, 53, 0.4);
  border-radius: 20px;
  padding: 40px 20px;
  margin: 60px 20px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.daily-leaf h3 {
  font-size: 1.8rem;
  color: rgba(74, 42, 10, 1);
  margin-bottom: 20px;
}

.daily-leaf p {
  font-size: 1.4rem;
  color: rgba(75, 93, 53, 1);
  font-style: italic;
  margin-bottom: 20px;
  min-height: 50px;
  transition: opacity 0.3s ease-in-out;
}

.daily-leaf button {
  background-color: rgba(247, 181, 42, 1);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.daily-leaf button:hover {
  background-color: rgba(75, 93, 53, 1);
}


/* Footer Styles */
.site-footer {
  background-color: rgba(75, 93, 53, 1);
  color: rgba(255, 255, 255, 1.00);
  padding: 20px 40px;
  margin-top: 60px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-left p {
  margin: 0;
  font-size: 0.9rem;
}

.footer-right a {
  color: #f5f5f5;
  margin-left: 20px;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-right a:hover {
  color: rgba(247, 181, 42, 1);
}


@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .footer-right a {
    margin: 0 10px;
  }
}

@media screen and (max-width: 768px) {
  .section-container,
  .section-container.reverse {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .section-container .text-content {
    width: 100%;
    align-items: center; 
	text-align: center;
  }

  .section-container img.container-image,
  .section-container p {
    width: 100%;
  }
}