body{ font-family: 'Open Sans', sans-serif;
    font-family: 'Sora', sans-serif;  background-image: url(../imgs/background.png); background-repeat: no-repeat; background-position: bottom right;}


@media (max-width: 1000px){
    .container, .container-md, .container-sm {
        max-width: 96%;
    }
}

@media (max-width: 700px){
    .container, .container-md, .container-sm {
        max-width: 95%;
    }
}

a{ text-decoration: none;}
a:hover{ text-decoration:underline;}

.bg-subblack{ background-color: #141519; color:#fff;}
.bg-black{ background-color: #000; color:#fff;}
.bg-yellow{ background-color: #F0B839; color:#000;}
.bg-gray{ background-color: #F0EFEE;}

.no-margin{ margin: 0 !important;}
#title-box {
    width: 200px;
    top: -60px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#title-box h2{ font-size: 30px; font-weight: 300; margin: auto;}

#title-box #title-box-h {
    width: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
    border-radius: 14px;
    background-color: #fff;
    height: 100%; /* Ajuste a altura do h2 para ocupar toda a altura da div */
    margin: 0; /* Remova qualquer margem que possa afetar o alinhamento */
    position: absolute;
    top: 0; left: 0;
    z-index: 999; 
}

#title-box #title-box-yellow{ top:-18px; right: -18px; position: absolute;  width: 100px; height: 100px; background-color: #F0B839; border-radius: 0 14px 0 ;}
#title-box #title-box-gray{ top:98px; left: -18px; position: absolute;  width: 100px; height: 100px; background-color: #DFDFDF; border-radius: 0 14px 0 ;}

#subtitle{ text-align: center; padding: 60px 0;}
#subtitle h2{ font-size: 45px; font-weight: 300; max-width: 70%; margin: 0 auto;}

#title{  padding: 20px 0;}
#title h1{ font-size: 50px; font-weight: 300; max-width: 80%;}
#title h3{ font-size: 18px; font-weight: 400; margin-bottom: 20px;}
#title p{ font-size: 20px; font-weight: 300;}

#conteudo p{ font-size: 20px; font-weight: 300;}
#conteudo .card-interno{ display: none;}

@media (max-width: 700px){
    #subtitle{ padding: 25px 0;}
    #subtitle h2{ font-size: 24px; max-width: 90%;}

    #title h1{  font-size: 30px; max-width: 100%;}
    #title .right{ padding-top: 70px;}
    #title p{ font-size: 16px; }

    #title-box { width: 135px; top: -80px; margin: 0 auto; }
    #title-box h2{ font-size: 20px; font-weight: 300; text-align: center;}
    #title-box #title-box-yellow{ top:-10px; right: -12px;  width: 60px; height: 60px; }
    #title-box #title-box-gray{ top:78px; left: -12px; width: 60px; height: 60px; }
    #title-box #title-box-h { min-height: 125px; padding: 10px; }

    
}

nav{ background-color: #000; color:#808080;}
nav .navbar-collapse{ flex-grow: initial;}
nav li{ margin: 0 20px; font-size: 14px; font-weight: 400; padding-top: 3px;}
nav a{ color:#808080;  }
nav a:hover{ color:#fff; text-decoration: none;}
nav .redes{ padding-top: 0;}
nav .redes a{ margin: 0 5px; font-size: 20px; padding-top: 0;}

.boxs{ padding: 100px 0;}
.boxs h4{ font-size: 14px; font-weight: 400; padding: 0; text-transform: uppercase;}
.boxs h2{ font-size: 60px; font-weight: 300; margin: 40px 0 60px 0;  padding: 0}
.boxs h3{ font-size: 24px; font-weight: 400;  padding: 0}
.boxs .right{ padding: 20px 60px;}

.boxs a.link{ border-bottom: 1px solid #F0B839; color:#000; font-size: 22px; padding-bottom: 10px; margin-top: 20px;}
.boxs a.link:hover{ color: #F0B839; text-decoration: none;}
.boxs a.link i{color:#F0B839;}

@media (max-width: 700px){
    .boxs{ padding: 40px 0;}
    .boxs h4{ font-size: 13px; }
    .boxs h2{ font-size: 35px; margin: 30px 0 30px 0;}
    .boxs h3{ font-size: 18px; }
    .boxs .left{ width: 100%; padding: 10px 0px;}
    .boxs .right{ width: 100%; padding: 10px 0px;}

    .boxs a.link{ font-size: 18px; padding-bottom: 10px; margin-top: 20px;}
}




#banner-interno{ }
#banner-interno img{ width: 100%;}

#banner { position: relative; color:#fff;}
#banner img{ width: 100%;}
#banner h1 { max-width: 800px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5em; font-weight: 300; }
#banner h1 b{ font-weight: 600;}
#banner a { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); font-weight: 300; border-bottom: 1px solid #F0B839; color:#fff; font-size: 22px; padding-bottom: 10px;}
#banner a i{color:#F0B839;}
#banner a:hover{ color: #F0B839; text-decoration: none;}

/* Defina a altura do banner para ocupar toda a tela */
#banner {
    height: 90vh; /* 100% da altura da viewport */
    background-image: url('../imgs/banner-home.png'); /* Substitua 'sua-imagem.jpg' pelo caminho da sua imagem de fundo */
    background-size: cover; /* A imagem de fundo cobrirá todo o elemento */
    background-position: center center; /* Centralize a imagem de fundo */
    text-align: center; /* Centralize o conteúdo verticalmente */
    display: flex;
    flex-direction: column;
    justify-content: center;
}


@media (max-width: 1350px){
    #banner h1 { font-size: 4em;}
}
@media (max-width: 1100px){
    #banner h1 { font-size: 3em;}
    #banner a{ font-size: 18px; bottom: 5%;}
}
@media (max-width: 800px){
    #banner {  height: 80vh; }
    #banner h1 { font-size: 2em;}
    #banner a{ font-size: 16px; bottom: 5%; padding-bottom: 5px;}
}
@media (max-width: 550px){
    #banner h1 { font-size: 45px;}
    #banner a{ font-size: 14px; bottom: 3%;}
}
@media (max-width: 500px){
    #banner h1 { font-size: 30px;}
    #banner a{ font-size: 13px; bottom: 3%; }
}


.bloco{ margin: 60px 0; padding: 30px 0;}
#solucoes{ text-align: center;}
#solucoes h2{ font-size: 50px; font-weight: 300;}
#solucoes a.link{ background-color:#F0B839; color:#000; padding: 12px 20px; margin: 30px 010px 0; border-radius: 10px;}
#solucoes a.link:hover{ background-color:#000; color:#F0B839; text-decoration: none;}


@media (max-width: 700px){
    .bloco{ margin: 20px 0; padding: 20px 0;}
    #solucoes h2{ font-size: 30px;}
    #solucoes .container{ padding: 0; }
}

#baneficios{ padding: 60px 0 ;}
#baneficios h2{  font-size: 35px; font-weight: 300; }
#baneficios #icones { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 60px 0 20px 0; }
#baneficios #icones .icone { text-align: center; flex: 0 0 calc(20% - 35px);  }
#baneficios #icones .icone icon { display: block; }
#baneficios #icones .icone icon img{ width: 100%; max-width: 55px; }
#baneficios #icones .icone h3{ font-size: 20px; font-weight: 400; margin-top:25px}

@media (max-width: 700px){
    #baneficios{ padding: 40px 0 10px 0;}
    #baneficios h2{ font-size: 28px; }
    #baneficios #icones {  gap: 10px; margin: 50px 0 20px 0; }
    #baneficios #icones .icone { text-align: center; flex: 0 0 calc(50% - 15px); margin-bottom: 15px;  }
    #baneficios #icones .icone icon img{ width: 100%; max-width: 35px; }
    #baneficios #icones .icone h3{ font-size: 17px; margin-top:15px}
}


#cases{}
/* #cases img{ max-width: 80%; margin-left: 30px;} */
#cases .itens{ margin-bottom: 50px; }
#cases h3{ font-weight: 600; font-size: 40px; margin-bottom: 25px; }
#cases h3 span{ font-weight: 300; font-size: 18px; display: block;}
#cases p{ font-weight: 300; font-size: 18px; }
#cases .itens a{ background-color:#F0B839; color:#000; padding: 8px 20px; margin: 10px 0; border-radius: 10px;}
#cases .itens a:hover{ background-color:#000; color:#F0B839; text-decoration: none;}


#case-box { position: relative; display: flex; justify-content: center; align-items: center; position: relative; margin: 0 auto; width: 80%; }
#case-box img{ width: 100%;}

#case-box #case-box-yellow{ top:-15%; left: -8%; z-index: -10; position: absolute;  width: 40%; height: 60%; padding: 15px; text-align: center; font-size: 14px; font-weight: 400; background-color: #F0B839; border-radius: 0 14px 0 ;}
#case-box #case-box-white{ bottom:-5%; right: -2.5%; z-index: -10; position: absolute;  width: 20%; height: 30%; background-color: #fff; border-radius: 0 0 20px ;}
#case-box #case-box-black{ bottom:-5%; right: -2.5%; z-index: -10; position: absolute;  width: 20%; height: 30%; background-color: #141519; border-radius: 0 0 20px ;}
#case-box #case-box-logos{ background-color: #fff; border-radius: 20px;  text-align: center;  }
#case-box #case-box-logos .logos{ background-color: #fff; position: absolute; display: flex; justify-content: center; align-items: center; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%;  }
#case-box #case-box-logo img{ width: 100%; }
#case-box #case-box-logo .logo{ max-width: 100% !important; }

@media (max-width: 700px){
    #cases h3{ font-size: 26px; margin-bottom: 20px; font-weight: 400; }
    #case-box{ margin-bottom: 30px;  width: 80%;}
    #case-box #case-box-yellow{ padding: 8px; font-size: 11px;}
}

#numeros-box{ padding: 20px 0;}
#numeros-box #quadro{ position: relative; margin: 0 0 0 75px; width: 80%; top: -150px;}
#numeros-box #quadro img{ width: 100%;}
#numeros-box #quadro #numeros{ width: 80%; background: #fff; padding: 25px 15px; border-radius: 10px; margin: 0 auto; position: absolute; bottom: -50px; right: 50px;}
#numeros-box #quadro #numeros .numero{ font-weight: 300; font-size: 16px; height: 100%; color:#050505; float: left; width: 33.33%; text-align: center; padding: 0 20px; line-height: 20px;}
#numeros-box #quadro #numeros .numero b{ display: block; color:#000; font-weight: 600; line-height: 25px;}
#numeros-box #quadro #numeros .numero span{ font-size: 35px;}
#numeros-box #quadro #numeros .numero + .numero{ border-left: 1px solid #F0B839;}

@media (max-width: 700px){
    #numeros-box #quadro{ width: 100%; top: -150px;  margin: 0;}
    #numeros-box #quadro #numeros{ width: 100%; padding: 25px 15px; bottom: -50px; right: 0px;}
    #numeros-box #quadro #numeros .numero{ font-size: 14px; padding: 0 8px; line-height: 18px;}
    #numeros-box #quadro #numeros .numero b{ line-height: 20px;}
    #numeros-box #quadro #numeros .numero span{ font-size: 25px;}
}


#pilares{ }
#pilares .left img{ max-width: 120px; margin: 100px 0 0 20px;}
#pilares ul{ padding: 0; margin: 0 0 0 75px;}
#pilares ul li{ font-weight: 300; font-size: 32px; padding: 12px; border-bottom: 1px solid #313235; list-style: none;}
#pilares ul li span{ font-size: 14px; font-weight: 400; color: #F0B839; padding: 0 20px 5px 0;}
#pilares ul li:hover{ color: #F0B839; } 
@media (max-width: 700px){
    #pilares .left{ display: none;}
    #pilares ul{ padding: 0; margin: 0;}
    #pilares ul li{ font-size: 17px; padding: 8px; }
    #pilares ul li span{ font-size: 13px; padding: 0 5px 5px 0; }
}

.pilares_img .show{ display: block !important; animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn {  0% { opacity: 0; transform: translateY(35px); } 100% { opacity: 1; transform: translateY(0);  } }
.pilares_img .hide{ display:none;}


@media (max-width: 700px){
    #pilares .left{ display: none;}
    #pilares ul li{ font-size: 18px; padding: 8px; }
    #pilares ul li span{ font-size: 13px; }
}


#empresas{ padding-bottom: 60px; overflow: hidden;}
#empresas .empresa{ float: left; width: 33.33%; text-align: center; margin: 10px 0;}
#empresas .empresa img{ width: 100%; filter: grayscale(100%); max-width: 180px; width: 80%;}
#empresas .empresa img:hover{ filter: grayscale(0%);}
#parceiros .text{ padding: 60px 100px 0 250px;}
#parceiros .text p{ font-size: 40px; line-height: 40px; font-weight: 300;}

@media (max-width: 1000px){
    #parceiros .text p{ font-size: 30px; line-height: 30px; }
   
}

@media (max-width: 700px){
    #parceiros h2{ margin-bottom: 20px;}
    #parceiros .text p{ font-size: 25px; line-height: 25px; }
    #parceiros .text{ padding: 0px 0px 30px 0px;}
    #empresas{ padding-bottom: 20px;}
    #empresas .empresa{ float: left; width: 33.33%; text-align: center;}
    #empresas .empresa img{ width: 90%; margin: auto;}
}


#empresas-slide .empresa{ display: flex; justify-content: center;  align-items: center;  flex-direction: column;  width: 100%; }
#empresas-slide .empresa img{ width: 100%; filter: grayscale(100%); max-width: 180px; width: 80%;}




#depoimentos .carousel p{ font-size: 30px; line-height: 40px; font-weight: 300;}
#depoimentos .carousel h4{ font-size: 18px; font-weight: 400; text-align: right;}
#depoimentos .carousel h5{ font-size: 16px; font-weight: 400; text-align: right}
#depoimentos .carousel h5 span{ font-size: 14px; font-weight: 300;}

@media (max-width: 700px){
    #depoimentos .carousel p{ font-size: 22px; line-height: 30px; }
    #depoimentos .carousel h4{ font-size: 16px; }
    #depoimentos .carousel h5{ font-size: 15px;}
    #depoimentos .carousel h5 span{ font-size: 14px; }
}



#diretores-box{}
#diretores-box #card { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
#diretores-box .cards { text-decoration: none; color: #000; width: calc(33.33% - 30px); position: relative; }
#diretores-box .box { position: relative; cursor: pointer; }
#diretores-box .box img { width: 100%;  height: auto; }
#diretores-box .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.92);
    color: #000; display: none;  justify-content: center; align-items: center; text-align: center;  transition: opacity 0.3s; border-radius: 20px; }
  
#diretores-box .box:hover .overlay { display: flex; padding: 20px; }
#diretores-box .icone {  font-size: 30px; color: #fff; position: absolute; bottom: 10px; right: 20px; }
#diretores-box h2{ font-size: 50px; font-weight: 300; max-width: 50%; }
#diretores-box h3{ font-size: 24px; font-weight: 400; padding: 10px 5px; }
#diretores-box h3 span{ font-size: 18px; font-weight: 300; display: block; }
#diretores-box p { font-size: 14px; font-size: 18px; font-weight: 300; }
@media (max-width: 700px){
    #diretores-box #card{ margin-top: 20px;}
    #diretores-box h2{ font-size: 28px; max-width: 100%; margin: 15px 0; }
    #diretores-box .cards { width: 85%; margin: 0 auto; padding: 0;  }
    #diretores-box .box:hover .overlay { padding: 10px; }
    #diretores-box .icone {  font-size: 22px;}
    #diretores-box p { font-size: 14px; }
}

#valores{}
#valores h2{ max-width: 40%; color:#F0B839; font-weight: 400;}
#valores .accordion{ color:#fff !important;}
#valores .accordion h2{ max-width: 100%; }
#valores .accordion h2 button{ color:#fff !important; }
#valores .accordion-body{ color:#fff !important;}
#valores .accordion-body b{ font-weight: bold; color:#F0B839; margin-right: 10px;}
#valores .accordion-button::after { color: #fff; }
#valores .accordion-button:not(.collapsed)::after { color: #fff; }
#valores .row{ margin-bottom: 30px;  }
#valores .row{ margin-bottom: 30px; font-weight: 300; }
@media (max-width: 700px){
    #valores h2{ max-width: 90%; margin: 15px 0; font-size: 28px; }
    #valores .row{ margin-bottom: 20px;  }
    #valores .row .col{ width: 100%; flex: none; }
}

.subanime {
    opacity: 0.3;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}


.carousel-box{}
.carousel-box .scroll{ font-size: 35px;  cursor: pointer;}
.carousel-box .status{ font-size: 25px; font-weight: 300; }
.carousel-box .status b{ color:#F0B839; font-weight: 300;}
.carousel-box .scroll span:hover{ color:#F0B839;}


#contato{ padding: 100px 50px;}
#contato label{ display: block; font-size: 16px; font-weight: 400; margin-bottom: 10px;}
#contato input{ width: 100%; padding: 10px; border-radius: 10px; margin-bottom:20px; border: 1px solid #C4C4C4;}
#contato textarea{ width: 100%; padding: 6px; border-radius: 10px; border: 1px solid #C4C4C4; min-height: 120px;}
#contato button{ background-color: #F0B839; min-width: 160px; padding: 8px 30px; border: none; border-radius: 10px; font-size: 16px; font-weight: 400; margin-bottom: 10px;}

@media (max-width: 700px){
    #contato{ padding: 0px 0px;}
    #contato .col{  flex: none; width: 100%; padding: 0;}
    #contato label{ font-size: 15px; margin-bottom: 5px;}
    #contato input{ padding: 8px; margin-bottom:12px; }
    #contato textarea{ min-height: 100px;}
    #contato button{ min-width: 100%; margin-bottom: 10px;}
}



footer h3{ font-size: 16px; margin: 0 0 20px 0; }
footer ul{ padding: 0; margin: 0;}
footer ul li{ list-style: none; font-weight: 400; font-size: 14px; margin-bottom: 5px;}
footer ul li a{ list-style: none; font-weight: 400; color: #000; cursor: pointer;}
footer #redes{ margin-top: 25px;}
footer #redes a{ color: #111; font-size: 25px;  margin: 0 6px;}
footer #right{ background-color: #141519; color: #fff; font-size: 12px; padding: 15px; margin-top: 30px;}
@media (max-width: 700px){
    footer #submenu { display: none; }
    footer .col { width: 100%; flex: none; text-align: center !important; }
}

#cards { margin: 30px 0; display: flex; flex-wrap: wrap; gap: 35px; }
#cards a{ cursor: pointer;}
.card { flex: 0 0 calc(25% - 35px);  max-width: 300px; padding: 24px; display: flex;
flex-direction: column; justify-content: space-between; border-radius: 15px; border: 1px solid #000; background-color: transparent;
}
.card:hover{ text-decoration: none;}
.card h3 {
margin: 0 0 45px 0; min-height: 85px; font-size: 30px; /* Tamanho do título, altere conforme necessário */
font-weight: 300; text-align: left;
flex: 1; /* Ocupa todo o espaço vertical disponível na linha superior */
}
.card-content { display: flex; justify-content: space-between; align-items: flex-end;  padding-bottom: 10px; }
.card icon { width: 50%;  height: auto; align-self: flex-start;  text-align: left; }
.card icon img{ width: 100%; max-width: 60px;}
.card span { width: 50%;  font-weight: bold; text-align: right; padding-bottom: 10px; }
.card span b{border-bottom: 1px solid #F0B839; font-weight: 400; padding-bottom: 5px; }
.card span b i{color:#F0B839;}
.card:hover span{ color:#F0B839;}
.card-black .card{ border: 1px solid #fff; color:#fff;}

@media (max-width: 1200px){
    #cards { margin: 20px 0; gap: 10px; }
    .card { flex: 0 0 calc(25% - 10px); padding: 15px; }
    .card-content { padding-bottom: 6px; }
    .card h3 { margin: 0 0 15px 0;  font-size: 25px;}
    .card icon img{ width: 100%; max-width: 40px;}
    .card icon { width: 35%;}
    .card span{ width: 65%; font-size: 14px;}
}

@media (max-width: 780px){
    #cards { margin: 20px 0; gap: 10px; }
    .card { flex: 0 0 calc(50% - 10px); padding: 15px; }
    .card-content { padding-bottom: 6px; }
    .card h3 { margin: 0 0 15px 0;  font-size: 20px;}
    .card icon img{ width: 100%; max-width: 40px;}
    .card icon { width: 35%;}
    .card span{ width: 65%; font-size: 14px;}
}
@media (max-width: 400px){
    .card { padding: 12px; }
    .card-content { padding-bottom: 4px; }
    .card h3 {  font-size: 18px;}
    .card span{ font-size: 13px;}
}


  
.accordion{ --bs-accordion-border-color: none !important; --bs-accordion-bg: transparent;}
.accordion-button:not(.collapsed){ background-color: transparent;}
.accordion h2{ margin-bottom: 0px !important;}
.accordion h2 button{ font-size: 32px !important; font-weight: 300 !important; margin-bottom: 20px;}

#sanfona ul{  margin: 0px 0; padding: 0;}
#sanfona li{ font-size: 22px !important; font-weight: 300 !important; color:#808080; list-style: none; padding: 15px 10px; border-bottom: 1px solid #d0d0d1;}

@media (max-width: 700px){
    #sanfona{ padding: 10px;}
    .accordion h2 button{ font-size: 26px !important; margin-bottom: 10px; padding: 0;}
    .accordion .accordion-body{ padding: 0; }
    #sanfona li{ font-size: 18px !important; padding: 15px 0px; }
}

/* Estilize o botão de alternância */
.navbar-toggler-icon {
    color: red; /* Cor do ícone do botão de alternância */
}

/* Estilize os itens do menu */
.navbar-nav {
    text-align: center; /* Centralize os itens do menu */
}

.nav-item {
    margin: 0 26px; /* Espaçamento entre os itens do menu */
}

/* Estilize a barra lateral responsiva */
.offcanvas { background-color: rgba(0, 0, 0, 0.85); /* Cor de fundo da barra lateral */ }


@media (max-width: 992px){
    .offcanvas li { margin: 10px 0; font-size: 22px;}
    .offcanvas li a{ }
    .btn-close {
        --bs-btn-close-bg: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" class="bi bi-x" viewBox="0 0 16 16"%3e%3cpath d="M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z"/%3e%3c/svg%3e');
    }
}



.navbar-toggler {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999;
    cursor: pointer;
}

/* Quando a barra lateral está ativa, ajuste sua posição para a direita */
.offcanvas-collapse.active {
    left: 0;
}

@media (min-width: 992px) {
    .navbar-nav {
        margin-left: auto; /* Alinhar à direita */
    }
}

.custom-toggler-icon {
    color: #fff; font-size: 25px;
}



.accordion-button::after {
    content: "\f4fa"; 
    font-family: 'bootstrap-icons'; 
    font-size: 1.5rem; 
    color: #000; 
    background-image: none;
    height: auto;
}


.accordion-button:not(.collapsed)::after {
    content: "\f2e6"; 
    font-family: 'bootstrap-icons'; 
    font-size: 1.5rem; 
    color: #000; 
    background-image: none;

}

.accordion-button:focus {
    box-shadow: none;
    border-color: none;
}


/* Estilos para o menu fixo */
.fixed-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    z-index: 9999; /* Certifique-se de que o menu fixo esteja na parte superior */
    transition: height 0.3s, max-width 0.3s; /* Efeito de transição para a altura e largura do menu */
}

/* Estilos para a logo */
.fixed-navbar .logo {
    max-width: 100px; /* Tamanho máximo da logo */
    transition: max-width 0.3s; /* Efeito de transição para o tamanho da logo */
}


/* Estilos para o menu fixo quando estiver recolhido */
.navbar.collapsed {
    height: 70px; /* Altura do menu recolhido */
}

/* Estilos para a logo quando o menu estiver recolhido */
.navbar.collapsed .logo {
    max-width: 100px; /* Tamanho máximo da logo quando recolhido */
}






/* Estilos para o overlay */
#overlay {
    position: fixed;
    top: 0;
    right: -100%; /* Inicialmente, o overlay fica fora da tela */
    width: 100%;
    height: 100%;
    background-color: rgba(109, 106, 106, 0.6); /* Cor de fundo preta com transparência */
    z-index: 9999;
    transition: right 0.6s;
}

/* Estilos para o overlay quando aberto */
#overlay.opened {
    right: 0;
}

/* Estilos para o conteúdo de carregamento */
#loading {
    display: none; /* Inicialmente oculto */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
}

/* Estilos para o conteúdo do overlay */
#content {
    display: none; /* Inicialmente oculto */
    position: absolute;
    top: 0;
    right: 0;
    width: 80%; /* Largura do conteúdo do overlay */
    height: 100%;
    background-color: #050505;
    overflow: auto;
    display: flex;
    justify-content: center; /* Centralize horizontalmente */
    align-items: center; /* Centralize verticalmente */
    height: 100%;
    color: #fff;
}

#content {
    display: none; /* Inicialmente oculto */
    position: absolute;
    top: 0;
    right: 0;
    width: 80%; /* Largura do conteúdo do overlay */
    max-height: 100%;
    background-color: #050505;
    overflow: auto;
    color: #fff;
    display: flex;
    justify-content: center; /* Centralize horizontalmente */
    align-items: center; /* Centralize verticalmente por padrão */
    height: 100%;
    padding: 120px 20px;
}

#content {
    align-items: flex-start; /* Alinhar ao topo quando o conteúdo for maior que a tela */
}


/* Estilos para o botão de fechar */
#closeOverlay {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: white;
    background-color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Estilos para o botão de fechar quando o overlay está aberto */
#overlay.opened #closeOverlay { color: #fff;  background-color: transparent; font-size: 30px; }



#ajax-content{ padding: 40px;}
#ajax-content .card{ max-width: 220px; padding: 18px;}
#ajax-content .card h3{ margin-bottom: 20px; font-size: 25px;}
#ajax-content h2{  display: none; }
#ajax-content h3{  font-size: 22px; font-weight: 300; }
#ajax-content p { font-size: 20px; font-weight: 300; color: #fff; }

@media (max-width: 800px){
    #closeOverlay { top: 10px; right: 10px; padding: 5px 10px; }
    #content { width: 100%; padding: 80px 10px;  }
    #ajax-content{ padding: 10px;}
    #ajax-content h2{ font-size: 28px; font-weight: 300; color: #fff; margin-bottom: 20px; display: block; }
    #ajax-content p { font-size: 16px; font-weight: 300; color: #fff; line-height: 28px; }
    #ajax-content .row .left{ display: none;}
    #ajax-content .row .right{ width: 100%;}
}


#msgErro{ color:#991919; font-style: italic;}