* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;

}
/* Import opcional via @import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/catherine');
@font-face {
    font-family: 'Cathine';
    src: url('fonts/Cathine.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
h1, h2, p {
    font-family: 'Cathine', sans-serif;
}
/* Exemplos de uso */
body{
    background-color: #f9f9f9;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
}

/* Header */
.logo {
    position: absolute;
    left: 60px;
    top: 200%;
    transform: translateY(-50%);
    opacity: 0; /* Inicialmente invisível */
    animation: slideIn 4s ease-out forwards; /* Aplica a animação */
}

.logo img {
    width: 250px; /* Tamanho fixo, ajuste conforme necessário */
    height: auto;
}

/* Definição da animação */
@keyframes slideIn {
    0% {
        transform: translateY(100%); /* Começa de baixo */
        opacity: 0; /* Começa invisível */
    }
    100% {
        transform: translateY(-50%); /* Fica na posição final */
        opacity: 1; /* Fica totalmente visível */
    }
}


header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    width: 100%;
    z-index: 1000;
}

/* Centralizar os itens do menu */
nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 30px; /* gap entre os links */
}

/* Lista de navegação */
nav ul {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilo base dos links */
nav ul li a {
    text-decoration: none;
    font-weight: bold;
    color: #262626;
    padding: 8px 12px;
    transition: color 0.3s ease;
}

/* "Página Inicial" ou primeiro link com destaque */
nav ul li:first-child a {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    color: #f5c374;
}

/* Hover para todos os links */
nav ul li a:hover {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    color: #f5c374;
}

/* Estilização especial para o botão */
nav ul li .btn {
    background-color: #151515;
    color: #fff;
    border-radius: 5px;
    padding: 8px 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}



/* Hero Section com Background */
.hero {
    width: 100%;
    height: 115vh; /* Altura total da tela */
    background-image: url('Design\ sem\ nome\ \(12\).png');
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar a imagem */
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0 50px;
    position: relative;
}

/* Overlay escuro para melhor legibilidade do texto */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.025); /* Camada suave escura sobre o fundo */
}

/* Conteúdo do hero */
.hero-content {
    max-width: 550px;
    text-align: left;
    margin-left: 0%;
    margin-bottom: 0%;
    color: white;
    position: relative;
    z-index: 1; /* Garante que fique acima do overlay */
}

/* Título principal */
.hero h2 {
    margin-left: 10%;
    font-size: 28px;
    margin-bottom: 12px;
    color: rgb(58, 57, 57);
    font-weight: 500;
    line-height: 1.4;
    font-family: 'Cabin', sans-serif,cursive;
}

/* Destaque do <span> dentro do h2 */
.hero h2 span {
    display: block;
    font-size: 0px;
    font-weight: 700;
    color: #acaaaa;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.856);
    overflow: hidden;
    white-space: nowrap;
}

/* Adicionando a estilização para garantir que o espaço reservado para o texto não mude */
#typing-text {
    margin-left: 10%;
    font-size: 50px;
    font-weight: 700;
    color: #333333;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.856);
    display: inline-block;
    white-space: nowrap;
    min-height: 120px;       /* Garantindo espaço fixo */
    overflow: hidden;
    width: 100%;             /* Largura total para o contêiner */
    position: relative;      /* Garantindo que o texto fique dentro do contêiner */
    line-height: 1.2;        /* Ajuste para manter o alinhamento correto */
}

/* Cursor de digitação */
#typing-text::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: auto;
    background-color: #8b8b8b;
    animation: blinkCursor 0.8s steps(2, start) infinite;
}

@keyframes blinkCursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Quando a digitação terminar, remove o cursor */
#typing-text.finished::after {
    display: none;
}

/* Parágrafo descritivo */
.hero p {
    margin-left: 10%;
    margin-bottom: 30px;
    line-height: 1.6;
    color: rgb(73, 73, 71);
    font-size: 16px;
    font-weight: 400;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); /* Adicionando sombra ao texto */
}

/* Botão de ação */
.btn {
    margin-left: 10%;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Espaço entre ícone e texto */
    padding: 14px 28px;
    background: linear-gradient(135deg, #a97b31, #dca751);
    color: rgb(253, 252, 252);
    text-decoration: none;
    border-radius: 50px; /* Borda totalmente arredondada */
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.431);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }
  
  .btn:hover { 
    transform: translateY(-2px);
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.421); 
  }
  .btn:active { 
    transform: translateY(0px);
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.0); 
  }
  
  .btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  /* efeitos */
  .hero-content {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 1s ease;
  }
  
  .hero-content.animate {
    opacity: 1;
    transform: translateX(0);
  }
  /* Estilo inicial do botão */
.btn {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 1s ease;
  }
  
  /* Quando animado */
  .btn.animate {
    opacity: 1;
    transform: translateX(0);
  }
  
/* Seção Nossos Serviços */
.nossos-servicos {
    margin-top: 0%;
    padding: 20px 0;
    background-color: #f9f9f9;
    text-align: center;
}

.nossos-servicos .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0px;
    position: relative;
}

.titulo-principal {
    padding-left: 40%;
    font-size: 40px;
    color: #333;
    margin-bottom: 60px;
    font-weight: 600;
}

/* Carrossel de serviços */
.servicos-carrossel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 30px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.servicos-carrossel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
/* efeito do card */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Inicialmente, os cards estão abaixo da posição final */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Os cards se movem para a posição final */
    }
}

/* Estilo para os cards */
.servico-card {
    opacity: 0; /* Inicialmente os cards estão invisíveis */
    animation: slideUp 0.5s ease-out forwards; /* Aplica a animação */
    animation-delay: 0.2s; /* Delay para cada card aparecer em sequência */
}
/* fim do efeito de card */
.servico-card {
    display: flex;
    flex-direction: column; /* Organiza os elementos em coluna */
    justify-content: space-between; /* Faz com que os elementos sejam distribuídos e o botão fique na parte inferior */
    scroll-snap-align: start;
    flex: 0 0 18%;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    text-align: center;
    margin: 0 5px;
    height: 80h;  /* Garante que o card tenha altura suficiente */
}

.servico-card:hover {
    background: white;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2); /* Sombra mais intensa no hover */
}


.servico-imagem {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 25px;
    border: 3px solid #f1f1f1;
}

.servico-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.servico-titulo {
    font-size: 18px;
    color: #222;
    margin-bottom: 20px;
    font-weight: 600;
}

.servico-descricao {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 14px;
}

.saiba-mais {
    display: inline-block;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 3px;
    transition: all 0.3s ease;
    font-size: 14px;
    position: relative;
}

.saiba-mais::after {
    content: '';
    position: absolute;
    bottom: 0;  /* Coloca a linha na parte inferior do botão */
    left: 50%;  /* Posiciona a linha no centro */
    transform: translateX(-50%);  /* Alinha a linha ao centro */
    width: 40%;  /* Define a largura da linha (exemplo: 50% do tamanho do botão) */
    height: 2px;  /* Espessura da linha */
    background-color: #000;  /* Cor da linha */
}

.saiba-mais:hover {
    color: #555;
    border-bottom-color: #555;
}

/* Indicadores do carrossel */
.carrossel-indicadores {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.indicador {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

.indicador.ativo {
    background-color: #000;
}

/* Responsivo */
@media (max-width: 768px) {
    .servico-card {
        flex: 0 0 80%; /* mostra um por vez com margem */
    }
}

@media (max-width: 480px) {
    .servico-card {
        flex: 0 0 90%; /* maior largura nos celulares menores */
    }
}

/* Seção Sobre Mim */
.sobre-mim {
    padding: 10px 0;
    background-color: #f9f9f9;
    margin-top: 5%;
    margin-bottom: 5%;
  }
  
  .sobre-mim .container {
    max-width: 1570px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 100px;
    flex-wrap: wrap;
  }
  
  .sobre-conteudo {
    flex: 1;
    padding-right: 0;
  }
  
  .sobre-imagem {
    flex: 1;
  }
  
  .sobre-imagem img {
    width: 100%;
    background: linear-gradient(135deg, #aeaeae, #d6d6d6);
    border: 1px solid rgba(0, 0, 0, 0.139);
    border-bottom-right-radius: 20%;
    border-top-left-radius: 20%;
    box-shadow: 4px 5px 5px rgb(84, 84, 84);
  }
  
  /* Título */
  .sobre-titulo {
    font-size: 40px;
    color: #282828;
    margin-bottom: 30px;
    font-weight: 700;
  }
  
  /* Texto */
  .sobre-texto {
    color: #515151;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 16px;
  }
  
  .sobre-texto strong {
    color: #1d1d1d;
  }
  
  /* Botão WhatsApp */
  .btn-sobre1 {
    display: inline-block;
    margin-top: 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  }
  
  .btn-sobre1:hover {
    transform: translateY(-3px);
  }
  
  .botao-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #e8b768, #ad7e32);
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 16px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  }
  
  .botao-whatsapp:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }
  
  .icone-whatsapp {
    width: 20px;
    height: 20px;
  }
  
  /* Animações de entrada lateral */
  .slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .slide-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .slide-left.show,
  .slide-right.show {
    opacity: 1;
    transform: translateX(0);
  }
  
/* invista em voce */
.invista-em-voce {
    padding: 50px 0 100px;
    background-color: #010101;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Adicionando a curva no topo como no exemplo */
.invista-em-voce::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #b3873c; /* Cor dourada como no exemplo */
    border-bottom-left-radius: 100% 40px;
    border-bottom-right-radius: 100% 40px;
    z-index: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 50px;
    position: relative;
    z-index: 2; /* Para ficar acima da curva */
}

/* Restante do seu CSS permanece igual */
.coluna-texto {
    margin-top: 5%;
    flex: 1;
    padding-right: 30px;
}

.coluna-formulario {
    flex: 1;
}

/* Título principal da seção */
.container h1 {
    font-size: 32px;
    color: white;
    margin-bottom: 30px;
    font-weight: 700;
    line-height: 1.3;
}

/* Texto motivacional */
.texto-motivacional p {
    color: rgb(184, 183, 183);
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 16px;
}
.texto-motivacional strong {
    color: white;
    font-size: 18px;
}


/* Seção do formulário com bordas arredondadas e efeito de curva */
.coluna-formulario h2{
    color: white;
    text-align: center;
    padding-bottom: 15px;
}
.form-contato {
    background: rgba(255, 255, 255, 0);
    padding: 30px;
    position: relative;
}

/* Estilo dos grupos de formulários */
.form-group {
    margin-bottom: 20px;
}

/* Estilo dos campos de input e textarea */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #f7ae041f;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}
.form-group input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #f7ae041f;
    padding: 10px;
    border-radius: 5px;
    color: #bf7a13;
    width: 100%;
}
.form-group textarea {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #f7ae041f;
    padding: 10px;
    border-radius: 5px;
    color: #bf7a13;
    width: 100%;
    resize: none;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color:#ce930980;
}

/* Ajuste para o textarea */
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Estilo do botão de envio */
.btn-enviar {
    background: linear-gradient(135deg, #262626, #222222);
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.btn-enviar:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.btn-enviar img {
    width: 20px;
    height: 20px;
}
/* Responsividade */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 20px;
    }

    .coluna-texto,
    .coluna-formulario {
        padding-right: 0;
    }
}

/* Texto entrando da esquerda */
.slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease;
}
.slide-left.show {
    opacity: 1;
    transform: translateX(0);
}

/* Imagem com efeito de "emergir" */
.fade-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.show {
    opacity: 1;
    transform: scale(1);
}

/* Seção Equipe Especializada */
.equipe-especializada {
    margin-top: 5%;
    padding: 100px 0;
    background-color: #f9f9f9;
}

.container3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.equipe-conteudo {
    flex: 1;
}

.equipe-imagem {
    flex: 1;
}

.equipe-imagem img {
    background: linear-gradient(135deg, #b6b6b6, #a4a4a4);
    width: 100%;
    border-radius: 50%;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

.equipe-titulo {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 700;
}

.equipe-descricao {
    font-size: 22px;
    color: #555;
    margin-bottom: 30px;
    font-weight: 300;
}

.procedimentos p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.convite {
    font-size: 20px;
    color: #444;
    margin: 40px 0 30px;
    font-style: italic;
}

.btn-agendar {
    display: inline-block;
    padding: 15px 40px;
    margin: 10%;
    background: linear-gradient(135deg, #e8b768, #ad7e32);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-agendar:hover {
    background-color: transparent;
    color: #000;
}
/* Efeito de fade-in com leve zoom */
.fade-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.show {
    opacity: 1;
    transform: scale(1);
}

/* Efeito de texto entrando da direita */
.slide-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease;
}
.slide-right.show {
    opacity: 1;
    transform: translateX(0);
}

/* About Section with Image Left */
.about-section {
    padding: 0px;
    background-color: #f9f4f4;

}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

.image-column {
    flex: 1;
}

.text-column {
    flex: 1;
}

.profile-image {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.section-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 30px;
    font-weight: 300;
    line-height: 1.3;
}

.section-content p {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}
/* Seção de Agendamento */
.agendamento-section {
    padding: 0px;
    background-color: #f9f4f4;
    text-align: center;
}


.agendamento-header h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}


/* Estilos Gerais */
.container4 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-md-6 {
    width: 50%;
    padding: 15px;
    box-sizing: border-box;
}

/* Seção de Marketing */
.esthetic-marketing {
    padding-bottom:120px ;
    background-color: #f9f9f9;
}

.feature-image {
    margin-top:44%;
    background: linear-gradient(135deg, #b6b6b6, #a4a4a4);
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.139);
    border-bottom-right-radius: 20%;
    border-top-left-radius: 20%;
    box-shadow: 4px 5px 5px rgb(84, 84, 84);
}

.marketing-content {
    padding: 20px;
}


    .tagline {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #b3873c; /* Cor dourada para combinar com seu tema */
    }
    
    .tagline img {
        margin-left: 120px;
        padding-bottom: 1%;
        width: 200px;
        height: 200px;
        object-fit: contain;
    }

.marketing-content h1 {
    font-size: 2.5rem;
    color: #222;
    margin-bottom: 30px;
    line-height: 1.2;
}

h1 span {
    color: #ad7e32;
    font-weight: 700;
}

.benefits {
    margin: 40px 0;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.benefit-item i {
    color: #ad7e32;
    font-size: 1.5rem;
    margin-right: 15px;
    margin-top: 3px;
}

.benefit-item p {
    margin: 0;
    font-size: 1.1rem;
}

.benefit-item strong {
    color: #333;
}

.cta-box {
    background: #f9f9f9;
    padding: 0px;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.05);
    margin-top: 40px;
}

.highlight {
    font-size: 1.2rem;
    color: #ad7e32;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.highlight i {
    margin-right: 10px;
}
.highlight strong {
    margin-right: 5px;
}

.cta-button {
    background: linear-gradient(135deg, #e8b768, #ad7e32);
    color: white;
    border: none;
    padding: 15px 70px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.0rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.cta-button i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(240, 210, 56, 0.4);
}

.small-note {
    font-size: 0.9rem;
    color: #666;
    margin-top: 15px;
    text-align: center;
}

/* footer */
.footer-bemviver {
    background-color: #f9f9f9;
    padding: 10px 0 30px;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand {
    flex: 1;
    min-width: 300px;
}

.footer-brand h1 {
    font-size: 36px;
    margin-bottom: 10px;
    font-weight: 700;
    color: #000;
}

.footer-subtitle {
    font-size: 18px;
    margin-bottom: 20px;
    color: #555;
}

.footer-description {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.footer-info {
    flex: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}

.footer-column h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #000;
}

.footer-column p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-icon {
    margin-right: 8px;
    font-size: 14px;
}

.divider {
    height: 1px;
    background-color: #ddd;
    margin: 30px 0;
}

.footer-bottom {
    text-align: center;
    font-size: 14px;
    color: #888;
}

.conduct-code {
    display: inline-block;
    margin-top: 15px;
    color: #666;
    text-decoration: none;
    font-weight: 600;
}

.conduct-code:hover {
    text-decoration: underline;
}
.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    margin-bottom: 10px;
}

.contact-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.contact-icon {
    margin-right: 8px;
    color: #ad7e32; /* Ou a cor da sua identidade visual */
}

.footer-map iframe {
    width: 100vh;
    height: 500px;
    border: 0;
    margin-bottom: 50px;
}

    /* Footer Styles */
.footer-contato06 {
    background-color: #010100;
    color: #fff;
    padding: 0px 20px 40px;
    position: relative;
    overflow: hidden;
}

.curva-topo06 {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #b3873c;
    border-bottom-left-radius: 100% 40px;
    border-bottom-right-radius: 100% 40px;
    z-index: 1;
}

.container-footer06 {
    padding-top: 5%;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* Estilo para a logo no rodapé */
.logorodape {
    margin-bottom: 0px;
    margin-left: 180px;
    max-width: 180px; /* Ajuste conforme necessário */
}

.logorodape img {
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1); /* Opcional: transforma a logo em branco */
}

.texto-footer06 h2 {
    font-size: 2.8rem;
    color: #ffffff;
    margin-bottom: 0px;
    line-height: 1.2;
}

.texto-footer06 span {
    font-weight: bold;
    font-size: 3.2rem;
    color: #b3873c;
    border: none;
    outline: none;
    text-decoration: none;
    user-select: none;
}

.info-footer06 {
    max-width: 600px;
}

.info-footer06 p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #f1f1f1;
}

.info-footer06 strong {
    color: #b3873c;
}

.botoes-footer06 {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-agendar06 {
    background: linear-gradient(135deg, #aa6f10, #ad7e32);
    color: #fff;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-agendar06:hover {
    background:  #ad7e32;
    transform: translateY(-3px);
}

.btn-contato06 {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-contato06:hover {
    background: #fff;
    color: #151516;
    transform: translateY(-3px);
}

/* Developer Credits */
.container-central {
    padding-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.creditos {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.creditos .link-dev {
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.creditos .link-dev:hover {
    text-decoration: underline;
}
     /* Responsivo notbook*/
@media (min-width: 940px) and (max-width:1300px)  {
      /* fim do efeito de card */
  .servico-card {
    display: flex;
    flex-direction: column; /* Organiza os elementos em coluna */
    justify-content: space-between; /* Faz com que os elementos sejam distribuídos e o botão fique na parte inferior */
    scroll-snap-align: start;
    flex: 0 0 30%;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    text-align: center;
    margin: 0 10px;
    height: 80h;  /* Garante que o card tenha altura suficiente */
}
.logo{
    top:200%;
    
}
.btn, #typing-text, .hero h2, .hero p{
    margin-left: 0%;
}

}
 /* Responsivo monitores */
@media (min-width: 768px) and (max-width:940px)  {
    /* Header */
  .logo {
      position: absolute;
      left: 20px;
      top: 100%;
      transform: translateY(-50%);
      opacity: 0; /* Inicialmente invisível */
      animation: slideIn 4s ease-out forwards; /* Aplica a animação */
  }
  .logo img {
      width: 150px; /* Tamanho fixo, ajuste conforme necessário */
      height: auto;
  }
  
  /* Seção Equipe Especializada */
.equipe-especializada {
    margin-top: 5%;
    padding: 20px 0;
    background-color: #f9f9f9;
}
  .btn, #typing-text, .hero h2, .hero p{
    margin-left: 0%;
    
             }
  /* fim do efeito de card */
  .servico-card {
      display: flex;
      flex-direction: column; /* Organiza os elementos em coluna */
      justify-content: space-between; /* Faz com que os elementos sejam distribuídos e o botão fique na parte inferior */
      scroll-snap-align: start;
      flex: 0 0 45%;
      background: white;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
      text-align: center;
      margin: 0 10px;
      height: 80h;  /* Garante que o card tenha altura suficiente */
  }
  /* Seção Sobre Mim */
  .sobre-imagem {
    flex: 1;
  }
  
  .sobre-imagem img {
    width: 600px;
    background: linear-gradient(135deg, #aeaeae, #d6d6d6);
    border: 1px solid rgba(0, 0, 0, 0.139);
    border-bottom-right-radius: 20%;
    border-top-left-radius: 20%;
    box-shadow: 4px 5px 5px rgb(84, 84, 84);
  }
  .sobre-mim {
      padding: 20px 0;  
  }
/* Seção Sobre Mim */
.sobre-mim {
    padding: 10px 0;
    background-color: #f9f9f9;
    margin-bottom: 10%;
    transition: all 1s ease-out;
}

  .sobre-mim .container {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
    
  }
  .botao-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #e8b768, #ad7e32);
      color: white;
      font-weight: bold;
      text-decoration: none;
      padding: 12px 20px;
      border-radius: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 14px;
      transition: background-color 0.3s ease;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  }
  .invista-em-voce {
      padding: 50px 0;
      background-size: cover;  /* Para a imagem cobrir toda a seção */
      background-position: center; /* Para centralizar a imagem */
  }
  .container {
      margin: 0 auto;
      padding: 0 20px;
      display:flex;
      gap: 20px;
  }
  /* Seção Equipe Especializada */
  .equipe-imagem img {
      background-color: #d4d0cd;
      width: 600px;
      margin-bottom: 10%;
      
  }
  .container3 {
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 10px;
  }
  .equipe-descricao {
    font-size: 22px;
    text-align: left;
    color: #555;
    margin-bottom: 30px;
    font-weight: 300;
}

.procedimentos p {
    text-align: left;
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}
.convite {
    text-align: left;
    font-size: 20px;
    color: #444;
    margin: 40px 0 30px;
    font-style: italic;
}

  
  /* Seção de Agendamento */
  .agendamento-section {
      padding: 0px 0;
      background-color: #f9f4f4;
      text-align: center;
  }
  .agendamento-header h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 10px;
      font-weight: 600;
      letter-spacing: 1px;
  }
  .col-md-6 {
      width: 100%;
      padding: 0px;
      box-sizing: border-box;
  }
  /* Seção de Marketing */
  .esthetic-marketing {
      padding: 0px 0;
      background-color: #f9f9f9;
  }
  .feature-image {
    margin-top: 0%;
    margin-left: 16%;
    width: 600px;
}

.tagline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #b3873c; /* Cor dourada para combinar com seu tema */
}

.tagline img {
    margin-left: 35%;
    padding-bottom: 1%;
    width: 200px;
    height: 200px;
    object-fit: contain;
}
  .marketing-content {
      padding: 80px;
  }
  .benefits {
      margin: 40px 0;
  }
  .benefit-item i {
      color: #ad7e32;
      font-size: 1.5rem;
      padding-right: 15px;
      margin-top: 3px;
  }
  .highlight i {
      padding-right: 20px;
  }
  .cta-button i {
      padding-right: 10px;
      font-size: 1.2rem;
  }
    /* Footer Styles */
.footer-contato06 {
    background-color: #010100;
    color: #fff;
    padding:10px;
    position: relative;
    overflow: hidden;
}


  .container-footer06 {
    padding-top: 5%;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    gap: 0px;
}
.info-footer06 {
    max-width: 50%;
}
/* Estilo para a logo no rodapé */
.logorodape {
    margin-bottom: 0px;
    margin-left: 0px;
    max-width: 180px; /* Ajuste conforme necessário */
}

  }
  /* Responsividade */
  @media (max-width: 768px) {
      .col-md-6 {
          width: 100%;
      }
      
      h1 {
          font-size: 2rem;
      }
  }   
/*telas menores*/
@media (max-width: 768px) {

            * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow-x: hidden;
        }
        html {
            overflow-x: hidden;
        }
        
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }

        @keyframes slideInRight {
            0% {
              transform: translateX(100%);
              opacity: 0;
            }
            80% {
              transform: translateX(-10%);
            }
            100% {
              transform: translateX(0);
              opacity: 1;
            }
          }
          
          @keyframes vibrate {
            0% { transform: translateX(0); }
            20% { transform: translateX(-2px); }
            40% { transform: translateX(2px); }
            60% { transform: translateX(-2px); }
            80% { transform: translateX(2px); }
            100% { transform: translateX(0); }
          }
          
          
/* Seção Sobre Mim */
        .sobre-mim .container {
            max-width: 100%;
            z-index: 9999;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            gap: 0px;
        }
        .sobre-titulo {
            padding-top: 20px;
            font-size: 40px;
            color: #282828;
            margin-bottom: 30px;
            font-weight: 700; /* Fonte mais grossa */
        }
        .sobre-imagem img {
            width: 98%;
            background: linear-gradient(135deg, #aeaeae, #d6d6d6);
            border: 1px solid rgba(0, 0, 0, 0.139);
            border-bottom-right-radius: 20%;
            border-top-left-radius: 20%;
            box-shadow: 4px 5px 5px rgb(84, 84, 84);
          }
            
  .botao-whatsapp {
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 14px;
  
  }
  

        /* Seção Nossos Serviços */
.nossos-servicos {
    margin-top:0%;
    z-index: 1;
    padding:0px 0;
    background-color: #f9f9f900;
    text-align: center;
}
/* Carrossel de serviços */
.servicos-carrossel {
    display: block;
    overflow-x: auto;
    scroll-snap-type: none;
    gap: 0px;
    padding-bottom: 30px;
   
}
/* Indicadores do carrossel */
.carrossel-indicadores {
    display:none;
    
}
.servico-card {
    position: relative; /* <-- Adicionado */
    margin-top: 0%;
    display: block;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: start;
    margin-bottom: 10px;
    flex: 0 0 300px;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    text-align: center;
    height: 80h; /* <-- Provável erro aqui */
}


.invista-em-voce {
    margin-top: 0%;
    margin-bottom: 0%;
    padding: 0; /* padding 0px já é o padrão, mas mantive para clareza */
    min-height:100%; /* Ajuste esse valor conforme necessário */
    background-size: cover;
    background-position: center;
}
.coluna-texto {
    padding-top: 15%;
}
.titulo-principal {
    padding-left: 0%;
    font-size: 40px;
    color: #333;
    margin-bottom: 60px;
    font-weight: 600;
}

.coluna-texto {
    flex: 1;
    padding-right: 0px;
} 
.form-contato {
    background: rgba(255, 255, 255, 0);
    margin-top: 0%;
    padding: 10px;
    position: relative;
    margin-bottom: 10%;
}
/* Seção Equipe Especializada */
.equipe-especializada {
    margin-top: 0%;
    padding: 50px 0;
    background-color: #f9f9f9;
}
.equipe-imagem {
    width: 100%;
    margin: 0;         /* Garante que não há margem extra */
    padding: 20px;        /* Garante que não há padding extra */
}

.equipe-imagem img {
    display: block;     /* Remove espaçamento inline */
    width: 100%;
    max-width: 100%;
    height: auto;
    background-color: #d4d0cd;
    margin: 0 auto 20px auto; /* Centraliza e adiciona margem inferior */
}

.container3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
}

/* Seção de Agendamento */
.agendamento-section {
    padding: 0px 0;
    background-color: #f9f4f4;
    text-align: center;
}
.agendamento-header h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}
.col-md-6 {
    width: 100%;
    padding: 0px;
    box-sizing: border-box;
}
/* Seção de Marketing */
.esthetic-marketing {
    padding: 0px 0;
    background-color: #f9f9f9;
}
.marketing-content {
    padding: 10px;
}
.benefits {
    margin: 40px 0;
}
.benefit-item i {
    color: #ad7e32;
    font-size: 1.5rem;
    padding-right: 15px;
    margin-top: 3px;
}
.highlight i {
    padding-right: 20px;
}
.cta-button i {
    padding-right: 10px;
    font-size: 1.2rem;
}
.tagline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #b3873c; /* Cor dourada para combinar com seu tema */
}

.tagline img {
    margin-left:20%;
    width: 200px;
    height: 200px;
    object-fit: contain;
}
.marketing-content h1 {
    font-size: 2.0rem;
    text-align: center;
    color: #222;
    margin-bottom: 30px;
    line-height: 1.2;
}
.feature-image {
    display: block;     /* Remove espaçamento inline */
    width: 90%;
    max-width: 100%;
    height: auto;
    background-color: #d4d0cd;
    margin: 0 auto 20px auto; /* Centraliza e adiciona margem inferior */
   
}

h1 span {
    color: #ad7e32;
    font-weight: 700;
}

/* footer */
.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-map iframe {
    width: 40vh;
    height: 300px;
    border: 0;
    margin-bottom: 50px;
}
          .profile-pic11 {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            flex-shrink: 0;
            box-shadow:0px 0px 5px rgba(254, 254, 254, 0.89);
          }
          
          .profile-pic11 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }
          
          .header-text11 {
            flex: 1;
          }
          
          .name11 {
            font-weight: bold;
            font-size: 1rem;
          }
          
          .subtitle11 {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            color: #ffffff;
            margin-top: 2px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
          }
          
          .status-indicator11 {
            width: 10px;
            height: 10px;
            background-color: #00c853;
            border-radius: 50%;
            margin-right: 5px;
          }
          
          .close-btn11 {
            background: none;
            border: none;
            color: #ffffff;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
            font-size: 1.4rem;
            cursor: pointer;
          }
          
          .chat-body11 {
            padding: 1rem;
          }
          
          .message11 {
            background-color: #f1f1f1;
            padding: 0.7rem;
            border-radius: 10px;
            margin-bottom: 1rem;
          }
          
          .message11 .name11 {
            color: #27351f;
            font-weight: bold;
            margin-bottom: 4px;
          }
          
          .conversation-btn11 {
            display: inline-block;
            background-color: #25D366;
            color: white;
            text-align: center;
            padding: 0.7rem 1rem;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
          }
          
          .conversation-btn11:hover {
            background-color: #1ebc57;
          }
          
          .footer11 {
            padding: 0.5rem 1rem;
            font-size: 0.75rem;
            color: #888;
            text-align: center;
            background-color: #f9f9f9;
          }
          
          nav{
            display: none;
          }
          .chat-window{
            display: none;
          }
        .logo{
            display: none;
        }
        
        nav{
            display: none;
                }
                
        /* Hero Section com Background */
        .hero {
            width: 100%;
            height: 100vh; /* Altura total da tela */
            background-image: url('mobile.png');
            background-size: cover; /* Cobrir toda a área */
            background-position: center; /* Centralizar a imagem */
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            padding: 10px;
            position: relative;
        }
                /* Conteúdo do hero */
        .hero-content {
            margin-top:110%;
            max-width: 100%;
            text-align: left;
            margin-left: 0%;
            margin-bottom: 2%;
            color: white;
            position: relative;
            z-index: 1; /* Garante que fique acima do overlay */
        }
    /* Conteúdo do hero */
.hero-content {
    max-width: 550px;
    text-align: left;
    margin-left: 0%;
    margin-bottom: 1%;
    color: white;
    position: relative;
    z-index: 1; /* Garante que fique acima do overlay */
}
.btn, #typing-text, .hero h2, .hero p{
   margin-left: 1%;
   
            }
#typing-text {
    font-size: 35px;
    font-weight: 700;
    margin-bottom: -30px;
}
/* Destaque do <span> dentro do h2 */
.hero h2 span {
    display: block;
    font-size: 0px;
    font-weight: 700;
    color: #acaaaa;
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.856);
    overflow: hidden;
    white-space: nowrap;
}
/* Título principal */
.hero h2 {
    font-size: 22px;
    margin-bottom: 1px;
    color: rgb(58, 57, 57);
    font-weight: 500;
    line-height: 1.4;
}
.hero p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: rgb(73, 73, 71);
    font-size: 15px;
    font-weight: 400;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0); /* Adicionando sombra ao texto */
}
.cta-button{
    padding: 5px 40px;
    font-size: 16px;

}
.footer-content {
    display: block;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

        .container-footer06 {
            flex-direction: column;
            text-align: center;
        }
        
        .texto-footer06 h2 {
            font-size: 2.2rem;
        }
        
        .texto-footer06 span {
            font-size: 2.5rem;
        }
        
        .botoes-footer06 {
            justify-content: center;
        }
        /* Estilo para a logo no rodapé */
.logorodape {
    margin-bottom: 0px;
    margin-left: 25%;
    max-width: 180px; /* Ajuste conforme necessário */
}.texto-footer06 h2 {
    padding-top: 20%;
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 0px;
    line-height: 1.2;
}

.texto-footer06 span {
    font-weight: bold;
    font-size: 3.2rem;
    color: #b3873c;
    border: none;
    outline: none;
    text-decoration: none;
    user-select: none;
}
.footer-map iframe {
    width: 100vh;
    height: 500px;
    border: 0;
    margin-bottom: 50px;
}

    }