.footer {
	padding: 5em 0;
	background-color: var(--footer-background);
	color: var(--footer-color);
	font-size: 100%;

	& h2 {
		font-size:120%;
		text-transform: uppercase;
		margin-bottom: 1em;
	}
	& p {
		margin-bottom: 0.8em;
		line-height: 1.5;
	}
}

.footer-content {
	display: flex;
	justify-content: space-between;
	
	&.wrap1 {
		@media (max-width: 60em) {
			flex-direction:column;
			gap: 4em;
			padding: 0 1em;
		}
	}
	&.wrap2 {
		align-items: center;
		@media (max-width: 40em) {
			flex-direction:column;
			align-items: center;
			gap: 2em;
			padding: 0 1em;
		}
	}
}



.footer-spacer {
	height: 2.5em;
}

.footer-separator {
	border-bottom: 1px solid gray;
}

.footer-widget {
	&.c4 {
		flex-basis:23%;
	}
	&.c3 {
		flex-basis:30%;
	}
}

.footer-logo {
    & a {
        & img {
            width:100%;
			max-width: 18em;
	    }
    }
}

.footer-info {
	display: flex;
	flex-direction:column;
    align-items: flex-start;
	font-size: 100%;
	> a {
		color: var(--footer-color);
		font-weight:normal;
		display:flex;
		gap: 0.4em;
		align-items: center;
		border-bottom: 0px solid white;
		padding: 0.4em 0;
		transition: all 0.2s ease-in-out;
		> svg {
			transition: all 0.2s ease-in-out;
            flex-shrink:0;
			height: 1.2em;
			width: 1.2em;
			fill: var(--footer-color);
		}
	}
	> a:hover {
        color: var(--highlight);
		> svg {
			fill: var(--highlight);
		}
	}
}

.footer-social {
	display: flex;
	gap: 1em;
	a {
		color:black;
		line-height: 0;
		> svg {
			flex-shrink:0;
			width: 2em;
			height: auto;
            fill: white;
			transition: all 0.2s ease-in;
		}
	}
	a:hover {
		> svg {
			fill: var(--highlight);
			transition: all 0.2s ease-in;
		}
	}
}

.webdesign-wrapper {
	margin-top:5em;
	display: flex;
	justify-content: flex-end;
	@media (max-width: 40em) {
		justify-content: center;
	}
}

.webdesign {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.webdesign-span {
	font-size: 80%;
	padding-bottom:0.5em;
}

.webdesign-logo {
	width:10em;
	display: flex;
	padding:0.5em;
	background-color: rgb(150,20,20);
	& img {
		display: block;
		padding: 5% 8%;
		width: 100%;
	}
}