/* General Styles - Start */

/* Resetting default margin and padding */
body, html {
  font-family: "Poppins", sans-serif; /* Modern, clean font for a professional look */
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background-color: #f9f9f9; /* Light background color for a clean, inviting look */
  color: #333; /* Dark text for good contrast and readability */
  scroll-behavior: smooth; /* Smooth scrolling for better user experience */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Main container styling */
main {
  padding: 1em; /* Uniform padding for better spacing */
}

/* Section styling */
.scroll-container {
  display: flex; /* Flexbox for horizontal layout */
  width: 700vw; /* Adjust based on number of sections */
  height: 100vh;
  scroll-snap-type: x mandatory; /* Snap scrolling for a smoother experience */
  overflow-x: scroll;
}

section {
  min-width: 100vw; /* Full viewport width for each section */
  height: 100vh; /* Full viewport height for each section */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  text-align: center;
  color: #fff; /* White text color for contrast against background images */
  position: relative;
  background-size: cover; /* Cover background to fill the section */
  background-repeat: no-repeat; /* No repeat for background images */
  background-position: center center; /* Center background images */
  overflow: hidden; /* Hide overflow for clean edges */
  transition: background 0.5s ease-in-out; /* Smooth transition for background changes */
  padding: 2em;
  scroll-snap-align: start; /* Snap scrolling */
}

/* Adding shadow to enhance the depth and visual appeal */
section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Overlay for better text readability */
  z-index: 1;
}

/* Ensuring content stays above the overlay */
section > * {
  position: relative;
  z-index: 2;
  max-width: 100%; /* Ensure content doesn't overflow */
}

h1, h2 {
  font-size: 2.5em;
  margin: 0.5em 0;
}

p {
  font-size: 1.2em;
  margin: 0.5em 0;
  max-width: 90%; /* Ensure paragraphs are not too wide */
}

button, .hero-btn {
  display: inline-block;
  padding: 0.7em 1.5em;
  font-size: 1.2em;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  max-width: 90%;
}

button:hover, .hero-btn:hover {
  background-color: #0056b3;
}

/* Specific Section Backgrounds */
#hero { background: url("/images/hero-bg.jpg") no-repeat center center/cover; }
#about { background: url("/images/about-bg.jpg") no-repeat center center/cover; }
#services { background: url("/images/services-bg.jpg") no-repeat center center/cover; }
#features { background: url("/images/features-bg.png") no-repeat center center/cover; }
#benefits { background: url("/images/benefits-bg.png") no-repeat center center/cover; }
#faq { background: url("/images/faq-bg.png") no-repeat center center/cover; }
#contact { background: url("/images/contact-bg.png") no-repeat center center/cover; }

/* Adding responsive design for smaller devices */
@media (max-width: 768px) {
  .scroll-container {
    display: block; /* Switch to vertical scrolling for mobile */
    height: auto;
  }

  section {
    min-width: 100%;
    height: auto;
    padding: 2em 1em; /* Additional padding for better spacing */
  }

  h1, h2 {
    font-size: 2em;
  }

  p {
    font-size: 1em;
  }

  button, .hero-btn {
    font-size: 1em;
    padding: 0.5em 1em;
  }

  .scroll-control {
    display: none; /* Hide scroll controls on mobile */
  }
}

.service-cards, .feature-cards, .benefit-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  max-width: 100%;
}

.service-card, .feature-card, .benefit-card, .faq-item {
  background: #fff;
  padding: 1.5em;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: left;
  color: #333;
}

@media (max-width: 768px) {
  .service-card, .feature-card, .benefit-card, .faq-item {
    width: 90%;
    margin: 0 auto;
  }
}

.form-group {
  margin-bottom: 1.5em;
}

.form-group label {
  display: block;
  font-size: 1em;
  margin-bottom: 0.5em;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 0.8em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.form-group textarea {
  height: 150px;
  resize: vertical;
}

button[type="submit"] {
  display: inline-block;
  padding: 0.8em 1.5em;
  font-size: 1.2em;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  button[type="submit"] {
    font-size: 1em;
    padding: 0.5em 1em;
  }
}

/* Navigation Buttons Styles - Start */
.scroll-control {
  display: block;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 2em;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.scroll-control.previous {
  left: 1em;
}

.scroll-control.next {
  right: 1em;
}

.scroll-control:hover {
  background-color: #0056b3;
  transform: translateY(-50%) scale(1.1);
}
/* Navigation Buttons Styles - End */

/* General Styles - End */


/* Specific Section Backgrounds with Animated Gradients - Start */

/* Hero Section - Start */
#hero {
  background-image: url("/images/hero-bg.jpg"),
    linear-gradient(-45deg, #ff9a9e 0%, #fad0c4 100%);
  animation: gradientAnimation 15s ease infinite; /* Smooth gradient animation for visual appeal */
  position: relative;
  background-blend-mode: overlay; /* Blend image and gradient for a cohesive look */
}
/* Hero Section - End */

/* About Section - Start */
#about {
  background-image: url("/images/about-bg.jpg"),
    linear-gradient(-45deg, #a18cd1 0%, #fbc2eb 100%);
  animation: gradientAnimation 15s ease infinite; /* Smooth gradient animation for visual appeal */
  position: relative;
  background-blend-mode: overlay; /* Blend image and gradient for a cohesive look */
}
/* About Section - End */

/* Services Section - Start */
#services {
  background-image: url("/images/services-bg.jpg"),
    linear-gradient(-45deg, #fbc2eb 0%, #a6c1ee 100%);
  animation: gradientAnimation 15s ease infinite; /* Smooth gradient animation for visual appeal */
  position: relative;
  background-blend-mode: overlay; /* Blend image and gradient for a cohesive look */
}
/* Services Section - End */

/* Features Section - Start */
#features {
  background-image: url("/images/features-bg.jpg"),
    linear-gradient(-45deg, #fad0c4 0%, #ffd1ff 100%);
  animation: gradientAnimation 15s ease infinite; /* Smooth gradient animation for visual appeal */
  position: relative;
  background-blend-mode: overlay; /* Blend image and gradient for a cohesive look */
}
/* Features Section - End */

/* Benefits Section - Start */
#benefits {
  background-image: url("/images/benefits-bg.jpg"),
    linear-gradient(-45deg, #ffecd2 0%, #fcb69f 100%);
  animation: gradientAnimation 15s ease infinite; /* Smooth gradient animation for visual appeal */
  position: relative;
  background-blend-mode: overlay; /* Blend image and gradient for a cohesive look */
}
/* Benefits Section - End */

/* FAQ Section - Start */
#faq {
  background-image: url("/images/faq-bg.jpg"),
    linear-gradient(-45deg, #ff9a9e 0%, #fecfef 100%);
  animation: gradientAnimation 15s ease infinite; /* Smooth gradient animation for visual appeal */
  position: relative;
  background-blend-mode: overlay; /* Blend image and gradient for a cohesive look */
}
/* FAQ Section - End */

/* Keyframes for gradient animation */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Specific Section Backgrounds with Animated Gradients - End */

/* Start Header Section Styles - Start */

/* Header Styles */
header {
  background: #333; /* Dark background for contrast */
  color: #fff; /* White text for readability */
  padding: 1em 0; /* Padding for spacing */
  position: fixed; /* Fixed position for a sticky header */
  width: 100%; /* Full width */
  top: 0; /* Align to the top */
  left: 0; /* Align to the left */
  z-index: 1000; /* High z-index to ensure it stays on top */
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Sticky Header Styles */
header.sticky {
  background: rgba(
    51,
    51,
    51,
    0.9
  ); /* Slightly transparent background for stickiness */
  padding: 0.5em 0; /* Reduced padding */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Navigation Bar Styles */
nav {
  display: flex; /* Flexbox for layout */
  justify-content: space-between; /* Space between items */
  align-items: center; /* Center items vertically */
  padding: 0 2em; /* Horizontal padding */
}

/* Logo Styles */
nav .logo a {
  display: flex; /* Flexbox for alignment */
  align-items: center; /* Center vertically */
  color: #fff; /* White text */
  font-size: 1.5em; /* Larger font size */
  text-decoration: none; /* Remove underline */
}

/* Logo Image Styles */
.nav-logo-img {
  width: 40px; /* Fixed width */
  height: 40px; /* Fixed height */
  margin-right: 0.5em; /* Spacing between image and text */
}

/* Navigation Links Styles */
nav ul {
  list-style: none; /* Remove default list styling */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  display: flex; /* Flexbox for layout */
}

/* Navigation List Item Styles */
nav ul li {
  margin: 0 1em; /* Spacing between list items */
}

/* Navigation Link Styles */
nav ul li a {
  color: #fff; /* White text */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition */
}

/* Navigation Link Hover Effect */
nav ul li a:hover {
  color: #007bff; /* Blue color on hover */
}

/* Menu Icon Styles (Mobile) */
.menu-icon {
  display: none; /* Hidden by default */
  font-size: 2em; /* Larger font size */
  cursor: pointer; /* Pointer cursor on hover */
  color: #fff; /* White color */
}

/* Menu Toggle Input (Hidden) */
#menu-toggle {
  display: none; /* Hidden input */
}

/* Responsive Styles */
@media (max-width: 768px) {
  /* Mobile Navigation Styles */
  nav ul {
    flex-direction: column; /* Vertical layout */
    position: absolute; /* Absolute positioning */
    top: 100%; /* Below the header */
    left: 0;
    right: 0;
    background: #333; /* Dark background */
    display: none; /* Hidden by default */
  }

  /* Mobile Navigation List Item Styles */
  nav ul li {
    text-align: center; /* Center text */
    margin: 1em 0; /* Vertical spacing */
  }

  /* Mobile Navigation Link Styles */
  nav ul li a {
    font-size: 1.2em; /* Larger font size */
  }

  /* Show Menu on Toggle */
  #menu-toggle:checked + .menu-icon + ul {
    display: flex; /* Display flex on check */
  }

  /* Show Menu Icon on Mobile */
  .menu-icon {
    display: block; /* Display block */
  }
}
/* End Header Section Styles - End */

/* Start Hero Section Styles - Start */

#hero {
  background: url("/images/hero-bg.jpg") no-repeat center center/cover; /* Background image with cover size and centered position */
  height: 100vh; /* Full viewport height */
  width: 100%; /* Full width */
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Column layout */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
  color: #fff; /* White text color for contrast */
  padding: 2em; /* Padding for spacing */
  position: relative; /* Relative positioning for overlay */
  background-blend-mode: overlay; /* Blend background image and gradient */
}

/* Hero Section Heading */
#hero h1 {
  font-size: 3em; /* Large font size for heading */
  margin-bottom: 0.5em; /* Margin below heading */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Hero Section Paragraph */
#hero p {
  font-size: 1.5em; /* Font size for paragraph */
  margin-bottom: 1.5em; /* Margin below paragraph */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Hero Button Styles */
.hero-btn {
  display: inline-block; /* Inline block for button */
  padding: 0.7em 1.5em; /* Padding for button */
  font-size: 1.2em; /* Font size for button */
  color: #fff; /* White text color */
  background-color: #007bff; /* Primary blue background color */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

/* Hero Button Hover Effect */
.hero-btn:hover {
  background-color: #0056b3; /* Darker blue on hover */
  transform: scale(1.05); /* Slightly larger on hover */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  #hero h1 {
    font-size: 2.5em; /* Smaller font size for heading on mobile */
  }

  #hero p {
    font-size: 1.2em; /* Smaller font size for paragraph on mobile */
  }

  .hero-btn {
    font-size: 1em; /* Smaller font size for button on mobile */
    padding: 0.5em 1em; /* Adjusted padding for button on mobile */
  }
}

/* Animation for Hero Section Content */
#hero h1,
#hero p,
.hero-btn {
  animation: fadeInUp 1s ease-in-out; /* Fade in and slide up effect */
}

/* Keyframes for Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0; /* Start with no opacity */
    transform: translateY(20px); /* Start with translation */
  }
  100% {
    opacity: 1; /* End with full opacity */
    transform: translateY(0); /* End with no translation */
  }
}

/* Start Hero Section Styles - End */

/* Start About Section Styles - Start */

#about {
  background: url("/images/about-bg.jpg") no-repeat center center/cover; /* Background image with cover size and centered position */
  min-height: 100vh; /* Minimum height of full viewport */
  width: 100%; /* Full width */
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Column layout */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
  color: #333; /* Dark text color for readability */
  padding: 2em; /* Padding for spacing */
  position: relative; /* Relative positioning for overlay */
}

/* About Section Heading */
#about h1 {
  font-size: 2.5em; /* Large font size for heading */
  margin-bottom: 1em; /* Margin below heading */
  color: #fff; /* White text for contrast against the background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* About Section Paragraph */
#about p {
  font-size: 1.2em; /* Font size for paragraph */
  margin-bottom: 1.5em; /* Margin below paragraph */
  max-width: 800px; /* Maximum width for better readability */
  color: #fff; /* White text for contrast */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  #about h1 {
    font-size: 2em; /* Smaller font size for heading on mobile */
  }

  #about p {
    font-size: 1em; /* Smaller font size for paragraph on mobile */
    margin-bottom: 1em; /* Adjusted margin for spacing */
  }
}

/* Animation for About Section Content */
#about h1,
#about p {
  animation: fadeInUp 1s ease-in-out; /* Fade in and slide up effect */
}

/* Keyframes for Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0; /* Start with no opacity */
    transform: translateY(20px); /* Start with translation */
  }
  100% {
    opacity: 1; /* End with full opacity */
    transform: translateY(0); /* End with no translation */
  }
}

/* Specific Section Styles - Start */

#services,
#features,
#benefits,
#faq,
#contact {
  background: #e2e2e2; /* Light grey background for contrast */
  padding: 2em; /* Padding for spacing */
  text-align: center; /* Center text */
  color: #333; /* Dark text color */
}

/* Form Styles - Start */
form {
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Column layout */
  max-width: 600px; /* Max width for better readability */
  margin: 0 auto; /* Center form */
  background: #fff; /* White background for form */
  padding: 2em; /* Padding for spacing */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Form Label Styles */
form label {
  margin: 0.5em 0 0.2em; /* Margin for spacing */
  color: #333; /* Dark text color */
}

/* Form Input and Textarea Styles */
form input,
form textarea {
  padding: 0.5em; /* Padding for spacing */
  margin-bottom: 1em; /* Margin for spacing */
  border: 1px solid #ccc; /* Light grey border */
  border-radius: 4px; /* Rounded corners */
}

/* Form Button Styles */
form button {
  padding: 0.7em; /* Padding for spacing */
  background: #333; /* Dark background color */
  color: #fff; /* White text color */
  border: none; /* No border */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
  transition: background 0.3s ease; /* Smooth background transition */
}

/* Form Button Hover Effect */
form button:hover {
  background: #555; /* Darker background on hover */
}

/* Footer Styles - Start */
footer {
  background: #333; /* Dark background */
  color: #fff; /* White text color */
  text-align: center; /* Center text */
  padding: 1em 0; /* Padding for spacing */
  position: relative; /* Relative positioning */
  z-index: 1000; /* High z-index */
}

/* Animations - Start */
.fade-in {
  animation: fadeIn 2s; /* Fade in animation */
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Start with no opacity */
  }
  to {
    opacity: 1; /* End with full opacity */
  }
}

/* Responsive Design - Start */
@media (max-width: 768px) {
  /* Responsive padding and text size adjustments */
  #about,
  #services,
  #features,
  #benefits,
  #faq,
  #contact {
    padding: 20px 10px; /* Adjusted padding for mobile */
  }

  #about h1,
  #services h1,
  #features h1,
  #benefits h1,
  #faq h1,
  #contact h1 {
    font-size: 2em; /* Adjusted font size for mobile */
  }

  #about p,
  #services p,
  #features p,
  #benefits p,
  #faq p,
  #contact p {
    font-size: 1em; /* Adjusted font size for mobile */
  }

  form {
    padding: 1.5em; /* Adjusted padding for form on mobile */
  }

  form button {
    font-size: 1em; /* Adjusted button font size for mobile */
  }
}
/* End About Section Styles - End */

/* Start Services Section Styles - Start */

#services {
  background: url("/images/services-bg.png") no-repeat center center/cover; /* Background image with cover size and centered position */
  min-height: 100vh; /* Minimum height of full viewport */
  width: 100%; /* Full width */
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Column layout */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
  color: #333; /* Dark text color for readability */
  padding: 2em; /* Padding for spacing */
  position: relative; /* Relative positioning for overlay */
  background-blend-mode: overlay; /* Blend background image and gradient */
}

/* Services Section Heading */
#services h2 {
  font-size: 2.5em; /* Large font size for heading */
  margin-bottom: 1em; /* Margin below heading */
  color: #fff; /* White text for contrast against the background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Services Section Paragraph */
#services p {
  font-size: 1.2em; /* Font size for paragraph */
  margin-bottom: 2em; /* Margin below paragraph */
  max-width: 800px; /* Maximum width for better readability */
  color: #fff; /* White text for contrast */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Service Cards Container */
.service-cards {
  display: flex; /* Flexbox for layout */
  justify-content: center; /* Center cards horizontally */
  flex-wrap: wrap; /* Wrap cards on smaller screens */
  gap: 1em; /* Gap between cards */
}

/* Individual Service Card */
.service-card {
  background: #fff; /* White background for contrast */
  padding: 1.5em; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  width: 300px; /* Fixed width */
  text-align: left; /* Left align text */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for animations */
}

/* Service Card Hover Effect */
.service-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

/* Service Card Heading */
.service-card h3 {
  font-size: 1.5em; /* Font size for card heading */
  margin-bottom: 0.5em; /* Margin below heading */
  color: #333; /* Dark text color */
}

/* Service Card Paragraph */
.service-card p {
  font-size: 1em; /* Font size for card paragraph */
  line-height: 1.6; /* Line height for readability */
  color: #666; /* Light grey text color */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  #services h2 {
    font-size: 2em; /* Smaller font size for heading on mobile */
  }

  #services p {
    font-size: 1em; /* Smaller font size for paragraph on mobile */
  }

  .service-card {
    width: 100%; /* Full width for cards on mobile */
  }
}

/* Animation for Services Section Content */
#services h2,
#services p,
.service-card {
  animation: fadeInUp 1s ease-in-out; /* Fade in and slide up effect */
}

/* Keyframes for Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0; /* Start with no opacity */
    transform: translateY(20px); /* Start with translation */
  }
  100% {
    opacity: 1; /* End with full opacity */
    transform: translateY(0); /* End with no translation */
  }
}

/* Start Services Section Styles - End */

/* Start Features Section Styles - Start */

#features {
  background: url("/images/features-bg.png") no-repeat center center/cover; /* Background image with cover size and centered position */
  min-height: 100vh; /* Minimum height of full viewport */
  width: 100%; /* Full width */
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Column layout */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
  color: #fff; /* White text color for contrast */
  padding: 2em; /* Padding for spacing */
  position: relative; /* Relative positioning for overlay */
  background-blend-mode: overlay; /* Blend background image and gradient */
}

/* Features Section Heading */
#features h2 {
  font-size: 2.5em; /* Large font size for heading */
  margin-bottom: 1em; /* Margin below heading */
  color: #fff; /* White text for contrast against the background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Feature Cards Container */
.feature-cards {
  display: flex; /* Flexbox for layout */
  justify-content: center; /* Center cards horizontally */
  flex-wrap: wrap; /* Wrap cards on smaller screens */
  gap: 1em; /* Gap between cards */
}

/* Individual Feature Card */
.feature-card {
  background: #fff; /* White background for contrast */
  padding: 1.5em; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  width: 300px; /* Fixed width */
  text-align: left; /* Left align text */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for animations */
}

/* Feature Card Hover Effect */
.feature-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

/* Feature Card Heading */
.feature-card h3 {
  font-size: 1.5em; /* Font size for card heading */
  margin-bottom: 0.5em; /* Margin below heading */
  color: #333; /* Dark text color */
}

/* Feature Card Paragraph */
.feature-card p {
  font-size: 1em; /* Font size for card paragraph */
  line-height: 1.6; /* Line height for readability */
  color: #666; /* Light grey text color */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  #features h2 {
    font-size: 2em; /* Smaller font size for heading on mobile */
  }

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

/* Animation for Features Section Content */
#features h2,
.feature-card {
  animation: fadeInUp 1s ease-in-out; /* Fade in and slide up effect */
}

/* Keyframes for Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0; /* Start with no opacity */
    transform: translateY(20px); /* Start with translation */
  }
  100% {
    opacity: 1; /* End with full opacity */
    transform: translateY(0); /* End with no translation */
  }
}

/* Start Features Section Styles - End */

/* Start Benefits Section Styles - Start */

#benefits {
  background: url("/images/benefits-bg.png") no-repeat center center/cover; /* Background image with cover size and centered position */
  min-height: 100vh; /* Minimum height of full viewport */
  width: 100%; /* Full width */
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Column layout */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
  color: #fff; /* White text color for contrast */
  padding: 2em; /* Padding for spacing */
  position: relative; /* Relative positioning for overlay */
  background-blend-mode: overlay; /* Blend background image and gradient */
}

/* Benefits Section Heading */
#benefits h2 {
  font-size: 2.5em; /* Large font size for heading */
  margin-bottom: 1em; /* Margin below heading */
  color: #fff; /* White text for contrast against the background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Benefits Section Paragraph */
#benefits p {
  font-size: 1.2em; /* Font size for paragraph */
  margin-bottom: 2em; /* Margin below paragraph */
  max-width: 800px; /* Maximum width for better readability */
  color: #fff; /* White text for contrast */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Benefit Cards Container */
.benefit-cards {
  display: flex; /* Flexbox for layout */
  justify-content: center; /* Center cards horizontally */
  flex-wrap: wrap; /* Wrap cards on smaller screens */
  gap: 1em; /* Gap between cards */
}

/* Individual Benefit Card */
.benefit-card {
  background: #f1f1f1; /* Light grey background for contrast */
  padding: 1.5em; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  width: 300px; /* Fixed width */
  text-align: left; /* Left align text */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for animations */
}

/* Benefit Card Hover Effect */
.benefit-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

/* Benefit Card Heading */
.benefit-card h3 {
  font-size: 1.5em; /* Font size for card heading */
  margin-bottom: 0.5em; /* Margin below heading */
  color: #333; /* Dark text color */
}

/* Benefit Card Paragraph */
.benefit-card p {
  font-size: 1em; /* Font size for card paragraph */
  line-height: 1.6; /* Line height for readability */
  color: #666; /* Light grey text color */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  #benefits h2 {
    font-size: 2em; /* Smaller font size for heading on mobile */
  }

  #benefits p {
    font-size: 1em; /* Smaller font size for paragraph on mobile */
  }

  .benefit-card {
    width: 100%; /* Full width for cards on mobile */
  }
}

/* Animation for Benefits Section Content */
#benefits h2,
#benefits p,
.benefit-card {
  animation: fadeInUp 1s ease-in-out; /* Fade in and slide up effect */
}

/* Keyframes for Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0; /* Start with no opacity */
    transform: translateY(20px); /* Start with translation */
  }
  100% {
    opacity: 1; /* End with full opacity */
    transform: translateY(0); /* End with no translation */
  }
}

/* Start Benefits Section Styles - End */

/* Start FAQ Section Styles - Start */

#faq {
  background: url("/images/faq-bg.png") no-repeat center center/cover; /* Background image with cover size and centered position */
  min-height: 100vh; /* Minimum height of full viewport */
  width: 100%; /* Full width */
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Column layout */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
  color: #fff; /* White text color for contrast */
  padding: 2em; /* Padding for spacing */
  position: relative; /* Relative positioning for overlay */
  background-blend-mode: overlay; /* Blend background image and gradient */
}

/* FAQ Section Heading */
#faq h2 {
  font-size: 2.5em; /* Large font size for heading */
  margin-bottom: 1em; /* Margin below heading */
  color: #fff; /* White text for contrast against the background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* FAQ Item Container */
.faq-item {
  background: #fff; /* White background for contrast */
  padding: 1.5em; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  width: 60%; /* Fixed width */
  margin-bottom: 1.5em; /* Margin below each item */
  text-align: left; /* Left align text */
  transition: transform 0.3s ease, box-shadow 0.3s ease, max-height 0.3s ease,
    opacity 0.3s ease; /* Smooth transitions for animations */
  overflow: hidden; /* Hide overflowing content */
  cursor: pointer; /* Pointer cursor for interactivity */
  max-height: 100px; /* Initial max height */
}

/* FAQ Item Expanded State */
.faq-item.expanded {
  max-height: 500px; /* Expanded max height */
}

/* FAQ Item Hover Effect */
.faq-item:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
  background: #e9f5ff; /* Light blue background on hover */
}

/* FAQ Item Heading */
.faq-item h3 {
  font-size: 1.5em; /* Font size for item heading */
  margin-bottom: 0.5em; /* Margin below heading */
  color: #333; /* Dark text color */
  cursor: pointer; /* Pointer cursor for heading */
}

/* FAQ Item Paragraph */
.faq-item p {
  font-size: 1em; /* Font size for item paragraph */
  line-height: 1.6; /* Line height for readability */
  color: #666; /* Light grey text color */
  margin: 0; /* Remove default margin */
  overflow: hidden; /* Hide overflowing text */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  #faq h2 {
    font-size: 2em; /* Smaller font size for heading on mobile */
  }

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

  .faq-item h3 {
    font-size: 1.2em; /* Smaller font size for item heading on mobile */
  }

  .faq-item p {
    font-size: 0.9em; /* Smaller font size for item paragraph on mobile */
  }
}

/* Animation for FAQ Section Content */
#faq h2,
.faq-item {
  animation: fadeInUp 1s ease-in-out; /* Fade in and slide up effect */
}

/* Keyframes for Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0; /* Start with no opacity */
    transform: translateY(20px); /* Start with translation */
  }
  100% {
    opacity: 1; /* End with full opacity */
    transform: translateY(0); /* End with no translation */
  }
}

/* Start FAQ Section Styles - End */

/* Start Contact Section Styles - Start */

#contact {
  background: url("/images/contact-bg.png") no-repeat center center/cover; /* Background image with cover size and centered position */
  min-height: 100vh; /* Minimum height of full viewport */
  width: 100%; /* Full width */
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Column layout */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
  color: #333; /* Dark text color for readability */
  padding: 2em; /* Padding for spacing */
  position: relative; /* Relative positioning for overlay */
  background-blend-mode: overlay; /* Blend background image and gradient */
}

/* Contact Section Heading */
#contact h2 {
  font-size: 2.5em; /* Large font size for heading */
  margin-bottom: 1em; /* Margin below heading */
  color: #fff; /* White text for contrast against the background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for better readability */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for animations */
}

/* Contact Form Styles */
#contact-form {
  background: #fff; /* White background for contrast */
  padding: 2em; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  width: 100%; /* Full width */
  max-width: 600px; /* Max width for better readability */
  text-align: left; /* Left align text */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for animations */
}

/* Form Group Styles */
.form-group {
  margin-bottom: 1.5em; /* Margin below each group */
}

/* Form Label Styles */
.form-group label {
  display: block; /* Block display for label */
  font-size: 1em; /* Standard font size */
  margin-bottom: 0.5em; /* Margin below label */
  color: #333; /* Dark text color */
}

/* Form Input and Textarea Styles */
.form-group input,
.form-group textarea {
  width: 100%; /* Full width */
  padding: 0.8em; /* Padding for spacing */
  font-size: 1em; /* Standard font size */
  border: 1px solid #ccc; /* Light grey border */
  border-radius: 5px; /* Rounded corners */
  box-sizing: border-box; /* Box-sizing for consistency */
}

/* Textarea Specific Styles */
.form-group textarea {
  height: 150px; /* Fixed height */
  resize: vertical; /* Allow vertical resizing */
}

/* Submit Button Styles */
button[type="submit"] {
  display: inline-block; /* Inline block display */
  padding: 0.8em 1.5em; /* Padding for spacing */
  font-size: 1.2em; /* Larger font size */
  color: #fff; /* White text color */
  background-color: #007bff; /* Primary blue background color */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

/* Submit Button Hover Effect */
button[type="submit"]:hover {
  background-color: #0056b3; /* Darker blue on hover */
  transform: scale(1.05); /* Slightly larger on hover */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  #contact h2 {
    font-size: 2em; /* Smaller font size for heading on mobile */
  }

  .form-group input,
  .form-group textarea {
    font-size: 0.9em; /* Smaller font size for inputs and textarea on mobile */
  }

  button[type="submit"] {
    font-size: 1em; /* Smaller font size for submit button on mobile */
  }
}

/* Animation for Contact Section Content */
#contact h2,
#contact-form {
  animation: fadeInUp 1s ease-in-out; /* Fade in and slide up effect */
}

/* Keyframes for Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0; /* Start with no opacity */
    transform: translateY(20px); /* Start with translation */
  }
  100% {
    opacity: 1; /* End with full opacity */
    transform: translateY(0); /* End with no translation */
  }
}

/* Start Contact Section Styles - End */

/* Footer Section Styles - Start */

footer {
  background: #333; /* Dark background for contrast */
  color: #fff; /* White text color */
  padding: 1em 0; /* Padding for spacing */
  text-align: center; /* Center text */
  position: fixed; /* Fixed position at the bottom */
  width: 100%; /* Full width */
  bottom: 0; /* Position at the bottom */
  left: 0; /* Align to the left */
  z-index: 1000; /* High z-index */
  transition: transform 0.3s ease, background 0.3s ease, padding 0.3s ease,
    box-shadow 0.3s ease; /* Smooth transitions */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

footer.hidden {
  transform: translateY(100%); /* Slide down when hidden */
}

footer .footer-content {
  display: flex; /* Flexbox for layout */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  padding: 0 1em; /* Padding for spacing */
}

footer .footer-logo a {
  color: #fff; /* White text color */
  text-decoration: none; /* No underline */
  display: flex; /* Flexbox for layout */
  align-items: center; /* Center content vertically */
  transition: color 0.3s ease; /* Smooth transition for color */
}

footer .footer-logo a:hover {
  color: #007bff; /* Blue color on hover */
}

.footer-logo-img {
  width: 24px; /* Fixed width */
  height: 24px; /* Fixed height */
  margin-right: 0.5em; /* Margin right for spacing */
  transition: transform 0.3s ease; /* Smooth transition for transform */
}

.footer-logo-img:hover {
  transform: rotate(360deg); /* Rotate image on hover */
}

footer p {
  margin: 0 0 0 0.5em; /* Margin for spacing */
  font-size: 0.8em; /* Small font size */
  transition: color 0.3s ease; /* Smooth transition for color */
}

footer p:hover {
  color: #007bff; /* Blue color on hover */
}

@media (max-width: 768px) {
  footer .footer-content {
    flex-direction: column; /* Column layout on mobile */
    text-align: center; /* Center text */
  }

  footer p {
    margin: 0.5em 0 0 0; /* Adjusted margin for spacing */
  }
}

/* Footer Section Styles - End */

/* Back to Top Button Styles - Start */

.back-to-top {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position */
  bottom: 2em; /* Positioned 2em from the bottom */
  right: 2em; /* Positioned 2em from the right */
  width: 50px; /* Fixed width */
  height: 50px; /* Fixed height */
  background-color: #007bff; /* Primary blue background color */
  color: #fff; /* White text color */
  text-align: center; /* Center text */
  line-height: 50px; /* Center text vertically */
  font-size: 2em; /* Large font size */
  border-radius: 50%; /* Fully rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease; /* Smooth transitions */
  z-index: 1000; /* High z-index */
}

.back-to-top:hover {
  background-color: #0056b3; /* Darker blue on hover */
  transform: scale(1.1); /* Slightly larger on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

/* Back to Top Button Styles - End */