/* Define uma rolagem suave (smooth scrolling) para o site quando o usuário clica em links de âncoras */
html {
    scroll-behavior: smooth;
}

/* Estilo personalizado para o header desta página 
   - Define um fundo com degradê suave do branco (#ffffff) para um cinza claro (#f5f5f5).
   - O header ocupa toda a altura da viewport (100vh) e a largura total da tela (100%).
   - Utiliza position: relative para tornar o header o contêiner de referência para os elementos filhos.
   - overflow: hidden garante que qualquer conteúdo que ultrapasse os limites do header seja escondido.
   - Flexbox é usado para centralizar o conteúdo no meio do header, tanto horizontalmente (justify-content) quanto verticalmente (align-items). 
*/
.custom-header {
    background: linear-gradient(to bottom, #ffffff, #f5f5f5); /* Degradê quase totalmente branco */
    height: 100vh; /* Altura total da viewport */
    width: 100%; /* Largura total */
    position: relative; /* Torna o header o contêiner de referência */
    overflow: hidden; /* Esconde qualquer conteúdo que ultrapasse os limites do header */
    display: flex; /* Flexbox para centralizar */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

/* Estilo do quadrado com degradê rotacionado para formar um losango no canto superior esquerdo 
   - O quadrado é posicionado absolutamente no topo esquerdo, com ajustes usando unidades relativas à altura e largura da viewport (vh e vw).
   - Suas dimensões (largura e altura) também são definidas em relação à largura da viewport para garantir uma escala proporcional.
   - O degradê vai do roxo escuro (#621E83) ao lilás claro (#B075CD).
   - A borda do quadrado é suavemente arredondada (border-radius: 20%).
   - A transformação (rotate) rotaciona o quadrado em 45 graus, criando o efeito visual de losango.
*/
.square {
    position: absolute;
    top: -15vh; /* Ajusta a posição vertical em unidades relativas à altura da viewport */
    left: -6.6vw; /* Ajusta a posição horizontal em unidades relativas à largura da viewport */
    width: 45vw; /* Largura do losango relativa à largura da viewport */
    height: 45vw; /* Altura do losango relativa à largura da viewport (para manter a proporção) */
    background: linear-gradient(to left, #621E83, #B075CD); /* Degradê */
    border-radius: 20%; /* Arredonda levemente as pontas */
    transform: rotate(45deg); /* Rotaciona o quadrado para parecer um losango */
}

/* Ajustes de estilo do losango superior esquerdo para telas menores e em modo retrato 
   - Aumenta o tamanho do losango para 70% da largura da viewport em dispositivos com largura de tela menor que 768px.
   - Mantém a proporção da altura (70vw) para preservar o formato do losango.
   - Ajusta a posição vertical (top) para compensar o aumento do tamanho e evitar sobreposição com outros elementos.
   - Ajusta a posição horizontal (left) para melhor centralização em telas menores.
*/
@media (orientation: portrait) and (max-width: 768px) {
    .square {
        width: 70vw; /* Aumenta o tamanho do losango para 70% da largura da viewport */
        height: 70vw; /* Mantém a proporção, aumentando também a altura */
        top: -8vh; /* Ajusta a posição vertical para compensar o aumento de tamanho */
        left: -14vw; /* Ajusta a posição horizontal para centralizar melhor o losango */
    }
}

/* Estilo do losango rotacionado posicionado no canto inferior direito do header 
   - Posiciona o losango absolutamente no canto inferior direito, ajustando a posição vertical (bottom) relativa ao rodapé e a posição horizontal (right) relativa à lateral direita da tela.
   - Define a largura e altura do losango em relação à largura da viewport (25vw), garantindo proporções consistentes.
   - Aplica um degradê do roxo escuro (#621E83) para o lilás claro (#B075CD).
   - As bordas são suavemente arredondadas com border-radius: 20%.
   - O losango é criado ao rotacionar o quadrado em 45 graus com transform.
   - O z-index é definido como 1 para manter o losango atrás de outros elementos da página.
*/
.custom-header .square-bottom-right {
    position: absolute;
    bottom: -25vh; /* Ajusta a posição vertical relativa ao rodapé */
    right: 3.3vw; /* Ajusta a posição horizontal à direita da tela */
    width: 25vw; /* Largura do losango */
    height: 25vw; /* Altura do losango */
    background: linear-gradient(to left, #621E83, #B075CD); /* Degradê */
    border-radius: 20%; /* Arredonda levemente as pontas */
    transform: rotate(45deg); /* Rotaciona o quadrado para parecer um losango */
    z-index: 1; /* Mantém o losango atrás de outros elementos */
}

/* Ajustes no losango inferior direito para telas em modo retrato 
   - Ajusta a posição vertical (bottom) para mover o losango mais para cima em dispositivos com orientação retrato.
   - Modifica a posição horizontal (right) para garantir melhor ajuste e centralização nas telas menores em retrato.
   - Aumenta o tamanho do losango para 45% da largura da viewport, adaptando-se melhor ao espaço disponível em dispositivos móveis.
   - Mantém a proporção da altura (45vw) para preservar o formato do losango.
*/
@media (orientation: portrait) {
    .custom-header .square-bottom-right {
        bottom: -9vh; /* Sobe o losango em resoluções retrato */
        right: 5vw;  /* Ajusta a posição horizontal se necessário */
        width: 45vw; /* Aumenta o tamanho do losango para se adaptar melhor em retrato */
        height: 45vw; /* Mantém a proporção do losango */
    }
}

/* Ajustes para o losango inferior direito em smartphones pequenos no modo paisagem (largura menor que 400px)
   - Reduz o tamanho do losango para 40% da largura da viewport para se ajustar melhor em telas muito pequenas em paisagem.
   - Mantém a proporção da altura (40vw) para garantir que o formato do losango seja preservado.
   - Ajusta a posição vertical (bottom) para evitar que o losango fique fora da área visível.
   - Reposiciona a posição horizontal (right) para garantir que o losango não seja cortado na lateral da tela.
*/
@media (max-width: 400px) and (orientation: landscape) {
    .custom-header .square-bottom-right {
        width: 40vw; /* Reduz o tamanho do losango para 40% da largura da viewport */
        height: 40vw; /* Mantém a proporção */
        bottom: -10vh; /* Ajusta a posição vertical para manter o losango dentro da área visível */
        right: 2vw; /* Ajusta a posição horizontal para não cortar o losango */
    }
}

/* Estilo da logo posicionada sobre o losango superior esquerdo 
   - Posiciona a logo absolutamente no topo esquerdo da tela, com ajustes de posição (top e left) específicos para desktops.
   - Define o tamanho da logo como 30% da largura da viewport (30vw), garantindo que ela se ajuste proporcionalmente à tela.
   - Usa height: auto para preservar as proporções da logo, ajustando a altura automaticamente de acordo com a largura.
   - z-index: 2 garante que a logo seja exibida acima de outros elementos do header.
   - object-fit: contain assegura que a imagem se ajuste dentro da caixa de seu contêiner, mantendo suas proporções originais sem distorções.
*/
.custom-header .logo-top-left {
    position: absolute;
    top: 3vh; /* Posição vertical para desktops */
    left: 2vw; /* Posição horizontal para desktops */
    width: 30vw; /* Tamanho da logo em relação à largura da viewport para desktops */
    height: auto; /* Mantém a proporção da logo */
    z-index: 2; /* Garante que a logo esteja acima dos outros elementos */
    object-fit: contain; /* Garante que a imagem mantenha suas proporções */
}

/* Ajustes da logo para telas de dispositivos móveis em modo retrato 
   - Ajusta a posição vertical (top) para 4vh, garantindo que a logo fique levemente mais abaixo em dispositivos móveis.
   - Mantém a posição horizontal (left) em 2vw, para manter a logo alinhada corretamente sobre o losango no modo retrato.
   - Aumenta o tamanho da logo para 40% da largura da viewport (40vw), adaptando-se melhor a telas menores, como smartphones.
*/
@media (max-width: 768px) and (orientation: portrait) {
    .custom-header .logo-top-left {
        top: 4vh; /* Ajusta a posição vertical para dispositivos móveis em retrato */
        left: 2vw; /* Ajusta a posição horizontal para centralizar a logo sobre o losango em retrato */
        width: 40vw; /* Aumenta o tamanho da logo para telas menores */
    }
}

/* Ajustes da logo para dispositivos móveis em modo paisagem 
   - Ajusta a posição vertical (top) para 4vh, garantindo que a logo fique no topo em dispositivos móveis em modo paisagem.
   - Mantém a posição horizontal (left) em 2vw, assegurando que a logo esteja alinhada corretamente no modo paisagem.
   - Define o tamanho da logo como 25% da largura da viewport (25vw) para telas em modo paisagem, mantendo proporções adequadas para dispositivos móveis.
*/
@media (max-width: 768px) and (orientation: landscape) {
    .custom-header .logo-top-left {
        top: 4vh; /* Ajusta a posição vertical para dispositivos móveis em paisagem */
        left: 2vw; /* Ajusta a posição horizontal para centralizar a logo */
        width: 25vw; /* Tamanho da logo em relação à largura da viewport para paisagem */
    }
}

/* Ajustes da logo para telas maiores (como desktops e tablets em modo paisagem) 
   - Mantém a posição vertical (top) em 4vh para assegurar que a logo esteja em uma posição consistente no topo em telas maiores.
   - Define a posição horizontal (left) em 2vw, garantindo que a logo fique alinhada à esquerda da tela.
   - O tamanho da logo é ajustado para 25% da largura da viewport (25vw), garantindo uma proporção adequada para desktops e tablets em modo paisagem.
*/
@media (min-width: 1024px) {
    .custom-header .logo-top-left {
        top: 4vh; /* Ajusta a posição vertical para telas maiores */
        left: 2vw; /* Ajusta a posição horizontal */
        width: 25vw; /* Ajusta o tamanho da logo para desktops */
    }
}

/* Estilo padrão da imagem posicionada sobre o losango inferior direito 
   - A imagem é posicionada absolutamente na base do contêiner (bottom: 0) para garantir que fique na parte inferior.
   - Define a posição horizontal (right) em 5vw, mantendo a imagem alinhada à direita.
   - O tamanho da imagem é definido como 40% da largura da viewport (40vw) para manter uma escala proporcional.
   - A altura é definida como automática (height: auto) para preservar as proporções da imagem e evitar distorções.
   - z-index: 2 garante que a imagem seja exibida acima do losango, evitando que fique escondida.
   - object-fit: contain assegura que a imagem se ajuste dentro do contêiner, mantendo suas proporções e evitando cortes.
*/
.image-on-top {
    position: absolute;
    bottom: 0; /* Posiciona a imagem na base */
    right: 5vw; /* Posição padrão à direita */
    width: 40vw; /* Tamanho padrão da imagem */
    height: auto; /* Mantém a proporção da imagem */
    z-index: 2; /* Coloca a imagem acima do losango */
    object-fit: contain;
}

/* Ajustes da imagem sobre o losango inferior direito para telas em modo retrato 
   - Reposiciona a imagem horizontalmente (right: -4.5vw) para garantir que ela se ajuste melhor em telas menores no modo retrato.
   - Aumenta o tamanho da imagem para 70% da largura da viewport (70vw), adaptando-se ao espaço disponível em dispositivos móveis em modo retrato.
   - Esses ajustes garantem que a imagem sobre o losango inferior direito se mantenha visível e proporcional.
*/
@media (orientation: portrait) and (max-width: 768px) {
    .image-on-top {
        right: -4.5vw; /* Ajusta a posição em retrato */
        width: 70vw; /* Aumenta o tamanho da imagem em retrato */
    }
}

/* Ajustes da imagem sobre o losango inferior direito para telas em modo paisagem (smartphones pequenos) 
   - Reposiciona a imagem horizontalmente (right: -2.5vw) para garantir que ela se ajuste corretamente em smartphones pequenos no modo paisagem.
   - Reduz o tamanho da imagem para 35% da largura da viewport (35vw), adaptando-se ao espaço limitado de smartphones pequenos.
   - Esses ajustes garantem que a imagem sobre o losango inferior direito fique visível e proporcional mesmo em telas pequenas no modo paisagem.
*/
@media (max-width: 400px) and (orientation: landscape) {
    .image-on-top {
        right: -2.5vw; /* Ajusta a posição em paisagem para smartphones pequenos */
        width: 35vw; /* Ajusta o tamanho da imagem */
    }
}

/* Ajustes da imagem sobre o losango inferior direito para tablets ou smartphones maiores em modo paisagem 
   - Reposiciona a imagem horizontalmente (right: -2.5vw) para garantir que ela fique bem posicionada em dispositivos maiores, como tablets ou smartphones em modo paisagem.
   - Ajusta o tamanho da imagem para 37% da largura da viewport (37vw), proporcionando uma proporção adequada em dispositivos com telas maiores.
   - Esses ajustes garantem que a imagem sobre o losango inferior direito continue visível e proporcional em tablets e smartphones maiores no modo paisagem.
*/
@media (min-width: 401px) and (max-width: 1024px) and (orientation: landscape) {
    .image-on-top {
        right: -2.5vw; /* Ajusta a posição em paisagem para tablets maiores */
        width: 37vw; /* Ajusta o tamanho da imagem */
    }
}

/* Ajustes da imagem sobre o losango inferior direito para iPad Air 5 em modo retrato (820x1080)
   - Reposiciona a imagem horizontalmente (right: -4vw) para garantir que ela se ajuste corretamente na tela do iPad Air 5 em modo retrato.
   - Define o tamanho da imagem como 60% da largura da viewport (60vw), garantindo uma escala adequada para a tela desse dispositivo específico.
   - Esses ajustes garantem que a imagem sobre o losango inferior direito se mantenha proporcional e bem posicionada no iPad Air 5 em modo retrato.
*/
@media (min-width: 800px) and (max-width: 850px) and (orientation: portrait) {
    .image-on-top {
        right: -4vw; /* Ajusta a posição para iPad Air 5 */
        width: 60vw; /* Ajusta o tamanho da imagem */
    }
}

/* Ajustes da imagem sobre o losango inferior direito para resolução 1280x832 em modo paisagem 
   - Reposiciona a imagem horizontalmente (right: 2vw) para garantir que ela fique bem ajustada em telas com resolução de 1280x832 no modo paisagem.
   - Define o tamanho da imagem como 30% da largura da viewport (30vw), garantindo uma proporção adequada para essa resolução específica.
   - Esses ajustes garantem que a imagem sobre o losango inferior direito seja exibida corretamente e de forma proporcional em telas com resolução de 1280x832.
*/
@media (min-width: 1200px) and (max-width: 1300px) and (orientation: landscape) {
    .image-on-top {
        right: 2vw; /* Ajusta a posição da imagem para 1280x832 */
        width: 30vw; /* Ajusta o tamanho da imagem */
    }
}

/* Ajustes da imagem sobre o losango inferior direito para resolução 1504x846 em modo paisagem 
   - Reposiciona a imagem horizontalmente (right: 2vw) para garantir que ela fique bem ajustada em telas com resolução de 1504x846 no modo paisagem.
   - Define o tamanho da imagem como 32% da largura da viewport (32vw), garantindo uma escala adequada para essa resolução específica.
   - Esses ajustes garantem que a imagem sobre o losango inferior direito seja exibida corretamente e de forma proporcional em telas com resolução de 1504x846.
*/
@media (min-width: 1400px) and (max-width: 1550px) and (orientation: landscape) {
    .image-on-top {
        right: 2vw; /* Ajusta a posição da imagem para 1504x846 */
        width: 32vw; /* Ajusta o tamanho da imagem */
    }
}

/* Ajustes da imagem sobre o losango inferior direito para resolução 1559x975 em modo paisagem 
   - Reposiciona a imagem horizontalmente (right: 2vw) para garantir que ela fique bem ajustada em telas com resolução de 1559x975 no modo paisagem.
   - Define o tamanho da imagem como 30% da largura da viewport (30vw), garantindo uma escala proporcional para essa resolução específica.
   - Esses ajustes garantem que a imagem sobre o losango inferior direito seja exibida corretamente e de forma proporcional em telas com resolução de 1559x975.
*/
@media (min-width: 1500px) and (max-width: 1600px) and (orientation: landscape) {
    .image-on-top {
        right: 2vw; /* Ajusta a posição da imagem para 1559x975 */
        width: 30vw; /* Ajusta o tamanho da imagem */
    }
}

/* Ajustes da imagem sobre o losango inferior direito para desktops maiores 
   - Reposiciona a imagem horizontalmente (right: -2.5vw) para garantir que ela se ajuste corretamente à direita em telas de desktops maiores.
   - Define o tamanho da imagem como 35% da largura da viewport (35vw), garantindo que ela seja proporcionalmente maior em telas de alta resolução.
   - Esses ajustes garantem que a imagem sobre o losango inferior direito seja exibida de forma otimizada e proporcional em telas de desktops grandes.
*/
@media (min-width: 1024px) {
    .image-on-top {
        right: -2.5vw; /* Ajusta a posição da imagem à direita em desktops maiores */
        width: 35vw; /* Ajusta o tamanho da imagem */
    }
}

/* Estilo do contêiner de texto centralizado com bordas arredondadas 
   - O contêiner é posicionado absolutamente no centro da tela (top: 50%, left: 50%) e centralizado com transform: translate(-50%, -50%).
   - Aplica-se um fundo branco com 60% de opacidade (rgba) para destacar o texto sobre o conteúdo de fundo.
   - O espaçamento interno (padding) é ajustado com 10px na vertical e 50px na horizontal, proporcionando equilíbrio visual.
   - As bordas são arredondadas com um valor alto de border-radius: 150px, criando um design suave e moderno.
   - Uma leve sombra (box-shadow) é aplicada para dar profundidade e separar visualmente o contêiner do fundo.
   - O z-index: 3 assegura que o contêiner fique acima de outros elementos no layout.
   - O texto dentro do contêiner é centralizado com text-align: center.
   - O contêiner ocupa 75% da largura da viewport (75vw), e a altura é ajustada automaticamente (height: auto) conforme o conteúdo.
*/
.text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o contêiner */
    background-color: rgba(255, 255, 255, 0.6); /* Fundo branco com 60% de opacidade */
    padding: 10px 50px; /* Reduz o espaçamento interno vertical e aumenta horizontalmente */
    border-radius: 150px; /* Bordas bem arredondadas */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    z-index: 3; /* Coloca o contêiner acima dos outros elementos */
    text-align: center; /* Centraliza o texto */
    width: 75vw; /* O contêiner ocupa 75% da largura da tela */
    height: auto; /* Mantém a altura baseada no conteúdo */
}

/* Estilo do H1 no header 
   - Define a cor do texto como roxo escuro (#621E83) para destacar o título.
   - Usa a fonte 'Roboto', que é uma fonte sem serifa, para uma aparência moderna e limpa.
   - Aplica negrito (font-weight: bold) para dar mais ênfase ao H1.
   - Define o tamanho da fonte em 4% da largura da viewport (4vw), ajustando-se automaticamente em telas maiores.
   - Centraliza o texto horizontalmente com text-align: center, garantindo alinhamento uniforme no header.
   - Remove margens padrão com margin: 0 e também elimina o preenchimento interno (padding: 0) e qualquer fundo.
   - Define border-radius: 0 para garantir que o H1 não tenha bordas arredondadas.
*/
.custom-header h1 {
    color: #621E83; /* Cor roxo escuro */
    font-family: 'Roboto', sans-serif; /* Usa a fonte Roboto */
    font-weight: bold; /* Fonte em negrito */
    font-size: 4vw; /* Tamanho da fonte para telas maiores */
    text-align: center; /* Centraliza o texto */
    margin: 0; /* Remove margens padrão */
    background: none; /* Remove o fundo */
    padding: 0; /* Remove padding */
    border-radius: 0; /* Remove bordas arredondadas */
}

/* Estilo para o subtítulo abaixo do H1 
   - Define a cor do texto como roxo escuro (#621E83), mantendo a mesma cor usada no título (H1) para consistência visual.
   - Usa a fonte 'Roboto', sem serifa, para combinar com o estilo do título, mantendo uniformidade.
   - Define o tamanho da fonte em 3% da largura da viewport (3vw), tornando o subtítulo um pouco menor que o título.
   - Aplica um espaçamento superior de 10px (margin-top) para separar o subtítulo do título, garantindo boa legibilidade.
   - Centraliza o subtítulo horizontalmente com text-align: center para um alinhamento consistente com o título.
*/
.sub-header {
    color: #621E83; /* Mesma cor do título */
    font-family: 'Roboto', sans-serif; /* Usa a mesma fonte */
    font-size: 3vw; /* Tamanho menor do que o título */
    margin-top: 10px; /* Espaçamento entre o título e o subtítulo */
    text-align: center; /* Centraliza o subtítulo */
}

/* Ajustes no subtítulo e outros elementos para telas menores, como smartphones 
   - O subtítulo (.sub-header) tem seu tamanho de fonte ajustado para 4% da largura da viewport (4vw), garantindo que ele se adapte e permaneça legível em telas menores.
   - O contêiner de texto (.text-container) é ampliado para ocupar 90% da largura da tela (90vw), maximizando o uso do espaço disponível em dispositivos móveis.
   - O padding do contêiner é ajustado para 5px na vertical e 20px na horizontal, otimizando o espaçamento em telas pequenas.
   - As bordas arredondadas do contêiner são mantidas com 150px de raio para preservar o estilo visual suave.
   - O título principal (H1) também é ajustado para 6% da largura da viewport (6vw), mantendo a hierarquia visual e a legibilidade em dispositivos menores.
*/
@media (max-width: 768px) {
    .text-container {
        width: 90vw; /* O contêiner ocupa 90% da largura da tela em dispositivos móveis */
        padding: 5px 20px; /* Ajusta o padding para telas menores */
        border-radius: 150px; /* Mantém as bordas arredondadas para telas menores */
    }

    .custom-header h1 {
        font-size: 6vw; /* Ajusta o tamanho da fonte para telas pequenas */
    }

    .sub-header {
        font-size: 4vw; /* Ajusta o tamanho da fonte para o subtítulo em telas menores */
    }
}

/* Contêiner para centralizar o conteúdo horizontalmente e adicionar espaçamento superior 
   - O text-align: center alinha o conteúdo dentro do contêiner horizontalmente ao centro.
   - O padding-top: 100px adiciona um espaçamento de 100px no topo, afastando o conteúdo do limite superior da página.
   - Esse espaçamento é usado para criar uma margem visual entre o topo da página e o conteúdo, ideal para layouts em que o conteúdo precisa de respiro no topo.
   - Esse ajuste não afeta o alinhamento vertical completo do conteúdo, apenas o desloca para baixo.
   - Para centralização vertical total, seria recomendado o uso de Flexbox ou Grid.
*/
.header-content-wrapper {
    text-align: center;
    padding-top: 100px; /* Espaçamento do topo */
}

/* Estilo do contêiner de texto centralizado com bordas arredondadas e sombra
   - Define um fundo branco semitransparente (rgba) com 60% de opacidade para destacar o texto de forma suave sobre o fundo.
   - Aplica um padding de 20px na vertical e 50px na horizontal, criando espaçamento interno para que o conteúdo não encoste nas bordas do contêiner.
   - As bordas são arredondadas com um border-radius de 100px, dando ao contêiner um estilo visual suave e moderno.
   - Aplica uma leve sombra (box-shadow) com 4px de desfoque e 10px de propagação, adicionando profundidade ao contêiner.
   - O contêiner ocupa 75% da largura da viewport (75vw), garantindo que ele se ajuste de forma responsiva em várias telas.
   - O margin: 0 auto centraliza o contêiner horizontalmente, enquanto o margin-bottom de 30px cria espaço entre o contêiner de texto e o botão ou outros elementos abaixo.
*/
.text-container {
    background-color: rgba(255, 255, 255, 0.6); /* Fundo branco com 60% de opacidade */
    padding: 20px 50px;
    border-radius: 100px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 75vw;
    margin: 0 auto; /* Centraliza o contêiner horizontalmente */
    margin-bottom: 30px; /* Espaçamento entre o contêiner de texto e o botão */
}

/* Estilo do H1 (título principal)
   - Define a cor do texto como roxo escuro (#621E83) para dar destaque ao título.
   - Usa a fonte 'Roboto', sem serifa, para garantir um visual moderno e limpo.
   - Aplica negrito (font-weight: bold) para dar mais ênfase ao título, tornando-o visualmente forte e marcante.
   - Define o tamanho da fonte como 4% da largura da viewport (4vw), tornando o título responsivo e proporcional a diferentes tamanhos de tela.
   - Remove as margens padrão com margin: 0 para garantir que o título esteja perfeitamente posicionado.
*/
.header-title {
    color: #621E83;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 4vw;
    margin: 0;
}

/* Estilo do subtítulo (texto abaixo do H1)
   - Mantém a mesma cor roxa escura (#621E83) do título, garantindo consistência visual.
   - Usa a mesma fonte 'Roboto', sem serifa, para harmonizar com o título.
   - O tamanho da fonte é definido como 3% da largura da viewport (3vw), tornando o subtítulo menor que o título, mas ainda legível e proporcional.
   - Aplica margin-top: 10px para criar um espaçamento entre o título e o subtítulo, garantindo uma separação visual clara e uma hierarquia adequada.
*/
.sub-header {
    color: #621E83;
    font-family: 'Roboto', sans-serif;
    font-size: 3vw;
    margin-top: 10px;
}

/* Estilo do botão Saiba mais */
.btn-saiba-mais {
    position: relative;
    padding: 15px 40px;
    font-size: 2vw;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(to left, #621E83, #B075CD);
    border: none;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.3s ease;
    margin-top: 130%; /* Espaçamento padrão */
    display: inline-block;
    z-index: 10;
}

/* Hover do botão Saiba mais */
.btn-saiba-mais:hover {
    background: linear-gradient(to right, #621E83, #B075CD);
    transform: scale(1.05);
}

/* Ajustes do btn-saiba-mais para telas menores */
@media (max-width: 768px) {
    .text-container {
        width: 90vw;
        padding: 10px 20px;
        border-radius: 100px;
    }

    .header-title {
        font-size: 6vw;
    }

    .sub-header {
        font-size: 4vw;
    }

    .btn-saiba-mais {
        font-size: 4vw;
        padding: 10px 20px;
        margin-top: 160px; /* Ajuste para telas menores */
    }
}

/* Ajustes específicos do btn-saiba-mais para telas com altura até 450px em modo paisagem */
@media (max-height: 450px) and (orientation: landscape) {
    .btn-saiba-mais {
        margin-top: 165px; /* Ajuste este valor conforme necessário */
    }
}


/* Estilo do h2 para aplicar a fonte Roboto e ajustar a posição */
.services-section h2 {
    font-family: 'Roboto', sans-serif; /* Aplica a fonte Roboto */
    font-size: 3.5em; /* Ajuste do tamanho da fonte */
    margin-top: 100px; /* Adiciona espaçamento acima do h2 para afastar do topo */
    margin-bottom: 20px; /* Espaçamento abaixo do h2 */
    text-align: center; /* Centraliza o título */
    color: #621E83; /* Cor do texto */
}

/* Ajuste do h2 para telas menores que 395px */
@media (max-width: 395px) {
    .services-section h2 {
        font-size: 2.8em; /* Reduz o tamanho da fonte para telas pequenas */
    }
}

/* Ajuste do parágrafo para alinhamento */
.services-section p {
    font-family: 'Roboto', sans-serif; /* Aplica a fonte Roboto também no parágrafo */
    font-size: 2em; /* Ajuste do tamanho da fonte do parágrafo */
    text-align: center; /* Alinhamento */
    color: #621E83; /* Cor do texto do parágrafo (ajuste conforme necessário) */
    margin: 0 auto; /* Centraliza o bloco do parágrafo horizontalmente */
    width: 75%; /* Define uma largura para o parágrafo */
    line-height: 1.5em; /* Define o espaçamento entre linhas para melhorar a legibilidade */
}

/* Configuração global para calcular o box-sizing 
   - Aplica a regra box-sizing: border-box a todos os elementos (*), o que altera a forma como o tamanho dos elementos é calculado.
   - Com box-sizing: border-box, o padding e a borda (border) dos elementos são incluídos no cálculo da largura e altura.
   - Isso significa que o valor total de largura e altura do elemento não será afetado por padding ou borda, facilitando o controle de layout e evitando que os elementos cresçam além do esperado.
   - Essa configuração global é útil para criar layouts mais previsíveis e consistentes, especialmente quando se usa padding e bordas.
*/
* {
    box-sizing: border-box;
}

/* Ajustar as colunas para usar Flexbox 
   - Aplica o display: flex a cada coluna que utiliza as classes .col-12 e .col-md-4 dentro da seção .services-section.
   - Isso transforma cada uma dessas colunas em um contêiner flexível, permitindo um controle mais preciso sobre o alinhamento e a distribuição de seu conteúdo.
   - Ao utilizar Flexbox, os elementos internos das colunas podem ser facilmente alinhados e distribuídos horizontal ou verticalmente.
   - Isso facilita o alinhamento centralizado do conteúdo dentro das colunas ou outros ajustes de layout, como espaçamento automático, entre outros benefícios do Flexbox.
*/
.services-section .col-12.col-md-4 {
    display: flex;
}

/* Estilo geral do contêiner de cada quadrado da sessão Serviços */
.square-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha o conteúdo ao topo */
    align-items: center;
    flex: 1; /* Preenche a altura da coluna */
    margin-top: 20px;
    background: linear-gradient(to right, #621E83, #B075CD);
    color: #ffffff;
    padding: 20px;
    border-radius: 15px;
}

/* Estilo específico para o texto h3 dos quadrados da sessão Serviços */
.square-container h3 {
    margin-bottom: 15px;
    font-size: clamp(1em, 2.5vw, 2em);
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: #ffffff;
    word-wrap: break-word;
}

/* Estilo específico para o parágrafo nos quadrados da sessão Serviços*/
.square-container p.p-square-custom {
    font-size: clamp(0.9em, 2vw, 1.6em);
    color: #ffffff;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    padding: 15px;
    word-wrap: break-word;
}

/* Ajustes para telas muito pequenas do texto nos quadrados da sessão Serviços*/
@media (max-width: 320px) {
    .square-container h3 {
        font-size: 1em;
    }

    .square-container p.p-square-custom {
        font-size: 0.8em;
    }
}

/* Estilo do contêiner que envolve o botão "Conheça mais" */
.container-btn-conheca-mais {
    text-align: center; /* Centraliza o conteúdo dentro do contêiner */
}

/* Centralizando o btn-conheca-mais sem ocupar a linha inteira */
.btn-conheca-mais {
    padding: 15px 40px;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(to left, #621E83, #B075CD);
    border: none;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.3s ease;
    margin-top: 30px;
    display: inline-block; /* Respeita o tamanho natural do botão */
}

/* Hover do btn-conheca-mais */
.btn-conheca-mais:hover {
    background: linear-gradient(to right, #621E83, #B075CD);
    transform: scale(1.05);
}

/* Ajustes do btn-conheca-mais para telas menores */
@media (max-width: 768px) {
    .btn-conheca-mais {
        font-size: 4vw;
        padding: 10px 20px;
        margin-top: 20px; /* Ajuste para telas menores */
    }
}

/* Ajustes específicos do btn-conheca-mais para telas com altura até 450px em modo paisagem */
@media (max-height: 450px) and (orientation: landscape) {
    .btn-conheca-mais {
        margin-top: 15px; /* Ajuste este valor conforme necessário */
    }
}

/* Estilo do título principal (h2) */
.section-title {
    font-family: 'Roboto', sans-serif; /* Fonte Roboto */
    color: #621E83; /* Cor roxa */
    font-weight: bold; /* Negrito */
    font-size: 3em; /* Tamanho da fonte ajustável */
    text-align: center; /* Centralizado */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

/* Estilo dos subtítulos (h3) */
.section-subtitle {
    font-family: 'Roboto', sans-serif; /* Fonte Roboto */
    color: #621E83; /* Cor roxa */
    font-weight: bold; /* Negrito */
    font-size: 2em; /* Tamanho da fonte ajustável */
    margin-top: 40px; /* Espaçamento acima do subtítulo */
    margin-bottom: 15px; /* Espaçamento abaixo do subtítulo */
    text-align: center; /* Centralizado */
}

/* Estilo do parágrafo (p) */
.section-description {
    font-family: 'Roboto', sans-serif; /* Fonte Roboto */
    color: #621E83; /* Cor roxa */
    font-size: 1.2em; /* Tamanho da fonte */
    line-height: 1.6em; /* Espaçamento entre linhas */
    margin-bottom: 20px; /* Espaçamento abaixo do parágrafo */
    text-align: justify; /* Justificado */
}

/* Estilo do contêiner que envolve o botão "Conheça a gente" */
.container-btn-conheca-gente {
    text-align: center; /* Centraliza o conteúdo dentro do contêiner */
}

/* Centralizando o btn-conheca-gente sem ocupar a linha inteira */
.btn-conheca-gente {
    padding: 15px 40px;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(to left, #621E83, #B075CD);
    border: none;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.3s ease;
    margin-top: 30px;
    display: inline-block; /* Respeita o tamanho natural do botão */
}

/* Hover do btn-conheca-gente */
.btn-conheca-gente:hover {
    background: linear-gradient(to right, #621E83, #B075CD);
    transform: scale(1.05);
}

/* Ajustes do btn-conheca-gente para telas menores */
@media (max-width: 768px) {
    .btn-conheca-gente {
        font-size: 4vw;
        padding: 10px 20px;
        margin-top: 20px; /* Ajuste para telas menores */
    }
}

/* Ajustes específicos do btn-conheca-gente para telas com altura até 450px em modo paisagem */
@media (max-height: 450px) and (orientation: landscape) {
    .btn-conheca-gente {
        margin-top: 15px; /* Ajuste este valor conforme necessário */
    }
}

/* Estilo reutilizável para fundo cinza em seções */
.section-fundo-cinza {
    background: linear-gradient(to bottom, #f5f5f5, #e0e0e0); /* Degradê suave de cinza claro para cinza médio */
    padding: 50px 0; /* Espaçamento interno para as seções */
    width: 100%; /* Largura total */
    position: relative; /* Torna o contêiner de referência */
    overflow: hidden; /* Esconde qualquer conteúdo que ultrapasse os limites */
    display: flex; /* Flexbox para centralizar */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    flex-direction: column; /* Organiza o conteúdo em coluna */
}

/* Ajustes para seções menores */
@media (max-width: 768px) {
    .section-fundo-cinza {
        padding: 30px 20px; /* Ajuste o padding para dispositivos móveis */
    }
}

/* Estilo do contêiner que envolve o botão "Fale Conosco" */
.container-btn-fale-conosco {
    text-align: center; /* Centraliza o conteúdo dentro do contêiner */
    margin-top: 20px; /* Espaçamento superior */
}

/* Estilo do botão "Fale Conosco" */
.btn-fale-conosco {
    padding: 15px 40px;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(to left, #621E83, #B075CD);
    border: none;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.3s ease;
    display: inline-block; /* Respeita o tamanho natural do botão */
}

/* Hover do botão "Fale Conosco" */
.btn-fale-conosco:hover {
    background: linear-gradient(to right, #621E83, #B075CD);
    transform: scale(1.05);
}

/* Ajustes do btn-fale-conosco para telas menores */
@media (max-width: 768px) {
    .btn-fale-conosco {
        font-size: 4vw;
        padding: 10px 20px;
    }
}

/* Ajustes específicos do btn-fale-conosco para telas com altura até 450px em modo paisagem */
@media (max-height: 450px) and (orientation: landscape) {
    .btn-fale-conosco {
        margin-top: 15px; /* Ajuste este valor conforme necessário */
    }
}

/* Estilo do botão "Enviar" na seção "Fale com a gente" */
.btn-fale-conosco {
    padding: 15px 40px;
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(to left, #621E83, #B075CD); /* Gradiente roxo */
    border: none;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

/* Hover do botão "Enviar" */
.btn-fale-conosco:hover {
    background: linear-gradient(to right, #621E83, #B075CD);
    transform: scale(1.05);
}

/* Estilo do botão "OK" no modal de feedback */
.btn-ok-fale-conosco {
    padding: 10px 20px;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(to left, #621E83, #B075CD); /* Gradiente roxo */
    border: none;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, transform 0.3s ease;
}

/* Hover do botão "OK" */
.btn-ok-fale-conosco:hover {
    background: linear-gradient(to right, #621E83, #B075CD);
    transform: scale(1.05);
}