@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Caveat:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.percentage {
    
    font-weight: bold;
    color: #B4D335;
    line-height: 1;
}

.year {
    
    font-weight: bold;
    color: black;
    line-height: 1;
}

.counterrr{
    animation: counter 4s forwards alternate ease-in-out;
  counter-reset: num var(--num);
  
}
.counterrr::after {
  content: counter(num) "%";
}

.showw{
    opacity: 1; /* Oculta el elemento inicialmente */
}

.carousel-control-prev,
.carousel-control-next {
    
    height: 30px; /* Reduce el alto del botón */
    top: 50%; /* Mantiene las flechas centradas verticalmente */
    transform: translateY(-50%);
    background: none; /* Elimina cualquier fondo */
}

#videoCarousel {
    margin-top: 0;  /* Reduce el espacio superior */
    margin-bottom: 0; /* Reduce el espacio inferior */
}

.carousel-inner {
    padding: 0; /* Elimina espacios dentro del contenido del carrusel */
}




/* Animaciones */

@keyframes show {
    from {
        opacity: 0;
        scale: 25%;
    }

    to {
        opacity: 1;
        scale: 100%;
    }
}

@keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 97;
    }
}

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.img-animation {
    view-timeline-name: --image;
    view-timeline-axis: block;

    animation-timeline: --image;
    animation-name: show;

    animation-range: entry 10% cover 40%;

   }


   @media (max-width: 768px) {
    .map-container {
      width: 100% !important; /* Asegura que ocupe todo el ancho */
    }
}