@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--lightpurple: #ECEDFB;
	--blue: #1C64F2;
	--lightblue: #A4CAFE;
	--darkblue: #0C2353;
	--darkgray: #292A36;
	--lightgray: #F9FAFB;
	--Inter: "Inter", sans-serif;
	--Poppins: "Poppins", sans-serif;
	--Urbanist: "Urbanist", sans-serif;
	--gray: #393941;
	--gray900: #111928;
	--gray500: #6B7280;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	font-family: var(--Inter);
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--Poppins);
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
	color: inherit;
}

p {
	margin: 0 0 20px;
}

p:last-child {
	margin: 0;
}

.wdth {
	max-width: 1280px;
	margin: 0 auto;
}

.hero {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.hero .wdth {
	padding:200px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.hero h3 {
	font-size: 18px;
	color: var(--blue);
	font-weight: normal;
}

.hero h1 {
	font-family: var(--Urbanist);
	font-size: 75px;
	font-weight: 800;
	color: #000;
}

.hero p {
	font-size: 18px;
	line-height: 1.5em;
	color: var(--darkgray);
}

.btn {
	display: inline-block;
	background: var(--blue);
	border: 1px solid var(--blue);
	color: #fff;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 8px;
	transition: all .2s;
}

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

a.cons {
    background: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
    transition: all .2s;
}
a.cons:hover { 
    background: var(--blue) !important; 
    color: #fff !important;
}
.btn.inverse {
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
}
.btn.inverse:hover {
	background: #fff;
	border: 1px solid #fff;
	color: #000;
}

.btn.white_btn {
	background: #fff;
	border: 1px solid #fff;
	color: #000;
}

.btn.white_btn:hover {
	background: #000;
	border: 1px solid #000;
	color: #fff;
}

.title {
	font-family: var(--Inter);
	font-size: 56px;
	font-weight: 700;
	text-transform: capitalize;
}

.center, 
.center * {
	text-align: center;
}

.subtitle {
	font-family: var(--Inter);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5em;
}

.title_row {
	max-width: 70%;
	margin: 0 auto 50px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.title_row.center * {
	text-align: center;
}

.section {
	padding: 70px 0;
}

.terms .section {
    padding: 10px 0 !important;
}

.bluebg {
	background: var(--blue);
}

.textwhite, .textwhite * {
	color: #fff;
}

.howwework img {
	width: 100%;
}

.marginbottom {
	margin-bottom: 30px;
}

.three_col {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: space-between;
}

.three_col .col {
	width: 100%;
	background: #fff;
	padding: 48px 30px;
	border-radius: 8px;
	text-align: center;
	flex: unset !important;
}

@media (min-width: 800px){
	.three_col .col {
		width: calc(100% / 3 - 20px);
	}
}

.three_col .col .icon {
	width: 68px;
	height: 68px;
	background: var(--blue);
	color: #fff;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.three_col .col .icon img {
	max-width: 75%;
	max-height: 75%;
}

.three_col .col * {
	color: #000;
	line-height: 1.5em;
}

.three_col .col h4 {
	font-size: 20px;
	font-weight: 700;
	font-family: var(--Inter);
	margin: 20px 0;
}

.three_col .col p {
	font-size: 16px;
	font-weight: 500;
}

.jobseeker {
	background: var(--lightpurple);
}

.three_col .col .graphic_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.three_col .col .graphic_icon img {
	height: 100px;
}

.jobseeker .three_col .col {
	background: linear-gradient(to bottom, rgba(255,255,255,.42), rgba(255,255,255,.17));
}

.jobseeker .three_col .col:hover {
	background: #fff;
}

.timeline {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 20px;
	counter-reset: list-counter;
	padding-left: 100px;
	position: relative;
}

.timeline::before {
	position: absolute;
	content: '';
	left: 35px;
	top: 0;
	width: 1px;
	height: 100%;
	background: var(--lightblue);
}

.timeline .row {
	counter-increment: list-counter;
	background: var(--lightgray);
	padding: 40px;
	border-radius: 24px;
	border: 1px solid rgba(0, 0, 0, .15);
}

.timeline .row::before {
	content: counter(list-counter);
	position: absolute;
	left: 0;
	font-size: 24px;
	font-weight: 700;
	font-family: var(--inter);
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	background: var(--blue);
	color: #fff;
	z-index: 1;
}

.timeline .row h3 {
	font-family: var(--Inter);
	font-size: 36px;
	font-weight: 700;
}

.timeline .row h4 {
	font-family: var(--Inter);
	font-size: 24px;
	font-weight: 700;
	margin: 15px 0;
}

.timeline .row p {
	font-size: 18px;
	font-weight: 600;
}

.btn_group {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 10px;
}

.btn_group .btn {
	width: 250px;
}

.section.cta {
	padding: 50px 0;
}

.section.cta .title_row {
	margin: 0 auto;
}

.section.about {
	/*background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32%), url('../img/me.jpeg') no-repeat center center !important;*/
	/*background-size: contain !important;*/
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-color: #000;
	position: relative;
	height: 750px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.section.about::before {
	position: absolute;
	content: '';
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	/*background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--blue));*/
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
}

.section.about  p {
	margin: 0 0 10px;
}

.section.about p:last-child {
	margin: 0;
}

.section.about * {
	position: relative;
}

.section.about .btn {
	margin-top: 20px;
}

.reviews_count {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.reviews_count .count {
	font-size: 48px;
	font-weight: 700;
	font-family: var(--Inter);
}

.reviews {
	margin-top: 30px;
}

.rev {
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.rev .thumb img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	border-radius: 16px;
}

.testimonial {
	background: var(--lightgray);
	padding: 20px;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, .16);
}

.author_box {
	display: flex;
	align-items: center;
	gap: 20px;
}

.author_box img {
	width: 54px;
	height: 54px;
	border-radius: 100%;
	object-fit: cover;
}

.author_info p.name {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--darkgray);
}

.author_info p.name span {
	display: block;
	color: var(--gray);
	font-size: 14px;
	font-weight: 400;
	margin-top: 5px;
}

.swiper {
	overflow-y: unset !important;
}

.swiper-pagination {
	position: relative !important;
    margin-top: 40px !important;
}

.swiper_arrows {
    top: auto !important;
    width: 30px !important;
    height: 30px !important;
    margin: 30px 0 !important;
    z-index: 99 !important;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 12px !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 100% !important;
    border: 1px solid !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_three_col {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: space-between;
}

.footer_col {
	width: 100%;
}

@media (min-width: 800px){
	.footer_col {
		width: 38% !important;
	}
	.footer_col:nth-child(2) {
	    width: 18% !important;
	}
}

h3.footer_heading {
	font-family: var(--Inter);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
}

.becometext {
	margin-top: 20px;
}

.footer_info {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 10px;
}

.footer_info a {
	display: flex;
	gap: 10px;
	font-size: 18px;
	color: #fff !important;
}

.footer_info a i {
	width: 30px;
	font-size: 18px;
}

ul.social-icon {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: left !important;
}

ul.social-icon a {
    display: block;
}

ul.social-icon img {
    width: 35px;
    height: 35px;
    background: #fff;
    padding: 7px;
    object-fit: contain;
    border-radius: 100%;
}

ul.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
    flex-direction: column;
}

ul.menu-list li a {
	font-size: 16px;
	font-weight: 500;
	font-family: var(--Inter);
	color: #fff !important;
}

p.footer_line {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 10px;
}

.footer_form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer_form * {
    color: #000;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.footer_form input {
    padding: 10px !important;
    border-radius: 5px !important;
    background: rgba(255,255,255,.16) !important;
    font-weight: 500;
    color: #fff !important;
    width: 60% !important;
}

.footer_form .btn {
    width: 38% !important;
    padding: 10px !important;
}

.footer_form .btn span {
    margin-left: 5px !important;
    display: inline-block;
}

.footer_form ::placeholder {
    color: #fff !important;
    font-size: 14px !important;
}

.bottom_bar .wdth {
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 20px;
    padding-bottom: 20px;
}

.copyright {
	font-size: 14px;
	margin: 0 0 10px;
}

ul.last_lines {
    display: flex;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
}

ul.last_lines li {
	position: relative;
	font-size: 14px;
}

ul.last_lines li::after {
    position: relative;
    display: inline-block;
    content: "|";
    font-size: 10px !important;
    top: -2px;
    margin-left: 15px;
    color: rgba(255,255,255,.16);
}

ul.last_lines li select {
    background: transparent;
    border: none;
    font-size: 14px;
}

.aboutus_first_section {
	background: linear-gradient(to bottom, #fff, var(--lightpurple)) !important;
}

.eliteapply_first_section {
	background: linear-gradient(to bottom, #fff, var(--lightblue), var(--lightpurple)) !important;
}

.three_col.pricing_plans {
    justify-content: center;
    margin-bottom: -200px;
}

.three_col.pricing_plans .col {
	text-align: left;
	box-shadow: 20px 20px 40px 0 #1C64F247;
}

.three_col.pricing_plans .col .icon {
    margin: 0;
}

.three_col.pricing_plans .col .btn {
    display: block;
    color: #fff;
}

.three_col.pricing_plans .col .btn:hover {
    color: var(--blue);
}

.three_col.pricing_plans .col p {
	color: var(--gray500);
}

.three_col.pricing_plans .col .price {
	font-size: 56px;
	font-weight: 700;
	color: var(--gray900);
}

.three_col.pricing_plans .col .price span {
	color: var(--gray500);
	font-size: 18px;
	font-weight: 500;
}

.h200 {
	height: 200px;
}

.benefits_div {
    max-width: 65%;
    padding: 44px;
    margin: 50px auto 0;
    background: var(--lightpurple);
    box-shadow: 20px 20px 50px 0 #1C64F252;
    border-radius: 8px;
}

.benefits_div h2 {
	font-size: 56px;
	font-weight: 700;
	font-family: var(--Inter);
	margin:  0 0 20px;
}

.benefits_div ul {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.benefits_div ul li {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.benefits_div ul li .icon_svg {
    width: 30px !important;
}

.benefits_div ul li .content {
    width: calc(100% - 30px - 20px);
}

.benefits_div ul li .content h5 {
    font-size: 16px;
    font-weight: 400;
    color: var(--darkblue);
    font-family: var(--Inter);
}

.benefits_div ul li .content p {
	color: var(--gray500);
	font-size: 16px;
	font-weight: 400;
}

.apply_section {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.apply_section .wdth {
	padding:200px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.questionaire.form {
    width: 70%;
    position: relative;
	background: #fff;
	border: 1px solid #E5E7EB;
	padding: 40px;
	border-radius: 8px;
}

.step {
	display: none;
}

/*.step.active {
    display: block;
}*/

.step_rw {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.step_rw label {
	color: var(--gray900);
	font-size: 16px;
	font-weight: 600;
	font-family: var(--Inter);
	display: block;
	margin: 0 0 20px;
}

.step_rw input,
.step_rw textarea, 
.step_rw select {
	background: var(--lightgray);
	border: 1px solid #D1D5DB;
	padding: 5px 10px;
	border-radius: 8px;
	width: 60%;
	text-align: left;
	font-size: 14px;
}

.step_rw.fullwidth input,
.step_rw.fullwidth textarea, 
.step_rw.fullwidth select {
	width: 100%;
}

.next_btn,
.prev_btn,
.submit_btn {
	padding: 10px 50px;
}

.radio {
    display: flex;
    gap: 10px;
    max-width: 60%;
    margin: 0 auto;
}

.custom-radio {
  position: relative;
  cursor: pointer;
  display: block;
  width: 100%;
}

.custom-radio input[type="radio"] {
  display: none;
}

.custom-radio span {
  display: block;
  padding: 10px 20px;
  background-color: var(--lightgray);
  border: 1px solid #D1D5DB;
  color: #000;
  border-radius: 5px;
  transition: background-color 0.3s;
  font-size: 14px;
  font-weight: normal;
}

.custom-radio input[type="radio"]:checked + span {
  background-color: var(--blue);
  color: #fff;
}

.custom-radio input[type="radio"]:hover + span {
  background-color: var(--blue);
  color: #fff;
}

.country_radio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.country-option .content {
    position: relative;
    border: 2px solid #d1d5db;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    width: 110px !important;
}

.country-option input[type="radio"] {
  display: none;
}

.country-option .content img {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  object-fit: cover;
  margin-bottom: 8px;
}

.country-option .content p {
  margin: 0;
  font-size: 14px;
  color: #111827;
  font-weight: 500;
}

/* Selected state */
.country-option input[type="radio"]:checked + .content {
  border-radius: 12px;
  box-shadow: 0 0 0 2px #2563eb; /* blue-600 */
}

.progressbar {
    width: 100%;
    height: 10px;
    border-radius: 8px;
    margin: 0 0 60px;
    position: relative;
}

.progressbar::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background: var(--lightpurple);
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.progressbar span {
    display: block;
    width: 0%;
    background: var(--blue);
    height: 100%;
    z-index: 1;
    position: relative;
    border-radius: 8px;
}

.above_progressbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray500);
}

.icon_circle_rw {
	margin-bottom: 0 !important;
}

.icon_circle_col {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.icon_circle {
    background: transparent !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 100%;
    border: 1px solid var(--blue) !important;
}

.icon_circle[disabled] {
	opacity: .5;
}

.terms {
	overflow-x:hidden;
	position:relative;
	height:300px;
	background: #eee; 
	padding: 20px; 
	border-radius: 8px; 
	font-size: 14px;
}

.terms h1 {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 20px;
}

.terms h2 {
	font-size: 25px;
	margin: 15px 0;
}

.terms h3 {
	font-size: 18px;
	margin: 15px 0;
}

@media (max-width: 800px){
	.hero .wdth {
		padding: 150px 20px;
	}
	.wdth {
		padding-left: 20px;
		padding-right: 20px;
	}
	.hero h1 {
	    font-size: 50px;
	}
	.title {
		font-size: 30px;
	}
	.title_row {
	    max-width: 100%;
	}
	.three_col .col .graphic_icon img {
		height: 60px;
	}
	.timeline {
		padding-left: 75px;
	}
	.timeline::before {
		left: 25px;
	}
	.timeline .row::before {
		height: 50px;
		width: 50px;
		font-size: 18px;
	}
	.timeline .row h3,
	.three_col.pricing_plans .col .price {
		font-size: 30px;
	}
	.btn_group {
    	flex-direction: column;
	    gap: 15px;
	}
	.btn_group .btn {
	    width: 100%;
	} 
	.footer_form input, .footer_form .btn {
	    width: 100% !important;
	}
	.footer_form .btn {
		margin-top: 10px !important;
	}
	.benefits_div {
		max-width: 100%;
		padding: 30px;
	}
	.questionaire.form {
		width: 90%;
		padding: 30px;
	}
	.step_rw input, .step_rw textarea, .step_rw select, .radio {
		width: 100%;
	}
	/*.section.about {
		background-size: cover;
	}*/
	.section.about {
	    background-size: auto 70%;
	    background-position: top center;
	    padding: 280px 0 60px !important;
	    height: auto;
	}
}