@import url('https://fonts.cdnfonts.com/css/segoe-ui-4');
*  html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-family: 'Segoe UI', sans-serif;
    }

    body{
        min-height: 100vh; /* 100% del alto de la ventana visible */
        display: flex;
        flex-direction: column;
      }
      
      /*barra general*/
      .header {
          background-color: #ffffff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 85px;
          padding: 5px 10%;
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 99;
      }
      
      
      .header .logo{
          margin-right: auto;
      }
      
      .header .logo img{
          height: 90px;
          width: auto;
          transition: 0.3s;
      }
      
      .header .logo img:hover{
          transform: scale(1.15);
      }
      
      .header .nav-links{
          list-style: none;
      }
      
      .nav-links{
          padding-top: 10px;
      }
      .btn-2{
          padding-bottom: 10px;
      }
      
      .header .nav-links li{
          display: inline-block;
          padding: 0 20px;
      }
      
      .header .nav-links li:hover,
      .overlay a:hover{
          transform: scale(1.1)
      }
      
      .header .nav-links a{
          color: #0b1531;
          font-weight: bold;
      }
      
      .header .nav-links li a:hover{
          color: #00743e;
      
      }
      /*boton movil*/
      
      .menu {
          display: none;
      }
      .header .btn-2 button,
      .header .menu button,
      .btn-nav-r{
          margin-left: 20px;
          font-weight: 700;
          color: #fff;
          padding: 9px 25px;
          background: #3594C2 ;
          border: none;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.3s ease 0s;
      }
      
      
      
      .btn-nav-r:hover{
          background-color: #00743e;
      }
      .header .btn-2 button:hover,
      .header .menu button:hover {
          background-color: #00743e;
          color: #fff;
          transform: scale(1.1);
      }
      
      /*boton llamada*/
      .header .btn-3 button:hover{
          background-color: #2577f3;
          color: #fff;
          transform: scale(1.1);
      }
      
      .header .btn-3 button,
      .header .menu button,
      .btn-nav-r{
          margin-left: 20px;
          font-weight: 700;
          color: #fff;
          padding: 9px 25px;
          background:  #3594C2;
          border: none;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.3s ease 0s;
      }
      .btn-3{
        padding-bottom: 10px;
      }
      
      /*tarjetas*/
      .card-container {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .card {
          flex: 1;
          height: 450px;
          max-width: 300px;
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 128, 0, 0.2); /* Cambia el color y ajusta los valores según necesites */
          transition: transform 0.3s, box-shadow 0.3s;
          margin: 10px;
          overflow: hidden;
        }
        .card-content h2{
          padding-top: 5px;
        }
        
        .card-content {
          padding: 20px;
        text-align: center;
          padding: 20px;
        }
        .card-content p {
          text-align: justify;
        }
        .card:hover {
          transform: translateY(-20px) translateX(10px);
          box-shadow:  -10px 8px 16px rgba(0, 0, 0, 0.1), -10px 8px 16px rgba(0, 128, 0, 0.2); /* Cambia el color y ajusta los valores según necesites */
      
        }
        
    
      
      .img-card{
          margin-left: auto;
          margin-right: auto;
          height: 125px;
          width: 160px;
          padding-bottom: 15px;
      }
      
      .contenedor .detalle-portada:hover {
        transition: transform 0.3s, box-shadow 0.3s;
        transform: translateX(19px);
        box-shadow: 0 20px 40px rgb(72, 170, 228);
        background: #26a76b;
        color: #ffffff;
        padding: 10px;
        border-radius: 8px;
      }

/*responsive*/
@media screen and (max-width: 2200px) {
      /*pantallas grandes*/
      
        /*ESTILOS SLIDER*/

        .slider-container {
            position: relative;
            overflow: hidden;
          }
          
          .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
          }
          
          .slide {
            flex: 0 0 100%;
            display: flex;
            align-items: center;
          }
          
          .slide img {
            width: 100%;
            max-height: auto;
          }

                /*pie de pagina*/
      .footer {
        flex-wrap: wrap;
        display: flex;
        max-width: 100vw;
        background-color: #333;
        color: white;
      }

      
      .column {
        flex: 1;
        width: 50%; /* Para que dos columnas se ajusten en una fila */
        text-align: center;
      }
      
      .column h3 {
        margin-top: 0;
        font-size: 1.5em;
        text-align: left;
      }
      
      .column p {
        margin-top: 10px;
        font-size: 15px;
        text-align: left;
      }

      .img-wsp-fotter {
        max-height: 25px;
      }
    

/* Establece la posición relativa en el contenedor */
.slider {
    position: relative;
  }
  
  .slide {
    position: relative; /* Agrega una posición relativa para que el texto sea relativo a este slide */
    display: flex;
    align-items: center; /* Centra verticalmente */
  }
  
  .slide-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Ocupa el 50% del ancho del slide */
    color: rgb(71, 69, 69);
    padding-left: 10%;
    z-index: 1; /* Asegura que el texto esté sobre la imagen */
    box-sizing: border-box; /* Incluye el relleno en el ancho */
  }
  
  .titulo-slidebar {
    padding-top: 85px;
    font-weight: bold;
    font-size: 2.5em;
  }
  
  .detalle-slidebar {    /* Estilos para el detalle de la imagen */
    font-size: 1.8em;
    margin-top: 10px; /* Espacio entre el título y el detalle */
  }
  
  .titulo-slidebar-2 {
    padding-top: 95px;
    font-weight: bold;
    font-size: 3.5em;
  }
  
.slider-indicators {
display: flex;
justify-content: center;
margin-top: 10px;
}

.indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: gray;
margin: 0 5px;
cursor: pointer;
margin-bottom: 20px;
}
          
.img-footer{
    max-width: 250px;
}

      
      }
      
      /*responsive oculta inicio servicios*/
      @media screen and (max-width: 1200px) {
        /* Estilos para pantallas de laptop */
        .nav-links, .btn-2, .btn-3{
            display: none;
        }
        .menu   {
            display: inherit;
        }
        
        .img-footer{
            max-width: 125px;
        }
      }
      
      
      @media screen and (max-width: 768px){
            /* Estilos para pantallas de teléfono */
          .header .overlay a{
              font-size: 20px;
          }
          .header .overlay .close{
              font-size: 40px;
              top: 15px;
              right: 35px;
          }  


          .header .logo img{
            height: 65px;
            width: auto;
            transition: 0.3s;
        }

/* Establece la posición relativa en el contenedor */
.slider-container {
  position: relative;
  overflow: hidden;
  padding-top: 45px;
}

.slide img {
  width: 100%;
  height: 200px;
}

.slider {
    position: relative;
  }
  
  .slide {
    position: relative; /* Agrega una posición relativa para que el texto sea relativo a este slide */
    display: flex;
    align-items: center; /* Centra verticalmente */
  }
  
  .slide-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Ocupa el 50% del ancho del slide */
    color: rgb(71, 69, 69);
    padding-left: 10%;
    z-index: 1; /* Asegura que el texto esté sobre la imagen */
    box-sizing: border-box; /* Incluye el relleno en el ancho */
  }
  
  .titulo-slidebar {
    font-weight: bold;
    margin-top: -55px;
    font-size: 15px;
  }
  
  .detalle-slidebar {    /* Estilos para el detalle de la imagen */
    font-size: 7px;
    margin-top: 10px; /* Espacio entre el título y el detalle */
  }
  
  .titulo-slidebar-2 {
    margin-top: -55px;
    font-size: 10px;
  }

  .slider-indicators {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    }

      /*tarjetas-portada*/
      .card-container {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        
        .card-content {
          padding: 20px;
          text-align: center;
          flex: 1;
          max-width: 300px;
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s, box-shadow 0.3s;
          margin: 10px;
          overflow: hidden;
        }
      
        .card-content p {
          text-align: justify;
        }
        
        .card-content {
          padding: 20px;
        }
        
        .card {
          flex: 1;
          height: 450px;
          max-width: 300px;
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(7, 233, 101, 0.1);
          transition: transform 0.3s, box-shadow 0.3s;
          margin: 10px;
          overflow: hidden;
        }
      
        .card:hover {
          transform: translateY(-10px);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
      
      /*pie de pagina*/
      .footer {
          flex-wrap: wrap;
          display: flex;
          max-width: 100vw;
          background-color: #333;
          color: white;
        }

        
        .column {
          flex: 1;
          width: 50%; /* Para que dos columnas se ajusten en una fila */
          text-align: left;
        }
        
        .column h3 {
          margin-top: 0;
          font-size: 25px;
        }
        
        .column p {
          margin-top: 10px;
          font-size: 55%;
          text-align: left;
        }
        .img-wsp-fotter {
          max-height: 15px;
        }
      
       }
         
      
      /*navbar mobil*/
      
      .header a{
          text-decoration: none;
      }
      
      .header .overlay {
          height: 100%;
          width: 0;
          position: fixed;
          z-index: 99;
          left: 0;
          top: 0;
          background-color: #ffffff;
          overflow: hidden;
          transition: all 0.3s ease 0.3s;
          
      
      }
      
      .header .overlay .overlay-content {
          display: flex;
          height: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      
      }
      
      .header .overlay a{
          padding: 5px;
          font-size: 36px;
          display: block;
          transition: all 0.3s ease 0s;
          font-weight: 700  ;
          color: #0b1531;
      }
      
      .header .overlay a:hover,
      .header .overlay a:focus{
          color: #26a76b;
      }
      
      .header .overlay .close {
          position: absolute;
          top: 20px;
          right: 45px;
          font-size: 45px;
      }
      
      /*boton flotante whatsapp*/
      
      .btn-whatsapp{
          position: fixed;
          right: 25px;
          bottom: 10px;
          z-index: 90;
      }
      
      .btn-whatsapp:before,
      .btn-whatsapp:after {
          content: "";
          position: absolute;
          left: 15px;
          width: 45px;
          height: 45px;
          border-radius: 50%;
          background-color: #00e676;
          opacity: 0;
          animation: onda 1.7s infinite;
      }
      
      .btn-whatsapp:before{
          animation-delay: 1s;
      }
      
      .btn-whatsapp:after{
          animation-delay: 1.3s;
      }
      
      .btn-whatsapp img  {
          position: relative;
          z-index: 4;
          right: -15px;
          height: 50px;
          width: 50px;
      }
      
      /*ondas boton whatsapp*/
      @keyframes  onda{
          0%{
              transform: scale(1);
          }
          15%{
              opacity: 1;
          }
      
          100%{
              opacity: 0;
              transform: scale(2.5);
          }
      }
      
      
      /*portada*/
        .contenedor{
          position: relative;
          display: inline-block;
          text-align: center;
          max-width: 100%;
      }
       
      
      /*pie de pagina*/
      .footer {
          display: flex;
          background-color: #333;
          color: white;
          padding: 20px;
          
        }
        
      
      
        .column {
          flex: 1;
          padding: 0 20px;
        }
        
        .column h3 {
          margin-top: 0;
        }
        
        .column p {
          margin-top: 10px;
        }
      
        /*logos*/
        .clientes {
          background-color: #f0f0f0;
          padding: 40px 0;
          text-align: center;
          margin: 0 10px; /* Ajusta los márgenes izquierdo y derecho */
        }
        
        .clientes h2 {
          margin-bottom: 20px;
        }
        .carousel-inner img {
          max-width: 100px;
          margin: auto;
          height: 65px;
        }
        .container {
          display: flex;
          flex-direction: column; /* Cambia la dirección principal a "column" */
          justify-content: center; /* Centra horizontalmente */
          align-items: center; /* Centra verticalmente */  
          flex-grow: 1;
          margin-bottom: 20px;
          padding: 20px;
        }