/* CSS Document Perfecto2024 */
@charset "UTF-8";

/* Estilos para o preloader (Abertura do site) */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #3498db;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

html {
    overflow-x: hidden; /* Impede rolagem lateral */
}

/* Estilo para a área do banner */
.banner-area {
    background-image: url('../img/banner2.jpeg'); /* foto principal */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    animation: moveBackground 30s linear forwards; /* Animação para mover o background 'infinite' */
}

/* Animação para mover o background da direita para a esquerda */
@keyframes moveBackground {
    0% {
        background-position: 70% 50%; /* Posição inicial na direita */
    }
    100% {
        background-position: 0% 50%; /* Posição final na esquerda */
    }
}

/* Estilo para o Ícone Flutuante do WhatsApp */
.whatsapp-float {
    position: fixed; /* Fixa o ícone na tela */
    width: 56px;
    height: 56px;
    bottom: 15px; /* Distância do rodapé */
    right: 15px; /* Distância da lateral direita */
    background-color: #25d366; /* Cor de fundo do ícone */
    color: #fff; /* Cor do ícone */
    border-radius: 50%; /* Ícone circular */
    text-align: center;
    font-size: 32px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para o ícone */
    z-index: 100; /* Certifique-se de que o ícone esteja acima dos outros elementos */
}

.whatsapp-float i {
    margin-top: 12px; /* Centraliza o ícone dentro do botão */
}

.whatsapp-float:hover {
    background-color: #128c7e; /* Cor ao passar o mouse */
}

body {
    font-family: 'Montserrat', sans-serif;
    font-optical-sizing: auto;
    font-weight: 600; /* Peso da fonte */
    letter-spacing: 0.3px;
    font-style: normal;
    overflow-x: hidden; /* Impede rolagem lateral */
}

p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Peso regular */
    font-size: 15px;  /* Tamanho da fonte */
}

h4 {
    font-size: 18px;
    font-weight: 600; /* Peso da fonte */
    letter-spacing: 0.5px;
}

.h1_custom {
    font-size: 30px;
    letter-spacing: 0.2px;
    padding-top: 50px;
    padding-bottom: 5px;
}

.h2_subtitulo {
    font-size: 18px;
    letter-spacing: 0.2px;
    margin-right: 150px;
    margin-left: 50px;
    padding: 20px;
}

.h4_subtitulo {
    font-size: 16px;
    letter-spacing: 0.5px;
    margin-right: 300px;
    color: #484646;
    padding-bottom: 50px;
}

h4.text-center {
    padding: 20px 0;
}

.single-feature .title {
    background: rgba(0,0,0,0.6);
    padding: 20px 0px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-feature .desc-wrap a {
    font-size: 16px;
}

/* Centraliza o header com uma largura fixa e fundo transparente */
.main-menu {
    width: 1000px;
    margin: 0 auto; /* Centraliza o header */
    background-color: transparent; /* Fundo transparente */
    position: relative; /* Garante que o header fique sobre a imagem de fundo */
    z-index: 10; /* Mantém o header acima de outros elementos */
    border-bottom: 0px solid #fff;
}

/* Estilização do logo e nome da empresa */
#logo {
    display: flex;
    align-items: center;
    white-space: nowrap;
    background-color: transparent; /* Remove qualquer fundo */
}

/* Estilização dos logos2 */
.logo2 {
    display: flex;
    align-items: center;
    max-width: 200px;
}

/* Remove o fundo do logo e nome da empresa */
.navbar-brand {
    background-color: transparent;
    padding: 0;
}

/* Estilização dos itens do menu */
.navbar-nav {
    background-color: rgba(0, 0, 0, 0.8); /* Fundo preto transparente */
    padding: 0; /* Remove o padding para o bloco do menu */
    border-radius: 5px; /* Borda arredondada para todo o bloco */
}

.navbar-nav .nav-link {
    color: #fff !important; /* Texto branco */
    padding: 0 15px !important; /* Remove o padding vertical e mantém o padding horizontal */
    margin: 0 !important; /* Remove o espaçamento entre os links */
    border: none !important; /* Remove qualquer borda entre os links */
    line-height: 50px !important; /* Define a altura da linha para centralizar o texto */
    height: 50px !important; /* Define uma altura fixa para os links */
    display: flex !important;
    align-items: center !important; /* Centraliza verticalmente o texto */
}

.navbar-nav .nav-link:hover {
    background-color: #ffa500 !important; /* Fundo laranja ao passar o mouse */
    color: #fff !important; /* Garante que o texto fique branco */
}

/* Estilização do logo e nome da empresa */
.small-logo-img {
    max-width: 30px; /* Define a largura máxima do logo */
    height: auto; /* Mantém a proporção do logo */
    display: inline-block; /* Garante que o logo e o texto fiquem na mesma linha */
}

.small-company-name {
    font-size: 18px; /* Tamanho pequeno para o nome da empresa */
    font-family: 'Montserrat', sans-serif; /* Fonte personalizada */
    color: #000; /* Cor do texto */
    margin-left: 20px; /* Espaçamento entre o logo e o nome da empresa */
    font-weight: 600; /* Peso da fonte */
    white-space: nowrap; /* Evita quebra de linha */
}

/* Remover a linha preta no rodapé do header */
#header {
    border-bottom: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Novo estilo da HEADER sem o superfish.min.js FIM */
/* Customizing the <p> inside banner-content */
.banner-area .banner-content p {
    color: #000;
    font-size: 18px;
    margin-top: 20px;
    /* Add other custom styles as needed */
}

/* BOTÃO AZUL */
.genric-btn.info {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Peso da fonte */
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    background: #38a4ff;
    border: 1px solid transparent;
}

/* Estiliza a imagem dos logos Perfecto Espanhol, Charlemos e Delle */
.single-feature img {
    width: 30%; /* Torna a largura da imagem responsiva */
    display: block;
    margin: 0 auto; /* Centraliza a imagem */
    padding-top: 20px;
}

/* Personalização PRICING */
.pricing-card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    background: url('../img/ilustra_card.jpg') no-repeat center center; /* Imagem de fundo centralizada */
    background-size: cover; /* Ocupa toda a área do card de maneira responsiva */
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    color: #fff; /* Texto branco para contraste com a imagem */
}

.pricing-card:hover {
    transform: translateY(-10px); /* Efeito de movimento ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra mais forte no hover */
}

/* Customização de fonte e cor para o título do plano */
.plan-title {
    color: #f7631b; /* Cor laranja #FFA500*/
    font-family: 'Poppins', sans-serif; /* Fonte personalizada */
    font-weight: 600; /* Peso da fonte */
    font-size: 24px; /* Tamanho da fonte */
    margin-bottom: -10px; /* Reduz o espaço entre o título e o preço */
}

/* Customização de fonte e cor para o preço */
.display-4.my-4.price {
    color: #FFA500; /* Cor amarela para o preço #f7631b */
    font-size: 50px; /* Mantém o tamanho do preço */
    font-weight: 600; /* Peso da fonte */
}

/* Customização de fonte e cor para a descrição das aulas */
.plan-description {
    color: #fff; /* Cor cinza */
    font-family: 'Poppins', sans-serif; /* Fonte personalizada */
    font-weight: 500; /* Peso da fonte */
    font-size: 18px; /* Tamanho da fonte */
    margin-top: -20px; /* Aproxima o texto do preço */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Customização dos ícones na lista */
.icon-large {
    font-size: 17px; /* Tamanho do ícone */
    color: #10f326; /* Cor verde do ícone icon_educacao */
}

/* Customização do botão "Contratar" */
.genric-btn.primary-border.circle {
    font-weight: 600;
    font-size: 16px; /* Tamanho da fonte no botão */
    padding: 7px 40px; /* Padding do botão */
    border-radius: 50px; /* Borda arredondada */
    margin: 0px 10px 10px 10px; /* Margem inferior */
}

.genric-btn.primary-border {
    border: 0px solid #f7631b;
  }

.section-title p {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 30px; /* Define a altura da linha para centralizar o texto */
    margin-bottom: 0px;
    color: #aaa;
}

.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 5px;
    color: #fff;
}

.card-text {
    font-size: 1rem;
    color: #555;
}

.icon i {
    color: #17a2b8;
}

.pb-5, .py-5 {
    padding-bottom: 0rem !important;
    padding-top: 1rem !important;
}
.mu-heading-title {
    margin-top: 30px;
}
.no-margin {
    margin-top: 0; /* Remove o valor da margem superior apenas para esse título */
}

/* Charlemos/Software */

/* Container principal da seção */
.software-container {
    max-width: 1140px;
    margin: 0 auto;
}

/* Garantir que as colunas fiquem com a mesma altura */
.row.d-flex {
    display: flex;
    align-items: stretch;
}

/* Quadro preto para o conteúdo de software */
.software-chat-content {
    background-color: #000;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    min-height: 90%; /* O quadro preto ocupa 90% da altura da coluna */
    height: auto; /* Deixa a altura se ajustar de acordo com o conteúdo */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 100%; /* Garante que o quadro preto ocupe toda a largura */
    margin: 0 auto;
}

/* Adiciona altura completa à coluna */
.col-md-7 {
    height: auto; /* Permite a coluna se ajustar à altura do conteúdo */
    padding-left: 40px; /* Aumenta o espaçamento à esquerda da segunda coluna */
}

/* Estilo para a imagem do notebook */
.notebook-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150%; /* Ajusta a largura da imagem para 100% */
    max-width: 600px; /* Define uma largura máxima para a imagem */
    z-index: 3; /* Garante que a imagem esteja acima dos outros elementos */
}

/* Quadrinho laranja */
.software-text-bg {
    background: url('../img/ilustra_card.jpg') no-repeat center center;
    background-size: auto;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    z-index: 5;
}

/* Estilo do título */
.software-chat-content h4 {
    color: #FFA500;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 20px 23px 0px 0px;
    text-align: center; /* Centraliza o texto */
}

/* Estilo único para controlar o texto nos itens da lista */
.features-list li span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #fff; /* Cor do texto */
}

.features-list li {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 15px;
}

.features-list li i {
    color: #10f326;
    margin-right: 8px;
}

/* Estilo específico para os itens da lista na seção de preços */
.pricing-card ul {
    padding-left: 0;
    list-style: none;
    text-align: center; /* Centraliza os itens da lista */
}

.pricing-card ul li {
    font-size: 1.1em; /* Tamanho da fonte ajustável */
    color: #333; /* Cor do texto */
    margin-bottom: 10px;
    display: inline-flex; /* Mantém o ícone e o texto em linha */
    align-items: center;
    justify-content: center; /* Centraliza os itens inline */
    width: 100%; /* Garante que o item ocupe toda a largura */
}

.pricing-card ul li i {
    color: #7ac142; /* Cor do ícone (verde) */
    margin-right: 10px;
    font-size: 1.2em; /* Tamanho do ícone */
}

.pricing-card ul li span {
    font-size: 0.9rem;
    font-weight: 400; /* Peso da fonte para o texto */
    font-family: 'Poppins', sans-serif; /* Fonte personalizada */
    color: #fff; /* Cor do texto */
    
}

/* Estilo do formulário de contato PRICING */
#mu-pricing.charlemos-section .row {
    gap: 40px; /* Espaçamento entre as colunas da seção CURSO CHARLEMOS */
}

/* Ajuste de Estilos do Formulário */
/* Container do Formulário para seguir a largura da seção FAQ */
.faq-contact-form .container {
    padding-right: 0px;
    padding-left: 0px;
}

/* Estilo do contêiner do formulário, com fundo, bordas arredondadas e sombra */
.faq-contact-form .contact-form {
    background-color: #d4dcdf; /* Cor de fundo */
    padding: 25px 30px;
    border-radius: 8px; /* Bordas arredondadas */
}

/* Estilo do Título do Formulário */
.faq-contact-form .form-title {
    font-family: 'Montserrat', sans-serif;
	font-weight: 600;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase; /* Caixa alta */
    color: #003366;
    padding-bottom: 15px;
    padding-top: 0px;
    text-align: center;
}

/* Estilo do Formulário */
.php-email-form .form-group {
    margin-bottom: 20px;
}

.php-email-form .form-group label {
    font-weight: 600;
    color: #003366;
}

.php-email-form .form-control {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    font-size: 1rem;
}

/* Estilo do botão Enviar */
.php-email-form .btn.form-btn {
    background-color: #e99309;
    color: #fff;
    padding: 12px 40px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 30px;
    border: none;
    transition: background-color 0.3s ease;
}

.php-email-form .btn.form-btn:hover {
    background-color: #efbe0c;
    color: #fff;
}

.php-email-form .text-center {
    text-align: center;
}

/* Owl Carousel Customization SECAO METODOLOGIA INTELIGENTE (SMART) */
.smart-section {
    max-width: 1140px;
    margin: 0 auto;
    margin-top: 30px; /* Aumente este valor para aumentar a margem superior */
}

.card-title-description { /* Title CARD */
    font-size: 1.25rem;
    margin-bottom: 15px;
}
  
.text-primary-description {
    color: #f7631b !important;
}

.owl-carousel .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    color: #333;
}

.owl-carousel .owl-nav button.owl-prev {
    left: -25px;
}

.owl-carousel .owl-nav button.owl-next {
    right: -25px;
}

.owl-carousel .owl-nav button:hover {
    color: #7ac142;
}

.owl-carousel .owl-dots {
    text-align: center;
    margin-top: 20px;
}

.owl-carousel .owl-dots .owl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
}

.owl-carousel .owl-dots .owl-dot.active {
    background: #7ac142;
}

/* Customização de Cards */
.custom-card {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra corrigida */
    transition: all 0.3s ease;
}

.custom-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Efeito de hover */
}

/* Customização de Cards na seção Smart */
#smart .owl-carousel .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

#smart .custom-card {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#smart .bg-light {
    background-color: #ecf1f4 !important;
}

#smart .card-title-description {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
}

#smart .card-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    padding-right: 10px;
    padding-left: 10px;
}

/* Personalização das setas */
#smart .custom-prev-smart, #smart .custom-next-smart {
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: #333;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    margin: 0 5px; /* Espaçamento entre as setas */
}

/* Remover posição absoluta */
#smart .custom-prev-smart,
#smart .custom-next-smart {
    position: relative; /* Alterar de 'absolute' para 'relative' */
    top: 0;
    transform: none; /* Remove a transformação vertical */
}

#smart .custom-prev-smart:hover, #smart .custom-next-smart:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

#smart .custom-prev-smart {
    left: 0;
}

#smart .custom-next-smart {
    right: 0;
}

.custom-navigation {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;
    margin-top: 0px; /* Ajuste conforme necessário */
    margin-bottom: 30px;
}

/* Aumentar a margem esquerda da segunda coluna */
#smart .col-lg-5 {
    margin-left: 40px; /* Ajuste este valor conforme a necessidade */
}

/* Estilos específicos dos ícones dentro dos cards */
#smart .custom-card .icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
}

/* Customização dos ícones em CARDS SMART */
/* Estilo aplicado a todos os ícones da seção de cards dentro do Owl Carousel */
.owl-carousel .owl-item img.icon {
    width: auto; /* Mantém a largura automática, sem ser forçada a 100% */
    height: 65px; /* Define a altura desejada */
    max-width: 50px; /* Define a largura máxima para evitar distorção */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    display: block; /* Centraliza a imagem */
    object-fit: contain; /* Mantém a proporção da imagem */
}
.icon { 
	height: 50px;
	width: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

.icon_trust {
    height: 40px;
	width: 40px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

/* Garantir que o estilo específico do ícone tenha prioridade sobre o Owl Carousel */
.owl-carousel .owl-item img.icon_educacao {
    width: auto; /* Mantém a largura automática, sem ser forçada a 100% */
    height: 65px; /* Define a altura desejada */
    max-width: 65px; /* Define a largura máxima para evitar distorção */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    display: block; /* Garante que a imagem fique centralizada */
    object-fit: contain; /* Assegura que a proporção da imagem seja mantida */
}

/* Reaplicando o estilo geral do ícone */
.icon_educacao {
    height: 65px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    object-fit: contain; /* Assegura que a proporção da imagem seja preservada */
}

/* Estilos específicos para a ilustração na seção Smart */
.smart-illustration {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: 15px; /* Margem para evitar que a ilustração encoste nas setas */  
}

/* Estilo para CTA */
.cta {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(rgba(0, 22, 34, 0.9), rgba(0, 22, 34, 0.9)), url("../img/cta-bg.jpg") center center; /* Ajuste a posição vertical */
    background-size: cover;
    background-attachment: fixed; /* Fixa a imagem de fundo */
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    border: 2px solid #fff;
    border-radius: 50px;
    color: #fff;
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: bold;
}

.cta-btn i {
    font-size: 2rem; /* Tamanho menor do ícone */
    margin-right: 8px; /* Espaço entre o ícone e o texto */
}

.cta-btn:hover {
    background-color: #47b2e4;
    border-color: transparent;
    color: #fff;
}

.cta-btn:hover i {
    color: #fff; /* Mantém o ícone branco no hover */
}

.cta h3 {
    font-size: 29px; /* Aumenta o tamanho do título */
    color: #fff; /* Define a cor branca */
    text-align: left; /* Alinha o título à esquerda */
    margin-bottom: 20px; /* Espaço maior entre o título e o parágrafo */
    font-weight: 700; /* Pode ajustar a espessura da fonte, se desejar */
}

.cta p {
    font-size: 16px; /* Aumenta o tamanho do texto */
    color: #fff; /* Define a cor branca */
    text-align: left; /* Alinha o texto à esquerda */
    margin-bottom: 0; /* Remove qualquer margem inferior, se não desejar espaço adicional */
    line-height: 1.5em; /* Melhora o espaçamento entre linhas */
    font-weight: 500; /* Pode ajustar a espessura da fonte, se desejar */
}

/* COMECO - Estilo para a imagem e o ícone de play 2408 */
/* Estilo para a imagem e o ícone de play */
.video-thumbnail {
    position: relative;
    display: block;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    overflow: visible; /* Garante que o ícone não seja cortado */
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px;
    color: #fff;
    z-index: 10;
    background-color: #38A4FF; /* Fundo azul para o ícone */
    padding: 8px 30px; /* Espaço ao redor do ícone para criar o formato retangular */
    border-radius: 30px; /* Borda arredondada para o fundo */
    pointer-events: none; /* Garante que o clique passe pela área do ícone */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.video-thumbnail:hover .play-icon {
    background-color: #1d84d8; /* Fica um azul mais escuro ao passar o mouse */
    color: #f2be2f; /* Mantém o ícone branco */
}
/* FIM - Estilo para a imagem e o ícone de play 2408 */

/* Estilização do botão na seção banner-area */
.btn-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 35px;
    border-radius: 50px;
    background-color: #f7631b;  /* Cor de fundo */
    color: #fff;  /* Cor do texto e ícone */
    font-size: 18px; /* Tamanho da fonte */
    font-weight: 600;
    text-transform: none; /* Permite caixa alta e baixa no texto */
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 10px; /* Espaço superior */
}

.btn-banner i {
    font-size: 2rem; /* Tamanho menor do ícone */
    margin-right: 10px; /* Espaço entre o ícone e o texto */
}

.btn-banner:hover {
    background-color: #47b2e4;  /* Cor de fundo ao passar o mouse */
    transform: translateY(-3px);  /* Pequeno efeito de elevação ao hover */
    color: #fff;  /* Garantir que o texto fique branco */
}

/* Estilos da Secao Cursos */
#cursos .card {
    transition: transform 0.3s, box-shadow 0.3s;
}

#cursos .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

#cursos .card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.logo-size {
    max-width: 150px; /* Define o tamanho máximo do logo */
    height: auto; /* Mantém a proporção do logo */
}

.course-title { /* Estilos para o título dos cursos */
    font-size: 1.5rem; /* Tamanho do título */
    font-weight: bold; /* Negrito */
    color: #333333; /* Cor do título */
    text-transform: uppercase; /* Caixa alta no título */
}

.course-description { /* Estilos para o texto abaixo do título (descrição do curso) */
    font-size: 1rem; /* Tamanho do texto */
    color: #6c757d; /* Cor do texto (muted) */
    line-height: 1.6; /* Espaçamento entre linhas */
}

.course-btn { /* Estilos para o botão */
    font-size: 0.875rem; /* Tamanho do texto do botão */
    text-transform: uppercase; /* Caixa alta no texto do botão */
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 10px 20px; /* Espaçamento interno do botão */
    border-radius: 25px; /* Bordas arredondadas */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.course-btn:hover { /* Estilos de hover para o botão */
    background-color: #0056b3; /* Cor do fundo ao passar o mouse */
    border-color: #0056b3; /* Cor da borda ao passar o mouse */
    color: white; /* Cor do texto ao passar o mouse */
}

p.cursos {
    font-size: 16px;
    padding: 20px 0px 0px 0px;
    color: #b13737;
}

#curso-overview, #curso-detail {
    transition: all 0.5s ease-in-out;
}

#cursos.py-5 {
    padding-top: 2rem !important; /* Define o novo valor desejado */
    padding-bottom: 2rem !important; /* Define o novo valor desejado */
}

/* Configuração básica do slider CURSOS */
/* Configuração básica do slider */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.d-none {
    display: none;
}

#cursos .card-text {
    padding-left: 30px;
    padding-right: 30px;
}

/* Estilo para as setas de navegação e botão voltar */
.navigation-buttons, #btn-voltar-container {
    margin-top: 20px;
}

.slide-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto; /* Mantém altura flexível */
}

#cursos .btn {
    padding: .5rem 1rem;
    margin-right: 3px;
    margin-left: 3px;
}

#cursos .btn-primary {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    background-color: #47b2e4;
    border-color: #47b2e4;
    font-weight: 600;
    font-size: 16px;
}

#cursos .btn-primary:hover {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    background-color: #f7631b;
    border-color: #f7631b;
}

/* Estilos para as novas imagens dos cards de CURSOS */
/* Imagem do Curso Espanhol em 20 */
#cursos .mt-3, .my-3 {
    margin-top: 1.5rem !important;
  }

.curso-e20-img {
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Imagem do Curso Charlemos */
.curso-charlemos-img {
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Imagem do Curso Preparatório DELE */
.curso-dele-img {
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Estilos do SLIDE 1 Charlemos */
#charlemos-slide {
    max-width: 1150px;
    margin: 0 auto;
    position: relative;
    padding: 5rem 0;
    background-color: #fff;
}

.charlemos-bg {
    background-image: url('../img/prof_charlemos_ilustra.jpg') !important;
    background-size: 75% !important; /* Controla o tamanho da imagem (menor que contain) */
    background-position: 110% bottom !important; /* Empurra mais para a direita (ajuste percentual) */
    background-repeat: no-repeat !important;
    min-height: 50vh !important; /* Altura mínima ajustada */
}

#charlemos-slide .charlemos-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
    padding-right: 60px;
    padding-left: 60px;
}

#charlemos-slide .highlight {
    color: #f37020;
}

#charlemos-slide .charlemos-card {
    padding: 20px 20px 5px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
}

#charlemos-slide .charlemos-card3 {
    padding: 20px 20px 5px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
}

#charlemos-slide .card-orange {
    background-color: #f37020;
}

#charlemos-slide .card-gray {
    background-color: #e2e9ec;
    color: #484646;
}

/* Estilos do SLIDE 2 Charlemos */
#charlemos-slide-2 {
    max-width: 1150px;
    margin: 0 auto;
    padding: 3rem 0;
    background-color: #fff;
}

.charlemos-bg-2 {
    background-image: url('../img/prof_charlemos_ilustra.jpg');
    background-size: 75% !important;
    background-position: 140% bottom !important;
    background-repeat: no-repeat !important;
    min-height: 50vh !important;
}

/* Título */
#charlemos-slide-2 .charlemos-title-2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #000;
    text-align: center;
    padding-bottom: 30px;
    margin-top: 10px;
    padding-right: 60px;
    padding-left: 60px;
}

/* Cor laranja aplicada especificamente ao span com a classe "charlemos2_cor" do título */
#charlemos-slide-2 .charlemos2_cor_title {
    color: #f37020; /* Cor laranja */
}

/* Cor laranja aplicada especificamente ao span com a classe "charlemos2_cor" */
#charlemos-slide-2 .charlemos2_cor {
    color: #f37020; /* Cor laranja */
    font-size: 17px;
    font-weight: 500; /* Aumenta o peso da fonte (bold) */
}

#charlemos-slide-2 .icon-large {
    color: #09660e;
    font-size: 22px;
    margin-right: 10px;
}

#charlemos-slide-2 p {
    font-size: 16px;
    color: #484646;
    margin-right: 10px;
    padding-left: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Estilo padrão para parágrafos com a classe "p-normal" */
#charlemos-slide-2 .p-normal {
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Peso regular */
    font-size: 16px;
    color: #fff;
}

/* Estilo para parágrafos com a classe "p-destaque" */
#charlemos-slide-2 .p-destaque {
    font-family: 'Poppins', sans-serif;
    font-weight: 500; /* Peso regular */
    font-size: 17px;
    color: #f37020; /* Cor laranja para destaque */
}

/* Quadro escuro com texto */
#charlemos-slide-2 .cta-box {
    background-color: #001622;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#charlemos-slide-2 .cta-highlight {
    color: #f37020;
    font-size: 20px; /* Letra um pouco maior */
    font-weight: bold;
}

#charlemos-slide-2 .btn-orange {
    font-weight: 500;
    background-color: #f37020;
    color: #fff;
    padding: 10px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 18px;
    display: inline-block;
    margin-top: 12px;
    transition: background-color 0.3s ease;
}

/* Efeito hover no botão */
#charlemos-slide-2 .btn-orange:hover {
    background-color: #00aaff;
}

/* Estilos do SLIDE 1 DELE */
#dele-slide {
    max-width: 1150px;
    margin: 0 auto;
    position: relative;
    padding: 5rem 0;
    background-color: #fff;
}

.dele-bg {
    background-image: url('../img/woman_exame.jpg') !important;
    background-size: 56% !important; /* Controla o tamanho da imagem (menor que contain) */
    background-position: 120% bottom !important; /* Empurra mais para a direita (ajuste percentual) */
    background-repeat: no-repeat !important;
    min-height: 50vh !important; /* Altura mínima ajustada */
}

#dele-slide .dele-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
    padding-right: 60px;
    padding-left: 60px;
}

#dele-slide .highlight {
    text-align: center;
    color: #f0632f;
}

#dele-slide .txt-bold {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Peso regular */
    font-style: italic;
    font-size: 15px;
}

#dele-slide .dele-card {
    padding: 15px 20px 0px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
}

#dele-slide .dele-card3 {
    padding: 20px 30px 20px 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
}

#dele-slide .card-orange {
    background-color: #f0632f;
}

#dele-slide .card-gray {
    background-color: #e2e9ec;
    color: #484646;
}

#dele-slide .p-abre {
    font-family: 'Poppins', sans-serif;
    font-weight: 500; /* Peso regular */
    font-size: 17px;
}

#dele-slide .p-normal {
    font-family: 'Poppins', sans-serif;
    font-weight: 500; /* Peso regular */
    text-align: center;
    font-size: 15px;
    color: #484646;
}

#dele-slide .p-destaque {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Peso regular */
    text-align: center;
    font-size: 18px;
    color: #f0632f; /* Cor laranja para destaque */
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
}

#dele-slide .p-menor {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Peso regular */
    text-align: center;
    font-size: 12px;
    color: #000;
}

/* Estilo da imagem 'ilustra_dele_bar.svg' */
.dele-ilustra-bar {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px; /* Adicione espaçamento conforme necessário */
}

/* Estilo para a tabela */
.dele-niveis {
    width: 100%;
    border-collapse: collapse;
}

.dele-niveis td {
    padding: 7px 7px 5px 7px;
    vertical-align: top;
}

.nivel {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: #f0632f;
}

.texto-nivel {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #484646;
    text-align: left;
    line-height: 1rem;
}

/* Flexbox para manter imagem e card lado a lado */
#dele-slide .dele-flexbox {
    display: flex;
    align-items: center; /* Alinha verticalmente o card e a imagem */
    justify-content: flex-start; /* Mantém os itens à esquerda */
}

/* Estilo da imagem 'ilustra_dele_bar.svg' para remover padding-right (específico para o slide DELE) */
#dele-slide .col-lg-2 {
    padding-right: 0px !important;
}

/* Estilo do card cinza para remover padding-left (específico para o slide DELE) */
#dele-slide .col-lg-10 {
    padding-left: 0px !important;
}

/* Destaques das cores nos níveis */
.a1 { color: #E74C3C; } /* A1 */
.a2 { color: #E67E22; } /* A2 */
.b2 { color: #27AE60; } /* B2 */

/* Estilos do SLIDE 2 DELE */
#dele-slide-2 {
    max-width: 1150px;
    margin: 0 auto;
    position: relative;
    padding: 5rem 0;
    background-color: #fff;
}

.dele-bg-2 {
    background-image: url('../img/woman_exame.jpg') !important;
    background-size: 56% !important; /* Controla o tamanho da imagem (menor que contain) */
    background-position: 120% bottom !important; /* Empurra mais para a direita (ajuste percentual) */
    background-repeat: no-repeat !important;
    min-height: 50vh !important; /* Altura mínima ajustada */
}

#dele-slide-2 .dele-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
    padding-right: 60px;
    padding-left: 60px;
}

#dele-slide-2 .highlight {
    text-align: center;
    color: #f0632f;
}

#dele-slide-2 .dele-card {
    padding: 20px 20px 5px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: #fff;
    text-align: center;
}

#dele-slide-2 .card-orange {
    background-color: #f0632f;
}

#dele-slide-2 .card-gray {
    background-color: #e2e9ec;
    color: #484646;
}

/* Quadro escuro com texto */
#dele-slide-2 .cta-box {
    background-color: #001622;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

#dele-slide-2 .cta-highlight {
    color: #f0632f;
    font-size: 20px; /* Letra um pouco maior */
    font-weight: bold;
}

#dele-slide-2 .btn-orange {
    font-weight: 500;
    background-color: #f0632f;
    color: #fff;
    padding: 10px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 18px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

/* Efeito hover no botão */
#dele-slide-2 .btn-orange:hover {
    background-color: #00aaff;
}

#dele-slide-2 .p-normal {
    font-family: 'Poppins', sans-serif;
    font-weight: 500; /* Peso regular */
    font-size: 17px;
    color: #fff;
}

#dele-slide-2 .p-destaque {
    font-family: 'Poppins', sans-serif;
    font-weight: 500; /* Peso regular */
    font-size: 17px;
    color: #f4ac10;
}

#dele-slide-2 .p-cinza {
    font-family: 'Poppins', sans-serif;
    font-weight: 500; /* Peso regular */
    font-size: 16px;
    padding: 0 20px 0 20px;
}

/* Estilos do SLIDE 1 E20 */
#e20-slide {
    max-width: 1150px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
}

.e20-bg {
    background-image: url('../img/e20_student.jpg') !important;
    background-size: 65% !important; /* Controla o tamanho da imagem para caber corretamente */
    background-position: right bottom !important; /* Alinha a imagem à direita */
    background-repeat: no-repeat !important;
    min-height: 50vh !important; /* Altura mínima ajustada */
}

/* Título da seção */
#e20-slide .e20-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #000;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 25px; 
}

/* Destaque do título */
#e20-slide .highlight {
    color: #f0632f;
}

/* Estilização dos cards */
#e20-slide .card-blue {
    background-color: rgba(144, 221, 236, 0.5); /* Fundo azul com transparência */
    padding: 20px 20px 5px 20px;
    border-radius: 5px;
    width: 90%; /* Aumentar a largura do card azul */
}

#e20-slide .card-gray {
    background-color: #e2e9ec; /* Fundo cinza */
    padding: 20px 20px 5px 20px;
    border-radius: 5px;
    color: #484646;
    margin-top: 15px;
    margin-bottom: 0px;
    width: 70%; /* Diminuir a largura dos cards cinza */
}
/* Texto dos cards */
#e20-slide .p-abre {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Peso regular */
    font-size: 15px;
    color: #000;    
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
}
/* Texto dos cards */
#e20-slide .p-cinza {
    font-family: 'Poppins', sans-serif;
    font-weight: 500; /* Peso regular */
    font-size: 14px;
    line-height: 1.2rem;
    color: #6c757d;
    padding-left: 10px;
    padding-right: 15px;
}

/* Margem coluna */
#e20-slide .margem {
    margin-bottom: 20px;
}

.footer-image {
    display: none; /* Esconde a imagem de rodapé em telas maiores */
}

#e20-slide .mt-3, .my-3 {
    margin-top: 1rem !important;
}

/* Estilos do SLIDE 2 E20 */
#e20-slide-2 {
    max-width: 1150px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
}

.e20-bg-2 {
    background-image: url('../img/e20_student.jpg') !important;
    background-size: 65% !important; /* Controla o tamanho da imagem para caber corretamente */
    background-position: right bottom !important; /* Alinha a imagem à direita */
    background-repeat: no-repeat !important;
    min-height: 50vh !important; /* Altura mínima ajustada */
}

/* Título da seção */
#e20-slide-2 .e20-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #000;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 25px; 
}

/* Destaque do título */
#e20-slide-2 .highlight {
    color: #f0632f;
}

#e20-slide-2 .e20-list li {
    font-size: 16px;
}

#e20-slide-2 .cta-box {
    background-color: #001622;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    margin-right: 20px;
    text-align: center;
}

#e20-slide-2 .btn-orange {
    font-weight: 500;
    background-color: #f37020;
    color: #fff;
    padding: 10px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 18px;
    display: inline-block;
    margin-top: 12px;
    transition: background-color 0.3s ease;
}

#e20-slide-2 .icon-large {
    color: #09660e;
    font-size: 22px;
    margin-right: 10px;
}

#e20-slide-2 p {
    font-size: 16px;
    font-weight: 400;
    color: #6c757d;
    margin-right: 80px;
    padding-left: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    letter-spacing: 0px;
}

#e20-slide-2 .p-normal {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #fff;
    margin-right: 20px;
}

#e20-slide-2 .p-destaque {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: #ff921e;
    margin-right: 20px;
}

/* Efeito hover no botão */
#e20-slide-2 .btn-orange:hover {
    background-color: #00aaff;
}

#e20-slide-2 .e20_2_cor {
    color: #ff921e;
    font-size: 17px;
    font-weight: 500;
}

#e20-slide-2 .margem {
    padding-right: 100px;
    margin-right: 100px;
}

/* Estilo específico para a seção de slides E20, CHARLEMOS e DELE */
/* Estilo específico para a seção de navegação dos slides */
#slide-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaçamento entre os botões */
    margin-top: 20px;
}

/* Estilo específico para os botões de navegação */
#slide-navigation .btn-slide-nav {
    background-color: transparent;
    border: 2px solid #007bff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #007bff;
    transition: all 0.3s ease;
    font-size: 20px;
}

/* Hover para os botões de navegação */
#slide-navigation .btn-slide-nav:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #0056b3;
}

/* Ícone para o botão esquerdo (Left) */
#slide-navigation #prev-slide::before {
    content: "\f104"; /* Unicode do ícone de seta para a esquerda (Font Awesome) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Ícone para o botão direito (Right) */
#slide-navigation #next-slide::before {
    content: "\f105"; /* Unicode do ícone de seta para a direita (Font Awesome) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Estilo para o botão "Voltar para os Cursos" (com ícone de Home) */
#slide-navigation #btn-voltar {
    background-color: transparent;
    border: 2px solid #6c757d;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6c757d;
    transition: all 0.3s ease;
}

#slide-navigation #btn-voltar::before {
    content: "\f015"; /* Unicode do ícone de casa (home) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* Hover para o botão "Voltar para os Cursos" */
#slide-navigation #btn-voltar:hover {
    background-color: #6c757d;
    color: #fff;
    border-color: #5a6268;
}

/* INICIO da secao Depoimentos/Review/CARROSSEL */

/* Estilos gerais para a área de review */
.review-area {
    padding: 2.5rem 0 2.5rem !important;
    background-color: #001622;
}

.review-area .section-title {
    margin-bottom: 3rem;
}

.review-area h2.text-warning {
    color: #fff !important;
}

.review-area p.subtitle {
    font-size: 1.1rem;
    color: #f8f9fa;
    line-height: 1.6;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 2rem;
}

/* Estilo dos depoimentos individuais */
.single-review h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #f8f9fa;
    margin-bottom: 0.5rem;
}

.single-review h5.mb-1 {
    color: #f7631b !important;
}

.single-review p.mb-2 {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #f1f1f1 !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

.single-review p.text-light {
    font-size: 1rem;
    line-height: 1.7;
    color: #f1f1f1;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Estilos para telas maiores */
.carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaçamento entre os ícones */
    margin-top: 20px;
}

/* Ícones de navegação para telas maiores */
.custom-prev,
.custom-next {
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.custom-prev:hover,
.custom-next:hover {
    background-color: #ccc;
    color: #fff;
    border-color: #ccc;
}

.custom-prev {
    left: 0;
}

.custom-next {
    right: 0;
}

/* Ícones para telas menores - escondido por padrão */
.carousel-nav-small {
    display: none; 
}

/* Ícones de navegação para telas menores */
.custom-prev-small,
.custom-next-small {
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    transition: all 0.3s ease;
    margin-top: 10px;
    position: relative;
}

.custom-prev-small:hover,
.custom-next-small:hover {
    background-color: #ccc;
    color: #fff;
    border-color: #ccc;
}

.carousel-nav-small {
    display: none; /* Esconde por padrão em telas maiores */
}

/* Estilos dos Dots */
.owl-theme .owl-dots {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: rgba(127, 127, 127, 0.5); /* Cor inativa */
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.owl-theme .owl-dots .owl-dot.active {
    background-color: #f7631b; /* Cor ativa (laranja) */
    transform: scale(1.2); /* Aumenta o tamanho do dot ativo */
}

.owl-theme .owl-dots .owl-dot:hover {
    background-color: #f7631b; /* Cor ao passar o mouse */
    transform: scale(1.1); /* Leve aumento ao passar o mouse */
}

/* Estilos para telas maiores */
.carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espaçamento entre os ícones */
    margin-top: 20px;
}

/* Remover as palavras "prev" e "next" */
.owl-nav [class*='owl-'] {
    display: none !important; /* Esconde os botões padrão do Owl Carousel que causam o texto "prev" e "next" */
}
/* FIM da secao Depoimentos/Review/CARROSSEL */

/* Secao Popular-course Area */
.title-course {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Peso da fonte */
    font-size: 30px;
    color: #f7631b;
    text-align: center;
    padding-top: 150px;
}

/* Estilos QUADRINHOS */
.quadrinho {
    padding: 20px;
    margin: 0;
    border-radius: 0; /* Remove bordas arredondadas para facilitar o alinhamento */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 90%;
}

.p-3 { 
    padding: 3rem !important; /* Margem da borda nos quadrinhos */
}

p.section-services {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #fff;
}

p.section-services-black {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #777;
}

.popular-course-area, 
.services {
    padding: 0;
}

.popular-course-area .container,
.services .container {
    max-width: 100%;
    padding: 0;
}

.bg-gray {
    background-color: rgba(255, 255, 255, 0.95) !important; /* Branco com 90% de opacidade */
}

.bg-cyan {
    background-color: #0bbde1;
}

.bg-orange {
    background-color: #f7631b;
}

.number {
    font-size: 2.3rem;
    font-weight: bold;
    color: #f7631b;
    padding-bottom: 5px;
}

.number01 {
    font-size: 2.3rem;
    font-weight: bold;
    color: #fff;
}

.subtitle {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.subtitle-white {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #fff;
}

.text-orange {
    color: #ffa500;
}

.text-white {
    color: #fff;
}

.text-dark {
    color: #333;
}

.mt-auto {
    margin-top: auto;
}

.mb-3 {
    margin-bottom: 1rem;
}

/* TESTE */
.section-title {
    text-align: center;
    margin-bottom: 0px;
}
  
.section-title h2 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #000;
}

.section-title h2::before {
    content: "";
    position: absolute;
    display: block;
    width: 120px;
    height: 1px;
    background: #ddd;
    bottom: 1px;
    left: calc(50% - 60px);
}

.section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: #47b2e4;
    bottom: 0;
    left: calc(50% - 20px);
}

/* Estilos para FAQ */

.faq .container {
    max-width: 900px; /* Ajuste a largura da div container */
    margin: 0 auto; /* Centraliza a div container */
}

.faq .card {
    border: none;
    margin-bottom: 1rem;
    background-color: white; /* Fundo branco para a pergunta */
    padding: 10px;
}

.faq .card-header {
    background-color: white; /* Fundo branco no cabeçalho também */
    border-bottom: none;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq .btn-link {
    text-decoration: none;
    color: #003366; /* Azul escuro para a pergunta */
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    text-align: left;
    padding: 0;
    display: flex; /* Alinha o ícone e o texto na horizontal */
    align-items: center; /* Alinha verticalmente ícone e texto */
    justify-content: flex-start; /* Alinha o texto à esquerda */
}

.faq .btn-link i.faq-icon {
    font-size: 1.6rem; /* Ajuste o tamanho conforme necessário */
    color: #eaa10f; /* Azul claro para o ícone de interrogação */
    margin-right: 10px;
}

.faq .btn-link i.faq-chevron {
    transition: transform 0.3s ease;
    margin-left: auto; /* Mantém o ícone de seta à direita */
}

.faq .btn-link.collapsed i.faq-chevron {
    transform: rotate(0);
    color: #dc7516; /* Azul escuro para a seta */
}

.faq .btn-link:not(.collapsed) i.faq-chevron {
    transform: rotate(180deg);
    color: #47b2e4; /* Azul claro para a seta aberta */
}

.faq .btn-link:not(.collapsed) {
    color: #47b2e4; /* Azul claro para a pergunta ao abrir */
}

.faq .btn-link:not(.collapsed) i.faq-icon {
    color: #47b2e4; /* Azul claro para o ícone interrogação ao abrir */
}

.faq .card-body {
    font-family: "Poppins",sans-serif;
    padding: 0 3rem 1rem 1.5rem;
    background-color: white; /* Resposta com fundo branco */
    color: #333;
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.6rem;
}

.faq .collapse.show {
    background-color: white;
}

.section-bg {
    background: #e7ebed;
    padding-bottom: 30px;
}

.faq .section-title h2 {
    padding-top: 30px;
}

.faq .section-title p {
    font-size: 1rem;
    padding-bottom: 30px;
    color: #6c757d;
}

/* Eliminar o efeito de movimento e sombra nos cards da seção FAQ */
.faq .card {
    box-shadow: none !important;    /* Remove qualquer sombra */
    transform: none !important;     /* Remove qualquer transformação */
    transition: none !important;    /* Remove transições */
}

.faq .card:hover,
.faq .card:focus {
    box-shadow: none !important;    /* Remove sombra ao passar o mouse */
    transform: none !important;     /* Remove movimento ao passar o mouse */
}

/* Estilos para a página de confirmação SUCESS.HTML */
#confirmation-section {
    background-color: #f5f5f5;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wrapper {
    height: 11vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}

.confirmation-content {
    text-align: center;
    max-width: 800px;
}

/* Ajustes para manter o título em uma linha */
.confirmation-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em; /* Diminui o tamanho da fonte para manter em uma linha */
    color: #000;
    margin-bottom: 20px;
}

.highlight {
    color: #7ac142;
    font-weight: 600;
}

.confirmation-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #58595b;
}
/* Estilos para o botão de retorno ao site */
.return-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #7ac142;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
}

.return-btn:hover {
    background-color: #5d9c34;
}
/* FIM dos Estilos para a página de confirmação SUCESS.HTML */

/* Estilos para FOOTER */
.footer-area {
    background-color: #001622 !important;
    padding: 60px 0;
    color: #ffffff;
}

/* Contato: Logo, Cel. e Email */
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha tudo à esquerda */
}

.footer-logo img {
    margin-bottom: 10px; /* Espaço entre o logo e o texto */
    max-width: 170px;
    width: 100%;
    height: auto;
}

.footer-logo .nav-link {
    padding: 0; /* Remove o padding do .nav-link */
}

.footer-contact p {
    color: #ffffff;
    margin-bottom: 3px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.footer-contact p strong {
    margin-right: 5px; /* Espaço entre 'Cel.'/'Email' e o número/endereço */
}

.footer-contact a {
    color: #ffffff;
    text-decoration: none;
}

.footer-contact a:hover {
    color: #f7631b; /* Cor laranja ao passar o mouse */
}

/* Links do Site !important; */
.footer-area h4 {
    color: #9b9d9d;
    margin-bottom: 20px;
}

.footer-area ul {
    padding-left: 0;
    list-style: none;
}

.footer-area ul li {
    margin-bottom: 10px;
}

.footer-area ul li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-area ul li a:hover {
    color: #f7631b; /* Cor laranja ao passar o mouse */
}

/* Redes Sociais */
.footer-social {
    display: flex;
    align-items: center; /* Alinha os ícones das redes sociais à esquerda */
}

.footer-social a {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    margin-right: 15px;
    margin-top: 10px;
    transition: background-color 0.3s;
    font-size: 1.2rem; /* Tamanho do ícone */
}

.footer-social a:hover {
    background-color: #f7631b; /* Cor laranja ao passar o mouse */
    color: #ffffff;
}

/* Logos dos Cursos */
.footer-logos {
    display: flex;
    align-items: left; /* Alinha os logos à esquerda */
    margin-top: 10px;
}

.footer-logos img {
    margin-right: 30px; 
    padding-top: 10px;
    max-width: 100px;
    width: 100%;
    height: auto;
}

.footer-logos img[src="https://www.perfectoespanhol.com.br/img/logo_charlemos_footer.svg"] {
    max-width: 120px; /* Aumenta o tamanho do logo 'Charlemos' */
    width: 100%;
}


/* Texto Inferior do Footer (Selo e Frases) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-bottom .col-md-6 {
    padding: 0;
}

.footer-bottom .text-left {
    text-align: left;
}

.footer-bottom .text-right {
    text-align: right;
}

.footer-text {
    color: #ffffff;
    margin: 0;
    font-size: 12px;
}

.footer-separator {
    color: #ffffff;
    margin: 0 10px;
    font-size: 12px;
    display: inline-block;
}

.link-laranja {
    color: #f7631b; /* Cor laranja para o link do e-mail */
}

.link-laranja:hover {
    color: #ffffff; /* Cor branca ao passar o mouse */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilo para telas maiores (desktops e laptops) */
@media (min-width: 992px) {
    .banner-content h1.custom-titabre {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700; /* Peso da fonte */
        font-size: 5vh;
        color: #000; /* Cor preta */
        letter-spacing: 0px;
        line-height: 0.5;
        background-color: rgba(255, 255, 255, 0.5); /* Fundo semitransparente */
        border-radius: 10px; /* Bordas arredondadas */
        padding: 20px 20px 20px 35px;
        margin-right: 80px;
        margin-top: 50px;
        display: inline-block;
    }

    /* Remove a sobreposição escura da foto principal em telas maiores */
    .banner-area .overlay-bg {
        background-color: rgba(0, 0, 0, 0); /* Torna a sobreposição completamente transparente */
    }

    /* Configuração do Header para telas maiores */
    .main-menu {
        width: 1000px;
        margin: 0 auto; /* Centraliza o header */
        background-color: transparent; /* Fundo transparente */
        position: relative;
        z-index: 10; /* Mantém o header acima de outros elementos */
    }

    #logo {
        display: flex;
        align-items: center;
        white-space: nowrap;
        background-color: transparent; /* Remove qualquer fundo */
    }

    .small-logo-img {
        max-width: 30px; /* Define a largura máxima do logo */
        height: auto; /* Mantém a proporção do logo */
        display: inline-block; /* Garante que o logo e o texto fiquem na mesma linha */
    }

    .small-company-name {
        font-size: 18px; /* Tamanho pequeno para o nome da empresa */
        font-family: 'Montserrat', sans-serif; /* Fonte personalizada */
        color: #000; /* Cor do texto */
        margin-left: 20px; /* Espaçamento entre o logo e o nome da empresa */
        font-weight: 600; /* Peso da fonte */
        white-space: nowrap; /* Evita quebra de linha */
    }

}

/* Estilo para telas menores (tablets e smartphones) */
@media (max-width: 991.98px) {
    #header #logo {
        display: none !important; /* Garante que o logo e o nome da empresa sejam ocultados */
    }
    
    /* Ajuste do ícone do menu (hamburger) para ficar abaixo do logo */
    .navbar-toggler {
        display: block;
        width: 100%; /* Define a largura completa para o ícone do menu */
        height: 50px;
        text-align: center;
        margin: 10px auto 0 auto; /* Centraliza o botão e remove a margem inferior */
        background-color: rgba(56, 164, 255, 0.9); /* Fundo azul transparente */
        border: none;
        border-radius: 0; /* Remove as bordas arredondadas para alinhar com os links */
        outline: none; /* Remove o contorno padrão ao focar */
    }

    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none; /* Remove o contorno de foco/ativo */
        box-shadow: none; /* Remove qualquer sombra que possa ser aplicada ao focar/ativar */
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat;
        background-position: center;
        width: 24px;
        height: 24px;
    }

    /* Centraliza e ajusta o menu colapsado */
    .navbar-collapse {
        display: none; /* Oculta o menu por padrão */
        flex-direction: column;
        justify-content: center;
        margin-top: 0px;
    }

    /* Menu colapsado (visível após clicar no botão) */
    .navbar-collapse.show {
        display: flex;
    }

    .navbar-nav {
        background-color: rgba(0, 0, 0, 0.8); /* Fundo preto transparente para o bloco do menu */
        padding: 10px 0;
        border-radius: 0; /* Remove a borda arredondada para alinhar com o ícone */
        width: 100%; /* Faz o menu ocupar toda a largura */
    }

    .navbar-nav .nav-link {
        color: #fff !important; /* Texto branco */
        padding: 10px 15px;
        text-align: center;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .navbar-nav .nav-link:hover {
        background-color: #ffa500; /* Fundo laranja ao passar o mouse */
        color: #fff !important; /* Garante que o texto fique branco */
    }

    .h1_custom {
        text-align: center;
        margin-right: 30px;
    }

    .h4_subtitulo {
        font-size: 15px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600; /* Peso da fonte */
        letter-spacing: 0.5px;
        text-align: center;
        margin-left: 30px;
        margin-right: 30px;
        color: #6c757d;
        padding-bottom: 50px;
    }

    /* Mantém a sobreposição escura original na foto principal em telas menores */
    .banner-area .overlay-bg {
        background-color: rgba(0, 0, 0, 0.7); /* Aplica a sobreposição escura original */
    }

    /* Estilos específicos para a ilustração na seção Smart */
    .smart-illustration {
        max-width: 80%;
        padding-right: 30px;
    }

    .cta h3, .cta p {
        text-align: center; /* Centraliza o título e o texto */
        padding: 0px 30px;
        margin-bottom: 25px; /* Espaço adicional entre o texto e o botão */
    }

    .h2_subtitulo {
        font-size: 18px;
        color: #fff !important; /* Texto branco */
        letter-spacing: 0.2px;
        margin-right: 10px;
        margin-left: 10px;
        padding: 15px;
    }

    /* Secao Popular-course Area */
    .title-course {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800; /* Peso da fonte */
        font-size: 30px;
        color: #f7631b;
        text-align: center;
        padding-top: 0px;
        padding-bottom: 20px;
    }

    .video-thumbnail {
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 25px;
        text-align: center;
        overflow: visible; /* Garante que o ícone não seja cortado */
    }

    /* Estilo para a área do banner */
    .banner-area {
        background-image: url('../img/banner2.jpeg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% center; /* Posiciona a imagem ainda mais à esquerda */
        height: 100vh;
        width: 100%;
        position: relative;
        overflow: hidden;
        animation: moveBackground 25s linear forwards; /* Animação para mover o background */
    }

    .background-image {
        display: none; /* Oculta a imagem em telas menores */
    }
    
    .background-gradient {
        background-image: url('../img/degrade_img.jpeg') !important;
        background-size: 100% auto !important; /* Largura de 100%, altura proporcional */
        background-position: top center !important; /* Alinha ao topo e centro horizontalmente */
        background-repeat: no-repeat !important;
    }
    .footer-text {
        white-space: normal; /* Permite quebra de linha */
        
    }
    
    #cursos .card-body {
        display: flex;
        flex-direction: column;
        align-items: center; /* centraliza os itens horizontalmente */
    }
    
    /* Animação para mover o background da direita para a esquerda */
    @keyframes moveBackground {
        0% {
            background-position: 70% 50%; /* Posição inicial na direita */
        }
        100% {
            background-position: 60% 50%; /* Posição final na esquerda */
        }
    }

}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .single-feature {
        margin-bottom: 10px;
    }

    .single-feature .title {
        background: rgba(0,0,0,1);
    }

    .single-feature .desc-wrap {
        background-color: #ebeded;
    }

    .btn-banner {
        margin-top: 10px;
    }

    .banner-content h1.custom-titabre {
        font-family: 'Montserrat', sans-serif;
        font-size: 3vh;
        color: #fff; /* Mantém o padrão branco */
        text-align: center;
        letter-spacing: 0.3px;
        line-height: 1.4;
        padding: 16.7rem 0px 0px 0px;
        border-radius: 5px;
        display: block;
    }

    .h1_custom {
        margin-right: 0px;
        padding-bottom: 10px;
        padding-top: 20px;
        color: #0bbde1;
    }

    .h4_subtitulo {
        font-size: 17px;
        padding-bottom: 20px;
    }
    
    .title-course {
        font-size: 23px;
        padding-bottom: 20px;
    }

    .section-title h2 {
        font-size: 1.7rem;
    }

    .btn-watch-video {
        font-size: 14px;
        padding: 10px 20px;
    }

    .btn-watch-video i {
        font-size: 20px;
    }

    p.section-services { /* Peso da fonte no quadrinho azul */
        font-weight: 500;
    }
    
    p.section-services-black { /* Peso da fonte no quadrinho branco */
        font-weight: 500;
    }

    /* Estilos específicos para a ilustração na seção Smart */
    .smart-illustration {
        max-width: 90%;
        padding-right: 20px;
    }

    .cta p {
        margin-bottom: 25px; /* Espaço adicional entre o texto e o botão */
    }

    #e20-slide-2 .e20-title {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Estilização para esconder nos CARDS as imagens de CURSOS nas telas menores */
    .curso-e20-img,
    .curso-charlemos-img,
    .curso-dele-img {
        display: none;
    }
    #cursos .card-body {
        padding: 3rem 1.25rem 3rem 1.25rem;        
    }

    /* Estilo para o slide CHARLEMOS */
    #charlemos-slide {
        padding: 3rem 0;
    }    
    .charlemos-bg {
        background-size: 130% !important; /* Aumenta a imagem para caber abaixo */
        background-position: center bottom !important; /* Centraliza a imagem */
        min-height: 70vh !important; /* Diminui a altura mínima */
    }
    .charlemos-bg-2 {
        background: none !important;
    }    
    /* Os quadrinhos ocupam toda a largura em telas pequenas */
    #charlemos-slide .charlemos-card {
        width: 100%;
    }
    #charlemos-slide .charlemos-card3 {
        margin-bottom: 350px;
    }
    /* Coloca a imagem de fundo abaixo dos quadrinhos */
    .charlemos-bg {
        order: 1; /* Coloca a imagem abaixo no fluxo do layout */
    }

    #home .row {
        display: flex;
        flex-direction: column;
    }

    #charlemos-slide .charlemos-title { /* Título slide1 */
        padding-right: 10px;
        padding-left: 10px;
    }   
    #charlemos-slide-2 .charlemos-title-2 { /* Título slide2 */
        padding-right: 10px;
        padding-left: 10px;
    }

    /* Estilo para o SLIDE 2 - Charlemos */
    #charlemos-slide-2 .charlemos-list li {
        font-size: 16px;
    }

    #charlemos-slide-2 .cta-box {
        padding: 20px 15px 15px 15px;
    }

    #charlemos-slide-2 .btn-orange {
        font-size: 18px;
        margin-bottom: 5px;
    }

    /* Estilo para o SLIDE 1 - DELE */
    #dele-slide .dele-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 26px;
        margin-bottom: 15px;
        padding-right: 20px;
        padding-left: 20px;
      }
    #dele-slide .dele-flexbox {
        flex-direction: row; /* Mantém a imagem ao lado do card em telas pequenas */
    }

    #dele-slide .dele-ilustra-container {
        flex: 0 0 auto; /* Impede que a imagem se expanda */
        padding-right: 0px; /* Remover padding da direita para colar no card */
    }

    #dele-slide .dele-card-container {
        flex: 1; /* Permite que o card cinza ocupe o restante do espaço */
        padding-left: 0px; /* Remover padding da esquerda para colar na imagem */
    }

    /* Ajustes de tamanho da imagem e do card para telas menores */
    #dele-slide .dele-ilustra-bar {
        max-width: 100%; /* Diminui a imagem em telas pequenas */
        height: auto;
    }

    .dele-bg {
        background: none !important;
    }
    #dele-slide .p-abre {
        font-size: 14px;
    }

    /* Estilo para o SLIDE 1 - DELE */
    .dele-bg-2 {
        background-size: 100% !important; /* Aumenta a imagem para caber abaixo */
        background-position: center bottom !important; /* Centraliza a imagem */
        min-height: 70vh !important; /* Diminui a altura mínima */
    }
    #dele-slide-2 .dele-title {
        font-size: 26px;
        padding-right: 10px;
        padding-left: 10px;
        margin-bottom: 15px;
    }
    #dele-slide-2 .p-cinza {
        font-size: 13px;
        padding: 0 10px 0 10px;
        line-height: 1.2rem;
    }
    #dele-slide-2 .p-normal {
        font-size: 13px;
    }
    #dele-slide-2 .p-destaque {
        font-size: 14px;
    }
    #dele-slide-2 .cta-box {
        margin-bottom: 420px;
    }

    /* E20 - Slide 1 */
    #e20-slide {
        padding: 0;
        position: relative; /* Mantém a imagem posicionada corretamente */
    }

    #e20-slide .card-blue {
        width: 100%; /* Aumentar a largura do card azul */
    }

    #e20-slide .card-gray {
        text-align: center;
        width: 100%; /* Aumentar a largura dos cards cinza */
    }
    
    /* Texto dos cards */
    #e20-slide .p-abre { 
        padding-left: 20px;
        padding-right: 20px;
    }

    #e20-slide .margem {
        margin-bottom: 20px; /* Reduz a margem inferior para evitar excesso de espaço */
    }

    /* Ajuste na imagem de fundo */
    .e20-bg {
        background: none !important; /* Remove a imagem de fundo */
        min-height: auto !important; /* Ajusta a altura mínima */
    }

    /* Estilo para a imagem de rodapé */
    .footer-image {
        display: block;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .footer-image img {
        width: 100%;
        max-width: 400px; /* Controle o tamanho da imagem */
        height: auto;
    }

    /* E20 - Slide 2 */
    #e20-slide-2 p {
        margin-right: 20px;
    }
    
    #e20-slide-2 .margem {
        padding-right: 0px;
        margin-right: 0px;
    }

    .e20-bg-2 {
        background: none !important; /* Remove a imagem de fundo */
        min-height: auto !important; /* Ajusta a altura mínima */
    }

    #e20-slide-2 .footer-image {
        display: block;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #e20-slide-2 .footer-image img {
        width: 120%;
        max-width: 400px; /* Controle o tamanho da imagem */
        height: auto;
    }

    #e20-slide-2 .cta-box {
        padding: 20px;
        margin-right: 0px;
    }

    /* Estilos para a secao DEPOIMENTOS */
    /* Centralizar os ícones e dots em telas menores */
    /* Esconder os ícones de navegação para telas maiores */
    .carousel-nav {
        display: none;
    }

    /* Mostrar e centralizar os novos ícones para telas menores */
    .carousel-nav-small {
        display: flex;
        justify-content: center; /* Centraliza os ícones horizontalmente */
        align-items: center;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ajuste nos ícones menores */
    .custom-prev-small,
    .custom-next-small {
        background-color: transparent;
        border: 2px solid #ccc;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ccc;
        transition: all 0.3s ease;
        position: relative;
        margin: 0 10px; /* Adiciona margem horizontal para evitar que fiquem colados na borda */
    }

    .custom-prev-small:hover,
    .custom-next-small:hover {
        background-color: #ccc;
        color: #fff;
        border-color: #ccc;
    }

    /* Ajustar os dots */
    .owl-dots {
        text-align: center;
        margin-top: 10px;
    }
    .mb-2, .my-2 {
        margin-bottom: 1.5rem !important;
    }
    /* FIM da secao DEPOIMENTOS */

    #dele-slide-2 .btn-orange {
        margin-top: 5px;
    }

    /* Estilo para o FORM */
    .contact-form {
        padding: 30px;
        margin: 0px 0px 30px;
    }

    /* Estilo para as perguntas do FAQ - quebra de linha */
    .btn {
        white-space: normal;
    }
    .faq .section-title p {
        padding-left: 30px;
        padding-right: 30px;
    }

    .software-chat-content {
        padding-top: 0px !important; 
        width: 100%; /* O quadro preto ocupa toda a largura em telas menores */
    }

    .notebook-image {
        width: 100%; /* Ajusta a imagem para ocupar 100% da largura da coluna */
        max-width: 400px; /* Limita a largura da imagem */
    }

    .software-text-bg {
        margin-top: 10px;
        padding: 15px;
        line-height: 1.4em !important;
    }

    /* Estilos telas menores FOOTER */
    .footer-bottom {
        flex-direction: column;
        align-items: center;
    }
    .text-right, .text-left {
        text-align: center;
    }
    .footer-contact, .footer-social, .footer-logos {
        align-items: center; /* Centraliza no mobile */
    }
    .footer-contact, .body {
        text-align: center;
    }
    .footer-text {
        white-space: pre-wrap; /* Permite quebra de linha */
        text-align: center; /* Centraliza o texto */
        margin-bottom: 10px; /* Espaço adicional entre o texto e outros elementos */
        font-size: 12px;
    }
    .text-right {
        text-align: center !important;
        padding-top: 10px;
    }
    .footer-logos img {
        margin-right: 10px;
        padding: 5px;
    }
    .footer-logos img[src="img/logo_charlemos_footer.svg"] {
        max-width: 120px;
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
    }
    .text-right, .text-left {
        text-align: center;
    }
}