.footer {
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
	background: $white;
	position: relative;
	z-index: 1;
	overflow: hidden;
	&__mobile {
		display: flex;
		flex-direction: column;
		padding: 25px 0 30px 0;
		@media (min-width: $tablet) {
			padding: 30px 0;
		}
		@media (min-width: $laptop) {
			display: none;
		}
		&-toper {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0;
			border: none;
			background: none;
			a, b {
				display: flex;
				justify-content: center;
				align-items: center;
				color: $green;
				svg {
					width: 137px;
					height: 40px;
				}
			}
			span {
				width: 40px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: $green;
				color: $white;
				border-radius: 999px;
				svg {
					width: 10px;
					height: 10px;
					transition: $transition;
				}
			}
			&.active {
				span {
					svg {
						transform: $rotate180;
					}
				}
			}
		}
		&-menu {
			height: 0;
			opacity: 0;
			overflow: hidden;
			transition: $transition;
			display: flex;
			flex-direction: column;
			gap: 30px;
			@media (min-width: $tablet) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 100px;
			}
			&-item {
				display: flex;
				flex-direction: column;
				button {
					display: flex;
					align-items: flex-start;
					padding: 0;
					border: none;
					background: none;
					&.active {
						color: $green;
					}
					b {
						width: calc(100% - 24px);
						padding-right: 12px;
						min-height: 24px;
						display: flex;
						align-items: center;
						font-size: 20px;
						font-weight: 700;
					}
					span {
						width: 24px;
						height: 24px;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0;
						border: none;
						background: none;
					}
					svg {
						width: 12px;
						height: 12px;
						transition: $transition;
						transform: $rotate180;
					}
					&.active svg {
						transform: rotate(0deg);
					}
				}
				div {
					height: 0;
					opacity: 0;
					overflow: hidden;
					transition: $transition;
					display: flex;
					flex-direction: column;
					gap: 15px;
					a {
						&:hover {
							color: $green;
						}
					}
				}
				.active + div {
					opacity: 1;
					height: auto;
					overflow: visible;
					padding-top: 15px;
				}
			}
		}
		.active + &-menu {
			opacity: 1;
			height: auto;
			overflow: visible;
			padding-top: 35px;
		}
		&-contacts {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			margin-top: 30px;
			b {
				font-size: 20px;
				font-weight: 700;
				width: 100%;
				margin-bottom: 20px;
			}
			a {
				color: $green;
				text-decoration: underline;
			}
			a + a {
				color: $black;
			}
		}
		&-bottom {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 20px;
			margin-top: 100px;
		}
		&-links {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
			a {
				&:hover {
					color: $green;
				}
			}
			span {
				width: 60px;
				height: 1px;
				background: $green;
			}
		}
	}
	&__main {
		display: none;
		padding: 55px 0 20px 0;
		flex-direction: column;
		gap: 70px;
		@media (min-width: $laptop) {
			display: flex;
		}
		&-body {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		&-logo {
			display: flex;
			justify-content: center;
			align-items: center;
			color: $green;
			svg {
				width: 182px;
				height: 54px;
			}
		}
		&-title {
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 16px;
		}
		&-col {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			nav {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 8px;
				a {
					&:hover {
						color: $green;
					}
				}
			}
		}
		&-contacts {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
			margin-bottom: 16px;
			a {
				color: $green;
				text-decoration: underline;
			}
			a + a {
				color: $black;
			}
		}
		&-copy {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			line-height: 1.4;
			nav {
				display: flex;
				align-items: center;
				gap: 10px;
				a {
					&:hover {
						color: $green;
					}
				}
				span {
					width: 1px;
					height: 20px;
					background: #6b6c6d;
				}
			}
		}
	}
}