@charset "UTF-8";
/* Load Your Custom Fonts */
@font-face {
  font-family: "Open Sans"; /* Rename for consistency */
  src: url("../font/OpenSans_SemiCondensed-Regular.woff2") format("woff2"), url("../font/OpenSans_SemiCondensed-Regular.woff") format("woff"), url("../font/OpenSans_SemiCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
body {
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
}

h1, h2, h3 {
  font-weight: 800;
  font-style: normal;
}

p {
  font-weight: 400;
}

/*
0-600       Phone
800-900     Tab Portrait
900-1200    Tab Landscape
1200-1800   Laptop/Desktop
1800+       Big Screen

1em = 16px

$breakpoint arguement choices:
-phone
-tab-port
-tab-land
-big-desktop
*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 5rem;
  background-color: #F6F7F8;
  color: #00470b;
  transition: padding 0.3s ease-in-out;
}
@media (max-width: 980px) {
  header {
    padding: 1rem 3rem;
  }
}
@media (max-width: 840px) {
  header {
    padding: 1rem;
  }
}
header .logo {
  display: flex;
  align-items: center;
}
header #navbar {
  display: flex;
  align-items: center;
  gap: 2rem;
}
header #navbar .nav-item {
  position: relative;
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  color: #00470b;
  text-decoration: none;
  padding: 0.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
}
header #navbar .nav-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #df9a0e;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
header #navbar .nav-item:hover {
  color: #df9a0e;
  transform: translateY(-5px);
}
header #navbar .nav-item:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
@media (max-width: 840px) {
  header #navbar {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    background-color: rgba(246, 247, 248, 0.95);
    border-top: 2px solid #00470b;
    padding: 1rem;
    text-align: center;
  }
  header #navbar.showNav {
    display: flex;
  }
}
header .hamburger-menu {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  gap: 0.3rem;
}
header .hamburger-menu span {
  width: 30px;
  height: 2px;
  background-color: #df9a0e;
  transition: all 0.3s ease;
}
header .hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
header .hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}
header .hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}
@media (max-width: 840px) {
  header .hamburger-menu {
    display: flex;
  }
}

.hero-section {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align items to the start (left) */
  position: relative;
  min-height: 100vh; /* Default height */
  background: linear-gradient(to right, rgba(0, 71, 11, 0.9) 0%, rgba(24, 116, 91, 0.7) 30%, rgba(92, 159, 159, 0.4) 40%, rgba(171, 201, 211, 0.2) 60%, rgba(246, 247, 248, 0) 100%), url("../img/chesir_hero_slider_3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #f5f5f5;
  padding: 0 5%; /* Adjust padding to ensure proper alignment */
}
@media (max-width: 56.25em) {
  .hero-section {
    background-position: right;
  }
}

.hero-section:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-section .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align items to the start (left) */
  text-align: left; /* Align text to the left */
  padding: 4rem 0rem;
  max-width: 50%; /* Ensure content takes up 50% of the hero section */
}

.hero-section .hero-title {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.hero-section p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  text-align: justify; /* Justify the paragraph text */
  text-justify: inter-word; /* Add hyphenation for better justification */
}

.hero-section .buttons {
  display: flex;
  gap: 1rem;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 80vh; /* Set height to 100vh on tablets and mobile devices */
  }
  .hero-section .content {
    margin-top: 7rem;
    padding-left: 0;
    max-width: 70%;
  }
  .hero-section .hero-title {
    font-size: 1.6rem;
  }
  .hero-section p {
    font-size: 1.1rem;
  }
  .hero-section .buttons {
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  .hero-section {
    background-position: calc(50% - 10px) center;
    background: linear-gradient(to right, rgba(0, 71, 11, 0.9) 0%, rgba(24, 116, 91, 0.7) 40%, rgba(92, 159, 159, 0.4) 60%, rgba(171, 201, 211, 0.2) 80%, rgba(246, 247, 248, 0) 100%), url("../img/chesir_hero_slider_3.jpg");
  }
  .hero-section .hero-title {
    font-size: 1.5rem;
  }
  .hero-section p {
    font-size: 1.25rem;
  }
  .hero-section .content {
    padding: 2rem 1rem;
  }
}
.footer {
  background-color: #F6F7F8;
  padding: 2rem 0;
}
.footer .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  flex-wrap: wrap;
}
.footer .footer-content .footer-column {
  flex: 1;
  min-width: 200px;
  padding: 1rem;
}
.footer .footer-content .footer-column.logo-column .logo img {
  width: 140px; /* Adjust the size as needed */
  height: auto;
}
.footer .footer-content .footer-column h3 {
  font-size: 1.5rem;
  color: #00470b;
  margin-bottom: 0.5rem;
}
.footer .footer-content .footer-column .social-icon {
  font-size: 2rem;
  margin-right: 1rem;
  color: #00470b;
  transition: transform 0.2s ease-in-out;
}
.footer .footer-content .footer-column .social-icon:hover {
  transform: scale(1.1); /* Slight zoom effect on hover */
}
.footer .footer-copyright {
  background-color: #e8eaed;
  padding: 1rem;
  text-align: center;
}
.footer .footer-copyright p {
  font-size: 1rem;
  color: #170000;
}

/* _grid.scss */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

[class*=col-] {
  padding-right: 15px;
  padding-left: 15px;
}

.col-1-of-2 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-1-of-3 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.col-2-of-3 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.col-1-of-4 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-2-of-4 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-3-of-4 {
  flex: 0 0 75%;
  max-width: 75%;
}

.about-section {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .about-section {
    flex-direction: column;
    padding: 2rem;
  }
}
.about-section .about-left-column {
  flex: 1;
  padding-top: 8rem;
  padding-right: 4rem;
  width: 50%;
}
.about-section .about-left-column h2 {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
  text-align: left;
}
.about-section .about-left-column p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  text-align: justify;
}
@media (max-width: 45em) {
  .about-section .about-left-column {
    padding-right: 0;
    width: 100%;
  }
  .about-section .about-left-column h2 {
    font-size: 1.8rem;
  }
  .about-section .about-left-column p {
    font-size: 1.2rem;
  }
}
.about-section .about-right-column {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.about-section .about-right-column img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 5px solid #df9a0e;
}
@media (max-width: 45em) {
  .about-section .about-right-column {
    width: 100%;
    padding-top: 2rem;
  }
}

.promise-section {
  padding: 40px;
  background-color: #f7f5f2; /* Softer background */
}
.promise-section h2 {
  font-size: 2.5rem; /* Larger heading */
  margin-bottom: 30px;
  text-align: center;
}
.promise-section .promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  grid-auto-rows: auto; /* Allow rows to adjust their height automatically */
}
@media (max-width: 45em) {
  .promise-section .promise-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.promise-section .promise-card {
  padding: 25px; /* Increased padding */
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  background-color: #f4d35e; /* Uniform card color */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth hover effects */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%; /* Full width for smaller screens */
  margin-bottom: 20px; /* Space between cards */
  /* Hover effect */
}
.promise-section .promise-card h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #333; /* Darker heading */
}
.promise-section .promise-card:hover {
  transform: scale(1.05); /* Slight size increase */
  background-color: #f7b731; /* Change color on hover */
}

.story-section {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(255, 252, 245, 0.9); /* Soft background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05); /* Light shadow for depth */
}
@media (max-width: 45em) {
  .story-section {
    flex-direction: column;
    padding: 2rem;
  }
}
.story-section .story-left-column {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%; /* Make left column 50% wide */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); /* Add box shadow for depth */
}
.story-section .story-left-column img {
  width: 100%; /* Ensure the image is full width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Softer corners for image */
  border: 5px solid #00470b; /* Add primary color border to image */
}
@media (max-width: 45em) {
  .story-section .story-left-column {
    width: 100%; /* Full width on mobile */
    padding-right: 0;
    padding-bottom: 2rem;
  }
}
.story-section .story-right-column {
  flex: 1;
  padding-left: 5rem;
  padding-top: 5rem;
  width: 50%; /* Make right column 50% wide */
}
.story-section .story-right-column h2 {
  font-size: 2.8rem;
  color: #00470b; /* Accent color */
  margin-bottom: 1rem;
  text-align: left;
}
.story-section .story-right-column p {
  font-size: 1.25rem;
  color: #3c3d40;
  line-height: 1.5;
  text-align: justify;
}
@media (max-width: 45em) {
  .story-section .story-right-column {
    padding-left: 0;
    padding-top: 0;
    width: 100%; /* Full width on mobile */
  }
}

.modal-content form {
  max-width: 30rem;
  margin: auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .modal-content form {
    padding: 1rem;
  }
}
@media (max-width: 480px) {
  .modal-content form {
    padding: 0.5rem;
  }
}
.modal-content form .h1 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}
.modal-content form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.modal-content form input[type=text],
.modal-content form input[type=email],
.modal-content form input[type=date] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.modal-content form .form-button {
  background-color: #df9a0e;
  color: #F6F7F8;
  padding: 1rem;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.modal-content form .form-button:hover {
  background-color: rgba(223, 154, 14, 0.8);
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta button {
  position: relative;
  background: linear-gradient(135deg, #ff8a00, #e52e71);
  color: #fff;
  padding: 1rem 2rem;
  border: none;
  border-radius: 30px;
  font-size: 1.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.3s ease, transform 0.2s ease;
}
.cta button:hover {
  background: linear-gradient(135deg, #e52e71, #ff8a00);
  transform: scale(1.05);
}
.cta button i {
  font-size: 1.5rem;
}
.cta button:hover::after {
  transform: scale(1.1);
  opacity: 1;
}
.cta .cta-incentive {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #ff8a00;
  font-weight: bold;
}

.hero-buttons {
  display: flex;
  justify-content: center; /* Center the buttons horizontally */
  gap: 1rem; /* Adjust the space between buttons */
  flex-wrap: wrap; /* Allow the buttons to wrap on smaller screens */
}

/* General Button Styling */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 1rem;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1rem; /* Define a fallback font-size */
  transition: all 0.2s ease;
  position: relative;
  border: none;
  /* Hover & Active States */
}
.btn-primary {
  background-color: #df9a0e;
  color: #170000;
}
.btn-secondary {
  background-color: #170000;
  color: #F6F7F8;
}
.btn-primary:hover {
  background-color: rgba(223, 154, 14, 0.8);
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(223, 154, 14, 0.2);
}
.btn-primary:active {
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(223, 154, 14, 0.2);
}
.btn-secondary:hover {
  background-color: rgba(23, 0, 0, 0.8);
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(23, 0, 0, 0.2);
}
.btn-secondary:active {
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(23, 0, 0, 0.2);
}

/* Responsive Design: Stacking on Mobile */
@media (max-width: 768px) {
  .hero-buttons {
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center the buttons */
    gap: 1rem; /* Define the gap between the stacked buttons */
  }
}
.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.floating-buttons.visible {
  opacity: 1;
  visibility: visible;
}
.floating-buttons .floating-button {
  background-color: #df9a0e;
  color: #F6F7F8;
  padding: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s ease;
}
.floating-buttons .floating-button:hover {
  background-color: rgba(223, 154, 14, 0.8);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #F6F7F8;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}
.modal-content .close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.modal-content .close-button::before {
  content: "×";
  color: black;
}

.hero-section-operations {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content horizontally */
  position: relative;
  min-height: 50vh; /* Ensure the height is 50vh */
  background-image: url("../img/chesir_hero_slider_2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40px; /* Nudge the background image 40px downwards */
  color: #f5f5f5;
  padding: 0 5%; /* Adjust padding if needed */
}
@media (max-width: 56.25em) {
  .hero-section-operations {
    background-position: center 40px;
  }
}

.hero-section-operations:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-section-operations .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center items horizontally */
  text-align: center; /* Center text inside content */
  padding: 8rem 0; /* Adjust padding to center vertically if needed */
  max-width: 80%; /* Adjust width as needed */
}

.hero-section-operations .hero-title {
  font-size: 3rem;
  margin-bottom: 2rem;
  padding-left: 0; /* Remove left padding to center */
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  .hero-section-operations {
    min-height: 60vh;
  }
  .hero-section-operations .content {
    margin-top: 5rem;
    padding-left: 0;
    max-width: 90%; /* Increase max-width for smaller screens */
  }
  .hero-section-operations .hero-title {
    font-size: 1.6rem;
  }
}
@media (max-width: 480px) {
  .hero-section-operations {
    background-position: center;
  }
  .hero-section-operations .hero-title {
    font-size: 1.5rem;
  }
  .hero-section-operations .content {
    padding: 2rem 1rem;
  }
}
.chepsir-farm {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.chepsir-farm .chepsir-farm__container {
  display: flex;
  width: 100%;
  flex-direction: row;
}
@media (max-width: 720px) {
  .chepsir-farm .chepsir-farm__container {
    flex-direction: column;
    padding: 2rem;
  }
}
.chepsir-farm .chepsir-farm__container .chepsir-farm__details {
  flex: 1;
  padding-right: 3rem;
  padding-top: 2rem;
}
.chepsir-farm .chepsir-farm__container .chepsir-farm__details .chepsir-farm__title {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.chepsir-farm .chepsir-farm__container .chepsir-farm__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
@media (max-width: 56.25em) {
  .chepsir-farm .chepsir-farm__container .chepsir-farm__details {
    padding-right: 0;
    padding-bottom: 2rem;
    width: 100%;
  }
  .chepsir-farm .chepsir-farm__container .chepsir-farm__details .chepsir-farm__title {
    font-size: 2rem;
  }
  .chepsir-farm .chepsir-farm__container .chepsir-farm__details p {
    font-size: 1.2rem;
  }
}
@media (max-width: 45em) {
  .chepsir-farm .chepsir-farm__container .chepsir-farm__details {
    width: 100%;
    padding: 1rem;
  }
  .chepsir-farm .chepsir-farm__container .chepsir-farm__details .chepsir-farm__title {
    font-size: 1.8rem;
  }
  .chepsir-farm .chepsir-farm__container .chepsir-farm__details p {
    font-size: 1rem;
  }
}
.chepsir-farm .chepsir-farm__container .chepsir-farm__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.chepsir-farm .chepsir-farm__container .chepsir-farm__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 5px solid #df9a0e;
}
@media (max-width: 768px) {
  .chepsir-farm .chepsir-farm__container .chepsir-farm__image {
    width: 100%;
  }
}

.community-cooperatives {
  display: flex;
  min-height: 40vh;
  background: linear-gradient(to right, rgba(0, 71, 11, 0.9) 0%, rgba(0, 71, 11, 0.7) 60%, rgba(223, 154, 14, 0.4) 70%, rgba(246, 247, 248, 0.2) 80%, rgba(246, 247, 248, 0) 100%), url("../img/chepsir_operations_farm_bg.jpg") no-repeat center center;
  background-size: cover;
  color: #f5f5f5;
  padding: 0 5%;
}
.community-cooperatives .community-cooperatives__container {
  padding: 3rem 3rem 3rem 0;
}
.community-cooperatives .community-cooperatives__container .community-title {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.community-cooperatives .community-cooperatives__container p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}
.community-cooperatives .community-cooperatives__container .benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.community-cooperatives .community-cooperatives__container .benefits-list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  color: #f5f5f5;
  margin-bottom: 1rem;
}
.community-cooperatives .community-cooperatives__container .benefits-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
@media (max-width: 45em) {
  .community-cooperatives .community-cooperatives__container {
    padding: 1rem;
  }
  .community-cooperatives .community-cooperatives__container .community-title {
    font-size: 2rem;
  }
  .community-cooperatives .community-cooperatives__container p {
    font-size: 1.4rem;
  }
  .community-cooperatives .community-cooperatives__container .benefits-list li {
    font-size: 1.2rem;
  }
}

.beekeeping-process {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.beekeeping-process .beekeeping-process__container {
  display: flex;
  flex: 1;
  width: 100%;
}
.beekeeping-process .beekeeping-process__container .beekeeping-process__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.beekeeping-process .beekeeping-process__container .beekeeping-process__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 5px solid #00470b;
}
.beekeeping-process .beekeeping-process__container .beekeeping-process__details {
  flex: 1;
  padding-left: 3rem;
  padding-top: 2rem;
}
.beekeeping-process .beekeeping-process__container .beekeeping-process__details .beekeeping-process__title {
  font-size: 2.4rem;
  color: #00470b;
  margin-bottom: 1.5rem;
}
.beekeeping-process .beekeeping-process__container .beekeeping-process__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.beekeeping-process .beekeeping-process__container .beekeeping-process__details .beekeeping-process__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.beekeeping-process .beekeeping-process__container .beekeeping-process__details .beekeeping-process__list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.beekeeping-process .beekeeping-process__container .beekeeping-process__details .beekeeping-process__list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .beekeeping-process {
    flex-direction: column;
    padding: 2rem;
  }
  .beekeeping-process .beekeeping-process__container {
    flex-direction: column;
  }
  .beekeeping-process .beekeeping-process__container .beekeeping-process__image {
    width: 100%;
    padding-top: 2rem;
    order: 2;
  }
  .beekeeping-process .beekeeping-process__container .beekeeping-process__details {
    padding-left: 0;
    width: 100%;
    order: 1;
  }
  .beekeeping-process .beekeeping-process__container .beekeeping-process__details .beekeeping-process__title {
    font-size: 2rem;
  }
  .beekeeping-process .beekeeping-process__container .beekeeping-process__details p {
    font-size: 1.2rem;
  }
  .beekeeping-process .beekeeping-process__container .beekeeping-process__details .beekeeping-process__list li {
    font-size: 1.2rem;
  }
}

.cooperative-model {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .cooperative-model {
    flex-direction: column;
    padding: 2rem;
  }
}
.cooperative-model .cooperative-model__container {
  display: flex;
  flex: 1;
  width: 100%;
}
@media (max-width: 720px) {
  .cooperative-model .cooperative-model__container {
    flex-direction: column;
    padding: 2rem;
  }
}
.cooperative-model .cooperative-model__container .cooperative-model__details {
  flex: 1;
  padding-right: 3rem;
  padding-top: 2rem;
}
.cooperative-model .cooperative-model__container .cooperative-model__details .cooperative-model__title {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.cooperative-model .cooperative-model__container .cooperative-model__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.cooperative-model .cooperative-model__container .cooperative-model__details .cooperative-model__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cooperative-model .cooperative-model__container .cooperative-model__details .cooperative-model__list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.cooperative-model .cooperative-model__container .cooperative-model__details .cooperative-model__list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
@media (max-width: 45em) {
  .cooperative-model .cooperative-model__container .cooperative-model__details {
    padding-right: 0;
    width: 100%;
  }
  .cooperative-model .cooperative-model__container .cooperative-model__details .cooperative-model__title {
    font-size: 2rem;
  }
  .cooperative-model .cooperative-model__container .cooperative-model__details p {
    font-size: 1.2rem;
  }
  .cooperative-model .cooperative-model__container .cooperative-model__details .cooperative-model__list li {
    font-size: 1.2rem;
  }
}
.cooperative-model .cooperative-model__container .cooperative-model__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.cooperative-model .cooperative-model__container .cooperative-model__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 5px solid #df9a0e;
}
@media (max-width: 768px) {
  .cooperative-model .cooperative-model__container .cooperative-model__image {
    width: 100%;
  }
}
@media (max-width: 45em) {
  .cooperative-model .cooperative-model__container .cooperative-model__image {
    width: 100%;
    padding-bottom: 2rem;
  }
}

.hero-section-products {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content horizontally */
  position: relative;
  min-height: 50vh; /* Ensure the height is 50vh */
  background-image: url("../img/chesir_hero_slider_products.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40px; /* Nudge the background image 40px downwards */
  color: #f5f5f5;
  padding: 0 5%; /* Adjust padding if needed */
}
@media (max-width: 56.25em) {
  .hero-section-products {
    background-position: center 40px;
  }
}

.hero-section-products:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-section-products .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center items horizontally */
  text-align: center; /* Center text inside content */
  padding: 8rem 0; /* Adjust padding to center vertically if needed */
  max-width: 80%; /* Adjust width as needed */
}

.hero-section-products .hero-title {
  font-size: 3rem;
  margin-bottom: 2rem;
  padding-left: 0; /* Remove left padding to center */
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  .hero-section-products {
    min-height: 60vh;
  }
  .hero-section-products .content {
    margin-top: 5rem;
    padding-left: 0;
    max-width: 90%; /* Increase max-width for smaller screens */
  }
  .hero-section-products .hero-title {
    font-size: 1.6rem;
  }
}
@media (max-width: 480px) {
  .hero-section-products {
    background-position: center;
  }
  .hero-section-products .hero-title {
    font-size: 1.5rem;
  }
  .hero-section-products .content {
    padding: 2rem 1rem;
  }
}
.quality-honey {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.7);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .quality-honey {
    flex-direction: column;
    padding: 2rem;
  }
}
.quality-honey .quality-honey__container {
  display: flex;
  flex: 1;
  width: 100%;
}
.quality-honey .quality-honey__container .quality-honey__details {
  flex: 1;
  padding-right: 3rem;
  padding-top: 2rem;
}
.quality-honey .quality-honey__container .quality-honey__details .quality-honey__title {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
}
.quality-honey .quality-honey__container .quality-honey__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.quality-honey .quality-honey__container .quality-honey__details .quality-honey-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.quality-honey .quality-honey__container .quality-honey__details .quality-honey-list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  color: #3c3d40;
  margin-bottom: 1rem;
}
.quality-honey .quality-honey__container .quality-honey__details .quality-honey-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
.quality-honey .quality-honey__container .quality-honey__details .quality-honey-list li .quality-honey-sub-list {
  list-style: none;
  padding-left: 2rem;
  color: #3c3d40;
  margin: 1rem 0 0 2rem;
  font-size: 1.2rem;
}
.quality-honey .quality-honey__container .quality-honey__details .quality-honey-list li .quality-honey-sub-list li:before {
  content: "▪";
  color: #170000;
  font-size: 1.2rem;
  position: absolute;
  left: -1.5rem;
}
@media (max-width: 45em) {
  .quality-honey .quality-honey__container .quality-honey__details {
    padding-right: 0;
    width: 100%;
  }
  .quality-honey .quality-honey__container .quality-honey__details .quality-honey__title {
    font-size: 2rem;
  }
  .quality-honey .quality-honey__container .quality-honey__details p {
    font-size: 1.2rem;
  }
  .quality-honey .quality-honey__container .quality-honey__details .quality-honey-list li {
    font-size: 1.2rem;
  }
  .quality-honey .quality-honey__container .quality-honey__details .quality-honey-sub-list {
    font-size: 1.1rem;
  }
}

.quality-parallax {
  position: relative;
  display: flex;
  min-height: 20vh;
  background: url("../img/chesir_quality_parallax.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  color: #f5f5f5;
  padding: 5% 0 0 2.5%;
}
.quality-parallax:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 0, 0, 0.7);
  z-index: 1;
}
.quality-parallax .quality-parallax__container {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: 3rem;
}
.quality-parallax .quality-parallax__container .quality-parallax-title {
  font-size: 2.4rem;
  color: #F6F7F8;
  margin: 0;
}
@media (max-width: 45em) {
  .quality-parallax .quality-parallax__container {
    padding: 7.5% 0 0 2.5%;
  }
  .quality-parallax .quality-parallax__container .quality-parallax-title {
    font-size: 2rem;
  }
}

.quality-control {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  margin-top: -6rem;
}
@media (max-width: 45em) {
  .quality-control {
    flex-direction: column;
    padding: 2rem;
    margin-top: -2rem;
  }
}
.quality-control .quality-control__container {
  display: flex;
  flex: 1;
  width: 100%;
}
.quality-control .quality-control__container .quality-control__details {
  flex: 1;
  padding-right: 3rem;
  padding-top: 2rem;
}
.quality-control .quality-control__container .quality-control__details .quality-control__title {
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
}
.quality-control .quality-control__container .quality-control__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.quality-control .quality-control__container .quality-control__details .quality-control-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.quality-control .quality-control__container .quality-control__details .quality-control-list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  color: #3c3d40;
  margin-bottom: 1rem;
}
.quality-control .quality-control__container .quality-control__details .quality-control-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
.quality-control .quality-control__container .quality-control__details .quality-control-list li .quality-control-sub-list {
  list-style: none;
  padding-left: 2rem;
  color: #3c3d40;
  margin: 1rem 0 0 2rem;
  font-size: 1.2rem;
}
.quality-control .quality-control__container .quality-control__details .quality-control-list li .quality-control-sub-list li:before {
  content: "▪";
  color: #170000;
  font-size: 1.2rem;
  position: absolute;
  left: -1.5rem;
}
@media (max-width: 45em) {
  .quality-control .quality-control__container .quality-control__details {
    padding-right: 0;
    width: 100%;
  }
  .quality-control .quality-control__container .quality-control__details .quality-control__title {
    font-size: 2rem;
  }
  .quality-control .quality-control__container .quality-control__details p {
    font-size: 1.2rem;
  }
  .quality-control .quality-control__container .quality-control__details .quality-control-list li {
    font-size: 1.2rem;
  }
  .quality-control .quality-control__container .quality-control__details .quality-control-sub-list {
    font-size: 1.1rem;
  }
}

.hero-section-environmental {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content horizontally */
  position: relative;
  min-height: 50vh; /* Ensure the height is 50vh */
  background-image: url("../img/chepsir_environmental_impact.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40px; /* Nudge the background image 40px downwards */
  color: #f5f5f5;
  padding: 0 5%; /* Adjust padding if needed */
}
@media (max-width: 56.25em) {
  .hero-section-environmental {
    background-position: center 40px;
  }
}

.hero-section-environmental:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-section-environmental .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center items horizontally */
  text-align: center; /* Center text inside content */
  padding: 8rem 0; /* Adjust padding to center vertically if needed */
  max-width: 80%; /* Adjust width as needed */
}

.hero-section-environmental .hero-title {
  font-size: 3rem;
  margin-bottom: 2rem;
  padding-left: 0; /* Remove left padding to center */
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  .hero-section-environmental {
    min-height: 60vh;
  }
  .hero-section-environmental .content {
    margin-top: 5rem;
    padding-left: 0;
    max-width: 90%; /* Increase max-width for smaller screens */
  }
  .hero-section-environmental .hero-title {
    font-size: 1.6rem;
  }
}
@media (max-width: 480px) {
  .hero-section-environmental {
    background-position: center;
  }
  .hero-section-environmental .hero-title {
    font-size: 1.5rem;
  }
  .hero-section-environmental .content {
    padding: 2rem 1rem;
  }
}
.community-engagement {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .community-engagement {
    flex-direction: column;
    padding: 2rem;
  }
}
.community-engagement .community-engagement__container {
  display: flex;
  flex: 1;
  width: 100%;
}
@media (max-width: 720px) {
  .community-engagement .community-engagement__container {
    flex-direction: column;
    padding: 2rem;
  }
}
.community-engagement .community-engagement__container .community-engagement__details {
  flex: 1;
  padding-right: 3rem;
  padding-top: 2rem;
}
.community-engagement .community-engagement__container .community-engagement__details .community-engagement__title {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.community-engagement .community-engagement__container .community-engagement__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
@media (max-width: 45em) {
  .community-engagement .community-engagement__container .community-engagement__details {
    padding-left: 0;
    width: 100%;
  }
  .community-engagement .community-engagement__container .community-engagement__details .community-engagement__title {
    font-size: 2rem;
  }
  .community-engagement .community-engagement__container .community-engagement__details p {
    font-size: 1.2rem;
  }
}
.community-engagement .community-engagement__container .community-engagement__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 5px;
}
.community-engagement .community-engagement__container .community-engagement__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 5px solid #df9a0e;
}
@media (max-width: 768px) {
  .community-engagement .community-engagement__container .community-engagement__image {
    width: 100%;
  }
}
@media (max-width: 45em) {
  .community-engagement .community-engagement__container .community-engagement__image {
    width: 100%;
    padding-bottom: 2rem;
  }
}

.conservation-efforts-section {
  padding: 40px;
  background-color: #f7f5f2; /* Softer background */
}
.conservation-efforts-section h2 {
  font-size: 2.5rem; /* Larger heading */
  margin-bottom: 30px;
  text-align: center;
}
.conservation-efforts-section .conservation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  grid-auto-rows: auto; /* Allow rows to adjust their height automatically */
}
@media (max-width: 768px) {
  .conservation-efforts-section .conservation-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.conservation-efforts-section .conservation-card {
  padding: 25px; /* Increased padding */
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  background-color: #00470b; /* Uniform card color */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth hover effects */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%; /* Full width for smaller screens */
  margin-bottom: 20px; /* Space between cards */
  /* Hover effect */
}
.conservation-efforts-section .conservation-card h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #F6F7F8; /* Darker heading */
}
.conservation-efforts-section .conservation-card:hover {
  transform: scale(1.05); /* Slight size increase */
  background-color: rgba(0, 71, 11, 0.8); /* Change color on hover */
}

.community-initiatives {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .community-initiatives {
    flex-direction: column;
    padding: 2rem;
  }
}
.community-initiatives .community-initiatives__container {
  display: flex;
  flex: 1;
  width: 100%;
}
@media (max-width: 720px) {
  .community-initiatives .community-initiatives__container {
    flex-direction: column;
    padding: 2rem;
  }
}
.community-initiatives .community-initiatives__container .community-initiatives__details {
  flex: 1;
  padding-right: 3rem;
  padding-top: 2rem;
}
.community-initiatives .community-initiatives__container .community-initiatives__details .cooperative-model__title {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.community-initiatives .community-initiatives__container .community-initiatives__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.community-initiatives .community-initiatives__container .community-initiatives__details .community-initiatives__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.community-initiatives .community-initiatives__container .community-initiatives__details .community-initiatives__list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.community-initiatives .community-initiatives__container .community-initiatives__details .community-initiatives__list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
@media (max-width: 45em) {
  .community-initiatives .community-initiatives__container .community-initiatives__details {
    padding-right: 0;
    width: 100%;
  }
  .community-initiatives .community-initiatives__container .community-initiatives__details p {
    font-size: 1.2rem;
  }
  .community-initiatives .community-initiatives__container .community-initiatives__details .community-initiatives__list li {
    font-size: 1.2rem;
  }
}
.community-initiatives .community-initiatives__container .community-initiatives__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.community-initiatives .community-initiatives__container .community-initiatives__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 5px solid #df9a0e;
}
@media (max-width: 768px) {
  .community-initiatives .community-initiatives__container .community-initiatives__image {
    width: 100%;
  }
}
@media (max-width: 45em) {
  .community-initiatives .community-initiatives__container .community-initiatives__image {
    width: 100%;
    padding-bottom: 2rem;
  }
}

.biodiversity {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .biodiversity {
    flex-direction: column;
    padding: 2rem;
  }
}
.biodiversity .biodiversity__container {
  display: flex;
  flex: 1;
  width: 100%;
}
@media (max-width: 720px) {
  .biodiversity .biodiversity__container {
    flex-direction: column;
    padding: 2rem;
  }
}
.biodiversity .biodiversity__container .biodiversity__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 5px;
  order: 2;
}
.biodiversity .biodiversity__container .biodiversity__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 5px solid #00470b;
}
@media (max-width: 768px) {
  .biodiversity .biodiversity__container .biodiversity__image {
    width: 100%;
  }
}
@media (max-width: 45em) {
  .biodiversity .biodiversity__container .biodiversity__image {
    width: 100%;
    padding-bottom: 2rem;
  }
}
.biodiversity .biodiversity__container .biodiversity__details {
  flex: 1;
  padding-left: 3rem;
  padding-top: 2rem;
  order: 1;
}
.biodiversity .biodiversity__container .biodiversity__details .biodiversity__title {
  font-size: 2.4rem;
  color: #00470b;
  margin-bottom: 1.5rem;
}
.biodiversity .biodiversity__container .biodiversity__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.biodiversity .biodiversity__container .biodiversity__details .biodiversity__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.biodiversity .biodiversity__container .biodiversity__details .biodiversity__list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.biodiversity .biodiversity__container .biodiversity__details .biodiversity__list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
@media (max-width: 45em) {
  .biodiversity .biodiversity__container .biodiversity__details {
    padding-left: 0;
    width: 100%;
  }
  .biodiversity .biodiversity__container .biodiversity__details .biodiversity__title {
    font-size: 2rem;
  }
  .biodiversity .biodiversity__container .biodiversity__details p {
    font-size: 1.2rem;
  }
  .biodiversity .biodiversity__container .biodiversity__details .biodiversity__list li {
    font-size: 1.2rem;
  }
}

.sustainable-practices {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .sustainable-practices {
    flex-direction: column;
    padding: 2rem;
  }
}
.sustainable-practices .sustainable-practices__container {
  display: flex;
  flex: 1;
  width: 100%;
}
@media (max-width: 720px) {
  .sustainable-practices .sustainable-practices__container {
    flex-direction: column;
    padding: 2rem;
  }
}
.sustainable-practices .sustainable-practices__container .sustainable-practices__details {
  flex: 1;
  padding-right: 3rem;
  padding-top: 2rem;
}
.sustainable-practices .sustainable-practices__container .sustainable-practices__details .sustainable-practices__title {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.sustainable-practices .sustainable-practices__container .sustainable-practices__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.sustainable-practices .sustainable-practices__container .sustainable-practices__details .sustainable-practices__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sustainable-practices .sustainable-practices__container .sustainable-practices__details .sustainable-practices__list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.sustainable-practices .sustainable-practices__container .sustainable-practices__details .sustainable-practices__list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
@media (max-width: 45em) {
  .sustainable-practices .sustainable-practices__container .sustainable-practices__details {
    padding-right: 0;
    width: 100%;
  }
  .sustainable-practices .sustainable-practices__container .sustainable-practices__details .sustainable-practices__title {
    font-size: 2rem;
  }
  .sustainable-practices .sustainable-practices__container .sustainable-practices__details p {
    font-size: 1.2rem;
  }
  .sustainable-practices .sustainable-practices__container .sustainable-practices__details .sustainable-practices__list li {
    font-size: 1.2rem;
  }
}
.sustainable-practices .sustainable-practices__container .sustainable-practices__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 5px;
}
.sustainable-practices .sustainable-practices__container .sustainable-practices__image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 5px solid #df9a0e;
}
@media (max-width: 768px) {
  .sustainable-practices .sustainable-practices__container .sustainable-practices__image {
    width: 100%;
  }
}
@media (max-width: 45em) {
  .sustainable-practices .sustainable-practices__container .sustainable-practices__image {
    width: 100%;
    padding-bottom: 2rem;
  }
}

.hero-section-visit {
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content horizontally */
  position: relative;
  min-height: 50vh; /* Ensure the height is 50vh */
  background-image: url("../img/chesir_hero_slider_visit.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40px; /* Nudge the background image 40px downwards */
  color: #f5f5f5;
  padding: 0 5%; /* Adjust padding if needed */
}
@media (max-width: 56.25em) {
  .hero-section-visit {
    background-position: center 40px;
  }
}

.hero-section-visit:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-section-visit .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center items horizontally */
  text-align: center; /* Center text inside content */
  padding: 8rem 0; /* Adjust padding to center vertically if needed */
  max-width: 80%; /* Adjust width as needed */
}

.hero-section-visit .hero-title {
  font-size: 3rem;
  margin-bottom: 2rem;
  padding-left: 0; /* Remove left padding to center */
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  .hero-section-visit {
    min-height: 60vh;
  }
  .hero-section-visit .content {
    margin-top: 5rem;
    padding-left: 0;
    max-width: 90%; /* Increase max-width for smaller screens */
  }
  .hero-section-visit .hero-title {
    font-size: 1.6rem;
  }
}
@media (max-width: 480px) {
  .hero-section-visit {
    background-position: center;
  }
  .hero-section-visit .hero-title {
    font-size: 1.5rem;
  }
  .hero-section-visit .content {
    padding: 2rem 1rem;
  }
}
.visit-details {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .visit-details {
    flex-direction: column;
    padding: 2rem;
  }
}
.visit-details .visit-details__container {
  display: flex;
  flex: 1;
  width: 100%;
}
@media (max-width: 720px) {
  .visit-details .visit-details__container {
    flex-direction: column;
    padding: 2rem;
  }
}
.visit-details .visit-details__container .visit-details__details {
  flex: 1;
  padding-right: 3rem;
  padding-top: 2rem;
}
.visit-details .visit-details__container .visit-details__details .visit-details__title {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.visit-details .visit-details__container .visit-details__details p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
@media (max-width: 45em) {
  .visit-details .visit-details__container .visit-details__details {
    padding-left: 0;
    width: 100%;
  }
  .visit-details .visit-details__container .visit-details__details .visit-details__title {
    font-size: 2rem;
  }
  .visit-details .visit-details__container .visit-details__details p {
    font-size: 1.2rem;
  }
}
.visit-details .visit-details__container .visit-details__map {
  flex: 1;
}
.visit-details .visit-details__container .visit-details__map .map {
  width: 100%;
  height: 20rem;
  border-radius: 0.3rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .visit-details .visit-details__container .visit-details__map {
    width: 100%;
  }
}

.booking-section {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: rgba(246, 247, 248, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 45em) {
  .booking-section {
    flex-direction: column;
    padding: 2rem;
  }
}
.booking-section .booking-section__container {
  display: flex;
  flex: 1;
  width: 100%;
  gap: 2rem;
}
@media (max-width: 720px) {
  .booking-section .booking-section__container {
    flex-direction: column;
    padding: 2rem;
  }
}
.booking-section .booking-section__container .visit-booking__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #fff;
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.booking-section .booking-section__container .visit-booking__form h2.booking-section__title {
  font-size: 2.4rem;
  color: #170000;
  margin-bottom: 1.5rem;
}
.booking-section .booking-section__container .visit-booking__form p {
  font-size: 1.4rem;
  color: #3c3d40;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.booking-section .booking-section__container .visit-booking__form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 720px) {
  .booking-section .booking-section__container .visit-booking__form form {
    width: 100%;
  }
}
.booking-section .booking-section__container .visit-booking__form form label {
  font-weight: bold;
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.booking-section .booking-section__container .visit-booking__form form input, .booking-section .booking-section__container .visit-booking__form form select {
  padding: 0.8rem;
  border: 1px solid #df9a0e;
  border-radius: 0.3rem;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  width: 100%;
}
.booking-section .booking-section__container .visit-booking__form form .form-button {
  background-color: #df9a0e;
  color: #F6F7F8;
  border: none;
  padding: 0.8rem;
  cursor: pointer;
  border-radius: 0.3rem;
  font-size: 1.4rem;
  width: 100%;
  margin-top: auto;
}
@media (max-width: 45em) {
  .booking-section .booking-section__container .visit-booking__form {
    width: 100%;
    padding-bottom: 2rem;
  }
}
.booking-section .booking-section__container .booking-section__details {
  flex: 1;
  padding: 2rem;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.booking-section .booking-section__container .booking-section__details h2.booking-section__sub-title {
  font-size: 2.4rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.booking-section .booking-section__container .booking-section__details h3 {
  font-size: 1.8rem;
  color: #170000;
  margin-bottom: 1rem;
}
.booking-section .booking-section__container .booking-section__details .booking-section__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.booking-section .booking-section__container .booking-section__details .booking-section__list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.booking-section .booking-section__container .booking-section__details .booking-section__list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
@media (max-width: 45em) {
  .booking-section .booking-section__container .booking-section__details {
    padding: 1rem;
    width: 100%;
  }
  .booking-section .booking-section__container .booking-section__details h2.booking-section__sub-title {
    font-size: 2rem;
  }
  .booking-section .booking-section__container .booking-section__details h3 {
    font-size: 1.6rem;
  }
  .booking-section .booking-section__container .booking-section__details .booking-section__list li {
    font-size: 1.2rem;
  }
}

.note {
  display: flex;
  min-height: 40vh;
  background: linear-gradient(to right, rgba(0, 71, 11, 0.9) 0%, rgba(0, 71, 11, 0.7) 40%, rgba(223, 154, 14, 0.4) 60%, rgba(246, 247, 248, 0.2) 80%, rgba(246, 247, 248, 0) 100%), url("../img/chesir_visit_bg.jpg") no-repeat center center;
  background-size: cover;
  color: #f5f5f5;
  padding: 0 5%;
}
.note .note__container {
  padding: 3rem 3rem 3rem 0;
}
.note .note__container .note-sub-title {
  font-size: 1.8rem;
  color: #df9a0e;
  margin-bottom: 1.5rem;
}
.note .note__container p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}
.note .note__container .note-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.note .note__container .note-list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.4rem;
  color: #f5f5f5;
  margin-bottom: 1rem;
}
.note .note__container .note-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #df9a0e;
  font-size: 1.6rem;
  line-height: 1;
}
@media (max-width: 45em) {
  .note .note__container {
    padding: 1rem;
  }
  .note .note__container .note-sub-title {
    font-size: 1.6rem;
  }
  .note .note__container p {
    font-size: 1.4rem;
  }
  .note .note__container .note-list li {
    font-size: 1.2rem;
  }
}

* {
  margin: 0;
  box-sizing: border-box;
}
*:before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
@media (max-width: 112em) {
  html {
    font-size: 65%;
  }
}
@media (min-width: 113em) {
  html {
    font-size: 75%;
  }
}

body {
  background: #fffcf5;
  font-size: 1.6rem;
  min-height: 100vh;
  font-family: "OpenSans_Condensed-Medium", sans-serif;
  font-size: 1.6rem;
}

h1, h2, h3 {
  font-family: "Open Sans", serif;
  font-weight: 800;
}

p {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

main {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

image,
video,
canvas,
svg {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  justify-content: center;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@font-face {
  font-family: "Noto Serif Display";
  src: url("font/NotoSerifDisplay-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "OpenSans_Condensed-Medium";
  src: url("font/OpenSans_Condensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Merriweather Sans";
  src: url("font/MerriweatherSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
h3 {
  font-family: "Merriweather Sans", sans-serif;
}

h2 {
  font-family: "Merriweather Sans", sans-serif;
}

p {
  font-family: "Merriweather Sans", sans-serif;
}

animate-fade-in {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.no-scroll {
  overflow-y: hidden;
}

/*# sourceMappingURL=style.comp.css.map */