/* Reset */

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,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#fff;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

@font-face {
     font-family: 'Roboto';
     src: url(../fonts/roboto/Roboto-Regular.ttf);
}

@font-face {
     font-family: 'RobotoM';
     src: url(../fonts/roboto/Roboto-Medium.ttf);
}

@font-face {
     font-family: 'RobotoB';
     src: url(../fonts/roboto/Roboto-Black.ttf);
}

@font-face {
     font-family: 'RobotoBB';
     src: url(../fonts/roboto/Roboto-Bold.ttf);
}


@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Sigmar+One&display=swap');

html {
  scroll-behavior: smooth;
}

body{
	max-width: 100vw;
  	overflow-x: hidden;
  	top: 0;
  	left: 0;
	cursor: default;
	font-family: Roboto; 
}

::-webkit-scrollbar {
    width: .3em;
    background-color: rgba(0,199,0,0);
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0);
}
 
::-webkit-scrollbar-thumb {
	background: linear-gradient(263deg, rgba(255,184,26,1) 40%, rgba(162,80,156,1) 100%);	
	overflow: hidden;
  	border-radius:5px;
 	outline:none;
	
}

body{
	background-color: #302e2c;
}
p{font-size: 130%; 
	line-height: 35px; 
	color: #b0b0b0; 
	font-weight:300; 
	letter-spacing:2px; 
	font-family: "Roboto";
	
}

.side-nav .userView .circle {
	height: 64px;
	width: auto;
	border-radius: 0px;
  }

.topo {
	position: relative;
}

.header {
	position: relative;
	width: 100%;
	height: 65vh;
	display: flex;
	align-items: center;
	padding-left: 70px;
	box-sizing: border-box;
  }
  .header__background {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgb(255,184,26);
	background: linear-gradient(63deg, rgba(255,184,26,1) 40%, rgba(162,80,156,1) 100%);	
	overflow: hidden;
	transform: skewY(3deg) translateY(-80px);
	z-index: -1;
  }
  .header__background:after {
	content: '';
	background: url("dark-mosaic.png");
	width: 800%;
	position: absolute;
	top: -400%;
	right: -400%;
	height: 800%;
	opacity: 0.3;
	animation-name: rotate;
	animation-duration: 140s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
  }
  .header__title {
	color: #fff;
	z-index: 2;
	display: inline-block;
	margin-top: -10vh;
  }

  .header__title p {
	margin-left: 5vw;
	margin-top: 2vw;
	font-size: 2vw;
	font-weight: 400;
	color: rgba(48, 46, 44, .7);
  }
  .logoBrava {
	max-height: 30vh;
  }
  @-moz-keyframes rotate {
	0% {
	  transform: rotateZ(0deg);
	}
	100% {
	  transform: rotateZ(360deg);
	}
  }
  @-webkit-keyframes rotate {
	0% {
	  transform: rotateZ(0deg);
	}
	100% {
	  transform: rotateZ(360deg);
	}
  }
  @-o-keyframes rotate {
	0% {
	  transform: rotateZ(0deg);
	}
	100% {
	  transform: rotateZ(360deg);
	}
  }
  @keyframes rotate {
	0% {
	  transform: rotateZ(0deg);
	}
	100% {
	  transform: rotateZ(360deg);
	}
  }

.menu1{
	position: absolute;
    display: inline-block;
    left: 20px;
    top: 90px;
}

.aboutUs{
	padding: 40px;
}
  .sobreNos{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 30px;
}
  .sobreNos p{
	margin-bottom: 2vh;
  }
  .sobreNos div{
	width: 85vw;
	margin-right: 15vw;
  }
  .sobreNos h1{
	color: #797976 ;
	min-width: 10vw;
	text-align: center;
	letter-spacing: 3px;
	transform: rotate(-90deg);
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 12vh;
  }
  .sobreNos h1 span {
	color: rgba(255,184,26,1) ;
	text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.671);
  }
  .servicos{
	padding: 5vw;
	margin-top: 10vh;
  }
  .servicos h1{
	color: #797976 ;
	min-width: 10vw;
	text-align: right;
	margin-top: -10vh;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 12vh;
  }
  .servicos h1 span {
	color: rgb(255, 28, 240);
	background: linear-gradient(63deg, rgba(255,184,26,1) 10%, rgba(162,80,156,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 3px 2px 5px rgba(0, 0, 0, 0);
  }

  .tabsWork {
	background: url("work02.jpg");
	background-position: center;
	background-attachment: fixed;
	background-size: cover;

  }
  .work2{
	max-width: 60vw;
	margin-left: 13vw;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	
  }
  .tabsWork .row {
	padding: 5vw;
	max-width: 60vw;
	
  }
  .tabsWork .row p{
	line-height: 140%;
  }

  .tabsWork .row li{
	font-size: 90%; 
	line-height: 120%;
	color: #b0b0b0; 
	font-weight:300; 
	letter-spacing:2px; 
	font-family: "Roboto";
	max-width: 50vw;
	margin-top: 2vh;
	margin-left: 2vw;
  }
  .tabsWork .row li span {
	color: rgb(255,184,26);
	text-align: left;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 2.4vh;
	text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.671);
}


/* TABS */

@media screen and (min-width: 480px) {
	.work2 { padding: 3vw; }
	}


.tabLink{
	padding-top: 0px;
}
.tabName p {

	font-weight: 400;
	line-height: 2.4vh;
	font-size: 1.7vh;
}
.tabName a:hover p {
	color:#f5f5f5 ;
}
.tabName .active p {
	color:#f5f5f5 ;
}



.us22 h1{
	color: #797976 ;
	min-width: 10vw;
	text-align: right;
	margin-top: -10vh;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 12vh;
  }
  .us22 h1 span {
	color: rgb(255,184,26);
	text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.671);
  }
.consult01{
	width: 80vw;
	margin-left: 2vw;
}
.consult01 h3 {
	color: rgb(255,184,26);
	text-align: left;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 14px;
	margin-top: 14px;
	font-family: "Luckiest Guy", serif;
	font-size: 2.4vh;
	text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.671);
}

.consult01 p span {
	color: rgb(255,184,26);  ;
	text-align: left;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 2.4vh;
	text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.671);
}


.contact-section, .support-section {
	
	padding: 50px 0px;
}

.contact-container, .support-container {
	max-width: 60vw;
	margin: 0 auto;
	background: #fafafa ;
	background: linear-gradient(160deg, rgba(220,220,220,1) 0%, rgba(240,240,240,1) 8%, rgba(250,250,250,1) 76%);
	border-radius: .6px;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.41);
	padding: 50px;
}

.contact-header, .support-header {
	text-align: center;
	margin-bottom: 20px;
}

.contact-header h2, .support-header h2 {
	margin: 0;
	color: rgb(255,184,26);
	text-align: center;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 4vh;
	text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.5);
}

.contact-header p, .support-header p {
	color: #bdbdbd;
	font-size: 16px;
}

form {
	display: flex;
	flex-direction: column;
}

input::placeholder, 
textarea::placeholder {
	margin-bottom: 5px;
	color: #bdbdbd;
	text-align: left;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-family: "Roboto";
	font-weight: 600;
	font-size: 2vh;
	text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.1);
}

.h-captcha {
	
	margin: 15px;
}

form button {
	background-color: rgb(255,184,26);
	color: #fff;
	padding: 10px;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s;
}

form button:hover {
	background-color: rgb(206, 148, 24);
}




.footer{
	background: linear-gradient(63deg, rgba(255,184,26,1) 40%, rgba(162,80,156,1) 100%);	background-repeat: no-repeat;
	background: url("bgfooter.png");
	background-position: bottom;
	background-attachment: fixed;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	column-gap: 5vw;
	line-height: 1.6vw;
	padding: 2vw;
	padding-bottom: 15vh;
	color: #302e2c;
  }

  .footer img{
	width: 15vw;
	height: auto;
	margin-top: 5vh;
	margin-bottom: 5vh;
	  transition: all .8s ease-in-out;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
  }
  .footer img:hover {
	  transform: scale(1.15);
  }
  
  .footer h4 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.2vw;
	color: #302e2c;
  }
  .footer p {
	font-weight: 400;
	font-size: 1.2vw;
	color: #302e2c;
  }
  .footer a {
	font-weight: 800;
	font-size: 1.4vw;
	text-decoration: none;
	color: #302e2c;
	
	line-height: 1.5;
  }
  
  .socialIcons a{
	
	text-decoration: none;
	font-size: 2vw;
	padding: .5vh;
  }
  .copy {
	margin-top: -10vh;
	text-align: center;
	
  }
  .copy p{
	color: #302e2c;
	font-size: 1.3vw;
  }

@media screen and (max-width: 780px) {

	
.header {
	position: relative;
	width: 100%;
	height: 65vh;
	display: flex;
	align-items: center;
	padding-left: 15px;
	box-sizing: border-box;
}

.header__background:after {
	width: 600%;
	position: absolute;
	top: -300%;
	right: -300%;
	height: 600%;

}
.header__title {
	z-index: 2;
	display: flex;
	flex-direction: column;
	margin-top: -10vh;
}

.header__title p {
	margin-left: 5vw;
	margin-top: 5vw;
	font-size: 6vw;
	font-weight: 500;
	color: rgba(48, 46, 44, .7);
}
  .logoBrava {
	max-height: auto;
	width: 90vw;
}


.aboutUs{
	padding: 0px;
}
  .sobreNos{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0px;
}
  
  .sobreNos div{
	width: 90vw;
	margin-right: 5vw;
	margin-left: 5vw;
  }
  .sobreNos p{
	margin-bottom: 2vh;
	font-size: 4.2vw;
  }
  .sobreNos h1{
	color: #797976 ;
	min-width: 10vw;
	text-align: right;
	letter-spacing: 3px;
	transform: rotate(0deg);
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 12vw;
  }


  .servicos{
	padding: 5vw;
	margin-top: 10vh;
  }
  .servicos h1{
	color: #797976 ;
	min-width: 10vw;
	text-align: left;
	margin-top: -10vh;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 12vw;
  }

  .tabsWork {
	background: url("work02.jpg");
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
  }

.tabs{
	display: flex;
	flex-direction: column;
}
.tabs .tab {
	width: 100%;
	background-color: #424242;
	border-bottom: 1px solid transparent;
    border-image:linear-gradient(263deg, rgba(255,184,26,1) 40%, rgba(162,80,156,1) 100%);
	border-image-slice: 1;
}

.tabs .indicator {
	display: none;
}

.tabLink{
	padding-top: 0px;
}

.tabName a:hover p {
	color:rgba(255,184,26,1);
}
.tabName .active p {
	color:rgba(255,184,26,1);
}

  .work2{
	max-width: 90vw;
	margin-left: 0vw;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	
  }
  .tabsWork .row {
	padding: 5vw;
	max-width: 75vw;
	
  }
  .tabsWork .row p{
	font-size: 90%; 
	line-height: 120%;
  }

  .tabsWork .row li{
	font-size: 80%; 
	line-height: 120%;
	color: #b0b0b0; 
	font-weight:300; 
	letter-spacing:2px; 
	font-family: "Roboto";
	max-width: 80vw;
	margin-top: 2vh;
	margin-left: 2vw;
  }
  .tabsWork .row li span {
	font-size: 2.3vh;
}

.us22 h1{
	text-align: right;
	margin-top: 5vh;
	margin-right: 5vw;
	font-size: 12vw;
  }

.consult01{
	width: 90vw;
	margin:5vw;
}
.consult01 h3 {
	font-size: 2vh;
}

.consult01 p span {
	font-size: 2vh;
}
.consult01 p {
	font-size: 2vh;
}

.contact-container, .support-container {
	max-width: 85vw;
	padding: 20px;
}


.contact-header h2, .support-header h2 {
	letter-spacing: 2px;
	font-size: 6.4vw;
	padding-bottom: 1vh;
}

.contact-header p, .support-header p {
	color: #bdbdbd;
	font-size: 16px;
	line-height: 20px;
}

form {
	display: flex;
	flex-direction: column;
}

input::placeholder, 
textarea::placeholder {
	letter-spacing: 2px;
	font-size: 4vw;
}

.h-captcha {
	margin: 0px;
	scale: 70%;
	
}


.footer{

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 8vh;
	row-gap: 4vh;
	
  }
  .footer img{
	width: 65vw;
	height: auto;
	margin-top: 1vh;
	margin-bottom: 0vh;
  }
  
  
  .footer h4 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 4.2vw;
	line-height: 5.5vw;
  }
  .footer p {
	max-width: 80vw;
	font-weight: 400;
	font-size: 4vw;
	line-height: 4.5vw;
  }
  .footer h5 a {
	font-weight: 800;
	font-size: 6.2vw;
	text-decoration: none;
	text-align: center;
	line-height: 6.9vw;
  }
  .copy {
	margin-top: -6vh;
	text-align: center;
	
  }
  .copy p{
	font-size: 2vw;
	line-height: 3vw;
  }

}

/*Mensagem Enviada*/
#msgOk{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: url("work02.jpg");
background-position: center;
background-attachment: fixed;
background-size: cover;

}

.okCentro{
	background-color: #302e2c;
	padding: 60px 30px;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.41);
}
.okCentro svg {
	color: rgb(255, 28, 240);
	
	filter: drop-shadow(5px 3px 2px rgb(0 0 0 / 0.4));
}
#msgOk h4{
	margin: 0;
	color: rgb(255,184,26);
	text-align: center;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-family: "Luckiest Guy", serif;
	font-size: 4vh;
	text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.5);
}






.space {height: 2000px;}