/* configuracoes principais */
html{
	scroll-behavior: smooth;
	margin-left: 7%;
	margin-right: 7%;
	/* margin-bottom: 20px; */
	transition: 0.5s;
}

body{
	background: rgb(20, 20, 20);
	line-height: 22px;
}

h1{
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	text-align: center;
	margin: 0px;
}

p{
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #FFFFFF;
font-size: 15px;
}

@media screen and (max-width: 991px) {
	.h5{
		font-size: 12.5px;
	}
}

li{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #FFFFFF;
	font-size: 15px;
}

h4{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #FFFFFF;
	font-size: 14px;
}

nav{
	transition: 0.5s;
	margin-left: 0%;
}

.descricao{
	padding-bottom: 20px;
	text-align: center;
}

.card-title{
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}

.linha-subtitulo{
	padding-bottom: 10px;
	width: 90px;
}

.faq{
	display: flex;
    flex-direction: column;
    flex-wrap: inherit;
    align-content: center;
}

.faq-container {
    width: 100%;
    background-color: #000; /* Fundo preto */
    padding: 20px;
    margin: 0px 0px 5px 0px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* Sombra clara para contraste */
    color: #fff; /* Texto branco */
    border-radius: 8px; /* Bordas arredondadas */
}

.faq-question {
    border-bottom: 1px solid #333; /* Linha divisória mais escura */
    cursor: pointer;
    padding: 10px 0;
    transition: all 0.3s ease; /* Efeito suave ao abrir/respostas */
}

.faq-question-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff; /* Texto branco */
}

.faq-question h2 {
    color: #fff; /* Títulos em branco */
    margin: 0;
    font-size: 1.2rem;
}

.faq-answer {
	display: none;
    padding: 10px 0;
    color: #e0e0e0; /* Texto ligeiramente mais suave */
}

.faq-answer a {
    color: #4CAF50; /* Verde para links (ou use sua cor temática) */
    text-decoration: underline;
}

.seta {
    color: #fff; /* Ícones em branco */
    transition: transform 0.3s ease;
}

.seta.virada {
	transform: rotate(180deg);
}

.faq-question:hover {
    background-color: #111; /* Tom mais claro de preto */
}

.titulo{
	display: table;
	width: 100%;
}
.history-content{
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 50px;
}
.timeline-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
@media screen and (max-width: 991px) {
	.titulo{
		font-size: 30px;
	}
}

.titulo h5{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

a{
	color: #5c8a00;
}

a:hover {
	color: #5c8a00;
}

::selection{
	color: white;
	background-color: #5c8a00;
}
.img-thumbnail{
	width: 100%;
	object-fit: cover;
}


/* navbar */
nav{
    min-height: 80px;
	background-color: black;
	/*background-color: #012709;*/
}
.icone-navbar{
	font-size: 24px;
}
.nav-item{
	font-family: "Roboto", "sans-serif";
	font-size: 15px;
}
.nav-link{
	padding-top: 18px;
}
.dropdown-menu{
	background-color: #000000;
}
.dropdown-item:hover{
	text-color:gray;
	background-color: black;
}

/* Estilo do botão na navbar */
.navbar .btn-success {
    background-color: #218838 !important; /* Verde mais escuro */
	margin-right: 5px;
    border: none;
    padding: 8px 20px;
    border-radius: 10px;
    transition: background-color 0.3s;
}

.navbar .btn-success:hover {
    background-color: #1e7e34 !important; /* Tom mais escuro no hover */
}

@media (max-width: 992px) {
    .navbar .btn-success {
        margin-top: 10px;
        width: 100%;
    }
}

/* linha abaixo do titulo */
.linha{
	width: 320px;
	height: 2px;
	background-color: #5c8a00;
	margin-top: 0px;
}
.linha-faq{
	width: 100%;
	height: 2px;
	background-color: #5c8a00;
	margin-top: 0px;
}
.linha-historia{
	width: 150px;
	height: 2px;
	background-color: #5c8a00;
	margin-top: 3px;
}
@media screen and (max-width: 600px) {
	.linha {width: 90px;}
}
/* banner */

.banner-desktop {display: block;}
.banner-mobile {display: none;}
	
@media screen and (max-width: 600px) {
	.banner-desktop {display: none;}
	.banner-mobile {display: block;}
}	

#banner{
	padding: 0px;
	margin-left: -9%;
	margin-right: -9%;
	width: 117.1%;
}

#banner img{
	object-fit: cover;
}

.img-banner-mobile{
	height: 400px;
}

/* Sobre a CoRA */

.sobre{
	padding-top:96px;
}

.iframe-container {
	align-content: center;
    text-align: center;
}

.iframe-container .iframe-desktop{
	aspect-ratio: 16 / 9;
  	width: 100%; 
  	height: 100%;
}

.iframe-container .iframe-mobile{	
	aspect-ratio: 16 / 9;
	width: 50%; 
	height: 50%;
}

.text-formatation{
	margin: 15px 50px;
	text-align: justify;
}
.sobre-mobile {
	display: none;
}	
button:disabled, button:hover:disabled{
	cursor: not-allowed;
	background: #555b69;
}
.success, .error{
	color: rgb(54, 51, 51) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    text-align: center;
    margin: 0px;
}
@media screen and (max-width: 1300px) {
	.sobre-desktop {
		display: flex;
        flex-direction: column-reverse;
        align-content: center;
	}
	.sobre{
		padding-top: 46px;
	}
	.iframe-container {
		padding-top: 10px;
		padding-bottom: 25px;
		margin: 1% 2% 1% 1%;
        max-width: 100%;
        width: 55%;
	}
	.iframe-container{
		margin: 1% 2% 1% 1%;
	}
}	

@media screen and (max-width: 991px) {
	.iframe-container {
		padding-top: 10px;
        padding-bottom: 10px;
        margin: 1% 11% 1% 1%;
        aspect-ratio: 16 / 9;
        max-width: 100%;
        width: 80%;
        height: 100%;
	}
	.sobre-desktop {
		display: flex;
        flex-direction: column-reverse;
        align-content: center;
	}
	.container_child{
		display: flex;
    	flex-direction: column;
	}
	.left-section{
	background-color: #1b1d1d;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
	}
	.contact-icons{
		width: 74%;
        padding: 1% 14% 1% 0%;
	}
}
@media screen and (max-width: 760px) {
	.contact-icons{
		width: 59%;
        padding: 1% 10% 1% 0%;
        margin: 10% 30% 0% 0% !important;
	}
}
@media screen and (max-width: 570px) {
	.sobre-desktop {
		display: flex;
        flex-direction: column-reverse;
        align-content: center;
	}
	.iframe-container {
		margin: 1% 9% 1% 1%;
	}
	.contact-icons{
		width: 59%;
        padding: 1% 10% 1% 0%;
        margin: 10% 41% 0% 0% !important;
		display: flex !important;
		flex-direction: column;
	}
}
/* CoRA 2023 */
.CoRA_2023{
	padding-top: 30px;
}
/* Feira de Exposição de Robôs Autônomos */

.feira{
	padding-top: 30px;
}

.img-ajuste-feira{
	object-position: bottom;
	max-height: 200px;
}

/* Oficina de Robótica */
.container-carousel-oficina{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.oficina{
	padding-top: 30px;
}
@media screen and (max-width: 991px) {
	.oficina .content{
		display: flex;
		flex-direction: column;
	}
	.carousel-oficina{
		order: 2;
	}
	.texto-oficina{
		order: 1;
	}
}

/* Apoie a CoRA */

.apoie{
	padding-top: 30px;
}

/* Contato */

.contato{
	padding-top: 30px; 
}
/* Parceiros */

.parceiros{
	padding-top: 30px; 
}

@media screen and (max-width: 991px) {	
	.logo {
		width: 50%; 
}
}
/*contacts*/
.contact{
	display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-icons{
	display: flex;
	margin-top: 71px;
    justify-content: space-between;
}
.container{
    display: flex;
	margin: 50px 10px 10px 10px;
    width: 100%;
    justify-content: center;
}
.container_child{
    display: flex;
    width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.left-section {
    background-color: #1b1d1d;
    color: white;
    padding: 40px;
    flex: 1;
}

.left-section-title {
    margin: 0 0 20px;
    font-size: 24px;
}

.left-section-description {
    margin: 0 0 20px;
    font-size: 16px;
}

.right-section {
    background-color: white;
    padding: 40px;
    flex: 1;
}

.right-section-title {
    margin: 0 0 20px;
    font-size: 24px;
    color: #333;
}

.contact-form {
    display: flex;
    flex-direction: column;
}

.form-label {
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
}

.form-input,
.form-textarea {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.form-textarea {
    resize: vertical;
    width: 100%;
    max-width: 350px;
}
.participate{
	display: flex;
	justify-content: center;
	width: 30%;
}
.form-button, .participate-button {
    padding: 10px;
	text-align: center;
	width: 100%;
	text-decoration: none;
    background-color: #5c8a00;;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.form-button:hover, .participate-button:hover{
    background-color: #73ac03;;
	text-align: center;
	color: white;
    font-size: 20px;
	text-decoration: none;
}

.confirmation-message {
    margin-top: 20px;
    font-size: 16px;
    color: green;
}
/*contact*/



/* Rodapé */
.text-color{
	color:white;
}

.container-fluid{
	padding: 0;
}

.my_text-always-light {
    color: #f8f9fa !important;
  }

a.my_text-always-light:hover, a.my_text-always-light:focus {
    color: #cbd3da !important;
}

/*navbar*/




/*img*/



.img-light-theme{
    display: none;
}

/*iframe*/



/*títulos*/

.titulo{
	/*background-color: #8BC34A;*/
	text-align:center;
	color: white;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.sub-titulo{
	color: white;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

/*.titulo::after{
	content: "";
	border-top: 2px solid #5c8a00;
	width: 40%;
	position: absolute;
	top: 60px;
	left: 30.5%;
	margin:0 auto;
}
.titulo-f::after{
	content: "";
	border-top: 2px solid #5c8a00;
	width: 40%;
	position: absolute;
	top: 60px;
	left: 30.5%;
	margin:41px auto;
}*/

h2{
	font-size: 27px;
}

/*cards*/

.card-body .fas{
	font-size: 30px;
	/*color: #8BC34A;*/
	padding: 10px;
}

.card h3{
	font-size: 24px;
	padding-bottom: 20px;
}

.card{
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
}

.info .card{
	margin-left: 15px;
	margin-right: 15px;
}

.card-body{
	margin: 15px;
}

.info .card-body{
	margin: 10px;
}

/*contato*/
.contato{
	padding-top: 20px;
}

.contato p{
	transition: color 0.5s;
}

.icone-contato{
	font-size: 24px;
	/*color: #343A40;*/
	color: #FFFFFF;
	margin-bottom: 20px;
	background-color: #5c8a00;
	/*transition: background-color 0.5s,
				color 0.5s;*/
	transition: background-color 0.3s;
}

.contato:hover .icone-contato{
	background-color: #5c8a00;
	/*color: #23272B;*/
}

.contato:hover p{
	text-decoration: none;
}

.meulink{
	color: #5c8a00;
}

.meulink:hover{
	color: #5c8a00;
	text-decoration: underline;
}

/*ícones e botões*/

.icone{
	color: #5c8a00;
}

.btn{
	background-color: #5c8a00;
	color: white;
}

/*rodapé*/

.rodape {
	background-color: rgb(20, 20, 20);
}

.rodape p{
	color: white;
}