:root {
	--primary: #0756a8;
	--secondary: #0a2d53;
	--accent: #11a1d8;
	--dark: #071c33;
	--muted: #66788a;
	--light: #f5f9fc;
	--white: #fff
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	font-family: 'Manrope', sans-serif;
	color: #23384b;
	line-height: 1.7
}

a {
	text-decoration: none
}

.topbar {
	background: var(--dark);
	color: #fff;
	font-size: .9rem
}

.topbar a {
	color: #fff;
	font-size: 13px;
}

.navbar-brand img {
	width: 199px;
	object-fit: contain;
}

.navbar-brand div,
.footer-brand div {
	line-height: 1
}

.navbar-brand strong,
.footer-brand strong {
	display: block;
	font-size: 1.2rem;
	color: var(--secondary);
	letter-spacing: .06em
}

.navbar-brand span,
.footer-brand span {
	font-size: .7rem;
	color: var(--primary);
	letter-spacing: .2em
}

.navbar .nav-link {
	font-weight: 600;
	color: #000 !important;
	padding: .8rem .75rem !important;
	font-size: 16px;
}

.navbar .nav-link:hover {
	color: var(--primary) !important
}

.btn {
	border-radius: 8px;
	font-weight: 700
}

.btn-primary {
	background: linear-gradient(135deg, var(--primary), #082d78);
	border: none
}

.btn-primary:hover {
	filter: brightness(.92)
}

.hero-slide {
	min-height: 75vh;
	position: relative;
	background-size: cover;
	background-position: center;
	color: white
}

.hero-slide:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 18, 34, .94) 0%, rgba(4, 18, 34, .72) 54%, rgba(4, 18, 34, .12) 100%)
}

.hero-1 {
	background-image: radial-gradient(circle at 82% 38%, rgba(19, 160, 214, .55), transparent 24%), linear-gradient(135deg, #06182b, #0a4f84)
}

.hero-2 {
	background-image: radial-gradient(circle at 78% 40%, rgba(255, 255, 255, .16), transparent 26%), linear-gradient(135deg, #0a263f, #07619b)
}

.hero-3 {
	background-image: radial-gradient(circle at 75% 30%, rgba(18, 177, 221, .4), transparent 24%), linear-gradient(135deg, #071a2e, #0d3e64)
}

.hero-content {
	position: relative;
	z-index: 2
}

.min-vh-75 {
	min-height: 75vh
}

.eyebrow,
.section-kicker {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 800;
	font-size: .78rem;
	color:#204966;
	margin-bottom: .9rem
}

.hero-slide h1,
.hero-slide h2 {
	font-size: 55px;
	line-height: 1.05;
	font-weight: 800;
	margin-bottom: 1.25rem
}

.hero-slide p {
	font-size: 1.1rem;
	max-width: 680px;
	color: #d9e7f1;
	margin-bottom: 2rem
}

.carousel-indicators [data-bs-target] {
	width: 34px;
	height: 4px;
	border: 0
}

.quick-info {
	margin-top: -1px;
	background: #fff;
	box-shadow: 0 10px 35px rgba(15, 48, 78, .08)
}

.info-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px
}

.info-box i {
	font-size: 1.8rem;
	color: var(--primary)
}

.info-box strong,
.info-box span {
	display: block
}

.info-box span {
	font-size: 17px;
	color: #000;
}

.section-pad {
	padding: 30px 0
}

.section-head {
	max-width: 720px
}

.section-title {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.18;
	font-weight: 800;
	color: var(--secondary);
	margin-bottom: 1.2rem
}

.about-visual {
	position: relative
}

.chemical-scene {
	height: 420px;
	border-radius: 24px;
	background: linear-gradient(135deg, #062646, #0c76b8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	overflow: hidden;
	position: relative;
	box-shadow: 0 25px 60px rgba(8, 54, 91, .25)
}

.chemical-scene i {
	font-size: 6rem;
	z-index: 2
}

.chemical-scene span {
	font-weight: 800;
	font-size: 1.2rem;
	margin-top: 1rem;
	z-index: 2
}

.bubble {
	position: absolute;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35)
}

.b1 {
	width: 190px;
	height: 190px;
	right: -35px;
	top: 15px
}

.b2 {
	width: 90px;
	height: 90px;
	left: 35px;
	bottom: 45px
}

.b3 {
	width: 45px;
	height: 45px;
	left: 80px;
	top: 55px
}

.experience-card {
	position: absolute;
	right: -20px;
	bottom: 30px;
	background: white;
	padding: 20px 25px;
	border-radius: 16px;
	box-shadow: 0 15px 35px rgba(10, 43, 71, .2)
}

.experience-card strong,
.experience-card span {
	display: block
}

.experience-card strong {
	font-size: 1.5rem;
	color: var(--primary)
}

.check-item {
	font-weight: 500;
	color: #000;
	font-size: 16px;
}

.check-item i {
	color: #082d78;
	margin-right: 8px
}

.product-card {
	height: 100%;
	padding: 30px;
	border: 1px solid #e4edf4;
	border-radius: 18px;
	background: white;
	transition: .3s;
	box-shadow: 0 8px 24px rgba(11, 54, 87, .05)
}

.product-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 45px rgba(11, 54, 87, .12);
	border-color: #bcdff1
}

.product-card.featured {
	background: linear-gradient(145deg, #082b4a, #0876b5);
	color: white
}

.product-card.featured h3,
.product-card.featured .link-btn {
	color: white
}

.product-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: #e9f5fc;
	color: var(--primary);
	font-size: 1.7rem;
	margin-bottom: 20px
}

.featured .product-icon {
	background: rgba(255, 255, 255, .12);
	color: white
}

.product-card h3 {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--secondary)
}

.product-card p {
	color: #6b7c8d
}

.featured p {
	color: #d5e9f3
}

.link-btn {
	border: 0;
	background: none;
	padding: 0;
	color: var(--primary);
	font-weight: 800
}

.why-section {
	background: linear-gradient(135deg, #061b31, #075991);
	position: relative;
	overflow: hidden
}

.why-section:after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 50%;
	right: -150px;
	top: -150px
}

.section-kicker.light {
	color: #7bd8ff
}

.why-card {
	height: 100%;
	padding: 25px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	color: white;
	backdrop-filter: blur(6px)
}

.why-card i {
	font-size: 1.8rem;
	color: #7bd8ff
}

.why-card h3 {
	font-size: 1.1rem;
	font-weight: 800;
	margin: 15px 0 8px
}

.why-card p {
	margin: 0;
	color: #cfe1ed;
	font-size: .94rem
}

.industry-card {
	border: 1px dotted #000 !important;
	height: 150px;
	background: white;
	border: 1px solid #e3edf4;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-weight: 800;
	color: var(--secondary);
	transition: .3s
}

.industry-card i {
	font-size: 2rem;
	color: var(--primary)
}

.industry-card:hover {
	background: var(--primary);
	color: white;
	transform: translateY(-5px)
}

.industry-card:hover i {
	color: white
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px
}

.gallery-item {
	height: 160px;
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	position: relative;
	overflow: hidden
}

.gallery-item:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, rgba(2, 17, 31, .75))
}

.gallery-item i,
.gallery-item span {
	position: relative;
	z-index: 2
}

.gallery-item i {
	font-size: 3rem
}

.gallery-item span {
	font-size: 1.1rem;
	font-weight: 800;
	margin-top: 14px
}

.g1 {
	background: linear-gradient(135deg, #0b85bf, #092b4b)
}

.g2 {
	background: linear-gradient(135deg, #2c5364, #0f2027)
}

.g3 {
	background: linear-gradient(135deg, #0a5895, #13a8db)
}

.g4 {
	background: linear-gradient(135deg, #1d4350, #a43931)
}

.testimonial-card {
	height: 100%;
	background: white;
	border: 1px solid #e6eef4;
	border-radius: 18px;
	border: 1px dotted #000;
	padding: 8px;
	box-shadow: 0 12px 30px rgba(9, 48, 78, .08)
}

.stars {
	color: #f5a623;
	letter-spacing: .15em;
	margin-bottom: 15px
}

.testimonial-card strong,
.testimonial-card span {
	display: block
}

.testimonial-card strong {
	color: #000 !important;
}

.testimonial-card span {
	font-size: 14px;
	color: #000;
}

.carousel-controls {
	text-align: center;
	margin-top: 24px
}

.carousel-controls button {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	margin: 0 5px;
	color: white;
	background: var(--primary)
}

.brands-section {
	background: #fff
}

.brand-track-wrap {
	overflow: hidden
}

.brand-track {
	display: flex;
	gap: 18px;
	width: max-content;
	animation: scrollBrands 22s linear infinite
}

.brand-box {
	width: 190px;
	height: 90px;
	border: 1px solid #dce8f0;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-weight: 800;
	color: #4b6277;
	background: white;
	box-shadow: 0 5px 18px rgba(10, 54, 88, .05)
}

@keyframes scrollBrands {
	to {
		transform: translateX(calc(-50% - 9px))
	}
}

.blog-card {
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: white;
	box-shadow: 0 10px 30px rgba(10, 55, 88, .08)
}

.blog-image {
	height: 210px;
	display: grid;
	place-items: center;
	color: white;
	font-size: 3.4rem
}

.bi-1 {
	background: linear-gradient(135deg, #0a6caf, #13a8da)
}

.bi-2 {
	background: linear-gradient(135deg, #182848, #4b6cb7)
}

.bi-3 {
	background: linear-gradient(135deg, #0b486b, #3b8686)
}

.blog-date {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
	color: #082d78
}

.blog-card h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--secondary);
	margin: 10px 0
}

.blog-card a {
	font-weight: 800;
	color: var(--primary)
}

.strength-item {
	display: flex;
	gap: 16px;
	height: 100%;
	padding: 22px;
	border: 1px solid #e1ecf3;
	border-radius: 16px
}

.strength-item>span {
	font-size: 1.6rem;
	font-weight: 800;
	color: #082d78
}

.strength-item h3 {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--secondary)
}

.strength-item p {
	margin: 0;
	color: #000;
	font-size: .92rem
}

.quote-section {
	background: linear-gradient(135deg, #061a2e, #075b96)
}

.quote-contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 25px
}

.quote-contact a {
	color: white;
	font-weight: 700
}

.quote-contact i {
	width: 30px;
	color: #76d8ff
}

.quote-form {
	background: white;
	padding: 32px;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .2)
}

.form-control {
	    padding: 8.1px;
    border-radius: 8px;
    border-color: #cbc9c9;
}

.form-control:focus {
	border-color: #082d78;
	box-shadow: 0 0 0 .2rem rgba(17, 161, 216, .15)
}

.footer {
	background: #061726;
	color: #aec0ce
}

.footer-brand img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: white;
	border-radius: 12px;
	padding: 4px
}

.footer-brand strong {
	color: white
}

.footer h4 {
	color: white;
	font-size: 1.05rem;
	font-weight: 800;
	margin-bottom: 18px
}

.footer ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.footer li {
	margin-bottom: 6px;
}

.footer a {
	color: #fff;
	font-size: 15px;
}

.footer a:hover {
	color: white
}

.socials {
	display: flex;
	gap: 10px
}

.socials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .08)
}

.contact-list li {
	display: flex;
	gap: 12px
}

.contact-list i {
	color: #62cef8;
	margin-top: 5px;
	width: 18px
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .88rem
}

.whatsapp-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #25d366;
	color: white;
	font-size: 1.8rem;
	z-index: 999;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2)
}

#backToTop {
	position: fixed;
	right: 30px;
	bottom: 92px;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--primary);
	color: white;
	display: none;
	z-index: 998
}

@media(max-width:991px) {
	.navbar-collapse {
		padding: 15px 0
	}

	.hero-slide:before {
		background: rgba(3, 19, 34, .82)
	}

	.hero-slide {
		text-align: center
	}

	.hero-slide p {
		margin-left: auto;
		margin-right: auto
	}

	.gallery-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.experience-card {
		right: 15px
	}

	.section-pad {
		padding: 70px 0
	}
}

@media(max-width:575px) {
	.section-pad {
		padding: 58px 0
	}

	.hero-slide,
	.min-vh-75 {
		min-height: 68vh
	}

	.hero-slide h1,
	.hero-slide h2 {
		font-size: 2.45rem
	}

	.gallery-grid {
		grid-template-columns: 1fr
	}

	.gallery-item {
		height: 210px
	}

	.quote-form {
		padding: 22px
	}

	.experience-card {
		right: 10px;
		bottom: 15px
	}

	.chemical-scene {
		height: 340px
	}

	.info-box {
		justify-content: flex-start
	}

	.navbar-brand img {
		width: 48px;
		height: 48px
	}
}

.products-section {
	overflow: hidden
}

.product-slider-shell {
	position: relative
}

.product-slider {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 72px)/4);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 8px 4px 24px;
	scrollbar-width: none
}

.product-slider::-webkit-scrollbar {
	display: none
}

.product-slide-card {
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid #e1eaf1;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(8, 47, 78, .08);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	min-width: 0
}

.product-slide-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 20px 48px rgba(8, 47, 78, .15);
	border-color: #acd7ea
}

.product-image-wrap {
	height: 290px;
	padding: 18px;
	background: linear-gradient(145deg, #f9fcfe, #eef7fb);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden
}

.product-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	filter: drop-shadow(0 14px 14px rgba(5, 35, 55, .12));
	transition: transform .35s ease
}

.product-slide-card:hover .product-image-wrap img {
	transform: scale(1.035)
}

.product-card-body {
	padding: 21px 22px 24px
}

.product-category {
	display: inline-block;
	color: var(--primary);
	font-size: .73rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 800;
	margin-bottom: 8px
}

.product-card-body h3 {
	font-size: 1.08rem;
	line-height: 1.35;
	font-weight: 800;
	color: var(--secondary);
	min-height: 2.9em;
	margin-bottom: 16px
}

.product-slider-controls {
	display: flex;
	gap: 10px;
	flex-shrink: 0
}

.product-slider-controls button {
	width: 48px;
	height: 48px;
	border: 1px solid #d4e4ee;
	border-radius: 50%;
	background: #fff;
	color: var(--primary);
	box-shadow: 0 7px 20px rgba(8, 54, 89, .08);
	transition: .25s
}

.product-slider-controls button:hover {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
	transform: translateY(-2px)
}

.product-slider-hint {
	text-align: center;
	color:#000;
	font-size:15px;
	margin-top: 2px
}

.product-slider-hint i {
	color: var(--primary);
	margin-right: 6px
}

@media(max-width:1199px) {
	.product-slider {
		grid-auto-columns: calc((100% - 48px)/3)
	}
}

@media(max-width:767px) {
	.product-slider {
		grid-auto-columns: calc((100% - 18px)/1.45);
		gap: 18px
	}

	.product-image-wrap {
		height: 260px
	}

	.product-slider-controls {
		align-self: flex-end
	}
}

@media(max-width:480px) {
	.product-slider {
		grid-auto-columns: 86%
	}

	.product-image-wrap {
		height: 245px
	}

	.product-slider-controls button {
		width: 44px;
		height: 44px
	}
}

.hero-content .row {
	position: relative;
	z-index: 2
}

.hero-product-stage {
	position: relative;
	height: 510px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate
}

.hero-product-stage:before {
	content: "";
	position: absolute;
	width: 390px;
	height: 390px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .34), rgba(45, 194, 238, .12) 42%, rgba(255, 255, 255, .02) 70%);
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: inset 0 0 70px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .22);
	backdrop-filter: blur(3px);
	z-index: -1
}

.hero-product-stage:after {
	content: "";
	position: absolute;
	bottom: 46px;
	width: 360px;
	height: 68px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(0, 0, 0, .44), transparent 70%);
	filter: blur(7px);
	z-index: -1
}

.orbit {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .24);
	z-index: -1
}

.orbit-one {
	width: 470px;
	height: 470px;
	animation: orbitSpin 18s linear infinite
}

.orbit-two {
	width: 315px;
	height: 315px;
	border-style: dashed;
	animation: orbitSpin 13s linear infinite reverse
}

.orbit:after {
	content: "";
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #69ddff;
	top: 12%;
	left: 12%;
	box-shadow: 0 0 24px #69ddff
}

.hero-product {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center
}

.hero-product img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .32))
}

.hero-product-main {
	width: 310px;
	height: 400px;
	z-index: 3;
	transform: translate(-24px, -8px) rotate(-2deg);
	animation: productFloat 5s ease-in-out infinite
}

.hero-product-side {
	width: 190px;
	height: 250px;
	z-index: 2;
	transform: translate(150px, 78px) rotate(7deg);
	animation: productFloatSmall 5.7s ease-in-out infinite
}

.hero-chip {
	position: absolute;
	left: 8px;
	bottom: 58px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 16px;
	background: rgba(5, 29, 47, .58);
	box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
	backdrop-filter: blur(12px);
	color: white
}

.hero-chip i {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #16b8ee, #0877b9)
}

.hero-chip span,
.hero-chip b {
	display: block
}

.hero-chip span {
	font-size: .74rem;
	color: #ccebf8
}

.hero-chip b {
	font-size: .9rem;
	color: #fff;
	margin-bottom: 1px
}

@keyframes productFloat {
	50% {
		transform: translate(-24px, -22px) rotate(1deg)
	}
}

@keyframes productFloatSmall {
	50% {
		transform: translate(150px, 63px) rotate(4deg)
	}
}

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

.products-section {
	background: linear-gradient(180deg, #fff 0%, #f5fbfe 48%, #fff 100%);
	position: relative
}

.products-section:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 14% 18%, rgba(16, 160, 216, .08), transparent 22%), radial-gradient(circle at 88% 70%, rgba(0, 83, 143, .07), transparent 25%);
	pointer-events: none
}

.products-section .container {
	position: relative
}

.product-slider {
	padding: 18px 8px 32px
}

.product-slide-card {
	position: relative;
	border: 1px solid rgba(169, 207, 226, .7);
	border-radius: 26px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 18px 45px rgba(8, 47, 78, .1);
	transform-style: preserve-3d
}

.product-slide-card:before {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	top: 0;
	height: 4px;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(90deg, #0b77b5, #38c9e9);
	opacity: .85
}

.product-slide-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 28px 65px rgba(8, 47, 78, .18)
}

.product-image-wrap {
	position: relative;
	height: 330px;
	padding: 0;
	overflow: hidden;
	background: linear-gradient(145deg, #eef9fd 0%, #fff 54%, #e6f5fa 100%);
	isolation: isolate
}

.product-image-wrap:before {
	content: "";
	position: absolute;
	inset: 20px;
	border: 1px solid rgba(5, 126, 184, .09);
	border-radius: 22px;
	z-index: -1
}

.product-orb {
	position: absolute;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	top: 32px;
	left: 50%;
	transform: translateX(-50%);
	background: radial-gradient(circle at 34% 30%, #fff 0%, #dff5fc 38%, #bce7f5 72%, rgba(255, 255, 255, 0) 73%);
	box-shadow: inset -22px -24px 45px rgba(8, 117, 166, .1), 0 30px 50px rgba(12, 86, 121, .1);
	z-index: -1
}

.product-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(4, 111, 158, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(4, 111, 158, .05) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(to bottom, transparent, black 30%, transparent 85%);
	z-index: -2
}

.product-platform {
	position: absolute;
	left: 50%;
	bottom: 38px;
	width: 235px;
	height: 58px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: linear-gradient(180deg, #fff, #cfe8f2);
	box-shadow: 0 15px 25px rgba(5, 67, 95, .18), inset 0 5px 8px rgba(255, 255, 255, .9);
	z-index: 1
}

.product-platform:after {
	content: "";
	position: absolute;
	left: 11%;
	right: 11%;
	bottom: -10px;
	height: 20px;
	border-radius: 50%;
	background: rgba(6, 49, 70, .17);
	filter: blur(8px);
	z-index: -1
}

.product-pack {
	position: absolute;
	inset: 20px 28px 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1)
}

.product-pack img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 22px 18px rgba(4, 39, 58, .22));
	transform: scale(1.12)
}

.product-slide-card:hover .product-pack {
	transform: translateY(-10px) rotate(-1deg) scale(1.035)
}

.product-number {
	position: absolute;
	right: 18px;
	top: 18px;
	z-index: 4;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(5, 120, 174, .14);
	backdrop-filter: blur(8px);
	font-size: .72rem;
	font-weight: 800;
	color: #0a6fa7;
	box-shadow: 0 8px 20px rgba(7, 61, 88, .08)
}

.product-card-body {
	position: relative;
	padding: 22px 24px 25px
}

.product-category {
	padding: 6px 10px;
	border-radius: 30px;
	background: #e9f8fd;
	color: #0879b4;
	letter-spacing: .08em
}

.product-card-body h3 {
	font-size: 1.12rem; 
	min-height: 2.7em
}

.product-card-body .link-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 12px; font-size:15px; font-weight:500;
	background: linear-gradient(135deg, #0b76b4, #0da6d5);
	color: #fff;
	box-shadow: 0 9px 20px rgba(4, 122, 177, .2)
}

.product-card-body .link-btn i {
	font-size: .8rem;
	transition: transform .25s
}

.product-card-body .link-btn:hover i {
	transform: translateX(4px)
}

.product-slider-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px
}

.product-slider-hint {
	margin: 0
}

.product-progress {
	width: min(320px, 42vw);
	height: 5px;
	border-radius: 10px;
	background: #dcecf3;
	overflow: hidden
}

.product-progress span {
	display: block;
	height: 100%;
	width: 15%;
	border-radius: inherit;
	background: linear-gradient(90deg, #0872ae, #20bde6);
	transition: width .2s ease
}

.product-slider {
	cursor: grab
}

.product-slider:active {
	cursor: grabbing
}

@media(max-width:1199px) {
	.product-image-wrap {
		height: 310px
	}

	.product-pack {
		inset: 20px 18px 44px
	}

	.hero-product-main {
		width: 275px
	}

	.hero-product-side {
		width: 165px;
		transform: translate(125px, 85px) rotate(7deg)
	}
}

@media(max-width:767px) {
	.product-image-wrap {
		height: 300px
	}

	.product-pack img {
		transform: scale(1.08)
	}

	.product-slider-meta {
		align-items: flex-start;
		flex-direction: column
	}

	.product-progress {
		width: 100%
	}
}

@media(max-width:575px) {
	.product-image-wrap {
		height: 285px
	}

	.product-orb {
		width: 215px;
		height: 215px
	}

	.product-platform {
		width: 205px
	}

	.product-card-body {
		padding: 20px
	}
}

.container {
	max-width: 1250px !important
}

.section-title {
	font-size: 22px !important;
	line-height: 1.3
}

.hero-product-stage:before {
	width: 430px;
	height: 430px
}

.hero-product {
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .98), rgba(216, 244, 252, .9) 58%, rgba(126, 211, 237, .65));
	border: 8px solid rgba(255, 255, 255, .76);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25), inset 0 0 35px rgba(7, 86, 168, .12);
	padding: 22px
}

.hero-product-main {
	width: 330px;
	height: 330px
}

.hero-product-side {
	width: 190px;
	height: 190px
}

.hero-product img {
	border-radius: 50%;
	object-fit: contain;
	background: rgba(255, 255, 255, .2);
	padding: 8px
}

@keyframes productFloat {
	50% {
		transform: translate(-24px, -22px) rotate(1deg)
	}
}

@keyframes productFloatSmall {
	50% {
		transform: translate(150px, 63px) rotate(4deg)
	}
}

.about-image-card {
	position: relative;
	min-height: 500px;
	border-radius: 36px;
	overflow: hidden;
	background: #e8f6fb;
	box-shadow: 0 28px 70px rgba(7, 54, 87, .16)
}

.about-image-card>img {
	width: 100%;
	height: 500px;
	display: block;
	object-fit: cover
}

.about-image-card:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 52%, rgba(4, 29, 49, .7));
	z-index: 1
}

.about-image-overlay {
	position: absolute;
	left: 30px;
	bottom: 30px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-weight: 800;
	font-size: 1rem
}

.about-image-overlay i {
	width: 48px;
	height: 48px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #0b76b4, #1fc2e7)
}

.about-image-card .experience-card {
	z-index: 3
}

.product-image-wrap {
	border-radius: 40px 40px 0 0 !important
}

.product-image-wrap:before {
	border-radius: 40px !important
}

.product-pack img {
	border-radius: 40px !important
}

.blog-card {
	height: 100%;
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 16px 42px rgba(8, 47, 78, .1);
	transition: transform .3s ease, box-shadow .3s ease
}

.blog-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 26px 58px rgba(8, 47, 78, .16)
}

.blog-image {
	height: 245px;
	overflow: hidden;
	background: #eaf7fb
}

.blog-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .5s ease
}

.blog-card:hover .blog-image img {
	transform: scale(1.06)
}

@media(max-width:991px) {

	.about-image-card,
	.about-image-card>img {
		min-height: 420px;
		height: 420px
	}

	.hero-product-main {
		width: 285px;
		height: 285px
	}

	.hero-product-side {
		width: 165px;
		height: 165px
	}
}

@media(max-width:575px) {
	.section-title {
		font-size: 28px !important
	}

	.about-image-card,
	.about-image-card>img {
		min-height: 330px;
		height: 330px
	}

	.about-image-overlay {
		left: 20px;
		bottom: 20px
	}

	.blog-image {
		height: 220px
	}
}

.btn {
	border-radius: 8px;
	font-weight: 700;
	font-size: 12px;
}

.testimonial-card p {
	color: #000;
	font-size: 15px;
}

.inner-hero {
	padding:40px 0 30px;
	background: radial-gradient(circle at 82% 22%, rgba(34, 190, 230, .28), transparent 30%), linear-gradient(135deg, #063657, #086d9e 58%, #0fa6ca);
	color: #fff
}

.inner-hero.compact {
	padding: 68px 0 58px
}

.inner-hero h1 {
	    font-size: 30px;
    font-weight: 800;
    margin: 12px 0;
}

.inner-hero p {
	max-width: 720px;
	color:#fff;
	font-size:15px;
}

.breadcrumb-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 25px;
	font-size: .9rem
}

.breadcrumb-line a,
.breadcrumb-line span {
	color: #fff
}

.breadcrumb-line i {
	font-size: .65rem;
	color: rgba(255, 255, 255, .55)
}

.navbar .nav-link.active {
	color: #0878b1 !important
}

.feature-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px
}

.feature-list div {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 14px;
	border-radius: 14px;
	background: #f1f9fc;
	font-weight: 700
}

.feature-list i {
	color: #0b91c4
}

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px
}

.filter-bar a {
	padding: 11px 18px;
	border-radius: 30px;
	background: #e8f5fa;
	color: #155a79;
	font-weight: 700
}

.filter-bar a.active,
.filter-bar a:hover {
	background: linear-gradient(135deg, #0b76b4, #0da6d5);
	color: #fff
}

.catalog-card {
	height: 100%;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 16px 42px rgba(8, 47, 78, .1);
	transition: .3s
}

.catalog-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 24px 55px rgba(8, 47, 78, .16)
}

.catalog-image {
	display: block;
	height: 310px;
	padding: 24px;
	background: radial-gradient(circle at 50% 35%, #fff, #e2f4fa 68%, #cdeaf4);
	overflow: hidden
}

.catalog-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: .4s
}

.catalog-card:hover .catalog-image img {
	transform: scale(1.05)
}

.catalog-card h3 {
	font-size: 1.15rem;
	margin: 12px 0 18px;
	min-height: 2.6em
}

.link-btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 10px 14px;
	border-radius: 10px;
	background: linear-gradient(135deg, #0b76b4, #0da6d5);
	color: #fff !important;
	font-weight: 700
}

.detail-main-image {
	height: 520px;
	padding: 36px;
	border-radius: 30px;
	background: radial-gradient(circle at 50% 35%, #fff, #e6f6fb 64%, #d2edf5);
	box-shadow: 0 20px 50px rgba(8, 47, 78, .12)
}

.detail-main-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity .2s
}

.detail-thumb-slider {
	display: flex;
	gap: 10px;
	align-items: center
}

.thumb-track {
	display: flex;
	gap: 10px;
	overflow: hidden;
	scroll-behavior: smooth;
	flex: 1
}

.detail-thumb {
	min-width: 92px;
	height: 88px;
	border: 2px solid transparent;
	border-radius: 15px;
	background: #edf8fb;
	padding: 7px
}

.detail-thumb.active {
	border-color: #0b8fc1;
	background: #fff
}

.detail-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain
}

.thumb-arrow {
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: #087daf;
	color: #fff
}

.spec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 30px 0
}

.spec-grid div {
	padding: 17px;
	border-radius: 15px;
	background: #eff8fb
}

.spec-grid span,
.contact-info-stack small {
	display: block;
	color: #000;
	font-size:15px;
	margin-bottom: 5px
}

.detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

.gallery-tile {
	position: relative;
	height: 280px;
	border-radius: 22px;
	overflow: hidden;
	background: #e9f7fb;
	box-shadow: 0 14px 35px rgba(8, 47, 78, .1)
}

.gallery-tile img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 18px;
	transition: .4s
}

.gallery-tile span {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	padding: 11px;
	border-radius: 12px;
	background: rgba(4, 44, 68, .86);
	color: #fff;
	font-weight: 700;
	text-align: center
}

.gallery-tile:hover img {
	transform: scale(1.06)
}

.why-card {
	height: 100%;
    padding: 12px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(8, 47, 78, .1);
    border: 1px solid #cac8c8;
}

.why-card i {
	width: 62px;
	height: 62px;
	border-radius: 18px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #0b76b4, #20bde6);
	color: #fff;
	font-size: 1.5rem
}

.why-card h3 {
	margin: 22px 0 10px
}

.contact-info-stack {
	display: grid;
	gap: 16px;
	margin-top: 28px
}

.contact-info-stack>a,
.contact-info-stack>div {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px;
	border-radius: 18px;
	background: #f1f9fc;
	color: #163e50
}

.contact-info-stack i {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: #087eaf;
	color: #fff
}

.light-form {
	background: #073f5f !important;
	box-shadow: 0 20px 50px rgba(5, 45, 68, .18)
}

@media(max-width:991px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.detail-main-image {
		height: 430px
	}
}

@media(max-width:575px) {

	.feature-list,
	.spec-grid {
		grid-template-columns: 1fr
	}

	.gallery-grid {
		grid-template-columns: 1fr
	}

	.gallery-tile {
		height: 250px
	}

	.detail-main-image {
		height: 340px;
		padding: 20px
	}

	.inner-hero {
		padding: 70px 0 58px
	}
}

.contact-list span {
	color: #fff;
	font-size: 15px;
}

.whitess {
	color: #fff;
	font-size: 15px;
}

.quote-contact {
	color: #fff !important;
	font-size: 15px;
}

.text-white-50 {
	color: #fff !important;
}

.why-card h3 {
	color: #000 !important;
}

.why-card p {
	color: #000 !important;
}

.navbar-brand span,
.footer-brand span {
	color: #fff !important;
	font-weight: 500;
}

.colorsss p {
	color: #000;
	font-size: 15px;
}
.sticky-top{
	padding:0px;
}
.topbar{
	padding:3px;
}
.form-label {
    margin-bottom: 1px;
    font-size: 15px;
    color: #000;
}