body {
		font-family: 'Arial', sans-serif;
		background-image: url('./img/matrix1inv.gif'); /* Caminho da imagem */
		background-color: lightgray; /* fundo claro */
	}
	.tabs {		/* Área de abas para conteúdo dividido */
		display: flex;
		margin-bottom: 20px;
		border-bottom: 1px solid #ddd;
	}
	/* Botões de aba */
	.tab-btn {
		padding: 10px 20px;
		background: none;
		border: none;
		border-bottom: 3px solid transparent;
		cursor: pointer;
		transition: all 0.3s;
	}
	/* Efeito ao passar o mouse na aba */
	.tab-btn:hover {
		background-color: #f9f9f9;
	}
	/* Aba ativa destacada */
	.tab-btn.active {
		border-bottom: 3px solid #3498db;
		color: #3498db;
		font-weight: bold;
	}
	/* Conteúdo das abas (inicialmente oculto) */
	.tab-content {
		display: none;
		min-height: 999px;
		padding: 15px;
		background-color: #f9f9f9;
		border-radius: 5px;
	}
	/* Mostra aba ativa */
	.tab-content.active {
		display: block;
	}

	/* Container flexível para seções com texto e imagem */
	.container {
		display: flex;
		gap: 20px;
		padding: 2px;
	}

	/* Texto da seção */
	.texto {
		flex: 0.8; /* ocupa 80% */
		font-size: 18px;
		vertical-align: top;
	}
	.text-reduced {
		color: blue;
		font-size: 1.1em;
		text-indent: 1em;
	}
	.text-count-example {
		font-size: 1.2em;
		color: red;
		font-weight: 600;
		margin-right: .1em;
		margin-bottom: .3em;
		padding-top: .3em;
		padding-bottom: .2em;
		cursor: pointer;
	}
	.example-large-div {
		color: blue;
		font-size: 1.1em;
		text-indent: 1em;
	}
	.embed-responsive-item{
		width: 600px;
		height: 1200px;
	}		
	
	/* Container da imagem */
	.imagem {
		flex: 0.5; /* ocupa metade */
	}
	/* Estilo da imagem */
	.imagem img {
		max-width: 100%;
		height: auto;
		vertical-align: top;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.5);
	}
	
	/* Margem inferior entre seções */
	.section-with-image {
		margin-bottom: 30px;
	}	
	/* Estilo unificado do botão */
	.botao-modal {
		position: fixed;
		right: 1px;
		padding: 10px 20px;
		background-color: darkgreen;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.botao-modal:hover {
		background-color: #45a049;
	}

	/* Estilo geral do modal */
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.4);
	}

	/* Conteúdo do modal */
	.modal-conteudo {
		background-color: #fefefe;
		margin: 15% auto;
		padding: 20px;
		border: 1px solid #888;
		width: 80%;
		max-width: 500px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	}

	/* Botão de fechar */
	.fechar-modal {
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
		cursor: pointer;
	}
	.fechar-modal:hover {
		color: black;
	}
	
	td {
		vertical-align: top;>                                   	 
	}