/* Estilos personalizados */
    body {
        font-family: Arial, sans-serif;
    }

    /* Estilo para el banner */
    .banner {
        background-image: url('../../SITIOGLOBAL/IMG/banner4.jpg'); 
        background-size: cover;
        background-position: center;
        height: 100vh;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .banner h1 {
        font-size: 3rem;
        font-weight: bold;
    }

    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      background-color: #ffffff;
      opacity: 0.9;
      color: #000;
    }
    .navbar.bg-azul {
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    .navbar.scrolled {
        background-color: #007bff; /* Azul para el fondo de la barra de navegación */
    }

    .whatsapp-btn {
        position: fixed;
        bottom: 150px;
        right: 10px;
        background-color: #25D366;
        color: rgb(24, 9, 109);
        border-radius: 50%;
        padding: 15px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        font-size: 24px;
        text-align: center;
        cursor: pointer;
        z-index: 999;
    }

    .whatsapp-btn:hover {
        background-color: #128C7E;
    }

    .section {
        padding: 60px 0;
    }

    .about-section {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        max-width: 1200px;
        margin: auto;
      }

      .about-image {
        flex: 1 1 400px;
        padding: 20px;
        text-align: center;
      }
  
      .about-image img {
        width: 100%;
        max-width: 500px;
        border-radius: 8px;
      }

      .about-text {
        flex: 1 1 400px;
        padding: 20px;
      }
  
      .about-text h2 {
        font-size: 28px;
        margin-bottom: 20px;
        color: #f5f5f5;
      }

      .about-text p {
        font-size: 16px;
        line-height: 1.6;
        color: #f5f5f5;
      }
  
      .about-text p span {
        color:  #60b1e7;
        font-weight: bold;
      }
  
      .about-text .btn {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 20px;
        background-color:    #001495;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
      }
  
      @media (max-width: 768px) {
        .about-section {
          flex-direction: column;
        }
  
        .about-text, .about-image {
          text-align: center;
        }
      }

      .navbar {
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #252525;;
      }
  
      .navbar a.nav-link,
      .navbar a.navbar-brand {
        color: #252525;
        text-shadow: none;
        font-weight: bold;
      }
  
      .navbar a.nav-link:hover,
      .navbar a.navbar-brand:hover {
        color: #555;
      }
  
      /* Opcional: eliminar transición si no la necesitas */
      .navbar {
        transition: none;
      }
  
      
     

     .servicio-card {
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      height: 300px;
      color: white;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .servicio-card:hover {
      transform: scale(1.03);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .servicio-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.55);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      text-align: center;
    }

    .servicio-card h5 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }

    .servicio-card p {
      font-size: 0.95rem;
    }
    
     .carousel-caption.custom-position {
      bottom: 30%; /* Subimos el texto */
    }

    .carousel-caption h5 {
      font-size: 2.8rem;
      font-weight: 700;
      text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
      color: #fff;
    }
  
    .carousel-caption p {
      font-size: 1.4rem;
      font-weight: 400;
      text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
      color: #f1f1f1;
    }

    .dropdown-mega {
      position: absolute;
      left: 0;
      width: 100%;
      background-color: white;
      display: none;
      padding: 2rem;
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      z-index: 1000;
    }

    .nav-item:hover .dropdown-mega {
      display: flex;
    }

    .dropdown-mega .col {
      text-align: center;
    }

    .dropdown-mega img {
      max-width: 100%;
      border-radius: 8px;
    }

    .dropdown-mega .title {
      font-weight: bold;
      margin-top: 0.5rem;
      font-size: 12px !important;
      text-decoration: none !important;
      color:#333333 !important
    }

     /* Reset completo de estilos para los controles */
.carousel-control-prev,
.carousel-control-next {
    all: unset !important; /* Elimina todos los estilos heredados */
    width: 50px !important;
    height: 50px !important;
    background-color: white !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    z-index: 10 !important;
}

/* Flechas personalizadas directamente con SVG */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
    all: unset !important;
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

/* Posicionamiento */
.carousel-control-prev {
    left: 20px !important;
}

.carousel-control-next {
    right: 20px !important;
}
.servicio-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.servicio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.servicio-img {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  object-fit: cover;
  height: 100%;
}
.servicio-icon {
  font-size: 2rem;
  color: #192f8c;
}
.servicio-titulo {
  color: #192f8c;
}

.text-muted{
     font-weight: bold !important;
     color: black !important;
}


.nav-item{
  padding-top:15px
}

.misBeneficios {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
}

.misBeneficios th,
.misBeneficios td {
  border: none;
  padding: 10px;
  text-align: left;
}


.navbar-light .navbar-nav .nav-link
 {
    color: #181818dd;
}

.fondo-nav {
    background-image:  url('../IMG/navi.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}
.nav-link{
color:white !important
}

#customCarousel {
  height: 95vh; /* O usa height: 300px si prefieres una altura fija */
  overflow: hidden;
  position: relative;
}

#customCarousel .carousel-item {
  height: 100%;
}

#customCarousel .carousel-item img {
  height: 100%;
  object-fit: cover;
  transition: transform 5s ease; /* zoom lento */
}

#customCarousel .carousel-item.active .zoom-img {
  transform: scale(1.1); /* efecto de acercamiento */
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

#customCarousel .carousel-item.active .zoom-img {
  animation: zoomIn 5s ease forwards;
}
.card:hover .card-body {
    background-color:  #001495; /* puedes ajustar este color */
    transition: background-color 0.3s ease;
    color:white
}
.bg-nosotros {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.bg-nosotros::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../IMG/background-contacto.png');
    background-size: cover;
    background-position: center;
    opacity: 0.9; /* Cambia el valor para más o menos opacidad */
    z-index: -1;
}