/* Importar Bootstrap CSS (via CDN no header.php é mais fácil para iniciar) */
/* Fontes */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@300;400&display=swap');

/* VARIÁVEIS DE COR DA MARCA */
:root {
    --primary-blue: #0A4A7A;   /* Azul escuro da sua logo */
    --secondary-green: #34A853; /* Verde da sua logo */
    --text-dark: #333;
    --text-light: #f8f9fa;
    --light-gray: #f8f9fa;
    --dark-gray: #343a40;
    --white-transparent-75: rgba(255, 255, 255, 0.75);
    --white-transparent-50: rgba(255, 255, 255, 0.5);
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-blue); 
}

/* Cores customizadas do Bootstrap */
.bg-primary-custom {
    background-color: var(--primary-blue) !important;
}
.text-primary-custom {
    color: var(--primary-blue) !important;
}
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}
.btn-primary:hover {
    background-color: darken(var(--primary-blue), 10%); /* Ajuste a cor no hover */
    border-color: darken(var(--primary-blue), 10%);
}

.bg-secondary-custom {
    background-color: var(--secondary-green) !important;
}
.text-secondary-custom {
    color: var(--secondary-green) !important;
}
.btn-secondary-custom {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
    color: var(--text-light) !important;
}
.btn-secondary-custom:hover {
    background-color: darken(var(--secondary-green), 10%);
    border-color: darken(var(--secondary-green), 10%);
}

.btn-outline-light {
    color: var(--text-light);
    border-color: var(--text-light);
}
.btn-outline-light:hover {
    background-color: var(--text-light);
    color: var(--primary-blue);
}

.bg-dark-custom {
    background-color: var(--dark-gray) !important; /* Mantém um cinza escuro para o footer */
}
.text-white-custom {
    color: var(--text-light) !important;
}
.text-white-50 { /* Para textos secundários no footer */
    color: var(--white-transparent-50) !important;
}
.text-white-75 { /* Para copyright no footer */
    color: var(--white-transparent-75) !important;
}

/* NAVBAR */
.navbar {
    background-color: var(--primary-blue) !important; 
}
.navbar .nav-link {
    color: var(--text-light) !important;
    transition: color 0.3s ease;
}
.navbar .nav-link:hover {
    color: var(--secondary-green) !important; /* Destaque verde no hover */
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../assets/img/hero-background.jpg') no-repeat center center;
    background-size: cover;
    color: var(--text-light);
    padding: 120px 0; /* Aumentado para mais impacto */
    margin-bottom: 50px;
}

.hero-section h1 {
    font-size: 3.8rem; /* Aumentado um pouco */
    color: var(--text-light);
}
.hero-section p.lead {
    font-size: 1.6rem;
    margin-top: 20px;
}

/* Cards de Serviço/Destaque */
.card {
    border: 1px solid rgba(0,0,0,0.05); /* Borda sutil */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Sombra mais elegante */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card-title {
    color: var(--primary-blue);
}

/* Ícones nos cards */
.card i {
    color: var(--secondary-green); /* Ícones com a cor de destaque */
}

/* Cores de status (manter as cores padrão do Bootstrap) */
.badge.bg-success { background-color: #198754 !important; }
.badge.bg-warning { background-color: #ffc107 !important; color: #212529 !important; }
.badge.bg-danger { background-color: #dc3545 !important; }
.badge.bg-info { background-color: #0dcaf0 !important; }
.badge.bg-secondary { background-color: #6c757d !important; }


/* Responsividade básica (Bootstrap já cuida de muito) */
@media (max-width: 992px) {
    .hero-section {
        padding: 80px 0;
    }
    .hero-section h1 {
        font-size: 2.8rem;
    }
    .hero-section p.lead {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
    }
    .hero-section h1 {
        font-size: 2.2rem;
    }
    .hero-section p.lead {
        font-size: 1.1rem;
    }
    .navbar-brand img {
        height: 35px; /* Ajuste o tamanho da logo para telas menores */
    }
}