#nav{
    margin-top: 0.3%;
    width: 100%;
    border-radius: 20px;
}
#foto{
    border-radius: 20px;
}
parrafo{
  color: white;
  font-size: 60px;
}
.titulo{
    color: white;
    width: 95%;
    margin-left: 3%;
    margin-right: 2.5%;
    margin-top: 10%;
}
@keyframes color {
  0%   { background: #7CF5FF; }
  20%  { background: #00CCDD; }
  40%  { background: #4F75FF; }
  60%  { background: #6439FF; }
  80%  { background: #4F75FF; }
  100% { background: #7CF5FF; }
}

body {
  background: #33CCCC; /* Fallback */
  animation: color 9s infinite linear;
  text-align: center;
  padding: 2em;
}
.card-container {
  display: Flex;
  gap: 1%;
  padding-bottom: 3%;
  background-color: white;
}
.card {
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 0%;
  width: 100%;
}
h1{
  font-size: 100px;
}
svg{
  margin-top: 3%;
}
.all{
  margin-top: 5%;
}
#descripcion{
  background-color: white;
  margin-top: 4%;

}
.accordion{
  margin-top: 5%;
  width: 80%;
  height: 100%;
  margin-left: 10%;
  margin-right: 10%;
}
.fotos{
  display: Flex;
  gap: 6%;
  padding-bottom: 3%;
  width: 70%;
  height: 100%;
  margin-left: 15%;
  margin-right: 15%;
}
.foto{
  color: white;
  padding: 1%;
  text-align: center;
  border-radius: 10px;
  width: 33%;
  height: 100%;
}
.picture{
  border-radius: 100px;
  width: 50%;
  height: 70%;
  clip-path: circle(44% at 50% 50%);
}
.picture:hover{
  filter: invert(0.7);
}
video{
  width: 100%;
  height: 100%;
  margin-top:5%;
  border-radius: 10px;
  margin-left: 15%;
  margin-right: 15%;
  width: 70%;
  height: 70%;
}
.carrusel{
  width: 70%;
  height: 70%; 
}
i:hover{
  color: #00CCDD;
}
footer{
  margin-top: 5%;
}
.descripcion{
  width: 50%;
  height: 100%;
  font-size: 17px;
  margin-right: 2%;
}
.carrusel{
  width: 50%;
  height: 100%;
  border-radius: 70px;
  margin-left: 2%;
}
.carrusela{
  display: flex;
  gap: 3%;
  background-color: white;
}
.nosotros{
  margin-top: 5%;
  font-size: 50px;
  margin-bottom: 3%;
  color:#00CCDD;
  text-align: right;
  margin-right: 15%;
}
.ola{
  margin-top: 0%;
  transform: scaleY(-1);
}
.esperanzas{
  margin-top: 1%;
  display: Flex;
  gap: 5%;
  padding-bottom: 3%;
  background-color: white;
  padding: 2%;
  border-radius: 10px;
}
.final {
  text-align: left;
  margin-top: 5%; 
}
.card-body{
  background-color:white;
  border-radius: 10px;
}
.final h3 {
  color:white; 
  font-size: 40px;
  margin-bottom: 3%;
  margin-top: 7%;
}

.final p {
  line-height: 1.6; 
  color: #ffffff; 
  margin-bottom: 15px; 
}
.corales{
  margin-top: 5%;
  width: 100%;
  display: flex;
  gap: 5%;
}
.coral{
  border-radius: 10px;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color:rgba(255, 255, 255, 0.3);
  margin-bottom: 5%;
}
.final2{
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 10px;
  padding: 2%;
  text-align: left;
  display: flex;
}
.amenaza{
  width: 50%;
  height: 100%;
  font-size: 17px;
  margin-left: 5%;
}
.imagen-coral{
  width: 50%;
  height: 100%;
  margin-left: 15%;
}
#myChart {
  margin: 0 auto; 
  margin-top: 5%;
  background-color:white;
  padding: 1%;
  border-radius: 10px;
  margin-bottom: 3%;
  color: black;
}
.foto-peces{
  width: 50%;
  height: 100%;
}
.peces{
  width: 50%;
  height: 100%;
  margin-left: 15%;
  margin-left: 5%;
  font-size: 17px;
}
.nav-item:hover{
  background-color: rgba(73, 127, 209, 0.212);
  border-radius: 30px;
}