*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, p, a, i, label, textarea, input,.form-control {
    font-family: "Times New Roman", Times, serif;
}

/*HEADER*/
/* Estilos base para el header */
.hero{
    position: relative;
    width: 100%;
    height: 150px;
    z-index: 1;
    padding: 0px 40px;
    background-color: transparent;
    background-image: linear-gradient(50deg,#b6466a8a 50%,#00000048 100%), url(/img/Fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.logo img{
    width: 400px;
}
.logo-nav{
    display: none;
}
.container_hero{
    max-width: 1200px;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 0px;
    align-items: center;
}
.menu{
    display: flex;
    align-items: center;
}
.menu #btn_menu{
    display: none;
}
.menu ul{
    display: flex;
}

.menu ul li{
    list-style: none;
    margin-left: 36px;
}
.menu ul li a{
    text-decoration: none;
    font-size: 15px;
    color: #f6fbfb;
    text-transform: uppercase;
}
#selected{
    background: #b6466a ;
    padding: 10px 10px;
    border-radius: 50px;
    color: #ffffff;
}
/*HEADER_INFO*/
.header {
    background-color: #0632af;
    color: #fff;
    padding: 20px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-item {
    display: flex;
    align-items: center;
}

.contact-item i {
    margin-right: 5px;
}

.contact-item span {
    font-size: 14px;
    font-weight: bold;
}
/*BANNER*/
.banner {
    background-image: url('/img/Imagen1.jpg');
    background-size: cover; /* Ajustar la imagen para cubrir todo el área del banner */
    background-position: center; /* Centrar la imagen */
    height: 600px; /* Altura del banner */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7); /* Color de fondo semitransparente */
    position: relative;
}

.banner::before {
    content: ""; 
    background-color: rgba(0, 0, 0, 0.4); /* Color de fondo semitransparente */
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
}


.banner-content {
    position: relative; /* Asegura que el contenido se posicione correctamente */
    max-width: 50%; /* Limitar el ancho del contenido para que no sea demasiado ancho */
    margin-left: 50%; /* Alinear el contenido a la derecha */
    padding: 20px; /* Añadir espacio alrededor del contenido */
}

.banner-content h1 {
    font-size: 3em; /* Tamaño del título */
    margin-bottom: 20px; /* Espacio entre el título y el párrafo */
}

.banner-content p {
    font-size: 1.2em; /* Tamaño del texto */
}
/*FOOTER*/
.footer {
    background-image: linear-gradient(30deg,#0000002f 0%,#00000048 100%),url(/img/Fondo.jpg);
   background-size: cover;
   background-repeat: no-repeat;
    color: #e2e2e2;
    padding-top: 20px;
    text-align: center; /* Alinear el contenido del footer al centro */
}

.containe {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar el contenido horizontalmente */
    align-items: center; /* Centrar verticalmente los elementos */
}

.logo,
.social-icons,
.services {
    flex-basis: 100%; /* Ocupar todo el ancho disponible */
    margin-bottom: 20px; /* Espacio entre los elementos */
}

.logo img {
    display: block;
    margin: 0 auto 0px; /* Centro el logo y añade espacio debajo */
}

.social-icons {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 70px;
}

.social-icon {
    display: inline-block;
    margin: 0 15px; /* Espacio entre los iconos */
    font-size: 30px;
    color: #fff;
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: #131009; /* Cambia el color al pasar el mouse para resaltar */
}

.services h3{
    font-size: 25px;
    margin-bottom: 15px;
}

.services ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Centrar los servicios horizontalmente */
    flex-wrap: wrap; /* Permitir que los servicios se envuelvan en múltiples líneas */
}

.services li {
    margin: 15px; /* Aumenta el espacio entre los servicios */
}

.services li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 20px;
}

.services li a:hover {
    color: #131009; /* Cambia el color al pasar el mouse para resaltar */
}


.grupo-2{
    margin-top: 15px;
    background-color: #041a72;
    padding: 15px 10px;
    text-align: center;
    color: #e2e2e2;
    padding-top: 30px;
    font-size: 14px;
    letter-spacing: 2.67px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.grupo-2 small{
    font-size: 15px;
}

#mapa{
    width: 100%;
    height: 300px;
}
/*CATALOGO*/
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.catalogo-productos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product-section {
    flex: 0 0 calc(33.33% - 20px);
    margin-bottom: 40px;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.product-section:hover {
    transform: translateY(-5px);
}

.product-section h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

.product-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding: 15px;
}

.product-section li {
    margin-bottom: 10px;
    color: #131009;
    position: relative;
    margin: auto;
    font-size: 17px;
    font-weight: 600;
}

.product-section li::before {
    content: '\2022';
    position: absolute;
    left: -20px;
    color: #b6466a;
}

.product-section .lista-plastico,
.product-section .lista-artes-graficas,
.product-section .lista-litolamina {
    display: none; /* Ocultar las listas inicialmente */
}

.product-section .leer-mas-btn {
    display: inline-block;
    padding: 12px 16px;
    margin: 20px; /* Aumentar el espacio hacia abajo */
    border: none;
    border-radius: 4px;
    background-color: #b6466a;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.product-section .leer-mas-btn:hover {
    background-color: #8f3a55;
}

/* Estilos del carrusel */
.slider {
    height: auto;
    width: 100%;
    overflow: hidden;
    background-color: #041a72;
}

.slider .slide-track {
    display: flex;
    animation: scroll 30s linear infinite;
    -webkit-animation: scroll 30s linear infinite;
    width: calc(350px * 14); /* El doble del número de elementos para hacer la animación continua */
    align-items: center;
    justify-content: center;
}

.slider .slide {
    width: 350px;
    padding: 10px 30px;
    flex: 0 0 auto; /* Previene que las imágenes se reduzcan */
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider .slide img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%; /* Hacer las imágenes circulares */
    border: 5px solid white; /* Borde blanco */
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.5); /* Efecto luminoso */
}

/* Animación */
@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-350px * 7)); /* Ajusta esto según el número de elementos */
        transform: translateX(calc(-350px * 7)); /* Ajusta esto según el número de elementos */
    }
}

/*INFORMACION*/
.informacion {
    position: relative; /* Establece el posicionamiento absoluto */
    top: -90px; /* Coloca el div de información en la parte superior */
    left: 50%; /* Coloca el div de información en el centro horizontal */
    transform: translateX(-50%); /* Centra el div de información horizontalmente */
    display: flex;
    justify-content: space-around; /* Distribuye los elementos de manera uniforme */
    padding: 20px; /* Espacio alrededor del contenido */
    z-index: 0; /* Asegura que el div de información esté por encima del banner */
    /* Otros estilos de diseño del div de información */
    
}

.card {
    /* Estilos para las cards */
    width: 300px; /* Ancho de las cards */
    background-color: #041a72; /* Color de fondo de las cards */
    padding: 32px; /* Espacio alrededor del contenido de las cards */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(180, 5, 5, 0.473); /* Sombra */
    text-align: center; /* Alinear el contenido al centro */
    /* Otros estilos de diseño de las cards */
    border: 2px outset #0632af;
}

.card img {
    width: 90px;
    margin-bottom: 50px;
    margin: auto;
}

.card p{
    font-size: 30px;
    font-weight: 600;
}

.subtitulo {
    max-width: 100%;
    background-color: #041a72;
    text-align: end;
    padding: 10px 20px;
    margin-top: -40px;
}

.subti1{
    text-align: left;
}

.subtitulo h2{
    font-size: 37px;
    padding: 13px;
    font-weight: 600;
    color: #e2e2e2;
}

.contacto_form{
    width: 100%;
    display: flex;
    padding: 15px 0px;
    flex-wrap: wrap;
    align-items: center;
}

.title_contact{
    width: 50%;
    background-color: #b6466a;
    padding: 50px;
    margin-right: 15px;
}

.title_contact h4 , .title_contact p{
    font-size: 26px;
    text-align: center;
    color: #fff;
    font-weight: 600;
}

.form{
    width: 35%;
    padding: 50px;
    margin-left: 6%;
    border-radius: 50px;
    background-color: #131009;
    border: 1px solid #041a72; 
    color: #f6fbfb;
}

/* Estilos generales del formulario */
.form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    max-width: 600px; /* Limitar el ancho del formulario para que no se extienda demasiado */
    margin: 0 auto; /* Centrar el formulario en la página */
}

/* Estilos de los grupos de elementos del formulario */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 10px 0; /* Reducir el margen vertical para que no se vea demasiado espaciado */
}

/* Estilos de las etiquetas del formulario */
.form-group label {
    margin-bottom: 5px; /* Agregar un pequeño espacio debajo de las etiquetas */
    font-size: 18px; /* Reducir el tamaño de fuente para que se vea más proporcionado */
}

/* Estilos de los campos de entrada del formulario */
.form-group input,
.form-group textarea {
    padding: 10px; /* Reducir ligeramente el relleno para que no se vea tan grande */
    border-radius: 8px; /* Reducir el radio del borde para que se vea más suave */
    border: 1px solid #ccc; /* Agregar un borde para mejorar la apariencia */
    width: 100%; /* Asegurar que los campos de entrada ocupen todo el ancho disponible */
    box-sizing: border-box; /* Incluir el relleno y el borde en el ancho total del campo */
}

/* Estilos del botón de enviar */
.boton_message {
    margin-top: 20px; /* Reducir el margen superior para que se vea más cerca de los campos */
    padding: 12px 20px; /* Reducir ligeramente el relleno para que se vea más proporcionado */
    border-radius: 10px; /* Reducir el radio del borde para que coincida con los campos de entrada */
    background-color: #b6466a; /* Cambiar el color de fondo a azul para que destaque */
    color: #fff; /* Cambiar el color del texto a blanco para que sea legible sobre el fondo azul */
    border: none; /* Eliminar el borde para que el botón se vea más limpio */
    cursor: pointer; /* Cambiar el cursor a pointer para indicar que el botón es interactivo */
    font-size: 16px; /* Ajustar el tamaño de fuente para que se vea proporcionado */
    transition: background-color 0.3s ease; /* Agregar una transición suave al color de fondo */
}

/* Estilo hover para el botón de enviar */
.boton_message:hover {
    background-color: #0056b3; /* Cambiar el color de fondo al pasar el cursor sobre el botón */
}
.carrusel{
    width: 100%;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image: linear-gradient(180deg,#0000008c 0%,#0000008c 100%), url(/img/img3.jpg);
    background-size: cover;
    background-position: center;

}

.carousel2{
    background-image:  linear-gradient(180deg,#0000008c 0%,#0000008c 100%), url(/img/10.png);
}

.carousel-inner {
    max-width: 700px;
}

.Img_carrusel{
    width: 100%;
    border-radius: 10px;
    height: 400px;
}

.titulo_carrusel h3{
    font-size: 36px;
    font-weight: 500;
    color: #fff;
}

.titulo_carrusel p{
    color: #ffffff;
    max-width: 450px;
    text-align: justify;
    margin: auto;
    margin-top: 25px;
    font-size: 20px;
}

.ofert{
    width: 100%;
    padding: 30px 0px;
}

.text p{
    font-size: 25px;
    margin: 30px;
}
.icons 
{
    margin-top: 30px;
    padding: 20px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px; /* Espacio entre los elementos */
}
.icon {
    display: flex;
    align-items: center;
    text-align: center;
    margin-left: 50px;
}

.icon img{
    width: 60px;
    margin-right: 30px;
}

/*MISION ViSION*/
.objt_main{
    width: 100%;
    padding: 50px 100px;
    display: grid;
    gap: 3em;
    grid-template-columns:repeat(auto-fit,minmax(415px,auto));
    align-items: center;
    justify-items: center;
}


.ob_main{
    width: 100%;
    padding: 50px 100px;
    display: grid;
    gap: 3em;
    grid-template-columns: repeat(minmax(415px));
    align-items: center;
    justify-items: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.obj__icons {
    max-width: 350px;
    padding: 40px 10px;
    border: 3px outset #041a72;
    border-radius: 20px;
    gap: 5rem;
    transition: opacity 2s linear 0s;
    background-color:rgb(236, 239, 239);
    display: block;
}

.text__objt p{
    color: #f6fbfb;
}

.text__objt h1{
    max-width: 350px;
    text-align: center;
    font-size: 34px;
    font-weight: 600;
}

.obj__icons h3{
    color: #131009;
    font-weight: 600;
    padding: 10px;
    text-align: center;
}

.obj__icons p{
    color: #131009;
    padding: 10px;
}

.text__objt{
    padding: 20px 50px;
}

.who_container{
    width: 100%;
    padding:50px;
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: center;
}

.who_about{
    display: flex;
    align-items: center;
    gap: 4rem;
    justify-content: center;
}

.who_text{
    width: 700px;
}

.who_text h2{
    font-size: 45px;
    margin-bottom: 15px;
    color: #0632af;
    text-align: center;
    font-weight: 600;
}

.who_text p{
    font-size: 17px;
    color: #09000E;
    text-align: center;
}

.img_about img{
    width: 500px;
    border-radius: 20%;
}
.title_container{
    width: 100%;
    margin: auto;
    padding: 50px 100px 10px;
    text-align: center;
}

.title_container p{
    color: #041a72;
    font-size: 20px;
}

.title_container h1{
    color: #09000E;
    font-size: 30px;
    font-weight: 600;
}
.servicios_container{
    width: 100%;
    padding: 20px 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.servicios_box{
    max-width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    gap: 30px;
    padding: 20px;
    justify-content: center;
}

.card_servi{
    width: 400px;
    background-color: #0632af;
    border-radius: 10%;
    text-align: center;
    margin: 40px;
}

.card_servi img{
    width: 100%;
    height: 350px;
    margin-bottom: 20px;
    border-radius: 10% 10% 0% 0%;
}

.card_servi h3{
    font-weight: 600;
    font-size: 25px;
    padding: 10px;
    color: #f6fbfb;
}

.card_servi p{
    width: 350px;
    text-align: center;
    font-size: 17px;
    color: #e2e2e2 ;
    margin: auto;
}

.btn_text{
    margin-top: 10px;
    border-radius: 13px;
    padding: 20px;
    font-size: 13px;
    background-color: #f6fbfb;
    color: #09000E;
    border: 3px outset #b6466a;
    box-shadow: 2px 2px  30px -15px #09000E;
    transition: all 750ms;
    cursor: pointer;
}

.btn_text:hover{
    background-color: #0632af;
    border: 3px outset #09000E;
    color: #f6fbfb;
}


/* Estilos generales del contenedor de servicios */
.servi {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar el título "Más Información" */
    max-width: 1000px;
    margin: 0 auto;
    gap: 10%;
}

/* Estilos para cada servicio */
.servi1 {
    flex: 0 0 calc(50% - 20px); /* Hacer que cada servicio ocupe el 50% del contenedor con un espacio entre ellos */
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Estilos para el título "Más Información" */
.servi h1 {
    text-align: center; /* Centrar el título */
    margin-bottom: 20px; /* Agregar espacio entre el título y las cartas */
}

/* Estilos para la imagen dentro de cada servicio */
.servi1 img {
    max-width: 100%;
    height: 500px;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    width: 100%;
}

/* Estilos para los títulos dentro de cada servicio */
.servi1 h2 {
    margin: 10px 0;
}

/* Estilos para el enlace "Ver más" dentro de cada servicio */
.servi1 h3 {
    color: #b6466a;
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Estilo hover para el enlace "Ver más" */
.servi1 h3:hover {
    color: #8f3a55;
}

/* Estilos para la descripción adicional */
.descripcion {
    margin-top: 10px;
    display: none;
}

/* Estilos para el texto de la descripción */
.descripcion p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}




/*RESPONSIVE*/
@media screen and (max-width: 1300px){
    .who_container{
        align-items: center;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
    }

    .servicios_box{
        grid-template-columns: auto auto;
        gap: 0px;
    }

    .titulo_carrusel p{
        margin: 0;
    }

    .titulo_carrusel{
        margin-right: 50px;
    }

    .servi{
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }

}
@media screen and (max-width: 900px) {
    .hero {
        padding: 14px;
        justify-content: space-between;
    }

    .logo img{
        width: 220px;
    }

    .card{
        width: 220px;
    }

    .card img{
        width: 50px;
    }

    .card p{
        font-size: 14px;
    }
    
    .carousel.pointer-event {
        max-width: 400px;
    }

    .icon img{
        width: 60px;
    }
    .icon h3{
        font-size: 20px;
    }
    
    .subtitulo h2{
        font-size: 30px;
    }

    .subti1{
        padding: 5px;
    }
    
    .titulo_carrusel h3{
        font-size: 25px;
    }

    .titulo_carrusel{
        margin-top: 50px;
        text-align: center;
    }
    
    .titulo_carrusel P{
        font-size: 18PX;
    }
    .form{
        max-width: 600px;
        padding: 10px;
    }

    .form label{
        font-size: 16px;
    }

    .form input, .form textarea{
        font-size: 13px;
        padding: 14px;
    }

    .who_text h2{
        font-size: 35px;
    }

    .objt_main{
        padding: 10px 100px;
        margin-bottom: 30px;
    }

    .servicios_box{
        grid-template-columns: auto;
    }

    .card-body{
        max-width: 300px;
    }

    .carrusel{
        flex-direction: column-reverse;
        padding-bottom: 70px;
    }

    .catalogo-productos{
        flex-direction: column;
    }
    
}
@media screen and (max-width: 700px){
    .menu nav {
        position: fixed;
        top: 0;
        right: -200px;
        background: #3c3c43;
        width: 190px;
        height: 100vh;
        padding: 40px;
        z-index: 999;
        transition: all 1000ms;
    }
    
    .menu ul {
        flex-direction: column;
        margin-top: 40px;
    }
    
    .menu ul li {
        margin-top: 30px;
        margin-left: 0;
    }
    
    .menu ul li a {
        color: #e2e2e2;
    }

    .servi{
        align-items: center;
    }
    
    #back_menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        display: none;
    }
    
    .menu #btn_menu {
        display: flex;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        margin-right: 30px;
        color: #e2e2e2;
        cursor: pointer;
    }
    .objt_main{
        gap: 3em;
        grid-template-columns: repeat(auto-fit,minmax(320px,auto));
        padding-top: 20px;
        padding: 20px 0px;
    }
    
    .text__objt{
        font-size: 17px;
    }

    .icons 
{
    grid-template-columns: auto;
}

    .Img_carrusel{
        height: 300px;
    }

    .titulo_carrusel{
        margin-right: 0;
    }
    
    .slider{
        margin-top: 35px;
    }

    .ofert .text{
        padding: 20px;
    }
}
@media screen and (max-width: 500px){
    .contacto_form{
        display: flex;
        flex-direction: column;
    }

    .servi1 img {
        max-width: 100%;
        height: 300px;
    }

    .title_contact{
        width: 100%;
        padding: 20px;
        margin-bottom: 20px;
    }

    .form{
        width: 320px;
        margin:auto;
    }

    .banner-content {
        max-width: 100%;
        margin-left: 20%;
        padding: 20px;
        margin: 0;
    }

    .card{
        padding: 10px;
    }


    .text p{
        margin: -9px;
    }

    .icons {
        padding: 0px;
    }
    .icon h3 {
        font-size: 13px;
        margin: 0px 10px;
    }
    .banner{
        height: 400px;
    }

    .who_about{
        max-width:320px;
    }

    .card_servi{
        max-width: 320px;
    }

    .card_servi p{
        max-width: 250px;
    }
    .contact-item {
        flex-wrap: wrap;
        align-items: center;
        margin: 10px;
    }
    .contact-item span {
        font-size: 9px;
        font-weight: bold;
    }
}