body{
background:#f7f8fa;
font-family:Arial,sans-serif;
color:#1f2937;
}
.navbar-custom{
background:#fff;
border-bottom:1px solid #e5e7eb;
padding:18px 40px;
}
.logo{
height:60px;
}
.top-text{
font-size:22px;
font-weight:700;
margin-left:20px;
}
.btn-raises{
background:#0f4677;
color:white;
border:none;
padding:12px 24px;
border-radius:14px;
text-decoration:none;
}
.btn-raises:hover{
background:#0b3559;
color:white;
}
.card-box{
background:white;
border-radius:28px;
box-shadow:0 2px 15px rgba(0,0,0,0.08);
padding:35px;
margin-bottom:30px;
}
.banner{
width:100%;
height:420px;
object-fit:cover;
border-radius:28px 28px 0 0;
}

/* ===== IMAGENS DAS OFICINAS E HOME ===== */

.card img,
.oficina-img,
.banner-img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

/* imagens menores no celular */
@media (max-width: 768px) {

    .card img,
    .oficina-img,
    .banner-img {
        max-height: 160px;
    }

}

/* ===== CARDS MAIS HARMÔNICOS ===== */

.card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: 0.2s;
    height: 100%;
}

.card:hover {
    transform: translateY(-3px);
}

/* ===== CONTEÚDO RESPONSIVO ===== */

.container {
    width: 100%;
    max-width: 1200px;
    padding-left: 16px;
    padding-right: 16px;
}

/* ===== TÍTULOS ===== */

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.6rem;
}

@media (max-width: 768px) {

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    p {
        font-size: 0.95rem;
    }

}

/* ===== BOTÕES MELHORES NO CELULAR ===== */

.btn {
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
}

@media (max-width: 768px) {

    .btn {
        width: 100%;
        margin-top: 8px;
    }

}

/* ===== NAVBAR RESPONSIVA ===== */

.navbar,
.topbar {
    flex-wrap: wrap;
}

@media (max-width: 768px) {

    .navbar,
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

}

/* ===== GRID RESPONSIVO ===== */

.row {
    row-gap: 20px;
}