@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

/* Aplicando a fonte ao parágrafo */
.parisienne-regular {
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;
}

/* Estilos Globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Habilita a rolagem suave em toda a página */
html {
    scroll-behavior: smooth;
}

/* Estilos para o layout da página */
body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Evita rolagem horizontal */
    padding-top: 70px;
    /* Ajuste a altura do menu conforme necessário */
}

/* Ajuste geral */
h1 {
    margin-top: 20px;
    /* Margem superior reduzida */
    margin-bottom: 60px;
    /* Espaçamento maior entre o título e os cards */
    font-size: 2.5rem;
    /* Tamanho opcional do título */
    font-weight: bold;
}

/* ### INICIO MENU ### */

.navbar {
    background-color: #f8f9fa;
    /* Cor de fundo */
}

/* Define a fonte Roboto para todo o menu */
.navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Peso médio da fonte, ajuste conforme necessário */
    color: #333;
}

/* Icons do Menu */
.nav-link i {
    margin-right: 8px;
    /* Espaço entre o ícone e o texto */
    font-size: 1.2rem;
    /* Ajuste do tamanho do ícone */
}

/* Estilo para o hover dos links do menu */
.navbar-nav .nav-link:hover {
    color: red !important;
    /* Altera a cor para vermelho */
    text-decoration: underline;
    /* Adiciona sublinhado */
    text-underline-offset: 1.5rem;
    /* Ajusta a distância do sublinhado em relação ao texto */
    text-decoration-thickness: 3px;
    /* Define a espessura do sublinhado */
    transition: 0.3s ease-in-out;
    /* Transição suave */
}

/* ### BOTÃO MENU ### */

/* Estilo para o ícone do botão de hambúrguer */
/* Altera a cor da borda do botão de hambúrguer */
.navbar-toggler {
    border-color: red;
    /* Cor vermelha para a borda */
}

/* Altera a cor das barras do botão de hambúrguer */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='red' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ### BOTÃO MENU ### */

/* Garante que o menu ocupe a largura toda e fique fixo no topo */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    /* Garante que o menu fique acima do carousel */
}

/* Icone do telefone */
/* Estilo do ícone de telefone com animação de vibração */
.phone-icon {
    font-size: 1.5rem;
    /* Ajuste o tamanho do ícone */
    animation: shake 1.35s ease-in-out infinite;
    /* Animação de vibração */
    color: #D83135;
    /* Cor vermelha */
}

/* Animação de vibração para o ícone de telefone */
@keyframes shake {

    0%,
    15% {
        transform: rotate(0deg);
        /* Posição inicial */
    }

    20%,
    25% {
        transform: rotate(45deg);
        /* Vibra 45º para a direita */
    }

    30%,
    35% {
        transform: rotate(0deg);
        /* Retorna à posição normal */
    }

    40%,
    45% {
        transform: rotate(45deg);
        /* Vibra para a direita novamente */
    }

    50%,
    55% {
        transform: rotate(0deg);
        /* Retorna à posição normal */
    }

    60%,
    100% {
        transform: rotate(0deg);
        /* Pausa */
    }
}


/* ### TÉRMINO MENU ### */

/* ### SLIDE ### */

/* Carousel ocupa a tela inteira (menos a altura do menu fixo) */
#carouselExample {
    height: calc(100vh - 70px);
    /* Ajusta a altura do carousel para ocupar o restante da tela */
}

/* Ajuste do conteúdo do carousel para se ajustar à altura da tela */
.carousel-item {
    height: 100%;
    object-fit: cover;
    /* Garante que a imagem ocupe todo o espaço */
}

/* Melhorar legibilidade do texto no carousel */
.carousel-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 20px;
}

/* Fundo opaco para o texto */
.text-container {
    background-color: rgba(0, 0, 0, 0.5);
    /* Torna o fundo mais opaco */
    padding: 20px;
    text-align: center;
}

/* Ajuste do título e texto no carousel */
.slide-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: clamp(2rem, 6vw, 3.5rem);
    margin-bottom: 10px;
    /* Ajuste do tamanho */
}

.lead {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: clamp(1rem, 4vw, 2rem);
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .carousel-caption {
        padding: 10px;
        text-align: center;
    }

    .slide-title {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
        /* Ajuste o tamanho para telas pequenas */
    }

    .lead {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }

    /* Alinhamento do texto para garantir centralização em telas pequenas */
    .carousel-caption {
        bottom: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Ajustes para dispositivos muito pequenos (menos de 576px) */
@media (max-width: 576px) {
    .carousel-item img {
        object-fit: contain;
        /* Ajuste a proporção da imagem */
        height: auto;
        /* Ajusta a altura para manter a proporção */
    }

    .carousel-indicators {
        bottom: 10px;
    }

    .carousel-indicators button {
        width: 10px;
        height: 10px;
    }

    .slide-title {
        font-size: 18px;
        /* Menor título em dispositivos móveis */
    }

    .lead {
        font-size: 14px;
        /* Texto menor */
    }

    .carousel-caption {
        padding: 5px;
        /* Menos padding para dispositivos menores */
    }
}

/* Estilos gerais do carrossel */
.carousel,
.carousel-item {
    height: 100vh;
    /* Garante que o carrossel ocupe 100% da altura */
    display: flex;
    align-items: center;
    /* Centraliza o conteúdo verticalmente */
    justify-content: center;
    /* Centraliza horizontalmente */
}

/* Imagem ajustada para cobrir todo o espaço do carrossel */
.carousel-item img {
    object-fit: cover;
    /* Garante que a imagem cubra toda a área */
    width: 100%;
    height: 100vh;
}

/* Ajuste da posição e aparência do texto */
.carousel-caption {
    position: absolute;
    bottom: 20%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* Centraliza o texto */
    width: 100%;
    padding: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Ajustes de responsividade no tamanho do título */
.text-container h1 {
    font-size: calc(1.5rem + 3vw);
    /* Ajusta o tamanho */
}

/* Responsividade para os indicadores */
.carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.5);
    /* Cor mais suave para os indicadores */
}

/* Botão propaganda Slider */

/*Centers "button" in the middle of the page*/
.fcc-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    text-transform: uppercase;
    color: #fff;
    background-color: #d9534f;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.fcc-btn:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Responsividade para telas menores */
@media (max-width: 992px) {
    .slide-title {
        font-size: 1.5rem;
    }

    .text-container p {
        font-size: 0.875rem;
    }

    .fcc-btn {
        font-size: 0.875rem;
        padding: 8px 16px;
    }

    .carousel-caption {
        bottom: 15%;
    }
}

@media (max-width: 768px) {
    .carousel-indicators button {
        width: 12px;
        /* Ajuste no tamanho dos indicadores em telas menores */
        height: 12px;
    }
}

/* Ajustes para o estilo do contêiner do texto */
.text-container {
    background-color: rgba(0, 0, 0, 0.0);
    /* Fundo escuro com transparência */
    padding: 20px;
    border-radius: 8px;
}

/* Ajuste do título (h1) dentro do .text-container */
.text-container h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    margin-bottom: 10px;
}

/* Ajuste do parágrafo dentro do .text-container */
.text-container p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-bottom: 20px;
    color: white;
    margin: 0;
}

/* ------------------------------------------------------------------- */

/* ### PAGINA EMPRESA ### */

/* Adiciona um gradiente de águas à seção */
#empresa {
    background: linear-gradient(to right, #7f8383, #e96149);
    /* Gradiente azul esverdeado */
}

/* Garante que todos os cards fiquem com a mesma altura */
.row-equal {
    display: flex;
    flex-wrap: wrap;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: all 0.3s ease;
    /* Transição suave para todas as mudanças */
}

/* Efeito de hover: borda vermelha e sombra nas bordas */
.card:hover {
    border-color: #D83135;
    /* Borda vermelha ao passar o mouse */
    transform: scale(1.05);
    /* Aumenta levemente o tamanho do card */
    box-shadow: 0 4px 10px rgba(216, 49, 53, 0.5);
    /* Sombra vermelha com opacidade */
}

/* Adiciona uma transição suave na cor do título h4 */
.card h4 {
    transition: color 0.3s ease;
    color: #000;
    /* Cor inicial do título (Preta) */
    font-size: 1.2rem;
}

.card .card-content p {
    font-family: 'Raleway', Raleway;
    /* Aplicando a fonte Monotype Corsiva */
    transition: color 0.3s ease;
    color: #D83135;
    /* Cor inicial do título (Vermelha) */
    font-size: 1.3rem;
    line-height: 1.1;
    /* Ajuste do espaçamento entre as linhas */
}

/* Mudar a cor do parágrafo dentro do card ao passar o mouse */
.card:hover .card-content p {
    color: #000;
    /* Cor preta ao passar o mouse */
}

/* Adiciona uma transição suave na cor do ícone */
.card .icon-container i {
    transition: color 0.3s ease;
    color: #000;
    /* Cor inicial do ícone (cor azul do exemplo) */
    font-size: 2.5rem;
}

/* Quando o mouse passar sobre o card, muda a cor do ícone e do título */
.card:hover .icon-container i,
.card:hover h5 {
    color: #D83135;
    /* Cor vermelha do ícone e do título no hover */
}

.card-content {
    flex-grow: 1;
}

/* Estilo para os ícones */
.icon-container {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-container i {
    font-size: 4rem;
}

/* Ajustes para manter o alinhamento */
.col-lg-4 {
    display: flex;
}

/* Ajustes responsivos */
@media (max-width: 768px) {

    .col-lg-4,
    .col-md-12 {
        width: 100%;
        /* Cards em linha única */
    }
}

/* CLIENTES */

/* Estilização principal */
#clientes {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #6c757d, #495057, #343a40);
    color: white;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Container de Clientes */
.clientes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Card de Cliente */
.cliente-card {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.6), rgba(0, 123, 255, 0.2));
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    flex: 1 1 calc(33.333% - 20px);
    /* 3 cards por linha com espaçamento */
    max-width: 220px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

/* Hover no Card */
.cliente-card:hover {
    background: linear-gradient(135deg, #D83135, #D83135);
    transform: translateY(-5px);
    color: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Ícones e textos no Card */
.cliente-card h4 {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: bold;
}

/* Responsividade */

/* Até 992px: 2 cards por linha */
@media (max-width: 992px) {
    .cliente-card {
        flex: 1 1 calc(50% - 20px);
        /* 2 cards por linha */
    }
}

/* Até 768px: 2 cards por linha */
@media (max-width: 768px) {
    .cliente-card {
        flex: 1 1 calc(50% - 10px);
        /* Mantém 2 cards por linha */
    }

    #clientes {
        padding: 10px;
    }

    .clientes-container {
        gap: 10px;
        /* Menor espaçamento entre os cards */
    }
}

/* Até 576px: 1 card por linha */
@media (max-width: 376px) {
    .cliente-card {
        flex: 1 1 100%;
        /* 1 card por linha */
        max-width: 100%;
    }

    h1 {
        font-size: 1.5rem;
        /* Tamanho do título reduzido */
    }

    .cliente-card h4 {
        font-size: 0.9rem;
        /* Tamanho do texto reduzido */
    }
}



/* SERVIÇOS */

/* Seção de Serviços */
#servicos {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: linear-gradient(to bottom, #1e3c72, #2a5298);
    color: white;
}

#servicos h1 {
    margin-top: 20px;
    /* Margem superior reduzida */
    margin-bottom: 60px;
    /* Espaçamento maior entre o título e os cards */
    font-size: 2.5rem;
    /* Tamanho opcional do título */
    font-weight: bold;
    text-align: center;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.card img {
    width: auto;
    /* A largura será ajustada automaticamente */
    height: 100px;
    /* Define a altura fixa */
    object-fit: contain;
    /* Ajusta a imagem para caber sem cortar */
    margin: 0 auto;
    /* Centraliza a imagem horizontalmente */
    display: block;
    /* Garante o alinhamento central */
}

.container .card p {
    color: #D83135;
    /* Cor inicial do título (Vermelha) */
}

.container .card:hover p {
    color: #000;
    /* Cor preta ao passar o mouse */
}

.card h4 {
    color: #D83135;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 20px 0;
}

.card p {
    color: #333;
    font-size: 1rem;
    flex-grow: 1;
}

.icon-container i {
    font-size: 3rem;
    color: #D83135;
}

@media (max-width: 768px) {
    #servicos {
        padding: 60px 15px;
    }

    #servicos h1 {
        font-size: 2rem;
    }

    .card h4 {
        font-size: 1rem;
    }

    .card p {
        font-size: 0.9rem;
    }
}


/* ###### EQUIPAMENTOS REPARADOS ######### */

.cont-slider {
    position: relative;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    /* Espaço no topo */
    margin-bottom: 20px;
    /* Espaçamento padrão abaixo do slider */
}

/* Espaçamento ajustado para diferentes tamanhos de tela */
@media (max-width: 768px) {
    .cont-slider {
        margin-bottom: 20px;
        /* Menos espaço em telas pequenas */
    }
}

@media (min-width: 1200px) {
    .cont-slider {
        margin-bottom: 60px;
        /* Mais espaço em telas grandes */
    }
}


.swiper {
    width: 100%;
    position: relative;
}

/* Estilo para os cards */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid red;
}

/* Estilo para as imagens */
.swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    transition: opacity 0.3s ease-in-out;
    /* Animação de esmaecimento */
}

/* Efeito de esmaecimento no hover */
.swiper-slide:hover img {
    opacity: 0.7;
    /* Reduz a opacidade ao passar o mouse */
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: calc(65% + 20px);
    /* Move os botões levemente para baixo */
    top: 68%;
    /* Centraliza verticalmente */
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 0.3s ease;
    /* Transição suave para ajustes futuros */
}

.swiper-button-next {
    right: 10px;
    /* Ajuste fino para alinhamento horizontal */
}

.swiper-button-prev {
    left: 10px;
    /* Ajuste fino para alinhamento horizontal */
}

/* Ajustes de responsividade */
@media (max-width: 768px) {

    .swiper-button-next,
    .swiper-button-prev {
        width: 35px;
        /* Botões menores para telas médias */
        height: 35px;
        top: 70%;
        /* Garante centralização */
    }
}

/* Responsividade para telas muito pequenas */
@media (max-width: 480px) {

    .swiper-button-next,
    .swiper-button-prev {
        width: 30px;
        /* Reduz tamanho */
        height: 30px;
        top: 65%;
        /* Ajuste fino */
    }
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px;
}

/*
.swiper-pagination {
    bottom: 10px;
    text-align: center;
}
*/


/* PRODUTOS */

#produtos h1 {
    padding-top: 10px;
}

.card-prod {
    height: 250px;
    /* Define uma altura fixa menor */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Garante que os elementos internos fiquem bem distribuídos */
    padding: 10px;
    /* Ajusta o espaço interno */
    box-sizing: border-box;
    /* Inclui padding e borda no cálculo do tamanho */
}

.card img {
    max-height: 150px;
    /* Limita a altura da imagem */
    object-fit: cover;
    /* Garante que a imagem se encaixe no espaço disponível */
    margin-bottom: 10px;
}

.card h3 {
    font-size: 1rem;
    /* Reduz o tamanho do título */
    margin-bottom: 5px;
}

.card p {
    font-size: 0.9rem;
    /* Reduz o tamanho do texto */
    line-height: 1.2;
    /* Ajusta o espaçamento entre linhas */
}

/* MODAL */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    /* Ajuste a opacidade conforme necessário */
}

.modal-img {
    border: 1px solid #D83135;
}

.btn-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1em;
    width: 1em;
    height: 1em;
    color: transparent;
    /* Para remover o fundo visível */
}



/* --------------------------------------------------- */


/* INICIO Icone do WhatsApp */

/* Ícone de WhatsApp flutuante */
.whatsapp-icon {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 50%;
    /* Centraliza verticalmente */
    right: 20px;
    /* Ajusta para o canto direito */
    transform: translateY(50%);
    /* Corrige alinhamento vertical */
    background-color: #25D366;
    /* Cor de fundo WhatsApp */
    color: #fff;
    /* Cor do ícone */
    border-radius: 50%;
    /* Formato circular */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centraliza o ícone dentro do botão */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    /* Sombra leve */
    z-index: 1000;
    /* Sempre visível */
    text-decoration: none;
    font-size: 30px;
    /* Tamanho do ícone */
    animation: pulse 2s infinite;
    /* Animação de pulsar */
    transition: transform 0.3s ease-in-out;
}

/* Animação de pulso */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1) translateY(50%);
    }

    50% {
        transform: scale(1.1) translateY(50%);
    }
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .whatsapp-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .whatsapp-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
        right: 10px;
    }
}


/* TERMINO Icone do WhatsApp */


/* ### INICIO botão volta ao topo ### */

/* Estilo do botão "Voltar ao topo" */
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #d9534f;
    /* Cor de fundo vermelha */
    color: white;
    border: none;
    border-radius: 50%;
    /* Formato redondo */
    display: none;
    /* Inicialmente invisível */
    text-align: center;
    /* Centraliza o conteúdo */
    line-height: 50px;
    /* Alinha verticalmente */
    font-size: 24px;
    /* Tamanho do ícone */
    cursor: pointer;
    /* Cursor de ponteiro */
    z-index: 9999;
    /* Garante que o botão fique acima de outros elementos */
    transition: all 0.3s ease;
    /* Transição suave */
}

/* Exibe o botão quando a rolagem estiver abaixo de 100px */
#backToTop.show {
    display: block;
}

/* Adiciona sombra ao botão quando ele estiver visível */
#backToTop:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* ### TERMINO botão volta ao topo ### */


/* FOOTER */
footer {
    background-color: #333;
    color: #fff;
    padding: 0px;
    text-align: center;
}

footer h3 {
    text-align: center;
    margin-bottom: 20px;
    /* Ajuste o valor conforme necessário */
}


.rodape-div-4-coluna {
    display: flex;
    flex-direction: column;
    /* Organização em coluna */
    align-items: center;
    /* Centraliza horizontalmente */
    justify-content: center;
    /* Centraliza verticalmente */
    gap: 15px;
    /* Espaçamento uniforme entre os itens */
    padding: 20px;
    /* Preenchimento interno */
    text-align: center;
    /* Centraliza o texto */
}

.rodape-div-4-coluna p {
    margin: 0;
    /* Remove margens extras */
    width: 100%;
    /* Garante que os itens ocupem o mesmo espaço */
}

.rodape-div-4-coluna p a {
    font-size: 16px;
    /* Tamanho de fonte mais visível */
    color: white;
    /* Mantém a cor branca */
    text-decoration: none;
    /* Remove o sublinhado */
    display: inline-block;
    /* Mantém o alinhamento dos links */
    width: 100%;
    /* Deixa os links alinhados na mesma largura */
    text-align: left;
    /* Alinha o texto dos links à esquerda */
}

.rodape-div-4-coluna p a:hover {
    color: black;
    /* Cor ao passar o mouse */
    text-decoration: underline;
    /* Adiciona sublinhado no hover */
}

/* Ajuste para centralizar a seção de redes sociais */
.rodape-div-4 .box-redes-sociais {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    /* Centraliza horizontalmente os ícones */
    gap: 10px;
    /* Espaçamento entre os ícones */
}

/* Icones redes sociais */

/* Estilo base para os ícones */
.social-icon {
    position: relative;
    display: inline-flex;
    /* Garante centralização do ícone */
    align-items: center;
    /* Centraliza verticalmente */
    justify-content: center;
    /* Centraliza horizontalmente */
    width: 50px;
    /* Largura do círculo */
    height: 50px;
    /* Altura igual à largura para formar o círculo */
    border-radius: 50%;
    /* Torna o elemento circular */
    background-color: #000;
    /* Cor de fundo padrão */
    transition: background 0.3s ease, transform 0.3s ease;
    /* Transições suaves */
    overflow: hidden;
    /* Garante que o gradiente não ultrapasse os limites */
}

/* Cor padrão dos ícones */
.social-icon i {
    color: #fff;
    /* Cor inicial do ícone */
    font-size: 20px;
    /* Tamanho do ícone */
    transition: color 0.3s ease;
    /* Transição suave para a cor */
}

/* Efeito hover para o Instagram */
.social-icon.instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    transform: scale(1.1);
    /* Ampliação suave ao passar o mouse */
}

.social-icon.instagram:hover i {
    color: #fff;
    /* Ícone fica branco */
}

/* Outros ícones de redes sociais */
.social-icon.facebook:hover {
    background: #1877F2;
    transform: scale(1.1);
}

.social-icon.facebook:hover i {
    color: #fff;
}

.social-icon.whatsapp:hover {
    background: #25D366;
    transform: scale(1.1);
}

.social-icon.whatsapp:hover i {
    color: #fff;
}

.social-icon.twitter:hover {
    background: #1DA1F2;
    transform: scale(1.1);
}

.social-icon.twitter:hover i {
    color: #fff;
}

.social-icon.linkedin:hover {
    background: #0077B5;
    transform: scale(1.1);
}

.social-icon.linkedin:hover i {
    color: #fff;
}

.rodape .div-copy {
    background-color: black;
}

/* MAPA */
.mapas {
    text-align: center;
    width: 100%;

}

/* Ajustar tamanho dos ícones de redes sociais e do círculo para telas menores */
@media (max-width: 768px) {
    .social-icon {
        width: 40px;
        /* Reduz a largura do círculo */
        height: 40px;
        /* Reduz a altura do círculo */
        line-height: 40px;
        /* Centraliza o ícone verticalmente */
        border-radius: 50%;
        /* Mantém o formato circular */
    }

    .social-icon i {
        font-size: 18px;
        /* Tamanho reduzido do ícone */
    }
}

@media (max-width: 480px) {
    .social-icon {
        width: 30px;
        /* Reduz ainda mais o círculo */
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
    }

    .social-icon i {
        font-size: 14px;
        /* Tamanho ainda menor do ícone */
    }
}



ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #fff;
    text-decoration: none;
}


/* RODAPÉ */
.rodape {
    background-color: #d9534f;
    color: white;
    height: auto;
    width: 100%;
    font-size: 16px;
    font-family: Roboto;


}

.rodape h5 {
    font-size: 1.25rem;
    /* Títulos maiores */
    text-transform: uppercase;
    /* Texto em caixa alta */
}

.rodape a {
    font-size: 1rem;
    /* Links maiores */
    transition: color 0.3s ease;
    text-decoration: none;
    color: white;
}

.rodape a:hover {
    color: #000;
    /* Destaque ao passar o mouse */
    border-bottom: 1px solid #000;
}

.rodape p {
    font-size: 1rem;
    /* Parágrafos maiores */
    margin-bottom: 0.5rem;
}

/* Responsividade para telas pequenas */
@media (max-width: 768px) {
    .rodape {
        font-size: 14px;
        /* Ajuste de tamanho em telas menores */
    }

    .rodape h5 {
        font-size: 1.1rem;
    }

    .rodape p,
    .rodape a {
        font-size: 0.9rem;
    }
}

/* Ajustar tamanho do H1 no footer em telas menores */
@media (max-width: 768px) {
    footer h1 {
        font-size: 22px;
        /* Tamanho reduzido para tablets */
    }
}

@media (max-width: 480px) {
    footer h1 {
        font-size: 18px;
        /* Tamanho ainda menor para smartphones */
    }
}


.rodape-div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    align-items: stretch;
    padding: 0px 0px 0x 0px;


}

.rodape-div-1,
.rodape-div-2,
.rodape-div-3,
.rodape-div-4 {
    display: flex;
    width: calc(100% / 4 - 0px);
    padding: 10px;



}

.rodape span {
    font-size: 20px;
    color: white;
}

.rodape-direitos {
    width: calc(100% - 20px);
    background-color: black;
    padding: 10px;
    margin: 0px;
    text-align: center;
}

/*mobile*/
@media (max-width: 768px) {

    .rodape-div-1,
    .rodape-div-2,
    .rodape-div-3,
    .rodape-div-4 {
        width: calc(50% - 20px);
        padding: 10px;

    }

    .rodape-div {
        padding: 0px 0px 0px 0px;
    }
}


/*Fomulario CONTATO*/


/* Centralizar a seção */
#contatos {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Garante que a altura ocupe 100% da altura da tela */
    min-height: 100vh;
    padding-top: 50px;
    margin: 0 auto;
    background: linear-gradient(to right, #d3d3d3, #a9a9a9);
    /* Gradiente cinza */
    overflow: hidden;
    /* Impede que o gradiente invada outras seções */
}

#contatos h1 {
    padding-top: -10px;
    margin-bottom: -10px;
    margin-top: 5px;
}

/* Ajustar o tamanho do h1 em telas menores */
@media (max-width: 768px) {
    #contatos h1 {
        font-size: 20px;
        /* Ajuste o tamanho da fonte */
    }
}

@media (max-width: 480px) {
    #contatos h1 {
        font-size: 16px;
        /* Ajuste ainda menor para telas muito pequenas */
    }
}

#contatos p {
    color: black;
    font-size: 16px;
}

/* Ajustar o tamanho do p em telas menores */
@media (max-width: 768px) {
    #contatos p {
        font-size: 14px;
        /* Tamanho reduzido para tablets */
    }
}

@media (max-width: 480px) {
    #contatos p {
        font-size: 12px;
        /* Tamanho ainda menor para smartphones */
    }
}


/* Ajustar o tamanho do formulário */
.box-formulario {
    max-width: 700px;
    width: 100%;
    height: auto;
    padding: 20px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.formulario {
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(247, 3, 3, 0.774);
    background: linear-gradient(to right, #d3d3d3, #a9a9a9);
    /* Gradiente cinza */
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Espaço uniforme entre elementos */
    height: auto;
    text-align: center;
    border: 1px solid #D9534F;
}

/* Responsividade */
@media (max-width: 768px) {
    #contatos {
        padding: 10px;
    }

    .form-row {
        flex-direction: column;
        gap: 15px;
    }
}

/* Títulos */
.title-form {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.subtitle-form {
    font-size: 14px;
    color: #666;
}

/* Estilo dos campos de entrada */
.input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input {
    display: inline-block;
    width: 100%;
    padding: 10px 0 13px 95px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease-in-out;
}

/* Placeholder personalizado */
.input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 300;
}

/* Label animado */
.input+label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
    background: #d9534f;
    color: white;
    transition: all 0.4s ease-in-out;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    transform-origin: left bottom;
    z-index: 1;
}

.input+label:before,
.input+label:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    background: #d9534f;
    transform-origin: left bottom;
    transition: all 0.4s ease-in-out;
    pointer-events: none;
    z-index: -1;
}

.input+label:before {
    background: rgba(0, 0, 0, 0.5);
    z-index: -2;
    right: 20%;
}

/* Campos em foco ou ativos */
.input:focus,
.input:active {
    color: #d9534f;
    padding: 10px 0 13px 60px;
    background: #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.input:focus::-webkit-input-placeholder,
.input:active::-webkit-input-placeholder {
    color: #d9534f;
}

.input:focus+label,
.input:active+label {
    transform: rotate(-45deg);
    border-radius: 4px;
}

.input:focus+label:before,
.input:active+label:before {
    transform: rotate(10deg);
}

/* Campo mensagem */
textarea.input {
    resize: none;
    height: 100px;
    /* Altura do campo de mensagem */
}

/* Linha com email e telefone */
.form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

.form-row .input-container {
    flex: 1;
    /* Cada campo ocupa o mesmo espaço */
}

.form-row span {
    flex: 1;
}

/* Botão */
.botao.rotacao {
    padding: 10px 20px;
    /* Reduz o tamanho do botão */
    font-size: 16px;
    /* Texto menor */
    font-weight: bold;
    background: #D9534F;
    /* Gradiente cinza */
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    display: block;
    /* Garante que o botão ocupe uma linha */
}

.botao.rotacao:hover {
    transform: scale(1.01);
    /* Aumenta ligeiramente no hover */
}


/* Responsividade */
@media (max-width: 768px) {
    #contatos {
        min-height: auto;
        /* Deixa a altura do container ajustada conforme o conteúdo */
    }
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
}

/* MODAL Contatos */

/* Estilo geral do modal */
.modal-sucesso {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fundo escuro translúcido */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out; /* Animação ao aparecer */
}

/* Animação de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Conteúdo do modal */
.modal-sucesso-conteudo {
    background: #ffffffa4;
    border-radius: 12px;
    border: 4px solid #000;
    width: 70%;
    max-width: 350px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideIn 0.4s ease-out; /* Animação de entrada */
    position: relative;
}

/* Animação de entrada do conteúdo */
@keyframes slideIn {
    from {
        transform: translateY(-30px);
    }
    to {
        transform: translateY(0);
    }
}

/* Ícone de sucesso */
.modal-icone {
    font-size: 50px;
    color: #4CAF50; /* Verde de sucesso */
    margin-bottom: 15px;
}

/* Título do modal */
.modal-sucesso-conteudo h2 {
    font-size: 1.2rem;
    color: #0a0a0a;
    margin-bottom: 10px;
}

/* Texto do modal */
.modal-sucesso-conteudo p {
    font-size: 1rem;
    color: #0a0a0a;
    line-height: 1.6;
}

/* Botão de fechar fora do modal */
.fechar-sucesso {
    position: absolute;
    top: -15px; /* Coloca o botão fora do modal */
    right: -15px; /* Coloca o botão fora do modal */
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: #d83134;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 10000; /* Certifica que o botão fica acima do modal */
}

.fechar-sucesso:hover {
    background: #d83134;
    color: #fff;
    transform: scale(1.1); /* Aumenta levemente o botão ao passar o mouse */
}

/* CSS responsivo para dispositivos menores */
@media (max-width: 768px) {
    .modal-sucesso-conteudo {
        width: 95%;
        padding: 15px 20px;
    }

    .modal-sucesso-conteudo h2 {
        font-size: 20px;
    }

    .modal-sucesso-conteudo p {
        font-size: 14px;
    }

    .modal-icone {
        font-size: 40px;
    }

    .fechar-sucesso {
        width: 35px;
        height: 35px;
        font-size: 16px;
        top: -12px;
        right: -12px;
    }
}

@media (max-width: 480px) {
    .modal-sucesso-conteudo {
        padding: 10px 15px;
        border-width: 2px; /* Reduz a borda em telas muito pequenas */
    }

    .modal-sucesso-conteudo h2 {
        font-size: 18px;
    }

    .modal-sucesso-conteudo p {
        font-size: 12px;
    }

    .modal-icone {
        font-size: 35px;
    }

    .fechar-sucesso {
        width: 30px;
        height: 30px;
        font-size: 14px;
        top: -10px;
        right: -10px;
    }
}












/*Redes Sociais */

ul.box-redes-sociais {

    display: flex;
    background: transparent;
    width: 305px;
    float: none;
    margin: auto;
}

ul.box-redes-sociais li {
    list-style: none;
    margin: auto;
}

ul.box-redes-sociais li a {

    width: 50px;
    height: 50px;
    background-color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 22px;
    margin: 0 5px;
    display: block;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 2px solid #eaeaea;
    z-index: 1;
}

ul.box-redes-sociais li a .icon {
    position: relative;
    color: #262626;
    transition: .3s;
    z-index: 3;
}

ul.box-redes-sociais li a:hover .icon {
    color: #fff;
    scale: 1.2;
}

ul.box-redes-sociais li a:before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 100%;
    background: #f00;
    transition: .6s;
    z-index: 2;
}

ul.box-redes-sociais li a:hover:before {
    top: 0;
}

/*
ul.box-redes-sociais li.instagram a:before {
    background: hsl(0 0% 10%);
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
    */