:root{
  --primary:#4f46e5;
  --secondary:#0b1220;
  --accent:#6ee7b7;
  --muted:#94a3b8;
  --fontColor: #333;
  --whiteColor: #fff;
  --bodyBackground: #f9fafb;
  --glass: rgba(255,255,255,0.03)
}

body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: var(--bodyBackground);
      color: var(--fontColor);
      line-height: 1.6;
    }

    header {
      background: var(--primary);
      color: var(--whiteColor);
      padding: 1rem 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: fixed;
      width: 100%;
      z-index: 99;
    }
    header h1 {
      margin: 0;
      font-size: 1.5rem;
    }

    header h1 a {
      text-decoration: none;
      color: var(--whiteColor);
    }

    nav a {
      margin-right: 50px;
      color: var(--whiteColor);
      text-decoration: none;
      transition: color 0.3s;
    }
    nav a:hover {
      color: #c7d2fe;
    }
    section {
      padding: 4rem 2rem;
    }
    .hero {
      background: linear-gradient(90deg, #4f46e5, #9333ea);
      color: #fff;
      text-align: center;
      padding: 6rem 2rem;
      animation: fadeIn 1s ease-in-out;
    }
    .hero h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      animation: slideDown 1s ease-in-out;
    }
    .hero p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }
    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      font-weight: bold;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.3s, background 0.3s;
    }
    .btn-primary {
      background: #fff;
      color: #4f46e5;
    }
    .btn-primary:hover {
      background: #f3f4f6;
      transform: scale(1.05);
    }
    .btn-accent {
      background: var(--primary);
      color: var(--whiteColor);
    }
    .btn-accent:hover {
      background: #7e22ce;
      transform: scale(1.05);
    }
    .features {
      display: grid;
      gap: 1.5rem;
    }
    @media (min-width: 768px) {
      .features {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .card {
      background: #fff;
      padding: 1.5rem;
      border-radius: 1rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.5);
      transition: transform 0.3s;
      animation: fadeIn 1.2s ease-in-out;
    }
    .card:hover {
      transform: translateY(-5px);
    }

    /* Contact Form */
    .contact-form {
      max-width: 600px;
      margin: 0 auto;
      background: #fff;
      padding: 2rem;
      border-radius: 1rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      animation: fadeIn 1.2s ease-in-out;
    }
    .contact-form h2 { 

        font-size: 2.5rem;
      margin-bottom: 1rem;
      animation: slideDown 1s ease-in-out;
        text-align: center; 
     }
    
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #ccc;
      border-radius: 0.5rem;
      font-size: 1rem;
      transition: border-color 0.3s;
    }
    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #4f46e5;
    }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .btn-submit {
      background: #4f46e5;
      color: #fff;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 1rem;
      transition: background 0.3s, transform 0.3s;
    }
    .btn-submit:hover {
      background: #4338ca;
      transform: scale(1.05);
    }

    footer {
      background: #4338ca;
      color: #fff;
      text-align: center;
      padding: 1rem;
    }
    /* Animations */
    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    @keyframes slideDown {
      from {transform: translateY(-20px); opacity: 0;}
      to {transform: translateY(0); opacity: 1;}
    }
    @keyframes pulse {
      0%, 100% {transform: scale(1);}
      50% {transform: scale(1.05);}
    }
    .pulse {
      animation: pulse 2s infinite;
    }