/* 
==============================================
ESTILOS DO SITE PBA TRANSPORTES - VERSÃO EDITÁVEL
==============================================

Este arquivo contém todos os estilos do site da PBA Transportes.
Cada seção está claramente comentada para facilitar a edição.

ÍNDICE:
1. CONFIGURAÇÕES GERAIS
2. CORES PRINCIPAIS (fácil edição)
3. FONTES (fácil edição)
4. CABEÇALHO
5. CARROSSEL DE BANNERS
6. SEÇÃO SOBRE
7. SEÇÃO SERVIÇOS
8. SEÇÃO FROTA
9. SEÇÃO PORTFÓLIO
10. SEÇÃO CONTATO
11. RODAPÉ
12. BOTÕES
13. RESPONSIVIDADE

==============================================
*/

/* 
==============================================
1. CONFIGURAÇÕES GERAIS
==============================================
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: 60px 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 20px;
}

p {
    margin-bottom: 15px;
}

img {
    max-width: 100%;
    height: auto;
}

/* 
==============================================
2. CORES PRINCIPAIS (fácil edição)
==============================================
Altere estas variáveis para mudar as cores em todo o site
*/

:root {
    --cor-primaria: #183f17;         /* GREEN principal */
    --cor-secundaria: #333333;       /* Cinza escuro */
    --cor-destaque: #ff9900;         /* Laranja para destaques */
    --cor-texto: #333333;            /* Cor do texto principal */
    --cor-texto-claro: #ffffff;      /* Cor do texto sobre fundos escuros */
    --cor-fundo-claro: #f5f5f5;      /* Fundo cinza claro */
    --cor-fundo-escuro: #222222;     /* Fundo quase preto */
    --cor-borda: #dddddd;            /* Cor das bordas */
}

/* 
==============================================
3. FONTES (fácil edição)
==============================================
Altere estas variáveis para mudar as fontes em todo o site
*/

:root {
    --fonte-principal: 'Arial', sans-serif;
    --fonte-titulos: 'Arial', sans-serif;
    --tamanho-texto-normal: 16px;
    --tamanho-titulo-grande: 36px;
    --tamanho-titulo-medio: 24px;
    --tamanho-titulo-pequeno: 18px;
}

body {
    font-family: var(--fonte-principal);
    font-size: var(--tamanho-texto-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulos);
}

h1 {
    font-size: var(--tamanho-titulo-grande);
}

h2 {
    font-size: var(--tamanho-titulo-medio);
}

h3 {
    font-size: var(--tamanho-titulo-pequeno);
}

/* 
==============================================
4. CABEÇALHO
==============================================
*/

.header {
    background-color: #ffffff;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 50px;
    width: auto;
}

/* Menu mobile */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #183f17;;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}

.nav-container {
    display: flex;
}

.nav-menu {
    display: flex;
    list-style: none;
}

.nav-menu li {
    margin-left: 20px;
}

.nav-menu a {
    color: #183f17;
    text-decoration: none;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 6px;
    letter-spacing: .3px;
    transition: all 0.25s;
}

.nav-menu a:hover {
    background-color: rgba(24,63,23,.08);
    color: #0d2e0d;
}

/* Link para apresentação institucional */
.institucional-link {
    display: flex;
    align-items: center;
}

.institucional-link i {
    margin-right: 5px;
}

/* 
==============================================
5. CARROSSEL DE BANNERS
==============================================
*/

/* Contêiner do carrossel */
.carousel {
    padding: 0px 0px;
    position: relative;
    height: 500px;
    overflow: hidden;
}

/* Wrapper para os slides */
.carousel-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

/* Slides individuais do carrossel */
.carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    color: var(--cor-texto-claro);
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Overlay escuro para melhorar a legibilidade do texto */
.carousel-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
}

/* Conteúdo do slide */
.carousel-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Estilos para título, texto e botão */
.carousel-slide h1 {
    font-size: 48px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-slide p {
    font-size: 20px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Navegação do carrossel (botões de anterior/próximo) */
.carousel-nav {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-dot.active {
    background-color: white;
}

/* Botões de navegação */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-btn-prev {
    left: 20px;
}

.carousel-btn-next {
    right: 20px;
}

/* 
==============================================
6. SEÇÃO SOBRE
==============================================
*/

.about {
    background-color: var(--cor-fundo-claro);
}

.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-title {
    text-align: center;
    margin-bottom: 40px;
    color: var(--cor-secundaria);
}

.about-title h2 {
    font-size: 32px;
    color: var(--cor-primaria);
}

.about-content {
    max-width: 800px;
    text-align: center;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    width: 100%;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 45%;
    max-width: 300px;
}

.stat-number {
    font-size: 48px;
    font-weight: bold;
    color: var(--cor-primaria);
    margin-bottom: 10px;
}

.stat-text {
    font-size: 18px;
    color: var(--cor-secundaria);
}

/* Banner da apresentação institucional */
.institucional-banner {
    width: 100%;
    margin-top: 50px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.institucional-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(230, 168, 0, 0.1) 0%, rgba(255, 153, 0, 0.2) 100%);
    z-index: 1;
}

.institucional-banner-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    text-align: center;
}

.institucional-banner h3 {
    color: var(--cor-primaria);
    font-size: 24px;
    margin-bottom: 15px;
}

.institucional-banner p {
    margin-bottom: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.institucional-banner .btn i {
    margin-right: 8px;
}

/* 
==============================================
7. SEÇÃO SERVIÇOS
==============================================
*/

.services {
    background-color: white;
}

.services-title {
    text-align: center;
    margin-bottom: 40px;
}

.services-title h2 {
    color: var(--cor-primaria);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid rgba(0,0,0,.04);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(0,0,0,.14);
    border-color: rgba(200,160,0,.5);
}

.service-card h3 {
    color: var(--cor-primaria);
    padding: 20px 20px 10px 20px;
}

.service-card p {
    padding: 0 20px 20px 20px;
}

.service-card ul {
    padding: 0 20px 20px 40px;
}

.service-card li {
    margin-bottom: 8px;
}

/* 
==============================================
8. SEÇÃO FROTA
==============================================
*/

.fleet {
    background-color: var(--cor-fundo-claro);
}

.fleet-title {
    text-align: center;
    margin-bottom: 40px;
}

.fleet-title h2 {
    color: var(--cor-primaria);
}

.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.fleet-item {
    background-color: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.09);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid rgba(0,0,0,.04);
}

.fleet-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 56px rgba(0,0,0,.15);
    border-color: rgba(200,160,0,.3);
}

.fleet-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fleet-item:hover img {
    transform: scale(1.06);
}

.fleet-item-content {
    padding: 20px;
}

.fleet-item h3 {
    color: var(--cor-primaria);
    margin-bottom: 10px;
}

.fleet-item p {
    color: var(--cor-texto);
}

/* Rodapé da seção de frota */
.fleet-footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.fleet-footer p {
    margin-bottom: 15px;
    color: var(--cor-secundaria);
}

.fleet-footer .btn i {
    margin-right: 8px;
}

/* 
==============================================
9. SEÇÃO PORTFÓLIO
==============================================
*/

.portfolio {
    background-color: white;
    padding: 80px 0;
}

.portfolio-title {
    text-align: center;
    margin-bottom: 50px;
}

.portfolio-title h2 {
    color: var(--cor-primaria);
    font-size: 32px;
    margin-bottom: 15px;
}

.portfolio-subtitle {
    color: var(--cor-secundaria);
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 30px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.portfolio-item {
    background-color: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid rgba(0,0,0,.04);
}

.portfolio-image {
    height: 250px;
    overflow: hidden;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-content {
    padding: 25px;
}

.portfolio-content h3 {
    color: var(--cor-primaria);
    font-size: 20px;
    margin-bottom: 15px;
}

.portfolio-description {
    color: var(--cor-texto);
    margin-bottom: 15px;
    line-height: 1.6;
}

.portfolio-location {
    color: var(--cor-secundaria);
    font-size: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--cor-borda);
}

.portfolio-location strong {
    font-weight: bold;
}

.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 60px rgba(0,0,0,.18);
    border-color: rgba(200,160,0,.3);
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
}

/* Rodapé da seção de portfólio */
.portfolio-footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: var(--cor-fundo-claro);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.portfolio-footer p {
    margin-bottom: 15px;
    color: var(--cor-secundaria);
}

.portfolio-footer .btn i {
    margin-right: 8px;
}

/* 
==============================================
10. SEÇÃO CONTATO
==============================================
*/

.contact {
    background-color: white;
}

.contact-title {
    text-align: center;
    margin-bottom: 40px;
}

.contact-title h2 {
    color: var(--cor-primaria);
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.contact-info {
    flex: 1;
    min-width: 300px;
}

.contact-info h3 {
    color: var(--cor-primaria);
    margin-bottom: 20px;
}

.contact-details {
    margin-bottom: 30px;
}

.contact-details h4 {
    margin-bottom: 10px;
    color: var(--cor-secundaria);
}

.contact-form {
    flex: 1;
    min-width: 300px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
}

.form-group textarea {
    height: 150px;
}

/* 
==============================================
11. RODAPÉ
==============================================
*/

.footer {
    background-color: var(--cor-fundo-escuro);
    color: var(--cor-texto-claro);
    padding: 40px 0;
    text-align: center;
}

.footer p {
    margin-bottom: 10px;
}

.social-links {
    margin-top: 20px;
    margin-bottom: 15px;
}

.social-links a {
    color: var(--cor-texto-claro);
    margin: 0 10px;
    font-size: 20px;
}

.footer-links {
    margin-top: 15px;
}

.footer-links a {
    color: var(--cor-texto-claro);
    text-decoration: underline;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--cor-primaria);
}

/* 
==============================================
12. BOTÕES
==============================================
*/

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    background: linear-gradient(135deg, var(--cor-primaria), #2d6a2d);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .4px;
    transition: all 0.25s;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(26,74,26,.3);
}

.btn:hover {
    background: linear-gradient(135deg, #2d6a2d, var(--cor-primaria));
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(26,74,26,.45);
}

.btn-secondary {
    background-color: var(--cor-secundaria);
}

.btn-secondary:hover {
    background-color: #444444;
}

/* 
==============================================
13. RESPONSIVIDADE
==============================================
*/

@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    /* Menu mobile */
    .mobile-menu-btn {
        display: block;
        order: 3;
    }
    
    .header-container {
        justify-content: space-between;
    }
    
    .logo {
        margin-bottom: 0;
    }
    
    .nav-container {
        flex-basis: 100%;
        order: 4;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        width: 100%;
    }
    
    .nav-container.active {
        max-height: 100vh;
        overflow-y: auto;
    }
    
    .nav-menu {
        flex-direction: column;
        width: 100%;
        padding: 10px 0;
    }
    
    .nav-menu li {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }
    
    .nav-menu a {
        display: block;
        padding: 15px;
        font-size: 18px;
    }
    
    /* Outras seções responsivas */
    .carousel {
        height: 400px;
    }
    
    .carousel-slide h1 {
        font-size: 36px;
    }
    
    .carousel-slide p {
        font-size: 18px;
    }
    
    .stats-container {
        flex-direction: column;
        align-items: center;
    }
    
    .stat-item {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .contact-container {
        flex-direction: column;
    }
    
    .portfolio {
        padding: 60px 0;
    }
    
    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
    
    .portfolio-image {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .carousel-slide h1 {
        font-size: 28px;
    }
    
    .carousel-slide p {
        font-size: 16px;
    }
    
    section {
        padding: 40px 0;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio-title h2 {
        font-size: 28px;
    }
    
    .portfolio-subtitle {
        font-size: 16px;
    }
    
    .portfolio-content {
        padding: 20px;
    }
}