html {
    scroll-behavior: smooth !important;
}

/* Custom CSS for elements that need more styling */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
    background-size: cover;
    background-position: center;
    height: 80vh;
}

.treatment-card:hover {
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.testimonial-card {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.appointment-form {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* style.css */

/* ... seu código CSS existente ... */

/* Estilos para os campos de input e select dentro do formulário de agendamento */
.appointment-form input,
.appointment-form select,
.appointment-form textarea {
    color: #333; /* Cor do texto dentro do campo (um cinza escuro para melhor legibilidade) */
    background-color: #f9f9f9; /* Um fundo levemente cinza para os campos, se quiser um contraste sutil */
    border: 1px solid #ddd; /* Borda mais visível */
}

/* Opcional: Estilo para o placeholder (o texto "Nome Completo", "Selecione o Serviço", etc.) */
.appointment-form input::placeholder,
.appointment-form textarea::placeholder {
    color: #666; /* Uma cor mais escura para o placeholder */
}

.appointment-form select {
    /* Garante que o texto da opção selecionada seja visível */
    -webkit-appearance: none; /* Remove o estilo padrão do navegador para o select */
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%00%20-13.6-6.4H18.4c-5%200-9.3%201.8-13.6%206.4-4.2%204.7-6.4%2010.4-6.4%2016.4%200%206%202.2%2011.7%206.4%2016.4l120%20120c4.4%204.4%2010.6%206.4%2016.4%206.4%206%200%2012.2-2%2016.4-6.4l120-120c4.2-4.7%206.4-10.4%206.4-16.4-.2-6-2.4-11.7-6.6-16.4z%22%2F%3E%3C%2Fsvg%3E'); /* Ícone de seta personalizado para o select */
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%;
    background-size: 0.65em auto;
}
