.main-menu .logo h2,
.main-menu .logo span {
	text-align: right;
	color: #fff;
	font-style: normal;
	line-height: normal
}

.header .img-bg img,
.header video {
	-o-object-fit: cover;
	position: absolute
}

.features .feature-box,
.icons .icon-box {
	transition: .3s ease-in-out;
	border-radius: 10px
}

@font-face {
	font-family: "Material Symbols Outlined";
	font-style: normal;
	font-weight: 100 700;
	src: url("fonts/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2") format("woff2")
}

.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-moz-font-feature-settings: "liga";
	-moz-osx-font-smoothing: grayscale
}

.main-menu {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 85px;
	padding: 0 140px;
	color: #fff;
	position: relative;
	z-index: 20;
	overflow: hidden
}

.main-menu.dark-bg {
	background: rgba(56, 76, 162, .87)
}

.main-menu .logo span {
	text-shadow: 0 2px 2px rgba(0, 0, 0, .25);
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 0
}

.main-menu .logo span img {
	width: 30px
}

.main-menu .logo h2 {
	font-size: 16px;
	font-weight: 100
}

.main-menu .chargepal-logo {
	height: 55px
}

.main-menu .menu-links {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center
}

.main-menu .menu-links a {
	font-weight: 700;
	color: #fff;
	transition: .3s
}

.main-menu .menu-links a:is(:hover, :focus) {
	color: #0e55a6;
	border-block-end: 2px solid #0e55a6
}

.main-menu .login-text {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	margin-right: 10px;
	margin-left: 15px
}

.button-sabte-nam {
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	min-width: 100px;
	min-height: 26px;
	transition: .15s ease-in-out
}

.button-sabte-nam.alt {
	box-shadow: 0 0 4px 4px rgba(0, 0, 0, .1);
	border-radius: 5px
}

.button-sabte-nam .overlap-group {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center
}

.button-sabte-nam .overlap-group .image {
	width: 20px;
	height: 15px
}

.button-sabte-nam .text-wrapper,
footer .footer-logo h3 {
	color: #fff;
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -.24px
}

.button-sabte-nam.border {
	border: 1px solid #fff;
	background: 0 0
}

.button-sabte-nam.border .text-wrapper,
.pages .stocks-pattern *,
footer * {
	color: #fff
}

.button-sabte-nam.bg-white,
.button-sabte-nam.border:hover,
.pages .bg-white {
	background: #fff
}

.button-sabte-nam.border:hover .image {
	filter: invert(1)
}

.button-sabte-nam.border:hover .text-wrapper {
	color: rgba(0, 0, 0, .87)
}

.button-sabte-nam.bg-white .text-wrapper,
.button-sabte-nam.bg-yellow .text-wrapper {
	color: #353442
}

.button-sabte-nam.bg-yellow {
	background: #89c1ce
}

.button-sabte-nam:is(:hover, :focus) {
	box-shadow: 0 0 11px #212121 !important
}

.button-sabte-nam:is(:hover, :focus) .text-wrapper {
	color: #0e55a6
}

.header {
	height: auto;
	min-height: 420px;
	margin-top: -85px;
	margin-bottom: 280px
}

.header .img-bg img {
	width: 100%;
	object-fit: cover;
	-o-object-position: bottom;
	object-position: bottom;
	max-height: 680px
}

.header .img-bg .mobile {
	display: none;
	border-radius: 0 0 0 250px
}

.faq .faq-item .faq-header .icon .plus,
.faq .faq-item .faq-header.active .icon .minus,
.header .img-bg .desktop {
	display: block
}

.header video {
	width: 100%;
	height: inherit;
	object-fit: cover;
	-o-object-position: top;
	object-position: top;
	z-index: 1;
	filter: brightness(.75)
}

.header .content {
	z-index: 2
}

.header .content .gradient {
	height: auto;
	width: 80%;
	background: linear-gradient(255deg, #384ca2 37.48%, rgba(128, 207, 229, .8) 103.22%);
	position: absolute;
	border-radius: 0 0 0 250px;
	padding-bottom: 70px;
	min-height: 490px
}

.header .content .gradient .content {
	width: 95%;
	margin-top: 80px;
	padding-right: 140px;
	padding-left: 90px
}

@media (max-width:1200px) {
	.main-menu {
		padding: 0 20px
	}

	.header .content .gradient .content {
		width: 95%;
		margin-right: 10px
	}
}

.header .content .gradient .content h1 {
	color: #fff;
	text-align: right;
	font-family: Vazir;
	font-size: 40px;
	font-style: normal;
	font-weight: 700;
	line-height: 60px;
	width: 100%;
	margin-block-end: 40px
}

.header .content .gradient .content p {
	margin-top: 32px;
	color: #fff;
	text-align: justify;
	font-family: Vazir;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 32px
}

.header .content .gradient .content .subtitle-items {
	margin-top: 15px;
	margin-inline: 0px !important
}

.header .content .gradient .content .subtitle-items .item {
	display: flex;
	justify-content: start;
	align-items: center;
	margin-bottom: 0
}

.header .content .gradient .content .subtitle-items .item img {
	margin-left: 10px;
	filter: grayscale(1) brightness(0) invert(1)
}

.header .content .gradient .content .subtitle-items .item span {
	color: #fff;
	text-align: right;
	font-family: Vazir;
	font-size: 23px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: -.56px
}

.header .title {
	color: #d39b2c;
	text-align: right;
	font-size: 58px;
	font-style: normal;
	font-weight: 700;
	line-height: normal
}

.header .sub-title {
	color: #000;
	text-align: right;
	font-size: 54px;
	font-style: normal;
	font-weight: 500;
	line-height: normal
}

.description {
	padding: 0 10%
}

.features,
.icons {
	padding: 30px 20px
}

.description .content {
	background: rgba(133, 133, 133, .15);
	padding: 0 5%
}

.icons .topicon,
.topicon {
	background-color: #0ff
}

.features,
.icons .icon-box,
.pages .bg-gray,
.pages.bg-gray {
	background: #f7f7f7
}

.description .content .title {
	color: #000;
	text-align: center;
	font-family: Mplus 1p Bold;
	font-size: 40px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -.6px;
	padding-top: 36px;
	margin-bottom: 20px
}

.blog .title,
.faq .title,
.features .feature-box .description,
.features .feature-box .text,
.features .subtitle,
.features .title,
.icons .icon-box .text,
.icons .title,
.pages .title1 {
	color: #202020;
	font-style: normal;
	text-align: center
}

.description .content p {
	color: #000;
	text-align: justify;
	font-size: 24px;
	font-style: normal;
	padding: 0 15px 20px;
	font-weight: 500;
	line-height: 151.5%;
	letter-spacing: .6px
}

.offcanvas .menu-links a,
.pages p {
	font-family: Vazir;
	color: #464646;
	font-size: 16px
}

.icons .title,
.pages .title1 {
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	margin-bottom: 32px
}

.blog .title::after,
.faq .title::after,
.icons .title::after,
.pages .title1::after {
	content: "";
	border-radius: 100px;
	background: linear-gradient(90deg, #fff .01%, #384ca2 100%);
	width: 89px;
	position: relative;
	display: block;
	height: 3px;
	margin: 15px auto auto
}

.faq .faq-wrapper,
.icons .icons-wrapper {
	padding: 0 10px
}

.icons .icons-wrapper img {
	width: 65px !important;
	height: 65px !important
}

.icons .icons-wrapper div.edited h3 {
	padding-block-end: 25px
}

.icons .topicon {
	margin-top: -12250px
}

@media (min-width:459px) {
	.icons .icons-wrapper div.edited h3 {
		padding-block-end: unset
	}
}

.icons .icon-box {
	margin-top: 25px;
	width: 100%;
	min-height: 50px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center
}

.icons .icon-box .text {
	margin-top: 24px;
	font-size: 16px;
	font-weight: 400;
	line-height: normal
}

.icons .icon-box:hover {
	border-radius: 10px 100px 10px 10px;
	background: linear-gradient(-90deg, #80cfe5 .01%, #384ca2 100%)
}

.icons .icon-box:hover .icon {
	filter: grayscale(0) brightness(0) invert(1)
}

.icons .icon-box:hover .text {
	color: #fff;
	font-weight: 700
}

.blog .title,
.faq .title,
.features .title {
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	margin-bottom: 16px
}

.comments .title::after,
.features .title::after,
.pages .title2::after {
	content: "";
	border-radius: 100px;
	background: linear-gradient(90deg, #80cfe5 .01%, rgba(255, 255, 255, 0) 100%);
	width: 89px;
	position: relative;
	display: block;
	height: 3px;
	margin: 15px auto auto
}

.features .subtitle {
	font-size: 14px;
	font-weight: 400;
	line-height: 32px
}

.blog .blog-wrapper,
.comments .comments-wrapper,
.features .features-wrapper {
	margin-top: 32px;
	padding: 0 10px
}

.features .feature-box {
	background: #fff;
	box-shadow: 4px 6px 6px 0 rgba(0, 0, 0, .05);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 25px 15px
}

.market .video,
.market .video img {
	border-radius: 16px;
	background: #d9d9d9;
	min-height: 250px;
	height: 100%;
	width: 100%
}

.features .feature-box .icon {
	background: #f7f7f7;
	width: 120px;
	height: 120px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center
}

.features .feature-box .text {
	margin-top: 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: normal
}

.features .feature-box .description {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -.21px
}

.blog .blog-box .blog-title,
.blog .subtitle,
.features .feature-box a {
	line-height: 32px;
	font-style: normal
}

.features .feature-box a {
	margin-top: 16px;
	color: #707070;
	text-align: justify;
	font-size: 14px;
	font-weight: 500
}

.blog .subtitle {
	color: #202020;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	margin: auto
}

.market .text,
.market .title {
	text-align: right;
	line-height: normal
}

.blog .blog-box .image img {
	border-radius: 10px;
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 212px
}

.blog .blog-box .blog-title {
	margin-top: 25px;
	color: #202020;
	text-align: right;
	font-size: 16px;
	font-weight: 700
}

.blog .blog-box .blog-description {
	color: #202020;
	text-align: justify;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px
}

.comments .comment-box .description,
.comments .comment-box .detail .text {
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	font-style: normal;
	text-align: justify
}

.market {
	padding: 50px
}

.call-to-action,
.comments,
.faq {
	padding: 30px 50px
}

.market .left-col {
	padding-right: 30px
}

.market .title {
	color: #000;
	font-size: 34px;
	font-style: normal;
	font-weight: 500;
	margin-bottom: 10px
}

.market .text {
	color: #000;
	font-size: 20px;
	font-style: normal;
	font-weight: 700
}

.comments .title,
.how-to .title {
	text-align: center;
	font-style: normal
}

.market .video img {
	-o-object-fit: contain;
	object-fit: contain;
	box-shadow: 0 4px 4px rgba(0, 0, 0, .25)
}

.comments .title {
	color: #384ca2;
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	margin-bottom: 16px
}

.comments .comments-wrapper button {
	outline: 0
}

.comments .comments-carousel {
	padding: 30px 10px 0
}

.comments .comment-box {
    padding:15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    border-radius:10px 80px;
    background:#fff;
    height:280px;
    position: relative; /* این خط اضافه شود */
}

.comments .comment-box .quote {
	position: absolute;
	top: 35px;
	right: 40px;
	z-index: 4
}

.comments .comment-box .description {
	margin-top: 32px;
	color: #353442;
	z-index: 5
}

.comments .comment-box .detail {
	margin-top: 16px;
	margin-right: 50px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center
}

.comments .comment-box .detail .image {
	border-radius: 54px;
	border: 2px solid #cdcdcd
}

.comments .comment-box .detail .image img {
	border-radius: 54px;
	-o-object-fit: cover;
	object-fit: cover;
	width: 54px;
	height: 54px
}

.comments .comment-box .detail .text {
	color: #202020
}

.call-to-action {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%
}

.call-to-action img {
	position: relative;
	right: -150px;
	height: 100%;
	max-height: 480px
}

.call-to-action .box {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	width: 20%;
	left: 80px
}

.call-to-action .box .title {
	color: #000;
	text-align: right;
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 40px
}

.how-to {
	padding: 30px 50px 50px
}

.how-to .title {
	color: #000;
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 30px
}

.about-us .text,
.about-us .title,
.contact-us .text,
.contact-us .title,
footer .footer-logo h2 {
	text-align: center;
	font-weight: 500;
	line-height: normal
}

.how-to .step {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start
}

.how-to .step .step-title {
	color: #000;
	text-align: right;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 20px
}

.how-to .step .step-title .number {
	position: relative;
	right: -45px;
	top: 35px;
	color: #133c70;
	text-align: right;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	background-color: #20b1aa;
	border-radius: 100%;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center
}

.how-to .step .step-text {
	display: none;
	color: #000;
	text-align: right;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal
}

.faq .faq-item .faq-header,
.faq .faq-item .faq-header .faq-button,
.faq .faq-item .faq-header.active .faq-button,
footer .footer-wrapper .title {
	line-height: 32px;
	font-style: normal;
	text-align: right
}

.about-us {
	margin-top: 50px;
	padding: 0 10%
}

.about-us .content {
	background: #ededed;
	padding: 20px 80px
}

.about-us .title {
	color: #000;
	font-size: 36px;
	font-style: normal;
	margin-bottom: 36px
}

.about-us .text,
.contact-us .text {
	color: #000;
	font-size: 24px;
	font-style: normal
}

.about-us .button-sabte-nam,
.contact-us .button-sabte-nam {
	max-width: 170px;
	margin: auto
}

.contact-us {
	margin-top: 50px;
	background: #ededed
}

.contact-us .content {
	padding: 15px;
	background: rgba(255, 255, 255, .74);
	margin-bottom: 50px
}

.contact-us .title {
	padding-top: 20px;
	color: #000;
	font-size: 36px;
	font-style: normal;
	margin-bottom: 36px
}

.faq .faq-item .faq-header {
	border-radius: 10px;
	border: 1px solid #ececec;
	background: #f7f7f7;
	width: 100%;
	color: #202020;
	font-size: 18px;
	font-weight: 400;
	padding-bottom: 20px;
	padding-right: 32px;
	padding-left: 32px
}

.faq .faq-item .faq-header .faq-button {
	background: unset;
	border: none;
	outline: 0;
	color: #202020;
	font-size: 18px;
	font-weight: 400;
	margin-top: 20px;
	width: 100%;
	display: flex;
	justify-content: space-between
}

.faq .faq-item .faq-header .faq-button:is(:focus, :hover) {
	outline: 0 !important
}

.faq .faq-item .faq-header .faq-body {
	color: #202020;
	text-align: right;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px
}

.faq .faq-item .faq-header .icon .minus,
.faq .faq-item .faq-header.active .icon .plus {
	display: none
}

.faq .faq-item .faq-header.active {
	border-radius: 10px;
	border: 1px solid var(--Primary-3, #384ca2);
	background: #fff
}

.faq .faq-item .faq-header.active .faq-button {
	color: #384ca2;
	font-size: 18px;
	font-weight: 700
}

footer {
	background: #384ca2;
	width: 100%;
	min-height: 100px
}

footer .footer-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-left: 124px;
	margin-top: 49px
}

footer .footer-logo h2 {
	color: #fff;
	text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
	font-size: 42px;
	font-style: normal
}

footer .footer-wrapper {
	padding: 0 115px 60px;
	margin-top: 15px
}

footer .footer-wrapper .title {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 32px
}

footer .links {
	height: calc(100% - 60px);
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

footer .links a:hover {
	color: #0e55a6
}

footer .footer-description {
	color: #fff;
	text-align: justify;
	font-size: 16px;
	font-style: normal;
	font-weight: 200;
	line-height: 42px;
	padding-left: 15px
}

.pages p,
footer .footer-copyright .text {
	font-style: normal;
	font-weight: 400;
	line-height: 32px
}

footer .socials a {
	margin-left: 14px
}

footer .footer-contact p {
	margin-top: 16px
}

footer .footer-copyright {
	background: rgba(0, 0, 0, .5);
	min-height: 46px;
	display: flex;
	justify-content: center;
	align-items: center
}

footer .footer-copyright .text {
	text-align: center;
	color: #fff;
	font-size: 14px
}

.offcanvas .menu-links a,
.pages .item-title,
.pages .title2 {
	font-style: normal;
	line-height: normal
}

.pages {
	padding: 45px 120px
}

.pages .title1.right,
.pages .title2.right {
	text-align: right
}

.pages .title1.right::after,
.pages .title2.right::after {
	margin: unset;
	margin-top: 15px
}

.pages .title2 {
	color: #000;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 16px
}

.pages .rounded {
	border-radius: 10px
}

.pages p {
	text-align: justify
}

.pages .text-center * {
	text-align: center !important
}

.pages .fw-light {
	font-weight: 300 !important
}

.pages .item-title {
	color: #202020;
	text-align: right;
	font-size: 18px;
	font-weight: 700
}

.pages .stocks-pattern {
	height: 412px;
	width: 100%;
	margin-bottom: 16px;
	position: relative
}

.pages .stocks-pattern .under-img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 10px;
	position: absolute
}

.pages .stocks-pattern .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	border-radius: 10px;
	background: linear-gradient(236deg, #384ca2 0, rgba(121, 136, 250, .8) 98.2%)
}

.pages .stocks-pattern .content {
	position: absolute;
	bottom: 10%;
	padding: 0 45px
}

.pages .stocks-pattern .number {
	position: absolute;
	top: 10%;
	right: 10%;
	z-index: 1
}

.pages .stocks-pattern .number img {
	height: 50px
}

.pages .number {
	position: absolute;
	z-index: 1
}

.pages .number img {
	height: 40px
}

.pages .stocks-gray-item {
	position: relative;
	padding: 35px 65px;
	border-radius: 10px;
	height: 198px;
	margin-bottom: 16px
}

.pages .stocks-gray-item p {
	margin-top: 70px
}

.pages ul li {
	margin-bottom: 25px
}

.pages ul li .number {
	width: 30px;
	height: 30px;
	background: #80cfe5;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	margin-right: -40px;
	margin-top: -2px
}

.pages ul li::marker {
	content: "";
	display: none;
	visibility: hidden
}

.offcanvas {
	position: fixed;
	z-index: 9000;
	border-radius: 10px 0 0 10px;
	background: #fff;
	height: 100%;
	width: 60%;
	visibility: hidden
}

.offcanvas .times {
	cursor: pointer;
	position: absolute;
	left: 17px;
	top: 14px
}

.offcanvas .offcanvas-body {
	padding: 40px 20px
}

.offcanvas .menu-links {
	margin-top: 40px;
	display: flex;
	flex-direction: column
}

.offcanvas .menu-links a {
	text-align: right;
	font-weight: 500;
	letter-spacing: -.21px;
	margin-bottom: 32px;
	width: -moz-fit-content;
	width: fit-content

}

.offcanvas .menu-links a:is(:hover, :focus) {
	color: #0e55a6;
	border-block-end: 4px solid #0e55a6
}

.hamburger {
	margin-left: 10px;
	cursor: pointer
}

.plans-main-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-block-start: 38px
}

.plans-main-wrapper .plans-main {
	width: 35%
}

.plans-main-wrapper .plans-main .plans-main-header {
	background-color: #ececec;
	width: 100%;
	padding-block-start: 53px;
	padding-block-end: 10px;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	box-shadow: rgba(0, 0, 0, .35) 0 5px 15px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-block-end: 16px
}

.plans-main-wrapper .plans-main .plans-main-header .plans-image-wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%)
}

.plans-main-wrapper .plans-main .plans-main-header .plans-header-content h4 {
	color: #717171;
	width: -moz-fit-content;
	width: fit-content
}

.plans-main-wrapper .plans-main .plans-main-header .plans-header-content p {
	color: #19941e
}

.plans-main-wrapper .plans-main .plans-main-header button {
	border: none;
	outline: 0;
	cursor: pointer;
	font-size: 10px;
	background-color: transparent;
	color: #a7a7a7
}

.plans-main-wrapper .plans-main .plans-main-header button span {
	color: #133d70;
	display: block
}

.plans-main-wrapper .plans-main .plans-main-content {
	width: 100%;
	background-color: #ececec;
	box-shadow: rgba(0, 0, 0, .35) 0 5px 15px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	padding-inline: 16px;
	padding-block: 5px
}

.plans-main-wrapper .plans-main .plans-main-content .plans-main-nav {
	list-style: none;
	-moz-columns: 2;
	columns: 2
}

.plans-main-wrapper .plans-main .plans-main-content .plans-main-nav li {
	text-wrap: nowrap;
	font-weight: 700;
	color: #464646;
	line-height: 29px;
	margin-block-end: -1px
}

.plans-main-wrapper .plans-main .plans-main-content .plans-main-nav li img {
	margin-inline-end: 5px
}

.plans-main-wrapper .btn-box {
	width: 100%
}

.plans-main-wrapper .btn-box .start-plans-btn {
	border-radius: 10px;
	margin-block: 16px;
	border: none;
	color: #fff;
	background: #133d70;
	width: 100%;
	padding-block: 27px;
	font-size: 22px
}

.plans-main-wrapper .btn-box .start-plans-btn:is(:hover, :focus) {
	box-shadow: 0 0 4px 4px rgba(0, 0, 0, .1)
}

.services {
	padding-inline: 20px
}

.services .services-card-box {
	gap: 30px;
	justify-content: center
}

.services .serives-title-wrapper {
	text-align: center;
	margin-block-end: 30px
}

.services .serives-title-wrapper .services-title {
	font-weight: 700;
	color: #133d70;
	letter-spacing: -1.5%
}

.services .serives-title-wrapper .services-title::after {
	content: "";
	border-radius: 100px;
	background: linear-gradient(90deg, #fff .01%, #384ca2 100%);
	width: 89px;
	position: relative;
	display: block;
	height: 2px;
	margin: 15px auto auto
}

.services .services-card {
	max-height: 248px !important;
	max-width: 466px;
	background-color: rgba(217, 217, 217, .5019607843);
	padding: 32px;
	margin-block-end: 22px;
	border-radius: 12px;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2)
}

.services .services-card:is(:last-child) {
	margin-block-end: 100px
}

.services .services-card .card-content {
	margin-inline: auto;
	padding-inline: 0px
}

.services .services-card .card-content .card-header-box,
.services .services-card .card-content .card-image-wrapper {
	text-align: center
}

.services .services-card .card-content .card-header-box .card-header {
	background-color: transparent;
	border: none;
	color: #717171;
	font-weight: 700;
	font-size: 16px;
	text-wrap: wrap
}

@media (min-width:992px) {
	.services .services-card .card-content .card-header-box .card-header {
		text-wrap: nowrap
	}
}

.services .services-card .card-content .card-image-wrapper .center {
	transform: translateX(16px)
}

.services-wrapper {
	background-image: linear-gradient(to top, rgba(128, 207, 229, .7529411765), rgba(128, 130, 255, .6901960784));
	width: 100%;
	padding: 50px 42px
}

.services-wrapper .services-box {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
}

.services-wrapper .services-box .width-less {
	flex-basis: 48%
}

.services-wrapper .services-box .services-item-box {
	width: 100%;
	background-color: #fff;
	color: #707070;
	text-align: center;
	vertical-align: text-bottom;
	padding-block: 17px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px
}

.services-wrapper .services-box .services-item-box.active {
	border: 3px solid #133d70;
	transition: .3s;
	box-sizing: border-box;
	position: relative;
	cursor: pointer
}

.services-wrapper .services-box .services-item-box.active:is(:hover, :focus) {
	background-color: #133d70;
	color: #fff
}

.services-wrapper .services-box .services-item-box.bigger {
	flex-basis: 59% !important
}

.services-wrapper .services-box .services-item-box.lesser {
	flex-basis: 38% !important
}

.services-wrapper .services-box .services-item-box .services-item-content {
	background-color: #e8ecf1;
	position: absolute;
	top: calc(100% + 5px);
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
	z-index: 10;
	border-radius: 30px;
	padding-block-start: 12px;
	padding-block-end: 16px;
	padding-inline: 0px;
	cursor: auto;
	min-width: 230px
}

.services-wrapper .services-box .services-item-box .services-item-content .services-item-close {
	border: none;
	outline: 0;
	cursor: pointer;
	margin-inline-end: 12px;
	background-color: #e8ecf1;
	margin-block-end: 6px
}

.services-wrapper .services-box .services-item-box .services-item-content ul {
	text-align: right;
	color: #717171;
	font-weight: 700;
	font-size: 12px;
	padding-block: -10px;
	margin-inline-start: 10px
}

.services-wrapper .services-box .services-item-box .services-item-content ul li {
	padding: 0;
	text-wrap: nowrap
}

.services-wrapper .services-box .services-item-box .services-item-content.else {
	width: 307px
}

.services-wrapper .services-box .services-item-box .services-item-content.else li {
	text-wrap: wrap
}

.services-wrapper .services-box .services-item-box .right-item {
	left: 50%;
	transform: translateX(-70%)
}

.services-wrapper .services-box .services-item-box .left-item {
	left: 50%;
	transform: translateX(-30%)
}

@media (min-width:768px) {

	.comments .comments-wrapper,
	.features .features-wrapper,
	.icons .icons-wrapper {
		padding: 0 180px
	}

	.features .feature-box:hover {
		border-radius: 10px 80px 10px 10px;
		background: linear-gradient(201deg, #80cfe5 -8.24%, #384ca2 117.38%);
		box-shadow: 4px 6px 6px 0 rgba(0, 0, 0, .05)
	}

	.features .feature-box:hover .icon {
		background: #fff
	}

	.features .feature-box:hover .description,
	.features .feature-box:hover .text,
	.features .feature-box:hover a {
		color: #fff
	}

	.features .feature-box:hover .more {
		filter: grayscale(0) brightness(0) invert(1)
	}

	.blog .blog-wrapper,
	.faq .faq-wrapper {
		padding: 0 90px
	}

	.services .services-card {
		padding-inline: 0;
		width: 48%
	}

	.services-wrapper {
		background-image: linear-gradient(to left, rgba(128, 207, 229, .7529411765), rgba(128, 130, 255, .6901960784));
		padding: 84px 130px
	}

	.services-wrapper .services-box {
		all: unset;
		display: grid;
		grid-template-columns: repeat(23, 1fr);
		gap: 24px;
		align-items: center
	}

	.services-wrapper .services-box .services-item-box.bigger,
	.services-wrapper .services-box .services-item-box.lesser,
	.services-wrapper .services-box .width-less {
		flex-basis: unset
	}

	.services-wrapper .services-box .item1 {
		grid-column-start: 1;
		grid-column-end: 8
	}

	.services-wrapper .services-box .item2 {
		grid-column-start: 8;
		grid-column-end: 16
	}

	.services-wrapper .services-box .item3 {
		grid-column-start: 16;
		grid-column-end: 24
	}

	.services-wrapper .services-box .item4 {
		grid-column-start: 1;
		grid-column-end: 10;
		grid-row-start: 2;
		grid-row-end: 3
	}

	.services-wrapper .services-box .item20,
	.services-wrapper .services-box .item5 {
		grid-column-start: 10;
		grid-column-end: 14
	}

	.services-wrapper .services-box .item6 {
		grid-column-start: 14;
		grid-column-end: 20;
		grid-row-start: 2;
		grid-row-end: 3
	}

	.services-wrapper .services-box .item7 {
		grid-column-start: 20;
		grid-column-end: 24;
		grid-row-start: 2;
		grid-row-end: 3
	}

	.services-wrapper .services-box .item8 {
		grid-column-start: 1;
		grid-column-end: 5
	}

	.services-wrapper .services-box .item9 {
		grid-column-start: 5;
		grid-column-end: 10
	}

	.services-wrapper .services-box .item10 {
		grid-column-start: 10;
		grid-column-end: 18;
		grid-row-start: 3;
		grid-row-end: 4
	}

	.services-wrapper .services-box .item11 {
		grid-column-start: 18;
		grid-column-end: 24
	}

	.services-wrapper .services-box .item12 {
		grid-column-start: 1;
		grid-column-end: 6;
		grid-row-start: 4;
		grid-row-end: 5
	}

	.services-wrapper .services-box .item13 {
		grid-column-start: 6;
		grid-column-end: 14
	}

	.services-wrapper .services-box .item14,
	.services-wrapper .services-box .item21 {
		grid-column-start: 14;
		grid-column-end: 24
	}

	.services-wrapper .services-box .item15 {
		grid-column-start: 1;
		grid-column-end: 9;
		grid-row-start: 5;
		grid-row-end: 6
	}

	.services-wrapper .services-box .item16 {
		grid-column-start: 9;
		grid-column-end: 13
	}

	.services-wrapper .services-box .item17 {
		grid-column-start: 13;
		grid-column-end: 20;
		grid-row-start: 5;
		grid-row-end: 6
	}

	.services-wrapper .services-box .item18 {
		grid-column-start: 20;
		grid-column-end: 24
	}

	.services-wrapper .services-box .item19 {
		grid-column-start: 1;
		grid-column-end: 10;
		grid-row-start: 6;
		grid-row-end: 7
	}

	.services-wrapper .services-box .services-item-box {
		padding-inline: 20px;
		padding-block: 36px
	}

	.services-wrapper .services-box .services-item-box .services-item-content {
		padding-block-start: 32px
	}

	.services-wrapper .services-box .services-item-box .services-item-content.else {
		transform: translateX(-80%);
		width: unset
	}

	.services-wrapper .services-box .services-item-box .services-item-content.else li {
		text-wrap: nowrap
	}

	.services-wrapper .services-box .services-item-box .left-item,
	.services-wrapper .services-box .services-item-box .right-item {
		transform: translateX(-50%)
	}
}

.services-wrapper .services-box .services-item-box .polygan {
	position: absolute;
	left: 50%;
	top: calc(100% - 15px);
	transform: translateX(-50%);
	z-index: 10
}

.services-box-bg {
	background-image: url("/img/pages/services-background-image.jfif");
	width: 100%
}

.button-sabte-nam.cta-custom {
	display: inline-block;
	width: 450px;
	height: 60px;
	border-radius: 25px;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	padding: 0 20px
}

.button-sabte-nam.cta-custom .overlap-group {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%
}

.button-sabte-nam.cta-custom .text-wrapper {
	color: #fff;
	font-size: 18px;
	white-space: nowrap;
	line-height: 1.2
}

.button-sabte-nam.cta-custom:hover {
	background: #2c3e80;
	transform: scale(1.05)
}

@media (max-width:768px) {
	.button-sabte-nam.alt {
		width: 70%
	}

	.header .content .gradient {
		width: 90%;
		min-height: 490px;
		height: 500px
	}

	.header .content .gradient .content h1 {
		color: #fff;
		text-align: right;
		text-shadow: 0 2px 2px rgba(0, 0, 0, .15);
		font-size: 22px;
		font-style: normal;
		font-weight: 700;
		line-height: 40px
	}

	.header .content .gradient .content .first-col {
		height: 30%
	}

	.header .content .gradient .content p {
		color: #fff;
		text-align: justify;
		font-family: Vazir;
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: 24px;
		margin-top: 16px
	}

	.header .content .gradient .content .subtitle-items {
		margin-top: 0;
		margin-right: 10px
	}

	.header .content .gradient .content .subtitle-items .item {
		margin-bottom: 0
	}

	.header .content .gradient .content .subtitle-items .item span {
		font-size: 14px
	}

	.header .img-bg .mobile {
		display: block
	}

	.header .content .gradient .content {
		width: 100%;
		margin-top: 50px;
		padding-right: 23px;
		padding-left: 23px;
		overflow: hidden
	}

	.description {
		padding: 0;
		margin-top: 40px
	}

	.about-us,
	.call-to-action,
	.description .content {
		padding: 0
	}

	.description .content .title {
		font-size: 22px
	}

	.description .content p {
		color: #000;
		text-align: center;
		font-family: Mplus 1p;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 151.5%;
		letter-spacing: .2px
	}

	.features .feature-box {
		background: 0 0;
		box-shadow: unset
	}

	.features .feature-box .icon {
		background: #fff
	}

	.features .feature-box .text {
		font-weight: 200
	}

	.features .feature-box .description,
	.features .feature-box a {
		display: none
	}

	.market {
		padding-right: 10px;
		padding-left: 10px
	}

	.market .title {
		text-align: center
	}

	.comments {
		padding-right: 0;
		padding-left: 0
	}

	.comments .comment-box .description {
		line-height: 22px
	}

	.call-to-action img {
		position: relative;
		right: -150px;
		max-height: 180px
	}

	.call-to-action .box {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		position: absolute;
		width: 50%;
		left: 20px
	}

	.call-to-action .box .title {
		color: #000;
		text-align: right;
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		margin-bottom: 40px
	}

	.how-to .step {
		margin-right: 30px
	}

	.about-us .content {
		padding: 10px
	}

	footer .footer-logo {
		align-items: center !important;
		justify-content: center;
		padding-left: 0
	}

	.pages {
		padding: 35px 20px
	}

	.pages .stocks-gray-item {
		padding: 15px 20px
	}

	.pages .stocks-gray-item p {
		margin-top: 50px
	}

	.plans-main-wrapper {
		width: 100%;
		margin-block-start: 44px
	}

	.plans-main-wrapper .plans-main {
		width: 90%
	}

	.plans-main-wrapper .plans-main .plans-main-content .plans-main-nav {
		-moz-columns: 1;
		columns: 1;
		padding-inline-start: 0
	}

	.button-sabte-nam.cta-custom {
		width: 350px;
		height: 50px
	}

	.button-sabte-nam.cta-custom .text-wrapper {
		font-size: 16px
	}
}

@media (max-width:767.98px) {
	.pages {
		padding: 40px 15px
	}

	.title1 {
		font-size: 1.5rem !important
	}

	.title2 {
		font-size: 1.3rem !important
	}

	h3.card-title.fs-5 {
		font-size: 1.1rem !important
	}

	h3.item-title.fs-6 {
		font-size: 1rem !important
	}

	.text.small.fw-normal {
		font-size: .85rem !important
	}

	li,
	p {
		font-size: .9rem
	}

	.row>.col-lg-3,
	.row>.col-lg-5,
	.row>.col-md-4,
	.row>.col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 1.5rem
	}

	#other-features .col-6 {
		flex: 0 0 50%;
		max-width: 50%
	}

	.card-text,
	.item-title,
	p {
		word-wrap: break-word;
		overflow-wrap: break-word
	}

	.final-cta h3 {
		font-size: 1.4rem
	}

	.final-cta .lead {
		font-size: 1rem
	}

	.final-cta .btn {
		font-size: .9rem;
		padding: 10px 20px
	}
}

@media (max-width:576px) {
	.title1 {
		font-size: 1.3rem !important
	}

	.title2 {
		font-size: 1.2rem !important
	}

	.pages {
		padding: 30px 10px
	}

	#other-features .col-6 {
		flex: 0 0 100%;
		max-width: 100%
	}
}

.material-symbols-outlined.align-middle {
	font-size: 1.1em;
	vertical-align: -2px
}

.small-icon {
	font-size: 1em;
	vertical-align: middle
}
.logo-display-inline {
  display: flex;
  align-items: center;
}

.logo-display-inline img {
  margin-left: 8px; /* برای فاصله بین لوگو و متن */
}
@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 100 700;
    src: url("../fonts/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2") format("woff2"); /* مسیر اصلاح شد */
}