/* CSS para a página "escolha" */
/* ===============================
   Variáveis de Cores
================================= */
:root {
    --cor-primaria: #1A237E;   /* Azul Escuro */
    --cor-secundaria: #00BCD4; /* Azul Claro */
    --cor-fundo: #F5F5F5;      /* Fundo Cinza Claro */
    --cor-texto: #333333;      /* Texto Padrão */
    --cor-branco: #FFFFFF;     /* Branco */
}

/* ===============================
   Reset Básico
================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    line-height: 1.6;
}

/* ===============================
   Hero Section
================================= */
.servicos-hero {
    min-height: 400px;  /* Altura padrão para desktop */
    padding: 60px 20px; /* Espaçamento interno */

    /* Centralização do Conteúdo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        rgba(26, 35, 126, 0.85),
        rgba(0, 188, 212, 0.65)
    ),
    url('https://picsum.photos/1920/600?blur=2') no-repeat center center/cover;

    text-align: center;
    color: var(--cor-branco);
}

.servicos-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.servicos-hero p {
    font-size: 1.2rem;
    max-width: 700px;
}

/* --- Ajuste para Telas Menores (Responsividade) --- */
@media (max-width: 768px) {
    .servicos-hero {
        min-height: 300px; /* Altura ajustada para mobile */
        padding: 40px 15px;
    }

    .servicos-hero h1 {
        font-size: 2rem;
    }

    .servicos-hero p {
        font-size: 1rem;
    }
}

/* ===============================
   Botões
================================= */
.btn-custom {
    background-color: var(--cor-secundaria);
    color: var(--cor-branco);
    padding: 12px 25px;
    border-radius: 30px;
    border: none;
    font-size: 1rem;
    transition: 0.3s ease;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.btn-custom:hover {
    background-color: var(--cor-primaria);
}

/* ===============================
   Textos e Utilitários
================================= */
.text-primary {
    color: var(--cor-primaria) !important;
}

.text-secondary {
    color: var(--cor-secundaria) !important;
}

.text-center {
    text-align: center !important;
}