body {
            font-family: 'Inter', sans-serif; /* Define a fonte Inter para todo o corpo */
            background-color: #36200b; /* Cor de fundo suave */
            color: #374151; /* Cor de texto padrão */
            line-height: 1.6;
            scroll-behavior: smooth; /* Rolagem suave para links internos */
        }
        .container {
            max-width: 1200px; /* Largura máxima do conteúdo */
            margin: 0 auto; /* Centraliza o container */
            padding: 0 1rem; /* Padding horizontal para telas menores */
        }
        /* Estilos personalizados para o botão de chamada para ação */
        .call-to-action-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 2.5rem;
            border-radius: 9999px; /* Botão arredondado */
            font-weight: 600;
            text-align: center;
            text-decoration: none;
            color: white;
            background: linear-gradient(to right, #5b3c1f, #be7c3d); /* Gradiente de azul */
            box-shadow: 0 10px 20px rgba(169, 101, 18, 0.2); /* Sombra para profundidade */
            transition: all 0.3s ease-in-out; /* Transição suave ao hover */
            transform: translateY(0); /* Posição inicial para animação */
        }
        .call-to-action-button:hover {
            background: linear-gradient(to right,#d2843c ,#be7c3d ); /* Inverte o gradiente ao hover */
           box-shadow: 0 10px 30px rgba(169, 101, 18, 0.2); /* Sombra maior */
            transform: translateY(-3px); /* Leve levantamento */
        }
        .section-title {
            font-size: 2.25rem; /* Tamanho do título da seção para mobile */
            font-weight: 700;
            color: #1f2937; /* Cor escura para o título */
            margin-bottom: 2rem;
            text-align: center;
        }

        .custom-about-section {
    background-color: #3f2b17;
    color: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.custom-about-section .section-title {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.custom-about-section .about-description {
    color: #ffffff;
    font-size: 1.125rem;
    max-width: 48rem;
    margin: 0 auto 2rem auto;
}





        @media (min-width: 768px) { /* Aumenta o tamanho do título para desktop */
            .section-title {
                font-size: 3rem;
            }
        }
        .card {
            
            background-color: #ffffff;
          
            border-radius: 1.5rem; /* Cantos arredondados */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra suave */
            padding: 2rem;
            transition: transform 0.3s ease-in-out;
        }
        .card:hover {
            transform: translateY(-5px); /* Efeito de levantamento ao hover */
        }
        /* Estilo para ícones SVG */
        .icon-small {
            width: 24px;
            height: 24px;
            color: #ecce86; /* Cor dos ícones */
            margin-right: 0.5rem;
            flex-shrink: 0; /* Evita que o ícone encolha */
        }
        /* Estilo para os vídeos incorporados */
        .video-responsive {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            border-radius: 1rem; /* Cantos arredondados para vídeos */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .video-responsive iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        /* Estilo para a imagem de garantia */
        .guarantee-image {
            width: 80px; /* Tamanho da imagem da garantia */
            height: 80px;
            margin-bottom: 1rem;
        }
        /* Estilo para o botão flutuante/fixo */
        .fixed-floating-button {
            position: fixed; /* Fixa o botão na tela */
            bottom: 1.5rem; /* Distância do fundo */
            right: 1.5rem; /* Distância da direita */
            z-index: 1000; /* Garante que o botão esteja sobre outros elementos */
            opacity: 0; /* Começa invisível */
            transform: translateY(50px); /* Começa ligeiramente abaixo */
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transição suave */
        }
        .fixed-floating-button.show {
            opacity: 1; /* Torna visível */
            transform: translateY(0); /* Move para a posição original */
            animation: pulse 2s infinite; /* Animação de pulsação */
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(165, 96, 0, 0.4);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
            }
        }

        /* Animação para elementos que aparecem na tela (ex: ao scroll) */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in.appear {
            opacity: 1;
            transform: translateY(0);
        }

        /* Ajustes responsivos para grids e flexboxes usando Tailwind, mas adicionados para clareza */
        /* Geralmente, Tailwind já cuida disso com suas classes md:, lg: etc. */
        @media (max-width: 640px) { /* Pequenas telas (sm) */
            .grid-cols-1-sm {
                grid-template-columns: 1fr;
            }
            .gap-6-sm {
                gap: 1.5rem;
            }
        }
        @media (min-width: 641px) and (max-width: 768px) { /* Telas médias (md) */
            .grid-cols-2-md {
                grid-template-columns: repeat(2, 1fr);
            }
            .gap-8-md {
                gap: 2rem;
            }
        }