footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--primary-header-and-footer-background);
	color: var(--primary-header-and-footer-text);
	padding: 40px 40px 10px 40px;
	font-family: var(--font);
	gap: 20px;
	direction: rtl;
}


.top-side-footer {
	display: flex;
	max-width: 1400px;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	width: 90%;
}

.right-footer {
	display: flex;
	width: 20%;
	gap: 10px;

}

.left-footer {

	display: flex;
	flex-wrap: wrap;
	gap: 80px;
}


.item-list .title-list {
	font-size: 16px;
	font-weight: 700;
	color: var(--primary-header-and-footer-text);


}

.items-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.items-link .footer-link {
	color: var(--primary-header-and-footer-text);
	text-decoration: none;
	font-size: 16px;
	padding: 0 !important;
	transition: color 0.2s ease, transform 0.2s ease;
}

.items-link .footer-link:hover {
	color: var(--primary-header-and-footer-logo);

}


.contact-us {
	display: flex;
	align-items: center;
	gap: 10px;
}


.contact-details {
	margin: 0;
	font-size: 16px;
	direction: ltr;
	text-align: right;
}


.vertical-row {
	height: 1px;
	background-color: var(--primary-gray-text);
	border: none;
	margin: 0;
	width: 90%;
	max-width: 1400px;
}


.bottom-side-footer {
	display: flex;
	width: 90%;
	max-width: 1400px;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.copyright {
	font-size: 14px;
	color: var(--primary-header-and-footer-text);
	margin: 0;
}

.social-media-list {
	display: flex;
	align-items: center;
	gap: 12px;
}

.social-media {
	width: 24px;
	height: 24px;
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.2s ease;
	filter: invert(1.1);
}

.social-media:hover {
	opacity: 1;
}





@media (max-width: 768px) {
	.right-footer {
		width: 100%;
		justify-content: center;
	}

	.left-footer {
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	.item-list .title-list {
		text-align: center;


	}


	.items-link {
		width: 100%;
		align-items: center;
	}

	.bottom-side-footer {
		flex-direction: column-reverse;
		align-items: center;
		text-align: center;
	}

	footer {
		padding: 40px 20px 20px 20px;
	}
}