body,html {
    display:grid;
    justify-content: center;

}

body {
    max-width: 1920px;
    
}

.info-bar4 {
    background-color:#fff;
    text-align: center;
    color:#1e4079;
    font-size: 12px;
    padding: 5px 0;
    width: 100%;
    text-decoration:none;

}
.info-bar4 a:hover{
   
    text-decoration:none;

}

.info-bar4 a{
    color:#1e4079;
    text-decoration:none;
}


/* ==== Estilos base ==== */
nav {
  background: #fffefe;
  height: 150px;
  width: 100%;
  position: fixed;
  top: 20;
  left: 0;
  z-index: 1000;
  color: #2d791e;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

nav ul li {
  position: relative;
}

nav ul li a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

.sub-dropdown{
    color: #7baa1c;
}







/* Submenús ocultos por defecto */
nav ul li .submenu,
nav ul li .submenu li .sub-submenu {
  display: none;
  position: absolute;
  background:#051955;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 1000;
  padding: 6px 0;
  min-width: 100px;
  box-sizing: border-box;
  gap: 6px;
    color: #7baa1c;
}

/* Submenu vertical */
nav ul li .submenu {
  flex-direction: column;
  top: 100%;
  left: 0;

}

/* Sub-submenu horizontal */
nav ul li .submenu li .sub-submenu {
  flex-direction: row;
  top: 0;
  left: 90%;
  min-width: 20px; /* si quieres ancho ajustable */
  width: max-content; /* para que se ajuste al contenido */
}

/* Mostrar submenu al hacer hover */
nav ul li.dropdown:hover > .submenu {
  display: flex;
}

nav ul li .submenu li.sub-dropdown:hover > .sub-submenu {
  display: flex;
}

/* Estilo enlaces */
nav ul li .submenu li a,
nav ul li .sub-submenu li a {
  color: #ffffff;
  padding: 4px 17px;
  font-size: 14px;
  line-height: 1.8;
  white-space: nowrap;
  display: block;
  margin: 0;
  box-sizing: border-box;
  width: max-content;  /* ancho ajustado al contenido */
}


/* Hover color */
nav ul li .sub-submenu li a:hover {
   color: #d3d3d3;
  
}




/* ==== Botón hamburguesa ==== */
.checkbtn {
  font-size: 30px;
  color: #1e4079;
  float: right;
  line-height: 80px;
  margin-right: 20px;
  cursor: pointer;
  display: none;
}

/* Ocultar checkbox */
#check {
  display: none;
}

/* ==== Móvil ==== */
@media (max-width: 768px) {
  nav ul {
    display: flex !important;
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: 0; /* elimina espacio automático entre items */
  }

  nav ul li {
    display: block;
    margin: 0 !important;
    line-height: normal !important;
    padding: 0 !important;
  }

  nav ul li a {
    display: block;
    padding: 4px 10px !important; /* más compacto */
    font-size: 13px !important;
    line-height: 4.4 !important;
  }


  .checkbtn {
    display: block;
  }

  #check:checked ~ ul {
    display: flex;
  }



  nav ul li .submenu,
  nav ul li .submenu li .sub-submenu {
    position: relative;
    box-shadow: none;

  }

 
  nav ul li .submenu li a:hover,
  nav ul li .sub-submenu li a:hover {
    color: #92be3e;
  }

  /* Mostrar submenús cuando tienen la clase .active */
  nav ul li.dropdown > .submenu,
  nav ul li.sub-dropdown > .sub-submenu {
    display: none;
  }

  nav ul li.dropdown.active > .submenu,
  nav ul li.sub-dropdown.active > .sub-submenu {
    display: block;
  }
    nav ul li .submenu,
  nav ul li .submenu li .sub-submenu {
    display: none !important;
  }
  
}







.enlace{
    position: absolute;
    padding: 20px 50px;
}

nav ul{
    float: right;
    margin-right: 20px;
    margin-top: 1%;
}
nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: px  5px;
}

nav ul li a{
    color:#1e4079;
    font-size: 14px;
    padding: 2px 15px;
    border-radius: 3px;
    text-transform: uppercase;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration: none;
}
li a.active, li a:hover{
    color:#92be3e;
    transition: .5s;
    text-decoration: none;

}

nav .logo img {
    height: 90px;
    width: auto;
    margin-left: 20px;
    object-fit: cover;
    margin-top: 0.5%;
    
}

@media (max-width: 768px) {
    nav .logo img {
        object-fit: cover;
        height: 90px;
        margin-top: 1.5%;
    }
}

@media (max-width: 1080px){

    nav ul li a{
        font-size: 14px;
    }
}
.checkbtn{
    font-size: 30px;
    color:#051955;
    float: right;
    line-height: 90px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}

.form-control-me-2{
    position: center;
}


@media (max-width: 768px) {
    .info-bar{
            background-color: #7baa1c;
            text-align:left;
            color:#051955;
            font-size: 10px;
            width: 70%;
           
        }
}

@media (max-width: 480px){
    .enlace{
        padding-left: 20px;
    }
    nav ul li a{
        font-size: 16px;
    }
}


@media (max-width: 1025px){
    .checkbtn{
        display: block;
    }
    ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background:#051955;
        top: 115px;
        left: -100%;
        text-align: center;
        transition: all .5s;
    }
    nav ul li{
        display: block;
        margin: 50px 0;
        line-height: 17px;
        text-align: center;
    }
    nav ul li a{
        font-size: 14px;
    }
    li a:hover, li a.active{
        background: none;
      
        color:#92be3e;
        transition: .5s;

    }
    #check:checked ~ ul{
        left:0;
    }
}


.carousel-item img {
    width: 100%;
    height: auto;
}
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #1e4079; /* Cambia el color de los íconos aquí */
    border-radius: 50%; /* Hace los iconos circulares */
    padding: 10px; /* Añade un padding para agrandar los íconos */
    color: black;
}
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: #143057; /* Cambia el color al pasar el ratón por encima */
}


.info-bar {
    background-color:#051955;
    color:white;
    font-size: 12px;
    height: 40px;
    padding: 5px 0;
    width: 100%;
    z-index: 1000; /* Asegura que el nav esté por encima de otros elementos */
}


.image-container {
    text-align: right; /* Opcional: Centra las imágenes dentro del contenedor */
    margin-right: 20px;
    
}

.image-container img {
    display: inline-block;
    margin: 4px; /* Espacio entre imágenes */
    vertical-align: middle; /* Alinea verticalmente las imágenes */
    text-decoration:none ;
    color: #fffefe;
  
}

/*CONTENEDOR  */

.container2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:#ffffff;
    padding: 1px;
    margin: 5px 0; 
    flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */
}

.left, .right {
    flex: 1;
    min-width: 190px; /* Mínimo ancho de los elementos */
    text-align: left;
    color:rgb(118, 115, 115);
}


.right {
    text-align: left;
    padding: 2px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 6%;
}

.left {
    text-align: left;
    padding: 10px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 6%;
}

 /* CONTENEDOR INTERCALADO */
 

.container3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:#ffffff;
    padding: 1px;
    margin: 5px 0; 
    flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */ 
}



/* Media query para pantallas pequeñas */


    /* WSP */

    .whatsapp-icon {
        position: fixed;
        top: 85vh; /* 10% de la altura de la ventana gráfica */
        right: 2vw; /* 2% del ancho de la ventana gráfica */
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 7vw; /* 7% del ancho de la ventana gráfica */
        height: 9vh; /* 9% de la altura de la ventana gráfica */
        size: 10%;
        border-radius: 50%; /* Hace que el icono sea redondo */
        animation: bounce 1.5s infinite; /* Animación de rebote */
    }

    .whatsapp-icon img {
        width: 63%;
        height: 94%;
    }
    
    /* Media Queries para ajustes responsivos */
    @media (max-width: 768px) {
        .whatsapp-icon {
            width: 100px; /* Aumenta el tamaño en pantallas más pequeñas */
            height: 70px;
            top: 80vh; /* Ajusta la posición en pantallas más pequeñas */
            right: 4vw;
        }

        .loge{

            width: 64.1%;
            margin-left: 18%;
          
        }
        .imgf{
             width: 70%;
             height: 70%;
        }

       
    }
    
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0); /* Estado inicial y final sin movimiento */
        }
        50% {
            transform: translateY(-10px); /* Rebote hacia arriba */
        }
    }
    .div6 {
        background-color: #051955;
        text-align: center;
        color: #ffffff;
        font-size: 19px;
        font-family: Arial, Helvetica, sans-serif;
        padding: 5px 0;
        height: 35px;
        text-decoration: none;
    }
    
    select {
        background-color:#051955; /* Mismo color de fondo que .div6 */
        color: #ffffff; /* Color del texto */
        border: none; /* Sin bordes */
        font-size: 19px; /* Mismo tamaño de fuente que .div6 */
        font-family: Arial, Helvetica, sans-serif; /* Mismo tipo de fuente */
        padding: 5px; /* Espaciado interno */
        width: 226px; /* Ancho del select */
        height: 35px; /* Mismo alto que .div6 */
        text-align: center; /* Alineación centrada */
    
      
    }
    
    /* Para las opciones dentro del select */
    .styled-select option {
        background-color: #051955;
        color: #ffffff;
    }
    
    /* Para quitar el borde azul al enfocar */
    .styled-select:focus {
        outline: none;
    }


    .info-bar2 {
        background-color:white;
        text-align: center;
        color:#051955;
        font-size: 12px;
        padding: 5px 0;
        position: absolute;
        width: 100%;
        text-decoration:none;
    
    }
    .info-bar2 a:hover{
        text-decoration:none;
    }
    .info-bar2 a{
        color:#051955;
        text-decoration:none;
    }
   

    select {
        background-color:#051955;
        text-align: center;
        color:#ffffff;
        font-size: 19px;
        font-family:Arial, Helvetica, sans-serif;
        padding: 5px 0;
        height: 35px;
        width: 200px;
        text-decoration: none;
        
      }
      
      /* Para las opciones dentro del select */
      .styled-select option {
          background-color:#051955;
          color: #ffffff;
      }
      
      /* Para quitar el borde azul al enfocar */
      .styled-select:focus {
          outline: none;
      }