.about-preview {
  padding: 60px 0;
}

.about-preview .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.about-preview .about-text {
  line-height: 1.6;
}

.about-preview .about-image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-preview .about-image img {
  width: 100%;
  /* height: auto; */
  height: 90%;
  max-height: 500px; /* keeps proportion reasonable */
  object-fit: cover; /* makes sure it fills nicely without distortion */
  border-radius: 16px; /* optional: gives soft corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* optional: adds depth */
}

.about-detail .about-image img {
  width: 100%;
  /* height: auto; */
  height: 80%;
  max-height: 500px; /* keeps proportion reasonable */
  object-fit: cover; /* makes sure it fills nicely without distortion */
  border-radius: 16px; /* optional: gives soft corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* optional: adds depth */
}

@media (max-width: 768px) {
  .about-preview .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-preview .about-image img {
    max-height: 400px;
  }
}


/* This is your original style, which will apply to other forms */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 20px;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}


/* --- NEW STYLES FOR THE KONTAKT PAGE FORM --- */

/* 1. Override the container's grid layout */
.contact-form.contact-form-full-width {
  display: block; /* Reset the display from grid to block */
  /* The padding, background, etc., from the original .contact-form will still apply */
}

/* 2. Style the form inside the specific container */
.contact-form.contact-form-full-width form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 3. Style the labels, inputs, and button within the specific form */
.contact-form.contact-form-full-width label {
  margin-bottom: -5px;
  font-weight: bold;
  color: #333;
}

.contact-form.contact-form-full-width input,
.contact-form.contact-form-full-width textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.contact-form.contact-form-full-width .button-primary {
  align-self: flex-start;
  cursor: pointer;
}


/* --- GHOST BUTTON --- */

.contact-form.contact-form-full-width .button-primary {
  align-self: center;
  background-color: transparent;
  color: #007BFF; /* Your primary color */
  border: 2px solid #007BFF; /* Border with your primary color */
  border-radius: 8px;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form.contact-form-full-width .button-primary:hover {
  background-color: #007BFF; /* Fill with color on hover */
  color: white; /* Make text white on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.contact-form.contact-form-full-width .button-primary:active {
  transform: translateY(0);
  box-shadow: none;
}