:root {
	--layout-header-height: 160px;
	--layout-mobile-header-height: 80px;
}

.pageContainer {display: flex; flex-direction: column; min-height: 100vh; direction: rtl;}

/* Header */
header {
	position: sticky; top: 0; z-index: 3; display: flex; align-items: center;
	height: var(--layout-mobile-header-height); background-color: var(--color-bg);
}

header .logo {margin: 0 auto;}
header .logo img {width: auto; height: 54px;}

header .member-login {
	width: 80px; height: 80px;
	text-align: center; line-height: 80px; font-size: 2rem; color: var(--color-main);
}

header .icon-menu {
	display: flex; justify-content: center; align-items: center;
	position: relative; width: 80px; height: 80px; overflow: hidden; cursor: pointer;
}

header .icon-menu svg {position: absolute; width: 80px; height: 80px; transition: transform 400ms;}
header .icon-menu svg .line {
	fill: none; stroke: var(--color-main); stroke-width: 5.5; stroke-linecap: round;
	transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
}
header .icon-menu svg .line.top {stroke-dasharray: 40 160; transform: translateY(3px);}
header .icon-menu svg .line.middle {stroke-dasharray: 40 142; transform-origin: 50%; transition: transform 400ms;}
header .icon-menu svg .line.bottom {stroke-dasharray: 40 85; transform-origin: 50%; transform: translateY(-2px);}

header .icon-menu.active svg {transform: rotate(45deg);}
header .icon-menu.active svg .line.top {stroke-dashoffset: -64px; transform: translateY(0);}
header .icon-menu.active svg .line.middle {transform: rotate(90deg);}
header .icon-menu.active svg .line.bottom {stroke-dashoffset: -64px; transform: translateY(0);}

header + aside {
	display: flex; flex-direction: column; overflow: auto;
	position: fixed; top: var(--layout-mobile-header-height); right: 0; z-index: 40;
	width: 100%; height: calc(100% - var(--layout-mobile-header-height)); padding: 1rem;
	box-sizing: border-box; background: #f5f5f5; transform: translateX(100%);
	border-top: 2px solid #ddd;
}
header + aside.transition {transition: transform .25s;}
header + aside.active {transform: translateX(0);}

header + aside .menuMain {display: flex; flex-direction: column; width: 100%;}
header + aside .menuMain a {
	padding: 1.2rem 0; border-radius: 12px; color: var(--color-main);
	text-align: center; font-size: 1.2rem; font-weight: bold;
}
header + aside .menuMain a.active {background-color: var(--color-main-lightest); pointer-events: none;}

header + aside .menuMain .dropdown {
	display: flex; flex-direction: column; margin: 1rem 0;
	padding: 1rem 0; border-radius: 12px; background-color: #ddd;
}

.member-menu {
	display: flex; flex-direction: column; gap: 1rem; transition: transform .25s;
	position: fixed; top: var(--layout-mobile-header-height); left: 0; z-index: 40;
	width: 100%; padding: 1rem;
	box-sizing: border-box; background: #f5f5f5; transform: translateX(-100%);
	border-top: 2px solid #ddd;
}
.member-menu.active {transform: translateX(0);}
.member-menu a {
	text-align: center; padding: 1rem 0;
	border-radius: 12px; background-color: var(--color-button);
	font-weight: bold; font-size: 20px; color: #fff;
}

@media screen and (min-width: 40em) {
	header {
		gap: 2rem; height: var(--layout-header-height); padding: 1.5rem 2rem 2.5rem;
		background-image: linear-gradient(var(--color-bg) 90%, transparent);
		background-color: transparent;
	}

	header .logo {margin: 0;}
	header .logo img {height: 90px;}
	header .logo:hover img {filter: invert(.2);}

	header .menuMain {
		display: flex; justify-content: center; gap: 10px; flex-grow: 1;
		padding: 0 10px; border-radius: 20px; background-color: white;
	}
	header .menuMain > div > a {
		display: block; position: relative; height: 80px; line-height: 80px;
		padding: 0 .5rem; white-space: nowrap; font-size: 1rem; color: black;
	}
	header .menuMain > div > a:before {
		content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; border-radius: 0 0 5px 5px;
	}
	header .menuMain > div:not(.solutions) > a:not(.active):hover:before {background-color: var(--color-main-light);}
	header .menuMain > div > a.active:before {background-color: var(--color-main);}

	header .menuMain .solutions {position: relative;}
	header .menuMain .dropdown {
		display: flex; flex-direction: column;
		position: absolute; right: -6px; top: 70px;
		width: max-content; padding: 16px 0; opacity: 0;
		border-radius: 12px; background: white; box-shadow: 0 3px 13px #00000050;
		transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
		transform-origin: 50% 0; transition: 350ms;
	}
	header .menuMain .solutions:hover .dropdown {opacity: 1; transform: perspective(400px) rotate3d(0, 0, 0, 0);}
	header .menuMain .dropdown a {
		position: relative; padding: 0 1rem; line-height: 2.5rem; text-align: center; font-size: 20px;
	}
	header .menuMain .dropdown a:hover {color: black;}
	header .menuMain .dropdown a:hover:before {
		content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 10px; border-radius: 5px 0 0 5px;
		background-color: var(--color-main-light);
	}

	header .menuSub {display: flex; gap: 14px;}
	header .menuSub a {
		display: flex; justify-content: center; align-items: center; width: 100px; height: 50px;
		border-radius: 25px; border: 1px solid var(--color-main); background-color: var(--color-bg);
		line-height: 1; text-align: center; font-size: 1rem; color: #000;
	}
	header .menuSub a:not(.active):hover {background-color: var(--color-main); color: #fff;}
	header .menuSub a.active {background-color: var(--color-main); color: #fff;}

	header .member-logged {position: relative; min-width: 200px; height: 80px; text-align: center;}
	header .member-logged .name {line-height: 80px; font-size: 18px; cursor: pointer;}
	header .member-logged .name i {display: inline-block; width: 20px; color: var(--color-main);}
	header .member-logged .dropdown {
		display: flex; flex-direction: column;
		position: absolute; right: 50%; top: 60px;
		width: 140px; margin-right: -70px; padding: 12px 0; opacity: 0;
		border-radius: 12px; background: white; box-shadow: 0 3px 13px #00000050;
		transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
		transform-origin: 50% 0; transition: 350ms;
	}
	header .member-logged:hover .dropdown {opacity: 1; transform: perspective(400px) rotate3d(0, 0, 0, 0);}
	header .member-logged .dropdown a {
		position: relative; padding: 0 1rem; line-height: 2.5rem; text-align: center; font-size: 20px;
	}
	header .member-logged .dropdown a:hover {color: black;}
	header .member-logged .dropdown a:hover:before {
		content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 10px; border-radius: 5px 0 0 5px;
		background-color: var(--color-main-light);
	}
}

@media screen and (min-width: 86em) {
	header .menuMain {gap: 1rem; padding: 0 1rem;}
	header .menuMain > div > a {font-size: 20px;}
	header .menuSub a {width: 120px;}
	header .menuSub a {font-size: 18px;}
}

@media screen and (min-width: 100em) {
	header {gap: 3rem; padding: 1.5rem 3rem 2.5rem;}
	header .menuMain {gap: 1.5rem;}
	header .menuSub a {width: 180px;}
}

/* Footer */
footer {display: flex; flex-direction: column; margin-top: auto; background-color: black; color: #aaa;}

footer .first {display: flex; flex-direction: column; width: 100%;}
footer .first .part-top {display: flex; align-items: center;}

footer .first .part-main .socials {display: flex; gap: 10px; justify-content: center; height: 120px;}
footer .first .part-main .socials i {
	display: block; width: 50px; height: 50px;
	border: 1px solid #ccc; border-radius: 50%;
	text-align: center; line-height: 50px; font-size: 1.5rem; color: #ccc;
}
footer .first .part-main .logo {display: flex; justify-content: center; align-items: center; padding-bottom: 3rem;}

footer .first .part-links {display: flex; flex-direction: column; padding: 0 1.5rem;}
footer .first .part-links > div {border-top: 1px solid #595656;}
footer .first .part-links > div:last-child {border-bottom: 1px solid #595656;}
footer .first .part-links .part-top {display: flex; justify-content: space-between; align-items: center; height: 80px;}
footer .first .part-links .part-top span {font-size: 1.5rem; font-weight: bold; color: var(--color-main-light);}
footer .first .part-links .part-top i {
	display: block; width: 1.5rem; text-align: center; font-size: 1.5rem; color: var(--color-main-light);
}
footer .first .part-links .part-content {display: flex; flex-direction: column; padding-bottom: 1.5rem;}
footer .first .part-links .part-content a {line-height: 2rem; font-size: 1rem; color: #aaa;}
footer .first .part-links .part-content a[disabled] {font-weight: bold; color: var(--color-main-light);}

footer .second .parts {display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 3rem 0;}
footer .second .parts .copyright .company {font-size: 15px; color: white;}

@media screen and (min-width: 40em) {
	footer {position: relative;}
	footer:before {
		content: ''; position: absolute; left: 0; top: calc(1rem + 100px);
		width: 100%; height: 1px; background-color: #595656;
	}

	footer .first {
		flex-direction: row-reverse; justify-content: space-between;
		max-width: 90rem; margin: 0 auto; padding: 1rem .5rem 1.5rem;
	}
	footer .first .part-top {align-items: end !important; padding-bottom: 1.5rem;}
	footer .first .part-content {padding-top: 1.5rem;}

	footer .first .part-main .socials {height: 100px;}
	footer .first .part-main .socials i {width: 40px; height: 40px; line-height: 40px; font-size: 1.2rem;}
	footer .first .part-main .socials i:hover {border-color: var(--color-main-light); color: var(--color-main-light);}
	footer .first .part-main .logo {height: calc(100% - 100px + 1.5rem); padding-bottom: 1.5rem;}

	footer .first .part-links {flex-direction: row; width: 80%; padding: 0;}
	footer .first .part-links > div {width: 25%; border: 0 !important;}
	footer .first .part-links .part-top {height: 100px;}
	footer .first .part-links .part-top i {display: none;}
	footer .first .part-links .part-content a {font-size: 1rem;}
	footer .first .part-links .part-content a:not([disabled]):hover {
		text-decoration: underline; color: var(--color-main-light);
	}

	footer .second {border-top: 1px solid #595656;}
	footer .second .parts {
		flex-direction: row; justify-content: space-between; gap: 0;
		max-width: 90rem; margin: 0 auto; padding: 3rem .5rem;
	}
	footer .second .parts .modules {width: 190px; text-align: center;}
}