/* Global Styles */
html, body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
  height: 100%; /* Ensure the body has enough height */
}

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #E0F2F1; /* Soft teal-white background */
  color: #333; /* Darker text for better contrast */
  line-height: 1.6;
}

/* Sticky Header */
header {
  background-color: #508887; /* Dark Teal */
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .logo img {
  height: 50px;
  transition: transform 0.3s ease, filter 0.3s ease;
  border-radius: 10px; /* Soft edges for logo */
}

header .logo img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px #d6a9a5);
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

nav ul li a {
  color: #d6a9a5; /* Light Pink */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

nav ul li a:hover {
  color: #689dad; /* Light Blue */
  transform: translateY(-3px);
  text-shadow: 0 0 10px #689dad;
}

main {
  padding: 0.5rem;
  color: #333; /* Darker text for better contrast */
  border-radius: 10px; /* Soft edges for main content */
  margin: 0.5rem;
  background-color: transparent; /* Remove white background */
}

footer {
  background-color: #508887; /* Dark Teal */
  text-align: center;
  padding: 1rem;
  position: relative;
  bottom: 0;
  width: 100%;
  color: #FFFFFF;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

footer p {
  margin: 0.5rem 0;
}

.social-media {
  margin-top: 1rem;
}

.social-media a {
  color: #d6a9a5; /* Light Pink */
  text-decoration: none;
  font-size: 1.5rem;
  margin: 0 0.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-media a:hover {
  color: #689dad; /* Light Blue */
  transform: translateY(-3px);
}

/* Hero Section */
#hero {
  text-align: center;
  padding: 5rem 1rem; /* Adjusted padding for mobile */
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/hero-bg.png') no-repeat center/cover;
  color: #333; /* Darker text for better contrast */
  position: relative;
  overflow: hidden;
  border-radius: 10px; /* Soft edges for hero section */
  margin: 1rem;
}

#hero h1 {
  font-size: 2.5rem; /* Adjusted for mobile */
  margin-bottom: 1rem;
  animation: float 3s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(214, 169, 165, 0.8);
}

#hero p {
  font-size: 1.2rem; /* Adjusted for mobile */
  margin-bottom: 2rem;
  animation: float 3s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(214, 169, 165, 0.8);
}

#hero button {
  background-color: #d6a9a5; /* Light Pink */
  color: #000000; /* Black */
  border: none;
  padding: 0.8rem 1.5rem; /* Adjusted for mobile */
  font-size: 1rem;
  cursor: pointer;
  border-radius: 10px; /* Soft edges for button */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

#hero button:hover {
  background-color: #689dad; /* Light Blue */
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(104, 157, 173, 0.8);
}

@keyframes float {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px);
  }
}

/* Card Container for Services and Fees */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
  gap: 4rem; /* Increased gap between cards */
  padding: 2rem;
  justify-content: center; /* Center cards on the page */
}

.service, .fee {
  margin: 0; /* Remove default margin */
  width: 100%; /* Full width within the grid */
  max-width: none; /* Remove max-width restriction */
  padding: 1.5rem;
  border-radius: 10px; /* Soft edges for cards */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-size: cover;
  background-position: center;
  color: #333; /* Darker text for better contrast */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background for cards */
}

.service::before, .fee::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  animation: glow 5s infinite alternate;
}

/* Card Hover Effects */
.service:hover, .fee:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Service Card Backgrounds */
#service1 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/service1.jpg') no-repeat center/cover;
}

#service2 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/service2.jpg') no-repeat center/cover;
}

#service3 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/service3.png') no-repeat center/cover;
}

#service4 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/service4.jpg') no-repeat center/cover;
}

#service5 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/service5.png') no-repeat center/cover;
}

#service6 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/service6.png') no-repeat center/cover;
}

#service7 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/service7.jpg') no-repeat center/cover;
}

/* Fee Card Backgrounds */
#fee1 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/fee1.png') no-repeat center/cover;
}

#fee2 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/fee2.png') no-repeat center/cover;
}

#fee3 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/fee3.jpg') no-repeat center/cover;
}

#fee4 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/fee4.png') no-repeat center/cover;
}

#fee5 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/fee5.png') no-repeat center/cover;
}

/* Contact Section */
#contact {
  text-align: center;
  margin: 2rem 0;
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/contact-bg.png') no-repeat center/cover;
  padding: 2rem;
  border-radius: 10px; /* Soft edges for contact section */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

#contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  animation: glow 5s infinite alternate;
}

#contact-form {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: 0 auto;
}

#contact-form label {
  margin-top: 1rem;
  color: #333; /* Darker text for better contrast */
}

#contact-form input, #contact-form textarea {
  padding: 0.5rem;
  margin-top: 0.5rem;
  border: 1px solid #d6a9a5; /* Light Pink */
  border-radius: 10px; /* Soft edges for form inputs */
  transition: box-shadow 0.3s ease;
}

#contact-form input:focus, #contact-form textarea:focus {
  box-shadow: 0 0 10px rgba(214, 169, 165, 0.8);
}

#contact-form button {
  margin-top: 1rem;
  padding: 0.5rem;
  background-color: #d6a9a5; /* Light Pink */
  color: #000000; /* Black */
  border: none;
  border-radius: 10px; /* Soft edges for button */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

#contact-form button:hover {
  background-color: #689dad; /* Light Blue */
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(104, 157, 173, 0.8);
}

/* Hamburger Menu Styles */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #d6a9a5; /* Light Pink */
  transition: 0.4s;
  border-radius: 2px; /* Soft edges for hamburger bars */
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .hamburger {
      display: flex;
  }

  .nav-links {
      display: none;
      flex-direction: column;
      width: 100%;
      background-color: #508887; /* Dark Teal */
      position: absolute;
      top: 70px; /* Adjusted to fit below the header */
      left: 0;
      padding: 1rem;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 0 0 10px 10px; /* Soft edges for mobile menu */
  }

  .nav-links.active {
      display: flex;
  }

  .nav-links li {
      margin: 0.5rem 0;
  }

  .nav-links li a {
      color: #d6a9a5; /* Light Pink */
  }

  .nav-links li a:hover {
      color: #689dad; /* Light Blue */
  }

  .card-container {
      grid-template-columns: 1fr; /* Single column on mobile */
      padding: 1rem; /* Reduce padding for mobile */
  }

  .service, .fee {
      max-width: 90%; /* Limit card width on mobile */
      margin: 0 auto; /* Center cards on mobile */
  }
}

/* Responsive Design for Smaller Screens */
@media (max-width: 480px) {
  header {
      padding: 0.5rem;
  }

  header .logo img {
      height: 40px;
  }

  #hero h1 {
      font-size: 1.8rem;
  }

  #hero p {
      font-size: 1rem;
  }

  #hero button {
      padding: 0.8rem 1.5rem;
      font-size: 0.9rem;
  }

  .service h3, .fee h3 {
      font-size: 1.2rem;
  }

  .service p, .fee ul {
      font-size: 0.9rem;
  }

  #contact-form input, #contact-form textarea {
      padding: 0.4rem;
  }

  #contact-form button {
      padding: 0.4rem;
  }
}

/* Features Section */
#features {
  display: flex;
  justify-content: space-around;
  margin: 2rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.feature {
  padding: 1.5rem;
  border-radius: 10px; /* Soft edges for feature cards */
  text-align: center;
  width: 100%; /* Full width on mobile */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-size: cover;
  background-position: center;
  color: #333; /* Darker text for better contrast */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  animation: glow 5s infinite alternate;
}

#feature1 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/feature1.png') no-repeat center/cover;
}

#feature2 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/feature2.png') no-repeat center/cover;
}

#feature3 {
  background: linear-gradient(rgba(224, 242, 241, 0.8), rgba(224, 242, 241, 0.8)), url('assets/feature3.png') no-repeat center/cover;
}

.feature:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}