@font-face {
    font-family: 'Montserrat-Bold';
    src: url(/Html/NeoTecDigital/fuentes/Montserrat-Bold.ttf);
}

* {
    margin: 0;
    padding: 0;
}

.service {
    /* background-color: red;*/
    max-width: 1500px;
    height: 520px;
    margin: 10px auto;
    background-color: #f9f6f6;
    /*border: red solid 2px;*/

}

.servSectOneTitle {
    /*background-color: burlywood;*/
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    /*padding: 25px 0 5px 0;*/
    /*border: red solid 2px;*/
}

.servSectOne {
    height: 290px;

    display: grid;
    grid-template-columns: 40% 50%;
    grid-template-rows: 2fr;
    gap: 10px;
    /*border: green solid 3px;
    background-color: aqua;*/

}

.servSectOneImg img {
    height: 280px;
}

.servSectOneImg {
    /*background-color: aquamarine;*/
    display: flex;
    /*align-items: end;*/
    justify-content: right;
}

.servSectOneText {
   /* background-color: pink;*/
font-size: 20px;
}

.servSectOneCont {
    height: 200px;
    display: flex;
    align-items: center;
    /*background-color: aqua;*/
}

.servSectTwo {
    /*border: seagreen solid 4px;*/
    margin: 5px 10px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 130px 60px;
    color: var(--text-color-inverse);
    text-align: justify;
}

.experience-title-grid {
    font-family: Montserrat-Bold;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    padding: 0px;
    color: black;
}

.servSectTwofabSoft img {
    margin-top: 20px;
    height: 80px;
}

.servSectTwoAlojWeb img {
    margin-top: 0px;
    height: 130px;
}
.servSectTwoCalSoft img{
    margin-top: 0px;
    height: 90px;
}
.servSectTwoConsTI img{
    margin-top: 0px;
    height: 110px;
}
.servSectTwoSopTec img{
    margin-top: 0px;
    height: 110px;
}


/*.experience-ico img {
    margin-top: 20px;
    height: 80px;
}*/

.experience-description {
    font-size: 15px;
    font-family: 'Courier New';
     /*padding: 2px;*/
    text-align: center;
    visibility: hidden;
}

/*COLUMNAS*/
.servSectTwofabSoft {
    /*background-color: var(--primary-color);*/
    background-color: white;
    grid-column: 1/2;
    grid-row: 1/2;
    /*width: 90%;
    height: 60%;*/
    width: 90%;
    height: 100%;
    /*transform: rotate(-5deg);*/
    /* margin-top: 65px;
    margin-left: 70px;*/
}

.servSectTwoAlojWeb {
    /*background-color: var(--primary-color);*/
    background-color: white;
    grid-column: 2/3;
    grid-row: 1/2;
    width: 93%;
    height: 100%;
}

.servSectTwoCalSoft {
    /*background-color: var(--primary-color);*/
    background-color: white;
    grid-column: 3/4;
    grid-row: 1/2;
    width: 90%;
    height: 100%;
    /*margin-left: 10px;*/
    /*transform: rotate(5deg);*/
    /*margin-top: 65px;
    margin-left: 70px;*/
}

.servSectTwoConsTI {
    /*background-color: var(--primary-color);*/
    background-color: white;
    grid-column: 4/5;
    grid-row: 1/2;
    width: 90%;
    height: 100%;
    /*margin-top: 10px;*/
}

/*.intrportal {
    background-color: var(--primary-color);
    grid-column: 5/6;
    grid-row: 1/2;
    width: 90%;
    height: 100%;
    

}*/

.servSectTwoSopTec {
   /* background-color: var(--primary-color);*/
    background-color: white;
    grid-column: 5/6;
    grid-row: 1/2;
    width: 90%;
    height: 98%;

    /*margin-top: 10px;*/

    /*margin-left: 1%;*/
}

.servSectTwofabSoft,
.servSectTwoAlojWeb,
.servSectTwoCalSoft,
.servSectTwoConsTI,
/*.intrportal,*/
.servSectTwoSopTec {
    border-radius: 14px;
    text-align: center;

}

.servSectTwofabSoft:hover,
.servSectTwoAlojWeb:hover,
.servSectTwoCalSoft:hover,
.servSectTwoConsTI:hover,
/*.intrportal:hover,*/
.servSectTwoSopTec:hover {
    box-shadow: 0px 0px 15px 15px var(--secondary-color);
    /*box-shadow: 0px 0px 15px 0px red;*/
    /*height: 180px;*/
    position: sticky;

    .experience-description {
        background-color: var(--primary-color);
        visibility: visible;
        opacity: .8;
        box-shadow: 0px 0px 5px black;
        margin: -10px -10px 0px 10px;
        border-radius: 14px;
    }

    /*FIN_COLUMNAS*/
}

/*=================================================================*/
@media(max-width:550px) {
    @font-face {
        font-family: 'Montserrat-Bold';
        src: url(/Html/NeoTecDigital/fuentes/Montserrat-Bold.ttf);
    }
    
    * {
        margin: 0;
        padding: 0;
    }
    
    .service {
        /* background-color: red;*/
        max-width: 1500px;
        height: 320px;
        margin: 0px 0px;
        background-color: #f9f6f6;
        /*border: red solid 2px;*/
    
    }
    
    .servSectOneTitle {
        /*background-color: burlywood;*/
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        /*padding: 25px 0 5px 0;*/
        /*border: red solid 2px;*/
    }
    
    .servSectOne {
        height: 190px;
    
        display: grid;
        grid-template-columns: 50% 40%;
        grid-template-rows: 2fr;
        gap: 10px;
        
        /*border: green solid 3px;
        background-color: aqua;*/
    
    }
    
    .servSectOneImg img {
    
        height: 120px;
    }
    
    .servSectOneImg {
        /*background-color: aquamarine;*/
        display: flex;
        /*align-items: end;*/
        justify-content: right;
    }
    
    .servSectOneText {
       /* background-color: pink;*/
    font-size: 15px;
    }
    
    .servSectOneCont {
        height: 200px;
        display: flex;
        align-items: center;
        /*background-color: aqua;*/
    }
    
    .servSectTwo {
        /*border: seagreen solid 4px;*/
        margin: 5px 5px;
        display: grid;
        grid-template-columns: 20% 20% 20% 20% 20%;
        grid-template-rows: 80px 60px;
        color: var(--text-color-inverse);
        text-align: justify;
        
    }
    
    .experience-title-grid {
        font-family: Montserrat-Bold;
        font-size: 9px;
        text-transform: uppercase;
        text-align: center;
        padding: 0px;
        color: black;
    }
    
    .servSectTwofabSoft img {
        margin-top: 20px;
        height: 30px;
    }
    
    .servSectTwoAlojWeb img {
        margin-top: 0px;
        height: 55px;
    }
    .servSectTwoCalSoft img{
        margin-top: 0px;
        height: 35px;
    }
    .servSectTwoConsTI img{
        margin-top: 0px;
        height: 45px;
    }
    .servSectTwoSopTec img{
        margin-top: 0px;
        height: 45px;
    }
    
    
    /*.experience-ico img {
        margin-top: 20px;
        height: 80px;
    }*/
    
    .experience-description {
        font-size: 15px;
        font-family: 'Courier New';
         /*padding: 2px;*/
        text-align: center;
        visibility: hidden;
    }
    
    /*COLUMNAS*/
    .servSectTwofabSoft {
        /*background-color: var(--primary-color);*/
        background-color: white;
        grid-column: 1/2;
        grid-row: 1/2;
        /*width: 90%;
        height: 60%;*/
        width: 90%;
        height: 70%;
        /*transform: rotate(-5deg);*/
        /* margin-top: 65px;
        margin-left: 70px;*/
    }
    
    .servSectTwoAlojWeb {
        /*background-color: var(--primary-color);*/
        background-color: white;
        grid-column: 2/3;
        grid-row: 1/2;
        width: 93%;
        height: 70%;
    }
    
    .servSectTwoCalSoft {
        /*background-color: var(--primary-color);*/
        background-color: white;
        grid-column: 3/4;
        grid-row: 1/2;
        width: 90%;
        height: 70%;
        /*margin-left: 10px;*/
        /*transform: rotate(5deg);*/
        /*margin-top: 65px;
        margin-left: 70px;*/
    }
    
    .servSectTwoConsTI {
        /*background-color: var(--primary-color);*/
        background-color: white;
        grid-column: 4/5;
        grid-row: 1/2;
        width: 90%;
        height: 70%;
        /*margin-top: 10px;*/
    }
    
    /*.intrportal {
        background-color: var(--primary-color);
        grid-column: 5/6;
        grid-row: 1/2;
        width: 90%;
        height: 100%;
        
    
    }*/
    
    .servSectTwoSopTec {
       /* background-color: var(--primary-color);*/
        background-color: white;
        grid-column: 5/6;
        grid-row: 1/2;
        width: 90%;
        height: 70%;
    
        /*margin-top: 10px;*/
    
        /*margin-left: 1%;*/
    }
    
    .servSectTwofabSoft,
    .servSectTwoAlojWeb,
    .servSectTwoCalSoft,
    .servSectTwoConsTI,
    /*.intrportal,*/
    .servSectTwoSopTec {
        border-radius: 14px;
        text-align: center;
    
    }
    
    .servSectTwofabSoft:hover,
    .servSectTwoAlojWeb:hover,
    .servSectTwoCalSoft:hover,
    .servSectTwoConsTI:hover,
    /*.intrportal:hover,*/
    .servSectTwoSopTec:hover {
        box-shadow: 0px 0px 15px 15px var(--secondary-color);
        /*box-shadow: 0px 0px 15px 0px red;*/
        /*height: 180px;*/
        position: sticky;
    
        .experience-description {
            background-color: var(--primary-color);
            visibility: visible;
            opacity: .8;
            box-shadow: 0px 0px 5px black;
            margin: -10px -10px 0px 10px;
            border-radius: 14px;
        }
    
        /*FIN_COLUMNAS*/
    }

}