:root {
    --font-color: rgba(0, 0, 0, .7);
    --heading-color: rgba(0, 103, 160, 0.6);
    --heading-hover-color: #0067a0;
    --overlay-color: rgba(0, 0, 0, 0.6);
    --overlay-hover-color: rgba(0, 103, 160, 0.4);
    --caption-color: #ffffff;
    --info-color: #ffffff;
    --info-background-color: #0067a0;
    --section-background-color: #f8f9fa;
    --text-color: #343a40;
    --card-shadow-color: rgba(0, 0, 0, 0.15);
    --footer-background-color: #343a40;
}

h1{
  font-family: 'Romeral', sans-serif;
}

h2{
  font-family: 'Romeral', sans-serif;
}

h3{
  font-family: 'Romeral', sans-serif;
}

.contact-section {
  background-color: var(--section-background-color);
  color: var(--text-color);
}

.contact-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
  color: var(--heading-hover-color);
}

.contact-subtitle {
  text-align: center;
  margin-bottom: 40px;
  font-size: 1.5rem;
  color: var(--font-color);
}

.contact-subtitle:hover {
  color: var(--heading-hover-color);
}

.contact-form {
  background-color: var(--heading-color);
  color: var(--info-color);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px var(--card-shadow-color);
  transition: background-color 0.3s ease-in-out;
}

.contact-form label {
  font-weight: bold;
  color: var(--info-color);
}

.contact-form input, .contact-form textarea {
  margin-bottom: 10px;
}

.contact-form button {
  background-color: var(--heading-hover-color);
  color: var(--info-color);
  transition: all 0.3s ease-in-out;
}

.contact-form button:hover {
  background-color: var(--heading-color);
  transform: scale(1.05);
}

.contact-info {
  color: var(--text-color);
}

.contact-info h2 {
  margin-top: 20px;
  font-size: 1.75rem;
  color: var(--heading-hover-color);
}

.contact-info p {
  margin-bottom: 20px;
  color: var(--font-color);
}