@font-face {
	font-family: "Bjorn";
	src: url("../fonts/Bjorn-Regular.otf") format("opentype");
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	scroll-behavior: smooth;
	word-wrap: normal;
	overflow-x: hidden;
}

body,
html {
	font-family:
		"Trebuchet MS",
		system-ui,
		-apple-system,
		sans-serif;
	font-display: swap;
	line-height: 150%;
	font-size: large;
	color: #000000;
	background-color: #ffffff;
}

.sr-only {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

header {
	background: url("../img/background.webp"), #023a98;
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 100px 10px;
	min-height: 70vh;
}

footer {
	background: #003182;
	background: linear-gradient(35deg, rgba(0, 49, 130, 1) 0%, rgba(28, 82, 172, 1) 100%);
	color: #fff;
}
footer a {
	color: #ffff;
	text-decoration: none;
}
footer a:hover {
	color: #fff;
	text-decoration: underline;
}
footer i {
	margin-right: 1rem;
}
footer img {
	max-width: 150px;
	margin-bottom: 20px;
	width: 100%;
}
.cred {
	font-size: small;
}

a {
	color: #101010;
	text-decoration: none;
}
a:hover {
	color: #101010;
}

.btn-inscricao {
	padding: 0 30px;
	color: white;
	font-weight: 600;
	background: transparent;
	font-size: x-large;
	display: block;
	text-align: center;
	width: fit-content;
	text-decoration: none;
	margin: auto;
	filter: drop-shadow(0 0 0.75rem #35255f);

	i {
		overflow: hidden;
	}
}

.btn-inscricao:hover {
	color: white;
}

.btn-inscricao i {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
.btn-inscricao:hover i {
	animation-name: bounce;
	-moz-animation-name: bounce;
}

@keyframes bounce {
	0%,
	100%,
	20%,
	50%,
	80% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	60% {
		-webkit-transform: translateY(-15px);
		-ms-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}

h1 {
	font-family:
		"Bjorn",
		"Trebuchet MS",
		system-ui,
		-apple-system,
		sans-serif;
	color: #161331;
	font-weight: 900;
	font-size: xx-large;
}
.space {
	height: 2rem;
}

header {
	display: flex;
	align-items: center;
}

.headerBox {
	padding: 20px;
	text-align: center;
}
.headerBox img {
	width: 100%;
	max-width: 600px;
	margin: auto;
}
img.logos {
	max-width: 250px;
	width: 100%;
	margin: 0 auto 3rem;
}

.headerBox2 {
	color: white;
	font-size: xx-large;
	line-height: 150%;
	text-align: center;
	padding: 1rem;
	margin-top: 1rem;

	span {
		color: #dfff2c;
	}
}

@media (max-width: 1099.98px) {
	.headerBox2 {
		width: 100%;
		margin-top: 50px;
	}
}

.unidadesLinks a {
	padding: 1rem 2rem;
	background-color: #ffb027;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 5px;
}
.unidadesLinks a:hover {
	color: #000;
}
.unidadesLinks a:not(:first-child) {
	margin-left: 3rem;
}
@media (max-width: 1200px) {
	.unidadesLinks a {
		display: block;
		margin-bottom: 1.5rem;
		width: 100%;
	}
	.unidadesLinks a:not(:first-child) {
		margin-left: 0;
	}
}

iframe {
	height: 1600px;
}

.btn-guara,
.btn-pinda {
	background: #128c7e;
	padding: 9px 40px;
	border-radius: 50px;
	position: fixed;
	color: #fff;
	z-index: 9;
}
.btn-guara:hover,
.btn-pinda:hover {
	background: #25d366;
	color: white;
}
.btn-guara::after,
.btn-pinda::after {
	padding-left: 0.5rem;
}

.btn-guara {
	bottom: 20px;
	right: 50px;
}
.btn-guara::after {
	content: "Fale com Guará";
}
.btn-pinda {
	bottom: 70px;
	right: 50px;
}

.btn-pinda::after {
	content: "Fale com Pinda";
}

@media (max-width: 575.98px) {
	.btn-guara,
	.btn-pinda {
		padding: 10px 14px;
		right: 10px;
		font-size: x-large;
	}
	.btn-guara::after,
	.btn-pinda::after {
		content: none;
		padding-left: 0;
	}
}