/* Shared layout */
.visit-section,
.contact-form-container {
  width: var(--large-screen-width); /* ensures 200px padding on both sides */
  margin: var(--centering); /* centers the container */
}

/* Visit section */
.visit-section {
  display: flex;
  justify-content: space-between;
  max-width: 1600px;
  padding: 100px 0;
}

.visit-content {
  width: 400px;
}

.visit-content h1 {
  font-size: var(--font-size-xl);
  color: var(--secondary-color);
}

.visit-content section {
  margin-bottom: 40px;
}

.visit-content h2 {
  font-size: var(--font-size-base);
  margin-bottom: 10px;
}

.visit-content p,
.visit-content address {
  font-size: var(--font-size-xxs);
  margin-bottom: 20px;
}

.visit-content address {
  font-style: normal;
}

.info {
  text-align: right;
}

.opening-times-content p {
  font-weight: var(--font-weight-semi-bold);
}

/* Contact form section */
.contact-form-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
  padding: 100px 0 150px 0;
}

.contact-form-section h2 {
  font-size: var(--font-size-lg);
  color: var(--secondary-color);
}

.contact-form-section h3 {
  font-size: var(--font-size-ml);
  margin-bottom: 20px;
}

.contact-form-container {
  max-width: 650px;
  padding: 50px;
  box-shadow: 5px 5px 20px 0px var(--shadow-color);
  border-radius: var(--border-radius-medium);
}

.contact-form > * {
  margin-bottom: 20px;
}

.contact-form button {
  width: var(--scalable-width);
}

.contact-form-content,
.message {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 5px;
}

.contact-form-content input,
.message textarea {
  border: none;
  font-size: var(--font-size-xxs);
  padding: 10px 20px;
  border-radius: var(--border-radius-medium);
  color: var(--primary-color);
  outline: 2px solid var(--primary-color);
}

.contact-form-content input:focus,
.message textarea:focus {
  outline: 2px solid var(--accent-color);
}

.message textarea {
  height: 280px;
  padding: 20px 20px;
}