.card,
.cs-hero .box-icon-border,
.data-source-sec .card-benefit,
.key-features .box-icon-border,
.measure .card-benefit,
.play {
	height: 100%
}

.logo-bottom a img,
.play,
.product-tabsec .nav-tabs .nav-item {
	width: 100%
}

.deploy .wg-pricing>.icon,
.wg-pricing .benefit-list.cus-list li .icon {
	height: auto;
	width: auto;
	background: 0 0
}

.content-display,
.s-build .slider-build .swiper-wrapper {
	min-height: 400px
}

.capability-card,
.content-display,
.feature-card,
.integration-item,
.product-card,
.swiper-nav {
	backdrop-filter: blur(10px)
}

.logo-site img {
	height: 45px
}

.logo-bottom a {
	width: 50%
}

.content-wrapper,
.item.has-child,
.partners,
.products-sec,
.s-indicator {
	position: relative
}

.swiper-slide .card-benefit {
	max-width: 100%;
	background-size: cover;
	background-position: center
}

.success {
	padding-top: 15px;
	border-top: 1px dashed #cccccc73;
	margin-top: 15px
}

.swiper-slide .card-benefit .head {
	padding: 32px 34px
}

.rating-custom {
	border: 1px dashed #af91e5;
	border-radius: 35px;
	text-align: center;
	padding: 15px;
	margin-top: 60px
}

.data-source-icon i,
.feature-item i,
.product-card.active h5,
.rating-custom p,
.table-custom td i,
.text-gradient {
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36);
	-webkit-background-clip: text;
	background-clip: text
}

.rating-custom span {
	font-weight: 600;
	font-size: 18px
}

.play {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center
}

.section-title,
.ui-badge {
	display: inline-block
}

.play img {
	width: 50px
}

.measure .calculator-section,
.product-tabsec .tab-pane,
.results-section {
	color: #fff
}

.form-label,
.metric-label {
	color: var(--text-secondary)
}

.calculator-section h2,
.results-section h2 {
	font-weight: 600;
	margin-bottom: 1.5rem;
	font-size: 1.8rem;
	color: #fff
}

.form-label {
	margin-top: 1rem
}

.calculator-section .form-control {
	padding: 24px 29px;
	background: linear-gradient(180deg, rgba(7, 7, 38, .5) 0, rgba(18, 24, 102, .5) 100%);
	color: var(--White);
	border-color: transparent
}

.form-control:focus {
	background-color: rgba(255, 255, 255, .08);
	border-color: var(--accent-color);
	color: var(--text-color);
	box-shadow: 0 0 0 .25rem rgba(255, 87, 34, .25)
}

.btn-calculate {
	background-color: var(--accent-color);
	border: none;
	padding: .8rem;
	font-weight: 600;
	margin-top: 1.5rem;
	width: 100%;
	transition: .3s
}

.content-section,
.explore-link i,
.testimonial-card,
.ui-card {
	transition: transform .3s
}

.btn-calculate:hover {
	background-color: #e64a19;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(255, 87, 34, .4)
}

.testimonial-card:hover,
.ui-card {
	box-shadow: 0 10px 20px rgba(0, 0, 0, .3)
}

.metric-label {
	font-size: 1.1rem;
	margin-bottom: .5rem
}

.metric-value {
	color: var(--accent-color);
	text-align: right
}

.content-title,
.data-source-card,
.deployment-card,
.impact .box-icon .type,
.impact .counter,
.impact p,
.industries .head,
.key-features,
.metric-card,
.quality-right,
.results-box,
.section-header,
.section-title,
.slide-header,
.tagline,
.team-card,
.timeline-dot {
	text-align: center
}

.progress {
	height: 8px;
	background-color: rgba(255, 255, 255, .1);
	margin-bottom: 1.5rem
}

.progress-bar {
	background: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36)
}

.chart-container {
	margin-top: 1.5rem;
	height: 250px;
	position: relative
}

.chart-title {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	font-weight: 600
}

.glow-effect {
	text-shadow: 0 0 10px rgba(255, 87, 34, .5)
}

.inner-banner .s-heading {
	width: auto
}

.testimonial-card {
	background-color: #1e1e1e;
	border: none;
	height: 100%
}

.testimonial-card:hover {
	transform: translateY(-5px)
}

.testimonial-img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid #6c757d
}

.quote-icon {
	font-size: 2rem;
	color: #6c757d;
	opacity: .5
}

.rating {
	color: #ffc107
}

.section-title::after {
	content: '';
	position: absolute;
	width: 50%;
	height: 3px;
	background: linear-gradient(to right, #6c757d, transparent);
	bottom: 0;
	left: 0
}

.carousel-control-next,
.carousel-control-prev {
	background-color: rgba(30, 30, 30, .5);
	border-radius: 50%;
	height: 50px;
	width: 50px;
	top: 50%;
	transform: translateY(-50%)
}

.carousel-control-prev {
	left: -25px
}

.carousel-control-next {
	right: -25px
}

.carousel-indicators {
	bottom: -50px
}

.carousel-indicators [data-bs-target] {
	background-color: #6c757d;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin: 0 5px
}

.carousel-indicators .active {
	background-color: #e0e0e0
}

.ui-showcase {
	margin-top: 100px;
	margin-bottom: 50px
}

.ui-card {
	background-color: #1e1e1e;
	border-radius: 10px;
	overflow: hidden
}

.ui-card:hover {
	transform: translateY(-10px)
}

.ui-img {
	width: 100%;
	height: 200px;
	object-fit: cover
}

.team-info-wrap,
.ui-card-body {
	padding: 20px
}

.ui-badge {
	background-color: #6c757d;
	color: #fff;
	font-size: .8rem;
	padding: 5px 10px;
	border-radius: 20px;
	margin-right: 5px;
	margin-bottom: 5px
}

.content-section {
	height: 100vh;
	display: flex;
	align-items: center
}

.sticky-section {
	position: sticky;
	top: 0;
	z-index: 1
}

#api-management,
.sticky-stack-section:nth-child(3) {
	z-index: 3
}

.section-card {
	transition: transform .3s, box-shadow .3s;
	position: relative;
	z-index: 1
}

.section-card.shrink {
	transform: scale(.85) translateX(-20px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
	z-index: 0;
	pointer-events: none
}

.capability-card:hover .stats-overlay,
.custom-card.visible,
.detail-section.active {
	transform: translateY(0);
	opacity: 1
}

.section-label {
	color: var(--primary-color);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 15px;
	letter-spacing: 1px
}

.section-text {
	color: var(--light-text);
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 30px
}

.explore-link {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center
}

.explore-link i {
	margin-left: 8px
}

.explore-link:hover i {
	transform: translateX(5px)
}

.sticky-stack-container {
	position: relative;
	background-image: radial-gradient(circle closest-side at 50% 60%, var(--purple-dark), #00001000 75%), radial-gradient(circle closest-side at 50% 40%, var(--purple-dark), #00000e00 75%)
}

.sticky-stack-section {
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1
}

.sticky-stack-section:first-child {
	z-index: 1
}

.sticky-stack-section:nth-child(2) {
	z-index: 2
}

.sticky-column {
	position: sticky;
	top: 70px;
	height: 100vh
}

.custom-card {
	padding: 0 30px 0 0;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .6s ease-out, transform .6s ease-out
}

.custom-card h4 {
	color: #c09ff8;
	margin-bottom: 15px
}

.custom-card p {
	color: #ced4da
}

.detail-section {
	display: none;
	opacity: 1;
	transform: translateY(40px);
	transition: opacity .6s, transform .6s;
	padding: 0 40px 0 0
}

.detail-section.active {
	display: flex;
	flex-direction: column
}

.detail-section h2 {
	color: #fff;
	margin-bottom: 20px;
	font-size: 2rem
}

.detail-section img {
	max-width: 100%;
	border-radius: 8px;
	transition: transform .4s
}

.detail-section img:hover {
	transform: scale(1.03)
}

form select option {
	background: #070a36
}

.mini-title {
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
	color: var(--White);
	margin-bottom: 11px
}

.features-sec .icon {
	display: inline-block;
	margin-top: 8px
}

.deploy .wg-pricing,
form.style-3 .form-check-input[type=checkbox] {
	margin-top: 0;
	padding: 0
}

.features-sec .benefit-list p {
	-webkit-box-orient: inherit;
	-webkit-line-clamp: none;
	overflow: auto;
	text-overflow: inherit
}

.features-sec .benefit-list p span {
	font-size: 22px
}

.features-sec .benefit-list li {
	gap: 10px;
	margin-bottom: 15px
}

.stats-card {
	background-color: #161b22;
	border-radius: 10px;
	border: 1px solid #30363d;
	padding: 25px;
	margin-bottom: 20px;
	transition: transform .3s, box-shadow .3s;
	height: 100%
}

.section-title:after,
.stats-number {
	background: linear-gradient(90deg, #58a6ff, #a371f7)
}

.cs-hero-sec .cs-hero .box-icon.style-2.type-2 .head,
.section-title {
	padding-bottom: 15px
}

.data-source-card:hover,
.deployment-card:hover,
.stats-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
	border-color: #58a6ff
}

.stats-number {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.icon.style-circle i,
.impact .box-icon.style-2.type-2 .head i,
.key-features .box-icon.style-2.type-2 .head i {
	background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

.stats-title {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 10px
}

.stats-description {
	color: var(--text-secondary);
	font-size: .9rem
}

.section-title {
	position: relative
}

.section-title:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 3px
}

.data-source-card {
	padding: 20px;
	margin-bottom: 20px;
	transition: .3s;
	height: 100%
}

.data-source-icon {
	font-size: 3.5rem;
	margin-bottom: 15px
}

.data-source-name {
	font-weight: 600;
	margin-bottom: 0
}

.deployment-card {
	background-color: #161b22;
	border-radius: 10px;
	border: 1px solid #30363d;
	padding: 30px;
	margin-bottom: 20px;
	transition: .3s;
	height: 100%
}

.deployment-icon {
	font-size: 3rem;
	margin-bottom: 20px;
	color: #58a6ff
}

.deployment-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 15px
}

.deployment-description {
	color: var(--text-secondary)
}

.footer {
	background-color: var(--darker-bg);
	padding: 30px 0;
	border-top: 1px solid #30363d;
	margin-top: 50px
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.animate-fadeInUp {
	animation: .5s forwards fadeInUp;
	opacity: 0
}

.impact .counter span {
	font-size: 48px
}

.deploy .s-heading,
.flip .video-background,
.flip-equation table,
.how-work-head .s-heading.style-2 .s-title,
.impact .box-icon .head,
.product-sec .card:last-child {
	margin-bottom: 0
}

.impact .box-icon .type {
	font-size: 22px;
	line-height: 27px;
	margin-bottom: 0
}

.impact .box-icon-border {
	height: 100%;
	background: 0 0
}

.impact .box-icon.style-2.type-2 .head i,
.key-features .box-icon.style-2.type-2 .head i {
	font-size: 30px;
	background-clip: text;
	margin-bottom: 8px;
	line-height: 33px
}

.impact .box-icon.style-2.type-2 .head .benefit-list li i,
.key-features .box-icon.style-2.type-2 .head .benefit-list li i {
	font-size: 14px;
	margin-bottom: 0
}

.impact .box-icon.style-2.type-2 .head .benefit-list li p {
	text-align: left;
	font-size: 16px
}

.impact .box-icon.style-2.type-2 .head .benefit-list {
	margin: auto;
	display: block
}

.wg-pricing>.icon i {
	font-size: 30px;
	color: #0075ff
}

.impact.s-indicator .s-heading {
	margin-bottom: 60px
}

.icon-about {
	font-size: 50px;
	color: #0075ff;
	margin-bottom: 20px
}

.roi-card {
	background-color: #1e1e1e;
	border-radius: 12px;
	box-shadow: 0 0 15px rgba(0, 0, 0, .4);
	padding: 2rem;
	max-width: 1000px;
	margin: auto
}

.gradient-header,
.gradient-text {
	background: linear-gradient(135deg, var(--zyrix-purple), var(--zyrix-teal))
}

.range-label {
	font-weight: 500;
	margin-bottom: 1.25rem;
	width: 100%
}

.range-value {
	float: right;
	color: #0d6efd
}

.range-input {
	width: 100%;
	margin-bottom: 4.5rem
}

.results-box {
	padding: 1.5rem;
	border-radius: 10px
}

.results-box h3 {
	margin-bottom: 1.5rem;
	font-size: 30px
}

.savings {
	font-size: 2rem;
	font-weight: 700;
	color: #00c48c;
	margin-bottom: 15px
}

.stat-label,
.stat-value {
	font-weight: 500
}

.results-box hr {
	margin: 2rem 0
}

.blog-single p,
.key-features .benefit-list li,
.list-margin-15 li,
.product-sec .benefit-list li,
.product-sec .s-heading p,
.results-box .justify-content-between,
.solution-s2 .benefit-list li:not(:last-child),
.why-choose .benefit-list li {
	margin-bottom: 15px
}

.roi .card-benefit .head {
	padding-bottom: 20px
}

:root {
	--zyrix-purple: #8b5cf6;
	--zyrix-teal: #14b8a6;
	--zyrix-lightblue: #3b82f6;
	--zyrix-gray: #0f172a;
	--zyrix-dark: #1e293b;
	--zyrix-darker: #334155;
	--zyrix-light: #64748b;
	--zyrix-text: #e2e8f0;
	--zyrix-muted: #94a3b8
}

.gradient-text {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.dashboard .card {
	background-color: transparent;
	border: 1px solid var(--zyrix-darker) !important;
	color: var(--zyrix-text)
}

.product-sec .card {
	background-image: linear-gradient(180deg, #00000f80, #00000f00), radial-gradient(circle farthest-side at 50% 100%, #322275, #000010);
	box-shadow: 0 -4px 4px #00001040, 0 20px 24px #0a0719bf;
	border: 1px solid #322275;
	margin-bottom: 60px
}

.feature-item {
	cursor: pointer;
	transition: .3s;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 8px;
	color: var(--zyrix-text)
}

.feature-item:hover,
.progress {
	background-color: var(--zyrix-darker)
}

.feature-item.active {
	background: linear-gradient(135deg, rgba(139, 92, 246, .2), rgba(20, 184, 166, .2));
	border-left: 4px solid var(--zyrix-purple);
	font-weight: 600
}

.dashboard-content {
	background: linear-gradient(135deg, rgba(139, 92, 246, .05), rgba(20, 184, 166, .05));
	position: relative;
	overflow: hidden
}

.progress-animated {
	transition: width .5s
}

.spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--zyrix-darker);
	border-top: 2px solid var(--zyrix-purple);
	border-radius: 50%;
	animation: 1s linear infinite spin
}

@keyframes spin {
	0% {
		transform: rotate(0)
	}

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

.chart-bar {
	transition: .5s;
	background: linear-gradient(to top, var(--zyrix-purple), var(--zyrix-lightblue));
	border-radius: 4px 4px 0 0
}

.terminal {
	background: #000;
	color: #0f0;
	font-family: "Courier New", monospace;
	font-size: 12px;
	padding: 12px;
	border-radius: 6px;
	height: 120px;
	overflow-y: auto;
	border: 1px solid var(--zyrix-darker)
}

.metric-card,
code {
	background-color: var(--zyrix-darker)
}

.status-badge {
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 12px
}

.metric-card {
	border-radius: 8px;
	padding: 12px;
	border: 1px solid var(--zyrix-light);
	height: 100%
}

.browser-card {
	background: var(--zyrix-dark);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
	overflow: hidden;
	border: 1px solid var(--zyrix-darker)
}

.free-form,
.modal-content {
	box-shadow: 0 -4px 4px #00001040, 0 20px 24px #0a0719bf
}

.browser-header {
	background: var(--zyrix-darker);
	padding: 8px;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	color: var(--zyrix-text)
}

.browser-content {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--zyrix-dark)
}

.fade-in {
	animation: .5s ease-in fadeIn
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.bg-decoration {
	position: absolute;
	width: 256px;
	height: 256px;
	border-radius: 50%;
	filter: blur(60px);
	z-index: -1
}

.bg-decoration-1 {
	top: 0;
	right: 0;
	background: rgba(20, 184, 166, .1)
}

.bg-decoration-2 {
	bottom: 0;
	left: 0;
	background: rgba(139, 92, 246, .1)
}

.text-muted {
	color: var(--zyrix-muted) !important
}

.border-bottom,
.border-end,
.border-start {
	border-color: var(--zyrix-darker) !important
}

.alert-warning {
	background-color: rgba(255, 193, 7, .1);
	border-color: rgba(255, 193, 7, .2);
	color: var(--zyrix-text)
}

.bg-light {
	background-color: var(--zyrix-darker) !important
}

.bg-success {
	background-color: rgba(25, 135, 84, .2) !important
}

.bg-primary {
	background-color: rgba(13, 110, 253, .2) !important
}

.bg-secondary {
	background-color: rgba(108, 117, 125, .2) !important
}

.bg-warning {
	background-color: rgba(255, 193, 7, .2) !important
}

.bg-info {
	background-color: rgba(13, 202, 240, .2) !important
}

.border-success {
	border-color: #198754 !important
}

.border-primary {
	border-color: #0d6efd !important
}

.border-secondary {
	border-color: #6c757d !important
}

.border-warning {
	border-color: #ffc107 !important
}

.border-info {
	border-color: #0dcaf0 !important
}

code {
	color: var(--zyrix-teal);
	padding: 2px 4px;
	border-radius: 3px
}

.feature-benefits {
	background: rgba(139, 92, 246, .1);
	border: 1px solid rgba(139, 92, 246, .2)
}

.dashboard h5 {
	color: #fff;
	font-size: 18px;
	line-height: 22px
}

.dashboard h4 {
	color: #fff;
	font-size: 26px;
	line-height: 28px;
	margin-bottom: 20px;
	margin-top: 20px
}

.dashboard h6 {
	color: #fff;
	font-size: 18px
}

.partners .s-partner.s1 {
	padding: 0 0 100px
}

.icon.style-circle i {
	background-clip: text;
	font-size: 30px
}

.text {
	color: var(--Text-2)
}

.s-hero-banner .bg-black {
	background-color: rgb(0 0 16) !important
}

.s-hero-banner .bloom {
	background: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #de57ff);
	filter: blur(100px);
	width: 50%;
	height: 50%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: .5
}

.product-sec .card,
.product-sec .card .card-body,
.right-sol-content .tf-accordion {
	padding: 0
}

.product-sec .s-heading {
	padding: 30px;
	width: 100%
}

.s-price-compare .counter span {
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, #d1aad7 11%, #dcbfe1 25%, #7b8fdd 50%, #86bff2 74%, #bbdef2);
	-webkit-background-clip: text;
	background-clip: text
}

.counter br,
.pricing-sec-new .wg-pricing>.icon,
.s-price-compare .bloom.style-6 {
	display: none
}

.qulity-box {
	border-radius: 10px;
	padding: 9px 24px 9px 19px;
	position: relative;
	background: #00031c;
	color: #fff
}

.carousel-fade .image i,
.stat-icon {
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36)
}

.qulity-box h3 {
	color: #fff;
	font-size: 20px;
	margin-bottom: 15px
}

.alert-dark {
	background-color: rgba(40, 40, 40, .5);
	border-color: #444;
	color: #d0d0d0
}

.stat-card {
	border-radius: 8px;
	transition: transform .2s, box-shadow .2s;
	padding: 15px;
	position: relative;
	background-color: #000010
}

.stat-card::after {
	content: "";
	border-radius: 10px;
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	z-index: -1;
	background: linear-gradient(325.29deg, #10111f 13.44%, #393d64 80.43%)
}

.stat-card .card-body {
	display: flex;
	gap: 15px
}

.benefit-list p {
	margin-bottom: 0 !important;
	color: var(--Text-2)
}

.stat-icon {
	font-size: 3rem;
	-webkit-background-clip: text;
	background-clip: text;
	margin-bottom: 15px;
	display: inline-block
}

.quality-sec h4,
.quality-sec h5,
.stat-value {
	font-size: 20px
}

.stat-value {
	color: #fff;
	margin-bottom: .5rem
}

.quality-sec .s-heading {
	margin-bottom: 60px;
}

.future-items {
	margin-top: 1rem
}

.future-item {
	display: flex;
	align-items: center;
	background-color: rgba(50, 50, 50, .5);
	border: 1px solid #444;
	border-radius: 6px;
	padding: .75rem 1rem;
	transition: border-color .2s
}

.future-item:hover {
	border-color: #4da3ff
}

.future-item i {
	color: #4ade80;
	font-size: 1.25rem;
	margin-right: .75rem
}

.cta-card {
	background: linear-gradient(135deg, rgba(30, 64, 175, .5), rgba(109, 40, 217, .5));
	border: 1px solid rgba(79, 70, 229, .3);
	border-radius: 10px;
	padding: 2rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center
}

.data-source-sec,

.inner-banner {
	padding-top: 70px;
	padding-bottom: 70px
}

.deploy {
	padding: 60px 30px;
	border-radius: 10px;
	background-image: radial-gradient(circle farthest-corner at 50% 140%, var(--purple-dark) 25%, var(--Black) 75%);
	border: 1px solid #272140
}

.deploy .wg-pricing {
	box-shadow: none;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	gap: 20px;
	background: 0 0
}

.deploy .wg-pricing::after,
.flip .stat-card::after {
	content: none
}

.deploy .wg-pricing>.icon {
	border: 0;
	position: static;
	transform: none;
	display: block
}

form.style-3 .form-check {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	gap: 15px
}

.checkhead {
	color: var(--Bg-2);
	margin-bottom: 15px
}

.free-form {
	background-image: linear-gradient(180deg, #00000f80, #00000f00), radial-gradient(circle farthest-side at 50% 100%, #322275, #000010);
	border: 1px solid #322275;
	border-radius: 8px
}

.free-form form {
	padding: 30px;
	border-right: 1px solid #322275
}

.table-custom td,
.table-custom th {
	padding: 1.5rem;
	color: var(--Text-2)
}

.flip-equation .data-source-card p,
.free-form .form-check-label,
.li-list .benefit-list p {
	font-size: 16px
}

.form-right-sec {
	padding: 30px;
	height: 100%
}

.quality-right {
	margin-top: 30px
}

.quality-right .benefit-list {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center
}

.demo-video-wrap {
	background-image: linear-gradient(rgb(0 0 0 / 50%), #442e99), url("../images/item/background-2.png");
	background-position: 0 0, 50%;
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
	border-radius: 14px;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 30px;
	display: flex;
	height: 100%
}

.card-description,
.form-right-sec .benefit-list li {
	margin-bottom: 20px
}

.section-card video {
	margin-bottom: 0;
	border-radius: 10px
}

#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

.s-heading .s-title,
.s-hero-banner .s-title {
	font-size: 42px
}

.s-about-us.dashboard {
	padding-top: 20px
}

.s-testimonial .bloom {
	width: 50%;
	height: 50%;
	z-index: -1
}

.deploy .pricing-table .data-source-card {
	margin-bottom: 0;
	padding: 0
}

.deploy .pricing-table table {
	border: none
}

.deploy .pricing-table table tr td:nth-child(2) {
	border-right: 0
}

.deploy .pricing-table table tr:last-child td {
	border-bottom: 0
}

.carousel-fade .image i {
	font-size: 40px;
	margin-top: 30px;
	-webkit-background-clip: text;
	background-clip: text
}

.carousel-fade .card-benefit {
	text-align: center;
	min-height: 335px
}

.s-build .swiper-pagination {
	bottom: 0
}

.wg-pricing .benefit-list.cus-list {
	min-height: 43%
}

.quality-right h4 {
	font-size: 30px;
	margin-bottom: 15px
}

.table-custom {
	margin: 0;
	border-color: #343444
}

.table-custom th {
	background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
	font-weight: 600;
	border: none
}

.table-custom td {
	border-color: rgba(255, 255, 255, .1);
	background: 0 0;
	transition: .3s
}

.hero-play:hover i,
.source span {
	color: #959efe
}

.table-custom tr:hover td {
	background: rgba(255, 255, 255, .05)
}

.team-card {
	background-image: radial-gradient(circle farthest-corner at 50% 140%, var(--purple-dark) 25%, var(--Black) 75%);
	border: 1px solid #272140;
	border-radius: 10px;
	padding: 2rem;
	transition: .4s;
	height: 100%
}

.buzz-box i,
.card-icon i,
.integration-item i,
.team-icon,
.video-container:hover .play-btn {
	background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36);
	-webkit-text-fill-color: transparent
}

.team-card h4 {
	font-size: 22px;
	margin-top: 15px
}

.buzz-box i,
.team-icon {
	font-size: 30px;
	-webkit-background-clip: text;
	background-clip: text
}

.data-trust {
	border: 1px solid #272140;
	padding: 30px
}

.data-trust .benefit-list {
	margin: auto;
	display: inline-block
}

#use-cases .key-point-list li::after,
.custom-point li::after,
.flip-equation table tbody tr:first-child td:first-child,
.flip-equation table tbody tr:nth-child(2) td:nth-child(2),
.flip-equation table tbody tr:nth-child(3) td:first-child {
	background: linear-gradient(325.29deg, #10111f 13.44%, #393d64 80.43%)
}

.buzz-box {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background-image: linear-gradient(#ffffff26, #ffffff05);
	border: 1px solid;
	border-radius: 8px;
	margin-bottom: 30px
}

.buzz-box .buzz-icon {
	border-radius: 8px;
	border: 1px solid #272140;
	padding: 16px
}

.w-80 {
	width: 80%
}

.w-70 {
	width: 70%
}

.modal-dialog .btn-close,
.modal-header .btn-close {
	position: absolute;
	top: -32px;
	right: 0;
	background-color: #fff !important;
	width: 25px;
	height: 25px;
	filter: none;
	border-radius: 50%;
	font-size: 14px
}

.modal-content {
	background-image: linear-gradient(180deg, #00000f80, #00000f00), radial-gradient(circle farthest-side at 50% 100%, #322275, #000010)
}

.modal-footer {
	border-top: 1px solid #322275
}

.exprience-wrap {
	padding-left: 30px
}

.modal-header {
	background: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36);
	padding: 3px
}

.dqg-data .deploy .pricing-table table tr td:nth-child(2) {
	border-right: .72px solid rgba(32, 36, 134, .3490196078)
}

.dqg-data .deploy .pricing-table table {
	border: .72px solid rgba(32, 36, 134, .3490196078)
}

.how-work-head {
	position: sticky;
	top: 72px;
	background: #000010;
	z-index: 1;
	padding-top: 18px;
	margin-bottom: 0
}

.how-work-head .s-heading {
	width: 100%;
	padding-right: 30px;
	margin-bottom: 30px
}

#leftColumn,
.learn-more,
.our-people-right {
	margin-top: 30px
}

.data-cp .custom-card {
	height: 100vh
}

.capabilities-section {
	padding: 80px 0;
	position: relative;
	overflow: hidden
}

.capabilities-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: .1
}

.section-header {
	margin-bottom: 80px;
	position: relative;
	z-index: 2
}

.section-title {
	background: var(--primary-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.section-subtitle {
	font-size: 1.3rem;
	color: #6c757d;
	max-width: 600px;
	margin: 0 auto;
	animation: 1s ease-out .2s both fadeInUp
}

.capabilities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 30px;
	position: relative;
	z-index: 2
}

.capability-card {
	padding-top: 30px;
	box-shadow: var(--card-shadow);
	transition: .4s cubic-bezier(.175, .885, .32, 1.275);
	position: relative;
	overflow: hidden;
	margin-bottom: 30px
}

.capability-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--primary-gradient);
	transform: scaleX(1);
	transition: transform .3s
}

.capability-card:hover::before {
	transform: scaleX(1)
}

.capability-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--card-shadow-hover)
}

.capability-card:first-child {
	animation: .8s ease-out .1s both slideInLeft
}

.capability-card:nth-child(2) {
	animation: .8s ease-out .2s both slideInUp
}

.capability-card:nth-child(3) {
	animation: .8s ease-out .3s both slideInRight
}

.capability-card:nth-child(4) {
	animation: .8s ease-out .4s both slideInLeft
}

.capability-card:nth-child(5) {
	animation: .8s ease-out .5s both slideInUp
}

.capability-card:nth-child(6) {
	animation: .8s ease-out .6s both slideInRight
}

.card-icon {
	width: 80px;
	height: 80px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	font-size: 2rem;
	color: #fff;
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(#ffffff26, #ffffff05) !important;
	border: 1px solid #ffffff14
}

.card-icon::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: inherit;
	opacity: .8;
	transition: opacity .3s
}

.capability-card:hover .card-icon::before,
.element-item.stacked {
	opacity: 1
}

.card-icon i {
	position: relative;
	z-index: 1;
	transition: transform .3s;
	-webkit-background-clip: text;
	background-clip: text;
	font-size: 40px
}

.card-icon.ai-intelligence {
	background: var(--primary-gradient)
}

.card-icon.user-journeys {
	background: var(--secondary-gradient)
}

.card-icon.orchestration {
	background: var(--accent-gradient)
}

.card-icon.cross-browser {
	background: var(--dark-gradient)
}

.card-icon.self-healing {
	background: linear-gradient(135deg, #ff9a9e 0, #fecfef 100%)
}

.card-icon.reporting {
	background: linear-gradient(135deg, #a8edea 0, #fed6e3 100%)
}

.card-title {
	transition: color .3s;
	font-size: 24px
}

.capability-card:hover .card-title {
	color: #667eea
}

.floating-elements {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	overflow: hidden
}

.floating-element {
	position: absolute;
	background: rgba(255, 255, 255, .1);
	border-radius: 50%;
	animation: 6s ease-in-out infinite float
}

.floating-element:first-child {
	width: 60px;
	height: 60px;
	top: 10%;
	left: 10%;
	animation-delay: 0s
}

.floating-element:nth-child(2) {
	width: 40px;
	height: 40px;
	top: 20%;
	right: 15%;
	animation-delay: 2s
}

.floating-element:nth-child(3) {
	width: 80px;
	height: 80px;
	bottom: 15%;
	left: 20%;
	animation-delay: 4s
}

.floating-element:nth-child(4) {
	width: 50px;
	height: 50px;
	bottom: 25%;
	right: 10%;
	animation-delay: 1s
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(50px)
	}

	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(50px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0) rotate(0)
	}

	50% {
		transform: translateY(-20px) rotate(180deg)
	}
}

.pulse-animation {
	animation: 2s infinite pulse
}

.stats-overlay {
	position: absolute;
	top: 15px;
	right: 15px;
	background: rgba(255, 255, 255, .9);
	padding: 5px 10px;
	border-radius: 15px;
	font-size: .8rem;
	font-weight: 600;
	color: #667eea;
	opacity: 0;
	transform: translateY(-10px);
	transition: .3s
}

.step-c {
	background: #2760ff;
	border-radius: 4px;
	padding: 3px 5px;
	font-size: 18px !important
}

.source {
	color: var(--Text-2);
	font-size: 16px;
	margin-top: 15px;
	display: block
}

.source span {
	font-weight: 400
}

.source:hover span {
	text-decoration: underline
}

.video-container {
	position: relative;
	display: inline-block;
	overflow: hidden;
	cursor: pointer
}

.play-btn,
.watch-text {
	position: absolute;
	left: 50%;
	color: #fff
}

.video-container img {
	display: block;
	width: 100%;
	height: auto
}

.play-btn {
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 60px;
	transition: .3s;
	z-index: 2
}

.watch-text {
	bottom: 20px;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, .6);
	padding: 6px 12px;
	border-radius: 20px;
	opacity: 0;
	transition: .4s;
	font-size: 14px;
	z-index: 1
}

.video-container:hover .watch-text {
	opacity: 1;
	bottom: 40px
}

.video-container:hover .play-btn {
	-webkit-background-clip: text;
	background-clip: text;
	transform: translate(-50%, -50%) scale(1.1)
}

.decimal,
.sm-left,
.wp-block-list {
	padding-left: 20px
}

.left-border {
	padding: 6px 15px;
	border-left: 4px solid #4f60fa;
	font-weight: 500;
	font-size: 22px;
	margin: 30px auto;
	display: table
}

.use-people-sec .deploy {
	position: relative;
	z-index: 1;
	border-bottom: 4px solid #272140
}

.article-detail .casestudy-title {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-bottom: 30px
}

.article-detail .casestudy-title img {
	width: 80px
}

.feature-cards {
	position: relative;
	z-index: 2
}

.feature-card {
	border-radius: 20px;
	position: relative;
	height: 100%;
	transition: .4s cubic-bezier(.25, .46, .45, .94);
	background-image: radial-gradient(circle farthest-corner at 50% 140%, var(--purple-dark) 25%, var(--Black) 75%);
	border: 1px solid #272140
}

.card-overlay,
.video-background {
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	top: 0
}

.video-background {
	position: absolute;
	object-fit: cover;
	opacity: .3;
	transition: opacity .4s
}

.feature-card:hover .video-background {
	opacity: .5
}

.card-overlay {
	position: relative;
	padding: 40px 40px 90px;
	background: rgb(0 0 0 / 42%)
}

.card-icon1 {
	font-size: 4rem;
	margin-bottom: 20px;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36 100%);
	-webkit-background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: transform .3s;
	display: inline-block
}

.timeline-dot,
.timeline::before {
	left: 50%;
	background: #272140;
	transform: translateX(-50%)
}

.card-title {
	font-weight: 600;
	margin-bottom: 15px;
	color: var(--text-primary)
}

.card-features {
	list-style: none;
	padding: 0
}

.card-features li {
	display: flex;
	align-items: center;
	margin-bottom: 8px
}

.card-features li i {
	margin-right: 8px
}

.btn-edge {
	position: absolute;
	bottom: 40px
}

.timeline {
	position: relative;
	padding: 2rem 3rem;
	border: 1px solid #272140;
	border-radius: 10px
}

.timeline::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px
}

.timeline-item {
	position: relative;
	margin-bottom: 15px
}

.content-display,
.tagline {
	margin-bottom: 40px;
	z-index: 2
}

.timeline-content {
	padding: 2rem;
	width: 47%;
	position: relative
}

.timeline-item:nth-child(odd) .timeline-content {
	margin-left: auto
}

.timeline-item:nth-child(2n) .timeline-content {
	margin-right: auto;
	text-align: right
}

.timeline-dot {
	position: absolute;
	top: 2rem;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	z-index: 2;
	padding: 2px;
	display: flex;
	justify-content: center;
	align-items: center
}

.cs-hero .box-icon.style-2.type-2 .head {
	padding-bottom: 0;
	margin-bottom: 0
}

.cs-hero .counter span {
	font-size: 42px;
	line-height: 55px
}

.article-detail .content {
	padding-top: 40px
}

.decimal li {
	list-style: decimal
}

.blog-table .table,
.blog-table td,
.blog-table th {
	background-color: transparent !important;
	color: var(--Text-2) !important;
	border-color: #343444;
	border-width: 1px !important
}

.blog-table .table td,
.blog-table .table th {
	padding: 10px
}

.cs-hero .box-icon.style-2.type-2 {
	padding-bottom: 0
}

.casestudy-title i,
.left .bi.text-gradient {
	font-size: 50px
}

.key-features {
	margin-top: 50px
}

.key-features h5 {
	margin-bottom: 50px
}

.content-display {
	background-image: linear-gradient(#ffffff26, #ffffff05);
	border-radius: 15px;
	padding: 40px 40px 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	position: relative
}

.product-card,
.product-tabs {
	background-image: linear-gradient(180deg, #00000f80, #00000f00), radial-gradient(circle farthest-side at 50% 100%, #322275, #000010);
	box-shadow: 0 -4px 4px #00001040, 0 20px 24px #0a0719bf
}

.product-content {
	display: none;
	opacity: 0;
	transition: opacity .5s ease-in-out
}

.product-content.active {
	display: block;
	opacity: 1
}

.product-tabs {
	padding: 40px;
	border-radius: 45px;
	border: 1px solid #322275
}

.product-cards-container {
	display: flex;
	gap: 20px;
	justify-content: center;
	position: relative;
	z-index: 2
}

.product-card {
	flex: 1;
	border-radius: 15px;
	padding: 25px;
	transition: .3s;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border: 1px solid #322275
}

.author-wrap,
.product-card h5 {
	display: flex;
	align-items: center
}

.product-card:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, .15)
}

.product-card.active {
	background-image: linear-gradient(180deg, #00000f80, #00000f00), radial-gradient(circle farthest-side at 50% 100%, #322275, #000010);
	border: 2px solid rgba(0, 123, 255, .5);
	transform: translateY(-3px)
}

.product-card h5 {
	color: #fff;
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 18px;
	gap: 12px
}

.product-card p {
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 20px
}

.progress-container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(255, 255, 255, .2)
}

.progress-bar-custom {
	height: 100%;
	background: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36);
	width: 0%;
	transition: width .1s linear
}

.product-card.active .progress-bar-custom {
	animation: 5s linear progressFill
}

@keyframes progressFill {
	from {
		width: 0%
	}

	to {
		width: 100%
	}
}

.tagline {
	color: #fff;
	font-size: 18px;
	opacity: .9;
	position: relative
}

.content-title {
	font-size: 30px
}

.industries .card-benefit::after {
	z-index: 0;
	opacity: .8;
	background: #000010;
	border-radius: 13.6px
}

.impact .head img {
	width: 100%;
	height: 185px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 20px
}

.author-wrap {
	gap: 15px
}

.swiper-nav,
.swiper-wrapper {
	align-items: center;
	display: flex
}

.author-wrap img {
	width: 60px;
	border-radius: 50%
}

.industries .card-benefit .icon,
.learn-more a {
	margin: auto
}

.industries .card-benefit .cs-number {
	font-size: 40px;
	font-weight: 600;
	display: inline-block;
	margin-top: 20px
}

.flip .key-point-list li {
	width: 100%;
	text-align: left
}

.flip-equation .data-source-card {
	padding: 0;
	margin-bottom: 0
}

.stat-value span {
	font-size: 30px;
	margin-bottom: 15px;
	display: inline-block;
	line-height: 30px
}

.flip-equation .s-heading {
	padding: 30px;
	margin-bottom: 0
}

table .data-source-card:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent
}

.flip .card-overlay {
	padding: 40px;
	background: 0 0
}

.flip .feature-card {
	z-index: 1;
	margin-top: 40px;
	height: auto
}

.swiper-container {
	position: relative;
	height: 50vh;
	perspective: 1500px;
	width: 100%
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	justify-content: center;
	transform-style: preserve-3d
}

.swiper-slide {
	position: absolute;
	width: 350px;
	height: auto;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
	transition: .6s cubic-bezier(.25, .46, .45, .94);
	cursor: pointer;
	background-size: cover;
	background-position: center
}

.slide-content {
	position: relative;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .4));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px 30px;
	color: #fff
}

.slide-title {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 1.3
}

.slide-subtitle {
	font-size: 1rem;
	opacity: .9;
	margin-bottom: 20px
}

.slide-metric {
	text-align: center;
	margin: 30px 0
}

.metric-value {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, .5)
}

.metric-description {
	font-size: .95rem;
	opacity: .9;
	margin-top: 15px;
	line-height: 1.4
}

.swiper-slide.prev {
	transform: translateX(-400px) translateZ(-300px) rotateY(45deg);
	opacity: .8;
	z-index: 1
}

.swiper-slide.active {
	transform: translateX(0) translateZ(0) rotateY(0);
	opacity: 1;
	z-index: 3
}

.swiper-slide.next {
	transform: translateX(400px) translateZ(-300px) rotateY(-45deg);
	opacity: .8;
	z-index: 1
}

.swiper-slide.hidden {
	transform: translateX(600px) translateZ(-500px) rotateY(-60deg);
	opacity: 0;
	z-index: 0
}

.swiper-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 2px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	justify-content: center;
	cursor: pointer;
	transition: .3s;
	z-index: 10
}

.swiper-nav:hover {
	background: rgba(255, 255, 255, .3);
	border-color: rgba(255, 255, 255, .5);
	transform: translateY(-50%) scale(1.1)
}

.swiper-nav i {
	color: #fff;
	font-size: 1.2rem
}

.swiper-nav.prev {
	left: 50px
}

.swiper-nav.next {
	right: 50px
}

.slide-1,
.slide-2,
.slide-3,
.slide-4,
.slide-5 {
	background-image: linear-gradient(135deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .3)), url('/placeholder.svg?height=450&width=350')
}

@media (max-width:768px) {
	.section-title {
		font-size: 2.5rem
	}

	.capabilities-grid {
		grid-template-columns: 1fr;
		gap: 20px
	}

	.card-overlay,
	.content-display,
	.slide-content {
		padding: 30px 20px
	}

	.btn-edge {
		position: static
	}

	.content-features {
		flex-direction: column;
		gap: 15px
	}

	.product-cards-container {
		flex-wrap: wrap
	}

	.product-card {
		max-width: 100%;
		margin-bottom: 20px
	}

	.swiper-slide {
		width: 280px;
		height: 380px
	}

	.metric-value {
		font-size: 3rem
	}

	.swiper-nav {
		width: 50px;
		height: 50px
	}

	.swiper-nav.prev {
		left: 20px
	}

	.swiper-nav.next {
		right: 20px
	}

	.swiper-slide.prev {
		transform: translateX(-250px) translateZ(-200px) rotateY(35deg)
	}

	.swiper-slide.next {
		transform: translateX(250px) translateZ(-200px) rotateY(-35deg)
	}

	.swiper-container {
		height: 500px;
		perspective: 1200px
	}
}

.swiper-indicators {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10
}

.browse-btn,
.integrations-container,
.section-description,
.section-title {
	transform: translateY(30px);
	opacity: 0
}

.indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	transition: .3s
}

.indicator.active {
	background: #fff;
	transform: scale(1.2)
}

.integration-section {
	background: linear-gradient(135deg, #1a1a2e 0, #16213e 50%, #0f3460 100%);
	min-height: 100vh;
	padding: 80px 0;
	position: relative
}

.integration-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at center, rgba(138, 43, 226, .1) 0, transparent 70%);
	pointer-events: none
}

.section-title {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 2rem;
	color: #e0e0e0;
	animation: 1s ease-out .2s forwards fadeInUp
}

.highlight {
	background: linear-gradient(45deg, #ff6b35, #f7931e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.section-description {
	font-size: 1.2rem;
	color: #b0b0b0;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
	animation: 1s ease-out .4s forwards fadeInUp
}

.integrations-container {
	overflow: hidden;
	position: relative;
	animation: 1s ease-out .6s forwards fadeInUp
}

.marquee-row {
	margin: 20px 0;
	overflow: hidden;
	white-space: nowrap;
	position: relative
}

.marquee-content {
	display: inline-flex;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite
}

.marquee-right .marquee-content {
	animation-name: scrollRight
}

.marquee-left .marquee-content {
	animation-name: scrollLeft
}

@keyframes scrollRight {
	0% {
		transform: translateX(-50%)
	}

	100% {
		transform: translateX(0)
	}
}

@keyframes scrollLeft {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(-50%)
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.integration-item {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	padding: 15px;
	margin: 0 10px;
	white-space: nowrap;
	transition: .3s;
	position: relative;
	overflow: hidden;
	cursor: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0
}

.integration-item i {
	font-size: 3rem;
	-webkit-background-clip: text;
	background-clip: text
}

.integration-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
	transition: left .5s
}

.integration-item:hover::before {
	left: 100%
}



.browse-btn {
	background: linear-gradient(45deg, #4285f4, #34a853);
	border: none;
	padding: 15px 40px;
	font-size: 1.1rem;
	font-weight: 600;
	border-radius: 50px;
	transition: .3s;
	box-shadow: 0 8px 25px rgba(66, 133, 244, .3);
	animation: 1s ease-out .8s forwards fadeInUp
}

.particle,
.ripple {
	border-radius: 50%;
	pointer-events: none;
	position: absolute
}

.browse-btn:hover {
	background: linear-gradient(45deg, #3367d6, #2d8f47);
	transform: translateY(-2px);
	box-shadow: 0 12px 35px rgba(66, 133, 244, .4)
}

.browse-btn:active {
	transform: scale(.95)
}

.marquee-row:hover .marquee-content {
	animation-play-state: paused
}

.integrations-container::after,
.integrations-container::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100px;
	z-index: 2;
	pointer-events: none
}

.integrations-container::before {
	left: 0;
	background: linear-gradient(to right, #000010, transparent)
}

.integrations-container::after {
	right: 0;
	background: linear-gradient(to left, #000010, transparent)
}

.particle {
	width: 2px;
	height: 2px;
	background: rgba(255, 255, 255, .1);
	animation: linear infinite float
}

@keyframes float {
	0% {
		transform: translateY(100vh) rotate(0);
		opacity: 0
	}

	10%,
	90% {
		opacity: 1
	}

	100% {
		transform: translateY(-100px) rotate(360deg);
		opacity: 0
	}
}

.ripple {
	background: rgba(255, 255, 255, .3);
	transform: scale(0);
	animation: .6s linear ripple
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0
	}
}

@media (max-width:768px) {
	.section-title {
		font-size: 2.5rem
	}

	.section-description {
		font-size: 1rem;
		padding: 0 20px
	}

	.integration-item {
		padding: 12px 20px;
		margin: 0 8px
	}

	.marquee-content {
		animation-duration: 20s
	}

	.nav-tabs .nav-link {
		margin-bottom: 10px;
		margin-right: 5px;
		padding: 12px 20px;
		font-size: 14px
	}

	.tabs-container {
		margin: 20px auto;
		padding: 10px
	}
}

@media (max-width:480px) {
	.swiper-slide.prev {
		transform: translateX(-180px) translateZ(-150px) rotateY(25deg)
	}

	.swiper-slide.next {
		transform: translateX(180px) translateZ(-150px) rotateY(-25deg)
	}

	.section-title {
		font-size: 2rem
	}

	.integration-item {
		padding: 10px 15px;
		margin: 0 5px
	}

	.integration-item i {
		font-size: 1rem
	}
}

.loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: 1s ease-in-out infinite spin
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

.why-choose {
	background-image: linear-gradient(180deg, #000010, #00000f00 75%), radial-gradient(circle farthest-corner at 50% 100%, #9d70cc, #000010 90%)
}

.about-bg {
	background-image: url(../images/item/group.jpg);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 0;
	display: flex;
	height: calc(100vh - 75px)
}

.about-bg .container {
	height: 100%;
	position: relative
}

.about-bg .s-heading,
.s-blog-list {
	padding-bottom: 60px
}

.about-bg .container .content-about {
	position: absolute;
	bottom: 0
}

.about-bg .bloom {
	background: 0 0;
	background-image: linear-gradient(rgb(0 0 0 / 61%), #322275);
	width: 100%;
	height: 100%;
	opacity: 1;
	filter: blur(60px)
}

.modal-dialog .team-info-img img {
	height: 250px;
	width: 100%;
	object-fit: cover;
	object-position: top
}

.phase,
.product-tabsec .tabs-container {
	margin-top: 50px
}

.product-tabsec .custom-tabs {
	background: rgba(255, 255, 255, .1);
	border-radius: 15px;
	padding: 20px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .2)
}

.product-tabsec .nav-tabs {
	border: none;
	margin-bottom: 30px;
	height: 100%
}

.product-tabsec .nav-tabs .nav-link {
	background: 0 0;
	border: 0;
	border-bottom: 1px solid;
	color: var(--Text-2);
	margin-right: 10px;
	padding: 20px 25px;
	font-weight: 600;
	transition: .3s;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-radius: 0
}

.product-tabsec .nav-tabs li:last-child .nav-link,
.right-sol-content .tf-accordion.style-2.type-2 .accordion-item:last-child,
.why-choose-sec .tf-accordion.style-2.type-2 .accordion-item:last-child {
	border: 0
}

.product-tabsec .nav-tabs .nav-link:focus,
.product-tabsec .nav-tabs .nav-link:hover {
	background: 0 0;
	transform: none;
	border: none;
	border-bottom: 1px solid #9b59b6;
	isolation: inherit
}

.product-tabsec .nav-tabs .nav-link.active {
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36);
	-webkit-background-clip: text;
	background-clip: text;
	border: 0;
	border-bottom: 1px solid #9b59b6
}

.product-tabsec .nav-tabs .nav-link.active span {
	color: var(--Text-2);
	-webkit-text-fill-color: inherit;
	background-image: none;
	-webkit-background-clip: inherit;
	background-clip: inherit
}

.left-icon i,
.li-list i.bi,
.solution-s2 .benefit-list li .icon i {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36)
}

.product-tabsec .nav-tabs .nav-link span {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 400;
	width: 100%
}

.product-tabsec .tab-content {
	background: rgba(0, 0, 0, .3);
	border-radius: 15px;
	padding: 0;
	min-height: 200px
}

.product-tabsec .feature-item {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: rgba(255, 255, 255, .05);
	border-radius: 10px;
	transition: .3s
}

.product-tabsec .feature-item:hover {
	background: rgba(255, 255, 255, .1);
	transform: translateX(10px)
}

.product-tabsec .feature-icon {
	font-size: 24px;
	margin-right: 15px;
	color: #f39c12;
	min-width: 40px
}

.product-tabsec .feature-text {
	flex: 1
}

.product-tabsec .feature-title {
	font-weight: 600;
	margin-bottom: 5px;
	color: #fff
}

.product-tabsec .feature-description {
	color: #b0b0b0;
	font-size: 14px
}

.product-tabsec .tab-header {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 25px;
	color: #fff;
	text-align: center
}

.cs-hero-sec {
	background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .8)) center/cover, url('../images/item/automotive-hero.jpg') center/cover
}

.metric-badge {
	display: inline-flex;
	align-items: center;
	padding: 1rem;
	border-radius: .5rem;
	margin: .25rem
}

.metric-success {
	background: hsl(var(--success) / .1);
	color: hsl(var(--success));
	border: 1px solid hsl(var(--success) / .2)
}

.metric-accent,
.right-sol-card.sol-card ul li p {
	color: hsl(var(--accent))
}

.metric-accent {
	background: hsl(var(--accent) / .1);
	border: 1px solid hsl(var(--accent) / .2)
}

.metric-warning,
.sol-card ul li p {
	color: hsl(var(--warning))
}

.metric-warning {
	background: hsl(var(--warning) / .1);
	border: 1px solid hsl(var(--warning) / .2)
}

.li-list {
	border: 1px solid #272140;
	padding: 15px;
	margin-bottom: 15px;
	border-radius: 8px;
	height: 100%
}

.li-list h5 {
	margin-bottom: 10px;
	margin-top: 15px
}

.li-list img {
	height: 200px;
	width: 100%;
	object-fit: cover;
	margin-bottom: 20px;
	border-radius: 8px
}

.sol-card {
	padding: 30px;
	border: 1px solid #272140;
	height: 100%
}

.right-sol-card,
.sol-sec-2 .right-col {
	background-image: radial-gradient(circle farthest-corner at 50% 140%, var(--purple-dark) 25%, var(--Black) 75%)
}

.sol-card h5 {
	margin-bottom: 10px
}

.phase-li .span-p {
	background: radial-gradient(circle at 50% 230%, #c88bc4, #00001000);
	padding: 3px 10px;
	font-size: 14px;
	border-radius: 3px;
	color: #fff;
	margin-right: 10px
}

.deploy .wg-testimonial {
	border: 0;
	border-left: 2px solid #959efe;
	border-right: 2px solid #959efe;
	background: 0 0
}

.conclusion {
	border: 1px solid #272140;
	text-align: center;
	padding: 30px;
	border-radius: 10px
}

.why-left.feature-card {
	border: 0;
	border-radius: 0;
	background-image: url("../images/item/why-choose-bg.webp");
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
	background-blend-mode: lighten;
	border-left: 1px solid #272140
}

.why-left.feature-card .card-overlay {
	background: 0 0
}

.why-left.feature-card h5 {
	text-align: center;
	padding: 10px;
	border-bottom: 1px solid #272140
}

.why-left.feature-card .card-overlay,
.why-left.feature-card video {
	border-radius: 0
}

.why-choose-row {
	border: 1px solid #272140;
	border-radius: 8px
}

.why-right {
	border-left: 1px solid #272140
}

.container-card {
	backdrop-filter: blur(5px);
	border-radius: 1.5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
	width: 100%;
	max-width: 100%;
	height: 600px;
	position: relative;
	overflow: hidden
}

.element-item {
	position: absolute;
	left: 50%;
	width: 80%;
	transform: translateX(-50%);
	transition: 1s ease-out;
	opacity: .9;
	cursor: pointer
}

.element-item.animate-fall {
	animation: 1s cubic-bezier(.34, 1.56, .64, 1) forwards fall
}

.element-content {
	border: 1px solid #272140;
	border-radius: 9999px;
	padding: 1rem 1.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
	transition: .3s ease-in-out
}

.element-number,
.loading-dot {
	background-color: #3b82f6;
	border-radius: 9999px
}

.element-content:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05)
}

.element-number {
	color: #fff;
	width: 1.5rem;
	height: 1.5rem;
	align-items: center;
	justify-content: center;
	font-size: .875rem;
	font-weight: 700;
	flex-shrink: 0;
	display: none
}

.element-text {
	text-align: center;
	transition: color .3s
}

.loading-indicator {
	color: #64748b
}

.loading-dot {
	width: .5rem;
	height: .5rem;
	animation: 1.5s cubic-bezier(.4, 0, .6, 1) infinite pulse
}

.kb,
.sol-sec-2 {
	border: 1px solid #272140
}

@keyframes fall {
	0% {
		transform: translateX(-50%) translateY(-100px) scale(.9);
		opacity: .7
	}

	50% {
		transform: translateX(-50%) translateY(0) scale(1.05);
		opacity: .9
	}

	100% {
		transform: translateX(-50%) translateY(0) scale(1);
		opacity: 1
	}
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(102, 126, 234, .4)
	}

	70% {
		box-shadow: 0 0 0 10px rgba(102, 126, 234, 0)
	}

	100% {
		box-shadow: 0 0 0 0 rgba(102, 126, 234, 0)
	}

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: .5
	}
}

.sol-sec-2 {
	background: radial-gradient(circle at 50% 230%, #c88bc4, #00001000)
}

.sol-sec-2 .left-col {
	padding: 50px
}

.bg-effect {
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important
}

.kb {
	border-radius: 8px;
	padding: 15px
}

.cs-hero-sec .cs-hero .box-icon-border {
	background: 0 0;
	border: 1px solid #9d9d9d
}

.cs-hero-sec .cs-hero .counter span {
	font-size: 32px
}

.li-list i.bi {
	font-size: 30px;
	margin-bottom: 15px;
	background-clip: text
}

.why-choose-sec .tf-accordion {
	padding: 30px
}

.right-sol-content .tf-accordion.style-2.type-2 .accordion-button,
.why-choose-sec .tf-accordion.style-2.type-2 .accordion-button {
	padding: 10px 70px 15px 0
}

.right-sol-content .tf-accordion .icon,
.why-choose-sec .tf-accordion .icon {
	right: 0;
	top: 11px;
	background: 0 0
}

.right-sol-content .tf-accordion.style-2 .accordion-item,
.why-choose-sec .tf-accordion.style-2 .accordion-item {
	border-radius: 8px
}

.right-sol-content .tf-accordion.style-2 .accordion-button,
.why-choose-sec .tf-accordion.style-2 .accordion-button {
	font-size: 18px;
	font-weight: 400
}

.right-sol-content .tf-accordion.style-2.type-2 .accordion-item,
.why-choose-sec .tf-accordion.style-2.type-2 .accordion-item {
	margin-bottom: 10px;
	border: 0;
	border-bottom: 1px dashed;
	border-radius: 0;
	background: 0 0
}

.solution-s2 .benefit-list li {
	justify-content: normal;
	gap: 15px;
	align-items: center
}

.solution-s2 .benefit-list li i {
	align-items: center;
	font-size: 30px
}

.left-icon,
.solution-s2 .benefit-list li .icon {
	background-image: linear-gradient(#ffffff26, #ffffff05) !important;
	border: 1px solid #ffffff14;
	padding: 5px;
	border-radius: 4px
}

.left-icon i,
.solution-s2 .benefit-list li .icon i {
	background-clip: text;
	display: table-cell
}

.left-icon {
	display: inline-block;
	padding: 10px;
	margin-bottom: 15px
}

.right-sol-content {
	padding: 40px;
	background: #06051e;
	border-radius: 24px;
	position: relative
}

.purpose-build-box,
.purpose-build-box.tf-btn .s1::after,
.purpose-build-box.tf-btn .s2 {
	border-radius: 12px
}

.right-sol-content::after {
	position: absolute;
	border-radius: 24px;
	content: "";
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	z-index: -1;
	background: linear-gradient(88.32deg, #1b1841 8%, #a68cf0 53.59%, #1b1841 95.68%)
}

.purpose-build-box {
	padding: 20px;
	width: auto;
	height: 100%;
	box-shadow: none
}

.purpose-build-box .btn-text {
	font-size: 18px;
	line-height: 165%;
	color: var(--Text-2)
}

.purpose-build-box.tf-btn .s1:after {
	background: linear-gradient(rgb(127 100 233 / 60%), rgb(156 131 255 / 72%) 25%, rgb(214 113 239 / 67%) 50%, rgb(245 203 54 / 63%))
}

.purpose-build-box.tf-btn:hover .s1:after {
	transform: none
}

.right-sol-content table tr td {
	padding: 30px !important;
	text-align: center
}

.right-sol-content .tf-accordion.style-2.type-2 .accordion-body,
.why-choose-sec .tf-accordion.style-2.type-2 .accordion-body {
	padding: 0 50px 33px 35px
}

.right-sol-content .tf-accordion.style-2.type-2 .accordion-button {
	padding: 20px 70px 25px 0
}

.right-sol-content .tf-accordion .icon {
	top: 20px
}

.wp-block-list li {
	margin-bottom: 15px;
	list-style: disc
}

.marquee-content img {
	height: 30px
}

.send-wrap .tf-btn.style-2.type-3 {
	background-color: #403fa9
}

.about-bg .feature-card {
	width: 100%;
	border-radius: 0;
	border: 0
}

.hero-play {
	display: flex;
	align-items: center;
	text-decoration: none;
	transition: .3s ease-in-out;
	white-space: nowrap
}

.hero-play i {
	font-size: 34px;
	flex-shrink: 0;
	color: var(--Text-2)
}

.hero-play span {
	margin-left: .5rem;
	opacity: 0;
	max-width: 0;
	transition: opacity .3s ease-in-out, max-width .3s ease-in-out
}

.hero-play:hover {
	padding-right: 1.5rem
}

.hero-play:hover span {
	opacity: 1;
	max-width: 200px
}

.s-blog-single .entry-image img {
	height: 400px
}

.blog-single .wp-block-list li {
	line-height: 165%
}

.s-blog-list .tf-overlay,
.s-blog-single .tf-overlay {
	z-index: -1
}

.s-blog-list .line,
.s-blog-single .line {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
	z-index: 4;
	background: linear-gradient(270deg, #00041e 23.3%, #696ee4 50.27%, #00041e 75.17%)
}

.how-work-head .detail-section {
	padding: 30px 40px 0 0
}

.s-article.article-detail .tf-sidebar {
	padding-top: 30px
}

table .data-source-icon i {
	display: inline-block;
	vertical-align: middle;
	line-height: 1
}

.pagination {
	justify-content: center;
	margin-top: 40px
}

.pagination .page-numbers {
	padding: 4px 8px;
	border: 1px solid
}

.pagination .page-numbers.current {
	background: #696ee4
}

.article-detail ul {
	padding-left: 16px
}

.article-detail ul li {
	display: list-item;
	line-height: normal;
	list-style: disc;
	margin-bottom: 20px
}

.article-detail ul li strong {
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, #7f64e9, #9c83ff 25%, #d671ef 50%, #f5cb36);
	-webkit-background-clip: text;
	background-clip: text;
	font-weight: 400
}

.form-check-input:checked {
	background-color: #0d6efd !important;
	border-color: #0d6efd !important
}

.s-advisors {
	margin-top: 75px
}

.modal.show .modal-dialog {
	top: 90px
}
.clients-sec .integration-item {
	border:0;
	border-radius:4px;
	padding:0;
}
.clients-sec .integration-item img{
	height:50px;
}
.partner-group img{
	
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.compliance-sec{
	margin-top:50px;
	padding-bottom:80px;
}
.security{
	border-radius: 8px;
    height: 100%;
	text-align:center;
	position:relative;
	z-index:1;
	
}
.security img{
	opacity:0.8;
}
.wg-partner, .img-eco{
	text-align:center;
}
.brand-style-1 {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.brand-style-1 li {
    flex-basis: 16.6%;
    border-width: 1px;
    border-style: solid;
    margin: 0 0 -1px -1px;
    border-color: hsla(0,0%,100%,.1);
    padding: 40px 0;
    text-align: center
}
.partners {
	padding-bottom:80px;
}

@media only screen and (max-width: 575px) {
    .brand-style-1 li {
        flex-basis:33.33%
    }
}

@media only screen and (max-width: 479px) {
    .brand-style-1 li {
        flex-basis:50%
    }
}

.brand-style-1 li a {
    display: block;
	cursor:auto;
}

.brand-style-1 li a img {
    transition: .4s;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.wg-partner a{
	cursor:auto;	
}
.partner-group.row{
	gap:inherit
}

.sub-menu-mobile a img {
        width: 25px;
    }
@media (max-width:1228px) {
	.main-nav {
		display: none
	}

	.header-inner {
		padding: 10px 0
	}

	.header-right .mobile-button {
		display: block
	}
}

@media (max-width:992px) {
	.section-title {
		font-size: 2rem
	}

	.section-card {
		padding: 30px
	}

	.w-70,
	.w-80 {
		width: 100%
	}

	.sticky-stack-section .video-container {
		padding: 0 30px
	}

	.impact .box-icon-border {
		height: auto;
		margin-bottom: 30px
	}

	.how-works .detail-section {
		display: block;
		margin-bottom: 30px;
		text-align: center;
		padding: 0
	}

	.how-work-head .s-heading {
		text-align: center;
		padding-right: 0
	}
	.sticky-column,
	.sticky-stack-section {
		position: relative;
		height: auto
	}
}

@media (max-width:768px) {
	.content-section,
	.sticky-column,
	.wg-pricing,
	.wg-testimonial {
		height: auto
	}

	.hero-title {
		font-size: 2.5rem
	}

	.flip-equation table {
		display: inline;
		border: 0
	}

	.flip-equation table td {
		display: block;
		border: 0
	}

	.flip-equation table tbody tr:first-child td:nth-child(1),
	.flip-equation table tbody tr:nth-child(2) td:nth-child(2),
	.flip-equation table tbody tr:nth-child(3) td:first-child {
		background: 0 0
	}

	.hero-subtitle {
		font-size: 1.2rem
	}

	.stats-number {
		font-size: 2rem
	}

	.product-sec .card {
		padding-bottom: 30px
	}

	.section-title {
		font-size: 1.8rem
	}

	.section-card {
		padding: 20px
	}

	.content-section {
		min-height: 100vh
	}

	.sticky-column {
		top: 0
	}

	.s-heading {
		width: 100%
	}

	.industries .swiper-slide {
		width: 100% !important;
		transform: none
	}

	.s-hero-banner .m-auto.d-flex.gap-4 {
		display: grid !important;
		text-align: center;
		width: 100%
	}

	.s-hero-banner .m-auto.d-flex.gap-4 .tf-btn {
		margin: auto
	}

	.mobile-main-nav .menu .menu-item {
		margin-bottom: 15px
	}

	.s-faq-2 .faq-item .left,
	.wg-testimonial {
		margin-bottom: 30px
	}

	.mobile-main-nav .menu .menu-item a {
		color: var(--Text-2);
		display: flex
	}

	.sub-menu-mobile a {
		display: flex;
		gap: 8px;
		align-items: center
	}

	.sub-menu-mobile a img {
		width: 25px
	}

	.rating-custom {
		margin-top: 30px
	}

	.deploy .pricing-table table {
		display: contents
	}

	.deploy .pricing-table .group-item td {
		display: inline-block;
		width: 100%;
		border: 0;
		border-bottom: 1px solid #e0e0e0 !important;
		border-right: 0 !important
	}

	.s-hero-banner {
		margin-top: 0;
		min-height: auto
	}

	.main-content {
		padding: 60px 0 0
	}

	.carousel-control-next {
		right: 0
	}

	.carousel-control-prev {
		left: 0
	}

	.inner-banner,
	.s-blog-single,
	.s-contact {
		padding-top: 0
	}

	.bg-effect,
	.s-article.article-detail {
		padding-top: 60px;
		margin-top: -60px
	}

	.s-hero-banner {
		padding-bottom: 50px
	}

	.quality-sec {
		padding-top: 60px
	}

	.how-works .benefit-list p span:first-child {
		display: inline-block;
		width: 100%
	}

	.how-works .benefit-list p span.step-c {
		width: auto
	}

	.flip .card-overlay {
		padding: 15px
	}

	table .data-source-icon {
		overflow: visible
	}
}