/* Estilos Gerais */
.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Layout em Duas Colunas */
.contact-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* Estilos para a Coluna da Esquerda */
.contact-info {
    flex: 1;
    min-width: 300px;
    background-color: #f9f9f9; /* Fundo branco */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.contact-info h2 {
	font-size: 2em;
	margin-bottom: 20px;
	color: #241c4b;
	border-bottom: 2px solid #241c4b; /* Linha abaixo do título */
	padding-bottom: 10px;
}

.contact-info p {
	font-size: 1.1em;
	margin-bottom: 20px;
	color: #333;
	line-height: 1.6;
}

.contact-info p strong {
	color: #241c4b;
}

.contact-info p i {
	font-size: 1.2em;
	margin-right: 10px;
	color: #241c4b;
}

.contact-quote {
    font-style: italic;
    color: #241c4b;
    font-size: 1.2em;
    text-align: center;
}

/* Estilos para a Coluna da Direita */
.contact-form {
    flex: 1.5;
    min-width: 300px;
    background: #f8f9fa; /* Fundo cinza claro */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
	font-size: 2em;
	margin-bottom: 20px;
	color: #241c4b;
	border-bottom: 2px solid #241c4b; /* Linha abaixo do título */
	padding-bottom: 10px;
}

.contact-form label {
	display: block;
	font-size: 1.1em;
	margin-bottom: 8px;
	color: #333;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1em;
	box-sizing: border-box;
	background-color: #ffffff; /* Fundo branco para os campos */
}

.contact-form textarea {
	resize: vertical;
}

.contact-form .btn {
	display: inline-block;
	width: 100%;
	padding: 15px;
	background-color: #241c4b;
	color: #fff;
	font-size: 1.2em;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.contact-form .btn:hover {
	background-color: #0056b3;
}

/* Responsividade */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
    }
}

.contact {
    background-size: cover;
    padding: 50px 0;
}

.contact-wrapper {
    background: rgba(255, 255, 255, 0.9); /* Fundo branco semi-transparente */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Estilos Gerais */
.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Layout em Duas Colunas */
.contact-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* Estilos para a Coluna da Esquerda */
.contact-info {
    flex: 1;
    min-width: 300px;
    background-color: #f9f9f9; /* Fundo branco */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.contact-info h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #241c4b;
    border-bottom: 2px solid #241c4b; /* Linha abaixo do título */
    padding-bottom: 10px;
}

.contact-info p {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: #333;
    line-height: 1.6;
}

.contact-info p strong {
    color: #241c4b;
}

.contact-info p i {
    font-size: 1.2em;
    margin-right: 10px;
    color: #241c4b;
}

.contact-quote {
    font-style: italic;
    color: #241c4b;
    font-size: 1.2em;
    text-align: center;
}

/* Estilos para a Coluna da Direita */
.contact-form {
    flex: 1.5;
    min-width: 300px;
    background: #f8f9fa; /* Fundo cinza claro */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #241c4b;
    border-bottom: 2px solid #241c4b; /* Linha abaixo do título */
    padding-bottom: 10px;
}

.contact-form label {
    display: block;
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #333;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    background-color: #ffffff; /* Fundo branco para os campos */
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    display: inline-block;
    width: 100%;
    padding: 15px;
    background-color: #241c4b;
    color: #fff;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #0056b3;
}

/* Responsividade */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
    }
}


.contact {
    background-size: cover;
    padding: 50px 0;
}

.contact-wrapper {
    background: url('https://lirp.cdn-website.com/9928f089/dms3rep/multi/opt/AdobeStock_277845433-2880w.jpeg') no-repeat center center;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Estilos para o Combobox */
.contact-form select {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    background-color: #ffffff; /* Fundo branco para o combobox */
    color: #333; /* Cor do texto */
    transition: border-color 0.3s ease;
    text-transform: uppercase; /* Deixa os itens em maiúsculas */
}

.contact-form select:focus {
	border-color: #241c4b;
	outline: none;
}

/* Responsividade para telas muito pequenas (mobile) */
@media (max-width: 480px) {
	.contact{
		padding:0;
	}
	.contact-wrapper{
		background:none;
		padding:0px;
	}
	.contact-form, .contact-info {
		min-width:0;
		padding:20px;
	}
	.contact-info{
		padding-bottom:30px;
	}
	.contact-form h2, .contact-info h2 {
		font-size: 1.5em;
	}
	.contact-info p{
		font-size:0.8em;
		line-height:1.4;
	}
}

/* Estilizando a modal */
.modal {
  display: none; 
  position: fixed; 
  -index: 9999; /* Valor elevado para garantir que a modal esteja no topo */
  padding-top: 60px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-height: 80%; /* Limita a altura da modal */
  overflow-y: auto; /* Adiciona o scroll quando necessário */
	z-index: 10000;
	text-align:left;
}

/* Botão de fechar */
.close {
  position: absolute; /* Fixa o botão no topo */
  top: 10px; /* Distância do topo */
  right: 20px; /* Distância da direita */
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.scroll-container {
	width: 100%; /* Largura da área de rolagem */
	height: 100vh; /* Altura da área de rolagem */
	overflow-y: auto; /* Permite rolagem vertical */
	border-radius: 8px; /* Cantos arredondados */
	background-color: #f9f9f9; /* Fundo da área de rolagem */
}

.item {
	padding: 15px;
	cursor:pointer;
	border: 1px solid #ddd;
	margin: 10px 0;
	background-color: #ffffff; /* Fundo dos itens */
	border-radius: 8px; /* Cantos arredondados dos itens */
	transition: background-color 0.3s; /* Efeito de transição */
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* Sombra dos cards */
}

.item h3 {
	margin: 0 0 10px; /* Margem para o título */
	color: #007bff; /* Cor do título */
}

.item p {
	margin: 0; /* Remove margem padrão do parágrafo */
}

.item:hover {
	background-color: #e0f7fa; /* Cor ao passar o mouse */
}

/* Estilos da barra de rolagem somente para .scroll-container */
.scroll-container::-webkit-scrollbar {
	width: 12px; /* Largura da barra de rolagem */
}

.scroll-container::-webkit-scrollbar-thumb {
	background: gray; /* Cor do botão da barra */
	border-radius: 10px; /* Cantos arredondados */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
	background: #241c4b; /* Cor ao passar o mouse */
}

.scroll-container::-webkit-scrollbar-track {
	background: #f1f1f1; /* Cor da trilha da barra de rolagem */
	border-radius: 10px; /* Cantos arredondados */
}