
section.grupo-servicos {
    overflow: hidden;
}
.funil-inbouding .fi-item {
    padding: var(--lg-spacing) 0 var(--lg-spacing) calc((100vw - 100%) / 2);
    margin-left: calc((100% - 100vw) / 2);
    position: relative;
    display: flex;
    width:  calc(((100vw - 100%) / 2) + 90%);
    align-items: center;
}

.fi-item .funil-icone {
    position: absolute;
    left: 0;
    top: var(--bs-lg-spacing);
}

.lista-servicos {
    width: 76%;
    padding: var(--md-spacing)  var(--xl-spacing) var(--xl-spacing) calc(var(--xl-spacing) * 1.5);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-gap:0 var(--xl-spacing);
    position: relative;
    margin-right: -10%;
    z-index: 10;
}
.fi-text {
    flex: 1;
    font-size: 1.2em;
    position: relative;
    z-index: 1;
}

.lista-servicos .skew-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    transform: skew(-8deg);
    border: 1em solid var(--bs-secondary);
}

.lista-servicos .lista_item {
    position: relative;
    margin-bottom: 0;
}

.lista-servicos .skew-bg:before {
    width: 100%;
    height: 100%;
    position: absolute;
    content: ' ';
    border: 1px solid var(--bs-secondary);
    top: calc(var(--sm-spacing) * -1);
    left: var(--md-spacing);
}

.funil-inbouding {position: relative;}
.funil-inbouding:before{
    content:' ';
    position:absolute;
    background: #fff;
    transform: skew(-7deg);
    top: -1px;
    bottom: -1px;
    width: 100%;
    z-index: 2;
    left: 55%;
}
.fi-atrair.fi-item {
    background: var(--bs-secondary);
}

.fi-nutrir-e-converter.fi-item {
    background: var(--bs-primary);
}
.fi-nutrir-e-converter .lista-servicos .skew-bg,.fi-nutrir-e-converter .lista-servicos .skew-bg:before{
    border-color:var(--bs-primary);
}

.fi-vender.fi-item {
    background: var(--bs-accent);
}
.fi-vender .lista-servicos .skew-bg,.fi-vender .lista-servicos .skew-bg:before{
    border-color:var(--bs-accent);
}
.fi-encantar-e-fidelizar.fi-item {
    background: var(--bs-dark);
}
.fi-encantar-e-fidelizar .lista-servicos .skew-bg,.fi-encantar-e-fidelizar .lista-servicos .skew-bg:before{
    border-color:var(--bs-dark);
}
.fi-encantar-e-fidelizar.fi-item .fi-text > *,.fi-nutrir-e-converter.fi-item .fi-text > *{
    color:#fff;
}
@media (max-width:1199px) and (min-width:768px){

    .lista-servicos {
        width: 106%;
        grid-gap: 0 var(--md-spacing);
    }

    .fi-text {
        margin-left: var(--xs-spacing);
    }
}
@media (min-width:1200px){
    .fi-text {
        padding-right: var(--sm-spacing);
    }
}
@media (max-width:1199px){
    .funil-inbouding .fi-item {
        display: block;
    }
    .lista-servicos .skew-bg:before {
        left: var(--sm-spacing);
        width: 101%;
    }
    .funil-inbouding:before {
        left: 70%;
    }
    .lista-servicos {
        padding: var(--md-spacing) var(--lg-spacing) var(--xl-spacing) calc(var(--lg-spacing) * 2);
    }
    .fi-item .funil-icone{
        display:none;
    }
}
@media (max-width:991px){
    .lista-servicos{
        padding-top:0;
        padding-bottom: var(--lg-spacing);
        font-size:0.9em;
    }
    .lista-servicos .skew-bg {
        border-width: 0.6em;
    }
    .funil-inbouding:before {
        left: 64%;
    }
}
@media (max-width:991px) and (min-width:768px){

    .fi-vender .fi-text {
        max-width: 260px;
    }

    .fi-nutrir-e-converter .fi-text {
        max-width: 320px;
    }
}
@media (max-width:767px){
    .lista-servicos .skew-bg {
        transform: skew(0,-3deg);
    }

    .funil-inbouding .fi-item {
        width: 100vw;
        padding: var(--lg-spacing) calc((100vw - 100%) / 2) var(--lg-spacing) calc((100vw - 100%) / 2);
    }

    .lista-servicos {
        padding: var(--sm-spacing) var(--md-spacing) calc(var(--lg-spacing) * 1.3) calc(var(--md-spacing) * 1.5);
        margin-bottom: calc(var(--xxxl-spacing) * -1);
    }

    .fi-item:not(:first-child){
        padding-top: var(--xxl-spacing);
    }

    .funil-inbouding:before {
        display: none;
    }
    .funil-inbouding{
        padding-bottom:var(--xxl-spacing)
    }
}
@media (max-width:767px) and (min-width:575px){
    .lista-servicos {
        width: calc(100% + (var(--sm-spacing) * 2));
        grid-gap: 0 var(--sm-spacing);
        margin-left: calc(var(--sm-spacing) * -1);
        margin-right: calc(var(--sm-spacing) * -1);
    }
}
@media (max-width:574px){
    .lista-servicos {
        grid-template-columns: 1fr;
        width:100%;
    }
}
