body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    background-color: #0f0f0f;
    color: #0f0f0f;
    margin: 0;
    padding: 0;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    opacity: 0.2;
    z-index: -1;
}
h1, h2, h3, h4 {
    font-family: 'Satoshi', sans-serif;
}
h1, h2 {
color: #0f0f0f;
}
h3, h4 {
color: #333333;
}
body > section p {
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
body > section h1,
body > section h2,
body > section h3,
body > section h4 {
margin-left: 20px;
margin-right: 20px;
margin-top: 15px;
margin-bottom: 15px;
}
body > section li {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 5px;
}
#biografia .biografia-texto,
#depoimentos .texto-depoimento,
#quem-somos p,
#quem-somos h2,
#quem-somos h3,
#quem-somos h4
{
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.navbar-custom {
position: fixed;
top: 10px;
left: 50px;
width: 85%;
transform: translateX(5%);
background: #6f1833;
transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
padding: 10px 0px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 1030;
}
.navbar-custom.scrolled {
background: #333333;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.navbar-hidden {
    top: -40px;
}
.navbar-brand .logo {
max-height: 40px;
transition: transform 0.3s ease;
}
.navbar-nav .nav-link {
color: #fffff0;
font-weight: 500;
padding: 10px 15px;
transition: color 0.3s ease-in-out;
}
.navbar-nav .nav-link:hover {
color: #ff712f;
}
.navbar-nav .nav-item {
position: relative;
}
.navbar-nav .nav-item:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 20px;
background-color: #fffff0;
}
@media (max-width: 768px) {
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    
    #biografia .row {
      flex-direction: column; /* Empilha as colunas verticalmente */
      align-items: stretch; /* Garante que os itens ocupem a largura total */
    }
  
    #biografia .col-md-6:first-child,
    #biografia .col-md-6:last-child {
      flex: 0 0 auto; /* Impede que as colunas encolham */
      width: 100%; /* Ocupam a largura total */
      padding-right: 0; /* Remove qualquer padding desnecessário */
      margin-bottom: 20px; /* Adiciona um espaço entre o texto e a imagem */
    }
  
    .image-container {
      width: 80%; /* Ajusta a largura da imagem */
      margin: 0 auto; /* Centraliza a imagem */
    }
  
    .image-frame {
      float: none !important; /* Remove o float que estava posicionando a imagem à direita */
      width: 100% !important; /* Garante que o frame da imagem ocupe a largura total */
      padding-bottom: 0 !important; /* Remove o padding que definia a proporção */
      height: auto !important; /* Permite que a altura da imagem se ajuste ao conteúdo */
    }
  
    #biografia img {
      width: 100%; /* Garante que a imagem dentro do frame ocupe a largura total */
      height: auto; /* Mantém a proporção da imagem */
    }
  
    #biografia .biografia-texto {
      text-align: left; /* Alinha o texto à esquerda para melhor leitura */
      text-indent: 15px; /* Adiciona uma indentação como na seção "Quem somos" */
    }
    .quadros-container {
        padding-left: 10px; /* Adiciona uma pequena margem interna esquerda */
        padding-right: 10px; /* Adiciona uma pequena margem interna direita */
      }
    
      .quadro {
        width: calc(100% - 20px); /* Faz o quadro ocupar a largura total menos as margens internas */
        max-width: none; /* Remove a largura máxima que estava limitando o tamanho */
        margin-left: 10px; /* Adiciona uma pequena margem esquerda entre os quadros (se houver mais de um visível) */
        margin-right: 10px; /* Adiciona uma pequena margem direita entre os quadros (se houver mais de um visível) */
      }
    }
  
  #biografia .biografia-texto,
#depoimentos .texto-depoimento {
  text-align: justify;
  text-indent: 1.5em; /* Adiciona uma indentação padrão para o início dos parágrafos */
}

#biografia .biografia-texto:first-child,
#depoimentos .texto-depoimento:first-child {
  text-indent: 0; /* Remove a indentação do primeiro parágrafo de cada seção */
}
.btn-primary {
background: linear-gradient(135deg, #ff712f, #ff712f);
color: #fffff0;
border: none;
padding: 10px 20px;
border-radius: 10px;
font-weight: bold;
transition: background 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #2ECC71, #2ECC71);
}
section {
background-color: #fffff0;
border-radius: 10px;
scroll-margin-top: 100px;
scroll-snap-align: start;
}
.hero {
min-height: 100vh;
background: url('../images/hero.webp') no-repeat center center/cover;
color: #fffff0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10%;
position: relative;
overflow: hidden;
}
.hero-background {
background-image: url('../images/hero.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-logo {
max-width: 400px;
margin-bottom: 20px;
}
.hero-title {
font-size: 2.5rem;
opacity: 0;
filter: blur(20px);
transition: opacity 1s ease, filter 1s ease;
z-index: 1031;
color: #fffff0;
white-space: pre-line;
}
.hero-title.show {
opacity: 1;
filter: blur(0);
z-index: 1031;
}
.animate__fadeInDown {
--animate-duration: 1s;
}
.animate__fadeInUp {
--animate-duration: 1s;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}
.hero-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}
.hero-content h1 {
    font-size: 2.5rem;
            }
.hero-content .btn {
font-size: 1.2rem;
padding: 12px 24px;
white-space: nowrap;
max-width: 400px;
display: block;
margin: 20px auto 0;
background: linear-gradient(to right, #ff712f, #ff712f);
border: none;
color: white;
transition: background 0.3s ease, transform 0.3s ease;
}
.hero-content .btn:hover {
transform: scale(1.05);
}
.hero-content .btn:active,
.hero-content .btn:focus {
background: linear-gradient(to right, #ff712f, #ff712f);
transform: scale(1.02);
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
transform: translateY(0);
}
.hero-image.show {
opacity: 1;
transform: translateY(0);
}
.hero-title {
font-size: 2.5rem;
opacity: 0;
filter: blur(20px);
transition: opacity 1s ease, filter 1s ease;
z-index: 1031;
}
.hero-title.show {
opacity: 1;
filter: blur(0);
z-index: 1031;
}
.sobre-texto {
    text-align: justify;
    text-indent: 20px;
}
#sobre h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 15px;
text-align: center;
}
#sobre h3 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 3px;
margin-bottom: 30px;
}
.sobre-texto,
#sobre ul li,
#sobre p {
font-size: 1.0rem;
line-height: 1.6;
text-align: justify;
text-indent: 15px;
}
#sobre ul {
list-style-type: none;
padding-left: 0;
}
#sobre li {
margin-bottom: 10px;
}
.quadros-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 30px auto;
gap: 20px;
padding: 20px;
}
#solucoes_doisge {
position: relative;
overflow: visible;
background-color: transparent;
color: #fffff0;
padding: 20px;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
#solucoes_doisge h2 {
margin: 0;
line-height: 1.5;
align-self: flex-start;
position: relative;
top: -35px;
font-size: 2rem;
}
#solucoes_doisge p {
margin: 0;
line-height: 1.5;
align-self: flex-start;
position: relative;
top: -20px;
font-size: 1.2rem;
}
.barra-animada {
position: absolute;
left: 0;
top: 20px;
width: 10px;
height: 0;
background-color: #8c1c40;
transition: height 1s ease-out;
z-index: 1;
max-height: 100%;
}
.texto-animado {
opacity: 0;
transition: opacity 1s ease-out;
color: #fffff0;
z-index: 2;
position: relative;
line-height: 1.5;
padding-left: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
#solucoes_doisge.animado .barra-animada {
height: 45%;
}
#solucoes_doisge.animado .texto-animado {
opacity: 1;
}
#solucoes_doisge h2, #solucoes_doisge p {
margin: 0;
line-height: 1.5;
align-self: flex-start;
display: block;
}
#solucoes_doisge + div {
margin-top: -50px;
}
#depoimentos h2,
#depoimentos p,
#biografia h2,
#biografia h4 { /* Assumindo que o subtítulo da biografia é um h4 */
  align-self: flex-start;
  text-align: left; /* Garante que o texto dentro dos elementos também esteja alinhado à esquerda */
}
#biografia .image-container {
  max-width: 400px; /* Ajuste este valor conforme necessário */
}

#biografia .image-frame {
  padding-bottom: 0 !important; /* Remove o padding inferior para ajustar a altura */
  height: auto !important; /* Permite que a altura se ajuste à largura da imagem */
}

#biografia img {
  width: 100%; /* Garante que a imagem ocupe a largura do contêiner */
  height: auto; /* Mantém a proporção da imagem */
}

@media (max-width: 768px) {
  #biografia .image-container {
    width: 80%; /* Mantém a largura ajustada para mobile */
    max-width: none; /* Remove a largura máxima para ocupar o espaço disponível */
  }
}
.quadro {
width: calc(88% - 20px);
max-width: none;
height: 380px;
margin: 0;
border-radius: 10px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.3s ease;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 15px;
text-align: center;
}
.quadro h3 {
font-size: 1.5rem;
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
font-size: 1.2em;
}
.quadro h4 {
font-size: 1.5rem;
text-align: center;
}
.quadro[data-service-id="identidade-visual"] h3:not(:first-child),
.quadro[data-service-id="imagens-aereas"] h3:not(:first-child) {
margin-top: 15px;
}
.quadro[data-service-id="identidade-visual"] p,
.quadro[data-service-id="imagens-aereas"] p {
margin-bottom: 20px;
}
.quadro .saiba-mais {
display: inline-block;
padding: -20px 10px;
background-color: #ff712f;
color: white;
text-decoration: none;
border-radius: 5px;
align-self: center;
margin-bottom: 20px;
}
.quadro:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.quadro img {
    width: 80%;
    height: 80%;
    object-fit: cover;
    border-radius: 10px;
    max-height: 200px;
}
.quadro h3 {
margin-top: 10px;
}
.quadro p {
margin-top: 5px;
margin-bottom: 15px;
font-size: 0.9em;
line-height: 1.4;
}
.quadro .saiba-mais {
width: 100%;
display: inline-block;
padding: 10px 20px;
background-color: #ff712f;
color: white;
text-decoration: none;
border-radius: 5px;
margin-top: auto;
padding: 10px 20px;
font-size: 0.9em;
}
.quadro .saiba-mais:hover {
background-color: #2ECC71;
}
.service-card {
display: none;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -55%);
width: 80%;
max-width: 1200px;
height: 80%;
max-height: 800px;
background-color: rgba(0, 0, 0, 0.95);
color: white;
padding: 20px;
border-radius: 20px;
z-index: 1000;
overflow-y: auto;
text-align: center;
}
.service-card h2 {
text-align: center;
}
.service-card p {
text-align: justify;
text-indent: 20px;
}
.service-card .contato-btn,
.service-card .portfolio-btn {
align-self: center;
margin-top: 20px;
}
.fechar-card {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
width: 35px;
height: 35px;
cursor: pointer;
background-image: url('../icons/fechar-icone.svg');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.fechar-card:hover {
opacity: 1;
}
.fechar-card::before {
content: none;
}
.contato-btn, .portfolio-btn {
display: inline-block;
padding: 12px 25px;
background-color: #ff712f;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
font-size: 1em;
font-weight: 600;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.contato-btn:hover, .portfolio-btn:hover {
background-color: #2ECC71;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.botoes-identidade-visual {
display: flex;
justify-content: space-between;
}
.service-card[data-service-id="identidade-visual"] .fechar-card {
z-index: 1001;
}
.service-detail {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
aspect-ratio: 16/9;
background: rgba(0, 0, 0, 0.95);
color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: justify;
text-indent: 20px;
line-height: 1.6;
z-index: 2000;
transition: opacity 0.3s ease-in-out;
}
.service-detail.active {
display: flex;
}
.close-btn {
position: absolute;
top: 10px;
right: 15px;
background: none;
color: #ff9900;
font-size: 28px;
font-weight: bold;
border: none;
cursor: pointer;
}
.service-card iframe {
width: 100%;
height: 300px;
margin-top: 20px;
}
.close-btn:hover {
color: #ff3300;
}
.service-card .service-title {
text-align: left;
margin-left: 20px;
margin-bottom: 10px;
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
}
.service-card h2.service-title {
color: #fffff0;
text-align: left;
margin-left: 20px;
margin-bottom: 10px;
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
}
.servicos-container {
position: relative;
display: flex;
align-items: center;
overflow-x: auto;
white-space: nowrap;
}
.servicos-quadros {
display: inline-flex;
}
.botao-rolagem {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #f0f0f0;
border: none;
padding: 10px;
cursor: pointer;
}
#anterior {
left: 10px;
}
#proximo {
right: 10px;
}
.texto-para-justificar {
text-align: justify;
text-indent: 1.5em;
}
#depoimentos > p {
    text-align: justify;
  }
.texto-para-justificar:first-child {
text-indent: 0;
}
.depoimentos-carousel-container {
overflow: hidden;
position: relative;
}
.carousel-wrapper {
overflow-x: auto;
scroll-snap-type: x mandatory;
display: flex;
-webkit-overflow-scrolling: touch;
}
.depoimentos-track {
display: flex;
}
.depoimento {
flex: 0 0 auto;
width: 100%;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
margin-right: 20px;
}
.depoimento:last-child {
margin-right: 0;
}
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
z-index: 10;
color: #333;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.carousel-button:hover {
opacity: 1;
}
.carousel-button.prev {
left: 10px;
}
.carousel-button.next {
right: 10px;
}
.carousel-indicators {
display: flex;
justify-content: center;
margin-top: 20px;
}
.carousel-indicators button {
background: #ccc;
border: none;
border-radius: 50%;
width: 10px;
height: 10px;
margin: 0 5px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.3s ease;
}
.carousel-indicators button.active {
background-color: #fffff0;
opacity: 1;
}
.depoimento-header {
margin-bottom: 10px;
}
#quem-somos {
width: 100%;
}
#depoimentos {
width: 100%;
background-color: transparent;
color: #fffff0;
padding-left: 50px; /* Adiciona uma margem esquerda */
padding-right: 50px; /* Adiciona uma margem direita */
}
#depoimentos h2 {
color: #fffff0; 
}
#depoimentos .depoimento-header h3 {
color: #fffff0;
}
.depoimento {
background-color:#333333;
border-radius: 8px;
padding: 20px;
width: 800px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: left;
flex-shrink: 0;
scroll-snap-align: start;
color: #fffff0;
}
.nome-cliente {
color: #fffff0;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 5px;
}
.data-depoimento {
color: #fffff0;
font-size: 0.9em;
margin-bottom: 10px;
}
.texto-depoimento {
color: #fffff0 !important;
line-height: 1.6;
text-align: justify;
text-indent: 1.5em;
}
#biografia {
width: 100%;
}
.nome-cliente {
color: #fffff0;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 5px;
}
.data-depoimento {
color: #fffff0;
font-size: 0.9em;
margin-bottom: 10px;
}
.estrelas {
color: #ffc107;
font-size: 1.1em;
margin-bottom: 10px;
}
.estrela {
display: inline-block;
margin-right: 2px;
}
.estrela.ativa {
}
.texto-depoimento {
line-height: 1.6;
color: #555;
}
#biografia h2 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
margin-top: 0;
text-align: left;
}
#biografia p {
font-size: 1.0rem;
line-height: 1.6;
text-align: justify;
font-style: italic;
margin-top: 5px;
margin-bottom: 10px;
}
.biografia-texto {
font-size: 1.0rem;
line-height: 1.6;
text-align: left;
text-indent: 10px;
margin-bottom: 10px;
}
.image-frame {
float: right;
width: 100%;
position: relative;
padding-bottom: 75%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
#biografia h3 {
margin-top: 5px;
margin-bottom: 10px;
}
#biografia h4 {
margin-bottom: 2px;
}
#biografia .text-left.mb-4 {
margin-bottom: 10px;
}
#biografia {
background-color: #f9f8e9;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
}
.biografia-texto {
margin-bottom: 0;
}
    #biografia .col-md-6:first-child,
    #biografia .col-md-6:last-child {
        flex: 0 0 auto;
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }
    .image-frame {
        float: none;
        width: 100%;
        padding-bottom: 0;
        height: auto;
    }
#biografia .row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
#biografia img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
object-fit: cover;
}
@media (max-width: 768px) {
    #biografia .row {
        flex-direction: column;
        align-items: stretch;
    }
    #biografia .col-md-6:first-child,
    #biografia .col-md-6:last-child {
        flex: 0 0 auto;
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }
    .image-frame {
        float: none;
        width: 100%;
        padding-bottom: 0;
        height: auto;
    }
    #biografia img {
        height: auto;
    }
    #depoimentos {
      padding-left: 20px; /* Reduz a margem para telas menores */
      padding-right: 20px; /* Reduz a margem para telas menores */
    }
  }
.footer h4 {
font-size: 1.2em;
margin-bottom: 10px;
color: #fff;
}
.footer ul {
list-style: none;
padding: 0;
}
.footer ul li {
margin-bottom: 5px;
}
.footer ul li a {
color: #ccc;
text-decoration: none;
}
.footer ul li a:hover {
color: #fff;
}
.footer {
max-width: 2000px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: transparent;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: rgba(241, 241, 241, 0.5);
}
::-webkit-scrollbar-thumb {
background-color: rgba(136, 136, 136, 0.7);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(85, 85, 85, 0.8);
}
html {
scrollbar-color: rgba(136, 136, 136, 0.7) rgba(241, 241, 241, 0.5);
scrollbar-width: thin;
}