* {
    box-sizing: border-box;
}

.row {
    margin: 0; /* Elimina el margen lateral predeterminado */
    padding: 0; /* Elimina el padding lateral predeterminado */
}

.col {
    padding: 0; /* Asegúrate de que no haya padding en las columnas */
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Ocultar el scroll horizontal */
}

.container-fluid {
    min-height: 100vh; /* Asegura que ocupe al menos la altura total de la ventana */
    display: flex;
    flex-direction: column;
    padding: 0;
}


/* Fondo 1 */
.fondo1-services {
    background-image: url('../images/servicios/fondo1.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 900px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    }

/* Fondo 2 */
.fondo2-services {
    background-image: url('../images/servicios/fondo2.png'); 
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 1286px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    }

    /* Título Fondo 2 "¡SIENTE LA FELICIDAD DE ESTAR CONECTADO!" */

    .contenedor_titulo{

        margin:auto;
        text-align: center;
        width: 80%;
        margin-top: 80px;

    }

    .titulo_fondo2{
        color:#0E2DC4; 
        font-style: italic;
        font-weight: bold; text-shadow: 1px 1px 1px rgb(0, 0, 0);
        font-size: 3rem;
       
    }

    /* Cuadros azules con descripciones */

    .cuadro_azul{

        background-color: #0E2DC4;
        width: 80%;
        height: 500px;
        text-align: center;
        margin: auto;
        margin-top: 10%;
        border-radius: 20PX;
        padding: 10% 10%;
     }

     /* Posición de los cuadros azules */

     .cuadro_azul_top{
        margin-top: 250px;
     }

     /* Contenedor de los iconos */

     .icon{

        width: 40%;
        margin-top: -45px;
     }

     /* Contenedor de los iconos */

     .titulo_cuadro{

       font-size: 2rem;
     }

     /* Persona agarrando los botones */

     .content_person{

        margin: auto;
        text-align: center;
        margin-top: 1000px;
        
     }

     /* Imagen de la persona */

     .person{

        width: 75%;
        

     }

     /* Contenedor del banner azul */
     
    .content_banner {
    background-image: url('../images/servicios/banner.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%; /* Asegura que ocupe el 100% del contenedor */
    height: 150px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    
    }
    

     .titulo_banner{
        font-size: 55px;
        font-weight: bold;
    }

    /******** Tercera sección Piramide **** */

    .container-fluid .content_gris{

        background: rgb(197, 203, 221, 0.7); 
        height: auto;
        margin: auto;
        text-align: center;
        /* margin-top: 120px !important; */
        margin-top: 120px;
              
    }

    .piramide{
       
        width: 50%;
        margin-top: 40px;
    }

    .contenedor-boton{

        width: 30%;
        margin: auto;
        text-align: center;
        margin-top: 50px;

    }

    .btn-naranja{


        background-color: rgba(255, 127, 0, 1) !important; /* Color naranja sin transparencia */
        color: white !important;
        padding: 25px 25px; /* Padding para hacer los botones más grandes */
        font-weight: bold;
        font-size: 17px; /* Tamaño de la fuente */
        border-radius: 30px;
        cursor: pointer;
        opacity: 1 !important;
        
    }

    /* Clases responsivas */

    
    @media screen and (min-width: 1550px) {
      .container-fluid .content_banner {
        margin-top: -5%;
      }

      .des_cuadro{
        font-size: 1.2rem;
      }
    }
    
    @media screen and (min-width: 1680px) {
      .container-fluid .content_banner {
        margin-top: -7%;
      }

      .des_cuadro{
        font-size: 1.3rem;
      }
    }

    @media screen and (min-width: 1920px) {
      .container-fluid .row .content_gris {
        margin-top: 200px;
      }
    }
      
      

    @media screen and (min-width: 1024px) {
    
      .container-fluid {
        display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }

    .container-fluid .content_gris {
      margin-top: 100px;
    }
        
  }

    @media only screen and (max-width: 1024px) {
        /* Ajustes para pantalla de 1024px */
      
        /* Fondo 1 */
        .fondo1-services {
          height: 600px; /* Ajuste de altura para pantallas más pequeñas */
          background-size: cover; /* Para que la imagen se ajuste mejor */
        }
      
        /* Fondo 2 */
        .fondo2-services {
          height: 800px; /* Ajuste de altura */
          background-size: contain; /* Evitar que se corte la imagen */
        }
      
        /* Cuadros azules */

        .cuadro_azul_top{

            margin-top: 50% !important;
        }
        .cuadro_azul {
          width: 90%; /* Aumentar el ancho para pantallas medianas */
          height: 400px; /* Ajustar la altura */
          padding: 5% 5%; /* Ajuste de padding */
          margin-top: 50px; /* Reducir el espacio superior */
        }
      
        /* Títulos */
        .titulo_fondo2 {
          font-size: 2.5rem; /* Ajustar el tamaño de la fuente */
        }
        
        .titulo_cuadro {
          font-size: 1.5rem; /* Reducir el tamaño del texto en los cuadros azules */
        }
      
        /* Iconos */
        .icon {
          width: 30%; /* Ajustar el tamaño de los iconos */
          margin-top: -30px; /* Ajustar la posición */
        }
      
        /* Persona agarrando los botones */
        .person {
          width: 65%; /* Ajuste del tamaño de la imagen */
        }
      
        /* Banner */
        .content_banner {
          height: 120px; /* Ajuste de altura del banner */
        }

        .container-fluid .content_gris{

            /* margin-top: 22% !important; */
            margin-top: 22%;
        }
      
        .titulo_banner {
          font-size: 45px; /* Ajustar el tamaño del texto del banner */
        }
      
        /* Pirámide */
        .piramide {
          width: 70%; /* Ajustar el ancho de la imagen */
        }
      
        /* Botones */
        .contenedor-boton {
          width: 80%; /* Aumentar el ancho de los botones */
        }
      
        .btn-naranja {
          padding: 15px 20px; /* Ajuste de tamaño de los botones */
          font-size: 15px; /* Reducir el tamaño del texto del botón */
        }
      }
    
      @media only screen and (max-width: 853px) {

        .container-fluid .content_gris{
      
              margin-top: 15%;
      }
        
        }
     
      @media only screen and (max-width: 820px) {

        .container-fluid .content_gris{
      
              margin-top: 15%;
      }
        
        }

@media (max-width: 768px) {
    /* Fondo 1 */
    .fondo1-services {
        height: 400px; /* Reducir altura en pantallas pequeñas */
        background-size: cover;
    }

    /* Fondo 2 */
    .fondo2-services {
        height: 600px; /* Ajustar altura */
        background-size: cover;
    }

    /* Título Fondo 2 */
    .titulo_fondo2 {
        font-size: 2rem; /* Reducir tamaño de la fuente */
    }

    /* Cuadros azules */
    .cuadro_azul {
        width: 100%; /* Ajustar el ancho al 100% en pantallas pequeñas */
        height: 500px;
        padding: 20px; /* Reducir padding */
        margin-top: 20px;
    }

    /* Iconos */
    .icon {
        width: 50%; /* Reducir tamaño del icono en pantallas pequeñas */
        margin-top: 0;
    }

    /* Título en Cuadros Azules */
    .titulo_cuadro {
        font-size: 1.5rem; /* Reducir tamaño de título */
    }

    /* Imagen de persona */
    .person {
        width: 100%; /* Ajustar imagen al 100% del contenedor */
    }

    /* Banner */
    .content_banner {
        height: 100px; /* Reducir altura del banner */
    }
    .titulo_banner {
        font-size: 2rem; /* Reducir tamaño de la fuente en el banner */
    }

    .container-fluid .content_gris{

        /* margin-top: 65% !important; */
        margin-top: 65%;
    }
    /* Pirámide */
    .piramide {
        width: 80%; /* Reducir el tamaño de la pirámide */
    }

    /* Botones */
    .contenedor-boton {
        width: 80%; /* Asegurar que el botón no se desborde */
    }

    .btn-naranja {
        font-size: 1rem; /* Reducir tamaño del botón */
        padding: 15px 15px; /* Ajustar el padding */
    }
}

@media (max-width: 576px) {
    /* Fondo 1 */
    .fondo1-services {
        height: 300px; /* Reducir aún más la altura */
    }

    /* Fondo 2 */
    .fondo2-services {
        height: 500px; /* Ajustar altura */
    }

    /* Título Fondo 2 */
    .titulo_fondo2 {
        font-size: 1.5rem; /* Reducir más el tamaño de la fuente */
    }

    /* Cuadros azules */
    .cuadro_azul {
        height: auto;
        padding: 10px; /* Reducir padding */
    }

    /* Iconos */
    .icon {
        width: 60%; /* Ajustar tamaño del icono */
    }

    /* Título en Cuadros Azules */
    .titulo_cuadro {
        font-size: 1.25rem; /* Reducir aún más el tamaño de título */
    }

    /* Banner */
    .content_banner {
        height: 80px; /* Reducir altura del banner */
    }

    .container-fluid .content_gris{

        /* margin-top: 1000px !important; */
        margin-top: 1000px;
    }

    .titulo_banner {
        font-size: 1.5rem; /* Reducir más el tamaño de la fuente */
    }

    /* Pirámide */
    .piramide {
        width: 90%; /* Reducir más el tamaño de la pirámide */
    }

    /* Botones */
    .contenedor-boton {
        width: 90%; /* Asegurar que el botón se ajuste */
    }

    .btn-naranja {
        font-size: 0.9rem; /* Reducir tamaño del botón */
        padding: 10px 10px; /* Ajustar padding */
    }
}

@media (max-width: 540px) {

  .container-fluid .content_gris{

        /* margin-top: 1250px !important; */
        margin-top: 1250px;
    }
    
}

@media only screen and (max-width: 430px) {

  .container-fluid .content_gris{

   margin-top: 1000px;
}

}

@media only screen and (max-width: 420px) {
    /* Fondo 1 */
    .fondo1-services {
      height: 300px; /* Altura reducida para pantallas pequeñas */
      background-size: cover; /* La imagen de fondo cubre toda el área */
    }
  
    /* Fondo 2 */
    .fondo2-services {
      height: 400px; /* Altura reducida */
      background-size: cover;
    }
  
    /* Cuadros azules */
    .cuadro_azul {
      width: 100%; /* Los cuadros ocupan todo el ancho */
      height: auto; /* Altura automática para ajustarse al contenido */
      padding: 10px; /* Padding reducido */
      margin-top: 20px; /* Espacio reducido entre los cuadros */
    }
  
    /* Títulos */
    .titulo_fondo2 {
      font-size: 1.8rem; /* Tamaño de texto reducido */
    }
    
    .titulo_cuadro {
      font-size: 1rem; /* Tamaño de texto aún más pequeño en los cuadros */
    }
  
    /* Iconos */
    .icon {
      width: 40%; /* Iconos más pequeños */
      margin-top: -20px; /* Ajuste en la posición superior */
    }
  
    /* Persona agarrando los botones */
    .person {
      width: 100%; /* Imagen más pequeña de la persona */
    }
  
    /* Banner */
    .content_banner {
      height: 80px; /* Altura más pequeña del banner */
    }
  
    .titulo_banner {
      font-size: 20px; /* Texto del banner reducido */
    }

    .container-fluid .content_gris{

        /* margin-top: 820px !important; */
        margin-top: 820px;
    }
  
    /* Pirámide */
    .piramide {
      width: 80%; /* Imagen de la pirámide más pequeña */
    }
  
    /* Botones */
    .contenedor-boton {
      width: 100%; /* Botones ocupan el 100% del ancho */
    }
  
    .btn-naranja {
      padding: 10px 15px; /* Padding reducido para los botones */
      font-size: 13px; /* Texto más pequeño en los botones */
    }
  }

  @media only screen and (max-width: 414px) {

    .container-fluid .content_gris{

     margin-top: 850px;
  }

  }

  @media only screen and (max-width: 375px) {

  .container-fluid .content_gris{

        margin-top: 820px;
}
  
 }

 @media only screen and (max-width: 360px) {

  .container-fluid .content_gris{

        margin-top: 810px;
}
  
  }

  @media only screen and (max-width: 344px) {

    .container-fluid .content_gris{
  
          margin-top: 800px;
  }
    
    }

    /* Estilos para la sección sin  el carrusel */

.content_wgh{

  /* position: absolute; */
  margin-top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  width: 80%; /* Ajusta el ancho del carrusel */
  height: auto;
  font-size: 2rem;
}

.contenedor_zonas{

  width: 100%;
  margin-top: 5%;
 
}

.contenedor_im_zonas{

  position: relative;
 
}

.caption_zonas{
  
  position: relative;
  top: 80px; 
  left: 50%;
  transform: translateX(-50%);
  margin: 0; text-align: center;
  padding: 5px;
  z-index: 10;
}


@media (max-width: 1024px) {

  .content_wgh{
     
      margin-top: 550px;
      font-size: 1rem;
   
  }

  .caption_zonas{
  
      top: 50px; 
      
  }

}

@media (max-width: 820px) {

  .content_wgh{
     
      margin-top: 450px;
      font-size: 1rem;
   
  }

  .caption_zonas{
  
      top: 50px; 
      
  }

}


@media (max-width: 768px) {

  .content_wgh{
      margin-top: 400px;
      font-size: 1rem;
  }

  .caption_zonas{
  
      top: 50px; 
      
  }

}

@media (max-width: 540px) {

  .content_wgh{
      margin-top: 250px;
      font-size: 1rem;
  }

  .caption_zonas{
  
      top: 50px; 
      
  }

}

@media (max-width: 430px) {

 .caption_zonas{
  
      top: 35px; 
      
  }

}

@media (max-width: 390px) {

  .content_wgh{
      margin-top: 200px;
      font-size: 0.7rem;
  }

  .caption_zonas{
  
      top: 30px; 
      
  }

}

@media (max-width: 375px) {

  .content_wgh{
      margin-top: 200px;
      font-size: 0.7rem;
  }

  .caption_zonas{
  
      top: 30px; 
      
  }

}