/* Contact Information Section */
.contact-info {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}

.contact-info .info-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.contact-info .info-item:hover {
  transform: translateY(-5px);
  background: rgba(70, 130, 180, 0.05); /* steelBlue with low opacity */
}

.contact-info i {
  width: 24px;
  height: 24px;
  margin-right: 1rem;
  transition: transform 0.3s ease;
}

.contact-info .info-item:hover i {
  transform: translateY(-3px) scale(1.1);
  color: #4682B4; /* steelBlue */
}

.contact-info h3 {
  color: #4682B4; /* steelBlue */
  transition: color 0.3s ease;
}

.contact-info .info-item:hover h3 {
  color: #36648B; /* darker steelBlue */
}

.contact-info p {
  color: #666666;
  transition: color 0.3s ease;
}

.contact-info .info-item:hover p {
  color: #333333; /* darker gray */
}

/* Animation for initial load */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact-info .info-item {
  animation: slideIn 0.5s ease-out;
}

.contact-info .info-item:nth-child(1) { animation-delay: 0.1s; }
.contact-info .info-item:nth-child(2) { animation-delay: 0.2s; }
.contact-info .info-item:nth-child(3) { animation-delay: 0.3s; }

/* Contact Form */
/* General Styles for the Contact Form */
#contact-form {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 600px; /* Limits the maximum width of the form */
  margin: 0 auto; /* Centers the form on the page */
  padding: 2rem;
}

#contact-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}

#contact-form input,
#contact-form select,
#contact-form textarea {
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
#contact-form select {
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
  width: 75%; /* Ensures the select element takes up the full width of its container */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  padding: 0.5rem; /* Adds some padding for better touch target */
}
#contact-form input:hover,
#contact-form select:hover,
#contact-form textarea:hover {
  border-color: #4682B4;
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.1);
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border-color: #4682B4;
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.2);
}

#contact-form button {
  transition: background-color 0.3s ease, transform 0.3s ease;
  background-color: #4682B4;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
}

#contact-form button:hover {
  background-color: rgba(70, 130, 180, 0.625);
  transform: translateY(-2px);
}

#contact-form button:active {
  transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .contact-info,
  #contact-form {
    margin-bottom: 2rem;
  }
  .contact-info:hover,
  #contact-form:hover {
    transform: none;
  }
}