/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Loading Screen */
#loadingScreen {
transition: opacity 0.5s ease;
}
.loading-content {
text-align: center;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
:root {
--primary-cyan: #00BCD4;
--primary-teal: #009688;
--dark-teal: #00695C;
--light-cyan: #B2EBF2;
--light-teal: #B2DFDB;
--white: #FFFFFF;
--light-gray: #F5F5F5;
--dark-gray: #333333;
--text-gray: #666666;
--shadow: 0 4px 20px rgba(0, 188, 212, 0.15);
--shadow-hover: 0 8px 30px rgba(0, 188, 212, 0.25);
/* Enhanced Color Palette */
--gradient-primary: linear-gradient(135deg, #00BCD4, #009688, #00695C);
--gradient-secondary: linear-gradient(135deg, #B2EBF2, #B2DFDB, #80CBC4);
--gradient-accent: linear-gradient(135deg, #FF6B6B, #FF8E53, #FFA726);
--gradient-dark: linear-gradient(135deg, #263238, #37474F, #455A64);
/* Modern Colors */
--blue-primary: #2196F3;
--blue-light: #64B5F6;
--green-primary: #4CAF50;
--green-light: #81C784;
--orange-primary: #FF9800;
--orange-light: #FFB74D;
--purple-primary: #9C27B0;
--purple-light: #BA68C8;
/* Enhanced Shadows */
--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);
--shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.2);
--shadow-glow: 0 0 20px rgba(0, 188, 212, 0.3);
/* Border Radius */
--radius-small: 8px;
--radius-medium: 16px;
--radius-large: 24px;
--radius-xl: 32px;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-xxl: 4rem;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--dark-gray);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
/* Background Video */
.background-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
opacity: 0.8;
filter: brightness(0.8) contrast(1.2) saturate(1.1);
background: var(--gradient-primary);
will-change: opacity;
transform: translateZ(0);
animation: backgroundPulse 8s ease-in-out infinite;
}
@keyframes backgroundPulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 0.9; }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
pointer-events: none;
z-index: -1;
}
/* Floating Navigation */
.floating-nav {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
will-change: transform;
transform: translateZ(0);
}
.nav-toggle {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.nav-toggle::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
animation: toggleShine 3s infinite linear;
pointer-events: none;
}
@keyframes toggleShine {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}
.nav-toggle:hover {
transform: scale(1.1) rotate(180deg);
box-shadow: 0 12px 35px rgba(0, 188, 212, 0.5);
}
.toggle-icon {
width: 24px;
height: 20px;
position: relative;
transition: all 0.3s ease;
}
.toggle-icon span {
display: block;
width: 100%;
height: 3px;
background: white;
border-radius: 2px;
position: absolute;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.toggle-icon span:nth-child(1) {
top: 0;
}
.toggle-icon span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.toggle-icon span:nth-child(3) {
bottom: 0;
}
.nav-toggle.active .toggle-icon span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.nav-toggle.active .toggle-icon span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active .toggle-icon span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
.nav-circle {
width: 350px;
height: 60px;
position: relative;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 0 15px;
border: 1px solid rgba(0, 188, 212, 0.2);
}
.nav-circle.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.nav-item {
position: relative;
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(178, 235, 242, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
border: 2px solid rgba(0, 188, 212, 0.2);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.2);
overflow: hidden;
flex-shrink: 0;
}
.nav-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 50%;
}
.nav-item:hover {
transform: scale(1.2);
box-shadow: 0 12px 35px rgba(0, 188, 212, 0.4);
border-color: var(--primary-cyan);
}
.nav-item:hover::before {
opacity: 0.1;
}
.nav-item i {
font-size: 1.5rem;
color: var(--primary-teal);
transition: all 0.3s ease;
z-index: 1;
position: relative;
}
.nav-item:hover i {
color: var(--primary-cyan);
transform: scale(1.2);
}
.nav-label {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
white-space: nowrap;
backdrop-filter: blur(5px);
}
.nav-item:hover .nav-label {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}
/* Nav items are now positioned by flexbox */
/* Floating Logo */
.floating-logo {
position: fixed;
top: 30px;
left: 30px;
z-index: 999;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 15px 20px;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.2);
border: 2px solid rgba(0, 188, 212, 0.1);
transition: all 0.3s ease;
will-change: transform;
transform: translateZ(0);
}
.floating-logo:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 188, 212, 0.3);
}
.floating-logo .logo-container {
display: flex;
align-items: center;
gap: 1rem;
}
.floating-logo .logo-image {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 10px;
transition: all 0.3s ease;
filter: drop-shadow(0 4px 8px rgba(0, 188, 212, 0.2));
animation: logoFloat 3s ease-in-out infinite;
}
.floating-logo .logo-text {
display: flex;
flex-direction: column;
}
.floating-logo .logo-title {
color: var(--primary-teal);
font-weight: 700;
font-size: 1.4rem;
margin: 0;
background: linear-gradient(135deg, var(--primary-teal), var(--primary-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.floating-logo .logo-tagline {
color: var(--primary-cyan);
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
/* Logo Styles */
.logo-container {
display: flex;
align-items: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.logo-image {
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 12px;
transition: all 0.3s ease;
filter: drop-shadow(0 4px 8px rgba(0, 188, 212, 0.2));
animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-5px) rotate(2deg); }
}
.logo-text {
display: flex;
flex-direction: column;
position: relative;
}
.logo-title {
color: var(--primary-teal);
font-weight: 700;
font-size: 1.8rem;
margin: 0;
background: linear-gradient(135deg, var(--primary-teal), var(--primary-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
animation: textGlow 2s ease-in-out infinite alternate;
}
@keyframes textGlow {
0% { filter: drop-shadow(0 0 5px rgba(0, 150, 136, 0.3)); }
100% { filter: drop-shadow(0 0 15px rgba(0, 188, 212, 0.6)); }
}
.logo-tagline {
color: var(--primary-cyan);
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
position: relative;
animation: taglineSlide 4s ease-in-out infinite;
}
@keyframes taglineSlide {
0%, 100% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(10px); opacity: 0.8; }
}
.logo-container::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: logoShine 4s infinite;
}
@keyframes logoShine {
0% { left: -100%; }
100% { left: 100%; }
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
position: relative;
}
.nav-menu li {
position: relative;
overflow: hidden;
}
.nav-menu a {
text-decoration: none;
color: var(--dark-gray);
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 25px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
display: block;
background: transparent;
}
.nav-menu a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
border-radius: 25px;
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-cyan), var(--primary-teal));
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(-50%);
border-radius: 2px;
box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}
.nav-menu a:hover {
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.3);
}
.nav-menu a:hover::before {
left: 0;
}
.nav-menu a:hover::after {
width: 80%;
}
.nav-menu a.active {
color: var(--white);
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.4);
transform: translateY(-2px);
}
.nav-menu a.active::after {
width: 80%;
}
/* Particle effect for nav items */
.nav-menu li::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(0, 188, 212, 0.3) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
z-index: -2;
}
.nav-menu li:hover::before {
width: 200px;
height: 200px;
animation: navPulse 1s ease-out;
}
@keyframes navPulse {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
padding: 12px;
border-radius: 15px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1001;
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 188, 212, 0.2);
}
.hamburger::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 188, 212, 0.1), rgba(0, 150, 136, 0.1));
border-radius: 15px;
opacity: 0;
transition: opacity 0.3s ease;
}
.hamburger:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.3);
border-color: rgba(0, 188, 212, 0.4);
}
.hamburger:hover::before {
opacity: 1;
}
.hamburger span {
width: 28px;
height: 3px;
background: linear-gradient(90deg, var(--primary-cyan), var(--primary-teal));
margin: 3px 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}
.hamburger span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--primary-cyan), var(--primary-teal));
border-radius: 3px;
opacity: 0;
transform: scaleX(0);
transition: all 0.3s ease;
}
.hamburger:hover span::before {
opacity: 1;
transform: scaleX(1);
}
.hamburger.active {
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
transform: scale(1.1) rotate(180deg);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.5);
}
.hamburger.active span {
background: var(--white);
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
width: 32px;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
width: 32px;
}
/* Hamburger pulse animation */
.hamburger::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(0, 188, 212, 0.3) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
z-index: -1;
}
.hamburger:hover::after {
width: 100px;
height: 100px;
animation: hamburgerPulse 1s ease-out;
}
@keyframes hamburgerPulse {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
/* Hero Section */
.hero {
min-height: 100vh;
background: transparent;
display: flex;
align-items: center;
padding-top: 20px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* Professional Stacker Background Elements */
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Stacker System 1 - Top Right */
radial-gradient(circle at 85% 15%, rgba(0, 188, 212, 0.1) 0%, transparent 50%),
/* Stacker System 2 - Bottom Left */
radial-gradient(circle at 15% 85%, rgba(0, 150, 136, 0.08) 0%, transparent 50%),
/* Stacker System 3 - Center */
radial-gradient(circle at 50% 50%, rgba(0, 188, 212, 0.05) 0%, transparent 70%);
pointer-events: none;
}
/* Moving Background Animations */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Animated Stacker System 1 - Moving Left to Right */
url('data:image/svg+xml,') no-repeat 0% 20% / 120px 80px,
/* Animated Stacker System 2 - Moving Right to Left */
url('data:image/svg+xml,') no-repeat 100% 60% / 120px 80px,
/* Animated Stacker System 3 - Floating Up and Down */
url('data:image/svg+xml,') no-repeat 50% 40% / 120px 80px;
opacity: 0.7;
animation:
moveStacker1 25s infinite linear,
moveStacker2 30s infinite linear reverse,
floatStacker3 20s infinite ease-in-out;
pointer-events: none;
}
@keyframes moveStacker1 {
0% { transform: translateX(-100px) translateY(0px) rotate(0deg); }
25% { transform: translateX(25vw) translateY(-20px) rotate(2deg); }
50% { transform: translateX(50vw) translateY(0px) rotate(0deg); }
75% { transform: translateX(75vw) translateY(20px) rotate(-2deg); }
100% { transform: translateX(100vw) translateY(0px) rotate(0deg); }
}
@keyframes moveStacker2 {
0% { transform: translateX(100vw) translateY(0px) rotate(0deg); }
25% { transform: translateX(75vw) translateY(20px) rotate(-2deg); }
50% { transform: translateX(50vw) translateY(0px) rotate(0deg); }
75% { transform: translateX(25vw) translateY(-20px) rotate(2deg); }
100% { transform: translateX(-100px) translateY(0px) rotate(0deg); }
}
@keyframes floatStacker3 {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateY(-30px) rotate(1deg) scale(1.05); }
50% { transform: translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateY(30px) rotate(-1deg) scale(0.95); }
}
/* Floating Stacker Icons */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Stacker Icon 1 */
url('data:image/svg+xml,') no-repeat 90% 20% / 60px 60px,
/* Stacker Icon 2 */
url('data:image/svg+xml,') no-repeat 10% 80% / 60px 60px,
/* Stacker Icon 3 */
url('data:image/svg+xml,') no-repeat 80% 70% / 60px 60px;
opacity: 0.6;
animation: floatIcons 20s infinite linear;
pointer-events: none;
}
/* Stock Image Background Elements */
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Stock Image 1 - Modern Parking Garage */
url('data:image/svg+xml,') no-repeat 5% 10% / 300px 200px,
/* Stock Image 2 - Industrial Stacker */
url('data:image/svg+xml,') no-repeat 85% 70% / 300px 200px,
/* Stock Image 3 - Automated System */
url('data:image/svg+xml,') no-repeat 45% 40% / 300px 200px;
opacity: 0.3;
animation: stockImageFloat 30s infinite ease-in-out;
pointer-events: none;
}
@keyframes stockImageFloat {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateY(-15px) rotate(1deg) scale(1.02); }
50% { transform: translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateY(15px) rotate(-1deg) scale(0.98); }
}
@keyframes floatIcons {
0% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-10px) rotate(2deg); }
50% { transform: translateY(0px) rotate(0deg); }
75% { transform: translateY(10px) rotate(-2deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.hero-content h1 {
font-size: 3.5rem;
font-weight: 800;
color: var(--dark-gray);
margin-bottom: 1.5rem;
line-height: 1.2;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
animation: titleGlow 3s ease-in-out infinite alternate;
position: relative;
}
.hero-content h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100px;
height: 4px;
background: var(--gradient-primary);
border-radius: 2px;
animation: underlineSlide 2s ease-in-out infinite;
}
@keyframes titleGlow {
0% { filter: drop-shadow(0 0 10px rgba(0, 188, 212, 0.3)); }
100% { filter: drop-shadow(0 0 20px rgba(0, 150, 136, 0.5)); }
}
@keyframes underlineSlide {
0%, 100% { width: 100px; }
50% { width: 150px; }
}
.hero-content p {
font-size: 1.3rem;
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.8;
font-weight: 400;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
animation: fadeInUp 1s ease-out 0.5s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-primary, .btn-secondary {
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--white);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
border: 2px solid transparent;
background-clip: padding-box;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.btn-secondary {
background: transparent;
color: var(--primary-teal);
border: 2px solid var(--primary-teal);
}
.btn-secondary:hover {
background: var(--primary-teal);
color: var(--white);
transform: translateY(-3px);
}
/* Special Offer Button */
.special-offer-btn {
background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
color: var(--white) !important;
border: none !important;
box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3) !important;
}
.special-offer-btn:hover {
background: linear-gradient(135deg, #ee5a24, #ff6b6b) !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 30px rgba(255, 107, 107, 0.5) !important;
}
/* Hero Animation */
.hero-image {
display: flex;
justify-content: center;
align-items: center;
}
.stacker-animation {
width: 300px;
height: 400px;
position: relative;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 20px;
box-shadow: var(--shadow-hover);
overflow: hidden;
}
.car-slot {
position: absolute;
width: 80%;
height: 60px;
background: var(--white);
border-radius: 10px;
left: 10%;
animation: stackerMove 4s infinite ease-in-out;
}
.car-1 {
top: 20%;
animation-delay: 0s;
}
.car-2 {
top: 40%;
animation-delay: 1.3s;
}
.car-3 {
top: 60%;
animation-delay: 2.6s;
}
@keyframes stackerMove {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.05); }
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary-teal), var(--primary-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-header p {
font-size: 1.1rem;
color: var(--text-gray);
max-width: 600px;
margin: 0 auto;
}
/* About Section */
.about {
padding: 8rem 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #e3f2fd 100%);
position: relative;
overflow: hidden;
border-radius: var(--radius-large);
margin: 2rem 0;
box-shadow: var(--shadow-soft);
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Industrial Stacker Background */
url('data:image/svg+xml,') repeat;
opacity: 0.4;
pointer-events: none;
}
/* Moving Background Elements for About Section */
.about::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Moving Stacker System 1 - Diagonal Movement */
url('data:image/svg+xml,') no-repeat 0% 0% / 150px 100px,
/* Moving Stacker System 2 - Circular Movement */
url('data:image/svg+xml,') no-repeat 100% 100% / 150px 100px,
/* Moving Stacker System 3 - Wave Movement */
url('data:image/svg+xml,') no-repeat 50% 50% / 150px 100px;
opacity: 0.5;
animation:
aboutMove1 35s infinite linear,
aboutMove2 40s infinite linear reverse,
aboutMove3 30s infinite ease-in-out;
pointer-events: none;
}
@keyframes aboutMove1 {
0% { transform: translateX(-150px) translateY(-100px) rotate(0deg); }
25% { transform: translateX(25vw) translateY(25vh) rotate(5deg); }
50% { transform: translateX(50vw) translateY(50vh) rotate(0deg); }
75% { transform: translateX(75vw) translateY(75vh) rotate(-5deg); }
100% { transform: translateX(100vw) translateY(100vh) rotate(0deg); }
}
@keyframes aboutMove2 {
0% { transform: translateX(100vw) translateY(100vh) rotate(0deg); }
25% { transform: translateX(75vw) translateY(75vh) rotate(-5deg); }
50% { transform: translateX(50vw) translateY(50vh) rotate(0deg); }
75% { transform: translateX(25vw) translateY(25vh) rotate(5deg); }
100% { transform: translateX(-150px) translateY(-100px) rotate(0deg); }
}
@keyframes aboutMove3 {
0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateX(20px) translateY(-30px) rotate(2deg) scale(1.1); }
50% { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateX(-20px) translateY(30px) rotate(-2deg) scale(0.9); }
}
.about::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(0, 188, 212, 0.05) 0%, transparent 70%);
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
}
/* Stock Images for About Section */
.about {
position: relative;
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Stock Image 1 - Manufacturing Facility */
url('data:image/svg+xml,') no-repeat 10% 20% / 400px 300px,
/* Stock Image 2 - Quality Control */
url('data:image/svg+xml,') no-repeat 80% 60% / 400px 300px,
/* Stock Image 3 - Innovation Hub */
url('data:image/svg+xml,') no-repeat 45% 40% / 400px 300px;
opacity: 0.25;
animation: aboutStockFloat 35s infinite ease-in-out;
pointer-events: none;
}
@keyframes aboutStockFloat {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateY(-20px) rotate(1.5deg) scale(1.03); }
50% { transform: translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateY(20px) rotate(-1.5deg) scale(0.97); }
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-text h3 {
font-size: 2.5rem;
color: var(--primary-teal);
margin-bottom: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.about-text h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: var(--gradient-primary);
border-radius: 2px;
}
.about-text p {
font-size: 1.1rem;
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.8;
}
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.feature-item {
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: var(--radius-medium);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-primary);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.feature-item:hover::before {
opacity: 0.05;
}
.feature-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-strong);
border-color: var(--primary-cyan);
}
.feature-item i {
font-size: 2.5rem;
color: var(--primary-cyan);
margin-bottom: 1rem;
transition: all 0.3s ease;
filter: drop-shadow(0 4px 8px rgba(0, 188, 212, 0.2));
}
.feature-item:hover i {
transform: scale(1.2) rotate(5deg);
color: var(--primary-teal);
filter: drop-shadow(0 6px 12px rgba(0, 150, 136, 0.3));
}
.feature-item h4 {
color: var(--primary-teal);
margin-bottom: 0.5rem;
font-weight: 600;
}
.feature-item p {
font-size: 0.9rem;
color: var(--text-gray);
}
.about-image {
display: flex;
justify-content: center;
align-items: center;
}
.image-placeholder {
width: 400px;
height: 300px;
background: linear-gradient(135deg, var(--light-cyan), var(--light-teal));
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: var(--shadow);
}
.image-placeholder i {
font-size: 4rem;
color: var(--primary-teal);
margin-bottom: 1rem;
}
.image-placeholder p {
color: var(--primary-teal);
font-weight: 600;
font-size: 1.2rem;
}
/* Products Section */
.products {
padding: 8rem 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 50%, #667eea 100%);
position: relative;
overflow: hidden;
border-radius: var(--radius-large);
margin: 2rem 0;
box-shadow: var(--shadow-medium);
}
.products::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Multi-Level Stacker Pattern */
url('data:image/svg+xml,') repeat;
opacity: 0.3;
pointer-events: none;
}
.products::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background:
/* Floating Stacker System */
url('data:image/svg+xml,') no-repeat center / 100px 100px;
opacity: 0.4;
animation: productFloat 15s infinite ease-in-out;
pointer-events: none;
}
/* Additional Moving Background Elements for Products Section */
.products::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Multi-Level Stacker Pattern */
url('data:image/svg+xml,') repeat;
opacity: 0.3;
pointer-events: none;
}
/* Moving Stacker Systems for Products */
.products {
position: relative;
overflow: hidden;
}
/* Stock Images for Products Section */
.products::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Stock Image 1 - 2-Level Stacker */
url('data:image/svg+xml,') no-repeat 15% 25% / 500px 350px,
/* Stock Image 2 - Multi-Level Stacker */
url('data:image/svg+xml,') no-repeat 75% 55% / 500px 350px,
/* Stock Image 3 - Industrial Stacker */
url('data:image/svg+xml,') no-repeat 45% 35% / 500px 350px;
opacity: 0.2;
animation: productsStockFloat 40s infinite ease-in-out;
pointer-events: none;
}
@keyframes productsStockFloat {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateY(-25px) rotate(2deg) scale(1.04); }
50% { transform: translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateY(25px) rotate(-2deg) scale(0.96); }
}
.products::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Moving Stacker System 1 - Zigzag Movement */
url('data:image/svg+xml,') no-repeat 0% 20% / 180px 120px,
/* Moving Stacker System 2 - Spiral Movement */
url('data:image/svg+xml,') no-repeat 100% 80% / 180px 120px,
/* Moving Stacker System 3 - Bounce Movement */
url('data:image/svg+xml,') no-repeat 50% 50% / 180px 120px;
opacity: 0.6;
animation:
productsMove1 45s infinite linear,
productsMove2 50s infinite linear reverse,
productsMove3 25s infinite ease-in-out;
pointer-events: none;
}
@keyframes productsMove1 {
0% { transform: translateX(-180px) translateY(0px) rotate(0deg); }
20% { transform: translateX(20vw) translateY(-50px) rotate(3deg); }
40% { transform: translateX(40vw) translateY(0px) rotate(0deg); }
60% { transform: translateX(60vw) translateY(50px) rotate(-3deg); }
80% { transform: translateX(80vw) translateY(0px) rotate(0deg); }
100% { transform: translateX(100vw) translateY(-50px) rotate(3deg); }
}
@keyframes productsMove2 {
0% { transform: translateX(100vw) translateY(100vh) rotate(0deg); }
20% { transform: translateX(80vw) translateY(80vh) rotate(-3deg); }
40% { transform: translateX(60vw) translateY(60vh) rotate(0deg); }
60% { transform: translateX(40vw) translateY(40vh) rotate(3deg); }
80% { transform: translateX(20vw) translateY(20vh) rotate(0deg); }
100% { transform: translateX(-180px) translateY(0vh) rotate(-3deg); }
}
@keyframes productsMove3 {
0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateX(30px) translateY(-40px) rotate(2deg) scale(1.15); }
50% { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateX(-30px) translateY(40px) rotate(-2deg) scale(0.85); }
}
@keyframes productFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-15px) rotate(1deg); }
66% { transform: translateY(10px) rotate(-1deg); }
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.product-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: var(--radius-large);
overflow: hidden;
box-shadow: var(--shadow-medium);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
backdrop-filter: blur(10px);
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-primary);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.product-card:hover::before {
opacity: 0.03;
}
.product-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: var(--shadow-strong);
border-color: var(--primary-cyan);
}
.product-image {
height: 220px;
background: var(--gradient-primary);
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.product-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: imageShine 3s infinite linear;
}
@keyframes imageShine {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}
.product-image i {
font-size: 4.5rem;
color: var(--white);
transition: all 0.3s ease;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
z-index: 1;
position: relative;
}
.product-card:hover .product-image i {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.product-content {
padding: 2rem;
}
.product-content h3 {
color: var(--primary-teal);
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
.product-content p {
color: var(--text-gray);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.product-content ul {
list-style: none;
}
.product-content li {
color: var(--text-gray);
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.product-content li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-cyan);
font-weight: bold;
}
/* Features Section */
.features {
padding: 6rem 0;
background: var(--white);
position: relative;
overflow: hidden;
}
/* Moving Background Elements for Features Section */
.features::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Moving Feature System 1 - Circular Orbit */
url('data:image/svg+xml,') no-repeat 0% 0% / 200px 150px,
/* Moving Feature System 2 - Figure-8 Movement */
url('data:image/svg+xml,') no-repeat 100% 100% / 200px 150px,
/* Moving Feature System 3 - Pulse Movement */
url('data:image/svg+xml,') no-repeat 50% 50% / 200px 150px;
opacity: 0.5;
animation:
featuresMove1 55s infinite linear,
featuresMove2 60s infinite linear reverse,
featuresMove3 35s infinite ease-in-out;
pointer-events: none;
}
/* Stock Images for Features Section */
.features::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Stock Image 1 - Technology Innovation */
url('data:image/svg+xml,') no-repeat 20% 30% / 600px 400px,
/* Stock Image 2 - Quality Assurance */
url('data:image/svg+xml,') no-repeat 70% 50% / 600px 400px,
/* Stock Image 3 - Customer Support */
url('data:image/svg+xml,') no-repeat 45% 40% / 600px 400px;
opacity: 0.15;
animation: featuresStockFloat 45s infinite ease-in-out;
pointer-events: none;
}
@keyframes featuresStockFloat {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateY(-30px) rotate(2.5deg) scale(1.05); }
50% { transform: translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateY(30px) rotate(-2.5deg) scale(0.95); }
}
@keyframes featuresMove1 {
0% { transform: translateX(-200px) translateY(-150px) rotate(0deg); }
25% { transform: translateX(25vw) translateY(25vh) rotate(90deg); }
50% { transform: translateX(50vw) translateY(50vh) rotate(180deg); }
75% { transform: translateX(75vw) translateY(75vh) rotate(270deg); }
100% { transform: translateX(100vw) translateY(100vh) rotate(360deg); }
}
@keyframes featuresMove2 {
0% { transform: translateX(100vw) translateY(100vh) rotate(0deg); }
25% { transform: translateX(75vw) translateY(75vh) rotate(-90deg); }
50% { transform: translateX(50vw) translateY(50vh) rotate(-180deg); }
75% { transform: translateX(25vw) translateY(25vh) rotate(-270deg); }
100% { transform: translateX(-200px) translateY(-150px) rotate(-360deg); }
}
@keyframes featuresMove3 {
0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateX(40px) translateY(-50px) rotate(3deg) scale(1.2); }
50% { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateX(-40px) translateY(50px) rotate(-3deg) scale(0.8); }
}
.features-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
text-align: center;
padding: 2.5rem 1.5rem;
background: var(--light-gray);
border-radius: 20px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
border-color: var(--primary-cyan);
background: var(--white);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 1.5rem;
}
.feature-icon i {
font-size: 2rem;
color: var(--white);
}
.feature-card h3 {
color: var(--primary-teal);
font-size: 1.3rem;
margin-bottom: 1rem;
font-weight: 600;
}
.feature-card p {
color: var(--text-gray);
line-height: 1.6;
}
/* Contact Section */
.contact {
padding: 6rem 0;
background: var(--light-gray);
position: relative;
overflow: hidden;
}
/* Moving Background Elements for Contact Section */
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Moving Contact System 1 - Wave Movement */
url('data:image/svg+xml,') no-repeat 0% 20% / 250px 180px,
/* Moving Contact System 2 - Infinity Movement */
url('data:image/svg+xml,') no-repeat 100% 80% / 250px 180px,
/* Moving Contact System 3 - Spiral Movement */
url('data:image/svg+xml,') no-repeat 50% 50% / 250px 180px;
opacity: 0.4;
animation:
contactMove1 65s infinite linear,
contactMove2 70s infinite linear reverse,
contactMove3 40s infinite ease-in-out;
pointer-events: none;
}
@keyframes contactMove1 {
0% { transform: translateX(-250px) translateY(0px) rotate(0deg); }
20% { transform: translateX(20vw) translateY(-60px) rotate(5deg); }
40% { transform: translateX(40vw) translateY(0px) rotate(0deg); }
60% { transform: translateX(60vw) translateY(60px) rotate(-5deg); }
80% { transform: translateX(80vw) translateY(0px) rotate(0deg); }
100% { transform: translateX(100vw) translateY(-60px) rotate(5deg); }
}
@keyframes contactMove2 {
0% { transform: translateX(100vw) translateY(100vh) rotate(0deg); }
20% { transform: translateX(80vw) translateY(80vh) rotate(-5deg); }
40% { transform: translateX(60vw) translateY(60vh) rotate(0deg); }
60% { transform: translateX(40vw) translateY(40vh) rotate(5deg); }
80% { transform: translateX(20vw) translateY(20vh) rotate(0deg); }
100% { transform: translateX(-250px) translateY(0vh) rotate(-5deg); }
}
@keyframes contactMove3 {
0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateX(50px) translateY(-60px) rotate(4deg) scale(1.25); }
50% { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); }
75% { transform: translateX(-50px) translateY(60px) rotate(-4deg) scale(0.75); }
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--white);
border-radius: 15px;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.contact-item:hover {
transform: translateX(10px);
box-shadow: var(--shadow-hover);
}
.contact-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.contact-icon i {
font-size: 1.5rem;
color: var(--white);
}
.contact-details h4 {
color: var(--primary-teal);
font-weight: 600;
margin-bottom: 0.5rem;
}
.contact-details p {
color: var(--text-gray);
}
/* Contact Form */
.contact-form {
background: var(--white);
padding: 2.5rem;
border-radius: 20px;
box-shadow: var(--shadow);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 2px solid var(--light-gray);
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-cyan);
box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* Footer */
.footer {
background: var(--gradient-dark);
color: var(--white);
padding: 4rem 0 1rem;
position: relative;
overflow: hidden;
border-radius: var(--radius-large) var(--radius-large) 0 0;
margin-top: 4rem;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(0, 188, 212, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 150, 136, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 188, 212, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3,
.footer-section h4 {
color: var(--primary-cyan);
margin-bottom: 1.5rem;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.footer-section h3::after,
.footer-section h4::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 40px;
height: 2px;
background: var(--gradient-primary);
border-radius: 1px;
}
.footer-section p {
color: #ccc;
line-height: 1.6;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #ccc;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
padding: 0.5rem 0;
display: inline-block;
}
.footer-section ul li a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: width 0.3s ease;
border-radius: 1px;
}
.footer-section ul li a:hover {
color: var(--primary-cyan);
transform: translateX(5px);
}
.footer-section ul li a:hover::before {
width: 100%;
}
.footer-section p i {
color: var(--primary-cyan);
margin-right: 0.5rem;
}
/* Quick Links section */
.quick-links-section {
padding: 2rem;
border-radius: 15px;
position: relative;
min-height: 200px;
}
.quick-links-section h4,
.quick-links-section ul,
.quick-links-section li,
.quick-links-section a {
color: #333;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #444;
color: #ccc;
}
/* Responsive Design */
@media (max-width: 768px) {
/* Prevent horizontal scroll and fix overflow issues */
html, body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
/* Improve touch targets */
button,
.btn-primary,
.btn-secondary,
input[type="submit"],
select,
.nav-menu a {
min-height: 44px;
touch-action: manipulation;
}
/* Improve text readability */
body {
font-size: 16px;
line-height: 1.6;
}
/* Better spacing for mobile */
.container {
padding: 0 15px;
max-width: 100%;
overflow-x: hidden;
}
/* Improve card spacing */
.feature-card,
.product-card,
.mv-card,
.safety-item,
.benefit-item {
margin-bottom: 1.5rem;
padding: 1.5rem;
}
.hamburger {
display: flex;
}
.logo-container {
gap: 0.8rem;
}
.logo-image {
width: 40px;
height: 40px;
}
.logo-title {
font-size: 1.5rem;
}
.logo-tagline {
font-size: 0.75rem;
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: var(--white);
width: 100%;
height: calc(100vh - 70px);
text-align: center;
transition: 0.3s ease;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.1);
padding: 2rem 0;
overflow-y: auto;
backdrop-filter: blur(10px);
z-index: 1000;
}
.nav-menu.active {
left: 0;
}
.nav-menu li {
margin: 1rem 0;
}
.nav-menu a {
display: block;
padding: 1rem 2rem;
font-size: 1.1rem;
border-radius: 15px;
margin: 0 1rem;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 188, 212, 0.2);
}
.nav-menu a:hover {
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
color: var(--white);
transform: translateX(10px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.4);
}
.nav-menu a.active {
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
color: var(--white);
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 188, 212, 0.4);
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-buttons {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 100%;
}
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
width: 100%;
max-width: 280px;
text-align: center;
padding: 1rem 1.5rem;
margin: 0 auto;
}
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 10px;
}
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 10px;
}
.products-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 10px;
}
.features-content {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 10px;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
padding: 0 10px;
}
.section-header h2 {
font-size: 2rem;
}
.stacker-animation {
width: 250px;
height: 300px;
}
}
@media (max-width: 480px) {
/* Additional mobile fixes for very small screens */
.container {
padding: 0 10px;
max-width: 100%;
overflow-x: hidden;
}
.hero-content h1 {
font-size: 2rem;
padding: 0 10px;
}
.hero-content p {
font-size: 1rem;
padding: 0 10px;
}
.btn-primary, .btn-secondary {
padding: 1rem 1.5rem;
font-size: 1rem;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
max-width: 100%;
}
.btn-primary i, .btn-secondary i {
font-size: 1.1rem;
}
.section-header h2 {
font-size: 1.8rem;
}
.contact-form {
padding: 1.5rem;
max-width: 100%;
overflow-x: hidden;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
padding: 1rem;
font-size: 1rem;
min-height: 48px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.contact-form textarea {
min-height: 120px;
}
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Smooth Scrolling and Performance Optimizations */
html {
scroll-behavior: smooth;
}
/* Performance optimizations */
* {
box-sizing: border-box;
}
/* Optimize animations */
.feature-card,
.product-card,
.mv-card,
.safety-item,
.benefit-item {
will-change: transform;
transform: translateZ(0);
}
/* Critical rendering optimizations */
body {
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-display: swap;
}
/* Preload critical resources */
html {
font-display: swap;
}
/* Reduce animation complexity for faster rendering */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Loading Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
/* Scroll to Top Button */
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--white);
text-decoration: none;
box-shadow: var(--shadow);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
.scroll-top.show {
opacity: 1;
visibility: visible;
}
.scroll-top:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
/* Page Header */
.page-header {
background: linear-gradient(135deg, var(--light-cyan) 0%, var(--light-teal) 100%);
padding: 8rem 0 4rem;
text-align: center;
position: relative;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.page-header .container {
position: relative;
z-index: 2;
}
.page-header h1 {
font-size: 3rem;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary-teal), var(--primary-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-header p {
font-size: 1.2rem;
color: var(--text-gray);
max-width: 600px;
margin: 0 auto;
}
/* Active Navigation */
.nav-menu a.active {
color: var(--primary-teal);
}
.nav-menu a.active::after {
width: 100%;
}
/* About Page Styles */
.about-page {
padding: 4rem 0;
background: var(--white);
}
.company-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.stat-item {
text-align: center;
padding: 2rem 1rem;
background: var(--light-gray);
border-radius: 15px;
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
background: var(--white);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-teal);
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--text-gray);
font-weight: 500;
}
/* Mission Vision */
.mission-vision {
padding: 4rem 0;
background: var(--light-gray);
}
.mv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 3rem;
}
.mv-card {
background: var(--white);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.mv-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.mv-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 2rem;
}
.mv-icon i {
font-size: 2rem;
color: var(--white);
}
.mv-card h3 {
color: var(--primary-teal);
font-size: 1.5rem;
margin-bottom: 1rem;
}
.mv-card p {
color: var(--text-gray);
line-height: 1.8;
}
/* Products Page Styles */
.products-page {
padding: 4rem 0;
background: var(--white);
}
.product-specs, .product-features {
margin: 1.5rem 0;
}
.product-specs h4, .product-features h4 {
color: var(--primary-teal);
margin-bottom: 1rem;
font-weight: 600;
}
.product-specs ul, .product-features ul {
list-style: none;
}
.product-specs li, .product-features li {
color: var(--text-gray);
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.product-specs li::before, .product-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-cyan);
font-weight: bold;
}
/* Product Comparison */
.product-comparison {
padding: 4rem 0;
background: var(--light-gray);
}
.comparison-table {
overflow-x: auto;
background: var(--white);
border-radius: 20px;
box-shadow: var(--shadow);
}
.comparison-table table {
width: 100%;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 1.5rem;
text-align: left;
border-bottom: 1px solid var(--light-gray);
}
.comparison-table th {
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
color: var(--white);
font-weight: 600;
}
.comparison-table tr:hover {
background: var(--light-gray);
}
/* Custom Solutions */
.custom-solutions {
padding: 4rem 0;
background: var(--white);
}
.custom-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.custom-text h3 {
color: var(--primary-teal);
font-size: 2rem;
margin-bottom: 1.5rem;
}
.custom-text p {
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.8;
}
.custom-text ul {
list-style: none;
margin-bottom: 2rem;
}
.custom-text li {
color: var(--text-gray);
margin-bottom: 0.8rem;
padding-left: 2rem;
position: relative;
}
.custom-text li::before {
content: '→';
position: absolute;
left: 0;
color: var(--primary-cyan);
font-weight: bold;
}
/* Features Page Styles */
.features-page {
padding: 4rem 0;
background: var(--white);
}
.feature-details {
list-style: none;
margin-top: 1rem;
}
.feature-details li {
color: var(--text-gray);
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.feature-details li::before {
content: '•';
position: absolute;
left: 0;
color: var(--primary-cyan);
font-weight: bold;
}
/* Safety Features */
.safety-features {
padding: 4rem 0;
background: var(--light-gray);
}
.safety-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.safety-item {
background: var(--white);
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.safety-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.safety-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 1rem;
}
.safety-icon i {
font-size: 1.5rem;
color: var(--white);
}
.safety-item h4 {
color: var(--primary-teal);
margin-bottom: 1rem;
font-weight: 600;
}
.safety-item p {
color: var(--text-gray);
line-height: 1.6;
}
/* Technology Section */
.technology-section {
padding: 4rem 0;
background: var(--white);
}
.tech-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.tech-text h3 {
color: var(--primary-teal);
font-size: 2rem;
margin-bottom: 1.5rem;
}
.tech-text p {
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.8;
}
.tech-features {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.tech-feature {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.tech-feature i {
font-size: 1.5rem;
color: var(--primary-cyan);
margin-top: 0.2rem;
}
.tech-feature h4 {
color: var(--primary-teal);
margin-bottom: 0.5rem;
font-weight: 600;
}
.tech-feature p {
color: var(--text-gray);
margin: 0;
line-height: 1.6;
}
/* Benefits Section */
.benefits-section {
padding: 4rem 0;
background: var(--light-gray);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.benefit-item {
background: var(--white);
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.benefit-item h4 {
color: var(--primary-teal);
margin-bottom: 1rem;
font-weight: 600;
}
.benefit-item p {
color: var(--text-gray);
line-height: 1.6;
}
/* Contact Page Styles */
.contact-page {
padding: 4rem 0;
background: var(--white);
}
.contact-info h2 {
color: var(--primary-teal);
font-size: 2rem;
margin-bottom: 1rem;
}
.contact-info > p {
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.8;
}
.contact-details span {
color: var(--text-gray);
font-size: 0.9rem;
font-style: italic;
}
.contact-form h2 {
color: var(--primary-teal);
font-size: 2rem;
margin-bottom: 1rem;
}
.contact-form > p {
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.8;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--dark-gray);
font-weight: 500;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
color: var(--text-gray);
}
.checkbox-label input[type="checkbox"] {
width: auto;
margin: 0;
}
/* Service Areas */
.service-areas {
padding: 4rem 0;
background: var(--light-gray);
}
.areas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.area-item {
background: var(--white);
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.area-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.area-item h4 {
color: var(--primary-teal);
margin-bottom: 1rem;
font-weight: 600;
}
.area-item ul {
list-style: none;
}
.area-item li {
color: var(--text-gray);
margin-bottom: 0.5rem;
padding-left: 1rem;
position: relative;
}
.area-item li::before {
content: '📍';
position: absolute;
left: 0;
}
/* FAQ Section */
.faq-section {
padding: 4rem 0;
background: var(--white);
}
.faq-content {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--light-gray);
padding: 2rem;
border-radius: 15px;
margin-bottom: 1.5rem;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.faq-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.faq-item h4 {
color: var(--primary-teal);
margin-bottom: 1rem;
font-weight: 600;
}
.faq-item p {
color: var(--text-gray);
line-height: 1.6;
margin: 0;
}
/* Enhanced Features - Popups, Discounts, Notifications */
/* Popup System */
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.popup-container.active {
opacity: 1;
visibility: visible;
}
.popup-content {
background: var(--white);
border-radius: 20px;
padding: 2rem;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
transform: scale(0.7);
transition: transform 0.3s ease;
}
.popup-container.active .popup-content {
transform: scale(1);
}
.popup-close {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-gray);
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.popup-close:hover {
background: var(--light-gray);
color: var(--dark-gray);
}
/* Quote Popup */
.quote-popup {
text-align: left;
}
.quote-header {
text-align: center;
margin-bottom: 2rem;
}
.quote-header i {
font-size: 2.5rem;
color: var(--primary-cyan);
margin-bottom: 1rem;
}
.quote-header h2 {
color: var(--primary-teal);
font-size: 1.8rem;
}
.product-info {
background: var(--light-gray);
padding: 1.5rem;
border-radius: 10px;
margin-bottom: 2rem;
text-align: center;
}
.product-info h3 {
color: var(--primary-teal);
margin-bottom: 0.5rem;
}
/* Floating Discount Banner */
.floating-discount-banner {
position: fixed;
bottom: 20px;
left: 20px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
color: var(--white);
padding: 1rem 1.5rem;
border-radius: 50px;
box-shadow: var(--shadow-hover);
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.floating-discount-banner.show {
transform: translateX(0);
}
.banner-content {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.banner-content i {
font-size: 1.5rem;
}
.banner-btn {
background: var(--white);
color: var(--primary-teal);
border: none;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.banner-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Notification System */
.notification {
position: fixed;
top: 100px;
right: 20px;
background: var(--white);
border-radius: 10px;
box-shadow: var(--shadow-hover);
z-index: 10001;
transform: translateX(400px);
transition: transform 0.3s ease;
max-width: 350px;
border-left: 4px solid var(--primary-cyan);
}
.notification.show {
transform: translateX(0);
}
.notification-content {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
}
.notification-content i {
font-size: 1.2rem;
color: var(--primary-cyan);
}
.notification-content span {
flex: 1;
color: var(--dark-gray);
}
.notification-content button {
background: none;
border: none;
color: var(--text-gray);
cursor: pointer;
padding: 0.25rem;
border-radius: 50%;
transition: all 0.3s ease;
}
.notification-content button:hover {
background: var(--light-gray);
color: var(--dark-gray);
}
.notification-success {
border-left-color: #4CAF50;
}
.notification-success .notification-content i {
color: #4CAF50;
}
.notification-error {
border-left-color: #f44336;
}
.notification-error .notification-content i {
color: #f44336;
}
.notification-warning {
border-left-color: #ff9800;
}
.notification-warning .notification-content i {
color: #ff9800;
}
/* Enhanced Form Styling */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
border-color: #f44336 !important;
box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1) !important;
}
.field-error {
color: #f44336;
font-size: 0.8rem;
margin-top: 0.25rem;
}
/* Discount Buttons on Product Cards */
.product-card {
position: relative;
}
.discount-btn {
position: absolute;
bottom: 1rem;
right: 1rem;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
color: var(--white);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow);
opacity: 0;
transform: translateY(20px);
}
.product-card:hover .discount-btn {
opacity: 1;
transform: translateY(0);
}
.discount-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* Loading Animation - Unique Stacker Theme */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s ease;
}
.page-loader.fade-out {
opacity: 0;
}
.loader-content {
text-align: center;
color: var(--white);
}
.loader-content h2 {
font-size: 2rem;
font-weight: 700;
margin: 1rem 0 0.5rem 0;
animation: textGlow 2s ease-in-out infinite;
}
.loader-content p {
font-size: 1rem;
opacity: 0.9;
margin: 0;
}
/* Unique Stacker Animation */
.stacker-animation {
position: relative;
width: 200px;
height: 120px;
margin: 0 auto 2rem;
}
.stacker-platform {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 8px;
background: rgba(255, 255, 255, 0.8);
border-radius: 4px;
animation: platformMove 3s ease-in-out infinite;
}
.stacker-car {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 30px;
background: rgba(255, 255, 255, 0.9);
border-radius: 6px 6px 0 0;
animation: carLift 3s ease-in-out infinite;
}
.stacker-car::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 12px;
height: 8px;
background: rgba(0, 0, 0, 0.3);
border-radius: 2px;
}
.stacker-car::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 12px;
height: 8px;
background: rgba(0, 0, 0, 0.3);
border-radius: 2px;
}
.stacker-lift {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: rgba(255, 255, 255, 0.6);
animation: liftMove 3s ease-in-out infinite;
}
@keyframes platformMove {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-40px); }
}
@keyframes carLift {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-40px); }
}
@keyframes liftMove {
0%, 100% { transform: translateX(-50%) scaleY(1); }
50% { transform: translateX(-50%) scaleY(0.6); }
}
@keyframes textGlow {
0%, 100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); }
}
/* Enhanced Navbar */
.navbar.scrolled {
background: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 8px 32px rgba(0, 188, 212, 0.2) !important;
border-bottom: 2px solid rgba(0, 188, 212, 0.3) !important;
backdrop-filter: blur(20px) !important;
transform: translateY(0) !important;
will-change: transform;
}
.navbar.scrolled .logo-image {
animation: logoSpin 2s ease-in-out infinite;
}
@keyframes logoSpin {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(5deg) scale(1.05); }
}
/* Floating particles in navbar */
.navbar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(0, 188, 212, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 150, 136, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(0, 188, 212, 0.05) 0%, transparent 50%);
animation: particleFloat 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes particleFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(180deg); }
}
/* Navbar entrance animation */
.navbar {
animation: navbarEntrance 1s ease-out;
}
@keyframes navbarEntrance {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Ripple Effect */
.btn-primary, .btn-secondary {
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
/* Progress Bars */
.stat-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-cyan), var(--primary-teal));
width: 0;
transition: width 1s ease;
border-radius: 0 0 15px 15px;
}
/* Tooltips */
.tooltip {
position: absolute;
background: var(--dark-gray);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 0.9rem;
z-index: 1000;
pointer-events: none;
white-space: nowrap;
}
.tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--dark-gray);
}
/* Enhanced Animations with Performance Optimization */
.fade-in-up {
animation: fadeInUp 0.8s ease-out;
will-change: transform, opacity;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design for New Pages */
@media (max-width: 768px) {
.page-header h1 {
font-size: 2.5rem;
}
.mv-grid {
grid-template-columns: 1fr;
}
.custom-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.tech-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.form-row {
grid-template-columns: 1fr;
}
.company-stats {
grid-template-columns: repeat(2, 1fr);
}
.comparison-table {
font-size: 0.9rem;
}
.comparison-table th,
.comparison-table td {
padding: 1rem 0.5rem;
}
.popup-content {
margin: 1rem;
padding: 1.5rem;
max-height: 85vh;
overflow-y: auto;
border-radius: 15px;
}
.discount-popup,
.quote-popup {
max-width: 95%;
margin: 0 auto;
}
.discount-form form,
.quote-content form {
gap: 1rem;
}
.discount-form input,
.quote-content input,
.discount-form select,
.quote-content select,
.discount-form textarea,
.quote-content textarea {
padding: 1rem;
font-size: 1rem;
min-height: 48px;
}
/* Floating discount banner responsive styles */
.floating-discount-banner {
bottom: 10px;
left: 10px;
padding: 0.8rem 1rem;
border-radius: 25px;
}
.banner-content {
gap: 0.5rem;
}
.banner-content h3 {
font-size: 1rem;
}
.banner-content p {
font-size: 0.8rem;
}
.banner-btn {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.notification {
right: 10px;
left: 10px;
max-width: none;
bottom: 80px;
border-radius: 15px;
padding: 1rem;
}
.notification-content {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.notification-content span {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
/* Ultra-compact mobile optimizations */
.container {
padding: 0 10px;
}
.page-header h1 {
font-size: 1.8rem;
}
.hero-content h1 {
font-size: 1.8rem;
}
.hero-content p {
font-size: 0.95rem;
}
.company-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
.mv-card {
padding: 1.5rem 1rem;
}
.safety-grid {
grid-template-columns: 1fr;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.areas-grid {
grid-template-columns: 1fr;
}
.loader-logo h2 {
font-size: 1.8rem;
}
/* Compact form elements */
.contact-form,
.discount-form,
.quote-content {
padding: 1rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea,
.quote-content input,
.quote-content select,
.quote-content textarea {
padding: 0.8rem;
font-size: 0.95rem;
}
/* Compact buttons */
.btn-primary,
.btn-secondary {
padding: 0.8rem 1.2rem;
font-size: 0.95rem;
}
/* Compact popups */
.popup-content {
margin: 0.5rem;
padding: 1rem;
border-radius: 10px;
}
/* Compact floating banner */
.floating-discount-banner {
bottom: 5px;
left: 5px;
right: 5px;
padding: 0.6rem 0.8rem;
border-radius: 20px;
max-width: calc(100vw - 10px);
}
.banner-content {
flex-direction: column;
gap: 0.3rem;
text-align: center;
}
.banner-content h3 {
font-size: 0.9rem;
margin: 0;
}
.banner-content p {
font-size: 0.7rem;
margin: 0;
}
.banner-btn {
padding: 0.3rem 0.6rem;
font-size: 0.7rem;
width: 100%;
max-width: 120px;
}
/* Compact notifications */
.notification {
bottom: 70px;
padding: 0.8rem;
border-radius: 10px;
}
.notification-content span {
font-size: 0.9rem;
}
}
/* Showcase Page Styles */
.showcase-section {
padding: 4rem 0;
background: var(--white);
}
.showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.showcase-card {
background: var(--light-gray);
padding: 2.5rem;
border-radius: 20px;
text-align: center;
box-shadow: var(--shadow);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.showcase-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
border-color: var(--primary-cyan);
background: var(--white);
}
.showcase-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 1.5rem;
}
.showcase-icon i {
font-size: 2rem;
color: var(--white);
}
.showcase-card h3 {
color: var(--primary-teal);
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
.showcase-card p {
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.6;
}
.notification-buttons {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-success {
background: #4CAF50;
color: var(--white);
border: none;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-error {
background: #f44336;
color: var(--white);
border: none;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-warning {
background: #ff9800;
color: var(--white);
border: none;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-success:hover, .btn-error:hover, .btn-warning:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.demo-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.device-demo {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.device-icon {
text-align: center;
color: var(--primary-teal);
}
.device-icon i {
font-size: 2rem;
margin-bottom: 0.5rem;
display: block;
}
.device-icon span {
font-size: 0.9rem;
font-weight: 500;
}
/* Animation Showcase */
.animation-showcase {
padding: 4rem 0;
background: var(--light-gray);
}
.animation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.animation-card {
background: var(--white);
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: var(--shadow);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.animation-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.animation-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 1rem;
}
.animation-icon i {
font-size: 1.5rem;
color: var(--white);
}
.animation-card h4 {
color: var(--primary-teal);
margin-bottom: 0.5rem;
font-weight: 600;
}
.animation-card p {
color: var(--text-gray);
font-size: 0.9rem;
}
/* Form Demo Section */
.form-demo-section {
padding: 4rem 0;
background: var(--white);
}
/* Mobile-specific improvements */
@media (max-width: 768px) {
/* Prevent horizontal scroll */
html, body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
/* Optimize for mobile performance */
* {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
/* Improve touch targets */
a, button, input, select, textarea {
-webkit-tap-highlight-color: rgba(0, 150, 136, 0.1);
}
/* Fix any potential overflow issues */
section, div, article, aside {
max-width: 100%;
overflow-x: hidden;
}
/* Better table responsiveness */
.comparison-table {
display: block;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
}
/* Improve image responsiveness */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Fix any text overflow */
h1, h2, h3, h4, h5, h6, p, span, div {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Better spacing for sections */
section {
padding: 3rem 0;
}
/* Improve grid gaps */
.features-grid,
.products-grid,
.mv-grid,
.safety-grid,
.benefits-grid,
.areas-grid {
gap: 1.5rem;
}
/* Better card shadows for mobile */
.feature-card,
.product-card,
.mv-card,
.safety-item,
.benefit-item {
box-shadow: 0 2px 10px rgba(0, 188, 212, 0.1);
}
/* Improve scroll-to-top button */
.scroll-to-top {
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
.form-demo {
max-width: 800px;
margin: 0 auto;
}
.demo-form {
background: var(--light-gray);
padding: 2.5rem;
border-radius: 20px;
box-shadow: var(--shadow);
}
/* Responsive Design for Showcase */
@media (max-width: 768px) {
.showcase-grid {
grid-template-columns: 1fr;
}
.animation-grid {
grid-template-columns: repeat(2, 1fr);
}
.demo-stats {
grid-template-columns: 1fr;
}
.device-demo {
gap: 1rem;
}
.notification-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.notification-buttons button {
width: 100%;
max-width: 250px;
padding: 1rem 1.5rem;
font-size: 1rem;
}
.showcase-card {
padding: 2rem 1.5rem;
}
.showcase-card button {
width: 100%;
max-width: 250px;
margin: 0 auto;
}
.demo-form {
padding: 1.5rem;
}
.demo-form input,
.demo-form select,
.demo-form textarea {
padding: 1rem;
font-size: 1rem;
min-height: 48px;
}
}
@media (max-width: 480px) {
.animation-grid {
grid-template-columns: 1fr;
}
.showcase-card {
padding: 2rem 1.5rem;
}
.demo-form {
padding: 1.5rem;
}
}
/* Responsive Design for Floating Navigation */
@media (max-width: 768px) {
.floating-nav {
top: 15px;
right: 15px;
z-index: 999;
flex-direction: column;
gap: 10px;
}
.nav-toggle {
width: 50px;
height: 50px;
}
.nav-circle {
width: 60px;
height: 300px;
padding: 15px 0;
flex-direction: column;
justify-content: space-between;
}
.nav-item {
width: 50px;
height: 50px;
}
.nav-item i {
font-size: 1.2rem;
}
.floating-logo {
top: 20px;
left: 20px;
padding: 10px 15px;
z-index: 999;
}
.floating-logo .logo-image {
width: 35px;
height: 35px;
}
.floating-logo .logo-title {
font-size: 1.2rem;
}
.floating-logo .logo-tagline {
font-size: 0.6rem;
}
/* Fix floating discount banner positioning */
.floating-discount-banner {
bottom: 10px;
left: 10px;
right: 10px;
max-width: calc(100vw - 20px);
z-index: 998;
}
}
@media (max-width: 480px) {
.floating-nav {
top: 10px;
right: 10px;
z-index: 999;
flex-direction: column;
gap: 8px;
}
.nav-toggle {
width: 45px;
height: 45px;
}
.nav-circle {
width: 50px;
height: 250px;
padding: 10px 0;
flex-direction: column;
justify-content: space-between;
}
.nav-item {
width: 45px;
height: 45px;
}
.nav-item i {
font-size: 1rem;
}
.floating-logo {
top: 15px;
left: 15px;
padding: 8px 12px;
z-index: 999;
}
.floating-logo .logo-image {
width: 30px;
height: 30px;
}
.floating-logo .logo-title {
font-size: 1rem;
}
.floating-logo .logo-tagline {
font-size: 0.5rem;
}
/* Ultra-compact floating banner for very small screens */
.floating-discount-banner {
bottom: 5px;
left: 5px;
right: 5px;
max-width: calc(100vw - 10px);
z-index: 998;
}
}
/* Responsive Background Video */
@media (max-width: 768px) {
.background-video {
opacity: 0.75 !important;
filter: brightness(0.8) contrast(1.2) !important;
}
}
@media (max-width: 480px) {
.background-video {
opacity: 0.8 !important;
filter: brightness(0.85) contrast(1.3) !important;
}
}