.donation-card {
  border: 1px dashed #ff6b00;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.donation-card:hover {
  box-shadow: 0 10px 20px rgba(255, 107, 0, 0.1);
  transform: translateY(-5px);
}

.donate-btn {
  background-color: white;
  color: #ff6b00;
  border: 1px solid #ff6b00;
  border-radius: 25px;
  padding: 8px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.donate-btn:hover {
  background-color: #ff6b00;
  color: white;
  transform: scale(1.05);
}

.hero-section {
  background-image: url("https://images.unsplash.com/photo-1585158531004-3c5ee2a4365d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80");
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.main-donate-btn {
  background-color: #ff6b00;
  color: white;
  border-radius: 5px;
  padding: 10px 30px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.main-donate-btn:hover {
  background-color: #e05e00;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
}

.form-input {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #ff6b00;
  box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2);
  outline: none;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Enhanced form field animations */
.form-group {
  position: relative;
}

.form-label {
  position: absolute;
  top: 12px;
  left: 16px;
  color: #6b7280;
  transition: all 0.3s ease;
  pointer-events: none;
  background: white;
  padding: 0 4px;
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  top: -10px;
  left: 12px;
  font-size: 0.8rem;
  color: #f97316;
}