:root{
    --primary-font-color1: #ffffff; 
    --primary-font-color2: #007bff;
}

.navbar-light {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: hwb(0 0% 100% / 0.702);
    
}


.navbar-light .container a, .navbar-light .container .collapse .navbar-nav .nav-item .nav-link{
    color: var(--primary-font-color1);
}

.background-main{
    height: 100vh;
    background: linear-gradient(rgba(20,20,20, .5),rgba(20,20,20, .5)),url(../img/background-map-4.jpeg);
    
}


.background-main, .services-class{
    max-width: 100%;
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    color:var(--primary-font-color1);
}

.background-main h1{
    font-size: 5rem;
}

.background-main .main { 
    display: table; 
    width: 100%;
    height: 82vh;
    text-align: center;
    /*
    display: flex; 
    width: 50%; 
    height: 200px; 
    margin: auto; 
    */
} 

.background-main .main .main-title,.background-main .main p { 
    display: table-cell;
    vertical-align: middle;
    /*margin: auto;  Important 
    text-align: center;  */
}

.main-link{
    font-size: 44px;
    color: var(--primary-font-color1);
}
.main-link:hover{
    color:var(--primary-font-color1);
}

.about-us,.services-class{
    margin-top: 3em;
    margin-bottom: 3em; 
}

.line-shape{
    width: 10%;
    height: 2px;
    margin-left: calc(49% - 40px);
    background-color: var(--primary-font-color2);
    margin-top: 17px;
    margin-bottom: 25px;
}

.services-class{
    max-width: 100%;
    height: 78vh;
    background: linear-gradient(rgba(20,20,20, .5),rgba(20,20,20, .5)),url(../img/bg-2.jpeg);
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    -webkit-clip-path: polygon(0 7%, 100% 0, 100% 96%, 0 100%);
    clip-path: polygon(0 7%, 100% 0, 100% 96%, 0 100%);
}

.services-class .section-heading, .portfolio-title,.contact-us .section-heading{
    font-size: 34px;
    margin-top: 2.5em;
}

.services-class .container .service-box .text-muted{
    color: rgba(255,255,255,.7) !important
}

.contact-us{
    max-width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(20,20,20, .5),rgba(20,20,20, .5)),url(../img/bg-3.jpeg);
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    color: var(--primary-font-color1);
    -webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 94%);
    clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 94%);
}


footer.footer .social-link {
    display: block;
    height: 4rem;
    width: 4rem;
    line-height: 4.3rem;
    font-size: 2.5rem;
    background-color: var(--primary-font-color2);
    -webkit-transition: background-color .15s ease-in-out;
    transition: background-color .15s ease-in-out;
    -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,.1);
    box-shadow: 0 3px 3px 0 rgba(0,0,0,.1);
}

footer.footer .social-link:hover{
    background-color: rgba(20,20,20, .5);
}

.ribbon-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 100;
}

.ribbon {
    white-space: nowrap;
    display: inline-block;
    animation: moveLeft 10s linear infinite;
    font-size: 25px;
}

@keyframes moveLeft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.img-logo {
    width: 30%;
    height: 30%;
    border-radius: 10px;
}

.main-title {
    font-size: 40px;
    font-weight: bold;
    color: #ffffff;
}

.navbar-light .navbar-nav .dropdown-menu {
    background-color: #000; /* Cambiar color de fondo del submenú a negro */
}

.sub-menu {
    color: blue;
}

.asfi {
    height: 100px;
    width: 200px;
    margin-top: 104px;
    margin-left: 215px;
}

.asfi-pie {
    height: 75px;
    width: 125px;
}

/* pagina offices */
.header-image {
    height: 30vh; /* Altura de la imagen */
    width: 100%;
    /* Reemplaza 'ruta/a/la/imagen.jpg' con la URL de tu imagen */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.submenu-list {
    background-color: #f8f9fa; /* Color de fondo del listado submenu */
    padding: 10px;
}
.branch-info {
    padding: 20px;
}
#map {
    width: 100%;
    height: 400px; /* Puedes ajustar la altura según tus necesidades */
}
.letra-negrita {
    font-weight: bold;
    color: #007bff;
}
.header-image-lpz {
    height: 30vh; /* Altura de la imagen */
    width: 100%;
    background-image: url('../img/office-lpz.jpg'); /* Reemplaza 'ruta/a/la/imagen.jpg' con la URL de tu imagen */
    background-size: cover;
    background-position: center 70%;
}
#map-scz {
    width: 100%;
    height: 400px; /* Puedes ajustar la altura según tus necesidades */
}
#map-lpz {
    width: 100%;
    height: 400px; /* Puedes ajustar la altura según tus necesidades */
}
#map-cbba {
    width: 100%;
    height: 400px; /* Puedes ajustar la altura según tus necesidades */
}
#map-container {
    width: 100%;
    height: 400px; /* Altura del contenedor del mapa */
}
.map-container {
    display: none; /* Ocultar todos los contenedores de mapas por defecto */
}
.active-map {
    display: block; /* Mostrar el contenedor del mapa activo */
}

.header-contact {
    height: 50px; /* Altura de la imagen */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header-service {
    max-height: 250px; /* Altura de la imagen */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*pagina servicios*/
.image-service {
    height: 30vh; /* Altura de la imagen */
    width: 100%;
    background-image: url('../img/background-map-1.jpg'); /* Reemplaza 'ruta/a/la/imagen.jpg' con la URL de tu imagen */
    background-size: cover;
    background-position: center 70%;
}
.image-service-2 {
    height: 30vh; /* Altura de la imagen */
    width: 100%;
    background-image: url('../img/pago-servicio.jpg'); /* Reemplaza 'ruta/a/la/imagen.jpg' con la URL de tu imagen */
    background-size: cover;
    background-position: center 70%;
}
.image-service-3 {
    height: 30vh; /* Altura de la imagen */
    width: 100%;
    background-image: url('../img/cambio-moneda.jpg'); /* Reemplaza 'ruta/a/la/imagen.jpg' con la URL de tu imagen */
    background-size: cover;
    background-position: center 70%;
}
.logo-container {
    width: 100%;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
    position: relative; /* Para posicionar el título */
}

.logo-container h3 {
    position: absolute;
    top: -20px; /* Distancia del título al borde superior */
    left: 10px; /* Distancia del título al borde izquierdo */
    background-color: white; /* Fondo para que el título sea legible */
    padding: 5px; /* Espaciado interno del título */
}



.logo-container {
    width: 100%;
    text-align: center; /* Alineación de las imágenes */
    margin-bottom: 20px; /* Espacio entre los contenedores */
}
.logo-container img {
    max-width: 100px; /* Tamaño máximo de las imágenes */
    height: auto;
    margin: 5px; /* Espacio entre las imágenes */
}
.logo-container h3 {
    border-bottom: 1px solid #ccc; /* Borde inferior para el título */
    padding-bottom: 5px; /* Espaciado inferior */
    margin-bottom: 10px; /* Espacio entre el título y las imágenes */
}
/*acerca de la empresa */

body {
    background-color: #f0f8ff; /* Azul celeste */
    
    color: #333; /* Color de texto */
}

.jumbotron {
    background-color: #fff; /* Blanco */
}

.about-img-1 {
    width: 100%;
    height: 100%;
}

.container-page {
    margin-top: 100px;
}
.main-title-about {
    text-align: center;
}
/* Estilos específicos para la página */
.mission-vision {
    margin-bottom: 30px;
}

.objectives {
    margin-bottom: 30px;
}

.history-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
/* estilos corresponsales*/
.container-correspondent {
    border: 4px solid #2caae1;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    
    
}
.logo-img {
    max-width: 180px; /* Ancho máximo de la imagen */
    max-height: 80px; /* Altura máxima de la imagen */
    margin: 20px;
}
.logo-img-connect {
    max-width: 220px;
}
.logo-img-sudamero {
    max-width: 120px;
}
.logo-img-separado {
    max-width: 180px; /* Ancho máximo de la imagen */
    max-height: 80px; /* Altura máxima de la imagen */
    margin-left: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.fondo-corresponsal {
    background-color: #2caae1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    
}
.text-title-correspondent {
    margin-left: 2%;
    color: #ffffff;
    margin: 0 10px; /* Ajusta el margen según sea necesario */
    
}
.correspondent {
    margin: 2%;

}
.icon {
    width: 40px;
    height: 40px;
}
.vl {
    border-left: 6px solid green;
    height: 500px;
}

.imagen-fija2 {
      position: fixed;
      bottom: 0;         /* Fija la imagen en la parte inferior */
      left: 80%;         /* Centra la imagen horizontalmente */
      transform: translateX(-50%); /* Ajusta para centrar la imagen */
      z-index: 1000;     /* Asegura que la imagen quede encima de otros elementos */
}
.imagen-fija3 {
      position: fixed;
      top: 80%;            /* Centra la imagen verticalmente */
      right: 0;            /* Coloca la imagen a la derecha */	  
      transform: translateY(-50%); /* Ajusta la imagen para que esté centrada verticalmente */
      z-index: 1000;       /* Asegura que la imagen se vea por encima de otros elementos */
	  max-width: 130px; /* Ancho máximo de la imagen */
	  max-height: 130px; /* Altura máxima de la imagen */
    }
.imagen-fija {
    position: fixed;
    bottom: 10px;  /* A 10 píxeles del borde inferior */
    right: 10px;   /* A 10 píxeles del borde derecho */
    width: 100px;  /* Ajusta el tamaño según lo necesites */
    height: auto;  /* Mantiene la relación de aspecto */
	max-width: 130px; /* Ancho máximo de la imagen */
	max-height: 130px; /* Altura máxima de la imagen */
}