@font-face {
  font-family: 'Gratina';
  src: url('Fonts/Gratina-VGw6Z.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
/*reset*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Montserrat';
    line-height: 1.25;
    color: #283618;
}

/*HERO SECTION*/
.hero{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(245, 245, 245, 0.7), rgba(255, 255, 255, 0.5));
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
}
.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container without distortion */
    z-index: -1; /* Pushes the image behind the hero content and the gradient */
}
/*navigation*/
nav {
    display: flex;
    padding: 0.2rem 5rem;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 1000;
    background-color: rgba(254, 250, 224, 0.4);
}
nav img {
    width: 11rem;
    height: auto;
    padding: 1rem;
}
.nav-links{
    display: flex;
    text-align: right;
}
.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 1rem 3rem;
    position: relative;
}
.nav-links ul li a{
    color: #283618;
    text-decoration: none;
    transition: color 0.3s ease;
}
.nav-links ul li a:hover, .nav-links ul li a.active {
    color: #bc6c25;
}

.hamburger, .close-icon {
    display: none;
}

/*header*/
.heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 5rem;
    /*width: ;*/
}
.heading h1{
    font-family: 'Gratina';
    font-size: clamp(5rem, 8vw, 10rem);
    color: #283618;
    font-weight: 400;
    margin: 3rem 0;
}
.heading p {
    font-family: 'Montserrat';
    font-size: clamp(1rem, 2.5vw, 2rem);
    font-weight: 550;
    color: #9a581f;
    margin-bottom: 4rem;
}
.btn {
    display: inline-block;
    background-color: #606c38;
    color: #fefae0;
    font-size: 1.2rem;
    font-weight: 400;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    width: auto;
}
.btn:hover {
    background-color: #bc6c25;
    border: 0.2rem solid #fefae0;
}

@media (max-width: 768px) {
  /*Hero Section Adjustments. The navigation bar elementsstack on top of each other.*/
  body {
    overflow-x: hidden;
  }

  .hero {
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  nav {
    display: flex; /* Stacks the logo and nav links vertically */
    justify-content: space-between;   /* Centers the items horizontally */
    align-items: center;
    padding: 1rem;      /* Adjusts padding for smaller screens */
  }

  nav img {
    width: 60%;
    max-width: 15rem;
    height: auto;
    padding: 0 0.5rem;
  }

  .hamburger {  /* This is the hamburger icon style */
    display: block;
    cursor: pointer;
    z-index: 1000;
  }

  .hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: #283618;
    margin: 0.25rem 1.5rem;
    transition: 0.4s;
  }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* Hides the menu off-screen to the right */
    width: 100%;
    height: 100vh;
    background-color: rgba(221, 161, 94, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.5s ease; /* Adds a smooth sliding animation */
    z-index: 999;
  }

  /* This class will be added with JavaScript to slide the menu into view */
  .nav-links.open {
    right: 0;
  }

  /* Styles for the close button inside the menu */
  .close-icon {
    display: none;
    position: absolute;
    top: 0.5rem;
    right: 1.5rem;
    font-size: 3rem;
    color: #fefae0;
    cursor: pointer;
    z-index: 1001;
    transition: opacity 0.3s ease; /*fade effect*/
  }

  .nav-links.open + .close-icon {
    display: block;
  }

  .nav-links.open ~ .hamburger {
    display: none;
  }

  /* Styles the links for the mobile menu */
  .nav-links ul {
    display: none;
    flex-direction: column;
    text-align: center;
  }

  .nav-links.open ul {
    display: flex; /*make links visible when menu is opne*/
  }

  .nav-links ul li {
    padding: 1rem;
    list-style: none;
  }

  .nav-links ul li a {
    font-size: 1rem;
    color: #283618;
  }

  .heading {
    padding: 0 3%;
  }

  .heading h1 {
    font-size: clamp(4rem, 10vw, 7rem);
    text-align: left;
    margin: 1rem;
    padding: 0.1rem 0.2rem;
  }

  .heading p {
    font-size: clamp(1rem, 10vw, 1.5rem);
    text-align: left; 
    margin: 1rem;
  }

  .btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    margin: 1rem 1.5rem;

  }
}

/*BENEFITS SECTION*/
.benefits {
    text-align: center;
    padding: 1rem 5rem;
    background-color: #fefae0;
}
.benefits h1 {
    font-family: 'gratina';
    font-size: 5rem;
    font-weight: 500;
    margin: 2rem 2rem;
    color: #606c38;
}
.benefits-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10rem;
}
.benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.benefit-item img {
    width: 5vw;   /* adjust size */
    height: auto;
    margin-bottom: 2rem;
}
.benefit-item p {
    font-size: 1.5rem;
    color: #bc6c25;
    font-weight: 550;
    margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  /* Benefits section adjustments */
  .benefits h1 {
    font-size: clamp(2rem, 10vw, 5rem); /* Reduces the title size for mobile */
    margin: 1rem 0; /* Adjusts margin */
  }

  .benefits-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Adds more vertical space between stacked items */
    padding: 0; /* Adds padding to the grid container */
  }

  .benefit-item img {
    width: 50%; /* Scales the image down to 75% of its container */
    height: auto;
  }

  .benefit-item p {
    font-size: clamp(1.5rem, 4vw, 3rem); /* Makes the paragraph text responsive */
    margin: 0 0 3rem;
  }
}

/*TESTIMONIALS SECTION*/
.testimonials {
    text-align: center;
    padding: 1rem 5rem;
    background-color: #283618;
}
.testimonials h1 {
    font-family: 'gratina';
    font-size: 5rem;
    font-weight: 500;
    margin: 2rem 2rem;
    color: #606c38;
}
.testimonial-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap; /* Makes it responsive */
}
.testimonial-box {
    flex: 1;
    margin: 2rem 2.5rem;
    max-width: 5000px;
    border: 0.25rem solid #bc6c25;
    border-radius: 20px;
    padding: 2rem 2rem;
    text-align: center;
    background: transparent;
}
.testimonial-box p {
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 1rem;
    color: #fefae0;
}
.testimonial-box h3 {
    font-size: 1rem;
    color: #606c38;
    font-weight: 700;
    padding-top: 3rem;
}

@media (max-width: 768px) {
  /*
  Testimonials Section Adjustments
  The padding and margins are reduced for better mobile viewing.
  */
  .testimonials {
    padding: 0.5rem 1rem; /* Reduced padding */
  }

  .testimonials h1 {
    font-size: clamp(2rem, 10vw, 5rem); /* Responsive heading size */
    margin: 1rem 0;
  }

  .testimonial-container {
    flex-direction: column; /* Stacks the testimonials vertically */
    padding: 1rem;
    gap: 1rem; /* Adds space between the stacked boxes */
  }

  .testimonial-box {
    margin: 0 0.5rem; /* Removes horizontal margin to prevent overflow */
    padding: 1rem; /* Reduces padding inside the box */
  }

  .testimonial-box p {
    font-size: clamp(1rem, 3vw, 2rem); /* Responsive paragraph size */
  }

  .testimonial-box h3 {
    font-size: clamp(1rem, 4vw, 2.5rem); /* Responsive name size */
    padding: 1rem;
  }
}

/*STATS SECTION*/
.stats-section {
    text-align: center;
    padding: 1rem 1rem;
    background-color: #bc6c25;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15rem; /*space between the two numbers*/
    padding: 0 0;
    margin: 0.2rem;
}
.stat h2 {
    font-size: 5rem;
    font-weight: bold;
    color: #fefae0;
}
.stat p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #283618;
    margin-bottom: 2rem;
}
.cta {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
  /*
  Stats Section Adjustments
  The grid now displays items in a single column to stack them.
  */
  .stats-section {
    padding: 0.5rem 0.5rem; /* Reduced padding for mobile */
    flex-direction: column;
    gap: 1rem;
  }

  .stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem; /* Drastically reduces horizontal padding to prevent overflow */
    gap: 0.5rem;
  }

  .stat h2 {
    font-size: clamp(4rem, 10vw, 8rem); /* Responsive font size for the numbers */
  }

  .stat p {
    font-size: clamp(1rem, 10vw, 1.5rem); /* Responsive font size for the text */
  }

  .cta {
   margin-top: 0.1rem;
  }
}

/*FOOTER SECTION*/
.footer {
    background-color: #283618;
    color: #fefae0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    align-items: center;
    padding: 1rem 5rem;
}
.footer-logo .logo {
    width: 11rem;
    height: auto;
    padding: 1rem;
}
.footer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    justify-content: space-between;
}

.footer-section h3 {
    font-size: 1.5rem;
    margin: 1rem;
    color: #fefae0;
}
.footer-section p {
    font-size: 1rem;
    margin: 0.5rem;
    color: #fefae0;
}

@media (max-width: 768px) {
  /*
  Footer Section Adjustments
  The footer now uses a column layout, and all large values are reduced.
  */
  .footer {
    display: flex;
    flex-direction: column; /* Stacks the footer content vertically */
    align-items: center; /* Centers items in the stacked layout */
    padding: 1.5rem 1.5rem; /* Reduced padding for mobile */
    gap: 1rem;
  }

  .footer-logo .logo {
    width: 75%;
    /*max-width: 20rem; Reduces the logo width for mobile screens */
    height: auto;
    padding: 1rem;
  }

  .footer-info {
    flex-direction: column; /* Stacks the info sections vertically */
    gap: 1rem; /* Reduces the massive gap to a more reasonable size */
  }
  
  .footer-section h3 {
    font-size: clamp(2rem, 5vw, 3rem); /* Responsive heading size */
    margin: 1rem 1rem;
  }

  .footer-section p {
    font-size: clamp(1.2rem, 3.5vw, 2rem); /* Responsive paragraph size */
    margin: 0.5rem 1rem;
  }
}

/*OUR WHY SECTION*/
.ow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* aligns top of text & image */
    gap: 2rem; /* space between left and right */
    padding: 2rem 5rem;
    background-color: #fefae0; /* adjust as needed */
  }
.ow-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ow h1 {
    font-size: 5rem;
    font-weight: 300;
    font-family: 'Gratina';
    margin-bottom: 1rem;
    color: #606c38; /* adjust */
}
.ow-left img {
    width: 20vw;
    max-width: 350px;  /* keeps portrait feel */
    height: auto;
    border-radius: 12px; /* optional for rounded corners */
    object-fit: cover;
}
.ow-right {
    flex: 2; /* gives text more space */
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.ow-right p {
    font-size: 1.5rem;
    font-family: 'Montserrat';
    line-height: 1.25;
    color: #283618; /* adjust */
    text-align: left;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
  /*
  The layout is changed from a row to a column to stack the image and text vertically.
  */
  .ow {
    flex-direction: column; /* Stacks items vertically on mobile */
    align-items: center; /* Centers items in the stacked layout */
    padding: 2rem 2rem; /* Adjusts padding for mobile */
    gap: 2rem; /* Reduces the gap between the image and text */
  }

  .ow-left {
    align-items: center; /* Centers the image */
  }

  .ow h1 {
    font-size: clamp(2rem, 10vw, 5rem); /* Makes the heading responsive */
    text-align: center;
    margin-bottom: 1rem;
  }

  .ow-left img {
    max-width: 50%; /* Ensures the image doesn't overflow */
    height: auto;
  }

  .ow-right {
    flex-direction: column; /* The text already stacks, but this ensures it */
    align-items: center;
  }

  .ow-right p {
    font-size: clamp(0.7rem, 4vw, 1.5rem); /* Makes the paragraph text responsive */
    text-align: center;
    margin-bottom: 1.5rem; /* Adjusts paragraph spacing */
  }
}

/*VALUES SECTION*/
.values-section {
  padding: 2rem 5rem;
  text-align: center;
  background-color: #283618; /* adjust as needed */
}
.values-section h2 {
  font-size: 5rem;
  font-weight: 300;
  font-family: 'gratina';
  margin-bottom: 1rem;
  color: #606c38;
}
.values-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin: 1rem 1rem;
}
.value-box {
  flex: 0 1 calc(50% - 1.5rem); /* 2 per row */
  border: 0.25rem solid #bc6c25;
  padding: 1rem 1rem;
  border-radius: 20px;
  background-color: transparent;
  max-width: 2000px;
  max-height: auto;
}
.value-box h3 {
  font-size: 2rem;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #bc6c25;
}
.value-box p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #fefae0;
  text-align: center;
  font-weight: 100;
}

@media (max-width: 768px) {
  /*
  The layout is changed to a single column, and font sizes/padding are reduced.
  */
  .values-section {
    padding: 2rem 1.5rem; /* Reduces overall padding for mobile */
  }

  .values-section h2 {
    font-size: clamp(2rem, 10vw, 5rem); /* Responsive heading size */
    margin-bottom: 1rem;
  }

  .values-container {
    flex-direction: column; /* Stacks the value boxes vertically */
    gap: 2rem; /* Reduces the gap between the stacked boxes */
  }

  .value-box {
    /* Removes the fixed width calculation so the boxes can take up the full width */
    flex: 1 1 100%;
    padding: 1rem; /* Reduces padding inside the box */
  }

  .value-box h3 {
    font-size: clamp(1.5rem, 4vw, 3rem); /* Responsive heading size */
  }

  .value-box p {
    font-size: clamp(0.75rem, 4vw, 1.5rem); /* Responsive paragraph size */
  }
}

/*FOUNDERS SECTION*/
.founders-section {
    padding: 2rem 5rem;
    text-align: center; /* Centers the heading */
    background-color: #fefae0;
}
.founders-section h2 {
    font-size: 5rem;
    font-weight: 300;
    font-family: 'gratina';
    margin-bottom: 2rem;
    color: #606c38;
}
.founders-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5rem; 
}
.founder-profile {
    display: flex;
    flex-direction: column; /* Stacks the image and text vertically. */
    align-items: center; /* Centers the content within the profile. */
    text-align: center;
}
.founder-profile img {
    width: 15rem;
    max-width: 70rem;
    height: auto;
    border-radius: 50%; /* Optional: Creates a circular image */
    object-fit: cover;
    margin-bottom: 1rem;
}
.founder-profile h3 {
    font-size: 2rem;
    font-weight: 600;
    color: #bc6c25;
    margin-bottom: 1rem;
}
.founder-profile p {
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 1rem 1rem;
    max-width: 100rem; /* Prevents text from being too wide. */
}
.founder-profile p.quote{
    font-style: italic;
    font-size: 1rem;

}

@media (max-width: 768px) {
    .founders-section {
        padding: 2rem 5%;
    }

    .founders-section h2 {
        font-size: clamp(2rem, 10vw, 5rem);
        margin-bottom: 2rem;
    }

    /* On smaller screens, the founders will stack vertically. */
    .founders-container {
        flex-direction: column;
        gap: 5rem;
    }

    .founder-profile img {
        max-width: 10rem;
        margin-bottom: 1rem;
    }

    .founder-profile h3 {
        font-size: clamp(1.5rem, 4vw, 3rem);
    }

    .founder-profile p {
        font-size: clamp(0.7rem, 4vw, 1.5rem);
        margin: 1rem 1rem;
    }

    .founder-profile p.quote {
        font-style: italic;
        font-size: 0.8rem;
        padding: 0.4;
    }
}

/*PRODUCTS SECTION*/
.products-section {
  padding: 2rem 5rem;
  text-align: center;
  background-color: #fefae0;
}
.products-section h2 {
  font-size: 5rem;
  font-weight: 300;
  font-family: 'gratina';
  margin-bottom: 2rem;
  color: #606c38;
}
.products-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin: 1rem 1rem;
}
.products-box {
  flex: 0 1 calc(50% - 2.5rem); /* 2 per row */
  /*border: 0.5rem solid #bc6c25;*/
  padding: 1rem 1.5rem;
  border-radius: 20px;
  background-color: transparent;
  max-width: 2000px;
  max-height: auto;
}
.products-box h3 {
  font-size: 2rem;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #bc6c25;
}
.products-box p {
  font-size: 1.2rem;
  line-height: 1.25;
  color: #283618;
  text-align: center;
  font-weight: 100;
}

.products-img {
  width: 6rem;
  height: auto;
  margin: 1rem;
}

@media (max-width: 768px) {
  /*
  The layout is changed to a single column, and font sizes/padding are reduced.
  */
  .products-section {
    padding: 2rem 1.5rem; /* Reduces overall padding for mobile */
  }

  .products-section h2 {
    font-size: clamp(2rem, 10vw, 5rem); /* Responsive heading size */
    margin-bottom: 1rem;
  }

  .products-container {
    flex-direction: column; /* Stacks the value boxes vertically */
    gap: 0.5rem; /* Reduces the gap between the stacked boxes (2)*/
  }

  .products-box {
    /* Removes the fixed width calculation so the boxes can take up the full width */
    flex: 1 1 100%;
    padding: 0.5rem; /* Reduces padding inside the box */
  }

  .products-box p {
    font-size: clamp(0.7rem, 4vw, 1.5rem); /* Responsive paragraph size */
  }

  .products-img {
    width: 5rem;
    height: auto;
    margin: 1rem;
  }
}


/*FREQUENTLY ASKED QUESTIONS*/
.faq-section {
  padding: 2rem 5rem;
  text-align: center;
  background-color: #283618; /* adjust as needed */
}
.faq-section h2 {
  font-size: 5rem;
  font-weight: 300;
  font-family: 'gratina';
  margin-bottom: 1rem;
  color: #606c38;
}
.faq-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  margin: 1rem 1rem;
}
.faq-box {
  flex: 0 1 calc(50% - 1.5rem); /* 2 per row */
  border: 0.25rem solid #bc6c25;
  padding: 1rem 1.5rem;
  border-radius: 20px;
  background-color: transparent;
  max-width: 2000px;
  max-height: auto;
}
.faq-box h3 {
  font-size: 1.5rem;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #bc6c25;
}
.faq-box p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #fefae0;
  text-align: center;
  font-weight: 100;
}

@media (max-width: 768px) {
  /*
  The layout is changed to a single column, and font sizes/padding are reduced.
  */
  .faq-section {
    padding: 2rem 1.5rem; /* Reduces overall padding for mobile */
  }

  .faq-section h2 {
    font-size: clamp(2rem, 10vw, 5rem); /* Responsive heading size */
    margin-bottom: 1rem;
  }

  .faq-container {
    flex-direction: column; /* Stacks the value boxes vertically */
    gap: 1rem; /* Reduces the gap between the stacked boxes */
  }

  .faq-box {
    /* Removes the fixed width calculation so the boxes can take up the full width */
    flex: 1 1 100%;
    padding: 1rem; /* Reduces padding inside the box */
  }

  .faq-box h3 {
    font-size: clamp(1.5rem, 4vw, 3rem); /* Responsive heading size */
  }

  .faq-box p {
    font-size: clamp(0.7rem, 4vw, 1.5rem); /* Responsive paragraph size */
  }
}

/*CALL TO ACTION SECTION - PRODUCTS PAGE*/
.action-section {
    text-align: center;
    padding: 1rem 5rem;
    background-color: #bc6c25;
}
.action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}
.action-words p {
    font-size: 2rem;
    font-weight: bold;
    color: #fefae0;
}


@media (max-width: 768px) {
  .action-section {
    padding: 1.5rem 1rem; /* Reduced padding for mobile */
  }

  .action {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.5rem; /* Drastically reduces horizontal padding to prevent overflow */
  }

  .action-words p {
    font-size: clamp(1.5rem, 8vw, 5rem); /* Responsive font size for the numbers */
  }
}

/*CONTACT SECTION*/
.contact-section {
    padding: 2rem 5rem;
    background-color: #283618;
}

.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
}

.contact-info,
.contact-location {
    flex: 1; /* Both columns take up equal space */
}

.contact-info h2,
.contact-location h2 {
    font-size: 5rem;
    font-weight: 300;
    font-family: 'gratina', serif;
    color: #606c38;
    margin-bottom: 1rem;
}

.contact-info .info-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-direction: column;
}


.contact-info .info-item .info-title {
    font-size: 1.5rem;
    color: #bc6c25;
}

.contact-link {
    font-size: 1.2rem;
    color: #fefae0;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-bottom: 2rem;
}

.contact-link:hover {
    color: #bc6c25;
}

.contact-location p {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    color: #fefae0;
}

.map-container {
    height: 25rem;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}

.map-container iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .contact-info h2,
    .contact-location h2 {
        font-size: clamp(2rem, 10vw, 5rem);
        text-align: center;
    }

    .contact-info .info-item {
        align-items: center;
    }

    .contact-info .info-item .info-title,
    .contact-link {
        font-size: 1.2rem;
        text-align: center;
    }

    .contact-location p {
        font-size: 1.2rem;
        text-align: center;
    }

    .map-container {
        height: 15rem;
        width: 15rem;
    }
}

/*CONTACT FORM*/
.contact-form-section {
    /* Set up Flexbox for a two-column layout on desktop */
    display: flex;
    justify-content: space-between; /* Pushes the items to opposite ends, creating separation */
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem 5rem;
    background-color: #fefae0;
    color: #283618;
}

/* Wrapper for the title to control its positioning */
.form-title-wrapper {
    flex-basis: 40%; /* Gives the title a fixed width of 40% of the container */
    text-align: left;
}

.contact-form-section h2 {
    /* Main title of the section */
    font-size: 5rem;
    font-weight: 300;
    font-family: 'gratina', serif;
    color: #606c38; /* Green color for the main title */
    margin-bottom: 0; /* Remove bottom margin to align with form */
}

.form-container {
    flex-basis: 90%; /* Gives the form a fixed width of 50% */
    max-width: none;
    margin: 0;
    background: transparent; /* Make the form container transparent */
    padding: 0;
    box-shadow: none;
    text-align: left;
}

/* Use Flexbox to create a small space between field boxes */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

/* Style for the input and textarea fields */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
    border: 0.25rem solid #bc6c25;
    background-color: #fefae0; /* Cream background for fields */
    border-radius: 1.5rem; /* Rounded corners for the fields */
    box-sizing: border-box; 
    resize: vertical;
}

/* Style for the placeholder text */
::placeholder {
    color: #606c38; 
    font-style: italic;
    opacity: 50%;
    font-size: 1.2rem;
}

/* Style for the submit button */
button[type="submit"] {
    display: block;
    width: 100%;
    padding: 1.5rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #606c38; /* Green color for the button */
    border-radius: 2rem; /* Rounded corners for the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover and active state for the button */
button[type="submit"]:hover,
button[type="submit"]:active {
    background-color: #bc6c25; /* Orange color on hover/click */
    border: 0.25rem solid #e4e0c2; /* Cream color for the text */
    border-radius: 2rem; 
}

@media (max-width: 768px) {
    .contact-form-section {
        flex-direction: column; /* Stack vertically on mobile */
        gap: 0.2rem;
        align-items: center;
    }

    .contact-form-section h2 {
        font-size: clamp(2rem, 10vw, 5rem);
        text-align: center;
    }

    .form-container {
        padding: 0.5rem;
    }

    .form-group input,
    .form-group textarea {
        font-size: 0.75rem;
        width: 18rem;
        border-width: 0.2rem; /* Resized borders */
        border-radius: 1rem; /* Resized rounded corners */
    }
    
    ::placeholder {
        font-size: 1rem; /* Resized placeholder text */
    }

    button[type="submit"] {
        font-size: 1.2rem; /* Resized button font size */
        padding: 1rem;
        border-radius: 1rem; /* Resized button rounded corners */
    }

    button[type="submit"]:hover,
    button[type="submit"]:active {
        border-width: 0.25rem; /* Resized button border on hover/active */
    }
}