@import url("assets/fonts/Montserrat.css");

	:root {
	  --cor-primaria: #ff8a00; /* Amarelo */
	  --cor-secundaria: #e52e71; /* Rosa */
	  --cor-fundo: #f8f8f8; /* Cinza claro */
	  --cor-texto: #333; /* Cinza escuro */
	  /*--cor-botao: #e52e71; Rosa para botões */
	  --cor-botao: radial-gradient(circle, rgba(229, 46, 113, 1) 0%, rgba(115, 7, 46, 1) 100%);
	  --fonte-principal: 'Montserrat', sans-serif; 
	  --gradiente-rosa: linear-gradient(to right, var(--cor-secundaria), #7B005C );
	}
	
	html, body {
		scroll-behavior: smooth;
	}

	body {
	  background-color: var(--cor-fundo)!important;
	  color: var(--cor-texto)!important;
	  font-family: var(--fonte-principal);
	  overflow-x:hidden;
	 }
	 main {
		 overflow:hidden;
	 }
	
	.nice-span{
	  color: var(--cor-secundaria); 
	  background: var(--gradiente-rosa);
	   -webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		letter-spacing: 0;
	  font-weight: 900!important;
	  text-transform:uppercase;
	  }
	 
	 .text-bold-uppercase{
		 font-weight:900;
		 text-transform:uppercase;
	 }

	h2{
		text-transform:uppercase;
		
	}
	

	.dropdown-content li > a > i.left {
    	margin-right: 12px;
		color: var(--cor-secundaria)!important;
	}

	.dropdown-content li > a:hover, .dropdown-content li > a.active {
		background-color: var(--cor-secundaria)!important;
		color: #fff!important;
	}


    .tabs-transparent .tab a {
      color: var(--cor-texto)!important;
    }
	
	.tabs .tab a {
      color: var(--cor-texto)!important;
	  font-weight:550!important;
    }

    .tabs .indicator {
      background-color: var(--cor-primaria)!important;
    }
	
	.tabs.tabs-transparent .indicator {
    background-color: var(--cor-secundaria)!important;
	}

    .btn,
    .btn-large,
    .btn-small {
      background: var(--cor-botao)!important;
   font-family:var(--fonte-principal)!important;
   border-radius:18px;
   font-weight: 600!important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .btn::before,
    .btn-large::before,
    .btn-small::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }
     
    .btn:hover,
    .btn-large:hover,
    .btn-small:hover {
      background: radial-gradient(circle at center, rgba(229, 46, 113, 1) 0%, rgba(115, 7, 46, 1.2) 50%, rgba(229, 46, 113, 0.9) 100%)!important;
      transform: scale(1.05) translateY(-3px);
      box-shadow: 0 8px 25px rgba(229, 46, 113, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
      filter: brightness(1.1);
    }
    
    .btn:hover::before,
    .btn-large:hover::before,
    .btn-small:hover::before {
      opacity: 1;
    }
    
    .btn:focus,
    .btn-large:focus,
    .btn-small:focus {
      background: radial-gradient(circle at center, rgba(229, 46, 113, 1) 0%, rgba(115, 7, 46, 1.1) 50%, rgba(229, 46, 113, 0.95) 100%)!important;
      outline: none;
      transform: scale(1.02);
      box-shadow: 0 0 0 3px rgba(229, 46, 113, 0.3), 0 5px 15px rgba(229, 46, 113, 0.3);
    }
    
    .btn:active,
    .btn-large:active,
    .btn-small:active {
      transform: scale(0.98) translateY(-1px);
      box-shadow: 0 3px 8px rgba(229, 46, 113, 0.3), 0 2px 5px rgba(0, 0, 0, 0.15);
      transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .btn span,
    .btn-large span,
    .btn-small span {
      position: relative;
      z-index: 2;
    }
   
	
	.carousel {
		margin-top:40px!important;
		height:100px!important;
	}
	
	
	.collection {
	  border: none;
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	  border-radius: 5px;
	  overflow: hidden;
	}

	.collection-item {
	  margin-left:10px;
	  padding: 15px;
	  border-bottom: 1px solid #e0e0e0;
	  transition: background-color 0.3s ease;
	}
	
	.collection-item i{
	  margin-right:10px;
	  
	}

	.collection-item:last-child {
	  border-bottom: none;
	}

	.collection-item:hover {
	  background-color: #f5f5f5;
	}
	
	section.actuation .btn-large{
		font-size:1em!important;
		border-radius:5px;
	}
	
	.carousel .carousel-item>img {
    
    width: 100px!important; /* Garante que a largura não ultrapasse a largura do contêiner */
    margin: 0 auto; /* Centraliza a imagem dentro do contêiner */
	}


    .contact form {
      background-color: #fff; /* Fundo branco para o formulário de contato */
    }

    .contact button {
      background: var(--cor-botao);
   width:95%;
   display:block;
   margin-bottom:30px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border-radius: 18px;
    }
    
    .contact button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }
    
    .contact button:hover {
      background: radial-gradient(circle at center, rgba(229, 46, 113, 1) 0%, rgba(115, 7, 46, 1.2) 50%, rgba(229, 46, 113, 0.9) 100%)!important;
      transform: scale(1.05) translateY(-3px);
      box-shadow: 0 8px 25px rgba(229, 46, 113, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
      filter: brightness(1.1);
    }
    
    .contact button:hover::before {
      opacity: 1;
    }

    .btn-descom{
   background: var(--cor-botao);
   width:100%;
   display:block;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border-radius: 18px;
    }
    
    .btn-descom::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }
    
    .btn-descom:hover {
      background: radial-gradient(circle at center, rgba(229, 46, 113, 1) 0%, rgba(115, 7, 46, 1.2) 50%, rgba(229, 46, 113, 0.9) 100%)!important;
      transform: scale(1.05) translateY(-3px);
      box-shadow: 0 8px 25px rgba(229, 46, 113, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
      filter: brightness(1.1);
    }
    
    .btn-descom:hover::before {
      opacity: 1;
    }
    .contact button:hover {
      background-color: var(--cor-secundaria);
    }
	
	.footer-copyright{
		display:block!important;
	}

    .page-footer {
      background-color: var(--cor-primaria);
    }

    .page-footer a {
      color: #fff;
    }

	.hero {
	  height: 100vh;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  text-align: center;
	  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0,0,0,0.1) 100%),
				  url('img/background.webp');
	  background-color: #f8f9fa;
	  background-size: cover;
	  background-blend-mode: normal;
	  background-position: center center;
	  background-attachment: fixed;
	  background-repeat: no-repeat;
	  color: var(--cor-texto);
	  position: relative;
	  margin-bottom: 0;
	  overflow: hidden;
	  filter: brightness(1.2) contrast(0.9);
	  
	}
	
	.hero>div {
		z-index:3;
		position: relative;
	}
	
	/* Adiciona um overlay suave com gradiente moderno */
	.hero::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, 
			rgba(251, 214, 22, 0.08) 0%, 
			rgba(123, 0, 92, 0.08) 50%, 
			rgba(0, 0, 0, 0.15) 100%);
		z-index: 1;
		pointer-events: none;
	}


	.hero h1 {
	  
	  margin-bottom: 20px;
	  font-weight:600;
	}
		.hero p{
	  
	  margin-bottom: 20px;
	  font-weight:600;
	}

	.logo {
	  width: 100px; /* Ajuste o tamanho conforme necessário */
	  height: auto;
	}
	
	.title-line {
    display: flex;
    align-items: center;
	}

	.line {
	  flex-grow: 1;
	  border: none;
	  border-top: 2px solid #fff; /* Cor e espessura da linha */
	  margin-left: 10px; /* Ajuste de margem esquerda conforme necessário */
	}
	
	
	.line-pink {
	  flex-grow: 1;
	  border: none;
	  border-top: 2px solid #7B005C; /* Cor e espessura da linha */
	  margin-left: 10px; /* Ajuste de margem esquerda conforme necessário */
	}
	.tabs {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.card {
	  width: 300px;
	  height: 250px;
	  border: none!important;
      background-color: transparent!important;
	  margin: 10px; /* Espaçamento entre os cards */
	  box-shadow:none!important;
	  background-color: #fff; /* Fundo branco para os cards */
      color: var(--cor-texto);

	}
	
	.card-action span {
		float:right!important;
	}

	.card-image {
	  display: flex;
	  justify-content: left; /* Centraliza horizontalmente */
	  align-items: left; /* Centraliza verticalmente */
	  background-color: transparent!important; /* Cor de fundo da imagem no card */
	
	  
	}
	
	.card-image-blog {
	  max-height:200px;
	  height:200px;
	}
	
	.card-image span{
	  padding-left:15px;
	}
	
	.card .card-content .card-title {
		font-weight:600;
		
		
	}

	/* Estilos para a seção de contato */
	.contact {
	  background-color: #fffcf2; /* Cor de fundo da seção de contato */
	  padding: 50px 0; /* Espaçamento interno */
	}

	/* Estilos para o formulário */
	.contact form {
	  background-color: #fff; /* Cor de fundo do formulário */
	  padding: 20px;
	  border-radius: 10px; /* Cantos arredondados */
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra */
	}

	.contact h2 {
	  color: #333; /* Cor do título */
	}

	/* Estilos para os campos de entrada */
	.contact input[type="text"],
	.contact input[type="email"],
	.contact textarea {
	  border: 1px solid #ddd; /* Borda dos campos */
	  margin-bottom: 15px; /* Espaçamento inferior */
	  border-radius: 5px; /* Cantos arredondados */
	}

	/* Estilos para o botão de enviar */
	.contact button {
	  background-color: #e52e71; /* Cor de fundo do botão */
	  color: #fff; /* Cor do texto do botão */
	  border: none;
	  border-radius: 5px; /* Cantos arredondados */
	  cursor: pointer;
	  transition: background-color 0.3s ease; /* Transição suave na cor de fundo */
	  font-family: var(--fonte-principal)!important;
	}

	.contact button:hover {
	  background-color: #ff4081; /* Cor de fundo ao passar o mouse */
	}

	.label {
	  padding-left: 10px;
	}
    
	#modal-overlay {
		border-right: solid 2px var(--cor-secundaria);
	}
	nav {
		background-color: #fbd616!important;
		min-height:100px;
		
	}

	/* Adicione o estilo do botão flutuante */
	.floating-button {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  width:55px;
	  height:56px;
	  background-color: #25d366; /* Cor do WhatsApp */
	  color: #fff;
	  padding: 4px;
	  border-radius: 50%;
	  cursor: pointer;
	  z-index:999;
	}

	.popup {
	  position: fixed;
	  top: -100%; /* Inicia fora da tela */
	  left: 50%;
	   transform: translate(-50%, -50%); /* Center the popup precisely */
	  padding: 20px 40px 30px 20px;
	  background-color: #fff;
	  -webkit-box-shadow: 0px 0px 35px 0px rgba(105,105,105,1);
		-moz-box-shadow: 0px 0px 35px 0px rgba(105,105,105,1);
		box-shadow: 0px 0px 35px 0px rgba(105,105,105,1);
	  border-radius: 10px;
	  cursor: default;
	  z-index: 1000;
	  min-width: 345px;
	  opacity: 0;
	  visibility: hidden;
	  transition: top 0.5s ease, opacity 0.6s ease, visibility 0.5s ease;
	}

	.popup.active {
	  top: 50%; /* Move para o centro quando a classe 'active' é adicionada */
	  opacity: 1;
	  visibility: visible;
	}

		


	.popup h2 {
	  margin-bottom: 15px;
	}

	.popup label {
	  display: block;
	  margin-bottom: 5px;
	}

	.popup input {
	  width: 100%;
	  padding: 8px;
	  margin-bottom: 10px;
	}

	.popup button {
	  background-color: var(--cor-secundaria); /* Cor do WhatsApp */
	  color: #fff;
	  /*padding: 10px 20px;*/
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
	  margin-bottom: 30px;
	}
     
	 .section {
		scroll-margin-top: 120px;
		/*overflow:hidden;*/
	}

	  section.clients {
		 /* margin-top: 35px; */
		  
		  
		background-color:white!important;
	  }

	
	#cases {
		background-color: gray;
		padding: 40px;
		color: white;
		font-weight: bold;
		text-align: center;
	}
	#cases .section-title {
		color:white!important;
	}
	
	section.contact, section.actuation{
    background: linear-gradient(45deg, #837d7d, transparent);
	}
	
	section.about-us {
	 position:relative;
		margin-top:0;
		top:0;
		background: var(--gradiente-rosa);
		color:white;
		min-height:80vh;
		overflow:hidden;
		
	}
	
	.nice-span-white{
	background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(229,46,113,1) 0%, rgba(255,255,255,1) 30%);
    color: white !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0;
    font-weight: 900 !important;
    text-transform: uppercase;
	}
	
	section.about-us p{
		font-weight:400;
		font-size:1.6em;
		width:80%;
	}
	
	
	
	section.results {
		min-height:80vh;
		 background: linear-gradient(to top, orange, #e65100);
		
	}
	
	section.results h1{
		
		font-weight:700;
		color:white;
	}
	
	
   
	section.our-differences h4{
		font-weight:700;
	}
	section.services h5 {
		padding: 25px 25px 25px 25px;
	}
	
	section.services.row{
		
		margin-top:25px;
	}
	
	section.actuation p{
		font-weight:500;
		letter-spacing:1.6px;
	}



  input[type="text"]:not(.browser-default):focus:not([readonly]),
  input[type="email"]:not(.browser-default):focus:not([readonly]),
  textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--cor-secundaria)!important; /* Substitua YOUR_CUSTOM_COLOR pela cor desejada */
    box-shadow: 0 1px 0 0 var(--cor-secundaria)!important; /* Substitua YOUR_CUSTOM_COLOR pela cor desejada */
  }

  input[type="text"]:not(.browser-default):focus:not([readonly]) + label,
  input[type="email"]:not(.browser-default):focus:not([readonly]) + label,
  textarea.materialize-textarea:focus:not([readonly]) + label {
    color: var(--cor-texto)!important; /* Substitua YOUR_CUSTOM_COLOR pela cor desejada */
  }

  input[type="text"]:not(.browser-default):focus:not([readonly]) + label::after,
  input[type="email"]:not(.browser-default):focus:not([readonly]) + label::after,
  textarea.materialize-textarea:focus:not([readonly]) + label::after {
    background-color: white!important; /* Substitua YOUR_CUSTOM_COLOR pela cor desejada */
  }

/* Adicione ao bloco de estilos CSS existente */
.input-field .prefix.active {
  color: var(--cor-secundaria) !important; /* Substitua var(--cor-secundaria) pela cor desejada */
}



[type="checkbox"]:not(:checked),[type="checkbox"]:checked {
    position: absolute;
    opacity:0!important;
    pointer-events: none
}

.fixed-action-btn {
	left:23px!important;
}


.tabs.tabs-transparent .tab a:hover, .tabs.tabs-transparent .tab a.active {
    color: var(--cor-secundaria)!important;
    font-weight: 700!important;
}
.anim3d{
	opacity:0;
}

#about-us .horizontal-scroll {
  overflow: hidden;
  position: relative;
}

#about-us .scroll-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Ativa snap horizontal */
  scrollbar-width: none; /* Esconde a barra de rolagem no Firefox */
}
.scroll-container::-webkit-scrollbar {
  display: none; /* Esconde a barra de rolagem no Chrome, Edge e Safari */
}

#about-us .scroll-content {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: auto;
  position: relative;
  
}

#about-us .scroll-item {
  scroll-snap-align: start; /* Alinha cada item ao início */
  flex: 0 0 100vw; /* Cada item ocupa a largura total da viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

#about-us .scroll-item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#about-us .scroll-item h5, .scroll-item p {
  font-size: 2em;
  opacity: 0; /* Para animar a entrada */
  margin: 0 auto; /* Centraliza o texto */
}

#about-us .bg-element {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); /* Começa pequeno */
  opacity: 0;
}

/* A PARTIR DAQUI É PARA A VERSÃO MOBILE*/
/* +++++++++++++++++++++++++++++++++++++*/
/* +++++++++++++++++++++++++++++++++++++*/
/* +++++++++++++++++++++++++++++++++++++*/


	@media only screen and (max-width: 992px) {
		
		.cooldraw img{
			width:100%;
		}
		section.results {
			min-height:50vh!important;
			background-color: orange;
		}
		
		section.results h1{
			text-align:center;
		font-size:2.4em!important;
		font-weight:700;
		color:white;
	   }
		.card {
			    height: 100%;
				min-height: 250px;
				max-height: 300px;
		}
		.card-content p{
			font-size:1.2em;
		}
	  /* Estilo para tablets e dispositivos móveis */
	  section.services h5 {
		text-align: center;
	  }
	  
	  section.clients h5 {
		text-align: center;
	  }
	  
	  section.contact h5 {
		text-align: center;
	  }
	  
	  section.our-differences h5{
		text-align:center;
	}
	
	 section.about-us h5{
		text-align:center;
	}
	
	 section.about-us img{
		width:100%!important;
	}
	  
	  
	  	.hero h1 {
	  font-size:2.2em;
	  margin-bottom: 20px;
	}
	
		.hero h1 .nice-span{
	  font-size:2.6rem!important;
	  margin-bottom: 20px;
	}
	
	  	.hero p{
	  font-size:1.5em;
	  margin-bottom: 20px;
	}
	
	
	.social-icons{
		display:flex!important;
		align-items:center;
		justify-content:center;
	}

	.social-title	{
		text-align:center;
	}
	 .contact button {
	     background: var(--cor-botao);
	  width:90%;
	  display:block;
	     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	     position: relative;
	     overflow: hidden;
	     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	     border-radius: 18px;
	   }
	   
	   .contact button::before {
	     content: '';
	     position: absolute;
	     top: 0;
	     left: 0;
	     right: 0;
	     bottom: 0;
	     background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
	     opacity: 0;
	     transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	     z-index: 1;
	   }
	   
	   .contact button:hover {
	     background: radial-gradient(circle at center, rgba(229, 46, 113, 1) 0%, rgba(115, 7, 46, 1.2) 50%, rgba(229, 46, 113, 0.9) 100%)!important;
	     transform: scale(1.05) translateY(-3px);
	     box-shadow: 0 8px 25px rgba(229, 46, 113, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
	     filter: brightness(1.1);
	   }
	   
	   .contact button:hover::before {
	     opacity: 1;
	   }
	   .sidenav .collapsible-body ul li a {
	   
		height: unset !important;
		line-height: unset !important;
	   
	   }
	   
	   .sidenav .collapsible-body ul li a .material-icons.left {
		margin-right: 10px;
		color: var(--cor-secundaria);
		}
	
}

/* ANIMAÇÃO */

			@keyframes slide-from-left {
							0% {
								transform: translateX(-100%);
								opacity:0;
							}
							100% {
								transform: translateX(-0%);
								opacity:1;
							}
						}
						
						
								
										@keyframes slide-from-right {
							0% {
								transform: translateX(100%);
								opacity:0;
							}
							100% {
								transform: translateX(0%);
								opacity:1;
							}
						}
					
				
					
							
							
							@keyframes line-anime {
								
								0%{
									scale:0.5;
									
									opacity:0
									
								}
								100%
								
								{
									
									opacity:1;
									scale:1;
								}
								
								
								
								
							}
							
						@keyframes dlineup { /* Modifiquei o nome da animação para iniciar com uma letra */
							  0% {
								transform: rotate3d(1, 1, 1, 240deg); /* Inicia com uma rotação de 240 graus */
								opacity:0;
								scale:0.1;
							  }
							  100% {
								transform: rotate3d(1, 1, 1, 360deg); /* Termina com uma rotação de 360 graus */
								opacity:1;
								scale:1;
							  }
						}

							
					
							
								@media (prefers-reduced-motion: no-preference) {
							  .square-animation {
								animation: slide-from-left 1s 1;
							  }
							   .from-right {
								animation: slide-from-right 1s 1;
							  }
							  .move-line{
								  animation: line-anime 1s 1;
								  transform-origin: 0% 50%;
							  }
							  
							  .move-3d {
								  
								  animation: dlineup 1s 1;
								  opacity:1;
								  
							  }
							  
							  
								}
							


/* ANIMATED BACKGROUND */

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index:1!important;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background-color: #ffd700; /* Cor de fundo padrão dourada */
  background-image: linear-gradient(
    225deg,
    #ffd700 0%,   /* Dourado claro */
    #d4af37 50%,  /* Dourado tradicional */
    #b08d57 100%  /* Bronze */
  );
  animation: animate 25s linear infinite;
  bottom: -150px;
}


.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 9s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

@keyframes appear {
	from{
		
		opacity:0;
		scale:0.5;
		
	}
	to {
		opacity:1;
		scale:1;
	}
	
	
}

/*
@media (max-width: 750px) {
  .content {
     flex-direction: column-reverse;
  }
  
  .btn {
    margin: 10px auto 40px;
  }
}
*/

.services .card {
	 -webkit-transform: rotate(-360deg);
	 -moz-transform: rotate(-360deg);
	 -ms-transform: rotate(-360deg);
	 transform: rotate(-360deg);
	   
}
.services .card:hover .material-icons {
	 -webkit-transition: all 1s ease;
	 -moz-transition: all 1s ease;
	 -ms-transition: all 1s ease;
	 transition: all 1s ease;
	 -webkit-transform: rotate(360deg);
	 -moz-transform: rotate(360deg);
	 -ms-transform: rotate(360deg);
	 transform: rotate(360deg);
}
.search-result a{
	color:#000;
}

.search-result h5:before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: black;
    position: absolute;
    margin-left: -16px;
    margin-top: 6px;
    
}

.search-wrapper {
    padding: 0 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.search-wrapper i {
    color: #9e9e9e;
    margin-right: 10px;
}

#mobile-search {
    border: none;
    outline: none;
    padding: 10px 0;
    width: 100%;
}

/* deixa o menu sair para fora sem cortar */
.nav-extended .nav-content,
.nav-extended .tabs,
.nav-extended .tabs .tab {
  overflow: visible !important;
}

/* Estilos específicos para o dropdown de serviços */
#dropdown-servicos {
  background-color: #ffffff; /* Fundo branco */
  border-radius: 4px; /* Bordas levemente arredondadas */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra sutil */
  padding: 8px 0; /* Espaçamento vertical interno */
  overflow: hidden; /* Para garantir que os cantos arredondados funcionem bem */
  margin-top: 0px; /* Ajuste para colar mais no menu se necessário, ou remover se o Materialize já posicionar bem */
  min-width: 220px; /* Largura mínima para os itens não ficarem muito espremidos */
}

#dropdown-servicos li a {
  color: var(--cor-texto); /* Cor do texto principal (cinza escuro) */
  padding: 12px 20px; /* Espaçamento interno dos itens */
  font-size: 0.875rem; /* Tamanho da fonte ligeiramente menor que o padrão para um visual mais clean */
  font-family: var(--fonte-principal);
  font-weight: 500; /* Peso da fonte */
  display: block; /* Garante que o link ocupe todo o espaço do li para o padding funcionar */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  white-space: nowrap; /* Impede que o texto quebre em várias linhas */
}

#dropdown-servicos li a:hover {
  background-color: var(--cor-secundaria); /* Cor de fundo rosa no hover */
  color: #ffffff; /* Texto branco no hover */
}

/* Opcional: Remover a pequena seta que o Materialize pode adicionar a dropdowns dentro de tabs, se existir */
.tabs .tab .dropdown-content {
  margin-top: 0; /* Ajusta o posicionamento se necessário */
}
 				

nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
    display: block;
    font-size: 24px;
    /* height: 56px; */
    line-height: 48px;
}

.tabs .tab a {
	padding:0 12px 0 12px;
}

.dropdown-trigger i.right {
    float: right;
    margin-left: 0px!important;
}