@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: "poppins", sans-serif;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.service-body {
    min-height: 100vh; /* Esto asegura que la imagen cubra al menos el 100% de la pantalla */
}
.main-content {
    background-image: linear-gradient(22.5deg, rgba(242, 242, 242, 0.03) 0%, rgba(242, 242, 242, 0.03) 16%,rgba(81, 81, 81, 0.03) 16%, rgba(81, 81, 81, 0.03) 26%,rgba(99, 99, 99, 0.03) 26%, rgba(99, 99, 99, 0.03) 73%,rgba(43, 43, 43, 0.03) 73%, rgba(43, 43, 43, 0.03) 84%,rgba(213, 213, 213, 0.03) 84%, rgba(213, 213, 213, 0.03) 85%,rgba(125, 125, 125, 0.03) 85%, rgba(125, 125, 125, 0.03) 100%),linear-gradient(22.5deg, rgba(25, 25, 25, 0.03) 0%, rgba(25, 25, 25, 0.03) 54%,rgba(144, 144, 144, 0.03) 54%, rgba(144, 144, 144, 0.03) 60%,rgba(204, 204, 204, 0.03) 60%, rgba(204, 204, 204, 0.03) 76%,rgba(37, 37, 37, 0.03) 76%, rgba(37, 37, 37, 0.03) 78%,rgba(115, 115, 115, 0.03) 78%, rgba(115, 115, 115, 0.03) 91%,rgba(63, 63, 63, 0.03) 91%, rgba(63, 63, 63, 0.03) 100%),linear-gradient(157.5deg, rgba(71, 71, 71, 0.03) 0%, rgba(71, 71, 71, 0.03) 6%,rgba(75, 75, 75, 0.03) 6%, rgba(75, 75, 75, 0.03) 15%,rgba(131, 131, 131, 0.03) 15%, rgba(131, 131, 131, 0.03) 18%,rgba(110, 110, 110, 0.03) 18%, rgba(110, 110, 110, 0.03) 37%,rgba(215, 215, 215, 0.03) 37%, rgba(215, 215, 215, 0.03) 62%,rgba(5, 5, 5, 0.03) 62%, rgba(5, 5, 5, 0.03) 100%),linear-gradient(90deg, #ffffff,#ffffff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Esto asegura que la imagen cubra todo el área sin cortarse */
}
/*Titulo Servicios*/
.title-service{
    /*padding-top: 4%;*/
    text-align: center;
    width: 40%;
    margin: auto;
}
.title-service h3{
    font-weight: 600;
    color: #003366;
    font-size: 25px;
    padding-bottom: 2px;
    border-bottom: 3px solid #ff6d1f;
}
/*Cartas de Servicios*/
.title-sofware {
    text-align: center;
    font-size: 2rem;
    color: #050628;
    padding: 30px 0;
    /*    border-bottom: 1px #ddd solid;*/
    margin: auto;
}
/*Cards-hover*/
.container-products-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 72vh;
 /*   margin-bottom: 10%;*/
}
.card_sof {
    position: relative;
    width: 350px;
    height: 300px; 
    cursor: pointer;
    margin: 40px;
}
.card_sof .faces{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    transition: .5s;
}
.card_sof .front {
    transform: perspective(600px) rotateY(0deg);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    transition: .8s ease;
}
.card_sof .front img{
    position: absolute;
    width:100%;
    height: 100%;
    object-fit: cover;
}
.card_sof .front h3{
    position: absolute;
    bottom:-8px;
    width: 100%;
    height: 45px;
    line-height:45px;
    color: #fff;
    font-size: 13px;
    background-color: rgba(0,0,0,.4);
    text-align: center;
}
.card_sof .back{
    transform: perspective(600px) rotateY(180deg);
    background-image: linear-gradient(231deg, rgba(233, 233, 233, 0.01) 0%, rgba(233, 233, 233, 0.01) 25%,rgba(10, 10, 10, 0.01) 25%, rgba(10, 10, 10, 0.01) 50%,rgba(237, 237, 237, 0.01) 50%, rgba(237, 237, 237, 0.01) 75%,rgba(200, 200, 200, 0.01) 75%, rgba(200, 200, 200, 0.01) 100%),linear-gradient(344deg, rgba(2, 2, 2, 0.03) 0%, rgba(2, 2, 2, 0.03) 20%,rgba(10, 10, 10, 0.03) 20%, rgba(10, 10, 10, 0.03) 40%,rgba(100, 100, 100, 0.03) 40%, rgba(100, 100, 100, 0.03) 60%,rgba(60, 60, 60, 0.03) 60%, rgba(60, 60, 60, 0.03) 80%,rgba(135, 135, 135, 0.03) 80%, rgba(135, 135, 135, 0.03) 100%),linear-gradient(148deg, rgba(150, 150, 150, 0.03) 0%, rgba(150, 150, 150, 0.03) 14.286%,rgba(15, 15, 15, 0.03) 14.286%, rgba(15, 15, 15, 0.03) 28.572%,rgba(74, 74, 74, 0.03) 28.572%, rgba(74, 74, 74, 0.03) 42.858%,rgba(175, 175, 175, 0.03) 42.858%, rgba(175, 175, 175, 0.03) 57.144%,rgba(16, 16, 16, 0.03) 57.144%, rgba(16, 16, 16, 0.03) 71.42999999999999%,rgba(83, 83, 83, 0.03) 71.43%, rgba(83, 83, 83, 0.03) 85.71600000000001%,rgba(249, 249, 249, 0.03) 85.716%, rgba(249, 249, 249, 0.03) 100.002%),linear-gradient(122deg, rgba(150, 150, 150, 0.01) 0%, rgba(150, 150, 150, 0.01) 20%,rgba(252, 252, 252, 0.01) 20%, rgba(252, 252, 252, 0.01) 40%,rgba(226, 226, 226, 0.01) 40%, rgba(226, 226, 226, 0.01) 60%,rgba(49, 49, 49, 0.01) 60%, rgba(49, 49, 49, 0.01) 80%,rgba(94, 94, 94, 0.01) 80%, rgba(94, 94, 94, 0.01) 100%),linear-gradient(295deg, rgba(207, 207, 207, 0.02) 0%, rgba(207, 207, 207, 0.02) 25%,rgba(47, 47, 47, 0.02) 25%, rgba(47, 47, 47, 0.02) 50%,rgba(142, 142, 142, 0.02) 50%, rgba(142, 142, 142, 0.02) 75%,rgba(76, 76, 76, 0.02) 75%, rgba(76, 76, 76, 0.02) 100%),linear-gradient(73deg, rgba(81, 81, 81, 0.03) 0%, rgba(81, 81, 81, 0.03) 12.5%,rgba(158, 158, 158, 0.03) 12.5%, rgba(158, 158, 158, 0.03) 25%,rgba(136, 136, 136, 0.03) 25%, rgba(136, 136, 136, 0.03) 37.5%,rgba(209, 209, 209, 0.03) 37.5%, rgba(209, 209, 209, 0.03) 50%,rgba(152, 152, 152, 0.03) 50%, rgba(152, 152, 152, 0.03) 62.5%,rgba(97, 97, 97, 0.03) 62.5%, rgba(97, 97, 97, 0.03) 75%,rgba(167, 167, 167, 0.03) 75%, rgba(167, 167, 167, 0.03) 87.5%,rgba(22, 22, 22, 0.03) 87.5%, rgba(22, 22, 22, 0.03) 100%),linear-gradient(90deg, hsl(137,0%,23%),hsl(137,0%,23%));    background-size: cover;
    padding: 15px;
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 5px 10px #000;
    transition: .8s ease;
}
.card_sof .back a{
    filter: drop-shadow(0 0 10px rgb(253, 254, 254));
    border-top: solid 1px #f3f3f3;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ff6d1f;
    transition: all 0.5s ease-in-out;
}
.card_sof .back a:hover{
    color: #003366;
    transition: all 0.5s ease-in-out;
}
.card_sof .back h3{
    font-size: 15px;
    color: #ff6d1f;
    margin-top: 20px;  
    letter-spacing: 2px;
    text-align: center;
}
.card_sof .back p{
    font-family: "Roboto", serif !important;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
}
.card_sof:hover .front {
    transform: perspective(600px) rotateY(180deg);
    transition: .8s ease;
}
.card_sof:hover .back {
    transform: perspective(600px) rotateY(360deg);
    transition: .8s ease;
}
/*Texto*/
.p-box-text {
    width: 100%;
    text-align: center;
}
.name-service{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.name-service span{
    color: #050628;
    font-size: 15px;
    font-weight: 600;
    margin: 5px 0px;
    margin-bottom: 20px;
}
.service-link {
    color: #333333;
    font-weight: 600;
    text-decoration: none;
    transition: all ease 0.3s;
}
.service-link:hover{
    color: #111111;
    opacity: 0.7;
    transition: all ease 0.3s;
}
/*Touch*/
.touch-icon {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    font-size: 12px;
    animation: bounce 1.5s infinite;
    text-align: center;
}

.touch-icon i {
    font-size: 20px;
    margin-bottom: 5px;
    color: #fff;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}
/*Responsivo*/
@media only screen and (max-width: 700px) {
    .sub-menu {
        padding-top: 32% !important;
    }
    .title-service {
        padding-top: 0%;
        width: 90%;
        margin: auto;
    }
    .title-service h3{
        font-size: 15px;
    }
}
/*Animación*/
/*Aplicar animación a imagen*/
@keyframes slideInTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.top.box {
    animation: slideInTop 1.3s ease-out;
}
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.left.box {
    animation: slideInLeft 1.4s ease-out;
}
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.right.box {
    animation: slideInRight 1.3s ease-out;
}
@keyframes slideInBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.bottom.box {
    animation: slideInBottom 1.5s ease-out;
}
/* Submenu */
.sub-menu {
    padding-top: 8%;
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se distribuyan en varias filas */
    justify-content: center; /* Centra el contenido horizontalmente */
    width: 100%;
}

.sub-menu ul {
    display: flex;
    list-style: none; /* Elimina los puntos de la lista */
    margin: 0;
    padding: 0;
    justify-content: center; /* Centra el contenido en pantallas grandes */
    flex-wrap: wrap;
}

.sub-menu ul li {
    text-decoration: none;
    margin: 0.5rem;
    background-color: #003366;
    color: #fff;
    padding: 8px 22px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem; /* Tamaño normal en pantallas grandes */
    text-align: center;
}

/* Estilo para la barra debajo del elemento activo */
.sub-menu li.active {
    position: relative;
}

.sub-menu li.active::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Ajusta la distancia de la barra */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff6d1f; /* Color de la barra */
}
/* --- Estilos Responsivos --- */
/* Pantallas medianas (tablets) */
@media screen and (max-width: 768px) {
    .sub-menu ul {
        display: grid; /* Cambia a cuadrícula para pantallas medianas */
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Ajusta el tamaño mínimo de cada elemento */
        gap: 8px; /* Espacio uniforme entre cuadros */
    }
    .sub-menu ul li {
        padding: 8px; /* Reduce el padding */
        font-size: 0.8rem; /* Texto más pequeño */
    }
}
/* Pantallas pequeñas (móviles) */
@media screen and (max-width: 712px) {
    .sub-menu {
        padding-top: 10% !important;
    }
    .sub-menu ul {
        grid-template-columns: repeat(3, 1fr); /* Acomoda dos elementos por fila en móviles */
        gap: 5px; /* Espacio más pequeño entre elementos */
    }
    .sub-menu ul li {
        padding: 6px; /* Ajusta el padding */
        font-size: 0.7rem; /* Texto más pequeño */
    }
}
@media screen and (max-width: 412px) {
    .sub-menu {
        padding-top: 26% !important;
    }
    .sub-menu ul {
        grid-template-columns: repeat(2, 1fr) !important; /* Acomoda dos elementos por fila en móviles */
        gap: 5px; /* Espacio más pequeño entre elementos */
    }
    .sub-menu ul li {
        padding: 6px; /* Ajusta el padding */
        font-size: 0.5rem; /* Texto más pequeño */
    }
}