/*   
Theme Name: وب‌سایت شرکت پردازش موازی سامان
Theme URI: http://www.sppcco.com
Description: قالب جدید به تاریخ سال 1403 
Author: واحد وب سایت
Version: 1.00
*/
@font-face {
	font-family: 'AnjomanMax';
	font-style: normal;
	font-weight: normal;
	src: url('./fonts/woff/AnjomanMax-Regular.woff') format('woff'),
		url('./fonts/woff2/') format('woff2');
}

@font-face {
	font-family: 'AnjomanMaxBold';
	font-style: normal;
	font-weight: bolder;
	src: url('./fonts/woff/AnjomanMax-Bold.woff') format('woff'),
		url('./fonts/woff2/') format('woff2');
}

/* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */

html {
	scroll-behavior: smooth !important;
	overflow-x: hidden;
	cursor: default;
}

#bottomline {
	width: 100%;
	height: 4px;
	background-image: url(img/top-line.jpg);
}

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	outline: 0;
	padding: 0;
	margin: 0;
}

.text-justify {
	text-align: justify;
	text-justify: inter-word;
}

body {
	font-family: 'AnjomanMax' !important;
	/*background: linear-gradient(to top, #e8ebee 0%, white 100%);*/
	direction: rtl;
	/*background-color: #ffffff !important;*/
	background-image: url(./img/back.jpg);
	margin: 0;
	padding: 0 !important;
	font-size: 14px !important;
}

.mega-menu-wrap {}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'AnjomanMaxBold' !important;
}

.hidden {
	visibility: hidden;
}

#toggle-StickySocial {
	font-size: 20px !important;
}

.card-white {

	background-image: linear-gradient(40deg,
			hsl(0deg 0% 93%) 0%,
			hsl(0deg 0% 95%) 29%,
			hsl(0deg 0% 96%) 43%,
			hsl(0deg 0% 97%) 57%,
			hsl(0deg 0% 99%) 71%,
			hsl(0deg 0% 100%) 100%);

	border-radius: 10px;
	height: 400px !important;
	cursor: default;
}

.tadbirtitlebar {
	position: relative;
	max-width: 350px;
	height: 50px;
	margin: 0 auto 50px;
	border-bottom: 1px solid #dddddd;
	text-align: center;
	letter-spacing: -1px;
	font-size: 1.5em;
}

.tadbirtitlebar::before {
	position: absolute;
	right: 35%;
	top: 100%;
	width: 30%;
	height: 3px;
	content: "";
	background: #157ec2;
}

.tadbirtitlebar-center {
	position: relative;
	max-width: 100%;
	height: 50px;
	margin: 0 auto 50px;
	border-bottom: 1px solid #dddddd;
	text-align: center;
	letter-spacing: -1px;
	font-size: 1.5em;
}

.tadbirtitlebar-center::before {
	position: absolute;
	right: 35%;
	top: 100%;
	width: 30%;
	height: 3px;
	content: "";
	background: #157ec2;
}

/*---------------------------------
				MenuBar 
----------------------------------*/
#mega-menu-wrap-max_mega_menu_1 {
	font-family: "AnjomanMax" !important;
	border-top: solid 5px #157ec2 !important;
}

#mega-menu-wrap-max_mega_menu_1.mega-sticky #mega-menu-max_mega_menu_1 {
	background: #000000 !important;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.51) 0%, rgba(43, 43, 43, 1) 50%, rgba(0, 0, 0, 1) 100%) !important;
}


.mega-sub-menu {
	margin: 0 auto !important;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px !important;
}

.mega-sub-menu>ul {
	display: inline !important;
}

/*----------------------------------------------------
   			 Scroll Bar
-----------------------------------------------------*/

/*---------- Chrome -----------*/
::-webkit-scrollbar {
	width: 10px;
	padding: 5px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #313131;
	border: 6px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
	background: #000000;
}

/*---------------------------------
				Slide Show 
----------------------------------*/
.carousel-inner {
	height: 85vh;
}

.carousel-inner img {
	width: 100%;
	height: 85vh;
}

.carousel-caption {
	-webkit-text-stroke: 2px black;
	paint-order: stroke fill;
}

#indexarrowicon {
	font-size: 60px !important;
	color: #333333 !important;
}

/*---------------------------------------------
				Loading page
---------------------------------------------*/
/* HTML: <div class="loader"></div> */
#vmsLoadingBack {
	position: fixed;
	background-color: #1d1d1d;
	color: #FFF;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999999999;
}

#vmsLoading {
	position: absolute;
	width: 300px;
	height: auto;
	top: 45%;
	left: 50%;
	margin-left: -150px;
	text-align: left;
	padding: 10px;
	box-sizing: border-box;
	direction: rtl;
	font-size: 13px;
	font-weight: bold;
	z-index: 10011;
}

/* From Uiverse.io by satyamchaudharydev */
.loader {
	display: block;
	--height-of-loader: 4px;
	--loader-color: #0071e2;
	width: 130px;
	height: var(--height-of-loader);
	border-radius: 30px;
	background-color: rgba(0, 0, 0, 0.2);
	position: relative;
}

.loader::before {
	content: "";
	position: absolute;
	background: var(--loader-color);
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	border-radius: 30px;
	animation: moving 1s ease-in-out infinite;
	;
}

@keyframes moving {
	50% {
		width: 100%;
	}

	100% {
		width: 0;
		right: 0;
		left: unset;
	}
}

/* From Uiverse.io by Clemix37 
.loader {
	width: 60px;
	height: 60px;
}

.loader::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border-top: 2px solid #0084ff;
	border-right: 2px solid transparent;
	animation: spinner8217 0.8s linear infinite;
}

@keyframes spinner8217 {
	to {
		transform: rotate(360deg);
	}
}
*/
/*----------------------------------------------
				Footer Area
-----------------------------------------------*/
.blog-footer .footer-ribbon span {
	color: #FFF;
	font-size: 1.2em;
}

.blog-footer .footer-ribbon {
	background: #00b6ff;
}

.blog-footer .footer-ribbon {
	position: absolute;
	margin: -64px 10px 0 0;
	right: 40px;
	padding: 9px 20px 7px 20px;
	font-family: 'AnjomanMaxBold';
}

.blog-footer .footer-ribbon::before {
	border-right-color: #00b6ff !important;
	border-left-color: #0490c7 !important;
}

.blog-footer .footer-ribbon::before {
	border-left: 10px solid #646464;
	border-left-color: rgb(100, 100, 100);
	border-top: 16px solid transparent;
	content: "";
	display: block;
	height: 0;
	left: 100%;
	position: absolute;
	top: 0;
	width: 7px;
}


.blog-footer {
	width: 100%;
	height: 100%;
	background: #FFF;
	background-attachment: fixed;
	background-image: radial-gradient(4px 100px at 0px 235px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 235px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 117.5px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 252px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 252px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 126px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 150px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 150px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 75px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 253px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 253px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 126.5px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 204px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 204px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 102px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 134px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 134px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 67px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 179px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 179px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 89.5px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 299px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 299px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 149.5px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 215px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 215px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 107.5px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 281px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 281px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 140.5px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 158px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 158px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 79px, #ededed 100%, #0000 150%),
		radial-gradient(4px 100px at 0px 210px, #ededed, #0000),
		radial-gradient(4px 100px at 300px 210px, #ededed, #0000),
		radial-gradient(1.5px 1.5px at 150px 105px, #ededed 100%, #0000 150%);
	background-size:
		300px 235px,
		300px 235px,
		300px 235px,
		300px 252px,
		300px 252px,
		300px 252px,
		300px 150px,
		300px 150px,
		300px 150px,
		300px 253px,
		300px 253px,
		300px 253px,
		300px 204px,
		300px 204px,
		300px 204px,
		300px 134px,
		300px 134px,
		300px 134px,
		300px 179px,
		300px 179px,
		300px 179px,
		300px 299px,
		300px 299px,
		300px 299px,
		300px 215px,
		300px 215px,
		300px 215px,
		300px 281px,
		300px 281px,
		300px 281px,
		300px 158px,
		300px 158px,
		300px 158px,
		300px 210px,
		300px 210px,
		300px 210px;
	animation: hi 150s linear infinite;
}

@keyframes hi {
	0% {
		background-position:
			0px 220px,
			3px 220px,
			151.5px 337.5px,
			25px 24px,
			28px 24px,
			176.5px 150px,
			50px 16px,
			53px 16px,
			201.5px 91px,
			75px 224px,
			78px 224px,
			226.5px 350.5px,
			100px 19px,
			103px 19px,
			251.5px 121px,
			125px 120px,
			128px 120px,
			276.5px 187px,
			150px 31px,
			153px 31px,
			301.5px 120.5px,
			175px 235px,
			178px 235px,
			326.5px 384.5px,
			200px 121px,
			203px 121px,
			351.5px 228.5px,
			225px 224px,
			228px 224px,
			376.5px 364.5px,
			250px 26px,
			253px 26px,
			401.5px 105px,
			275px 75px,
			278px 75px,
			426.5px 180px;
	}

	to {
		background-position:
			0px 6800px,
			3px 6800px,
			151.5px 6917.5px,
			25px 13632px,
			28px 13632px,
			176.5px 13758px,
			50px 5416px,
			53px 5416px,
			201.5px 5491px,
			75px 17175px,
			78px 17175px,
			226.5px 17301.5px,
			100px 5119px,
			103px 5119px,
			251.5px 5221px,
			125px 8428px,
			128px 8428px,
			276.5px 8495px,
			150px 9876px,
			153px 9876px,
			301.5px 9965.5px,
			175px 13391px,
			178px 13391px,
			326.5px 13540.5px,
			200px 14741px,
			203px 14741px,
			351.5px 14848.5px,
			225px 18770px,
			228px 18770px,
			376.5px 18910.5px,
			250px 5082px,
			253px 5082px,
			401.5px 5161px,
			275px 6375px,
			278px 6375px,
			426.5px 6480px;
	}
}

.blog-footer>.col>h3> {
	font-size: 18px !important;
}

.page_item {
	list-style: none !important;
}

.pages {
	background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 1px, transparent 1px) 0% 0%/3px 3px no-repeat,
		radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 1px, transparent 1px) 100% 0%/3px 3px no-repeat,
		radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 1px, transparent 1px) 0% 100%/3px 3px no-repeat,
		radial-gradient(circle at 0 0, #ffffff 0, #ffffff 1px, transparent 1px) 100% 100%/3px 3px no-repeat,
		linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 4px) calc(100% - 6px) no-repeat,
		linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 6px) calc(100% - 4px) no-repeat,
		linear-gradient(40deg, transparent 91%, rgba(0, 0, 0, 0.08) 100%);
	border-radius: 3px;
	padding: 18px;
	box-sizing: border-box;
}

.footercpright {
	/*background-size: 100% 100%;
background-position: 0px 0px;
background-image: linear-gradient(90deg, #060008FF 0%, #1C1C1CFF 100%);*/
	background-size: 100% 100%;
	background-position: 0px 0px;
	background-image: linear-gradient(180deg, #000000FF 0%, #020B14FF 100%);
	color: #FFF;
	text-align: center;
	padding: 40px;
}

.wp-block-group__inner-container>h3 {

	font-size: 18px;
}

/*--------------------------------------------------------
					Breadcrumb
---------------------------------------------------------*/
.breadcrumb-item.active {
	background-color: transparent !important;
	color: #000 !important;
}

.breadcrumb {
	background: linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 4px) calc(100% - 4px) no-repeat,
		linear-gradient(158deg, transparent 92%, #c1c1c1 100%);
	border-radius: 0px;
	box-sizing: border-box;
	margin-top: 10px !important;
}

.socialsticky {
	z-index: 10000;
	width: 40px;
	position: fixed;
	margin-top: 5%;
	left: 0px;
	cursor: pointer;
}

.socialsticky a {
	text-decoration: none !important;
}

.link-dark {
	text-decoration: none;
}

#canvas {
	z-index: -100;
	position: absolute;
	width: 100%;
	height: 100vh;
	background: transparent !important;
}

/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate img {
	transition: transform .5s ease-in-out;
}

/* The Transformation */
.img-hover-zoom--zoom-n-rotate:hover img {
	transform: scale(2) rotate(25deg);
}

.panel-quote {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 400px;
	margin: auto;
	box-sizing: border-box;
	background-color: #fff;
}

.social-share {
	text-align: center;
}

.social-share i {
	color: #333;
}

.quote-progress {
	width: 0;
	height: 3px;
	background-color: #333;
}

blockquote.wp-block-quote {
	padding: 30px;
	font-size: 1.4em;
	background-color: #f0f0f0;
	border-radius: 5px !important;
	border-right: solid 5px #157ec2;
}

.quote {
	font-family: 'AnjomanMax';
	font-style: italic;
}

.author {
	font-size: 0.6em;
	font-weight: lighter;
	text-align: right;
}

/* Quote Navigation */
.quote-nav {
	display: flex;
	align-items: stretch;
	width: 100%;
	padding-bottom: 30px;
}

.previous {
	margin: auto;
}

.next {
	margin: auto;
}

/*------------------------ Qoutes Box ------------------------*/


/* Slideshow container */
.slideshow-container {
	position: relative;
}

/* Slides */
.mySlides {
	display: none;
	padding: 60px;
	color: #000;
	background: #EDEDED;
	background: linear-gradient(90deg, rgba(237, 237, 237, 1) 0%, rgba(255, 255, 255, 0.6) 28%, rgba(255, 255, 255, 0.6) 70%, rgba(237, 237, 237, 1) 100%);
	width: 1000px;
	height: 300px;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -30px;
	padding: 16px;
	color: #FFF;
	font-weight: bold;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	position: absolute;
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {

	color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
	text-align: center;
	padding: 20px;

}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active,
.dot:hover {
	background-color: #717171;
}

/* Add an italic font style to all quotes */


/* Add a blue color to the author */
.author {
	color: #FFF;
}

.card-qoutes {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ededed !important;
	background-image: url(./img/sppccolocation-bg.png);
	background-attachment: fixed;
}

@keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 40px 40px;
	}
}

.mks_social_widget_ul>li>a {
	text-decoration: none !important;
}

/*--------------- livechatsppcco -------------------*/
#livechatsppcco_icon {
	border-radius: 10px;
	padding: 10px;
	position: fixed;
	bottom: 0;
	margin-bottom: 20px;
	margin-right: 20px;
	cursor: pointer;
	z-index: 2;
	opacity: 1;
	width: 100px;
	color: #FFF !important;
	background-color: #212529 !important;
}

#livechatsppcco_icon_i {
	color: #FFFF;
	font-size: 20px;
}

#bell {}

#livechatsppcco_body {
	width: 100% !important;
	max-width: 405px !important;
	box-sizing: border-box !important;
	height: 65% !important;
	max-height: 680px !important;
	background: #ffffff !important;
	box-shadow: 0 12px 20px 0 rgba(0, 0, 0, .15) !important;
	direction: rtl !important;
	overflow: hidden !important;
	border-radius: 4px !important;
	min-height: 340px !important;
	line-height: normal !important;
	pointer-events: all !important;
	transition: all 0.2s linear !important;
	position: fixed;
	bottom: 0;
	margin-bottom: 20px;
	margin-right: 20px;
	cursor: pointer;
	opacity: 0;
	z-index: -1000;
}

#livechatsppcco_body_header {
	background-color: #0173be;
	width: 100%;
	padding: 20px;
	color: #FFF;
	font-size: 13px;
}

#livechatsppcco__wrapper::after {
	content: "";
	display: table;
	clear: both;
	min-height: 100%;
}

#livechatsppcco__col1 {
	float: right;
	width: 70%;
	padding: 10px;
}

#livechatsppcco__col2 {
	float: left;
	width: 30%;
}

#livechatsppcco__div2:hover {
	background-color: rgba(204, 204, 204, 0.349);
}

#livechatsppcco__inner {
	width: 100% !important;
	height: auto !important;
	min-height: 500px !important;
	background-color: #dddedf !important;
	font-size: 13px !important;
	color: #252525 !important;
	padding: 10px !important;
}

#livechatsppcco__fnum {
	margin-top: 5% !important;
	width: 80% !important;
	border-radius: 5px !important;
	border: none !important;
	background-color: #FFF !important;
	outline: none !important;
	font-size: 13px !important;
	width: 100%;
}

#livechatsppcco__sunit {
	margin-top: 5% !important;
	width: 80% !important;
	border-radius: 5px !important;
	border: none !important;
	background-color: #FFF !important;
	outline: none !important;
	font-size: 13px !important;
	width: 100%;
}

#livechatsppcco__footer {
	width: 100%;
	border-top: solid 1px #CCC;
	background-color: #FFF;
}

#txtarea___msglivechat {
	border: none;
	resize: none;
	outline: none;
	font-size: 13px;

}



#txtarea___msglivechat::-webkit-scrollbar {
	width: 10px;
}

#txtarea___msglivechat::-webkit-scrollbar-track {
	background: #f1f1f1;
}

#txtarea___msglivechat::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px;
}

#txtarea___msglivechat::-webkit-scrollbar-thumb:hover {

	background: #555;
}


#sentmsg__livechatsppcco::-webkit-scrollbar {
	width: 10px;
}

#sentmsg__livechatsppcco::-webkit-scrollbar-track {
	background: #f1f1f1;
}

#sentmsg__livechatsppcco::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px;
}

#sentmsg__livechatsppcco::-webkit-scrollbar-thumb:hover {

	background: #555;
}


#livechatsppcco__div1 {
	display: inline-block;
	width: 90%;
}

#livechatsppcco__div2 {
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	border-radius: 5px;
	transition: all 0.2s;
}

#livechatsppcco__subform {
	width: 80%;
	margin-top: 5%;
	border: none !important;
	background-color: #0173be !important;
	color: #FFF !important;
	font-size: 13px !important;
	border-radius: 5px;
	box-shadow: -13px 17px 109px -21px rgba(0, 0, 0, 0.85);
	-webkit-box-shadow: -13px 17px 109px -21px rgba(0, 0, 0, 0.85);
	-moz-box-shadow: -13px 17px 109px -21px rgba(0, 0, 0, 0.85);
}

#livechatsppcco__subform:hover {
	background-color: #08598f !important;
}


/*-----------------------------*/
.livechatsppcco___usrmsg {
	background: rgb(38, 116, 193);
	background: linear-gradient(180deg, rgba(38, 116, 193, 1) 37%, rgba(0, 51, 102, 1) 84%);
	border-radius: 20px 20px 0px;
	float: right;
	text-align: right;
	width: 60%;
	max-width: 60%;
	height: auto;
	margin-top: 5%;
	color: #FFF !important;
}

.livechatsppcco___usrmsg_header {
	direction: rtl;
	padding: 10px;
	border-bottom: solid 1px #008be9;
	width: 95%;
	text-align: right;
	margin: auto;
	color: #d5d5d5;
}

.livechatsppcco___usrmsg_body {
	text-align: right;
	padding: 10px;
	direction: rtl;
	color: #FFF;
}



.livechatsppcco___agentmsg {
	background: rgb(115, 213, 14);
	background: linear-gradient(180deg, rgba(115, 213, 14, 1) 0%, rgba(4, 74, 5, 1) 100%);
	border-radius: 20px 20px 0px;
	float: left;
	text-align: right;
	width: 60%;
	max-width: 60%;
	height: auto;
	margin-top: 5%;
	color: #FFF !important;
}

.livechatsppcco___agentmsg_header {
	direction: rtl;
	padding: 10px;
	border-bottom: solid 1px #48830e;
	width: 95%;
	text-align: right;
	margin: auto;
	color: #d5d5d5;
}

.livechatsppcco___agentmsg_body {
	text-align: right;
	padding: 10px;
	direction: rtl;
	color: #FFF;
}




#sentmsg__livechatsppcco {
	width: 100% !important;
	max-height: 420px !important;
	overflow-x: hidden;
	padding: 10px;
}

.test {
	position: relative;
	bottom: 0 !important;
}

/*----------------------------------------------------
		Customize Elements
-----------------------------------------------------*/
/* CSS */
.button-86 {
	all: unset;
	width: 100px;
	height: 30px;
	font-size: 16px;
	background: transparent;
	border: none;
	position: relative;
	color: #f0f0f0;
	cursor: pointer;
	z-index: 1;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.button-86::after,
.button-86::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -99999;
	transition: all .4s;
}

.button-86::before {
	transform: translate(0%, 0%);
	width: 100%;
	height: 100%;
	background: #28282d;
	border-radius: 10px;
}

.button-86::after {
	transform: translate(10px, 10px);
	width: 35px;
	height: 35px;
	background: #ffffff15;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: 50px;
}

.button-86:hover::before {
	transform: translate(5%, 20%);
	width: 110%;
	height: 110%;
}

.button-86:hover::after {
	border-radius: 10px;
	transform: translate(0, 0);
	width: 100%;
	height: 100%;
}

.button-86:active::after {
	transition: 0s;
	transform: translate(0, 5%);
}

#headads {
	width: 100% !important;
	height: 60px !important;
	background-color: #1d1d1d !important;
	background-image: url('http://localhost/sppcco/wp-content/uploads/2025/02/adsbg-scaled.jpg');
	background-size: cover !important;
}

#supp_icon {
	position: fixed;
	bottom: 23px;
	left: 24px;
	border-radius: 25%;
	width: 40px;
	height: 40px;
	background-color: #a82b2f;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 10px 10px 5px -11px rgba(0, 0, 0, 0.53);
	-webkit-box-shadow: 10px 10px 5px -11px rgba(0, 0, 0, 0.53);
	-moz-box-shadow: 10px 10px 5px -11px rgba(0, 0, 0, 0.53);
	opacity: 0.3;
	cursor: pointer;
	transition: all 0.5s;
	z-index: 10000;
}

#supp_icon:hover {
	opacity: 1;
}

#supp_icon>i {
	font-size: 30px !important;
	color: #FFF;
}

#goup {
	position: fixed;
	bottom: 70px;
	left: 24px;
	border-radius: 20%;
	width: 40px;
	height: 40px;
	background: #020024;
	background: linear-gradient(0deg, rgba(2, 0, 36, 0.54) 0%, rgba(9, 9, 121, 0.67) 35%, rgba(0, 212, 255, 1) 100%);
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 10px 10px 5px -11px rgba(0, 0, 0, 0.53);
	-webkit-box-shadow: 10px 10px 5px -11px rgba(0, 0, 0, 0.53);
	-moz-box-shadow: 10px 10px 5px -11px rgba(0, 0, 0, 0.53);
	cursor: pointer;
	transition: all 0.5s;
	z-index: 10000;
}

#goup>i {
	font-size: 30px !important;
	color: #FFF;
}

/* From Uiverse.io by elijahgummer */
.pdtadbir {
	height: 300px;
	background: lightblue;
	position: relative;
	overflow: hidden;
	cursor: default;
}

.pdtadbir::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, #3498db 10%, transparent 20%),
		radial-gradient(circle, transparent 10%, #3498db 20%);
	background-size: 30px 30px;
	/* Adjust the size of the pattern */
	animation: moveBackground 8s linear infinite;
	/* Adjust the animation duration and timing function */
}

@keyframes moveBackground {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(20%, 20%);
	}
}


.counters-container {
	display: flex;
	justify-content: space-around;
	text-align: center;
	padding: 40px 0;
	z-index: 1;
}

.counter-box {
	font-family: 'AnjomanMaxBold';
}

.counter {
	-webkit-text-stroke: 2px black;
	paint-order: stroke fill;
	font-size: 45px;
	font-weight: bold;
	color: #ffffff;
	display: block;
	margin-bottom: 10px;
}

.counter-box i {
	color: #FFF;
	font-size: 40px !important;
}

.counter-box p {
	font-size: 18px;
	color: #ffffff;
	-webkit-text-stroke: 3px black;
	paint-order: stroke fill;
}

.mega-menu-link::before {
	margin-left: 5px !important;
}

.bg-primary-ger {
	background: #292828;
	background: linear-gradient(270deg, rgba(41, 40, 40, 1) 0%, rgba(68, 68, 68, 1) 92%, rgba(89, 89, 89, 1) 100%);
}

.sticky-sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: 1px;
	/* فاصله از بالای صفحه */
	align-self: flex-start;
	/* برای جلوگیری از مشکلات در flexbox */
}

.wpb_wrapper img {
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: fill;
}

.wpb_wrapper {
	padding: 20px !important;
}

.title {
	font-family: 'AnjomanMaxBold';
	color: #1f2937 !important;
}

.anjboldfont {
	font-family: 'AnjomanMaxBold';
	font-size: 12px;
}

/* -------------------------------------------
			swiper Android

--------------------------------------------*/
.swiper {
	width: 240px;
	height: 320px;
}

.swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	font-size: 22px;
	font-weight: bold;
	color: #fff;
}

.swiper-slide:nth-child(1n) {
	background-image: url(img/apps/images/1.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(2n) {
	background-image: url(img/apps/images/2.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(3n) {
	background-image: url(img/apps/images/3.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(4n) {
	background-image: url(img/apps/images/4.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(5n) {
	background-image: url(img/apps/images/5.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(6n) {
	background-image: url(img/apps/images/6.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(7n) {
	background-image: url(img/apps/images/7.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(8n) {
	background-image: url(img/apps/images/8.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(9n) {
	background-image: url(img/apps/images/9.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(10n) {
	background-image: url(img/apps/images/10.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(11n) {
	background-image: url(img/apps/images/11.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(12n) {
	background-image: url(img/apps/images/12.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(13n) {
	background-image: url(img/apps/images/13.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(14n) {
	background-image: url(img/apps/images/14.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(15n) {
	background-image: url(img/apps/images/15.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.swiper-slide:nth-child(16n) {
	background-image: url(img/apps/images/16.png);
	background-position: center !important;
	background-repeat: no-repeat;
	background-size: 140px 200px;
	border: solid 1px rgb(156, 156, 156);
	background-color: rgb(226, 226, 226);
}

.shadow1 {
	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.shadow2 {
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.shadow3 {
	box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}

.shadow4 {
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.shadow5 {
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.shadow3d {
	box-shadow: rgba(0, 202, 91, 0.4) 5px 5px, rgba(124, 240, 46, 0.3) 10px 10px, rgba(69, 240, 46, 0.2) 15px 15px, rgba(133, 240, 46, 0.1) 20px 20px, rgba(46, 240, 46, 0.05) 25px 25px;
}

.shadow3d2 {
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.shadow3d3 {
	box-shadow: rgb(0, 139, 248) 5px 5px, rgba(0, 141, 248, 0.562) 10px 10px, rgba(0, 141, 248, 0.281) 15px 15px, rgba(0, 141, 248, 0.199) 20px 20px, rgba(0, 141, 248, 0.041) 25px 25px;
}

.rahkar {
	border-radius: 20px !important;
	cursor: pointer !important;
}

.rahkar>img {
	border-radius: 20px !important;
}

/* ---------------------------------------
				استایل دکمه دلخواه
--------------------------------------------*/
/* From Uiverse.io by ernestnash */
.btn-custom {
	display: inline-block;
	padding: 0.9rem 1.8rem;
	font-size: 16px;
	font-weight: 700;
	color: rgb(1, 132, 255);
	border: 3px solid rgb(1, 132, 255);
	cursor: pointer;
	position: relative;
	background-color: transparent;
	text-decoration: none;
	overflow: hidden;
	z-index: 1;
	font-family: inherit;
}

.btn-custom::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(1, 132, 255);
	transform: translateX(-100%);
	transition: all .3s;
	z-index: -1;
	color: #000000;
}

.btn-custom:hover {
	color: #FFF !important;
}

.btn-custom:hover::before {
	transform: translateX(0);
}


/* From Uiverse.io by alexruix */
.card-custome {
	width: 270px;
	height: 240px;
	position: relative;
	transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
	border-radius: 0px !important;
	overflow: hidden;
	cursor: pointer;
	border-radius: 20px !important;
}

/*Image*/
.card-custome-image {
	height: 100%;
	width: 100%;
	position: absolute;
	transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
	background-color: #ededed;
}

/*Description */
.card-custome-description {
	width: 100%;
	display: flex;
	position: absolute;
	gap: .5em;
	flex-direction: column;
	color: #212121;
	height: 50%;
	bottom: 0;
	border-radius: 0px !important;
	transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
	padding: 1rem;
	z-index: 1;
	text-align: center;
}

/*Text*/
.text-custome-title {
	font-size: 20px;
	padding: 20px;
	font-family: 'AnjomanMaxBold';
	text-align: center;
}

.text-custome-body {
	font-family: 'AnjomanMax';
	text-align: center;
	background-color: #ededed;
}


/* Hover states */
.card-custome:hover .card-custome-description {
	transform: translateY(100%);
}

/* From Uiverse.io by dylanharriscameron */
.card-custome-bordered {
	position: relative;
	width: 400px;
	height: 350px;
	border-radius: 14px;
	z-index: 1111;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
	;
}

.bg-custome-bordered {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 390px;
	height: 340px;
	z-index: 2;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(24px);
	border-radius: 10px;
	overflow: hidden;
	outline: 2px solid white;
	padding: 30px;
}

.blob-custome-bordered {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 350px;
	height: 250px;
	border-radius: 50%;
	background-color: #2c8ac7;
	opacity: 1;
	filter: blur(12px);
	animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
	0% {
		transform: translate(-100%, -100%) translate3d(0, 0, 0);
	}

	25% {
		transform: translate(-100%, -100%) translate3d(100%, 0, 0);
	}

	50% {
		transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
	}

	75% {
		transform: translate(-100%, -100%) translate3d(0, 100%, 0);
	}

	100% {
		transform: translate(-100%, -100%) translate3d(0, 0, 0);
	}
}


/* From Uiverse.io by mrhyddenn */
.containerterminal {
	width: 100%;
	height: 100px;
	direction: ltr;
}

.terminal_toolbar_terminal {
	display: flex;
	height: 30px;
	align-items: center;
	padding: 0 8px;
	box-sizing: border-box;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	direction: ltr;
	background: linear-gradient(#504b45 0%, #3c3b37 100%);
}

.butt_terminal {
	display: flex;
	align-items: center;
}

.btn_terminal {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin-right: 5px;
	font-size: 8px;
	height: 12px;
	width: 12px;
	box-sizing: border-box;
	border: none;
	border-radius: 100%;
	background: linear-gradient(#7d7871 0%, #595953 100%);
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
	box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642;
}

.btn-color_terminal {
	background: #ee411a;
}

.btn_terminal:hover {
	cursor: pointer;
}

.btn_terminal:focus {
	outline: none;
}

.butt--exit_terminal {
	background: linear-gradient(#f37458 0%, #de4c12 100%);
}

.user_terminal {
	color: #d5d0ce;
	margin-left: 6px;
	font-size: 14px;
	line-height: 15px;
	margin-top: 3%;
}

.terminal_body_terminal {
	background: rgba(26, 26, 26, 0.9);
	height: calc(100% - 30px);
	padding-top: 2px;
	margin-top: -1px;
	font-size: 12px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.terminal_promt_terminal {
	display: flex;
}

.terminal_promt_terminal span {
	margin-left: 4px;
}

.terminal_user_terminal {
	color: #7eda28;
}

.terminal_location_terminal {
	color: #4878c0;
}

.terminal_bling_terminal {
	color: #dddddd;
}

.terminal_cursor_terminal {
	display: block;
	height: 14px;
	width: 5px;
	margin-left: 10px;
	animation: curbl 1200ms linear infinite;
}

@keyframes curbl {

	0% {
		background: #ffffff;
	}

	49% {
		background: #ffffff;
	}

	60% {
		background: transparent;
	}

	99% {
		background: transparent;
	}

	100% {
		background: #ffffff;
	}
}

.greysection {
	background: #dbdbdb;
	background: linear-gradient(180deg, rgba(219, 219, 219, 0.31) 20%, rgba(255, 255, 255, 0) 100%);
	border-radius: 60px 60px 0px 0px;
}

.card-event {
	width: 100%;
	height: auto;
	border-radius: 20px;
	background: #212529;
	position: relative;
	padding: 2.8rem;
	border: 2px solid #212529;
	transition: 0.5s ease-out;
	overflow: visible;
}

.card-details-event {
	color: black;
	height: 100%;
	gap: .5em;
	display: grid;
	font-size: medium !important;
}

.card-button-event {
	transform: translate(-50%, 125%);
	width: 60%;
	border: none;
	background-color: #008bf8;
	color: #fff;
	font-size: 1rem;
	padding: .9rem 1rem;
	position: absolute;
	left: 50%;
	bottom: 50;
	opacity: 0;
	transition: 0.3s ease-out;
}

.text-body-event {
	color: rgb(134, 134, 134);
}

/*Text*/
.text-title-event {
	font-size: 1.5em;
	font-weight: bold;
}

/*Hover*/
.card-event:hover {
	border-color: #008bf8;
}

.card-event:hover .card-button-event {
	transform: translate(-50%, 10%);
	opacity: 1;
}


.cardrahkar {
	position: relative;
	width: 250px;
	height: 220px;
	color: #2e2d31;
	overflow: hidden;
	border-radius: 20px;
	direction: rtl !important;
	text-align: center;
	cursor: pointer;
}

.temporary_textrahkar {
	font-weight: bold;
	font-size: 50px;
	padding: 20px;
	color: #f8f8f8;
}


.card_titlerahkar {
	font-family: 'AnjomanMaxBold';
}

.card_contentrahkar {
	position: absolute;
	left: 0;
	bottom: 0;
	/* edit the width to fit card */
	width: 100%;
	padding: 20px;
	background: #f2f2f2;
	border-top-left-radius: 20px;
	/* edit here to change the height of the content box */
	transform: translateY(90px);
	transition: transform .25s;
}

.card_contentrahkar::before {
	content: '';
	position: absolute;
	top: -47px;
	right: -45px;
	width: 100px;
	height: 100px;
	transform: rotate(-175deg);
	border-radius: 50%;
	box-shadow: inset 48px 48px #f2f2f2;
}

.card_titlerahkar {
	color: #131313;
	line-height: 15px;
}

.card_subtitlerahkar {
	display: block;
	font-size: 12px;
	margin-bottom: 10px;
}

.card_descriptionrahkar {
	height: 80px;
	font-size: 11px;
	opacity: 0;
	transition: opacity .5s;
}

.cardrahkar:hover .card_contentrahkar {
	transform: translateY(0);
}

.cardrahkar:hover .card_descriptionrahkar {
	opacity: 1;
	transition-delay: .25s;
}


.spinner {
	margin: 0px auto;
	margin-top: 50px !important;
	width: 100.4px;
	height: 100.4px;
	--clr: rgb(255, 255, 255);
	--clr-alpha: rgb(247, 197, 159, .1);
	animation: spinner 1.6s infinite ease;
	transform-style: preserve-3d;
}

.spinner>div {
	background-color: var(--clr-alpha);
	height: 100%;
	position: absolute;
	width: 100%;
	border: 3.5px solid var(--clr);
}

.spinner div:nth-of-type(1) {
	transform: translateZ(-35.2px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
	transform: rotateY(-270deg) translateX(50%);
	transform-origin: top right;
}

.spinner div:nth-of-type(3) {
	transform: rotateY(270deg) translateX(-50%);
	transform-origin: center left;
}

.spinner div:nth-of-type(4) {
	transform: rotateX(90deg) translateY(-50%);
	transform-origin: top center;
}

.spinner div:nth-of-type(5) {
	transform: rotateX(-90deg) translateY(50%);
	transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
	transform: translateZ(35.2px);
}

@keyframes spinner {
	0% {
		transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
	}

	50% {
		transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
	}

	100% {
		transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
	}
}


/* Android Index-php */
/* From Uiverse.io by Gaurav-WebDev */
.button-android {
	height: 50px;
	position: relative;
	background-color: transparent;
	cursor: pointer;
	border: 2px solid #252525;
	overflow: hidden;
	border-radius: 30px;
	color: #333;
	transition: all 0.5s ease-in-out;
}

.type1::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.5s ease-in-out;
	background-color: #333;
	border-radius: 30px;
	visibility: hidden;
	height: 10px;
	width: 10px;
	z-index: -1;
}

.button-android:hover {
	box-shadow: 1px 1px 200px #252525;
	color: #fff;
	border: none;
}

.type1:hover::after {
	visibility: visible;
	transform: scale(100) translateX(2px);
}

/*=============================================
				Customers
=============================================*/
@keyframes slides {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

.logos {
	overflow: hidden;
	padding: 30px 0px;
	white-space: nowrap;
	position: relative;
	margin-bottom: 100px;
}

.logos:before,
.logos:after {
	position: absolute;
	top: 0;
	content: '';
	width: 250px;
	height: 100%;
	z-index: 2;
}

.logos:before {
	left: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.logos:after {
	right: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.logo_items {
	display: inline-block;
	animation: 60s slides infinite linear;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.logos:hover .logo_items {
	animation-play-state: paused;
	filter: grayscale(0%);
}

.logo_items img {
	height: 100px;
	margin-right: 5px !important;
}

#sppcco_address {
	width: 100%;
	height: 200px;
	background-color: #ededed;
	background-image: url('./img/sppccolocation-bg.png');
	margin-bottom: -30px;
	overflow: hidden;
}

#sppcco_address iframe {
	background-attachment: fixed !important;
}

#support {
	background-color: rgba(0, 46, 152, 1);
	background-image: linear-gradient(90deg, rgba(0, 46, 152, 1) 0%, rgba(0, 66, 255, 1) 100%);
	box-shadow: rgb(0, 139, 248) 5px 5px, rgba(0, 141, 248, 0.562) 10px 10px, rgba(0, 141, 248, 0.281) 15px 15px, rgba(0, 141, 248, 0.199) 20px 20px, rgba(0, 141, 248, 0.041) 25px 25px;
	padding: 50px;
	border-radius: 30px;
}


/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
	background-size: 100% 100%;
	background-position: 0px 0px;
	background: #000000;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(77, 77, 77, 0.78) 100%);
	color: white;
	padding: 16px 20px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	position: fixed;
	opacity: 1;
	bottom: 23px;
	right: 28px;
	width: 140px;
	z-index: 1000000;
}

/* The popup chat - hidden by default */
.chat-popup {
	display: none;
	position: fixed;
	bottom: 0;
	right: 15px;
	border: 3px solid #f1f1f1;
	z-index: 10000000;
}

/* Add styles to the form container */
.form-container {
	max-width: 300px;
	padding: 10px;
	background-color: white;
}

/* Full-width textarea */
.form-container textarea {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
	resize: none;
	min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
	background-color: #ddd;
	outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
	background-color: #04AA6D;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom: 10px;
	opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
	background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
	opacity: 1;
}

.indextypingeffect {
	text-align: center !important;
	max-height: 50px !important;
	margin-bottom: 50px !important;
}

/* غیرفعال کردن انیمیشن‌های خاص ویژال کامپوزر */

.wpb_animate_when_almost_visible {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	visibility: visible !important;
}

.wpb_animate_when_almost_visible {
	display: block !important;
	will-change: auto !important;
}


/*-------------------------------------------
		Responsive Area                      
--------------------------------------------*/
/* موبایل */
@media (max-width: 575.98px) {
	.wpb_wrapper img {
		width: 100%;
		/* کل عرض رو پر کنه */
	}
}

/* تبلت */
@media (min-width: 768px) and (max-width: 991.98px) {
	.wpb_wrapper img {
		width: 80%;
		/* فقط 80% عرض والد */
		margin: 0 auto;
		/* وسط‌چین بشه */
	}
}

/* دسکتاپ */
@media (min-width: 1200px) {
	.wpb_wrapper img {
		width: 60%;
		margin: 0 auto;
	}
}