.footer {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-color: var(--black-color);
}

.footer .container {
	padding-block: 40px;
}

.footer__content {
	display: grid; gap: 50px;
	grid-auto-columns: 1fr max-content 1fr 1.4fr;
	grid-template-areas: 
		'part-1 part-2 part-3 part-4';
}
.footer .part--1 { grid-area: part-1; }
.footer .part--2 { grid-area: part-2; }
.footer .part--3 { grid-area: part-3; }
.footer .part--4 { grid-area: part-4; }

.footer .part--1 {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
 
.footer .logo svg {
	width: 200px;
	height: 85px;
}
footer .logo svg path:not(:first-child) {
    fill: var(--white-color);
}

.footer .cta {
	padding: 20px;
	border-radius: 20px;
	background-color: var(--white-color-a10);
}

.footer .cta p { margin-bottom: 20px; }
.footer .cta button { margin: 0 auto; } 

.footer nav { height: 100%; }

.footer nav > p { margin-bottom: 30px; }

.footer ul { 
	list-style: none; 
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 83%;
}
.footer .part--2 li p:hover { color: var(--green-color); }

.footer .part--3 {
	display: flex; gap: 30px;
	flex-direction: column;
}

.footer .part--3 .elem { 
	display: flex; gap: 5px;
	flex-direction: column;
}

.footer .part--4 iframe { 
	border-radius: 20px;
}



@media screen and (max-width: 1070px) {
	.footer__content {
		grid-auto-columns: max-content 1fr 1.4fr;
		grid-template-areas: 
			"part-1 part-1 part-1"
			"part-2 part-3 part-4";
	}
	.footer .part--1 {
		max-width: 400px;
    	margin: 0 auto;
	}
	.footer .part--1 .logo {
		margin: 0 auto;
    	margin-bottom: 40px;
	}
}

@media screen and (max-width: 750px) {
	.footer__content {
		grid-auto-columns: 1fr;
		grid-template-areas: 
			"part-1"
			"part-2"
			"part-3"
			"part-4";
	}
	.footer .part--1 {
    	margin: unset;
	}
	.footer .part--1 .logo {
		margin: unset;
		margin-bottom: 40px;
	}
	.footer nav { height: unset; }
	.footer nav ul { gap: 20px; }
	.footer .cta .button { margin-inline: auto; }
	.footer .part--1 .logo svg {
		display: block;
		margin: 0 auto;
	}
	.accordion-content > * { padding-left: 0; }
}