/* Reset de estilos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}


.float{
	position:fixed;
	bottom:20px;
	right:10px;
  font-size:30px;
  z-index:100;
}

.my-float{
	margin-top:16px;
}


/* Estilos do cabeçalho */
.header {
    background-color: #003366;
    color: #ffffff;
    padding: 5px;
    text-align: center;
}

.logo {
    font-size: 32px;
    margin-bottom: 10px;
}

.slogan {
    font-size: 18px;
}

.btn-primary {
    display: inline-block;
    background-color: #ff6600;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #ff8533;
}

/* Estilos da primeira dobra */
.hero {
    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
}

.hero-content {
    padding: 2%; 
}

.hero-title {
    font-size: 30px;
    margin-bottom: 10px;
    color: #003366;
}

.hero-description {
    font-size: 24px;
    margin-bottom: 20px;
    color:#003366;
}

/* Estilos das seções de destaque */
.additional-features {
    background-color: #f9f9f9;
    padding: 60px 20px;
    text-align: center;
}

.feature {
    margin-bottom: 40px;
}

.feature-title {
    font-size: 30px;
    margin-bottom: 10px;
}

.feature-description {
    font-size: 22px;
}

/* Estilos do formulário de marcação de consulta */
.appointment-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 60px 20px;
    background-color: #003366;
    color: #ffffff;
}

.appointment-form input[type="text"],
.appointment-form input[type="tel"],
.appointment-form input[type="email"],
.appointment-form select {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 20px;
}

.btn-disabled {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    background-color: #e6e6e6;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-enabled {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    background-color: #ff6600;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-enabled:hover {
    background-color: #ff8533;
}

.appointment-form input[type="date"],
.appointment-form input[type="time"] {
    width: 48%;
}

/*
.appointment-form button {
    background-color: #ff6600;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.appointment-form button:hover {
    background-color: #ff8533;
}*/

/* Estilos do rodapé */
.footer {
    background-color: #003366;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

/* Estilos das seções de destaque adicionais */
.additional-features {
    display: flex; /* Ativa o layout de flexbox */
    justify-content: space-between; /* Distribui os itens uniformemente ao longo do eixo principal (horizontalmente) */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha quando não há espaço suficiente */
    padding: 40px; /* Adiciona um espaço interno */
}

/* Estilos das características individuais */
.feature {
    width: calc(33.33% - 20px); /* Define a largura de cada coluna (1/3 do container menos o espaço entre as colunas) */
    padding: 20px; /* Adiciona espaço interno */
    background-color: #f9f9f9; /* Cor de fundo para cada coluna */
    border-radius: 10px; /* Adiciona bordas arredondadas */
    text-align: center; /* Centraliza o conteúdo */
}

.feature img {
    width: 50px; /* Ajusta o tamanho do ícone */
    margin-bottom: 10px; /* Adiciona espaço abaixo do ícone */
}

.feature-title {
    font-size: 20px; /* Define o tamanho do título */
    margin-bottom: 10px; /* Adiciona espaço abaixo do título */
}

.feature-description {
    font-size: 16px; /* Define o tamanho do texto de descrição */
}


.about-section {
    display: flex;
    flex-direction: row; /* Organiza os elementos em uma linha */
    justify-content: space-between; /* Distribui os elementos horizontalmente */
    align-items: center; /* Alinha os elementos verticalmente ao centro */
    padding: 0 40px; /* Adiciona espaço interno */
}

.text-block {
    width: 60%; /* Define a largura do bloco de texto */
    padding:5%;
}

.image-block {
    width: 40%; /* Define a largura do bloco de imagem */
}

.image-block img {
    max-width: 100%; /* Garante que a imagem não ultrapasse o contêiner */
    height: auto; /* Mantém a proporção da imagem */
}


/* Estilos para dispositivos móveis */
@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 36px; /* Aumenta o tamanho do título na primeira dobra */
    }

    .hero-description {
        font-size: 20px; /* Aumenta o tamanho da descrição na primeira dobra */
    }

    .additional-features {
    background-color: #f9f9f9;
    text-align: center;
}
    .feature-title {
        font-size: 18px; /* Aumenta o tamanho do título nas seções de destaque */
    }

    .feature-description {
        font-size: 15px; /* Aumenta o tamanho da descrição nas seções de destaque */
    }

    .appointment-form input[type="text"],
    .appointment-form input[type="tel"],
    .appointment-form input[type="email"],
    .appointment-form select {
        font-size: 30px; /* Aumenta o tamanho do texto nos campos do formulário */
    }
}