@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
body {
    font-family: 'Avenir Next', sans-serif; /* Cambia la tipografía a Avenir Next */
    line-height: 1.6;
}

/* Secciones con diferentes colores de fondo */
.hero-section {
    background-image: url('/img/pexels-jplenio-1105379.jpg');
    height: 70vh; /* Reducido a 70% de la altura del viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center; /* Centra la imagen de fondo */
}

.hero-image {
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
    padding: 2rem;
    border-radius: 15px;
}

footer {
    background-color: #ffffff;
}

@media (max-width: 576px) {
    .hero-section {
        height: 70vh;
    }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Color de fondo de las flechas */
    border-radius: 50%; /* Bordes redondeados para un mejor estilo */
}

.carousel-control-prev-icon {
    filter: invert(1); /* Cambiar color a blanco para contraste */
}

.carousel-control-next-icon {
    filter: invert(1); /* Cambiar color a blanco para contraste */
}

.carousel-control-prev,
.carousel-control-next {
    filter: invert(0); /* Mantiene las flechas en negro */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 0.8; /* Añadir efecto de hover */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600; /* Títulos más destacados */
}

p, li {
    font-weight: 300; /* Texto de párrafos más ligero */
}

.form-group input, .form-group textarea {
    border: 2px solid #ddd;
    transition: border-color 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: #007bff; /* Cambia el color del borde al enfocar */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3); /* Sombra al enfocar */
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3; /* Color más oscuro en hover */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Sombra al pasar el cursor */
}

.form-label {
    font-weight: 500;
    font-size: 1.1rem;
    color: #555;
}

/* General carousel section styles */
#carousel h2 {
    font-family: 'Avenir Next', sans-serif; /* Cambiar la fuente de los títulos en el carrusel */
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.project-img {
    border-radius: 15px; /* Bordes suavizados */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra más marcada */
    max-height: 700px; /* Aumenta el tamaño de las imágenes */
    object-fit: cover; /* Asegura que la imagen se recorte correctamente */
}

.project-img:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Sombra más fuerte al hacer hover */
}

.project-caption {
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente más claro */
    padding: 20px; /* Espacio extra para las leyendas */
    border-radius: 12px;
    color: #333;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%); /* Flechas blancas */
}

.custom-control {
    background-color: rgba(200, 200, 200, 0.7); /* Fondo gris claro */
    border-radius: 50%;
    width: 60px; /* Aumenta el tamaño de las flechas */
    height: 60px; /* Aumenta el tamaño de las flechas */
    transition: background-color 0.3s ease;
}

.custom-control:hover {
    background-color: rgba(100, 100, 100, 0.8); /* Fondo más oscuro al pasar el cursor */
}

@media (max-width: 768px) {
    .project-img {
        max-height: 500px; /* Ajusta el tamaño en pantallas más pequeñas */
    }
}

.section-title {
    color: rgb(0, 0, 0);
    font-size: 1.5rem;
    font-weight: bold;
}

.section-title {
    font-family: 'Avenir Next', sans-serif; /* Cambia la fuente de la sección a Avenir Next */
    font-size: 2.5rem; /* Tamaño destacado */
    font-weight: 600; /* Negrita */
    color: #2c3e50; /* Color profesional */
    text-transform: uppercase; /* Mayúsculas */
    letter-spacing: 2px; /* Espaciado entre letras */
    margin-bottom: 1.5rem;
    text-align: center; /* Mantiene el texto centrado */
}

.container {
    max-width: 100%; /* Ocupa todo el ancho disponible */
    padding: 0 2rem; /* Ajusta los márgenes laterales */
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

section {
    padding: 2rem 0; /* Reduce el espacio superior e inferior */
}

/* Secciones con diferentes colores de fondo */
.hero-section {
    background-size: cover;
    background-position: center;
    height: 70vh; /* Ajuste la altura para aprovechar más espacio */
}

.section-light {
    background-color: #f0f8ff; /* Color de fondo suave claro */
}

.section-dark {
    background-color: #e0e0e0; /* Color de fondo suave oscuro */
}

.section-accent {
    background-color: #d9edf7; /* Color de fondo suave de acento */
}

.owl-carousel .owl-item {
    transition: all 0.3s ease-in-out;
}

.owl-carousel .owl-item .card {
    padding: 30px;
    position: relative;
}

.owl-carousel .owl-stage-outer {
    overflow-y: auto !important;
    padding-bottom: 40px;
}

.owl-carousel .owl-item img {
    height: 250px;
    object-fit: cover;
    border-radius: 6px;
    width: 250%;
}

.owl-carousel .owl-item .card .name {
    position: absolute;
    bottom: -20px;
    left: 33%;
    color: #ecfcff;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: rgb(61, 84, 211);
    padding: 0.3rem 0.4rem;
    border-radius: 5px;
    box-shadow: 2px 3px 15px #3c405a;
}

.owl-carousel .owl-item .card {
    opacity: 0.2;
    transform: scale3d(0.8, 0.8, 0.8);
    transition: all 0.3s ease-in-out;
}

.owl-carousel .owl-item.active.center .card {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

.owl-carousel .owl-dots {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.owl-theme .owl-dots .owl-dot span {
    height: 100px;
    background: #2a6ba3 !important;
    border-radius: 2px !important;
    opacity: 0.8;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    height: 100px;
    width: 100px;
    opacity: 1;
    transform: translateY(2px);
    background: #83b8e7 !important;
}

@media(min-width: 480.6px) and (max-width: 575.5px) {
    .owl-carousel .owl-item .card .name {
        left: 24%;
    }
}

@media(max-width: 360px) {
    .owl-carousel .owl-item .card .name {
        left: 30%;
    }
}



.footer-logo {
    width: 30px;  /* Ajusta este valor para el tamaño deseado */
    height: auto; /* Mantiene la proporción de la imagen */
}


#automatizacion-procesos {
    background: linear-gradient(to right, #f09a36, #ffce47);
    padding: 80px 0;
    color: black;
}

section#about {
    background: linear-gradient(180deg, #4A90E2 0%, #4072B2 100%);
    position: relative;
    overflow: hidden;
}

  
  section#about::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: url('path-to-your-wave-svg.svg') no-repeat bottom center;
    background-size: cover;
    z-index: 1;
  }
  #about p {
    color: white; /* Color blanco */
    font-size: 1.5rem; /* Ajusta este tamaño según sea necesario */
    line-height: 1.6; /* Mejora la legibilidad */
}

  
  section#about::after{
    content: "";
    position: absolute;
    top: 50px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    z-index: 0;
  }
  #facturacion-digital {
    background: linear-gradient(to bottom, #1E40AF, #3B82F6); /* Gradiente de azul oscuro a azul suave */
    position: relative;
    padding: 120px 15px; /* Espaciado ajustado */
    color: white;
    min-height: 100vh; /* Asegura que siempre cubra el área completa */
}

#facturacion-digital h2 {
    font-size: 2.5rem; /* Tamaño de fuente */
    margin-bottom: 20px; /* Espacio debajo del encabezado */
    color: white; /* Cambia el color a blanco */
}

#facturacion-digital p {
    font-size: 1.2rem; /* Tamaño de fuente */
    line-height: 1.6; /* Mejora legibilidad */
}

#facturacion-digital .container {
    max-width: 1140px; /* Limitar el ancho del contenido */
    margin: 0 auto; /* Centrar el contenedor */
    padding: 0 15px; /* Padding lateral para móviles */
}

#facturacion-digital::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px; /* Altura del fondo de onda */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="1" d="M0,224L48,213.3C96,203,192,181,288,160C384,139,480,117,576,138.7C672,160,768,224,864,240C960,256,1056,224,1152,181.3C1248,139,1344,85,1392,58.7L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
    background-size: cover;
}

#facturacion-digital .row {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté encima del fondo */
}

@media (max-width: 768px) {
    #facturacion-digital h2 {
        font-size: 2rem; /* Ajusta el tamaño en pantallas más pequeñas */
    }

    #facturacion-digital p {
        font-size: 1rem; /* Tamaño de fuente más pequeño para párrafos en pantallas pequeñas */
    }
}





#what-we-do {
    background: linear-gradient(to bottom, #A7D3E0, #6DD5ED); /* Gradiente de arriba a abajo */
    position: relative;
    padding: 120px 15px; /* Espaciado ajustado */
    color: white;
    min-height: 100vh; /* Asegura que siempre cubra el área completa */
}

#what-we-do h2 {
    font-size: 2.5rem; /* Tamaño de fuente */
    margin-bottom: 20px; /* Espacio debajo del encabezado */
    color: white; /* Cambia el color a blanco */
}

#what-we-do p {
    font-size: 1.2rem; /* Tamaño de fuente */
    line-height: 1.6; /* Mejora legibilidad */
}

#what-we-do .container {
    max-width: 1140px; /* Limitar el ancho del contenido */
    margin: 0 auto; /* Centrar el contenedor */
    padding: 0 15px; /* Padding lateral para móviles */
}

#what-we-do::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px; /* Altura del fondo de onda */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="1" d="M0,160L30,170.7C60,181,120,203,180,213.3C240,224,300,224,360,218.7C420,213,480,203,540,186.7C600,171,660,149,720,149.3C780,150,840,171,900,181.3C960,192,1020,192,1080,181.3C1140,171,1200,149,1260,149.3C1320,150,1380,171,1410,181.3L1440,192L1440,320L0,320Z"></path></svg>') no-repeat bottom; /* SVG de ola blanca */
    background-size: cover; /* o 'contain' según prefieras */
}

#what-we-do .row {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté encima del fondo */
}

@media (max-width: 768px) {
    #what-we-do h2 {
        font-size: 2rem; /* Ajusta el tamaño en pantallas más pequeñas */
    }

    #what-we-do p {
        font-size: 1rem; /* Tamaño de fuente más pequeño para párrafos en pantallas pequeñas */
    }
}






.navbar {
    display: flex;
    align-items: center; /* Centra verticalmente todos los elementos dentro de la navbar */
}

.navbar-logo {
    height: 60px; /* Tamaño del logo de DataPhe */
}

.akrisoft-logo {
    height: 20px; /* Tamaño del logo de Akrisoft */
    margin-right: 5px; /* Espacio entre el logo de Akrisoft y el texto */
    margin-top: 0; /* Asegúrate de que no haya margen superior que lo desplace */
    display: flex; /* Habilita el flexbox para la imagen */
    align-items: center; /* Centra verticalmente el logo con respecto al texto */
}

.nav-link {

    
    display: flex; /* Habilita el flexbox para los enlaces de la navbar */
    align-items: center; /* Centra verticalmente el texto con respecto al logo */
}

.nav-item {
    display: flex; /* Habilita el flexbox para los enlaces de la navbar */
    align-items: center; /* Centra verticalmente el texto con respecto al logo */   
}
.footer-text {
    font-size: 0.8rem; /* Ajusta el tamaño según sea necesario */
}
#productos {
    background-color: #f8f9fa; /* Fondo claro */
    padding: 50px 0;
}



h2 {
    color: #1E40AF;
    font-size: 2.5rem;
    margin-bottom: 30px;
}
#what-we-do h2 {
    margin: 20px 0; /* Márgenes superior e inferior */
    text-align: center; /* Centrar el título */
}

#what-we-do p {
    margin: 10px 0; /* Márgenes superior e inferior para los párrafos */
    text-align: center; /* Centrar los párrafos */
}
/* Asegura que el texto y las imágenes estén centrados y bien alineados */
#productos {
    background: linear-gradient(to bottom, #ffffff, #d1d5db); /* Degradado de blanco a gris */
    position: relative;
    padding: 60px 15px; /* Espaciado ajustado */
    color: black; /* Color del texto */
    min-height: 80vh; /* Aumentar la altura mínima para que cubra más área */
}

#productos .image-slider {
    
    flex-wrap: nowrap; /* No permitir que las imágenes se envuelvan */
  
    padding: 20px; /* Agregar padding para espacio adicional */
}



#productos .row {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté encima del fondo */
}




@media (max-width: 768px) {
    #productos .row {
        flex-direction: column; /* En pantallas pequeñas, las columnas se apilan */
    }
}

#productos {
    background: linear-gradient(to bottom, #ffffff, #d1d5db); /* Degradado de blanco a gris */
    position: relative;
    padding: 120px 15px; /* Aumenta el espaciado para hacerlo más grande */
    color: black; /* Color del texto */
    min-height: 100vh; /* Aumenta la altura mínima del contenedor */
}

#productos h2 {
    font-size: 3rem; /* Tamaño de fuente del título */
    margin-bottom: 30px; /* Espacio debajo del encabezado */
    color: black; /* Cambia el color del título a negro */
}

#productos p {
    font-size: 1.5rem; /* Tamaño de fuente de los párrafos */
    line-height: 1.8; /* Mejora legibilidad */
}

#productos .container {
    max-width: 1140px; /* Limitar el ancho del contenido */
    margin: 0 auto; /* Centrar el contenedor */
    padding: 0 15px; /* Padding lateral para móviles */
}

#productos::before {
    content: "";
    position: absolute;
    bottom: -60px; /* Ajusta la posición hacia arriba */
    left: 0;
    width: 100%;
    height: 300px; /* Aumenta la altura del fondo a 300px */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%234A90E2" d="M0,160L30,170.7C60,181,120,203,180,213.3C240,224,300,224,360,218.7C420,213,480,203,540,186.7C600,171,660,149,720,149.3C780,150,840,171,900,181.3C960,192,1020,192,1080,181.3C1140,171,1200,149,1260,149.3C1320,150,1380,171,1410,181.3L1440,192L1440,320L0,320Z"></path></svg>') no-repeat bottom;
background-size: cover; /* o 'contain' según prefieras */
}

#productos .row {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté encima del fondo */
}

@media (max-width: 768px) {
    #productos h2 {
        font-size: 2.5rem; /* Ajusta el tamaño en pantallas más pequeñas */
    }

    #productos p {
        font-size: 1.25rem; /* Tamaño de fuente más pequeño para párrafos en pantallas pequeñas */
    }
}
.image-slider {
    position: relative;
    width: 100%;
    height: 500px; /* Incrementa la altura para agrandar el tamaño de las imágenes */
    overflow: hidden;
}

.slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; 
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Transición de desvanecimiento */
}

.slider-image.active {
    opacity: 1; /* Imagen visible */
}