@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Unica+One&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	scroll-behavior: smooth;
	overflow-x: hidden;
	background-color: #150e28;
	--font-1: "Inter", sans-serif;

	--font-2: "Montserrat", sans-serif;
	--color1: #d434fe;
	--color2: #903aff;
	--gradient: linear-gradient(to left, var(--color1), var(--color2));
	--line: rgba(255, 255, 255, 0.18);
	--background-color: #150e28;
}

html {
	font-size: 64.5%;
}

.landing {
	width: 100%;
	border-bottom: 2px solid var(--line);
	height: fit-content;

	@media screen and (max-width: 991px) {
		border-bottom: 0px solid white;
	}
}

.intro-text {
	font-size: 3.6rem;
	font-family: var(--font-2);
	color: white;
	text-align: right;
	margin-top: 10px;
	font-style: italic;
	margin-right: 5%;

	@media screen and (max-width: 760px) {
		font-size: 3rem;
	}

	@media screen and (max-width: 672px) {
		font-size: 2.7rem;
	}

	@media screen and (max-width: 563px) {
		font-size: 2.3rem;
	}

	@media screen and (max-width: 485px) {
		font-size: 2rem;
	}

	@media screen and (max-width: 384px) {
		font-size: 1.5rem;
	}
}

.underline {
	position: relative;

	& .curved-underline {
		position: absolute;
		bottom: -30px;
		left: 0;

		.icon {
			width: 100%;
			height: 30px;
		}
	}
}

.landing-contents {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: start;
	padding: 5% 10% 0;

	& .content.text {
		width: 50%;
		height: fit-content;
	}

	& .content.img {
		position: relative;
		width: 50%;
	}

	@media screen and (max-width: 991px) {
		flex-direction: column;
		padding: 5% 3% 0;

		& .content.text {
			width: 100%;
			text-align: center;
		}

		& .content.img {
			width: 100%;
		}
	}
}

.heading {
	white-space: nowrap;
	font-size: 5rem;
	font-family: var(--font-1);
	color: white;
	z-index: 100;
	font-weight: 900;

	@media screen and (max-width: 1062px) {
		font-size: 4rem;
	}

	@media screen and (max-width: 497px) {
		font-size: 3rem;
	}

	@media screen and (max-width: 400px) {
		font-size: 2.5rem;
	}
}

.support {
	font-size: 10px;
	color: white;
	font-size: 1.9rem;
	font-family: var(--font-2);
	margin: 20px 0 30px;

	@media screen and (max-width: 497px) {
		font-size: 1.6rem;
	}

	@media screen and (max-width: 421px) {
		font-size: 1.3rem;
	}

	@media screen and (max-width: 400px) {
		font-size: 1.3rem;
	}
}

.time {
	display: flex;
	margin: 50px 0;
	font-size: 5rem;
	font-family: Unica One, "cursive";
	/* background-color: red; */
	align-items: center;

	@media screen and (max-width: 991px) {
		justify-content: center;
	}

	& .t-box {
		color: white;
		margin: 0px 10px;
	}
}

/* // Images */

.content.img {
	padding: 10px;
	position: relative;
	height: fit-content;

	& .blur-grad {
		/* filter: blur(0px) !important; */
		right: 80px;
		top: 0px;

		@media screen and (max-width: 991px) {
			display: none;
		}
	}

	& .height {
		height: 400px;
		width: 100%;

		@media screen and (max-width: 600px) {
			width: 100%;
			height: 400px;
		}
	}

	& img {
		height: 450px;
		top: -30px;
		left: 50%;
		transform: translate(-50%);
		position: absolute;
		aspect-ratio: auto;

		@media screen and (max-width: 600px) {
			width: 100%;
			height: 400px;
		}

		@media screen and (max-width: 500px) {
			width: 100%;
		}

		&:first-child {
			z-index: 4 !important;
		}
	}
}

.introduction {
	display: flex;
	width: 100%;
	padding: 6% 7%;
	border-bottom: 1px solid var(--line);

	@media screen and (max-width: 991px) {
		flex-direction: column;
	}

	& > .intro-box {
		width: 50%;

		@media screen and (max-width: 991px) {
			width: 100%;
		}
	}
}

.intro-box.img {
	background-image: url(../img/info-image.png);
	height: 350px;
	/* background-color: red; */
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;

	& .intro-box-head {
		color: white;
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 2.5rem;
		transform: translate(-50%, -10%);

		@media screen and (max-width: 991px) {
			font-size: 2.3rem;
		}
	}
}

.intro-box.text {
	margin-top: 100px;

	@media screen and (max-width: 991px) {
		text-align: center;
		/* flex-direction: column; */
	}
	& .head {
		font-size: 3rem;
		font-family: var(--font-1);
		color: white;
		margin-bottom: 20px;
		font-weight: 900;
	}

	& .support-intro {
		font-size: 1.4rem;
		font-family: var(--font-2);
		color: white;
		line-height: 2.5rem;
	}
}

.rules {
	display: flex;
	padding: 1% 7%;
	/* background-color: red; */
	position: relative;
	border-bottom: 1px solid var(--line);

	& > .rule-box {
		width: 50%;

		@media screen and (max-width: 991px) {
			width: 100%;
		}
	}

	@media screen and (max-width: 991px) {
		padding: 0% 5%;
		flex-direction: column;
	}
}

.rule-box.text {
	margin-top: 70px;
	margin-bottom: 30px;

	& .blur-grad {
		/* filter: blur(0px); */
		left: 0;
		left: 10%;
		top: 15%;
	}

	@media screen and (max-width: 991px) {
		text-align: center;
		/* flex-direction: column; */
	}
	& .head {
		font-size: 3rem;
		font-family: var(--font-1);
		color: white;
		margin-bottom: 20px;
		font-weight: 900;
	}

	& .rules-intro {
		font-size: 1.4rem;
		font-family: var(--font-2);
		color: white;
		line-height: 2.5rem;
	}
}

.rule-box.img {
	height: 500px;

	/* background-color: red; */

	@media screen and (max-width: 991px) {
		order: -1;
		height: 450px;
	}
	& img {
		height: 100%;
		object-fit: contain;
		width: 100%;
		object-position: center;
	}

	& .blur-grad {
		filter: blur(100px);
		height: 150px;
		transform: rotate(270deg);
		width: 300px; /* width = 2 * height */
		/* background-color: red; */
		border-top-left-radius: 50% 100%;
		border-top-right-radius: 50% 100%;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		right: 0;
		top: 50%;

		@media screen and (max-width: 991px) {
			top: 75%;
		}
	}
}

.attributes {
	display: flex;
	padding: 10% 7%;
	align-items: center;
	position: relative;
	border-bottom: 1px solid var(--line);

	& .attr-box {
		width: 50%;

		@media screen and (max-width: 991px) {
			width: 100%;
		}
	}

	@media screen and (max-width: 991px) {
		padding: 10% 5%;
		flex-direction: column;
	}
}

.attr-box.img {
	height: 450px;
	display: flex;
	& img {
		width: 80%;
		justify-content: center;
		margin: 0 auto;
		display: block;
		height: 100%;
		object-fit: contain;
		object-position: center;
		background-repeat: repeat;
	}

	@media screen and (max-width: 991px) {
		height: 350px;
	}

	& .blur-grad {
		/* filter: blur(0px); */
		top: 50%;

		@media screen and (max-width: 991px) {
			top: 100%;
			right: 0;
		}
	}
}

.attr-box.text {
	@media screen and (max-width: 991px) {
		text-align: center;
	}
	& .head {
		font-size: 3rem;
		font-family: var(--font-1);
		color: white;
		margin-bottom: 20px;
		font-weight: 900;
	}

	& .att-text {
		& b {
			font-size: 1.5rem;
			color: var(--color1);
		}
		color: white;
		margin: 30px 0;
		font-size: 1.4rem;
		font-family: var(--font-2);
		line-height: 2.4rem;
	}

	& .blur-grad {
		/* filter: blur(0px); */
		top: 50%;
		right: 0;
		top: 85%;

		@media screen and (max-width: 991px) {
			top: 10%;
			filter: blur(100px);
			left: 0;
		}
	}
}

.faqs {
	display: flex;
	padding: 10% 5% 10% 10%;
	margin-top: 30px;
	justify-content: center;
	border-bottom: 1px solid var(--line);

	.faq-box {
		width: 50%;

		@media screen and (max-width: 991px) {
			width: 100%;
		}
	}

	@media screen and (max-width: 991px) {
		padding: 10% 5%;
		flex-direction: column;
	}
}

.faq-box.text {
	& .head {
		color: white;
		font-family: var(--font-1);
		font-size: 3rem;
		font-weight: 900;

		@media screen and (max-width: 991px) {
			text-align: center;
		}
	}

	& .faq-text {
		color: white;
		font-size: 1.5rem;
		margin-top: 15px;
		font-family: var(--font-2);
		line-height: 2.6rem;

		@media screen and (max-width: 991px) {
			text-align: center;
		}
	}

	& .question-cont {
		font-size: 1.5rem;
		margin-top: 50px;
		color: white;
		font-family: var(--font-2);
	}

	& .quest-box {
		height: 60px;
		border-bottom: 2px solid var(--color1);
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		width: 90%;
		position: relative;

		@media screen and (max-width: 991px) {
			margin: 10px auto;
			width: 100%;
		}
	}

	& .rd-more {
		color: var(--color1);
		font-size: 2.5rem;
		position: absolute;
		right: 0;
	}
}

.faq-box.img {
	/* height: 600px; */

	& img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}

	@media screen and (max-width: 991px) {
		margin-top: 100px;
	}
}

.timeline {
	padding: 10% 10%;
	& > .head {
		font-size: 3rem;
		color: white;
		text-align: center;
		font-family: var(--font-1);
		font-weight: 900;
	}

	& > .intro {
		font-family: var(--font-2);
		text-align: center;
		color: white;
		font-size: 1.7rem;
		width: 450px;
		margin: 20px auto;
	}
}

.timeline-cont {
	margin-top: 100px;
}

.time-box {
	width: 100%;
	height: fit-content;
	/* background-color: var(--color2); */
	margin-bottom: 30px;
	display: flex;

	& .date {
		width: 40%;
		display: flex;
		align-items: end;
		justify-content: end;
		padding-bottom: 20px;

		& p {
			font-family: var(--font-2);
			color: var(--color1);
			font-size: 2.3rem;
			font-weight: 900;
			text-align: center;
		}
	}

	& .text {
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: end;
		/* align-items: end; */

		& .head {
			font-size: 2.5rem;
			color: white;
			font-family: var(--font-2);
			color: var(--color1);
		}

		& .support {
			text-align: start;
			font-size: 1.5rem;
		}
	}

	& .design {
		width: 20%;

		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		& .line {
			width: 5px;
			height: 120px;
			background-color: var(--color1);
		}

		& .number {
			color: white;
			font-size: 3rem;
			font-family: var(--font-2);
			font-weight: 500;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-image: var(--gradient);
			margin-top: 10px;
		}
	}

	&:nth-child(odd) {
		& .text {
			order: -1;

			& .support {
				text-align: end;
			}
		}

		& .date {
			order: 2;
			justify-content: start;
		}
	}

	&:nth-child(1) {
		& .line {
			width: 5px;
			height: 180px;
			background-color: var(--color1);
		}
	}

	@media screen and (max-width: 820px) {
		flex-wrap: wrap;
		position: relative;

		& > .design {
			order: -2;
			height: 300px;
		}

		& .text {
			order: -1;
			width: 80%;
			position: absolute;
			left: 19%;
			bottom: 35%;
			text-align: left;
			align-items: start;
			justify-content: start;

			& .head {
				font-size: 2rem;
			}

			& .support {
				text-align: start !important;
			}
		}

		& .date {
			order: 0;
			position: absolute;
			left: 25%;
			bottom: 0%;
			transform: translateY(-20%);
			justify-content: start;
			align-items: start;
			width: 100%;
		}

		& .line {
			height: 60% !important;
		}

		/* &:nth-child(1) {
			& .line {
				width: 5px;
				height: 120px;
				background-color: var(--color1);
			}
		} */
	}

	@media screen and (max-width: 600px) {
		& .head {
			font-size: 1.6rem !important;
		}

		& .date {
			transform: translateY(-70%) !important;
			& p {
				font-size: 1.3rem !important;
			}
		}
	}
}

.prizes {
	overflow: hidden;
	margin-top: 20px;
	background-color: rgba(15, 9, 28, 0.224);

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 7% 7%;
	display: flex;
	flex-wrap: wrap;

	@media screen and (max-width: 1199px) {
		flex-direction: column;
	}

	& .space {
		width: 50%;
		height: 100px;

		@media screen and (max-width: 1199px) {
			width: 0%;
		}
	}
}

.prize-text {
	width: 40%;
	margin-left: auto;
	height: fit-content;

	& .head {
		font-size: 3.2rem;
		color: white;
		font-family: var(--font-1);
		font-weight: 900;
		margin-bottom: 20px;
	}

	& .info-text {
		font-family: var(--font-2);
		color: white;
		font-size: 1.5rem;
	}

	@media screen and (max-width: 1199px) {
		width: 100%;
		text-align: center;
	}
}

.prize-box.img {
	width: 40%;
	position: relative;

	& img {
		width: 100%;
	}
	& .blur-grad {
		/* filter: blur(1px); */
		top: 40%;
	}

	@media screen and (max-width: 1199px) {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.prize-box.text {
	/* background-color: gray; */
	margin-left: auto;
	display: flex;
	width: 50%;
	align-items: center;
	justify-content: center;
	& .position {
		width: 32.5%;
		height: 200px;
		border: 1px solid var(--color1);
		background-color: #d634fe26;
		border-radius: 10px;
		margin: 200px 20px;
		display: flex;
		justify-content: end;
		flex-direction: column;
		position: relative;
		@media screen and (max-width: 1199px) {
			width: 30%;
		}

		@media screen and (max-width: 991px) {
			margin: 200px 10px;
			height: 150px;
		}
		& img {
			position: absolute;
			width: 100%;
			top: 0%;
			left: 50%;
			transform: translate(-50%, -60%);

			@media screen and (max-width: 1199px) {
				width: 30%;
				transform: translate(-50%, -60%);
			}

			@media screen and (max-width: 991px) {
				width: 90% !important;
			}
		}

		& .text {
			font-size: 3rem;
			font-family: var(--font-2);
			font-weight: 900;
			line-height: 2.5rem;
			color: white;
			text-align: center;

			@media screen and (max-width: 991px) {
				text-align: center;
				font-size: 2rem;
			}

			& p {
				font-size: 1.8rem;
				font-weight: 500;

				@media screen and (max-width: 991px) {
					text-align: center;
					font-size: 1.5rem;
				}
			}
		}

		& .price {
			font-size: 2.3rem;
			font-weight: 900;
			text-align: center;
			font-family: var(--font-2);
			color: var(--color1);
			margin-top: 20px;
			margin-bottom: 10px;

			@media screen and (max-width: 991px) {
				text-align: center;
				font-size: 1.5rem;
			}
		}

		&:nth-child(2) {
			width: 40%;
			height: 230px;
			background-color: #8f3aff35;
			border: 1px solid var(--color2);

			& .price {
				color: var(--color2);
			}
			& img {
				width: 90%;
				top: -40%;
				left: 50%;
				transform: translateX(-50%);

				@media screen and (max-width: 1199px) {
					width: 60%;
					transform: translate(-50%, -55%);
				}

				@media screen and (max-width: 991px) {
					/* width: 130%; */
					/* height: 150px; */
					transform: translate(-50%, -20%);
				}
			}

			@media screen and (max-width: 991px) {
				height: 180px;
				width: fit-content;
				padding: 20px 10px;
				width: 40% !important;
			}
		}
	}

	@media screen and (max-width: 1199px) {
		width: 100%;
	}
}

.partners {
	padding: 10% 20%;
	border-bottom: 1px solid var(--line);
	& .head {
		font-size: 3.2rem;
		color: white;
		text-align: center;
		font-family: var(--font-1);
		font-weight: 900;
	}

	& .support {
		text-align: center;
		width: 650px;
		margin: 10px auto;
		font-size: 1.7rem;
		color: white;
		font-family: var(--font-2);
		margin-bottom: 100px;
		@media screen and (max-width: 991px) {
			font-size: 1.5rem;
			text-align: center;
			width: fit-content;
		}
	}

	@media screen and (max-width: 991px) {
		padding: 10% 5%;
	}
}

.partner-cont {
	width: 100%;
	height: fit-content;
	border: 1px solid var(--color2);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	margin-top: 50px;
	margin: 10px;
	padding: 3%;
	justify-content: space-between;

	& .partner-box {
		width: 30%;
		height: 160px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		@media screen and (max-width: 991px) {
			height: 120px;
		}
		.logo {
			width: 90%;
			height: 90%;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		&:first-child {
			.logo {
				background-image: url(../img/logo-liberty.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				width: 45%;
			}
			.line {
				border: 2px solid var(--color1);
				position: absolute;
				width: 90%;
				left: 50%;
				transform: translateX(-50%);
				bottom: -5%;
			}

			.line2 {
				border: 2px solid var(--color1);
				position: absolute;
				width: 1px;
				right: -5%;
				height: 70%;
				top: 50%;
				transform: translateY(-50%);
				bottom: 10px;
			}
		}

		&:nth-child(2) {
			.line {
				border: 2px solid var(--color1);
				position: absolute;
				width: 1px;
				right: -5%;
				height: 70%;
				top: 50%;
				transform: translateY(-50%);
				bottom: 10px;
			}

			.line2 {
				border: 2px solid var(--color1);
				position: absolute;
				width: 90%;
				left: 0;
				/* transform: translateX(-60%); */
				bottom: -5%;
			}
			.logo {
				background-image: url(../img/logo-liberty-pay.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				width: 70%;
			}
		}

		&:nth-child(3) {
			.line2 {
				border: 2px solid var(--color1);
				position: absolute;
				width: 90%;
				left: 0;
				/* transform: translateX(-60%); */
				bottom: -5%;
			}

			.logo {
				background-image: url(../img/logo-winwise.png);
				width: 50%;
			}
		}

		&:nth-child(4) {
			.line2 {
				border: 2px solid var(--color1);
				position: absolute;
				width: 1px;
				right: -5%;
				height: 70%;
				top: 50%;
				transform: translateY(-50%);
				bottom: 10px;
			}

			.logo {
				background-image: url(../img/logo-wisperms.png);
				width: 50%;
			}
		}

		&:nth-child(5) {
			.line2 {
				border: 2px solid var(--color1);
				position: absolute;
				width: 1px;
				right: -5%;
				height: 70%;
				top: 50%;
				transform: translateY(-50%);
				bottom: 10px;
			}

			.logo {
				background-image: url(../img/logo-pay-box.png);
				width: 70%;
			}
		}

		&:nth-child(6) {
			.logo {
				background-image: url(../img/log-visual-plus.png);
				width: 80%;
			}
		}
	}
}

.privacy {
	display: flex;
	padding: 10% 7%;
	justify-content: space-around;
	.priv-box {
		width: 50%;

		@media screen and (max-width: 991px) {
			width: 100%;
		}
	}

	@media screen and (max-width: 991px) {
		flex-direction: column;
	}
}

.priv-box.text {
	& .head {
		font-size: 3rem;
		color: white;
		font-family: var(--font-1);
		font-weight: 900;
		@media screen and (max-width: 991px) {
			text-align: center;
		}
	}

	.updated {
		color: rgba(255, 255, 255, 0.75);
		font-size: 1.3rem;
		font-family: var(--font-2);
		margin-top: 10px;

		@media screen and (max-width: 991px) {
			text-align: center;
		}
	}

	.supp {
		color: white;
		font-size: 1.6rem;
		line-height: 2.5rem;
		font-family: var(--font-2);
		margin-top: 35px;

		@media screen and (max-width: 991px) {
			text-align: center;
		}
	}

	.priv-cont {
		border-radius: 0.5rem;
		border: 1px solid #d434fe;
		background: rgba(217, 217, 217, 0.03);
		margin-top: 20px;
		padding: 5% 10%;
		width: 95%;
		position: relative;
		.policy {
			font-size: 1.5rem;
			line-height: 3rem;
			color: white;
			font-family: var(--font-2);
			margin-bottom: 30px;

			@media screen and (max-width: 991px) {
				text-align: center;
			}
		}

		.lis-head {
			font-size: 2rem;
			color: var(--color1);
			font-family: var(--font-1);
			font-weight: 900;
		}
		.lis-sp {
			font-size: 1.5rem;
			margin: 30px 0;
			font-weight: 900;
			font-family: var(--font-2);
			color: white;
		}

		.lis-pol-list {
			list-style-image: url(../img/list\ terms.png);
			margin-left: 5.5%;
			margin-bottom: 50px;

			& li {
				font-size: 2rem;
				color: white;
				font-size: 1.5rem;
				font-family: var(--font-2);
				margin-bottom: 20px;
				line-height: 3.5rem;
			}
		}

		.btn {
			transform: translateX(-50%) !important;
			position: absolute;
			left: 50%;
			bottom: 20px;
		}
	}
}

.priv-box.img {
	position: relative;
	/* width: 40%; */

	& img.vector {
		position: absolute !important;
		top: 0;
		width: 100%;
		z-index: -1;
	}

	& img.img-lock {
		width: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.footer {
	background-color: rgba(15, 9, 28, 0.224);
	width: 100%;
	padding: 5% 10% 3%;
}

.footer-cont {
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: 40px;
	& > .text {
		flex-basis: 50%;
		height: fit-content;
		& h2.head {
			font-family: var(--font-1);
			font-size: 3.2rem;
			color: white;
		}

		& .supp {
			color: white;
			font-family: var(--font-2);
			font-size: 1.2rem;
			line-height: 2rem;
		}

		& .terms {
			margin-top: 50px;

			& a {
				color: white;
				font-size: 1.2rem;
				font-family: var(--font-2);
				text-decoration: none;
				/* margin: 0 4px; */

				&:first-child {
					border-right: 3px solid var(--color1);
					padding-right: 15px;
				}

				&:nth-child(2) {
					margin-left: 15px;
				}
			}
		}
		@media screen and (max-width: 991px) {
			width: 100%;
		}
	}

	& > .link {
		flex-basis: 30%;
		display: flex;
		flex-direction: column;

		height: fit-content;
		& .head {
			font-size: 1.8rem;
			color: var(--color1);
			font-family: var(--font-2);
		}

		& ul {
			list-style: none;
			width: 100%;
			margin-top: 20px;
			& li {
				margin-bottom: 10px;
			}
			& a {
				font-family: var(--font-2);
				font-size: 1.5rem;
				margin-bottom: 20px;
				color: white;
				text-decoration: none;
				transition: 0.3s;

				&:hover {
					background-image: var(--gradient);
					transition: 0.3s;
					background-clip: text;
				}
			}
		}

		& .follow {
			width: 100%;
			margin-top: 20px;
			display: flex;
			height: 20px;
			align-items: center;
			& p {
				color: white;
				color: var(--color1);
				font-family: var(--font-2);
			}

			& .icon {
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				/* background-color: rebeccapurple; */
				fill: white;
				width: 30px;
				margin-left: 10px;
			}
		}

		@media screen and (max-width: 991px) {
			width: 100%;
		}
	}

	& > .contact {
		& .head {
			font-size: 1.8rem;
			color: var(--color1);
			font-family: var(--font-2);
			margin-bottom: 20px;
		}

		& > ul {
			list-style: none;
			font-size: 1.4rem;
			color: white;
			font-family: var(--font-2);

			& li {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30px;
				& .icon {
					height: 20px;
					width: 20px;
				}

				& img {
					height: 100%;
				}

				& a {
					color: white;
				}

				@media screen and (max-width: 991px) {
					justify-content: left;
				}
			}
		}
		@media screen and (max-width: 991px) {
			width: 100%;
		}
	}

	@media screen and (max-width: 991px) {
		flex-direction: column;
	}
}

.copywrite {
	margin: 0 auto;
	color: white;
	font-size: 1.2rem;
	font-family: var(--font-2);
	width: fit-content;
	margin-top: 70px;
}