/*
    ---------------------------------------------------------------------
    Programador Profissional - CSS para Vidal Transportes & Logística
    ---------------------------------------------------------------------

    Este arquivo CSS foi estruturado seguindo as melhores práticas de
    desenvolvimento web, incluindo:
    - Reset CSS para consistência entre navegadores.
    - Uso de variáveis CSS para facilitar a manutenção e padronização.
    - Abordagem Mobile-First para responsividade.
    - Organização lógica em seções: Base, Layout, Componentes, Seções.
    - Comentários explicativos para cada bloco de código.
    - Foco em acessibilidade e performance.

    Paleta de Cores:
    --primary-color: #0A2342; (Azul Escuro - Confiança, Profissionalismo)
    --secondary-color: #1E4070; (Azul Médio - Profundidade)
    --accent-color: #FF8C00; (Laranja - Energia, Agilidade, Destaque)
    --text-color: #333333; (Preto Suave)
    --text-light-color: #666666; (Cinza para textos secundários)
    --bg-light: #F8F8F8; (Fundo claro)
    --white-color: #FFFFFF;
    --border-color: #E0E0E0;

    Fontes:
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
*/

/* ---------------------------------------------------------------------
    1. Base & Reset
    --------------------------------------------------------------------- */

/* Reset básico para remover margens e preenchimentos padrão e definir box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Define fontes e cores base para o corpo do documento */
body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white-color);
    -webkit-font-smoothing: antialiased; /* Melhorar renderização de fontes */
    scroll-behavior: smooth; /* Rolagem suave para âncoras */
}

/* Variáveis CSS para cores, fontes e espaçamentos */
:root {
    --primary-color: #0A2342;
    --secondary-color: #1E4070;
    --accent-color: #FF8C00;
    --text-color: #333333;
    --text-light-color: #666666;
    --bg-light: #F8F8F8;
    --white-color: #FFFFFF;
    --border-color: #E0E0E0;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;

    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */
    --spacing-xxl: 4rem;    /* 64px */

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Estilos básicos para links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

/* Estilos para títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; }   /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
h4 { font-size: 1.25rem; }/* 20px */

/* Estilos para parágrafos */
p {
    margin-bottom: var(--spacing-sm);
}

/* Estilos para listas */
ul {
    list-style: none;
}

/* Estilos para imagens responsivas */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
}

/* Estilos para botões */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius-md);
    font-family: var(--font-heading);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--white-color);
}

.btn-primary:hover {
    background-color: darken(var(--accent-color), 10%); /* Exemplo de escurecimento */
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

.btn-secondary:hover {
    background-color: darken(var(--secondary-color), 10%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* Estilos para seções */
.section-padding {
    padding: var(--spacing-xxl) 0;
}

.bg-light {
    background-color: var(--bg-light);
}

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

.section-description {
    font-size: 1.1rem;
    color: var(--text-light-color);
    max-width: 800px;
    margin: 0 auto var(--spacing-xl);
}

/* ---------------------------------------------------------------------
    2. Layout
    --------------------------------------------------------------------- */

/* Container para centralizar o conteúdo */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm); /* Espaçamento lateral para mobile */
}

/* Ajuste de padding para desktop */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-md);
    }
}

/* ---------------------------------------------------------------------
    3. Componentes Específicos
    --------------------------------------------------------------------- */

/* Top Bar */
.top-bar {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: var(--spacing-xs) 0;
    font-size: 0.85rem;
}

.top-bar-content {
    display: flex;
    flex-direction: column; /* Empilha no mobile */
    align-items: center;
    gap: var(--spacing-sm);
}

.top-bar .contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
}

.top-bar .contact-info li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.top-bar .contact-info img {
    width: 16px;
    height: 16px;
    filter: invert(1); /* Ícones brancos */
}

.top-bar .social-media {
    display: flex;
    gap: var(--spacing-sm);
}

.top-bar .social-media img {
    width: 20px;
    height: 20px;
    filter: invert(1);
    transition: transform 0.3s ease;
}

.top-bar .social-media img:hover {
    transform: scale(1.1);
}

/* Navbar */
.navbar {
    background-color: var(--white-color);
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .logo img {
    height: 50px; /* Ajuste o tamanho do logo conforme necessário */
    width: auto;
}

.main-nav .nav-list {
    display: none; /* Esconde o menu no mobile por padrão */
    flex-direction: column;
    width: 100%;
    text-align: center;
    background-color: var(--white-color);
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: var(--shadow-md);
}

.main-nav .nav-list.active {
    display: flex; /* Mostra o menu quando ativo */
}

.main-nav .nav-list li {
    border-bottom: 1px solid var(--border-color);
}

.main-nav .nav-list li:last-child {
    border-bottom: none;
}

.main-nav .nav-list a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--primary-color);
    font-weight: 500;
}

.main-nav .nav-list a:hover {
    background-color: var(--bg-light);
    color: var(--accent-color);
}

.hamburger-menu {
    display: flex; /* Mostra o hambúrguer no mobile */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Garante que o hambúrguer esteja acima do menu */
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

/* Animação do hambúrguer */
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

.nav-cta {
    display: none; /* Esconde o CTA na navbar no mobile */
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white-color);
    padding: var(--spacing-xxl) 0;
    position: relative;
    overflow: hidden; /* Para garantir que a imagem não vaze */
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xl);
}

.hero-text {
    max-width: 700px;
    z-index: 1; /* Garante que o texto fique acima da imagem de fundo */
}

.hero-text h1 {
    color: var(--white-color);
    font-size: 2.8rem; /* Ajuste para mobile */
    margin-bottom: var(--spacing-md);
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
}

.hero-image {
    position: relative;
    width: 100%;
    max-width: 500px; /* Ajuste para mobile */
    z-index: 0;
    opacity: 0.8; /* Suaviza a imagem */
}

.hero-image img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
}

/* Cards de Soluções Ágeis */
.solution-cards-grid {
    display: grid;
    /* Define colunas responsivas: 1 coluna em telas pequenas, e múltiplas colunas em telas maiores */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: var(--spacing-lg); /* Espaçamento entre os cards */
    
    /* Centraliza cada card individualmente dentro de sua célula na grid */
    justify-items: center; 
    
    /* Centraliza o container da grid inteiro na página */
    max-width: 1100px; /* Limita a largura máxima para não esticar demais em telas grandes */
    margin: 0 auto; /* Centraliza o bloco na página */
    padding: var(--spacing-md); /* Adiciona um espaçamento interno para não colar nas bordas em telas pequenas */
}

/* Media query para telas maiores, para garantir 3 colunas como na imagem */
@media (min-width: 768px) {
    .solution-cards-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas em tablets e desktops */
    }
}

.solution-card {
    background-color: var(--white-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    display: flex;
    flex-direction: column; /* Organiza os itens verticalmente */
    /* Removido 'align-items' e 'text-align' gerais para controlar cada elemento individualmente */
    
    height: 100%; /* Garante que o card ocupe toda a altura disponível na célula da grid */
    gap: var(--spacing-sm); /* Espaçamento entre os elementos internos do card (ícone, h3, p, etc.) */
    width: 100%; /* Garante que o card ocupe a largura total da célula da grid */
    max-width: 350px; /* Limita a largura máxima de cada card para um visual mais agradável */
}

.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Estilo para a imagem do ícone */
.solution-card img {
    width: 60px;
    height: 60px;
    display: block; /* Essencial para que 'margin: auto' funcione */
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
    /* O 'gap' do flexbox já cuida do espaçamento abaixo da imagem */
}

/* Estilo para o título H3 */
.solution-card h3 {
    color: var(--secondary-color);
    text-align: center; /* Centraliza o texto do título */
    /* O 'gap' do flexbox já cuida do espaçamento abaixo do título */
}

/* Estilo para o parágrafo de descrição */
.solution-card p {
    color: var(--text-light-color);
    flex-grow: 1; /* Permite que o parágrafo ocupe o espaço restante */
    text-align: left; /* Alinha o texto do parágrafo à esquerda para melhor leitura */
    /* O 'gap' do flexbox já cuida do espaçamento abaixo do parágrafo */
}

/* Estilo para a lista de features */
.solution-card .features-list {
    margin-top: 0; /* Reseta a margem superior, pois o 'gap' já cuida do espaçamento */
    margin-bottom: var(--spacing-md); /* Margem inferior para separar a lista do botão */
    padding-left: 20px; /* Padding padrão para as bolinhas da lista */
    list-style: disc; /* Usa as bolinhas padrão */
    color: var(--text-light-color);
    text-align: left; /* Alinha o texto da lista à esquerda */
    width: 100%; /* Garante que a lista ocupe a largura total do card */
}

.solution-card .features-list li {
    margin-bottom: 5px; /* Espaçamento entre os itens da lista */
}

/* Estilo para o botão de Call to Action */
.solution-card .call-to-action {
    display: block; /* Essencial para que 'margin: auto' funcione */
    margin: 0 auto; /* Centraliza o botão horizontalmente */
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--primary-color); /* Use a cor azul que você deseja para o botão */
    color: var(--white-color);
    border: none;
    border-radius: var(--border-radius-sm); /* Ajuste o raio da borda conforme o design */
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none; /* Se o botão for um link <a> */
}

/* Grid de Produtos e Serviços */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsivo com tamanho mínimo */
    gap: var(--spacing-lg);
}

.service-item {
    background-color: var(--white-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.service-item img {
    width: 50px;
    height: 50px;
    margin: 0 auto var(--spacing-md);
}

.service-item h3 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
}

.service-item p {
    color: var(--text-light-color);
    font-size: 0.95rem;
}

/* Quem Somos */
.about-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    align-items: center;
}

.about-text {
    text-align: center;
}

.about-text h2 {
    color: var(--primary-color);
}

.about-text p {
    color: var(--text-light-color);
    margin-bottom: var(--spacing-sm);
}

.about-image {
    max-width: 100%;
}

.about-image img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

/* Nossos Serviços (Principal) */
.main-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajustei o min-width para 250px para caixas um pouco maiores */
    gap: var(--spacing-lg);
    justify-items: center; /* Isso centraliza cada item (caixa) dentro de sua célula na grid */
    align-items: stretch; /* Isso faz com que as caixas preencham a altura da célula, garantindo alturas uniformes */
    margin-top: var(--spacing-xl); /* Adiciona um espaçamento superior para separar do texto introdutório */
    max-width: 1200px; /* Limita a largura máxima da grid para que não fique muito esticada em telas muito grandes */
    margin-left: auto; /* Centraliza a grid inteira na página */
    margin-right: auto; /* Centraliza a grid inteira na página */
}

.main-service-item {
    background-color: var(--white-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.main-service-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.main-service-item img {
    width: 50px;
    height: 50px;
    margin: 0 auto var(--spacing-md);
    filter: invert(20%) sepia(80%) saturate(2000%) hue-rotate(190deg) brightness(80%) contrast(90%); /* Colore o ícone de azul */
}

.main-service-item h3 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
}

.main-service-item p {
    color: var(--text-light-color);
    font-size: 0.95rem;
}

/* Por Que Escolher a Vidal */
.reason-grid {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna no mobile */
    gap: var(--spacing-lg);
}

.reason-item {
    background-color: var(--white-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reason-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.reason-item img {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md);
    filter: invert(20%) sepia(80%) saturate(2000%) hue-rotate(190deg) brightness(80%) contrast(90%); /* Colore o ícone de azul */
}

.reason-item h3 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
}

.reason-item p {
    color: var(--text-light-color);
}

/* Nossa Frota */
.fleet-grid {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna no mobile */
    gap: var(--spacing-lg);
}

.fleet-item {
    background-color: var(--white-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fleet-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.fleet-item img {
    width: 100%;
    height: 200px; /* Altura fixa para as imagens da frota */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
}

.fleet-item h3 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
}

.fleet-item p {
    color: var(--text-light-color);
}

/* Nossos Clientes */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Duas colunas no mobile */
    gap: var(--spacing-lg);
    align-items: center;
    justify-items: center;
}

.clients-grid img {
    max-width: 120px;
    height: auto;
    filter: grayscale(100%); /* Logos em tons de cinza */
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.clients-grid img:hover {
    filter: grayscale(0%); /* Colore ao passar o mouse */
    opacity: 1;
}

/* Contato */
.contact-grid {
    display: flex;
    flex-direction: column; /* Empilha no mobile */
    gap: var(--spacing-xl);
}

.contact-form-wrapper,
.contact-info-wrapper {
    background-color: var(--white-color);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

.contact-form-wrapper h2,
.contact-info-wrapper h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.contact-form .form-group {
    margin-bottom: var(--spacing-md);
}

.contact-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--text-color);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2); /* Exemplo de sombra de foco */
    outline: none;
}

.contact-form textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
}

.contact-info-wrapper p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-light-color);
}

.contact-info-wrapper p strong {
    color: var(--text-color);
}

.map-placeholder {
    margin-top: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    overflow: hidden; /* Garante que o iframe respeite o border-radius */
    box-shadow: var(--shadow-sm);
}

.map-placeholder iframe {
    border: none;
}

/* Footer */
.main-footer {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding-top: var(--spacing-xxl);
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna no mobile */
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-xxl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h3 {
    color: var(--accent-color);
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
}

.footer-col p,
.footer-col address {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--spacing-sm);
}

.footer-col a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-col a:hover {
    color: var(--accent-color);
}

.footer-logo img {
    height: 60px;
    width: auto;
    margin-bottom: var(--spacing-md);
    filter: brightness(0) invert(1); /* Logo branco */
}

.footer-col.useful-links ul li {
    margin-bottom: var(--spacing-xs);
}

.footer-col.footer-social .social-media {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.footer-col.footer-social .social-media img {
    width: 24px;
    height: 24px;
    filter: invert(1);
    transition: transform 0.3s ease;
}

.footer-col.footer-social .social-media img:hover {
    transform: scale(1.1);
}

.footer-bottom {
    background-color: var(--secondary-color);
    padding: var(--spacing-md) 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    /* As linhas abaixo foram removidas/comentadas para remover o estilo de botão: */
    /* background-color: #25D366; */
    /* color: var(--white-color); */
    /* border-radius: 50%; */
    /* width: 60px; */
    /* height: 60px; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* box-shadow: var(--shadow-lg); */
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.05) translateY(-3px);
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
}

.whatsapp-float img {
    width: 50px;
    height: 50px;
    /* filter: invert(1); */ /* <--- ESTA LINHA FOI REMOVIDA PARA RESTAURAR AS CORES ORIGINAIS DO ÍCONE */
}

/* ---------------------------------------------------------------------
    4. Media Queries (Desktop-first adjustments)
    --------------------------------------------------------------------- */

/* Tablet e Telas Maiores */
@media (min-width: 768px) {
    h1 { font-size: 3.5rem; } /* 56px */
    h2 { font-size: 2.5rem; } /* 40px */
    h3 { font-size: 1.8rem; } /* 28.8px */

    .top-bar-content {
        flex-direction: row; /* Volta para linha no desktop */
        justify-content: space-between;
    }

    .top-bar .contact-info {
        flex-direction: row;
        gap: var(--spacing-md);
    }

    .main-nav .nav-list {
        display: flex; /* Mostra o menu no desktop */
        flex-direction: row;
        position: static; /* Remove posicionamento absoluto */
        box-shadow: none;
        width: auto;
        border-bottom: none;
    }

    .main-nav .nav-list li {
        border-bottom: none;
    }

    .main-nav .nav-list a {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .hamburger-menu {
        display: none; /* Esconde o hambúrguer no desktop */
    }

    .nav-cta {
        display: inline-block; /* Mostra o CTA na navbar no desktop */
    }

    .hero-content {
        flex-direction: row; /* Layout lado a lado */
        text-align: left;
        gap: var(--spacing-xxl);
    }

    .hero-text {
        flex: 1;
    }

    .hero-image {
        flex: 1;
        max-width: 600px;
    }

    .solution-cards-grid {
        grid-template-columns: repeat(3, 1fr); /* Três colunas no desktop */
    }

    .about-content {
        flex-direction: row;
        text-align: left;
    }

    .about-text {
        flex: 2;
    }

    .about-image {
        flex: 1;
        max-width: 400px;
    }

    .reason-grid {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas no tablet */
    }

    .fleet-grid {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas no tablet */
    }

    .clients-grid {
        grid-template-columns: repeat(3, 1fr); /* Três colunas no tablet */
    }

    .contact-grid {
        flex-direction: row;
        justify-content: space-between;
    }

    .contact-form-wrapper,
    .contact-info-wrapper {
        flex: 1;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas no tablet */
    }
}

/* Desktop e Telas Maiores */
@media (min-width: 1024px) {
    h1 { font-size: 4rem; } /* 64px */
    h2 { font-size: 3rem; } /* 48px */
    h3 { font-size: 2rem; } /* 32px */

    .main-nav .nav-list a {
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .reason-grid {
        grid-template-columns: repeat(4, 1fr); /* Quatro colunas no desktop */
    }

    .fleet-grid {
        grid-template-columns: repeat(4, 1fr); /* Quatro colunas no desktop */
    }

    .clients-grid {
        grid-template-columns: repeat(6, 1fr); /* Seis colunas no desktop */
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr); /* Quatro colunas no desktop */
    }
}