/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

img {
  max-width: 100%;
  height: auto;
}


body {
  padding-top: 5rem;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
  line-height: 1.2;
} 

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
  color: #065286;
}

h3 {
  font-size: 1.25rem;
  color: #0077c7;
}

p {
  margin-bottom: 1rem;
  text-align: justify;  
}

ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

a {
  color: #0c96e6;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #065286;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #0077c7;
  color: white;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr 800px 1fr;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #f0f7ff;
}

.header-lang-switch {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-right: 1rem; 
}

/* Header */
header {
  background-color: #0077c7;
  color: white;
  text-align: center;
}
.header-lang-switch > a {
  padding-right: 1rem;
}

.header-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem 0;
}

.wave-divider {
  height: 4rem;
  background-color: #0061a2;
  margin-top: 2rem;
  clip-path: polygon(100% 0, 0 0, 0 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
}

/* Sections */
section {
  padding: 5rem 0;
}

.section-content {
  max-width: 800px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.bg-light {
  background-color: #f0f7ff;
}

/* Photo */
.photo-container {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
}

.photo-container img {
  width: 100%;
  max-width: 800px;
}

/* Project Description */
.project-description {
  display: grid;
  grid-template-columns: 100px auto 100px;
  max-width: 1000px;
  margin: 0 auto;
}

.project-description h2 {
  margin: 2%;
}

.description-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.description-images-left,
.description-images-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-around;
}

.description-text {
  flex-grow: 1;
  text-align: justify;
  margin: 2%;
}

/* Resize images one by one */
.description-images-left img:nth-child(1) {
  max-width: 100px;
  height: auto;
  align-self: center;
  rotate: -5deg;
}

.description-images-left img:nth-child(2) {
  max-width: 50px;
  height: auto;
  align-self: center;
  rotate: 5deg;
}

.description-images-left img:nth-child(3) {
  max-width: 100px;
  height: auto;
  align-self: center;
}

.description-images-right img:nth-child(1) {
  max-width: 80px;
  height: auto;
  align-self: center;
}

.description-images-right img:nth-child(2) {
  max-width: 100px;
  height: auto;
  align-self: center;
}

.description-images-right img:nth-child(3) {
  max-width: 70px;
  height: auto;
  align-self: center;
}

@media (max-width: 1200px) {
  .project-description {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
  }
  .description-content {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  .description-text ul {
    margin: 0;
  }

  .description-images-left,
  .description-images-right {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 10px 0;
  }

  .description-text {
    text-align: justify;
  }

  .description-images-left img,
  .description-images-right img {
    max-width: 60px;
  }
}

/* Application Showcase */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .showcase-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.showcase-item {
  background-color: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.showcase-image {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  background-color: #e0eefe;
}

.showcase-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.showcase-content {
  padding: 1rem;
  text-align: justify;
}

/* Team Members */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 576px) {
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .team-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.team-member {
  background-color: #f0f7ff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.team-avatar {
  width: 10rem;
  height: 10rem;
  background-color: #f0f7ff;
  margin: 0 auto 1rem;
  overflow: hidden;
}

.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* Footer */
footer {
  background-color: #065286;
  color: white;
  padding: 2rem 0;
  text-align: center;
}
footer .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  background-color: white;
  color: #065286;
  /* box-shadow: 4px 4px 40px white; */
  padding: 1rem;
  border-radius: 10px;
  max-width: 1000px;
}

footer img {
  max-width: 100px;
}

footer .footer-lab {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
}

footer p {
  margin-bottom: 0;
}


@keyframes fadeInUpCustom {
  from {
    opacity: 0;
    transform: scale(.8, .8) translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: scale(1, 1) translate3d(0, 0, 0);
  }
}

.animate.in-view {
  animation-name: fadeInUpCustom;
  animation-duration: .8s;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.18);
}