body, html {
    font-family: Arial, sans-serif;
    background-color: #F4FCFF;
    color: #2C4854;
    margin: 0;
    padding: 0;
    height: 100%;
}
.navbar {
    background-color: #F4FCFF;
}
.navbar-brand, .nav-link {
    color: #8B0000 !important;
    font-weight: bold;
}
.nav-link:hover {
    color: #87CEEB !important;
}

img.logo {
    height: 100%; 
    width: auto; 
    max-height: 150px; 
    max-width: 100%; 
    object-fit: contain; /* Ajusta a imagem dentro do contêiner */
}

/* estilo do carousel */
.carousel-inner img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
}
.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}
.carousel-caption h1 {
    color: #FFFFFF;
    font-size: 2.5rem;
    font-weight: bold;
}

.grid-section img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}
.grid-section img:hover {
    transform: scale(1.05);
}

/* estilo do banner com grid */

.big-banner {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.big-banner img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.big-banner-content {
    background-color: #f8f9fa;
    padding: 16px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.small-banner {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.small-banner:hover {
    transform: translateY(-3px);
    background-color: #e9ecef;
}

.small-banner-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 12px;
}

.message-section {
    background-color: #C5F1F0;
    padding: 40px;
    text-align: center;
    border-left: 5px solid #87CEEB;
}

/* secão do rodapé */
footer {
    background-color: #2C4854;
    width: 100%; /* Ocupa 100% da largura */  
}

footer a {
    color: #ffffff;
    transition: color 0.3s ease; 
}

footer a:hover {
    color: #6be2f1 !important; 
}

footer a i {
    margin-right: 1rem;
}

/* seção do botão whatsapp */
.whatsapp-btn {
    position: fixed;
    bottom: 50px;
    right: 50px;
    background-color: #25D366; /* Cor verde do WhatsApp */
    color: #FFFFFF; /* Cor do ícone */
    width: 60px; /* Largura igual à altura */
    height: 60px; /* Altura igual à largura */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Torna o botão redondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
    font-size: 24px; /* Tamanho do ícone */
    z-index: 999; /* Garante que o botão fique acima de outros elementos */
    transition: background 0.3s; /* Transição suave */
    text-decoration: none; /* Remove sublinhado do link */
}

.whatsapp-btn:hover {
    background-color: #128C7E; /* Cor mais escura ao passar o mouse */
    text-decoration: none; /* Garante que não haja sublinhado */
}

/* Cards de serviços */
.service-card {
    background-color: #f8f9fa;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

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

.service-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.service-content {
    padding: 20px;
    text-align: center;
}

.service-content h5 {
    font-size: 20px;
    font-weight: 700;
    color: #2C4854;
    margin-bottom: 12px;
}

.service-content p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* Responsividade */
@media (max-width: 768px) {
    .service-img {
        height: 180px;
    }
}