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

}

body {
    max-width: 1920px;
    
}


nav{
    background:#fffefe;
    height: 150px;
    width: 100%;
    position: fixed;
    color:#1e4079;
    top: 20; /* Asegura que el nav esté siempre en la parte superior */
    left: 0;
    z-index: 1000; /* Asegura que el nav esté por encima de otros elementos */

}

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

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;
}









/* 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;
}

/* 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: #dcdcdc;
}




/* ==== 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: none;
    
}

.checkbtn{
    font-size: 30px;
    color:#051955;
    float: right;
    line-height: 100px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}

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

.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;
}

@media (max-width: 768px) {
    nav .logo img {
        object-fit: cover;
        height: 90px;
        margin-top: 1.5%;
    }
}
@media (max-width: 768px) {
    .info-bar{
            background-color: #7baa1c;
            text-align:left;
            color:#051955;
            font-size: 10px;
            width: 70%;
           
        }
}

@media (max-width: 1080px){

    nav ul li a{
        font-size: 14px;
    }
}


@media (max-width: 1025px){
    .checkbtn{
        display: block;
    }
    ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background:white;
        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;
    }
}


@media (max-width: 768px) {
    nav .logo img {
        object-fit: cover;
        height: 90px;
        margin-top: 0.5%;
    }
}
@media (max-width: 768px) {
    .info-bar{
            background-color: #7baa1c;
            text-align:left;
            color:#051955;
            font-size: 10px;
            width: 70%;
           
        }
        nav ul li a{
            font-size: 14px;
        }
}

@media (max-width: 1800px){
    nav ul li a{
        font-size: 14px;
    }
    nav .logo img {
        object-fit: cover;
        height: 80px;
        margin-top: 0.5%;
    }
}

@media (max-width: 1300px){
    nav ul li a{
        font-size: 14px;
    }
    nav .logo img {
        object-fit: cover;
        height: 90px;
        margin-top: 0.5%;
    }
}
.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;
  
}

.texto{
    color:#ffffff;
    margin: 20px;
    text-align: justify;
    font-size: 22px;
    margin-left: 70px; /* Márgen izquierdo de 50px */
    margin-right: 70px; /* Márgen derecho de 50px */
}
.div2{
 background-color:#ffffff;
    text-align: left;
    color:#051955;
    font-size: 45px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 0;
    height: 100px;
    margin-left: 30px;
    margin-top: 2%;
}

.div3{
    background-color:#051955;
    text-align: left;
    color:#ffffff;
    font-size: 15px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 0;
    height: 50px;

   }
   .txt{

    text-align: left;
    color:black;
    font-size: 19px;
    font-family: Arial, Helvetica, sans-serif;
    
    
}

.txt2{

 text-align: left;
 color:black;
 font-family: Arial, Helvetica, sans-serif;
 padding: 4% 5%;
 
}

.te{
    color:#ffffff;
    font-size: 34px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 30%;
    margin-top: 0.5%;
    margin: 10px;
}

   .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;

   }

   .div6:hover {
    background-color:black;
    color: #fff; /* Color del texto al hacer hover */
}

.div7{
    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;

   }

   .div7:hover {
    background-color:rgb(0, 0, 0);
    border: solid 2px black;
    
}


@media (max-width: 768px) {
    .div3 {
        background-color:#051955;
        text-align: center;
        color:#ffffff;
        font-size: 20px;
        height: 90%;
        width: auto;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .txt {
               
        text-align: left;
        font-size: 15px;
        font-family:Arial, Helvetica, sans-serif;
        padding: 1% 2%;
        
       
    }
    .txt2 {
       
        text-align: left;
        font-size: 15px;
        font-family:Arial, Helvetica, sans-serif;
        padding: 6% 9%;
        margin-left: 11%;
    
       
       
    }
}
        @media (max-width: 768px) {
            .div2 {
                background-color:#ffffff;
                text-align: center;
                color:#051955;
                font-size: 35px;
                font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                padding: 5px 0;
                height: 100px;
                margin-left: 20px;
                margin-top: 2%;
            
            }
        }
        
        @media (max-width: 768px) {

    .div4{
        background-color:#92be3e;
            text-align: left;
            color:#051955;
            font-size: 18px;
            padding: 5px 0;
            height: 80px;
            font-family: Arial, Helvetica, sans-serif;
            align-items: center;
            
            
        }

        .te{
            color:#ffffff;
            font-size: 29px;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            margin: 5px; 

        }


.navbar-right{

    background-color: #92be3e;
    font-size: 14px;
    clip-path: polygon(14% 30%, 98% 30%, 90% 70%, 4% 70%);   
    border-radius: 10px;
    color:#ffffff;

}

.image-container {

  font-size: 7px;
    
    
}
        }

@media (max-width: 768px) {
    .navbar-right {
    padding: 20px 10px 10px 20px;  /* 10px arriba y abajo, 20px izquierda y derecha */
    width: 150px;
    margin-left: 118px;
    height: 65px;
    clip-path: polygon(8% 70%, 87% 70%, 97% 10%, 17% 9%);
    
}
.card-text2{
    text-align: left;
}
.col-md-4 img{

    width: 80%;
    margin-right: 20%;
}

.loge{

    width: 70%;
    margin-left: 18%;
  
}

.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;
    width: 70%;
    margin-left: 18%;

   }
   .div7{
    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;
    width: 70%;
    margin-left: 1%;

   }
}

/*imagen ccccc  */
.container {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #f0f0f0; /* Color de fondo inicial */
    transition: background-color 0.3s; /* Transición suave */
}


.container img {
    width: 100px; /* Ajusta el tamaño de la imagen según sea necesario */
    height: auto;
    margin-left:44%;
    
}

.container .text {
    font-size: 1.2em;
}



.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:#051955; /* 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:#051955; /* Cambia el color al pasar el ratón por encima */
}
  .container2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color:#051955;
            padding: 1px;
            flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */
        }
        .left, .right {
            flex: 1;
            min-width: 150px; /* Mínimo ancho de los elementos */
            text-align: center;
            margin: 5px 0; /* Espacio entre elementos cuando se apilan */
            color: white;
        }
        /* Opcional: estilos adicionales para mejorar la apariencia */
        .left {
            font-size: 19px;
            padding: 10px;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .right {
            text-align: left;
            padding: 10px;
            font-size: 15px;
            font-family: Arial, Helvetica, sans-serif;
        }

        /* Media query para pantallas pequeñas */
        @media (max-width: 600px) {
            .container2 {
                flex-direction: column; /* Invierte el orden de los elementos */
                margin-right: 90px;
                
            }
            .left, .right {
                flex: 1;
                min-width: 150px; /* Mínimo ancho de los elementos */
                text-align: center;
                margin: 5px 0; /* Espacio entre elementos cuando se apilan */
                color: white;
            }
        }

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

      
        .left, .right3 {
            flex: 1;
            min-width: 150px; /* Mínimo ancho de los elementos */
            text-align: center;
            margin: 5px 0; /* Espacio entre elementos cuando se apilan */
            color: white;
        }
        /* Opcional: estilos adicionales para mejorar la apariencia */
        .left img {
            width: 450px;
        }
        .right3 {
            text-align: left;
            padding: 10px;
            font-size: 18.5px;
            font-family: Arial, Helvetica, sans-serif;
            margin-right: 15%;
        }

        .right4 {
            text-align: left;
            padding: 10px;
            font-size: 18.5px;
            font-family: Arial, Helvetica, sans-serif;
            margin-right: 20%;
        }

        .c{
            font-size: 18.5px;
            font-family: Arial, Helvetica, sans-serif;
            text-align: left;
            margin-left: 60px;
            padding: 5%;
        }

        /* Media query para pantallas pequeñas */
        @media (max-width: 600px) {
            .container3 {
                flex-direction: column; /* Invierte el orden de los elementos */
            }
            .left img {
                width: 290px;
            }
            .left{
                text-align: left;
            }
            .right3 {
                margin-left: 4%;
                font-size: 15.7px;
                justify-content: space-between;
            }
       
            .right img{

                height: 300px;
                width: 300px;
                margin-right: 15px;
            } 
      
        
        }
        
        .right img{

            height: 400px;
            width: 400px;
            margin-left: 85px;
           

        }

        
     .contact-info3 {
        display: flex;
        justify-content: space-between;
        align-items:left;
        flex-wrap: wrap;
    }

    .contact-info3 a {
        flex: 1;
        margin: 10px;
        color: rgb(118, 115, 115);
        font-weight: bold;
        text-decoration: none;
        text-align: left;
    }

    .separator {
        border: 0;
        height: 2px;
        background-color: white; /* Asegúrate de que sea visible */
        margin: 10px 0;
    }

    @media (max-width: 768px) {
        .contact-info3 a {
            flex-basis: 100%;
            text-align: left;
            font-size: 12px;
        }
 
        .loge{

            width: 64.1%;
            margin-left: 18%;
          
        }


        iframe{
            width: 150px;
            height: 300px;
            margin-right: 10%;
        }
    }
    /* 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;
    
        size: 10%;
        border-radius: 50%; /* Hace que el icono sea redondo */
        animation: bounce 1.5s infinite; /* Animación de rebote */
    }

    .whatsapp-icon img {
        width: 70%;
        height: 70%;
    }
          .container {
      background-color:#051955;
          color: white;
          padding: 2%;
          width: 100%; /* Ocupa todo el ancho de la pantalla */
          max-width: 100%; /* Asegura que no se limite en dispositivos grandes */
          font-size: 20px;
        }