/*!
Theme Name: prime_management
Author: Avimose
Description: Template para Prime Management
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');

:root {
	--dark: #041F33;
	--light: #FFFFFF;
	--primary: #0053DA;
	--primary-shaded: #EEF8FF;
	--primary-shaded-hover: #e0f2ff;
	--secondary: #FFC61C;
	--secondary-shaded: #FFF7E0;
	--neutral: #909090;
	--neutral-shaded: #F5F5F5;
	--success: #00DA78;
	--success-shaded: rgba(0, 218, 120, 0.1);
	--error: #FF324A;
	--error-shaded: rgba(255, 50, 74, 0.1);
	--spacing-small: 4vh;
	--spacing-medium: 8vh;
	--spacing-large: 14vh;
}

::selection {
	background-color: var(--secondary-shaded);
	color: var(--secondary);
}

::-moz-selection {
	background-color: var(--secondary-shaded); 
	color: var(--secondary);
}


html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Alexandria', sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	overflow-x: hidden;
	overflow-y: auto;
}

a {
	color: var(--primary);
	text-decoration: none;
}

.back_button {
	align-items: center;
	gap: 8px;
	display: none;
}

.back_button svg {
	transition: transform 0.3s cubic-bezier(0.2,0,0.2,2);
}

.back_button:hover svg {
	transform: translateX(-4px);
}

#site-navigation ul, #site-navigation li {
    display: inline-block;
}

#site-navigation ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
	padding-inline-start: 0px;
}

#site-navigation a {
	text-decoration: none;
	color: var(--dark);
}

#site-navigation a:hover {
	color: var(--primary);
}

.space.small {
	height: var(--spacing-small);
}

.space.medium {
	height: var(--spacing-medium);
}

.space.large {
	height: var(--spacing-large);
}

.site-header .left, .site-header .right {
    width: 100%;
}

.site-header .right {
    text-align: right;
}

.menu_btn {
	width: 48px;
	height: 48px;
	position: relative;
	display: none;
}

.menu_btn span {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--dark);
	border-radius: 2px;
}

.menu_btn span.line_1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-12px, -9px);
}

.menu_btn span.line_2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-12px, -1px);
}

.menu_btn span.line_3 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-12px, 7px);
}

.container {
	width: calc(100% - 112px);
	max-width: 1440px;
	margin: 0 auto;
}

@media(max-width: 1024px) {
	.container {
		width: calc(100% - 64px);
	}
}

@media(max-width: 500px) {
	.container {
        width: calc(100% - 48px);
    }
}

.components_wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-large);
	padding: var(--spacing-large) 0;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
	font-weight: 400;
	color: var(--primary);
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
	font-style: normal;
	color: var(--secondary);
}

h1,h2,h3,h4,h5,h6,p {
	margin-block-start: 0px;
    margin-block-end: 0px;
}

blockquote {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	color: var(--neutral);
}

h1 {
	font-size: 96px;
	line-height: 90%;
	font-weight: 400;
}

h2 {
	font-size: 56px;
	line-height: 120%;
	font-weight: 400;
}

h3 {
	font-size: 40px;
	line-height: 140%;
	font-weight: 400;
}

h4 {
	font-size: 32px;
	line-height: 140%;
	font-weight: 400;
}

@media(max-width: 1024px) {
	h1 {
		font-size: 64px;
	}
	h2 {
		font-size: 40px;
	}
	h3 {
		font-size: 32px;
	}
	h4 {
		font-size: 24px;
	}
}

@media(max-width: 500px) {
	h1 {
		font-size: 48px;
	}
	h2 {
		font-size: 32px;
	}
	h3 {
		font-size: 24px;
	}
}

.p_long {
	font-size: 16px;
	line-height: 200%;
	font-weight: 300;
}

.p_med {
	font-size: 16px;
	line-height: 160%;
	font-weight: 300;
}

.p_short {
	font-size: 16px;
	line-height: 120%;
	font-weight: 300;
}

.button, strong a {
	background-color: var(--primary);
	color: var(--light);
	border-radius: 200px;
	padding: 24px 48px;
	font-size: 20px;
	line-height: 90%;
	text-decoration: none;
	transition: opacity 0.3s cubic-bezier(0.2,0,0.2,1);
	user-select: none;
	display: inline-block;
}

.button:hover, strong a:hover {
	opacity: 0.8;
}

.soft_btn {
	font-size: 14px;
	background-color: var(--primary-shaded);
	color: var(--primary);
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s cubic-bezier(0.2,0,0.2,1);
	text-decoration: none;
}

.soft_btn:hover {
	background-color: var(--primary-shaded-hover);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
	padding: 8px 24px;
}

.site-header .logo {
    height: 40px;
	width: auto;
}

footer .container {
    display: flex;
    gap: 80px;
	justify-content: space-between;
	padding: 0px 0px var(--spacing-large);
}

.footer_content {
    display: flex;
    flex-direction: row;
    gap: 128px;
    width: 100%;
    justify-content: flex-end;
}

@media(max-width: 1500px) {
	.footer_content {
		gap: 10vw;
	}
}

.footer_content .col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

footer .footer_link a {
	color: var(--dark);
	text-decoration: none;
}

footer .footer_link a:hover {
	color: var(--primary);
}

footer .footer_title {
	color: var(--neutral);
	margin-bottom: 16px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.responsive_customers_access_btn {
	display: none;
}

#site-navigation a.responsive_customers_access_btn {
	color: var(--primary);
}

@media(max-width: 1024px) {
	main {
		overflow-x: hidden;
	}
	.menu_btn {
		display: block;
	}
	.opened_menu .menu_btn {
		position: fixed;
		z-index: 999;
		top: 8px;
		right: 16px;
	}
	.menu_btn span {
		transition: transform 0.5s cubic-bezier(0.8,0,0.2,1);
	}
	.opened_menu .menu_btn span.line_1 {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.opened_menu .menu_btn span.line_2 {
		transform: translate(-50%, -50%) scaleX(0);
	}
	.opened_menu .menu_btn span.line_3 {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	.opened_menu {
		overflow: hidden;
	}
	#site-navigation a {
		font-size: 20px;
	}
	.responsive_customers_access_btn {
        display: block;
        text-align: center;
        position: fixed;
        bottom: 24px;
        width: calc(100% - 64px);
        left: 24px;
    }
	#site-navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: calc(100% - 48px);
		height: calc(100% - 48px);
		padding: 24px;
		background-color: var(--light);
		pointer-events: none;
		z-index: 99;
		transition: transform 1s cubic-bezier(0.8,0,0.2,1);
		transform: translateX(100%);
	}
	#site-navigation ul {
		flex-direction: column;
		margin-block-start: 48px;
		margin-block-end: 48px;
		min-height: 50vh;
        justify-content: center;
		gap: 40px;
	}
	.opened_menu #site-navigation {
		pointer-events: auto;
		transform: none;
	}
	.site-header {
		flex-direction: row-reverse;
		padding: 8px 16px;
	}
	.site-header .right {
		display: none;
	}
	.menu_btn {
		margin-left: auto;
	}
	.back_button {
		display: flex;
	}
	footer .container {
		flex-direction: column;
		align-items: center;
	}
	.footer_content {
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

@media(max-width: 500px) {
	.components_wrapper {
		padding: var(--spacing-large) 0;
	}
}