/* =========================================================
   AVANSEN — CONTACT PAGE
========================================================= */

.av-contact-page {
	width: 100%;
	background: #000;
	color: #fff;
	overflow: hidden;

	font-family: "Kalameh", sans-serif;
}


/* =========================================================
   CONTACT HERO
========================================================= */

.av-contact-hero {
	position: relative;

	width: 100%;
	height: 720px;

	background: #000;
	overflow: hidden;
}


/* IMAGE
--------------------------------------------------------- */

.av-contact-hero__media {
	position: absolute;
	inset: 0;

	z-index: 0;
}

.av-contact-hero__media img {
	display: block;

	width: 100%;
	height: 100%;

	max-width: none;

	object-fit: cover;
	object-position: center;
}


/* BOTTOM FADE
--------------------------------------------------------- */

.av-contact-hero::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 58%,
			rgba(0, 0, 0, 0.18) 72%,
			rgba(0, 0, 0, 0.52) 86%,
			#000 100%
		);
}


/* HERO CONTENT
--------------------------------------------------------- */

.av-contact-hero__content {
	position: absolute;

	z-index: 2;

	top: 50%;
	right: max(8vw, 96px);

	width: 560px;

	transform: translateY(-22%);

	direction: rtl;
	text-align: right;
}


/* HERO TITLE
--------------------------------------------------------- */

.av-contact-hero__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 64px;
	font-weight: 800;
	line-height: 1.35;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;
}

.av-contact-hero__title span {
	color: #FF5A00;
}


/* HERO DESCRIPTION
--------------------------------------------------------- */

.av-contact-hero__text {
	margin: 28px 0 0;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.6;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;
}

/* =========================================================
   CONTACT FORM SECTION
========================================================= */

.av-contact-form-section {
	position: relative;

	width: 100%;

	padding: 0 0 84px;

	background: #000;
	color: #FFFFFF;
}

/* =========================================================
   MAIN CONTAINER
========================================================= */

.av-contact-form-section__container {
	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;

	padding-top: 126px;

	display: grid;

	grid-template-columns:
		minmax(0, 760px)
		minmax(0, 1fr);

	column-gap: 120px;

	align-items: start;

	direction: ltr;
}
/* =========================================================
   INTRO — RIGHT
========================================================= */

.av-contact-form-section__intro {
	grid-column: 2;

	width: 100%;

	direction: rtl;
	text-align: right;
}


/* =========================================================
   CONTACT MARKER — SAME AS HOME
========================================================= */

.av-contact-form-section__marker {
	top: 36px;
}


/* =========================================================
   INTRO TITLE
========================================================= */

.av-contact-form-section__title {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;

	color: #FFFFFF;

	direction: rtl;
	text-align: right;
}

.av-contact-form-section__description {
	max-width: 430px;

	margin: 24px 0 0;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.9;

	color: rgba(243, 240, 237, 0.72);

	direction: rtl;
	text-align: right;
}
/* =========================================================
   FORM — LEFT
========================================================= */

.av-contact-form {
	grid-column: 1;

	width: 100%;

	margin: -200px 0 0;
	padding: 0;

	align-self: start;

	font-family: "Kalameh", sans-serif;

	direction: rtl;
	text-align: right;
}
/* =========================================================
   FIELD
========================================================= */

.av-contact-form__field {
	position: relative;

	width: 100%;

	margin: 0 0 26px;
	padding: 14px 16px 18px;

	border-bottom:
		1px solid rgba(186, 186, 186, 0.34);

	transition:
		border-color 220ms ease,
		box-shadow 220ms ease;
}


/* LABEL */

.av-contact-form__field label {
	display: block;

	margin: 0 0 6px;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;

	color: #BABABA;

	direction: rtl;
	text-align: right;
}


/* INPUTS */

.av-contact-form__field input,
.av-contact-form__field textarea {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;

	border: 0;
	outline: 0;
	border-radius: 0;

	background: transparent;

	font-family: "Kalameh", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;

	box-shadow: none;

	appearance: none;
	-webkit-appearance: none;
}


.av-contact-form__field input {
	height: 26px;
}


.av-contact-form__field textarea {
	height: 96px;

	resize: none;
}


/* =========================================================
   ACTIVE FIELD — CINEMATIC AVANSEN
========================================================= */

.av-contact-form__field {
	position: relative;

	transition:
		border-color 260ms ease,
		box-shadow 260ms ease;
}

.av-contact-form__field label {
	transition:
		color 260ms ease,
		text-shadow 260ms ease;
}

.av-contact-form__field input,
.av-contact-form__field textarea {
	caret-color: #FFFFFF;

	transition:
		color 260ms ease,
		text-shadow 260ms ease;
}


/* ACTIVE */

.av-contact-form__field:focus-within {
	border-bottom-color: #FF5A00;

	box-shadow:
		0 1px 0 rgba(255, 90, 0, 0.55),
		0 5px 14px rgba(255, 90, 0, 0.16),
		0 12px 30px rgba(255, 70, 0, 0.08);
}


.av-contact-form__field:focus-within label {
	color: #FFFFFF;

	text-shadow:
		0 0 6px rgba(255, 255, 255, 0.16),
		0 0 12px rgba(255, 90, 0, 0.14);
}


.av-contact-form__field:focus-within input,
.av-contact-form__field:focus-within textarea {
	color: #FFFFFF;

	text-shadow:
		0 0 8px rgba(255, 90, 0, 0.12);
}

/* =========================================================
   REQUIRED SERVICES
========================================================= */

.av-contact-services {
	width: 100%;

	margin: 14px 0 34px;

	direction: rtl;
	text-align: right;
}


/* LABEL */

.av-contact-services__label {
	margin: 0 0 20px;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;

	color: #BABABA;
}


/* OPTIONS */

.av-contact-services__options {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 14px 16px;
}


/* OPTION */

.av-contact-service-option {
	position: relative;

	display: block;

	cursor: pointer;
}


/* HIDE CHECKBOX */

.av-contact-service-option input {
	position: absolute;

	opacity: 0;
	pointer-events: none;
}


/* PILL */

.av-contact-service-option span {
	width: 100%;
	height: 48px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0 18px;

	box-sizing: border-box;

	border:
		1px solid rgba(243, 240, 237, 0.30);

	border-radius: 24px;

	background:
		rgba(255, 255, 255, 0.015);

	font-family: "Kalameh", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;

	color: rgba(243, 240, 237, 0.78);

	transition:
		color 260ms ease,
		border-color 260ms ease,
		background 260ms ease,
		box-shadow 260ms ease,
		transform 260ms ease;
}


/* HOVER */

.av-contact-service-option:hover span {
	color: #FFFFFF;

	border-color:
		rgba(255, 90, 0, 0.55);
}


/* SELECTED */

.av-contact-service-option input:checked + span {
	color: #FF6A1A;

	border-color: #FF5A00;

	background:
		rgba(255, 90, 0, 0.045);

	box-shadow:
		0 0 5px rgba(255, 90, 0, 0.45),
		0 0 14px rgba(255, 90, 0, 0.22),
		0 0 28px rgba(255, 70, 0, 0.10);
}


/* KEYBOARD FOCUS */

.av-contact-service-option input:focus-visible + span {
	outline:
		1px solid rgba(255, 255, 255, 0.65);

	outline-offset: 3px;
}

/* =========================================================
   FORM BOTTOM
========================================================= */

.av-contact-form__bottom {
	width: 100%;

	margin-top: 30px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 40px;

	direction: ltr;
}


/* =========================================================
   SUBMIT
========================================================= */

.av-contact-form__submit {
	width: 196px;
	height: 54px;

	padding: 0 28px;

	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	flex: 0 0 196px;

	border: 0;
	border-radius: 27px;

	background: #FF5A00;

	font-family: "Kalameh", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;

	color: #000000;

	direction: rtl;

	cursor: pointer;

	box-shadow:
		0 0 12px rgba(255, 90, 0, 0.20);

	transition:
		transform 250ms ease,
		box-shadow 250ms ease,
		background 250ms ease;
}


.av-contact-form__submit:hover {
	transform: translateY(-2px);

	background: #FF6A1A;

	box-shadow:
		0 0 10px rgba(255, 90, 0, 0.45),
		0 0 24px rgba(255, 90, 0, 0.28),
		0 0 50px rgba(255, 90, 0, 0.12);
}


/* =========================================================
   CONTACT CHANNELS
========================================================= */

.av-contact-form__channels {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 26px;

	direction: rtl;
}


.av-contact-form__channels a {
	font-family: "Kalameh", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;

	color: #F3F0ED;

	text-decoration: none;

	transition:
		color 200ms ease,
		opacity 200ms ease;
}


.av-contact-form__channels a:hover {
	color: #FF5A00;
}


.av-contact-form__channels > span {
	display: block;

	width: 1px;
	height: 24px;

	background: rgba(186, 186, 186, 0.24);
}

/* =========================================================
   RESPONSE TIME STRIP
========================================================= */

.av-contact-response {
	width: min(1344px, calc(100% - 96px));

	margin: 100px auto 0;

	display: flex;
	align-items: center;

	gap: 20px;

	direction: rtl;
}


/* TEXT
--------------------------------------------------------- */

.av-contact-response p {
	margin: 0;

	flex: 0 0 auto;

	font-family: "Kalameh", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;
}


/* LINE
--------------------------------------------------------- */

.av-contact-response__line {
	position: relative;

	flex: 1;

	height: 1px;

	background:
		linear-gradient(
			to left,
			rgba(255, 90, 0, 0.60),
			rgba(255, 90, 0, 0.16)
		);
}


/* GLOW POINT
--------------------------------------------------------- */

.av-contact-response__light {
	position: absolute;

	left: 0;
	top: 50%;

	width: 14px;
	height: 14px;

	transform: translate(-50%, -50%);

	border-radius: 50%;

	background: #FF6A1A;

	box-shadow:
		0 0 7px rgba(255, 90, 0, 0.95),
		0 0 20px rgba(255, 90, 0, 0.55),
		0 0 42px rgba(255, 90, 0, 0.22);
}


/* =========================================================
   CONTACT BOTTOM CTA
========================================================= */

.av-contact-bottom-cta {
	position: relative;

	width: 100%;

	min-height: 440px;

	margin-top: 110px;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	text-align: center;
	direction: rtl;

	overflow: hidden;

	background: #000;
}


/* AMBIENT FLOOR LIGHT
--------------------------------------------------------- */

.av-contact-bottom-cta::before {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -100px;

	width: 760px;
	height: 260px;

	transform: translateX(-50%);

	border-radius: 50%;

	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 90, 0, 0.34) 0%,
			rgba(255, 77, 26, 0.17) 34%,
			rgba(255, 77, 26, 0.07) 56%,
			transparent 78%
		);

	filter: blur(28px);

	pointer-events: none;
}


/* CTA TITLE
--------------------------------------------------------- */

.av-contact-bottom-cta h2 {
	position: relative;
	z-index: 2;

	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.3;

	color: #F3F0ED;
}


/* CTA BUTTON
--------------------------------------------------------- */

.av-contact-bottom-cta__button {
	position: relative;
	z-index: 2;

	width: 196px;
	height: 54px;

	margin-top: 28px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border:
		1px solid rgba(255, 90, 0, 0.72);

	border-radius: 28px;

	background:
		rgba(255, 77, 26, 0.06);

	font-family: "Kalameh", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;

	color: #F3F0ED;

	text-decoration: none;

	box-shadow:
		0 0 8px rgba(255, 77, 26, 0.30),
		0 0 22px rgba(255, 77, 26, 0.14);

	transition:
		border-color 220ms ease,
		background 220ms ease,
		box-shadow 220ms ease,
		transform 220ms ease;
}

.av-contact-bottom-cta__button:hover {
	transform: translateY(-2px);

	border-color: #FF5A00;

	background:
		rgba(255, 90, 0, 0.11);

	box-shadow:
		0 0 12px rgba(255, 77, 26, 0.50),
		0 0 32px rgba(255, 77, 26, 0.24),
		0 0 64px rgba(255, 77, 26, 0.10);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-contact-hero {
		height: 650px;
	}

	.av-contact-hero__content {
		right: 48px;

		width: 480px;
	}

	.av-contact-hero__title {
		font-size: 52px;
	}

	.av-contact-form-section__container {
		width: calc(100% - 64px);

		grid-template-columns:
			minmax(0, 1.3fr)
			minmax(300px, .7fr);

		column-gap: 70px;
	}

	.av-contact-form-section__title {
		font-size: 46px;
	}

	.av-contact-response {
		width: calc(100% - 64px);
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-contact-hero {
		height: 620px;
	}


	.av-contact-hero__media img {
		object-position: 34% center;
	}


	.av-contact-hero__content {
		top: auto;
		right: 20px;
		left: 20px;
		bottom: 90px;

		width: auto;

		transform: none;
	}


	.av-contact-hero__title {
		font-size: 38px;
		line-height: 1.4;
	}


	.av-contact-hero__text {
		margin-top: 18px;

		font-size: 18px;
	}


	/* FORM */

	.av-contact-form-section {
		padding:
			90px 0
			60px;
	}


	.av-contact-form-section__container {
		width: calc(100% - 40px);

		display: flex;
		flex-direction: column;

		gap: 64px;
	}


	.av-contact-form-section__intro {
		width: 100%;
	}


	.av-contact-form-section__title {
		margin-top: 36px;

		font-size: 40px;
	}


	.av-contact-form-section__marker {
		font-size: 17px;
	}


	.av-contact-form__bottom {
		flex-direction: column-reverse;

		align-items: stretch;

		gap: 32px;
	}


	.av-contact-form__submit {
		width: 100%;
	}


	.av-contact-form__channels {
		justify-content: space-between;

		gap: 14px;
	}


	.av-contact-form__channels a {
		font-size: 16px;
	}


	/* RESPONSE */

	.av-contact-response {
		width: calc(100% - 40px);

		margin-top: 70px;

		gap: 14px;
	}


	.av-contact-response p {
		font-size: 16px;
	}


	/* CTA */

	.av-contact-bottom-cta {
		min-height: 360px;

		margin-top: 80px;
	}


	.av-contact-bottom-cta h2 {
		font-size: 36px;
	}


	.av-contact-bottom-cta__button {
		width: 180px;
		height: 50px;

		font-size: 18px;
	}

}


/* =========================================================
   CONTACT FAQ
========================================================= */

.av-contact-faq {
	position: relative;

	width: 100%;

	padding: 0 0 120px;

	background: #000000;
	color: #FFFFFF;
}


/* =========================================================
   MARKER
========================================================= */

.av-contact-faq__marker {
	top: 36px;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.av-contact-faq__container {
	position: relative;
	z-index: 2;

	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;

	padding-top: 126px;

	display: grid;

	grid-template-columns:
		minmax(0, 760px)
		minmax(0, 1fr);

	column-gap: 120px;

	align-items: start;

	direction: ltr;
}


/* =========================================================
   RIGHT INTRO
========================================================= */

.av-contact-faq__intro {
	grid-column: 2;
	grid-row: 1;

	width: 100%;

	margin: 0;
	padding: 0;

	align-self: start;

	direction: rtl;
	text-align: right;
}


/* TITLE */

.av-contact-faq__title {
	margin: 0;
	padding: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;
}


/* DESCRIPTION */

.av-contact-faq__description {
	max-width: 420px;

	margin: 24px 0 0;
	padding: 0;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.8;

	color: rgba(243, 240, 237, 0.62);

	direction: rtl;
	text-align: right;
}


/* =========================================================
   FAQ LIST
========================================================= */

.av-contact-faq__list {
	grid-column: 1;
	grid-row: 1;

	width: 100%;

	margin: 0;
	padding: 0;

	align-self: start;

	direction: rtl;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.av-contact-faq__item {
	width: 100%;

	margin: 0;
	padding: 0;

	border-bottom:
		1px solid rgba(243, 240, 237, 0.18);
}


/* =========================================================
   QUESTION
========================================================= */

.av-contact-faq__question {
	width: 100%;
	min-height: 82px;

	margin: 0;
	padding: 0;

	display: grid;

	grid-template-columns:
		64px
		minmax(0, 1fr)
		44px;

	column-gap: 20px;

	/*
	 * مهم:
	 * سؤال اول از بالا با عنوان سمت راست هم‌تراز می‌شود.
	 */
	align-items: start;

	border: 0;
	outline: 0;

	background: transparent;

	cursor: pointer;

	direction: ltr;
}


/* =========================================================
   NUMBER
========================================================= */

.av-contact-faq__number {
	padding-top: 2px;

	font-family: "Michroma", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;

	letter-spacing: 0;

	color: #8A3318;

	text-align: left;
}


/* =========================================================
   QUESTION TEXT
========================================================= */

.av-contact-faq__question-text {
	padding-top: 0;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.55;

	color: #F3F0ED;

	direction: rtl;
	text-align: right;

	transition:
		color 240ms ease,
		text-shadow 240ms ease;
}


/* =========================================================
   PLUS / MINUS BUTTON
========================================================= */

.av-contact-faq__icon {
	width: 34px;
	height: 34px;

	margin-top: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	border:
		1px solid rgba(243, 240, 237, 0.36);

	border-radius: 50%;

	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 1;

	color: #F3F0ED;

	transition:
		transform 260ms ease,
		color 260ms ease,
		border-color 260ms ease,
		box-shadow 260ms ease;
}


/* فاصله عمودی آیتم‌های بسته */

.av-contact-faq__question {
	padding-bottom: 26px;
}


/* بعد از آیتم اول و بقیه، فاصله بالا ایجاد شود */

.av-contact-faq__item + .av-contact-faq__item
.av-contact-faq__question {
	padding-top: 26px;
}


/* =========================================================
   ANSWER
========================================================= */

.av-contact-faq__answer {
	height: 0;

	overflow: hidden;

	transition:
		height 420ms cubic-bezier(.22, 1, .36, 1);
}


.av-contact-faq__answer-inner {
	width: 100%;
	box-sizing: border-box;

	padding:
		8px
		64px
		34px
		64px;

	font-family: "Kalameh", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.95;

	color: rgba(243, 240, 237, 0.70);

	direction: rtl;
	text-align: right;
}

.av-contact-faq__answer-inner p {
	max-width: none;
	width: 100%;

	margin: 0;

	direction: rtl;
	text-align: right;
}


.av-contact-faq__answer-inner p {
	margin:
		0
		0
		12px;
}


.av-contact-faq__answer-inner p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   OPEN STATE
========================================================= */

.av-contact-faq__item.is-open
.av-contact-faq__icon {
	transform: rotate(45deg);

	color: #FF5A00;

	border-color: #FF5A00;

	box-shadow:
		0 0 6px rgba(255, 90, 0, 0.40),
		0 0 14px rgba(255, 90, 0, 0.16);
}


.av-contact-faq__item.is-open
.av-contact-faq__question-text {
	color: #FFFFFF;
}


/* =========================================================
   HOVER
========================================================= */

.av-contact-faq__question:hover
.av-contact-faq__question-text {
	color: #FFFFFF;
}


.av-contact-faq__question:hover
.av-contact-faq__icon {
	border-color:
		rgba(255, 90, 0, 0.65);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-contact-faq__container {
		width: calc(100% - 64px);

		grid-template-columns:
			minmax(0, 1.3fr)
			minmax(300px, .7fr);

		column-gap: 70px;
	}


	.av-contact-faq__title {
		font-size: 46px;
	}


	.av-contact-faq__question {
		grid-template-columns:
			54px
			minmax(0, 1fr)
			40px;

		column-gap: 16px;
	}


	.av-contact-faq__number {
		font-size: 24px;
	}


	.av-contact-faq__question-text {
		font-size: 21px;
	}


	.av-contact-faq__answer-inner {
		padding-right: 110px;
		padding-left: 56px;

		font-size: 18px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-contact-faq {
		padding-bottom: 80px;
	}


	.av-contact-faq__container {
		width: calc(100% - 40px);

		padding-top: 110px;

		display: flex;
		flex-direction: column;

		gap: 56px;

		direction: rtl;
	}


	.av-contact-faq__intro,
	.av-contact-faq__list {
		width: 100%;
	}


	.av-contact-faq__title {
		font-size: 30px;
	}


	.av-contact-faq__description {
		font-size: 18px;
		line-height: 1.8;
	}


	.av-contact-faq__question {
		grid-template-columns:
			44px
			minmax(0, 1fr)
			34px;

		column-gap: 12px;

		padding-bottom: 22px;
	}


	.av-contact-faq__item + .av-contact-faq__item
	.av-contact-faq__question {
		padding-top: 22px;
	}


	.av-contact-faq__number {
		font-size: 12px;
	}


	.av-contact-faq__question-text {
		font-size: 18px;
		line-height: 1.6;
	}


	.av-contact-faq__icon {
		width: 30px;
		height: 30px;

		font-size: 20px;
	}


	.av-contact-faq__answer-inner {
		padding:
			0
			56px
			24px
			42px;

		font-size: 17px;
		line-height: 1.8;
	}

}

/* =========================================
   HEADER — SCROLLED STATE
========================================= */

.site-header {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	z-index: 9999;

	background: transparent;

	transition:
		background-color 0.35s ease,
		backdrop-filter 0.35s ease,
		box-shadow 0.35s ease;
}


/* AFTER SCROLL */

.site-header.is-scrolled {
	background: rgba(5, 4, 3, 0.88);

	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);

	box-shadow:
		0 12px 35px rgba(0, 0, 0, 0.55),
		0 1px 0 rgba(255, 90, 0, 0.14),
		0 10px 40px rgba(138, 51, 24, 0.10);
}


/* =========================================================
   CONTACT PAGE — MOBILE FINAL
========================================================= */

@media (max-width: 768px) {

	/* =====================================================
	   HERO
	===================================================== */

	.av-contact-hero {
		height: 100svh;
		min-height: 620px;
		max-height: 760px;
	}


	.av-contact-hero__media img {
		width: 100%;
		height: 100%;

		object-fit: cover;
		object-position: 34% center;
	}


	.av-contact-hero::after {
		background:
			linear-gradient(
				to bottom,
				rgba(0,0,0,.12) 0%,
				rgba(0,0,0,.02) 35%,
				rgba(0,0,0,.18) 62%,
				rgba(0,0,0,.72) 86%,
				#000 100%
			);
	}


	.av-contact-hero__content {
		top: auto;
		right: 20px;
		left: 20px;
		bottom: 72px;

		width: auto;

		transform: none;

		direction: rtl;
		text-align: right;
	}


	.av-contact-hero__title {
		margin: 0;

		font-size: 30px;
		line-height: 1.32;

		text-align: right;
	}


	.av-contact-hero__text {
		margin: 16px 0 0;

		font-size: 18px;
		line-height: 1.7;
	}


	/* =====================================================
	   FORM SECTION
	===================================================== */

	.av-contact-form-section {
		padding: 0 0 72px;
	}


	.av-contact-form-section__marker {
		top: 28px;
	}


	.av-contact-form-section__container {
		width: calc(100% - 40px);

		margin: 0 auto;
		padding-top: 100px;

		display: flex;
		flex-direction: column;

		gap: 48px;

		direction: rtl;
	}


	/* =====================================================
	   FORM INTRO
	===================================================== */

	.av-contact-form-section__intro {
		width: 100%;

		margin: 0;
		padding: 0;

		direction: rtl;
		text-align: right;
	}


	.av-contact-form-section__title {
		margin: 0;

		font-size: 30px;
		line-height: 1.25;

		text-align: right;
	}


	.av-contact-form-section__description {
		max-width: none;

		margin: 18px 0 0;

		font-size: 18px;
		line-height: 1.9;

		text-align: right;
	}


	/* =====================================================
	   FORM
	   مهم: حذف -200px دسکتاپ
	===================================================== */

	.av-contact-form {
		width: 100%;

		margin: 0;
		padding: 0;

		direction: rtl;
		text-align: right;
	}


	/* =====================================================
	   FIELDS
	===================================================== */

	.av-contact-form__field {
		width: 100%;

		margin: 0 0 20px;

		padding:
			12px
			4px
			14px;

		box-sizing: border-box;
	}


	.av-contact-form__field label {
		margin-bottom: 5px;

		font-size: 18px;
		line-height: 1.5;
	}


	.av-contact-form__field input,
	.av-contact-form__field textarea {
		font-size: 16px;
		line-height: 1.6;
	}


	.av-contact-form__field input {
		height: 28px;
	}


	.av-contact-form__field textarea {
		height: 90px;
	}


	/* =====================================================
	   SERVICES
	===================================================== */

	.av-contact-services {
		width: 100%;

		margin: 20px 0 32px;
	}


	.av-contact-services__label {
		margin: 0 0 16px;

		font-size: 18px;
	}


	.av-contact-services__options {
		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 10px;
	}


	.av-contact-service-option span {
		width: 100%;
		height: 44px;

		padding: 0 10px;

		border-radius: 22px;

		font-size: 14px;

		white-space: nowrap;
	}


	/* =====================================================
	   FORM BOTTOM
	===================================================== */

	.av-contact-form__bottom {
		width: 100%;

		margin-top: 24px;

		display: flex;
		flex-direction: column;

		align-items: stretch;

		gap: 28px;

		direction: rtl;
	}


	/* =====================================================
   CONTACT CHANNELS — MOBILE
===================================================== */

.av-contact-form__channels {
    order: 1;

    width: auto;
    max-width: 100%;

    margin: 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    direction: rtl;
}


.av-contact-form__channels a {
    flex: 0 0 auto;

    font-size: 16px;
    line-height: 1;

    white-space: nowrap;

    color: #F3F0ED;
    text-decoration: none;
}


.av-contact-form__channels > span {
    flex: 0 0 1px;

    width: 1px;
    height: 16px;

    background: rgba(186, 186, 186, 0.28);
}


/* =====================================================
   SUBMIT — MOBILE
===================================================== */

.av-contact-form__submit {
    order: 2;

    width: 180px;
    height: 48px;

    flex: none;

    margin: 0 auto;
    padding: 0 20px;

    border-radius: 14px;

    font-size: 16px;

    justify-content: space-between;
}

	/* =====================================================
	   FAQ
	===================================================== */

	.av-contact-faq {
		padding: 0 0 72px;
	}


	.av-contact-faq__marker {
		top: 28px;
	}


	.av-contact-faq__container {
		width: calc(100% - 40px);

		margin: 0 auto;
		padding-top: 100px;

		display: flex;
		flex-direction: column;

		gap: 44px;

		direction: rtl;
	}


	.av-contact-faq__intro {
		width: 100%;

		margin: 0;
	}


	.av-contact-faq__title {
		font-size: 30px;
		line-height: 1.25;
	}


	.av-contact-faq__description {
		max-width: none;

		margin-top: 16px;

		font-size: 18px;
		line-height: 1.8;
	}


	/* =====================================================
	   FAQ ITEMS
	===================================================== */

	.av-contact-faq__question {
		min-height: 0;

		grid-template-columns:
			32px
			minmax(0, 1fr)
			28px;

		column-gap: 10px;

		align-items: start;

		padding-bottom: 20px;
	}


	.av-contact-faq__item + .av-contact-faq__item
	.av-contact-faq__question {
		padding-top: 20px;
	}


	.av-contact-faq__number {
		padding-top: 4px;

		font-size: 16px;
	}


	.av-contact-faq__question-text {
		font-size: 16px;
		line-height: 1.65;
	}


	.av-contact-faq__icon {
		width: 28px;
		height: 28px;

		font-size: 18px;
	}


	/* =====================================================
	   FAQ ANSWER
	===================================================== */

	.av-contact-faq__answer-inner {
		padding:
			0
			42px
			22px
			38px;

		font-size: 16px;
		line-height: 1.9;
	}

}

.av-contact-success-wrapper {

	min-height:420px;

	display:flex;

	align-items:center;

	justify-content:center;

	padding:80px 0;

}


.av-contact-success {

	width:700px;

	padding:60px 50px;

	background:#080604;

	border:1px solid rgba(255,102,0,.35);

	border-radius:32px;

	text-align:center;

	direction:rtl;

}


.av-contact-success h2 {

	margin:0 0 20px;

	font-size:36px;

	font-weight:700;

	color:#fff;

}


.av-contact-success p {

	margin:0;

	font-size:18px;

	line-height:2;

	color:rgba(255,255,255,.65);

}


/* Contact Hero — Mobile */
@media (max-width: 768px) {
    .av-contact-hero__content {
        bottom: 275px;
    }
}

@media (max-width: 768px) {
    .av-contact-hero__media img {
        object-position: 25% center;
    }
}