@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html, body{ overflow-x: hidden !important; }
   
   
body {background-color: #000; background-image: url("..//img/banner-fundo.png"); background-position: top center; background-repeat: no-repeat; background-size:cover;  font-family: "Roboto", sans-serif;}
.container{max-width: 1098px;}
section, div, footer{scroll-margin-top: 150px;}

.navbar {padding-top: 35px;}
.navbar .container{position: relative;}
.icones-redes{position: absolute; display: flex; align-items: center; right: 20px; top: 0px; gap: 5px; }
.icones-redes h4{color: #fff; font-size: 1.2rem; margin-right: 25px; margin-bottom: 0; font-weight: 400;}
.icones-redes img{width: 25px;}
.nav-link{color: #fff; text-transform: uppercase; font-size: 16px; }
.navbar-nav .nav-link{padding-top: 0px ; padding-bottom: 0;}
.navbar-nav .nav-item:not(:last-child) {border-right: 1px solid #cecece;}
.btn-orange{display: flex; align-items: center; gap: 5px; background-color: #f58220; color: #101010; text-transform: uppercase; font-weight: bold; font-size: 14px; border-radius: 0; padding: 3px 10px; border-bottom: 2px solid #c56411;}
.btn-orange:hover{background-color: #b1601a; color: #101010;}
.btn-orange img{width: 18px;}
#navbarText{margin-top: 60px;}
#header {position: fixed;top: 0px;left: 0;width: 100%;z-index: 999;transition: background-color 0.3s ease, box-shadow 0.3s ease;}
#header[data-transparent] {background-color: rgba(0, 0, 0, 0);box-shadow: none;}
#header.scrolled { background-color: rgba(0, 0, 0, 0.9); box-shadow: 0 4px 20px rgba(0,0,0,0.3);}
.icones-mobile{display: none;}
.animated-icon1, .animated-icon2, .animated-icon3 {width: 56px; height: 20px; position: relative; margin: 0px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;}
.animated-icon1 span, .animated-icon2 span, .animated-icon3 span { display: block; position: absolute; height: 3px; width: 80%; opacity: 1; left: 0;-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.animated-icon1 span { background: #e65100;}
.animated-icon2{position: relative; z-index: 10;}
.animated-icon2 span {background: #fff;border: rgba(255, 255, 255, 0); border-radius: 20px;}
.navbar-toggler{border: rgba(255, 255, 255, 0);}
.navbar-toggler:focus{box-shadow:none;}
.animated-icon3 span { background: #0084c2;}
.animated-icon1 span:nth-child(1) {top: 0px;}
.animated-icon1 span:nth-child(2) {top: 10px;}.animated-icon1 span:nth-child(3) {top: 20px;}
.animated-icon1.open span:nth-child(1) {top: 11px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
.animated-icon1.open span:nth-child(2) { opacity: 0; left: -60px;}
.animated-icon1.open span:nth-child(3) {top: 11px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}
.animated-icon2 span:nth-child(1) {top: 0px;}
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {top: 10px;}
.animated-icon2 span:nth-child(4) {top: 20px;}
.animated-icon2.open span:nth-child(1) { top: 11px; width: 0%; left: 50%;}
.animated-icon2.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg); transform: rotate(45deg);}
.animated-icon2.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.animated-icon2.open span:nth-child(4) {top: 11px;width: 0%;left: 50%;}
.animated-icon3 span:nth-child(1) { top: 0px;-webkit-transform-origin: left center;-moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
.animated-icon3 span:nth-child(2) { top: 10px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.animated-icon3 span:nth-child(3) { top: 20px; -webkit-transform-origin: left center; -moz-transform-origin: left center;-o-transform-origin: left center;transform-origin: left center;}
.animated-icon3.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0px; left: 8px;}
.animated-icon3.open span:nth-child(2) {  width: 0%;  opacity: 0;}
.animated-icon3.open span:nth-child(3) {-webkit-transform: rotate(-45deg);  -moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);top: 21px;left: 8px;}
.menu-mobile {position: absolute;top: 60px;right: 10px;}


#carrossel { padding: 180px 0 20px; }
.carousel-container {display: flex;color: #fff;}
.carousel-text {position: relative;width: 50%;padding-right: 40px;}
.slides { position: relative; min-height: 260px; top: 100px;}
.slide {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;transform: translateX(40px);transition: opacity 0.4s ease, transform 0.4s ease;}
.slide.active { opacity: 1; transform: translateX(0); z-index: 9999;}
.slide h1 { color: #f58220; font-weight: bold; font-size: 42px;}
.slide h2 { font-size: 22px;font-weight: 300;margin: 0 0 90px;max-width: 420px;}
.btn-carrossel { background: #f58220; color: #fff; font-size: 14px; padding: 5px 10px; text-transform: uppercase;font-weight: bold; display: inline-block; text-decoration: none; border-bottom: 2px solid #c56411;}
.btn-carrossel:hover {background-color: #b1601a;}
.arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;}
.arrow.left { left: -100px; }
.arrow.right { right: -600px; }
.carousel-image { width: 50%; text-align: right;}
.carousel-image img { max-width: 100%;}

#servicos {padding: 20px 0;color: #fff;}
.titulo-servicos {font-size: 30px;text-transform: uppercase;font-weight: 300;color: #fff;}
.cards-servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.card-servico {background: linear-gradient(180deg, #343434, #080808);padding: 35px 15px;border-radius: 15px 0 0 0;box-shadow: 0 10px 30px rgba(0,0,0,0.6);}
.card-servico h3 {color: #f58220; font-size: 26px; text-transform: uppercase; height: 75px;}
.card-servico p {font-size: 22px;line-height: 1;font-weight: 300;color: #ddd;margin-bottom: 25px;}
.card-servico ul { list-style: none; padding: 0; margin: 0;}
.card-servico li { font-size: 14px; margin-bottom: 10px; position: relative; padding-left: 22px;}
.card-servico li::before { content: "✔";position: absolute;left: 0;color: #f58220;font-size: 14px;}

.atendimento { width: 100%;background: #0b0b0b;position: relative;overflow: hidden;}
.atendimento-inner {display: flex;}
.box {position: relative;display: flex;align-items: center;justify-content: center;flex: 1;z-index: 1;}
.box::before {content: "";position: absolute;top: 0;bottom: 0;width: 100vw;background: #151515;z-index: -1;}
.box:first-child::before {left: 100%;transform: translateX(-100%);background: #1a1a1a;}
.box:last-child::before {left: 0%;transform: translateX(0);}
.box-content {display: flex;align-items: center;gap: 20px;padding: 40px 10px;height: 100%;}
.texto-box {display: flex;flex-direction: column;height: 100%;}
.box h3 {font-size: 30px;letter-spacing: 1px;color: #fff;}
.box p {font-size: 16px;color: #bdbdbd;margin: 10px 0 20px;}
.btn-atendimento {display: inline-block;padding: 10px 26px;background: #f58220;color: #fff;text-decoration: none; font-weight: bold; font-size: 13px; border-radius: 3px; margin-top: auto; margin-right: auto;}

#diferenciais {padding: 20px 0;color: #fff;}
#diferenciais .titulo-servicos {font-size: 30px;text-transform: uppercase;font-weight: 300;color: #fff;}
#diferenciais .cards-servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center;}
#diferenciais .card-servico {display: flex; flex-direction: column; align-items: center; justify-content: center;  background: linear-gradient(180deg, #343434, #080808);padding: 35px 15px;border-radius: 15px 0 0 0;box-shadow: 0 10px 30px rgba(0,0,0,0.6);}
#diferenciais .card-servico .icon {width: 80px;height: 80px; display: flex;align-items: center;justify-content: center;margin-bottom: 20px;}
#diferenciais .card-servico .icon img {max-width: 100%;max-height: 100%;object-fit: contain;}
#diferenciais .card-servico h3 {color: #f58220; font-size: 18px; text-transform: uppercase; width: 160px;  height: auto;}
#diferenciais .card-servico p {font-size: 16px;line-height: 1;font-weight: 300;color: #ddd; }
#diferenciais .card-servico ul { list-style: none; padding: 0; margin: 0;}
#diferenciais .card-servico li { font-size: 14px; margin-bottom: 10px; position: relative; padding-left: 22px;}
#diferenciais .card-servico li::before { content: "✔";position: absolute;left: 0;color: #f58220;font-size: 14px;}
.saiba-mais{padding-top: 30px;}
.saiba-mais h2{font-size: 30px;text-transform: uppercase;font-weight: 300; line-height: 1; color: #fff; margin-bottom: 0;}
.saiba-mais p{color: #5c5c5c; font-size: 16px; padding-bottom: 30px;}
.saiba-mais h3{font-size: 16px; font-weight: 400;}
.btn-saiba-mais{ background: #f58220; color: #fff; border-radius: 0; font-size: 14px; padding: 5px 10px; text-transform: uppercase;font-weight: bold; display: inline-block; text-decoration: none; border-bottom: 2px solid #c56411; margin-top: 30px;}
.btn-saiba-mais:hover{background-color: #b1601a;}

#sobre-empreendedor{background-color: #f58220; }
#sobre-empreendedor .row{align-items: center;}
.btn-empreendedor{ background: #000; color: #fff; border-radius: 0; font-size: 14px; padding: 5px 10px; text-transform: uppercase;font-weight: bold; display: inline-block; text-decoration: none; border-bottom: 2px solid #c56411; margin-top: 30px;}
.btn-empreendedor:hover{background: #292929; color: #fff; border-bottom: 2px solid #c56411;}
.imagem-diretor img{margin-top: -30px;}
.pop-up-marcelo,
.pop-up-sobre { position: fixed;inset: 0;background: rgba(0, 0, 0, 0.329);display: flex;justify-content: center; align-items: flex-start;  opacity: 0; visibility: hidden; transition: opacity 0.4s ease; z-index: 99999;}
.pop-up-marcelo.active,
.pop-up-sobre.active {opacity: 1;visibility: visible;}
.curriculum{display: flex; align-items: center; justify-content: center; background-color: #000; padding: 30px; transform: translateY(50px); border-radius: 20px;}
.curriculum h2{color: #f58220; padding-bottom: 30px; text-transform: uppercase;}
.curriculum h3{color: #f58220; text-transform: uppercase; font-weight: 400;}
.texto-curriculum{padding-top: 0 !important;}
.imagem-marcelo img{width: 100%;}
.texto-sobre, .texto-curriculum{max-width: 1000px;width: 90%;max-height: 90vh;overflow-y: auto;padding: 40px;transform: translateY(50px);transition: transform 0.4s ease;}
.pop-up-marcelo.active .container,
.pop-up-sobre.active .container {transform: translateY(0);}
.pop-up-marcelo,
.pop-up-sobre h2{color: #f58220; padding-bottom: 30px;}
.pop-up-marcelo,
.pop-up-sobre p{color: #fff; margin: 0;}
.pop-up-marcelo.active .container,
.pop-up-sobre.active .container {transform: translateY(0);}
.pop-up-close {position: absolute;top: 25px;right: 25px;background: none;border: none;font-size: 28px;cursor: pointer;z-index: 10;color: #fff;}
.texto-sobre {background: #000; width: 60%; margin: 0 auto; border-radius: 20px; padding: 20px;}
/* largura do scrollbar */
.texto-sobre::-webkit-scrollbar,
.texto-curriculum::-webkit-scrollbar {width: 6px; }
.texto-sobre::-webkit-scrollbar-track,
.texto-curriculum::-webkit-scrollbar-track {background: transparent;}
.texto-sobre::-webkit-scrollbar-thumb,
.texto-curriculum::-webkit-scrollbar-thumb {background-color: #f58220; border-radius: 10px;}
.texto-sobre::-webkit-scrollbar-thumb:hover,
.texto-curriculum::-webkit-scrollbar-thumb:hover {background-color: #ff9c3a;}
.texto-sobre,
.texto-curriculum {scrollbar-width: thin;scrollbar-color: #f58220 transparent;}



#video{background-color: #272727; padding: 30px 0;}
.video-play iframe{width: 100%; height: 480px;}
.social img{width: 25px;}

.footer {background: #000;color: #fff;padding-top: 50px;font-family: Arial, Helvetica, sans-serif;}
.footer-container {display: flex;justify-content: space-between;gap: 20px;flex-wrap: wrap;}

.footer-col h4 {color: #f58220;font-size: 16px;margin-bottom: 15px;letter-spacing: 1px;}
.footer-col ul {list-style: none;padding: 0;margin: 0;}
.footer-col ul li {margin: 0px; line-height: 1.2;}
.footer-col ul li a {color: #ccc;text-decoration: none;font-size: 16px;}
.footer-col ul li a:hover {color: #fff;}
.footer-col p {font-size: 16px;color: #ccc;line-height: 1.6;}
.footer-col p a{text-decoration: none; color: #ff7a00;}
.footer-col p a:hover{color: #b95f0a;}
.social {display: flex;gap: 15px;}
.social a {font-size: 20px;text-decoration: none;color: #ff7a00;}
.social a:hover {color: #fff;}
.mt {margin-top: 25px;}
.telefone{margin: 0 !important;}
.numero{font-size: 26px !important;}
.email{margin: 55px 0 0 0 !important;}
.desenvolvedor{background-color: #232323; padding: 20px 0;}
.desenvolvedor .row{align-items: center;}
.desenvolvedor p{margin: 0;}
.logo-as{text-align: right;}
.logo-as img{width: 60px;}


@media (max-width: 990px) {
    body{text-align: center;}
    #navbarText{margin: 0;}
    .ms-auto{margin: 0 !important;}
    .icones-redes{display: none;}
    .icones-mobile{display: flex; gap: 20px; padding-top: 30px;}
    .icones-mobile img{width: 30px;}
    .navbar-nav .nav-item:not(:last-child) {border: none;}
    .navbar-collapse {position: fixed;inset: 0;width: 100%;height: 100vh;background: radial-gradient(circle at top, #111, #000);display: flex !important;flex-direction: column;justify-content: center;align-items: center;padding: 40px 20px;opacity: 0;visibility: hidden;transform: translateY(-20px);transition: opacity .4s ease, transform .4s ease, visibility .4s;z-index: 9999;}
    .navbar-collapse.show {opacity: 1; visibility: visible; transform: translateY(0);}
    .navbar-collapse .navbar-nav {align-items: center;}
    .navbar-collapse .nav-link {font-size: 22px;font-weight: 400; padding: 12px 0; color: #fff;}
    .navbar-collapse .btn {margin-top: 30px;}
    #carrossel {padding: 80px 0 20px;}
    .carousel-container {flex-direction: column;text-align: center;}
    .carousel-image {width: 100%;order: 2;margin-bottom: 30px;text-align: center; padding-top: 45px;}
    .carousel-image img { max-width: 80%; height: auto;}
    .carousel-text {position: relative;width: 100%;padding: 0;order: 1;}
    .slides {min-height: 220px;top: 0; text-align: center;}
    .slide h2{margin: 0 auto; padding-bottom: 20px;}
    .btn-carrossel {font-size: 13px; padding: 10px 15px;}
    .carousel-arrows {position: relative;display: flex;justify-content: space-between;align-items: center;margin-top: 20px;transform: translateY(150px);z-index: 10;}
    .arrow {position: static;background: none;border: none;cursor: pointer;}
    .arrow img { width: 36px;}
    .atendimento-inner{flex-direction: column;}
    .box-content{flex-direction: column;}
    .box:first-child::before{left: 105%;}
    .box:last-child::before{left: -5%;}
    .btn-atendimento{margin: 0 auto;}
    #diferenciais .cards-servicos{grid-template-columns: 1fr;}
    #sobre-empreendedor{padding-top: 30px;}
    .imagem-diretor img {margin-top: 30px;}
    .footer-container {flex-direction: column;gap: 30px;}
    .footer-logo {text-align: center;}
    .social {align-items: center;justify-content: center;}
    .logo-as{text-align: center;}
    .numero{margin: 0;}
    .email {margin: 15px 0 0 0 !important;}
}

@media (max-width: 748px) {
    .cards-servicos {grid-template-columns: 1fr;}
    
}

@media (max-width: 640px) {
.slides {min-height: 260px;}
#carrossel { padding: 105px 0 20px;}
.arrow img {width: 15px;}
}

@media (max-width: 390px) {
    .carousel-image{margin-top: 30px;}
}


