/* index.css - Custom styles for index.php */

/* General Body Styles */
body {
  font-family: 'Nunito', sans-serif; /* Example font - customize as needed */
}

/* Navbar */
.navbar {
    /* Add a subtle transition for the sticky effect */
    transition: all 0.3s ease-in-out;
}

.navbar-brand {
  font-weight: bold;
}

/* Sticky Navbar Effect */
.navbar.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020; /* Ensure it stays on top of other content */
  background-color: white; /* Solid background when sticky */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a shadow when sticky */
}


/* Hero Section */
.hero-section {
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 0; /* Adjust padding as needed */
  text-align: center;
}

.hero-section h1 {
  font-size: 3rem; /* Adjust font size as needed */
  font-weight: bold;
  margin-bottom: 20px;
}

.hero-section p {
  font-size: 1.25rem; /* Adjust font size as needed */
  margin-bottom: 30px;
}

/* Features Section */
.features-section {
  padding: 80px 0; /* Adjust padding as needed */
}

.feature-card {
  border: none;
  border-radius: 10px; /* Add rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  transition: transform 0.3s ease-in-out; /* Add a hover effect */
  padding: 30px;
  margin-bottom: 30px;
  text-align: center; /* Center the content */
}

.feature-card i {
    margin-bottom: 20px;
}

.feature-card:hover {
  transform: translateY(-5px); /* Lift the card slightly on hover */
}


.feature-icon {
  font-size: 3rem;
  color: #007bff; /* Primary color */
  margin-bottom: 1rem;
}

/* Call to Action Section */
.cta-section {
  background-color: #007bff; /* Primary color */
  color: white;
  padding: 60px 0; /* Adjust padding as needed */
  text-align: center;
}

/* How It Works Section */
.how-it-works-section {
    padding: 80px 0;
}
.step-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Testimonials Section */
.testimonials-section {
    padding: 80px 0;
}

/* About Us Section */
 .about-us-section {
    padding: 80px 0;
 }

/* Pricing Section */
.pricing-section {
  padding: 80px 0;
}

.pricing-card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
  text-align: center;
}
.btn-full {
    width: 100%;
}

/* Footer */
footer a {
    color: #6c757d; /* Match Bootstrap's secondary color */
    text-decoration: none; /* Remove underlines */
    transition: color 0.2s ease-in-out; /* Smooth color transition */
}
footer a:hover {
    color: #0056b3; /* Darker blue on hover */
}

/* Responsive Adjustments (optional, but good practice) */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 0; /* Less padding on smaller screens */
  }

  .hero-section h1 {
    font-size: 2.5rem; /* Smaller font size on smaller screens */
  }
    .col-md-4 {
      margin-bottom: 1.5rem;
    }
    .col-md-6 {
        width: 100%;
    }
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .carousel-caption {
      display: none !important; /* Hide carousel captions on small screens */
    }
}

/* Additional refinements from iterations 3-10 */
.rounded-xl {
    border-radius: 0.75rem;
}

.shadow-lg {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.transition-shadow {
    transition: box-shadow 0.3s ease-in-out;
}
.hover\:shadow-lg:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Carousel Height Adjustment */
#carouselExampleFade .carousel-inner img {
    max-height: 300px; /* Adjust this value as needed */
    object-fit: cover;  /* Ensures images are scaled correctly */
    width: 100%; /* Ensure images fill the width */
}