/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: ایران فلتسام
Theme URI: http://flatsomee.ir/
Author URI: http://flatsomee.ir/
Template: flatsome
Version: 3.10.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*==========================================
   DROPDOWN GENERAL STYLE 
========================================== */

.menu-item-3436 .nav-dropdown,
.menu-item-1500 .nav-dropdown {
    min-width: 360px;
    padding: 6px 6px !important;
}

.menu-item-3436 .nav-dropdown .menu-item,
.menu-item-1500 .nav-dropdown .menu-item {
    font-size: .9em;
    position: relative;
}

.menu-item-3436 .nav-dropdown .menu-item a:hover,
.menu-item-1500 .nav-dropdown .menu-item a:hover {
    background: transparent !important;
}

.menu-item-3436 .nav-dropdown .menu-item a,
.menu-item-1500 .nav-dropdown .menu-item a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 10px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: all .3s ease;
}


/* remove last divider */

.menu-item-3436 .nav-dropdown .menu-item:last-child a,
.menu-item-1500 .nav-dropdown .menu-item:last-child a {
    border-bottom: none;
}


/* ==========================================
   ICON BASE STYLE
========================================== */

.menu-item-4287 > a::before,
.menu-item-4289 > a::before,
.menu-item-4288 > a::before,
.menu-item-4290 > a::before,
.menu-item-4291 > a::before,
.menu-item-4286 > a::before,
.menu-item-4170 > a::before,
.menu-item-4171 > a::before,
.menu-item-4172 > a::before,
.menu-item-4247 > a::before,
.menu-item-4248 > a::before,


.menu-item-4292 > a::before,
.menu-item-4293 > a::before,
.menu-item-4294 > a::before,
.menu-item-1630 > a::before {

    content: "";

    width: 22px;
    height: 22px;

    flex-shrink: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(34%)
        sepia(20%)
        saturate(2012%)
        hue-rotate(343deg)
        brightness(146%)
        contrast(112%);

    transition: transform .3s ease;
}


/* ==========================================
   MENU ITEM 1501 ICONS/web services
========================================== */

.menu-item-4287 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/02/count-on-us-eshel.png");
}

.menu-item-4289 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/07/marketplace-store.png");
}

.menu-item-4288 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/07/briefcase-1.png");
}

.menu-item-4290 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/07/mug-hot-alt.png");
}

.menu-item-4291 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/07/school.png");
}

.menu-item-4286 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/07/lipstick.png");
}
.menu-item-4170 > a::before {
    background-image: url("https://eshel-studio.irr/wp-content/uploads/2026/09/hotel.png");
}
.menu-item-4171 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/09/gym.png");
}
.menu-item-4172 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/09/house-key.png");
}
.menu-item-4247 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/09/hotel.png");
}
.menu-item-4248 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/09/gym.png");
}



/* ==========================================
   MENU ITEM 1500 ICONS
========================================== */

.menu-item-4292 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/08/content-creation.png");
}

.menu-item-4293 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/08/web-marketingg.png");
}

.menu-item-4294 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/08/seo-studio-eshel.png");
}

.menu-item-1630 > a::before {
    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/08/brand-badge.png");
}


/* ==========================================
   ARROWS
========================================== */

.menu-item-3436 .nav-dropdown .menu-item a::after,
.menu-item-1500 .nav-dropdown .menu-item a::after {

    content: "←";

    margin-right: auto;

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

    color: var(--fs-color-primary);

    opacity: .75;

    transform: translateX(0);

    transition:
        transform .3s ease,
        opacity .3s ease;
}


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

.menu-item-3436 .nav-dropdown .menu-item:hover a,
.menu-item-1500 .nav-dropdown .menu-item:hover a {
    color: var(--fs-color-primary);
    padding-right: 14px;
}


.menu-item-3436 .nav-dropdown .menu-item:hover a::after,
.menu-item-1500 .nav-dropdown .menu-item:hover a::after {
    transform: translateX(-5px);
    opacity: 1;
}


.menu-item-3436 .nav-dropdown .menu-item:hover a::before,
.menu-item-1500 .nav-dropdown .menu-item:hover a::before {
    transform: scale(1.12);
}

/* ==========================================
   MOBILE DROPDOWN SPACING FIX
========================================== */

@media (max-width: 498px) {

.menu-item-3436 .menu-item,
.menu-item-1500 .menu-item {
        gap: 8px;
        padding: 9px 6px;
        font-size: 14px;
        line-height: 1.8;
    }
.menu-item-3436 .menu-item a::before,
	.menu-item-1500 .menu-item a::before {
padding-left: 32px;	}
	
}
/*header codes*/
.header-button-1 .button {
	background: transparent !important;
	border: none !important;
}
.header-button-1 button:hover {
	background: red !important;
	opacity: 1 !important;
}

.header-inner {
	position: relative;
	padding: 0 32px;
	margin-top: 20px;
	border-radius: 20px;

	background: linear-gradient(
		180deg,
		rgba(24, 38, 64, 0.30) 0%,
		rgba(18, 31, 56, 0.24) 100%
	);

	border: 1px solid rgba(120, 150, 205, 0.22);

	-webkit-backdrop-filter: none;
	backdrop-filter: none;

	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.header-wrapper {
			width: 81%;
			right: 9.5%;
			border-radius: 20px;
			margin-top: 16px;
}
.header-wrapper.stuck {
	right: 0;
	margin-top: 0;
	border-radius: 0px;
}
.header-wrapper.stuck .header-inner {
	background: none !important;
		    backdrop-filter: blur(18px);
		border-radius: 0px 0px 20px 20px;
	border: 1px solid rgba(120, 150, 205, 0.22);
		height: 90px;
}
@media(max-width:48em) {
	.header-wrapper.stuck .header-inner {
		height: 70px;
	}
	.header-wrapper {
		width: 90%;
		height: 50px;
		right: 5%;
	}
}
.header-wrapper.stuck .menu-item a {
	color: #727B90 !important;
}
.header-wrapper .menu-item a {
	color: white !important;
}

.header-wrapper .menu-
.header-inner .menu-item > a:hover,
.header-inner .current-menu-item > a {
	border-bottom: 3px solid var(--fs-color-primary);
}
@media(max-width: 48em) {
	.button {
		width: 100% !important;
		min-height: 54px !important;
		padding: 0 22px !important;
	}
}
/*esentials*/
.z-1 {
	z-index: 1 !important;
}
.z-2 {
	z-index: 2 !important;
}
.button {
	padding: 2px 20px;
} 
h1 {
	font-size: 1.8em;
	color: black;
}
h2 {
	font-size: 1.6em;
	color: black;
}
h3 {
	font-size: 1.3em;
	color: black;
}
h4 {
	font-size: 1.1em;
	color: black;
}
p {
	font-size: .9em;
  text-align: justify;
	color: #6E7485;
	line-height: 2em;
}
li {
	color:  #6E7485;
}
.ctap p {
	line-height: 1.4em;
}
h1, h2, h3, h4 {
	line-height: 1.6em;
}
ul {
	text-align: justify;
	font-size: .9em;
}
.mar,
.mar p,
.mar span,
.mar h3,
.mar h2,
.mar h1 {
	margin: 0 !important;
}
.pad {
	padding: 0 !important;
}
h1, h2 ,h3 {
	font-weight: 900;
}
.gform_button {
	background-color: var(--fs-color-primary) !important;
}
.icon-box.icon-box-left .icon-box-text {
	padding-right: 16px;
}

.icon-box-center .icon-box-img {
	margin-bottom: 0;
}

/* =========================================
   PRIMARY GLOWING LIST — LIGHT BACKGROUND
========================================= */

.prim-uls ul,
ul.prim-uls {
	list-style: none;
	margin-right: 0;
	padding-right: 0;
}

.prim-uls li,
ul.prim-uls > li {
	position: relative;
	padding-right: 28px;
}

.prim-uls li::before,
ul.prim-uls > li::before {
	content: "";
	position: absolute;
	right: 1px;
	top: 0.72em;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fs-color-primary);

	border: 2px solid color-mix(
		in srgb,
		var(--fs-color-primary) 22%,
		#ffffff
	);

	box-shadow:
		0 0 1px color-mix(
			in srgb,
			var(--fs-color-primary) 38%,
			transparent
		),
		0 0 10px color-mix(
			in srgb,
			var(--fs-color-primary) 18%,
			transparent
		);
}

.prim-uls-black ul,
ul.prim-uls-black {
	list-style: none;
	margin-right: 0;
	padding-right: 0;
}

.prim-uls-black li,
ul.prim-uls-black > li {
	position: relative;
	padding-right: 28px;
}

.prim-uls-black li::before,
ul.prim-uls-black > li::before {
	content: "";
	position: absolute;
	right: 1px;
	top: 0.72em;
	transform: translateY(-50%);

	width: 13px;
	height: 13px;
	border-radius: 50%;

	background: var(--fs-color-primary);

	border: 3px solid color-mix(
		in srgb,
		var(--fs-color-primary) 48%,
		#101a38
	);

	box-shadow:
		0 0 5px color-mix(
			in srgb,
			var(--fs-color-primary) 45%,
			transparent
		),
		0 0 12px color-mix(
			in srgb,
			var(--fs-color-primary) 22%,
			transparent
		);
}

/*new filters*/
.prim-icons img {
	filter:
		brightness(0)
		saturate(100%)
		invert(34%)
		sepia(20%)
		saturate(2012%)
		hue-rotate(343deg)
		brightness(146%)
		contrast(112%);
}
.white-icons img {
	filter: brightness(0) saturate(100%) invert(96%) sepia(3%) saturate(200%) hue-rotate(180deg);
}
/*eshel redesign*//*home page*/
.p-back-light {
	color: #8A8E9D;
}
.p-back-dark {
	color: #9597A1;
}

.black-back-t p,
.black-back-t li {
	color: rgba(255,255,255, .8);
}
.black-back-t h4,
.black-back-t h3,
.black-back-t h2,
.black-back-t h1 {
	color: rgb(255,255,255);
}


/*new acc sec*/
.p-acc {
	color: rgb(60 70 114) !important;
}
.p-acc-in {
	color: rgba(60, 70, 114, .7);	
}
.glow-bul.team {
	border: none;
}
.glow-bul {
	display: inline-block;
	width: fit-content;
	height: fit-content;
	padding: 8px 12px 8px 16px;
	background: transparent;
	border: 1.5px solid #d9dbe4;
	border-radius: 999px;
}

.glow-bul ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.col-inner .glow-bul  li {
	margin-right: 0em !important;
}
.glow-bul li {
	position: relative;
	margin: 0;
	padding: 0 23px 0 0;
	line-height: 1.6;
	direction: rtl;
}

/* Glowing orange bullet */
.glow-bul li::before {
	content: "";
	position: absolute;
	right: 1px;
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--fs-color-primary);
	border: 2px solid color-mix(
		in srgb,
		var(--fs-color-primary) 22%,
		#ffffff
	);

	box-shadow:
		0 0 4px
			color-mix(
				in srgb,
				var(--fs-color-primary) 38%,
				transparent
			),
		0 0 10px
			color-mix(
				in srgb,
				var(--fs-color-primary) 18%,
				transparent
			);
}

.glow-bul.black {
	border-color: rgba(131, 157, 215, 0.28);
}
.glow-bul.black li::before {
	border: 3px solid color-mix(
		in srgb,
		var(--fs-color-primary) 48%,
		#101a38
	);

	box-shadow:
		0 0 5px color-mix(
			in srgb,
			var(--fs-color-primary) 45%,
			transparent
		),
		0 0 12px color-mix(
			in srgb,
			var(--fs-color-primary) 22%,
			transparent
		);
}

.acc-white-back {
	background:
		radial-gradient(
			ellipse at 55% 55%,
			rgba(255, 255, 255, 1) 0%,
			rgba(249, 249, 252, 1) 55%,
			rgba(243, 243, 248, 1) 100%
		);
	border-radius: 20px;
}


/* =====================================================
   Decorative lines, dots and orange glow
   Column class: effect-top-right-col
===================================================== */

.effect-top-right-col {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}

.effect-top-right-col > .col-inner {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
}


/* =====================================================
   Curved lines and orange dots
   Fixed height: does not stretch with accordion
===================================================== */

.effect-top-right-col > .col-inner::before {
	content: "";
	position: absolute;
	z-index: 5;

	top: 0;
	left: 0;

	width: 55%;
	height: 620px;
	max-height: 620px;

	pointer-events: none;

	background:

		/* Orange dots */
		radial-gradient(
			circle at 13% 10%,
			var(--fs-color-primary) 0 1.5px,
			transparent 2px
		),

		radial-gradient(
			circle at 21% 24%,
			var(--fs-color-primary) 0 1.2px,
			transparent 1.8px
		),

		radial-gradient(
			circle at 7% 42%,
			var(--fs-color-primary) 0 1.7px,
			transparent 2.3px
		),

		radial-gradient(
			circle at 18% 59%,
			var(--fs-color-primary) 0 1.3px,
			transparent 2px
		),

		radial-gradient(
			circle at 9% 77%,
			var(--fs-color-primary) 0 1.6px,
			transparent 2.2px
		),

		radial-gradient(
			circle at 26% 90%,
			var(--fs-color-primary) 0 1.2px,
			transparent 1.8px
		),

		/* Curved repeating lines */
		repeating-radial-gradient(
			ellipse at -22% 70%,
			transparent 0 29px,

			color-mix(
				in srgb,
				var(--fs-color-primary) 16%,
				transparent
			) 30px 31px,

			transparent 32px 43px
		);

	opacity: 0.5;

	-webkit-mask-image: linear-gradient(
		to right,
		#000 0%,
		#000 48%,
		rgba(0, 0, 0, 0.55) 72%,
		transparent 100%
	);

	mask-image: linear-gradient(
		to right,
		#000 0%,
		#000 48%,
		rgba(0, 0, 0, 0.55) 72%,
		transparent 100%
	);
}


/* =====================================================
   Warm orange glow
   Also fixed height
===================================================== */

.effect-top-right-col > .col-inner::after {
	content: "";
	position: absolute;
	z-index: 4;

	top: 90px;
	left: -4%;

	width: 56%;
	height: 390px;
	max-height: 390px;

	pointer-events: none;

	background: radial-gradient(
		ellipse at center,

		color-mix(
			in srgb,
			var(--fs-color-primary) 18%,
			transparent
		) 0%,

		color-mix(
			in srgb,
			var(--fs-color-primary) 9%,
			transparent
		) 42%,

		transparent 70%
	);

	filter: blur(15px);
	opacity: 0.9;
	mix-blend-mode: multiply;
}


/* =====================================================
   Tablet
===================================================== */

@media (max-width: 849px) and (min-width: 769px) {

	.effect-top-right-col > .col-inner::before {
		width: 60%;
		height: 520px;
		max-height: 520px;
	}

	.effect-top-right-col > .col-inner::after {
		top: 70px;
		width: 60%;
		height: 330px;
		max-height: 330px;
	}
}


/* =====================================================
   Mobile
===================================================== */

@media (max-width: 768px) {

	.effect-top-right-col > .col-inner::before,
	.effect-top-right-col > .col-inner::after {
		content: none;
		display: none;
	}

}


/* =========================================
   Custom Flatsome Accordion — .acc-n
========================================= */

.acc-n {
	--acc-primary: var(--fs-color-primary, #ff6500);
	--acc-text: #101a38;
	--acc-muted: #68718a;
	--acc-border: rgba(25, 38, 75, 0.08);

	display: flex;
	flex-direction: column;
	gap: 10px;
}


/* Each accordion card */
.acc-n .accordion-item {
	position: relative;
	margin: 0 !important;
	overflow: hidden;

	background: rgba(255, 255, 255, 0.82);
	border: 1px solid var(--acc-border);
	border-radius: 12px;

	box-shadow:
		0 5px 18px rgba(20, 29, 58, 0.045),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);

	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease;
}


/* Remove Flatsome default borders */
.acc-n .accordion-title,
.acc-n .accordion-inner {
	border: 0 !important;
}


/* Accordion title */
.acc-n .accordion-title {
	position: relative;
	display: flex;
	align-items: center;

	min-height: 52px;
	margin: 0 !important;
	padding: 13px 18px 13px 54px !important;

	background: transparent !important;
	color: var(--acc-text);

	font-size: 14px;
	font-weight: 600;
	line-height: 1.8;
	text-align: right;
	direction: rtl;

	transition:
		color 0.25s ease,
		background-color 0.25s ease;
}


/* Title text */
.acc-n .accordion-title > span {
	display: block;
	width: 100%;
}


/* Remove Flatsome icon */
.acc-n .accordion-title .toggle i {
	display: none !important;
}


/* Circular plus/minus button */
.acc-n .accordion-title .toggle {
	position: absolute !important;
	top: 50% !important;
	left: 15px !important;
	right: auto !important;

	width: 23px !important;
	height: 23px !important;
	min-width: 23px !important;
	min-height: 23px !important;
	margin: 0 !important;
	padding: 0 !important;

	background: rgba(248, 249, 252, 0.95);
	border: 1px solid rgba(20, 32, 68, 0.13);
	border-radius: 50%;

	opacity: 1 !important;
	transform: translateY(-50%) !important;

	box-shadow:
		0 2px 6px rgba(20, 30, 60, 0.05),
		inset 0 1px 1px rgba(255, 255, 255, 0.9);

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}


/* Horizontal line */
.acc-n .accordion-title .toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;

	width: 8px;
	height: 1.5px;
	border-radius: 10px;
	background: var(--acc-text);

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

	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}


/* Vertical line */
.acc-n .accordion-title .toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;

	width: 1.5px;
	height: 8px;
	border-radius: 10px;
	background: var(--acc-text);

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

	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		opacity 0.25s ease;
}


/* Hover */
.acc-n .accordion-title:hover {
	color: var(--acc-primary);
}


/* Active/open title */
.acc-n .accordion-title.active,
.acc-n .accordion-title[aria-expanded="true"] {
	color: var(--acc-primary) !important;
	background: rgba(255, 255, 255, 0.36) !important;
}


/* Active orange circle */
.acc-n .accordion-title.active .toggle,
.acc-n .accordion-title[aria-expanded="true"] .toggle {
	background: var(--acc-primary);
	border-color: var(--acc-primary);

	box-shadow:
		0 3px 10px color-mix(
			in srgb,
			var(--acc-primary) 30%,
			transparent
		);
}


/* White minus line */
.acc-n .accordion-title.active .toggle::before,
.acc-n .accordion-title[aria-expanded="true"] .toggle::before {
	background: #fff;
}


/* Hide vertical line and turn plus into minus */
.acc-n .accordion-title.active .toggle::after,
.acc-n .accordion-title[aria-expanded="true"] .toggle::after {
	background: #fff;
	opacity: 0;
	transform: translate(-50%, -50%) scaleY(0);
}


/* Open accordion content */
.acc-n .accordion-inner {
	position: relative;

	padding: 13px 22px 16px 52px !important;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.36) 0%,
			rgba(249, 249, 252, 0.75) 100%
		);

	border-top: 1px solid rgba(25, 38, 75, 0.065) !important;

	color: var(--acc-muted);
	font-weight: 400;
	line-height: 2.05;
	text-align: right;
	direction: rtl;
}


/* Orange vertical line beside open content */
.acc-n .accordion-inner::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;

	width: 3px;

	background: var(--acc-primary);
	border-radius: 0 5px 5px 0;

	box-shadow:
		2px 0 9px color-mix(
			in srgb,
			var(--acc-primary) 18%,
			transparent
		);
}


/* Paragraph spacing */
.acc-n .accordion-inner p {
	margin: 0 0 10px;
}


/* Remove margin from last paragraph */
.acc-n .accordion-inner p:last-child {
	margin-bottom: 0;
}


/* Strong final text */
.acc-n .accordion-inner strong {
	color: var(--acc-text);
	font-weight: 700;
}


/* Open card shadow */
.acc-n .accordion-item:has(
	.accordion-title[aria-expanded="true"]
) {
	border-color: rgba(25, 38, 75, 0.095);

	box-shadow:
		0 8px 24px rgba(20, 29, 58, 0.065),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 549px) {

	.acc-n {
		gap: 8px;
	}

	.acc-n .accordion-title {
		min-height: 49px;
		padding: 11px 14px 11px 48px !important;

		font-size: 13px;
		line-height: 1.75;
	}

	.acc-n .accordion-title .toggle {
		left: 12px !important;

		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
		min-height: 22px !important;
	}

	.acc-n .accordion-inner {
		padding: 12px 17px 14px 39px !important;

		font-size: 12.5px;
		line-height: 1.95;
	}

}

/* =====================================================
   1. CTA card
   UX Builder column class: acc-cta-sma
===================================================== */

.acc-cta-sma > .col-inner {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	padding: 28px 30px 30px;

	background:
		radial-gradient(
			circle at 88% 5%,
			rgba(102, 125, 190, 0.18) 0%,
			transparent 38%
		),
		linear-gradient(
			135deg,
			#09142f 0%,
			#17264c 55%,
			#2a3967 100%
		);

	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;

	box-shadow:
		0 16px 38px rgba(7, 15, 38, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}


/* Subtle lighting texture */
.acc-cta-sma > .col-inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;

	pointer-events: none;
	border-radius: inherit;

	background:
		linear-gradient(
			115deg,
			rgba(255, 255, 255, 0.055) 0%,
			transparent 34%,
			transparent 70%,
			rgba(255, 255, 255, 0.035) 100%
		);
}


/* Disable the old orange card glow */
.acc-cta-sma > .col-inner::after {
	content: none !important;
	display: none !important;
}


/* Text colors */
.acc-cta-sma > .col-inner h1,
.acc-cta-sma > .col-inner h2,
.acc-cta-sma > .col-inner h3,
.acc-cta-sma > .col-inner h4,
.acc-cta-sma > .col-inner strong {
	color: #ffffff;
}

.acc-cta-sma > .col-inner p {
	color: rgba(237, 241, 255, 0.78);
}


/* =====================================================
   2. Glass icon
   UX Builder class: acc-icon
===================================================== */

.acc-icon p,
.acc-icon span {
	padding-right: 16px;
}


.acc-icon .icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;

	width: 60px;
	height: 60px;
	padding: 0;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.18),
			rgba(255, 255, 255, 0.07)
		);

	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 17px;

	box-shadow:
		0 10px 25px rgba(4, 11, 32, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.24),
		inset 0 -1px 0 rgba(255, 255, 255, 0.05);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}


/* Glass reflection */
.acc-icon .icon::before {
	content: "";
	position: absolute;
	z-index: 0;

	top: -55%;
	left: -30%;

	width: 90%;
	height: 140%;

	background:
		linear-gradient(
			105deg,
			transparent 20%,
			rgba(255, 255, 255, 0.16) 50%,
			transparent 80%
		);

	transform: rotate(14deg);
	pointer-events: none;
}


/* Uploaded icon image */
.acc-icon .icon img {
	position: relative;
	z-index: 2;

	display: block;
	width: 100%;
	height: 100%;

	object-fit: contain;
}


/* =====================================================
   3. Primary button
   UX Builder button class: prim-but
===================================================== */

.prim-but {
	position: relative !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	min-height: 58px;
	padding: 0 35px !important;
	background:
		linear-gradient(
			110deg,
			color-mix(
				in srgb,
				var(--fs-color-primary) 88%,
				#ffb000
			),
			var(--fs-color-primary) 55%,
			color-mix(
				in srgb,
				var(--fs-color-primary) 82%,
				#e84200
			)
		) !important;

	border: 1px solid
		color-mix(
			in srgb,
			var(--fs-color-primary) 72%,
			#ffffff
		) !important;

	border-radius: 14px !important;

	color: #ffffff !important;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;

	text-shadow:
		0 1px 2px rgba(100, 25, 0, 0.2);

	/* One glow source only */
	box-shadow:
		0 9px 22px
			color-mix(
				in srgb,
				var(--fs-color-primary) 32%,
				transparent
			),
		0 0 13px
			color-mix(
				in srgb,
				var(--fs-color-primary) 17%,
				transparent
			),
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 -2px 0 rgba(100, 28, 0, 0.16);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		filter 0.25s ease;
}


/* Moving shine only — not another glow */
.prim-but::before {
	content: "";
	position: absolute;
	z-index: 1;

	top: -55%;
	left: -55%;

	width: 34%;
	height: 210%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.36),
			transparent
		);

	transform: rotate(18deg);
	pointer-events: none;

	animation: primButShine 3.5s ease-in-out infinite;
}


/* Completely disable the old bottom glow */
.prim-but::after {
	content: none !important;
	display: none !important;
}


/* Keep content above shine */
.prim-but span,
.prim-but i {
	position: relative;
	z-index: 2;
}


/* Hover */
.prim-but:hover {
	color: #ffffff !important;

	transform: translateY(-2px);
	filter: brightness(1.04) saturate(1.06);

	box-shadow:
		0 12px 26px
			color-mix(
				in srgb,
				var(--fs-color-primary) 38%,
				transparent
			),
		0 0 15px
			color-mix(
				in srgb,
				var(--fs-color-primary) 20%,
				transparent
			),
		inset 0 1px 0 rgba(255, 255, 255, 0.34),
		inset 0 -2px 0 rgba(100, 28, 0, 0.16);
}


/* Click */
.prim-but:active {
	transform: translateY(0) scale(0.985);
}


/* Moving shine animation */
@keyframes primButShine {
	0%,
	40% {
		left: -55%;
		opacity: 0;
	}

	48% {
		opacity: 1;
	}

	66% {
		left: 125%;
		opacity: 0;
	}

	100% {
		left: 125%;
		opacity: 0;
	}
}

.prim-but .icon-angle-right {
	width: 0px;
	font-size: 1.2em;
	margin-right: 20px !important;
}
/* =====================================================
   Mobile
===================================================== */

@media (max-width: 549px) {

	.acc-cta-sma > .col-inner {
		padding: 23px 20px 24px;
		border-radius: 16px;
	}

	.acc-icon .icon {
		width: 58px;
		height: 58px;
		border-radius: 15px;
	}

	.acc-icon p,
	.acc-icon span {
		padding-right: 12px;
	}

	.prim-but {
		width: 100%;
		min-height: 54px;
		padding: 0 22px !important;
	}

}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

	.prim-but::before {
		display: none;
		animation: none;
	}

}


/* =========================================
   Secondary outlined button
   UX Builder class: sec-but
========================================= */
.sec-but.w-b::before,
.sec-but.w-b::after {
	filter:
		brightness(0)
		saturate(100%)
		invert(34%)
		sepia(20%)
		saturate(2012%)
		hue-rotate(343deg)
		brightness(146%)
		contrast(112%);
}
.sec-but.w-b {
	color: black !important;
	background: white !important;
}
.sec-but.w-b:hover {
	background: white !important;
	color: black !important;
}
.sec-but::before,
.sec-but::after {
	filter: brightness(0) invert(1);
}
.sec-but {
	position: relative !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	min-height: 58px;
	padding: 0 45px !important;
	background:
		linear-gradient(
			110deg,
			transparent 28%,
			rgba(255, 255, 255, 0.13) 42%,
			transparent 56%
		)
		-140% 0 / 220% 100% no-repeat,
		rgba(7, 18, 48, 0.42) !important;

	border: 1px solid rgba(220, 228, 247, 0.38) !important;
	border-radius: 14px !important;

	color: #ffffff !important;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	text-align: center;

	box-shadow:
		0 8px 20px rgba(2, 10, 31, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);

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

	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease,
		filter 0.25s ease;
}
/* Right-side custom icon */
.sec-but::before {
	content: "";
	position: absolute;
	z-index: 2;

	top: 50%;
	right: 12px;

	width: 23px;
	height: 23px;

	background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/04/phone-eshel.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	transform: translateY(-50%);
	pointer-events: none;

	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}


/* Left-side custom icon */
.sec-but::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 12px;
	width: 23px;
	height: 23px;

	background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/04/phone-eshel.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateY(-50%);
	pointer-events: none;
	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}


/* Keep Flatsome text above the background effect */
.sec-but span {
	position: relative;
	z-index: 3;
}


/* Hover — similar behavior to prim-but */
.sec-but:hover {
	color: #ffffff !important;

	transform: translateY(-2px);
	filter: brightness(1.05) saturate(1.05);

	background-position:
		125% 0,
		center !important;

	background-color:
		color-mix(
			in srgb,
			var(--fs-color-primary) 8%,
			rgba(7, 18, 48, 0.58)
		) !important;

	border-color:
		color-mix(
			in srgb,
			var(--fs-color-primary) 68%,
			#ffffff
		) !important;

	box-shadow:
		0 11px 26px rgba(2, 10, 31, 0.2),
		0 0 18px
			color-mix(
				in srgb,
				var(--fs-color-primary) 24%,
				transparent
			),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* Icons move outward slightly on hover */
.sec-but:hover::before {
	transform: translateY(-50%) translateX(2px);
}

.sec-but:hover::after {
	transform: translateY(-50%) translateX(-2px);
}


/* Click */
.sec-but:active {
	transform: translateY(0) scale(0.985);
}


/* Mobile */
@media (max-width: 549px) {

	.sec-but {
		width: 100%;
		min-height: 54px;
		padding: 0 56px !important;
		border-radius: 13px !important;
	}

	.sec-but::before {
		right: 17px;
		width: 21px;
		height: 21px;
	}

	.sec-but::after {
		left: 17px;
		width: 21px;
		height: 21px;
	}

}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

	.sec-but,
	.sec-but::before,
	.sec-but::after {
		transition: none;
	}

}

.ser-but {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);

    color: #ffffff;
    font-family: inherit;
    font-weight: 500;

    text-decoration: none;
    transition: all .3s ease;

    position: relative;
    overflow: hidden;
}

.ser-but:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.6);
}

.ser-but.black {
	color: #091434;
	background: transparent;
	border-color: rgba(9, 20, 52, 0.32);
	box-shadow: none;
}

.ser-but.black:hover {
	background: rgba(9, 20, 52, 0.06);
	border-color: rgba(9, 20, 52, 0.65);
	box-shadow: none;
}
/*cta 1*/
/* =====================================================
   Dark bordered main wrapper
   UX Builder column class: black-col
===================================================== */

.black-col > .col-inner {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	padding: 34px 36px;

	background:
		radial-gradient(
			circle at 72% 8%,
			rgba(34, 62, 125, 0.28) 0%,
			transparent 38%
		),
		radial-gradient(
			circle at 10% 82%,
			rgba(19, 45, 100, 0.22) 0%,
			transparent 42%
		),
		linear-gradient(
			135deg,
			#06122f 0%,
			#081838 48%,
			#07142f 100%
		);

	border: 1px solid rgba(131, 157, 215, 0.28);
	border-radius: 22px;
	box-shadow:
		0 22px 55px rgba(0, 7, 26, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.055),
		inset 0 -1px 0 rgba(0, 0, 0, 0.32);
}


/* Soft lighting texture */
.black-col > .col-inner::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;

	pointer-events: none;
	border-radius: inherit;

	background:
		linear-gradient(
			115deg,
			rgba(255, 255, 255, 0.028) 0%,
			transparent 30%,
			transparent 70%,
			rgba(255, 255, 255, 0.018) 100%
		);
}


/* Very subtle primary-color ambience */
.black-col > .col-inner::after {
	content: "";
	position: absolute;
	z-index: -1;

	left: 18%;
	right: 18%;
	bottom: -95px;
	height: 170px;

	pointer-events: none;

	background: radial-gradient(
		ellipse at center,
		color-mix(
			in srgb,
			var(--fs-color-primary) 11%,
			transparent
		) 0%,
		transparent 70%
	);

	filter: blur(28px);
	opacity: 0.75;
}


/* Keep all UX Builder elements above the effects */
.black-col > .col-inner > * {
	position: relative;
	z-index: 2;
}


/* Default text colors inside */
.black-col > .col-inner h1,
.black-col > .col-inner h2,
.black-col > .col-inner h3,
.black-col > .col-inner h4,
.black-col > .col-inner h5,
.black-col > .col-inner strong {
	color: #ffffff;
}

.black-col > .col-inner p {
	color: rgba(224, 231, 247, 0.72);
}
/* =====================================================
   Mobile
===================================================== */

@media (max-width: 549px) {
	.black-col > .col-inner {
		padding: 22px 16px;
		border-radius: 17px;
	}

	.black-col > .col-inner::after {
		left: 5%;
		right: 5%;
		bottom: -75px;
		height: 130px;
	}
}

.icons-row > .col-inner {
		border: 1px solid rgba(131, 157, 215, 0.28);
	border-radius: 22px;
}

.icon-box-img img {
	padding-top: 0;
}
.cir-bor-icon .icon {
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 45px;
	padding: 15px;
}
.bor-small-col {
border-left: 1px solid rgba(131, 157, 215, 0.28);
}
@media(max-width: 48em) {
	.bor-small-col {
		border-left: none;
		border-bottom: 1px solid rgba(131, 157, 215, 0.28);
	}
	.mob-no-bor {
		border: none;
	}
	.mob-bor-left {
		border-left: 1px solid rgba(131, 157, 215, 0.28);
	}
}

/* =========================================
   Subtle curved lines — dark background
   Classes: effect-top-right-col black
========================================= */

.effect-top-right-col-black > .col-inner::before {
	content: "";
	position: absolute;
	z-index: 3;

	top: 0;
	left: 0;

	width: 100%;
	height: 560px;

	pointer-events: none;

	background:
		repeating-radial-gradient(
			ellipse at -80% 36%,

			transparent 0 31px,

			color-mix(
				in srgb,
				var(--fs-color-primary) 11%,
				transparent
			) 22px 33px,

			transparent 35px 70px
		);

	opacity: 1;
	mix-blend-mode: screen;

	-webkit-mask-image:
		linear-gradient(
			to right,
			#000 0%,
			rgba(0, 0, 0, 0.9) 44%,
			rgba(0, 0, 0, 0.35) 72%,
			transparent 100%
		);

	mask-image:
		linear-gradient(
			to right,
			#000 0%,
			rgba(0, 0, 0, 0.9) 34%,
			rgba(0, 0, 0, 0.35) 0%,
			transparent 100%
		);
}


/* Remove the light-version orange glow */
.effect-top-right-col-black > .col-inner::after {
	content: none;
	display: none;
}

.bor-bot-dot-t::after{
	content:"";
	display:block;
	width:58px;
	height:5px;
	margin:14px auto 0;
	background:
		linear-gradient(var(--fs-color-primary),var(--fs-color-primary)) left center/38px 2px no-repeat,
		radial-gradient(circle,var(--fs-color-primary)2px,transparent 2.5px) 45px center/5px 5px no-repeat,
		radial-gradient(circle,var(--fs-color-primary) 2px,transparent 2.5px) right center/5px 5px no-repeat;
}

.sim-bot-col > .col-inner{
border: 2px solid rgba(18, 30, 60, 0.035);
	border-radius:22px;
box-shadow: 0 12px 24px rgba(18, 30, 60, 0.05);
	z-index: 1;
}

.bor-bot-t::after{
	content:"";
	display:block;
	height:5px;
	margin-left: 44%;
	background:linear-gradient(var(--fs-color-primary),var(--fs-color-primary)) left center/32px 2px no-repeat;
}
@media(max-width: 48em) {
	.bor-bot-t::after {
			margin-left: 45%;

	}
}
.bor-bot-t.port::after {
	margin-left: 92% !important;
}

.service-card > .col-inner {
	position: relative;
}

.service-card > .col-inner::before {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 40px;
	height: 30px;
	display: grid;
	place-items: center;

	background: rgba(255,255,255,.92);
	border: 1px solid rgba(237,95,12,.14);
	border-radius: 7px;
	box-shadow: 0 4px 12px rgba(18,30,60,.035);

	color: #ED5F0C;
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
}

.service-01 > .col-inner::before { content: "01"; }
.service-02 > .col-inner::before { content: "02"; }
.service-03 > .col-inner::before { content: "03"; }
.service-04 > .col-inner::before { content: "04"; }
.service-05 > .col-inner::before { content: "05"; }
.service-06 > .col-inner::before { content: "06"; }
.service-07 > .col-inner::before { content: "07"; }
.service-08 > .col-inner::before { content: "08"; }
.service-09 > .col-inner::before { content: "09"; }



.glass-stage {
	position: relative;
	overflow: hidden;
	z-index: 5;
		border-radius: 20px;
}

.glass-row {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	background: rgba(5, 12, 29, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.17);
	border-radius: 22px;

	box-shadow:
		0 16px 40px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.11),
		inset 0 -1px 0 rgba(0, 0, 0, 0.24);
}

.glass-row > :not(.liquid-glass-canvas) {
	position: relative;
	z-index: 3;
}

.glass-row .liquid-glass-canvas {
	position: absolute;
	inset: 0;
	z-index: 0;

	width: 100%;
	height: 100%;

	display: block;
		border-radius: inherit;

	pointer-events: none;
}

/* Reflected edge light */
.glass-row::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;

	background:
		linear-gradient(
			155deg,
			rgba(255, 255, 255, 0.105) 0%,
			rgba(255, 255, 255, 0.025) 18%,
			transparent 42%
		),
		radial-gradient(
			ellipse at 18% 0%,
			rgba(255, 132, 55, 0.055),
			transparent 42%
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 1px 0 0 rgba(255, 255, 255, 0.045);
}
.port-top {
	background: color-mix(
		in srgb,
		var(--fs-color-primary) 2%,
		#ffffff
	);
    border: 2px solid color-mix(
		in srgb,
		var(--fs-color-primary) 10%,
		#ffffff
	);
	margin-right: 56.6% !important;
	width: fit-content;
	padding: 4px 14px;
	border-radius: 99px;
}
@media(max-width: 48em) {
	.port-top {
		margin-right: 0% !important;
	}
}

.home-prot-icon .icon-inner {
	background: rgba(245,245,245,.6);
	padding: 10px;
	border-radius: 12px;
		border: 1px solid rgb(235,235,235);

}
.home-prot-icon .icon-box-text {
	background: rgba(245,245,245,.6);
	padding: 4px;
	border-radius: 12px;
	border: 1px solid rgb(235,235,235);
	height: 45px;
	margin-right: 10px;
}
.home-prot-icon li {
	margin-right: 0 !important;
} 
.home-prot-icon ul {
	margin: 0 !important;
}
@media(max-width:48em) {
	.home-prot-icon li {
		font-size: .8em;
	}
	.home-prot-icon .icon-box-text {
		padding-right: 5px!important;
		padding:0;
		padding-top: 8px;
	}
	.home-prot-icon .icon-box-text .prim-uls li {
		padding-right: 15px;
	}

}

/* Outer and normal carousel columns */
.one-by-one-carousel .flickity-slider > .col.web-des-col-out > .col-inner,
.one-by-one-carousel .flickity-slider > .col.web-des-col > .col-inner {
	position: relative;

	background-color: rgba(255, 255, 255, 0.025) !important;

	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 20px !important;

	overflow: hidden;
}
.one-by-one-carousel .flickity-slider > .col.web-des-col > .col-inner {
	padding-bottom: 16px;
}


/* Icon container */
.one-by-one-carousel .web-des-icon .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	background-color: rgba(255, 255, 255, 0.05) !important;

	padding: 8px;
	border-radius: 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;

	margin: 10px 0;
}


/* Banner/image section */
	.one-by-one-carousel .web-des-ban-per .img-inner {
		height: 285px !important;
	}
	.one-by-one-carousel.rest .web-des-ban-per .img-inner {
		height: 241px !important;
	}
@media(max-width:48em) {
	.one-by-one-carousel .web-des-ban-per .img-inner {
		height: 400px !important;
	}
}


.one-by-one-carousel .web-des-ban-per {
	position: relative;
	padding: 12px 10px 0;
	border-radius: 22px;
	overflow: hidden;

	/* Fallback colors before JS finishes */
	--gradient-main: 18 32 72;
	--gradient-accent: 255 123 0;

	background:
		radial-gradient(
			85% 75% at 100% 100%,
			rgb(var(--gradient-accent) / 0.32) 0%,
			rgb(var(--gradient-accent) / 0) 72%
		),
		linear-gradient(
			15deg,
			color-mix(
				in srgb,
				rgb(var(--gradient-main)),
				white 13%
			) 0%,
			rgb(var(--gradient-main)) 48%,
			color-mix(
				in srgb,
				rgb(var(--gradient-main)),
				rgb(var(--gradient-accent)) 28%
			) 78%,
			rgb(var(--gradient-accent)) 145%
		);

	transition: background 0.4s ease;
}
/* Image clipping */
.one-by-one-carousel .web-des-ban-per .img-inner {
	position: relative;
	border-radius: 12px !important;
}


/* Ensure the image follows the same radius */
.one-by-one-carousel .web-des-ban-per .img-inner {
	display: block;
	width: 100%;
	border-radius: inherit;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	margin: 0 !important;
}


/* =========================================
   FLICKITY ARROWS — FINAL SAMPLE STYLE
========================================= */

.one-by-one-carousel {
	position: relative;
}


/* Circular button */
.one-by-one-carousel >
button.flickity-prev-next-button {
	position: absolute !important;

	/*
	 * Align with the center of the image,
	 * not the center of the entire card.
	 */
	top: 45% !important;
	transform: translateY(-50%) !important;

	width: 46px !important;
	height: 46px !important;

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

	padding: 0 !important;
	margin: 0 !important;

	background:
		linear-gradient(
			145deg,
			rgba(10, 26, 61, 0.97),
			rgba(2, 11, 32, 0.99)
		) !important;

	border:
		1px solid rgba(255, 105, 18, 0.95) !important;

	border-radius: 50% !important;

	box-shadow:
		0 0 5px rgba(255, 102, 15, 0.48),
		0 0 15px rgba(255, 102, 15, 0.17),
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		inset 0 0 12px rgba(255, 255, 255, 0.025),
		0 7px 18px rgba(0, 0, 0, 0.38) !important;

	opacity: 1 !important;
	z-index: 30 !important;

	outline: none !important;
	cursor: pointer;

	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease;
}


/* Correct position in RTL */
.one-by-one-carousel >
button.flickity-prev-next-button.previous {
	left: 8px !important;
	right: auto !important;
}

.one-by-one-carousel >
button.flickity-prev-next-button.next {
	right: 8px !important;
	left: auto !important;
}


/* Hide Flickity's original SVG */
.one-by-one-carousel
button.flickity-prev-next-button
.flickity-button-icon {
	display: none !important;
}


/* Custom chevron */
.one-by-one-carousel
button.flickity-prev-next-button::before {
	content: "";

	display: block;

	width: 9px;
	height: 9px;

	border-top: 2px solid #ff9a52;
	border-right: 2px solid #ff9a52;

	filter:
		drop-shadow(
			0 0 3px rgba(255, 112, 31, 0.65)
		);

	transition:
		border-color 0.25s ease,
		filter 0.25s ease;
}


/* Left arrow */
.one-by-one-carousel
button.flickity-prev-next-button.previous::before {
	transform: rotate(-135deg);
	margin-left: 3px;
}


/* Right arrow */
.one-by-one-carousel
button.flickity-prev-next-button.next::before {
	transform: rotate(45deg);
	margin-right: 3px;
}


/* Hover */
.one-by-one-carousel >
button.flickity-prev-next-button:hover {
	background:
		linear-gradient(
			145deg,
			rgba(14, 34, 75, 1),
			rgba(3, 15, 40, 1)
		) !important;

	border-color: #ff7518 !important;

	box-shadow:
		0 0 7px rgba(255, 102, 15, 0.7),
		0 0 20px rgba(255, 102, 15, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 9px 22px rgba(0, 0, 0, 0.42) !important;

	transform:
		translateY(-50%)
		scale(1.06) !important;
}

.one-by-one-carousel
button.flickity-prev-next-button:hover::before {
	border-color: #ffc091;

	filter:
		drop-shadow(
			0 0 5px rgba(255, 119, 35, 0.85)
		);
}


/* Disabled button at the start/end */
.one-by-one-carousel >
button.flickity-prev-next-button:disabled {
	opacity: 0.28 !important;
	cursor: default;

	border-color:
		rgba(255, 255, 255, 0.18) !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

	transform:
		translateY(-50%) !important;
}


/* Mobile */
@media (max-width: 849px) {

	.one-by-one-carousel >
	button.flickity-prev-next-button {
		top: 45% !important;

		width: 40px !important;
		height: 40px !important;
	}

	.one-by-one-carousel >
	button.flickity-prev-next-button.previous {
		left: 5px !important;
		right: auto !important;
	}

	.one-by-one-carousel >
	button.flickity-prev-next-button.next {
		right: 5px !important;
		left: auto !important;
	}

	.one-by-one-carousel
	button.flickity-prev-next-button::before {
		width: 8px;
		height: 8px;
		border-width: 2px;
	}
}

.barnd-icons-home > .col-inner {
background:
	linear-gradient(
		180deg,
		rgba(10, 24, 59, 0.82) 0%,
		rgba(7, 18, 47, 0.88) 100%
	);

border: 1px solid rgba(105, 132, 190, 0.14);
border-radius: 18px;

box-shadow:
	inset 0 1px 0 rgba(255, 255, 255, 0.018),
	inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Base thumbnail card */
.brand-samples > .col-inner {
	position: relative;
	overflow: hidden;

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

	border: 2px solid rgba(126, 151, 205, 0.18);
	border-radius: 12px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025);

	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.3s ease;

	cursor: pointer;
}


/* Hover — softer orange */
.brand-samples:hover > .col-inner {
	border-color: rgba(224, 96, 19, 0.82);

	box-shadow:
		0 0 5px rgba(230, 96, 16, 0.34),
		0 0 14px rgba(230, 96, 16, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/* Clicked / selected — sample orange */
.brand-samples.is-selected > .col-inner {
	border-color: #e66b18;

	box-shadow:
		0 0 6px rgba(230, 107, 24, 0.58),
		0 0 17px rgba(230, 96, 16, 0.22),
		inset 0 0 7px rgba(230, 96, 16, 0.06);
}

.bor-sha-img .img-inner {
	border: 2px solid rgb(225,225,225);
	border-radius: 22px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	transition: all .3s;
}
.bor-sha-img .img-inner:hover {
	border-color: var(--fs-color-primary);
	transform: translateY(-5px);
}
.flickity-page-dots .dot.is-selected {
	background: var(--fs-color-primary) !important;
	border-color: var(--fs-color-primary);
}
.flickity-page-dots .dot {
		background: var(-fs-color-secondary) !important;
	border-color: var(-fs-color-secondary);
}
.flickity-page-dots {
	margin-bottom: -5% !important;
}
@media(max-width:48em) {
	.flickity-page-dots {
	margin-bottom: -11% !important;
}
}
/* =========================================================
   PROCESS CARD CONNECTOR DOTS
   Classes:
   dot-left
   dot-right
   dot-both
========================================================= */

:root {
    --process-dot-size: 32px;
    --process-line-length: 28px;
    --process-line-width: 3px;
}

/* Flatsome column inner */
.dot-left > .col-inner,
.dot-right > .col-inner,
.dot-both > .col-inner {
    position: relative;
    overflow: visible !important;
    z-index: 2;
}

/* Shared connector styling */
.dot-left > .col-inner::before,
.dot-both > .col-inner::before,
.dot-right > .col-inner::after,
.dot-both > .col-inner::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(
        var(--process-line-length) +
        var(--process-dot-size)
    );
    height: var(--process-dot-size);

    pointer-events: none;
    z-index: 2;

    transform: translateY(-50%);

    filter:
        drop-shadow(
            0 0 4px
            color-mix(
                in srgb,
                var(--fs-color-primary) 55%,
                transparent
            )
        )
        drop-shadow(
            0 0 10px
            color-mix(
                in srgb,
                var(--fs-color-primary) 22%,
                transparent
            )
        );
}


/* =========================================================
   LEFT DOT + CONNECTOR
========================================================= */

.dot-left > .col-inner::before,
.dot-both > .col-inner::before {
    left: calc(
        (
            var(--process-line-length) +
            var(--process-dot-size) / 2
        ) * -1
    );

    background:

        /* White center + orange ring */
        radial-gradient(
            circle,
            #ffffff 0 3px,
            var(--fs-color-primary) 3.5px 7px,
            color-mix(
                in srgb,
                var(--fs-color-primary) 25%,
                transparent
            ) 7.5px 9px,
            transparent 9.5px
        )
        right center /
        var(--process-dot-size)
        var(--process-dot-size)
        no-repeat,

        /* Connector line */
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--fs-color-primary) 25%,
                transparent
            ),
            var(--fs-color-primary)
        )
        left center /
        calc(100% - var(--process-dot-size) / 2)
        var(--process-line-width)
        no-repeat;
}


/* =========================================================
   RIGHT DOT + CONNECTOR
========================================================= */

.dot-right > .col-inner::after,
.dot-both > .col-inner::after {
    right: calc(
        (
            var(--process-line-length) +
            var(--process-dot-size) / 2
        ) * -1
    );

    background:

        /* White center + orange ring */
        radial-gradient(
            circle,
            #ffffff 0 3px,
            var(--fs-color-primary) 3.5px 7px,
            color-mix(
                in srgb,
                var(--fs-color-primary) 25%,
                transparent
            ) 7.5px 9px,
            transparent 9.5px
        )
        left center /
        var(--process-dot-size)
        var(--process-dot-size)
        no-repeat,

        /* Connector line */
        linear-gradient(
            90deg,
            var(--fs-color-primary),
            color-mix(
                in srgb,
                var(--fs-color-primary) 25%,
                transparent
            )
        )
        right center /
        calc(100% - var(--process-dot-size) / 2)
        var(--process-line-width)
        no-repeat;
}
/* =========================================================
   MOBILE VERTICAL PROCESS DOTS
   Classes:
   dot-top
   dot-bottom
   dot-top-bottom
========================================================= */

@media screen and (max-width: 849px) {

    :root {
        --process-mobile-dot-size: var(--process-dot-size);
        --process-mobile-line-length: 28px;
        --process-mobile-line-width: var(--process-line-width);
    }


    /* -----------------------------------------------------
       Hide desktop left/right connectors on mobile
    ----------------------------------------------------- */

    .dot-left > .col-inner::before,
    .dot-both > .col-inner::before,
    .dot-right > .col-inner::after,
    .dot-both > .col-inner::after {
        display: none;
    }


    /* -----------------------------------------------------
       Prepare mobile vertical-dot columns
    ----------------------------------------------------- */

    .dot-top > .col-inner,
    .dot-bottom > .col-inner,
    .dot-top-bottom > .col-inner {
        position: relative;
        overflow: visible !important;
        z-index: 2;
    }


    /* Shared mobile connector styling */

    .dot-top > .col-inner::before,
    .dot-top-bottom > .col-inner::before,
    .dot-bottom > .col-inner::after,
    .dot-top-bottom > .col-inner::after {
        content: "";
        display: block;
        position: absolute;

        width: var(--process-mobile-dot-size);

        height: calc(
            var(--process-mobile-line-length) +
            var(--process-mobile-dot-size)
        );

        pointer-events: none;
        z-index: 10;

        filter:
            drop-shadow(
                0 0 4px
                color-mix(
                    in srgb,
                    var(--fs-color-primary) 55%,
                    transparent
                )
            )
            drop-shadow(
                0 0 10px
                color-mix(
                    in srgb,
                    var(--fs-color-primary) 22%,
                    transparent
                )
            );
    }


    /* =====================================================
       TOP DOT + VERTICAL CONNECTOR
    ===================================================== */

    .dot-top > .col-inner::before,
    .dot-top-bottom > .col-inner::before {
        top: calc(
            (
                var(--process-mobile-line-length) +
                var(--process-mobile-dot-size) / 2
            ) * -1
        );

        bottom: auto;
        left: 50%;
        right: auto;

        transform: translateX(-50%);

        background:

            /* White center + primary-color ring */
            radial-gradient(
                circle,
                #ffffff 0 3px,
                var(--fs-color-primary) 3.5px 7px,
                color-mix(
                    in srgb,
                    var(--fs-color-primary) 25%,
                    transparent
                ) 7.5px 9px,
                transparent 9.5px
            )
            center bottom /
            var(--process-mobile-dot-size)
            var(--process-mobile-dot-size)
            no-repeat,

            /* Vertical connector line */
            linear-gradient(
                180deg,
                color-mix(
                    in srgb,
                    var(--fs-color-primary) 20%,
                    transparent
                ),
                var(--fs-color-primary)
            )
            center top /
            var(--process-mobile-line-width)
            calc(100% - var(--process-mobile-dot-size) / 2)
            no-repeat;
    }


    /* =====================================================
       BOTTOM DOT + VERTICAL CONNECTOR
    ===================================================== */

    .dot-bottom > .col-inner::after,
    .dot-top-bottom > .col-inner::after {
        top: auto;

        bottom: calc(
            (
                var(--process-mobile-line-length) +
                var(--process-mobile-dot-size) / 2
            ) * -1
        );

        left: 50%;
        right: auto;

        transform: translateX(-50%);

        background:

            /* White center + primary-color ring */
            radial-gradient(
                circle,
                #ffffff 0 3px,
                var(--fs-color-primary) 3.5px 7px,
                color-mix(
                    in srgb,
                    var(--fs-color-primary) 25%,
                    transparent
                ) 7.5px 9px,
                transparent 9.5px
            )
            center top /
            var(--process-mobile-dot-size)
            var(--process-mobile-dot-size)
            no-repeat,

            /* Vertical connector line */
            linear-gradient(
                180deg,
                var(--fs-color-primary),
                color-mix(
                    in srgb,
                    var(--fs-color-primary) 20%,
                    transparent
                )
            )
            center bottom /
            var(--process-mobile-line-width)
            calc(100% - var(--process-mobile-dot-size) / 2)
            no-repeat;
    }
}

/* =========================================================
   COLUMN CONNECTORS
   Add class "glow-between-columns" to the Row
========================================================= */

.glow-between-columns {
    --connector-color: var(--fs-color-primary);
    --connector-top: 8px;
    --connector-height: 120px;
    --connector-width: 16px;

    overflow: visible !important;
}

.glow-between-columns > .col {
    position: relative;
    overflow: visible !important;
}

/* Line and dot between every column */
.glow-between-columns > .col:not(:last-child)::after {
    content: "";
    position: absolute;

    top: var(--connector-top);
    inset-inline-end: calc(var(--connector-width) / -2);

    width: var(--connector-width);
    height: var(--connector-height);

    pointer-events: none;
    z-index: 5;

    background:

        /* Soft glow around dot */
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--connector-color) 28%,
                transparent
            ) 0%,
            transparent 72%
        )
        center / 16px 16px no-repeat,

        /* Center dot */
        radial-gradient(
            circle,
            var(--connector-color) 0 50%,
            transparent 58%
        )
        center / 8px 8px no-repeat,

        /* Subtle vertical line */
        linear-gradient(
            to bottom,
            transparent 0%,
            color-mix(
                in srgb,
                var(--connector-color) 18%,
                transparent
            ) 18%,
            color-mix(
                in srgb,
                var(--connector-color) 26%,
                transparent
            ) 50%,
            color-mix(
                in srgb,
                var(--connector-color) 18%,
                transparent
            ) 82%,
            transparent 100%
        )
        center / 1px 100% no-repeat;
	
	margin-top: 12%;
}

.glow-between-columns > .col:last-of-type::after {
    content: none !important;
} 
/* Hide connectors when columns stack */
@media (max-width: 849px) {
    .glow-between-columns > .col::after {
        display: none;
    }
}

/* Shared parent of the badge and pricing card */
.plus-table-wrap {
    position: relative;
    overflow: visible !important;
}

/* Card */
.plus-table > .col-inner {
    position: relative;
    isolation: isolate;
    overflow: visible !important;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 50% -10%,
            color-mix(
                in srgb,
                var(--fs-color-primary) 12%,
                transparent
            ),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #0e1636 0%,
            #0a102b 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 60px rgba(255,255,255,.015),
        0 20px 50px rgba(0,0,0,.38);
}

/* Gradient border */
.plus-table > .col-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    padding: 3px;
    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        color-mix(
            in srgb,
            var(--fs-color-primary) 95%,
            white 5%
        ) 0%,
        color-mix(
            in srgb,
            var(--fs-color-primary) 90%,
            transparent
        ) 18%,
        color-mix(
            in srgb,
            var(--fs-color-primary) 45%,
            transparent
        ) 55%,
        color-mix(
            in srgb,
            var(--fs-color-primary) 14%,
            transparent
        ) 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    filter: drop-shadow(
        0 0 7px
        color-mix(
            in srgb,
            var(--fs-color-primary) 35%,
            transparent
        )
    );
}

/* Badge */
.plus-sugg {
    position: absolute !important;
    top: 0;
    left: 50%;

    transform: translate(-50%, -50%);
    margin: 0 !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: max-content;
    padding: 7px 16px;

    border-radius: 10px;

    background: linear-gradient(
        180deg,
        #ff9c3a 0%,
        #ff8123 100%
    );

    color: #fff;
    font-weight: 700;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 6px 18px color-mix(
            in srgb,
            var(--fs-color-primary) 45%,
            transparent
        );

    overflow: hidden;
    z-index: 20;
}

/* White star */
.plus-sugg::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    background:
        url("https://eshel-studio.ir/wp-content/uploads/2026/07/star.png")
        center / contain no-repeat;

    filter:
        brightness(0)
        saturate(100%)
        invert(100%);
}

/* Badge highlight */
.plus-sugg::after {
    content: "";
    position: absolute;
    inset: 1px;

    border-radius: 9px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.18),
        transparent 50%
    );

    pointer-events: none;
}

.plus-sugg > * {
    position: relative;
    z-index: 1;
}

/* Basic Plan Badge */
.basic-badge {
    position: absolute !important;
    top: 0;
    left: 50%;

    transform: translate(-50%, -50%);
    margin: 0 !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: max-content;
    padding: 7px 16px;

    border-radius: 10px;

    /* Matches the purple card border */
    background: linear-gradient(
        180deg,
        #8174e8 0%,
        #6256bd 100%
    );

    color: #fff;
    font-weight: 700;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 6px 18px rgba(104, 88, 200, .35);

    overflow: hidden;
    z-index: 20;
}


/* Gift icon */
.basic-badge::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    background:
        url("https://eshel-studio.ir/wp-content/uploads/2026/09/giftbox.png")
        center / contain no-repeat;

    /* Makes icon white */
    filter:
        brightness(0)
        saturate(100%)
        invert(100%);
}


/* Top glass/highlight */
.basic-badge::after {
    content: "";
    position: absolute;
    inset: 1px;

    border-radius: 9px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.18),
        transparent 52%
    );

    pointer-events: none;
}


.basic-badge > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   PRICE ICON BOX
   Class: price-icon
========================================================= */

.price-icon .icon-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
		padding: 15px;
    width: 96px;
    height: 96px;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 30% 15%,
            rgba(255,255,255,.05),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #111936 0%,
            #0d1532 100%
        );

    border: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 25px rgba(255,255,255,.015),
        0 12px 30px rgba(0,0,0,.25);
}


/* Directional glass border */
.price-icon .icon-inner::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;
    padding: 1px;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,.32) 0%,
        rgba(255,255,255,.18) 18%,
        rgba(255,255,255,.06) 45%,
        rgba(255,255,255,.14) 72%,
        rgba(255,255,255,.03) 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}
/* =========================================================
   CUSTOM IMAGE ICON FOR LIST ITEMS
   Class: custom-check-list
========================================================= */

.custom-check-list ul {
    list-style: none;
    margin-right: 5%;
    padding: 0;
}

.custom-check-list li {
    position: relative;
    list-style: none;

    margin-bottom: 14px;

    line-height: 1.9;
}

/* Custom check icon */
.custom-check-list li::before {
    content: "";
    position: absolute;

    inset-inline-end: 103%;
    top: 50%;

    width: 24px;
    height: 24px;

    background-image: url("https://eshel-studio.ir/wp-content/uploads/2026/07/service-links-eshel-studio.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    transform: translateY(-50%);
}

/* Remove Flatsome/default markers */
.custom-check-list li::marker {
    content: "";
}

.custom-check-list.basic-color li::before {
	filter: brightness(0) saturate(100%) invert(67%) sepia(23%) saturate(1392%) hue-rotate(211deg) brightness(103%) contrast(101%);
}
.custom-check-list.pro-color li::before {
	filter: brightness(0) saturate(100%) invert(35%) sepia(14%) saturate(1269%) hue-rotate(286deg) brightness(95%) contrast(88%);
}
.pro-color img {
	filter: brightness(0) saturate(100%) invert(35%) sepia(14%) saturate(1269%) hue-rotate(286deg) brightness(95%) contrast(88%);
}

.plus-table.basic > .col-inner::before {
    content: "";
    background:
        linear-gradient(
            15deg,
            rgba(131,124,239,.18) 0%,
            rgba(131,124,239,.65) 55%,
            rgba(131,124,239,.95) 85%,
            rgba(131,124,239,.25) 100%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    filter:
        drop-shadow(
            0 0 8px rgba(131,124,239,.22)
        );
}
.plus-table.pro > .col-inner::before {
    content: "";

    background:
        linear-gradient(
            15deg,
            rgba(136,80,92,.18) 0%,
            rgba(136,80,92,.65) 55%,
            rgba(136,80,92,.95) 85%,
            rgba(136,80,92,.25) 100%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    filter:
        drop-shadow(
            0 0 8px rgba(136,80,92,.22)
        );
}

.plus-table .prim-but {
		padding: 12px 19px !important;
	min-height: 0px !important;
}

.plus-table .ser-but {
	padding: 12px 13px;
	margin: 0;
	margin-bottom: 11px;
}

.bor-sh-img .img-inner {
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* White → transparent gradient toward the top-right */
.grad-bot-right .img-inner {
    position: relative;
    overflow: hidden;
}

.grad-bot-right .img-inner::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 52%;
    z-index: 2;
    pointer-events: none;

    background:
        /* Stronger curved fade on the right */
        radial-gradient(
            ellipse 75% 90% at 82% 100%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.95) 28%,
            rgba(255, 255, 255, 0.58) 52%,
            rgba(255, 255, 255, 0.16) 70%,
            transparent 86%
        ),

        /* Softer fade across the left and center */
        radial-gradient(
            ellipse 72% 78% at 32% 108%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.88) 34%,
            rgba(255, 255, 255, 0.38) 58%,
            transparent 82%
        ),

        /* Main bottom-to-top fade */
        linear-gradient(
            to top,
            #fff 0%,
            rgba(255, 255, 255, 1) 13%,
            rgba(255, 255, 255, 0.82) 29%,
            rgba(255, 255, 255, 0.36) 51%,
            rgba(255, 255, 255, 0.08) 72%,
            transparent 100%
        );
}

.team-grad .img-inner {
    position: relative;
    overflow: hidden;
}

.team-grad .img-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        /* corners */
        radial-gradient(circle at top left,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 5%,
            rgba(255,255,255,0.85) 10%,
            transparent 18%
        ),
        radial-gradient(circle at top right,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 5%,
            rgba(255,255,255,0.85) 10%,
            transparent 18%
        ),
        radial-gradient(circle at bottom left,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 5%,
            rgba(255,255,255,0.9) 11%,
            transparent 20%
        ),
        radial-gradient(circle at bottom right,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 5%,
            rgba(255,255,255,0.9) 11%,
            transparent 20%
        ),

        /* edges */
        linear-gradient(to right,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 5%,
            rgba(255,255,255,0.75) 9%,
            transparent 15%
        ),
        linear-gradient(to left,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 5%,
            rgba(255,255,255,0.75) 9%,
            transparent 15%
        ),
        linear-gradient(to bottom,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 5%,
            rgba(255,255,255,0.65) 9%,
            transparent 14%
        ),
        linear-gradient(to top,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 6%,
            rgba(255,255,255,0.8) 11%,
            transparent 18%
        );
} 


/* Base gradient column */
.grad-col .col-inner {
    position: relative;
    overflow: hidden;
}

/* Keep content above gradient */
.grad-col .col-inner > * {
    position: relative;
    z-index: 1;
}

/* Blue gradient variant */
.grad-col .col-inner::before {
    content: "";
    position: absolute;
    margin: 8px;
    inset: 0;
    border-radius: 20px;

    pointer-events: none;
    z-index: 0;
}

.grad-col.blue-col .col-inner::before {
    background: linear-gradient(
        to bottom,
        rgba(238, 245, 255, 0.95) 0%,
        rgba(238, 245, 255, 0.75) 35%,
        rgba(238, 245, 255, 0.35) 65%,
        rgba(238, 245, 255, 0) 100%
    );
}
/* Pink gradient */
.grad-col.pink-col .col-inner::before {
    background: linear-gradient(
        to bottom,
        rgba(255, 244, 244, 0.95) 0%,
        rgba(255, 244, 244, 0.75) 35%,
        rgba(255, 244, 244, 0.35) 65%,
        rgba(255, 244, 244, 0) 100%
    );
}


/* Green gradient */
.grad-col.green-col .col-inner::before {
    background: linear-gradient(
        to bottom,
        rgba(243, 252, 244, 0.95) 0%,
        rgba(243, 252, 244, 0.75) 35%,
        rgba(243, 252, 244, 0.35) 65%,
        rgba(243, 252, 244, 0) 100%
    );
}


/* Purple gradient */
.grad-col.purple-col .col-inner::before {
    background: linear-gradient(
        to bottom,
        rgba(247, 244, 255, 0.95) 0%,
        rgba(247, 244, 255, 0.75) 35%,
        rgba(247, 244, 255, 0.35) 65%,
        rgba(247, 244, 255, 0) 100%
    );
}

/* Yellow gradient variant */
.grad-col.yellow-col .col-inner::before {
    background: linear-gradient(
        to bottom,
        rgba(255, 248, 220, 0.95) 0%,
        rgba(255, 248, 220, 0.75) 35%,
        rgba(255, 248, 220, 0.35) 65%,
        rgba(255, 248, 220, 0) 100%
    );
}


/* Orange gradient variant */
.grad-col.orange-col .col-inner::before {
    background: linear-gradient(
        to bottom,
        rgba(255, 239, 225, 0.95) 0%,
        rgba(255, 239, 225, 0.75) 35%,
        rgba(255, 239, 225, 0.35) 65%,
        rgba(255, 239, 225, 0) 100%
    );
}


/* Teal gradient variant */
.grad-col.teal-col .col-inner::before {
    background: linear-gradient(
        to bottom,
        rgba(225, 247, 245, 0.95) 0%,
        rgba(225, 247, 245, 0.75) 35%,
        rgba(225, 247, 245, 0.35) 65%,
        rgba(225, 247, 245, 0) 100%
    );
}


/* Coral gradient variant */
.grad-col.coral-col .col-inner::before {
    background: linear-gradient(
        to bottom,
        rgba(255, 232, 232, 0.95) 0%,
        rgba(255, 232, 232, 0.75) 35%,
        rgba(255, 232, 232, 0.35) 65%,
        rgba(255, 232, 232, 0) 100%
    );
}

/*contact us*/

.con-icon .icon {
	background: var(--fs-color-secondary);
	border-radius: 12px;
	padding: 12px;
	margin-top: 15%;
}
.con-icon .icon-box-img {
	padding-left: 2%;
}

.con-icon-2 .icon {
	background: #F6F6FB;
	border-radius: 12px;
	padding: 12px;
	margin-top: 15%;
}
.con-icon-2 .icon-box-img {
	padding-right: 1%;
}

.page-id-3540 .header-inner {
background: linear-gradient(
  180deg,
  rgba(7, 21, 55, 0.10) 0%,
  rgba(7, 21, 55, 0.06) 100%
);

border: 1px solid rgba(7, 21, 55, 0.10);

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

box-shadow:
  0 10px 30px rgba(7, 21, 55, 0.08),
  inset 0 1px 0 rgba(255,255,255,0.4);
}

.page-id-3540 .header-inner .nav > li > a {
    color: var(--fs-color-secondary) !important;
}

/* Auto scrolling plan list */
.aut-scro-lis.shop {
	    max-height: 160px !important;
}
.aut-scro-lis.pers {
	    max-height: 334px !important;
}
.aut-scro-lis {
    position: relative;

    /* Adjust this depending on the card */
    max-height: 470px;

    overflow-y: auto;
    overflow-x: hidden;

    /* Keeps scrolling contained inside the card */
    overscroll-behavior: contain;

    /* Smooth manual scrolling */
    scroll-behavior: smooth;

    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(160, 120, 255, 0.45) transparent;

    /* Nice subtle fade at top/bottom */

}


/* Chrome / Edge / Safari */
.aut-scro-lis::-webkit-scrollbar {
    width: 4px;
}

.aut-scro-lis::-webkit-scrollbar-track {
    background: transparent;
}

.aut-scro-lis::-webkit-scrollbar-thumb {
    background: rgba(160, 120, 255, 0.45);
    border-radius: 20px;
}

.aut-scro-lis::-webkit-scrollbar-thumb:hover {
    background: rgba(160, 120, 255, 0.75);
}

.mfp-bottom-bar {
	display: none;
}
img.mfp-img {
	padding: 0;
}
.mfp-arrow {
	display: none;
}
.mfp-img {
	border-radius: 16px;
}

.fea-icon {
    margin-bottom: 7px !important;
    border-radius: 5px;
    padding: 3px 6px;
    transition: background .25s ease;
}

/* odd rows: subtle primary */
.fea-icon:nth-child(odd) {
    background: linear-gradient(
        to left,
        color-mix(
            in srgb,
            var(--fs-color-primary) 7%,
            transparent
        ) 0%,
        transparent 100%
    );
}

/* even rows: subtle secondary */
.fea-icon:nth-child(even) {
    background: linear-gradient(
        to left,
        color-mix(
            in srgb,
            var(--fs-color-secondary) 7%,
            transparent
        ) 0%,
        transparent 100%
    );
}

.fea-icon .icon-box-img {
    width: 25px !important;
}

.vid-sec-ico .icon img {
	border-radius: 99px;
}
.vid-sec-ico .icon {
	border-radius: 99px;
	border: 2px solid var(--fs-color-primary); 
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}