.animated-title {
	animation: slideIn 2s ease-in-out forwards;
/* O 'forwards' faz com que o título mantenha o estado final da animação */
}

@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Estilização geral dos títulos das páginas */
h1.page-title {
	font-size: 53px;
/* Aumentado em 5px */
	font-family: 'Montserrat', sans-serif;
/* Substituindo Arial por Montserrat */
	font-weight: bold;
	text-align: center;
	color: #2fbbca;
/* Cor azul substituída */
	text-transform: capitalize;
/* Apenas primeiras letras maiúsculas */
	letter-spacing: 2px;
	margin: 20px 0;
	transition: transform .3s ease-in-out, color .3s ease-in-out;
	position: relative;
	opacity: 0;
/* Inicialmente invisível para a animação */
	animation: dropIn 2s ease-in-out forwards;
/* Adicionando a animação de cair */
}

/* Efeito de animação no hover */
h1.page-title:hover {
	transform: scale(1.1);
	color: #e1e961;
/* Cor verde substituída */
}

/* Efeito de linha animada abaixo do título */
h1.page-title::after {
	content: '';
	display: block;
	width: 0;
	height: 3px;
	background: #e1e961;
/* Cor da linha substituída */
	transition: width .4s ease-in-out;
	margin: 10px auto 0;
}

/* Aumenta a linha quando o mouse passa sobre o título */
h1.page-title:hover::after {
	width: 100%;
}

/* Animação do título caindo de cima para baixo */
@keyframes dropIn {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	/* Começa fora da tela, na parte superior */
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	/* Cai para sua posição original */
	}
}

/* Adicionar animação aos títulos com a classe .animated-title */
.animated-title {
	animation: slideIn 2s ease-in-out forwards;
/* O 'forwards' faz com que o título mantenha o estado final da animação */
}

/* Keyframes para a animação da classe .animated-title */
@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Animação para aumentar o tamanho, mudar a cor e adicionar sublinhado mais abaixo nos itens do menu */
.wp-block-navigation a {
    color: #000 !important; /* Cor inicial do texto */
    font-size: 16px; /* Tamanho inicial do texto */
    text-decoration: none; /* Remove qualquer sublinhado inicial */
    transition: color 0.3s ease, font-size 0.3s ease, text-decoration 0.3s ease, text-underline-offset 0.3s ease;
}

.wp-block-navigation a:hover {
    color: #2FBBCA !important; /* Nova cor ao passar o mouse */
    font-size: 18px; /* Aumento do tamanho ao passar o mouse */
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
    text-underline-offset: 8px; /* Define a distância do sublinhado mais abaixo do texto */
}

/* Efeito de movimento nos blocos de preço */
.wp-block-group {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

.wp-block-group:hover {
    transform: translateY(-30px); /* Move o bloco 30px para cima ao passar o mouse */
}

.creative-process-step {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.creative-process-step:hover {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo Geral */
.what-drives-us-section {
    background: #f2f2f2; /* Cinza claro */
    padding: 50px;
    text-align: center;
    position: relative;
    border-radius: 10px; /* Raio da borda */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra leve para destacar */
}

.title {
    font-size: 1.5em;
    color: #2FBBCA;
    font-weight: bold;
    animation: fadeInZoom 1.5s ease-out forwards;
    opacity: 0; /* Para animar com fade */
    margin-bottom: 20px;
    border-radius: 10px; /* Raio da borda */
    padding: 10px;
    display: inline-block; /* Para aplicar o raio de borda ao título */
}

.mission-statement {
    font-size: 1em;
    color: #333;
    line-height: 1.6;
    border-radius: 10px; /* Raio da borda */
    padding: 10px;
    display: inline-block;
}

/* Destaque nas Palavras-Chave com Efeito de Brilho e Balanço */
.highlight {
    color: #e67300; /* Laranja */
    font-style: italic;
    font-weight: bold;
    position: relative;
    padding: 5px;
    border-radius: 10px; /* Raio da borda */
    background-color: rgba(255, 127, 80, 0.1); /* Fundo leve para destacar */
    animation: glow 2s ease-in-out infinite alternate, bounce 1.5s ease-in-out infinite; /* Efeito de brilho e balanço */
    display: inline-block; /* Necessário para a animação de balanço */
}

/* Animação de Efeito Glow */
@keyframes glow {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 127, 80, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 127, 80, 1); }
}

/* Animação de Balanço */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Animação de Entrada e Zoom */
@keyframes fadeInZoom {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Estilo para Studio Ascend com Efeito de Rotação */
.studio-ascend {
    font-weight: bold;
    color: #2FBBCA;
}

.studio, .ascend {
    display: inline-block; /* Necessário para a rotação */
    transition: transform 0.5s ease; /* Transição suave para o efeito de rotação */
}

.studio:hover, .ascend:hover {
    transform: rotate(360deg); /* Gira 360 graus quando o mouse passa */
}

.page-header {
    margin-bottom: 20px;
}