.navigation:hover,
.nav-link {
    color: inherit;
    /* Mantener el color por defecto */
    text-decoration: none;
    /* Sin subrayado */
}

.nav-link.active,
.nav-link:hover {
    /*background: #0e428f;
    color: white !important; */
    background: rgb(200 150 80);
    border-radius: 5px;
    color: white !important;
}

.nav-link-2 {
    color: inherit;
    /* Mantener el color por defecto */
    text-decoration: none;
    /* Sin subrayado */
}

.nav-link-2:hover {
    background: rgb(200 150 80);
    color: white !important;
    /*color: rgb(200 150 80) !important;*/
    /*background: rgb(255, 255, 255);*/
}


.navbar {
    padding-top: 0%;
}

.pe-hover:hover {
    cursor: pointer
}

.menu_background {
    background: #e3e3e3;
}

.menu_color {
    color: black;
}

.main_background {
    background: rgb(206, 214, 212);
    background: linear-gradient(rgb(206, 214, 212));
}

.main_color {
    color: #0e428f;
}

.second_background {
    background: #ed6200;
}

.second_color {
    color: #e74e0d;
}


.menu {
    border-bottom: 1pt solid #0e428f;
}

.main_border:hover {
    border: var(--bs-card-border-width) solid #86b7fe;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}



/* Estilo inicial de la imagen */
.img-container {
    overflow: hidden;
    /* Para ocultar partes de la imagen que se salgan del contenedor */
}

.img-zoom {
    transition: transform 1s;
    /* Agrega una transición suave al efecto de zoom */
}

/* Al pasar el mouse sobre la imagen, aplicar un zoom */
.img-container:hover .img-zoom {
    transform: scale(1.05);
    /* Ajusta el valor según tus necesidades para el nivel de zoom deseado */
}


.swiper-button-next,
.swiper-button-prev {
    background-color: white;
    background-color: rgba(255, 255, 255, 0.5);
    right: 1px;
    padding-left: 15px;
    padding-right: 15px;
    color: #000 !important;
    fill: black !important;
    stroke: black !important;
    font-size: 20px;
}

.form-color {
    height: 38px;
}

.notaria-init-1 {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Asegura que el contenedor tenga altura completa */
    overflow: hidden;
    /* Evita el desbordamiento */
}

.notaria-init-2 {
    background-image: url('/img/notarydocument2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: brightness(40%);
    z-index: -1;
    /* Asegura que la imagen de fondo esté detrás del contenido */
    animation: kenburns-top 5s ease-out both;
}

@keyframes kenburns-top {
    0% {
        transform: scale(1) translateY(0);
        transform-origin: 50% 16%;
    }

    100% {
        transform: scale(1.25) translateY(-15px);
        transform-origin: top;
    }
}

.content {
    position: relative;
    z-index: 1;
    /* Asegura que el contenido esté encima del fondo */
    height: 100%;
    /* Opcional: Asegura que el contenido tenga la misma altura que el contenedor */
    display: flex;
    align-items: center;
    /* Centra verticalmente el contenido */

}

.titulo {
    color: rgb(10 50 40);
}

.boton {
    background-color: rgb(200 150 80);
    color: white
}

.boton:hover {
    /*background: #0e428f;
    color: white !important; */
    background: rgb(226, 182, 121);
    border-radius: 5px;
    color: black !important;
}

.card-1 {
    background-color: rgb(206, 214, 212);
    height: 100%;
}

.card-2 {
    background-image: url('/img/fondo6.jpg');
    background-size: cover;
    /* Ajusta la imagen para que cubra todo el contenedor */
    background-position: center;
    /* Centra la imagen */
    height: 400px;
    /* Establece la altura del contenedor */
    color: white;
    /* Cambia el color del texto si es necesario */
}

.card-3 {
    background-image: url('/img/fondo10.jpg');
    background-size: cover;
    /* Ajusta la imagen para que cubra todo el contenedor */
    background-position: center;
    /* Centra la imagen */
    height: 400px;
    /* Establece la altura del contenedor */
    color: white;
    /* Cambia el color del texto si es necesario */

}

@media (max-width: 768px) {

    .card-2,
    .card-3 {
        height: 550px;
        /* Altura para pantallas pequeñas */
        background-position: right -150px bottom;
    }

}

.fondo-1 {
    background-color: rgb(206, 214, 212);
}

.input-1 {
    font-family: "SF Pro";
    padding: 0.875rem;
    font-size: 1rem;
    border: 1.5px solid #000;
    border-radius: 0.5rem;
    outline: none;
    transition: ease 0.25s;
}

.input-1:focus {
    border: 1.5px solid #000;
    box-shadow: 5.5px 3px 0 rgb(200 150 80)
}

.slide-in-bottom {
    animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-bottom {
    0% {
        transform: translateY(1000px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.line-1 {
    border: none;
    /* Elimina el borde por defecto */
    height: 3px;
    /* Grosor de la línea */
    background: #000000;
    /* Color de la línea */
    width: 60%;
    /* Ancho de la línea, puedes ajustar según prefieras */
    margin: 10px auto;
    /* Espacio arriba y abajo, y centra la línea */
}

.tracking-in-expand {
    animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }
}

.text-focus-in {
    animation: text-focus-in 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes text-focus-in {
    0% {
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

.card-5 {
    min-height: 200px;
    border-radius: 20px;
    background: rgb(210, 211, 195);
    position: relative;
    padding: 1rem;
    border: 2px solid #c3c6ce;
    transition: 0.5s ease-out;
    overflow: visible;
}

.card-5-details {
    color: black;
    height: 100%;
    gap: .5em;
    display: grid;
    place-content: center;
}

/*Hover*/
.card-5:hover {
    border-color: rgb(200 150 80);
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.card-5-boton {
    align-self: center;
    /* Centrar el botón horizontalmente */
    margin-top: auto;
    /* Mueve el botón al final */
}

.espaciado li {
    margin-bottom: 10px;
    /* O padding-bottom */
}

.dropdown-menu {
    width: 400px;
    /* Ancho para pantallas grandes */
}

@media (max-width: 767.98px) {

    /* Para pantallas pequeñas (menor a md) */
    .dropdown-menu {
        width: 100%;
        /* O el ancho que desees, por ejemplo, 100% */
    }
}



.completed-tab {
    background-color: #28a745;
    /* Fondo verde */
    color: white;
    /* Texto blanco */
    border: 2px solid #007bff;
    /* Borde azul */
}

.error-message {
    color: red;
    font-size: 14px;
    /* Opcional, para ajustar el tamaño del texto */
}


/* Contenedor principal */
.timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Contenedor de cada ítem del timeline */
.timeline-item-container {
    display: flex;
    align-items: center;
    position: relative;
    /* Ajusta el ancho del espacio entre los elementos */
}

/* Botón del timeline */
.timeline-item {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    z-index: 1;
    /* Asegura que los botones estén sobre las líneas */
}

/* Botón activo */
.timeline-item.active {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

/* Botón completado */
.timeline-item.bg-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

/* Conector entre botones */
.timeline-connector {
    height: 4px;
    background-color: #ccc;
    flex: 1;
    /* La línea ocupa el espacio entre los botones */
    z-index: 1;
}

/* Conector completado */
.timeline-connector.completed {
    background-color: #28a745;
}

/* Eliminar espacio en el último elemento */
.timeline-item-container:last-child .timeline-connector {
    display: none;
    /* No mostrar el conector después del último botón */
}

.image-container {
    background-color: rgb(255, 94, 0);
    /* Color de fondo */
    color: white;
    /* Color del texto */
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    position: relative;
}


/* styles.css */
.subrayado {
    position: relative;
    display: inline-block;
    text-decoration: underline;
    /* Primer subrayado */
}

.tamanio {
    width: 850px;
    margin: 0 auto;
}

.text-custom {
    color: #172a58;
}



