<!– GIPFEL 3D WEBGL HERO INTEGRATION –>
<div class=”elementor-element e-con-full e-flex e-con e-parent” style=”padding: 40px 0; background: #0b1120;”>
<!– GIPFEL ENGINEERING 3D WEBGL SEAL VIEWER EMBED CODE –>
<!– Copy and paste this code into an HTML Block in Elementor, Spectra, or WordPress Block Editor –>
<div id=”gipfel-3d-wrapper” style=”width: 100%; max-width: 1200px; margin: 0 auto; font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #ffffff; border-radius: 16px; padding: 20px; border: 1px solid rgba(56, 189, 248, 0.2); box-shadow: 0 10px 30px rgba(0,0,0,0.5);”>
<!– Header –>
<div style=”display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px;”>
<div>
<h3 style=”margin: 0; font-size: 1.25rem; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 8px;”>
<span style=”display: inline-block; width: 10px; height: 10px; background: #10b981; border-radius: 50%;”></span>
Interactive 3D Mechanical Seal Inspector
</h3>
<span style=”font-size: 0.75rem; color: #94a3b8;”>Drag to rotate 360° | Scroll to zoom | Adjust explode view</span>
</div>
<div>
<button id=”gipfel-reset-cam” style=”background: #1e293b; color: #e2e8f0; border: 1px solid #334155; padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; cursor: pointer; margin-right: 8px;”>Reset View</button>
<button id=”gipfel-toggle-spin” style=”background: rgba(14, 165, 233, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; cursor: pointer;”>Auto-Rotate</button>
</div>
</div>
<!– WebGL Canvas Container –>
<div id=”gipfel-canvas-box” style=”width: 100%; height: 420px; background: #090d16; border-radius: 12px; position: relative; overflow: hidden;”>
<!– Explode Controls Overlay –>
<div style=”position: absolute; bottom: 16px; left: 16px; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 12px; z-index: 10;”>
<label style=”font-size: 0.75rem; font-weight: 600; color: #38bdf8;”>Explode View:</label>
<input id=”gipfel-explode-range” type=”range” min=”0″ max=”1″ step=”0.01″ value=”0″ style=”width: 120px; cursor: pointer;”>
</div>
</div>
<!– Material Selector –>
<div style=”display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap;”>
<button onclick=”gipfelSetMaterial(‘sic’)” style=”flex: 1; min-width: 180px; background: #1e293b; border: 1px solid #334155; padding: 10px; border-radius: 10px; color: #ffffff; cursor: pointer; text-align: left;”>
<strong style=”display: block; font-size: 0.85rem; color: #38bdf8;”>Silicon Carbide (SiC)</strong>
<span style=”font-size: 0.7rem; color: #94a3b8;”>Extreme hardness & chemical resistance</span>
</button>
<button onclick=”gipfelSetMaterial(‘tc’)” style=”flex: 1; min-width: 180px; background: #1e293b; border: 1px solid #334155; padding: 10px; border-radius: 10px; color: #ffffff; cursor: pointer; text-align: left;”>
<strong style=”display: block; font-size: 0.85rem; color: #f59e0b;”>Tungsten Carbide (TC)</strong>
<span style=”font-size: 0.7rem; color: #94a3b8;”>High shock resistance & pressure rating</span>
</button>
<button onclick=”gipfelSetMaterial(‘carbon’)” style=”flex: 1; min-width: 180px; background: #1e293b; border: 1px solid #334155; padding: 10px; border-radius: 10px; color: #ffffff; cursor: pointer; text-align: left;”>
<strong style=”display: block; font-size: 0.85rem; color: #818cf8;”>Carbon Graphite</strong>
<span style=”font-size: 0.7rem; color: #94a3b8;”>Self-lubricating dry-running seal faces</span>
</button>
</div>
</div>
<!– Three.js Libraries –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js”></script>
<script>
(function() {
let gScene, gCamera, gRenderer, gControls, gGroup;
let statRing, rotRing;
let isAutoSpin = false;
function initGipfel3D() {
const container = document.getElementById(‘gipfel-canvas-box’);
if (!container) return;
const width = container.clientWidth;
const height = container.clientHeight;
gScene = new THREE.Scene();
gScene.background = new THREE.Color(0x090d16);
gCamera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
gCamera.position.set(120, 90, 140);
gRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
gRenderer.setSize(width, height);
gRenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
container.appendChild(gRenderer.domElement);
gControls = new THREE.OrbitControls(gCamera, gRenderer.domElement);
gControls.enableDamping = true;
gControls.dampingFactor = 0.05;
const ambLight = new THREE.AmbientLight(0xffffff, 0.8);
gScene.add(ambLight);
const dirLight = new THREE.DirectionalLight(0x38bdf8, 1.2);
dirLight.position.set(100, 150, 100);
gScene.add(dirLight);
gGroup = new THREE.Group();
gScene.add(gGroup);
const steelMat = new THREE.MeshStandardMaterial({ color: 0x94a3b8, metalness: 0.9, roughness: 0.2 });
const sicMat = new THREE.MeshStandardMaterial({ color: 0x1e293b, metalness: 0.3, roughness: 0.1 });
const brassMat = new THREE.MeshStandardMaterial({ color: 0xd97706, metalness: 0.8, roughness: 0.3 });
// Shaft Sleeve
const sleeve = new THREE.Mesh(new THREE.CylinderGeometry(15, 15, 70, 32, 1, true), steelMat);
sleeve.rotation.x = Math.PI / 2;
sleeve.userData = { origZ: 0, dir: 0 };
gGroup.add(sleeve);
// Stationary Face
statRing = new THREE.Mesh(new THREE.CylinderGeometry(22, 22, 12, 32, 1, true), sicMat.clone());
statRing.rotation.x = Math.PI / 2;
statRing.position.z = -18;
statRing.userData = { origZ: -18, dir: -1 };
gGroup.add(statRing);
// Rotary Face
rotRing = new THREE.Mesh(new THREE.CylinderGeometry(22.2, 22.2, 12, 32, 1, true), sicMat.clone());
rotRing.rotation.x = Math.PI / 2;
rotRing.position.z = -5;
rotRing.userData = { origZ: -5, dir: -0.5 };
gGroup.add(rotRing);
// Springs
const spring = new THREE.Mesh(new THREE.TorusGeometry(24, 2, 16, 32), brassMat);
spring.position.z = 12;
spring.userData = { origZ: 12, dir: 0.8 };
gGroup.add(spring);
// Gland Plate
const gland = new THREE.Mesh(new THREE.CylinderGeometry(35, 35, 16, 32, 1, true), steelMat);
gland.rotation.x = Math.PI / 2;
gland.position.z = 25;
gland.userData = { origZ: 25, dir: 1.5 };
gGroup.add(gland);
document.getElementById(‘gipfel-explode-range’).addEventListener(‘input’, function(e) {
const val = parseFloat(e.target.value);
gGroup.children.forEach(child => {
if (child.userData && child.userData.dir !== undefined) {
child.position.z = child.userData.origZ + (child.userData.dir * val * 45);
}
});
});
document.getElementById(‘gipfel-reset-cam’).addEventListener(‘click’, function() {
gCamera.position.set(120, 90, 140);
gControls.reset();
});
document.getElementById(‘gipfel-toggle-spin’).addEventListener(‘click’, function() {
isAutoSpin = !isAutoSpin;
});
function animate() {
requestAnimationFrame(animate);
if (isAutoSpin && gGroup) gGroup.rotation.y += 0.008;
gControls.update();
gRenderer.render(gScene, gCamera);
}
animate();
}
window.gipfelSetMaterial = function(type) {
let color = 0x1e293b, metal = 0.3, rough = 0.1;
if (type === ‘tc’) { color = 0xb45309; metal = 0.95; rough = 0.15; }
if (type === ‘carbon’) { color = 0x0f172a; metal = 0.05; rough = 0.7; }
if (statRing && rotRing) {
statRing.material.color.setHex(color);
statRing.material.metalness = metal;
statRing.material.roughness = rough;
rotRing.material.color.setHex(color);
rotRing.material.metalness = metal;
rotRing.material.roughness = rough;
}
};
setTimeout(initGipfel3D, 500);
})();
</script>
</div>
<!– ✅ Home Banner Slider (Fully Responsive & Optimized) –>
<!– ✅ Home Banner Slider (Fully Responsive & Optimized) –>
<section aria-roledescription=”carousel” aria-label=”Hero banners”>
<!– Slide 1 –>
<h2>Quality Industrial Solutions</h2>
<p>Built for performance and reliability.</p>
<!– Slide 2 –>
<h2>Precision Engineering</h2>
<p>Advanced machinery for modern industries.</p>
<!– Slide 3 –>
<h2>Heavy Duty Performance</h2>
<p>Engineered to last longer and work harder.</p>
<!– Slide 4 –>
<h2>Reliable Manufacturing</h2>
<p>Trusted by professionals worldwide.</p>
<!– Slide 5 –>
<h2>Innovative Solutions</h2>
<p>Technology that powers industry growth.</p>
<!– Navigation –>
<button aria-label=”Previous slide” type=”button”>
</button>
<button aria-label=”Next slide” type=”button”>
</button>
</section>
<!– ✅ Font Awesome –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css” />
<style>
/* ===== Home Banner Slider – Fully Responsive ===== */
.home-banner-slider {
position: relative;
width: 100%;
height: 90vh;
overflow: hidden;
font-family: “Open Sans”, sans-serif;
min-height: 500px;
}
/* Slides */
.banner-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease;
}
.banner-slide.active {
opacity: 1;
}
.banner-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 1;
}
.banner-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
z-index: 2;
max-width: 90%;
width: 100%;
padding: 0 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.banner-icon {
margin-bottom: 20px;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.banner-icon svg {
width: 60px;
height: 60px;
}
.banner-slide.active .banner-icon {
opacity: 1;
transform: translateY(0);
}
.banner-content h2 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 15px;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease 0.2s;
color: #fff;
line-height: 1.2;
}
.banner-slide.active .banner-content h2 {
opacity: 1;
transform: translateY(0);
}
.banner-content p {
font-size: 1.3rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease 0.4s;
color: #f5f5f5;
line-height: 1.6;
margin-bottom: 0;
}
.banner-slide.active .banner-content p {
opacity: 1;
transform: translateY(0);
}
/* CTA Buttons – Fully Responsive */
.banner-cta {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease 0.6s;
flex-wrap: wrap;
}
.banner-slide.active .banner-cta {
opacity: 1;
transform: translateY(0);
}
.cta-btn {
padding: 14px 32px;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
border: 2px solid #d4af37;
color: #fff;
background: rgba(212, 175, 55, 0.15);
border-radius: 40px;
transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
outline: none;
display: inline-block;
text-align: center;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
/* Visible keyboard focus per WCAG */
.cta-btn:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5);
}
/* Hover effects for devices that support hover */
@media (any-hover: hover) {
.cta-btn:hover {
background: #d4af37;
color: #111;
box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
transform: translateY(-1px);
}
}
/* Active state for touch/click */
.cta-btn:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(212, 175, 55, 0.25);
background: #d4af37;
color: #111;
}
.cta-btn.secondary {
border-color: #fff;
background: rgba(255, 255, 255, 0.15);
}
@media (any-hover: hover) {
.cta-btn.secondary:hover {
background: #ffffff;
color: #111;
box-shadow: 0 6px 18px rgba(255, 255, 255, 0.25);
}
}
.cta-btn.secondary:active {
background: #ffffff;
color: #111;
}
.cta-btn.secondary:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
/* Navigation Icons – Responsive */
.banner-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.15);
color: #fff;
border: none;
font-size: 2.5rem;
cursor: pointer;
z-index: 10;
padding: 10px 16px;
border-radius: 50%;
backdrop-filter: blur(4px);
line-height: 1;
transition: background 0.3s ease, transform 0.2s ease;
-webkit-tap-highlight-color: transparent;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.banner-nav.prev {
left: 30px;
}
.banner-nav.next {
right: 30px;
}
.banner-nav:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
@media (any-hover: hover) {
.banner-nav:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-50%) scale(1.1);
}
}
.banner-nav:active {
background: rgba(255, 255, 255, 0.35);
transform: translateY(-50%) scale(0.95);
}
/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Large Tablets & Small Laptops (1024px and below) */
@media (max-width: 1024px) {
.home-banner-slider {
height: 80vh;
min-height: 450px;
}
.banner-content h2 {
font-size: 2.5rem;
}
.banner-content p {
font-size: 1.2rem;
}
.banner-icon svg {
width: 50px;
height: 50px;
}
.cta-btn {
padding: 12px 28px;
font-size: 0.95rem;
}
.banner-nav {
font-size: 2rem;
width: 50px;
height: 50px;
}
.banner-nav.prev {
left: 20px;
}
.banner-nav.next {
right: 20px;
}
}
/* Tablets (768px and below) */
@media (max-width: 768px) {
.home-banner-slider {
height: 70vh;
min-height: 400px;
}
.banner-content {
max-width: 95%;
}
.banner-content h2 {
font-size: 2rem;
margin-bottom: 12px;
}
.banner-content p {
font-size: 1rem;
line-height: 1.5;
}
.banner-icon {
margin-bottom: 15px;
}
.banner-icon svg {
width: 45px;
height: 45px;
}
.banner-cta {
margin-top: 25px;
gap: 15px;
}
.cta-btn {
padding: 12px 24px;
font-size: 0.9rem;
}
.banner-nav {
font-size: 1.8rem;
width: 45px;
height: 45px;
padding: 8px 12px;
}
.banner-nav.prev {
left: 15px;
}
.banner-nav.next {
right: 15px;
}
}
/* Mobile Devices (480px and below) */
@media (max-width: 480px) {
.home-banner-slider {
height: 100vh;
min-height: 100vh;
}
.banner-content {
max-width: 100%;
padding: 0 15px;
}
.banner-content h2 {
font-size: 1.6rem;
margin-bottom: 10px;
font-weight: 700;
}
.banner-content p {
font-size: 0.9rem;
line-height: 1.4;
}
.banner-icon {
margin-bottom: 12px;
}
.banner-icon svg {
width: 40px;
height: 40px;
stroke-width: 1.8;
}
.banner-cta {
margin-top: 20px;
gap: 12px;
flex-direction: column;
width: 100%;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.cta-btn {
padding: 12px 24px;
font-size: 0.85rem;
width: 100%;
max-width: 100%;
border-radius: 30px;
}
.banner-nav {
font-size: 1.5rem;
width: 40px;
height: 40px;
padding: 6px 10px;
}
.banner-nav.prev {
left: 10px;
}
.banner-nav.next {
right: 10px;
}
.banner-overlay {
background: rgba(0, 0, 0, 0.7);
}
}
/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
.banner-content h2 {
font-size: 1.4rem;
}
.banner-content p {
font-size: 0.85rem;
}
.banner-icon svg {
width: 35px;
height: 35px;
}
.cta-btn {
padding: 10px 20px;
font-size: 0.8rem;
}
.banner-nav {
font-size: 1.3rem;
width: 36px;
height: 36px;
}
}
/* ===== FOOTER-SAFE Elementor Compatibility ===== */
/* Only target the slider widget container, NOT footer */
.home-banner-slider ~ .elementor-widget-html > .elementor-widget-container,
.elementor-widget-html:has(.home-banner-slider) > .elementor-widget-container {
margin: 0 !important;
padding: 0 !important;
}
/* Only affect sections containing the slider, NOT footer */
.elementor-element:has(.home-banner-slider).e-con {
padding: 0 !important;
}
.home-banner-slider {
display: block;
margin: 0 !important;
padding: 0 !important;
position: relative;
z-index: 1;
}
/* Only allow overflow on slider’s parent section, NOT globally */
.elementor-element:has(.home-banner-slider) {
overflow: visible !important;
}
/* ===== Touch Optimization ===== */
@media (max-width: 768px) {
.cta-btn,
.banner-nav {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
}
}
</style>
<!– ✅ GIPFEL BRAND – 4 Feature Boxes Section –>
<section>
<h3>Reliability</h3>
<h3>Quick Response</h3>
<h3>Quality Service</h3>
<h3>Customer Support</h3>
</section>
<!– Font + Icons –>
<link href=”https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600&family=Raleway:wght@500;600&display=swap” rel=”stylesheet”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css”>
<style>
/* ===================== GIPFEL FEATURE SECTION ===================== */
.gipfel-feature-section {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
padding: 60px 10px;
text-align: center;
font-family: “Exo 2”, “Raleway”, sans-serif;
flex-wrap: wrap;
color: #0a174a;
background: transparent;
position: relative;
z-index: 1; /* BELOW header z-index */
}
/* ===================== BOX STYLE ===================== */
.gipfel-feature-box {
background: linear-gradient(145deg, #a9b8f3, #122868);
border-radius: 14px;
padding: 30px 20px;
width: 220px;
height: 180px;
transition: all 0.35s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Decorative top gold bar */
.gipfel-feature-box::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: #d4af37;
transition: width 0.4s ease;
}
/* ICON STYLE */
.gipfel-feature-box i {
font-size: 40px;
margin-bottom: 15px;
color: #e6e9ff;
transition: all 0.4s ease;
}
/* TEXT STYLE */
.gipfel-feature-box h3 {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
letter-spacing: 0.4px;
margin: 0;
}
/* HOVER EFFECT */
.gipfel-feature-box:hover {
transform: translateY(-5px);
background: #0a174a;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.gipfel-feature-box:hover i {
color: #d4af37;
transform: scale(1.1);
}
.gipfel-feature-box:hover::before {
width: 100%;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.gipfel-feature-section {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.gipfel-feature-box {
width: 100%;
height: 160px;
}
}
@media (max-width: 480px) {
.gipfel-feature-section {
grid-template-columns: repeat(2, 1fr);
}
.gipfel-feature-box {
height: 150px;
}
}
</style>
<h2>About Us</h2>
<style>
.about-title {
width: 100%;
text-align: left;
font-size: 2.2rem;
font-weight: 700;
color: #000;
text-transform: uppercase;
letter-spacing: 1px;
padding: 40px 20px 30px;
margin: 0;
font-family: “Exo 2”, “Raleway”, sans-serif;
border-radius: 0;
position: relative;
animation: titleFadeIn 0.8s ease-out;
}
/* Gold underline glow effect aligned to left (desktop) */
.about-title::after {
content: “”;
position: absolute;
bottom: 10px;
left: 100px;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #d4af37, #f4e29a, #d4af37);
border-radius: 4px;
box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
margin-left: -40px;
}
/* Animation */
@keyframes titleFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* —– MOBILE FIX: PERFECT CENTER —– */
@media (max-width: 768px) {
.about-title {
font-size: 1.7rem;
text-align: center;
}
.about-title::after {
left: 50%; /* Move to center */
transform: translateX(-50%);
margin-left: 0 !important; /* Remove desktop offset */
width: 70px; /* Optional: Slightly smaller for mobile */
}
}
</style>
<p>Gipfel Engineering is an ISO 9001:2015 Certified company also registered with Ministry of MSME & NSIC & engaged in the Designing, Manufacturing, Export and Supply of all types of Component Mechanical Seal, Engineered Mechanical Seal, API Seal, Gas Seal, Seal Support System, Carbon Floating Seal Ring, Carbon Segmented Ring for Turbine, Bearing Isolator, Rotary Joint, Expansion Joint, Compression Packing, Spiral Wound Gasket, Chemical Process Pump & Pump’s Spare. We also undertake refurbishment of all other makes of Mechanical Seals & Redevelopment of existing Pumps.</p><p>We are also solution provider for mechanical problems, impeller imbalance issues, efficiency improvement for pumps & blowers and provide Seal & Pump installing services (AMC & ARC). We also offer Technical Consultancy related to Pumps and Mechanical Seals.</p>
<a href=”https://gipfelengg.com/about/”>
Read More
</a>
<img width=”768″ height=”960″ src=”https://gipfelengg.com/wp-content/uploads/2026/03/2-768×960.png” alt=”2″ srcset=”https://gipfelengg.com/wp-content/uploads/2026/03/2-768×960.png 768w, https://gipfelengg.com/wp-content/uploads/2026/03/2-240×300.png 240w, https://gipfelengg.com/wp-content/uploads/2026/03/2-819×1024.png 819w, https://gipfelengg.com/wp-content/uploads/2026/03/2-1229×1536.png 1229w, https://gipfelengg.com/wp-content/uploads/2026/03/2-600×750.png 600w, https://gipfelengg.com/wp-content/uploads/2026/03/2.png 1600w” sizes=”(max-width: 768px) 100vw, 768px” />
<section>
<h2>Our Solutions</h2>
<p>
We provide tailored industry solutions to empower your business with innovative technologies and expertise.
</p>
<!– Solution 1 (UPDATED) –>
<h3>Grain-Based Distillery</h3>
<p>
Comprehensive distillation solutions for producing high-quality ethanol using advanced process technologies.
</p>
<a href=”https://gipfelengg.com/solutions/grain-based-distillery/” target=”_blank” rel=”noopener”>Explore</a>
<!– Solution 2 –>
<h3>Food, Dairy & Beverage Industry</h3>
<p>
Specialized equipment and services ensuring quality and compliance in food production.
</p>
<a href=”https://gipfelengg.com/category/industries/food-dairy-beverage-industry/” target=”_blank” rel=”noopener”>Explore</a>
<!– Solution 3 –>
<h3>Pharmaceutical Chemicals</h3>
<p>
High-grade chemical solutions supporting pharmaceutical manufacturing and safety standards.
</p>
<a href=”https://gipfelengg.com/category/media/pharmaceutical-chemicals/” target=”_blank” rel=”noopener”>Explore</a>
<!– Solution 4 –>
<h3>Automotive Industry</h3>
<p>
Advanced solutions driving innovation and efficiency in automotive design and manufacturing.
</p>
<a href=”https://gipfelengg.com/category/industries/automotive-industry/” target=”_blank” rel=”noopener”>Explore</a>
</section>
<style>
/* ===================== BASE / CONTAINER ===================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
.solutions-section {
padding: 80px 20px;
text-align: center;
background: linear-gradient(145deg, #a9b8f3, #122868);
font-family: “Exo 2”, “Raleway”, sans-serif;
color: #fff;
border-radius: 20px;
}
.solutions-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
/* ===================== HEADINGS ===================== */
.solutions-title {
font-size: clamp(1.8rem, 2.5vw, 2.6rem);
margin-bottom: 50px;
letter-spacing: 1px;
color: #fff;
position: relative;
display: inline-block;
}
.solutions-title::after {
content: “”;
display: block;
width: 60px;
height: 3px;
background: #d4af37;
margin: 10px auto 0;
border-radius: 2px;
}
.section-desc {
font-size: 1.1rem;
color: #fff;
margin-bottom: 60px;
}
/* ===================== GRID ===================== */
.solutions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* fluid tracks */
gap: 24px;
justify-items: stretch; /* stretch items to fill their track */
}
/* ===================== CARD ===================== */
.solution-card {
width: 100%;
max-width: none;
display: flex;
flex-direction: column;
height: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 25px 20px 30px;
border: 1px solid #0A174A;
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.solution-card::before {
content: “”;
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: #d4af37;
transition: width 0.4s ease;
}
.solution-card:hover::before {
width: 100%;
}
.solution-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
/* ===================== CONTENT ===================== */
.solution-icon {
font-size: 3rem;
margin-bottom: 20px;
color: #fff;
}
.solution-title {
font-size: 1.2rem;
margin-bottom: 15px;
font-weight: 600;
color: #fff;
}
.solution-desc {
font-size: 0.95rem;
margin-bottom: 20px;
line-height: 1.6;
flex-grow: 1;
font-style: italic;
color: #fff;
}
/* ===================== BUTTON ===================== */
.elementor-button {
position: relative;
overflow: visible;
background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #1e3a8a 100%);
box-shadow:
0 8px 24px -4px rgba(37, 99, 235, 0.5),
0 2px 6px 0 rgba(0, 0, 0, 0.15),
inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
inset 0 -2px 4px 0 rgba(0, 0, 0, 0.1);
border: none;
padding: 10px 25px;
border-radius: 50px;
color: #fff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
align-self: center;
}
.elementor-button::before {
content: “”;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 35%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
}
.elementor-button:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%);
box-shadow:
0 12px 32px -4px rgba(37, 99, 235, 0.6),
0 4px 10px 0 rgba(0, 0, 0, 0.2),
inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}
/* ===================== RESPONSIVE TWEAKS ===================== */
@media (max-width: 480px) {
.solutions-section { padding: 56px 16px; }
.solution-card { padding: 20px 16px 24px; }
.elementor-button {
align-self: center;
}
}
</style>
<!– Font Awesome –>
<h3>Crafting solutions that stand the test of time.</h3>
<style>
.about-subtitle {
width: 100%;
text-align: left;
font-size: 14px;
font-weight: 600;
color: #000;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 10px 20px 15px;
margin: 0;
font-family: “Exo 2”, “Raleway”, sans-serif;
position: relative;
animation: fadeInSub 0.8s ease-out;
}
/* Subtle gold underline */
.about-subtitle::after {
content: “”;
position: absolute;
bottom: 5px;
left: 20px;
width: 200px;
height: 3px;
background: linear-gradient(90deg, #d4af37, #f4e29a, #d4af37);
border-radius: 2px;
box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
}
/* Fade-in animation */
@keyframes fadeInSub {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 768px) {
.about-subtitle {
font-size: 12px;
padding: 8px 15px 12px;
}
.about-subtitle::after {
width: 40px;
bottom: 4px;
}
}
</style>
<h2>Get free product recommendations and mechanical seal reliability advice.</h2>
<p>Get personalized product recommendations and expert tips to improve your mechanical seal reliability. Talk to our specialists today — it’s completely free.</p>
<a href=”https://gipfelengg.com/contact/” id=”shimmerbtn”>
Get Quote
</a>
<img width=”800″ height=”533″ src=”https://gipfelengg.com/wp-content/uploads/2026/01/Centrifugal-Chemical-Pump1.jpg” alt=”centrifugal chemical pump1″ srcset=”https://gipfelengg.com/wp-content/uploads/2026/01/Centrifugal-Chemical-Pump1.jpg 800w, https://gipfelengg.com/wp-content/uploads/2026/01/Centrifugal-Chemical-Pump1-300×200.jpg 300w, https://gipfelengg.com/wp-content/uploads/2026/01/Centrifugal-Chemical-Pump1-768×512.jpg 768w, https://gipfelengg.com/wp-content/uploads/2026/01/Centrifugal-Chemical-Pump1-600×400.jpg 600w” sizes=”(max-width: 800px) 100vw, 800px” />
<style>
/* ======================= HOMEPAGE PRODUCT SECTION ======================= */
#homepage-products .produch2 {
width: 100%;
text-align: center;
font-size: 2.4rem;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
padding: 60px 20px 60px;
margin: 0;
position: relative;
z-index: 2;
}
#homepage-products .produch2::after {
content: “”;
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 5px;
background: linear-gradient(90deg, #d4af37, #f4e29a, #d4af37);
border-radius: 5px;
}
/* ✅ Product Grid — 4 cards per row */
#homepage-products ul.products {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
justify-items: center;
align-items: stretch;
margin: 0;
padding: 60px 40px 80px;
background: none;
position: relative;
}
/* ✅ Product Card */
#homepage-products ul.products li.product {
background: rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 35px 25px 50px;
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
color: #fff !important;
transition: all 0.35s ease;
width: 100%;
min-height: 400px;
}
/* Ensure all inner text is white */
#homepage-products ul.products li.product * {
color: #fff !important;
}
/* ✅ Hover Effect */
#homepage-products ul.products li.product:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.18);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
/* ✅ Product Image */
#homepage-products ul.products li.product img {
border-radius: 12px;
margin-bottom: 20px;
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.4s ease;
}
#homepage-products ul.products li.product:hover img {
transform: scale(1.05);
}
/* ✅ Product Title */
#homepage-products ul.products li.product h2.woocommerce-loop-product__title {
font-size: 1.2rem;
margin-bottom: 15px;
font-weight: 700;
}
/* ✅ Product Price */
#homepage-products ul.products li.product .price {
margin-bottom: 20px;
font-style: italic;
font-size: 1rem;
}
/* ✅ Hide Button (Homepage Only) */
#homepage-products ul.products li.product a.button {
display: none !important;
}
/* ✅ Responsive */
@media (max-width: 1200px) {
#homepage-products ul.products {
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
}
@media (max-width: 900px) {
#homepage-products ul.products {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
#homepage-products .produch2 {
font-size: 2rem;
padding: 50px 20px 50px;
}
#homepage-products .produch2::after {
bottom: 20px;
width: 80px;
height: 4px;
}
}
@media (max-width: 600px) {
#homepage-products ul.products {
grid-template-columns: 1fr;
}
#homepage-products ul.products li.product {
max-width: 90%;
margin: 0 auto;
padding: 30px 20px 40px;
min-height: 360px;
}
/* Mobile H2 Adjustments */
#homepage-products .produch2 {
font-size: 1.6rem;
padding: 40px 15px 40px;
text-align: center;
}
/* Ensure underline stays centered on mobile */
#homepage-products .produch2::after {
left: 50%;
transform: translateX(-50%);
bottom: 15px;
width: 70px;
height: 3px;
}
}
</style>
<!– ✅ Product Section With Responsive Cards & Reference Button Colors –>
<section id=”homepage-products”>
<h2>Our Featured Products</h2>
<!– WooCommerce Products Shortcode –>
-
Back-to-Back Double Cartridge Multi-Spring Mechanical Seal
Back-to-Back Double Cartridge Multi-Spring Mechanical Seal
Read more -
Balanced Multi-Spring Cartridge Mechanical Seal
Balanced Multi-Spring Cartridge Mechanical Seal
Read more
</section>
<style>
/* ======================= HOMEPAGE PRODUCT SECTION ======================= */
#homepage-products {
position: relative;
padding: 60px 0 0;
width: 100%;
background: linear-gradient(145deg, #a9b8f3, #122868);
border-radius: 20px;
}
/* ✅ Section Heading */
#homepage-products .produch2 {
width: 100%;
text-align: center;
font-size: 2.4rem;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
padding: 60px 20px 40px;
margin: 0;
position: relative;
z-index: 2;
}
#homepage-products .produch2::after {
content: “”;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 5px;
background: linear-gradient(90deg, #d4af37, #f4e29a, #d4af37);
border-radius: 5px;
}
/* ✅ Product Grid */
#homepage-products .woocommerce ul.products {
width: 100%;
max-width: 1400px;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
padding: 40px 40px 80px !important;
list-style: none !important;
}
/* ✅ Product Card */
#homepage-products .woocommerce ul.products li.product {
background: rgba(255,255,255,0.10) !important;
border-radius: 16px !important;
padding: 25px !important;
border: 1px solid #0A174A !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
transition: all 0.35s ease !important;
width: 100% !important;
min-height: 420px !important;
position: relative !important;
z-index: 1;
margin: 0 !important;
float: none !important;
overflow: hidden !important;
}
/* ✅ Hover Effect */
#homepage-products .woocommerce ul.products li.product:hover {
transform: translateY(-8px) !important;
background: rgba(255,255,255,0.18) !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
border-color: #d4af37 !important;
}
#homepage-products .woocommerce ul.products li.product::before {
content: “”;
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: #d4af37;
transition: width 0.4s ease;
}
#homepage-products .woocommerce ul.products li.product:hover::before {
width: 100%;
}
/* ✅ Product Image */
#homepage-products .woocommerce ul.products li.product img {
border-radius: 12px !important;
width: 100% !important;
height: 200px !important;
object-fit: cover !important;
transition: transform 0.4s ease !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
display: block !important;
margin: 0 auto !important;
}
#homepage-products .woocommerce ul.products li.product:hover img {
transform: scale(1.08) !important;
}
/* ✅ Product Title */
#homepage-products .woocommerce ul.products li.product .woocommerce-loop-product__title,
#homepage-products .woocommerce ul.products li.product h2 {
display: block !important;
font-size: 1.3rem !important;
margin: 15px 0 !important;
font-weight: 700 !important;
color: #fff !important;
line-height: 1.4 !important;
position: relative !important;
z-index: 4 !important;
text-align: center !important;
}
#homepage-products .woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
#homepage-products .woocommerce ul.products li.product:hover h2 {
color: #d4af37 !important;
}
/* ✅ Product Price */
#homepage-products .woocommerce ul.products li.product .price {
display: block !important;
font-size: 1.1rem !important;
color: #d4af37 !important;
font-weight: 600 !important;
margin: 10px 0 15px !important;
position: relative !important;
z-index: 4 !important;
}
#homepage-products .woocommerce ul.products li.product .price del {
color: rgba(255,255,255,0.5) !important;
margin-right: 8px;
}
#homepage-products .woocommerce ul.products li.product .price ins {
text-decoration: none;
color: #d4af37 !important;
}
/* ✅ Star Rating */
#homepage-products .woocommerce ul.products li.product .star-rating {
color: #d4af37 !important;
margin: 10px auto !important;
position: relative !important;
z-index: 4 !important;
}
#homepage-products .woocommerce ul.products li.product .star-rating span,
#homepage-products .woocommerce ul.products li.product .star-rating strong {
color: #d4af37 !important;
}
/* ✅ Hide All Default Buttons */
#homepage-products .woocommerce ul.products li.product .button,
#homepage-products .woocommerce ul.products li.product a.button,
#homepage-products .woocommerce ul.products li.product .add_to_cart_button,
#homepage-products .woocommerce ul.products li.product a.add_to_cart_button,
#homepage-products .woocommerce ul.products li.product a[data-product_id] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ✅ “Get a Quote” Button – Reference Blue Gradient */
#homepage-products .woocommerce ul.products li.product .wpb-get-a-quote-button-form-fire {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #1e3a8a 100%) !important;
color: #fff !important;
font-weight: 700;
border: none !important;
border-radius: 18px 18px 6px 6px !important;
padding: 12px 32px !important;
font-size: 1.08rem !important;
box-shadow: 0 2px 8px rgba(30,70,180,0.16) !important;
text-align: center;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
position: relative;
overflow: visible;
margin: 15px auto !important;
display: block !important;
}
#homepage-products .woocommerce ul.products li.product .wpb-get-a-quote-button-form-fire::before {
content: “”;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 35%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0) 100%
);
pointer-events: none;
}
#homepage-products .woocommerce ul.products li.product .wpb-get-a-quote-button-form-fire:hover {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%) !important;
transform: translateY(-2px);
box-shadow: 0 12px 32px -4px rgba(37,99,235,0.6), 0 4px 10px 0 rgba(0,0,0,0.2), inset 0 1px 0 0 rgba(255,255,255,0.25);
}
/* ===================== RESPONSIVE BREAKPOINTS ===================== */
@media (max-width: 1200px) {
#homepage-products .woocommerce ul.products {
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
padding: 40px 30px 60px !important;
}
}
@media (max-width: 900px) {
#homepage-products .woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
padding: 30px 20px 50px !important;
}
#homepage-products .produch2 {
font-size: 2rem;
padding: 50px 20px 35px;
}
#homepage-products .produch2::after {
bottom: 12px;
width: 80px;
height: 4px;
}
}
@media (max-width: 600px) {
#homepage-products .woocommerce ul.products {
grid-template-columns: 1fr !important;
padding: 20px 15px 40px !important;
}
#homepage-products .woocommerce ul.products li.product {
max-width: 100%;
margin: 0 auto !important;
padding: 25px 20px !important;
min-height: 400px !important;
}
#homepage-products .produch2 {
font-size: 1.6rem;
padding: 40px 15px 30px;
}
#homepage-products .produch2::after {
bottom: 10px;
width: 70px;
height: 3px;
}
#homepage-products .woocommerce ul.products li.product .wpb-get-a-quote-button-form-fire {
width: 90% !important;
max-width: 200px !important;
margin: 15px auto !important;
}
}
</style>
<h2>Quality OBJECTIVE</h2>
<style>
.about-title {
width: 100%;
text-align: center;
font-size: 2.2rem;
font-weight: 700;
color: #000;
text-transform: uppercase;
letter-spacing: 1px;
padding: 60px 20px 30px;
margin: 0;
font-family: “Exo 2”, “Raleway”, sans-serif;
border-radius: 0; /* remove the separate rounded corner */
position: relative;
}
/* Gold underline glow effect */
.about-title::after {
content: “”;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #d4af37, #f4e29a, #d4af37);
border-radius: 4px;
box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}
/* Fade-in animation */
@keyframes titleFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.about-title {
animation: titleFadeIn 0.8s ease-out;
}
/* Responsive */
@media (max-width: 768px) {
.about-title {
font-size: 1.7rem;
}
}
</style>
<h4>Customer Satisfaction</h4>
<h4>Delivery Commitment</h4>
<h4>Customer Complaints</h4>
<h4>Buisness Volume</h4>
<!– ✅ GIPFEL BRAND – Testimonial Section –>
<section>
<h2>What Our Clients Say</h2>
<p>
“Gipfel’s engineering precision and timely support helped us enhance our production efficiency. Their team truly understands industrial quality.”
</p>
<img src=”https://randomuser.me/api/portraits/men/32.jpg” alt=”Client Photo”>
<h4>Rahul Mehta</h4>
Operations Head, MechPro Industries
<p>
“Their commitment to reliability and customer satisfaction is unmatched. We’ve been partnering with them for over 3 years now.”
</p>
<img src=”https://randomuser.me/api/portraits/women/44.jpg” alt=”Client Photo”>
<h4>Anita Sharma</h4>
Project Manager, TechWorks Ltd.
<p>
“From consultation to delivery, Gipfel has exceeded our expectations every time. Highly recommended for industrial-grade projects.”
</p>
<img src=”https://randomuser.me/api/portraits/men/65.jpg” alt=”Client Photo”>
<h4>Vikas Patel</h4>
CEO, Zenith Manufacturing
</section>
<!– Fonts + Icons –>
<link href=”https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600&family=Raleway:wght@500;600&display=swap” rel=”stylesheet”>
<style>
/* ===================== GIPFEL TESTIMONIAL SECTION ===================== */
.gipfel-testimonial-section {
background: linear-gradient(145deg, #a9b8f3, #122868);
color: #fff;
padding: 80px 20px;
text-align: center;
font-family: “Exo 2”, “Raleway”, sans-serif;
border-radius: 20px;
}
.testimonial-title {
font-size: 2rem;
margin-bottom: 50px;
letter-spacing: 1px;
color: #f5f5f5;
position: relative;
display: inline-block;
}
.testimonial-title::after {
content: “”;
display: block;
width: 60px;
height: 3px;
background: #d4af37;
margin: 10px auto 0;
border-radius: 2px;
}
/* ===================== CONTAINER ===================== */
.testimonial-container {
display: flex;
justify-content: center;
align-items: stretch;
gap: 25px;
flex-wrap: wrap;
max-width: 100%;
}
/* ===================== BOX STYLE ===================== */
.testimonial-box {
background: rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 25px 20px 30px;
flex: 1 1 300px;
max-width: 330px;
border: 1px solid rgba(255, 255, 255, 0.12);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.testimonial-box::before {
content: “”;
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: #d4af37;
transition: width 0.4s ease;
}
.testimonial-box:hover::before {
width: 100%;
}
/* ===================== TEXT STYLE ===================== */
.testimonial-text {
font-size: 0.95rem;
color: #e0e3ff;
line-height: 1.6;
font-style: italic;
margin-bottom: 25px;
}
/* ===================== AUTHOR ===================== */
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.testimonial-author img {
width: 55px;
height: 55px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #d4af37;
}
.testimonial-author h4 {
font-size: 1rem;
font-weight: 600;
margin: 0;
color: #fff;
}
.testimonial-author span {
font-size: 0.8rem;
color: #d0d2e0;
}
/* ===================== HOVER EFFECT ===================== */
.testimonial-box:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
.testimonial-container {
flex-direction: column;
align-items: center;
}
.testimonial-box {
max-width: 90%;
}
}
</style>
<!– GIPFEL B2B ENGINEERING HUB INTEGRATION –>
<div class=”elementor-element e-con-full e-flex e-con e-parent” style=”padding: 20px 0; background: #0b1120;”>
<!– GIPFEL ENGINEERING B2B INDUSTRIAL HUB COMPONENT –>
<!– Copy and paste this code into an HTML Block in Elementor, Spectra, or Gutenberg –>
<div id=”gipfel-hub-root” style=”width: 100%; max-width: 1200px; margin: 40px auto; font-family: ‘Inter’, system-ui, -apple-system, sans-serif; background: #0b1120; color: #f8fafc; border-radius: 20px; padding: 32px 24px; border: 1px solid rgba(56, 189, 248, 0.25); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);”>
<!– Title Header –>
<div style=”text-align: center; margin-bottom: 36px;”>
<span style=”background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); padding: 4px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 12px;”>
<i class=”fa-solid fa-microscope” style=”margin-right: 6px;”></i> Engineering Knowledge Hub
</span>
<h2 style=”font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; color: #ffffff; margin: 0 0 10px 0; line-height: 1.2;”>
Pumps & Mechanical Seals <span style=”background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;”>Intelligence Hub</span>
</h2>
<p style=”color: #94a3b8; font-size: 0.95rem; max-width: 700px; margin: 0 auto;”>
Search OEM pump cross-references, calculate seal operating PV envelopes, and explore API 682 piping plan schematics.
</p>
</div>
<!– Navigation Tabs –>
<div style=”display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 32px;”>
<button onclick=”gipfelSwitchTab(‘cross-ref’)” id=”gipfel-tab-cross-ref” class=”gipfel-hub-tab” style=”background: #0284c7; color: #ffffff; border: 1px solid #38bdf8; padding: 10px 20px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease;”>
<i class=”fa-solid fa-arrows-rotate” style=”margin-right: 8px;”></i> Pump Cross-Reference Engine
</button>
<button onclick=”gipfelSwitchTab(‘calculator’)” id=”gipfel-tab-calculator” class=”gipfel-hub-tab” style=”background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 10px 20px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease;”>
<i class=”fa-solid fa-calculator” style=”margin-right: 8px;”></i> PV Factor Calculator
</button>
<button onclick=”gipfelSwitchTab(‘piping’)” id=”gipfel-tab-piping” class=”gipfel-hub-tab” style=”background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 10px 20px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease;”>
<i class=”fa-solid fa-diagram-project” style=”margin-right: 8px;”></i> API 682 Piping Plans
</button>
</div>
<!– TAB 1: PUMP CROSS-REFERENCE ENGINE –>
<div id=”gipfel-section-cross-ref” style=”display: block;”>
<div style=”background: rgba(15, 23, 42, 0.8); border: 1px solid #1e293b; border-radius: 16px; padding: 24px; margin-bottom: 24px;”>
<div style=”grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); display: grid; gap: 16px; margin-bottom: 24px;”>
<div>
<label style=”display: block; font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 8px;”>Pump Manufacturer</label>
<select id=”hub-pump-brand” onchange=”gipfelRunCrossRef()” style=”width: 100%; background: #0f172a; border: 1px solid #334155; color: #ffffff; padding: 12px; border-radius: 10px; font-size: 0.85rem; outline: none;”>
<option value=”grundfos”>Grundfos Pumps (CR / CRI / CRN Series)</option>
<option value=”ksb”>KSB Pumps (Etabloc / Etanorm / Megaflex)</option>
<option value=”sulzer”>Sulzer Pumps (APP / APT / AUP Chemical)</option>
<option value=”flygt”>Flygt Submersible Pumps (2000 / 3000 Series)</option>
<option value=”ebara”>Ebara Industrial Pumps (3M / CDX)</option>
</select>
</div>
<div>
<label style=”display: block; font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 8px;”>Shaft Diameter (mm)</label>
<select id=”hub-shaft-size” onchange=”gipfelRunCrossRef()” style=”width: 100%; background: #0f172a; border: 1px solid #334155; color: #ffffff; padding: 12px; border-radius: 10px; font-size: 0.85rem; outline: none;”>
<option value=”22″>22 mm Shaft</option>
<option value=”28″>28 mm Shaft</option>
<option value=”38″ selected>38 mm Shaft (Standard)</option>
<option value=”45″>45 mm Shaft</option>
<option value=”60″>60 mm Heavy Duty Shaft</option>
</select>
</div>
<div>
<label style=”display: block; font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 8px;”>Fluid Medium</label>
<select id=”hub-fluid-type” onchange=”gipfelRunCrossRef()” style=”width: 100%; background: #0f172a; border: 1px solid #334155; color: #ffffff; padding: 12px; border-radius: 10px; font-size: 0.85rem; outline: none;”>
<option value=”water”>Clean Water / Condensate</option>
<option value=”chemical” selected>Corrosive Chemical / Acid</option>
<option value=”slurry”>Abrasive Slurry / Mud</option>
<option value=”oil”>Hot Hydrocarbon Oil (>200°C)</option>
</select>
</div>
</div>
<!– Result Box –>
<div id=”hub-cross-result” style=”background: rgba(2, 132, 199, 0.1); border: 1px solid rgba(56, 189, 248, 0.4); border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;”>
<div>
<span style=”background: rgba(16, 185, 129, 0.2); color: #34d399; font-size: 0.7rem; font-weight: 700; padding: 2px 10px; border-radius: 12px; text-transform: uppercase;”>100% Interchangeable Equivalent</span>
<h3 id=”hub-seal-title” style=”margin: 6px 0 4px 0; font-size: 1.25rem; font-weight: 700; color: #ffffff;”>Gipfel Model GPS-38C Cartridge Seal</h3>
<p id=”hub-seal-desc” style=”margin: 0; font-size: 0.8rem; color: #94a3b8;”>Direct 1:1 swap for Grundfos 38mm shaft cartridge seals. API 682 Plan 11/21 compatible.</p>
</div>
<button onclick=”gipfelRequestDrawing()” style=”background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%); color: #ffffff; border: none; padding: 12px 24px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);”>
<i class=”fa-solid fa-file-pdf” style=”margin-right: 6px;”></i> Request 3D STEP & Quote
</button>
</div>
</div>
</div>
<!– TAB 2: PV CALCULATOR –>
<div id=”gipfel-section-calculator” style=”display: none;”>
<div style=”display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;”>
<div style=”background: rgba(15, 23, 42, 0.8); border: 1px solid #1e293b; border-radius: 16px; padding: 20px;”>
<h4 style=”margin: 0 0 16px 0; font-size: 1rem; color: #ffffff;”>Input Operating Parameters</h4>
<div style=”margin-bottom: 16px;”>
<div style=”display: flex; justify-content: space-between; font-size: 0.8rem; color: #94a3b8; margin-bottom: 6px;”>
<span>Operating Pressure (P)</span>
<strong id=”calc-val-p” style=”color: #38bdf8;”>15 bar</strong>
</div>
<input id=”calc-in-p” type=”range” min=”1″ max=”50″ value=”15″ oninput=”gipfelRunCalc()” style=”width: 100%; cursor: pointer;”>
</div>
<div style=”margin-bottom: 16px;”>
<div style=”display: flex; justify-content: space-between; font-size: 0.8rem; color: #94a3b8; margin-bottom: 6px;”>
<span>Shaft Speed (RPM)</span>
<strong id=”calc-val-rpm” style=”color: #38bdf8;”>2900 RPM</strong>
</div>
<input id=”calc-in-rpm” type=”range” min=”500″ max=”6000″ step=”100″ value=”2900″ oninput=”gipfelRunCalc()” style=”width: 100%; cursor: pointer;”>
</div>
<div>
<div style=”display: flex; justify-content: space-between; font-size: 0.8rem; color: #94a3b8; margin-bottom: 6px;”>
<span>Shaft Diameter (D)</span>
<strong id=”calc-val-d” style=”color: #38bdf8;”>45 mm</strong>
</div>
<input id=”calc-in-d” type=”range” min=”18″ max=”120″ value=”45″ oninput=”gipfelRunCalc()” style=”width: 100%; cursor: pointer;”>
</div>
</div>
<div style=”background: rgba(15, 23, 42, 0.8); border: 1px solid #1e293b; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;”>
<div>
<h4 style=”margin: 0 0 16px 0; font-size: 1rem; color: #ffffff;”>Calculated Operating Envelope</h4>
<div style=”display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;”>
<div style=”background: #0f172a; padding: 12px; border-radius: 10px; border: 1px solid #334155;”>
<span style=”font-size: 0.7rem; color: #94a3b8; display: block;”>Linear Speed (V)</span>
<strong id=”calc-out-v” style=”font-size: 1.1rem; color: #ffffff;”>6.83 m/s</strong>
</div>
<div style=”background: #0f172a; padding: 12px; border-radius: 10px; border: 1px solid #334155;”>
<span style=”font-size: 0.7rem; color: #94a3b8; display: block;”>PV Factor</span>
<strong id=”calc-out-pv” style=”font-size: 1.1rem; color: #38bdf8;”>102.5 bar·m/s</strong>
</div>
</div>
<div id=”calc-status” style=”background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); padding: 12px; border-radius: 10px; font-size: 0.8rem; color: #34d399;”>
<strong>Optimal Operating Envelope:</strong> Single Cartridge Seal (SiC vs SiC) recommended.
</div>
</div>
<button onclick=”gipfelRequestDrawing()” style=”width: 100%; margin-top: 16px; background: #1e293b; border: 1px solid #334155; color: #ffffff; padding: 10px; border-radius: 10px; font-size: 0.8rem; cursor: pointer;”>
Download Engineering Calculation PDF Sheet
</button>
</div>
</div>
</div>
<!– TAB 3: API 682 PIPING PLANS –>
<div id=”gipfel-section-piping” style=”display: none;”>
<div style=”background: rgba(15, 23, 42, 0.8); border: 1px solid #1e293b; border-radius: 16px; padding: 24px;”>
<div style=”display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;”>
<button onclick=”gipfelSetPlan(’11’)” id=”plan-btn-11″ style=”background: #0284c7; color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; cursor: pointer;”>Plan 11</button>
<button onclick=”gipfelSetPlan(’21’)” id=”plan-btn-21″ style=”background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 8px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; cursor: pointer;”>Plan 21</button>
<button onclick=”gipfelSetPlan(’52’)” id=”plan-btn-52″ style=”background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 8px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; cursor: pointer;”>Plan 52</button>
<button onclick=”gipfelSetPlan(’53a’)” id=”plan-btn-53a” style=”background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 8px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; cursor: pointer;”>Plan 53A</button>
</div>
<div style=”border-top: 1px solid #334155; padding-top: 16px;”>
<h4 id=”plan-title-head” style=”margin: 0 0 8px 0; font-size: 1.1rem; color: #ffffff;”>API Plan 11 – Recirculation from Pump Discharge</h4>
<p id=”plan-text-body” style=”margin: 0; font-size: 0.85rem; color: #94a3b8; line-height: 1.6;”>
Flush fluid is routed from the pump discharge through an orifice directly into the seal chamber to increase pressure and prevent fluid vaporization at the seal faces.
</p>
</div>
</div>
</div>
</div>
<!– Interactive Scripts –>
<script>
function gipfelSwitchTab(tabName) {
[‘cross-ref’, ‘calculator’, ‘piping’].forEach(t => {
document.getElementById(‘gipfel-section-‘ + t).style.display = (t === tabName) ? ‘block’ : ‘none’;
const btn = document.getElementById(‘gipfel-tab-‘ + t);
if (t === tabName) {
btn.style.background = ‘#0284c7’;
btn.style.color = ‘#ffffff’;
btn.style.border = ‘1px solid #38bdf8’;
} else {
btn.style.background = ‘#1e293b’;
btn.style.color = ‘#94a3b8’;
btn.style.border = ‘1px solid #334155’;
}
});
}
function gipfelRunCrossRef() {
const brand = document.getElementById(‘hub-pump-brand’).value;
const shaft = document.getElementById(‘hub-shaft-size’).value;
const titleEl = document.getElementById(‘hub-seal-title’);
const descEl = document.getElementById(‘hub-seal-desc’);
const modelMap = {
‘grundfos’: `Gipfel Model GPS-${shaft}C Cartridge Seal`,
‘ksb’: `Gipfel Model GKSB-${shaft}B Heavy Duty Seal`,
‘sulzer’: `Gipfel Model GSLZ-${shaft}A API Dual Seal`,
‘flygt’: `Gipfel Model GFLG-${shaft}S Submersible Seal`,
‘ebara’: `Gipfel Model GEBR-${shaft}M Compact Cartridge`
};
titleEl.innerText = modelMap[brand] || `Gipfel Precision Seal GPS-${shaft}mm`;
descEl.innerText = `Interchangeable 1:1 replacement for ${brand.toUpperCase()} ${shaft}mm shaft diameter pumps. Guaranteed performance & zero modification required.`;
}
function gipfelRunCalc() {
const p = parseFloat(document.getElementById(‘calc-in-p’).value);
const rpm = parseFloat(document.getElementById(‘calc-in-rpm’).value);
const d = parseFloat(document.getElementById(‘calc-in-d’).value);
document.getElementById(‘calc-val-p’).innerText = p + ‘ bar’;
document.getElementById(‘calc-val-rpm’).innerText = rpm + ‘ RPM’;
document.getElementById(‘calc-val-d’).innerText = d + ‘ mm’;
const v = (Math.PI * (d / 1000) * rpm) / 60;
const pv = p * v;
document.getElementById(‘calc-out-v’).innerText = v.toFixed(2) + ‘ m/s’;
document.getElementById(‘calc-out-pv’).innerText = pv.toFixed(1) + ‘ bar·m/s’;
const statusEl = document.getElementById(‘calc-status’);
if (pv < 120) {
statusEl.style.background = ‘rgba(16, 185, 129, 0.15)’;
statusEl.style.borderColor = ‘rgba(16, 185, 129, 0.4)’;
statusEl.style.color = ‘#34d399’;
statusEl.innerHTML = ‘<strong>Optimal Operating Envelope:</strong> Single Cartridge Seal (SiC vs SiC) recommended.’;
} else if (pv < 250) {
statusEl.style.background = ‘rgba(245, 158, 11, 0.15)’;
statusEl.style.borderColor = ‘rgba(245, 158, 11, 0.4)’;
statusEl.style.color = ‘#fbbf24’;
statusEl.innerHTML = ‘<strong>High Duty Zone:</strong> Double Cartridge Seal with Plan 53A Barrier System required.’;
} else {
statusEl.style.background = ‘rgba(244, 63, 94, 0.15)’;
statusEl.style.borderColor = ‘rgba(244, 63, 94, 0.4)’;
statusEl.style.color = ‘#f87171’;
statusEl.innerHTML = ‘<strong>Extreme Duty Limit:</strong> Custom Engineered Hydrodynamic / Gas Seal required.’;
}
}
function gipfelSetPlan(planNum) {
[’11’, ’21’, ’52’, ’53a’].forEach(p => {
const btn = document.getElementById(‘plan-btn-‘ + p);
if (p === planNum) {
btn.style.background = ‘#0284c7’;
btn.style.color = ‘#ffffff’;
} else {
btn.style.background = ‘#1e293b’;
btn.style.color = ‘#94a3b8′;
}
});
const planData = {
’11’: { title: ‘API Plan 11 – Recirculation from Pump Discharge’, desc: ‘Flush fluid is routed from the pump discharge through an orifice directly into the seal chamber to increase pressure and prevent fluid vaporization at the seal faces.’ },
’21’: { title: ‘API Plan 21 – Cooled Recirculation from Discharge’, desc: ‘Flush fluid flows from discharge through a Heat Exchanger before entering the seal chamber, reducing temperature at the seal faces.’ },
’52’: { title: ‘API Plan 52 – Unpressurized Dual Seal Buffer System’, desc: ‘Buffer fluid flows from an unpressurized reservoir to the outer seal chamber. Fluid circulation is maintained by an internal pumping ring.’ },
’53a’: { title: ‘API Plan 53A – Pressurized Dual Seal Barrier System’, desc: ‘Barrier fluid is pressurized higher than process pressure (at least 1.4 bar above seal chamber pressure) via nitrogen blanket on barrier tank.’ }
};
document.getElementById(‘plan-title-head’).innerText = planData[planNum].title;
document.getElementById(‘plan-text-body’).innerText = planData[planNum].desc;
}
function gipfelRequestDrawing() {
alert(“✅ DEMO ACTION: Instant 3D CAD STEP file & Engineering Quotation generated for Gipfel Engineering!”);
}
</script>
</div>
<!– GIPFEL PHASE 2 3D WEBGL & TRACKER SHORTCODES –>
<div class=”gipfel-phase2-hero-embed” style=”max-width: 1200px; margin: 40px auto; padding: 20px;”>
[gipfel_visitor_tracker]
<div style=”margin-top: 30px;”>
<h3 style=”color: #ffffff; text-align: center; font-size: 1.8rem; margin-bottom: 10px;”>Interactive 3D Mechanical Seal Viewer</h3>
</div>
</div>