@import '../../../style/variables.scss';

// @mixin flex-top {
//     display: flex;
//     align-items: flex-start;
// }
// @mixin flex-center {
//     display: flex;
//     align-items: center;
// }
// .site-footer {
//     background: $LightCream;
//     .top-footer {
//         padding: 40px 0;
//         @media only screen and (min-width: 1024px) {
//             padding: 60px 0;
//         }
//         @media only screen and (min-width: 1200px) {
//             padding: 80px 0;
//         }
//         @media only screen and (min-width: 1440px) {
//             padding: 100px 0;
//         }
//         .footer-logo-box{
//             width: 100%;
//             display: flex;
//             align-items: center;
//             justify-content: center;
//             margin-bottom: 20px;
//             @media only screen and (min-width: 640px) {
//                 width: auto;
//             }
//             @media only screen and (min-width: 1200px) {
//                 width: 33.3333%;
//             }
//             img {
//                 width: auto;
//                 height: 66px;
//                 @media only screen and (min-width: 640px) {
//                     height: 75px;
//                 }
//                 @media only screen and (min-width: 1440px) {
//                     height: 90px;
//                 }
//                 @media only screen and (min-width: 1600px) {
//                     height: 104px;
//                 }
//             }
//         }
//         .inner {
//             @include flex-top();
//             justify-content: space-between;
//             gap: 16px;
//             flex-wrap: wrap;
//             @media only screen and (min-width: 1200px) {
//                 flex-wrap: nowrap;
//             }
//             @media only screen and (min-width: 1600px) {
//                 gap: 32px;
//             }
//             .logo-group {
//                 width: 100%;
//                 @media only screen and (min-width: 640px) {
//                     width: auto;
//                     // margin: auto;
//                 }
//                 @media only screen and (min-width: 1200px) {
//                     width: 33.3333%;
//                 }

//                 .logo-content-wrapper {
//                     @include flex-center();
//                     flex-direction: column;
//                     gap: 10px;
//                     text-align: center;
//                     .logo {
//                         flex-shrink: 0;
//                     }
//                     @media only screen and (min-width: 640px) {
//                         gap: 16px;
//                         text-align: center;
//                         align-items: center;
//                         justify-content: center;
//                     }
//                     // @media only screen and (min-width: 1024px) {
//                     //     flex-direction: row;
//                     // }
//                     @media only screen and (min-width: 1600px) {
//                         gap: 20px;
//                     }
//                 }
//                 p {
//                     font-size: 14px;
//                     margin: 0;
//                     @media only screen and (min-width: 640px) {
//                         font-size: 16px;
//                     }
//                     @media only screen and (min-width: 1441px) {
//                         font-size: 18px;
//                     }
//                 }
//                 img {
//                     width: auto;
//                     height: 66px;
//                     @media only screen and (min-width: 640px) {
//                         height: 75px;
//                     }
//                     @media only screen and (min-width: 1440px) {
//                         height: 90px;
//                     }
//                     @media only screen and (min-width: 1600px) {
//                         height: 104px;
//                     }
//                 }
//             }
//             .download-group {
//                 @include flex-top();
//                 align-items: stretch;
//                 gap: 16px;
//                 width: 100%;
//                 justify-content: space-between;
//                 flex-wrap: wrap;
//                 @media only screen and (min-width: 640px) {
//                     flex-wrap: nowrap;
//                 }
//                 @media only screen and (min-width: 1200px) {
//                     width: 66.6666%;
//                 }
//                 @media only screen and (min-width: 1600px) {
//                     gap: 32px;
//                 }
//                 .item {
//                     border: 1px solid rgba(230, 216, 197, 0.3);
//                     padding: 20px;
//                     width: 100%;
//                     text-align: center;
//                     display: flex;
//                     align-items: center;
//                     justify-content: space-between;
//                     flex-direction: column;
//                     @media only screen and (min-width: 640px) {
//                         width: 50%;
//                     }
//                     @media only screen and (min-width: 1200px) {
//                         width: 50%;
//                         text-align: start;
//                         align-items: flex-start;
//                     }
//                     @media only screen and (min-width: 1440px) {
//                         padding: 30px;
//                     }
//                     h2 {
//                         font-size: 20px;
//                         line-height: 1.5;
//                         font-weight: 400;
//                         margin-bottom: 16px;
//                         text-transform: none;
//                         @media only screen and (min-width: 768px) {
//                             font-size: 24px;
//                         }
//                         @media only screen and (min-width: 1440px) {
//                             font-size: 28px;
//                             margin-bottom: 20px;
//                         }
//                         @media only screen and (min-width: 1600px) {
//                             font-size: 32px;
//                             margin-bottom: 30px;
//                         }
//                     }
//                     .download-links {
//                         @include flex-center();
//                         gap: 10px;
//                         justify-content: center;
//                         @media only screen and (min-width: 1200px) {
//                             justify-content: flex-start;
//                         }
//                         @media only screen and (min-width: 1440px) {
//                             gap: 20px;
//                         }
//                     }
//                 }
//             }
//         }
//     }
//     .bottom-fotter {
//         border-top: 1px solid rgb(45 45 45 / 30%);
//         padding: 10px 0;
//         @media only screen and (min-width: 768px) {
//             padding: 16px 0;
//         }
//         @media only screen and (min-width: 1200px) {
//             padding: 30px 0;
//         }
//         p {
//             font-size: 14px;
//             color: $btnText;
//             margin: 0;
//             @media only screen and (min-width: 640px) {
//                 font-size: 16px;
//             }
//             @media only screen and (min-width: 1441px) {
//                 font-size: 18px;
//             }
//         }
//         .inner {
//             @include flex-center();
//             justify-content: space-between;
//             flex-wrap: wrap;
//             gap: 10px;
//             flex-direction: column;
//             @media only screen and (min-width: 640px) {
//                 flex-direction: row;
//             }
//             .privacy-links {
//                 @include flex-center();
//                 gap: 14px;
//                 margin: 0;
//                 @media only screen and (min-width: 768px) {
//                     gap: 30px;
//                 }
//                 a {
//                     font-size: 14px;
//                     color: $btnText;
//                     &:hover,
//                     &.active {
//                         color: $tertiary;
//                     }
//                     @media only screen and (min-width: 640px) {
//                         font-size: 16px;
//                     }
//                     @media only screen and (min-width: 1200px) {
//                         font-size: 18px;
//                     }
//                 }
//             }
//         }
//     }
//     .footer-menu {
//         @include flex-center();
//         justify-content: center;
//         gap: 12px;
//         margin: 0;
//         flex-wrap: wrap;
//         margin-top: 16px;
//         @media only screen and (min-width: 640px) {
//             gap: 20px;
//             // justify-content: flex-start;
//         }
//         @media only screen and (min-width: 1200px) {
//             gap: 12px;
//             justify-content: space-evenly;
//         }
//         @media only screen and (min-width: 1440px) {
//             margin-top: 20px;
//             gap: 20px;
//         }
//         @media only screen and (min-width: 1600px) {
//             gap: 32px;
//         }
//         .menu-link {
//             font-size: 14px;
//             line-height: 22px;
//             color: $btnText;
//             text-transform: lowercase;
//             &:hover,
//             &.active {
//                 color: $tertiary;
//             }
//             @media only screen and (min-width: 640px) {
//                 font-size: 14px;
//             }
//             @media only screen and (min-width: 1600px) {
//                 font-size: 18px;
//             }
//         }
//     }
// }

$color_1: var(--black25);
$color_2: var(--grey5E);
$color_3: var(--primary);
$font-family_1: 'Avenir Next';
$background-color_1: var(--primary);
$background-color_2: var(--white);
$background-color_3: var(--bgF4);

/* Download Me */
/* Social List */
/* Footer */
/* End Footer */
.download-me {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 20px;
	column-gap: 20px;
	h3 {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.44;
		color: $color_1;
		margin: 0;
		width: 100%;
	}
	img{
		border-radius: 90px;
	}
}
.site-footer {
	font-family: $font-family_1;
	background-color: $background-color_3;
	padding: 60px 0 0;
}
.footer-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 100px;
	padding-bottom: 30px;
	.logo-col {
		max-width: 472px;
		p {
			font-size: 18px;
			line-height: 1.44;
			color: $color_2;
			font-weight: 400;
			margin: 0;
		}
	}
	.menu-col {
		.menu {
			li {
				a {
					font-size: 18px;
					line-height: 1.44;
					color: $color_2;
					font-weight: 500;
					&:hover , &.active {
						color: $color_3;
					}
				}
				margin-bottom: 16px;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		flex-shrink: 0;
	}
	.download-col {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 51px;
		.download-me {
			width: 374px;
			row-gap: 34px;
			h3 {
				font-size: 24px;
				font-weight: 500;
				line-height: 1.08;
				color: $color_2;
			}
		}
	}
}
.footer-logo {
	margin-bottom: 25px;
	img {
		max-width: 122px;
		max-height: 138px;
	}
}
.footer-copyright {
	.menu {
		li {
			a {
				&:hover {
					color: $color_3;
				}
				font-size: 16px;
				font-weight: 400;
				line-height: 1.6;
				color: $color_2;
				margin: 0;
			}
		}
		display: inline-flex;
		align-items: center;
		gap: 30px;
		margin: 0;
	}
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 30px 0;
	border-top: 1px solid var(--primary);
	p {
		font-size: 16px;
		font-weight: 400;
		line-height: 1.6;
		color: $color_2;
		margin: 0;
	}
}
@media (max-width: 1600px) {
	.footer-inner {
		gap: 60px;
		.download-col {
			gap: 30px;
		}
		
	}
	.download-me {
		a {
			img {
				max-width: 160px;
			}
		}
	}
}
@media (max-width: 1470px) {
	.footer-inner {
		.download-col {
			.download-me {
				width: 300px;
				row-gap: 20px;
				h3 {
					font-size: 18px;
				}
			}
			gap: 20px;
		}
		.menu-col {
			.menu {
				li {
					margin-bottom: 10px;
					a {
						font-size: 14px;
					}
				}
			}
		}
		.logo-col {
			p {
				font-size: 14px;
			}
			max-width: 300px;
		}
	}
	.footer-logo {
		img {
			max-width: 90px;
			max-height: 100px;
		}
		margin-bottom: 14px;
	}
	.download-me {
		a {
			img {
				max-width: 140px;
			}
		}
	}
	.footer-copyright {
		p {
			font-size: 14px;
		}
		.menu {
			li {
				a {
					font-size: 14px;
				}
			}
			gap: 22px;
		}
	}
}
@media (max-width: 1199px) {
	.footer-inner {
		.download-col {
			flex-direction: column;
			row-gap: 30px;
		}
	}
}
@media (max-width: 991px) {
	.footer-inner {
		gap: 30px;
	}
	.footer-copyright {
		p {
			font-size: 12px;
		}
		.menu {
			li {
				a {
					font-size: 12px;
				}
			}
		}
	}
}
@media (max-width: 767px) {
	.site-footer {
		text-align: center;
		padding: 40px 0 0;
	}
	.footer-inner {
		padding-bottom: 20px;
		flex-direction: column;
		align-items: center;
		.menu-col {
			.menu {
				li {
					margin-bottom: 6px;
				}
			}
		}
		.download-col {
			.download-me {
				row-gap: 14px;
				justify-content: center;
				h3 {
					font-size: 16px;
				}
			}
		}
	}
	.footer-logo {
		margin-bottom: 6px;
		img {
			max-width: 75px;
			max-height: 85px;
		}
	}
	.footer-copyright {
		gap: 4px;
		flex-direction: column;
		padding: 8px 0;
		p {
			order: 3;
		}
		.f-social-list {
			order: 2;
		}
	}
	.download-me {
		row-gap: 14px;
		column-gap: 14px;
		a {
			img {
				max-width: 136px;
			}
		}
	}
}