body {
    /* font-family: 'Roboto', sans-serif; */
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 100px; /* Espacio para el cuadro flotante */
  }

  .bg-light-blue {
    background-color: #e5f6ff;
  }

  .logo-image{
    /* width: 134.14px;
    height: 48px; */
    width: 221px !important;
    height: 73px !important;
  }

  .color-orange{
    color: #FF6701 !important;
  }

  .border-color-orange{
    border-color: #FF6701 !important;
  }

  .color-blue-title{
    color: #1A65AE !important;
  }

  .color-blue-navbar{
    color: #1B66AF !important;
  }

  .size-title-carousel{
    font-weight: 600 !important;
  }

  .size-title-navbar{
    font-weight: 600 !important;
  }

  .btn-orange{
    color : white !important;
    background-color: #FF6701 !important;
  }

  .size-content-txt-carousel{
    width: 33rem !important;
  }

  .color-footer-carousel-blue{
    background-color: #1C65AF;
  }

  .color-footer-carousel-orange{
    background-color: #FF6701;
  }

  .py-6 {
    padding-top: 3.8rem !important;
    padding-bottom: 3.8rem !important;
  }

  .py-11 {
    padding-top: 8.8rem !important;
    padding-bottom: 8.8rem !important;
  }

  .height-img{
    height: 540px !important;
  }

  .blue-row{
    background-color: #1A65AE !important; 
    height: 0.6rem !important; 
    width: 30rem !important; 
    margin: 15px 0 !important;
  }

  .mt-negative-blue-row{
    /* margin-top: -6rem !important; */
    margin-top: -11rem !important;
  }

  .whatsapp-card {
    position: fixed;
    bottom: 20px;
    /* right: 20px; */
    right: 5rem;
    padding: 15px;
    /* background-color: #f8f9fa; */
    background-color: #454A4D;
    /* color: white !important; */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 320px;
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
    /* ======== */
    /* margin-top: -6px; */
  }
  .whatsapp-card.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  /* .whatsapp-icon {
    position: absolute;
    top: -15px;
    right: 10px;
    background-color: #25d366;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  } */

  .whatsapp-icon {
    position: absolute;
    top: -19px;
    /* right: -15px; */
    right: 10px;
    /* background-color: #25d366; */
    /* padding: 10px; */
    /* border-radius: 50%; */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  }

  .whatsapp-icon img {
    width: 48px;
    height: 48px;
  }

  .whatsapp-title{
    margin-top: -6px;
    margin-bottom: 3px;
  }

  .whatsapp-text{
    margin-bottom: -6px;
  }
  
  .carousel-indicators {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin-top: 20px !important;
    /* position: unset !important; */
    /* bottom: 7rem !important; */
    bottom: 12rem !important;
    left: 55rem !important;
  }

  .carousel-indicators-btn {
    /* display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin-top: 20px !important; */
    position: absolute !important;
    /* bottom: 7rem !important; */
    bottom: 12rem !important;
    left: 38rem !important;
  }

  .carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    background-color: #fff !important; /* Color de fondo blanco */
    border: 2px solid #F56706 !important; /* Borde naranja */
    border-radius: 50% !important; /* Forma circular */
    cursor: pointer !important;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
    opacity: 1 !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
  .carousel-indicators .active {
    background-color: #F56706 !important; /* Color de fondo naranja cuando está activo */
    border-color: #F56706 !important; /* Borde coincide con el fondo cuando está activo */
  }

  .carousel-inner {
    position: relative !important;
  }
  .carousel-footer {
    /* position: absolute !important;
    bottom: 140px !important;
    left: 52rem !important;
    right: 18rem !important; */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
  }

  /* .btn-orange {
    background-color: #F56706;
    color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    border: none;
    transition: background-color 0.3s ease-in-out;
  } */
  .btn-orange:hover {
    background-color: #e55e00;
  }

  /* .carousel-indicators button {
    width: 15px !important;
    height: 15px !important;
    background-color: #ffa500 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: none !important;
    transition: background-color 0.3s ease-in-out !important;
  }
  .carousel-indicators .active {
    background-color: #ff6700 !important;
  } */

  #contact {
    height: 400px; /* Simula una sección de contacto */
    margin-top: 50px;
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
  }

  .full-height {
    /* height: 100vh;  */
    margin-top: -6rem !important; 
  }

  .card-img{
    /* width: 375px !important; */
    height: 200px !important;
    border-radius: 1rem !important;
    /* filter: blur(1px)  brightness(80%) !important; */
    filter: brightness(80%) sepia(40%) hue-rotate(-20deg) !important;
    /*filter: blur(1px) brightness(80%) sepia(40%) hue-rotate(-20deg) !important;*/
    /* filter: blur(1px) brightness(70%) sepia(80%) !important; */
  }

  .text-primary2 {
    color: #072b50 !important;
    /* text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff; */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    font-weight: bolder !important;
  }

  .mt-8 {
    margin-top: 7rem !important;
  }

  .card-style{
    border-color: white !important;
    border-radius: 16px !important;
    /* width: 22rem !important;
    height: 12.7rem !important; */
  }

  .orange-row{
    background-color: #F56706 !important;
    height: 0.25rem !important;
    margin-bottom: 14px !important;
  }

  /* Estilo para la sección de video */
  .video-container {
    position: relative;
    width: 100%;
    max-width: 960px; 
    background-color: #333;
    margin: auto;
    padding: 20px 0;
  }

  /* Estilo para el logo y texto en la esquina superior izquierda */
  .video-header {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    color: white;
    z-index: 10;
  }

  .video-header img {
    width: 50px;
    height: auto;
    margin-right: 10px;
  }

  .video-header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
  }

  /* Estilo para la franja azul */
  .blue-stripe {
    background-color: #0D68B1;
    height: 50px;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px;
    z-index: -1;
  }

  .blue-bar {
    background-color: #007bff;
    height: 100px; /* Altura de la franja azul */
    position: relative;
    z-index: 1;
    margin-top: -50px; /* Para superponer la franja azul al video */
}
/* .video-container {
    position: relative;
    z-index: 2;
} */
.video-frame {
    width: 100%;
    height: 500px; /* Altura del video */
    border: none;
}

.mt-15{
  margin-top: 15rem !important;
}

.mb-15{
  margin-bottom: 15rem !important;
}

.img-logos-clientes{
  width: 11.25rem !important;
  height: 11.25rem !important;
}

.display-12{
  font-size: 4rem !important;
}


@media (max-width: 768px) {
  .height-img {
    height: auto !important; /* Permite que la imagen se ajuste automáticamente en pantallas pequeñas */
    max-width: 100% !important;
  }

  .size-content-txt-carousel {
    width: 100% !important; /* Ajusta el texto a 100% del contenedor */
    font-size: 1rem !important; /* Reduce el tamaño de fuente para pantallas pequeñas */
  }

  .display-12 {
    font-size: 2.5rem !important; /* Reduce el tamaño del título para móviles */
  }

  .carousel-footer button {
    left: 1rem !important;
    bottom: 2rem !important; /* Reajusta el botón en pantallas pequeñas */
  }

  .carousel-indicators {
    left: auto !important;
    bottom: 1rem !important;
    right: 0 !important;
    justify-content: center !important;
  }

  .blue-row {
    width: 100% !important; /* La franja azul se adapta a pantallas pequeñas */
  }

  .mt-negative-blue-row{
    /* margin-top: -6rem !important; */
    margin-top: 0rem !important;
  }

  /* #carouselExampleDark{
    height: 55rem !important;
  } */

  .carousel-item{
    height: 57rem !important;
  }

  .btn-orange {
    padding: 0.5rem 2rem !important; /* Botón más pequeño en móviles */
    font-size: 1rem !important;
  }

  .d-flex {
    flex-direction: column !important; /* Alinea las imágenes y texto en una sola columna */
  }

}

img {
  max-width: 100%;
  height: auto;
}