@import url(lato/Lato-Regular.ttf);

body {
    font-family: "Lato", sans-serif;
    background-color: #f3f3f3;
}

.bg-login-image {
    background: url("img/logo_login.svg");
    background-position: center;
}

.bg-gradient-primary {
    background-color: #e79683;
    background-image: linear-gradient(180deg, #ff5900 10%, #a35a2f 100%);
    background-size: cover;
}

.btn-primary {
    color: #fff;
    background-color: #060607;
    border-color: #0c0c0e;
}

.btn:hover {

    background-color: #060607a6;

}

#card-login {
    top: 40px !important;
}

#card-index {
    top: 60px !important;
}

#color {
    background-color: #7c6853;
}

p {
    color: #5b3a29;
}

#top_u {
    margin-top: 10px;
}


.carousel-caption {
    backdrop-filter: blur(10px);
}

.accordion-button:not(.collapsed) {
    background-color: #611232;
    color: white;
}

.carousel-indicators [data-bs-target] {
    background-color: #611232;
}

.dropdown-item {
    color: #611232;
}

.alert-primary {
    --bs-alert-color: #f8f9fa;
    --bs-alert-bg: #611232;
    --bs-alert-border-color: #611232;

}

.table-danger {
    --bs-table-color: white;
    --bs-table-bg: #611232;
    --bs-table-border-color: #c6acae;
    --bs-table-striped-bg: #eccccf;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #611232;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #611232;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgb(207, 171, 102) !important;
}

.curva {

    background: linear-gradient(96deg, #5b3a29 35.33%, #7c6853 100.59%);
    border-radius: 0 0 50% 50% / 7% 7%;
}

.curva2 {
    height: 200px;
    background-color: #970E48;
    background-image: linear-gradient(180deg, #611232 10%, #970E48 100%);
    background-size: cover;
    border: #611232;
    border-radius: 0 0 50% 50% / 7% 7%;
}

#two,
#four {
    background-color: #f8f9fa;
}

.tag-button {
    display: block;
    padding: 8px 16px;
    border: none;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background-color: #9B2247;
    color: white;
    border-radius: 20px;
    font-weight: bold;
    font-size: 18px;
    text-decoration: underline;
    width: 80%;
}

a {
    background-color: transparent;
    text-decoration: none;
}

/* 1. Define la animación */
@keyframes aparecerDesdeAbajo {
    0% {
        opacity: 0;
        transform: translateY(50px);
        /* Empieza abajo */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        /* Termina en su posición normal */
    }
}

/* 2. Aplica la animación a tu imagen */
#anima {
    animation-name: aparecerDesdeAbajo;
    animation-duration: 1s;
    /* Dura 1 segundo */
    animation-timing-function: ease-out;
    /* Suaviza al final */
    animation-fill-mode: forwards;
    /* Mantiene el estado final */
    /* Si quieres que se aplique al cargar la página, puede que necesites un poco de JS para esperar a que cargue la imagen */
}

.card:hover,
#logo:hover {
    animation-name: aparecerDesdeAbajo;
    animation-duration: 1s;
    /* Dura 1 segundo */
    animation-timing-function: ease-out;
    /* Suaviza al final */
    animation-fill-mode: forwards;
}

.alert-secondary {
    --bs-alert-color: #f3f2f2;
    --bs-alert-bg: #5b3a29;
    --bs-alert-border-color: #7c6853;
    --bs-alert-link-color: #e7e4e5;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        margin-left: 45%;
    }
}