body,
html {
	-webkit-text-size-adjust: 100%
}

*,
html {
	scroll-behavior: smooth
}

.is-container.no-space,
.layout-no-mt .is-container {
	margin-top: 0 !important
}

.is-container.no-space,
.layout-no-mb .is-container {
	margin-bottom: 0 !important
}

html.intro-locked,
body.intro-locked {
	overflow: hidden !important;
	height: 100% !important;
}

/* QC: floating widgets (+ shortcuts, cart) appear only after the intro envelope opens */
.fixed-widget-list,
.ecommerce-action-menu { transition: opacity .6s ease, visibility 0s linear 0s; }
html.intro-locked .fixed-widget-list,
html.intro-locked .ecommerce-action-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

.d-wrapper a:hover,
a,
a:link {
	text-decoration: none
}

:root {

	--lightGray: #f5f5f5;

	--text-dark-4: #6F6F6F;
	--text-light-3: #F5F5F5;
	--text-light-4: #FFFFFF;
	--text-dark-5: #C2C2C2;

	--primary-darker: #8A6738;
	--primary-main-color: #C49E31;
	--primary-subtle: #FFEBC9;
	--primary-lighter: #B08F50;

	--secondary-main-color: #53565A;
	--secondary-subtle: #D9D9E2;
	--secondary-lighter: #9E9EB7;
	--secondary-main-color-2: #1D1D1D;
	--secondary-darker: #000000;

	--dark-red: #4A0505;
	--red: #FF0905;
	--penn-red: #950000;
	--system-red-0: #FF3B3B;
	--system-red-3: #FFE5E5;

	--system-orange-0: #FF8800;
	--system-orange-3: #FFF8E5;

	--inner-shadow: 0 0 20px 0 rgba(149, 0, 0, 0.2);
	--drop-shadow: -4px 4px 0 0 rgba(0, 0, 0, 0.25);

	--radius-6: 0.42rem;
	--radius-8: 0.57rem;
	--radius-10: 0.71rem;
	--radius-12: 0.85rem;
	--radius-15: 0.07rem;
	--radius-20: 1.42rem;
	--radius-150: 10.71rem;

	--green: #90E060;
	--system-green-0: #019D59;
	--system-green-3: #E3FFF1;

	--stroke-dark: #4A0505;


}
/* 
#dnn_ContentPane {
	background-color: var(--dark-red);
} */

.color-red {
	color: var(--red);
}

.color-dark-4 {
	color: var(--text-dark-4);
}

.color-system-green-0 {
	color: var(--system-green-0);
}

.color-primary-main {
	color: var(--primary-main-color);
}

.color-primary-subtle {
	color: var(--primary-subtle);
}

.color-secondary-main {
	color: var(--secondary-main-color);
}

.color-secondary-subtle {
	color: var(--secondary-subtle);
}

.color-secondary-lighter {
	color: var(--secondary-lighter);
}

.color-secondary-main-2 {
	color: var(--secondary-main-color-2);
}

.bg-text-dark-5 {
	background-color: var(--text-dark-5);
}

.bg-text-light-4 {
	background-color: var(--text-light-4);
}

.color-text-light-4 {
	color: var(--text-light-4);
}

.color-text-light-4 {
	color: var(--text-light-4);
}

.darkred-btn button {
	background-color: var(--dark-red) !important;
	color: var(--primary-subtle) !important;
	text-shadow: none;
	background-image: none;
	font-weight: 100 !important;
	border-radius: var(--radius-150) !important;
	width: 100%;
}

.borderprimary-btn button {
	color: var(--secondary-main-color-2) !important;
	text-shadow: none;
	background: none !important;
	font-weight: 100 !important;
	border-radius: var(--radius-150) !important;
	width: 100%;
	border: 1px solid var(--primary-main-color) !important;

}



.desc,
.is-align-justify {
	text-align: justify
}

*,
::after,
::before {
	box-sizing: border-box
}

body,
html {
	margin: 0;
	padding: 0;
	font: 1rem/1.8 IranSite, Arial;
	color: #666;
	height: 100%;
	-webkit-tap-highlight-color: transparent
}

html {
	-ms-text-size-adjust: 100%;
	overflow-x: hidden
}

* {
	scroll-margin-top: 12.14rem
}

@media (max-width:990px) {
	* {
		scroll-margin-top: 3.95rem
	}
}

@media only screen and (max-width:100rem) and (orientation:landscape) {
	.dng-main {
		overflow-x: hidden;
		overflow-y: hidden
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: inherit !important;
	margin: .3571rem 0 .7143rem
}

::-webkit-input-placeholder {
	color: inherit;
	opacity: .9
}

:-moz-placeholder {
	color: inherit;
	opacity: .9
}

::-moz-placeholder {
	color: inherit;
	opacity: .9
}

:-ms-input-placeholder {
	color: inherit;
	opacity: .9
}

:placeholder {
	color: inherit;
	opacity: .9
}

img {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover
}

a,
a:link {
	transition: color .3s;
	-moz-transition: color .3s;
	-webkit-transition: color .3s;
	-o-transition: color .3s;
	-ms-transition: color .3s
}

.is-align-left,
.text-start {
	text-align: right
}

.is-align-center,
.text-center {
	text-align: center
}

.is-align-right,
.text-end {
	text-align: left
}

.ltr {
	direction: ltr
}

.auto-scroll {
	overflow-x: auto;
	white-space: nowrap
}

.auto-scroll::-webkit-scrollbar {
	width: 0
}

.auto-scroll::-webkit-scrollbar-thumb,
.auto-scroll::-webkit-scrollbar-thumb:hover,
.auto-scroll::-webkit-scrollbar-track {
	background: 0 0
}

.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -1.0714rem;
	margin-right: -1.0714rem;
	--bs-gutter-x: 2.1429rem
}

.container,
.container-fluid {
	margin-left: auto;
	margin-right: auto
}

.container-fluid {
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (max-width:85.6429rem) {
	.mt-lg-reset {
		margin-top: 0 !important
	}

	.mr-lg-reset {
		margin-left: 0 !important
	}

	.mb-lg-reset {
		margin-bottom: 0 !important
	}

	.ml-lg-reset {
		margin-right: 0 !important
	}

	.ml-reset {
		margin: 0 !important
	}

	.full-lg-none.full-column-inner {
		margin-left: 0 !important;
		width: auto !important
	}
}

@media (max-width:70.7857rem) {
	.mt-md-reset {
		margin-top: 0 !important
	}

	.mr-md-reset {
		margin-left: 0 !important
	}

	.mb-md-reset {
		margin-bottom: 0 !important
	}

	.ml-md-reset {
		margin-right: 0 !important
	}

	.ml-reset {
		margin: 0 !important
	}

	.full-md-none.full-column-inner {
		margin-left: 0 !important;
		width: auto !important
	}
}

@media (max-width:41.0714rem) {
	.mt-xs-reset {
		margin-top: 0 !important
	}

	.mr-xs-reset {
		margin-left: 0 !important
	}

	.mb-xs-reset {
		margin-bottom: 0 !important
	}

	.ml-xs-reset {
		margin-right: 0 !important
	}

	.ml-reset {
		margin: 0 !important
	}

	.full-xs-none.full-column-inner {
		margin-left: 0 !important;
		width: auto !important
	}
}


.dng-left-full,
.dng-right-full {
	max-width: none
}

.d-wrapper,
.d-wrapper img,
.swiper {
	max-width: 100%
}

.list-style,
.list-style li {
	list-style: none !important
}

.list-style {
	margin: 0 !important;
	padding: 0 !important
}

.fixed_footer_bottom {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	max-height: 100%
}

.fixed_footer_bottom .fixed_footer.active {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	overflow-y: auto
}

.fixed_footer_clone {
	background-color: #121212
}

.dng-main.Boxed .rev_slider_wrapper.fullscreen-container {
	max-width: 100% !important;
	right: 0 !important
}

@media only screen and (max-width:70.7857rem) {
	.dng-main {
		overflow-x: hidden;
		overflow-y: hidden
	}

	.fixed_footer_bottom .fixed_footer.active {
		position: relative
	}

	.fixed_footer_bottom,
	.fixed_footer_clone,
	.footer_box {
		height: auto !important;
		position: relative !important;
		max-height: inherit !important
	}
}

[class*=" button-"],
[class*=social-],
[class^=button-] {
	position: relative;
	display: inline-block
}

.footer {
	background-color: #cccccc;
}

.footer .iransite a,
.footer .iransite a:hover {
	color: var(--text-light-4) !important;
	display: block;
	text-align: center;
}


.footer .social-item {
	width: 2rem;
	height: 2rem;
}

footer .enamad-logo {
	display: block;
	width: 5.75rem;
	margin: auto
}

.color-white,
.color-white .Normal,
.color-white a,
.color-white a:active,
.color-white a:hover,
.color-white a:visited,
.color-white h1,
.color-white h2,
.color-white h3,
.color-white h4,
.color-white h5,
.color-white h6,
.color-white p {
	color: #fff !important
}

.icon-svg svg,
.icon-svg svg * {
	color: inherit
}

body.ilightbox-noscroll {
	overflow: visible
}

.custom-module .soon.loading>*,
.custom-module .swiper-container.loading>*,
[data-parallax=parallax] {
	visibility: hidden
}

[data-parallax=parallax].parallax-load {
	visibility: visible
}

textarea,
input[type=text] {
	width: 100% !important;
	border: none;
	background-color: rgb(232, 195, 128, 20%);
	border-radius: var(--radius-20);
	color: var(--secondary-main-color);
}

.fa,
.fas {
	font-weight: 900 !important
}

.icon-svg,
.sico {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle
}

.sico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: initial
}

li>.icon-svg,
li>.sico,
p>.icon-svg,
p>.sico {
	vertical-align: middle;
	margin-bottom: .2em
}

.icon-svg svg {
	width: 1em;
	height: 1em;
	stroke: currentColor !important;
	opacity: 0;
	vertical-align: sub
}

.icon-svg svg line,
.icon-svg svg path,
.icon-svg svg polyline,
.icon-svg svg rect {
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-miterlimit: 10
}

.icon-svg.animated svg,
.splash-page .item:hover .img-box {
	opacity: 1
}

[class*=" button-"],
[class^=button-] {
	font-size: 1.0714rem;
	font-weight: 600;
	line-height: 3.5714rem;
	height: 3.5714rem;
	padding: 0 1.7857rem;
	margin-left: .2143rem;
	margin-bottom: .2143rem;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	background-image: none;
	border: none;
	border-radius: 3.5714rem;
	-webkit-transition: .3s cubic-bezier(.42, 0, 1, 1);
	transition: .3s cubic-bezier(.42, 0, 1, 1)
}

[class*=btn-]:focus {
	outline: 0;
	box-shadow: none
}

body [class*=btn-] {
	text-decoration: none !important
}

.d-wrapper .section-no-padding.is-box .is-container {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0
}

.row.col-no-padding {
	margin-right: 0;
	margin-left: 0
}

.row.col-no-padding [class*=col-] {
	padding-right: 0;
	padding-left: 0
}

.is-container.no-space {
	padding: 0 !important
}

.is-container.is-stretch-w>div,
.is-container.is-stretch-w>div>div,
.layout-no-plr .is-container {
	padding-right: 0 !important;
	padding-left: 0 !important
}

#dnn_ctr_EditUser_UP #dnn_ctr_EditUser_adminTabNav li,
.border-radius-0 {
	border-radius: 0 !important
}

.border-radius-3 {
	border-radius: .2143rem !important
}

.border-radius-circle {
	border-radius: 50% !important
}

.position-relative {
	position: relative !important
}

.position-static {
	position: static !important
}

.icon-cross {
	width: 1em;
	height: 1em;
	display: inline-block;
	position: relative
}

.icon-cross::after,
.icon-cross::before {
	content: "";
	border-right: .1429rem solid currentColor;
	position: absolute;
	height: 94%;
	margin-top: 3%;
	right: 50%;
	border-radius: .2143rem;
	margin-right: -.0714rem
}

.icon-cross::after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.icon-cross::before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.d-wrapper .container>.row,
.d-wrapper .container>div>.row {
	padding-top: .7143rem;
	padding-bottom: .7143rem;
	margin-top: 0;
	margin-bottom: 0
}

.d-wrapper .container-fluid>.row,
.d-wrapper .container-fluid>div>.row {
	padding-top: .7143rem;
	padding-bottom: .7143rem
}

.d-wrapper,
.is-container {
	margin: 0 auto;
	box-sizing: border-box
}

.d-wrapper {
	width: 100%;
	height: auto;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s
}

.is-boxes,
.is-stretch>div:not(.is-arrow-down) {
	height: 100%;
	display: table;
	width: 100%;
	position: relative
}

.d-wrapper>div {
	display: table;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	position: relative;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	transition: .3s
}

.d-wrapper .is-wrapper,
.flexi-position,
.html5-video {
	position: relative
}

.d-wrapper::after {
	content: "";
	clear: both;
	display: block;
	overflow: hidden
}

#Body:not(.builder-editor-mode) .custom-module .ajaxform .from-error,
#addressbook #backtocheckout,
#dnn_ctr_EditUser_UP #dnn_ctr_EditUser_adminTabNav li:nth-child(3n),
#dnn_ctr_EditUser_UP #dnn_ctr_EditUser_adminTabNav li:nth-child(4n),
#dnn_ctr_EditUser_UP .dnnButtonDropdown,
#dnn_ctr_EditUser_UP .dnnButtonDropdown-clicked,
.console br,
.custom-module .soon,
.d-wrapper .d-placeholder,
.overlay-responsive .is-overlay-mobile-bg {
	display: none
}

.is-box {
	vertical-align: middle
}

.is-boxes {
	table-layout: fixed
}

.is-boxes:empty {
	min-height: 3.5714rem
}

.is-overlay+.is-boxes>.is-box-centered:empty {
	height: 19.6429rem
}

.no-min-height {
	min-height: auto
}

.is-box-centered {
	display: table-cell;
	width: 100%;
	position: relative;
	vertical-align: middle
}

.is-stretch>div:not(.is-arrow-down) {
	right: 0;
	top: 0
}

.is-stretch .flexi-position {
	position: absolute
}

.is-section.is-stretch {
	min-height: 21.4286rem
}

.is-hidden,
.is-section.layout-hidden-content {
	display: none !important
}

.is-container {
	padding: 0 1.0714rem;
	position: relative;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	transition: .3s
}

.d-wrapper .is-boxed-layout .is-container {
	padding: 3.5714rem;
	background: #fff
}

@media all and (max-width:91.4286rem) {
	.d-wrapper .is-boxed-layout .is-container {
		padding: 2.1429rem
	}
}

@media all and (max-width:73.1429rem) {
	.margin-left-1024-reset {
		margin-right: 0 !important
	}

	.margin-right-1024-reset {
		margin-left: 0 !important
	}

	.d-wrapper .is-boxed-layout .is-container {
		padding: 2.1429rem
	}
}

.d-wrapper .is-box .is-container {
	margin-top: 7.1429rem;
	margin-bottom: 7.1429rem
}

.has-sidebar .d-wrapper .is-box .is-container {
	margin-top: 2.8571rem;
	margin-bottom: 2.8571rem
}

.sidebar_dynamic {
	background-image: url(/portals/0/images/menueback.png);
	padding-top: 8rem;
	position: fixed;

	visibility: hidden;

	transform: translateY(100%);
	transition:
		transform 0.6s ease,
		visibility 0s linear 0.6s;

	z-index: 2;
	width: 28rem !important;
	max-width: 100%;
}

.sidebar_dynamic.active {
	transform: translateY(0);
	visibility: visible;
	bottom: 1rem;
	transition:
		transform 0.6s ease,
		visibility 0s;
}

.Organizational-sec-1 .content .img-box,
.sidebar_pos_fixleft .sidebar_dynamic .is-container,
.sidebar_pos_fixleftfull .sidebar_dynamic .is-container,
.sidebar_pos_fixright .sidebar_dynamic .is-container,
.sidebar_pos_fixrightfull .sidebar_dynamic .is-container,
.sidebar_pos_left .is-container,
.sidebar_pos_right .is-container {
	padding: 0
}

.is-container.is-stretch-h,
.is-container.is-stretch-h>div {
	padding-top: 0 !important;
	padding-bottom: 0 !important
}

.is-overlay {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden
}

.is-overlay .is-overlay-bg {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 60%
}

.is-overlay .is-overlay-bg.is-scale-animated.is-appeared {
	animation: 25s forwards is-scale;
	-ms-animation: is-scale 25s ease forwards;
	-webkit-animation: 25s forwards is-scale;
	-o-animation: 25s forwards is-scale;
	-moz-animation: 25s forwards is-scale
}

@keyframes is-scale {
	from {
		transform: scale(1);
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-moz-transform: scale(1)
	}

	to {
		transform: scale(1.2);
		-ms-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-o-transform: scale(1.2);
		-moz-transform: scale(1.2)
	}
}

.is-overlay .is-overlay-color {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .05
}

.is-overlay .is-overlay-content {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: inherit
}

.is-overlay .is-overlay-content.content-selectable {
	z-index: 1
}

@media (max-width:54.7857rem) {
	.mt-sm-reset {
		margin-top: 0 !important
	}

	.mr-sm-reset {
		margin-left: 0 !important
	}

	.mb-sm-reset {
		margin-bottom: 0 !important
	}

	.ml-sm-reset {
		margin-right: 0 !important
	}

	.ml-reset {
		margin: 0 !important
	}

	.full-sm-none.full-column-inner {
		margin-left: 0 !important;
		width: auto !important
	}

	.overlay-responsive .is-overlay-bg {
		display: none
	}

	.overlay-responsive .is-overlay-mobile-bg {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat
	}
}

.is-overlay-Video-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	top: 0;
	right: 0
}

.is-overlay-Video-bg video,
.splash-page .item .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.d-wrapper>div.is-bg-grey,
.is-bg-grey {
	background-color: #eeeff0
}

.d-wrapper>div.is-bg-dark,
.is-bg-dark {
	background-color: #111
}

.d-wrapper>div.is-bg-light,
.is-bg-light {
	background-color: #fff
}

.d-wrapper>div.is-bg-none {
	background-color: transparent
}

.is-dark-text .is-light-text,
.is-light-text,
.is-light-text div,
.is-light-text h1,
.is-light-text h2,
.is-light-text h3,
.is-light-text h4,
.is-light-text h5,
.is-light-text h6,
.is-light-text li,
.is-light-text p,
.is-light-text span:not(.sico) {
	color: #fff
}

.is-container.is-content-left {
	margin-right: 7.1429rem
}

.is-container.is-content-right {
	margin-left: 7.1429rem
}

@media all and (max-width:85.7143rem) {
	.is-container.is-content-left {
		margin-right: 4.2857rem
	}

	.is-container.is-content-right {
		margin-left: 4.2857rem
	}
}

@media all and (max-width:70.7857rem) {
	.is-overlay+.is-boxes:empty {
		min-height: 19.6429rem
	}

	.is-overlay+.is-boxes>.is-box-centered:empty {
		height: 19.6429rem
	}

	.is-section:not(.is-box) {
		height: auto !important
	}

	.is-box-img {
		height: 21.4286rem !important
	}

	.is-box-img .is-boxes {
		height: 100% !important
	}

	.is-box-centered {
		display: table-cell
	}

	.is-box {
		display: table !important
	}

	.d-wrapper .is-box .is-container {
		margin-top: 4.2857rem;
		margin-bottom: 4.2857rem
	}

	.has-sidebar .d-wrapper .is-box .is-container {
		margin-top: 1.4286rem;
		margin-bottom: 1.4286rem
	}

	.is-container.is-content-left {
		margin-right: auto
	}

	.is-container.is-content-right {
		margin-left: auto
	}
}

.is-content-top {
	vertical-align: top
}

.is-content-bottom {
	vertical-align: bottom
}

.is-content-top>.is-boxes>.is-container {
	align-self: flex-start
}

.is-content-bottom>.is-boxes>.is-container {
	align-self: flex-end
}

@media (max-width:570.4271rem) {
	#Body .is-section-xs-50 {
		height: 50vh
	}

	#Body .is-section-xs-auto {
		height: auto;
		min-height: auto
	}
}

@media (max-width:760.57rem) {
	#Body .is-section-sm-50 {
		height: 50vh
	}

	#Body .is-section-sm-auto {
		height: auto;
		min-height: auto
	}
}

@media (max-width:990.1414rem) {
	#Body .is-section-md-50 {
		height: 50vh
	}

	#Body .is-section-md-auto {
		height: auto;
		min-height: auto
	}
}

@media (max-width:1190.7129rem) {
	#Body .is-section-lg-50 {
		height: 50vh
	}

	#Body .is-section-lg-auto {
		height: auto;
		min-height: auto
	}
}

.is-container.is-stretch-w {
	margin-right: 0;
	margin-left: 0;
	padding-right: 0 !important;
	padding-left: 0 !important;
	max-width: 100% !important;
	width: 100% !important
}

.is-container.is-stretch-h {
	margin-top: 0;
	margin-bottom: 0
}

.is-container.is-fullheight,
footer .about-footer .txt-box {
	height: 100%
}

.is-container.is-container-fluid {
	max-width: none;
	width: auto
}

.bg-attachment-fixed,
.bg-attachment-fixed .is-overlay-bg {
	background-attachment: fixed !important
}

@media only screen and (min-device-width:54.8571rem) and (max-device-width:73.1429rem) and (-webkit-min-device-pixel-ratio:1) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:54.8571rem) and (max-device-width:73.1429rem) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:54.8571rem) and (max-device-width:73.1429rem) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:54.8571rem) and (max-device-width:73.1429rem) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:54.8571rem) and (max-device-width:73.1429rem) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:54.8571rem) and (max-device-width:73.1429rem) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:59.5714rem) and (max-device-width:79.4286rem) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:59.5714rem) and (max-device-width:59.5714rem) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:79.4286rem) and (max-device-width:79.4286rem) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:73.1429rem) and (max-device-width:97.5714rem) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:73.1429rem) and (max-device-width:73.1429rem) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

@media only screen and (min-device-width:97.5714rem) and (max-device-width:97.5714rem) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:2) {

	.bg-attachment-fixed,
	.bg-attachment-fixed .is-overlay-bg {
		background-attachment: scroll !important
	}
}

.gm-style {
	font-family: inherit !important
}

.is-rounded-button-medium a {
	display: inline-block;
	text-align: center;
	margin: 0 1.4286rem;
	border-radius: 35.7143rem;
	width: 5rem;
	height: 5rem;
	background-color: #aaa;
	overflow: hidden
}

.is-rounded-button-medium a i {
	display: inline-block;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	color: #fff;
	font-size: 2.1429rem;
	line-height: 5rem
}

.is-rounded-button-medium a:first-child {
	margin: 0 0 0 1.4286rem
}

.is-rounded-button-medium a:last-child {
	margin: 0 1.4286rem 0 0
}

@-webkit-keyframes loading-rotate {
	0% {
		-webkit-transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(360deg)
	}
}

@-moz-keyframes loading-rotate {
	0% {
		-moz-transform: rotate(0)
	}

	100% {
		-moz-transform: rotate(360deg)
	}
}

@keyframes loading-rotate {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

.custom-module .soon.loading,
.custom-module .swiper-container.loading {
	min-height: 7.1429rem;
	max-height: 50vh;
	position: relative
}

.custom-module .soon.loading:after,
.custom-module .swiper-container.loading:after {
	content: "";
	width: 2.8571rem;
	height: 2.8571rem;
	display: inline-block;
	border: .3571rem solid #e3e3e3;
	border-top-color: #555;
	border-right-color: #555;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: 2.1429rem;
	right: 50%;
	margin-right: -1.4286rem;
	-webkit-animation: .7s infinite loading-rotate;
	-moz-animation: .7s infinite loading-rotate;
	animation: .7s infinite loading-rotate;
	z-index: 101
}

.custom-module .number {
	color: currentColor
}

.Organizational-sec-2 .item .img-box img,
.full-width,
.html5-video video,
.middle-banner,
footer .call-center,
footer .contact-us {
	width: 100%
}

.html5-video .play-button {
	position: absolute;
	right: 50%;
	top: 50%;
	margin: -2.5714rem -2.5714rem 0 0;
	cursor: pointer
}

.section-slider-bgcarousel .is-overlay,
.section-slider-bgcarousel .is-overlay-content.content-selectable,
.section-slider-bgcarousel .swiper-container {
	z-index: initial
}

.section-carousel-bg .swiper-wrapper-overflow {
	height: 100%;
	padding: 0
}

.section-carousel-bg .swiper-slide {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover
}

.section-carousel-bg .swiper-pagination {
	bottom: 2.1429rem;
	margin: 0;
	position: absolute
}

@media only screen and (min-width:992px) {

	.section-carousel-bg.swiper-container .swiper-button-next,
	.section-carousel-bg.swiper-container .swiper-button-prev {
		width: 3.2143rem;
		height: 3.2143rem;
		margin: -1.6429rem 0 0 !important
	}

	.section-carousel-bg.swiper-container .swiper-button-next {
		left: 1.7857rem;
		right: auto
	}

	.section-carousel-bg.swiper-container .swiper-button-prev {
		right: 1.7857rem
	}

	.section-carousel-bg.swiper-container .swiper-button-next span,
	.section-carousel-bg.swiper-container .swiper-button-prev span {
		width: 2.1429rem;
		height: 2.1429rem;
		border-width: .1429rem;
		margin-top: -1.0714rem
	}
}

.gomenu a img {
	width: 1.7rem;
	vertical-align: middle;
	margin-left: .3571rem;
	margin-bottom: .1429rem
}

.sidebar-menu .gomenu>ul>li>a {
	border-top: none !important;
	padding: 1rem 1.42rem;
}

.sidebar-menu .gomenu>ul>li {
	margin-bottom: 1rem;
}

.bottom-menu-item,
.middle-menu-item {
	min-width: max-content;
	padding: 0 32px;
	text-align: center
}

.middle-menu-item .img-box {
	width: 84px;
	height: 84px;
	margin: 0 auto 12px
}

.bottom-menu-item .title,
.middle-menu-item .title {
	font-size: 1rem;
	color: #000
}

.bottom-menu-item .img-box {
	width: 70px;
	height: 70px;
	margin: 0 auto 24px
}

.middle-banner img {
	width: 100%;
	display: block
}

.p-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 10.35rem;
	align-self: start
}

ul li {
	list-style: none;
}

.custom-scroll {
	overflow-x: auto;
	overflow-y: auto;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.custom-scroll:active {
	cursor: grabbing;
}

.custom-scroll::-webkit-scrollbar {
	width: 1px;
	height: 1px
}

.custom-scroll::-webkit-scrollbar-track {
	background: 0 0
}

.custom-scroll::-webkit-scrollbar-thumb {
	background: var(--accent-color)
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
	background: #484848
}

.b-shaddow-1 {
	box-shadow: 0 0 5px -3px #484848
}

footer .dngTextBox {
	width: 100%;
}

footer .footer-content {
	padding-top: 4rem;
	padding-bottom: 2.5rem
}

footer .footer-content .dngTextBox {
	display: block !important
}

footer .about-footer .txt-box .desc {
	font-size: .9rem;
	text-align: justify;
	color: #000;
	line-height: 2.5
}

footer .about-footer .txt-box .copyright-txt {
	direction: ltr;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9rem;
	color: var(--accent-color)
}

footer .about-arjang {
	color: var(--primary-subtle);
}

footer .about-arjang svg {
	max-width: 24rem !important;
}

footer .license .img-box {
	width: calc((100% - 1rem) / 2);
	max-width: 100%;
	aspect-ratio: 1/0.45;
	background-color: var(--text-light-4);
	border-radius: var(--radius-8);
}

footer .license .img-box img {
	width: 100%;
	object-fit: contain;
}

.map {
	img {
		border-radius: 0.4rem;
		border: solid 1px #d5d5d5;
		-webkit-border-radius: 0.4rem;
		-moz-border-radius: 0.4rem;
		-ms-border-radius: 0.4rem;
		-o-border-radius: 0.4rem;
	}
}

.contact-us .col-title {
	display: block;
	font-size: 1.4rem;
	color: #000
}

.contact-us .item {
	margin-bottom: 1rem;
}

.contact-us .item svg {
	width: 18px;
	stroke: #414052;
	margin-left: 1rem
}

.contact-us .item .txt {
	width: 100%;
	font-size: 1.1rem;
	color: #000;
	margin: 0
}

footer .col-title {
	display: block;
	font-size: 1.1rem;
	color: #000
}



footer .contact-us .item svg {
	width: 18px;
	stroke: #414052;
	margin-left: 1rem
}

footer .contact-us .item .txt {
	width: 100%;
	font-size: .9rem;
	color: #000;
	margin: 0
}

footer .call-center .item {
	direction: ltr;
	min-height: 70px;
	background-color: #f6f6f6;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px
}

footer .call-center .item .icon {
	width: 40%;
	text-align: center;
	border-right: solid 1px var(--accent-color)
}

footer .call-center .item .icon svg {
	width: 20px;
	stroke: var(--accent-color);
	margin-left: 1rem
}

footer .call-center .item .txt {
	width: 60%;
	text-align: center;
	font-size: .9rem;
	color: #000;
	margin: 0
}

.maximize-image {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000000000;
	background-color: rgba(0, 0, 0, .9)
}

.maximize-image .layout img {
	width: auto;
	height: auto;
	max-width: 95%;
	max-height: 95%;
	border-radius: 1rem;
	border: 2px solid #000;
	-webkit-border-radius: 1rem;
	-moz-border-radius: 1rem;
	-ms-border-radius: 1rem;
	-o-border-radius: 1rem
}

.maximize-image .layout .close {
	width: 3rem;
	height: 3rem;
	top: 0;
	left: 0;
	border-bottom-right-radius: 5px;
	background-color: #fff;
	border: 2px solid #000;
	cursor: pointer
}

.maximize-image .layout .close svg {
	width: 1rem;
	height: 1rem;
	fill: #000
}

.centered-title {
	font-size: 1rem;
	color: #000;
	text-align: center
}

.contact-content .text-box p,
.user-info-box {
	font-size: .9rem
}

.user-info-box {
	border: none;
	border-radius: .5rem;
	padding: 1rem;
	background: var(--lightGray);
	color: #000
}

.user-info-box .user-avatar {
	width: 8rem;
	max-width: 30%;
	display: flex;
	align-items: center;
	justify-content: center
}

.user-info-box .user-avatar img {
	width: 100%;
	display: block;
	border-radius: .4rem
}

.accordion-panel.article-accordion-panel .acc-head .title,
.user-info-box strong {
	font-size: 1rem
}

.user-info-box .link-btn {
	min-width: 9rem;
	height: 3rem;
	border: 1px solid #000;
	border-radius: .5rem;
	padding: .5rem;
	color: #000
}

.user-info-box .link-btn.logout-btn {
	background: rgba(237, 49, 55, .1)
}

.console-row {
	padding: .5rem 0;
	background-color: var(--accent-color);
	background-image: url("/portals/0/images/console-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 3rem
}

.console {
	width: 100% !important;
	margin: 0
}

.console>.console-small {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 1rem
}

.console>.console-small>.console-small {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .57rem;
	width: auto;
	min-width: 10rem;
	min-height: 4.28rem;
	padding: .5rem 1rem;
	float: none;
	margin: 1rem 0;
	border-radius: .4rem;
	background: var(--White)
}

.console>.console-small>.console-small img {
	padding: 0;
	float: none;
	width: 1.8rem;
	min-width: 1.8rem;
	height: auto;
	object-fit: scale-down
}

.console>.console-small>.console-small h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	padding: 0;
	color: var(--Black)
}

.bordered-title.bold .title,
.console>.console-small>.console-small.active,
.console>.console-small>.console-small:hover {
	font-weight: 700
}

@media (max-width:960px) {

	footer #column-426842,
	footer .footer-info-box {
		text-align: center
	}

	.console>.console-small {
		display: block;
		text-align: center
	}

	.console>.console-small>.console-small {
		display: inline-flex;
		vertical-align: middle;
		margin: .5rem
	}
}

@media (max-width:480px) {
	.console>.console-small {
		display: block;
		text-align: center
	}

	.console>.console-small>.console-small {
		display: inline-flex;
		vertical-align: middle;
		width: 100%;
		margin: .5rem 0
	}
}

#addaddress label {
	margin-top: .8rem;
	margin-bottom: .8rem;
	color: var(--secondary-main-color);

}

#addaddress input,
#addaddress select {
	width: 100% !important;
	border: none;
	background-color: rgb(232, 195, 128, 20%);
	border-radius: var(--radius-20);
	padding: 0.57rem;
	color: var(--secondary-main-color);
}

#dnn_ctr_EditUser_UP .dnnLabel {
	width: auto;
	min-width: 15.075%;
	text-align: right
}

#dnn_ctr_EditUser_UP .dnnFormItem input[type=text],
#dnn_ctr_EditUser_UP .dnnFormItem select {
	box-shadow: none;
	min-height: 2.9rem;
	width: 100% !important;
	border: none;
	background-color: rgb(232, 195, 128, 20%);
	border-radius: var(--radius-20);
}

#dnn_ctr_EditUser_UP #dnn_ctr_EditUser_adminTabNav {
	border: none;
	border-radius: 0
}

#dnn_ctr_EditUser_UP #dnn_ctr_EditUser_adminTabNav li a {
	font-weight: 400;
	background: 0 0;
	border: none;
	padding: 12px 9px 10px;
	border-radius: .4rem;
	-webkit-border-radius: 0.4rem;
	-moz-border-radius: .4rem;
	-ms-border-radius: 0.4rem;
	-o-border-radius: .4rem
}

#dnn_ctr_EditUser_UP #dnn_ctr_EditUser_adminTabNav li.ui-tabs-active a {
	text-shadow: none;
	background: #707070;
	color: var(--White);
	margin-top: 0;
	padding: 12px 9px 10px
}

#dnn_ctr_EditUser_UP fieldset {
	border-radius: 0 0 .8rem .8rem;
	padding: 2rem;
	background: var(--lightGray)
}

#dnn_ctr_EditUser_UP .dnnPrimaryAction,
#dnn_ctr_EditUser_UP .dnnSecondaryAction {
	color: var(--White);
	text-shadow: none;
	border: none;
	border-radius: .4rem;
	padding: .5rem 1rem;
	background: var(--accent-color2)
}

#dnn_ctr_EditUser_UP .dnnPrimaryAction#dnn_ctr_EditUser_Profile_cmdUpdate,
#dnn_ctr_EditUser_UP .dnnPrimaryAction#dnn_ctr_EditUser_cmdDelete,
#dnn_ctr_EditUser_UP .dnnPrimaryAction#dnn_ctr_EditUser_cmdUpdate,
#dnn_ctr_EditUser_UP .dnnPrimaryAction#updateProfileUrl,
#dnn_ctr_EditUser_UP .dnnSecondaryAction#dnn_ctr_EditUser_Profile_cmdUpdate,
#dnn_ctr_EditUser_UP .dnnSecondaryAction#dnn_ctr_EditUser_cmdDelete,
#dnn_ctr_EditUser_UP .dnnSecondaryAction#dnn_ctr_EditUser_cmdUpdate,
#dnn_ctr_EditUser_UP .dnnSecondaryAction#updateProfileUrl,
.Organizational-sec-1 .content .text-box .btn-holder .btn:nth-child(2n) {
	background: var(--accent-color2)
}

#dnn_ctr_EditUser_UP h2.dnnFormSectionHead {
	border: none;
	background: var(--lightGray);
	padding: 1rem;
	margin-bottom: 0;
	border-radius: .8rem .8rem 0 0
}

#dnn_ctr_EditUser_UP h2.dnnFormSectionHead a {
	padding: 0;
	color: var(--Black);
	background-color: transparent !important
}

.contact-content {
	margin-top: 3.5rem;
	padding: 2.2rem 1.5rem;
	border-radius: 5px;
	border: solid 1px var(--lightGray)
}

.contact-content .main-title {
	margin-bottom: 2rem
}

.contact-content .row {
	width: 86rem;
	max-width: 100%;
	margin: 0 auto
}

.contact-content .col {
	position: relative;
	margin-bottom: 2rem
}

.contact-content .col:first-child:after {
	content: "";
	position: absolute;
	top: 2rem;
	left: 0;
	bottom: 0;
	border-left: solid 1px var(--lightGray)
}

.contact-content .text-box .title {
	font-size: 1rem;
	color: var(--accent-color)
}

.contact-content .map img {
	display: block
}

.maximize-btn {
	position: absolute;
	top: 1rem;
	left: 1rem;
	cursor: pointer;
	z-index: 1
}

.maximize-btn svg {
	width: 15px;
	height: 15px;
	stroke: #1b2c65
}

.accordion-panel.article-accordion-panel {
	background-color: var(--lightGray);
	margin-bottom: 1.1rem;
	border-radius: .4rem
}

.accordion-panel.article-accordion-panel .acc-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .9rem 1.5rem;
	cursor: pointer
}

.accordion-panel.article-accordion-panel .acc-head:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: .4rem;
	border-radius: .4rem 0 0 .4rem;
	background-color: var(--accent-color)
}

.accordion-panel.article-accordion-panel .acc-head .icon {
	display: flex;
	position: relative;
	text-align: center;
	margin-right: 10px
}

.accordion-panel.article-accordion-panel .acc-head .icon svg {
	width: 1.1rem;
	height: 1.1rem;
	stroke: #414052;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s
}

.accordion-panel.article-accordion-panel .acc-body {
	display: none;
	padding: 1.2rem 1.1rem;
	font-size: 1rem;
	text-align: justify
}

.accordion-panel.article-accordion-panel.open .acc-head .icon svg {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg)
}

.Organizational-sec-1 .main-title {
	font-weight: 700;
	font-size: 1.42rem;
	text-align: center
}

.Organizational-sec-1 .head {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 8rem;
	margin-top: 2.5rem;
	background-color: var(--accent-color);
	background-image: url(/portals/0/images/history/title-pattern.png);
	background-size: cover;
	background-repeat: repeat-x;
	background-position: right bottom;
	border-radius: .4rem
}

.Organizational-sec-1 .head img {
	transform: translateY(-2rem)
}

.Organizational-sec-1 .content {
	margin: 4rem 0;
	padding: 0 5rem
}

.Organizational-sec-1 .content .text-box {
	height: 100%;
	width: 368px;
	max-width: 100%;
	padding: 2rem 0;
	margin: auto;
	text-align: center
}

.Organizational-sec-1 .content .text-box .subtitle,
.Organizational-sec-1 .content .text-box .title {
	font-size: 1.4rem;
	margin-bottom: 1.8rem
}

.Organizational-sec-1 .content .text-box .btn-holder .btn {
	padding: .8rem 1.5rem;
	border-radius: .4rem;
	background: var(--accent-color)
}

.Get-Menu-Sec .btn-holder .btn svg,
.Organizational-sec-1 .content .text-box .btn-holder .btn svg {
	width: 1.2rem;
	height: 1.2rem;
	stroke: var(--White)
}

.Get-Menu-Sec .btn-holder .btn span,
.Organizational-sec-1 .content .text-box .btn-holder .btn span {
	font-size: .9rem;
	color: var(--White)
}

.Organizational-sec-1 .content .img-box img {
	width: 100%;
	border-radius: .4rem
}

.Organizational-sec-2 .main-title {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	text-align: center;
	font-weight: 400
}

.Organizational-sec-2 .item {
	display: block;
	margin-bottom: 2rem;
	cursor: pointer
}

.Organizational-sec-2 .item .img-box {
	margin-bottom: 1rem
}

.Organizational-sec-2 .item .title {
	font-size: .9rem;
	margin: 0;
	text-align: center
}

.custom-modal {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .85);
	z-index: 10000
}

.custom-modal .holder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.custom-modal .holder .msg-box {
	background-color: var(--White);
	border-radius: .57rem;
	-webkit-border-radius: 0.57rem;
	-moz-border-radius: .57rem;
	-ms-border-radius: 0.57rem;
	-o-border-radius: .57rem;
	padding: 2rem
}

.custom-modal .support-info>span {
	font-size: 1.27rem
}

.custom-modal .support-info .item {
	display: flex;
	align-items: start;
	gap: .57rem
}

.custom-modal .support-info .item svg {
	stroke: var(--accent-color);
	width: 1.5rem;
	height: 1.5rem
}

.custom-modal .support-info .item .content {
	width: 10rem;
	max-width: 100%;
	cursor: default
}

.Get-Menu-Sec {
	width: 70rem;
	max-width: 100%;
	margin: 3rem auto;
	padding: 1.5rem;
	border: solid 1px var(--lightGray);
	border-radius: .4rem
}

.Get-Menu-Sec .head {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 14.85rem;
	background-color: var(--accent-color);
	border-radius: .4rem;
	padding: 2rem 1rem;
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--White);
	text-align: center
}

.Get-Menu-Sec .title {
	font-size: 1.3rem;
	margin: 2rem 0
}

.Get-Menu-Sec .desc {
	font-size: .9rem;
	margin-bottom: 2rem
}

.Get-Menu-Sec .btn-holder .btn {
	padding: .8rem 1.5rem;
	border-radius: .4rem;
	background: var(--accent-color2)
}

.splash-page {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: start;
	justify-content: center;
	background: var(--accent-color)
}

.splash-page .item {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%
}

.splash-page .item:nth-child(2n):before {
	content: "";
	position: absolute;
	top: 10%;
	bottom: 10%;
	right: 100%;
	width: 1px;
	background: linear-gradient(transparent, #fff, transparent);
	z-index: 1
}

.splash-page .item .img-box {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: .3s
}

.splash-page .item .img-box:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--accent-color);
	mix-blend-mode: multiply;
	opacity: .8
}

.splash-page .item .title {
	position: relative;
	font-size: 2rem;
	color: var(--White);
	text-align: center;
	line-height: 3.5rem
}

@media (max-width:760px) {
	.accordion-panel.article-accordion-panel .acc-head .title {
		font-size: 1rem
	}

	.Organizational-sec-1 .content {
		padding: 0
	}

	.splash-page {
		flex-direction: column
	}

	.splash-page .item:nth-child(2n):before {
		content: "";
		position: absolute;
		top: auto;
		left: 10%;
		width: 80%;
		height: 1px;
		background: linear-gradient(transparent, #fff, transparent);
		opacity: .8;
		right: 10%;
		bottom: 0
	}

	.splash-page .item .img-box {
		opacity: .5
	}

	.splash-page .item .title {
		font-size: 1.5rem
	}
}

.bordered-title.red-line:before,
.history-fixed-link {
	background-color: var(--accent-color)
}

.switch-view-products {
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 1rem
}

.switch-view-products .item svg {
	display: block;
	width: 1.3rem;
	height: 1.3rem;
	stroke: #484848
}

.switch-view-products .item.active svg,
.switch-view-products .item:hover svg {
	stroke: var(--accent-color)
}

.box-frame {
	padding: 3.2rem;
	border: 1px solid #dfdfdf;
	border-radius: .4rem;
	margin-bottom: 1.5rem
}

@media (max-width:960px) {
	.box-frame {
		padding: 2.2rem 1.2rem
	}
}

.bordered-title {
	position: relative;
	display: flex;
	align-items: start;
	justify-content: start;
	margin-bottom: 1.5rem
}

.bordered-title:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 2px;
	background-color: #d7d7d7
}

.bordered-title .title,
.title-icon-box .title {
	position: relative;
	color: #666;
	font-size: 1.2rem;
	padding-left: 1rem;
	background: #fff;
	display: flex
}

.bordered-title .title {
	align-items: center;
	justify-content: space-between;
	font-weight: 400
}

.bordered-title .title svg,
.title-icon-box .title svg {
	display: block;
	width: 1.4rem;
	fill: var(--accent-color);
	margin-left: 1rem
}

.title-icon-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	margin-bottom: 1rem
}

.title-icon-box .title {
	align-items: center;
	justify-content: space-between
}

.half-width {
	width: 50%
}

.history-fixed-link {
	display: none !important;
	position: fixed;
	right: .5rem;
	bottom: .3rem;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border-radius: 2rem;
	padding: .5rem;
	z-index: 1
}

.panel-loading,
.panel-loading:after {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.history-fixed-link img {
	width: 2.2rem
}

.history-fixed-link .title {
	font-size: .8rem;
	color: var(--White)
}

.about-video video {
	border-radius: .4rem;
	-webkit-border-radius: 0.4rem;
	-moz-border-radius: .4rem;
	-ms-border-radius: 0.4rem;
	-o-border-radius: .4rem
}

.panel-loading {
	display: none;
	background: #fff;
	z-index: 1000000
}

.panel-loading:after {
	content: "";
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("/Portals/0/images/logo-circle.svg") center center/21rem no-repeat;
	z-index: 10000;
	color: #fff;
	font-size: 2rem;
	animation: 1s infinite logoSpin;
	-webkit-animation: 1s infinite logoSpin;
	transform: rotateY(0);
	-webkit-transform: rotateY(0);
	-moz-transform: rotateY(0);
	-ms-transform: rotateY(0);
	-o-transform: rotateY(0)
}

@keyframes logoSpin {
	from {
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-o-transform: rotateY(180deg)
	}

	to {
		transform: rotateY(0);
		-webkit-transform: rotateY(0);
		-moz-transform: rotateY(0);
		-ms-transform: rotateY(0);
		-o-transform: rotateY(0)
	}
}

h2.dnnFormSectionHead {
	font-size: 1.2rem !important;
	color: #000 !important;
}

h2.dnnFormSectionHead>a {
	font-size: 1.2rem !important;
	color: #000 !important;
}

.shipping-address-wrapper .bordered-title:before {
	display: none;
}

/*************** view profile ***************/
.ProfilePhoto {
	border-radius: 50%;
	width: 5.7rem;
	height: 5.7rem;
}

#UserProfile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--secondary-subtle);
	padding: 1rem 2rem;
	border-radius: 10rem;
}

.sidebar-menu .gomenu>ul>li>a::before {
	display: none !important;
}

.sidebar-menu .gomenu>ul>li.current>a {
	background-color: var(--text-light-3) !important;
	color: var(--secondary-main-color) !important;
	box-shadow: none !important;
	border-radius: var(--radius-12) !important;
	margin: 0 0.5rem;
}

.sidebar_sticky {
	width: 100% !important;
}

.activities .activity-item {
	padding: 1.4rem 0;
	color: var(--primary-subtle);
}

.activities .activity-item .qnty {
	opacity: 30%;
	background-color: rgb(196, 158, 49, 40%);
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
}

.activities .activity-header {
	border-bottom: 1px solid var(--secondary-subtle);
	padding: 0.85rem 0.57rem;
	display: block;
	color: var(--secondary-subtle);
}

.group-head {
	color: var(--text-light-4);
	border-bottom: 1px solid var(--secondary-subtle);
	padding-bottom: 1rem;
}

#column-435708 #dnn_TopPane {
	margin-bottom: 0;
}

#row-575102 .dng-column {
	padding: 0;
}

.outer-glass-btn {
	position: fixed;
	bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25rem;
	max-width: 100%;
	color: var(--primary-subtle);
	background-color: rgba(71, 71, 71, 0.4);
	cursor: pointer;
	border-radius: 3.5rem;
	padding: 0.57rem;

}

.outer-glass-btn .inner-glass-btn {
	border-radius: 3.5rem;
	background-color: rgb(217, 217, 217, 20%);
	width: 100%;
	text-align: center;
	padding: 0.5rem 0;
	width: 22.6rem;
	color: var(--primary-subtle);
	text-shadow: 0 2px 2px rgba(0, 0, 0, 1);
}



.dngTextBox .gohome {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--primary-main-color);
	border-radius: 50%;
	width: 2.8rem;
	aspect-ratio: 1;
	background-color: rgb(217, 217, 217, 20%);
}

.dngTextBox .gohome svg {
	stroke: var(--primary-main-color);
	fill: none;

}

/* 
.header-container-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;

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

	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50px;

	
     * Frost: 2
     
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);

	
     * Depth: 68
     
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.68),
		inset 0 -1px 0 rgba(255, 255, 255, 0.12),
		0 10px 30px rgba(0, 0, 0, 0.08);

	
     * Light: 100deg / 5%
     
	background-image:
		linear-gradient(100deg,
			rgba(255, 255, 255, 0.05),
			rgba(255, 255, 255, 0));
}



 * Splay: 100
 
.header-container-box::before {
	content: "";
	position: absolute;

	inset: -100px;

	pointer-events: none;

	background:
		radial-gradient(ellipse at 0% 50%,
			rgba(255, 255, 255, 0.12),
			transparent 45%),
		radial-gradient(ellipse at 100% 50%,
			rgba(255, 255, 255, 0.08),
			transparent 45%);

	filter: blur(20px);

	opacity: 1;

	z-index: -1;
}



 * Dispersion: 38
 
.header-container-box::after {
	content: "";
	position: absolute;

	inset: -30%;

	pointer-events: none;

	background:
		linear-gradient(100deg,
			transparent 20%,

			rgba(255, 80, 80, 0.038) 40%,

			rgba(255, 255, 255, 0.05) 50%,

			rgba(80, 160, 255, 0.038) 60%,

			transparent 80%);

	filter: blur(8px);

	mix-blend-mode: screen;

	opacity: 1;

	z-index: 2;
} */
.header-content-wrap {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}

.Login .userProperties ul.userMenu {
	left: -6rem !important;
}

.header-content-wrap .nav-bar {
	display: none;
	background-image: url(/portals/0/images/menueback.png);
	padding-top: 8rem;
	position: fixed;
	visibility: hidden;
	transform: translateY(200%);
	transition: transform 0.6s ease, visibility 0s linear 0.6s;
	z-index: 2;
	width: 28rem !important;
	max-width: 100%;
	left: 38%;


}

.header-content-wrap .nav-bar.active {
	transform: translateY(100%);
	visibility: visible;
	transition: transform 0.6s ease, visibility 0s;
	left: 38%;
}

.header-content-wrap .nav-bar .primary_structure {
	flex-direction: column;
	align-items: start;
	padding: 5rem 2rem 1rem;
}

.header-content-wrap .nav-bar .primary_structure li {
	width: 100%;
	text-align: right;
	background-color: rgb(232, 195, 128, 20%);
	border-radius: var(--radius-150);
	padding: 0.57rem;
	margin-bottom: 1rem;
}

.dng-megamenu.hoverstyle_1 .primary_structure>li>a:before {
	display: none;
}

.show-menu {
	padding: 0 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--primary-main-color);
	border-radius: 50%;
	width: 2.8rem;
	aspect-ratio: 1;
	background-color: rgb(217, 217, 217, 20%);
}

.btnshadow-wrapper {

	position: static;
}


#dnn_content {
	min-height: 100vh;
}

/******************* contact-us *****************/
.contact-us {
	position: relative;
	overflow-y: auto;
	color: var(--primary-subtle);
	margin: 2.5rem 0;
}

.contact-us::-webkit-scrollbar {
	display: none;
}

.contact-us .bg-box {
	position: sticky;
	top: 0;
	width: 100%;
	height: 34rem;
	z-index: 3;
	margin-top: 7rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(74, 5, 5, 1) 65%);

}

.contact-us .bg-box img {
	width: 100%;
	object-fit: cover;
}

.contact-us .text-box {
	position: absolute;
	bottom: 21rem;
	left: 0;
	width: 100%;
	z-index: 2;

	clip-path: inset(100% 0 0 0);
	transition: clip-path 1s ease;
}

.contact-us .text-box.active {
	clip-path: inset(0 0 0 0);
}

.contact-us .circle-box {
	position: absolute;
	bottom: -1rem;
	left: 1rem;
	width: 100%;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity .8s ease,
		visibility .8s ease;
}

.contact-us .circle-box.active {
	opacity: 1;
	visibility: visible;
}

.contact-text .contact-btn {
	background-color: rgb(29, 29, 29, 20%);
	border-radius: var(--radius-150);
	padding: 0.57rem 1.14rem;
	box-shadow: var(--drop-shadow);
	color: var(--primary-main-color);
	display: flex;
	align-items: center;
	gap: 2rem;


}

.contact-text strong {
	margin-bottom: 2rem;
}

.contact-text .contact-btn svg {
	stroke: var(--primary-main-color);
	width: 1.28rem;
	height: 1.28rem;
}

.monalisa-wrapper {
	position: relative;
}

.monalisa-wrapper .frame {
	position: relative;
	z-index: 2;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.monalisa-wrapper .mona-video-box {
	position: absolute;
	top: 5.5rem;
	left: 3.5rem;
	z-index: 1;
}

/* .dnnForm.FeedbackForm .Feedback_Field .NormalTextBox {
	background: none !important;
    color: var(--primary-subtle) !;
    border: none !important;
    border-bottom: 1px solid rgb(111, 111, 111, 50%) !important;

} */
.map-wrapper {

	position: relative;
}

.map-wrapper::after {
	content: '';
	background: linear-gradient(180deg, rgba(74, 5, 5, 1) 0%, rgba(255, 255, 255, 0) 46%, rgba(74, 5, 5, 1) 100%);
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map-wrapper .map-box {
	position: relative;
	z-index: 1;
	mix-blend-mode: plus-lighter;
	margin-top: 5rem;
}

.map-wrapper .location-box {
	position: absolute;
	z-index: 2;
	top: -3rem;

}

.phones {
	position: relative;
	top: -3rem;
	z-index: 4;

}

.phones strong {
	color: var(--text-light-4);
}

.phones .phone-item {
	width: 16rem;
	max-width: 100%;
	color: var(--primary-subtle);
	background-color: rgb(196, 158, 49, 20%);
	border-radius: var(--radius-150);
	padding: 0.2rem 0.87rem;
	justify-content: center;
	font-size: 15px;
}

.phones .phone-item svg {
	stroke: var(--primary-subtle);
	width: 1.2rem;
	height: 1.2rem;
}

/*************** home ******************/

.home-intro {
	position: relative;
	z-index: 101;

}


.home-intro .top-section {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(0);
	transition: transform 2s ease, visibility 0s linear 1s;
	visibility: visible;
	z-index: 2;
	height: 68.5rem;
}

.home-intro .top-section.deactive {
	visibility: hidden;
	transform: translateY(-200%);


}

.home-intro .bottom-section {
	position: absolute;
	top: 32rem;
	right: 0;
	transform: translateY(0);
	transition: transform 2s ease, visibility 0s linear 1s;
	visibility: visible;
	z-index: 1;
	height: 36.2rem;
}

.home-intro .bottom-section.deactive {
	visibility: hidden;
	transform: translateY(200%);


}

.home-intro .content-section {
	position: absolute;
	top: 40rem;
	width: 7rem;
	aspect-ratio: 1;
	right: calc(50% - 3.5rem);
	mix-blend-mode: darken; /* QC: the paisley PNG has white edges; darken drops them on the cream paper */
	z-index: 3;
	transition: opacity 2s ease, visibility 0s linear 1s;
	opacity: 1;
}

.home-intro .logo-section {
	position: absolute;
	top: 28rem;
	width: 10rem;
	aspect-ratio: 1;
	right: calc(50% - 5rem); /* QC: the seal sits exactly in the centre */
	cursor: pointer;
	z-index: 2;
	opacity: 1;
	transition: opacity 2s ease, visibility 0s linear 1s;
}

.home-intro .logo-section.deactive,
.home-intro .content-section.deactive {
	visibility: hidden;
	opacity: 0;

}

.home-intro .top-section img,
.home-intro .bottom-section img {
	object-fit: fill;
	height: 100%;
}

.home-intro-video {
	height: 100vh;

}

.home-intro-video img {
	height: 100%;
}

.countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px; /* Figma "Clock": 04 : 25 : 55 : 10 */
	direction: ltr;
}

.countdown-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.countdown-item span {
	font-family: 'Dancing Script', cursive; /* Latin digits like the design (the site font draws Persian digits) */
	font-size: 60px;
	font-weight: 700;
	line-height: 1.2;
	color: #000;
}
.countdown-item span.color-red { color: #ff0905; }

.countdown-item small {
	font-size: 14px;
}

.countdown .separator {
	font-family: 'Dancing Script', cursive;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.2;
	color: #000;
	margin: 0;
}

.pandol-wrapper {
	position: relative;
	height: 20rem;
	max-height: 100%;
}

.top-frame {
	position: absolute;
	top: -2rem;
}

.pandol-action {
	position: absolute;
	top: 0;
	left: 50%;
	transform-origin: 50% 0;
	animation: pandol-swing 4s linear infinite;
	width: 100%;
}

@keyframes pandol-swing {
	0% {
		transform: translateX(-50%) rotate(-7deg);
	}

	50% {
		transform: translateX(-50%) rotate(7deg);
	}

	100% {
		transform: translateX(-50%) rotate(-7deg);
	}
}

.delivery {
	background-image: url(/Portals/0/images/countdownPaper.png);
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 5.8rem 0 5.6rem;
	margin: 2rem 0;
	font-family: 'Pinar-DS1-FD', IranSite, sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 24px;
	color: #1d1d1d;
}
.delivery .color-red { color: #ff0905; }

.candles {
	position: relative;
}

.candles::after {
	content: '';
	position: absolute;
	left: 3rem;
	top: 4rem;
	background-image: url(/Portals/0/images/light.png);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 2;
	width: 7rem;
	aspect-ratio: 1;
	animation: 4s infinite;
	transform-origin: center bottom;
	animation: candleGlow 3s infinite;

}

.candles::before {
	content: '';
	position: absolute;
	right: 3rem;
	top: 4rem;
	background-image: url(/Portals/0/images/light.png);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 2;
	width: 7rem;
	aspect-ratio: 1;
	animation: 4s infinite;
	transform-origin: center bottom;
	animation: candleGlow 3s infinite;

}

@keyframes candleGlow {

	0%,
	100% {
		opacity: .7;
		transform: scale(1);
	}

	15% {
		opacity: .95;
		transform: scale(1.06);
	}

	32% {
		opacity: .75;
		transform: scale(.97);
	}

	48% {
		opacity: 1;
		transform: scale(1.1);
	}

	63% {
		opacity: .65;
		transform: scale(.94);
	}

	78% {
		opacity: .9;
		transform: scale(1.04);
	}

	90% {
		opacity: .72;
		transform: scale(.98);
	}
}

.family-photo {
	position: relative;
}

.family-photo::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: linear-gradient(180deg, rgba(74, 5, 5, 1) 0%, rgba(255, 255, 255, 0) 51%, rgba(74, 5, 5, 1) 84%);
}

.family-photo .left-hand {
	position: relative;
	text-align: left;
	z-index: 4;
}

.family-photo .cloud {
	position: absolute;
	top: 0;
	height: 100%;
	mix-blend-mode: screen;
	z-index: 1;
	background: rgb(191, 107, 28, 20%);
	width: 100%;
}
.family-photo .cloud img{
	width: 100%;
}
.family-photo .right-hand {
	position: relative;
	z-index: 3;
}

.family-photo .send-btn {
	position: relative;
	bottom: 2rem;
	z-index: 3;
	right: 2.5rem;
	isolation: isolate;
	box-shadow: inset 0 9 15px rgb(217, 217, 217, 50%);
}

.family-photo .send-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(180deg,
			rgba(255, 235, 201, 0) 0%,
			rgba(217, 217, 217, 0.05) 50%,
			rgba(255, 235, 201, 0.05) 60%,
			rgba(255, 235, 201, 0) 100%);
	-webkit-mask:
		linear-gradient(#ffffff 0 0) content-box,
		linear-gradient(#ffffff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	filter: drop-shadow(0 0 3px rgba(255, 210, 210, .18));
	pointer-events: none;
}

.table-video {
	position: relative;
}

.table-video .table-video-box {
	position: absolute;
	top: 7rem;
	left: 4rem;
	z-index: 1;
	max-width: 100%;
	width: 22rem;
    aspect-ratio: 1 / 1.5;
}
.table-video .table-video-box img{
	position: relative;
    width: 100%;
    z-index: 2;

}

.table-video .frame {
	position: relative;
	z-index: 2;
}
.table-video .frame img{
	width: 100%;
}

.teaching-video {
	margin-bottom: 3rem;
}
.teaching-video img{
	width: 100%;
}
.different-style .style-box img{
	width: 100%;
}
.different-style .style-btn {
	position: relative;
	margin-top: 1rem;
	right: 2.5rem;
}
.window-video img{
	width: 100%;
}
.collaboration {
	position: relative;
}

.collaboration .collab-video-box {
	position: absolute;
    top: 9rem;
    right: 6rem;
    z-index: 1;
    width: 18rem;
    aspect-ratio: 1 / 1.65;
}
.collaboration .collab-video-box img{
	width: 100%;
}
.collaboration .outer-glass-btn.style-btn {

	position: relative;
	right: 2.5rem;
	margin-top: 1rem;
}
.collaboration .frame-box{
	position: relative;
    z-index: 2;

}
.collaboration .frame-box img{
	width: 100%;
}

.window-video .gallery-btn {
	position: relative;
	right: 2.5rem;
	margin-top: 2rem;
}

/************* STORE **************/
.shop-intro-video img{
	width: 100%;
	height: auto;
}
.smart-summary {
	color: var(--text-light-4);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border: 1px solid var(--text-dark-5);
	padding: 0.57rem;
	border-radius: var(--radius-6);
	margin: 1rem;
}

.smart-summary span {
	text-align: justify;
}

.store-title {
	display: block;
	text-align: center;
	margin-top: 3rem;
	color: var(--text-light-4);
}

/* the glass look now lives on the Figma nav bar itself (.glass-content .header-content-wrap); no filter here:
   a backdrop-filter on this wrapper made it the containing block of the fixed menu panel (.nav-bar) */
.header-container-box {
	margin-top: 1rem;
}

.glass-border {
	background: #520000;

}

.outer-glass-btn .inner-glass-btn,
.glass-border {
	position: relative;

	border-radius: 150px;
	isolation: isolate;
}

.outer-glass-btn .inner-glass-btn::before,
.glass-border::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(177deg, rgba(255, 235, 201, 0.8) 0%,
			rgba(255, 235, 201, 0) 40%,
			rgba(43, 4, 4, 0.5) 60%,
			rgba(255, 235, 201, 0.8) 70%,
			rgba(255, 235, 201, 1) 100%);
	-webkit-mask:
		linear-gradient(#ffffff 0 0) content-box,
		linear-gradient(#ffffff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	filter: drop-shadow(0 0 3px rgba(255, 210, 210, .18));
	pointer-events: none;
}

.page-breadcrumbs .Boxed {
	background-color: var(--dark-red);
}

.page-breadcrumbs .Boxed a {
	color: var(--primary-subtle) !important;
}

.breadcrumbs .breadcrumbs-box {

	margin-top: 7rem;
}

#dnn_BannerPane {
	background-color: var(--dark-red);
}
/******************* Figma fonts (Pinar DS1-FD = Persian text, Dancing Script = countdown digits) *****************/
@font-face { font-family: 'Pinar-DS1-FD'; font-weight: 300; font-display: swap; src: url('../fonts/Pinar-DS1-FD-Light.woff2') format('woff2'); }
@font-face { font-family: 'Pinar-DS1-FD'; font-weight: 400; font-display: swap; src: url('../fonts/Pinar-DS1-FD-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Pinar-DS1-FD'; font-weight: 500; font-display: swap; src: url('../fonts/Pinar-DS1-FD-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Pinar-DS1-FD'; font-weight: 700; font-display: swap; src: url('../fonts/Pinar-DS1-FD-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Pinar-DS1-FD'; font-weight: 600; font-display: swap; src: url('../fonts/Pinar-DS1-FD-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Pinar-DS1-FD'; font-weight: 900; font-display: swap; src: url('../fonts/Pinar-DS1-FD-Black.woff2') format('woff2'); }
@font-face { font-family: 'Dancing Script'; font-weight: 700; font-display: swap; src: url('../fonts/DancingScript-Bold.woff2') format('woff2'); }

/******************* top nav bar (Figma "Menu"): glass bar = [page pill][home][cart][user][menu] *****************/
.glass-content .header-content-wrap {
	justify-content: flex-start;
	gap: 17px; /* Figma: ~17.7px between the 39.7px icons (17 keeps the home row inside the 358px inner width) */
	height: 59px;
	padding-block: 0;
	padding-inline: 28px 10px; /* Figma: pill ends 28px from the right edge; the menu circle keeps 10px from the left rim */
	border: 1px solid #7c7b77;
	border-radius: 50px;
	background: rgba(71, 71, 71, 0.2);
	position: relative;
	isolation: isolate;
}
/* the frosted blur lives on a pseudo layer: backdrop-filter on the bar itself would become the containing
   block of the fixed menu panel (.nav-bar) and trap it inside the 59px bar */
.glass-content .header-content-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	/* Figma liquid glass: lens refraction (SVG #arj-glass in the header text box; Chromium) + frost; Safari gets the frost */
	-webkit-backdrop-filter: blur(10px) saturate(1.6) brightness(1.12);
	backdrop-filter: blur(1.5px) url(#arj-glass) saturate(1.5) brightness(1.12);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.12),
		inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.45),
		inset 0 0 14px rgba(255, 255, 255, 0.18),
		0 8px 28px rgba(0, 0, 0, 0.22);
	z-index: -1;
	pointer-events: none;
}
.glass-content .header-content-wrap > * { flex: 0 0 auto; margin: 0; }
/* DNNGo header CSS spaces every header item with a 15px side margin; the bar uses its own gap */
header .header-area.glass-content .header-content-wrap > * { margin-left: 0; margin-right: 0; }

/* zero-width helpers (categories nav of the mobile menu) must not take a flex gap */
.glass-content .header-content-wrap > .ecommerceNav { position: absolute; width: 0; overflow: visible; }
/* the active page name: first item = right edge (RTL); the icons sit together on the left */
.glass-content .page-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 152px; /* home page: pill + 3 icons */
	height: 38.4px;
	padding: 0 1rem;
	border: 1px solid rgba(138, 103, 56, 0.55);
	border-radius: 50px;
	background: rgba(217, 217, 217, 0.2);
	box-shadow: 0 0 9px rgba(138, 103, 56, 0.55);
}
.glass-content .page-pill span {
	direction: ltr;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 24px;
	/* 12px for short words (HOME, SHOP, CONTACT); longer ones (DASHBOARD) get less so the pill keeps the 3 icons inside the bar.
	   --n = the letter count, set by the header layout */
	--ls: clamp(4px, calc(158px / var(--n, 7) - 10px), 12px);
	letter-spacing: var(--ls);
	margin-right: calc(-1 * var(--ls)); /* letter-spacing adds a gap after the last letter */
	color: #d9d9e2;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	white-space: nowrap;
}

/* circle icons: 39.7 x 38.4, gold border, light glass fill */
.glass-content .gohome,
.glass-content .show-menu,
.glass-content .mobile-menu-icon {
	width: 2.84rem;
	height: 2.74rem;
	border: 1px solid var(--primary-main-color);
	border-radius: 50%;
	background-color: rgba(217, 217, 217, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* mobile header: same bar, floating over the page like the design (no white strip) */
.mobile-header .header-mobile-bg { background: transparent !important; box-shadow: none !important; padding: 20px 14px 0 !important; }
.mobile-header .header-mobile, .mobile-header .header-area, .mobile-header .glass-content > .header-content-wrap { margin: 0; }
.mobile-header .header-mobile, .mobile-header .header-area { padding: 0 !important; }
.mobile-header .header-mobile-bg { padding: 20px 15px 0 !important; }
.mobile-header .glass-content { width: 100%; max-width: 100%; flex: 1 1 100%; }
.mobile-header .glass-content .mobile-menu-icon { position: static; margin: 0; transform: none; }
.mobile-header-replace { height: 0 !important; }
.mobile-header .mobile-menu-icon .dg-menu-anime i,
.mobile-header .mobile-menu-icon .dg-menu-anime::before,
.mobile-header .mobile-menu-icon .dg-menu-anime::after { background-color: var(--primary-subtle); }
/* DNN Persona Bar (80px admin sidebar on the right) pushes the page with body{margin-right:80px};
   the fixed headers span the viewport, so give them the same offset to stay centred over the site column */
body.personabar-visible header.header-wrap,
body.personabar-visible header.mobile-header { left: 0; right: 80px; width: auto; }

/******************* footer (Figma "Footer", 360px wide, Pinar DS1-FD) *****************/
footer.footer .footer-content { padding-inline: 15px; }
footer.footer .footer-content .dng-column { padding-left: 0 !important; padding-right: 0 !important; }
footer.footer .about-arjang,
footer.footer .contact-us,
footer.footer .license,
footer.footer .socials,
footer.footer .iransite { font-family: 'Pinar-DS1-FD', IranSite, sans-serif; color: var(--primary-subtle); }
/* headings: Bold 17/32 */
footer.footer .about-arjang strong, footer.footer .about-arjang .arj-foot-h1,
footer.footer .contact-us strong,
footer.footer .license strong,
footer.footer .socials strong { font-weight: 700; font-size: 17px; line-height: 32px; }
/* about text: Regular 15/30, justified, full width */
footer.footer .about-arjang .desc { padding: 0 !important; margin-top: 0.6rem !important; font-size: 15px; line-height: 30px; text-align: justify; }
/* contact rows: Regular 14/28, label on the right, value on the left */
footer.footer .contact-us { margin: 3rem 0 2.5rem; overflow: visible; }
footer.footer .contact-us .item { gap: 0 !important; }
footer.footer .contact-us .item span { font-size: 14px; line-height: 28px; }
footer.footer .contact-us .contact-phones { display: flex !important; justify-content: flex-start; gap: 2.6rem; }
/* licenses: SEP right, Enamad left, white 8px cards */
footer.footer .license { margin-top: 1rem; }
footer.footer .license .img-box { border-radius: 8px; }
/* social icons: 30px gold */
footer.footer .socials { margin-top: 1.5rem; }
footer.footer .social-item { width: 30px; height: 30px; }

/******************* home page vertical rhythm (Figma Home-Page, 390 wide) *****************/
/* the gold divider + hanging frame overlap the bottom of the hero by 57px (Figma: hero 844, divider at 787) */
.pandol-wrapper { margin-top: -57px; height: 298px; z-index: 2; }
/* countdown paper: 322px, text 81px from the top, clock 120px line */
.delivery { margin: 48px 0 0; padding: 81px 0 85px; gap: 12px; min-height: 322px; box-sizing: border-box; }
.countdown-item span, .countdown .separator { line-height: 120px; }
/* section tops = Figma: candles 1505, designs 1774 (overlaps the candles), send-design 2262, blog 2971,
   style 3589, artists 4222, fabrics 4933, project 5503, gallery 6119, footer 6848 */
.candles-wrapper { margin-top: 50px; }
.home-slider-section { margin-top: -30px; } /* Figma: designs start 30px above the end of the 299px sconce */
.family-photo { margin-top: 48px; }
.teaching-video { margin-top: 48px; margin-bottom: 0; }
body .DnnModule .different-style { margin-top: 10px; }
body .DnnModule .collaboration { margin-top: 41px; }
body .DnnModule .pattern-section { margin-top: 33px; }
body .DnnModule .table-video { margin-top: 15px; }
body .DnnModule .window-video { margin-top: 21px; }
body .DnnModule .window-video { margin-bottom: 122px; } /* gap before the footer stays maroon */
/* these two sections are <a> links: block so their vertical margins apply */
body .DnnModule .different-style, body .DnnModule .collaboration { display: block; }

/******************* home media (in-view lazy videos, see resource/js/custom.js) *****************/
.home-intro-video { height: 100vh; height: 100svh; overflow: hidden; }
.home-intro-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
body .DnnModule .teaching-video { display: block; }
.teaching-video video,
.different-style .style-box video,
.window-video .window-video-box video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 520; object-fit: cover; }
.window-video .window-video-box { display: block; }
/* QC S9: the portfolio frame shows the Figma cover (30519:2372) first; it fades into the video once that plays */
.table-video .table-video-box .media-cover { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; transition: opacity 1.2s ease; pointer-events: none; }
.table-video .table-video-box.is-playing .media-cover { opacity: 0; }
/* QC S6 (Figma "Rectangle 929" 30489:15598): each full-width video melts into the section colour above and below
   it, so the slightly different background of every clip and the hard line between sections are not visible */
/* feedback 1405-08-04: only the video sections melt; the fabrics section («یک پارچه بی‌نهایت») has no top / bottom fade */
.window-video .window-video-box video {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 90px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 90px), transparent 100%);
}
.collaboration .collab-video-box video,
.table-video .table-video-box video { display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }

/******************* pendulum: centred hook, swings only while on screen (Figma comment: medium speed) *****************/
.top-frame { left: 0; right: 0; }
.top-frame img { display: block; width: 100%; position: relative; z-index: 1; }
/* QC S1 = Figma "جداکننده ویدئو" (30963:2544): Vector 856 (maroon) lies under the gold motif — 25.5px below the motif top
   in the 390px frame — and is clipped to the frame like in Figma (images/home/sep-figma.svg = the vector seen through the
   391px frame), so nothing reaches outside the column. It is a layer of the wrapper under the chain and the motif. */
.pandol-wrapper::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; margin-top: 6.54%; aspect-ratio: 391 / 60.58; background: url(/Portals/0/images/home/sep-figma.svg) no-repeat 0 0 / 100% 100%; pointer-events: none; }
.pandol-wrapper .pandol-action { z-index: 1; }
.pandol-action { animation: pandol-swing 3s ease-in-out infinite; animation-play-state: paused; }
.pandol-wrapper.is-swinging .pandol-action { animation-play-state: running; }

/******************* candles: Figma "Divari" 294x299 centred, glow = Figma "نور" (158px, screen blend) on the flames *****************/
.candles { width: 294px; max-width: 100%; margin: 0 auto; }
.candles img { display: block; width: 100%; height: auto; }
.candles::before,
.candles::after {
	width: 158px;
	height: 158px;
	aspect-ratio: auto;
	top: 16px; /* Figma: glow centre 95px below the sconce top (158px glow) */
	right: auto;
	background: url(/Portals/0/images/candle-light.svg) no-repeat center / 100% 100%;
	mix-blend-mode: screen;
	transform-origin: center center;
}
.candles::after { left: -13px; } /* glow centre x=66 of 294 */
.candles::before { left: 145px; animation-delay: -1.3s; } /* glow centre x=224 of 294 */
/* QC S2: the original glow (candleGlow), only a little quicker than its 3s */
.candles::before,
.candles::after { animation-duration: 2.4s; }

/******************* designs slider: the title sits behind the moving frames *****************/
.home-slider-section .slider-title { z-index: 0 !important; }
.home-slider-section .home-slider { position: relative; z-index: 1; }
.home-slider-section .arj-frames { position: relative; z-index: 1; }

/******************* hamburger menu panel: exactly the site column, anchored to the bottom, slides up *****************/
.header-content-wrap .nav-bar,
.header-content-wrap .nav-bar.active {
	top: auto;
	bottom: 0;
	left: calc(50% - 210px);
	width: 420px !important;
	max-width: 100%;
	box-sizing: border-box;
}
.header-content-wrap .nav-bar { transform: translateY(100%); }
.header-content-wrap .nav-bar.active { transform: translateY(0); }
body.personabar-visible .header-content-wrap .nav-bar,
body.personabar-visible .header-content-wrap .nav-bar.active { left: calc(50% - 40px - 210px); }
@media (max-width: 440px) {
	.header-content-wrap .nav-bar,
	.header-content-wrap .nav-bar.active { left: 0; width: 100% !important; }
}
/* the open menu panel stays above the fixed shortcut widget */
.header-content-wrap .nav-bar.active { z-index: 1000; }

/******************* "طرح ارسال کنید" (Figma "Customiz Order", 390x661): hands placed like the design *****************/
body .DnnModule .family-photo { height: 661px; overflow: hidden; }
.family-photo::after { height: 442px; background: linear-gradient(180deg, #4a0505 0, rgba(90, 11, 5, 0) 90px, rgba(90, 11, 5, 0) 352px, #4a0505 442px); }
.family-photo .cloud { left: -60.77%; width: 160.77%; height: 442px; }
.family-photo .cloud img { height: 100%; object-fit: cover; }
.family-photo .right-hand { position: absolute; left: 45.9%; top: 99px; width: 55.9%; }
.family-photo .left-hand { position: absolute; left: 0; top: 230px; width: 56.92%; text-align: initial; }
.family-photo .right-hand img, .family-photo .left-hand img { display: block; width: 100%; height: auto; }
.family-photo .send-btn { position: absolute; top: 602px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
/* QC S4: when the visitor reaches the section the two hands slide in from the sides and the cloud drifts slowly
   to the right, then stops (it never leaves the frame). Leaving the section resets everything, so it replays. */
.family-photo .right-hand { transform: translateX(105%); opacity: 0; }
.family-photo .left-hand { transform: translateX(-105%); opacity: 0; }
.family-photo .cloud { transform: translateX(0); }
/* feedback 1405-08-04: the hands come in slower (was 1.4s) */
.family-photo.is-in-view .right-hand { transform: none; opacity: 1; transition: transform 2.8s cubic-bezier(.25,.6,.2,1), opacity 2s ease; }
.family-photo.is-in-view .left-hand { transform: none; opacity: 1; transition: transform 2.8s cubic-bezier(.25,.6,.2,1) .45s, opacity 2s ease .45s; }
.family-photo.is-in-view .cloud { transform: translateX(20%); transition: transform 14s cubic-bezier(.25,.55,.3,1); }
@media (prefers-reduced-motion: reduce) {
	.family-photo .right-hand, .family-photo .left-hand { transform: none; opacity: 1; }
	.family-photo.is-in-view .cloud { transform: none; }
}

/******************* "کلیک کنید آموزش بگیرید" (Figma "Blog-Amozesh"): section gradient + bottom strip, video edges fade into it *****************/
body .DnnModule .teaching-video { background: linear-gradient(180deg, #4a0505 0%, #400606 50.96%, #4a0505 100%); padding-top: 6px; }
body .DnnModule .teaching-video::after { content: ""; display: block; height: 93px; background: linear-gradient(180deg, rgba(74, 5, 5, 0), #4a0505); } /* QC S6: ends in the next section's colour, no seam */
.teaching-video video {
	width: 98.24%; margin: 0 auto;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-composite: intersect;
}

/******************* project mirror (Figma "Arjang-Project"): the video fills the inside of the frame and is masked to its
   shape; box and mask are percentages of the frame (392x587 in Figma) so they scale with the column width *****************/
.table-video .table-video-box {
	top: 14.11%; left: 12.76%; width: 74.6%; height: 71.84%; aspect-ratio: auto;
	-webkit-mask: url(/Portals/0/images/project-mask.png) no-repeat 0 0 / 100% 100%;
	mask: url(/Portals/0/images/project-mask.png) no-repeat 0 0 / 100% 100%;
}
/* pendulum divider: Figma motif starts at the wrapper top (57px over the hero video, 14px over the red) */
.top-frame { top: 0; }
/* footer text like Figma: lighter strokes; each paragraph is justified up to its forced line end, the last one ends naturally */
footer.footer .about-arjang .desc,
footer.footer .contact-us .item span { font-weight: 300; }
footer.footer .about-arjang .desc .seg { display: block; text-align: justify; text-align-last: right; /* justified block, last line of each sentence flush right (no stretched gaps) */ }
footer.footer .about-arjang .desc .seg:last-child { text-align-last: auto; }
/* style video: its own darker backdrop (#500002) must not show as a box — fade its edges into the section */
.different-style .style-box video {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-composite: intersect;
}
body .DnnModule .different-style { margin-top: 5px; }
/* footer vertical rhythm (Figma Footer: line 0, title 54, contact title 413, rows every ~66px, licences 680, social 849) */
footer.footer .footer-content { padding-top: 0; }
footer.footer .contact-us { margin: 1.4rem 0 1.6rem; }
footer.footer .contact-us > .d-flex { gap: 10px !important; }
footer.footer .contact-us .item { margin-bottom: 0; }
/* the search skin object has no box of its own in the bar (its panel is positioned against the bar), so it takes no flex gap */
header .header-area.glass-content .header-content-wrap > .ecommerceSearch { display: contents; }
/* clickable bar items show the hand cursor */
.glass-content .show-menu,
.glass-content .mobile-menu-icon,
.glass-content .gohome,
.glass-content .cartmenu,
.glass-content .Login { cursor: pointer; }

/******************* nav bar slots (Figma): [HOME pill | home icon] [shop icon | PAGE pill] [user] [menu], evenly 17.7px apart *****************/
.glass-content .header-content-wrap { justify-content: center; gap: 17.7px; padding-inline: 15px; }
.glass-content .dngTextBox:has(.page-pill),
.glass-content .dngTextBox:has(.goshop) { display: flex; align-items: center; gap: 17.7px; }
/* the cart skin object stays in the page for the add-to-cart scripts, but the Figma bar has no cart button */
header .header-area.glass-content .header-content-wrap > .cartmenu { display: none !important; }
.glass-content .goshop {
	display: flex; align-items: center; justify-content: center;
	width: 2.84rem; height: 2.74rem;
	border: 1px solid var(--primary-main-color); border-radius: 50%;
	background-color: rgba(217, 217, 217, 0.2);
	cursor: pointer;
}
.glass-content .goshop img { display: block; width: 19px; height: 19px; }
/* user icon in the Figma cream outline (the login skin object paints it gold) */
.glass-content .Login svg path, .glass-content .Login svg ellipse, .glass-content .Login svg circle { stroke: var(--primary-subtle); }

/* the desktop header (and its .nav-bar menu panel inside it) must stay above the page's floating widgets:
   eCommerce cart/wish capsule (z 9990) and the "+" fixed widget (z 999). Page sheets/zoom use 100000+. */
.header_bg.header-wrap { z-index: 10000; }

/******************* hamburger menu (Figma "Menu" 30489:15771): dark veil, torn paper, X, pill rows with gold icons *****************/
.header-content-wrap .nav-bar,
.header-content-wrap .nav-bar.active {
	padding: 124px 24px 32px 18px;
	background: url(../images/menu/paper.png) center top / 100% 65px no-repeat,
		linear-gradient(#EBDBBE, #EBDBBE) 0 64px / 100% calc(100% - 64px) no-repeat,
		linear-gradient(rgba(29, 29, 29, .85), rgba(29, 29, 29, .85)) 0 0 / 100% 65px no-repeat;
}
/* the rest of the screen goes dark while the menu is open */
.header-content-wrap .nav-bar.active { box-shadow: 0 0 0 200vmax rgba(29, 29, 29, .85); }
/* close X (Figma 28px, top left under the paper); a tap on the panel background closes it (custom.js) */
.header-content-wrap .nav-bar::after {
	content: "";
	position: absolute;
	top: 72px;
	left: 28px;
	width: 28px;
	height: 28px;
	background: url(../images/menu/close.svg) center / 100% 100% no-repeat;
	cursor: pointer;
}
.header-content-wrap .nav-bar .primary_structure { padding: 0; gap: 10px; }
.header-content-wrap .nav-bar .primary_structure li {
	margin: 0;
	padding: 0;
	min-height: 52px;
	display: flex;
	align-items: center;
	border-radius: 150px;
	background: rgba(232, 195, 128, .2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.header-content-wrap .nav-bar .primary_structure li > a {
	display: flex !important;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 8px 16px !important;
	color: #53565A !important;
	font-size: 15px;
	line-height: 30px;
}
.header-content-wrap .nav-bar .primary_structure li.current > a,
.header-content-wrap .nav-bar .primary_structure li > a:hover { color: #C49E31 !important; }
/* gold icon before each item (by page address) */
.header-content-wrap .nav-bar .primary_structure li > a::after {
	content: "";
	order: -1;
	flex: 0 0 24px;
	height: 24px;
	background: url(../images/menu/home.svg) center / 24px 24px no-repeat;
}
.header-content-wrap .nav-bar .primary_structure li > a[href*="/products"]::after { background-image: url(../images/menu/shop.svg); }
.header-content-wrap .nav-bar .primary_structure li > a[href*="/contact-us"]::after { background-image: url(../images/menu/contact.svg); }
.header-content-wrap .nav-bar .primary_structure li > a[href*="/collab-with-artists"]::after { background-image: url(../images/menu/collab.svg); }
.header-content-wrap .nav-bar .primary_structure li > a[href*="/custom-order"]::after { background-image: url(../images/menu/custom-order.svg); }
.header-content-wrap .nav-bar .primary_structure li > a[href*="/articles"]::after,
.header-content-wrap .nav-bar .primary_structure li > a[href*="/blog"]::after { background-image: url(../images/menu/articles.svg); }
.header-content-wrap .nav-bar .primary_structure li > a[href*="/projects"]::after { background-image: url(../images/menu/projects.svg); }
/* the hamburger: three CSS lines centred in the button that morph into an X while the menu is open
   (top/bottom rotate, the middle one fades); the button itself never moves */
header .glass-content .show-menu { position: relative; }
header .glass-content .show-menu > svg { visibility: hidden; }
header .glass-content .show-menu::before,
header .glass-content .show-menu::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	margin: -0.75px 0 0 -7px;
	border-radius: 2px;
	background: #FFEBC9;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
header .glass-content .show-menu::before { transform: translateY(-6px); }
header .glass-content .show-menu::after { transform: translateY(6px); }
header .glass-content .show-menu {
	background-image: linear-gradient(#FFEBC9, #FFEBC9);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 1.5px;
	transition: background-size .2s ease;
}
header:has(.nav-bar.active) .glass-content .show-menu { background-size: 0 1.5px; }
header:has(.nav-bar.active) .glass-content .show-menu::before { transform: rotate(45deg); }
header:has(.nav-bar.active) .glass-content .show-menu::after { transform: rotate(-45deg); }
/* the glass nav bar (with the X) stays bright above the dark veil */
header:has(.nav-bar.active) .header-area.glass-content { position: relative; z-index: 1001; }

/******************* pendulum like Figma "حداکننده + تابلو پاندول" (390x298): the chain comes out from UNDER the top motif
   and goes behind the frame's crest; frame 81px down; the swing pivots at the hook under the motif *****************/
.pandol-wrapper .top-frame { z-index: 2; }
.pandol-wrapper .pandol-action { top: 0; transform-origin: 50% 45px; justify-content: flex-start !important; }
.pandol-wrapper .pandol-action .chain { position: absolute; top: 40px; left: 50%; width: 10px; margin-left: -5px; z-index: 0; }
.pandol-wrapper .pandol-action .chain img { display: block; width: 10px; height: 62px; }
.pandol-wrapper .pandol-action .last-dinner { position: relative; z-index: 1; margin-top: 81px; }

/******************* contact page (Figma "Contac-Us" 30370:14664) *****************/
/* liquid glass (like the nav bar): frosted, a light rim and an inner highlight */
.arj-liquid {
	position: relative;
	isolation: isolate;
	border: 1px solid rgba(255, 235, 201, .45) !important;
	background: rgba(217, 217, 217, .16) !important;
	-webkit-backdrop-filter: blur(8px) saturate(1.6) brightness(1.1);
	backdrop-filter: blur(8px) saturate(1.6) brightness(1.1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 1.5px 1.5px 0 rgba(255, 255, 255, .35), inset 0 0 14px rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .28) !important;
	text-decoration: none !important;
	transition: border-color .2s, background .2s;
}
.arj-liquid:hover { border-color: #C49E31 !important; background: rgba(217, 217, 217, .24) !important; }
/* header: the painting with "CONTACT US"; the ring of text turns slowly behind the menu */
.arj-contact-hero { overflow: visible !important; overflow-x: clip !important; /* the ring may rise behind the header but never past the site column */ margin: 0 !important; padding-top: 40px; }
.arj-contact-hero .bg-box { position: relative !important; top: auto; height: auto !important; margin: 0 !important; z-index: 1; background: none !important; }
.arj-contact-hero .bg-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(74, 5, 5, 0) 55%, #4a0505 100%); }
.arj-contact-hero .bg-box img { display: block; width: 100%; height: auto; }
.arj-contact-hero .text-box { position: absolute !important; top: 88px; bottom: auto !important; left: 16px !important; width: calc(100% - 32px) !important; z-index: 3; clip-path: inset(0 0 0 0); visibility: visible !important; opacity: 1 !important; animation: arj-reveal 1.2s ease .3s both; }
@keyframes arj-reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.arj-contact-hero .text-box img { display: block; width: 100%; height: auto; }
.arj-contact-hero .arj-ring { position: absolute; z-index: 0; top: -160px; left: calc(50% - 86px); width: 608px !important; height: 608px !important; max-width: none !important; max-height: none !important; min-height: 0 !important; fill: initial; stroke: none; pointer-events: none; animation: arj-spin 60s linear infinite; }
.arj-contact-hero .arj-ring text { fill: #fff; stroke: none; font-family: "Pinar-DS1-FD", sans-serif; font-weight: 900; font-size: 30px; letter-spacing: 1px; }
@keyframes arj-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .arj-contact-hero .arj-ring, .arj-map-ring { animation: none !important; } }
.arj-contact-hero + .contact-text { position: relative; z-index: 4; margin-top: -10px; padding: 0 16px; text-align: center; }
.contact-text strong { margin-bottom: 1rem; font-size: 15px; line-height: 30px; }
.contact-text span { font-size: 15px; line-height: 30px; text-align: justify; text-align-last: center; }
.contact-text .contact-btn { display: inline-flex; align-items: center; gap: 2rem; min-height: 50px; padding: 0 22px; border-radius: 150px; color: #C49E31 !important; margin-top: 4px; }
/* Mona Lisa phone booth video on its gradient band (Figma 268x473 on a 390x533 band) */
.arj-booth { position: relative; margin: 34px 0 0; padding: 30px 0; display: flex; justify-content: center; background: linear-gradient(90deg, #4a0505 0%, #510b04 9%, #500a02 95%, #4a0505 100%); }
.arj-booth-video { display: block; width: 268px; max-width: 72%; aspect-ratio: 268 / 473; height: auto; object-fit: cover; background: transparent; }
.arj-booth-sound { position: absolute; bottom: 40px; left: calc(50% + 100px); width: 40px; height: 40px; border-radius: 50%; color: #FFEBC9; font-size: 16px; cursor: pointer; }
.arj-booth-sound.on { border-color: #C49E31 !important; }
.monalisa-wrapper { display: none; }
/* map: the text ring turns around the fixed pin */
.arj-map-pin { left: 50%; top: 50% !important; width: 190px; height: 190px; margin: -95px 0 0 -95px; }
.arj-map-pin img { position: absolute; inset: 0; width: 100%; height: 100%; }
.arj-map-ring { animation: arj-spin 22s linear infinite; }
.map-wrapper .map-box img { display: block; width: 100%; }
/* phones: liquid glass pills you can tap to call */
.phones .phone-item { display: flex; color: #FFEBC9 !important; min-height: 38px; }
.phones .phone-item span { direction: ltr; unicode-bidi: isolate; }

/* contact form (DNN Feedback) per Figma 30388:11535: the fields sit 32px in from both sides (underline 34..359 of 390), text flush with the underline; no character counter */
.DnnModule-DNN_Feedback .feedback-form { padding-left: 32px !important; padding-right: 32px !important; }
.DnnModule-DNN_Feedback .feedback-form .row { margin-left: 0 !important; margin-right: 0 !important; }
.DnnModule-DNN_Feedback .feedback-form .field-holder { padding-left: 0 !important; padding-right: 0 !important; }
.DnnModule-DNN_Feedback .feedback-form .Feedback_C { padding-left: 0 !important; padding-right: 0 !important; }
.DnnModule-DNN_Feedback .feedback-form textarea.Feedback_C { resize: none; }
.DnnModule-DNN_Feedback .Feedback_CharCount { display: none !important; }

/* ===== Arjang account area (dashboard skin page-63): «ناحیه کاربری» pill + menu sheet (Figma 30408:10649) ===== */
.arj-dash-content { width: 100%; padding-bottom: 96px; }
.arj-dash-toggle {
    position: fixed; z-index: 1040; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: min(358px, calc(100% - 32px)); height: 62px; padding: 7px; border: 1px solid rgba(255, 235, 201, .25); border-radius: 999px; cursor: pointer;
    background: rgba(74, 5, 5, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.arj-dash-toggle span {
    display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 700; color: #ffebc9;
    background: linear-gradient(180deg, rgba(255, 235, 201, .22), rgba(255, 235, 201, .08)); border: 1px solid rgba(255, 235, 201, .35);
}
html.arj-dash-lock, html.arj-dash-lock body { overflow: hidden; }
.arj-dash-sheet {
    position: fixed; inset: 0; z-index: 10040; display: none; align-items: flex-end; justify-content: center; direction: rtl;
    background: rgba(18, 4, 4, 0); transition: background-color .3s ease;
}
.arj-dash-sheet.open { display: flex; }
.arj-dash-sheet.in { background: rgba(18, 4, 4, .72); }
.arj-dash-panel {
    position: relative; width: 100%; max-width: 524px; max-height: calc(100vh - 110px); overflow: auto; padding: 8px 21px calc(20px + env(safe-area-inset-bottom));
    background: #ebdbbe; transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); overflow: visible;
}
.arj-dash-sheet.in .arj-dash-panel { transform: none; }
.arj-dash-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 65px; margin-bottom: -1px; pointer-events: none; background: url(../images/dashboard/paper.png) center bottom / 100% 100% no-repeat; }
.arj-dash-user { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 12px 20px; margin: 0 0 14px; border-bottom: 1px solid #d9d9e2; border-radius: 150px; text-decoration: none; }
.arj-dash-phone { font-size: 17px; font-weight: 700; line-height: 32px; color: #53565a; }
.arj-dash-avatar { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(245, 245, 245, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.arj-dash-avatar img { width: 44px; height: 44px; max-height: none; }
.arj-dash-menu { display: flex; flex-direction: column; gap: 10px; }
.arj-dash-item {
    display: flex; align-items: center; gap: 11px; height: 52px; padding: 8px 14px; border-radius: 150px; text-decoration: none !important;
    background: rgba(232, 195, 128, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .35);
    font-size: 15px; line-height: 30px; color: #53565a !important; transition: background-color .2s ease;
}
.arj-dash-item img { width: 24px; height: 24px; max-height: none; flex: 0 0 24px; }
.arj-dash-item:hover, .arj-dash-item.active { background: rgba(232, 195, 128, .45); }
.arj-dash-item.active { font-weight: 700; }
.arj-dash-item.arj-dash-out { background: rgba(232, 128, 128, .2); }
.arj-dash-item.arj-dash-out:hover { background: rgba(232, 128, 128, .35); }
@media (max-height: 760px) { .arj-dash-item { height: 46px; } .arj-dash-menu { gap: 8px; } .arj-dash-avatar { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .arj-dash-sheet, .arj-dash-panel { transition: none; } }
/* the dashboard skin has no breadcrumb bar: the maroon band behind the header and the maroon column come from here */
.arj-dash-top { height: 118px; background: #4a0505; }
#dnn_content:has(.arj-dash-content) { padding-top: 0 !important; }
.arj-dash-wrap { background: #4a0505; min-height: calc(100vh - 118px); }

/* Arjang account home (skin object ArjDashHome, Figma 30408:10381): glass cards «اطلاعات کاربری», «آخرین سفارشات», «فعالیت ها» */
.arj-dh { display: flex; flex-direction: column; gap: 18px; padding: 16px 0 24px; direction: rtl; }
.arj-dh-card {
    display: flex; flex-direction: column; gap: 12px; padding: 16px 8px; border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 235, 201, .06), rgba(255, 235, 201, .02));
    border: 1px solid rgba(217, 217, 226, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .18);
}
.arj-dh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 16px; border-bottom: 1px solid rgba(217, 217, 226, .5); }
.arj-dh-head h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 32px; color: #d9d9e2; }
.arj-dh-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 150px; background: rgba(83, 86, 90, .2); font-size: 14px; line-height: 28px; color: #fff !important; text-decoration: none !important; }
.arj-dh-btn img { width: 24px; height: 24px; max-height: none; }
.arj-dh-info { display: flex; flex-direction: column; margin: 0; padding: 0 16px; }
.arj-dh-info > div { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 8px; }
.arj-dh-info dt { font-size: 14px; font-weight: 700; line-height: 28px; color: #ffebc9; }
.arj-dh-info dd { margin: 0; min-height: 30px; font-size: 15px; line-height: 30px; color: #d9d9e2; text-align: left; }
.arj-dh-row { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 20px; text-decoration: none !important; }
.arj-dh-circle { display: flex; align-items: center; justify-content: center; flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; background: rgba(245, 245, 245, .2); font-size: 14px; line-height: 28px; color: #ffebc9; }
.arj-dh-circle img { width: 32px; height: 32px; max-height: none; }
.arj-dh-label { min-width: 120px; white-space: nowrap; font-size: 14px; line-height: 28px; color: #ffebc9; text-align: center; }
.arj-dh-order { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 8px; padding: 12px 14px; border-radius: 20px; background: rgba(0, 0, 0, .18); text-decoration: none !important; color: #d9d9e2; }
.arj-dh-order-no { font-size: 13px; color: #d9d9e2; }
.arj-dh-order-no b { margin-right: 6px; color: #ffebc9; }
.arj-dh-order-meta { grid-column: 1; font-size: 12px; color: rgba(217, 217, 226, .75); }
.arj-dh-pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 2px 12px; border-radius: 150px; border: 1px solid rgba(196, 158, 49, .6); font-size: 12px; line-height: 24px; color: #e8c380; white-space: nowrap; }
/* the account pages show «DASHBOARD» in place of the person icon (header layout) */
.Login[hidden] { display: none !important; }
/* account pages: home | shop | DASHBOARD (Figma order), the shop icon follows the pill in the markup */
.glass-content .header-content-wrap :has(> .page-pill ~ .goshop) > .gohome { order: -2; }
.glass-content .page-pill ~ .goshop { order: -1; }
/* dashboard: the content layout rows under the column (LayoutDB content) stay maroon in the site column, no grey band */
#dnn_content:has(.arj-dash-content) { background: linear-gradient(#4a0505, #4a0505) center top / min(100%, 418px) 100% no-repeat; }
/* dashboard: the «+» shortcuts and the floating cart / favorites menu sit above the «ناحیه کاربری» button */
html:has(.arj-dash-toggle) .fixed-widget-list { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
html:has(.arj-dash-toggle) .ecommerce-action-menu { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
/* an open sheet / dialog (address book, order, menu, eCommerce modals) hides the floating cart / favorites menu and shortcuts */
body.ec-modal-open .ecommerce-action-menu, html.arj-dash-lock .ecommerce-action-menu, body:has(.eab-modal.eab-open) .ecommerce-action-menu,
body.ec-modal-open .fixed-widget-list, html.arj-dash-lock .fixed-widget-list, body:has(.eab-modal.eab-open) .fixed-widget-list { display: none !important; }
/* «آخرین بازدید های من» (skin object ArjDashVisits) */
.arj-visits { margin: 16px 0 24px; }
.arj-visits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 8px; }
.arj-visit { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; }
.arj-visit-pic { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: rgba(245, 245, 245, .1); }
.arj-visit-pic img { width: 100%; height: 100%; object-fit: cover; }
.arj-visit-name { font-size: 12px; line-height: 20px; color: #ffebc9; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ===== Arjang login stage (Figma "Login" 30489:16045): the gold frame with a video in its arched window, then the
   sign-in card hanging below it on two chains. The video plays first; when it ends the page scrolls to the card. ===== */
.arj-login-stage { position: relative; width: min(313px, 82vw); margin: 18px auto 0; direction: rtl; }
.arj-ls-frame { position: relative; width: 100%; aspect-ratio: 313 / 490; }
.arj-ls-video { position: absolute; left: 15.38%; top: 18.43%; width: 70.17%; height: 71.99%; object-fit: cover; background: #2b0101;
    -webkit-mask: url(/Portals/0/images/login/mask.png) center / 100% 100% no-repeat; mask: url(/Portals/0/images/login/mask.png) center / 100% 100% no-repeat; }
.arj-ls-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; pointer-events: none; }
.arj-ls-chains { position: relative; z-index: 1; height: 57px; margin-top: -4px; margin-bottom: -2px; }
/* the chains hang straight into the sign-in card (Figma): no top padding on the auth wrapper of this page */
#dnn_content:has(.arj-login-stage) .ia { padding-top: 0; }
.arj-ls-chains img { position: absolute; top: 0; width: 10px; height: 57px; max-height: none; transform-origin: 50% 0; }
.arj-ls-chains img:first-child { right: 13.9%; }
.arj-ls-chains img:last-child { left: 13.9%; }
.arj-login-stage.arj-ls-swing .arj-ls-chains img { animation: arj-ls-swing 1.6s ease-out 1; }
@keyframes arj-ls-swing { 0% { transform: rotate(0); } 25% { transform: rotate(2.5deg); } 55% { transform: rotate(-1.6deg); } 80% { transform: rotate(.8deg); } 100% { transform: rotate(0); } }
.arj-ls-skip { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 2; padding: 2px 14px; border: 1px solid rgba(255, 235, 201, .35); border-radius: 150px; background: rgba(43, 1, 1, .45); color: #ffebc9; font-family: inherit; font-size: 12px; cursor: pointer; }
.arj-login-stage.arj-ls-done .arj-ls-skip { display: none; }
/* the sign-in card under the chains (the auth module's box gets .arj-ls-card from the stage script) */
.arj-ls-card { position: relative; width: min(316px, 84vw); min-height: 335px; margin: 0 auto 40px; padding: 28px 22px; border-radius: 17px; box-sizing: border-box;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 235, 201, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #ffebc9; transform-origin: 50% -57px; }
.arj-login-stage.arj-ls-swing + * .arj-ls-card, .arj-ls-card.arj-ls-swing { animation: arj-ls-card-swing 1.6s ease-out 1; }
@keyframes arj-ls-card-swing { 0% { transform: rotate(0); } 25% { transform: rotate(1.2deg); } 55% { transform: rotate(-.8deg); } 80% { transform: rotate(.4deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .arj-login-stage.arj-ls-swing .arj-ls-chains img, .arj-ls-card.arj-ls-swing { animation: none; } }
/* sheets and the account button follow the site column (--arj-col-x / --arj-col-w from global-0.js) */
.arj-dash-panel, .arj-os-panel, .eab-modal .eab-dialog, .ec-modal.ec-adr-dlgwrap .ec-modal-box {
    position: absolute !important; bottom: 0; left: var(--arj-col-x, 0) !important; right: auto !important;
    width: var(--arj-col-w, 100%) !important; max-width: var(--arj-col-w, 100%) !important; margin: 0 !important; }
.arj-dash-toggle { left: calc(var(--arj-col-x, 0px) + var(--arj-col-w, 100vw) / 2); width: min(358px, calc(var(--arj-col-w, 100vw) - 32px)); }
/* the floating cart / favorites menu and the «+» shortcuts keep to the site column's edges */
.ecommerce-action-menu { right: calc(var(--arj-col-r, 0px) + 16px) !important; }
.fixed-widget-list { left: calc(var(--arj-col-x, 0px) + 13px) !important; }

/* ===== IransiteAuth in the Arjang look: login / register (Figma 30489:16045, 29096:300 / 299) and «عملیات رمز»
   (30419:14088 / 14489 / 14735). Glass card, pill fields, gold buttons, glass code boxes, timer pill. ===== */
#dnn_content:has(.ia) { background: linear-gradient(#4a0505, #4a0505) center top / min(100%, 418px) 100% no-repeat; }
.ia { --ia-primary: #c49e31; --ia-text: #ffebc9; --ia-muted: #d9d9e2; --ia-border: rgba(255, 235, 201, .28); --ia-danger: #ff9a8f; font-family: inherit !important; color: #ffebc9; }
.ia .ia-card { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 235, 201, .18) !important; border-radius: 17px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .3) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #ffebc9 !important; }
.ia .ia-brand { display: none !important; }
.ia .ia-title { color: #ffebc9 !important; font-size: 17px !important; font-weight: 400 !important; text-align: center; }
.ia .ia-label, .ia .ia-hint, .ia .ia-subtitle, .ia .ia-who, .ia .ia-otp-hint, .ia .ia-who-value { color: #d9d9e2 !important; }
.ia .ia-label { font-weight: 700; text-align: center; }
.ia .ia-input, .ia .ia-country { min-height: 52px; border: 1px solid rgba(255, 235, 201, .3) !important; border-radius: 150px !important; background: rgba(255, 255, 255, .12) !important;
    color: #ffebc9 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15) !important; font-family: inherit !important; }
.ia .ia-input::placeholder { color: rgba(217, 217, 226, .7); }
.ia .ia-input:focus { border-color: #c49e31 !important; box-shadow: 0 0 0 3px rgba(196, 158, 49, .22) !important; outline: none; }
.ia .ia-country { background-color: rgba(43, 1, 1, .5) !important; }
.ia .ia-country option { color: #1d1d1d; }
.ia .ia-btn { min-height: 52px; border-radius: 150px !important; font-family: inherit !important; font-weight: 700; }
.ia .ia-primary { border: 0 !important; background: linear-gradient(180deg, #e5c35c 0%, #c49e31 100%) !important; color: #4a0505 !important; box-shadow: 0 4px 14px rgba(196, 158, 49, .35) !important; }
.ia .ia-secondary, .ia .ia-ghost { border: 1px solid rgba(255, 235, 201, .3) !important; background: rgba(255, 255, 255, .08) !important; color: #ffebc9 !important; }
.ia .ia-link { color: #e8c380 !important; font-family: inherit; }
.ia .ia-link.ia-change { color: #4cd38f !important; }
.ia .ia-back, .ia .ia-icon-btn { border-color: rgba(255, 235, 201, .3) !important; background: rgba(255, 255, 255, .1) !important; color: #ffebc9 !important; }
.ia .ia-captcha-img { border-radius: 14px; }
.ia .ia-error, .ia .ia-message { color: #ffb4a8 !important; }
.ia .ia-message.ia-success, .ia .ia-message.ia-info { color: #9be7bf !important; background: rgba(1, 157, 89, .12) !important; }
/* spacing with margins (flex gap is ignored by iPhone Safari before iOS 14.1: the boxes touched); on narrow phones the
   boxes shrink to fit the card instead of running past its edges */
.ia .ia-otp { direction: ltr; justify-content: center; gap: 0 !important; width: 100%; }
.ia .ia-otp-box + .ia-otp-box { margin-left: 12px !important; }
.ia .ia-otp-box { flex: 0 1 48px !important; min-width: 0 !important; max-width: 48px !important; width: 48px !important; height: 48px !important; border: 1px solid rgba(255, 255, 255, .35) !important; border-radius: 10px !important; background: rgba(255, 255, 255, .14) !important;
    color: #ffebc9 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .15) !important; font-size: 20px; }
.ia .ia-otp-box:focus { border-color: #c49e31 !important; }
.ia .ia-timer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 150px;
    background: rgba(255, 255, 255, .12); color: #ffebc9; font-weight: 700; }
.ia .ia-check { color: #d9d9e2 !important; }
/* «عملیات رمز» on the account pages: the card is the dashboard's glass card */
.arj-dash-content .ia { margin: 16px 0 24px; }
.arj-dash-content .ia .ia-card { border-radius: 30px !important; background: linear-gradient(180deg, rgba(255, 235, 201, .06), rgba(255, 235, 201, .02)) !important; border-color: rgba(217, 217, 226, .22) !important; }
.arj-dash-content .ia .ia-title { text-align: right; font-size: 15px !important; }
.arj-dash-content .ia .ia-pw-intro, .arj-dash-content .ia .ia-pw-code-hint { color: #ffebc9 !important; }
.arj-dash-content .ia .ia-primary { background: #ffebc9 !important; color: #4a0505 !important; box-shadow: none !important; }
/* account pages: the eCommerce dialogs (wish lists move / share / confirm, orders cancel / return …) as the Arjang paper
   sheet from the bottom, over the site column */
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) { align-items: flex-end !important; padding: 0 !important; background: rgba(18, 4, 4, .72) !important; }
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) .ec-modal-box {
    position: absolute !important; bottom: 0; left: var(--arj-col-x, 0) !important; right: auto !important; width: var(--arj-col-w, 100%) !important; max-width: var(--arj-col-w, 100%) !important;
    max-height: 86vh; margin: 0 !important; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)) !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important;
    background: #ebdbbe !important; color: #53565a !important; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25) !important; transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1) !important; }
body:has(.arj-dash-toggle) .ec-modal.ec-show:not(.ec-adr-dlgwrap) .ec-modal-box { transform: none; }
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) .ec-modal-box::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 65px; margin-bottom: -1px; pointer-events: none;
    background: url(../images/dashboard/paper.png) center bottom / 100% 100% no-repeat; }
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) .ec-modal-close { top: 10px !important; left: 12px !important; right: auto !important; background: none !important; color: #53565a !important; }
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) .ec-dialog-title { color: #53565a !important; font-size: 15px; }
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) .ec-input, body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) input[type=text],
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) textarea, body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) select {
    border: 1px solid rgba(255, 255, 255, .55) !important; border-radius: 150px !important; background: rgba(232, 195, 128, .28) !important; color: #53565a !important; font-family: inherit; }
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) textarea { border-radius: 22px !important; resize: none; }
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) .ec-btn { border: 0 !important; border-radius: 150px !important; background: linear-gradient(180deg, #e5c35c 0%, #c49e31 100%) !important; color: #4a0505 !important; font-family: inherit; }
body:has(.arj-dash-toggle) .ec-modal:not(.ec-adr-dlgwrap) .ec-btn.ec-btn-ghost { background: rgba(232, 195, 128, .3) !important; color: #53565a !important; }
/* the store has no sellers: no «فروشگاه‌ها» list type */
.ec-modal select option[value="3"] { display: none; }
.arj-visits [hidden] { display: none !important; }
.arj-visits-grid:empty { display: none; }
.header-content-wrap .nav-bar .primary_structure li > a[href*="/products/frames"]::after { background-image: url(../images/menu/frames.svg); }
/* eNamad: the official seal (portrait) fits the white licence card */
footer.footer .license .enamad-seal { display: flex; align-items: center; justify-content: center; }
footer.footer .license .enamad-seal img { width: auto; height: 100%; max-height: 100%; object-fit: contain; }
/* phone header: the desktop menu panel lives inside the glass bar, so while it is open the bar (glass layer and its
   buttons) is lifted above the panel's dark overlay, as on desktop */
.mobile-header:has(.nav-bar.active) .glass-content .header-content-wrap::before { z-index: 1001; }
.mobile-header:has(.nav-bar.active) .glass-content .header-content-wrap > :not(.nav-bar) { position: relative; z-index: 1002; }
/* bar icons: 18px and centred in their circle in both headers (the phone header drew them at their own 20-23px and the
   house icon's link sat on the text baseline, so the icons rode high) */
.glass-content .gohome > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 0; }
.glass-content .gohome svg, .glass-content .show-menu > svg { display: block; width: 18px; height: 18px; }

/******************* QC D2 (2026-10-21): store messages (Lobibox notifications of the store, theme toasts) stay inside
   the site column — the skin shows a 420px column in the middle of a desktop screen, the corner of the window is far
   away from the button that was pressed *****************/
.lobibox-notify-wrapper,
.lobibox-notify-wrapper.right,
.lobibox-notify-wrapper.left,
.lobibox-notify-wrapper.center { left: max(8px, calc(50% - 202px)) !important; right: auto !important; width: min(404px, calc(100vw - 16px)) !important; max-width: none !important; margin: 0 !important; }
.lobibox-notify-wrapper.bottom { bottom: 84px !important; }
.lobibox-notify-wrapper .lobibox-notify { width: 100% !important; max-width: 100% !important; margin: 6px 0 !important; border-radius: 14px; border: 1px solid rgba(196, 158, 49, .55); background: rgba(43, 4, 4, .92) !important; color: #FFEBC9 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: 'Pinar-DS1-FD', IranSite, sans-serif; }
.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-icon-wrapper,
.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-icon { color: #C49E31 !important; }
.ec-toast { max-width: min(404px, 92vw); bottom: 84px; border: 1px solid rgba(196, 158, 49, .55); background: rgba(43, 4, 4, .94) !important; color: #FFEBC9; border-radius: 14px; font-family: 'Pinar-DS1-FD', IranSite, sans-serif; text-align: center; }

/******************* QC C1 + 404 (2026-10-21): the site column is maroon from the header to the footer. Each pane row paints
   its own maroon, so on short pages (404, an empty cart, the cart with one line) the empty rows under the content showed
   the grey/white page background as a band; the content area now paints the column itself *****************/
#dnn_content { background: linear-gradient(#4a0505, #4a0505) center top / min(420px, 100%) 100% no-repeat; }

/******************* QC C3 (2026-10-21): a page without a title pill (login, cart, …) — the four round buttons spread over the
   whole glass bar like Figma (menu at one end, home at the other, equal gaps), instead of a small group in the middle *****************/
.header-content-wrap:not(:has(.page-pill)):has(.gohome) { justify-content: space-between; padding-left: 20px; padding-right: 20px; }
.header-content-wrap:not(:has(.page-pill)) > .dngTextBox:has(> .gohome, > .goshop) { display: contents; }

/******************* QC U1 (2026-10-21): dashboard profile editing in a paper sheet (resource/SkinObjects/ArjDashHome.ascx) *****************/
.arj-dh-edit { border: 0; cursor: pointer; font: inherit; }
.arj-dh-saved { margin: 10px 8px 0; color: #C49E31; font-size: 13px; }
html.arj-dh-lock, html.arj-dh-lock body { overflow: hidden; }
.arj-dh-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; background: rgba(29, 29, 29, .8); direction: rtl; }
.arj-dh-sheet[hidden] { display: none; }
.arj-dh-sheet-box { position: relative; width: min(420px, 100%); max-height: calc(100% - 90px); overflow-y: auto; padding: 14px 20px 22px; background: #EBDBBE; color: #1D1D1D; animation: arj-dh-up .3s cubic-bezier(.2, .8, .2, 1); }

@keyframes arj-dh-up { from { transform: translateY(100%); } to { transform: none; } }
.arj-dh-sheet-title { position: relative; text-align: center; font-size: 15px; line-height: 30px; margin-bottom: 12px; }
.arj-dh-x { position: absolute; left: 0; top: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(29, 29, 29, .12) url(/DesktopModules/eCommerce/Template/Detail/ArjangSSR/images/close.svg) center / 28px 28px no-repeat; cursor: pointer; }
.arj-dh-err { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(176, 0, 32, .1); color: #8a0010; font-size: 13px; }
.arj-dh-form { display: flex; flex-direction: column; gap: 10px; }
.arj-dh-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: #53565A; }
.arj-dh-form label small { font-size: 11px; color: #8a8a8a; }
.arj-dh-form input { height: 44px; padding: 0 14px; border: 1px solid rgba(29, 29, 29, .2); border-radius: 150px; background: rgba(255, 255, 255, .45); color: #1D1D1D; font: inherit; font-size: 15px; }
.arj-dh-form input:focus { outline: 0; border-color: #8A6738; box-shadow: 0 0 0 3px rgba(196, 158, 49, .25); }
.arj-dh-form input[readonly] { opacity: .65; }
.arj-dh-sheet-cta { display: flex; gap: 14px; margin-top: 18px; }
.arj-dh-sheet-cta button { flex: 1; min-height: 50px; border-radius: 150px; font: inherit; font-size: 15px; cursor: pointer; }
.arj-dh-save { border: 1px solid #4a0505; background: #4a0505; color: #FFEBC9; }
.arj-dh-cancel { border: 1px solid #C49E31; background: transparent; color: #1D1D1D; }

/******************* «کلیک کنید، فوری تحویل بگیرید» (2026-10-21): the countdown box opens «آماده ارسال فوری» (custom.js) *****************/
.delivery.arj-cd-off { display: none !important; }
.delivery.arj-cd-on { cursor: pointer; transition: filter .2s ease, transform .2s ease; }
.delivery.arj-cd-on:hover { filter: brightness(1.04); }
.delivery.arj-cd-on:focus-visible { outline: 2px solid #C49E31; outline-offset: -6px; }

/******************* QC (2026-10-21): the Persian date picker (resource/js/arj-jdate.js) in the paper / gold / maroon look *****************/
.arj-dh-date { position: relative; }
.arj-dh-date input { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A6738' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px !important; }
.arj-jd { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(100% - 22px); padding: 12px 12px 10px; border: 1px solid rgba(138, 103, 56, .45); border-radius: 18px; background: #F3E6CC; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); direction: rtl; font-family: 'Pinar-DS1-FD', IranSite, sans-serif; color: #53565A; animation: arj-jd-in .18s ease; }
@keyframes arj-jd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.arj-jd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.arj-jd-head select { flex: 1; height: 36px; padding: 0 10px; border: 1px solid rgba(29, 29, 29, .15); border-radius: 150px; background: rgba(255, 255, 255, .55); color: #1D1D1D; font: inherit; font-size: 14px; }
.arj-jd-nav { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: #4a0505; color: #FFEBC9; font-size: 20px; line-height: 1; cursor: pointer; }
.arj-jd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.arj-jd-w { font-size: 12px; line-height: 24px; color: #8A6738; font-weight: 700; }
.arj-jd-d { height: 36px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, .35); color: #53565A; font: inherit; font-size: 14px; cursor: pointer; }
.arj-jd-d:hover { border-color: rgba(196, 158, 49, .6); }
.arj-jd-d.arj-now { border-color: #C49E31; }
.arj-jd-d.arj-on { background: #4a0505; border-color: #4a0505; color: #FFEBC9; }
.arj-jd-d[disabled] { opacity: .35; cursor: default; }
.arj-jd-foot { display: flex; justify-content: flex-start; margin-top: 8px; }
.arj-jd-clear { border: 0; background: none; color: #8A6738; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
/* Sheba: «IR» is fixed at the start of the field; only the 24 digits are typed */
.arj-dh-iban { display: flex; align-items: center; height: 44px; border: 1px solid rgba(29, 29, 29, .2); border-radius: 150px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.arj-dh-iban:focus-within { border-color: #8A6738; box-shadow: 0 0 0 3px rgba(196, 158, 49, .25); }
.arj-dh-iban b { flex: none; padding: 0 6px 0 14px; color: #8A6738; font-size: 15px; letter-spacing: 1px; }
.arj-dh-form .arj-dh-iban input { flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.arj-dh-form input[data-arj-digits] { letter-spacing: .5px; font-variant-numeric: tabular-nums; }

/******************* QC (2026-10-21): every scrolling box inside the site (address form, sheets, lists…) shows the thin gold
   Arjang bar (Figma "Scrool") instead of the grey Windows bar with arrows; the page's own scroll bar is not touched *****************/
body * { scrollbar-width: thin; scrollbar-color: #C49E31 rgba(196, 158, 49, .15); }
@supports selector(::-webkit-scrollbar) {
	body * { scrollbar-width: auto; scrollbar-color: auto; }
	body *::-webkit-scrollbar { width: 3px; height: 3px; }
	body *::-webkit-scrollbar-track { background: rgba(196, 158, 49, .15); border-radius: 8px; }
	body *::-webkit-scrollbar-thumb { background: #C49E31; border-radius: 8px; min-height: 48px; }
	body *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
	body *::-webkit-scrollbar-corner { background: transparent; }
}

/* QC round 3: the profile sheet box is placed on the site column by js (left / width), Persona Bar or not; the torn paper
   edge sits on top of the box */
.arj-dh-sheet { display: block; }
.arj-dh-sheet[hidden] { display: none; }
.arj-dh-sheet-box { position: absolute; bottom: 0; left: max(0px, calc(50% - 210px)); width: min(420px, 100%); overflow: visible; display: flex; flex-direction: column; }
.arj-dh-sheet-box > .arj-dh-form { overflow-y: auto; min-height: 0; padding: 2px 2px 4px; }
.arj-dh-sheet-box::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 65px; margin-bottom: -1px; background: url(/DesktopModules/eCommerce/Template/Detail/ArjangSSR/images/paper.png) center bottom / 100% 100% no-repeat; pointer-events: none; }

/******************* SEO 1405-08-04: introduction box between the candle sconce and the designs (HtmlText 480) *****************/
.arj-home-about { margin: 34px 16px 46px; padding: 22px 18px 18px; border: 1px solid rgba(196, 158, 49, .45); border-radius: 22px; background: rgba(43, 4, 4, .35); text-align: center; color: #FFEBC9; }
.arj-home-about h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 30px; color: #E8C380; }
.arj-home-about p { margin: 0 0 8px; font-size: 14px; line-height: 28px; text-align: justify; text-align-last: center; }
.arj-home-about p:last-child { margin-bottom: 0; }
.arj-home-about b { color: #E8C380; font-weight: 700; }
.arj-home-about a { color: #E8C380 !important; text-decoration: underline; text-underline-offset: 4px; }
footer.footer .about-arjang .arj-foot-h1 { display: block; margin: 0; color: inherit; font-family: inherit; }
/* SEO 1405-08-04: page h1s («تماس با ما ارژنگ گالری» in the place and look of the old «ارتباط با ما»; «مقالات ارژنگ گالری» under the blog collage) */
.contact-text .arj-contact-h1 { margin: 0; font: inherit; font-weight: 700; font-size: 17px; line-height: 32px; color: inherit; }
.arj-blog-h1 { margin: 0 16px 18px; text-align: center; color: #FFEBC9; font-size: 17px; font-weight: 700; line-height: 32px; }
body:has(.blog-detail) .arj-blog-h1 { display: none; }
/* feedback 1405-08-04: «کلیک کنید، فوری تحویل بگیرید» never flashes: hidden until the service says a ready product is on sale
   (the shop page decides on the server and marks it .arj-cd-ssr, so it is there from the first paint) */
.delivery:not(.arj-cd-on):not(.arj-cd-ssr), .delivery.arj-cd-off { display: none !important; }