footer {
	background: var(--primary);

	.content {
		border-left: 1px solid hsl(from var(--border) h s l / 0.2);
		border-right: 1px solid hsl(from var(--border) h s l / 0.2);
		padding-bottom: 4rem;
	}

	.upper {
		display: flex;
		padding-top: 4rem;
		padding-bottom: 4rem;
		justify-content: space-between;

		.menus {
			display: flex;
			gap: 2rem;
			flex: 1;
			justify-content: end;

			.col {
				display: flex;
				flex-direction: column;
				flex: 1;
				max-width: 240px;

				h3 {
					color: var(--text-alt);
					font-family: var(--font-heading);
					font-weight: normal;
					margin: 0;
					margin-bottom: 25px;
				}

				ul {
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					gap: 10px;

					li {
						list-style: none;

						a {
							color: var(--text);
							text-decoration: none;

							&:hover {
								color: var(--text-alt);
							}
						}
					}
				}
			}
		}

		.logo {
			display: flex;
			flex-direction: column;
			gap: 1rem;

			.phone {
				color: var(--text-alt);
				font-size: 1.2rem;
				display: flex;
				align-items: center;
				gap: 10px;
				i {
					font-size: 1.8em;
					margin: 0;
					display: flex;
					opacity: 0.3;
				}
			}
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;

		.left {
			.copyright {
				font-size: 0.8rem;
				text-align: left;
				line-height: 1.6;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			font-size: 0.9rem;
			text-align: right;
			line-height: 1.6;
		}
	}
}