.hero {
  display: flex;
  justify-content: center; /* κεντράρισμα οριζόντια */
  align-items: center;     /* κεντράρισμα κάθετα */
  width: fit-content;      /* το container παίρνει μόνο το μέγεθος της εικόνας */
  height: fit-content;
  margin: 0 auto;          /* κεντράρισμα στη σελίδα */
  padding: 0;              /* χωρίς επιπλέον κενά */
}

.hero__backplate {
  display: inline-block;  /* παίρνει μόνο το μέγεθος του περιεχομένου */
  width: fit-content;
  height: fit-content;
  margin-top: 50px;        /* μετακινεί την εικόνα πιο κάτω */
  padding: 0;
  position: relative;     /* για overlay αν υπάρχει */
}

.hero__bg-image {
  width: 1000px;   /* μικρότερο μέγεθος εικόνας */
  height: auto;   /* κρατάει τις αναλογίες */
  display: block;
}

.btn-language {
    display: inline-block;
    padding: 6px 12px;
    background: #eee;
    border-radius: 6px;
    text-decoration: none;
    color: rgb(31, 48, 244);
    font-weight: bold;
}
.btn-language:hover {
    background: #ddd;
}

.contact-section {
  padding: 80px 20px;
  display: flex;
  justify-content: center; /* κεντράρει το container οριζόντια */
}

.contact-container {
  max-width: 500px;
  width: 100%;
  text-align: center; /* κεντράρει τίτλο και υπότιτλο */
}

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center; /* κεντράρει τα πεδία & κουμπί */
}

.contact-form input,
.contact-form textarea {
  width: 100%; /* γεμίζει το container, αλλά παραμένει κεντραρισμένο */
  max-width: 100%;
  margin-bottom: 15px;
}

.contact-form button {
  width: auto; /* δεν χρειάζεται να γεμίζει όλο το πλάτος */
  padding: 12px 30px;
  margin-top: 10px;
}

.form-response {
  margin-top: 15px;
  text-align: center;
  color: #0f0;
}