/* Aplicar fuentes */
body {
    font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

/* Colores específicos de Cocomun */
:root {
    --cocomun-blue-dark: #004E92;
    --cocomun-blue-medium: #1D71B8;
    --cocomun-blue-light: #A8D0F0;
    --cocomun-gray: #4A4A4A;
}

/* Animación de Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fadeIn {
    animation: fadeIn 1.5s ease-out;
}

/* Animación de Hover para el Header */
nav ul li a {
    transition: all 0.3s ease-in-out;
}
nav ul li a:hover {
    color: var(--cocomun-blue-medium);
}

/* Animación del Menú Móvil */
#hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#hamburger.active span:nth-child(2) {
    opacity: 0;
}
#hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/*services*/

/* Animación de los círculos */
/* Estilo de los círculos con borde punteado */
/* Contenedor del círculo con borde punteado giratorio */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px dashed #004E92;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* La capa giratoria solo para el borde */
.circle::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 3px dashed #004E92;
    border-radius: 50%;
    animation: rotateCircle 8s infinite linear;
}

/* Animación del borde girando */
@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* El ícono dentro del círculo permanece estático */
.icon-container {
    z-index: 1;
    position: relative;
}