/* Reset basic styles */
body,
header,
a,
button {
  /* Targeting body, header, anchor tags, and buttons */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  font-family: Arial, sans-serif; /* Set the font to Arial */
  box-sizing: border-box; /* Ensures padding and border are included in element width/height */
}

/* Style the top bar */
header {
  position: fixed; /* Fix the header at the top */
  top: 0; /* Stick to the top of the page */
  width: 100%; /* Full width */
  display: flex; /* Use flexbox to align items horizontally */
  justify-content: space-between; /* Distribute items evenly with space between them */
  align-items: center; /* Center items vertically */
  background-color: white; /* Set the background color to green */
  padding: 10px 20px; /* Add 10px padding vertically and 20px horizontally */
  color: green !important; /* Set the text color */
  z-index: 1000; /* Ensure the header is above other content */
  height: 50px; /* Set a fixed height for the header */
}

/* Top bar sections */
.top-bar {
  display: flex; /* Use flexbox to align items horizontally within each section */
  align-items: center; /* Center items vertically */
}

/* Language button */
.language {
  position: relative; /* Position relative to allow absolute positioning of the popup menu */
}

#language-btn {
  background: none; /* Remove default background */
  border: none; /* Remove border */
  color: green; /* Set text color */
  cursor: pointer; /* Change cursor to pointer on hover */
  font-size: 16px; /* Set font size */
}

.language-popup {
  display: none; /* Initially hide the popup */
  position: absolute; /* Position relative to the container */
  top: 40px; /* Ensures it stays within the navbar */
  left: 0; /* Align the popup to the left of the container */
  background-color: #73983b; /* Set the background color to white */
  border: 1px solid #ccc; /* Add a light gray border */
  border-radius: 5px; /* Round the corners of the popup */
  display: none;
  z-index: 1100; /* Ensure the popup appears above other elements */
}

.language-popup button {
  background: none; /* Remove default background */
  border: none; /* Remove default border */
  padding: 10px; /* Add padding inside the buttons */
  color: white; /* Set the text color to green */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-align: left; /* Align text to the left */
  width: 100%; /* Make buttons span the full width of the popup */
}

.language-popup button:hover {
  background-color: #f0f0f0; /* Set a light gray background */
}

/* Contact info */
.contact-info a {
  color: green !important; /* Set text color */
  text-decoration: none; /* Remove underline from links */
  display: flex; /* Use flexbox to align icon and text horizontally */
  align-items: center; /* Center icon and text vertically */
  margin: 0 15px; /* Add 15px horizontal margin between items */
}

.contact-info i {
  margin-right: 5px; /* Add 5px space between icon and text */
}

/* Social media links */
.social-media a {
  color: white; /* Set icon color */
  background-color: green; /* Set icon background to white */
  font-size: 18px; /* Set font size */
  width: 30px; /* Set icon width to 30px */
  height: 30px; /* Set icon height to 30px */
  line-height: 30px; /* Center icon vertically */
  text-align: center; /* Center icon horizontally */
  border-radius: 50%; /* Make the icon background circular */
  margin-left: 5px; /* Add 5px space between social media icons */
  transition: transform 0.2s; /* Add smooth scaling transition effect */
}

.social-media a:hover {
  transform: scale(1.1); /* Slightly increase size on hover */
}

/* Vertical separators */
.separator {
  width: 1px; /* Set the width of the separator */
  height: 20px; /* Set the height of the separator */
  background-color: green; /* Set the color */
  margin: 0 10px; /* Add horizontal margin around the separator */
}

/* Navbar Styling */
.navbar {
  position: fixed; /* Fixed position to keep navbar at the top */
  top: 50px; /* Position below the header */
  width: 100%; /* Full width */
  padding: 5px 20px; /* Reduced top and bottom padding */
  background-color: green !important; /* Force navbar background to white */
  color: gold !important; /* Default text color for navbar */
  display: flex; /* Flexbox for alignment */
  justify-content: space-between; /* Space between logo and links */
  align-items: center; /* Center items vertically */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
  transition: background 0.3s ease, color 0.3s ease; /* Smooth transitions */
  z-index: 1000; /* Ensure navbar is above other content */
  height: 70px; /* Set a fixed height for the navbar */
}

/* Navbar Brand (Logo) */
.navbar-brand img {
  width: 70px; /* Set the logo width */
  height: auto; /* Maintain aspect ratio for the logo */
  margin-right: 50px; /* Add space between the logo and the next element */
}

/* Change Navbar Background on Scroll */
.navbar.scrolled {
  background: green !important; /* Change background color on scroll */
  color: gold !important; /* Change text color on scroll */
}

/* Shop Now Button */
.rent-btn {
  background-color: gold; /* Button background color */
  color: green; /* Button text color */
  padding: 8px 20px; /* Add padding to increase clickable area */
  border-radius: 20px; /* Make the button corners rounded */
  text-decoration: none; /* Remove default underline styling for links */
  font-size: 14px; /* Adjust button text size */
  font-weight: bold; /* Make button text bold */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth color change on hover */
  margin-right: 20px;
}

.rent-btn:hover {
  background-color: white; /* Subtle hover effect for the button */
  color: green;
}

/* Change Shop Now Button on Scroll */
.navbar.scrolled .rent-btn {
  background-color: gold; /* Change background color to white */
  color: green; /* Change text color to green */
}

/* Navbar Links */
.navbar-nav {
  display: flex; /* Ensure flexbox is enabled */
  gap: 15px; /* Add a 15px gap between nav links */
}

/* Navbar Links */
.nav-link {
  color: gold !important; /* Navbar link text color */
  font-size: 15px; /* Set the font size for navbar links */
  padding: 10px 15px; /* Add padding for spacing */
  text-decoration: none; /* Remove default underline styling */
  transition: color 0.3s; /* Smooth color change on hover */
  position: relative; /* Required for positioning the submenu */
}

.nav-link:hover {
  color: white; /* Add a hover effect for better interactivity */
}

/* Change Navbar Links Color on Scroll */
.navbar.scrolled .nav-link {
  color: gold !important; /* Change text color to white */
}

/* Sub-menu Styling */
.sub-menu {
  display: none; /* Hide submenu by default */
  position: absolute; /* Position submenu relative to its parent */
  top: 100%; /* Position submenu below the parent link */
  left: 0; /* Align submenu to the left */
  background-color: green !important; /* Submenu background color */
  color: #000;
  box-shadow: 0 2px 8px rgba(41, 205, 76, 0.158); /* Add a shadow for depth */
  border-radius: 4px; /* Make submenu corners slightly rounded */
  z-index: 10; /* Ensure submenu appears on top of other elements */
}

/* Show submenu on hover */
.rent-buy:hover .sub-menu {
  display: block; /* Show submenu when hovering over parent link */
}

/* Navigation Toggle (Hamburger icon) */
.navbar-toggler {
  border-color: green; /* White border for the toggle button */
}

.navbar-toggler-icon {
  background-color: forestgreen; /* White toggle icon */
}

/* Icons & Register Button */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 15px; /* Add a 15px gap between icons and register button */
  margin-left: 20px;
}

.nav-icons i {
  font-size: 18px;
  margin-right: 15px;
  cursor: pointer;
}

.register-btn {
  background: gold;
  color: green;
  padding: 8px 15px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
}

.register-btn:hover {
  background: white;
  color: green;
}

/* Change register button Color on Scroll */
.navbar.scrolled .register-btn {
  background-color: gold;
  color: green !important; /* Change text color to white */
}

/* Navbar Animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.navbar.scrolled {
  animation: slideDown 0.5s ease-in-out;
}

/* Unique Slider Container */
.unique-slider-section .slider-container {
  position: relative; /* Makes the container's position relative, allowing positioning of child elements (like slides) within it */
  width: 100%; /* Sets the width of the container to 100% of its parent element */
  height: 100vh; /* Sets the height of the container to 100% of the viewport height, making it full-screen */
  overflow: hidden; /* Ensures anything that overflows the container (like an image larger than the container) is hidden */
  top: 120px; /* Position below the combined height of header (50px) and navbar (70px) */
  z-index: 1; /* Ensure the slide section is above other content */
  position: relative; /* Ensure stacking context is respected */
  z-index: 1; /* Lower priority than header */
  padding-bottom: 30px; /* Create space below the slide for the unique-about-section */
}

/* Slides */
.unique-slider-section .slides {
  display: flex; /* Uses flexbox to arrange slides in a horizontal row */
  transition: transform 1s ease-in-out; /* Adds a smooth transition when the slides move left or right */
}

.unique-slider-section .slides img {
  width: 100%; /* Ensures the image stretches to the full width of the container */
  height: 100%; /* Ensures the image stretches to the full height of the container */
  object-fit: cover; /* Ensures the image covers the entire container without distortion */
  flex-shrink: 0; /* Prevents the image from shrinking */
}

/* Overlay */
.unique-slider-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.596); /* White with 70% transparency */
  color: white; /* Default text color in overlay is now black */
  z-index: 2;
}

.unique-slider-section .overlay-content {
  text-align: center;
  max-width: 900px; /* Increased width for better text wrapping */
  padding: 20px;
}

/* Impact Text Animation */
.unique-slider-section .impact-text {
  font-size: 50px; /* Reduced size to fit on a single line */
  font-weight: 600;
  color: gold; /* Change impact text color to black */
  opacity: 0; /* Hidden by default */
  transform: translateY(-30px); /* Start from above */
  transition: all 0.8s ease;
}

.impact-text.animate-impact {
  opacity: 1; /* Fade in */
  transform: translateY(0); /* Slide into position */
}

/* Solution Text Animation */
.unique-slider-section .solution-text {
  font-size: 1.2rem; /* Slight adjustment for consistency */
  color: white !important; /* Changed text color to black for better contrast */
  line-height: 1.5; /* Added line height for better readability */
  max-width: 700px; /* Ensure text doesn't stretch too wide */
  margin: 0 auto; /* Center-align text block */
  opacity: 0; /* Hidden by default */
  transform: translateY(30px); /* Start from below */
  transition: all 0.8s ease;
  margin-bottom: 5px;
}

.unique-slider-section .solution-text.animate-solution {
  opacity: 1; /* Fade in */
  transform: translateY(0); /* Slide into position */
}

/* Discover More Button Animation */
.unique-slider-section .hidden-button {
  opacity: 0; /* Hidden initially */
  transform: scale(0.9); /* Slightly shrunken */
  transition: all 0.5s ease;
}

.unique-slider-section .hidden-button.animate-button {
  opacity: 1; /* Fully visible */
  transform: scale(1); /* Restore to normal size */
}

/* Hover Styles for Discover More Button */
.unique-slider-section .discover-more {
  display: inline-block; /* Makes the element inline while allowing block-level properties like padding */
  margin-top: 15px; /* Adds space above the button */
  padding: 10px 20px; /* Adds space inside the button (10px top/bottom, 20px left/right) */
  background-color: transparent; /* Makes the button background transparent */
  color: gold; /* Text color is black */
  text-decoration: none; /* Removes the underline from the button text */
  font-size: 18px; /* Sets the font size of the text */
  border: 4px solid gold; /* Adds a 4px solid border color */
  border-radius: 50px; /* Rounds the corners of the button with a 50px radius */
  transition: all 0.3s ease; /* Adds a smooth transition effect for all properties over 0.3 seconds */
}

.unique-slider-section .discover-more:hover {
  background-color: gold;
  color: green;
  border-radius: 50px; /* Rounds the corners of the button with a 50px radius */
}

.unique-slider-section .button-layer .btn:hover {
  background-color: #ffcc00;
  color: #146d00;
}

/* Navigation Buttons */
.unique-slider-section .nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: white;
  border: none;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  z-index: 3;
  border-radius: 50%;
}

.unique-slider-section .nav-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.unique-slider-section .nav-button.left {
  left: 10px;
}

.unique-slider-section .nav-button.right {
  right: 10px;
}

/* Unique About Us Section */
.unique-about-section {
  background-color: white; /* White background */
  padding: 40px 20px; /* Padding around the section */
  width: 100%; /* Full width */
  display: block;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 0; /* Ensure no overlap */
  z-index: 0; /* Place it beneath header and slide section */
  margin-top: 180px !important; /* Added space to avoid overlap */
}

.unique-about-section .elementor-container {
  display: flex;
  max-width: 1200px; /* Maximum width for the container */
  width: 100%;
  gap: 30px; /* Space between columns */
  justify-content: space-between;
}

.unique-about-section .elementor-column {
  flex: 1; /* Columns take equal space */
  display: block;
  flex-direction: column; /* Stack content vertically */
}

.unique-about-section .unique-heading-title {
  font-size: 2.5rem; /* Heading font size */
  color: gold; /* Green color for heading */
  margin-bottom: 15px; /* Space below the heading */
}

.unique-about-section .unique-about-text {
  font-size: 1rem; /* Standard font size for paragraphs */
  color: green; /* Medium gray color */
  line-height: 1.6; /* Increased line spacing */
}

.unique-about-section .unique-button {
  display: inline-block;
  padding: 15px 30px; /* Button padding */
  font-size: 1.2rem; /* Button font size */
  color: white; /* White text color */
  background-color: green; /* Green background */
  text-decoration: none; /* Removes underline */
  margin-top: 15px; /* Space above the button */
  text-align: center;
  cursor: pointer;
}

.unique-about-section .unique-button:hover {
  background-color: gold; /* Yellow on hover */
  color: green; /* Green text on hover */
}

/* Unique Swiper Carousel Styling */
.unique-about-section .unique-image-carousel {
  width: 100%;
  max-width: 600px;
  overflow: hidden;
}

.unique-about-section .swiper-wrapper {
  display: flex; /* Flexbox layout for slides */
}

.unique-about-section .swiper-slide {
  flex: 0 0 auto; /* Prevents shrinking or growing */
  width: 100%; /* Full width of each slide */
}

.unique-about-section .swiper-slide img {
  width: 100%; /* Responsive image width */
  height: 350px; /* Fixed height for images */
  object-fit: cover; /* Ensures the image fits the container */
}

/* Animation for Unique Image Carousel */
.unique-about-section .unique-image-carousel {
  opacity: 0; /* Initially hidden */
  transform: translateX(-100%); /* Start from the left edge */
  transition: all 1s ease-in-out; /* Smooth transition */
}

.unique-about-section .unique-image-carousel.animate {
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Slide to the right */
}

.unique-image-carousel {
  opacity: 1;
  transform: none;
}

/* Animation for Unique Text Content */
.unique-about-section .elementor-column:first-child {
  opacity: 0; /* Initially hidden */
  transform: translateX(-100%); /* Start from the left edge */
  transition: all 3s ease-in-out; /* Reduced transition duration */
}

.unique-about-section .elementor-column:first-child.animate {
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Slide to the right */
}

/* Welcome Section */
#welcome-section {
  text-align: center; /* Centers the text horizontally */
  padding: 50px 20px; /* Adds spacing inside the section */
  background-color: white;
}

#welcome-section h1 {
  font-size: 2.5rem; /* Sets a larger font size for the heading */
  color: green; /* Dark color for the heading text */
  margin-top: 0 !important;
  margin-bottom: 1rem; /* Add spacing below the header */
  text-align: center; /* Center-align the text */
  font-weight: bold; /* Make the text bold */
  font-size: 3rem; /* Increase font size */
}

#welcome-section .highlight {
  color: gold; /* Green color to highlight certain text */
}

.services {
  display: flex; /* Enables a flexible layout for child elements */
  flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
  justify-content: center; /* Centers child items horizontally */
  gap: 30px; /* Adds spacing between service cards */
  margin: 30px 0; /* Adds spacing above and below the services section */
}

/* Service Card Styling */
.service-card {
  position: relative; /* Keeps elements inside properly aligned */
  background: green; /* White background for the card */
  border: 1px solid green; /* Light gray border */
  border-radius: 10px; /* Rounded corners */
  width: 250px; /* Fixed width */
  height: 300px; /* Fixed height */
  display: flex; /* Enables flex layout */
  flex-direction: column; /* Stacks children vertically */
  justify-content: center; /* Centers content vertically */
  align-items: center; /* Centers content horizontally */
  padding: 20px; /* Adds spacing inside */
  text-align: center; /* Centers text */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effects */
  cursor: pointer; /* Indicates interactivity */
  overflow: hidden; /* Hides overflowing content */
}

.service-card i {
  font-size: 3rem; /* Icon size */
  color: gold; /* Green color */
  margin-bottom: 10px; /* Space between icon and text */
  transition: transform 0.3s ease; /* Smooth animation for movement */
}

.service-card h3 {
  font-size: 1.3rem; /* Slightly larger text for titles */
  color: white; /* Dark text color */
  transition: transform 0.3s ease; /* Smooth animation for movement */
}

/* Hover effect: move the icon up and text follows */
.service-card:hover i {
  transform: translateY(-10px); /* Moves the icon up slightly */
}

.service-card:hover h3 {
  transform: translateY(
    -5px
  ); /* Moves the text up slightly, following the icon */
}

/* Hover Card Styling */
.hover-card {
  position: absolute; /* Positioned relative to the parent card */
  top: 0; /* Aligns to the top of the parent card */
  left: 0; /* Aligns to the left of the parent card */
  width: 100%; /* Matches the width of the parent card */
  height: 100%; /* Matches the height of the parent card */
  background-color: white; /* background color */
  color: green; /* White text color on hover card */
  display: flex; /* Enables flexible layout for child elements */
  flex-direction: column; /* Stacks child elements vertically */
  justify-content: center; /* Centers content vertically */
  align-items: center; /* Centers content horizontally */
  border-radius: 10px; /* Same rounded corners as the parent card */
  text-align: center; /* Centers the text inside the hover card */
  padding: 15px; /* Adds inner spacing */
  opacity: 0; /* Initially hidden */
  pointer-events: none; /* Prevents interaction when hidden */
  transform: scale(0.8); /* Shrinks the card slightly */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition for opacity and scaling */
}

.hover-card i {
  font-size: 3rem; /* Keeps icon size consistent with main card */
  margin-bottom: 10px; /* Adds space between icon and text */
}

.hover-card p {
  font-size: 1rem; /* Standard font size for paragraph text */
  margin: 0; /* Removes default margin */
}

.service-card:hover .hover-card {
  opacity: 1; /* Makes the hover card visible */
  pointer-events: all; /* Enables interaction */
  transform: scale(1); /* Restores hover card to its normal size */
}

.service-card:hover i,
.service-card:hover h3 {
  color: green; /* Changes icon and title color to white on hover */
}

/* Description Section */
.description {
  font-size: 1rem; /* Standard font size for description text */
  color: #666; /* Subtle gray color for text */
  max-width: 600px; /* Limits width for better readability */
  margin: 0 auto; /* Centers the description section horizontally */
  line-height: 1.5; /* Increases line height for better readability */
}

/* Why choose us Section Styling */
#why-choose-us {
  text-align: center; /* Centers all the content in the section */
  padding: 50px; /* Adds spacing inside the section for better readability */
  font-family: Arial, sans-serif; /* Uses a clean and modern font for the text */
  background-color: white;
}

#why-choose-us h2 {
  color: gold; /* Sets the text color to a dark grey for good contrast */
  margin-top: 0 !important;
  margin-bottom: 1rem; /* Add spacing below the header */
  text-align: center; /* Center-align the text */
  font-weight: bold; /* Make the text bold */
  font-size: 3rem; /* Increase font size */
}

#why-choose-us span {
  color: green; /* Highlights the word "Choose Us" with a green color */
}

#why-choose-us p {
  color: #666; /* Sets the paragraph text color to a medium grey */
  margin-bottom: 40px; /* Adds space below the paragraph for visual separation */
}

/* Features Grid */
.features {
  display: grid; /* Creates a grid layout for the feature items */
  grid-template-columns: repeat(
    auto-fit,
    minmax(250px, 1fr)
  ); /* Ensures items are responsive, minimum 250px wide */
  gap: 20px; /* Adds space between grid items */
}

.feature-item {
  display: flex; /* NEW: Aligns the icon and text side-by-side */
  align-items: flex-start; /* NEW: Ensures the icon and text align at the top */
  gap: 15px; /* NEW: Adds space between the icon and text */
  background: white; /* Sets a white background for the feature cards */
  border: none; /* Adds a green border around the video item */
  border-radius: 8px; /* Rounds the corners of the cards */
  padding: 20px; /* Adds internal spacing inside each card */
  text-align: left; /* Aligns the text to the left for better readability */
  opacity: 0; /* Makes the feature cards initially invisible */
  transform: translateY(30px); /* Increased translation for more drop effect */
  transition: opacity 0.6s ease, transform 0.6s ease; /* Smoother animation */
}

.feature-item i {
  font-size: 2.5em; /* Ensures the icon size is prominent */
  color: forestgreen; /* Matches the theme with green color */
  margin-top: 5px; /* NEW: Aligns the icon visually with the text */
  flex-shrink: 0; /* NEW: Prevents the icon from resizing when the text grows */
}

.feature-item h3 {
  font-size: 1.5em; /* Sets a larger font size for the feature titles */
  color: #333; /* Makes the titles dark grey for good contrast */
  margin-bottom: 10px; /* Adds space below the titles for visual separation */
}

.feature-item p {
  color: #666; /* Sets the text color of the feature descriptions to a medium grey */
  line-height: 1.5; /* Increases line spacing for better readability */
}

/* Reveal animation on scroll */
.feature-item.visible {
  opacity: 1; /* Makes the feature cards fully visible */
  transform: translateY(
    0
  ); /* Moves the cards to their original position (no offset) */
}

/* Drop animation */
@keyframes drop {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered animation delays with increased duration */
.feature-item:nth-child(1) {
  animation: drop 1.2s ease-out 0.6s forwards;
}

.feature-item:nth-child(2) {
  animation: drop 1.2s ease-out 1s forwards;
}

.feature-item:nth-child(3) {
  animation: drop 1.2s ease-out 1.4s forwards;
}

.feature-item:nth-child(4) {
  animation: drop 1.2s ease-out 1.8s forwards;
}

/* Ensure the cards are hidden initially */
.feature-item {
  opacity: 0;
}

/* Hover effect for the cards */
.feature-item:hover {
  transform: scale(1.05); /* Slightly scale up the card */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

/* Agriease Team Section */
.agriease-team-section {
  width: 100%; /* Full width */
  background-color: green !important; /* Green background */
  padding: 50px 30px; /* Top and bottom padding, left and right padding */
  scroll-margin-top: 100px; /* Scroll margin for smooth navigation */
}

html {
  scroll-behavior: smooth; /* Smooth scrolling */
}

/* Optional: Prevent interference with surrounding sections */
.agriease-team-section:before {
  content: ""; /* Empty content */
  display: block; /* Block display */
  height: 50px; /* Height */
  margin-top: -50px; /* Negative margin to offset */
  visibility: hidden; /* Hidden visibility */
}

/* Header Styling */
.agriease-header {
  display: flex; /* Flexbox layout */
  justify-content: space-between; /* Space between title and button */
  align-items: center; /* Center align items vertically */
  margin-bottom: 30px; /* Bottom margin */
}

/* Agriease Title Styling */
.agriease-team-title {
  color: white; /* Default text color */
  margin-right: 10px; /* Added margin-right to reduce space */
  text-align: center; /* Center-align the text */
  font-weight: bold; /* Make the text bold */
  font-size: 2rem; /* Increase font size */
}

.management {
  color: gold; /* Yellow color for "Management" */
}

.team {
  color: white; /* White color for "Team" */
}

/* View All Button Styling */
.agriease-view-all-btn {
  background-color: gold; /* White background */
  color: green; /* Green text color */
  border: none; /* No border */
  padding: 10px 20px; /* Padding */
  border-radius: 25px; /* Circular edges */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s ease; /* Smooth transition */
}

.agriease-view-all-btn:hover {
  background-color: white; /* Hover background color */
  color: green; /* Hover text color */
}

/* Agriease Layout for Team Members */
.agriease-team-row {
  display: flex; /* Flexbox layout */
  justify-content: center; /* Center align items */
  flex-wrap: wrap; /* Wrap items */
  gap: 20px; /* Gap between items */
}

/* Agriease Team Cards */
.agriease-team-card {
  width: 270px; /* Default width */
  opacity: 0; /* Initially hidden */
  transform: translateY(-50px); /* Initial translateY */
  transition: all 1s ease-out; /* Smooth transition */
}

.agriease-team-card:nth-child(3) {
  width: 300px; /* Wider width for third card */
}

.agriease-team-card.visible {
  opacity: 1; /* Visible */
  transform: translateY(0); /* Reset translateY */
}

/* Card Styling */
.agriease-card {
  background-color: white !important; /* White background */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
  text-align: center; /* Center text */
  overflow: hidden; /* Hide overflow */
  padding: 10px; /* Padding */
}

/* Agriease Team Member Image */
.agriease-team-image {
  width: 100%; /* Full width */
  height: 250px; /* Fixed height */
  object-fit: cover; /* Cover the container */
  object-position: top center; /* Align image to top center */
  transition: transform 0.5s ease; /* Smooth transition */
}

/* Hover effect for team image */
.agriease-image-container:hover .agriease-team-image {
  transform: scale(1.1); /* Scale up on hover */
}

/* Card Body */
.agriease-card-body {
  padding: 15px; /* Padding */
}

/* Agriease Member Names */
.agriease-card-body h5 {
  font-size: 1.2rem; /* Font size */
  color: #222; /* Text color */
  margin-bottom: 10px; /* Bottom margin */
}

/* Agriease Role Styling */
.agriease-card-body p {
  font-size: 0.9rem; /* Font size */
  color: #666; /* Text color */
  font-style: italic; /* Italic text */
  margin-bottom: 15px; /* Bottom margin */
}

/* Social Links */
.agriease-social-links {
  list-style: none; /* Remove list style */
  padding: 0; /* Remove padding */
  display: flex; /* Flexbox layout */
  justify-content: center; /* Center align items */
  gap: 5px; /* Gap between items */
  margin-bottom: 15px; /* Bottom margin */
}

.agriease-social-links li a {
  display: inline-block; /* Inline block */
  border: 2px solid green; /* Border */
  border-radius: 50%; /* Circular shape */
  width: 35px; /* Fixed width */
  height: 35px; /* Fixed height */
  display: flex; /* Flexbox layout */
  align-items: center; /* Center align items vertically */
  justify-content: center; /* Center align items horizontally */
  color: green; /* Text color */
  transition: background-color 0.3s ease; /* Smooth transition */
}

.agriease-social-links li a:hover {
  background-color: green; /* Hover background color */
  color: gold; /* Hover text color */
}

/* Agriease Read More Button */
.agriease-read-more-btn {
  background-color: green; /* Green background */
  color: white; /* White text color */
  border: none; /* No border */
  padding: 8px 12px; /* Padding */
  border-radius: 25px; /* Circular edges */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s ease; /* Smooth transition */
}

.agriease-read-more-btn:hover {
  background-color: gold; /* Hover background color */
  color: green;
}

/* Partner Container Section Styling */
.partners-section {
  padding: 60px 0;
  background-color: white; /* Light background color */
  text-align: center;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.section-title {
  color: #0a6d2c; /* Sets text color to dark green */
  text-align: center;
  font-weight: bold; /* Make the text bold */
  font-size: 2.5rem; /* Increase font size */
  margin-bottom: 30px;
}

/* Style for "Our" text */
.supporting {
  color: gold !important; /* Keep "Our" text green */
}

/* Style for "Products" text */
.partners {
  color: green !important; /* Change "Products" text to yellow */
}

/* Partner Logos Container */
.partners-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px; /* Space between logos */
}

/* Each Partner Logo */
.partner-logo img {
  width: 100%;
  height: auto;
  max-width: 150px; /* Set a fixed width for the logos */
  transition: transform 0.3s ease-in-out;
  border-radius: 8px;
}

.partner-logo img:hover {
  transform: scale(1.1); /* Zoom effect on hover */
}

@media screen and (max-width: 768px) {
  .partners-wrapper {
    justify-content: center;
  }
  .partner-logo img {
    max-width: 120px; /* Adjust logo size for smaller screens */
  }
}

/* News and Events Section Styling */
.news-and-events {
  padding: 40px; /* Adds space inside the section for better spacing */
  background-color: white; /* Sets a light gray background color */
}

/* Header Section */
.news-header {
  display: flex; /* Enables flexbox for better alignment */
  justify-content: space-between; /* Aligns items to opposite ends (left and right) */
  align-items: center; /* Centers items vertically */
  margin-bottom: 20px; /* Adds spacing below the header */
}

/* Heading Styling */
.heading h1 {
  color: #0a6d2c; /* Sets text color to dark green */
  text-align: center;
  font-weight: bold; /* Make the text bold */
  font-size: 3rem; /* Increase font size */
}

/* Style for "Our" text */
.news {
  color: gold !important; /* Keep "Our" text green */
}

/* Style for "Products" text */
.events {
  color: green !important; /* Change "Products" text to yellow */
}

/* Left Description Styling */
.news-description h2 {
  font-size: 24px; /* Sets font size for readability */
  color: green; /* Dark gray color for better contrast */
  margin-bottom: 20px; /* Adds space below the description */
}

/* View All Button Container */
.view-all-btn {
  display: flex; /* Enables flexbox */
  justify-content: flex-end; /* Moves the button to the right */
}

/* View All Button Styling */
.view-all-btn a {
  padding: 12px 30px; /* Adds padding for a larger clickable area */
  background-color: green; /* Sets button background color to dark green */
  color: white; /* Sets text color to white for contrast */
  text-decoration: none; /* Removes the default underline from the link */
  border-radius: 25px; /* Rounds the corners of the button */
  font-size: 16px; /* Increases text size for better readability */
  font-weight: bold; /* Makes the text bold */
  transition: background-color 0.3s ease; /* Smooth color transition effect */
}

/* View All Button Hover Effect */
.view-all-btn a:hover {
  background-color: gold; /* Changes button color to darker green on hover */
  color: green;
}

/* Blog Section Layout */
.blog-section {
  display: grid; /* Enables grid layout */
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
  gap: 20px; /* Adds space between blog posts */
  padding: 20px; /* Adds padding around the section */
  background-color: white; /* Sets light gray background color */
}

/* Individual Blog Post Styling */
.blog-post {
  background: white; /* Sets background color to white */
  border: 2px solid green; /* Adds a green border around the video item */
  border-radius: 8px; /* Rounds the corners for a softer look */
  overflow: hidden; /* Prevents content from overflowing */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow effect */
  transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
}

/* Image Container */
.image-container img {
  width: 100%; /* Ensures image stretches to fit the container */
  height: 250px; /* Sets a fixed height for all images */
  object-fit: cover; /* Ensures images maintain aspect ratio while covering the area */
  display: block; /* Prevents extra space below the image */
  transition: transform 0.3s ease; /* Adds a smooth zoom effect on hover */
}

.date .category {
  color: gold;
}

/* Blog Post Title Styling */
.blog-post h2 {
  font-size: 18px; /* Sets a medium font size */
  margin: 10px; /* Adds space around the title */
  font-weight: bold; /* Makes the text bold */
}

/* Blog Post Title Link Styling */
.blog-post h2 a {
  text-decoration: none; /* Removes underline from links */
  color: green; /* Sets text color to dark gray */
  transition: color 0.3s ease; /* Smooth color transition effect */
}

/* Blog Post Title Hover Effect */
.blog-post h2 a:hover {
  color: green; /* Changes text color to blue on hover */
}

/* Blog Description */
.blog-post p {
  font-size: 14px; /* Sets a readable font size */
  color: #555; /* Sets text color to a slightly lighter gray */
  padding: 0 10px 10px; /* Adds padding inside the paragraph */
}

/* WhatsApp Icon */
.whatsapp-icon {
  position: fixed; /* Fixed to viewport */
  bottom: 20px; /* 20px from the bottom */
  left: 20px; /* 20px from the left */
  background: #25d366; /* WhatsApp green color */
  color: white; /* Icon color */
  font-size: 1.5rem; /* Icon size */
  padding: 15px; /* Padding for the icon */
  border-radius: 60%; /* Circular icon */
  cursor: pointer; /* Pointer on hover */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  z-index: 100; /* Place above other elements */
}

/* WhatsApp Popup Container */
.whatsapp-popup {
  display: none; /* Initially hidden */
  position: fixed; /* Fixed to viewport */
  bottom: 80px; /* Popup position above the WhatsApp icon */
  left: 20px; /* Align with the WhatsApp icon */
  width: 300px; /* Fixed width */
  background: white; /* Popup background */
  border: 1px solid #ddd; /* Light border */
  border-radius: 15px; /* Circular edges for the popup */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  z-index: 101; /* Above the icon */
  font-family: Arial, sans-serif; /* Default font */
}

/* Show popup on hover over either the icon or the popup */
.whatsapp-icon:hover + .whatsapp-popup,
.whatsapp-popup:hover {
  display: block; /* Keep the popup visible */
}

/* Popup Header */
.popup-header {
  display: flex; /* Horizontal alignment */
  justify-content: space-between; /* Space between text and close icon */
  align-items: center; /* Center align */
  background: #25d366; /* WhatsApp green */
  color: white; /* White text */
  padding: 10px; /* Padding inside */
  border-radius: 15px 15px 0 0; /* Rounded top corners */
  font-size: 1rem; /* Header font size */
}

.popup-header .close-popup {
  cursor: pointer; /* Pointer on hover for close icon */
  font-size: 1.2rem; /* Icon size */
}

/* Popup Body */
.popup-body {
  padding: 15px; /* Add space inside */
  font-size: 0.9rem; /* Text size */
  color: #555; /* Slightly dark text color */
  line-height: 1.5; /* Line spacing */
}

/* Popup Footer */
.popup-footer {
  padding: 10px; /* Add space inside */
  text-align: left; /* Align "Open Chat" button to the left */
}

.popup-footer .open-chat-btn {
  display: inline-flex; /* Align icon and text horizontally */
  align-items: center; /* Center icon and text vertically */
  justify-content: center; /* Center content */
  background: #25d366; /* WhatsApp green */
  color: white; /* White text */
  text-decoration: none; /* Remove underline */
  padding: 10px 15px; /* Button padding */
  border-radius: 15px; /* Circular button edges */
  font-size: 0.9rem; /* Button font size */
  transition: background 0.3s; /* Smooth hover effect */
}

.popup-footer .open-chat-btn:hover {
  background: #1da851; /* Darker green on hover */
}

/* WhatsApp arrow icon before text */
.popup-footer .open-chat-btn::before {
  content: "➤"; /* Right chevron */
  margin-right: 8px; /* Space between icon and text */
  font-size: 1rem; /* Icon size */
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed; /* Keep button fixed to viewport */
  bottom: 20px; /* Position 20px from bottom */
  right: 20px; /* Position 20px from right */
  background: #2f772b; /* Green background */
  color: #fff; /* White color for arrow */
  border-radius: 50%; /* Make it circular */
  padding: 10px; /* Add padding inside */
  font-size: 1.5rem; /* Arrow size */
  cursor: pointer; /* Change cursor to pointer on hover */
  z-index: 10; /* Place above other elements */
}

/* Scroll to Top Hover Effect */
.scroll-to-top:hover {
  background: #225320; /* Darker green on hover */
}

/* Footer Styling */
:root {
  --green: green; /* Define a custom green color */
  --yellow: #ffc107; /* Define a custom yellow color */
}

.bg-green {
  background-color: var(--green); /* Set background color to green */
}

.bg-yellow {
  background-color: var(--yellow); /* Set background color to yellow */
}

.text-yellow {
  color: var(--yellow); /* Set text color to yellow */
}

.decorated-line {
  height: 2px; /* Set height of the decorated line */
  width: 50px; /* Set width of the decorated line */
  background-color: white; /* Set color of the decorated line */
}

.btn-yellow {
  background-color: var(--yellow); /* Set button background color to yellow */
  color: var(--green); /* Set button text color to green */
  border: none; /* Remove button border */
}

.btn-yellow:hover {
  background-color: #e0a800; /* Change button background color on hover */
}

.social-icons a {
  font-size: 1.5rem; /* Set social media icon size */
  transition: color 0.3s; /* Add smooth transition for icon color */
}

.social-icons a:hover {
  color: #e0a800; /* Change icon color on hover */
}

/* Bold text for Contact Us labels */
.contact-us-label {
  font-weight: bold; /* Make text bold */
}

/* Yellow hover effect for Quick Links */
.quick-links a {
  color: white; /* Set default text color to white */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s; /* Add smooth transition for text color */
}

.quick-links a:hover {
  color: var(--yellow); /* Change text color to yellow on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .footer .col-md-3 {
    margin-bottom: 2rem; /* Add margin between columns on smaller screens */
  }
}

/* Specific styles for the footer section */
.footer-section {
  position: relative; /* Ensure the footer is positioned correctly */
  z-index: 10; /* Ensure the footer is above other elements */
  margin-top: auto; /* Push the footer to the bottom of the page */
}