.toast2 {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fd1414;
    color: white;
    padding: 15px;
    border-radius: 5px;
    z-index: 1;
}

.login-button {
    margin-left: auto; /* Coloca el botón a la derecha */
}

.custom-button {
    margin-left: auto; 
    background-color: #77787900;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.custom-button img {
    margin-right: 10px; /* Espacio entre el ícono y el texto */
}


/* Estilos para el botón de menú en pantallas pequeñas */
.menu-btn {
    display: none;
}

/* Estilo para el nombre de la web */


.overlay-image {
    position: absolute;
    /* Posición absoluta con respecto al body */
    width: 100px;
    /* Ancho de la imagen superpuesta */
    height: 100px;
    /* Altura de la imagen superpuesta */
    /* Establece la posición en la pantalla (ajusta los valores según lo desees) */
    top: 50px;
    left: 50px;
    /* Puedes superponer múltiples imágenes y ajustar sus posiciones */
}

/* Estilo para otra imagen superpuesta */
.overlay-image2 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 200px;
    left: 200px;
}

/* Estilo para las secciones */


.card {
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;

    color: white;
    background-color: rgba(148, 6, 6, 0.884);;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.card2 {
    border-bottom-right-radius: 30px;
    border-top-left-radius: 30px;
    
    color: white;
    background-color:  rgba(148, 6, 6, 0.884);;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}







.content {
 
    margin-top: 140px;
}



.scroll-to-top button:hover {
    background-color: #9900ffbd;
}

/* Consulta de medios para pantallas pequeñas (móviles) */
@media screen and (max-width: 1060px) {


    main{
        margin-top: 50px;
    }

    .caja__trasera{
        max-width: 350px;
        height: 300px;
        flex-direction: column;
        margin: auto;
    }

    .caja__trasera div{
        margin: 0px;
       /* position: absolute; */
    }


    /*Formularios*/

    .contenedor__login-register{
        top: -0px;
        left: -5px;
        margin: auto;
        margin-top: 300px;
    }

    .contenedor__login-register form{
        
        padding: 10px 30px;
        position: relative;
    }



    
 





    

    .menu-btn {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        cursor: pointer;

    }




    .additional-background {
        background-image: url('../images/campo.jpg');
        /* Ruta de la imagen de fondo adicional */
        background-position: center right;
        /* Ajusta la posición según tus necesidades */
        background-repeat: no-repeat;
        /* Evita que la imagen se repita */

        background-size: cover;
        /* Ajusta el tamaño del fondo para cubrir la ventana */
        position: fixed;
        /* Fija el elemento en la ventana del navegador */
        margin-right: 10px;
        margin-top: -300px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        /* Coloca el fondo adicional detrás del contenido */
        background-size: 80%;
    }

    .additional-background2 {
        background-image: url('../images/campc.jpg');
        /* Ruta de la imagen de fondo adicional */
        background-position: center left;
        /* Ajusta la posición según tus necesidades */
        background-repeat: no-repeat;
        /* Evita que la imagen se repita */
       
        background-size: cover;
        /* Ajusta el tamaño del fondo para cubrir la ventana */
        position: fixed;
        /* Fija el elemento en la ventana del navegador */
        margin-left: 30px;
        margin-top: 100px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        /* Coloca el fondo adicional detrás del contenido */
        background-size: 80%;
    }

    .caja__trasera div{
       margin-top: -100px;
        color: white;
        transition: all 500ms;
    }
    
    .main{
    display: flex;
    width: 70%;
    padding: 20px;
    margin: auto;
    
    justify-content: center;
}

.contenedor__todo{
    width: 100%;
    max-width: 800px;
  margin-top: 120px;
    position: relative;
}

    

}

@media screen and (min-width: 1060px) {
    
    main{
    display: flex;
    width: 70%;
    padding: 20px;
    margin: auto;
    margin-top: 120px;
    justify-content: center;
}

.contenedor__todo{
    width: 100%;
    max-width: 800px;
  
    position: relative;
}

    .caja__trasera div{
        margin: 100px 40px;
        color: white;
        transition: all 500ms;
    }
    
    .contenedor__login-register form{
        padding: 80px 30px;
        position: relative;

    }


 

 
    .additional-background {
        background-image: url('../images/campo.jpg');
        /* Ruta de la imagen de fondo adicional */
        background-position: center right;
        /* Ajusta la posición según tus necesidades */
        background-repeat: no-repeat;
        /* Evita que la imagen se repita */

        background-size: cover;
        /* Ajusta el tamaño del fondo para cubrir la ventana */
        position: fixed;
        /* Fija el elemento en la ventana del navegador */
        margin-right: 100px;
        margin-top: -200px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        /* Coloca el fondo adicional detrás del contenido */
        background-size: 40%;
    }

    .additional-background2 {
        background-image: url('../images/campc.jpg');
        /* Ruta de la imagen de fondo adicional */
        background-position: center left;
        /* Ajusta la posición según tus necesidades */
        background-repeat: no-repeat;
        /* Evita que la imagen se repita */
        background-attachment: fixed;
        /* Fija el fondo en su lugar */
        background-size: cover;
        /* Ajusta el tamaño del fondo para cubrir la ventana */
        position: fixed;
        /* Fija el elemento en la ventana del navegador */
        margin-left: 100px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        /* Coloca el fondo adicional detrás del contenido */
        background-size: 40%;
    }

    
  
}





.caja__trasera{
    width: 100%;
   
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  
    background-color: rgb(203 90 39 / 33%);

}



.caja__trasera div p,
.caja__trasera button{
    margin-top: 30px;
}

.caja__trasera div h3{
    font-weight: 400;
    font-size: 26px;
}

.caja__trasera div p{
    font-size: 16px;
    font-weight: 300;
}

.caja__trasera button{
    padding: 10px 40px;
    border: 2px solid #fff;
    font-size: 14px;
    background: transparent;
    font-weight: 600;
    cursor: pointer;
    color: white;
    outline: none;
    transition: all 300ms;
}

.caja__trasera button:hover{
    background: #fff;
    color: rgba(148, 6, 6, 0.884);;
}
.contenedor__login-register{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 380px;
    position: relative;
    top: -150px;
    left: 10px;

    /*La transicion va despues del codigo JS*/
    transition: left 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
/*Formularios*/
@media screen and (max-width: 1060px) {
  .contenedor__login-register{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 380px;
    position: relative;
    top: -165px;
    left: 10px;

    /*La transicion va despues del codigo JS*/
    transition: left 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}  
}

@media screen and (min-width: 1061px) {
  .contenedor__login-register{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 380px;
    position: relative;
    top: -205px;
    left: 10px;

    /*La transicion va despues del codigo JS*/
    transition: left 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}  
}



.contenedor__login-register form{
   
   
    background: white;
    position: absolute;
    border-radius: 20px;
}

.contenedor__login-register form h2{
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
    color:   rgb(203 90 39);
}

.contenedor__login-register form input{
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    border: none;
    background: #F2F2F2;
    font-size: 16px;
    outline: none;
}

.contenedor__login-register form button{
    padding: 10px 40px;
    margin-top: 40px;
    border: none;
    font-size: 14px;
   
    background: rgb(203 90 39);
    font-weight: 600;
    cursor: pointer;
    color: white;
    outline: none;
}




.formulario__login{
    opacity: 1;
    display: block;
}
.formulario__register{
    display: none;
}
    .modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Sits above other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); /* Black with opacity */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    text-align: center;
    border-radius: 20px
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.button {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background-color: rgba(148, 6, 6, 0.884);
    color: white;
    border: none;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}