/* Global Styles */
body {
  font-family: "Roboto", sans-serif; /* Set the default font for the body */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  box-sizing: border-box; /* Ensure padding and borders are included in the element's total width and height */
  background-color: #f5f5f5; /* Light grey background for the whole page */
  color: #333; /* Set the default text color */
}

.container {
  width: 90%; /* Make the container 90% of the viewport width */
  margin: 0 auto; /* Center the container horizontally */
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space items evenly with space between */
  align-items: center; /* Vertically center the items */
}

.navbar {
  background-color: white; /* White background for the navbar */
  padding: 20px 0; /* 20px padding at the top and bottom */
  border-bottom: 1px solid #ddd; /* Add a light border at the bottom of the navbar */
  display: flex; /* Use flexbox for the layout */
  justify-content: space-between; /* Space navbar items evenly */
  align-items: center; /* Vertically center the items */
  position: -webkit-sticky; /* Sticky positioning for Safari browsers */
  position: sticky; /* Sticky positioning for other browsers */
  top: 0; /* Stick the navbar to the top of the viewport */
  z-index: 1000; /* Ensure the navbar stays on top of other elements */
}

.logo {
  height: 50px; /* Set the logo height */
}

nav ul {
  list-style: none; /* Remove the default list style */
  display: flex; /* Use flexbox to lay out the items horizontally */
  justify-content: space-between; /* Space the items evenly */
}

nav ul li {
  display: inline-block; /* Display each list item inline */
  margin-right: 20px; /* Add margin to the right of each item */
}

nav ul li:last-child {
  margin-right: 0; /* Remove margin from the last item */
}

nav ul li a {
  text-decoration: none; /* Remove underline from links */
  color: #333; /* Set the text color */
  font-weight: bold; /* Make the text bold */
}

/* Hamburger Menu Icon */
.hamburger {
  display: none; /* Hide the hamburger by default */
  flex-direction: column; /* Stack the hamburger bars vertically */
  cursor: pointer; /* Change cursor to pointer */
  gap: 5px; /* Add space between the hamburger bars */
  position: absolute; /* Position the hamburger icon */
  right: 20px; /* Place it 20px from the right edge */
}

.hamburger span {
  width: 25px; /* Set the width of the bars */
  height: 3px; /* Set the height of the bars */
  background-color: #333; /* Set the color of the bars */
  border-radius: 3px; /* Round the corners of the bars */
  transition: all 0.3s ease; /* Smooth transition when toggled */
}

/* Responsive Navbar */
@media (max-width: 768px) {
  nav ul {
    display: none; /* Hide the regular menu on small screens */
    flex-direction: column; /* Stack the menu items vertically */
    position: absolute; /* Position the menu absolutely */
    top: 60px; /* Position it below the navbar */
    right: 0; /* Align it to the right */
    background-color: white; /* White background */
    width: 100%; /* Full width of the viewport */
    text-align: left; /* Align the text to the left */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    z-index: 1000; /* Ensure the menu stays on top */
  }

  nav ul li {
    padding: 15px 20px; /* Add padding around each item */
  }

  .hamburger {
    display: flex; /* Show the hamburger icon on small screens */
    z-index: 1000; /* Keep the hamburger icon on top of other elements */
  }

  nav.active ul {
    display: flex; /* Show the mobile menu when active */
  }

  /* Hamburger animation when active */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* Top bar becomes part of an "X" */
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0; /* Hide the middle bar */
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px); /* Bottom bar becomes part of an "X" */
  }

  .container {
    width: 95%; /* Full width on mobile */
  }

  h1 {
    font-size: 2em; /* Smaller heading size on mobile */
  }

  h2 {
    font-size: 1.5em; /* Smaller subheading size on mobile */
  }

  .cta-section p {
    font-size: 1.2em; /* Smaller font for mobile CTA text */
  }

  .btn {
    padding: 10px 20px; /* Smaller button padding on mobile */
  }
}

/* Hero Section */
.hero {
  background-color: #4748f1; /* Dark blue background */
  color: white; /* White text */
  text-align: center; /* Center the text */
  padding: 100px 0; /* Add padding at the top and bottom */
}

.hero h1 {
  font-size: 2.5em; /* Large font size for the heading */
  margin-bottom: 20px; /* Space below the heading */
}

.hero p {
  font-size: 1.2em; /* Slightly larger font for paragraph */
  margin-bottom: 40px; /* Space below the paragraph */
}

.btn {
  background-color: white; /* White background for the button */
  color: #4748f1; /* Dark blue text */
  padding: 10px 30px; /* Padding inside the button */
  text-decoration: none; /* Remove underline from the button link */
  border-radius: 5px; /* Rounded corners */
  font-weight: bold; /* Bold text */
}

/* Footer */
.footer {
  background-color: #333; /* Dark grey background */
  color: white; /* White text */
  text-align: center; /* Center the text */
  padding: 20px 0; /* Padding at the top and bottom */
}

/* Hero Slider */
.hero-slider {
  position: relative; /* Position slider relatively to allow positioning of children */
  width: 100%; /* Full width */
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Hide overflow */
  display: flex; /* Use flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

.slider-container {
  display: flex; /* Flexbox for slide layout */
  width: 300%; /* Make the container three times the viewport width for three slides */
  transition: transform 0.5s ease-in-out; /* Smooth transition between slides */
}

.slide {
  width: 100%; /* Each slide takes full viewport width */
  height: 100vh; /* Full viewport height */
  flex: 1; /* Allow the slide to take full space */
  display: none; /* Initially hide all slides */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  background-color: #4748f1; /* Blue background */
  color: white; /* White text */
  text-align: center; /* Center the text */
  background-size: cover; /* Cover the background */
  background-position: center; /* Center the background */
  background-repeat: no-repeat; /* No background repeat */
}

@media (max-width: 768px) {
  .slide {
    background-size: auto 100%; /* Adjust background size for smaller screens */
  }
}

.slide.active {
  display: flex; /* Show the active slide */
  opacity: 1; /* Set full opacity for active slide */
}

.slide-content {
  text-align: center; /* Center the text content */
  width: 100%; /* Full width */
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px; /* Adjust padding to give space around the text */
  border-radius: 10px; /* Optional: rounded corners */
}

.slide-content h1 {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove any padding */
  color: white;
  font-size: 3em; /* Large font for slide heading */
  margin-bottom: 20px; /* Space below the heading */
}

.slide-content p {
  font-size: 1.5em; /* Slightly larger font for slide paragraph */
  margin-bottom: 40px; /* Space below the paragraph */
}

.slide-content .btn {
  color: white; /* Button text color */
  text-decoration: none; /* Remove underline */
  background-color: blue; /* Example button color */
  padding: 10px 20px; /* Space inside the button */
  border-radius: 5px; /* Optional rounded corners for the button */
  margin-bottom: 20px; /* Space below the button */
  display: inline-block; /* Ensure margin is effective */
}

/* Navigation Arrows */
.prev,
.next {
  position: absolute; /* Position arrows */
  top: 50%; /* Vertically center the arrows */
  transform: translateY(-50%); /* Offset to align correctly */
  color: white; /* White color for arrows */
  font-size: 2em; /* Larger arrow size */
  border: none; /* Remove borders */
  cursor: pointer; /* Pointer cursor */
  padding: 0; /* Remove default padding */
  background: none; /* Remove background */
  border-radius: 0; /* Remove border radius */
}

.prev {
  left: 20px; /* Position the "previous" arrow */
}

.next {
  right: 20px; /* Position the "next" arrow */
}

/* Dots/Indicators */
.dots {
  position: absolute; /* Position dots */
  bottom: 30px; /* Position 30px from the bottom */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Offset to align correctly */
}

.dot {
  height: 15px; /* Set the height of each dot */
  width: 15px; /* Set the width of each dot */
  background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
  border-radius: 50%; /* Make the dots circular */
  display: inline-block; /* Inline-block layout */
  margin: 0 5px; /* Space between the dots */
  cursor: pointer; /* Change cursor on hover */
}

.dot.active {
  background-color: white; /* Full white for active dot */
}

/* Animation */
.slide {
  opacity: 0; /* Initially hide all slides */
  transition: opacity 0.5s ease-in-out; /* Smooth opacity transition */
}

.slide.active {
  display: flex; /* Show the active slide */
  opacity: 1; /* Set full opacity for active slide */
}

/* Logo Hover Effect */
.logo {
  height: 50px; /* Set logo height */
  transition: transform 0.2s; /* Smooth transition for hover effect */
}

.logo:hover {
  transform: scale(1.05); /* Slightly enlarge the logo on hover */
}

/* Footer styles */
footer {
  background-color: #4748f1; /* Dark background */
  color: white; /* White text */
  padding: 40px 20px; /* Add padding for spacing */
  text-align: left; /* Align text to the left */
}

.footer-container {
  display: flex; /* Flexbox layout */
  justify-content: space-between; /* Space sections evenly */
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
  max-width: 1200px; /* Constrain the maximum width */
  margin: 0 auto; /* Center the container */
}

.footer-section {
  flex: 1; /* Each section takes equal space */
  min-width: 200px; /* Minimum width for each section */
  margin: 20px; /* Margin for spacing */
}

.footer-section h3 {
  font-size: 1.5em; /* Larger font size for headings */
  margin-bottom: 10px; /* Space below headings */
  color: #ffffff; /* White color for headings */
}

.footer-section p,
.footer-section ul {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

.footer-section a {
  color: #ffffff; /* White color for links */
  text-decoration: none; /* Remove underline from links */
  transition: color 0.3s; /* Smooth transition on hover */
}

.footer-section a:hover {
  color: #ffffff; /* Change color on hover */
  text-decoration: underline; /* Add underline on hover */
}

.footer-section ul {
  list-style: none; /* Remove bullet points */
}

.footer-section ul li {
  margin-bottom: 10px; /* Space between list items */
}

.footer-bottom {
  text-align: center; /* Center the bottom section */
  padding-top: 20px; /* Space above bottom text */
  border-top: 1px solid #444; /* Light top border for separation */
}

.footer-bottom p {
  margin: 5px 0; /* Space between paragraphs */
}

.footer-bottom a {
  color: #ffffff; /* Color for footer links */
}

.footer-bottom a:hover {
  color: #ffffff; /* Change color on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* Stack sections vertically on smaller screens */
    align-items: flex-start; /* Align items to the start */
  }

  .footer-section {
    min-width: 100%; /* Full width on smaller screens */
  }

  h1 {
    font-size: 2em; /* Smaller heading size on mobile */
  }

  nav ul {
    flex-direction: column; /* Stack navbar items vertically */
  }

  .market-item {
    width: 100%; /* Full width for market items on mobile */
  }

  .feature-item {
    width: 100%; /* Full width for feature items on mobile */
  }

  .slide-content h1 {
    font-size: 2em; /* Adjust heading size for mobile */
  }

  .slide-content p {
    font-size: 1.2em; /* Adjust paragraph size for mobile */
  }
}

/* Markets Section */
.markets {
  padding: 50px 0; /* Add padding for spacing */
  background-color: #f9f9f9; /* Light grey background */
}

.markets-title {
  text-align: center; /* Center the title */
  font-size: 2.5em; /* Large font size for the title */
  color: #4748f1; /* Dark blue color */
  margin-bottom: 40px; /* Space below the title */
  margin-top: 0; /* Ensure space at the top */
}

.market-grid {
  display: flex; /* Use flexbox layout */
  flex-wrap: wrap; /* Wrap items on smaller screens */
  justify-content: space-around; /* Space items evenly */
  gap: 20px; /* Add spacing between items */
}

.market-item {
  width: 45%; /* Each item takes 45% of the container width */
  background-color: white; /* White background */
  border-radius: 10px; /* Rounded corners */
  text-align: center; /* Center the text */
  padding: 20px; /* Padding inside the item */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
}

.market-item img {
  width: 100%; /* Full width for images */
  height: 200px; /* Set a fixed height */
  object-fit: cover; /* Ensure the image covers the area */
  border-radius: 10px; /* Rounded corners */
}

.market-item h3 {
  font-size: 1.8em; /* Larger font for heading */
  color: #333; /* Dark text */
  margin: 20px 0 10px; /* Space around the heading */
}

.market-item p {
  font-size: 1.2em; /* Slightly larger font */
  color: #666; /* Grey text */
  margin-bottom: 20px; /* Space below the paragraph */
}

@media (max-width: 768px) {
  .market-item {
    width: 100%; /* Full width on mobile */
  }
}

/* Technology Section */
.technology-features {
  padding: 50px 0; /* Add padding for spacing */
  background-color: #eef2f7; /* Light blue background */
}

.tech-title {
  text-align: center; /* Center the title */
  font-size: 2.5em; /* Large font size for the title */
  color: #4748f1; /* Dark blue color */
  margin-bottom: 40px; /* Space below the title */
}

.technology-container {
  max-width: 1200px; /* Max width for container */
  margin: 0 auto; /* Center the container */
}

.feature-item {
  background-color: white; /* White background */
  flex: 1 1 calc(50% - 20px); /* Take half the row */
  margin-bottom: 20px; /* Add space below */
  padding: 20px; /* Padding inside the item */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
  border-radius: 10px; /* Rounded corners */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack elements vertically */
}

.feature-item h3 {
  font-size: 1.8em; /* Larger font for heading */
  color: #333; /* Dark text */
  margin: 0 0 15px; /* Space below the heading */
  display: flex; /* Flexbox layout */
  align-items: center; /* Center items vertically */
}

.bullet {
  color: #4748f1; /* Custom color for the bullet */
  font-size: 1.5em; /* Larger font size */
  margin-right: 10px; /* Space between bullet and text */
}

.feature-item p {
  font-size: 1.2em; /* Slightly larger font for paragraphs */
  color: #666; /* Grey text */
  line-height: 1.5; /* Increase line height for readability */
}

/* Responsive adjustments for technology features */
@media (max-width: 768px) {
  .feature-item {
    width: 100%; /* Full width on mobile */
  }
}

/* Clear empty paragraphs in the footer */
.footer-section p:empty {
  margin: 10px 0; /* Add margin to ensure spacing */
}

h1,
h2 {
  color: #4748f1; /* Dark blue color for headings */
}

h1 {
  font-size: 2.5em; /* Large font size for the main heading */
  margin-bottom: 20px; /* Space below the heading */
}

h2 {
  font-size: 2em; /* Slightly smaller font size for subheadings */
  margin-top: 30px; /* Space above the subheadings */
  margin-bottom: 15px; /* Space below the subheadings */
}

/* Lists */
.benefits-list,
.solutions-list {
  list-style-type: none; /* Remove bullet points */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  width: 100%; /* Full width */
}

.benefits-list li,
.solutions-list li {
  background-color: #ffffff; /* White background for list items */
  margin: 10px 0; /* Space between items */
  padding: 15px; /* Padding inside list items */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* CTA Section */
.cta-section {
  margin-top: 40px; /* Space above the CTA section */
  text-align: center; /* Center the text */
}

.cta-section p {
  font-size: 1.5em; /* Larger font for CTA text */
  margin-bottom: 20px; /* Space below the text */
}

/* Button */
.btn {
  background-color: #4748f1; /* Dark blue background for button */
  color: white; /* White text */
  padding: 15px 30px; /* Padding inside the button */
  text-decoration: none; /* Remove underline from the button link */
  border-radius: 5px; /* Rounded corners */
  font-weight: bold; /* Bold text */
  transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.btn:hover {
  background-color: #333; /* Darken button on hover */
}

/* Why Irrigate Section */
.why-irrigate {
  background-color: #eef2f7; /* Light blue background */
  padding: 60px 0; /* More generous padding for breathing room */
}

.irrigate-title {
  font-size: 2.5em; /* Large font size for the title */
  text-align: center; /* Center the title */
  color: #333; /* Dark grey title color */
  margin-bottom: 50px; /* Space below the title */
  font-weight: bold; /* Make the title bold */
}

.reasons-grid {
  display: grid; /* Use grid layout instead of flexbox */
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Responsive columns */
  gap: 30px; /* Space between grid items */
}

.reason-card {
  background-color: #fff; /* White background for the card */
  padding: 30px; /* Padding inside each card */
  border-radius: 15px; /* Rounded corners */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for the card */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

.reason-card:hover {
  transform: translateY(-10px); /* Lift card on hover */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* Increase shadow on hover */
}

.reason-card h3 {
  font-size: 1.8em; /* Large font for headings */
  color: #4748f1; /* Use dark blue color for headings */
  margin-bottom: 20px; /* Space below heading */
}

.reason-card p {
  font-size: 1.1em; /* Slightly larger font for the paragraph */
  color: #666; /* Grey text for paragraph */
  line-height: 1.6; /* Increase line height for readability */
}

@media (max-width: 768px) {
  .reasons-grid {
    grid-template-columns: 1fr; /* Single column layout on smaller screens */
  }

  .reason-card {
    padding: 20px; /* Adjust padding for smaller screens */
  }

  .irrigate-title {
    font-size: 2em; /* Reduce title size on mobile */
  }
}

/* Controlling Irrigation Section */
.control-irrigation {
  background-color: #ffffff; /* White background */
  padding: 60px 0; /* Adequate padding for spacing */
}

.control-title {
  font-size: 2.5em; /* Large font size for the title */
  text-align: center; /* Ensure the title is centered */
  color: #4748f1; /* Dark blue title color */
  margin-bottom: 50px; /* Space below the title */
  font-weight: bold; /* Make the title bold */
  width: 100%; /* Ensure full width for the title */
}

.container {
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Ensure column layout to stack items */
  align-items: center; /* Center align items in the flexbox */
  justify-content: center; /* Center content vertically */
}

.control-grid {
  display: grid; /* Grid layout for control cards */
  grid-template-columns: repeat(
    auto-fit,
    minmax(250px, 1fr)
  ); /* Responsive grid */
  gap: 30px; /* Space between grid items */
  width: 100%; /* Ensure full width for the grid */
}

.control-card {
  background-color: #f9f9f9; /* Light grey background for the card */
  padding: 25px; /* Padding inside each card */
  border-radius: 12px; /* Rounded corners */
  border: 1px solid #ddd; /* Soft border around cards */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for cards */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

.control-card:hover {
  transform: translateY(-8px); /* Lift card on hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Increase shadow on hover */
}

.control-card h3 {
  font-size: 1.8em; /* Font size for card headings */
  color: #333; /* Dark grey color for headings */
  margin-bottom: 20px; /* Space below the heading */
}

.control-card p {
  font-size: 1.1em; /* Font size for the paragraph */
  color: #666; /* Grey text for paragraphs */
  line-height: 1.6; /* Line height for readability */
}

@media (max-width: 768px) {
  .control-grid {
    grid-template-columns: 1fr; /* Single column on smaller screens */
  }

  .control-card {
    padding: 20px; /* Adjust padding for smaller screens */
  }

  .control-title {
    font-size: 2em; /* Reduce title size for mobile */
    text-align: center; /* Ensure title is centered */
    margin-bottom: 30px; /* Adjust margin for smaller screens */
  }

  .container {
    width: 100%; /* Ensure full width for the container */
  }
}

/* CTA Section Styles */
.cta-section {
  background-color: #4caf50; /* Green background for emphasis */
  color: white; /* White text color for contrast */
  padding: 40px 20px; /* Generous padding for spacing */
  text-align: center; /* Center align text */
}

.cta-title {
  font-size: 2.5rem; /* Large title font size */
  margin-bottom: 20px; /* Space below title */
  font-weight: bold; /* Bold title for emphasis */
}

.cta-description {
  font-size: 1.2rem; /* Slightly larger font size for description */
  margin-bottom: 30px; /* Space below description */
}

.cta-button {
  background-color: #fff; /* White background for button */
  color: #4caf50; /* Green text color for button */
  padding: 15px 30px; /* Padding for button */
  text-decoration: none; /* Remove underline */
  border-radius: 5px; /* Rounded corners */
  font-weight: bold; /* Bold text for button */
  transition: background-color 0.3s ease; /* Smooth background transition */
}

.cta-button:hover {
  background-color: #e7e7e7; /* Light gray background on hover */
}

/* Reseller Grid Section */
.reseller-grid-section {
  background-color: #f9f9f9; /* Light background for the grid section */
  padding: 50px 20px; /* Padding at the top and bottom */
  text-align: center; /* Center-align text within the section */
}

.reseller-grid h2 {
  margin-bottom: 30px; /* Space below the heading */
  font-size: 2em; /* Font size for the heading */
  color: #333; /* Heading color */
}

.reseller-grid {
  display: grid; /* Use CSS Grid for layout */
  grid-template-columns: repeat(
    auto-fill,
    minmax(150px, 1fr)
  ); /* Responsive columns */
  gap: 20px; /* Space between grid items */
}

.reseller-grid-item {
  display: flex; /* Flexbox for centering the logo */
  justify-content: center; /* Center logo horizontally */
  align-items: center; /* Center logo vertically */
  background-color: #fff; /* White background for each logo item */
  border: 1px solid #ddd; /* Light border around each item */
  border-radius: 8px; /* Rounded corners */
  padding: 20px; /* Padding inside each item */
  transition: box-shadow 0.3s ease; /* Transition for hover effect */
  cursor: pointer; /* Change cursor to pointer on hover */
}

.reseller-grid-item img {
  max-width: 100%; /* Responsive image */
  height: auto; /* Maintain aspect ratio */
}

.reseller-grid-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Shadow on hover */
}

/* Modal Styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe; /* White background */
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888; /* Gray border */
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 500px; /* Maximum width */
  text-align: center; /* Center text */
}

.close {
  color: #aaa; /* Gray color for the close button */
  float: right; /* Align close button to the right */
  font-size: 28px; /* Larger font */
  font-weight: bold; /* Bold font */
}

.close:hover,
.close:focus {
  color: black; /* Change color on hover */
  text-decoration: none; /* No underline */
  cursor: pointer; /* Pointer cursor */
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
  .reseller-grid h2 {
    font-size: 1.5em; /* Smaller heading on mobile */
  }

  .reseller-grid {
    gap: 10px; /* Smaller gap on mobile */
  }

  .reseller-grid-item {
    padding: 15px; /* Smaller padding on mobile */
  }
}

/* Add these styles to your existing CSS file or within a <style> tag in your contact.ejs file */

.contact-container {
  max-width: 600px; /* Optional: Set a max width for better layout */
  margin: 0 auto; /* Center the container */
  padding: 20px; /* Add some padding around the container */
}

.form-group {
  margin-bottom: 20px; /* Add space between form groups */
}

input[type="text"],
input[type="email"],
input[type="tel"], /* Added this line for the phone number input */
textarea {
  width: 100%; /* Make input and textarea full width */
  padding: 10px; /* Add padding for better appearance */
  margin: 0; /* Reset margin */
  border: 1px solid #ccc; /* Add border for better visibility */
  border-radius: 5px; /* Optional: Add rounded corners */
  box-sizing: border-box; /* Ensure padding is included in width */
}

button {
  background-color: #4748f1; /* Button background color */
  color: white; /* Button text color */
  padding: 10px 20px; /* Add padding */
  border: none; /* Remove default border */
  border-radius: 5px; /* Add rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
}

button:hover {
  background-color: #333; /* Darken button on hover */
}