/* Global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  direction: rtl;
  scroll-behavior: smooth;
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root {
  --color-primary: #04b5e8;
  --color-secondary: #222;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}


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

/* Navbar */

.nav {
  padding: 0 16px;
  background-color: white;
}

.logo {
  height: 85px;
}

.nav-list {
  width: 45%;
  justify-content: space-around;
}

@media screen and (max-width:500px){
  .nav-list {
    width: 55%;
  }
}

.languages {
  border: 1px solid #222;
  padding: 5px;
  border-radius: 0.3rem;
  font-size: 9px;
  font-weight: bold;
}

.lang {
  transition: all 0.3s linear;
}

.lang:hover {
  color: rgba(0, 0, 0, 0.6)
}

/* Hero styles */

.hero {
  background-color: var(--color-primary);
  background: linear-gradient(45deg,
      rgb(255, 255, 255),
      rgba(5, 183, 232, 0.5));
  padding: 16px;
}

.hero__description {
  margin-bottom: 16px;
  text-align: center;

}

.hero__img {
  border-radius: 0.25rem;
  width: 50%;
  margin-top: 25px;
}

@media screen and (max-width: 800px) {
  .hero {
    flex-direction: column;
  }

  .hero__description {
    margin-bottom: 0;
  }

  .hero__headline {
    text-align: center;
  }

  .hero__img {
    width: 70%;
  }
}


/* Services & Activities */

.activities {
  margin-bottom: 100px;
}

.section__header {
  text-align: center;
  font-size: 3rem;
  margin: 25px 0;
  margin-top: 100px;
}

.cards {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  /* display: grid; */
  /* grid-template-columns: repeat(3, 1fr); */
  gap: 20px;
  padding: 0 20px;
}

.card {
  border: 3px solid var(--color-primary);
  border-radius: 0.5rem;
  transition: all 0.3s linear;
  width: 30%;
}

.impo {
  width: 35%;
  border-color: rgb(27, 94, 112)
}


.card__image {
  object-fit: cover;
  width: 100%;
}

.card__description {
  padding: 15px;
  text-align: center;
}

.card:hover {
  border-color: rgb(9, 135, 253);
  transform: scale(1.01);
}

.impo:hover {
  border-color: rgba(27, 94, 112,0.5)
}


@media screen and (max-width: 880px) {

  .card__description {
    font-size: 12px;
  }
}

@media screen and (max-width: 600px) {
  .cards {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .card {
    width: 75%;
  }

  .impo {
    width: 80%;
  }
}

/* Footer */

footer {
  background-color: var(--color-secondary);
  color: white;
  padding: 30px 20px;
  text-align: center;
}

.footer__header {
  margin-bottom: 20px;
}

.footer__icons {
  width: 15%;
  margin: 0 auto;
}

@media screen and (max-width:650px) {
  .footer__icons {
    width: 25%;
  }
}

@media screen and (max-width:400px) {
  .footer__icons {
    width: 40%;
  }
}


.footer__icon:hover {
  transition: all 0.3s linear;
  color: rgb(185, 185, 185);
}


.whatsapp-icon {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

.whatsapp-icon:hover {
  color: rgba(151, 212, 37, 0.425);
}