* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Esto ayuda a manejar el padding y el borde dentro del ancho y alto especificado */
}

html, body {
    width: 100%;
    height: 100%; /* Esto asegura que el html y el body ocupen toda la altura y anchura de la ventana */
    overflow-x: hidden; /* Esto previene cualquier desbordamiento horizontal */
    font-family: 'Arial', sans-serif;
}


header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0); /* Fondo transparente inicialmente */
    transition: background-color 0.3s ease-in-out; /* Transición suave para el color de fondo */
    z-index: 1000; /* Alta z-index para mantener el header sobre otros contenidos */
}

header.scrolled {
    background-color: rgba(255, 255, 255, 0.9); /* Fondo menos transparente al desplazarse */
}



#home {
    height: 100vh; /* 100% del alto de la pantalla */
    width: 100vw; /* 100% del ancho de la pantalla */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background: url('/img/bglp.webp') no-repeat center center; /* Si deseas agregar una imagen de fondo */
    background-size: cover; /* Para que la imagen cubra toda la sección */
}

#home h1,
#home p {
    color: white; /* Asegúrate de que el color del texto contraste con tu fondo */
}

#home a.btn-primary {
    margin-top: 20px; /* Espacio adicional sobre el botón si es necesario */
}


#features .col-md-4 {
    padding: 20px;
}

#pricing {
    background: #fff;
}

footer {
    background-color: #333;
    color: white;
}

footer p {
    margin-bottom: 0;
}

.text-background {
    background-color: rgba(0, 0, 0, 0.5); /* Negro con un 50% de transparencia */
    padding: 20px; /* Añade un poco de espacio alrededor del texto */
    border-radius: 8px; /* Opcional: añade bordes redondeados */
    color: white; /* Asegura que el texto sea blanco para resaltar sobre el fondo oscuro */
}

.card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-10px);
}

.card-header {
    font-size: 1.25rem;
    font-weight: 500;
}

.btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
}

.btn-outline-primary:hover {
    background-color: #007bff;
    color: #fff;
}

.card.border-primary {
    border-color: #007bff;
}

.background-image {
    background-size: cover;
    background-position: center;
    text-align: center;
}

input[type="text"], input[type="email"], input[type="tel"] {
    margin-bottom: 20px;
    padding: 10px;
    width: 50%; /* Ajusta al tamaño deseado, considerando la responsividad */
    border: none;
    border-radius: 5px;
}

.btn-primary {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #007bff;
    border: none;
    cursor: pointer;
}

.form-control, .btn {
    display: block;  /* Hace que el elemento sea un bloque, necesario para centrar */
    margin: 0 auto;  /* Centra el elemento horizontalmente */
    width: 95%;      /* Define un ancho específico, ajusta esto según tus preferencias */
}