* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }

    body {
      background: #f3f6fa;
      padding: 20px;
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #2c3e50;
    }

    .container {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .form-section, .resume-section {
      flex: 1;
      min-width: 300px;
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }

    .form-section:hover, .resume-section:hover {
      transform: translateY(-5px);
    }

    .form-section h2, .resume-section h2 {
      margin-bottom: 15px;
      color: #34495e;
    }

    label {
      display: block;
      margin: 10px 0 5px;
      font-weight: 500;
    }

    input, textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 8px;
      border: 1px solid #ccc;
      transition: 0.3s;
    }

    input:focus, textarea:focus {
      border-color: #3498db;
      outline: none;
      box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
    }

    .resume {
      animation: fadeIn 0.8s ease;
    }

    .resume h3 {
      margin-top: 15px;
      color: #2c3e50;
      border-bottom: 2px solid #3498db;
      display: inline-block;
      padding-bottom: 3px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
      .container { flex-direction: column; }
    }