body {
    font-family: DM Sans,sans-serif;
    color: #1d1e20;
    background-color: rgb(0, 0, 0)!important;
}

.div-barra-cima {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    color: white;
    padding: 14px;
    background-color: #1b1b1b;
    max-width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    text-align: center;
}


.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    color: red;
    text-rendering: auto;
}

.fa.fa-pinterest-p, .fa.fa-whatsapp {
    color: red;
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

.telefone {
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 11px;
    
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}


.rede{
    float: right;
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

.email {
    float: right;
}



.navbar-collapse {
    transition-duration: 1s;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 0;
    -ms-flex-align: center;
    align-items: center;
}

.navbar-toggler-icon {
   
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    border-radius: 5px;
}


.img-fluid{
    background: linear-gradient(to bottom, #3330, #3330 77%, #000 90%, #00000000 82%);
    width: 100%;

    height: 500px;
}



header, .c



{
    background-color: #ff000000;
    width: 100%;
    padding: 2px;
}

 .cima-nav {
     width: 100%;
     padding: 10px;
}

.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
  padding: 0px;
}

dl, ol, ul {
    display: inline-flex;
    margin-top: 0;
    margin-bottom: 1rem;
}

li {
    list-style-type: none;
  }

.bg-light {
  background-color: #ffffff00!important;

}

.navbar-light .navbar-nav .nav-link {
    font-size: 11px;
    padding: 0.2rem 1rem;
    color: white;
    transition: 0.3s;
    text-transform: uppercase;
    font-family: 'jumper-light-italic', 'Montserrat', sans-serif;
}


.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.nav-link {
    font-size: 13px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    display: block;
    padding: .5rem 1rem;
}

.mb-0, .my-0 {
    display: block;
    margin-bottom: 0!important;
}

.btn-primary {
    color: #000000;
    background: #f0c541;
    border-color: #0063cc00;
}

.btn-primary:hover {
    color: #fff;
    background: #f0c541;
    border-color: #0063cc00;
}

ul, .nav {
    text-align: center;
}

.container-menu {
    background-color: #e51515;
}


.logo {
    margin-right: 43px;
    width: 215px;
}




.w-100 {
    height: 550px;
    width: 100%!important;
}


* {
    margin: 0px;
    padding: 0px;
}

.text-white {
    color: #ffffff!important;
}



p {
    margin-top: 0;
    margin-bottom: 4px;
}

.h2, h2 {
    font-size: 23px;
}



/* Estilos para a seção de depoimentos */
.testimonials {

    padding: 30px 0;
    text-align: center;

}

.testimonial {
    padding: 15px;
  
    margin-bottom: 15px;
    display: inline-block;
    width: 19%;
    border-radius: 10px;
    text-align: center;
   
}

.testimonial img {
    max-width: 100px;
    margin-bottom: 10px;
}

.texto-data {

}

.testimonial p {
    font-size: 12px; /* Tamanho da fonte do texto do depoimento */
    color: white;
}

.testimonial strong {
    color: white;
    font-weight: bold;
}
/* Remover a margem direita do último depoimento */
.testimonial:last-child {
    margin-right: 0;
}


.mr-3, .mx-3 {
    margin-right: 3px!important;
}

.brand-list {
    background-color: #000000;
    padding: 41px 25px;
    text-align: center;
    border-top: 1px solid #ffffff2e;
}

.brand {
    padding-bottom: 30px;
    display: inline-block; /* Exibir marcas em linha */
    margin: 0 10px; /* Espaçamento entre as marcas */
}

.brand img {
    max-width: 120px;
}



.product-list {
    padding: 30px 0;
    text-align: center;  
   
}


.p-3 {
    padding: 0rem!important;
}

.text-uppercase {
    font-size: 13px;
   
    color: rgb(255, 255, 255);
}


.mb-4, .my-4 {
    text-align: left;
    margin-bottom: 2px!important;
}



.text-dark {
    font-size: 13px;
    color: rgb(185, 185, 185) !important;;
}

.product {
    display: inline-block; 
    margin: 0 2px; 
    text-align: center;
}

.product img {
    border-radius: 5px;
    max-width: 100%;
    margin-bottom: -32px;
}



.product p {
    text-align: left;
    padding: 10px;
    width: 100%;
    color: white;
    background: #00000094;
    top: -110px;
    position: relative;
    font-size: 11px;
    margin: 0;
}


.elem {
    background: rgba(218, 9, 9, 0);
    width: 232px;
    height: 150px;
  }



.redessociais {
 
    width: 300px;
    height: 150px;
}


  .elem:hover {
    opacity: 0.5;
  }


  .nav-link:hover {
    color: red;
    opacity: 0.3;
  }

  .sociais {
    float: right;
  }






  @media (min-width: 992px) {

  }
    .navbar-expand-lg {
  
 
      -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      -ms-flex-pack: start;
     justify-content: space-between;
  }


  @media (max-width: 900px) {

  }
    .container {
  
   
  }





.cima-nav, .cima {
    z-index: 999;
    top: 0;
    bottom: 0;
    position: sticky;
}




  .fa-solid, .fas {
    font-size: 11px;
    font-weight: 900;
}
  



/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(0, 0, 0); 
    border-radius: 0px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: red; 
    border-radius: 0px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
  }



 

 
  @media(max-width: 500px)  {
    .mb-4, .my-4  {
      text-align: center!important;
    }
   }



 

.footer {
    background-color: rgba(255, 0, 0, 0); /* Cor de fundo do rodapé */
    color: #fff; /* Cor do texto do rodapé */
    text-align: center;
    padding: 14px;
    border-top: 1px solid #a0a0a023;
}

.footer p {
    margin: 0;
    font-size: 14px;
}




.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.836); /* Cor de fundo do loader */
    z-index: 9999; /* Garante que o loader fique acima de todos os outros elementos */
}

.loader {
    border: 5px solid #ffffff; /* Cor da borda do loader */
    border-top: 5px solid #ff0000; /* Cor da borda superior do loader */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 4s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.section{
    width: 100%;
    height: 100%;
    background-color: #f2f2f200;
    display: none;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    font-size: 24px;
    animation: fadeIn 4.0s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}






.image-container {
    position: relative;
    width: 100%;
}







#logo {
    max-width: 100%;
    height: auto;
    display: block;
    opacity: 0; /* Inicialmente, o logotipo está oculto */
}

@keyframes fadeInLogo {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}



.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #ff0000;
}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: #007bff;
    transition: width 0.3s ease;
}




@media (min-width: 1200px)
{


.container {
    max-width: 1300px;
}}




.navbar-light .navbar-toggler-icon {
    background-image: url(botão-removebg-preview.png);
}


.image-list {
    display: inline-flex;
    flex-wrap: nowrap; /* Impede que os itens quebrem para uma nova linha */
    overflow-x: auto; /* Adiciona uma barra de rolagem horizontal quando necessário */
  }
  
  .image-item {
    text-align: center;
    margin-right: 20px; /* Espaçamento entre os itens */
  }
  
  .image-item img {
    max-width: 100%;
    height: auto;
  }
  
  .image-item p {
    margin-top: 5px;
    font-size: 14px;
    /* Outros estilos de texto, como cor, fonte, etc., podem ser adicionados conforme necessário */
  }
  


  .efeitoimg:hover img {
    transform: scale(0.9); /* Aumenta a escala da imagem ao passar o mouse sobre ela */
  }
  

  .number-container {
text-align: center;
   
}

.number, h4 {
    color: red;
    padding-inline-end: 12px;
    margin-bottom: 0px;
    font-size: 57px;
    font-weight: 700;
    transition: 1s ease-in-out;
    display: inline-flex;
}

.escritamais {
    font-size: 40px;
    color: white;
    padding-inline-end: 12px;
}

.textonumber {
    padding-bottom: 25px;
    color: rgb(255, 255, 255);
}
  

.containernumberscript {
    float: left;
    width: 54%;
   
}









.bg-white {
    background-color: #000!important;
}

.border-bottom {
    border-bottom: 0px solid #dee2e6!important;
}


.text-muted {
    color: #ffffff!important;
}



a {
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.text-uppercase {
    text-transform: uppercase!important;
}

.text-secondary {
    color: #ffe200!important;
}

.fa-solid, .fas {
    color: red;
    padding-inline-end: 7px;
    font-weight: 900;
}

.mb-4, .my-4 {
    text-align: left;
    margin-bottom: 15px!important; 
}










    .gradient {

        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(to right, #ff990000, #ffffff00, #ff3300, #ff0000);
        background-size: 200% 100%;
        animation: gradientMove 2s linear infinite;
    }


@keyframes gradientMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200% 0;
    }
}



.color-changing-div {
    width: 100%;
    color:black;
    transition: background-color 0.3s ease;
}



@media (max-width: 768px)
{

.product img {
    height: 150px;
  
}
}


@media (max-width: 576px)
{


.mb-4, .my-4  {
    text-align: center!important;
    margin-bottom: 15px!important;
}}





@media (max-width: 768px) {
.product {
    width: 47%;
    display: inline-block;
    margin: 0 2px;
    text-align: center;
}}

@media (max-width: 768px) {
    .product p {
        width: 100%;
       
    }}


    @media (max-width: 768px) {
        .tamanhologo{
            width: 32%;
           
        }}

  



@media (max-width: 768px)
{
.elem {
    background: rgba(218, 9, 9, 0);
    width: 100%;
}}



@media (min-width: 768px)
{
.container {
    max-width: 100%;
}}



@media (min-width: 576px) {
.container {
    max-width: 100%;
}}



.logo2 {
    width: 215px;
}


@media (max-width: 768px) {
    .logo2{
       width: 220px;
    }}

    
@media (max-width: 768px) {
    .imagem-container img{
      width: 49%;
    }}
   
    @media (max-width: 768px) {
        .gallery img {
          max-width: 49%;
        }}
       
    


  
 
    

  
    @media (max-width: 768px) {
        .img-fluid  {
            height: 230px;


        }
        .image-container {
            height: 230px;
            position: relative;
            width: 100%;
        }

     
    }
        

    @media (max-width: 768px) {
        .img-fluid {
    width: 100%;

        background-image: url(banner\ sucesso_resized.png);
        }}


        @media (max-width: 768px) {
            .navbar-light .navbar-nav .nav-link  {
            font-size: 7px;
            }}


            @media (max-width: 768px) {
                .navbar-toggler-icon  {
                width: 35px;
                height: 25px;
                }}
        

                .navbar-toggler {
                    padding: 0px;
                    font-size: 1.25rem;
                    line-height: 1;
                    background-color: transparent;
                    border: 1px solid transparent;
                    border-radius: .25rem;
                }


     







        @media (max-width: 768px) {
            .escritamais {
                font-size: 37px;
            }}


            .gallery {
              
                flex-wrap: wrap;
                gap: 20px;
            }
    
          
    
            .gallery img:hover {
                transform: scale(1.1);
            }

            
        
/* Estilos gerais */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    text-align: center;
}

h1 {
    margin: 20px 0;
}

textarea {
    overflow: auto;
    resize: vertical;
    width: 100%;
  }

.imagem-container {
    padding: 20px;
    flex-wrap: nowrap;
    overflow-x: auto; 
    justify-content: center;
    align-items: center;
    gap: 10px; 
    background-color: #ffffff;
}

.imagem-container img {
    padding: 10px;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

#btnScrollToTop {
    display: none;
    position: fixed;
    bottom: 29px;
    left: 88px;
    background-color: #ff0000;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 9px;
}


.hidden-section {
    display: none;
}



.tamanhologo {
    width: 205px;
}


/* Estilo do banner */
.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: auto;
    display: block;
}



.gallery img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}


.whatsapp-button {
    position: fixed;
    bottom: -3px;
    left: 5px;
    color: #fff;
    padding: 7px 20px;
    text-align: center;
    font-size: 13px;
    text-decoration: none;
    background-color: #0c9230;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
          }

          

          .orcamento {
            position: fixed;
            bottom: 18px;
            border-radius: 10px;
            left: 61px;
            font-weight: 600;
            color: #000;
            background: #ffffff;
            padding: 4px 5px;
            text-align: center;
            font-size: 10px;
            text-decoration: none;
          }


        .image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            color: #fff;
            text-align: center;
            padding: 10px;
            background: linear-gradient(to bottom, transparent 0%, black 100%);      
          }


            @media (max-width: 768px) {
                .testimonial p {
            font-size: 6px;
            }}

            @media (max-width: 768px) {
                .testimonial p {
            font-size: 6px;
            }}

            #scrollToTopButton {
                background: #ffffff8f;
                position: fixed;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: none;
    right: 20px;
    bottom: 15px;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
            }
            
            #scrollToTopButton.hidden {
                display: none;
            }
            
            #scrollToTopButton.show {
                display: block;
            }
            
            #scrollToTopButton:hover {
                background-color: #ff0000;
            }

            @media (max-width: 768px) {
                .navbar-light .navbar-nav .nav-link  {
                font-size: 7px;
                }}

                .elem:hover {
                    transform: rotateY(180deg);
                }




                .bolinha {
                    color: red;
                }


                .container {
                    max-width: 1120px;
                    margin: 0 auto;
                    padding-right: 15px;
                    padding-left: 15px;
                }