@import url("bootstrap.min.css");

:root {
	--orange: #f1743c;
	--grey-1: #808080;
	--grey-2: #666666;
	--dark-grey-1: #121212;
	--shadow-1: 0px 4px 80px -8px rgba(241, 117, 60, 0.6);
	--shadow-2: 0px 4px 80px -8px rgba(255, 255, 255, 0.05);
}

body {
	background: black;
	padding: 20px;
	color: rgba(255, 255, 255, 0.95);
	font-family: "Work Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
}

a {
	color: inherit;
	text-decoration: none;
}
a.link {
	color: var(--orange);
}

img {
	max-width: 95vw;
}
h1 {
	font-size: 92px;
	font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	color: white;
	word-break: normal;
}

h2 {
	font-size: 48px;
	font-weight: 500;
	color: white;
}

h3 {
	font-size: 24px;
	font-weight: 500;
}

h4 {
	font-size: 20px;
	font-weight: 500 !important;
}

@media screen and (max-width: 1024px) {
	h1 {
		font-size: 65px;
	}

	h2 {
		font-size: 40px;
	}
}

@media screen and (max-width: 600px) {
	h1 {
		font-size: 48px;
	}

	h2 {
		font-size: 36px;
	}
}

.grid-bg {
	background: url(../media/bg/grid-bg-orange.svg);
}

.bg-orange {
	background-color: var(--orange);
}
/*********** LISTS ***********/

ul:not(.no-style) {
	list-style: none;
	display: flex;
	flex-direction: column;
	padding-left: 0px;
	gap: 18px;
}

ul.superpower li {
	display: flex;
	align-items: start;
	gap: 16px;
	font-size: 18px;
}
ul.superpower li::before {
	content: url("../media/icons/superpowers-orange.svg");
	display: block;
	margin-top: 5px;
}

/**************** BUTTONS ****************/
.btn {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 12px 24px;
	border-radius: 5px;
	font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 600;
	width: fit-content;
	cursor: pointer;
}
.btn.small {
	padding: 6px 12px;
}

.btn.primary {
	background-color: var(--orange);
	color: black;
}

.btn.secondary {
	background-color: transparent;
	border: 1px solid var(--orange);
	color: var(--orange);
}

.btn.white-outlined {
	background-color: transparent;
	border: 1px solid white;
	color: white;
}

/*********** Header and Navigation Styles ***********/
.main-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: white;
}

.main-nav .nav-list {
	display: flex;
	gap: 24px;
}

.main-nav .nav-button-group {
	display: flex;
	gap: 8px;
}

.main-nav .logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
}

.main-nav .mobile-button {
	display: none;
}

.main-nav .mobile-group {
	display: contents;
}

@media screen and (max-width: 1024px) {
	.main-nav .mobile-button {
		display: block;
	}
	.main-nav .mobile-group {
		width: 80vw;
		max-width: 300px;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		right: 0;
		background-color: #000000;
		padding: 24px;
		z-index: 100;
		border-left: 1px solid var(--dark-grey-1);
		gap: 24px;
		overflow: scroll;
		box-shadow: var(--shadow-2);
	}

	.main-nav .mobile-group > * {
		flex-direction: column;
		gap: 24px;
	}
}
/************** ACCORDION **************/
.accordion details {
	margin-bottom: 16px;
}
.accordion summary {
	display: flex;
	gap: 24px;
	font-weight: 600;
	color: white;
	font-size: 24px;
	border-bottom: 1px solid var(--grey-1);
}

.accordion summary .num {
	color: var(--grey-1);
	font-weight: 400;
}
.accordion details .content {
	color: var(--grey-1);
	background-color: var(--dark-grey-1);
}

.accordion details[open] .content {
	pointer-events: auto;
	padding: 10px 14px;
}

/*********** HERO SECTION ***********/
.homepage-hero {
	margin-top: 90px;
}
.homepage-hero > * {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.homepage-hero img {
	width: 1440px;
	max-width: 95%;
	filter: brightness(70%);
	box-shadow: var(--shadow-1);
	margin: 80px auto;
	display: block;
}

.homepage-hero .button-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

.all-in-one-sect img {
	width: 1440px;
	max-width: 95%;
	filter: brightness(70%);
	box-shadow: var(--shadow-1);
	margin: 80px auto;
	display: block;
}

.three-steps-hire .image-group {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.three-steps-hire .image-group img {
	grid-column: 1 / span end;
	grid-row: 1 / span end;
}
footer {
	border-top: 1px solid var(--dark-grey-1);
}

footer .nav-list {
	display: flex;
	gap: 90px;
	flex-wrap: wrap;
	margin: 48px 0px;
}
footer nav {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

footer h4 {
	font-weight: 600;
}

/* AUTH PAGES */

.split-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.auth-split-image-bg {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
}

.grid-mask {
	position: absolute;
	top: -10vh;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, 1fr);
	gap: 15px;
	max-width: 800px;
	margin-left: auto;
	/* space between boxes */
}

.grid-mask > div {
	overflow: hidden;
	border-radius: 12px;
	min-height: 240px;
}

.grid-mask .bg-card {
	display: flex;
	flex-direction: column;
	grid-area: 10px;
	padding: 12px;
	color: black;
	font-size: 14px;
}

.grid-mask h6 {
	font-size: 20px;
	font-weight: 550;
}

.grid-mask .bg-card.bg-black {
}

.grid-mask .bg-card.bg-black {
	display: grid;
	place-items: center;
}

.auth-form-wrapper {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}
.auth-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 370px;
	max-width: 90vw;
}

.auth-form form {
	display: grid;
	gap: 24px;
	margin-top: 24px;
	width: 100%;
}
.form-control-group {
	display: grid;
	gap: 10px;
}
.form-control-group label {
	font-size: 14px;
}

.form-control-group input,
.form-control-group textarea,
.form-control-group select {
	background-color: var(--dark-grey-1);
	border: 1px solid var(--grey-2);
	border-radius: 10px;
	padding: 4px 12px;
	line-height: 32px;
	color: white;
}