@import url(base.css);
@import url(base.responsive.css);

main {
	background: var(--color-gray-light-2)
}

header.banner {
	height: 65vh;
	width: 100%;
	background: url(/images/banner.svg) center center no-repeat;
	background-size: cover;
}

header.banner .header__container {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4rem;
	color: var(--color-white);
}

header.banner .header__container .header__left {
	display: flex;
	flex-direction: column;
	gap: 1.3rem;
	flex-basis: 50%
}

header.banner .header__container .header__left p {
	color: var(--color-gray);
	width: 90%;
}

header.banner .header__container .header__left .form-group-search {
	position: relative;
}

header.banner .header__container .header__left .form-group-search input {
	width: 85%;
	display: block;
	font-size: 1.4rem;
	padding: 1.2rem 10rem 1.2rem 3rem;
	border-radius: 6px;
	box-shadow: var(--shadow);
}

header.banner .header__container .header__left .form-group-search i {
	position: absolute;
	top: 1rem;
	left: .7rem;
	font-size: 1.4rem;
	color: var(--color-gray-light);
}

header.banner .header__container .header__left .form-group-search button.btn-search {
	position: absolute;
	top: .5rem;
	right: 7.3rem;
	border-radius: 6px;
	font-weight: 700;
	color: var(--color-white);
	background-color: var(--color-first);
	padding: 1rem;
	cursor: pointer;
	transition: var(--transition);
}

header.banner .header__container .header__left .form-group-search button.btn-search:hover {
	opacity: .8;
}

header.banner .header__container .header__right {
	display: flex;
	justify-content: flex-end;
	position: relative;
}

header.banner .header__container .header__right .header__stats {
	background: var(--color-white);
	border-radius: 3px;
	padding: 1rem;
	margin: 1rem;
	display: flex;
	flex-direction: column;
	gap: 5rem;
	position: relative;
	z-index: 2;
}


header.banner .header__container .header__right .header__stats .stats__head {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

header.banner .header__container .header__right .header__stats .stats__head .head__progress {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: space-between;
}

header.banner .header__container .header__right .header__stats .stats__head .head__progress .progress {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

header.banner .header__container .header__right .header__stats .stats__head .head__progress .progress .progress-gray {
	height: .5rem;
	width: 8rem;
	border-radius: .5rem;
	background: var(--color-gray) 
}

header.banner .header__container .header__right .header__stats .stats__head .head__progress .progress .progress-dark {
	height: .5rem;
	width: 10rem;
	border-radius: .5rem;
	background: var(--color-dark) 
}

header.banner .header__container .header__right .header__stats .stats__head .head__progress i {
	color: green;
	font-size: 2.5rem;
}

header.banner .header__container .header__right .header__stats .stats__head .head__score {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--color-dark);
	gap: .2rem
}

header.banner .header__container .header__right .header__stats .stats__head .head__score span {
	color: var(--color-second);
	font-size: .9rem;
}

header.banner .header__container .header__right .header__stats .stats__head .head__score h4 {
	font-size: .9rem;
}

header.banner .header__container .header__right .header__stats .stats__candidates {
	position: absolute;
	background: transparent;
	width: 10rem;
	top: 3.3rem;
	left: -3rem;
}

header.banner .header__container .header__right .right__absolute {
	position: absolute;
	min-width: 23rem;
	min-height: 20rem;
	background: #f38c35;
	z-index: 1;
	border-radius: 0 100% 0 0;
}

header.banner .header__container .header__right .right__absolute::before {
	position: absolute;
	top: 26px;
	left: -57px;
	content: "";
	background-image: url(/images/dots.svg);
	height: 100%;
	width: 84px;
	z-index: 300;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
}

/* Container Body */
/* How it Works */
.works {
	display: flex;
	flex-direction: column;
	gap: 2.3rem;
}

.works .work__head {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.works .work__head span {
	font-size: .9rem;
	color: gray;
}

.works .work__head div {
	display: flex;
	gap: 8rem
}

.works .work__head div h1 {
	font-size: 2.5rem;
	flex-basis: 140%;
}

.works .work__head div p {
	opacity: .8;
	text-align: left;
	font-weight: 400
}

.works .works__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.works .works__cards .card__process {
	background: var(--color-white);
	padding: 1rem;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 1.5rem
}

.works .works__cards .card__process .icon__card {
	background-color: var(--color-gray);
	padding: .8rem;
	border-radius: 6px;
	width: fit-content;
}

.works .works__cards .card__process .icon__card i {
	color: var(--color-dark);
	font-size: 1.3rem;
}

.works .works__cards .card__process h3 {
	color: var(--color-third)
}

.works .works__cards .card__process p {
	color: gray;
	font-weight: 400;
	font-size: .85rem;
}

.tests {
	display: flex;
	gap: 3rem;
	align-items: center
}

.tests .left__tests {
	position: relative;
} 

.tests .left__tests .image__test{
	width: 25rem;
} 

.tests .left__tests div:nth-child(2), .tests .left__tests div:nth-child(3), .tests .left__tests div:nth-child(4) {
	position: absolute;
	color: var(--color-white)
}

.tests .left__tests div:nth-child(2) {
	top: 3rem;
	right: 3rem;
	background: var(--color-second);
	border-radius: 8px;
	padding: 1rem;
	transform: rotate(7deg);
	opacity: .8;
}

.tests .left__tests div:nth-child(2) i {
	font-size: 1.8rem;
}

.tests .left__tests div:nth-child(3) {
	bottom: 3rem;
	left: 0;
	background: var(--color-first);
	border-radius: 8px;
	padding: 1rem;
	transform: rotate(20deg);
}

.tests .left__tests div:nth-child(3) i {
	font-size: 1.8rem;
}

.tests .left__tests div:nth-child(4) {
	bottom: 0;
	right: 5rem;
	background: var(--color-white);
	padding: 1rem;
	transform: rotate(3deg);
	display: flex;
	flex-direction: column;
	gap: .6rem;
	align-items: center;
	width: min-content;
	border-radius: 8px;
}

.tests .left__tests div:nth-child(4)::before {
	content: " ";
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
	background: var(--color-third);
	position: absolute;
	top: -5px;
	left: -5px;
}

.tests .left__tests div:nth-child(4) .avatar {
	width: 2rem;
}

.tests .left__tests div:nth-child(4) h3 {
	font-size: .8rem;
	color: var(--color-dark)
}

.tests .left__tests div:nth-child(4) span {
	font-size: .7rem;
	color: var(--color-black)

}

.tests .right__tests {
	display: flex;
	flex-direction: column;
	gap: 1rem
}


.tests .right__tests div span {
	font-size: .9rem;
	color: gray;
}

.tests .right__tests div h1 {
	color: var(--color-third);
	width: 65%;
}

.tests .right__tests p {
	color: gray;
	width: 75%;
	font-weight: 300;
	font-size: 1rem;
}

.tests .right__tests a {
	color: var(--color-second);
	font-weight: 600;
}

.categories {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.categories h1 {
	color: var(--color-dark)
}

.categories div {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem
}

.categories div a {
	background: var(--color-white);
	padding: 1rem;
	display: flex;
	justify-content: space-around;
	border-radius: 8px;
	color: var(--color-black)
}

.categories div a div {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
}

.categories div a div h6{
	width: 75%;
}

.categories div a div i {
	color: var(--color-first);
	font-size: 3rem;
}

.newsletter {
	background: var(--color-white);
	border-radius: 8px;
	padding: 1.5rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 10rem;
}

.newsletter form {
	position: relative;
}

.newsletter form input {
	border: 1px solid var(--color-gray-light);
	padding: .75rem 8rem .75rem 1.1rem;
	font-size: 1rem;
	border-radius: 3rem
}

.newsletter form button[type="submit"] {
	position: absolute;
	top: .25rem;
	right: .3rem;
	background: var(--color-third);
	color: var(--color-white);
	font-weight: 400;
	border-radius: 3rem;
	padding: .65rem 1.3rem
}

.newsletter h3 {
	font-size: 1rem;
}

.newsletter h3 span {
	display: block;
	color: var(--color-second);
	width: 75%;
}