.container-agencia{ width: 100%; float: left; height: 1300px; margin: 142px 0 0; background: url(../img/agencia/background-agencia.jpg) no-repeat center top}

.engloba-anos-de-expertise{ float: left; width: 275px; margin: 51px 0 0 241px}
.engloba-anos-de-expertise p{ float: left; width: 100%; margin: -50px 0 0 0; text-align: center; font: 16.5px ubuntu; font-weight: 500; color: var(--branco); line-height: 21px}
.anos-de-expertise { font: 204px ubuntu; font-weight: 700; color: #ff5c7c; float: left; letter-spacing: -14px; text-shadow: 14px 17px 23px #cd0625; width: 240px; height: 270px; margin: -40px 0 0 15px; position: relative;}
.efeito-borrao { background: rgba(255, 255, 255, 0.23); width: 1px; height: 1px; border-radius: 74px; box-shadow: 0px 0px 138px 84px rgba(255, 255, 255, 0.23137254901960785); position: absolute; top: 50%; left: 50%; margin: -0.5px 0 0 -0.5px; z-index: 0;}

.encantar{ float: right; width: 50%; margin: 100px 0 0 0; text-align: center; background: url(../img/agencia/smile.svg) no-repeat center top; background-size: 58px}
.encantar b{ float: left; width: 100%; text-align: center; font: 28px ubuntu; font-weight: 700; color: var(--vermelho2); margin: 95px 0 0 0}
.encantar p{ float: left; width: 100%; text-align: center; font: 13px ubuntu; font-weight: 400; color: var(--cor2); margin: 20px 0 0 0}
.encantar a{ float: left; width: 100%; text-align: center; font: 15px ubuntu; font-weight: 500; color: var(--vermelho2)}
.encantar span{ display: inline-block; width: 43px; height: 9px; background: var(--vermelho2); margin: 30px 0 0}

.institucional-sites-10{ float: left; width: 50%; margin: 230px 0 0 0;}
.institucional-sites-10 b{ float: left; font: 32px ubuntu; font-weight: 500; color: var(--vermelho2); margin: 0 290px 0 80px;}
.institucional-sites-10 b h1{ display: inline-block;}
.institucional-sites-10 span{ display: inline-block; width: 43px; height: 9px; background: var(--vermelho2); margin: 25px 0 25px 80px}
.institucional-sites-10 p{ float: left; margin: 0 0 0 80px; font: 14px ubuntu; font-weight: 400; color: var(--cor2); line-height: 24px; text-align: justify}

.caneca-sites-10{ float: left; width: 50%; height: 380px; margin: 200px 0 0 0; background: url(../img/agencia/caneca-sites-10.png) no-repeat center top}

.nossa-metodologia{ float: right; width: 400px; margin: 135px 0 0 0}
.nossa-metodologia b{ float: left; width: 100%; font: 32px ubuntu; font-weight: 500; color: var(--vermelho2); margin: 0 0 25px 0}
.nossa-metodologia p{ float: left; width: 100%; font: 14px ubuntu; font-weight: 400; color: var(--cor2); text-align: justify; line-height: 24px}

.desenvolvimento-continuo{ float: left; width: 542px; margin: 136px 0 0 73px; background: url(../img/agencia/desenvolvimento-continuo.png) no-repeat top right}
.desenvolvimento-continuo p{ float: left; font: 13px ubuntu; font-weight: 500; color: var(--cor2); margin: -20px 90px 0 265px;}
.desenvolvimento-continuo div{ float: left; margin: 40px 31px 0 0; width: 74px}
.desenvolvimento-continuo div span{ float: left; width: 74px; height: 74px; border-radius: 50px;}
.desenvolvimento-continuo div span b{ float: left; margin: 17px 27.5px; color: var(--branco); font: 33px ubuntu; font-weight: 500}
.desenvolvimento-continuo div a{ float: left; width: 100%; text-align: center; font: 13px ubuntu; font-weight: 500; color: var(--cor2); margin: 20px 0 0 0}

.cor-azul{ background: var(--cor-criacao)}
.cor-amarelo{ background: var(--cor-loja-virtual)}
.cor-vermelho{ background: var(--cor-google-adwords)}
.cor-verde{ background: var(--cor-outros)}
.cor-preto{ background: #343434}

.fundo-teste { background: #ff3232;}

.container-google-partners{ display: block}

@media(max-width: 1320px){
    .nossa-metodologia { margin: 135px 20px 0 0;}
}
@media (max-width: 1220px){
    .container-agencia{ height: auto; margin: 90px 0 0;}
    .engloba-anos-de-expertise { margin: 51px 0 0 170px;}
    .caneca-sites-10 { background-size: 450px;}
    .nossa-metodologia { margin: 80px 0 50px 0;}
    .desenvolvimento-continuo { margin: 80px 0 20px 30px;}
    .institucional-sites-10 p { margin: 0 0 0 20px;}
    .institucional-sites-10 b { margin: 0 290px 0 20px;}
    .institucional-sites-10 span { margin: 25px 80px 25px 20px;}
}
@media (max-width: 1080px){
    .nossa-metodologia { width: 320px; margin: 0 30px 80px 0;}
} 
@media (max-width: 1023px){
    .nossa-metodologia { width: 96%; margin: 20px 2%;}
    .nossa-metodologia b { font: 20px ubuntu; font-weight: 500; margin: 0 0 15px 0; text-align: center;}
    .institucional-sites-10 { width: 96%; margin: 20px 2% 0; text-align: center;}
    .institucional-sites-10 b { margin: 0 0 20px; text-align: center; width: 100%; font: 20px ubuntu; font-weight: 500;}
    .institucional-sites-10 p { margin: 0;}
    .institucional-sites-10 span { margin: 20px 0; display: none}

    .caneca-sites-10 { width: 100%; height: 200px; margin: 20px 0 0 0; background: url(../img/agencia/caneca-sites-10.png) no-repeat center top; background-size: 300px;}
    .desenvolvimento-continuo { margin: 0 0 20px 0; background: none; width: 100%; text-align: center;}
    .desenvolvimento-continuo p { font: 20px ubuntu; font-weight: 500; margin: 0 0; width: 100%; text-align: center;}
    .desenvolvimento-continuo div { float: none; margin: 20px 15px 0; width: 74px; display: inline-block;}
    .container-agencia{ background: url(../img/agencia/background-agencia-responsivo.jpg) no-repeat center top; background-size: 1023px}

    .anos-de-expertise { font: 75px ubuntu; font-weight: 700; letter-spacing: -5px; width: 105px; height: 90px; margin: 0 0 0 -10px; float: none; display: inline-block;}

    .encantar { width: 100%; margin: 40px 0 0 0; background: url(../img/agencia/smile.svg) no-repeat center top; background-size: 40px;}
    .encantar b { font: 20px ubuntu; font-weight: 700; margin: 60px 0 0 0;}
    .encantar p { margin: 10px 0 0 0;}
    .encantar span { margin: 20px 0 0;}

    .engloba-anos-de-expertise { margin: 5px 2% 0; width: 96%; text-align: center}
    .engloba-anos-de-expertise p { margin: 0}

}
@media (max-width: 610px){
    .container-agencia { background: url(../img/agencia/background-agencia-responsivo.jpg) no-repeat center top; background-size: 1023px}
    .desenvolvimento-continuo div { text-align: center; margin: 20px 0 0;}
    .desenvolvimento-continuo div a { margin: 10px 0 0 0;}
    .desenvolvimento-continuo div span { width: 50px; height: 50px; float: none; display: inherit;}
    .desenvolvimento-continuo div span b { margin: 13px 20.5px; font: 20px ubuntu; font-weight: 500;}
}
@media (max-width: 480px){
    .container-agencia { background: url(../img/agencia/background-agencia-responsivo.jpg) no-repeat center top; background-size: 1023px}
    .desenvolvimento-continuo div { width: 60px;}
    .desenvolvimento-continuo div a { font: 10px ubuntu; font-weight: 500; margin: 10px 0 0}
    .desenvolvimento-continuo div span { width: 30px; height: 30px;}
    .desenvolvimento-continuo div span b { margin: 6px 10.5px; font: 15px ubuntu; font-weight: 500;}
    
    
}