/* Estilo del contenedor de las tarjetas */
.templatemo-project-gallery {
    display: flex; /* Utiliza flexbox para organizar las tarjetas */
    flex-wrap: wrap; /* Permite que las tarjetas se ajusten al tamaño de la pantalla */
    justify-content: center; /* Centra las tarjetas horizontalmente */
    gap: 20px; /* Espacio de 20px entre las tarjetas */
    padding: 10px; /* Un poco de padding alrededor del contenedor */
}

/* Estilo de las tarjetas */
.card {
    width: 250px;
    height: 150px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 15px; /*Email*/
    text-align: center;
    margin-bottom: 20px;
    flex-shrink: 0;
    flex-grow: 1;
    max-width: 250px;
    min-width: 200px;
}


/* Efecto hover sobre las tarjetas */
.card:hover {
    transform: translateY(-10px); /* Efecto de elevación al pasar el mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Estilo del contenido dentro de las tarjetas */
.card-body {
    padding: 15px; /* Espaciado interno */
}

/* Títulos dentro de las tarjetas */
.card-title {
    font-size: 2rem; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    color: #ff6a00; /* Naranja */
    margin-bottom: 10px; /* Espaciado debajo del título */
}

.canvas {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: white;
    padding: 20px;
}

/* Subtítulo de las tarjetas */
.card-subtitle {
    font-size: 1rem; /* Tamaño de fuente para subtítulo */
    color: #6c757d; /* Gris suave */
    margin-bottom: 10px; /* Espaciado debajo del subtítulo */
}

/* Estilo de los enlaces dentro de las tarjetas */
.card-link {
    color: #007bff; /* Azul */
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline; /* Subrayado en hover */
}

/* Media query para pantallas más pequeñas */
@media (max-width: 767px) {
    /* Ajustamos para pantallas más pequeñas, como móviles */
    .templatemo-project-gallery {
        justify-content: center; /* Aseguramos que estén centradas */
        gap: 10px; /* Reducimos el espacio entre tarjetas */
    }

    .card {
        width: 100%; /* Las tarjetas ocupan el 100% de ancho en pantallas pequeñas */
        max-width: 18rem; /* Aseguramos que no crezcan más allá de 18rem */
    }
}

@media (max-width: 992px) {
    /* Ajustamos para tablets, aseguramos que se acomoden en 3 columnas */
    .templatemo-project-gallery {
        justify-content: space-around; /* Distribuye el espacio entre las tarjetas */
    }
    .card {
        flex: 1 1 calc(33.33% - 20px); /* Cada tarjeta ocupará el 33.33% de la fila, con un pequeño margen */
    }
}
.mi-parrafo{
    line-height: 1.5;
    margin: 10px;
    color: white;
}

.navbar-nav > li > a {
    font-size: 40px; 
  }

  .navbar-brand img {
    max-height: 120px; 
    width: auto; 
    object-fit: contain; /* Ajusta el contenido dentro del contenedor */
}


@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 40px; /* Cambia para pantallas pequeñas */
    }
}

.navbar.navbar-fixed-top {
    background-color: #6e5656; /* Color negro */
    background-opacity: 2; /* Transparencia opcional */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para un toque elegante */
    z-index: 999; /* Asegúrate de que la barra esté encima de otros elementos */
}