@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

:root {
	--clr-primaria: #ff3b80;
	--clr-secundaria: #1492bc;
	--clr-terciaria: #1a31a9;

	--clr-fenix: #121858;

	--clr-background: #fcfcfc;
	--clr-header: #79cff3;
	--clr-texto: #494949;

	--font-family: "Trebuchet MS", sans-serif;
}

body,
html {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	color: var(--clr-texto);
	word-wrap: normal;
	overflow-x: hidden;
	scroll-behavior: smooth;
	background: var(--clr-background);
}

header {
	background: url("../img/header-background.webp"), var(--clr-header);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: auto;
	padding: 10px 30px 50px;
}

.headerContent {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	padding: 20px;
}
img.imagemTopo {
	width: 100%;
	max-width: 500px;
	height: auto;
	object-fit: contain;
}
.firstImg {
	margin-top: 100px;
}
.logotipoTopo {
	position: absolute;
	width: 100%;
	max-width: 200px;
	height: auto;
	object-fit: contain;
	top: 20px;
	left: 30px;
}

@media screen and (max-width: 575.98px) {
	.headerContent {
		display: flex;
		flex-direction: column;
	}
	.logotipoTopo {
		max-width: 130px;
	}
}

.container-fluid {
	margin: 0;
	padding: 0;
}
a {
	color: var(--clr-texto);
	text-decoration: none;
}
a:hover {
	color: var(--clr-texto);
}

ul {
	list-style: none;
	padding: 1rem 3rem;
	margin: 0;
}
li {
	padding: 0.3rem;
}
li i,
li strong {
	color: var(--clr-secundaria);
	margin-right: 0.5rem;
}
li span {
	color: var(--clr-primaria);
	font-weight: 600;
	font-size: large;
}

.btn-inscricao {
	background: var(--clr-primaria);
	padding: 9px 50px !important;
	border-radius: 50px;
	position: fixed;
	bottom: 70px;
	right: 50px;
	color: white;
	z-index: 9;
}
.btn-inscricao:hover {
	background: var(--clr-secundaria);
	border-radius: 50px;
	color: white;
}
.btn-inscricao::after {
	content: "Inscreva-se";
	padding-left: 0.5rem;
}

.btn-wpp {
	background: var(--clr-primaria);
	padding: 9px 50px !important;
	border-radius: 50px;
	position: fixed;
	bottom: 20px;
	right: 50px;
	color: white;
	z-index: 9;
}
.btn-wpp:hover {
	background: var(--clr-secundaria);
	border-radius: 50px;
	color: white;
}
.btn-wpp::after {
	content: "Fale conosco";
	padding-left: 0.5rem;
}

.links a {
	border-bottom: 1px solid var(--clr-fenix);
}
.links a:hover {
	color: var(--clr-fenix);
}
.links i {
	color: var(--clr-fenix);
}
.links i:not(:first-child) {
	padding: 0 0.3rem 0 1rem;
}
.links i:first-child {
	padding-right: 0.3rem;
}

.cdfIntro p {
	text-transform: uppercase;
	font-weight: 600;
	color: var(--clr-terciaria);
}
h1 {
	color: var(--clr-primaria);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -1px;
	text-transform: uppercase;
}
h2 {
	color: var(--clr-secundaria);
	letter-spacing: -1px;
	font-weight: 700;
}
h3 {
	color: var(--clr-terciaria);
	letter-spacing: -1px;
	font-weight: 700;
}

.programacao {
	text-align: left;
}
.programacao p {
	margin-top: 0.8rem;
}
.programacao span {
	color: white;
	background-color: var(--clr-primaria);
	padding: 0.3rem 1rem;
	border-radius: 20px;
}

.anexos a {
	color: white;
	background-color: var(--clr-secundaria);
	padding: 0.3rem 1rem;
	border-radius: 20px;
	display: block;
	text-align: center;
}
.anexos strong {
	color: white;
}
.anexos i {
	color: white;
}

@media (min-width: 768px) {
	.anexos a {
		width: fit-content;
	}
}

@media (max-width: 575.98px) {
	.btn-inscricao {
		display: none;
	}
	.btn-wpp {
		padding: 10px 18px !important;
		bottom: 20px;
		right: 20px;
		font-size: larger;
	}
	.btn-wpp::after {
		content: none;
		padding-left: 0;
	}
}