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

}

body {
    max-width: 1920px;
    
}


/* ==== 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:#1e4079;
  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:#1e4079;
    float: right;
    line-height: 100px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}

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

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

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

}

.info-bar5 a{
    color:#1e4079;
    text-decoration:none;
}
.texta{
    color: #1e4079;
    margin: 22px;
    text-align: left;
    font-size: 19px;
    padding: 15px;
}


@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: center;
            color:#1e4079;
            font-size: 10px;
            width: 70%;
        }
}

@media (max-width: 1080px){

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

@media (min-width: 1920px){

    nav ul li a{
        color:#1e4079;
        font-size: 14px;
        padding: 1px 20px;
        border-radius: 3px;
        text-transform: uppercase;
        font-family:Arial, Helvetica, sans-serif;
        text-decoration: none;
    }   
    

}

@media (max-width: 1025px){
    .checkbtn{
        display: block;
    }
    ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background:#ffffff;
        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: 1.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%;
    }
}
.item img {
    width: 100%;
    height: auto;
}
.info-bar {
    background-color:#1e4079;
    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: #1e4079;
    margin: 20px;
    text-align: justify;
    font-size: 22px;
    margin-left: 70px; /* Márgen izquierdo de 50px */
    margin-right: 70px; 
}
.div2{
 background-color:#ffffff;
    text-align: left;
    color: #1e4079;
    font-size: 45px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 0;
    height: 100px;
    margin-left: 45px;
    margin-top: 2%;
}



.div3{
    background-color:#1e4079;;
    text-align: left;
    color:#ffffff;
    font-size: 45px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 7px 0;
    height: 55px;

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

   .div6{
    background-color:#1e4079;;
    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: #7baa1c;
    color: #fff; /* Color del texto al hacer hover */
}

.div12 {
    background-color: #1e4079;
    color: #ffffff;
    font-size: 26px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    height: 335px;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;    /* Centra verticalmente */
    text-align: center;
    text-decoration: none;
}

.div12:hover {
    background-color:#7baa1c;

    color: #fff; /* Color del texto al hacer hover */
}

@media (max-width: 768px) {
    .div3 {
        background-color:#1e4079;
        text-align: center;
        color:#ffffff;
        font-size: 27px;
        height: 90%;
        width: auto;
    }
}
        @media (max-width: 768px) {
            .div2 {
                background-color:#ffffff;
                text-align: center;
                color:#1e4079;
                font-size: 30px;
                font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                padding: 5px 0;
                height: 100px;
                margin-left: 1px;
                margin-top: 2%;
            }
      
        }
        
        @media (max-width: 768px) {

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

        .te{
            color:#ffffff;
            font-size: 30px;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            text-align: center;

        }


.navbar-right{

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

}
        }

@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%;
}
.col{
    margin-top: -10%;
}
.loge{

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

.div6{
    background-color:#1e4079;
    text-align: center;
    color:#ffffff;
    font-size: 19px;
    font-family:Arial, Helvetica, sans-serif;
    padding: 5px 0;
    height: 35px;
    text-decoration: none;
    width: 64.1%;
    margin-left: 18%;

   }

}

.container {
    top:10%;
    background-color: #1e4079;
    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;
  }
.text-responsive {
  
  font-size: 20px; /* Tamaño de fuente base */
 
}

@media (max-width: 768px) {
  .text-responsive {
    font-size: 20px; /* Tamaño de fuente base */
      
  }
}

@media (min-width: 992px) {
  .text-responsive {
      font-size: 20px; /* Aumentar tamaño en pantallas más grandes */
      
  }
}

@media (min-width: 1200px) {
  .text-responsive {
    font-size: 21px; /* Aumentar tamaño en pantallas más grandes */
  }
}


.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 */
}
  .container2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color:#1e4079;
            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: 26px;
            padding: 30px;
            margin-left: 15%;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .right {
            text-align: left;
            padding: 5px;
            font-size: 17px;
            font-family: Arial, Helvetica, sans-serif;
            margin-right: 5%;
        }

        /*skxd*/
        .left2, .right2 {
            flex: 1;
            min-width: 10px; /* 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 */
        .left2 {
            font-size: 22px;
            padding: 10px;
            margin-right: -15%;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .right2 {
            text-align: left;
            padding: 10px;
            font-size: 17px;
            font-family: Arial, Helvetica, sans-serif;
            margin-left: 1%;
        }

        /* Media query para pantallas pequeñas */
        @media (max-width: 600px) {
            .container2 {
                flex-direction: column; /* Invierte el orden de los elementos */
                
            }
            .left2{
               margin-right: 12%;
            }
        }

        .container3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color:#1e4079;
            padding: 10px;
            flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */
        }
        .left, .right3 {
            flex: 1;
            min-width: 100px; /* Mínimo ancho de los elementos */
            text-align: center;
            margin: 2px 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: 3px;
            font-size: 18.5px;
            font-family: Arial, Helvetica, sans-serif;
            margin-right: 15%;
        }

        /* Media query para pantallas pequeñas */
        @media (max-width: 600px) {
            .container3 {
                flex-direction: column; /* Invierte el orden de los elementos */
            }
            .left img {
                width: 290px;
            }
            .right3 {
                margin-left: 7%;
                font-size: 19px;
            }
            iframe{
                width: 290px;
                height: 300px;
            }
        }
/* 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%;
}


@media (min-width: 1920px) {
    .whatsapp-icon {
       
        top: 75vh; /* Ajusta la posición en pantallas más pequeñas */
        right: 20vw;
    }
    .whatsapp-icon img {

        width: 500%;
        height: 500%;
    }

} 

/* Media Queries para ajustes responsivos */
@media (max-width: 768px) {
    .whatsapp-icon {
        width: 60px; /* Aumenta el tamaño en pantallas más pequeñas */
        height: 60px;
        top: 78vh; /* Ajusta la posición en pantallas más pequeñas */
        right: 4vw;
    }
    .txt {
               
        text-align: left;
        font-size: 15px;
        font-family:Arial, Helvetica, sans-serif;
        padding: 7% 7%;
        
       
    }

}


@media (max-width: 1920px) {
    .whatsapp-icon {
        width: 85px; /* Aumenta el tamaño en pantallas más pequeñas */
        height: 85px;
        top: 80vh; /* Ajusta la posición en pantallas más pequeñas */
        right: 4vw;
    }
    
   
}


@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Estado inicial y final sin movimiento */
    }
    50% {
        transform: translateY(-10px); /* Rebote hacia arriba */
    }
    
}
.txt{

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



   .te{
      color:#ffffff;
      font-size: 40px;
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      margin-left: 60px;
      margin-top: 5%;
      margin: 10px;
   }
      .txt{
   
   text-align: left;
   color:black;
   font-size: 19px;
   font-family: Arial, Helvetica, sans-serif;
   
   }@media (max-width: 768px) {
   
   .txt {
              
       text-align: left;
       font-size: 15px;
       font-family:Arial, Helvetica, sans-serif;
       padding: 7% 7%;
       
      
   }}

    .form-group {
        margin-bottom: 15px;
        margin-left: 3%;
        margin-right: 3%;
    }
    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        color:black;
        font-style: italic;
    }
    .form-group input, .form-group textarea {
        width: 100%;
        padding: 10px;
        background-color: #ffffff;
        box-sizing: border-box;
        border: 2px solid #1e4079;
        border-radius: 1px;
    }
    .form-group input:focus, .form-group textarea:focus {
        border-color: #1e4079;
        outline: none;
    }
    .form-group textarea {
        height: 200px;
        resize: vertical;
    }
    .form-group button {
        padding: 10px;
        background-color: #1e4079;
        border: none;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        border-radius: 4px;
        width: 100%; /* Ancho completo del contenedor */
        display: block; /* Hace que el botón ocupe todo el ancho disponible */
        margin-left: auto; /* Alineación a la derecha */
        margin-right: 0; /* Alineación a la derecha */
    }
   
    @media (min-width: 768px) {
        .form-row {
            display: flex;
            justify-content: space-between;
        }
        .form-group.half {
            flex: 1 1 48%;
        }
        .form-group.full {
            flex: 1 1 100%;
        }
        .form-group button {
            width: auto;
            align-self: flex-end;
        }
    }
   .tm3{
    color:#1e4079;
   }
 

    /* Modal */




    /* Fondo oscuro */
    .custom-confirm-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    /* Contenedor del cuadro */
    .custom-confirm {
        background: #1e4079;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        text-align: center;
        width: 90%;
        max-width: 400px;
        animation: fadeIn 0.3s ease-out;
        color: white;
    }

    /* Animación */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .custom-confirm p {
        font-size: 1.4rem;
        margin-bottom: 20px;
        color: #f4f4f4;
        line-height: 1.5;
    }

    /* Botones */
    .custom-confirm-buttons {
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }

    .custom-confirm button {
        flex: 1;
        padding: 10px 15px;
        font-size: 1rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .custom-confirm .confirm-yes {
        background-color: #92be3e;
        color: #1e4079;
        font-weight: bold;
    }

    .custom-confirm .confirm-yes:hover {
        background-color:#92be3e;
    }

    .custom-confirm .confirm-no {
        background-color: #ffffff;
        color: #1e4079;
        font-weight: bold;
    }

    .custom-confirm .confirm-no:hover {
        background-color: #dcdcdc;
    }