
.section-hero {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
	overflow: hidden;
	padding-bottom: 50px;
	padding-top: 30px !important;
}
.hero-shadow-1 {
	background: #0533E64D;
	width: 49%;
	height: 76%;
	position: absolute;
	filter: blur(120px);
	right: 5%;
	top: 0;
	z-index: -1;
	/*box-shadow: -52px 10px 110px 63px #0533E630;*/
	transform: rotate(14deg);
	animation: move-sh-1 6s alternate ease infinite;
}
.hero-shadow-2 {
	background: #58F7A333;
	width: 37%;
	height: 37%;
	position: absolute;
	filter: blur(200px);
	left: 10%;
	bottom: 0;
	z-index: -1;
	box-shadow: 0 29px 50px 50px #B7B7B7CF;
	animation: move-sh-2 4s alternate ease infinite;
}
.hero-shadow-3 {
	background: #69E7DC66;
	width: 36%;
	height: 42%;
	position: absolute;
	filter: blur(120px);
	left: 44%;
	bottom: 20%;
	z-index: -1;
	box-shadow: 10px 10px 50px 60px #69E7DC66;
	animation: move-sh-3 8s alternate ease infinite;
}
.hero-shadow-4 {
	background: #E7E7E796;
	width: 57%;
	height: 34%;
	position: absolute;
	filter: blur(120px);
	left: 0;
	bottom: 0;
	z-index: -1;
}

.hero-content {
	max-width: 100%;
}
.section-hero-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 132px;
	overflow: hidden;
}
.section-hero-wrap::after {
	content: '';
	background: #fff;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 13%;
	z-index: -1;
}

.hero-media-wrap {
	height: 100%;
	min-height: 400px;
	position: relative;
	order: -1;
	max-width: 500px;
	width: 100%;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
}
.hero-media {
	width: 110%;
}
.bg-svg {
	position: absolute;
	top: 19%;
	right: -11%;
	z-index: -1;
	left: 0;
	max-width: 85%;
}
.svg-1 {
	position: absolute;
	top: 20.5%;
	max-width: 69%;
	left: 8%;
	z-index: 0;
	/*border-radius: 18px;*/
	/*backdrop-filter: blur(24px);*/
}

.svg-2 {
	position: absolute;
	left: 74%;
	top: 25%;
	max-width: 16%;
	/*backdrop-filter: blur(96px);*/
	/*border-radius: 10px 10px 18px 18px;*/
	filter: drop-shadow(0px 14px 24px  #00000040);
}
.svg-3 {
	position: absolute;
	left: 30%;
	top: 28%;
	max-width: 27%;
	/*border-radius: 16px;*/
	filter: drop-shadow(0px 14px 24px  #00000040);
	/*box-shadow: ;*/

}
.svg-4 {
	position: absolute;
	left: 54%;
	top: 38%;
	max-width: 18%;
	z-index: 2;
	/*backdrop-filter: blur(96px);*/
	/*border-radius: 18px;*/
	filter: drop-shadow(0px 14px 24px  #00000040);
}
.svg-5 {
	position: absolute;
	left: 26%;
	top: 48%;
	/*backdrop-filter: blur(96px);*/
	/*border-radius: 19px;*/
	filter: drop-shadow(0px 14px 24px  #00000040);
	max-width: 30%;
	z-index: 2;
}
.svg-6 {
	position: absolute;
	left: 29%;
	max-width: 13%;
	top: 18%;
	/*backdrop-filter: blur(24px);*/
	filter: drop-shadow(0px 14px 24px  #00000040);
	/*border-radius: 20px;*/
}
.hero-circles {
	position: absolute;
	top: 15%;
	right: 0;
	z-index: -2;
	left: 4%;
	width: 93%;
	max-width: 700px;
}
.hero-media .icon-star {
	color: var(--primary);
	position: absolute;
}
.icon-star.shine-1 {
	font-size: 45px;
	top: 13%;
	left: 70%;
}
.icon-star.shine-2 {
	font-size: 15px;
	top: 18%;
	left: 44%;
}
.icon-star.shine-3 {
	font-size: 25px;
	top: 22%;
	left: 62%;
}
.icon-star.shine-4 {
	font-size: 23px;
	top: 36%;
	left: 20%;
}
.icon-star.shine-5 {
	font-size: 15px;
	top: 41%;
	left: 34%;
}
.icon-star.shine-6 {
	font-size: 23px;
	top: 58%;
	left: 0;
}
.icon-star.shine-7 {
	font-size: 25px;
	top: 20%;
	left: 3%;
}
.rate-box {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 16px;
}
.profile-img {
	border: 3px solid #FFFFFF;
	width: 53px;
	border-radius: 100%;
	overflow: hidden;
	display: inline-flex;
	background: #fff;
	height: 53px;
}
.rate-images {
	display: flex;
}
.rate-images .profile-img:not(:first-child) {
	margin-left: -20px;
}
.profile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}
.rate-num {
	font-size: 16px;
	color: #021250;
	line-height: 28px;
	font-variation-settings: "wght" 400, "wdth" 100;
}
.rate-vale {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.rate-star {
	display: flex;
	gap: 4px;
}
.rate-star i {
	width: 24px;
	height: 24px;
	border-radius: 2.5px;
	background: #219653;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	line-height: 1;
}
.hero-content .title {
	font-size: 36px;
	line-height: 50px;
	text-transform: capitalize;
	color: var(--color_main);
}
.hero-content .subtitle {
	font-size: 27px;
	line-height: 65px;
	text-transform: capitalize;
	color: var(--color_main);
	white-space: nowrap;
	height: 65px;
	overflow: hidden;
	margin-bottom: 10px;
}
.star-button.link {
	height: 48px;
}
.sliding-wrapper {
	transition: transform 0.5s ease-in-out;
	display: inline-flex;
	flex-direction: column;
	margin-left: 8px;
}
.sliding-text {
	display: block;
	margin: 0;
	color: var(--primary);
	position: relative;
	width: fit-content;
}
.sliding-text:before,
.sliding-text:after {
	content: "\e912";
	font-family: "icomoon";
	position: absolute;
	color: var(--primary);
	opacity: 0;
	transition: 0.5s cubic-bezier(.55,.09,.68,.53);
	transform: scale(0.5);
}
.sliding-text:before {
	font-size: 22px;
	top: -31px;
	right: -3px;
}
.sliding-text:after {
	font-size: 37px;
	top: -18px;
	right: -35px;
}
.sliding-text.active:before,
.sliding-text.active:after {
	animation: fade-star 0.5s ease-in 1 forwards 0.5s;
}
.sliding-text.active:after {
	animation-delay: 0.8s;
}

.hero-content .content {
	max-width: 100%;
	font-size: 16px;
	color: var(--color_text);
	margin: 10px 0;
}
.hero-btns {
	display: flex;
	gap: 12px;
	margin: 28px 0 30px;
}

.slide-content .title {
	color: var(--white);
	font-family: var(--bold_font);
	font-size: 23px;
	line-height: normal;
	opacity: 0;
}
.slide-content .subtitle {
	color: var(--white);
	font-size: 18px;
	line-height: 28px;
	opacity: 0;
	font-family: var(--bold_font);
	margin-bottom: 8px;
}
.slide-content .subtitle img {
	max-width: 35px;
	margin-left: 8px;
}
.subtitle i {
	font-size: 19px;
	margin-left: 8px;
	vertical-align: -5px;
}
.slide-content .content {
	color: var(--white);
	font-size: 14px;
	line-height: 28px;
	margin-top: 8px;
	opacity: 0;
}
.slide-content .link {
	margin-top: 20px;
	opacity: 0;
}
.buttons-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}
.buttons-wrap .button {
	min-width: unset;
	font-size: 14px;
	padding: 5px 10px;
}
.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .title {
	animation: fadeInLeft 1.5s ease-out 0.5s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .subtitle {
	animation: fadeInLeft 1.5s ease-out 0.7s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .content {
	animation: fadeInLeft 1.5s ease-out 0.9s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .link {
	animation: fadeInLeft 1.5s ease-out 1.1s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.left .slider-video {
	animation: fadeInLeft 1.5s ease-out 1.3s forwards, getFull 1.5s ease-out 2s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .title {
	animation: fadeInRight 1.5s ease-out 0.5s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .subtitle {
	animation: fadeInRight 1.5s ease-out 0.7s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .content {
	animation: fadeInRight 1.5s ease-out 0.9s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .link {
	animation: fadeInRight 1.5s ease-out 1.1s forwards;
}

.swiper-hero .swiper-slide.swiper-slide-active .slide-content.right .slider-video {
	animation: fadeInRight 1.5s ease-out 1.3s forwards, getFull 1.5s ease-out 2s forwards;
}

.slider-navigation {
	position: absolute;
	bottom: 20px;
}
.slider-inner {
	position: relative;
}
.brands-title {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 14px;
	color: #000A30;
}
.brands-title .title {
	font-variation-settings: "wght" 600, "wdth" 100;
	color: #000A30;
	position: relative;
	margin-right: 5px;
	transition: 0.4s ease;
}
.brands-title .title:before {
	content: "\e912";
	font-family: icomoon;
	font-size: 22px;
	position: absolute;
	left: 0;
	top: 15px;
	height: 0;
	opacity: 0;
	transform: scale(0.2);
	transition: opacity 0.2s ease, transform 0.5s ease-out;
}
.brands-title .title.active {
	color: var(--primary);
}
.brands-title .title.active:before {
	transform: translate(-20px , -40px) scale(1);
	opacity: 1;

}
.brands-title strong {
	font-variation-settings: "wght" 600, "wdth" 100;
}
.hero-brands.sw {
	max-width: 80%;
	margin: -50px auto 0;
}
.hero-brands.sw .swiper-brands {
	border: none;
}
.short-content {
	display: flex;
	align-items: first baseline;
	gap: 7px;
	font-size: 14px;
}
.hero-content .short-content::before {
	content: '';
	min-width: 9px;
	height: 9px;
	background: var(--primary);
	display: inline-block;
	border-radius: 3px;
}
.short-content i {
	color: var(--primary);
	font-size: 20px;
	margin: 0 1px 0 3px;
}

@media screen and (min-width: 576px){

	.hero-media-wrap {
		min-height: 551px;
		max-width: 700px;
		top: -51px;
	}
	.hero-circles {
		top: 6%;
		width: 85%;
	}
}
@media screen and (min-width: 768px){
	.rate-box {
		gap: 21px;
		margin-bottom: 40px;
	}
	.hero-content .title {
		font-size: 50px;
		line-height: 75px;
	}
	.hero-content .subtitle {
		font-size: 44px;
		height: 80px;
		margin-bottom: 16px;
	}
	.hero-content .content {
		font-size: 16px;
		margin: 16px 0 32px;
	}

}
@media screen and (min-width: 992px){
	.hero-content {
		max-width: 58%;
	}
	.section-hero {
		position: relative;
		margin-bottom: 0;
		padding-bottom: 170px;
		padding-top: 226px !important;
	}
	.hero-content .content {
		max-width: 84%;
	}
	.section-hero-wrap::after {
		content: none;
	}
	.hero-media-wrap {
		position: absolute;
		right: 0;
		left: unset;
		top: 0;
		width: 43%;
		overflow: hidden;
		max-width: 850px;
	}
	.section-hero-wrap {
		padding-top: 0;
	}
	.hero-circles {
		top: 15%;
		width: 93%;
	}
}
@media screen and (min-width: 1200px){
	.hero-content {
		max-width: 56%;
	}
	.hero-content .title {
		font-size: 58px;
	}
	.hero-content .subtitle {
		font-size: 48px;
		line-height: 80px;
		height: 80px;
		margin-bottom: 16px;
	}
	.hero-btns {
		gap: 18px;
		margin: 32px 0 20px;
	}
	.hero-media-wrap {
		width: 46%;
	}
}
@media screen and (min-width: 1400px){
	.hero-content {
		max-width: 45%;
	}
	.hero-media-wrap {
		width: 54%;
	}
}
@media screen and (min-width: 1700px) {
	.hero-media-wrap {
		max-width: 940px;
	}
	.bg-svg {
		right: -5%;
	}

}
@media screen and (min-width: 2000px) {
	.hero-media-wrap {
		left: 50%;
		width: 54%;
		max-width: 1000px;
	}
	.bg-svg {
		right: 0;
	}
/*	.svg-1 {
		max-width: 83%;
	}
	.svg-2 {
		left: 71%;
	}*/
}
@media screen and (max-width: 1399.99px) {
	.hero-content {
		max-width: 56%;
	}

}
@media screen and (max-width: 1119.99px){
	.hero-content {
		max-width: 58%;
	}


	.hero-content .title {
		font-size: 50px;
		line-height: 75px;
	}
	.hero-content .subtitle {
		font-size: 44px;
	}
	.svg-5 {
		top: 42%
	}
}
@media screen and (max-width: 991.99px){

	.section-hero-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		padding-top: 132px;
		overflow: hidden;
	}
	.section-hero-wrap::after {
		content: '';
		background: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 13%;
		z-index: -1;
	}
	.section-hero {
		position: unset;
		margin-bottom: 40px;
		padding-bottom: 50px;
		padding-top: 30px !important;
	}
	.bg-svg {
		right: 0;
	}
	.svg-1 {
		max-width: 83%
	}
	.svg-5 {
		top: 66%;
	}

	.hero-content {
		max-width: 100%;
	}
	.hero-content .content {
		max-width: 100%;
	}

	.hero-shadow-1 {
		width: 100%;
		height: 43%;
		right: 0;
		top: 0;
		transform: none;
		animation: none;
	}
	.hero-shadow-2 {
		width: 80%;
		height: 25%;
		left: 5%;
		bottom: 19%;
		animation: none;
	}
	.hero-shadow-3 {
		width: 68%;
		height: 17%;
		left: 7%;
		bottom: 43%;
		animation: none;
	}
	.hero-shadow-4 {
		display: none;
	}

}
@media screen and (max-width: 767.99px){



	.hero-media-wrap {
		animation: none;
	}
	.rate-box {
		gap: 14px;
		margin-bottom: 16px;
	}
	.hero-content .title {
		font-size: 36px;
		line-height: 50px;
	}
	.hero-content .subtitle {
		font-size: 27px;
		line-height: 65px;
		height: 65px;
		margin-bottom: 10px;
	}
	.sliding-text:before {
		font-size: 17px;
	}
	.sliding-text:after {
		font-size: 32px;
	}
	.sliding-text.active:before {
		top: -21px;
		right: 5px;
	}
	.sliding-text.active:after {
		top: -12px;
		right: -25px;
	}
	.hero-content .content {
		font-size: 16px;
		margin: 10px 0;
	}
	.hero-brands.sw {
		max-width: 100%;
	}

}
@media screen and (max-width: 575.99px){
	.hero-media-wrap {
		flex: 1 0 48%;
	}
	.short-content {
		font-size: 13px;
	}
	.short-content i {
		font-size: 15px;
	}
	.svg-1 {
		top: 11.5%;
		max-width: 100%;
		right: -4%;
		min-width: 430px;
	}
	.svg-2 {
		left: 73%;
		top: 21%;
		max-width: 32%;
		right: -5%;
	}
	.svg-3 {
		left: 26%;
		top: 24%;
		max-width: 36%;
	}
	.svg-4 {
		left: 52%;
		top: 42%;
		max-width: 26%;
	}
	.svg-5 {
		left: 22%;
		top: 61%;
		max-width: 37%;
	}
	.svg-6 {
		left: 31%;
		max-width: 19%;
		top: 7%;
	}
	.bg-svg {
		top: 8%;
		right: -25%;
		min-width: 537px;
	}
	.hero-circles {
		top: 0;
		right: -8%;
		left: 8%;
		min-width: 400px;
	}
	.brands-title .title {
		color: var(--primary);
	}
	.brands-title .title:before {
		transform: translate(-20px , -38px) scale(1);
		opacity: 1;

	}
	.brands-title {
		margin: 14px auto 0;
		max-width: 80%;
		text-align: center;
	}
	.brands-title p {
		display: inline-block;
	}
}
@media screen and (max-width: 370px) {
	.brands-title {
		max-width: 100%;
		text-align: center;
	}
	.slider-video {
		width: calc(100% - 145px);
		height: 48px;
	}
}
@media screen and (min-width: 992px) and (max-height: 850px) {
	.section-hero {
		padding-top: 190px !important;
	}
}
@media screen and (min-width: 992px) and (max-height: 790px) {
	.section-hero {
		padding-top: 160px !important;
	}
}
@media screen and (min-width: 992px) and (max-height: 730px) {
	.section-hero {
		padding-top: 140px !important;
	}
}
