/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&family=Work+Sans&display=swap');
@font-face {font-family: 'Azo Sans';src: url('fonts/AzoSans-Medium.ttf');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Azo Sans Regular';src: url('fonts/AzoSans-Regular.ttf');}

/*TOPO*/
.menu-topo {display:flex;justify-content: end;align-items: center;padding: 16px 0 16px 0;}
.menu-topo ul {margin-right: 20px;margin-bottom:0}
.menu-topo ul li{display: inline-block;margin-right: 42px;font-family:'DM Sans', sans-serif;font-size:18px;}
.menu-topo ul li:hover {cursor: pointer;opacity:.8;}
.menu-topo ul li i {padding-left:20px;}

.icone-menu-mobile, .menu-mobile {display: none;}

/*TIPOGRAFIA*/
.bloco1 .col-sm-6 h1 span, .bloco2 .col-sm-6 h1 span, .bloco3 .col-sm-12 h1 span, .bloco4 .col-sm-12 h1 span, .bloco5 .col-sm-6 h1 span,
.bloco6 .col-sm-12 h1 span, .bloco7 .col-sm-6 h1 span, .bloco9 .col-sm-6 h1 span, .bloco11 .col-sm-12 h1 span
{text-decoration: underline;text-decoration-style: wavy;text-decoration-skip-ink: none;text-underline-offset: 5px;}
.bloco h1, .divisor h1, .card-item h5, .bloco6 h3 {font-family: 'Azo Sans';}
.bloco h1, .divisor h1 {font-size: 52px;letter-spacing:-2px;}
.bloco p {font-size: 18px;font-family: 'Work Sans', sans-serif;}
.bloco6 h3 {font-size:35px; line-height: 40px;}

/*BOTÕES*/
.btn-red, .btn-black, .btn-black-sml {display:flex;justify-content: center;align-items: center; border-radius: 7px;text-decoration: none;transition:.2s ease-in-out;font-family: 'Azo Sans Regular';color:#fff;}
.btn-red {width: 262.5px;height: 50.75px;background: #FF0D38;border: 1px solid #262626;box-shadow: -3px 3px 0 #262626;}
.btn-red i, .btn-black i, .btn-black-sml i {margin-left:20px;}
.btn-red:hover {box-shadow: -6px 6px 0 #262626;}
.btn-black {width: 302px;}
.btn-black-sml {padding: 0 30px;}
.btn-black, .btn-black-sml {height: 50px;background:#262626;border:1px solid #FF0D38;box-shadow: -3px 3px #FF0D38;}
.btn-black:hover {box-shadow: -6px 6px #FF0D38;}
.btn-black-sml:hover {box-shadow: -4px 4px #FF0D38;}

/*FORMULÁRIO*/
.formulario input {border: 2px solid #262626; box-shadow: -3px 3px 0 #262626;margin-bottom:20px;padding: 10px;font-family:'Azo Sans'}
.formulario input:focus {box-shadow: -6px 6px #262626;}
.formulario input::placeholder {color:#BDBFCA;font-family: 'Azo Sans';}
.formulario label {font-family: 'Azo Sans';padding:0;margin:0;}
.formulario label span {color: #FF0D38;}
.enviar {display: flex;justify-content: end;padding-top: 10px;}
.enviar2 {display: flex;justify-content: start;padding-top: 10px;}

.bloco1 .col-sm-6 img, .bloco2 .col-sm-6 img, .bloco4 .col-sm-6 img, .bloco7 .col-sm-6 img,
.bloco9 .col-sm-6 img, .bloco11 .col-sm-6 img  {max-width: 97%;}
/*BLOCOS*/
.row {align-items: center;}
.bloco {padding: 60px 0;display: flex;justify-content: center;align-items: center;}
.bloco h1 {margin-bottom: 20px;}

.bloco1 {background:url('imagens/bg-bloco1-estrela-verde.png') no-repeat 3% 35px, url('imagens/bg-bloco1-estrela-azul.png') no-repeat 40% 50px;}
.bloco1 .col-sm-6 h1 span, .bloco4 .col-sm-12 h1 span, .bloco9 .col-sm-6 h1 span {text-decoration-color:#1521FE;}

.divisor .container {border-top: 3px solid #262626;border-bottom: 3px solid #262626;padding:25px 0;}
.divisor p {margin-bottom: 0;text-align: center;}
.divisor h1 {margin-bottom: 0;line-height:1;display: flex;justify-content: center;align-items: center;}
.divisor h1 i {color:#FF0D38;font-size:28px;line-height: 30px;}

.bloco2 .col-sm-6 h1 span, .bloco5 .col-sm-6 h1 span, .bloco7 .col-sm-6 h1 span, .bloco11 .col-sm-12 h1 span {text-decoration-color:#FF2B51;}

.bloco3 {background-image:url('imagens/bg-bloco3-estrela-verde.png'), url('imagens/bg-bloco3-estrela-azul.png'), url('imagens/bg-bloco3-linhas.png');
background-color: #262626;
background-repeat: no-repeat,no-repeat,no-repeat;
background-size:inherit,inherit,cover;
background-position: 40px 20px, 95% 22px, bottom center;}
.bloco3 h1, .bloco3 p {color:#fff;text-align: center;}
.bloco3 p {margin-bottom:50px}
.bloco3 .col-sm-12 h1 span {text-decoration-color:#F7E018;}
.cards {display: flex;justify-content:space-around;align-items: center;}
.card-item {text-align:center;max-width:341px;min-height:346px;background: #FFFFFF;border: 2px solid #FF0D38;box-shadow: -3px 3px 0px #FF0D38;border-radius: 24px;
    padding:42px 30px 21px 30px;margin-bottom: 64px;transition:.2s ease-in-out;}
    .card-item:hover {box-shadow: -6px 6px 0 #FF0D38;}
.card-item-img {display:flex;justify-content:center;align-items:center ;margin-bottom: 15px;height:56px;}
.card-item p {color:#64626E;font-size: 16px;margin-bottom:0;line-height: 30px;}
.div-btn {display: flex;justify-content: center;align-items: center;}
.div-btn-lft {display: flex;justify-content: start;align-items: center;padding-top:30px}

.bloco4 {background-color:#EEFFF6;}
.bloco4 h1, .bloco4 p {text-align:center;}
.bloco4 p {padding-bottom: 50px;}
.bloco4 .div-btn {padding-top: 50px;}
/*.cards-small {display: flex;justify-content:space-around;align-items:center;flex-direction:row;}*/
.card-small {font-family: 'Work Sans', sans-serif;color:#000;font-size:14px;font-weight:400;background-color:#AAF5CE;border: 1px solid #262626;box-shadow: -2px 2px 0px #266226;
    border-radius: 80px;padding: 5px;display:inline-block;margin-right:12px;margin-bottom: 23px;transition:.2s ease-in-out;}
.card-small:hover {box-shadow: -4px 4px 0 #266226;}

.bloco5 {background:url('imagens/bg-bloco5-estrela-lilas.png') no-repeat 44% 508px,
    url('imagens/bg-bloco1-estrela-azul.png') no-repeat 98% 20px}
.bloco5 .div-btn {padding-top: 100px;display: flex;justify-content: start;}
.bloco5 p {padding-top:30px;}
.btns-bl5 {padding-top:70px;}
.btn-bl5 {display:flex;justify-content:flex-start;align-items:center;width:449px;height: 120px;color:#fff;text-decoration:none;font-family: 'Azo Sans';font-size: 33px;border: 2px solid #000000;
    box-shadow: -3px 3px 0px #000000;border-radius: 240px;margin-bottom:50px;}
.btn-bl5 i {margin-left:74px;}
.btn-bl5-whats {background-color:#128C7E;}
.btn-bl5-whats i {margin-right: 91px;}
.btn-bl5-slack {background-color:#3F0E40;}
.btn-bl5-slack i {margin-right: 129px;}
.btn-bl5-email {background-color:#AEA870;}
.btn-bl5-email i {margin-right: 122px;}
.btn-bl5-whats, .btn-bl5-slack, .btn-bl5-email {transition: .3s ease-in-out;}
.btn-bl5-whats:hover, .btn-bl5-slack:hover, .btn-bl5-email:hover {box-shadow: -6px 6px 0 #000;}
.bloco5 .col-sm-6 {max-width: 100%;}

.bloco6 {background-color:rgba(255, 158, 13, .06);}
.bloco6 .col-sm-12 h1 span {text-decoration-color:#5CF1A4;}
.bloco6 .col-sm-12 h1, .bloco6 .col-sm-12 p {text-align: center;}
.bloco6 .descricao-planos p {margin-bottom:50px;}
.bloco6 small {font-family: 'Work Sans'; color:#9995AE;font-size:15px;}
.bloco6 .plano-basico h3 {color:#18BCF9}
.bloco6 .plano-standard h3 {color:#FE0229}
.bloco6 .plano-avancado h3 {color:#FF912C}
.bloco6 .plano-enterprise h3 {color:#2BD07B}

.bloco6 .plano-cxb {background:url('imagens/attri-manutencao-de-sites-bg-bloco6a.png');position: absolute;width: 120px;height: 123px;margin-left:209px;margin-top:-20px;text-align: center;display: flex;justify-content: center;align-items: center;transform: rotate(-30deg);font-family: 'Work Sans', sans-serif;color:#fff;font-size:16px;line-height:14px;}

.bloco6 .plano p {text-align: left}
.bloco6 .plano-basico p, .bloco6 .plano-basico small, .bloco6 .plano-basico h3,
.bloco6 .plano-standard p, .bloco6 .plano-standard small, .bloco6 .plano-standard h3,
.bloco6 .plano-avancado p, .bloco6 .plano-avancado small, .bloco6 .plano-avancado h3,
.bloco6 .plano-enterprise p, .bloco6 .plano-enterprise small, .bloco6 .plano-enterprise h3 {padding-left: 10px;}
.bloco6 .plano-basico {padding-left: 27px;}
.bloco6 .plano hr {border-top:2px solid #262626; opacity: 1;}
.bloco6 .plano-itens ul, .bloco7 .plano-itens ul {column-count: 2;font-family: 'Work Sans', sans-serif;font-size:14px;column-gap:0;padding-left:0;}
.bloco6 .plano-itens li, .bloco7 .plano-itens li {line-height: 35px;list-style:none;padding-left: 25px;}
.bloco6 .plano-itens .itens-on, .bloco7 .plano-itens .itens-on {background: url(imagens/attri-manutencao-de-sites-planos-itens-on.png) no-repeat 0 8px;}
.bloco6 .plano-itens .itens-off, .bloco7 .plano-itens .itens-off {background: url(imagens/attri-manutencao-de-sites-planos-itens-off.png) no-repeat 2px 8px;color:#64626E}
.bloco6 .plano-preco {border-left: 2px solid #262626;height: 240px;display: grid;align-content: center;}
.bloco6 .plano-preco p {margin-bottom:5px;color:#64626E;text-align: center;}
.bloco6 .plano-preco h3 {font-size:33px;text-align: center;justify-content: center;}
.card-big {background: #FFFFFF;border: 2px solid #262626;box-shadow: -3px 3px 0px #262626;border-radius: 24px;height: 240px;display:grid;transition:.2s ease-in-out;margin-bottom:25px;}
.card-big:hover {box-shadow: -6px 6px 0 #262626;}
.bloco6 .card-info {background: #AEA870;border: 2px solid #000000;box-shadow: -3px 3px 0px #262626;border-radius: 70px;font-family: 'Work Sans', sans-serif;color:#fff;font-size: 18px;display: flex;align-items: center;justify-content: center;padding:10px 0;}
.bloco6 .card-info img {width: 39px; height: 39px;margin-left:74px;margin-right: 34px;}

.bloco7 .plano-itens ul {font-size:13px;}

.bloco8 .clientes ul {column-count:4;padding-left: 0;}
.bloco8 img {max-width: 100%;padding-top: 60px;}

.bloco9 {background-color:#C9E6F1}

.bloco10 h1 {text-align: center;margin-bottom:60px}
.card-depoimento {border: 3px solid #262626;box-shadow: -4px 4px 0px #262626;border-radius: 24px;padding-top:86px;margin:0 13px;width:31%;}
.card-depoimento-header {width:95px;height:71px;background: url(imagens/attri-bg-bloco10-depoimentos-aspas-.png) no-repeat 0 0;position:absolute;margin-top: -118px;margin-left:-22px;}
.card-depoimento-conteudo {height:340px;}
.card-depoimento-conteudo p {padding:0 28px;margin:0}
.card-depoimento hr {border-top:2px solid #262626;opacity: 1;margin:0 0 57px 0;}
.card-depoimento-footer {margin-top:57px;margin-bottom:75px;display: flex;justify-content: center;align-items: center;}
.card-depoimento-footer img {background: #D9D9D9;border: 3px solid #000000;box-shadow: -3px 3px 0px #000000;border-radius:50%;margin-right:18px;width: 80px;height: 80px;}
.card-depoimento-footer h5 {font-family: 'Azo Sans';font-size:19px;margin-bottom:0}
.card-depoimento-footer small {color:#64626E;font-family: 'Work Sans', sans-serif;}

.bloco11 {background: url(imagens/attri-manutencao-de-sites-img-bloco11.png) no-repeat 90% 116px;}
.bloco11 h1, .bloco11 p {text-align: center;}
.bloco11 p {margin-bottom:30px;}
.bloco11 .brands {margin-top:-31px}

footer {padding-top: 60px;}
footer img {max-width: 100%;}

/*MOBILE*/
@media screen and (max-width: 730px) {
    .menu-topo ul {display: none;}

    .icone-menu-mobile {display:block;}
    .icone-menu-mobile {cursor: pointer;font-size:32px;color:#262626;margin-left:20px;}
    .icone-menu-mobile button {background: transparent;border: none;}
    .menu-mobile {width: 100%;}
    .menu-mobile ul {min-width:100%;display: flex;flex-direction: column;text-align: center;padding:0;}
    .menu-mobile li {padding-top:10px;list-style:none;font-family:'DM Sans', sans-serif;font-size:18px;}
    .menu-mobile li i {margin-left: 5px;}
    .abrir-menu .menu-mobile {display: block;}
    .menu-mobile {display: none;}
    .abrir-menu {display: block;}
    
    .btn-red {width: 155px;padding: 0 10px;;}

    .bloco{padding: 25px;}
    .bloco1 {background:url('imagens/bg-bloco1-estrela-verde.png') no-repeat 3% 0, url('imagens/bg-bloco1-estrela-azul.png') no-repeat 95% 30px;}
    .bloco1 .col-sm-6 img {max-width: 100%;}

    .divisor h1, .bloco9 h1 {margin-top:35px}

    .bloco2 img {padding-bottom: 35px;}

    .bloco3 {
        background-image: url(imagens/bg-bloco3-estrela-verde.png), url(imagens/bg-bloco3-estrela-azul.png), url(imagens/bg-bloco3-linhas.png);
        background-color: #262626;
        background-repeat: no-repeat,no-repeat,no-repeat;
        background-size: inherit,inherit,cover;
        background-position: -32px 20px, 113% 22px, bottom center;}
    .card-item {margin-bottom:32px;}
    .card-small {font-size:12px;}
    .bloco4 .div-btn {padding-top: 25px;}
    .bloco4 .imagem {margin-top:35px;}

    .bloco5 {background: url(imagens/bg-bloco5-estrela-lilas.png) no-repeat 44% 625px,
        url(imagens/bg-bloco1-estrela-azul.png) no-repeat 126% 20px!important;}
    .bloco5 .container{max-width: 100%;}
    .btn-bl5, .btns-bl5 {width:100%!important;}
    .btn-bl5 i {margin-left: 63px;}
    .btn-bl5-whats i {margin-right: 19px;}
    .btn-bl5-slack i {margin-right: 45px;;}
    .btn-bl5-email i {margin-right:40px;}

    .card-big {height: 750px;width: 95%;margin-left: 10px;}
    .bloco6 .plano-itens ul, .bloco7 .plano-itens ul {column-count: 1;}
    .bloco6 .plano-preco {border-left:none;border-top:2px solid #262626}
    .bloco6 .plano-cxb {margin-top:-543px;}
    .bloco6 .card-info {width: 95%;margin-left: 10px;}
    .bloco6 .card-info img {padding-left: 10px;padding-right:4px;}

    .card-depoimento {width: 100%;margin-top:60px;}

    .bloco11 .formulario {margin-top:60px;}
    .bloco11 .brands {margin-top:0}
}