style.css

body {
	font-family: 'Lato', sans-serif;
}

/*-------Header--------*/

header {
	width: 100%;
	height: auto;
	position: fixed;
	z-index: 1000;
}

.contact_header {
	display: flex;
	justify-content: center;
	padding: 10px 0;

	font-size: 1em;

	background-color: black;
}

.contact_header > a {
	color: white;
}

nav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;

	padding: 8px 150px;

	background-color: rgba(0, 0, 0, 0.7);
}

.logo_nav {
	width: 200px;
	height: auto;
}

.logo_nav > a > img {
	width: 200px;
	height: auto;
}

.list_links_nav {
	display: flex;

	margin-top: 10px;
	column-gap: 30px;
}

.list_links_nav a {
	color: white;
}

.list_links_nav > li:hover > a {
	color: #4FAB2A;
	transition: 0.3s;
}

.item_sublist {
	display: flex;
	flex-wrap: nowrap;
	column-gap: 10px;
	color: white;
}

.item_sublist:hover {
	color: #4FAB2A;
	transition: 0.3s;
}

.item_sublist:hover > .div_expandMore {
	background-color: #4FAB2A;
	transition: 0.3s;
}

.div_expandMore {
	width: 15px;
	height: 15px;
	margin-top: 2px;

	background-color: dimgrey;
	border-radius: 50px;
}

.div_expandMore > span {
	color: white;
	font-size: 1em;
}

.sublist_links_nav {
	display: none;
}

#line_nav {
	width: 2px;
	height: 30px;
	border-left: 1px dotted white;

	margin-top: -5px;
}

.restrict_area {
	display: flex;
	flex-wrap: nowrap;
	column-gap: 5px;
}

.restrict_area > span {
	margin-top: -2px;
	font-size: 1.3em;
}

.restrict_area > p:hover {
	color: #4FAB2A;
	transition: 0.3s;
}

/*--------Page Home--------*/

.main_home, .main_unidades {
	width: 100%;
	height: auto;
}

.section_banner {
	width: 100%;
	height: 540px;

	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll;
}

.banner {
	width: 100%;
	height: 100%;

	display: flex;
	flex-wrap: wrap;
	align-content: center;
	padding: 0 150px;

	color: white;
}

.banner_one {
	background-image: url("https://www.cotemig.com.br/static/course/desktopimagefull-1666281205435.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.banner_two {
	background-image: url("https://www.cotemig.com.br/static/courseType/desktopimagefull-1621255560654.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.banner_hidden {
	display: none;
}

.content_banner {
	width: 100%;
	height: auto;
}

.title_banner {
	font-size: 2.5em;
	font-weight: bold;
}

.subtitle_banner {
	margin: 30px 0;
	font-size: 1.1em;
}

.content_banner > a > input {
	width: 330px;
	height: 45px;

	background-color: #4FAB2A;
	color: white;
	cursor: pointer;

	border: none;
	border-radius: 10px;
}

.content_banner > a:hover > input {
	background-color: #55B82E;
	transition: 0.3s;
}

.counter_banner {
	display: flex;
	flex-wrap: nowrap;
	column-gap: 5px;
	margin-top: 30px;
}

.dot_counter {
	width: 10px;
	height: 10px;
	border-radius: 50px;
	background-color: white;
}

/*----------------*/

.section_cursos, .section_unidades, .section_novidades {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	padding: 20px 0;
}

.section_cursos > h1, .section_unidades > h1, .section_novidades > h1 {
	width: 100%;
	padding-bottom: 5px;
}

.section_cursos > p, .section_unidades > p {
	width: 700px;
	margin-bottom: 30px;
	font-size: 1.2em
}

.div_list_cursos, .div_list_unidades, .div_list_novidades {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	column-gap: 20px;
	justify-content: center;
}

.div_list_cursos > a {
	color: black;
}

.list_cursos {
	width: 270px;
	height: auto;

	border-radius: 15px;
	box-shadow: 0 0 10px lightgray;
}

.img_list_cursos {
	width: 100%;
	height: 160px;
	border-radius: 15px 15px 0 0;
	
	background-image: url("https://www.cotemig.com.br/static/courseType/desktopimage-1665520421086.png");
	background-size: cover;
	background-position: center;
}

.dark_img {
	width: 270px;
	height: 160px;
	position: absolute;
	margin-top: -160px;
	border-radius: 10px 10px 0 0;

	background-color: rgba(0, 0, 0, 0.5);
}

.list_cursos > p {
	margin-left: 10px;
	font-weight: bold;

	font-size: 1.3em;
	color: white;
	position: absolute;
	margin-top: -40px;
}

.item_curso {
	width: 100%;
	height: 60px;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.item_curso:hover > p {
	color: #4FAB2A;
	transition: 0.3s;
}

.img_curso {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	margin-left: 10px;

	background-image: url("https://www.cotemig.com.br/static/courseType/desktopimage-1665520421086.png");
	background-size: cover;
	background-position: center;
}

.item_curso > p {
	width: 200px;
	font-size: 0.9em;
	text-align: left;
	padding-left: 10px;
}

/*----------------*/

.div_list_unidades {
	height: 370px;
	align-items: center;
}

.item_unidades {
	width: 360px;
	height: 320px;

	box-shadow: 0 0 10px lightgray;
	border-radius: 10px;
	cursor: pointer;
	text-align: initial;
}

.item_unidades:hover {
	height: 330px;
	box-shadow: 0 0 10px gray;
	transition: 0.3s;
}

.item_unidades > img {
	width: 100%;
	height: auto;
	border-radius: 10px 10px 0 0;
	margin-bottom: 10px;
}

.text_unidade {
	width: 100%;
	height: auto;
	padding: 10px 0 0 20px;
	display: flex;
	flex-wrap: wrap;
}

.name_unidade {
	width: 100%;
	font-size: 1.2em;
	margin-bottom: 10px;
}

.text_unidade > span {
	font-size: 1.1em;
	color: #4FAB2A;
	background-color: #E9F6E7;
	padding: 3px;
	border-radius: 50px;
}

.end_unidade {
	margin-left: 5px;
	color: dimgray;
}

.desc_unidade {
	margin: 10px 0 0 30px;
	color: dimgray;
}

/*----------------*/

.section_atendimento {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
}

.title_atendimento {
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 10px;
}

.section_atendimento > span {
	position: absolute;
	margin-left: -330px;
	background-color: #E9F6E7;
	color: #4FAB2A;
	font-size: 2.2em;
	border-radius: 50px;
	padding: 10px;
}

.number_atendimento {
	font-weight: bold;
	font-size: 2em;
	color: #4FAB2A;
}

/*----------------*/

.div_list_novidades {
	margin: 30px 0;
}

.item_novidades {
	width: 280px;
	height: 320px;

	background-image: url("https://www.cotemig.com.br/static/blog/mobileimagefull-1667244666825.png");
	background-size: cover;
	background-position: center;

	box-shadow: 0 0 10px lightgray;
	border-radius: 10px;
	color: white;
	text-align: initial;
}

.item_novidades:hover {
	background-size: 120%;
}

.dark_novidade {
	width: 280px;
	height: 320px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	z-index: 1;
}

.text_novidade {
	width: 100%;
	height: 100%;
	padding: 15px;

	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	position: relative;
	z-index: 2;
}

.date_novidade {
	margin-top: 10px;
	color: darkgray;
	font-size: 0.825em
}

/*--------Page Unidades--------*/

.main_unidades {
	padding-top: 110px;
}

.main_unidades > .section_atendimento {
	margin-bottom: 30px;
}

/*--------Footer--------*/

footer {
	width: 100%;
	height: auto;
	padding: 30px 150px;
	background-color: #151515;
}

.div_site_map {
	width: 100%;
	height: auto;
	padding: 20px 0 30px 0;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	column-gap: 50px;
	border-bottom: 1px solid dimgray;
}

.div_site_map > div {
	height: auto;
}

.footer_title {
	font-size: 1.1em;
	margin-bottom: 20px;
	padding: 0px 10px;
	color: white;
}

.list_links_footer > a {
	color: darkgray;
}

.list_links_footer > a > li {
	margin-bottom: 10px;
	font-size: 0.825em;
	padding: 5px 10px;
	list-style: none;
}

.list_links_footer > a > li:hover {
	background-color: #212121;
	border-radius: 10px;
}

.footer_about {
	width: 150px;
}

.footer_cursos {
	width: 250px;
}

.footer_outros {
	width: 200px;
}

.footer_start {
	width: 400px;
}

.desc_start {
	color: darkgray;
}

.title_start {
	font-size: 1.1em;
	margin-bottom: 20px;
	color: white;
}

.button_start {
	width: 100%;
	height: 50px;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	background-color: #4FAB2A;
	cursor: pointer;
}

.button_start:hover {
	background-color: #55B82E;
	transition: .3s;
}

.div_social {
	width: 100%;
	height: auto;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	column-gap: 20px;
}

.footer_logo {
	width: 400px;
	font-size: 0.825em;
	color: dimgray;
}

.footer_logo > a > img {
	width: 130px;
	margin-bottom: 20px;
}

.footer_colegio {
	width: 400px;
}

.footer_faculdade {
	width: 400px;
}

.list_footer_social {
	margin-left: 10px;
	column-gap: 15px;
	display: flex;
	flex-wrap: nowrap;
}

.list_footer_social > a > li {
	text-align: center;
	color: dimgray;
	font-size: 0.825em;
}

.list_footer_social > a > li:hover > span {
	color: white;
	transition: .3s;
}

.div_img_social {
	width: 70px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	margin-bottom: : 2px;
}

.facebook > img, .linkedin > img {
	height: 30px;
}

.instagram > img {
	height: 25px;
}

.twitter > img {
	height: 40px;
}

.facebook {background-color: #3B5998}
.instagram {background-color: white}
.linkedin {background-color: #297BB9}
.twitter {background-color: #40ABEC}