/* Define o comportamento de rolagem suave para a página */
html {
    scroll-behavior: smooth;
}

/* Oculta a barra de rolagem no Chrome e no Safari */
body::-webkit-scrollbar {
    display: none;
}

/* Estilos gerais para o corpo da página */
body {
    background-image: linear-gradient(to right, #1C0436, #6A0572); /* Define um gradiente de fundo */
    color: #F2F0F5; /* Define a cor do texto */
    font-family: arial; /* Define a fonte utilizada */
    
}

/* Estilos para o cabeçalho */
header {
    width: 98.7%; /* Define a largura do cabeçalho */
    height: 100%; /* Define a altura do cabeçalho */
    padding: 10px; /* Adiciona preenchimento ao redor do cabeçalho */
    border-radius: 15px; /* Adiciona bordas arredondadas */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.9); /* Adiciona uma sombra ao cabeçalho */
    z-index: 9999; /* Define a ordem de empilhamento */
    text-align: center; /* Centraliza o conteúdo do cabeçalho */
}



/* Estilos para o logotipo */
.logo {
    align-items: center; /* Alinha os itens verticalmente */
    text-align: center; /* Centraliza o texto */
    justify-content: space-evenly; /* Distribui o espaço uniformemente */
    display: flex; /* Exibe os itens em linha */
}

#img-ortolab {
    cursor: pointer; /* Altera o cursor para um ponteiro ao passar o mouse sobre o link */
}

/* Estilos para os links do logotipo */
.logo a {
    color: white; /* Define a cor do texto */
    text-decoration: none; /* Remove sublinhado */
    font-weight: bold; /* Define a espessura da fonte */
}

#rodape{
    background-color: #3C0549; 
    color: white; 
    text-align: center; 
    padding: 10px;
    border-radius: 10px;
    border: none;
    position: fixed;
    bottom: 0;
    left: 3px;
    width: 98.7%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
    z-index: 9999;
}

/* Estilos para a seção inicial */
.home {
    display: flex; /* Exibe os itens em linha */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    margin-top: 50px; /* Adiciona margem superior */
    text-align: center; /* Centraliza o texto */
    margin-bottom: 30px;
}

/* Estilos para a imagem na seção inicial */
.img-home {
    text-align: right; /* Alinha a imagem à direita */
    margin-right: 100px; /* Adiciona margem à direita */
}

/* Estilos para a imagem na seção inicial */
.img-home img {
    max-width: 80%; /* Define a largura máxima da imagem */
    height: auto; /* Mantém a proporção da imagem */
    position: relative; /* Permite posicionar a imagem */
}

/* Estilos para o texto na seção inicial */
.text {
    text-align: left; /* Alinha o texto à esquerda */
    padding: 0 20px; /* Adiciona preenchimento horizontal */
}

/* Estilos para os parágrafos */
.text p {
    font-size: 20px; /* Define o tamanho da fonte */
}

/* Estilos para os títulos */
.text h1 {
    font-size: 28px; /* Define o tamanho da fonte */
    margin-bottom: 15px; /* Adiciona margem inferior */
}

/* Estilos para os botões */
.btn {
    display: inline-block; /* Exibe os botões em linha */
    padding: 10px 20px; /* Adiciona preenchimento ao redor do texto */
    background-color: #3E1F65; /* Define a cor de fundo */
    color: #fff; /* Define a cor do texto */
    text-decoration: none; /* Remove sublinhado */
    border-radius: 5px; /* Adiciona bordas arredondadas */
    font-size: 14px; /* Define o tamanho da fonte */
    transition: background-color 0.3s ease; /* Adiciona uma transição suave */
    border: none; /* Remove a borda */
}

/* Estilos para os botões quando passam o mouse por cima */
.btn:hover, .services-btn:hover {
    background-color: #762ccf; /* Define a cor de fundo ao passar o mouse por cima */
}

/* Oculta a barra de rolagem no Chrome e no Safari */
.alert-dialog::-webkit-scrollbar {
    display: none;
}

/* Estilos para a caixa de diálogo de alerta */
.alert-dialog {
    display: none; /* Oculta a caixa de diálogo por padrão */
    position: fixed; /* Fixa a posição da caixa de diálogo */
    top: 50%; /* Define a posição superior */
    left: 50%; /* Define a posição esquerda */
    color: white; /* Define a cor do texto */
    transform: translate(-50%, -50%); /* Centraliza a caixa de diálogo */
    background-image: linear-gradient(to right, #1C0436, #6A0572); /* Define um gradiente de fundo */
    padding: 2rem; /* Adiciona preenchimento */
    border-radius: 5px; /* Adiciona bordas arredondadas */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra */
    z-index: 9999; /* Define a ordem de empilhamento */
    height: 55vh; /* Define a altura */
    overflow-y: auto; /* Adiciona rolagem vertical */
}

/* Estilos adicionais para o fundo quando a caixa de diálogo está ativa */
.alert-active {
    position: fixed; /* Fixa a posição */
    top: 0; /* Define a posição superior */
    left: 0; /* Define a posição esquerda */
    width: 100%; /* Define a largura */
    height: 100%; /* Define a altura */
    background-color: rgba(59, 33, 69, 0.5); /* Define a cor de fundo com transparência */
    z-index: 9998; /* Define a ordem de empilhamento */
}

/* Estilos para o botão de serviços */
.services-btn {
    display: inline-block; /* Exibe o botão em linha */
    padding: 10px 20px; /* Adiciona preenchimento ao redor do texto */
    color: #fff; /* Define a cor do texto */
    border-radius: 5px; /* Adiciona bordas arredondadas */
    font-size: 1rem; /* Define o tamanho da fonte */
    background-color: #3E1F65; /* Define a cor de fundo */
    transition: background-color 0.3s ease; /* Adiciona uma transição suave */
    border: none; /* Remove a borda */
}

/* Estilos para os links dentro do botão de serviços */
.services-btn a {
    color: #fff; /* Define a cor do texto */
    text-decoration: none; /* Remove sublinhado */
}

#close-alert{
    margin-top: 24px;
}

/* Media query para telas menores */
@media (max-width: 768px) {
    /* Ajustes de estilo para telas menores */

    header{
        width: 97.3%;
        right: 4px;
        position: relative; 
    }

    .logo a{
        font-size: 12px;
    }

    #rodape{
        width: 96.2%;
    }
    /* Reduz a largura da caixa de diálogo */
    .alert-dialog {
        width: 80%;
    }

    /* Ajustes de estilo para o logotipo em telas menores */
    .logo img {
        height: 50px;
    }

    /* Ajustes de estilo para a imagem na seção inicial em telas menores */
    .img-home img {
        margin-right: 50px;
    }

    /* Ajustes de estilo para a seção inicial em telas menores */
    .home {
        flex-direction: column; /* Empilha os elementos verticalmente */
        text-align: center; /* Centraliza o texto */
        margin-left: 10px; /* Adiciona margem à esquerda */
        margin-bottom: 100px;
    }

    /* Ajustes de estilo para a imagem na seção inicial em telas menores */
    .img-home {
        margin-right: 0; /* Remove a margem à direita */
        margin-bottom: 20px; /* Adiciona margem inferior */
    }

    /* Ajustes de estilo para o texto na seção inicial em telas menores */
    .text {
        padding: 10; /* Adiciona preenchimento ao redor do texto */
    }

    /* Ajustes de estilo para os botões em telas menores */
    .btn {
        margin: 0 auto; /* Centraliza horizontalmente */
        margin-bottom: 20px; /* Adiciona margem inferior */
    }
}

@media screen and (max-width: 280px) and (max-height: 1354px){
    body {
        font-size: 12px; /* Reduz o tamanho da fonte para telas menores */
    }

    header {
        width: 96.3%; /* Ajuste na largura do cabeçalho */
    }

    #rodape {
        width: 95.3%; /* Ajuste na largura do rodapé */
        left: 0;
    }

    .alert-dialog {
        width: 72%;
    }

    .logo a {
        font-size: 10px;
    }

    #img-ortolab {
        width: 110px;
        height: 35px;
    }

}