body {
  font-family: 'Segoe UI', sans-serif;
  background: #f4faff;
  color: #333;
}

header {
  background: #007bff;
  color: white;
  padding: 20px 0;
}

header h1 {
  font-size: 2rem;
}

.hero {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: white;
  padding: 80px 20px;
  text-align: center;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.features {
  padding: 60px 20px;
  background: #ffffff;
}

.feature-item {
  text-align: center;
  padding: 20px;
}

.feature-item i {
  font-size: 3rem;
  color: #007bff;
  margin-bottom: 10px;
}

footer {
  background: #002244;
  color: white;
  text-align: center;
  padding: 20px 0;
}

.btn-blue {
  background: #0056b3;
  color: white;
}

.btn-blue:hover {
  background: #003f7f;
  color: white;
}

/* Home page CSS starts */

.hero-section {
  background: linear-gradient(135deg, #007bff 0%, #00b894 100%);
  min-height: 80vh;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.animate-fade-in { animation: fadeIn 1s ease forwards; opacity: 0; }
.animate-fade-in-delay { animation: fadeIn 1.5s ease forwards; opacity: 0; }
.animate-fade-in-delay2 { animation: fadeIn 2s ease forwards; opacity: 0; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.feature-box:hover {
  transform: translateY(-6px);
  transition: 0.3s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.card:hover {
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

/* Home page CSS ends */