/* </LE GRASO> */
@import url(style.css);
@import url(index.css);

header{
    background: linear-gradient(to bottom,
                                #101c25dc 20%,
                                #101c25cb 30%,
                                /* #101c25c9 70%, */
                                #101c25 100%
                                ),
                 url(../img/general/support.png) center no-repeat;
    background-size: cover;
}
.services--text {
    margin-top: 3em;
}
.cards-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 3em 0;
}
.cards-1 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/it\ consulting.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}
.cards-2 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/networks.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-3 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/desktop.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-4 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/remoteit.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-5 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/data.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-6 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/voip.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-7 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/cyber.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-8 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/video.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-9 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/managed.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-10 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/wiring.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-11 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/relocation.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-12 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/pos.svg) ;
    background-size: cover;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}.cards-13 {
    color: var(--light);
    display: grid;
    background: linear-gradient(to bottom, #101c2580,#101C25), url(../img/services/webdev.svg) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 15em 0 0;
    width: 330px;
    height: 401px;
    margin: 3em 0;
    transition: var(--trs-500-eio);
    overflow: hidden;

}
.cards:hover {transform: scale(1.05);}
.card-content-text {
    padding: 1rem;
    transform: translateY(65%);
    transition: var(--trs-500-eio);
    
}
.cards:hover .card-content-text {
    transform: translateY(0);
}
.card-title {
    padding: .5em 0;
    width: 363px;
    position: relative;
    /* margin: 0 1.5em; */
    margin-bottom: .4em;
    font-size: 24px;
    font-weight: var(--fnt-bold);
    color: var(--warning);
    transition: var(--trs-500-eio);
}
.cards:hover .card-title {
    color: var(--light);
    font-weight: var(--fnt-medium);
}
.card-title::after { 
    content: "";
    position: absolute;
    margin-top: .5em;
    height: 3px;
    width: 100%;
    left: 0;
    bottom: 0;
    background: var(--warning);
    transform: scaleX(0);
    transform-origin: right;
    transition: var(--trs-500-eio);
}
.cards:hover .card-title::after {transform: scaleX(1);}
.card-body {
    /* margin: 1.3em;   */
    width: 290px;
    opacity: 0;
    transition: var(--trs-500-eio);
}
.cards:hover .card-body {opacity: 1;}

.cards-3 .card-content-text,
.cards-10 .card-content-text {
    transform: translateY(59%);
}
.cards-12 .card-title,
.cards-13 .card-title {
    width: 300px;
}