.hero-wrap {
    background-image:
        url('../images/bg_1.webp');
}

.nav-brand{
    /*padding-top: 1.5rem;
    padding-bottom: 1.5rem;*/
    width: 190px;
}

#logo_tiktok_white {
    fill: white;
}

#nameinput::placeholder {
    color: gray !important;
}

#nameinput::-webkit-input-placeholder {
    color: gray !important;
}

#nameinput::-moz-placeholder {
    color: gray !important;
}

#nameinput::-ms-input-placeholder {
    color: gray !important;
}

#emailinput::placeholder {
    color: gray !important;
}

#emailinput::-webkit-input-placeholder {
    color: gray !important;
}

#emailinput::-moz-placeholder {
    color: gray !important;
}

#emailinput::-ms-input-placeholder {
    color: gray !important;
}

#phoneinput::placeholder {
    color: gray !important;
}

#phoneinput::-webkit-input-placeholder {
    color: gray !important;
}

#phoneinput::-moz-placeholder {
    color: gray !important;
}

#phoneinput::-ms-input-placeholder {
    color: gray !important;
}

.overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    opacity: 1;
    background: rgb(2,0,36);
    background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.30490194368763126) 31%);
    background: -moz-linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.30490194368763126) 31%);
    background: -webkit-linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.30490194368763126) 31%);
    background: -o-linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.30490194368763126) 31%);
    background: -ms-linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.30490194368763126) 31%);
}

.login-wrap{
    padding: 0px !important;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

/* The Modal (background) */
.modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content2 {
    background-image: url('../images/flayers/2x1_NAVIDAD7.webp');
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
    margin: auto;
    padding: 10px;
    margin-top: -40px;
    height: inherit;
    width: 40%;
}

.address p {
    margin-bottom: -0.1rem;
    font-size: 14px;
}

.address strong {
    font-size: 15px;
}

/*
.navbar > .container{
     margin-top: -20px !important; 
}
*/

.boton-imagen-texto {
            display: flex;
            align-items: center;
            width: 100%;
            height: 60px;
            background-color: #f8f9fa; /* Fondo blanco */
            border: 1px solid #ced4da; /* Borde sutil */
            border-radius: 5px;
            overflow: hidden; /* Para que el efecto no se salga del borde */
            transition: background-color 0.3s ease, filter 0.3s ease; /* Transición suave */
            filter: grayscale(100%); /* Efecto desactivado inicial */
            cursor: pointer;
        }

        .boton-imagen-texto:hover {
            filter: grayscale(0%); /* Desactivar el efecto al pasar el cursor */
            background-color: #e9ecef; /* Un ligero cambio de fondo al pasar el cursor */
        }

        .boton-imagen {
            height: 100%;
            padding-left: 10px; /* Espacio entre el borde y la imagen */
            display: flex;
            align-items: center;
        }

        .boton-imagen img {
            height: 40px; /* Ajusta el tamaño de la imagen */
            width: auto;
            display: block; /* Evita espacio extra debajo de la imagen */
        }

        .boton-texto {
            flex-grow: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Texto a la derecha */
            padding-right: 10px; /* Espacio entre el texto y el borde */
            font-size: 1rem; /* Tamaño de fuente base */
        }

        .contenedor-botones {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 20px;
            align-items: center;
        }

        .mensaje-bienvenida {
            text-align: center;
            font-size: 1.2rem; /* Un tamaño de fuente un poco mayor */
            color: #343a40; /* Color de texto un poco más oscuro */
            padding-top: 10px;
            margin-bottom: -8px;
        }

        .boton-con-imagen {
            display: flex;
            justify-content: center; /* Centrar el texto horizontalmente */
            align-items: center; /* Centrar el texto verticalmente */
            width: 100%;
            height: 100px;
            background-color: #f8f9fa; /* Fondo de respaldo */
            border: 1px solid #ced4da;
            border-radius: 5px;
            overflow: hidden; /* Importante para el recorte */
            transition: background-color 0.3s ease, filter 0.3s ease;
            filter: grayscale(100%);
            cursor: pointer;
            color: #6c757d; /* Color del texto "desactivado" */
            font-size: 1rem;
            position: relative; /* Necesario para posicionar la imagen absolutamente */
        }

        .boton-con-imagen:hover {
            filter: grayscale(0%);
            background-color: #e9ecef;
            color: #007bff; /* Cambiar el color del texto al pasar el cursor */
        }

        .boton-con-imagen img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Centrar la imagen */
            width: auto;
            height: 100%; /* La altura manda para no estirar verticalmente */
            /* Si la imagen es más ancha que el botón, se recortará horizontalmente */
            object-fit: cover; /* Recorta la imagen manteniendo la proporción */
            object-position: center; /* Centra el punto de enfoque del recorte */
            width: 100%;
        }

@media (max-width: 991.98px) {
    .modal-content2 {
        width: 100%;
    }
}

.col-md-7.ftco-animate.fadeInUp.ftco-animated {
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  height: 100%;
}