/* AquaCare Patna - RO Service Website CSS - Modern Design 2.0 */
:root {
/* Modern Color Palette - Enhanced */
--primary-color: #2563eb;
--primary-dark: #1e40af;
--primary-light: #3b82f6;
--secondary-color: #0891b2;
--accent-color: #06b6d4;
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
--gradient-card: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
/* Neutral Colors */
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
/* Status Colors */
--success: #10b981;
--success-light: #34d399;
--warning: #f59e0b;
--warning-light: #fbbf24;
--danger: #ef4444;
--danger-light: #f87171;
--info: #3b82f6;
/* Background Colors */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-accent: #f0f9ff;
--bg-dark: #1e293b;
/* Text Colors */
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-light: #94a3b8;
--text-white: #ffffff;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
/* Shadows - Enhanced */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
--shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.2);
--shadow-glow: 0 0 40px rgba(102, 126, 234, 0.4);
--shadow-card: 0 8px 32px rgba(31, 38, 135, 0.15);
--shadow-hover: 0 12px 48px rgba(31, 38, 135, 0.25);
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-2xl: 4rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-primary);
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
z-index: -1;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
color: var(--text-primary);
}
h1 { font-size: 2.5rem; margin-bottom: var(--spacing-md); }
h2 { font-size: 2.25rem; margin-bottom: var(--spacing-md); }
h3 { font-size: 1.875rem; margin-bottom: var(--spacing-sm); }
h4 { font-size: 1.5rem; margin-bottom: var(--spacing-sm); }
h5 { font-size: 1.25rem; margin-bottom: var(--spacing-xs); }
h6 { font-size: 1.125rem; margin-bottom: var(--spacing-xs); }
p {
margin-bottom: var(--spacing-sm);
color: var(--text-secondary);
}
a {
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--primary-dark);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-sm) var(--spacing-lg);
border: none;
border-radius: var(--radius-lg);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-md);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-primary {
background: var(--gradient-primary);
color: var(--text-white);
}
.btn-primary:hover {
background: var(--gradient-secondary);
}
.btn-secondary {
background: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
background: var(--primary-color);
color: var(--text-white);
}
.btn-success {
background: var(--success);
color: var(--text-white);
}
.btn-success:hover {
background: var(--success-light);
}
.btn-danger {
background: var(--danger);
color: var(--text-white);
}
.btn-danger:hover {
background: var(--danger-light);
}
.btn-lg {
padding: var(--spacing-md) var(--spacing-xl);
font-size: 1.125rem;
}
.btn-sm {
padding: var(--spacing-xs) var(--spacing-md);
font-size: 0.875rem;
}
/* Header Styles - Enhanced Modern Design */
.header {
background: var(--gradient-primary);
color: var(--text-white);
padding: var(--spacing-md) 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-xl);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-glass);
backdrop-filter: blur(20px);
z-index: -1;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-md);
}
.logo {
display: flex;
align-items: center;
gap: var(--spacing-sm);
text-decoration: none;
color: var(--text-white);
transition: all 0.3s ease;
}
.logo:hover {
transform: scale(1.02);
}
.logo-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.logo-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}
.logo:hover .logo-icon::before {
opacity: 1;
animation: shimmer 0.5s ease;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.logo-text {
font-size: 1.75rem;
font-weight: 800;
line-height: 1.2;
}
.logo-text span {
color: var(--accent-color);
font-weight: 900;
}
.header-actions {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.contact-info {
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.phone-number, .whatsapp-btn {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-2xl);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.phone-number {
background: rgba(255, 255, 255, 0.15);
color: var(--text-white);
}
.whatsapp-btn {
background: var(--success);
color: var(--text-white);
border-color: var(--success);
}
.phone-number:hover, .whatsapp-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.phone-number:hover {
background: rgba(255, 255, 255, 0.25);
}
.whatsapp-btn:hover {
background: var(--success-light);
border-color: var(--success-light);
}
.phone-number .icon, .whatsapp-btn .icon {
font-size: 1.125rem;
}
.phone-number .text, .whatsapp-btn .text {
font-size: 0.875rem;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.3s ease;
}
.mobile-menu-toggle:hover {
background: rgba(255, 255, 255, 0.25);
}
.hamburger-line {
width: 20px;
height: 2px;
background: var(--text-white);
margin: 2px 0;
transition: all 0.3s ease;
border-radius: var(--radius-sm);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Navigation */
.nav {
background: var(--white);
box-shadow: var(--shadow-md);
position: sticky;
top: 86px;
z-index: 999;
border-bottom: 1px solid var(--gray-200);
}
.nav-wrapper {
position: relative;
}
.nav-list {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) 0;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-md) var(--spacing-lg);
text-decoration: none;
color: var(--text-secondary);
font-weight: 500;
font-size: 0.9rem;
border-radius: var(--radius-lg);
transition: all 0.3s ease;
position: relative;
white-space: nowrap;
}
.nav-link:hover {
color: var(--primary-color);
background: var(--bg-accent);
transform: translateY(-1px);
}
.nav-link.active {
color: var(--primary-color);
background: var(--bg-accent);
font-weight: 600;
}
.nav-icon {
font-size: 1rem;
}
.nav-text {
font-size: 0.9rem;
}
/* Dropdown Menu */
.dropdown {
position: relative;
}
.dropdown-toggle {
cursor: pointer;
}
.dropdown-arrow {
font-size: 0.7rem;
margin-left: var(--spacing-xs);
transition: transform 0.3s ease;
}
.dropdown:hover .dropdown-arrow {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
border: 1px solid var(--gray-200);
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
padding: var(--spacing-sm) 0;
margin-top: var(--spacing-xs);
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.dropdown-link {
display: block;
padding: var(--spacing-sm) var(--spacing-lg);
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.dropdown-link:hover {
color: var(--primary-color);
background: var(--bg-accent);
padding-left: var(--spacing-xl);
}
.dropdown-link::before {
content: '';
position: absolute;
left: var(--spacing-md);
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: var(--primary-color);
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
}
.dropdown-link:hover::before {
opacity: 1;
}
/* CTA Navigation Item */
.nav-cta {
background: var(--gradient-primary);
color: var(--text-white) !important;
padding: var(--spacing-sm) var(--spacing-lg) !important;
border-radius: var(--radius-xl);
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: var(--spacing-xs);
min-height: 44px;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.nav-cta:hover {
background: var(--gradient-secondary);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
color: var(--text-white) !important;
}
.nav-cta .nav-icon,
.nav-cta .nav-text {
color: var(--text-white) !important;
transition: all 0.3s ease;
}
/* Mobile Navigation Overlay */
.mobile-nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 998;
}
.mobile-nav-overlay.active {
opacity: 1;
visibility: visible;
}
/* Hero Section - Enhanced Modern Design */
.hero {
background: linear-gradient(135deg, #1a237e 0%, #283593 25%, #3949ab 50%, #5e35b1 75%, #7e57c2 100%);
background-size: cover;
background-position: center;
padding: var(--spacing-2xl) 0;
text-align: center;
color: var(--text-white);
position: relative;
overflow: hidden;
min-height: 95vh;
display: flex;
align-items: center;
}
/* Enhanced background overlay for better text visibility */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0.4) 100%);
z-index: 1;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.15;
animation: float 20s ease-in-out infinite;
z-index: 2;
}
.hero .container {
position: relative;
z-index: 3;
}
.hero h1 {
font-size: 4.5rem;
font-weight: 900;
margin-bottom: var(--spacing-lg);
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2);
animation: fadeInUp 0.8s ease-out;
background: linear-gradient(45deg, #ffffff, #f0f0f0, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
line-height: 1.1;
}
.hero h1::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
border-radius: 2px;
animation: expandWidth 1s ease-out 0.5s both;
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}
.hero p {
font-size: 1.5rem;
margin-bottom: var(--spacing-xl);
max-width: 800px;
margin-left: auto;
margin-right: auto;
opacity: 1;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
animation: fadeInUp 0.8s ease-out 0.2s both;
line-height: 1.6;
font-weight: 500;
background: rgba(255, 255, 255, 0.1);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-xl);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cta-button {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
color: #1a237e;
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--radius-2xl);
text-decoration: none;
font-weight: 800;
font-size: 1.2rem;
transition: all 0.4s ease;
box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
animation: fadeInUp 0.8s ease-out 0.4s both;
backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #fff, #ffd700);
transition: left 0.4s ease;
z-index: -1;
}
.cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 48px rgba(255, 215, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
color: #1a237e;
border-color: #ffd700;
}
.cta-button span {
position: relative;
z-index: 2;
}
@keyframes expandWidth {
0% { width: 0; }
100% { width: 120px; }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cta-button:hover::before {
left: 0;
}
/* Services Section */
.services {
padding: var(--spacing-2xl) 0;
background: var(--bg-primary);
}
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 800;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--gradient-primary);
margin: var(--spacing-md) auto 0;
border-radius: var(--radius-sm);
}
.section-subtitle {
text-align: center;
font-size: 1.25rem;
margin-bottom: var(--spacing-xl);
color: var(--text-secondary);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.service-card {
background: var(--gradient-card);
backdrop-filter: blur(20px);
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
text-align: center;
box-shadow: var(--shadow-card);
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.service-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.service-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: var(--shadow-hover);
border-color: var(--primary-color);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover::after {
opacity: 1;
}
.service-icon {
width: 100px;
height: 100px;
margin: 0 auto var(--spacing-md);
background: var(--gradient-primary);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--text-white);
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: var(--shadow-xl);
}
.service-card:hover .service-icon::before {
opacity: 1;
animation: shimmer 0.5s ease;
}
.service-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.service-card p {
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
line-height: 1.6;
}
.service-card .cta-button {
background: var(--gradient-primary);
color: var(--text-white);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-lg);
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
}
.service-card .cta-button:hover {
background: var(--gradient-secondary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Features Section */
.features {
padding: var(--spacing-2xl) 0;
background: var(--bg-secondary);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.feature-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
background: var(--gradient-card);
backdrop-filter: blur(20px);
padding: var(--spacing-lg);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.feature-item:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: var(--shadow-hover);
border-color: var(--primary-color);
}
.feature-item:hover::before {
opacity: 1;
}
.feature-icon {
min-width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);
font-size: 1.5rem;
font-weight: 700;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}
.feature-item:hover .feature-icon {
background: var(--gradient-secondary);
transform: scale(1.1) rotate(5deg);
box-shadow: var(--shadow-xl);
}
.feature-item:hover .feature-icon::before {
opacity: 1;
animation: shimmer 0.5s ease;
}
.feature-content h4 {
margin-bottom: var(--spacing-xs);
color: var(--text-primary);
font-weight: 700;
font-size: 1.25rem;
}
.feature-content p {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.6;
}
/* Brands Section */
.brands {
padding: var(--spacing-2xl) 0;
background: var(--bg-primary);
}
.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-xl);
}
.brand-card {
background: var(--gradient-card);
backdrop-filter: blur(20px);
padding: var(--spacing-lg);
border-radius: var(--radius-xl);
text-align: center;
box-shadow: var(--shadow-card);
transition: all 0.3s ease;
text-decoration: none;
color: var(--text-primary);
border: 2px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.brand-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-primary);
opacity: 0;
transition: opacity 0.3s ease;
}
.brand-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.brand-card:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: var(--shadow-hover);
border-color: var(--primary-color);
}
.brand-card:hover::before {
opacity: 0.1;
}
.brand-card:hover::after {
opacity: 1;
}
.brand-logo {
font-size: 1.75rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: var(--spacing-xs);
position: relative;
z-index: 1;
}
.brand-card p {
font-weight: 600;
color: var(--text-secondary);
margin: 0;
position: relative;
z-index: 1;
}
/* Contact Form */
.contact-section {
padding: var(--spacing-2xl) 0;
background: var(--gradient-primary);
color: var(--text-white);
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.contact-section .container {
position: relative;
z-index: 1;
}
.contact-form {
max-width: 700px;
margin: 0 auto;
background: var(--gradient-card);
backdrop-filter: blur(20px);
padding: var(--spacing-xl);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.contact-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
pointer-events: none;
}
.form-group {
margin-bottom: var(--spacing-lg);
}
.form-group label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 600;
color: var(--text-primary);
font-size: 0.875rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--spacing-md);
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
background: var(--white);
color: var(--text-primary);
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-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
background: var(--bg-primary);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.submit-btn {
width: 100%;
padding: var(--spacing-md);
background: var(--gradient-primary);
color: var(--text-white);
border: none;
border-radius: var(--radius-lg);
font-size: 1.125rem;
font-weight: 700;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--gradient-secondary);
transition: left 0.4s ease;
}
.submit-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: var(--shadow-lg);
}
.submit-btn:hover::before {
left: 0;
}
.submit-btn:active {
transform: translateY(0) scale(0.98);
}
/* Footer */
.footer {
background: var(--gray-900);
color: var(--text-white);
padding: var(--spacing-2xl) 0 var(--spacing-lg);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--gradient-primary);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.footer-section h3 {
margin-bottom: var(--spacing-md);
color: var(--accent-color);
font-size: 1.25rem;
font-weight: 700;
position: relative;
}
.footer-section h3::after {
content: '';
display: block;
width: 40px;
height: 3px;
background: var(--accent-color);
margin: var(--spacing-xs) 0 0;
border-radius: var(--radius-sm);
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section ul li {
margin-bottom: var(--spacing-xs);
}
.footer-section a {
color: var(--text-light);
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: 500;
}
.footer-section a:hover {
color: var(--accent-color);
transform: translateX(4px);
}
.footer-bottom {
text-align: center;
padding-top: var(--spacing-lg);
border-top: 1px solid var(--gray-700);
color: var(--text-light);
}
.footer-bottom p {
margin-bottom: var(--spacing-xs);
}
.footer-bottom a {
color: var(--accent-color);
font-weight: 600;
}
/* Tablet Responsive */
@media (max-width: 1024px) {
.nav-cta {
padding: var(--spacing-sm) var(--spacing-md) !important;
font-size: 0.95rem;
margin: var(--spacing-sm);
min-height: 42px;
}
.nav-cta .nav-icon {
font-size: 1rem;
}
.nav-cta .nav-text {
font-size: 0.95rem;
}
}
/* Mobile Responsive - Enhanced */
@media (max-width: 768px) {
.container {
padding: 0 var(--spacing-sm);
}
/* Header Mobile Styles - Enhanced */
.header-content {
gap: var(--spacing-sm);
padding: var(--spacing-sm) 0;
}
.logo-text {
font-size: 1.25rem;
line-height: 1.1;
}
.logo-icon {
width: 35px;
height: 35px;
font-size: 1.1rem;
}
.contact-info {
display: none;
}
.mobile-menu-toggle {
display: flex;
width: 35px;
height: 35px;
}
.hamburger-line {
width: 18px;
height: 2px;
margin: 1.5px 0;
}
/* Navigation Mobile Styles - Enhanced */
.nav {
position: fixed;
top: 0;
right: -100%;
width: 85%;
max-width: 320px;
height: 100vh;
background: var(--gradient-card);
backdrop-filter: blur(20px);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9999;
overflow-y: auto;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.nav.active {
right: 0;
}
.nav-wrapper {
padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
height: 100%;
position: relative;
}
.nav-list {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
margin: 0;
list-style: none;
}
.nav-item {
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
position: relative;
margin-bottom: 0;
}
.nav-item:last-child {
border-bottom: none;
}
.nav-link {
padding: var(--spacing-md) var(--spacing-sm);
border-radius: var(--radius-lg);
justify-content: flex-start;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: var(--spacing-md);
width: 100%;
text-decoration: none;
color: var(--text-secondary);
background: transparent;
border: 1px solid transparent;
}
.nav-link:hover {
background: var(--gradient-primary);
color: var(--text-white);
transform: translateX(4px);
border-color: rgba(255, 255, 255, 0.2);
}
.nav-link.active {
background: var(--gradient-primary);
color: var(--text-white);
font-weight: 600;
border-left: 4px solid var(--accent-color);
box-shadow: var(--shadow-md);
}
.nav-icon {
font-size: 1.1rem;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.nav-text {
font-size: 0.95rem;
flex-grow: 1;
}
/* Mobile Dropdown - Enhanced */
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: rgba(102, 126, 234, 0.05);
margin: var(--spacing-xs) 0 0;
padding: 0;
display: none;
border-radius: var(--radius-md);
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(102, 126, 234, 0.1);
}
.dropdown.active .dropdown-menu {
display: block;
max-height: 400px;
margin-top: var(--spacing-xs);
}
.dropdown-link {
padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
font-size: 0.85rem;
color: var(--text-secondary);
text-decoration: none;
display: block;
transition: all 0.3s ease;
border-left: 3px solid transparent;
background: transparent;
}
.dropdown-link:hover {
background: rgba(102, 126, 234, 0.1);
color: var(--primary-color);
border-left-color: var(--primary-color);
padding-left: var(--spacing-xl);
}
.dropdown-arrow {
display: inline-block;
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.dropdown.active .dropdown-arrow {
transform: rotate(180deg);
}
/* Mobile CTA - Enhanced */
.nav-cta {
margin: var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
background: var(--gradient-secondary);
border-radius: var(--radius-xl);
justify-content: center;
padding: var(--spacing-md) var(--spacing-lg) !important;
font-size: 1rem;
font-weight: 700;
color: var(--text-white) !important;
box-shadow: var(--shadow-lg);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
min-height: 44px;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.3s ease;
}
.nav-cta:hover {
background: var(--gradient-primary);
transform: translateY(-2px) scale(1.02);
box-shadow: var(--shadow-xl);
color: var(--text-white) !important;
}
.nav-cta::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: left 0.3s ease;
}
.nav-cta:hover::before {
left: 0;
}
.nav-cta .nav-icon,
.nav-cta .nav-text {
color: var(--text-white) !important;
}
/* Mobile Navigation Overlay - Enhanced */
.mobile-nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 9998;
}
.mobile-nav-overlay.active {
opacity: 1;
visibility: visible;
}
/* Close button for mobile menu - Enhanced */
.nav-wrapper::before {
content: '✕';
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
font-size: 1.25rem;
color: var(--text-secondary);
cursor: pointer;
z-index: 10000;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
border: 1px solid rgba(102, 126, 234, 0.2);
box-shadow: var(--shadow-md);
}
.nav-wrapper::before:hover {
background: var(--gradient-primary);
color: var(--text-white);
transform: scale(1.1);
box-shadow: var(--shadow-lg);
}
/* Footer Mobile - Enhanced */
.footer-content {
grid-template-columns: 1fr;
text-align: center;
gap: var(--spacing-xl);
padding: var(--spacing-md) 0;
}
.footer-section {
padding: var(--spacing-md);
background: var(--gradient-card);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-md);
}
.footer-section h3 {
font-size: 1.1rem;
margin-bottom: var(--spacing-md);
color: var(--primary-color);
position: relative;
}
.footer-section h3::after {
content: '';
display: block;
width: 40px;
height: 3px;
background: var(--gradient-primary);
margin: var(--spacing-xs) auto 0;
border-radius: var(--radius-sm);
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section ul li {
margin-bottom: var(--spacing-xs);
padding: var(--spacing-xs) 0;
}
.footer-section a {
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: 500;
font-size: 0.9rem;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-md);
}
.footer-section a:hover {
color: var(--primary-color);
background: rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
.footer-bottom {
text-align: center;
padding: var(--spacing-lg) var(--spacing-md);
border-top: 1px solid rgba(102, 126, 234, 0.2);
color: var(--text-secondary);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
margin-top: var(--spacing-lg);
}
.footer-bottom p {
margin-bottom: var(--spacing-xs);
font-size: 0.85rem;
line-height: 1.5;
}
.footer-bottom a {
color: var(--accent-color);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.footer-bottom a:hover {
color: var(--primary-color);
text-decoration: underline;
}
/* Hero Mobile - Enhanced */
.hero {
min-height: 85vh;
padding: var(--spacing-xl) 0;
}
.hero h1 {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: var(--spacing-md);
}
.hero h1::after {
width: 80px;
bottom: -10px;
}
.hero p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: var(--spacing-lg);
padding: var(--spacing-sm) var(--spacing-md);
max-width: 95%;
}
.cta-button {
font-size: 1rem;
padding: var(--spacing-sm) var(--spacing-lg);
letter-spacing: 0.5px;
}
.section-title {
font-size: 1.8rem;
margin-bottom: var(--spacing-md);
}
.section-subtitle {
font-size: 0.95rem;
margin-bottom: var(--spacing-lg);
}
/* Grid Mobile - Enhanced */
.services-grid,
.features-grid,
.brands-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.service-card {
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.service-card h3 {
font-size: 1.3rem;
}
.service-icon {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
.feature-item {
flex-direction: column;
text-align: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
}
.feature-icon {
min-width: auto;
width: 60px;
height: 60px;
font-size: 1.3rem;
}
.brand-card {
padding: var(--spacing-md);
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
}
.brand-logo {
font-size: 1.5rem;
margin-bottom: var(--spacing-xs);
}
.cta-button {
padding: var(--spacing-sm) var(--spacing-lg);
font-size: 1rem;
margin-bottom: var(--spacing-md);
}
.contact-form {
padding: var(--spacing-lg);
margin: var(--spacing-md);
}
.sticky-call {
width: 60px;
height: 60px;
bottom: var(--spacing-md);
right: var(--spacing-md);
font-size: 1.5rem;
}
}
/* Tablet Responsive */
@media (max-width: 1024px) {
.nav-list {
gap: var(--spacing-xs);
}
.nav-link {
padding: var(--spacing-md) var(--spacing-md);
font-size: 0.875rem;
}
.logo-text {
font-size: 1.5rem;
}
.contact-info {
gap: var(--spacing-sm);
}
.phone-number .text, .whatsapp-btn .text {
display: none;
}
}
/* Small Mobile Enhanced */
@media (max-width: 480px) {
.container {
padding: 0 var(--spacing-xs);
}
.header-content {
padding: var(--spacing-xs) 0;
}
.logo-text {
font-size: 1.1rem;
}
.logo-icon {
width: 30px;
height: 30px;
font-size: 1rem;
}
.mobile-menu-toggle {
width: 30px;
height: 30px;
}
.hamburger-line {
width: 15px;
height: 1.5px;
margin: 1px 0;
}
.nav {
width: 90%;
max-width: 280px;
}
.nav-wrapper {
padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
}
.nav-link {
padding: var(--spacing-sm) var(--spacing-xs);
font-size: 0.9rem;
}
.nav-icon {
font-size: 1rem;
width: 18px;
}
.nav-text {
font-size: 0.9rem;
}
.nav-cta {
margin: var(--spacing-sm) var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md) !important;
font-size: 0.9rem;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-lg);
flex-wrap: nowrap;
white-space: nowrap;
}
.nav-cta .nav-icon {
font-size: 1rem;
margin-right: var(--spacing-xs);
}
.nav-cta .nav-text {
font-size: 0.9rem;
font-weight: 600;
}
.hero {
min-height: 75vh;
padding: var(--spacing-lg) 0;
}
.hero h1 {
font-size: 2rem;
line-height: 1.1;
}
.hero h1::after {
width: 60px;
bottom: -8px;
}
.hero p {
font-size: 1rem;
line-height: 1.5;
padding: var(--spacing-sm);
max-width: 98%;
}
.cta-button {
font-size: 0.9rem;
padding: var(--spacing-sm) var(--spacing-md);
letter-spacing: 0.3px;
}
.section-title {
font-size: 1.5rem;
}
.section-subtitle {
font-size: 0.9rem;
}
.service-card {
padding: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.service-card h3 {
font-size: 1.2rem;
}
.service-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.feature-item {
padding: var(--spacing-md);
gap: var(--spacing-sm);
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 1.1rem;
}
.feature-content h4 {
font-size: 1.1rem;
}
.feature-content p {
font-size: 0.9rem;
}
.brand-card {
padding: var(--spacing-sm);
min-height: 100px;
}
.brand-logo {
font-size: 1.3rem;
}
.brand-card p {
font-size: 0.85rem;
}
.footer-section {
padding: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.footer-section h3 {
font-size: 1rem;
}
.footer-section a {
font-size: 0.85rem;
padding: var(--spacing-xs);
}
.footer-bottom {
padding: var(--spacing-md) var(--spacing-sm);
}
.footer-bottom p {
font-size: 0.8rem;
}
.cta-button {
padding: var(--spacing-xs) var(--spacing-md);
font-size: 0.9rem;
}
.contact-form {
padding: var(--spacing-md);
margin: var(--spacing-sm);
}
.form-group input,
.form-group select,
.form-group textarea {
padding: var(--spacing-sm);
font-size: 0.9rem;
}
.submit-btn {
padding: var(--spacing-sm);
font-size: 1rem;
}
.sticky-call {
width: 55px;
height: 55px;
bottom: var(--spacing-sm);
right: var(--spacing-sm);
font-size: 1.3rem;
}
}
/* Utility Classes */
.text-center { text-align: center; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
/* Enhanced Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0, 0, 0);
}
40%, 43% {
transform: translate3d(0, -15px, 0);
}
70% {
transform: translate3d(0, -7px, 0);
}
90% {
transform: translate3d(0, -2px, 0);
}
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes expandWidth {
0% { width: 0; }
100% { width: 100px; }
}
@keyframes glow {
0%, 100% { box-shadow: var(--shadow-glow); }
50% { box-shadow: var(--shadow-xl); }
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.pulse {
animation: pulse 2s infinite;
}
.slide-in-left {
animation: slideInLeft 0.6s ease-out;
}
.bounce {
animation: bounce 1s infinite;
}
/* Enhanced Sticky Call Button */
.sticky-call {
position: fixed;
bottom: var(--spacing-lg);
right: var(--spacing-lg);
background: var(--gradient-primary);
color: var(--text-white);
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: var(--shadow-xl);
z-index: 1000;
transition: all 0.4s ease;
font-size: 1.75rem;
border: 3px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
.sticky-call::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-secondary);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.sticky-call:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: var(--shadow-2xl);
animation: glow 2s ease-in-out infinite;
}
.sticky-call:hover::before {
opacity: 1;
}
.sticky-call::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: var(--gradient-primary);
animation: pulse 2s infinite;
z-index: -2;
opacity: 0.3;
}
/* Scroll Progress Bar */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: var(--gradient-primary);
z-index: 10000;
transition: width 0.1s ease;
}
/* Loading Animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid var(--gray-200);
border-radius: 50%;
border-top-color: var(--primary-color);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Success/Error Messages */
.alert {
padding: var(--spacing-md);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-md);
font-weight: 500;
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.alert-success {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.alert-error {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.alert-warning {
background: rgba(245, 158, 11, 0.1);
color: var(--warning);
border: 1px solid rgba(245, 158, 11, 0.2);
}
/* Responsive Tables */
.table-responsive {
overflow-x: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
table {
width: 100%;
border-collapse: collapse;
background: var(--white);
}
th {
background: var(--gradient-primary);
color: var(--text-white);
padding: var(--spacing-md);
text-align: left;
font-weight: 600;
}
td {
padding: var(--spacing-md);
border-bottom: 1px solid var(--gray-200);
color: var(--text-primary);
}
tr:hover {
background: var(--bg-accent);
}
/* Enhanced Card Components */
.card {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: var(--shadow-hover);
}
.card:hover::before {
opacity: 1;
}
.card-header {
background: var(--gradient-primary);
color: var(--text-white);
padding: var(--spacing-lg);
font-weight: 700;
position: relative;
overflow: hidden;
}
.card-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}
.card:hover .card-header::before {
opacity: 1;
animation: shimmer 0.5s ease;
}
.card-body {
padding: var(--spacing-lg);
position: relative;
z-index: 1;
}
.card-footer {
background: var(--bg-secondary);
padding: var(--spacing-md) var(--spacing-lg);
border-top: 1px solid var(--gray-200);
backdrop-filter: blur(10px);
}
/* Professional Booking Form Styles */
.booking-hero {
background: var(--gradient-hero);
padding: var(--spacing-2xl) 0;
text-align: center;
color: var(--text-white);
position: relative;
overflow: hidden;
}
.booking-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
animation: float 20s ease-in-out infinite;
}
.booking-hero-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.booking-hero h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: var(--spacing-md);
background: linear-gradient(45deg, #ffffff, #f0f0f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.booking-hero p {
font-size: 1.25rem;
margin-bottom: var(--spacing-xl);
opacity: 0.95;
}
.booking-features {
display: flex;
justify-content: center;
gap: var(--spacing-xl);
flex-wrap: wrap;
margin-top: var(--spacing-xl);
}
.booking-feature {
display: flex;
align-items: center;
gap: var(--spacing-xs);
background: rgba(255, 255, 255, 0.1);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.booking-icon {
font-size: 1.2rem;
}
/* Booking Form Section */
.booking-form-section {
padding: var(--spacing-2xl) 0;
background: var(--bg-secondary);
}
.booking-form-wrapper {
display: grid;
grid-template-columns: 1fr 350px;
gap: var(--spacing-2xl);
max-width: 1200px;
margin: 0 auto;
}
.booking-form-container {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
border: 1px solid rgba(255, 255, 255, 0.3);
overflow: hidden;
position: relative;
}
.booking-form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.booking-form-header {
background: var(--gradient-primary);
color: var(--text-white);
padding: var(--spacing-xl);
text-align: center;
position: relative;
overflow: hidden;
}
.booking-form-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}
.booking-form-container:hover .booking-form-header::before {
opacity: 1;
animation: shimmer 0.5s ease;
}
.booking-form-header h2 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: var(--spacing-xs);
position: relative;
z-index: 1;
}
.booking-form-header p {
opacity: 0.9;
position: relative;
z-index: 1;
}
.booking-form {
padding: var(--spacing-xl);
position: relative;
z-index: 1;
}
.booking-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.booking-form-group {
position: relative;
}
.booking-form-full {
grid-column: 1 / -1;
}
.booking-label {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
font-size: 0.9rem;
}
.label-icon {
font-size: 1rem;
color: var(--primary-color);
}
.booking-input,
.booking-select,
.booking-textarea {
width: 100%;
padding: var(--spacing-md);
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
background: var(--white);
color: var(--text-primary);
font-size: 1rem;
transition: all 0.3s ease;
font-family: inherit;
}
.booking-input:focus,
.booking-select:focus,
.booking-textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
background: var(--bg-primary);
}
.booking-input.error,
.booking-select.error {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.booking-textarea {
resize: vertical;
min-height: 100px;
}
.booking-form-group.focused .booking-label {
color: var(--primary-color);
}
.booking-submit-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
background: var(--gradient-primary);
color: var(--text-white);
border: none;
border-radius: var(--radius-xl);
padding: var(--spacing-md) var(--spacing-xl);
font-size: 1.125rem;
font-weight: 700;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.booking-submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--gradient-secondary);
transition: left 0.4s ease;
z-index: -1;
}
.booking-submit-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: var(--shadow-xl);
}
.booking-submit-btn:hover::before {
left: 0;
}
.booking-submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.btn-icon {
font-size: 1.2rem;
}
.btn-arrow {
font-size: 1.1rem;
transition: transform 0.3s ease;
}
.booking-submit-btn:hover .btn-arrow {
transform: translateX(4px);
}
/* Quick Contact Options */
.quick-contact-options {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
padding: var(--spacing-xl);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
height: fit-content;
position: sticky;
top: var(--spacing-lg);
}
.quick-contact-header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.quick-contact-header h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.quick-contact-header p {
color: var(--text-secondary);
font-size: 0.9rem;
}
.quick-contact-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.quick-contact-btn {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
border-radius: var(--radius-xl);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.quick-contact-btn.primary {
background: var(--gradient-primary);
color: var(--text-white);
box-shadow: var(--shadow-md);
}
.quick-contact-btn.secondary {
background: var(--success);
color: var(--text-white);
box-shadow: var(--shadow-md);
}
.quick-contact-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: var(--shadow-lg);
}
.contact-icon {
font-size: 1.5rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-lg);
}
.contact-text {
flex-grow: 1;
}
.contact-title {
display: block;
font-weight: 600;
font-size: 0.9rem;
}
.contact-value {
display: block;
font-size: 0.8rem;
opacity: 0.9;
}
.contact-arrow {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.quick-contact-btn:hover .contact-arrow {
transform: translateX(4px);
}
.service-timing {
text-align: center;
padding: var(--spacing-md);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
border: 1px solid rgba(102, 126, 234, 0.1);
}
.service-timing p {
margin: var(--spacing-xs) 0;
font-size: 0.85rem;
color: var(--text-secondary);
}
.service-timing strong {
color: var(--text-primary);
}
/* Success/Error Messages */
.booking-success,
.booking-error {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
text-align: center;
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: var(--spacing-xl);
position: relative;
overflow: hidden;
}
.booking-success {
border-color: rgba(16, 185, 129, 0.3);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}
.booking-error {
border-color: rgba(239, 68, 68, 0.3);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}
.booking-success-icon,
.booking-error-icon {
font-size: 3rem;
margin-bottom: var(--spacing-md);
}
.booking-success h3 {
color: var(--success);
font-size: 1.5rem;
margin-bottom: var(--spacing-sm);
}
.booking-error h3 {
color: var(--danger);
font-size: 1.5rem;
margin-bottom: var(--spacing-sm);
}
.booking-success p,
.booking-error p {
color: var(--text-secondary);
margin-bottom: var(--spacing-md);
}
.booking-reference {
background: rgba(16, 185, 129, 0.1);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-lg);
border: 1px solid rgba(16, 185, 129, 0.2);
color: var(--success);
font-weight: 600;
}
/* Booking Features Section */
.booking-features-section {
padding: var(--spacing-2xl) 0;
background: var(--bg-primary);
}
.booking-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.booking-feature-card {
background: var(--gradient-card);
backdrop-filter: blur(20px);
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
text-align: center;
box-shadow: var(--shadow-card);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.booking-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.booking-feature-card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: var(--shadow-hover);
}
.booking-feature-card:hover::before {
opacity: 1;
}
.booking-feature-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-md);
background: var(--gradient-primary);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--text-white);
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
}
.booking-feature-card:hover .booking-feature-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: var(--shadow-xl);
}
.booking-feature-card h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.booking-feature-card p {
color: var(--text-secondary);
line-height: 1.6;
}
/* Notification Styles */
.booking-notification {
position: fixed;
top: -100px;
right: var(--spacing-lg);
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
padding: var(--spacing-md);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
gap: var(--spacing-sm);
z-index: 10000;
transition: all 0.3s ease;
max-width: 400px;
}
.booking-notification.error {
border-color: rgba(239, 68, 68, 0.3);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}
.booking-notification.success {
border-color: rgba(16, 185, 129, 0.3);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}
.notification-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.notification-message {
flex-grow: 1;
font-weight: 500;
color: var(--text-primary);
}
.notification-close {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--text-secondary);
padding: var(--spacing-xs);
border-radius: var(--radius-md);
transition: all 0.3s ease;
}
.notification-close:hover {
background: rgba(0, 0, 0, 0.1);
color: var(--text-primary);
}
/* Mobile Responsive for Booking Form */
@media (max-width: 1024px) {
.booking-form-wrapper {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.quick-contact-options {
position: static;
order: -1;
}
.booking-hero h1 {
font-size: 2.5rem;
}
.booking-features {
gap: var(--spacing-md);
}
}
@media (max-width: 768px) {
.booking-hero {
padding: var(--spacing-xl) 0;
}
.booking-hero h1 {
font-size: 2rem;
}
.booking-hero p {
font-size: 1.1rem;
}
.booking-features {
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
}
.booking-form-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.booking-form {
padding: var(--spacing-lg);
}
.booking-form-header {
padding: var(--spacing-lg);
}
.booking-form-header h2 {
font-size: 1.5rem;
}
.quick-contact-options {
padding: var(--spacing-lg);
}
.booking-features-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.booking-feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.booking-notification {
right: var(--spacing-md);
left: var(--spacing-md);
max-width: none;
}
}
@media (max-width: 480px) {
.booking-hero h1 {
font-size: 1.8rem;
}
.booking-hero p {
font-size: 1rem;
}
.booking-form {
padding: var(--spacing-md);
}
.booking-form-header {
padding: var(--spacing-md);
}
.booking-form-header h2 {
font-size: 1.3rem;
}
.quick-contact-options {
padding: var(--spacing-md);
}
.quick-contact-header h3 {
font-size: 1.1rem;
}
.contact-icon {
width: 35px;
height: 35px;
font-size: 1.2rem;
}
.booking-feature-icon {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
}
/* Products Section Styles */
.products-section {
padding: var(--spacing-2xl) 0;
background: var(--bg-primary);
position: relative;
overflow: hidden;
}
.products-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
position: relative;
z-index: 1;
}
.product-card {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.4s ease;
position: relative;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.product-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-hover);
}
.product-card:hover::before {
opacity: 1;
}
.product-badge {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
background: var(--gradient-secondary);
color: var(--text-white);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-2xl);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
box-shadow: var(--shadow-md);
animation: pulse 2s infinite;
}
.product-image {
height: 200px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.product-image::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}
.product-card:hover .product-image::before {
opacity: 1;
animation: shimmer 0.5s ease;
}
.product-placeholder {
font-size: 4rem;
color: var(--primary-color);
position: relative;
z-index: 1;
animation: float 3s ease-in-out infinite;
}
.product-content {
padding: var(--spacing-lg);
position: relative;
z-index: 1;
}
.product-content h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
line-height: 1.3;
}
.product-rating {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-md);
}
.stars {
font-size: 0.9rem;
letter-spacing: 1px;
}
.rating-text {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.product-price {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.current-price {
font-size: 1.5rem;
font-weight: 800;
color: var(--primary-color);
}
.original-price {
font-size: 1rem;
color: var(--text-secondary);
text-decoration: line-through;
font-weight: 500;
}
.discount {
background: var(--success);
color: var(--text-white);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-lg);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.product-features {
list-style: none;
padding: 0;
margin: 0 0 var(--spacing-lg) 0;
}
.product-features li {
padding: var(--spacing-xs) 0;
font-size: 0.85rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.product-features li::before {
content: '✅';
color: var(--success);
font-weight: 700;
}
.product-actions {
display: flex;
gap: var(--spacing-sm);
}
.product-btn {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
border: none;
border-radius: var(--radius-lg);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
position: relative;
overflow: hidden;
}
.product-btn.primary {
background: var(--gradient-primary);
color: var(--text-white);
box-shadow: var(--shadow-md);
}
.product-btn.primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--gradient-secondary);
transition: left 0.3s ease;
z-index: -1;
}
.product-btn.primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.product-btn.primary:hover::before {
left: 0;
}
.product-btn.secondary {
background: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.product-btn.secondary:hover {
background: var(--primary-color);
color: var(--text-white);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.products-cta {
text-align: center;
margin-top: var(--spacing-2xl);
position: relative;
z-index: 1;
}
.products-cta .cta-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--gradient-primary);
color: var(--text-white);
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--radius-2xl);
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.4s ease;
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
}
.products-cta .cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--gradient-secondary);
transition: left 0.4s ease;
z-index: -1;
}
.products-cta .cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: var(--shadow-2xl);
}
.products-cta .cta-button:hover::before {
left: 0;
}
.products-cta .cta-button span:last-child {
transition: transform 0.3s ease;
}
.products-cta .cta-button:hover span:last-child {
transform: translateX(4px);
}
.products-note {
margin-top: var(--spacing-md);
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
}
/* Mobile Responsive for Products */
@media (max-width: 768px) {
.products-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.product-card {
margin-bottom: var(--spacing-md);
}
.product-image {
height: 180px;
}
.product-placeholder {
font-size: 3rem;
}
.product-content {
padding: var(--spacing-md);
}
.product-content h3 {
font-size: 1.2rem;
}
.product-price {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.current-price {
font-size: 1.3rem;
}
.product-actions {
flex-direction: column;
}
.products-cta .cta-button {
padding: var(--spacing-sm) var(--spacing-lg);
font-size: 1rem;
}
}
@media (max-width: 480px) {
.product-image {
height: 160px;
}
.product-placeholder {
font-size: 2.5rem;
}
.product-content {
padding: var(--spacing-sm);
}
.product-content h3 {
font-size: 1.1rem;
}
.current-price {
font-size: 1.2rem;
}
.original-price {
font-size: 0.9rem;
}
.discount {
font-size: 0.7rem;
padding: var(--spacing-xs);
}
.product-features li {
font-size: 0.8rem;
}
.product-btn {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 0.8rem;
}
.products-cta .cta-button {
padding: var(--spacing-xs) var(--spacing-md);
font-size: 0.9rem;
}
.products-note {
font-size: 0.8rem;
}
}
.add-to-cart-btn:disabled,
.buy-now-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
}
.add-to-cart-btn:disabled:hover,
.buy-now-btn:disabled:hover {
transform: none !important;
box-shadow: var(--shadow-md) !important;
}
/* Cart Notification */
.cart-notification {
position: fixed;
top: -100px;
right: var(--spacing-lg);
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
padding: var(--spacing-md);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
gap: var(--spacing-sm);
z-index: 10000;
transition: all 0.3s ease;
max-width: 350px;
}
.cart-notification.success {
border-color: rgba(16, 185, 129, 0.3);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}
.cart-notification-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.cart-notification-message {
flex-grow: 1;
font-weight: 500;
color: var(--text-primary);
}
.cart-notification-close {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--text-secondary);
padding: var(--spacing-xs);
border-radius: var(--radius-md);
transition: all 0.3s ease;
}
.cart-notification-close:hover {
background: rgba(0, 0, 0, 0.1);
color: var(--text-primary);
}
/* Cart Section Styles */
.cart-section {
padding: var(--spacing-2xl) 0;
background: var(--bg-primary);
min-height: 60vh;
}
.cart-header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.cart-header h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: var(--spacing-sm);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cart-header p {
color: var(--text-secondary);
font-size: 1.1rem;
}
.cart-notification {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
padding: var(--spacing-md);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
animation: slideInLeft 0.5s ease;
}
.cart-notification.success {
border-color: rgba(16, 185, 129, 0.3);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}
.empty-cart {
text-align: center;
padding: var(--spacing-3xl);
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.empty-cart-icon {
font-size: 5rem;
margin-bottom: var(--spacing-lg);
animation: float 3s ease-in-out infinite;
}
.empty-cart h2 {
font-size: 1.8rem;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.empty-cart p {
color: var(--text-secondary);
margin-bottom: var(--spacing-xl);
}
.cart-content {
display: grid;
grid-template-columns: 1fr 350px;
gap: var(--spacing-2xl);
}
.cart-items {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.cart-items-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
background: var(--gradient-primary);
color: var(--text-white);
}
.cart-items-header h3 {
font-size: 1.2rem;
font-weight: 700;
}
.clear-cart-form {
display: inline-block;
}
.clear-cart-btn {
background: rgba(255, 255, 255, 0.2);
color: var(--text-white);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-lg);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
}
.clear-cart-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.cart-item {
display: grid;
grid-template-columns: 80px 1fr auto auto auto;
gap: var(--spacing-md);
align-items: center;
padding: var(--spacing-lg);
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
transition: background 0.3s ease;
}
.cart-item:hover {
background: rgba(102, 126, 234, 0.05);
}
.cart-item-image {
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
}
.cart-item-placeholder {
font-size: 2rem;
color: var(--primary-color);
}
.cart-item-details h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: var(--spacing-xs);
color: var(--text-primary);
}
.cart-item-price {
color: var(--text-secondary);
font-size: 0.9rem;
}
.quantity-controls {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
}
.quantity-btn {
width: 32px;
height: 32px;
border: none;
background: var(--bg-secondary);
color: var(--text-primary);
cursor: pointer;
font-size: 1rem;
transition: all 0.3s ease;
}
.quantity-btn:hover {
background: var(--primary-color);
color: var(--text-white);
}
.quantity-input {
width: 50px;
text-align: center;
border: none;
background: var(--white);
font-weight: 600;
}
.cart-item-total {
font-weight: 700;
font-size: 1.1rem;
color: var(--primary-color);
}
.remove-form {
display: inline-block;
}
.remove-btn {
width: 30px;
height: 30px;
border: none;
background: var(--danger);
color: var(--text-white);
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.remove-btn:hover {
background: #dc3545;
transform: scale(1.1);
}
.cart-summary {
position: sticky;
top: var(--spacing-lg);
}
.cart-summary-card {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: var(--spacing-lg);
}
.cart-summary-card h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: var(--spacing-lg);
color: var(--text-primary);
}
.summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-sm) 0;
color: var(--text-secondary);
}
.summary-row.total {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
padding-top: var(--spacing-md);
border-top: 2px solid var(--gray-200);
}
.summary-divider {
height: 1px;
background: var(--gray-200);
margin: var(--spacing-md) 0;
}
.promo-section {
display: flex;
gap: var(--spacing-sm);
margin: var(--spacing-lg) 0;
}
.promo-input {
flex: 1;
padding: var(--spacing-sm);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
font-size: 0.9rem;
}
.promo-btn {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--gradient-primary);
color: var(--text-white);
border: none;
border-radius: var(--radius-lg);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.promo-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.cart-actions {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: var(--spacing-lg) 0;
}
.continue-shopping-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-md);
background: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
border-radius: var(--radius-xl);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.continue-shopping-btn:hover {
background: var(--primary-color);
color: var(--text-white);
}
.checkout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-md);
background: var(--gradient-primary);
color: var(--text-white);
border: none;
border-radius: var(--radius-xl);
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
box-shadow: var(--shadow-lg);
}
.checkout-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.trust-badges {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.trust-badge {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
font-size: 0.85rem;
color: var(--text-secondary);
}
.badge-icon {
font-size: 1rem;
}
/* Product Details Styles */
.product-details-section {
padding: var(--spacing-2xl) 0;
background: var(--bg-primary);
}
.breadcrumb {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-xl);
font-size: 0.9rem;
color: var(--text-secondary);
}
.breadcrumb a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb a:hover {
color: var(--accent-color);
}
.product-details-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
.product-images {
position: sticky;
top: var(--spacing-lg);
}
.main-image {
width: 100%;
height: 400px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
overflow: hidden;
}
.product-image-placeholder {
font-size: 6rem;
color: var(--primary-color);
animation: float 3s ease-in-out infinite;
}
.image-thumbnails {
display: flex;
gap: var(--spacing-sm);
}
.thumbnail {
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.thumbnail.active {
border-color: var(--primary-color);
transform: scale(1.05);
}
.thumbnail:hover {
border-color: var(--primary-color);
}
.product-info {
position: relative;
}
.product-badge {
display: inline-block;
background: var(--gradient-secondary);
color: var(--text-white);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-2xl);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--spacing-md);
animation: pulse 2s infinite;
}
.product-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
line-height: 1.2;
}
.product-rating {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.stars {
font-size: 1.1rem;
letter-spacing: 1px;
}
.rating-text {
font-weight: 600;
color: var(--text-primary);
}
.reviews-count {
color: var(--text-secondary);
font-size: 0.9rem;
}
.product-price-section {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.current-price {
font-size: 2rem;
font-weight: 800;
color: var(--primary-color);
}
.original-price {
font-size: 1.2rem;
color: var(--text-secondary);
text-decoration: line-through;
}
.discount {
background: var(--success);
color: var(--text-white);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-lg);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
}
.product-highlights {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.highlight-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
font-size: 0.9rem;
color: var(--text-secondary);
}
.highlight-icon {
font-size: 1rem;
color: var(--primary-color);
}
.product-features {
margin-bottom: var(--spacing-lg);
}
.product-features h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.product-features ul {
list-style: none;
padding: 0;
}
.product-features li {
padding: var(--spacing-xs) 0;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.product-features li::before {
content: '✅';
color: var(--success);
font-weight: 700;
}
.add-to-cart-form {
margin-bottom: var(--spacing-lg);
}
.quantity-selector {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.quantity-selector label {
font-weight: 600;
color: var(--text-primary);
}
.product-actions {
display: flex;
gap: var(--spacing-sm);
}
.add-to-cart-btn,
.buy-now-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-md);
border: none;
border-radius: var(--radius-xl);
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.add-to-cart-btn {
background: var(--gradient-primary);
color: var(--text-white);
box-shadow: var(--shadow-md);
}
.add-to-cart-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.buy-now-btn {
background: var(--gradient-secondary);
color: var(--text-white);
box-shadow: var(--shadow-md);
}
.buy-now-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.product-benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm);
}
.benefit-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
font-size: 0.85rem;
color: var(--text-secondary);
}
.benefit-icon {
font-size: 1rem;
color: var(--primary-color);
}
.product-tabs {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.tab-headers {
display: flex;
background: var(--gradient-primary);
}
.tab-header {
flex: 1;
padding: var(--spacing-md);
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.tab-header.active {
color: var(--text-white);
background: rgba(255, 255, 255, 0.1);
}
.tab-header:hover {
color: var(--text-white);
}
.tab-content {
padding: var(--spacing-xl);
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.tab-pane h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.tab-pane h4 {
font-size: 1.1rem;
font-weight: 600;
margin: var(--spacing-lg) 0 var(--spacing-sm);
color: var(--text-primary);
}
.tab-pane p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--spacing-md);
}
.tab-pane ul {
list-style: none;
padding: 0;
}
.tab-pane li {
padding: var(--spacing-xs) 0;
color: var(--text-secondary);
position: relative;
padding-left: var(--spacing-lg);
}
.tab-pane li::before {
content: '•';
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: 700;
}
.specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
}
.spec-item {
display: flex;
justify-content: space-between;
padding: var(--spacing-sm);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
}
.spec-label {
font-weight: 600;
color: var(--text-secondary);
}
.spec-value {
color: var(--text-primary);
font-weight: 500;
}
.reviews-summary {
margin-bottom: var(--spacing-lg);
}
.overall-rating {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
}
.rating-number {
font-size: 3rem;
font-weight: 800;
color: var(--primary-color);
}
.rating-stars {
font-size: 1.5rem;
}
.rating-count {
color: var(--text-secondary);
}
.review-item {
padding: var(--spacing-lg);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-md);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
}
.review-rating {
font-size: 0.9rem;
}
.review-item p {
color: var(--text-secondary);
line-height: 1.5;
}
/* Checkout Styles */
.checkout-section {
padding: var(--spacing-2xl) 0;
background: var(--bg-primary);
}
.checkout-header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.checkout-header h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: var(--spacing-sm);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.checkout-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: var(--spacing-2xl);
}
.checkout-form {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.checkout-form h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: var(--spacing-lg);
color: var(--text-primary);
}
.form-section {
padding: var(--spacing-lg);
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}
.form-section:last-child {
border-bottom: none;
}
.form-section h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
}
.form-group {
margin-bottom: var(--spacing-md);
}
.form-group label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: 600;
color: var(--text-primary);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: var(--spacing-sm);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
font-size: 1rem;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.payment-methods {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.payment-method {
display: flex;
align-items: center;
padding: var(--spacing-md);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.3s ease;
}
.payment-method:hover {
background: rgba(102, 126, 234, 0.1);
}
.payment-method input[type="radio"] {
margin-right: var(--spacing-md);
}
.payment-option {
display: flex;
align-items: center;
gap: var(--spacing-md);
flex: 1;
}
.payment-icon {
font-size: 1.5rem;
color: var(--primary-color);
}
.payment-info strong {
display: block;
color: var(--text-primary);
}
.payment-info span {
display: block;
color: var(--text-secondary);
font-size: 0.9rem;
}
.checkout-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
background: rgba(102, 126, 234, 0.05);
}
.back-to-cart {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
border-radius: var(--radius-xl);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.back-to-cart:hover {
background: var(--primary-color);
color: var(--text-white);
}
.place-order-btn {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-md) var(--spacing-xl);
background: var(--gradient-primary);
color: var(--text-white);
border: none;
border-radius: var(--radius-xl);
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-lg);
}
.place-order-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.trust-section {
margin-top: var(--spacing-xl);
}
.trust-badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
.trust-badge {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.badge-icon {
font-size: 2rem;
color: var(--primary-color);
}
.badge-text strong {
display: block;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.badge-text span {
display: block;
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Order Success Styles */
.order-success-section {
padding: var(--spacing-2xl) 0;
background: var(--bg-primary);
min-height: 70vh;
display: flex;
align-items: center;
}
.success-content {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.success-icon {
font-size: 5rem;
margin-bottom: var(--spacing-lg);
animation: bounce 1s ease;
}
.success-content h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: var(--spacing-sm);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.success-content p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: var(--spacing-xl);
}
.order-details {
background: var(--gradient-card);
backdrop-filter: blur(20px);
border-radius: var(--radius-2xl);
padding: var(--spacing-xl);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: var(--spacing-xl);
}
.order-id {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
}
.order-info {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.info-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
text-align: left;
}
.info-icon {
font-size: 1.5rem;
color: var(--primary-color);
}
.info-text {
flex: 1;
}
.info-text strong {
display: block;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.info-text span {
display: block;
color: var(--text-secondary);
font-size: 0.9rem;
}
.next-steps {
margin-bottom: var(--spacing-xl);
}
.next-steps h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-lg);
color: var(--text-primary);
}
.steps-timeline {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.step-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: rgba(102, 126, 234, 0.05);
border-radius: var(--radius-lg);
text-align: left;
}
.step-number {
width: 40px;
height: 40px;
background: var(--gradient-primary);
color: var(--text-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.step-content strong {
display: block;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.step-content span {
display: block;
color: var(--text-secondary);
font-size: 0.9rem;
}
.action-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
}
.action-btn {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--radius-xl);
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.action-btn.primary {
background: var(--gradient-primary);
color: var(--text-white);
box-shadow: var(--shadow-md);
}
.action-btn.primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.action-btn.secondary {
background: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.action-btn.secondary:hover {
background: var(--primary-color);
color: var(--text-white);
}
/* Mobile Responsive for E-commerce Pages */
@media (max-width: 1024px) {
.cart-content,
.product-details-container,
.checkout-content {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.product-images,
.cart-summary {
position: static;
}
.trust-badges {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.cart-header h1,
.checkout-header h1,
.success-content h1 {
font-size: 2rem;
}
.cart-item {
grid-template-columns: 60px 1fr auto auto;
gap: var(--spacing-sm);
padding: var(--spacing-md);
}
.cart-item-image {
width: 60px;
height: 60px;
}
.cart-item-placeholder {
font-size: 1.5rem;
}
.main-image {
height: 300px;
}
.product-image-placeholder {
font-size: 4rem;
}
.product-title {
font-size: 1.5rem;
}
.current-price {
font-size: 1.5rem;
}
.product-highlights {
flex-direction: column;
gap: var(--spacing-sm);
}
.product-actions {
flex-direction: column;
}
.form-row {
grid-template-columns: 1fr;
}
.checkout-actions {
flex-direction: column;
gap: var(--spacing-sm);
}
.action-buttons {
flex-direction: column;
}
.trust-badges {
grid-template-columns: 1fr;
}
.specs-grid {
grid-template-columns: 1fr;
}
.product-benefits {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.cart-header h1,
.checkout-header h1,
.success-content h1 {
font-size: 1.5rem;
}
.cart-item {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
padding: var(--spacing-sm);
}
.cart-item-image {
width: 50px;
height: 50px;
margin-bottom: var(--spacing-sm);
}
.cart-item-placeholder {
font-size: 1.2rem;
}
.main-image {
height: 250px;
}
.product-image-placeholder {
font-size: 3rem;
}
.product-title {
font-size: 1.3rem;
}
.current-price {
font-size: 1.3rem;
}
.original-price {
font-size: 1rem;
}
.discount {
font-size: 0.7rem;
}
.image-thumbnails {
justify-content: center;
}
.thumbnail {
width: 60px;
height: 60px;
}
.tab-headers {
flex-direction: column;
}
.tab-header {
padding: var(--spacing-sm);
}
.tab-content {
padding: var(--spacing-md);
}
.checkout-form {
padding: var(--spacing-md);
}
.form-section {
padding: var(--spacing-md);
}
.payment-option {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.steps-timeline {
gap: var(--spacing-sm);
}
.step-item {
padding: var(--spacing-sm);
}
.step-number {
width: 30px;
height: 30px;
font-size: 0.9rem;
}
.info-item {
padding: var(--spacing-sm);
}
.info-icon {
font-size: 1.2rem;
}
}
/* Cart Icon Styles */
.cart-link {
position: relative;
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--gradient-secondary);
color: var(--text-white);
font-size: 0.7rem;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: var(--radius-2xl);
display: flex;
align-items: center;
justify-content: center;
animation: pulse 2s infinite;
box-shadow: var(--shadow-md);
}
.cart-link:hover .cart-count {
transform: scale(1.1);
box-shadow: var(--shadow-lg);
}
/* Badge Component */
.badge {
display: inline-flex;
align-items: center;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-2xl);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-primary {
background: var(--primary-color);
color: var(--text-white);
}
.badge-success {
background: var(--success);
color: var(--text-white);
}
.badge-warning {
background: var(--warning);
color: var(--text-white);
}
.badge-danger {
background: var(--danger);
color: var(--text-white);
}