@import url("aos.css");
@import url("floating-wpp.min.css");
@import url("font-awesome.css");

:root{
    --cor1: #27ae60;
    --cor2:#2ecc71;
    --cor3: #ffffff;
    --cor4: #000000;
    --nav-color: #0C0C0C;
    --call-to-action: #353636;
}

*{
    box-sizing: border-box;
}
a{
    color: var(--cor3);
    text-decoration: none;
}
p{
    color: var(--cor3);
}
body{
    /* font-family: 'Open Sans', sans-serif; */
    margin: 0;
    background-color: #2b2b2b;
}

h1, h2, h3{
    /* font-family: 'Roboto', sans-serif; */
    /* font-weight: bold; */
    font-size: 1.5em;
    color: var(--cor3);
}
h1, h3, p{
    padding: 0;
    margin: 0;
}

.justify{
    text-align: justify !important;
}

.portifolio-img{

    padding-bottom: 15px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.title-nav{
    color: var(--cor3) !important;
}

button:hover{
    animation: treme 0.1s;
    animation-iteration-count: 3;
}

.subtitulo-servicos{
    font-size: 1.5rem;
}.servico-descricao{
    background-color: #353636;
}

.bg-site{
    background-color: #2b2b2b !important;
}

body {
    font-size: 16px;
}

.carousel-control-next, 
.carousel-control-prev {
    opacity: 0 !important;
}
menu {
    padding-left: 0px;
    margin-top: 0px;
}

.centralizado {
    text-align: center;
}

.title-color{
    color: var(--cor3) !important;
}

.title-1 {
    font-family: "apple-chancery", sans-serif;
    margin-top: .3rem;;
}

.call-to-action{
    background-color: var(--call-to-action);
}

.img-12 {
    display: flex;
    justify-content: center; /* Alinha as imagens horizontalmente ao centro */
    align-items: center;    /* Alinha as imagens verticalmente ao centro */
    flex-wrap: wrap;        /* Permite que as imagens quebrem linha se necessário */
}
.img-12 img {
    margin: 0px; /* Espaçamento entre as imagens */
    width: 180px; /* Largura fixa para as imagens */
    height: 250px; /* Altura fixa para as imagens */
    object-fit: cover; /* Ajusta a imagem para cobrir o espaço definido */
}

/* Tamanho padrão do texto */
.title-1 {
    font-size: 24px; /* Ajuste conforme necessário */
     /*Preciso alinha o titulo-1 no centro*/

}



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

.nav-button{
    position: absolute;
    right: 0px;
    margin-top: .51rem;
    margin-right: .5rem;
}
.nav-img{
    position: absolute;
    left: 0px;
}
.title-nav {
    color: black;
}

.bg-site {
    background: pink;
}

.t-color1 {
    /* color: hotpink; */
    color: #A665A7;
}

.logo {
    width: 50px;
    height: 50px;
}

.image-de-fundo{
    background-image: url('../img/upload-2024-10/teste-opacidade.webp');
    background-size: cover;
    background-position: center;
}

.bootbox .modal-content {
    background-color: #2b2b2b; /* Altere para a cor desejada */
    color: #e2e2e2; /* Altere a cor do texto, se necessário */
}

input {
    background-color: #1b1b18 !important;
    color: #fff !important; /* Opcional: altera a cor do texto para branco */
}
input:-webkit-autofill {
    background-color: #1b1b18 !important; /* Altera a cor de fundo */
    color: #fff; /* Altera a cor do texto */
}
input:-webkit-autofill:focus {
    background-color: #1b1b18 !important; /* Altera a cor de fundo */
    color: #fff; /* Altera a cor do texto */
}

text, textarea, select {
    background-color: #1b1b18 !important;
    color: #fff !important; /* Opcional: altera a cor do texto para branco */
}

.waves-whatsapp
{
    animation: waves-whatsapp linear 3s infinite;
}

.scale-in-whatsapp-and-waves
{
    animation: waves-whatsapp linear 3s infinite, scale-in .5s cubic-bezier(.25,.46,.45,.94) both !important;
}

@keyframes waves-whatsapp
{
    0%
    {
        box-shadow: 0 8px 10px rgba(48, 191, 57, 0.3), 0 0 0 0 rgba(48, 191, 57, 0.2), 0 0 0 0 rgba(48, 191, 57, 0.2)
    }
    40%
    {
        box-shadow: 0 8px 10px rgba(48, 191, 57, 0.3), 0 0 0 35px rgba(48, 191, 57, 0.2), 0 0 0 0 rgba(48, 191, 57, 0.2)
    }
    80%
    {
        box-shadow: 0 8px 10px rgba(48, 191, 57, 0.3), 0 0 0 55px rgba(48, 191, 57, 0), 0 0 0 26.7px rgba(48, 191, 57, 0.067)
    }
    100%
    {
        box-shadow: 0 8px 10px rgba(48, 191, 57, 0.3), 0 0 0 80px rgba(48, 191, 57, 0), 0 0 0 40px rgba(48, 191, 57, 0.0)
    }
}

@keyframes treme {
    0% {margin-left: 0;}
    25% {margin-left: 5px;}
    50% {margin-left: 0;}
    75% {margin-left: -5px;}
    100% {margin-left: 0;}
  }

/* Tamanho do texto para telas menores que 576px (celulares) */
@media (max-width: 576px) {
    .title-1 {
        margin-top: .5rem;
        font-size: 23px; /* Ajuste conforme necessário */
    }
    .img-12 img {
        width: 33%; /* Largura fixa para as imagens */
        height: 100%; /* Altura fixa para as imagens */
        object-fit: cover; /* Ajusta a imagem para cobrir o espaço definido */
    }
}

/* Tamanho do texto para telas menores que 768px (tablets e celulares) */
@media (min-width:577px) and (max-width: 768px) {
    .title-1 {

        font-size: 25px; /* Ajuste conforme necessário */
    }
    .img-12 img {
        width: 50%; /* Largura fixa para as imagens */
        height: 100%; /* Altura fixa para as imagens */
        object-fit: cover; /* Ajusta a imagem para cobrir o espaço definido */
    }
}
/*
monitores maiores e menores
*/
@media (min-width:769px) and (max-width: 992px){
    .img-12 img {
        width: 50%; /* Largura fixa para as imagens */
        height: 165px; /* Altura fixa para as imagens */
        object-fit: cover; /* Ajusta a imagem para cobrir o espaço definido */
    }
}

@media (min-width:992px ) and (max-width: 1200px){
    .img-12 img {
        width: 225px; /* Largura fixa para as imagens */
        height: 225px; /* Altura fixa para as imagens */
        object-fit: cover; /* Ajusta a imagem para cobrir o espaço definido */
    }
}

/*
monitores maiores
*/
@media (min-width: 1200px){
    .img-12 img {
        width: 180px; /* Largura fixa para as imagens */
        height: 405px; /* Altura fixa para as imagens */
        object-fit: cover; /* Ajusta a imagem para cobrir o espaço definido */
    }

}