
<style type="text/css">
#map {
     height: 500px;
     width: 100%;
     margin-top: 20px;
   }

   .overlay-text {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 9%;
   background-color: rgba(0, 86, 179, 0.6);
   z-index: 1;
}

.overlay-text p {
 z-index: 2;
 font-size: 1.2rem;
}

.masthead {
 min-height: 100vh;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
/* 
.slide1 {
 background-image: url('img/fondo1.jpg');
}

.slide2 {
 background-image: url('img/imagenfinal.jpg');
} */


 body,td,th {
   font-family: Merriweather, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   color: #333333;
}

.contenedor-banner {
 position: relative;
 width: 100%;
 /* max-height: 400px; */
 overflow: hidden;
}

.img-banner {
 width: 60%;
 height: auto;
 display: block;
}
.overlay-text {
 margin-top: 20px;
}


.cuadro-azul {
 position: absolute;
 top: 50%;
 right: 5%;
 transform: translateY(-50%);
 background-color: #004AAD;
 color: white;
 padding: 30px;
 max-width: 350px;
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* CSS CAJAS SERVICIOS */

.card-img-top {
 /* height: 180px; */
 object-fit: cover;
}

.card {
background-color: #004AAD;;
 transition: transform 0.3s ease;
}

.card:hover {
 transform: translateY(-5px);
}

.btn-sm {
 padding: 6px 20px;
 font-size: 0.9rem;
}


/* CSS imagen contacto */
.contact-final-section {
 background-image: url('img/imagenfinal.jpg');
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 height: 100vh;
 position: relative;
 color: white;
}

.contact-final-section .overlay {
 background-color: rgba(0, 0, 0, 0.5); /* oscurece la imagen para resaltar el texto */
 padding: 3rem;
 border-radius: 10px;
 max-width: 800px;
}

.whatsapp-float {
 position: fixed;
 width: 60px;
 height: 60px;
 bottom: 20px;
 right: 20px;
 background-color: #25d366;
 color: white;
 border-radius: 50%;
 text-align: center;
 font-size: 30px;
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
 z-index: 1000;
 display: flex;
 align-items: center;
 justify-content: center;
}

 #map {
   height: 500px;
   width: 100%;
   margin-top: 20px;
 }


.whatsapp-float img {
 width: 35px;
 height: 35px;
}


/* Botón scroll hacia arriba */
.scroll-top-float {
 position: fixed;
 width: 50px;
 height: 50px;
 bottom: 90px; /* un poco arriba del botón WhatsApp */
 right: 25px;
 background-color: #007bff;
 color: white;
 border-radius: 50%;
 text-align: center;
 font-size: 24px;
 line-height: 50px;
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
 z-index: 999;
 text-decoration: none;
}




 /* Navbar */
 .navbar-custom {
   background-color: #004AAD;
   z-index: 1000;
 }

 .navbar-custom .nav-link {
   color: white !important;
   font-weight: 500;
   padding: 10px 15px;
 }

 .navbar-custom .nav-link:hover {
   background-color: #d23700;
   border-radius: 5px;
 }

 /* Sticky navbar */
 .sticky-navbar {
   position: sticky;
   top: 0;
 }

 @media (max-width: 768px) {
   .top-bar .contact-info {
     text-align: center;
   }

   .top-bar .d-flex.flex-column.flex-md-row {
     flex-direction: column !important;
     gap: 0.5rem;
   }
 }


 .top-bar {
   background-color: #f8f9fa;
 }

 .top-bar i {
   font-size: 1.5rem; /* Tamaño de los íconos */
 }

 .top-bar .contact-info .d-flex {
   gap: 0.5rem;
 }

 .top-bar .contact-info div {
   font-size: 0.95rem;
 }

 .top-bar .contact-info strong {
   font-size: 1rem;
 }

 .top-bar .contact-info .me-3 {
   margin-right: 2rem !important; /* más separación entre bloques */
 }

 .top-bar img {
   width: 40px !important;
   height: 40px; /* Ajusta el tamaño del logo si es necesario */
 }

 .top-bar .flag-icon {
   width: 30px;
   height: auto;
 }

 
 .top-bar .logo-img {
   height: 70px;
   width: 100px !important; 
 }


 .box-hover {
    background-color: white;
    color: #000;
    transition: all 0.3s ease;
  }
  .box-hover:hover {
    background-color: #007bff;
    color: white;
  }
  .box-hover:hover a,
  .box-hover:hover p,
  .box-hover:hover h5,
  .box-hover:hover h3 {
    color: white;
  }

  
  .contact-final-section {
    background: url('ruta-fondo.jpg') center/cover no-repeat;
    min-height: 50vh;
    position: relative;
  }
  .contact-final-section .overlay {
    background: rgba(0,0,0,0.6);
    padding: 50px;
    width: 100%;
  }
  