#fx2,
#fx2b {
  /* margin: 5% 0 3% 0; */
  background: url(../img/fundo-nota-capes.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 6% 0;
}

.card-nota {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10%;
}

.txt-nota p {
  color: white;
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 0;
}

.txt-nota h3 {
  color: #9abcde;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
}

.txt-nota {
  text-align: center;
}

.img-nota img {
  width: 80%;
}

/* versao 2: fx2b */
.roda-bolinha {
  width: 100px;
  height: 100px;
  position: relative;
  box-shadow: 0 0 0 5px white;
  border-radius: 50%;
  align-content: center;
}

.roda-bolinha::after {
  content: "";
  position: absolute;
  display: block;
  width: 108%;
  height: 108%;
  border-radius: 50%;
  border: 4px dashed white;
  z-index: 1;
  top: -4px;
  left: -4px;
}

.roda-bolinha:hover {
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.2s;
}

#fx2b .txt-nota {
  justify-items: center;
  /* margin-bottom: 0%; */
}

#fx2b .txt-nota h3 {
  margin-top: 15%;
}


.roda-bolinha:hover::after {
  animation: spin 10s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}