/* Contact Page Styles */

/* Contact Information Section */
.contact-info {
  padding: var(--spacing-xl) 0;
  background-color: var(--pale-teal);
}

.contact-info__feature {
  background-color: var(--white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info__feature:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
}

.contact-info__feature-icon {
  font-size: 3rem;
  color: var(--bright-teal);
  margin-bottom: var(--spacing-md);
}

.contact-info__feature-title {
  font-size: 1.4rem;
  color: var(--dark-teal);
  margin-bottom: var(--spacing-sm);
}

.contact-info__feature-description {
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

.contact-info__feature-button {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--bright-teal);
  color: var(--text-light);
  border-radius: var(--border-radius-sm);
  transition: background-color 0.3s ease;
}

.contact-info__feature-button:hover {
  background-color: var(--medium-teal);
}

.contact-info__social-link {
  font-size: 1.5rem;
  color: var(--dark-teal);
  transition: color 0.3s ease;
}

.contact-info__social-link--dark {
  color: var(--dark-teal);
}

.contact-info__social-link:hover {
  color: var(--bright-teal);
}

/* Map Section Styles */
.contact-map {
  background-color: var(--pale-teal-light);
  padding: var(--spacing-xl) 0;
}

.contact-map__header {
  margin-bottom: var(--spacing-lg);
}

.contact-map__title {
  font-size: var(--h2-font-size);
  color: var(--dark-teal);
}

.contact-map__title::after {
  width: 80px;
  height: 3px;
  background-color: var(--bright-teal);
}

.contact-map__map-container {
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.contact-map__iframe {
  width: 100%;
  border: none;
  display: block;
}

.contact-map__info-title {
  font-size: var(--h3-font-size);
  color: var(--dark-teal);
  margin-bottom: var(--spacing-md);
}

.contact-map__info-description {
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
  color: var(--text-medium);
}

.contact-map__direction-item {
  background-color: var(--white);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-map__direction-item:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
}

.contact-map__direction-title {
  font-size: 1.2rem;
  color: var(--dark-teal);
  margin-bottom: var(--spacing-sm);
}

.contact-map__direction-title i {
  color: var(--bright-teal);
  font-size: 1.5rem;
}

.contact-map__direction-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-medium);
}

/* Contact Form Section Styles */
.contact-form-section {
  background-color: var(--pale-teal-light);
  padding: var(--spacing-xl) 0;
  position: relative;
}

.contact-form-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23ffffff"/><path d="M0,0 L100,0 L100,10 C70,8 30,12 0,10 Z" fill="%239e7e5a" opacity="0.03"/><path d="M0,20 L100,20 L100,30 C80,32 60,28 40,30 C20,32 10,28 0,30 Z" fill="%235d4a36" opacity="0.03"/><path d="M0,40 L100,40 L100,50 C75,48 50,52 25,50 C10,48 5,52 0,50 Z" fill="%239e7e5a" opacity="0.03"/><path d="M0,60 L100,60 L100,70 C85,68 70,72 55,70 C40,68 25,72 0,70 Z" fill="%235d4a36" opacity="0.03"/><path d="M0,80 L100,80 L100,90 C90,88 80,92 70,90 C50,88 30,92 0,90 Z" fill="%239e7e5a" opacity="0.03"/></svg>');
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.contact-form__section-title {
  margin-bottom: var(--spacing-lg);
}

.contact-form__section-title h2 {
  font-size: 2.5rem;
  color: var(--dark-teal);
}

.contact-form__group {
  margin-bottom: var(--spacing-md);
}

.contact-form__label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
}

.contact-form__input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: var(--font-body);
  transition: border-color 0.3s ease;
}

.contact-form__input:focus {
  outline: none;
  border-color: var(--medium-teal);
}

.contact-form__submit-button {
  background-color: var(--bright-teal);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form__submit-button:hover {
  background-color: var(--medium-teal);
}

.contact-info {
  background-color: var(--white);
  padding: var(--spacing-lg);
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-info__heading {
  font-size: 1.5rem;
  color: var(--dark-teal);
  margin-bottom: var(--spacing-md);
}

.contact-info__description {
  margin-bottom: var(--spacing-lg);
  color: var(--text-medium);
}

.contact-info__item {
  margin-bottom: var(--spacing-md);
}

.contact-info__icon {
  color: var(--bright-teal);
  font-size: 1.2rem;
  margin-right: var(--spacing-sm);
  margin-top: 5px;
}

.contact-info__content {
  flex: 1;
}

.contact-info__title {
  margin-bottom: var(--spacing-sm);
  color: var(--dark-teal);
}

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