body {
    background: #fdfefd;
}
.navbar {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 9999999;
    border-bottom: 5px solid #e3e3e3dd;
}
.navbar-nav {    
    width: 70%;    
    position: absolute;    
    right: 0%;
}
.nav-item {    
    padding-right: 6%;
}

.nav-link{
    font-size: 10pt !important;
}
.banner_video {    
    display: flex;    
    margin-top: 8%;    
    margin-left: 11%;    
    margin-right: 11%;    
    margin-top: 15%;
}
.intro__illustration {    
    width: 100%;
}
.banner_video h1 {    
    font-size: 35pt;    
    color: #3c6797;
}
.banner_video p {    
    font-size: 14pt;
}

.banner_principal{
    margin-top: 6%;
    padding-bottom: 2%;
}
.btn-custom {    
    background: #3c6797;    
    color: #fff;    
    border-radius: 1px;    
    padding-top: 3%;    
    padding-bottom: 3%;    
    font-size: 13pt;    
    font-weight: 600;    
    border-radius: 30px;
}
.btn-custom:hover {    
    background: #305279;    
    color: #fff;
}
.Atendimento_wand {    
    text-align: 
    center;    
    margin-top: 5%;
}
.Atendimento_wand h2 {    
    font-size: 25pt;    
    font-weight: 700 !important;    
    color: #3c6797;
}
.Atendimento_wand h5 {    
    font-size: 25pt;    
    font-weight: 700 !important;    
    color: #3c6797;
}

.card_item p {    
    font-size: 12pt;
}
.card_flex {    
    display: flex;    
    justify-content: space-evenly;    
    flex-wrap: wrap;
}
.card_config {    
    margin-top: 5%;    
    margin-bottom: 7%;
}
.banner-horizontal {    
    width: 1020px;    
    border-radius: 70px;    
    -webkit-box-shadow: 5px 21px 36px -11px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 5px 21px 36px -11px rgba(0, 0, 0, 0.75);    
    box-shadow: 5px 21px 36px -11px rgba(0, 0, 0, 0.75);}

.primeiro_banner {    
    display: flex;    
    justify-content: center;    
    margin-top: 5%;
}
.card_servicos_config {    
    margin-top: 5%;    
    display: flex;    
    justify-content: center;    
    margin-left: 5%;    
    margin-right: 5%;
}
.card {    
    border-radius: 30px !important;    
    border: none;    
    -webkit-box-shadow: 5px 21px 36px -11px rgba(0, 0, 0, 0.75);    
    -moz-box-shadow: 5px 21px 36px -11px rgba(0, 0, 0, 0.75);    
    box-shadow: 3px 7px 23px -9px rgba(0, 0, 0, 0.75);
}
.card-img-top {    
    border-radius: 30px 30px 0px 0px !important;
}
.card-body {    
    text-align: center;
}
.card-title {    
    font-size: 16pt;    
    font-weight: 700;    
    padding-bottom: 3%;
}
.btn-customCard {    
    background: #3c6797;    
    color: #fff;    
    border-radius: 1px;    
    padding-top: 1%;    
    padding-bottom: 1%;    
    font-size: 13pt;    
    font-weight: 600;    
    border-radius: 30px;
}
.btn-customCard:hover {    
    background: #305279;    
    color: #fff;
}

.quemsomos_texto  {    
    margin-left: 5%;    
    margin-right: 5%;    
    font-size: 11pt;    
    margin-bottom: 5%;
}
.quemsomos_texto li h3 {    
    font-size: 12pt;    
    font-weight: 400;
}
.quemsomos_texto h4 {    
    text-align: center;    
    font-weight: 700;    
    color: #3c6797;
}

.accordion {    
    width: 70%;    
    margin-left: 15%;}
.accordion-item {    
    border-radius: 30px !important;    
    margin-bottom: 1%;
}

.quemsomos_texto .accordion-header {    
    padding-left: 17px;
    padding-right: 17px;
    background-color: #c0c0c0;
    border-radius: 30px;
}

.quemsomos_texto .accordion-item {    
    border: none;
}

.accordion-header {    
    padding-left: 17px;
    padding-right: 17px;
}
.accordion-button:focus {    
    box-shadow: none;
}
.accordion-button {    
    background: transparent;
}
.accordion-button:not(.collapsed) {    
    background: transparent !important;
}
.carousel-item .img-mobile {    
    display: none;


}.carousel-item .img-desktop {    
    display: block;
}
/* .pilares_compra_config {    
    margin-top: 2%;    
    margin-left: 5%;    
    margin-right: 5%;
}
.nossos_produtos {    
    margin-top: 2%;    
    margin-left: 5%;    
    margin-right: 5%;
}
.card_pilares {    
    display: flex;    
    width: 22%;    
    flex-direction: column;    
    flex-wrap: wrap;    
    align-items: center;    
    text-align: center;
}
.card_produtos {    
    display: flex;    
    width: 26%;    
    flex-direction: column;    
    flex-wrap: wrap;    
    align-items: center;    
    text-align: center;    
    margin-left: 5%;}
    
.pilares_compra_cont {    
    display: flex;    
    justify-content: space-between;
}
.nossos_produtos_cont {    
    display: flex;    
    flex-wrap: wrap;    
    justify-content: left;
}
.card_pilares .img_radius {    
    background: #82addd;
}
.card_produtos .img_radius {    
    padding: 6% !important;
}
.img_radius {    
    background: #3c6797;    
    border-radius: 100%;    
    padding: 10%;    
    position: relative;    
    top: 38px;
}
.conteudo_pilar {    
    background: #d9d9d9;    
    padding-top: 20%;    
    padding-left: 8%;    
    padding-right: 8%;    
    padding-bottom: 20%;    
    border-radius: 0px 0px 150px 150px;    
    height: 360px;
}
.conteudo_pilar h2 {    
    font-size: 20pt;    
    font-weight: 500;
}
.conteudo_produtos {   
    background: #d9d9d9;    
    padding-top: 20%;    
    padding-left: 0%;    
    padding-right: 0%;    
    padding-bottom: 20%;    
    border-radius: 20px;    
    width: 350px;
}
.conteudo_produtos h2 {    
    font-size: 20pt;    
    font-weight: 500;
}
.conteudo_produtos li h3 {    
    font-size: 12pt;    
    font-weight: 400;
}
.conteudo_produtos .accordion {    
    width: 90%;    
    margin-left: 5%;
}
.conteudo_produtos .accordion-header {    
    background: #3c6797;
}
.conteudo_produtos .accordion-button {    
    color: #fff;
}
.conteudo_produtos .accordion-item {    
    background: #e7e5e5;    
    border: transparent;
} */
.footer_config {    
    background: #f8f9fa;    
    max-width: none;
}
.button_flutuante {    
    position: fixed;    
    right: 25px;    
    top: 80%;    
    z-index: 999999;
}
.img_marcas {    
    text-align: center;    
    width: 100%;    
    margin-bottom: 10%;
}

.footer_h1{
    font-size: 10pt;
    color: #545454;
}
@media (max-width: 1000px) {    
    .banner-horizontal {        
        width: 100%;    
    }    
    .accordion {        
        width: 100%;       
        margin-left: 0px;    
    }    
    .navbar-nav {        
        width: 100%;        
        position: initial;    
    }    
    .nav-item {       
        padding-right: 0px;    
    }
}
@media (max-width: 500px) {    
    .carousel-item .img-mobile {        
        display: block;    
    }    
    .carousel-item .img-desktop {        
        display: none !important;    
    }    
    .card_pilares {        
        width: 100%;    
    }    
    .pilares_compra_cont {        
        display: block;        
        justify-content: space-between;    
    }    
    .card_produtos {        
        width: 100%;        
        margin-left: 0px;    
    }    
    .footer_config {        
        text-align: center;    
    }    
    .img_footer {        
        display: flex;        
        justify-content: center;    
    }    
    .banner_video {        
        margin-top: 40%;    
    }
}

.Atendimento_wand {
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
            padding: 0 15px 30px; /* Ajuste o padding inferior */
        }

        .Atendimento_wand h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700; /* Mais negrito para títulos */
            color: #2c3e50; /* Cor mais escura para um look tech */
            font-size: 2.2rem;
            margin-bottom: 20px;
        }

        /* Estilos do botão de contato personalizado */
        .btn-customCard {
            background-color: transparent;
            color: #3498db; /* Azul vibrante */
            border: 2px solid #3498db;
            padding: 0.8rem 1.8rem;
            border-radius: 30px; /* Borda mais arredondada */
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 1.5px;
            text-decoration: none;
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
            display: inline-block; /* Para o padding e o margin funcionarem bem */
        }

        .btn-customCard:hover {
            background-color: #3498db;
            color: #fff;
            transform: translateY(-2px); /* Pequeno efeito de elevação */
        }

        /* --- Estilos para o Slider "Nossos Serviços" --- */
        #servicosCarousel {
            max-width: 1200px; /* Alargue um pouco o carousel de serviços */
            margin: 0 auto;
        }

        #servicosCarousel .carousel-inner {
            padding: 20px 0; /* Espaçamento interno */
        }

        #servicosCarousel .carousel-item{
            width: 70%;
            left: 15%;

        }

        #servicosCarousel .card {
            border: 1px solid #e0e0e0;
            border-radius: 12px; /* Mais arredondado */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Sombra mais pronunciada */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            background-color: #ffffff;
            overflow: hidden; /* Garante que a imagem não vaze */
        }

        #servicosCarousel .card:hover {
            transform: translateY(-5px); /* Efeito de elevação */
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* Sombra maior no hover */
        }

        #servicosCarousel .card-img-top {
            height: 220px; /* Altura fixa para as imagens dos serviços */
            object-fit: cover;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        #servicosCarousel .card-body {
            text-align: center;
            padding: 25px; /* Mais padding */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Alinha o botão no final */
        }

        #servicosCarousel .card-title {
            font-size: 16pt;
            color: #2c3e50;
            margin-bottom: 15px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }

        #servicosCarousel .card-text {
            font-size: 11pt;
            color: #555;
            line-height: 1.6;
            margin-bottom: 25px; /* Mais espaço para o botão */
            flex-grow: 1; /* Ocupa o espaço restante */
        }

        /* Cores dos serviços (mantendo as suas cores) */
        .card .btn-customCard { border-color: #3498db; color: #3498db; }
        .card .btn-customCard:hover { background-color: #3498db; color: #fff; }

        /* --- Estilos para a seção "Pilares de Compra" (Novo Layout) --- */
        .pilares_compra_grid {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 15px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 4 colunas em telas grandes */
            gap: 30px;
        }

        .pilar-item {
            background: #ffffff;
            border-radius: 15px; /* Bordas mais arredondadas */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra mais suave e espalhada */
            padding: 40px; /* Mais padding interno */
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out;
            position: relative; /* Para o efeito de borda na bolha */
            overflow: hidden; /* Garante que a bolha não vaze */
        }

        .pilar-item:hover {
            transform: translateY(-10px); /* Elevação maior */
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Sombra mais intensa */
            background-color: #f8faff; /* Fundo levemente azulado no hover */
        }

        .pilar-item::before {
            content: '';
            position: absolute;
            top: -15px;
            left: -15px;
            width: 50px;
            height: 50px;
            background: #3498db; /* Cor da bolha no canto superior esquerdo */
            border-radius: 50%;
            opacity: 0.1;
            transform: scale(0);
            transition: transform 0.4s ease-out;
            z-index: 0;
        }

        .pilar-item:hover::before {
            transform: scale(3.5); /* Bolha aumenta no hover */
        }

        .pilar-icon {
            width: 120px; /* Ícones maiores */
            height: 120px;
            background-color: #6d9cd1; /* Fundo azul claro para o ícone */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px; /* Mais espaço abaixo do ícone */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 1; /* Acima da bolha de fundo */
        }

        .pilar-icon img {
            max-width: 70%; /* Aumenta um pouco o tamanho da imagem dentro do círculo */
            max-height: 70%;
            filter: grayscale(80%);
            transition: filter 0.4s ease, transform 0.4s ease;
        }

        .pilar-item:hover .pilar-icon img {
            filter: grayscale(0%); /* Colore no hover */
            transform: scale(1.05); /* Pequena animação no ícone */
        }

        .pilar-item h3 {
            font-size: 16pt; /* Título maior */
            color: #2c3e50;
            margin-bottom: 18px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            position: relative;
            z-index: 1;
        }

        .pilar-item p {
            font-size: 11pt; /* Texto maior e mais legível */
            line-height: 1.7;
            color: #555;
            position: relative;
            z-index: 1;
        }

        /* Linha entre os pilares (para desktop, simula um processo) */
        .pilares_compra_grid::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(to right, #e0e0e0, #a0a0a0, #e0e0e0); /* Gradiente para dar profundidade */
            z-index: 0;
            display: none; /* Desativado por padrão, ativado via JS ou quando preciso */
        }
        /* Para simplicidade, vou desativar a linha por CSS puro e focar na grid visual */


        /* --- Estilos para o Slider "Nossos Produtos" --- */
        #produtosCarousel {
            max-width: 1200px;
            margin: 0 auto;
        }

        #produtosCarousel .carousel-inner {
            padding: 20px 0;
        }

        #produtosCarousel .nossos_produtos_cont {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px; /* Espaçamento entre os cards */
        }

        #produtosCarousel .card_produtos {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            padding: 25px;
            text-align: center;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1 1 calc(33.333% - 40px); /* 3 cards por linha em telas maiores, ajusta padding */
            max-width: calc(33.333% - 40px);
        }

        #produtosCarousel .card_produtos:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        #produtosCarousel .card_produtos .img_radius {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: #6d9cd1; /* Azul claro para o círculo */
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 20px; /* Centraliza e adiciona margem inferior */
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
        }

        #produtosCarousel .card_produtos .img_radius img {
            max-width: 65%;
            max-height: 65%;
        }

        #produtosCarousel .conteudo_produtos h2 {
            font-size: 1.4rem;
            color: #3498db; /* Azul para títulos de produtos */
            margin-bottom: 15px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }

        #produtosCarousel .accordion-button {
            font-size: 0.95rem;
            font-weight: 600;
            color: #2980b9; /* Azul mais escuro para o botão do acordeão */
            background-color: transparent;
            border: none;
            padding: 0.5rem 0;
            text-decoration: none;
            box-shadow: none !important;
            transition: color 0.3s ease;
        }

        #produtosCarousel .accordion-button:not(.collapsed) {
            color: #1a5276; /* Cor ainda mais escura quando aberto */
        }

        #produtosCarousel .accordion-body ul {
            list-style: none;
            padding-left: 0;
            margin-top: 10px;
            text-align: center; /* Centraliza os itens da lista */
        }

        #produtosCarousel .accordion-body ul li h3 {
            font-size: 0.95rem;
            color: #666;
            margin-bottom: 8px;
        }

        /* Estilos dos controles e indicadores do Carousel */
        .carousel-control-prev, .carousel-control-next {
            width: 5%;
        }
        .carousel-control-prev-icon, .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 18px; /* Ícones maiores */
            background-size: 50% 50%; /* Ajusta o tamanho da seta dentro do círculo */
        }
        .carousel-indicators [data-bs-target] {
            background-color: #95a5a6; /* Cinza suave */
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: none;
            margin: 0 5px;
            opacity: 0.7;
            transition: opacity 0.3s ease, background-color 0.3s ease;
        }
        .carousel-indicators .active {
            background-color: #3498db; /* Azul vibrante para o ativo */
            opacity: 1;
        }

        

        /* Responsividade geral */
        @media (max-width: 991px) {
            #servicosCarousel .col-md-6 {
                flex: 1 1 calc(50% - 30px); /* 2 cards por linha */
                max-width: calc(50% - 30px);
            }
            .pilares_compra_grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2 colunas */
                gap: 20px;
            }
            .pilar-item {
                padding: 30px;
            }
            .pilar-icon {
                width: 100px;
                height: 100px;
            }
            .pilar-item h3 {
                font-size: 1.5rem;
            }
            .pilar-item p {
                font-size: 1rem;
            }
            #produtosCarousel .card_produtos {
                flex: 1 1 calc(50% - 30px); /* 2 cards por linha */
                max-width: calc(50% - 30px);
            }
        }

        @media (max-width: 767px) {
            .banner_principal{
                margin-top: 18% !important;
            }
            #servicosCarousel .col-md-6,
            #produtosCarousel .card_produtos {
                flex: 1 1 90%; /* 1 card por linha em telas menores */
                max-width: 90%;
                margin: 15px auto; /* Centraliza */
            }
            .pilares_compra_grid {
                grid-template-columns: 1fr; /* 1 coluna */
                gap: 20px;
            }
            .pilar-item {
                padding: 25px;
            }
            .pilar-icon {
                margin-bottom: 20px;
            }
            .Atendimento_wand h2 {
                font-size: 1.8rem;
            }
        }