body { font-family: 'Inter', sans-serif; background-color: #f0f2f5; color: #333; margin: 0; padding: 0 0 5em; line-height: 1.6; }

header { display: flex; flex-direction: column; align-items: center; background-color: #ffffff; padding: 1em 2em; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

.logo { display: flex; align-items: center; margin-bottom: 0.5em; }

.logo img { height: 90px; margin-right: 12px; }

.logo h1 { font-size: 1.8em; color: #0077cc; font-weight: 700; }

nav { display: flex; gap: 15px; }

nav a { text-decoration: none; color: #444; font-weight: 600; transition: color 0.3s ease; }

nav a:hover { color: #0077cc; }

main { padding: 2em; max-width: 1000px; margin: auto; }

.hero { text-align: center; background: linear-gradient(to right, #e0f7ff, #f9f9f9); padding: 3em 1em; border-radius: 16px; box-shadow: 0 6px 12px rgba(0,0,0,0.05); }

.hero h2 { font-size: 2.5em; margin-bottom: 0.5em; color: #004a99; }

.hero p { font-size: 1.2em; color: #555; }

.testimonials, .portfolio { margin-top: 3em; }

.testimonials h3, .portfolio h3 { font-size: 1.8em; margin-bottom: 1em; color: #0077cc; display: block; }
.testimonials h3.lang-hidden, .portfolio h3.lang-hidden { display: none; }

.testimonials blockquote { background: #fff; border-left: 5px solid #0077cc; margin: 1.5em 0; padding: 1.2em; font-style: italic; box-shadow: 0 2px 6px rgba(0,0,0,0.08); border-radius: 8px; color: #333; }

.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5em; }

.portfolio h3 { grid-column: 1 / -1; margin-bottom: 0.4em; }

.portfolio-item { background: #ffffff; padding: 1em; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease; }

.portfolio-item:hover { transform: translateY(-5px); }

.portfolio-item img { max-width: 100%; border-radius: 8px; margin-bottom: 0.5em; }

.portfolio-item h4 { font-weight: 200; color: #333; }

.portfolio-item p { font-weight: 600; color: #222; }

footer { position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; padding: 1.5em; background-color: #dddddd; margin-top: 3em; font-size: 0.9em; }

.copyright { margin-left: 1em; margin-right: 1em;}
.language-switcher { text-align: center; white-space: nowrap;  }
.lang-btn {
  border: 1px solid #ccc;
  background: white;
  color: #333;
  padding: 6px 12px;
  margin: 0 2px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}
.lang-btn:hover {
  background: #0077cc;
  color: white;
}

.lang-hidden { display: none; !important; }
.lang-visible { display: block; }

@media screen and (min-width: 601px) {
  header { position: sticky; top: 0; z-index: 1000; }
}

@media (max-width: 600px) {
  main { padding: 1em; }
  nav { flex-direction: column; align-items: center; }
  nav a { margin: 0.3em 0; }
  .logo { flex-direction: column; }
  .logo h1 { text-align : center; }
}