/* Imagen de fondo que ocupa el 50% de la altura y 100% del ancho */
.full-background {
    background-image: url('../images/slide2.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50vh;
    width: 100vw;
    position: relative;
}

/* Overlay oscuro semitransparente */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Negro con 30% de opacidad */
    z-index: 1;  /* Coloca el overlay justo encima del fondo */
}

/* El contenido sobre la imagen debe estar por encima del overlay */
.container-text, .navbar {
    position: relative;
    z-index: 2;  /* Asegura que el contenido esté por encima del overlay */
}

/* Navbar completamente transparente inicialmente */
.navbar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    border: none;
    transition: background-color 0.3s ease;
}

/* Navbar cuando se hace scroll */
.navbar-scrolled {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo sólido al hacer scroll */
}

/* Estilo del título y texto de los links */
.navbar-brand {
    color: white;
    font-weight: bold;
}

/* Ajustar para que las opciones de menú estén alineadas a la derecha */
.navbar-nav {
    margin-left: auto;
}

/* Estilo del texto del menú */
.nav-link {
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    position: relative;
    transition: all 0.3s ease;
}

/* Efecto hover: Fondo blanco y texto negro */
.nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.nav-link:hover::before {
    transform: scaleX(1);
    transform-origin: center;
}

.nav-link:hover {
    color: black;
}

/* Contenido centrado dentro del contenedor de la imagen */
.container-text {
    padding-top: 10vh;
    text-align: center;
    color: white;
}

.section {
    padding: 60px 20px; /* Aumenta el padding para más espacio */
    transition: transform 0.3s ease;
    background-color: rgb(241, 241, 241); /* Color de fondo suave */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 100%; /* Asegura que ocupe el 100% del ancho */
}

/* Efecto hover de crecimiento */
.section:hover {
    transform: scale(1.05); /* Aumentar tamaño */
    z-index: 1; /* Asegura que la sección crezca sobre las demás */
}

/* Estilo de las imágenes */
.img-fluid-custom {
    max-height: 300px; /* Altura máxima de las imágenes */
    object-fit: cover; /* Mantener proporciones de la imagen */
}

/* Espaciado entre texto e imágenes */
.text-content {
    margin-top: 20px; /* Espacio superior para el texto */
}

/* Evitar el desbordamiento horizontal */
body {
    overflow-x: hidden; /* Oculta el desbordamiento horizontal */
}

.contact-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Color de fondo suave */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.contact-image {
    max-height: 150px; /* Altura máxima de la imagen */
    object-fit: cover; /* Mantener proporciones de la imagen */
}

.about-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Color de fondo suave */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-bottom: 30px; /* Espacio entre secciones */
}

/* Estilo para las imágenes */
.about-image {
    max-height: 300px; /* Altura máxima de la imagen */
    object-fit: cover; /* Mantener proporciones de la imagen */
    transition: transform 0.3s ease; /* Transición para el efecto hover */
}

/* Efecto hover de crecimiento */
.about-image:hover {
    transform: scale(1.05); /* Aumentar tamaño */
    z-index: 1; /* Asegura que la imagen crezca sobre las demás */
}

/* Espaciado entre texto e imágenes */
.text-content {
    margin-top: 20px; /* Espacio superior para el texto */
}

/* Espaciado entre los logos de los clientes */
.client-logo {
    max-height: 100px; /* Altura máxima de los logos */
    margin: 10px; /* Espacio entre logos */
    transition: transform 0.3s ease; /* Transición para el efecto hover */
}

/* Efecto hover de crecimiento en logos de clientes */
.client-logo:hover {
    transform: scale(1.1); /* Aumentar tamaño */
    z-index: 1; /* Asegura que el logo crezca sobre los demás */
}

.product-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Color de fondo suave */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-bottom: 30px; /* Espacio entre secciones */
}

/* Estilo para las imágenes */
.product-image {
    max-height: 300px; /* Altura máxima de la imagen */
    object-fit: cover; /* Mantener proporciones de la imagen */
    transition: transform 0.3s ease; /* Transición para el efecto hover */
}

/* Efecto hover de crecimiento */
.product-image:hover {
    transform: scale(1.05); /* Aumentar tamaño */
    z-index: 1; /* Asegura que la imagen crezca sobre las demás */
}

.text-justify {
    text-align: justify; /* Alinear el texto a la derecha */
}

.header {
    background-color: #007bff; /* Color de fondo azul */
    color: white;
    padding: 60px 20px;
    text-align: center;
}
.post {
    margin-bottom: 30px; /* Espacio entre publicaciones */
    border: 1px solid #dee2e6; /* Borde alrededor de las publicaciones */
    border-radius: 5px; /* Bordes redondeados */
    overflow: hidden; /* Para asegurar que el contenido no desborde */
    transition: transform 0.3s; /* Transición para el efecto hover */
}
.post:hover {
    transform: scale(1.02); /* Aumentar tamaño al pasar el cursor */
}
.post img {
    max-height: 200px; /* Altura máxima de las imágenes de los posts */
    object-fit: cover; /* Mantener proporciones de la imagen */
    width: 100%; /* Ancho completo */
}
.sidebar {
    border: 1px solid #dee2e6; /* Borde alrededor de la barra lateral */
    padding: 20px; /* Espacio interno */
    border-radius: 5px; /* Bordes redondeados */
}
/* Cambiar el color del ícono de la navbar a blanco */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}