body {
  font-family: 'Open Sans', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #222;
}
h1, h2, h3 {
  font-family: 'Poppins', Arial, sans-serif;
  color: #673de6;
  margin-top: 0;
}
a { color: #673de6; text-decoration: none; }

/* Sticky Header */
header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(103,61,230,0.07);
}
/* ... header/menu styles as before ... */

/* Banner */
.banner {
  background: linear-gradient(135deg, #673de6 60%, #fff 100%);
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px 60px 20px;
  position: relative;
}
.banner-content h1, .banner-content p, .banner-content .cta-btn { color: #fff; }
.cta-btn {
  background: #fff;
  color: #673de6;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 30px;
  font-size: 1.1em;
  box-shadow: 0 2px 12px rgba(103,61,230,0.10);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  display: inline-block;
  animation: fadeIn 1.2s;
}
.cta-btn:hover, .contact-form button:hover {
  background: #673de6;
  color: #fff;
  box-shadow: 0 4px 20px rgba(103,61,230,0.18);
}

/* Fade-in and Scroll Animations */
.fade-in { opacity: 0; transform: translateY(30px); animation: fadeIn 1s forwards; }
.fade-in:nth-child(1) { animation-delay: 0.2s; }
.fade-in:nth-child(2) { animation-delay: 0.6s; }
.fade-in:nth-child(3) { animation-delay: 1s; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
.scroll-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; }
.scroll-animate.visible { opacity: 1; transform: translateY(0); }

/* About */
.about { background: #fff; padding: 70px 0; }
.about-container { display: flex; align-items: center; max-width: 1200px; margin: 0 auto; width: 90%; gap: 40px; flex-wrap: wrap; }
.about-img img { width: 320px; border-radius: 12px; box-shadow: 0 2px 16px rgba(103,61,230,0.10); }
.about-text h2 { margin-bottom: 20px; }
.about-text p { font-size: 1.1em; color: #444; line-height: 1.7; }

/* Services */
.services { background: #f6f6ff; padding: 70px 0; text-align: center; }
.services h2 { margin-bottom: 40px; color: #673de6; font-size: 2em; }
.services-cards { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.service-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(103,61,230,0.07); padding: 32px 24px; width: 240px; transition: transform 0.2s, box-shadow 0.2s; text-align: center; cursor: pointer; }
.service-card:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 8px 32px rgba(103,61,230,0.