body {
    font-family: 'Courier New', Courier,;
}

header {
    background-color: #343a40;
}
.custom-header {
    position: relative;
    overflow: hidden; /* Para evitar que los elementos salgan del contenedor */
    color: white;
}

.rain-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Para que los elementos de lluvia no interfieran con la interacción del usuario */
}

.rain-code, .circuit-line {
    position: absolute;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    color: lime;
    opacity: 0.9;
}

@keyframes fall {
    0% {
        top: -50px;
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

.icon-box {
    margin-bottom: 30px;
    text-align: center;
}

.icon-box h4 {
    margin-top: 15px;
    font-size: 1.2em;
}

.icon-box p {
    font-size: 1em;
    color: #555;
}

.progress-circle {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.progress-circle .circle {
    width: 100%;
    height: 100%;
    stroke-width: 10;
    fill: none;
}

/* Asegurando que el texto quede centrado dentro del círculo */
.progress-circle .progressbar-text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container {
    margin-top: 50px;
}

.row {
    display: flex;
    justify-content: space-between;
}
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Asegura que los elementos dentro de la tarjeta estén distribuidos */
    height: 100%;
    padding: 15px; /* Espaciado interno para no ver todo apretado */
    background-color: #fff; /* Fondo blanco para la tarjeta */
}

.project-img {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho disponible */
    max-width: 200px; /* Limita el tamaño de la imagen */
    height: auto;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    margin: 0 auto 15px; /* Centra la imagen horizontalmente y agrega un margen inferior */
}

.card-title {
    font-size: 1.2rem; /* Aumenta el tamaño del título para que sea más visible */
    margin-bottom: 10px; /* Agrega espacio entre el título y la descripción */
}

.card-text {
    font-size: 1rem; /* Ajusta el tamaño de la descripción */
    margin-bottom: 15px; /* Agrega espacio entre la descripción y el botón */
}

.btn {
    align-self: center; /* Centra el botón dentro de la tarjeta */
    margin-top: auto; /* Asegura que el botón se quede en la parte inferior de la tarjeta */
}