/*--------------------------------------------barra navegación---------------------------------------*/
.madimi-one-regular {
  font-family: "Madimi One", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  }

  *,
  *::before,
  *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  }


  .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color:#207483;
  padding: 0px 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  }
  .header .logo {
      height: auto; /* Ajusta automáticamente la altura según el ancho */
      width: 200px;  /* Ajusta el ancho a un valor más adecuado para móviles */
      max-width: 30%; /* Limita el tamaño máximo para evitar que se haga muy grande en algunas pantallas */
      transition: all 0.3s ease; /* Añade una transición suave cuando se cambia el tamaño */
  }
  .navigation ul{
  list-style: none;
  }
  .header .navigation ul li {
  float: left;
  position: relative;
  }

  .header .navigation ul li a {
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  display: block;
  transition: all 0.3s ease;
  }
/*--------------------text color of the main menu bar--------------------------------*/
  .header .navigation ul li a:hover {
  background-color: #F5F1E0;
  color: black;
  display: block;
  }
/*-------------------------first level of the menu-----------------------------------*/
  .header .navigation ul li ul {
  position: absolute;
  right: 0;
  width: 300px;
  background-color: #5BC2BC;
  display: none;
  }

  .header .navigation ul li ul li a {
  font-size: 15px;
  text-transform: capitalize;
  }

  .header .navigation ul li ul li ul {
  background-color: #83D8C1;
  position: absolute;
  top: 0;
  right: 300px;
  }

  .header .navigation ul li ul li ul li ul {
    background-color: #FCCF88;
  }

  .header .navigation ul li ul li{
  width: 100%;
  }

  .header .navigation ul li:hover > ul {
  display: initial;
  }

  #toggle,
  .header label{
  display: none;
  cursor: pointer;
  }

  .menu{
  width: 45px;
  height: 35px;
  }
  @media (max-width: 1500px) { 
    .header label {
        display: initial; 
    }

    .header {
        padding: 20px 10%; /* Establece el padding de la cabecera */
    }

    .header .logo {
        height: auto; /* Ajusta automáticamente la altura según el ancho */
        width: 200px; /* Establece un ancho fijo para el logo */
        max-width: 30%; /* Limita el tamaño máximo del logo para pantallas pequeñas */
        transition: all 0.3s ease; /* Añade una transición suave a los cambios de estilo */
    }

    .header .navigation {
        position: absolute; /* Posiciona el menú de navegación de forma absoluta */
        top: 100%; /* Coloca el menú justo debajo de la cabecera */
        left: 0; /* Alinea el menú a la izquierda */
        right: 0; /* Alinea el menú a la derecha */
        background-color: #207483; /* Establece el color de fondo del menú */
        display: none;  /*Oculta el menú en estado inicial */
    }

    .header .navigation ul li {
        width: 100%; /* Establece el ancho de los elementos de la lista en el menú */
        background-color: #5BC2BC;
    }

    .header .navigation ul li a {
        padding: 5px 30px 8px 10%; /* Añade padding a los enlaces del menú */
    }


    /* Submenús: ocultos por defecto */
    .header .navigation ul li ul {
        position: relative; /* Posiciona los submenús de forma relativa */
        width: 100%; /* Establece el ancho de los submenús */
        left: 0; /* Alinea los submenús a la izquierda */
        display: none; /* Oculta submenús inicialmente */
        max-height: 0; /* Para la animación, inicia en 0 */
        overflow: hidden; /* Oculta el contenido adicional que desborde */
        transition: max-height 0.3s ease; /* Añade una animación suave al cambiar la altura máxima */
    }

    /* Submenús activos (se mostrarán) */
    .header .navigation ul li.active ul {
        display: block; /* Asegura que el submenú se muestre */
        max-height: 300px; /* Ajusta la altura máxima según el contenido esperado */
    }

    /* Submenús secundarios */
    .header .navigation ul li ul li {
        background-color: #83D8C1; /* Establece el color de fondo de los elementos secundarios del submenú */
    }

    .header .navigation ul li ul li ul {
      
        position: relative; /* Posiciona submenús secundarios de forma relativa */
        width: 100%; /* Establece el ancho de los submenús secundarios */
        left: 0; /* Alinea los submenús secundarios a la izquierda */
    }

    .header .navigation ul li ul li ul li ul {
      background-color: #FCCF88;
    }

    /* Mostrar menú principal al hacer clic en el toggle */
    #toggle:checked ~ .navigation {
        display: block; /* Muestra el menú cuando el toggle está activado */
    }
}
/*reciem agregado*/
@media (max-width: 999px) {
  .header label {
    display: initial; 
}

.header {
    padding: 20px 10%; /* Mantiene el padding de la cabecera */
}

.header .logo {
    height: auto; /* Ajusta automáticamente la altura según el ancho */
    width: 200px; /* Establece un ancho fijo para el logo */
    max-width: 30%; /* Limita el tamaño máximo del logo para pantallas pequeñas */
    transition: all 0.3s ease; /* Añade una transición suave a los cambios de estilo */
}

.header .navigation {
    position: absolute; /* Posiciona el menú de navegación de forma absoluta */
    top: 100%; /* Coloca el menú justo debajo de la cabecera */
    left: 0; /* Alinea el menú a la izquierda */
    right: 0; /* Alinea el menú a la derecha */
    background-color: #207483; /* Establece el color de fondo del menú */
    display: none;  /* Oculta el menú en estado inicial */
}

.header .navigation ul li {
    width: 100%; /* Establece el ancho de los elementos de la lista en el menú */
    background-color: #5BC2BC; /* Establece un color de fondo para los elementos de la lista */
}

.header .navigation ul li a {
    padding: 10px 15px; /* Ajusta el padding para más espacio alrededor del texto */
    font-size: 23px; /* Aumenta el tamaño de la fuente para mejor legibilidad */
    color: #fff; /* Color del texto */
    text-align: center; /* Centra el texto dentro de los enlaces */
    display: block;
    transition: all 0.3s ease;
}

/* Cambia el color al pasar el ratón o al seleccionar */
.header .navigation ul li a:hover {
    background-color: #F5F1E0; /* Cambia el color de fondo al pasar el ratón */
    color: black; /* Cambia el color del texto al pasar el ratón */
}

/* Submenús: ocultos por defecto */
.header .navigation ul li ul {
    position: relative; /* Posiciona los submenús de forma relativa */
    width: 100%; /* Establece el ancho de los submenús */
    left: 0; /* Alinea los submenús a la izquierda */
    display: none; /* Oculta submenús inicialmente */
    max-height: 0; /* Para la animación, inicia en 0 */
    overflow: hidden; /* Oculta el contenido adicional que desborde */
    transition: max-height 0.3s ease; /* Añade una animación suave al cambiar la altura máxima */
}

/* Submenús activos (se mostrarán) */
.header .navigation ul li.active ul {
    display: block; /* Asegura que el submenú se muestre */
    max-height: 300px; /* Ajusta la altura máxima según el contenido esperado */
}

/* Submenús secundarios */
.header .navigation ul li ul li {
    background-color: #83D8C1; /* Establece el color de fondo de los elementos secundarios del submenú */
}

.header .navigation ul li ul li a {
    font-size: 20px; /* Ajusta el tamaño de la fuente para los submenús */
    padding: 10px 15px; /* Añade padding a los enlaces del submenú */
}

/* Mostrar menú principal al hacer clic en el toggle */
#toggle:checked ~ .navigation {
    display: block; /* Muestra el menú cuando el toggle está activado */
}
}
/*-----------------------------------------------form-------------------------------------------*/

/*-----------------------------------------------final del form----------------------------------*/

  /* --------------------------------------tamano de las cards de formation------------------------*/
  .contClas {
    grid-template-columns: repeat(2, 1fr); /* Dos tarjetas por fila */
}



/*-----------------------------------------CSS para las tablas view-------------------------------*/

    

/*-------------------------------------------------footer-----------------------------------------*/
.foot_contain {
  background-color: rgba(00, 36, 211, 0.7);
  color: #ffffff;
  padding: 50px 10%;
  display: flex;
  justify-content: space-between;
  text-align: justify;
  position: fixed; /* Fija la barra en la pantalla */
  bottom: 50px; /* Ajusta la altura desde la parte inferior, asegurando que esté por encima del footer */
  z-index: 1000; /* Asegura que la barra esté por encima de otros elementos */
}

.foot_contain p {
  font-size: 20px;
  font-weight: 700;
}

.footer {
  background-color: rgba(00, 36, 211, 0.7);
  width: 100%;
  margin-top: auto; /* Asegura que el footer esté siempre al final de la página */
}

/* Para que la barra con los botones no tape el footer */
.BotContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ccc;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  position: fixed;
  bottom: 50px; /* Ajusta la altura desde el fondo */
  z-index: 1000;
}