/*   
Por Camila Lins
http://camilalins.co
2023
*/

@charset "utf-8";

/* Reset */
*, *:before, *:after {box-sizing:border-box; -moz-box-sizing:border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block;}
audio, canvas, progress, video {display:inline-block;}
img, object, embed, video, iframe {max-width:100%;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
th {font-weight:bold; vertical-align:bottom;}
td {font-weight:normal; vertical-align:middle;}
hr {display:block; height:1px; border:0; border-top:1px solid #CCC; margin:10px 0; padding:0;}
input, select {vertical-align:middle;}
pre {white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom; *vertical-align:baseline;}
input:focus, textarea:focus, button:focus {outline:0;}
a:hover, a:active {outline:0;}
small {font-size:85%;}
strong, th {font-weight:bold;}
td, td img {vertical-align:top;}
sub, sup {font-size:75%; line-height:0; position:relative;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
pre, code, kbd, samp {font-family:monospace, sans-serif;}
label, input[type=button], input[type=submit], button {cursor:pointer;}
body, select, input, textarea {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
button, input, select, textarea {margin:0; resize:none; color:inherit; font:inherit; border:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
button {width:auto; overflow:visible;}
textarea {overflow:auto;}
ins {background:#FDD900; color:#000; text-decoration:none;}
mark {background:#FDD900; color:#000; font-style:italic; font-weight:bold;}
audio, canvas, iframe, img, svg, video {vertical-align:middle;}
html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

::-moz-selection{background:#f5c533; color:#29235c; text-shadow:none;}
::selection {background:#f5c533; color:#29235c; text-shadow:none;}

::-webkit-input-placeholder {color:#CCC; opacity:1;}
::-moz-placeholder {color:#CCC; opacity:1;}
::placeholder {color:#CCC; opacity:1;}

/* Toolbox */
.hide {display:none !important;}
.flex {display:flex;}

/* Variáveis */
:root {
    --cor-vermelho:#e20613;
    --cor-azul:#29235c;
    --cor-amarelo:#f5c533;
}

/* Page style */
html {overscroll-behavior:none; overflow-x:hidden;}
body {font:16px 'Open Sans', sans-serif; color:var(--cor-azul); background:#FFF; min-height:100vh; overflow-x:hidden;}

a {color:var(--cor-amarelo); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:all 150ms ease-out;}
a:hover {color:#FFF;}

.mobile-check {display:none;}

.video-embed {position:relative; width:100%; padding-bottom:56.3%; height:0;}
.video-embed iframe {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}

.wrapper {max-width:1200px; margin:0 auto; padding:0 35px;}

/* Header */
header {position:fixed; top:0; z-index:100; background:#FFF; padding:25px 0; width:100%;}
header .flex {justify-content:space-between; align-items:center;}
h1 a {display:block; width:540px; height:100px; text-indent:-99999px; background:url(img/layout/logo.svg) no-repeat; background-size:100%;}
nav a {color:#707579; font-size:20px; font-weight:600; text-transform:uppercase; padding:0 10px; border-right:1px solid #DEDEDE;}
nav a:hover {color:var(--cor-azul);}
nav a:last-child {border:0;}

/* Início */
#main {background:#bd1521; margin-top:150px; padding-bottom:35px;}

#main .intro {background:url(img/content/banners/01.jpg) no-repeat center top; background-size:100% auto; width:100vw; height:19.2vw; margin-bottom:-3%;}
#main h2 {color:#FFF; font-size:2vw; line-height:2.5vw; text-transform:uppercase; font-weight:700; max-width:40%; text-align:center; padding:9% 0;}

#main .flex {align-items:flex-end;}
#main img {width:75%; margin-left:-10%; float:left;}
#main .estimate {width:35%; color:#FFF; text-align:center;}
#main .estimate h3 {font-size:65px; line-height:55px; margin-bottom:40px;}
#main .estimate h3 span {display:block; font-size:18px; line-height:30px; margin-left:50px;}
#main .estimate p {font-size:22px; margin:25px 0; font-weight:600;}
#main .estimate p span {display:block; font-weight:700;}
#main .estimate p:last-child {margin:0;}
#main .estimate .whatsapp {display:inline-block; padding-left:9%; background:url(img/layout/icon-whatsapp.svg) no-repeat left center; background-size:auto 80%;}

/* Sobre */
#about {background:#fb9f11;}
#about .intro {background:url(img/content/banners/02.jpg) no-repeat center bottom; background-size:100% auto; width:100vw; height:22vw;}

#about .flex {justify-content:space-around; align-items:center; padding:35px;}
#about .flex p {max-width:430px; font-size:21px; line-height:30px; font-weight:600; text-align:justify;}
#about .flex img {width:53.33%;}

/* Serviços */
#services {background:#868686; color:#FFF;}
#services .intro {background:url(img/content/banners/03.jpg) no-repeat center top; background-size:100% auto; width:100vw; height:20.1vw;}

#services h3 {text-align:center; font-size:50px; margin-top:35px;}
#services ul {align-items:flex-end; justify-content:space-between; padding:50px 0;}
#services li {text-transform:uppercase; text-align:center; width:16%; padding-right:.66%; position:relative;}
#services li:after {content:''; position:absolute; bottom:0; right:0; width:1px; height:100px; background:#FFF;}
#services li:last-child:after {display:none;}
#services li img {transform:scale(1.2);}
#services li p {font-size:20px; font-weight:600; line-height:24px; margin:35px auto 0; width:88%;}

/* Footer */
footer {background:#bd1521; text-align:center; padding:30px 35px; color:#FFF;}
footer p {font-size:22px; font-weight:500; margin-bottom:35px;}
footer .dev {font-size:10px; opacity:.5; text-align:right; margin-top:-14px;}
footer .dev a {color:var(--cor-verde); font-weight:700;}
footer .dev a:hover {text-decoration:underline;}


/* Tapume */
#tapume {background:#EEE;}
#tapume #wrap {display:flex; align-items:center; justify-content:center; flex-direction:column; height:100vh; text-align:center; padding:35px;}
#tapume h1 {max-width:100%; width:600px; height:112px; text-indent:-99999px; background:url(img/layout/logo.svg) no-repeat; background-size:100%;}
#tapume h2 {margin:5% 0; font-size:50px; line-height:55px; color:var(--cor-vermelho);}
#tapume .contact p {font-size:18px; font-weight:600; margin:5% 0;}
#tapume .contact p:first-child {font-size:22px;}
#tapume .contact p span {display:block;}
#tapume .contact a:hover {color:var(--cor-vermelho)}

/* Media Queries*/
@media screen and (max-width:1500px){
    #main h2 {font-size:2.3vw; line-height:2.5vw; padding:7% 2.2%;}
}
@media screen and (max-width:1080px){
    header {padding:15px 0;}
    h1 {width:50%;}
    h1 a {width:100%; height:0; padding-bottom:18.8%;}
    header nav a {font-size:18px;}
    #main {margin-top:11.5%;}
    #main .flex {padding-top:25px;}
    #main img {width:72%;}
    #main .estimate h3 {font-size:55px; line-height:45px; margin-bottom:25px;}
    #main .estimate h3 span {font-size:2vw; line-height:3vw;}
    #main .estimate p {margin:18px 0; font-size:20px;}

    #services ul {flex-wrap:wrap;}
    #services li {width:33%; margin:4% 0;}
    #services li:nth-child(3):after {display:none;}
}
@media screen and (max-width:920px){
    #main .estimate h3 {font-size:6vw; line-height:4.5vw; margin-bottom:2.2vw;}
    #main .estimate p {font-size:2.15vw;}

    #about .flex p {font-size:2.3vw; line-height:3.4vw;}
    #about .flex img {margin-left:2.5%;}

    #services h3 {font-size:6vw; line-height:4.5vw; margin-bottom:2.2vw;}
}
@media screen and (max-width:850px){
    #main .intro {margin-bottom:0;}
}
@media screen and (max-width:750px){
    header .flex {flex-direction:column; align-items:center;}
    header nav {margin-top:15px;}
    header nav a {font-size:2.5vw;}
    #main {margin-top:18.7%;}
    #main .intro .wrapper {display:flex; height:100%; align-items:center;}
    #main h2 {margin:0 auto; font-size:3vw; line-height:4.5vw; padding:3.5% 2.2%; max-width:none;}

    #services li p {font-size:3vw; line-height:3.2vw;}
}
@media screen and (max-width:650px){
    #main {margin-top:20%;}
    #main h2 {font-size:4.6vw; line-height:5.2vw; max-width:80%;}
    #main .flex {flex-direction:column; align-items:center;}
    #main .flex img {width:100%; order:2;}
    #main .flex .estimate {order:1; width:85%; margin-bottom:2%;}
    #main .estimate h3 {font-size:7.5vw; line-height:6vw; margin-bottom:2.2vw;}
    #main .estimate h3 span {font-size:2.8vw;}
    #main .estimate p {font-size:3.15vw;}

    #services li {width:49%;}
    #services li:nth-child(2):after {display:none;}
    #services li:nth-child(3):after {display:block;}
    #services li:nth-child(4):after {display:none;}

    #about .flex {flex-direction:column;}
    #about .flex img {margin:30px 0 0; width:100%;}
    #about .flex p {font-size:3.2vw; line-height:5vw;}

    footer p {font-size:3vw; line-height:3.5vw; margin-bottom:20px;}
    footer .dev {margin:0 0 -14px;}
}
@media screen and (max-width:600px){
    header nav {margin-top:3%;}
    header nav a {font-size:3vw;}
    #main {margin-top:20%;}
    #main .intro {height:25vw; background-size:cover;}
    #main .estimate p {font-size:5.2vw;}
}
@media screen and (max-width:450px){
    #main {margin-top:23.8%;}
    #main .flex .estimate {width:100%;}
    #main .estimate p a {font-size:5vw;}
    #services ul {justify-content:center; padding-bottom:0;}
    #services li {width:80%; margin:0 0 50px;}
    #services li:after {display:none !important;}
    #services li p {font-size:4.7vw; line-height:5.2vw;}
    footer .dev {font-size:8px;}
}