body {
  background-image: linear-gradient(to left, #ffd363, #fff);
}

.contact-section {
  padding: 2rem;
  margin-top: 5%;
}

/* Ensure the image and form columns have the same height */
.contact-image,
.contact-details {
  height: 100%; /* Make both columns take full height */
  display: flex;
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
}

.contact-image {
  background: url("Images/logo.png") center center no-repeat;
  background-size: cover;
  min-height: 400px; /* Set a minimum height for the image */
}

.contact-details {
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px; /* Rounded corners for the form container */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
}

/* Form styling */
.form-label {
  font-weight: 500; /* Bold labels */
  color: #333; /* Darker text for better readability */
  margin-bottom: 0.5rem; /* Space between label and input */
}

.form-control {
  border: 1px solid #ddd; /* Light border */
  border-radius: 5px; /* Rounded corners for inputs */
  padding: 10px; /* Comfortable padding */
  font-size: 1rem; /* Consistent font size */
  margin-bottom: 1rem; /* Space between inputs */
}

.form-control:focus {
  border-color: #0e9e4f; /* Green border on focus */
  box-shadow: 0 0 5px rgba(14, 158, 79, 0.5); /* Subtle shadow on focus */
}

.form-select {
  border: 1px solid #ddd; /* Light border */
  border-radius: 5px; /* Rounded corners */
  padding: 10px; /* Comfortable padding */
  font-size: 1rem; /* Consistent font size */
  margin-bottom: 1rem; /* Space below the select */
}

.form-select:focus {
  border-color: #0e9e4f; /* Green border on focus */
  box-shadow: 0 0 5px rgba(14, 158, 79, 0.5); /* Subtle shadow on focus */
}

.btn-primary {
  background-color: #0e9e4f; /* Green button */
  border: none; /* Remove default border */
  padding: 12px; /* Comfortable padding */
  font-size: 1rem; /* Consistent font size */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.btn-primary:hover {
  background-color: #097c3c; /* Darker green on hover */
}

#loading-spinner {
  display: none;
  text-align: center;
  margin-top: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .contact-image {
    min-height: 300px; /* Adjust height for smaller screens */
    margin-bottom: 1rem;
  }

  .contact-details {
    padding: 1.5rem; /* Slightly reduce padding on smaller screens */
  }
}