/* </SOUL> */
@import url(index.css);
/* @import url(about.css); */
@import url(style.css);
header{
    background: linear-gradient(to bottom,
                                #101c25dc 20%,
                                #101c25cb 30%,
                                /* #101c25c9 70%, */
                                #101c25 100%
                                ),
                 url(../img/general/tech-collapse.png) center no-repeat;
    background-size: cover;
}
.our-works {
    margin-top: 3em;
}
.tittle {
    color: var(--light);
}
.text-paragraph {
    width: 1300px;
}
.text-secundary {
    width: 150%;
    text-align: left;
    color: var(--light);
}
.content__squares-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 4.5em 0;
}
.flex {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    background: var(--dark);
    margin: 2.5em 0;
    width: 330px;
    height: 401px;
    border-radius: .7em;
    border: 2px solid var(--dark-primary);
    transition: var(--trs-250-eio);
}
.flex:hover {
    box-shadow: 0 1em 2em .2em #242a317c;
    transform: translateY(-1em);
}

figure img {
    transform: translateY(-2.5em);
    width: 150px;
    height: 150px;
}

.brand {
    color: var(--primary);
    font-family: var(--raleway);
    font-weight: var(--fnt-sBold);
}
.sub-tittle .brand{
    width: 13em;
    font-size: 1.7em;
}
.works li {
    font-size: 1.6em;
    font-family: var(--poppins);
    padding: .5em;
    color: var(--light-hv);
}
@media screen and (max-width:800px) {
    .text-secundary {width: 110%;}
    .sub-tittle {width: 22em;}
    .works li{
        width: 13em;
        font-size: 1.7em;
    }
}
@media screen and (max-width:425px) {
    .sub-tittle {width: 22em;}
    .text-secundary {width: 100%;}
    .works li{
        width: 13em;
        font-size: 1.7em;
    }
}