@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

:root {
	--gray: #313637;
	--whiteblue: #bbd2ea;
	--med-blue: #72a3d6;
	--dark-blue: #588cc2;
}

body {
	background: url("../img/ambassador/bg.png") center / cover no-repeat;
	background-color: #bbd2ea;
	background-attachment: fixed;
	font-family: "Tajawal", sans-serif;
}

button#switchLang {
	background: white;
	color: #5b8ec3;
	border-color: #ffffff;
}

.card {
	max-width: 800px;
	margin: 30px auto;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
	padding: 22px;
	background: #fff;
}

.intro {
	max-width: 80ch;
	margin: auto;
}

h2 {
	color: var(--gray);
}

.form,
.error {
	display: none;
}

p.form-text {
	font-size: calc(0.8rem + 0.3vw);
	text-align: justify;
	margin-block: 1rem;
	max-width: 80ch;
}

.step {
	display: none;
}

.step.active {
	display: block;
}

.progress {
	height: 8px;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 15px;
}

.progress-bar {
	background: linear-gradient(270deg, transparent, var(--dark-blue));
}

.btn-primary {
	background-color: var(--dark-blue);
	border-color: var(--dark-blue);
}

.input-group-text {
	background-color: transparent;
	border: none;
}

.input-group-text img {
	max-height: 20px;
}

#successBlock {
	display: none;
}

.form-control::placeholder {
	opacity: 0.6;
}

.card {
	overflow: hidden;
}

.benifits {
	margin-top: 1.5rem;
	padding: 0;
}


.benifits-title {
	position: relative;
	margin-inline-start: 10px;
}

.benifits-title::before,
.benifits-title::after {
	content: "";
	display: inline-block;
	height: 14px;
	background: linear-gradient(-120deg, var(--dark-blue), #bbd2ea);
	border-radius: 10px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.benifits-title::before {
	width: 50px;
	margin-inline-start: -3.5rem;
}

.benifits-title::after {
	margin-inline-start: 0.8rem;
	width: 80%;
}


.benifits > li {
	position: relative;
	padding-inline-start: 1rem;
	font-size: max(0.85rem, 0.9vw);
	font-weight: 500;
	text-align: start;
	line-height: 2;
	color: #4f8aca;
	list-style: none;
}

.benifits > li::before {
	content: "";
	display: block;

	background-image: url("../img/ambassador/star.png");
	background-size: cover;
	background-repeat: no-repeat;

	position: absolute;
	right: -10px;
	left: unset;
	top: 8px;
	width: 16px;
	height: 16px;
}

html[lang="en"] .benifits > li::before {
	left: -10px;
	right: unset;
}

.preview {
    float: left;
    margin-block: 10px;
}