:root {
    --criacao-cor1: #8829CE;
    --criacao-cor2: #8829CE;
}

.engloba-servicos{ width: 100%; float: left; margin: 142px 0 0 0; background: url(../img/bing-ads/background-bing-ads.png) no-repeat center top}
.venha-tomar-um-cafe-conosoco { background: var(--criacao-cor2);}
.infos-rodape { border-left: solid 10px var(--criacao-cor2);}
.infos-rodape b i { color: var(--criacao-cor2);}
.formulario-footer-padrao-2 button { background: var(--criacao-cor2);}
.formulario-footer-padrao-2 textarea { box-shadow: inset 0px 0px 0px 1px #104053;}
.formulario-footer-padrao-2 input { box-shadow: inset 0px -1px 0px 0px #104053;}

.background-leao-servicos{ float: left; width: 100%; height: 528px; background: url(../img/background-leao.jpg) no-repeat center top}

.por-que-escolher-a-sites-10{ float: right; width: 535px; margin: 170px 0 0 0}
.por-que-escolher-a-sites-10 h2{ float: right; width: 100%; font: 32px ubuntu; font-weight: 400; color: #8829CE; margin: 0 0 40px 0}
.por-que-escolher-a-sites-10 h2 span{ font: 32px ubuntu; font-weight: 700}
.por-que-escolher-a-sites-10 h3{ float: right; width: 100%; font: 14px ubuntu; font-weight: 400; color: #6a6a6a; margin: 0 0 25px 0}
.por-que-escolher-a-sites-10 h3 i{ float: left; width: 14px; height: 14px; background: #8829CE; border-radius: 14px; margin: 1px 10px 0 0}

.titulo-criacao-de-sites{ float: left; color: #fff; font: 58px hughsregular; line-height: 25px; margin: 115px 0 100px 205px}
.titulo-criacao-de-sites b{ font: 65px ubuntu; font-weight: 700; text-transform: uppercase}

.entender-criacao-de-sites{ float: right; width: 50%; margin: 90px 0 0 0; text-align: center; background: url(../img/bing-ads/lampada.svg) no-repeat center top; background-size: 72px}
.entender-criacao-de-sites b{ float: left; width: 100%; text-align: center; font: 28px ubuntu; font-weight: 700; color: var(--criacao-cor1); margin: 95px 0 0 0}
.entender-criacao-de-sites p{ float: left; width: 100%; text-align: center; font: 13px ubuntu; font-weight: 400; color: var(--cor2); margin: 20px 0 0 0}
.entender-criacao-de-sites a{ float: left; width: 100%; text-align: center; font: 15px ubuntu; font-weight: 500; color: var(--criacao-cor1)}
.entender-criacao-de-sites span{ display: inline-block; width: 43px; height: 9px; background: var(--criacao-cor1); margin: 30px 0 0}
.entender-criacao-de-sites span i{ float: left; width: 1px; height: 180px; background: var(--criacao-cor1); margin: 9px 21px 0;}
.decidem-online a sup{ font: 22px ubuntu; font-weight: 700; color: var(--criacao-cor1); position: relative; top: -20px;}

.por-que-ter-um-site{ float: left; width: 50%; margin: 165px 0 0 0;}
.por-que-ter-um-site h2{ float: left; font: 32px ubuntu; font-weight: 500; color: #8829CE; margin: 0 200px 0 80px;}
.por-que-ter-um-site span{ display: inline-block; width: 43px; height: 9px; background: #8829CE; margin: 25px 0 25px 80px}
.por-que-ter-um-site h4{ float: left; margin: 0 0 0 80px; font: 14px ubuntu; font-weight: 400; color: var(--cor2); line-height: 24px; text-align: justify}

.engloba-tabela{ float: right; width: 50%; text-align: center; margin: 135px 0 0 0}

.tabela-servicos { width: 305px; display: inline-block; height: 442px; border-bottom: solid 16px var(--criacao-cor1); background: #fff; box-shadow: 0px -4px 20px 1px rgba(0, 0, 0, 0.12); border-top-left-radius: 15px; border-top-right-radius: 15px;}

.barrinha-tabela{ float: left; width: 240px; margin: 0 32.5px; height: 1px; background: #ebebeb}

.decidem-online{ float: left; margin: 55px 35px 35px; display: flex; align-items: center; gap: 10px;}
.decidem-online a{ float: left; font: 52px ubuntu; font-weight: 700; color: var(--criacao-cor1)}
.decidem-online b{ float: left; font: 23px ubuntu; font-weight: 700; color: var(--criacao-cor1); text-align: center; line-height: 22px;}
.decidem-online b i{ float: left; font: 17px ubuntu; font-weight: 400; color: #808080;}

.pesquisas-apontam{ float: left; font: 16px ubuntu; font-weight: 400; color: #6a6a6a; padding: 42px 46px; line-height: 24px}

.sua-presenca-online{ float: left; width: 100%; text-align: center; font: 16px ubuntu; font-weight: 400; color: #6a6a6a;}
.sua-presenca-online i{ font:700 22px ubuntu; font-weight: 700; color: #6A6A6A;}

.conheca-seus-clientes{ float: left; height: 600px; align-content: center;grid-template-columns: 1fr 1fr; display: grid; background: url(../img/bing-ads/background.png) no-repeat center left; background-size: 490px 590px;}
.conheca-seus-clientes h4{ float: left; width: 100%; font: 14px ubuntu; font-weight: 400; color: #6a6a6a; line-height: 24px; text-align: justify; margin: 25px 0 0 0}
.conheca-seus-clientes h2{ float: left; width: 100%; font: 32px ubuntu; font-weight: 500; color: #8829CE; margin: 40px 0 0 0}
.fundo-teste { background: var(--criacao-cor2);}

.conheca-seus-clientes .imagens {position: relative;}


.conheca-seus-clientes .item {display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); aspect-ratio: 1/1; height: auto; width: auto;}
.conheca-seus-clientes .item .texto {display: flex; flex-direction: column; color: #fff; text-align: center; padding: 15px;}
.conheca-seus-clientes .item .texto strong {font: 700 25.6px ubuntu;}
.conheca-seus-clientes .item .texto p {font: 400 16.25px ubuntu;}
.conheca-seus-clientes .item .texto p b {font-weight: 700;}


.conheca-seus-clientes .item#item-3 {background: #6E2B9F; width: 215px; height: 215px; z-index: 2;right: 34%; bottom: -11%;}
.conheca-seus-clientes .item#item-2 {background: #9857C3; width: 240px; height: 240px; z-index: 3; bottom: 72px; left: 40px;}
.conheca-seus-clientes .item#item-1 {background: #721FB0; width: 265px; height: 265px; z-index: 4; right: 143px; top: -44px;}
.conheca-seus-clientes .item#carta {background: #fff; z-index: 1; right: 160px; bottom: 60px; padding: 7px; box-sizing: border-box;}
.conheca-seus-clientes .item#engrenagem {background: #fff; z-index: 1; padding: 20px; box-sizing: border-box; bottom: -5px; left: 120px;}
.conheca-seus-clientes .item#wifi {background: #fff; z-index: 1; padding: 15px; box-sizing: border-box; top: 168px; left: -20px;}
.conheca-seus-clientes .item#bola {background: #fff; z-index: 5; padding: 20px; box-sizing: border-box; top: 168px; left: 250px;}
.conheca-seus-clientes .item#bing {background: #fff; z-index: 5; padding: 20px; box-sizing: border-box; top: -60px; left: 110px;}


@media (max-width: 1300px){
    .conheca-seus-clientes .item#item-3,
    .conheca-seus-clientes .item#item-2,
    .conheca-seus-clientes .item#item-1 {position: static; width: 240px; height: 240px; z-index: 0;}
    .conheca-seus-clientes .item#carta,
    .conheca-seus-clientes .item#engrenagem,
    .conheca-seus-clientes .item#wifi,
    .conheca-seus-clientes .item#bola,
    .conheca-seus-clientes .item#bing {display: none;}

    .conheca-seus-clientes {height: auto;display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; background: none; margin: 55px 0 0 0;}
    .conheca-seus-clientes .imagens {display: flex; gap: 30px; margin: 50px 0 0;}
}
@media (max-width: 1180px){
    .conheca-seus-clientes { margin: 120px 0 0 0;}
    .entender-criacao-de-sites { width: 40%;}
    .engloba-tabela { float: right; width: 40%;}

    .por-que-ter-um-site { width: 55%;}
    .por-que-escolher-a-sites-10 { width: 440px;}

}

@media (max-width: 1130px){
    .por-que-ter-um-site h4 { margin: 0 0 0 2%;}
    .por-que-ter-um-site h2 { margin: 0 0 0 2%; width: 98%;}
    .por-que-ter-um-site span { margin: 25px 0 25px 2%;}
    .conheca-seus-clientes {margin: 50px 0 0 0}
} 

@media (max-width: 1023px){
    .infos-rodape { border-left: solid 0px var(--criacao-cor2);}
    .engloba-servicos { margin: 90px 0 0 0; background: url(../img/bing-ads/background-mobile.jpg) no-repeat center top; background-size: 1023px}

    .titulo-criacao-de-sites { font: 40px hughsregular; line-height: 25px; margin: 40px 0 0 0; width: 100%; text-align: center;}
    .titulo-criacao-de-sites b { font: 50px ubuntu; font-weight: 700;}

    .entender-criacao-de-sites { width: 100%; margin: 50px 0 0 0;}
    .entender-criacao-de-sites b { font: 20px ubuntu; font-weight: 700; margin: 80px 0 0 0;}
    .entender-criacao-de-sites p { margin: 5px 0 0 0;}

    .por-que-ter-um-site { width: 96%; margin: 20px 2% 0; text-align: center;}
    .por-que-ter-um-site h2 { margin: 0; width: 100%; text-align: center; font: 25px ubuntu; font-weight: 500;}
    .por-que-ter-um-site span { margin: 20px 0;}
    .por-que-ter-um-site h4 { margin: 0;}

    .engloba-tabela { width: 100%; margin: 40px 0 0 0;}

    .decidem-online { margin: 20px 30px 20px;}
    .tabela-servicos {height: 360px;}
    .barrinha-tabela { width: 210px; margin: 0 20.5px;}
    .pesquisas-apontam { font: 14px ubuntu; font-weight: 400; padding: 25px 32px; line-height: 24px;}
    .sua-presenca-online { font: 14px ubuntu; font-weight: 400; margin: 20px 0 0 0;}
    .sua-presenca-online i { font: 20px ubuntu; font-weight: 700;}


    .conheca-seus-clientes { margin: 20px 0 0 0; margin: 20px 2% 0; padding: 0 0 0; height: auto;}
    .conheca-seus-clientes h4 { margin: 0 0 10px 0;}
    .conheca-seus-clientes h2 { font: 20px ubuntu; font-weight: 500; margin: 30px 0; text-align: center;}
 
    .background-leao-servicos { height: auto; background: none}
    .por-que-escolher-a-sites-10 { width: 96%; margin: 20px 2% 0;}
    .por-que-escolher-a-sites-10 h2 { width: 100%; font: 20px ubuntu; font-weight: 400; margin: 0 0 20px 0;}
    .por-que-escolher-a-sites-10 h2 span { font: 20px ubuntu; font-weight: 700;}
    .por-que-escolher-a-sites-10 h3 { margin: 0 0 20px 0;}

    .background-leao-servicos{ display: none}
    .conheca-seus-clientes {margin: 20px 0;}
}

@media(max-width: 880px) {
    .conheca-seus-clientes .imagens {flex-wrap: wrap; align-items: center; justify-content: center;}

}

@media (max-width: 610px){
    .titulo-criacao-de-sites { margin: 35px 0 0 0; font: 30px hughsregular;}
    .titulo-criacao-de-sites b { font: 30px ubuntu; font-weight: 700;}
    .entender-criacao-de-sites { width: 100%; margin: 70px 0 0 0;}
    .pesquisas-apontam { padding: 10px 32px;}
    .decidem-online { margin: 20px 41px 10px;}
    .decidem-online a { font: 45px ubuntu; font-weight: 700;}
    .decidem-online b { font: 20px ubuntu; font-weight: 700; line-height: 20px; margin: 6px 0 0 15px;}
    .decidem-online b i { font: 15px ubuntu; font-weight: 400;}
    .sua-presenca-online { margin: 10px 0 0 0;}
    .tabela-servicos { height: 270px;}
}