/* ATIVIDADE PRÁTICA – PÁGINA GENÉRICA COM HTML E CSS */


* {

  box-sizing: border-box;

}


body {

  margin: 0;

  font-family: "Trebuchet MS", Arial, sans-serif;

  background-color: #d1c2ad;

  color: #222222;

  line-height: 1.6;

}


/* Cabeçalho com título principal */

.cabecalho {

    background-size: cover;

  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
  url("kno.jpeg");

  color: #ffffff;

  text-align: center;

  padding: 130px 20px;

  background-position: center;

}


.cabecalho h1 {

  margin: 0;

  font-size: 55px;

  text-shadow: 0 0 12px #e2ceab;

  animation: bilho 3s infinite alternate;

}


.cabecalho p {

  font-size: 20px;

  margin-top: 10px;

  color: #e2ceab;

}


/* Menu simples */

.menu {

  background-color: #1c243c;

  padding: 15px;

  text-align: center;

  border-bottom: 5px solid #e2ceab;

  position: sticky;

  top: 0;

  backdrop-filter: blur(8px);

  z-index: 999;

}


.menu a {

  color: #ffffff;

  text-decoration: none;

  margin: 0 12px;

  font-weight: bold;

  padding: 8px 12px;

  border-radius: 8px;

  transition: 0.3s;

}



/* Seções com margens e espaçamentos */

.secao {

 max-width: 1050px;

  margin: 35px auto;

  padding: 35px;

  background: #1c243c;

  border-radius: 18px;

  border: 2px solid #8a9490;

  box-shadow: 0 0 20px #8a9490;

  animation: subir 1s ease;

}


.secao h2 {

  color: #e2ceab;

  font-size: 30px;

  margin-top: 0;

  text-shadow: 0 0 12px #e2ceab;

}


.secao p {

  font-size: 18px;

  color: #ffffff;

}


/* Cor diferente e borda lateral */

.secao-destaque {

  background-color: #12355b;

  border-left: 8px solid #e2ceab;

}


/* Imagem com borda arredondada e sombra */

.imagem-principal {

  width: 100%;

  max-width: 850px;

  display: block;

  margin: 25px auto;

  border-radius: 16px;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);

}


/* Layout com Flexbox */

.container-cards {

  display: flex;

  gap: 20px;

  margin-top: 25px;

}


.card {

  flex: 1;

  background-color: #12355b;

  border: 1px solid #dddddd;

  border-radius: 12px;

  padding: 22px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

  transition: 0.3s;

}


.card h3 {

  color: #e2ceab;

  font-size: 24px;

}


/* Efeito :hover nos cards */

.card:hover {

  transform: translateY(-6px);

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20);

  border-color: #f28c28;

}


/* Botão */

.botao {

  display: inline-block;

  background-color: #2e8b57;

  color: #ffffff;

  text-decoration: none;

  padding: 12px 22px;

  border-radius: 8px;

  font-weight: bold;

  margin-top: 15px;

  transition: 0.3s;

}


.botao:hover {

  background-color: #12355b;

  transform: scale(1.05);

}


/* Rodapé */

.rodape {

  background-color: #12355b;

  color: #ffffff;

  text-align: center;

  padding: 25px;

  margin-top: 40px;

}


/* Media query para telas pequenas */

@media (max-width: 700px) {

  .cabecalho h1 {

    font-size: 32px;

  }


  .cabecalho p {

    font-size: 18px;

  }


  .menu a {

    display: block;

    margin: 8px auto;

    width: 80%;

  }


  .secao {

    margin: 20px 12px;

    padding: 22px;

  }


  .secao h2 {

    font-size: 26px;

  }


  .container-cards {

    flex-direction: column;

  }

}

/* From Uiverse.io by nikk7007 */ 
.bubbles {
  --c1: #1c243c; /* Recommendation: same background color */
  --c2: #e2ceab;
  --size-letter: 15px;
  padding: 0.5em 1em;
  font-size: var(--size-letter);

  background-color: transparent;
  border: calc(var(--size-letter) / 6) solid var(--c2);
  border-radius: 0.2em;
  cursor: pointer;

  overflow: hidden;
  position: relative;
  transition: 300ms cubic-bezier(0.83, 0, 0.17, 1);
}

.bubbles > .text {
  font-weight: 700;
  color: var(--c2);
  position: relative;
  z-index: 1;
  transition: color 700ms cubic-bezier(0.83, 0, 0.17, 1);
}

.bubbles::before {
  top: 0;
  left: 0;
}

.bubbles::after {
  top: 100%;
  left: 100%;
}

.bubbles::before,
.bubbles::after {
  content: "";
  width: 150%;
  aspect-ratio: 1/1;
  scale: 0;
  transition: 1000ms cubic-bezier(0.76, 0, 0.24, 1);

  background-color: var(--c2);
  border-radius: 50%;

  position: absolute;
  translate: -50% -50%;
}

.bubbles:hover {
  & > span {
    color: var(--c1);
  }
  &::before,
  &::after {
    scale: 1;
  }
}

.bubbles:active {
  scale: 0.98;
  filter: brightness(0.9);
}


ul {
  list-style: none;
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}

.example-2 .icon-content a[data-social="whatsapp"] .filled,
.example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip {
  background-color: #128c7e;
}

.example-2 .icon-content a[data-social="facebook"] .filled,
.example-2 .icon-content a[data-social="facebook"] ~ .tooltip {
  background-color: #3b5998;
}
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  );
}
.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
  background-color: #ff0000;
}