body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px); /* Start slightly to the right */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* End at the original position */
  }
}

/* Ensure the image-container is flush with the navbar */
/* Ensure the image-container fits the screen without overflowing */
.image-container {
  height: calc(100vh - 60px); /* Subtract the height of the navbar */
  background-image: url("../../images/image_9.jpg");
  background-size: cover; /* Cover the entire container */
  background-position: center; /* Center the image */
  background-repeat: no-repeat;
  margin: 0; /* Remove any extra space */
  padding: 0;
  width: 100%;
  max-width: 100vw; /* Ensure the container does not exceed the screen width */
  display: flex; /* Flexbox for centering content if needed */
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1; /* Ensure the image stays below the dropdown */
  overflow: hidden; /* Prevent any overflow */
}

.text-overlay {
  position: absolute; /* Position the text container on top of the image */
  top: 65%; /* Position it vertically in the center */
  transform: translateY(-60%); /* Adjust to perfectly center it vertically */
  text-align: center; /* Center the text horizontally */
  color: white; /* Text color to contrast with the background */
  padding: 20px; /* Add some padding around the text */
  width: 650px;
  z-index: 2; /* Ensure the text stays above the image */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3); /* Subtle border for better visibility */
  background: rgba(
    0,
    0,
    0,
    0.4
  ); /* Semi-transparent background for readability */
  border-radius: 10px; /* Rounded corners */
}

.text-overlay h2,
.text-overlay p {
  opacity: 0; /* Start hidden for animation */
  animation: fadeInRight 1s ease-in-out forwards; /* Apply fade-in animation */
}

.text-overlay h2 {
  font-size: 36px;
  margin-bottom: 10px;
  color: #f1540b; /* Warm orange for the headline */
}

.text-overlay p {
  font-size: 18px;
  color: #fff; /* White color for the description */
  line-height: 1.5; /* Improve readability */
  margin-bottom: 20px; /* Space between text and arrow */
}

.text-overlay i {
  font-size: 24px; /* Size of the arrow */
  color: #ff8c42; /* Warm orange color */
  cursor: pointer; /* Pointer cursor on hover */
  transition: transform 0.3s ease; /* Smooth animation for rotation */
  position: absolute; /* Fix the position of the arrow */
  right: 0; /* Position the arrow on the right side of the heading */
  top: 50%; /* Center the arrow vertically */
  transform: translateY(
    -50%
  ); /* Vertically center it relative to the heading */
}

/* Tablet Portrait & Larger (Screens 768px and larger) */
@media screen and (max-width: 1024px) {
  .text-overlay h2 {
    font-size: 28px; /* Reduced font size for tablets */
    margin-bottom: 15px; /* More space between heading and text */
  }

  .text-overlay p {
    font-size: 16px; /* Reduced font size for tablets */
    line-height: 1.4; /* Adjust line height for readability */
    margin-bottom: 15px; /* More space at the bottom */
  }

  .text-overlay {
    width: 80%; /* Increased width for tablets */
    padding: 20px; /* Added padding for better spacing */
    left: 10%; /* Adjusted left position for better centering */
  }

  /* Optional: Adjust arrow size */
  .text-overlay i {
    font-size: 24px; /* Slightly larger arrow on tablets */
  }
}

/* Mobile Phones (Screens 768px and smaller) */
@media screen and (max-width: 768px) {
  .text-overlay h2 {
    font-size: 24px; /* Adjusted font size for mobile screens */
    margin-bottom: 15px; /* More space between heading and text */
  }

  .text-overlay p {
    font-size: 14px; /* Adjusted font size for mobile screens */
    line-height: 1.4; /* Increased line-height for readability */
    margin-bottom: 15px; /* More space at the bottom */
  }

  .text-overlay {
    width: 90%; /* Increased width for mobile screens */
    padding: 15px; /* Reduced padding for better text fit */
    left: 5%; /* Adjust left position to center it better */
  }

  /* Optional: Adjust arrow size */
  .text-overlay i {
    font-size: 20px; /* Adjust the size of the arrow for smaller screens */
  }
}

/* Mobile Portrait (Very Small Screens 480px and smaller) */
@media screen and (max-width: 480px) {
  .text-overlay h2 {
    font-size: 20px; /* Further reduced font size for very small screens */
    margin-bottom: 10px; /* Reduced space between heading and text */
  }

  .text-overlay p {
    font-size: 12px; /* Smaller font size for very small screens */
    line-height: 1.4; /* Adjust line-height for readability */
    margin-bottom: 10px; /* Reduced space at the bottom */
  }

  .text-overlay {
    width: 95%; /* Increased width for very small screens */
    padding: 10px; /* Reduced padding to fit the small screen */
    left: 2%; /* Adjusted left position */
  }

  /* Optional: Adjust arrow size */
  .text-overlay i {
    font-size: 18px; /* Adjust arrow size for very small screens */
  }
}

/* Center the entire features section */
.features-section {
  display: grid; /* Use grid layout */
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  gap: 40px; /* Increased spacing between grid items */
  justify-content: center; /* Center the entire grid horizontally */
  align-items: start; /* Align items at the top of each cell */
  text-align: center; /* Center text in grid cells */
  margin: 50px auto; /* Center the grid container horizontally */
  padding: 20px;
  box-sizing: border-box;
}

.features-section .feature {
  display: flex; /* Use flexbox for inner content alignment */
  flex-direction: column; /* Arrange content vertically */
  align-items: center; /* Center content horizontally */
  justify-content: center; /* Center content vertically */
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  width: 200px; /* Adjusted width for uniformity */
  height: 220px; /* Fixed height for consistency */
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.features-section .feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.features-section .feature i {
  font-size: 40px; /* Increase the size of the icon */
  color: #70a9d1; /* Pleasant light blue color */
  margin-bottom: 15px; /* Space between the icon and text */
}

.features-section .feature h3 {
  font-size: 18px; /* Slightly larger text for readability */
  color: #333;
  margin: 0;
}

.features-section .feature-text {
  margin-top: 15px; /* Space between feature and text container */
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #333;
  width: 100%; /* Match the width of the feature */
}

@media (max-width: 768px) {
  .features-section {
    grid-template-columns: 1fr; /* Stack items vertically */
    gap: 30px; /* Reduce spacing on smaller screens */
  }

  .features-section .feature {
    width: 100%; /* Full width of the container */
  }
}

.fuelPrice-section {
  display: grid; /* Use grid layout */
  grid-template-columns: repeat(1, 1fr); /* 1 equal-width column */
  gap: 40px; /* Increased spacing between grid items */
  justify-content: center; /* Center the entire grid horizontally */
  align-items: start; /* Align items at the top of each cell */
  text-align: center; /* Center text in grid cells */
  margin: 50px auto; /* Center the grid container horizontally */
  padding: 20px;
  box-sizing: border-box;
}

/* Contact Us Form Styling */
/* Main Container Flexbox Layout */
.main-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Aligns items to the top */
  gap: 40px; /* Adds space between the left and right side */
  flex-wrap: wrap; /* Allows the layout to adjust on smaller screens */
  margin: 0 auto;
  padding: 40px;
  width: 100%;
  max-width: 1200px;
}

/* Left side content styling */
.left-side {
  flex: 1; /* Allows left content to take the remaining space */
  max-width: 20%; /* Restricts width of left side */
  color: #333;
}

.left-side h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #1f1f1f;
}

.left-side p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
}

/* Contact Us Form Container */
.contact-us-container {
  flex: 1; /* Allow the container to adjust size relative to other content */
  width: 100%; /* Take full available width and cap with max-width */
  max-width: 1100px; /* Increased cap width on larger screens */
  margin: 0 auto; /* Center within flex/grid/normal flow */
  align-self: center; /* Ensure centering along cross-axis in flex layouts */
  background-color: #f9f9f9;
  padding: 30px; /* Slightly larger padding */
  border-radius: 10px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Slightly more prominent shadow */
}

.contact-us-container h2 {
  font-size: 1.5rem; /* Smaller font size */
  text-align: center;
  color: #333;
  margin-bottom: 15px;
}

/* Form Group Styling */
.contact-us-container .form-group {
  margin-bottom: 15px; /* Spacing between fields */
}

.contact-us-container label {
  font-size: 0.95rem; /* Slightly smaller font size */
  color: #666;
  display: block;
  margin-bottom: 5px; /* Space between label and input */
}

.contact-us-container input[type="text"],
.contact-us-container input[type="email"],
.contact-us-container textarea {
  width: 100%; /* Full width of the container */
  padding: 10px; /* Comfortable padding */
  font-size: 0.95rem; /* Slightly smaller text */
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s;
}

.contact-us-container textarea {
  resize: vertical;
  height: 120px; /* Slightly larger default height */
}

.contact-us-container input:focus,
.contact-us-container textarea:focus {
  border-color: #3498db; /* Highlight border on focus */
}

.contact-us-container button.submit-contact-form {
  width: 100%; /* Full width button */
  padding: 12px; /* Comfortable padding */
  background-color: #3498db;
  color: #fff;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-us-container button.submit-contact-form:hover {
  background-color: #2980b9;
}

/* Google reCAPTCHA */
.contact-us-container .g-recaptcha {
  margin: 15px 0;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  .main-container {
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center-align for mobile */
    max-width: 100%; /* Reduce max-width for smaller screens */
  }

  .left-side {
    max-width: 100%; /* Full width on smaller screens */
  }

  .contact-us-container {
    width: 100%;
    max-width: 100%; /* Expand container width further on smaller screens */
    margin: 0 auto; /* Keep centered on mobile */
    align-self: center; /* Ensure cross-axis centering in column flex */
    padding: 20px; /* Adjust padding for smaller screens */
  }
}

@media screen and (max-width: 480px) {
  .main-container {
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center-align for mobile */
    max-width: 100%; /* Reduce max-width for smaller screens */
  }

  .contact-us-container {
    width: 100%;
    padding: 15px; /* Compact padding for very small screens */
    margin: 0 auto; /* Keep centered on very small screens */
  }

  .contact-us-container label {
    font-size: 0.85rem; /* Slightly smaller labels */
  }

  .contact-us-container input[type="text"],
  .contact-us-container input[type="email"],
  .contact-us-container textarea {
    font-size: 0.85rem; /* Smaller input text */
  }

  .contact-us-container button.submit-btn {
    padding: 10px; /* Adjust button size for small screens */
    font-size: 0.9rem; /* Smaller font */
  }
}