/* =============================
Design System Tokens
============================= */
:root {
/* Primary Colors */
--blue: #2563eb;
--blue2: #60a5fa;
--blue-light: #93c5fd;
--blue-dark: #1d4ed8;
/* Text Colors - High Contrast */
--ink: #0f172a;
--ink-light: #1e293b;
--muted: #475569;
--muted-light: #64748b;
--muted-dark: #334155;
--text-white: #ffffff;
--text-light: #f8fafc;
/* Background Colors */
--bg1: #f2f6ff;
--bg2: #ffffff;
--bg-dark: #0a0a0a;
--bg-card: #ffffff;
--bg-card-hover: #f8fafc;
/* Semantic Colors */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--info: #3b82f6;
/* Border Colors */
--border-light: #e2e8f0;
--border-medium: #cbd5e1;
--border-dark: #94a3b8;
/* Shadow Colors */
--shadow-light: rgba(0, 0, 0, 0.05);
--shadow-medium: rgba(0, 0, 0, 0.1);
--shadow-dark: rgba(0, 0, 0, 0.2);
/* Typography */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Orbitron', monospace;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
--transition-bounce: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark Theme Support */
[data-theme="dark"] {
--ink: #f8fafc;
--ink-light: #e2e8f0;
--muted: #94a3b8;
--muted-light: #cbd5e1;
--muted-dark: #64748b;
--text-white: #0f172a;
--text-light: #1e293b;
--bg1: #0f172a;
--bg2: #1e293b;
--bg-card: #1e293b;
--bg-card-hover: #334155;
--border-light: #334155;
--border-medium: #475569;
--border-dark: #64748b;
--shadow-light: rgba(0, 0, 0, 0.2);
--shadow-medium: rgba(0, 0, 0, 0.3);
--shadow-dark: rgba(0, 0, 0, 0.5);
}
/* Dark theme specific styles */
[data-theme="dark"] .service-card,
[data-theme="dark"] .why-choose-card,
[data-theme="dark"] .values-stack,
[data-theme="dark"] .process-flow {
background: var(--bg-card);
border-color: var(--border-light);
}
[data-theme="dark"] .stat-box {
background: var(--bg-card);
border-color: var(--border-light);
}
[data-theme="dark"] .feature-item {
background: rgba(30, 41, 59, 0.7);
border-color: var(--border-light);
}
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-subtitle {
color: var(--text-white);
}
[data-theme="dark"] .section-header h2 {
color: var(--ink);
}
[data-theme="dark"] .section-subtitle {
color: var(--muted);
}
/* Stats cards contrast overrides for both themes */
[data-theme="light"] .stat-box {
background: rgba(30, 41, 59, 0.9);
border: 1px solid var(--border-light);
}
[data-theme="light"] .stat-box:hover {
background: rgba(51, 65, 85, 0.95);
}
[data-theme="light"] .stat-number {
color: var(--blue);
}
[data-theme="light"] .stat-label {
color: var(--text-white);
}
[data-theme="dark"] .stat-box {
background: rgba(30, 41, 59, 0.9);
border: 1px solid var(--border-light);
}
[data-theme="dark"] .stat-box:hover {
background: rgba(51, 65, 85, 0.95);
}
[data-theme="dark"] .stat-number {
color: var(--blue);
}
[data-theme="dark"] .stat-label {
color: var(--text-white);
}
/* Ensure stats text is always visible */
.stats {
color: var(--text-white);
}
.stats strong {
color: var(--text-white);
}
[data-theme="light"] .stats {
color: var(--text-white);
}
[data-theme="light"] .stats strong {
color: var(--text-white);
}
/* =============================
Sticky Top Navigation Bar
============================= */
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 20px 0;
backdrop-filter: blur(0px);
}
.top-nav.scrolled {
background: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 15px 0;
border-bottom: 1px solid var(--border-light);
}
/* Dark mode navbar styling */
[data-theme="dark"] .top-nav {
background: transparent;
}
[data-theme="dark"] .top-nav.scrolled {
background: #1e293b;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid var(--border-light);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
/* Left: Logo */
.nav-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.nav-logo:hover {
transform: scale(1.05);
}
.logo-text-container {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
}
.logo-main {
display: flex;
align-items: baseline;
line-height: 1;
position: relative;
}
.logo-tech {
font-family: var(--font-display);
font-size: 28px;
font-weight: 900;
color: var(--ink);
text-shadow: 0 2px 10px var(--shadow-dark);
letter-spacing: 1px;
position: relative;
transition: all var(--transition-normal);
}
.logo-tech::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(107, 114, 128, 0.1), transparent);
background-size: 200% 200%;
animation: techGlow 3s ease-in-out infinite;
z-index: -1;
border-radius: 4px;
opacity: 0.8;
}
.logo-mates {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--blue);
text-shadow: 0 2px 10px rgba(37, 99, 235, 0.5);
letter-spacing: 1px;
position: relative;
transition: all var(--transition-normal);
margin-left: 2px;
}
.logo-mates::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.1), transparent);
background-size: 200% 200%;
animation: matesGlow 3s ease-in-out infinite 0.5s;
z-index: -1;
border-radius: 4px;
opacity: 0.8;
}
.logo-subtitle {
font-family: var(--font-heading);
font-size: 10px;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 2px;
margin-top: -2px;
margin-left: 0;
transition: all var(--transition-normal);
position: relative;
text-align: center;
width: 100%;
text-shadow: 0 1px 5px var(--shadow-dark);
}
.logo-subtitle::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg, #6b7280, #3b82f6);
transition: width 0.3s ease;
}
.nav-logo:hover .logo-tech {
color: #4b5563;
transform: translateY(-1px);
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.nav-logo:hover .logo-mates {
color: #2563eb;
transform: translateY(-1px);
text-shadow: 0 4px 15px rgba(59, 130, 246, 0.6);
}
.nav-logo:hover .logo-subtitle {
color: #374151;
transform: translateY(-1px);
letter-spacing: 3px;
}
.nav-logo:hover .logo-subtitle::after {
width: 100%;
}
@keyframes techGlow {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes matesGlow {
0%, 100% {
background-position: 100% 50%;
}
50% {
background-position: 0% 50%;
}
}
/* Center: Navigation Links */
.nav-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
}
.nav-pill {
display: flex;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50px;
padding: 8px;
gap: 2px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
max-width: 600px;
width: 100%;
justify-content: center;
}
.nav-link {
display: inline-block;
padding: 12px 16px;
color: var(--ink);
text-decoration: none;
font-weight: 600;
font-size: 14px;
border-radius: 25px;
transition: all var(--transition-bounce);
cursor: pointer;
position: relative;
overflow: hidden;
}
.nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.nav-link:hover::before {
left: 100%;
}
.nav-link:hover {
color: var(--ink);
background: var(--shadow-light);
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--shadow-medium);
}
.nav-link.active {
color: var(--text-white);
background: var(--blue);
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}
/* Right: CTA Button & Theme Toggle */
.nav-right {
flex: 0 0 auto;
z-index: 10;
display: flex;
align-items: center;
gap: 15px;
}
.theme-toggle {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--border-light);
background: var(--bg-card);
color: var(--muted);
cursor: pointer;
transition: all var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.theme-toggle:hover {
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
transform: scale(1.1);
}
.theme-toggle:active {
transform: scale(0.95);
}
/* Theme toggle theme-specific styling */
[data-theme="light"] .theme-toggle {
background: var(--bg-card);
color: var(--muted);
border-color: var(--border-medium);
}
[data-theme="light"] .theme-toggle:hover {
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}
[data-theme="dark"] .theme-toggle {
background: var(--bg-card);
color: var(--muted-light);
border-color: var(--border-light);
}
[data-theme="dark"] .theme-toggle:hover {
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}
.cta-button {
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
color: var(--text-white);
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 12px 24px;
border-radius: 25px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: all var(--transition-normal);
box-shadow:
0 4px 15px rgba(37, 99, 235, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
text-shadow: 0 1px 2px var(--shadow-dark);
}
/* Glowing moving round effect for navigation CTA */
.cta-button::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 27px;
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(59, 130, 246, 0.3) 60deg,
rgba(96, 165, 250, 0.5) 120deg,
rgba(59, 130, 246, 0.3) 180deg,
transparent 240deg,
transparent 360deg
);
animation: rotateGlow 3s linear infinite;
z-index: -1;
opacity: 0.8;
}
.cta-button::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 29px;
background: conic-gradient(
from 180deg,
transparent 0deg,
rgba(96, 165, 250, 0.2) 60deg,
rgba(59, 130, 246, 0.4) 120deg,
rgba(96, 165, 250, 0.2) 180deg,
transparent 240deg,
transparent 360deg
);
animation: rotateGlow 4s linear infinite reverse;
z-index: -2;
opacity: 0.6;
}
/* Remove old gradient border effect and replace with glow */
.cta-button:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px) scale(1.05);
box-shadow:
0 8px 25px rgba(59, 130, 246, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.cta-button:hover::before {
opacity: 1;
animation-duration: 2s;
}
.cta-button:hover::after {
opacity: 0.8;
animation-duration: 2.5s;
}
.cta-button:active {
transform: translateY(0) scale(1.02);
}
/* CTA Button theme-specific styling */
[data-theme="light"] .cta-button {
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
color: var(--text-white);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 4px 15px rgba(37, 99, 235, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .cta-button:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-color: rgba(255, 255, 255, 0.4);
box-shadow:
0 8px 25px rgba(59, 130, 246, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .cta-button {
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
color: var(--text-white);
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 4px 15px rgba(37, 99, 235, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .cta-button:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-color: rgba(255, 255, 255, 0.5);
box-shadow:
0 8px 25px rgba(59, 130, 246, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.3);
}
/* Navigation theme-specific styling */
[data-theme="light"] .nav-pill {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .nav-pill {
background: rgba(30, 41, 59, 0.9);
border: 1px solid var(--border-light);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .nav-link {
color: var(--ink);
}
[data-theme="light"] .nav-link:hover {
color: var(--ink);
background: var(--shadow-light);
}
[data-theme="light"] .nav-link.active {
color: var(--text-white);
background: var(--blue);
}
[data-theme="dark"] .nav-link {
color: var(--text-white);
}
[data-theme="dark"] .nav-link:hover {
color: var(--text-white);
background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .nav-link.active {
color: var(--text-white);
background: var(--blue);
}
/* Dark mode nav links when scrolled - ensure white text visibility */
[data-theme="dark"] .top-nav.scrolled .nav-link {
color: var(--text-white) !important;
}
[data-theme="dark"] .top-nav.scrolled .nav-link:hover {
color: var(--text-white) !important;
background: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .top-nav.scrolled .nav-link.active {
color: var(--text-white) !important;
background: var(--blue);
}
/* Dark mode nav pill when scrolled */
[data-theme="dark"] .top-nav.scrolled .nav-pill {
background: #334155;
border: 1px solid var(--border-light);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* Dark mode logo visibility when scrolled */
[data-theme="dark"] .top-nav.scrolled .logo-tech {
color: var(--blue);
}
[data-theme="dark"] .top-nav.scrolled .logo-mates {
color: var(--blue);
}
[data-theme="dark"] .top-nav.scrolled .logo-subtitle {
color: var(--muted-light);
}
/* Dark mode theme toggle and CTA button when scrolled */
[data-theme="dark"] .top-nav.scrolled .theme-toggle {
background: var(--bg-card);
color: var(--muted-light);
border-color: var(--border-light);
}
[data-theme="dark"] .top-nav.scrolled .theme-toggle:hover {
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
}
[data-theme="dark"] .top-nav.scrolled .cta-button {
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
color: var(--text-white);
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 4px 15px rgba(37, 99, 235, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .top-nav.scrolled .cta-button:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-color: rgba(255, 255, 255, 0.5);
box-shadow:
0 8px 25px rgba(59, 130, 246, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.3);
}
/* =============================
Dark Mode Section Styling
Services, Projects, Client Stories, Get in Touch
============================= */
/* Services Section Dark Mode */
[data-theme="dark"] .services-section {
background: #000000 !important;
color: #ffffff;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(16, 185, 129, 0.03) 100%);
pointer-events: none;
}
[data-theme="dark"] .services-section .section-header h2 {
color: #ffffff;
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}
[data-theme="dark"] .services-section .section-subtitle {
color: #e2e8f0;
}
[data-theme="dark"] .services-section .service-card {
background: #1a1a1a;
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(59, 130, 246, 0.1);
transition: all 0.3s ease;
}
[data-theme="dark"] .services-section .service-card:hover {
background: #1f1f1f;
border-color: rgba(59, 130, 246, 0.4);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(59, 130, 246, 0.2),
0 0 20px rgba(59, 130, 246, 0.1);
transform: translateY(-5px);
}
[data-theme="dark"] .services-section .service-content h3 {
color: #ffffff;
}
[data-theme="dark"] .services-section .service-content p {
color: #e2e8f0;
}
[data-theme="dark"] .services-section .service-features li {
color: #cbd5e1;
}
[data-theme="dark"] .services-section .service-features li::before {
color: #60a5fa;
}
/* Projects Section Dark Mode */
[data-theme="dark"] .projects-section {
background: #000000 !important;
color: #ffffff;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .projects-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(59, 130, 246, 0.03) 100%);
pointer-events: none;
}
[data-theme="dark"] .projects-section .section-header h2 {
color: #ffffff;
text-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}
[data-theme="dark"] .projects-section .section-subtitle {
color: #e2e8f0;
}
[data-theme="dark"] .projects-section .project-card {
background: #1a1a1a;
border: 1px solid rgba(16, 185, 129, 0.2);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(16, 185, 129, 0.1);
transition: all 0.3s ease;
}
[data-theme="dark"] .projects-section .project-card:hover {
background: #1f1f1f;
border-color: rgba(16, 185, 129, 0.4);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(16, 185, 129, 0.2),
0 0 20px rgba(16, 185, 129, 0.1);
transform: translateY(-5px);
}
[data-theme="dark"] .projects-section .project-title {
color: #ffffff;
}
[data-theme="dark"] .projects-section .project-description {
color: #e2e8f0;
}
[data-theme="dark"] .projects-section .project-badge {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
/* Client Stories/Testimonials Section Dark Mode */
[data-theme="dark"] .testimonials-section {
background: #000000 !important;
color: #ffffff;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.03) 0%, rgba(59, 130, 246, 0.03) 100%);
pointer-events: none;
}
[data-theme="dark"] .testimonials-section .section-header h2 {
color: #ffffff;
text-shadow: 0 2px 10px rgba(168, 85, 247, 0.3);
}
[data-theme="dark"] .testimonials-section .section-subtitle {
color: #e2e8f0;
}
[data-theme="dark"] .testimonials-section .testimonial-card {
background: #1a1a1a;
border: 1px solid rgba(168, 85, 247, 0.2);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(168, 85, 247, 0.1);
transition: all 0.3s ease;
}
[data-theme="dark"] .testimonials-section .testimonial-card:hover {
background: #1f1f1f;
border-color: rgba(168, 85, 247, 0.4);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(168, 85, 247, 0.2),
0 0 20px rgba(168, 85, 247, 0.1);
transform: translateY(-5px);
}
[data-theme="dark"] .testimonials-section .testimonial-text {
color: #e2e8f0;
}
[data-theme="dark"] .testimonials-section .testimonial-name {
color: #ffffff;
}
[data-theme="dark"] .testimonials-section .testimonial-role {
color: #cbd5e1;
}
[data-theme="dark"] .testimonials-section .stars {
color: #60a5fa;
}
/* Get in Touch/Contact Section Dark Mode */
[data-theme="dark"] .contact-section {
background: #000000 !important;
color: #ffffff;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(16, 185, 129, 0.03) 100%);
pointer-events: none;
}
[data-theme="dark"] .contact-section .section-header h2 {
color: #ffffff;
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}
[data-theme="dark"] .contact-section .section-subtitle {
color: #e2e8f0;
}
[data-theme="dark"] .contact-section .contact-info-card,
[data-theme="dark"] .contact-section .contact-form-card {
background: #1a1a1a;
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(59, 130, 246, 0.1);
transition: all 0.3s ease;
}
[data-theme="dark"] .contact-section .contact-info-card:hover,
[data-theme="dark"] .contact-section .contact-form-card:hover {
background: #1f1f1f;
border-color: rgba(59, 130, 246, 0.4);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(59, 130, 246, 0.2),
0 0 20px rgba(59, 130, 246, 0.1);
transform: translateY(-5px);
}
[data-theme="dark"] .contact-section .contact-method h4 {
color: #ffffff;
}
[data-theme="dark"] .contact-section .contact-method p {
color: #e2e8f0;
}
[data-theme="dark"] .contact-section .form-header h3 {
color: #ffffff;
}
[data-theme="dark"] .contact-section .form-header p {
color: #e2e8f0;
}
[data-theme="dark"] .contact-section .input-container input,
[data-theme="dark"] .contact-section .input-container textarea,
[data-theme="dark"] .contact-section .input-container select {
background: #2a2a2a;
border: 1px solid rgba(59, 130, 246, 0.2);
color: #ffffff;
}
[data-theme="dark"] .contact-section .input-container input:focus,
[data-theme="dark"] .contact-section .input-container textarea:focus,
[data-theme="dark"] .contact-section .input-container select:focus {
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .contact-section .input-container input::placeholder,
[data-theme="dark"] .contact-section .input-container textarea::placeholder {
color: #9ca3af;
}
/* Glowing Divider Lines */
[data-theme="dark"] .services-section::after,
[data-theme="dark"] .projects-section::after,
[data-theme="dark"] .testimonials-section::after,
[data-theme="dark"] .contact-section::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
/* Section Dividers with Glow Effect */
[data-theme="dark"] .section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
margin: 60px 0;
position: relative;
}
[data-theme="dark"] .section-divider::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}
/* Additional Dark Mode Section Backgrounds */
[data-theme="dark"] .hero-section {
background: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .about-section {
background: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .why-choose-section {
background: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .pricing-section {
background: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .stats-section {
background: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .values-section {
background: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .process-section {
background: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
[data-theme="dark"] .footer {
background: #000000 !important;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
/* Ensure all section containers have pure black backgrounds */
[data-theme="dark"] .container {
background: transparent;
}
[data-theme="dark"] .section {
background: #000000 !important;
}
/* Override any existing background colors */
[data-theme="dark"] * {
background-color: inherit;
}
[data-theme="dark"] .services-section,
[data-theme="dark"] .projects-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .contact-section {
background: #000000 !important;
}
/* Complete Black Background for Dark Mode */
[data-theme="dark"] html {
background: #000000 !important;
width: 100%;
margin: 0;
padding: 0;
}
[data-theme="dark"] body {
background: #000000 !important;
width: 100%;
margin: 0;
padding: 0;
min-height: 100vh;
}
[data-theme="dark"] .main-content {
background: #000000 !important;
width: 100%;
margin: 0;
padding: 0;
}
[data-theme="dark"] * {
box-sizing: border-box;
}
/* Enhanced White Borders for Better Section Definition */
[data-theme="dark"] .services-section,
[data-theme="dark"] .projects-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .about-section,
[data-theme="dark"] .why-choose-section,
[data-theme="dark"] .pricing-section,
[data-theme="dark"] .stats-section,
[data-theme="dark"] .values-section,
[data-theme="dark"] .process-section {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 60px 0;
border-left: 2px solid rgba(255, 255, 255, 0.2);
border-right: 2px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-sizing: border-box;
}
/* Ensure containers don't limit width */
[data-theme="dark"] .container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 20px;
box-sizing: border-box;
}
/* Full width for all section containers */
[data-theme="dark"] .section-container,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .wrapper {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0;
box-sizing: border-box;
}
/* Section Dividers with White Lines */
[data-theme="dark"] .section-divider {
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
margin: 0;
position: relative;
border: none;
}
[data-theme="dark"] .section-divider::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
/* Override any existing max-width constraints */
[data-theme="dark"] .max-w-6xl,
[data-theme="dark"] .max-w-5xl,
[data-theme="dark"] .max-w-4xl,
[data-theme="dark"] .max-w-3xl,
[data-theme="dark"] .max-w-2xl,
[data-theme="dark"] .max-w-xl,
[data-theme="dark"] .max-w-lg,
[data-theme="dark"] .max-w-md,
[data-theme="dark"] .max-w-sm {
max-width: none !important;
width: 100% !important;
}
/* Ensure all grid and flex containers are full width */
[data-theme="dark"] .grid,
[data-theme="dark"] .flex,
[data-theme="dark"] .grid-cols-1,
[data-theme="dark"] .grid-cols-2,
[data-theme="dark"] .grid-cols-3,
[data-theme="dark"] .grid-cols-4 {
width: 100% !important;
max-width: none !important;
}
/* Remove any centering that might create margins */
[data-theme="dark"] .mx-auto {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure all sections are edge-to-edge */
[data-theme="dark"] section {
width: 100vw !important;
max-width: none !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
box-sizing: border-box;
}
/* Override any existing section styling */
[data-theme="dark"] .services-section,
[data-theme="dark"] .projects-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .about-section,
[data-theme="dark"] .why-choose-section,
[data-theme="dark"] .pricing-section,
[data-theme="dark"] .stats-section,
[data-theme="dark"] .values-section,
[data-theme="dark"] .process-section {
width: 100vw !important;
max-width: none !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
box-sizing: border-box;
}
/* =============================
Section Content Centering
Horizontal and Vertical Alignment
============================= */
/* General Section Centering */
[data-theme="dark"] .services-section,
[data-theme="dark"] .projects-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .about-section,
[data-theme="dark"] .why-choose-section,
[data-theme="dark"] .pricing-section,
[data-theme="dark"] .stats-section,
[data-theme="dark"] .values-section,
[data-theme="dark"] .process-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Section Headers Centering */
[data-theme="dark"] .section-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
[data-theme="dark"] .section-header h2 {
text-align: center;
margin: 0 auto 20px;
width: 100%;
}
[data-theme="dark"] .section-subtitle {
text-align: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
/* Services Section Centering */
[data-theme="dark"] .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
justify-items: center;
}
[data-theme="dark"] .service-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
[data-theme="dark"] .service-content {
text-align: center;
width: 100%;
}
[data-theme="dark"] .service-content h3 {
text-align: center;
margin: 0 auto 15px;
}
[data-theme="dark"] .service-content p {
text-align: center;
margin: 0 auto 20px;
}
[data-theme="dark"] .service-features {
text-align: center;
width: 100%;
}
[data-theme="dark"] .service-features li {
text-align: left;
margin: 0 auto 10px;
max-width: 280px;
}
/* Projects Section Centering */
[data-theme="dark"] .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
justify-items: center;
}
[data-theme="dark"] .project-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
[data-theme="dark"] .project-content {
text-align: center;
width: 100%;
padding: 20px;
}
[data-theme="dark"] .project-title {
text-align: center;
margin: 0 auto 15px;
}
[data-theme="dark"] .project-description {
text-align: center;
margin: 0 auto;
}
/* Testimonials Section Centering */
[data-theme="dark"] .testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
justify-items: center;
}
[data-theme="dark"] .testimonial-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
[data-theme="dark"] .testimonial-content {
text-align: center;
width: 100%;
padding: 20px;
}
[data-theme="dark"] .testimonial-text {
text-align: center;
margin: 0 auto 20px;
}
[data-theme="dark"] .testimonial-author {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
[data-theme="dark"] .testimonial-name {
text-align: center;
margin: 0 auto 5px;
}
[data-theme="dark"] .testimonial-role {
text-align: center;
margin: 0 auto;
}
/* Contact Section Centering */
[data-theme="dark"] .contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
justify-items: center;
}
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .contact-form-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
[data-theme="dark"] .contact-method {
text-align: center;
width: 100%;
margin: 0 auto 20px;
}
[data-theme="dark"] .contact-method h4 {
text-align: center;
margin: 0 auto 10px;
}
[data-theme="dark"] .contact-method p {
text-align: center;
margin: 0 auto;
}
[data-theme="dark"] .form-header {
text-align: center;
width: 100%;
margin: 0 auto 30px;
}
[data-theme="dark"] .form-header h3 {
text-align: center;
margin: 0 auto 15px;
}
[data-theme="dark"] .form-header p {
text-align: center;
margin: 0 auto;
}
[data-theme="dark"] .form-row {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
width: 100%;
margin: 0 auto;
}
[data-theme="dark"] .input-container {
width: 100%;
margin: 0 auto;
}
[data-theme="dark"] .input-container input,
[data-theme="dark"] .input-container textarea,
[data-theme="dark"] .input-container select {
width: 100%;
margin: 0 auto;
}
[data-theme="dark"] .submit-button {
display: block;
margin: 0 auto;
width: 100%;
max-width: 200px;
}
/* Hero Section Centering */
[data-theme="dark"] .hero-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
[data-theme="dark"] .hero-title {
text-align: center;
margin: 0 auto 20px;
width: 100%;
}
[data-theme="dark"] .hero-subtitle {
text-align: center;
margin: 0 auto 30px;
max-width: 600px;
width: 100%;
}
[data-theme="dark"] .hero-buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
margin: 0 auto;
flex-wrap: wrap;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-secondary {
margin: 0 auto;
}
/* About Section Centering */
[data-theme="dark"] .about-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
align-items: center;
}
[data-theme="dark"] .about-text {
text-align: center;
width: 100%;
}
[data-theme="dark"] .about-text h2 {
text-align: center;
margin: 0 auto 20px;
}
[data-theme="dark"] .about-text p {
text-align: center;
margin: 0 auto 30px;
}
[data-theme="dark"] .about-features {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
[data-theme="dark"] .feature-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 400px;
margin: 0 auto 20px;
}
[data-theme="dark"] .feature-content {
text-align: center;
width: 100%;
}
[data-theme="dark"] .feature-content h3 {
text-align: center;
margin: 0 auto 10px;
}
[data-theme="dark"] .feature-content p {
text-align: center;
margin: 0 auto;
}
/* Stats Section Centering */
[data-theme="dark"] .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
justify-items: center;
}
[data-theme="dark"] .stat-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 200px;
margin: 0 auto;
}
[data-theme="dark"] .stat-number {
text-align: center;
margin: 0 auto 10px;
}
[data-theme="dark"] .stat-label {
text-align: center;
margin: 0 auto;
}
/* Values and Process Sections Centering */
[data-theme="dark"] .values-stack,
[data-theme="dark"] .process-flow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
justify-items: center;
}
[data-theme="dark"] .value-item,
[data-theme="dark"] .process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
[data-theme="dark"] .step-content {
text-align: center;
width: 100%;
}
[data-theme="dark"] .step-content h4 {
text-align: center;
margin: 0 auto 15px;
}
[data-theme="dark"] .step-content p {
text-align: center;
margin: 0 auto;
}
/* =============================
Animated Grid Background
Fixed diagonal movement with glowing effect
============================= */
/* Base grid background for all themes */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
background-position: 0 0, 0 0;
animation: gridMove 20s linear infinite;
pointer-events: none;
z-index: -1;
opacity: 0.3;
}
/* Light theme grid styling */
[data-theme="light"] body::before {
background-image:
linear-gradient(rgba(37, 99, 235, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(37, 99, 235, 0.15) 1px, transparent 1px);
background-size: 50px 50px;
opacity: 0.4;
box-shadow:
inset 0 0 100px rgba(37, 99, 235, 0.05),
0 0 200px rgba(37, 99, 235, 0.03);
}
/* Dark theme grid styling */
[data-theme="dark"] body::before {
background-image:
linear-gradient(rgba(96, 165, 250, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(96, 165, 250, 0.2) 1px, transparent 1px);
background-size: 50px 50px;
opacity: 0.6;
box-shadow:
inset 0 0 100px rgba(96, 165, 250, 0.1),
0 0 200px rgba(96, 165, 250, 0.05);
}
/* Diagonal movement animation */
@keyframes gridMove {
0% {
background-position: 0 0, 0 0;
transform: translate(0, 0);
}
25% {
background-position: 12.5px 12.5px, 12.5px 12.5px;
transform: translate(2px, 2px);
}
50% {
background-position: 25px 25px, 25px 25px;
transform: translate(4px, 4px);
}
75% {
background-position: 37.5px 37.5px, 37.5px 37.5px;
transform: translate(2px, 2px);
}
100% {
background-position: 50px 50px, 50px 50px;
transform: translate(0, 0);
}
}
/* Additional grid overlay for enhanced effect */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg, transparent 48%, rgba(59, 130, 246, 0.03) 49%, rgba(59, 130, 246, 0.03) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(59, 130, 246, 0.03) 49%, rgba(59, 130, 246, 0.03) 51%, transparent 52%);
background-size: 100px 100px;
background-position: 0 0, 0 0;
animation: diagonalMove 30s linear infinite;
pointer-events: none;
z-index: -1;
opacity: 0.2;
}
/* Light theme diagonal overlay */
[data-theme="light"] body::after {
background-image:
linear-gradient(45deg, transparent 48%, rgba(37, 99, 235, 0.05) 49%, rgba(37, 99, 235, 0.05) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(37, 99, 235, 0.05) 49%, rgba(37, 99, 235, 0.05) 51%, transparent 52%);
opacity: 0.3;
}
/* Dark theme diagonal overlay */
[data-theme="dark"] body::after {
background-image:
linear-gradient(45deg, transparent 48%, rgba(96, 165, 250, 0.08) 49%, rgba(96, 165, 250, 0.08) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(96, 165, 250, 0.08) 49%, rgba(96, 165, 250, 0.08) 51%, transparent 52%);
opacity: 0.4;
}
/* Diagonal movement animation for overlay */
@keyframes diagonalMove {
0% {
background-position: 0 0, 0 0;
transform: translate(0, 0) rotate(0deg);
}
25% {
background-position: 25px 25px, -25px 25px;
transform: translate(1px, 1px) rotate(0.5deg);
}
50% {
background-position: 50px 50px, -50px 50px;
transform: translate(2px, 2px) rotate(1deg);
}
75% {
background-position: 75px 75px, -75px 75px;
transform: translate(1px, 1px) rotate(0.5deg);
}
100% {
background-position: 100px 100px, -100px 100px;
transform: translate(0, 0) rotate(0deg);
}
}
/* Pulsing glow effect */
@keyframes gridGlow {
0%, 100% {
opacity: 0.3;
filter: blur(0px);
}
50% {
opacity: 0.6;
filter: blur(1px);
}
}
/* Apply glow animation to grid */
[data-theme="light"] body::before {
animation: gridMove 20s linear infinite, gridGlow 8s ease-in-out infinite;
}
[data-theme="dark"] body::before {
animation: gridMove 20s linear infinite, gridGlow 8s ease-in-out infinite;
}
/* Enhanced grid for dark mode with more prominent lines */
[data-theme="dark"] body::before {
background-image:
linear-gradient(rgba(96, 165, 250, 0.25) 1px, transparent 1px),
linear-gradient(90deg, rgba(96, 165, 250, 0.25) 1px, transparent 1px),
linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
background-position: 0 0, 0 0, 12.5px 12.5px, 12.5px 12.5px;
}
/* Enhanced grid for light mode with subtle lines */
[data-theme="light"] body::before {
background-image:
linear-gradient(rgba(37, 99, 235, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(37, 99, 235, 0.2) 1px, transparent 1px),
linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
background-position: 0 0, 0 0, 12.5px 12.5px, 12.5px 12.5px;
}
/* Ensure content appears above grid */
[data-theme="dark"] .services-section,
[data-theme="dark"] .projects-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .about-section,
[data-theme="dark"] .why-choose-section,
[data-theme="dark"] .pricing-section,
[data-theme="dark"] .stats-section,
[data-theme="dark"] .values-section,
[data-theme="dark"] .process-section,
[data-theme="light"] .services-section,
[data-theme="light"] .projects-section,
[data-theme="light"] .testimonials-section,
[data-theme="light"] .contact-section,
[data-theme="light"] .hero-section,
[data-theme="light"] .about-section,
[data-theme="light"] .why-choose-section,
[data-theme="light"] .pricing-section,
[data-theme="light"] .stats-section,
[data-theme="light"] .values-section,
[data-theme="light"] .process-section {
position: relative;
z-index: 1;
}
/* Ensure navigation appears above grid */
.top-nav {
position: relative;
z-index: 1000;
}
/* Grid performance optimization */
body::before,
body::after {
will-change: transform, background-position;
backface-visibility: hidden;
transform: translateZ(0);
}
/* =============================
Section-Specific Interactive Backgrounds
Modern aesthetic with unique designs for each section
============================= */
/* Services Section - Floating Geometric Shapes */
.services-section {
position: relative;
overflow: hidden;
}
.services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 60%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
animation: floatShapes 20s ease-in-out infinite;
z-index: -1;
}
.services-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg, transparent 48%, rgba(59, 130, 246, 0.05) 49%, rgba(59, 130, 246, 0.05) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(147, 51, 234, 0.05) 49%, rgba(147, 51, 234, 0.05) 51%, transparent 52%);
background-size: 100px 100px, 80px 80px;
background-position: 0 0, 50px 50px;
animation: diagonalFloat 25s linear infinite;
z-index: -1;
}
@keyframes floatShapes {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-20px) rotate(90deg); }
50% { transform: translateY(-10px) rotate(180deg); }
75% { transform: translateY(-30px) rotate(270deg); }
}
@keyframes diagonalFloat {
0% { background-position: 0 0, 50px 50px; }
100% { background-position: 100px 100px, 150px 150px; }
}
/* Dark mode services background */
[data-theme="dark"] .services-section::before {
background:
radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 60%, rgba(52, 211, 153, 0.15) 0%, transparent 50%);
}
[data-theme="dark"] .services-section::after {
background-image:
linear-gradient(45deg, transparent 48%, rgba(96, 165, 250, 0.08) 49%, rgba(96, 165, 250, 0.08) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(168, 85, 247, 0.08) 49%, rgba(168, 85, 247, 0.08) 51%, transparent 52%);
}
/* Projects Section - Animated Dots Pattern */
.projects-section {
position: relative;
overflow: hidden;
}
.projects-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.2) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(147, 51, 234, 0.2) 2px, transparent 2px),
radial-gradient(circle at 50% 10%, rgba(16, 185, 129, 0.2) 2px, transparent 2px),
radial-gradient(circle at 10% 90%, rgba(245, 158, 11, 0.2) 2px, transparent 2px);
background-size: 60px 60px, 80px 80px, 100px 100px, 70px 70px;
background-position: 0 0, 30px 30px, 15px 15px, 45px 45px;
animation: dotPulse 15s ease-in-out infinite;
z-index: -1;
}
.projects-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
linear-gradient(45deg, rgba(147, 51, 234, 0.05) 0%, transparent 50%);
animation: gradientShift 20s ease-in-out infinite;
z-index: -1;
}
@keyframes dotPulse {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.6;
}
50% {
transform: scale(1.2) rotate(180deg);
opacity: 1;
}
}
@keyframes gradientShift {
0%, 100% { transform: translateX(0) translateY(0); }
25% { transform: translateX(20px) translateY(-20px); }
50% { transform: translateX(-20px) translateY(20px); }
75% { transform: translateX(20px) translateY(20px); }
}
/* Dark mode projects background */
[data-theme="dark"] .projects-section::before {
background-image:
radial-gradient(circle at 25% 25%, rgba(96, 165, 250, 0.3) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(168, 85, 247, 0.3) 2px, transparent 2px),
radial-gradient(circle at 50% 10%, rgba(52, 211, 153, 0.3) 2px, transparent 2px),
radial-gradient(circle at 10% 90%, rgba(251, 191, 36, 0.3) 2px, transparent 2px);
}
[data-theme="dark"] .projects-section::after {
background:
linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
linear-gradient(45deg, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}
/* Testimonials Section - Wave Pattern */
.testimonials-section {
position: relative;
overflow: hidden;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(45deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
linear-gradient(-45deg, rgba(147, 51, 234, 0.1) 0%, transparent 50%);
animation: waveMotion 18s ease-in-out infinite;
z-index: -1;
}
.testimonials-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(90deg, transparent 48%, rgba(59, 130, 246, 0.1) 49%, rgba(59, 130, 246, 0.1) 51%, transparent 52%),
linear-gradient(0deg, transparent 48%, rgba(147, 51, 234, 0.1) 49%, rgba(147, 51, 234, 0.1) 51%, transparent 52%);
background-size: 120px 120px, 80px 80px;
background-position: 0 0, 60px 60px;
animation: wavePattern 22s linear infinite;
z-index: -1;
}
@keyframes waveMotion {
0%, 100% {
transform: translateX(0) translateY(0) rotate(0deg);
opacity: 0.6;
}
25% {
transform: translateX(30px) translateY(-20px) rotate(90deg);
opacity: 0.8;
}
50% {
transform: translateX(-20px) translateY(30px) rotate(180deg);
opacity: 1;
}
75% {
transform: translateX(20px) translateY(-10px) rotate(270deg);
opacity: 0.8;
}
}
@keyframes wavePattern {
0% { background-position: 0 0, 60px 60px; }
100% { background-position: 120px 120px, 180px 180px; }
}
/* Dark mode testimonials background */
[data-theme="dark"] .testimonials-section::before {
background:
linear-gradient(45deg, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
linear-gradient(-45deg, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
}
[data-theme="dark"] .testimonials-section::after {
background-image:
linear-gradient(90deg, transparent 48%, rgba(96, 165, 250, 0.15) 49%, rgba(96, 165, 250, 0.15) 51%, transparent 52%),
linear-gradient(0deg, transparent 48%, rgba(168, 85, 247, 0.15) 49%, rgba(168, 85, 247, 0.15) 51%, transparent 52%);
}
/* Contact Section - Hexagonal Pattern */
.contact-section {
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(30deg, transparent 48%, rgba(59, 130, 246, 0.1) 49%, rgba(59, 130, 246, 0.1) 51%, transparent 52%),
linear-gradient(-30deg, transparent 48%, rgba(147, 51, 234, 0.1) 49%, rgba(147, 51, 234, 0.1) 51%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(16, 185, 129, 0.1) 49%, rgba(16, 185, 129, 0.1) 51%, transparent 52%);
background-size: 100px 100px, 100px 100px, 100px 100px;
background-position: 0 0, 50px 50px, 25px 25px;
animation: hexRotate 25s linear infinite;
z-index: -1;
}
.contact-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
radial-gradient(circle at 70% 70%, rgba(147, 51, 234, 0.08) 0%, transparent 60%);
animation: hexPulse 20s ease-in-out infinite;
z-index: -1;
}
@keyframes hexRotate {
0% {
background-position: 0 0, 50px 50px, 25px 25px;
transform: rotate(0deg);
}
100% {
background-position: 100px 100px, 150px 150px, 125px 125px;
transform: rotate(360deg);
}
}
@keyframes hexPulse {
0%, 100% {
transform: scale(1) translate(0, 0);
opacity: 0.6;
}
50% {
transform: scale(1.1) translate(10px, -10px);
opacity: 1;
}
}
/* Dark mode contact background */
[data-theme="dark"] .contact-section::before {
background-image:
linear-gradient(30deg, transparent 48%, rgba(96, 165, 250, 0.15) 49%, rgba(96, 165, 250, 0.15) 51%, transparent 52%),
linear-gradient(-30deg, transparent 48%, rgba(168, 85, 247, 0.15) 49%, rgba(168, 85, 247, 0.15) 51%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(52, 211, 153, 0.15) 49%, rgba(52, 211, 153, 0.15) 51%, transparent 52%);
}
[data-theme="dark"] .contact-section::after {
background:
radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.12) 0%, transparent 60%),
radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.12) 0%, transparent 60%);
}
/* About Section - Circuit Pattern */
.about-section {
position: relative;
overflow: hidden;
}
.about-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(0deg, transparent 48%, rgba(59, 130, 246, 0.1) 49%, rgba(59, 130, 246, 0.1) 51%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(147, 51, 234, 0.1) 49%, rgba(147, 51, 234, 0.1) 51%, transparent 52%),
linear-gradient(45deg, transparent 48%, rgba(16, 185, 129, 0.1) 49%, rgba(16, 185, 129, 0.1) 51%, transparent 52%);
background-size: 80px 80px, 80px 80px, 60px 60px;
background-position: 0 0, 40px 40px, 20px 20px;
animation: circuitFlow 30s linear infinite;
z-index: -1;
}
.about-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
linear-gradient(45deg, rgba(147, 51, 234, 0.05) 0%, transparent 50%);
animation: circuitPulse 15s ease-in-out infinite;
z-index: -1;
}
@keyframes circuitFlow {
0% {
background-position: 0 0, 40px 40px, 20px 20px;
opacity: 0.6;
}
50% {
background-position: 40px 40px, 80px 80px, 60px 60px;
opacity: 1;
}
100% {
background-position: 80px 80px, 120px 120px, 100px 100px;
opacity: 0.6;
}
}
@keyframes circuitPulse {
0%, 100% {
transform: scale(1);
opacity: 0.4;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
/* Dark mode about background */
[data-theme="dark"] .about-section::before {
background-image:
linear-gradient(0deg, transparent 48%, rgba(96, 165, 250, 0.15) 49%, rgba(96, 165, 250, 0.15) 51%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(168, 85, 247, 0.15) 49%, rgba(168, 85, 247, 0.15) 51%, transparent 52%),
linear-gradient(45deg, transparent 48%, rgba(52, 211, 153, 0.15) 49%, rgba(52, 211, 153, 0.15) 51%, transparent 52%);
}
[data-theme="dark"] .about-section::after {
background:
linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
linear-gradient(45deg, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}
/* Stats Section - Data Visualization Pattern */
.stats-section {
position: relative;
overflow: hidden;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(0deg, transparent 48%, rgba(59, 130, 246, 0.1) 49%, rgba(59, 130, 246, 0.1) 51%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(147, 51, 234, 0.1) 49%, rgba(147, 51, 234, 0.1) 51%, transparent 52%),
linear-gradient(45deg, transparent 48%, rgba(16, 185, 129, 0.1) 49%, rgba(16, 185, 129, 0.1) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(245, 158, 11, 0.1) 49%, rgba(245, 158, 11, 0.1) 51%, transparent 52%);
background-size: 60px 60px, 60px 60px, 40px 40px, 40px 40px;
background-position: 0 0, 30px 30px, 15px 15px, 45px 45px;
animation: dataFlow 20s linear infinite;
z-index: -1;
}
.stats-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(147, 51, 234, 0.08) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
animation: dataPulse 25s ease-in-out infinite;
z-index: -1;
}
@keyframes dataFlow {
0% {
background-position: 0 0, 30px 30px, 15px 15px, 45px 45px;
transform: translateX(0);
}
100% {
background-position: 60px 60px, 90px 90px, 75px 75px, 105px 105px;
transform: translateX(20px);
}
}
@keyframes dataPulse {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.5;
}
33% {
transform: scale(1.1) rotate(120deg);
opacity: 0.8;
}
66% {
transform: scale(0.9) rotate(240deg);
opacity: 0.6;
}
}
/* Dark mode stats background */
[data-theme="dark"] .stats-section::before {
background-image:
linear-gradient(0deg, transparent 48%, rgba(96, 165, 250, 0.15) 49%, rgba(96, 165, 250, 0.15) 51%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(168, 85, 247, 0.15) 49%, rgba(168, 85, 247, 0.15) 51%, transparent 52%),
linear-gradient(45deg, transparent 48%, rgba(52, 211, 153, 0.15) 49%, rgba(52, 211, 153, 0.15) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(251, 191, 36, 0.15) 49%, rgba(251, 191, 36, 0.15) 51%, transparent 52%);
}
[data-theme="dark"] .stats-section::after {
background:
radial-gradient(circle at 25% 25%, rgba(96, 165, 250, 0.12) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.12) 0%, transparent 50%);
}
/* Values Section - Organic Flow Pattern */
.values-section {
position: relative;
overflow: hidden;
}
.values-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 60%),
radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 60%);
animation: organicFlow 22s ease-in-out infinite;
z-index: -1;
}
.values-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg, transparent 48%, rgba(59, 130, 246, 0.05) 49%, rgba(59, 130, 246, 0.05) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(147, 51, 234, 0.05) 49%, rgba(147, 51, 234, 0.05) 51%, transparent 52%);
background-size: 120px 120px, 100px 100px;
background-position: 0 0, 60px 60px;
animation: organicPattern 28s linear infinite;
z-index: -1;
}
@keyframes organicFlow {
0%, 100% {
transform: translateX(0) translateY(0) scale(1);
opacity: 0.6;
}
25% {
transform: translateX(20px) translateY(-30px) scale(1.1);
opacity: 0.8;
}
50% {
transform: translateX(-20px) translateY(20px) scale(0.9);
opacity: 1;
}
75% {
transform: translateX(30px) translateY(-10px) scale(1.05);
opacity: 0.7;
}
}
@keyframes organicPattern {
0% { background-position: 0 0, 60px 60px; }
100% { background-position: 120px 120px, 180px 180px; }
}
/* Dark mode values background */
[data-theme="dark"] .values-section::before {
background:
radial-gradient(ellipse at 20% 20%, rgba(96, 165, 250, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at 50% 50%, rgba(52, 211, 153, 0.15) 0%, transparent 60%);
}
[data-theme="dark"] .values-section::after {
background-image:
linear-gradient(45deg, transparent 48%, rgba(96, 165, 250, 0.08) 49%, rgba(96, 165, 250, 0.08) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(168, 85, 247, 0.08) 49%, rgba(168, 85, 247, 0.08) 51%, transparent 52%);
}
/* Process Section - Timeline Pattern */
.process-section {
position: relative;
overflow: hidden;
}
.process-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(90deg, transparent 48%, rgba(59, 130, 246, 0.1) 49%, rgba(59, 130, 246, 0.1) 51%, transparent 52%),
linear-gradient(0deg, transparent 48%, rgba(147, 51, 234, 0.1) 49%, rgba(147, 51, 234, 0.1) 51%, transparent 52%);
background-size: 100px 100px, 80px 80px;
background-position: 0 0, 50px 50px;
animation: timelineFlow 24s linear infinite;
z-index: -1;
}
.process-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
linear-gradient(45deg, rgba(147, 51, 234, 0.05) 0%, transparent 50%);
animation: timelinePulse 18s ease-in-out infinite;
z-index: -1;
}
@keyframes timelineFlow {
0% {
background-position: 0 0, 50px 50px;
transform: translateX(0);
}
100% {
background-position: 100px 100px, 150px 150px;
transform: translateX(20px);
}
}
@keyframes timelinePulse {
0%, 100% {
transform: scale(1) translateY(0);
opacity: 0.5;
}
50% {
transform: scale(1.05) translateY(-10px);
opacity: 0.8;
}
}
/* Dark mode process background */
[data-theme="dark"] .process-section::before {
background-image:
linear-gradient(90deg, transparent 48%, rgba(96, 165, 250, 0.15) 49%, rgba(96, 165, 250, 0.15) 51%, transparent 52%),
linear-gradient(0deg, transparent 48%, rgba(168, 85, 247, 0.15) 49%, rgba(168, 85, 247, 0.15) 51%, transparent 52%);
}
[data-theme="dark"] .process-section::after {
background:
linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
linear-gradient(45deg, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}
/* Pricing Section - Tech Grid Pattern */
.pricing-section {
position: relative;
overflow: hidden;
}
.pricing-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(0deg, transparent 48%, rgba(59, 130, 246, 0.1) 49%, rgba(59, 130, 246, 0.1) 51%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(147, 51, 234, 0.1) 49%, rgba(147, 51, 234, 0.1) 51%, transparent 52%),
linear-gradient(45deg, transparent 48%, rgba(16, 185, 129, 0.1) 49%, rgba(16, 185, 129, 0.1) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(245, 158, 11, 0.1) 49%, rgba(245, 158, 11, 0.1) 51%, transparent 52%);
background-size: 60px 60px, 60px 60px, 40px 40px, 40px 40px;
background-position: 0 0, 30px 30px, 15px 15px, 45px 45px;
animation: techGrid 26s linear infinite;
z-index: -1;
}
.pricing-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(147, 51, 234, 0.08) 0%, transparent 50%);
animation: techPulse 20s ease-in-out infinite;
z-index: -1;
}
@keyframes techGrid {
0% {
background-position: 0 0, 30px 30px, 15px 15px, 45px 45px;
transform: rotate(0deg);
}
100% {
background-position: 60px 60px, 90px 90px, 75px 75px, 105px 105px;
transform: rotate(360deg);
}
}
@keyframes techPulse {
0%, 100% {
transform: scale(1) translate(0, 0);
opacity: 0.6;
}
50% {
transform: scale(1.1) translate(10px, -10px);
opacity: 1;
}
}
/* Dark mode pricing background */
[data-theme="dark"] .pricing-section::before {
background-image:
linear-gradient(0deg, transparent 48%, rgba(96, 165, 250, 0.15) 49%, rgba(96, 165, 250, 0.15) 51%, transparent 52%),
linear-gradient(90deg, transparent 48%, rgba(168, 85, 247, 0.15) 49%, rgba(168, 85, 247, 0.15) 51%, transparent 52%),
linear-gradient(45deg, transparent 48%, rgba(52, 211, 153, 0.15) 49%, rgba(52, 211, 153, 0.15) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(251, 191, 36, 0.15) 49%, rgba(251, 191, 36, 0.15) 51%, transparent 52%);
}
[data-theme="dark"] .pricing-section::after {
background:
radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.12) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.12) 0%, transparent 50%);
}
/* Performance optimization for all section backgrounds */
.services-section::before,
.services-section::after,
.projects-section::before,
.projects-section::after,
.testimonials-section::before,
.testimonials-section::after,
.contact-section::before,
.contact-section::after,
.about-section::before,
.about-section::after,
.stats-section::before,
.stats-section::after,
.values-section::before,
.values-section::after,
.process-section::before,
.process-section::after,
.pricing-section::before,
.pricing-section::after {
will-change: transform, background-position, opacity;
backface-visibility: hidden;
transform: translateZ(0);
}
/* Light mode navbar when scrolled - ensure proper contrast on white background */
[data-theme="light"] .top-nav.scrolled .nav-pill {
background: #f8fafc;
border: 1px solid var(--border-medium);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .top-nav.scrolled .nav-link {
color: var(--ink);
}
[data-theme="light"] .top-nav.scrolled .nav-link:hover {
color: var(--ink);
background: var(--shadow-light);
}
[data-theme="light"] .top-nav.scrolled .nav-link.active {
color: var(--text-white);
background: var(--blue);
}
[data-theme="light"] .top-nav.scrolled .logo-tech {
color: var(--blue);
}
[data-theme="light"] .top-nav.scrolled .logo-mates {
color: var(--blue);
}
[data-theme="light"] .top-nav.scrolled .logo-subtitle {
color: var(--muted);
}
[data-theme="light"] .top-nav.scrolled .theme-toggle {
background: var(--bg-card);
color: var(--muted);
border-color: var(--border-medium);
}
[data-theme="light"] .top-nav.scrolled .theme-toggle:hover {
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
}
[data-theme="light"] .top-nav.scrolled .cta-button {
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
color: var(--text-white);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 4px 15px rgba(37, 99, 235, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .top-nav.scrolled .cta-button:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-color: rgba(255, 255, 255, 0.4);
box-shadow:
0 8px 25px rgba(59, 130, 246, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.2);
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes rotateGlow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Top Nav Scrolled State */
.top-nav.scrolled {
background: transparent;
backdrop-filter: none;
border-bottom: none;
padding: 15px 0;
}
.top-nav.scrolled .logo-tech {
color: #1d4ed8;
text-shadow: 0 2px 10px rgba(29, 78, 216, 0.3);
}
.top-nav.scrolled .logo-mates {
color: #059669;
text-shadow: 0 2px 10px rgba(5, 150, 105, 0.3);
}
.top-nav.scrolled .logo-subtitle {
color: #4b5563;
}
.top-nav.scrolled .nav-pill {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
/* =============================
Mobile Menu Toggle
============================= */
.mobile-menu-toggle {
display: none;
z-index: 1001;
}
.hamburger {
background: none;
border: none;
cursor: pointer;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 30px;
transition: all 0.3s ease;
}
.hamburger-line {
width: 100%;
height: 3px;
background: #3b82f6;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
}
.hamburger.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.hamburger.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* =============================
Mobile Navigation
============================= */
.mobile-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: none;
}
.mobile-nav.active {
transform: translateX(0);
}
.mobile-nav-content {
padding: 100px 20px 40px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 50px;
}
.mobile-nav-link {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
text-decoration: none;
padding: 15px 30px;
border-radius: 15px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.mobile-nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
transition: left 0.6s ease;
}
.mobile-nav-link:hover::before {
left: 100%;
}
.mobile-nav-link:hover {
color: #3b82f6;
background: rgba(59, 130, 246, 0.1);
transform: translateY(-3px);
}
.mobile-nav-cta {
margin-top: 20px;
}
.mobile-cta-button {
background: #3b82f6;
color: #ffffff;
border: none;
padding: 16px 32px;
border-radius: 25px;
font-weight: 600;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
position: relative;
overflow: hidden;
}
.mobile-cta-button::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 27px;
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(59, 130, 246, 0.3) 60deg,
rgba(96, 165, 250, 0.5) 120deg,
rgba(59, 130, 246, 0.3) 180deg,
transparent 240deg,
transparent 360deg
);
animation: rotateGlow 3s linear infinite;
z-index: -1;
opacity: 0.8;
}
.mobile-cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}
/* =============================
Responsive Design
============================= */
/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
.hero-title {
font-size: 4rem;
}
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
.projects-grid {
grid-template-columns: repeat(3, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Desktop (992px to 1199px) */
@media (max-width: 1199px) {
.container {
max-width: 960px;
}
.hero-title {
font-size: 3.5rem;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
.nav-pill {
max-width: 650px;
}
.nav-link {
padding: 12px 18px;
}
}
/* Tablet (768px to 991px) */
@media (max-width: 991px) {
.nav-center {
display: none;
}
.nav-right {
display: none;
}
.nav-pill {
max-width: 500px;
}
.nav-link {
padding: 12px 14px;
font-size: 13px;
}
.mobile-menu-toggle {
display: block;
}
.mobile-nav {
display: block;
}
.hero {
margin-top: 0;
padding: 100px 0 60px;
}
.hero-title {
font-size: 3rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.about-content {
grid-template-columns: 1fr;
gap: 50px;
}
.about-text {
padding-right: 0;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-content {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
/* Mobile Large (576px to 767px) */
@media (max-width: 767px) {
.nav-container {
padding: 0 15px;
}
.logo-tech,
.logo-mates {
font-size: 22px;
}
.logo-subtitle {
font-size: 8px;
}
.hero {
padding: 80px 0 50px;
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-ctas {
flex-direction: column;
align-items: center;
gap: 16px;
}
.btn-hero {
width: 100%;
max-width: 280px;
}
.hero-stats {
flex-direction: column;
align-items: center;
gap: 20px;
}
.stat-item {
width: 100%;
max-width: 280px;
justify-content: center;
}
.services-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.projects-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.section {
padding: 60px 0;
}
.section-header {
margin-bottom: 40px;
}
.about-stats {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.value-items {
grid-template-columns: 1fr;
}
.process-steps {
gap: 16px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
}
/* Mobile Small (up to 575px) */
@media (max-width: 575px) {
.nav-container {
padding: 0 12px;
}
.project-carousel-container {
padding: 0 20px;
}
.carousel-arrow {
width: 35px;
height: 35px;
font-size: 14px;
}
.project-carousel-track .project-card {
width: calc(50% - 15px);
min-width: 280px;
}
.logo-tech,
.logo-mates {
font-size: 20px;
}
.logo-subtitle {
font-size: 7px;
}
.hamburger {
width: 25px;
height: 25px;
}
.hamburger-line {
height: 2px;
}
.mobile-nav-content {
padding: 80px 15px 30px;
}
.mobile-nav-link {
font-size: 20px;
padding: 12px 24px;
}
.mobile-cta-button {
padding: 14px 28px;
font-size: 16px;
}
.hero {
padding: 70px 0 40px;
}
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-badge {
padding: 8px 16px;
font-size: 12px;
margin-bottom: 20px;
}
.btn-hero {
padding: 12px 20px;
font-size: 14px;
}
.stat-item {
padding: 12px 16px;
}
.stat-icon {
width: 32px;
height: 32px;
font-size: 16px;
}
.stat-number {
font-size: 20px;
}
.stat-label {
font-size: 11px;
}
.section {
padding: 40px 0;
}
.section-header h2 {
font-size: 28px;
}
.section-subtitle {
font-size: 16px;
}
.service-card,
.project-card,
.testimonial-card {
padding: 20px;
}
.contact-form {
padding: 20px;
}
.about-stats {
grid-template-columns: 1fr;
}
.stat-box {
padding: 16px;
}
.stat-number {
font-size: 24px;
}
.values-stack,
.process-flow {
padding: 20px;
}
.value-item {
padding: 12px;
}
.process-step {
padding: 16px;
}
.step-number {
font-size: 20px;
min-width: 40px;
}
.step-content h4 {
font-size: 16px;
}
.step-content p {
font-size: 13px;
}
.project-filters {
flex-direction: column;
align-items: center;
gap: 8px;
}
.filter-btn {
width: 100%;
max-width: 200px;
padding: 10px 16px;
font-size: 14px;
}
.project-metrics {
grid-template-columns: 1fr;
gap: 12px;
}
.metric {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: rgba(59, 130, 246, 0.05);
border-radius: 12px;
}
.metric-value {
font-size: 16px;
margin-bottom: 0;
}
.metric-label {
font-size: 12px;
}
.testimonial-content p {
font-size: 16px;
}
.author-avatar {
width: 60px;
height: 60px;
}
.author-info h4 {
font-size: 16px;
}
.author-info span {
font-size: 13px;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px 16px;
font-size: 14px;
}
.contact-form .btn {
padding: 14px 20px;
font-size: 16px;
}
}
/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
.container {
padding: 0 10px;
}
.hero-title {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 0.9rem;
}
.mobile-nav-link {
font-size: 18px;
padding: 10px 20px;
}
.mobile-cta-button {
padding: 12px 24px;
font-size: 14px;
}
.section-header h2 {
font-size: 24px;
}
.service-card,
.project-card,
.testimonial-card {
padding: 16px;
}
.contact-form {
padding: 16px;
}
.project-carousel-track .project-card {
width: 100%;
min-width: 250px;
}
}
/* =============================
Base
============================= */
*{box-sizing:border-box}
/* =============================
Smooth Scrolling
============================= */
html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* Account for fixed header */
}
/* Enhanced smooth scrolling for all browsers */
* {
scroll-behavior: smooth;
}
/* Custom scrollbar styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 4px;
transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
transform: scale(1.1);
}
/* Firefox scrollbar styling */
* {
scrollbar-width: thin;
scrollbar-color: #3b82f6 #f1f1f1;
}
/* =============================
Scroll Animations
============================= */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Make hero fade-in elements visible by default */
.hero .fade-in {
opacity: 1;
transform: translateY(0);
}
/* Ensure all hero content is visible */
.hero h1,
.hero p,
.hero .hero-badge,
.hero .hero-ctas,
.hero .hero-stats,
.hero .text-reveal {
opacity: 1 !important;
visibility: visible !important;
}
.slide-in-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-left.visible {
opacity: 1;
transform: translateX(0);
}
.slide-in-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-right.visible {
opacity: 1;
transform: translateX(0);
}
.scale-in {
opacity: 0;
transform: scale(0.8);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scale-in.visible {
opacity: 1;
transform: scale(1);
}
.rotate-in {
opacity: 0;
transform: rotate(-10deg) scale(0.9);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.rotate-in.visible {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* Staggered animations */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
/* Parallax effects */
.parallax-slow {
transform: translateY(0);
transition: transform 0.1s ease-out;
}
.parallax-fast {
transform: translateY(0);
transition: transform 0.1s ease-out;
}
/* Floating animations */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.float-animation {
animation: float 6s ease-in-out infinite;
}
@keyframes floatReverse {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(20px); }
}
.float-reverse {
animation: floatReverse 6s ease-in-out infinite;
}
/* Pulse animations */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse-animation {
animation: pulse 4s ease-in-out infinite;
}
/* Glow effects */
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); }
}
.glow-animation {
animation: glow 3s ease-in-out infinite;
}
/* Wave animations */
@keyframes wave {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
75% { transform: rotate(-5deg); }
}
.wave-animation {
animation: wave 4s ease-in-out infinite;
}
/* Gradient animations */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-animation {
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
}
/* Text reveal animations */
@keyframes textReveal {
0% {
opacity: 0;
transform: translateY(20px);
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
100% {
opacity: 1;
transform: translateY(0);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
.text-reveal {
animation: textReveal 1s ease-out forwards;
}
/* Hover effects */
.hover-lift {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.hover-scale {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:hover {
transform: scale(1.05);
}
.hover-rotate {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-rotate:hover {
transform: rotate(5deg) scale(1.05);
}
/* Loading animations */
@keyframes shimmer {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
.shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200px 100%;
animation: shimmer 1.5s infinite;
}
/* Progress bar animation */
@keyframes progressFill {
0% { width: 0%; }
100% { width: var(--progress-width, 100%); }
}
.progress-animation {
animation: progressFill 2s ease-out forwards;
}
/* =============================
Enhanced Navigation Styles
============================= */
.nav-link {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.nav-link-text {
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.nav-link-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 25px;
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 1;
}
.nav-link:hover .nav-link-bg {
transform: translateY(0);
}
.nav-link:hover .nav-link-text {
color: white;
}
.theme-toggle {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
transition: all 0.3s ease;
margin-right: 15px;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
/* =============================
Why Choose Us Section Styles
============================= */
.why-choose-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 100px 0;
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 60px;
}
.why-choose-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.why-choose-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.why-choose-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.card-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
overflow: hidden;
}
.card-icon::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.6s ease;
}
.why-choose-card:hover .card-icon::before {
animation: shimmer 1.5s ease-in-out;
}
.card-icon i {
font-size: 2rem;
color: white;
z-index: 2;
position: relative;
}
.card-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.card-content p {
color: #374151;
line-height: 1.6;
margin-bottom: 25px;
}
.card-stats {
display: flex;
gap: 20px;
margin-top: 20px;
}
.stat {
text-align: center;
flex: 1;
}
.stat-number {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: #3b82f6;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.8rem;
color: #374151;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.trust-indicators {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 80px;
padding: 40px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.trust-item {
display: flex;
align-items: center;
gap: 20px;
text-align: left;
}
.trust-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.trust-icon i {
font-size: 1.5rem;
color: white;
}
.trust-content h4 {
font-size: 2rem;
font-weight: 800;
color: #1a1a1a;
margin: 0 0 5px 0;
}
.trust-content p {
color: #374151;
margin: 0;
font-weight: 600;
}
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
/* =============================
Pricing Section Styles
============================= */
.pricing-section {
background: #1a1a1a;
color: white;
padding: 100px 0;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 60px;
}
.pricing-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.pricing-card.featured {
border: 2px solid #3b82f6;
transform: scale(1.05);
}
.popular-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.pricing-header h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.price {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 20px;
}
.currency {
font-size: 1.5rem;
color: #3b82f6;
}
.amount {
font-size: 3rem;
font-weight: 800;
color: white;
margin: 0 5px;
}
.period {
color: #9ca3af;
font-size: 1rem;
}
.pricing-description {
color: #9ca3af;
margin-bottom: 30px;
}
.pricing-features ul {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.pricing-features li {
display: flex;
align-items: center;
margin-bottom: 15px;
color: #e5e7eb;
}
.pricing-features i {
color: #10b981;
margin-right: 10px;
font-size: 0.9rem;
}
.pricing-btn {
width: 100%;
padding: 15px 30px;
border: 2px solid #3b82f6;
background: transparent;
color: #3b82f6;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.pricing-btn.primary {
background: #3b82f6;
color: white;
}
.pricing-btn:hover {
background: #3b82f6;
color: white;
transform: translateY(-2px);
}
/* =============================
FAQ Section Styles
============================= */
.faq-section {
background: #f8fafc;
padding: 100px 0;
}
.faq-container {
max-width: 800px;
margin: 60px auto 0;
}
.faq-item {
background: white;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
}
.faq-question {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.faq-question:hover {
background: #f8fafc;
}
.faq-question h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1a1a1a;
margin: 0;
}
.faq-question i {
color: #3b82f6;
transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 30px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item.active .faq-answer {
padding: 0 30px 25px;
max-height: 200px;
}
.faq-answer p {
color: #374151;
line-height: 1.6;
margin: 0;
}
/* =============================
Enhanced Contact Form Styles
============================= */
.contact-form {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
position: relative;
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px 45px 15px 15px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background: #f9fafb;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #3b82f6;
background: white;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
pointer-events: none;
z-index: 2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.checkbox-group {
margin-bottom: 20px;
}
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.9rem;
color: #374151;
}
.checkbox-label input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 4px;
margin-right: 10px;
position: relative;
transition: all 0.3s ease;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark {
background: #3b82f6;
border-color: #3b82f6;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.privacy-link {
color: #3b82f6;
text-decoration: none;
}
.privacy-link:hover {
text-decoration: underline;
}
.btn-submit {
width: 100%;
padding: 18px 30px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
/* =============================
Search Modal Styles
============================= */
.search-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(5px);
}
.search-modal.active {
display: flex;
}
.search-container {
background: white;
border-radius: 20px;
padding: 30px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.search-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.search-header h3 {
margin: 0;
color: #1a1a1a;
}
.search-close {
background: none;
border: none;
font-size: 1.5rem;
color: #9ca3af;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: all 0.3s ease;
}
.search-close:hover {
background: #f3f4f6;
color: #374151;
}
.search-input-container {
position: relative;
margin-bottom: 20px;
}
.search-input-container input {
width: 100%;
padding: 15px 45px 15px 15px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
}
.search-input-container input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.search-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
}
.search-results {
max-height: 400px;
overflow-y: auto;
}
.search-result-item {
padding: 15px;
border-bottom: 1px solid #e5e7eb;
cursor: pointer;
transition: all 0.3s ease;
}
.search-result-item:hover {
background: #f8fafc;
}
.search-result-item h4 {
margin: 0 0 5px 0;
color: #1a1a1a;
}
.search-result-item p {
margin: 0;
color: #374151;
font-size: 0.9rem;
}
/* =============================
Back to Top Button
============================= */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}
.back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}
.back-to-top.show {
display: flex;
}
/* =============================
Enhanced Footer Styles
============================= */
.footer {
background: var(--bg-dark);
color: var(--text-white);
padding: 80px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-bottom: 40px;
}
.footer-brand p {
color: var(--muted-light);
line-height: 1.6;
margin: 20px 0;
}
.footer-contact {
margin-top: 20px;
}
.footer-contact .contact-item {
display: flex;
align-items: center;
margin-bottom: 10px;
color: var(--muted-light);
}
.footer-contact .contact-item i {
margin-right: 10px;
color: var(--blue);
width: 20px;
}
.footer-links h4,
.footer-services h4,
.footer-company h4,
.footer-social h4 {
color: var(--text-white);
margin-bottom: 20px;
font-size: 1.1rem;
}
.footer-links ul,
.footer-services ul,
.footer-company ul {
list-style: none;
padding: 0;
}
.footer-links li,
.footer-services li,
.footer-company li {
margin-bottom: 10px;
}
.footer-links a,
.footer-services a,
.footer-company a {
color: var(--muted-light);
text-decoration: none;
transition: color var(--transition-normal);
}
.footer-links a:hover,
.footer-services a:hover,
.footer-company a:hover {
color: var(--blue);
}
.social-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.social-link {
display: flex;
align-items: center;
color: #9ca3af;
text-decoration: none;
transition: all 0.3s ease;
padding: 8px 0;
}
.social-link:hover {
color: #3b82f6;
transform: translateX(5px);
}
.social-link i {
margin-right: 10px;
width: 20px;
}
.newsletter-signup {
margin-top: 30px;
}
.newsletter-signup h5 {
color: white;
margin-bottom: 10px;
}
.newsletter-signup p {
color: #9ca3af;
font-size: 0.9rem;
margin-bottom: 15px;
}
.newsletter-form {
display: flex;
gap: 10px;
}
.newsletter-form input {
flex: 1;
padding: 10px 15px;
border: 1px solid #374151;
border-radius: 5px;
background: #374151;
color: white;
}
.newsletter-form input::placeholder {
color: #9ca3af;
}
.newsletter-form button {
padding: 10px 15px;
background: #3b82f6;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-form button:hover {
background: #1d4ed8;
}
.footer-bottom {
border-top: 1px solid #374151;
padding-top: 20px;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-legal {
display: flex;
gap: 20px;
}
.footer-legal a {
color: #9ca3af;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-legal a:hover {
color: #3b82f6;
}
/* =============================
New Footer Column Styles
============================= */
.footer-column {
display: flex;
flex-direction: column;
}
.footer-brand {
display: flex;
flex-direction: column;
}
.footer-logo {
display: flex;
align-items: baseline;
gap: 0;
line-height: 1;
margin-bottom: 20px;
}
.footer-logo-tech {
font-family: 'Orbitron', monospace;
font-size: 28px;
font-weight: 900;
color: #94a3b8;
letter-spacing: 1px;
}
.footer-logo-mates {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px;
font-weight: 700;
color: #60a5fa;
letter-spacing: 1px;
margin-left: 2px;
}
.footer-description {
color: #9ca3af;
line-height: 1.6;
margin-bottom: 25px;
font-size: 0.95rem;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-contact .contact-item {
display: flex;
align-items: center;
color: #9ca3af;
font-size: 0.9rem;
}
.footer-contact .contact-item i {
margin-right: 12px;
color: #3b82f6;
width: 16px;
font-size: 0.9rem;
}
.footer-column h4 {
color: white;
margin-bottom: 20px;
font-size: 1.1rem;
font-weight: 600;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: #9ca3af;
text-decoration: none;
transition: color 0.3s ease;
font-size: 0.9rem;
}
.footer-links a:hover {
color: #3b82f6;
}
.social-media {
display: flex;
gap: 15px;
margin-top: 10px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: #374151;
color: #9ca3af;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.social-icon:hover {
background: #3b82f6;
color: white;
transform: translateY(-2px);
}
.footer-bottom-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 15px;
text-align: center;
}
.footer-bottom-content p {
color: #9ca3af;
margin: 0;
font-size: 0.9rem;
}
.footer-legal {
display: flex;
gap: 25px;
flex-wrap: wrap;
justify-content: center;
}
.footer-legal a {
color: #9ca3af;
text-decoration: none;
font-size: 0.85rem;
transition: color 0.3s ease;
}
.footer-legal a:hover {
color: #3b82f6;
}
/* =============================
Dark Mode Styles
============================= */
[data-theme="dark"] {
--primary-color: #3b82f6;
--secondary-color: #1d4ed8;
--accent-color: #60a5fa;
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--border-color: #475569;
--shadow: rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] body {
background-color: var(--bg-primary);
color: var(--text-primary);
}
[data-theme="dark"] .top-nav {
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .nav-pill {
background: rgba(30, 41, 59, 0.8);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .nav-link {
color: #e2e8f0;
font-weight: 600;
}
[data-theme="dark"] .nav-link:hover {
color: #ffffff;
text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}
[data-theme="dark"] .mobile-nav-link {
color: #e2e8f0;
font-weight: 600;
}
[data-theme="dark"] .mobile-nav-link:hover {
color: #ffffff;
text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}
[data-theme="dark"] .cta-button {
background: linear-gradient(135deg, #60a5fa, #3b82f6);
color: #0f172a;
border: 2px solid rgba(96, 165, 250, 0.4);
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
box-shadow:
0 4px 15px rgba(96, 165, 250, 0.4),
0 0 0 1px rgba(96, 165, 250, 0.2);
}
[data-theme="dark"] .cta-button:hover {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff;
border-color: rgba(96, 165, 250, 0.6);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow:
0 8px 25px rgba(96, 165, 250, 0.5),
0 0 0 1px rgba(96, 165, 250, 0.3);
}
[data-theme="dark"] .hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
[data-theme="dark"] .video-overlay {
background: linear-gradient(
135deg,
rgba(15, 23, 42, 0.8) 0%,
rgba(15, 23, 42, 0.7) 25%,
rgba(15, 23, 42, 0.9) 50%,
rgba(15, 23, 42, 0.95) 75%,
rgba(15, 23, 42, 0.98) 100%
);
}
[data-theme="dark"] .section {
background: var(--bg-primary);
color: var(--text-primary);
}
[data-theme="dark"] .about-section {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}
[data-theme="dark"] .why-choose-section {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}
[data-theme="dark"] .why-choose-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] .why-choose-card h3 {
color: var(--text-primary);
}
[data-theme="dark"] .why-choose-card p {
color: var(--text-secondary);
}
[data-theme="dark"] .trust-indicators {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .trust-content h4 {
color: var(--text-primary);
}
[data-theme="dark"] .trust-content p {
color: var(--text-secondary);
}
[data-theme="dark"] .pricing-section {
background: var(--bg-primary);
}
[data-theme="dark"] .pricing-card {
background: rgba(30, 41, 59, 0.8);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .faq-section {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}
[data-theme="dark"] .faq-item {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .faq-question h3 {
color: var(--text-primary);
}
[data-theme="dark"] .faq-answer p {
color: var(--text-secondary);
}
[data-theme="dark"] .contact-form {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
background: var(--bg-tertiary);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
background: var(--bg-primary);
border-color: var(--primary-color);
}
[data-theme="dark"] .form-group label {
color: var(--text-primary);
}
[data-theme="dark"] .checkbox-label {
color: var(--text-secondary);
}
[data-theme="dark"] .footer {
background: var(--bg-primary);
}
[data-theme="dark"] .footer h4 {
color: var(--text-primary);
}
[data-theme="dark"] .footer a {
color: var(--text-secondary);
}
[data-theme="dark"] .footer a:hover {
color: var(--primary-color);
}
/* Enhanced Dark Mode Content Visibility */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li {
color: #e2e8f0 !important;
}
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .hero-subtitle {
color: #cbd5e1 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .service-content h3,
[data-theme="dark"] .project-title,
[data-theme="dark"] .testimonial-name {
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .service-content p,
[data-theme="dark"] .project-description,
[data-theme="dark"] .testimonial-text {
color: #e2e8f0 !important;
}
[data-theme="dark"] .contact-method h4,
[data-theme="dark"] .contact-method p {
color: #e2e8f0 !important;
}
[data-theme="dark"] .form-header h3,
[data-theme="dark"] .form-header p {
color: #ffffff !important;
}
[data-theme="dark"] .badge {
color: #ffffff !important;
background: rgba(96, 165, 250, 0.2) !important;
border: 1px solid rgba(96, 165, 250, 0.4) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .hero-badge {
color: #ffffff !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .badge-icon {
color: #60a5fa !important;
text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}
/* Enhanced Button Contrast */
[data-theme="dark"] .btn,
[data-theme="dark"] .submit-button {
background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
color: #0f172a !important;
border: 2px solid rgba(96, 165, 250, 0.4) !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
box-shadow:
0 4px 12px rgba(96, 165, 250, 0.3),
0 0 0 1px rgba(96, 165, 250, 0.2) !important;
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .submit-button:hover {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
color: #ffffff !important;
border-color: rgba(96, 165, 250, 0.6) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
box-shadow:
0 6px 20px rgba(96, 165, 250, 0.4),
0 0 0 1px rgba(96, 165, 250, 0.3) !important;
}
/* Enhanced Card Contrast */
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .contact-form-card {
background: rgba(15, 23, 42, 0.9) !important;
border: 2px solid rgba(96, 165, 250, 0.2) !important;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(96, 165, 250, 0.1) !important;
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .project-card:hover {
border-color: rgba(96, 165, 250, 0.4) !important;
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(96, 165, 250, 0.2) !important;
}
/* Enhanced Icon Visibility */
[data-theme="dark"] i,
[data-theme="dark"] .icon,
[data-theme="dark"] .method-icon,
[data-theme="dark"] .input-icon {
color: #60a5fa !important;
text-shadow: 0 0 8px rgba(96, 165, 250, 0.5) !important;
}
[data-theme="dark"] .method-icon {
background: rgba(96, 165, 250, 0.2) !important;
border: 1px solid rgba(96, 165, 250, 0.4) !important;
}
/* Enhanced Form Elements */
[data-theme="dark"] .input-container input,
[data-theme="dark"] .input-container textarea,
[data-theme="dark"] .input-container select {
background: rgba(15, 23, 42, 0.8) !important;
border: 2px solid rgba(96, 165, 250, 0.3) !important;
color: #e2e8f0 !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(96, 165, 250, 0.1) !important;
}
[data-theme="dark"] .input-container input:focus,
[data-theme="dark"] .input-container textarea:focus,
[data-theme="dark"] .input-container select:focus {
border-color: rgba(96, 165, 250, 0.6) !important;
box-shadow:
0 4px 12px rgba(96, 165, 250, 0.3),
0 0 0 1px rgba(96, 165, 250, 0.2) !important;
}
[data-theme="dark"] .input-container label {
color: #cbd5e1 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .search-modal {
background: rgba(0, 0, 0, 0.9);
}
[data-theme="dark"] .search-container {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
}
[data-theme="dark"] .search-header h3 {
color: var(--text-primary);
}
[data-theme="dark"] .search-input-container input {
background: var(--bg-tertiary);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] .search-result-item {
border-color: var(--border-color);
}
[data-theme="dark"] .search-result-item h4 {
color: var(--text-primary);
}
[data-theme="dark"] .search-result-item p {
color: var(--text-secondary);
}
[data-theme="dark"] .back-to-top {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
/* =============================
Mobile Responsive Enhancements
============================= */
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.social-media {
justify-content: center;
}
}
/* Footer responsive styles for tablets */
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
gap: 35px;
}
}
/* Footer responsive styles for mobile */
@media (max-width: 768px) {
.footer {
padding: 60px 0 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.footer-logo {
justify-content: center;
}
.footer-contact {
align-items: center;
}
.footer-contact .contact-item {
justify-content: center;
}
.social-media {
justify-content: center;
}
.footer-legal {
gap: 15px;
}
}
.why-choose-grid {
grid-template-columns: 1fr;
}
.trust-indicators {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 30px 20px;
}
.trust-item {
flex-direction: column;
text-align: center;
gap: 15px;
}
.pricing-grid {
grid-template-columns: 1fr;
}
.pricing-card.featured {
transform: none;
}
.mobile-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--border-color);
}
.mobile-logo {
font-size: 1.5rem;
font-weight: 700;
}
.mobile-logo-tech {
color: var(--primary-color);
}
.mobile-logo-mates {
color: var(--text-primary);
}
html{scroll-behavior:smooth}
:root{
--ink:#0f172a; --muted:#475569; --line:#e5e7eb;
--blue:#2563eb; --blue2:#60a5fa;
--bg1:#f2f6ff; --bg2:#ffffff;
/* logo sizes (always visible) */
--logo-h: 88px; /* hero size */
--logo-h-sticky: 88px; /* keep same after scroll */
}
body{
margin:0; font-family:system-ui, Inter, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink);
background: #ffffff;
min-height: 100vh;
}
.container{width:min(1200px,92%); margin:0 auto}
/* =============================
Hero + Topbar (merged with hero)
============================= */
.hero{min-height:120vh; position:relative; display:flex; align-items:center; padding:10px 0 80px; width:100%; margin-top:80px; border-bottom-left-radius:50px; border-bottom-right-radius:50px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.1)}
/* Navigation Bar Removed */
/* Navigation Menu Removed */
/* Dropdown and Action Buttons Removed */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
font-weight: 600;
border-radius: 12px;
padding: 12px 24px;
border: none;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
font-size: 14px;
cursor: pointer;
outline: none;
position: relative;
overflow: hidden;
letter-spacing: -0.1px;
}
.btn-primary {
background: #3b82f6;
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.btn-primary:hover {
background: #2563eb;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}
/* Mobile Menu Toggle Removed */
/* Mobile Menu Styles Removed */
/* Navigation-related animations removed */
/* Hero Section Integration */
.hero {
margin-top: 0; /* No navigation bar */
}
/* Navigation Hero Integration - Border removed */
/* Brand glow effect removed */
/* Hover ripple effect for buttons */
.btn {
position: relative;
overflow: hidden;
}
/* Brand floating animation removed */
/* Navigation pulse effect removed */
/* Responsive Navigation Styles Removed */
/* Enhanced Buttons */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
text-decoration: none;
font-weight: 700;
border-radius: 50px;
padding: 14px 28px;
border: 1px solid transparent;
transition: all .3s ease;
position: relative;
overflow: hidden;
font-family: system-ui, Inter, Segoe UI, Roboto, Arial, sans-serif;
font-size: 15px;
letter-spacing: 0.5px;
}
.btn-primary{
background: var(--blue);
color: #fff;
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(37, 99, 235, 0.5),
0 0 20px rgba(37, 99, 235, 0.3);
}
.btn-primary:active {
transform: translateY(-1px);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.btn-outline{
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.btn:hover{
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(37, 99, 235, 0.5);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
/* Navigation-related button styles removed */
/* =============================
Video Background Hero
============================= */
.hero-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -2;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: opacity 0.5s ease;
}
.hero-video.loading {
opacity: 0;
}
.hero-video.loaded {
opacity: 1;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(15, 23, 42, 0.7) 0%,
rgba(15, 23, 42, 0.6) 25%,
rgba(15, 23, 42, 0.8) 50%,
rgba(15, 23, 42, 0.9) 75%,
rgba(15, 23, 42, 0.95) 100%
);
z-index: 1;
animation: overlayPulse 8s ease-in-out infinite;
}
.video-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 30% 20%,
rgba(96, 165, 250, 0.1) 0%,
transparent 50%
),
radial-gradient(
circle at 70% 80%,
rgba(59, 130, 246, 0.1) 0%,
transparent 50%
);
animation: overlayShimmer 12s ease-in-out infinite;
}
@keyframes overlayPulse {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 0.9;
}
}
@keyframes overlayShimmer {
0%, 100% {
transform: translateX(0) translateY(0);
opacity: 0.3;
}
25% {
transform: translateX(10px) translateY(-5px);
opacity: 0.5;
}
50% {
transform: translateX(-5px) translateY(10px);
opacity: 0.4;
}
75% {
transform: translateX(5px) translateY(-8px);
opacity: 0.6;
}
}
.hero-content-wrapper {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
opacity: 1;
transition: opacity 0.8s ease-out;
animation: heroContentFloat 6s ease-in-out infinite;
}
.hero-content-wrapper::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.08) 50%,
transparent 100%
);
border-radius: 30px;
z-index: -1;
pointer-events: none;
z-index: 2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
@keyframes heroContentFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.hero-content {
width: 100%;
position: relative;
z-index: 2;
}
.hero-content::before {
content: '';
position: absolute;
top: -50px;
left: -50px;
right: -50px;
bottom: -50px;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.1) 30%,
transparent 70%
);
border-radius: 20px;
z-index: -1;
pointer-events: none;
z-index: 2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50px;
color: #fff;
font-weight: 700;
font-size: 14px;
backdrop-filter: blur(20px);
margin-bottom: 30px;
transition: all 0.3s ease;
position: relative;
z-index: 2;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.3),
0 0 20px rgba(59, 130, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hero-badge:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}
.badge-icon {
color: #60a5fa;
font-size: 16px;
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
color: #fff;
margin: 0 0 24px;
text-shadow:
0 4px 20px rgba(0, 0, 0, 0.5),
0 2px 10px rgba(59, 130, 246, 0.3),
0 0 30px rgba(96, 165, 250, 0.2);
animation: fadeInUp 1s ease-out 0.3s both;
position: relative;
z-index: 2;
}
.hero-subtitle {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
color: rgba(255, 255, 255, 0.95);
margin: 0 0 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.4),
0 1px 5px rgba(59, 130, 246, 0.2);
animation: fadeInUp 1s ease-out 0.6s both;
position: relative;
z-index: 2;
}
.hero-ctas {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 50px;
animation: fadeInUp 1s ease-out 0.9s both;
}
.btn-hero {
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
user-select: none;
}
.btn-hero:active {
transform: translateY(-1px);
}
.btn-glow {
box-shadow: 0 10px 30px rgba(96, 165, 250, 0.4);
position: relative;
overflow: hidden;
}
/* Glowing moving round effect for hero CTA */
.btn-glow::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 53px;
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(59, 130, 246, 0.4) 60deg,
rgba(96, 165, 250, 0.6) 120deg,
rgba(59, 130, 246, 0.4) 180deg,
transparent 240deg,
transparent 360deg
);
animation: rotateGlow 3.5s linear infinite;
z-index: -1;
opacity: 0.9;
}
.btn-glow::after {
content: '';
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border-radius: 56px;
background: conic-gradient(
from 180deg,
transparent 0deg,
rgba(96, 165, 250, 0.3) 60deg,
rgba(59, 130, 246, 0.5) 120deg,
rgba(96, 165, 250, 0.3) 180deg,
transparent 240deg,
transparent 360deg
);
animation: rotateGlow 4.5s linear infinite reverse;
z-index: -2;
opacity: 0.7;
}
.btn-glow:hover {
box-shadow: 0 20px 40px rgba(96, 165, 250, 0.6);
transform: translateY(-3px) scale(1.05);
}
.btn-glow:hover::before {
opacity: 1;
animation-duration: 2.5s;
}
.btn-glow:hover::after {
opacity: 0.9;
animation-duration: 3s;
}
.hero-stats {
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 1.2s both;
}
.stat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
background: rgba(0, 0, 0, 0.75);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 20px;
backdrop-filter: blur(20px);
transition: all 0.3s ease;
position: relative;
z-index: 2;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.4),
0 0 20px rgba(59, 130, 246, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.stat-item:hover {
background: rgba(0, 0, 0, 0.85);
border-color: rgba(59, 130, 246, 0.6);
transform: translateY(-3px);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.5),
0 0 30px rgba(59, 130, 246, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.stat-icon {
width: 40px;
height: 40px;
background: #3b82f6;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
}
.stat-content {
text-align: left;
}
.stat-number {
font-size: 24px;
font-weight: 800;
color: #ffffff;
line-height: 1;
margin-bottom: 4px;
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.6),
0 0 15px rgba(59, 130, 246, 0.4),
0 1px 3px rgba(0, 0, 0, 0.8);
}
.stat-label {
font-size: 12px;
color: #ffffff;
font-weight: 700;
text-shadow:
0 1px 4px rgba(0, 0, 0, 0.6),
0 0 8px rgba(59, 130, 246, 0.3);
letter-spacing: 0.5px;
}
.scroll-indicator {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
color: rgba(255, 255, 255, 0.9);
animation: fadeInUp 1s ease-out 1.5s both;
z-index: 15;
cursor: pointer;
transition: all 0.3s ease;
}
.scroll-indicator:hover {
transform: translateX(-50%) scale(1.05);
color: #ffffff;
}
/* Beautiful wave effect at bottom of hero */
.hero::after {
content: '';
position: absolute;
bottom: -83px;
left: 0;
right: 0;
height: 80px;
background: #ffffff;
border-radius: 50px 50px 0 0;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
z-index: 1;
}
@keyframes waveGlow {
0%, 100% {
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.3);
}
}
/* Enhanced scroll indicator with better positioning */
.scroll-indicator {
z-index: 15;
}
.scroll-text {
font-size: 16px;
font-weight: 700;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
letter-spacing: 1px;
text-transform: uppercase;
opacity: 1;
text-align: center;
color: #ffffff;
animation: textGlow 2s ease-in-out infinite;
}
.scroll-arrow {
width: 50px;
height: 50px;
background: rgba(96, 165, 250, 0.2);
border: 2px solid rgba(96, 165, 250, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(20px);
animation: pulseGlow 2s ease-in-out infinite;
box-shadow: 0 8px 25px rgba(96, 165, 250, 0.3);
transition: all 0.3s ease;
cursor: pointer;
position: absolute;
overflow: hidden;
}
.scroll-arrow::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: transparent;
transition: left 0.6s ease;
}
.scroll-arrow:hover::before {
left: 100%;
}
.scroll-arrow:hover {
background: rgba(96, 165, 250, 0.4);
border-color: rgba(96, 165, 250, 0.8);
transform: scale(1.15);
box-shadow: 0 12px 35px rgba(96, 165, 250, 0.5);
}
.scroll-arrow i {
font-size: 20px;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
animation: arrowBounce 1.5s ease-in-out infinite;
}
.scroll-line {
width: 3px;
height: 60px;
background: #60a5fa;
border-radius: 2px;
box-shadow: 0 0 20px rgba(96, 165, 250, 0.6);
position: absolute;
overflow: hidden;
}
/* =============================
Professional Animations & Effects
============================= */
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Enhanced fade animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes professionalGlow {
0%, 100% {
box-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
}
50% {
box-shadow: 0 0 30px rgba(37, 99, 235, 0.2);
}
}
@keyframes subtleFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes professionalPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Intersection Observer classes for scroll animations */
.animate-on-scroll {
opacity: 0;
transform: translateY(60px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
.animate-on-scroll-left {
opacity: 0;
transform: translateX(-60px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll-left.animated {
opacity: 1;
transform: translateX(0);
}
.animate-on-scroll-right {
opacity: 0;
transform: translateX(60px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll-right.animated {
opacity: 1;
transform: translateX(0);
}
.animate-on-scroll-scale {
opacity: 0;
transform: scale(0.8);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll-scale.animated {
opacity: 1;
transform: scale(1);
}
/* Staggered animation delays */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes textGlow {
0%, 100% {
filter: brightness(1) drop-shadow(0 0 10px rgba(96, 165, 250, 0.5));
}
50% {
filter: brightness(1.2) drop-shadow(0 0 20px rgba(96, 165, 250, 0.8));
}
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 8px 25px rgba(96, 165, 250, 0.3);
}
50% {
box-shadow: 0 12px 35px rgba(96, 165, 250, 0.6);
}
}
@keyframes arrowBounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
@keyframes lineFlow {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
/* Legacy hero-grid styles removed - no longer needed */
/* =============================
Responsive Design for Video Hero
============================= */
@media (max-width: 768px) {
.hero-content-wrapper {
padding: 0 16px;
max-width: 100%;
}
.hero-title {
font-size: clamp(2rem, 6vw, 2.5rem);
margin-bottom: 20px;
}
.hero-subtitle {
font-size: clamp(1rem, 4vw, 1.2rem);
margin-bottom: 30px;
padding: 0 10px;
}
.hero-ctas {
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: 40px;
}
.btn-hero {
width: 100%;
max-width: 280px;
padding: 14px 24px;
}
.hero-stats {
gap: 20px;
flex-direction: column;
align-items: center;
}
.stat-item {
width: 100%;
max-width: 280px;
justify-content: center;
text-align: center;
}
.stat-content {
text-align: center;
}
.scroll-indicator {
bottom: 30px;
}
.scroll-arrow {
width: 45px;
height: 45px;
}
.scroll-arrow i {
font-size: 18px;
}
.scroll-line {
height: 50px;
}
.scroll-text {
font-size: 15px;
letter-spacing: 0.8px;
}
}
@media (max-width: 480px) {
.hero-content-wrapper {
padding: 0 12px;
}
.hero-badge {
padding: 10px 16px;
font-size: 13px;
margin-bottom: 24px;
}
.hero-title {
font-size: clamp(1.8rem, 7vw, 2.2rem);
margin-bottom: 18px;
}
.hero-subtitle {
font-size: clamp(0.9rem, 4.5vw, 1.1rem);
margin-bottom: 24px;
padding: 0 5px;
}
.hero-ctas {
margin-bottom: 32px;
}
.btn-hero {
padding: 12px 20px;
font-size: 15px;
}
.hero-stats {
margin-bottom: 20px;
}
.stat-item {
padding: 12px 16px;
}
.stat-icon {
width: 32px;
height: 32px;
font-size: 16px;
}
.stat-number {
font-size: 20px;
}
.stat-label {
font-size: 11px;
}
/* Small mobile wave effect */
.hero::after {
height: 50px;
border-radius: 25px 25px 0 0;
background: #ffffff;
}
.scroll-indicator {
bottom: 25px;
}
.scroll-arrow {
width: 35px;
height: 35px;
}
.scroll-arrow i {
font-size: 14px;
}
.scroll-line {
height: 35px;
}
.scroll-text {
font-size: 12px;
letter-spacing: 0.3px;
}
}
/* Video background optimization for mobile */
@media (max-width: 768px) {
.hero-video {
object-position: center center;
}
.video-overlay {
background: rgba(15, 23, 42, 0.9);
}
/* Responsive wave effect */
.hero::after {
height: 60px;
border-radius: 30px 30px 0 0;
background: #ffffff;
}
.scroll-indicator {
bottom: 30px;
}
}
.badge{display:inline-block; padding:8px 14px; border-radius:999px; background:rgba(59,130,246,.12); border:1px solid #c7d2fe; color:#1e3a8a; font-weight:700; font-size:12px}
.h1{margin:14px 0 10px; line-height:1.05; letter-spacing:-.02em; font-size:clamp(36px,6.2vw,56px)}
.accent{color:var(--blue)}
.sub{color:var(--muted); max-width:58ch; margin:10px 0 22px; font-size:18px}
.ctas{display:flex; gap:12px; flex-wrap:wrap}
.stats{display:flex; gap:18px; list-style:none; padding:0; margin:18px 0 0; color:var(--text-white)}
.stats strong{color:var(--text-white)}
/* Oval cards carousel removed - no longer needed */
/* Carousel styles removed - no longer needed */
.scroll-line {
width: 2px;
height: 40px;
background: #60a5fa;
margin: 0 auto;
border-radius: 1px;
}
/* =============================
About Section
============================= */
.about-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.about-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
position: relative;
z-index: 2;
}
.about-text {
padding-right: 20px;
}
.about-features {
margin: 40px 0;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
flex-shrink: 0;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.feature-content h3 {
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
color: var(--ink);
}
.feature-content p {
margin: 0;
color: var(--muted);
line-height: 1.6;
font-size: 15px;
}
.about-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 40px;
}
.stat-box {
background: rgba(30, 41, 59, 0.9);
padding: 24px;
border-radius: var(--radius-xl);
text-align: center;
border: 1px solid var(--border-light);
transition: all var(--transition-normal);
backdrop-filter: blur(10px);
}
.stat-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px var(--shadow-medium);
background: rgba(51, 65, 85, 0.95);
}
.stat-number {
font-size: 32px;
font-weight: 800;
color: var(--blue);
margin-bottom: 8px;
line-height: 1;
}
.stat-label {
font-size: 14px;
color: var(--text-white);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.about-visual {
position: relative;
}
.visual-container {
position: sticky;
top: 100px;
}
.values-stack {
background: var(--bg-card);
padding: 30px;
border-radius: var(--radius-2xl);
margin-bottom: 30px;
box-shadow: 0 20px 40px var(--shadow-medium);
border: 1px solid var(--border-light);
backdrop-filter: blur(20px);
}
.values-stack h3 {
margin: 0 0 24px;
font-size: 22px;
font-weight: 700;
color: var(--ink);
text-align: center;
}
.value-items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.value-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: rgba(59, 130, 246, 0.1);
border: 2px solid rgba(59, 130, 246, 0.2);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.value-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
transition: left 0.6s ease;
}
.value-item:hover::before {
left: 100%;
}
.value-item:hover {
transform: translateY(-3px) scale(1.02);
background: rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.4);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}
.value-item i {
font-size: 24px;
color: #3b82f6;
width: 24px;
text-align: center;
}
.value-item span {
font-weight: 600;
color: var(--ink);
font-size: 14px;
}
.process-flow {
background: var(--bg-card);
padding: 30px;
border-radius: var(--radius-2xl);
box-shadow: 0 20px 40px var(--shadow-medium);
border: 1px solid var(--border-light);
backdrop-filter: blur(20px);
}
.process-flow h3 {
margin: 0 0 24px;
font-size: 22px;
font-weight: 700;
color: var(--ink);
text-align: center;
}
.process-steps {
display: flex;
flex-direction: column;
gap: 20px;
}
.process-step {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: rgba(59, 130, 246, 0.05);
border-radius: 15px;
border: 2px solid rgba(59, 130, 246, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.process-step::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
transition: left 0.5s ease;
}
.process-step:hover::before {
left: 100%;
}
.process-step:hover {
transform: translateX(5px);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}
.step-number {
font-size: 24px;
font-weight: 900;
color: #3b82f6;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
min-width: 50px;
text-align: center;
flex-shrink: 0;
}
.step-content h4 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
color: var(--ink);
}
.step-content p {
margin: 0;
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
/* Responsive Design for About Section */
@media (max-width: 768px) {
.about-content {
grid-template-columns: 1fr;
gap: 40px;
}
.about-text {
padding-right: 0;
}
.about-stats {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.value-items {
grid-template-columns: 1fr;
}
.visual-container {
position: static;
}
.feature-item {
flex-direction: column;
text-align: center;
}
.feature-icon {
align-self: center;
}
}
@media (max-width: 480px) {
.about-section {
padding: 60px 0;
}
.about-stats {
grid-template-columns: 1fr;
}
.stat-box {
padding: 20px;
}
.tech-stack,
.process-flow {
padding: 20px;
}
}
/* =============================
Seamless sections
============================= */
/* =============================
Post-Hero Sections - White Background
============================= */
#services,
#projects,
#testimonials,
#contact {
background: #ffffff;
color: #1a1a1a;
}
/* =============================
Section Headers
============================= */
.section{padding:60px 0}
.section-header{text-align:center; margin-bottom:50px}
.section-header .badge{margin-bottom:16px}
.section-header h2{margin:0 0 16px; font-size:clamp(32px, 4vw, 48px); line-height:1.1; font-family: var(--font-heading); font-weight: 800; color: var(--ink);}
.section-subtitle{color: var(--muted); font-size:18px; max-width:600px; margin:0 auto; line-height:1.6; font-family: var(--font-primary);}
/* =============================
Enhanced Services Section
============================= */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 60px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.service-card {
background: var(--bg-card);
padding: 0;
border-radius: var(--radius-2xl);
box-shadow: 0 10px 40px var(--shadow-light);
border: 1px solid var(--border-light);
transition: all var(--transition-slow);
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
height: 100%;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.service-card:hover::before {
left: 100%;
}
.service-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.15),
0 0 40px rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.3);
}
.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 40px 32px 24px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
}
.service-icon i {
font-size: 32px;
color: white;
transition: all 0.3s ease;
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}
.service-card:hover .service-icon i {
transform: scale(1.1);
}
.service-content {
padding: 0 32px 40px;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
}
.service-content h3 {
font-size: 24px;
margin: 0 0 16px;
color: var(--ink);
font-family: var(--font-heading);
font-weight: 700;
transition: color var(--transition-normal);
}
.service-card:hover .service-content h3 {
color: var(--blue);
}
.service-content p {
color: var(--muted);
line-height: 1.6;
margin-bottom: 24px;
font-family: var(--font-primary);
font-size: 16px;
flex: 1;
}
.service-features {
list-style: none;
padding: 0;
margin: 0 0 30px;
}
.service-features li {
padding: 8px 0;
color: var(--muted);
position: relative;
padding-left: 24px;
font-family: var(--font-primary);
font-size: 14px;
transition: all var(--transition-normal);
}
.service-features li:hover {
color: var(--blue);
transform: translateX(5px);
}
.service-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--success);
font-weight: bold;
font-size: 16px;
transition: all var(--transition-normal);
}
.service-features li:hover::before {
color: var(--blue);
transform: scale(1.2);
}
.service-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, var(--blue), var(--blue2));
color: var(--text-white);
border: none;
border-radius: var(--radius-lg);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-bounce);
font-family: var(--font-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
align-self: flex-start;
}
.service-cta-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.service-cta-btn:hover::before {
left: 100%;
}
.service-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
background: linear-gradient(135deg, #2563eb, #7c3aed);
}
.service-cta-btn:active {
transform: translateY(0);
}
.service-cta-btn i {
transition: transform 0.3s ease;
}
.service-cta-btn:hover i {
transform: translateX(3px);
}
/* =============================
Projects Section
============================= */
.projects-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.projects-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
z-index: 1;
}
.projects-section .container {
position: relative;
z-index: 2;
}
/* Project Filters */
.project-filters {
display: flex;
justify-content: center;
gap: 16px;
margin: 50px 0 60px;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 24px;
border: 2px solid rgba(59, 130, 246, 0.2);
background: rgba(255, 255, 255, 0.8);
color: #374151;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.filter-btn:hover {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.4);
color: #3b82f6;
transform: translateY(-2px);
}
.filter-btn.active {
background: #3b82f6;
border-color: #3b82f6;
color: white;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
/* =============================
Interactive Project Carousel
============================= */
.project-carousel-container {
position: relative;
margin: 40px 0;
padding: 0 60px;
}
.project-carousel {
overflow: hidden;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.project-carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
gap: 30px;
}
.project-carousel-track .project-card {
flex: 0 0 auto;
width: calc(33.333% - 20px);
min-width: 350px;
max-width: 400px;
height: auto;
display: flex;
flex-direction: column;
}
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #3b82f6;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-arrow:hover {
background: #3b82f6;
color: white;
transform: translateY(-50%) scale(1.15);
text-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}
.carousel-arrow-left {
left: 0;
}
.carousel-arrow-right {
right: 0;
}
.carousel-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: translateY(-50%) scale(1);
}
.carousel-arrow:disabled:hover {
background: rgba(255, 255, 255, 0.9);
color: #3b82f6;
transform: translateY(-50%) scale(1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.carousel-indicators {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: rgba(59, 130, 246, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: #3b82f6;
transform: scale(1.2);
}
.indicator:hover {
background: rgba(59, 130, 246, 0.6);
transform: scale(1.1);
}
/* Projects Grid - Fallback for non-carousel */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
margin-top: 40px;
}
.project-card {
background: rgba(255, 255, 255, 0.9);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.8);
}
.project-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.project-image {
height: 200px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.project-badge {
position: absolute;
top: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.9);
color: #3b82f6;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
backdrop-filter: blur(10px);
}
.project-content {
padding: 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.project-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.project-content h3 {
font-size: 22px;
margin: 0;
color: #1a1a1a;
font-weight: 700;
line-height: 1.3;
}
.project-status {
margin-left: 16px;
}
.status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.completed {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-badge.in-progress {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.project-content p {
color: #374151;
line-height: 1.6;
margin-bottom: 24px;
font-size: 15px;
}
.project-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: auto;
padding: 20px;
background: rgba(59, 130, 246, 0.05);
border-radius: 16px;
border: 1px solid rgba(59, 130, 246, 0.1);
}
.metric {
text-align: center;
}
.metric-value {
display: block;
font-size: 20px;
font-weight: 800;
color: #3b82f6;
line-height: 1;
margin-bottom: 4px;
}
.metric-label {
font-size: 12px;
color: #374151;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =============================
Testimonials Section
============================= */
.testimonials-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 32px;
margin-top: 40px;
}
.testimonial-card{
background: #fff;
padding: 32px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,.08);
border: 1px solid rgba(255,255,255,.8);
transition: all .3s ease;
position: relative;
overflow: hidden;
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
transition: left 0.6s ease;
}
.testimonial-card:hover::before {
left: 100%;
}
.testimonial-card:hover{
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 60px rgba(0,0,0,.15);
border-color: rgba(59, 130, 246, 0.2);
}
.testimonial-stars {
display: flex;
gap: 4px;
margin-bottom: 20px;
justify-content: center;
}
.testimonial-stars i {
color: #fbbf24;
font-size: 18px;
transition: all 0.3s ease;
animation: starTwinkle 2s ease-in-out infinite;
}
.testimonial-stars i:nth-child(1) { animation-delay: 0s; }
.testimonial-stars i:nth-child(2) { animation-delay: 0.2s; }
.testimonial-stars i:nth-child(3) { animation-delay: 0.4s; }
.testimonial-stars i:nth-child(4) { animation-delay: 0.6s; }
.testimonial-stars i:nth-child(5) { animation-delay: 0.8s; }
.testimonial-card:hover .testimonial-stars i {
color: #f59e0b;
transform: scale(1.2);
}
.testimonial-content p{
font-size: 18px;
line-height: 1.6;
color: #1a1a1a;
font-style: italic;
margin-bottom: 24px;
font-family: var(--font-primary);
position: relative;
}
.testimonial-content p::before {
content: '"';
font-size: 60px;
color: rgba(59, 130, 246, 0.2);
position: absolute;
top: -20px;
left: -10px;
font-family: serif;
line-height: 1;
}
.testimonial-content p::after {
content: '"';
font-size: 60px;
color: rgba(59, 130, 246, 0.2);
position: absolute;
bottom: -30px;
right: -10px;
font-family: serif;
line-height: 1;
}
.testimonial-author{
display: flex;
align-items: center;
gap: 16px;
padding-top: 16px;
border-top: 1px solid rgba(59, 130, 246, 0.1);
}
.author-avatar{
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(59, 130, 246, 0.2);
transition: all 0.3s ease;
position: relative;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.testimonial-card:hover .author-avatar {
border-color: rgba(59, 130, 246, 0.5);
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.testimonial-card:hover .author-avatar img {
transform: scale(1.1);
}
.blank-profile {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 24px;
transition: all 0.3s ease;
}
.testimonial-card:hover .blank-profile {
background: linear-gradient(135deg, #3b82f6, #60a5fa);
color: white;
transform: scale(1.1);
}
.author-info h4{
margin: 0 0 4px;
color: #1a1a1a;
font-size: 18px;
font-family: var(--font-heading);
font-weight: 700;
}
.author-info span{
color: #4a4a4a;
font-size: 14px;
font-family: var(--font-primary);
}
/* =============================
Contact Section
============================= */
.contact-grid{
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 60px;
margin-top: 40px;
}
@media (max-width: 768px) {
.contact-grid{
grid-template-columns: 1fr;
gap: 40px;
}
}
.contact-info{
display: flex;
flex-direction: column;
gap: 32px;
}
.contact-item{
display: flex;
align-items: center;
gap: 20px;
}
.contact-icon{
width: 60px;
height: 60px;
background: rgba(37,99,235,.1);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--blue);
font-size: 24px;
}
.contact-item h4{
margin: 0 0 8px;
color: #1a1a1a;
font-size: 18px;
font-family: var(--font-heading);
font-weight: 700;
}
.contact-item p{
margin: 0;
color: #4a4a4a;
font-family: var(--font-primary);
}
.contact-form{
background: #fff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,.08);
}
.form-group{
margin-bottom: 24px;
}
.form-group input,
.form-group select,
.form-group textarea{
width: 100%;
padding: 16px 20px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 16px;
transition: all .3s ease;
background: #fff;
color: #1a1a1a;
font-family: var(--font-primary);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
color: #9ca3af;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
outline: none;
border-color: var(--blue);
box-shadow:
0 0 0 4px rgba(37,99,235,.1),
0 4px 15px rgba(37,99,235,.1);
background: #fff;
transform: translateY(-2px);
}
.form-group {
position: relative;
}
.form-group::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--blue);
transition: width 0.3s ease;
}
.form-group:focus-within::after {
width: 100%;
}
.form-group textarea{
resize: vertical;
min-height: 120px;
}
.contact-form .btn{
width: 100%;
padding: 16px 24px;
font-size: 18px;
}
/* =============================
Projects Responsive Design
============================= */
@media (max-width: 768px) {
.projects-section {
padding: 60px 0;
}
.projects-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.project-filters {
gap: 12px;
margin: 40px 0 50px;
}
.filter-btn {
padding: 10px 20px;
font-size: 13px;
}
.project-metrics {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 16px;
}
.metric-value {
font-size: 18px;
}
.metric-label {
font-size: 11px;
}
.project-actions {
gap: 12px;
}
.action-btn {
width: 45px;
height: 45px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.projects-section {
padding: 40px 0;
}
.project-filters {
flex-direction: column;
align-items: center;
gap: 8px;
}
.filter-btn {
width: 100%;
max-width: 200px;
}
.projects-grid {
gap: 20px;
}
.project-content {
padding: 20px;
}
.project-content h3 {
font-size: 20px;
}
.project-metrics {
grid-template-columns: 1fr;
gap: 16px;
}
.metric {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: rgba(59, 130, 246, 0.05);
border-radius: 12px;
}
.metric-value {
font-size: 16px;
margin-bottom: 0;
}
.metric-label {
font-size: 12px;
}
}
/* =============================
Professional Scroll Effects
============================= */
/* Scroll progress indicator */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, var(--blue), var(--blue2));
z-index: 9999;
transition: width 0.1s ease;
}
/* Smooth reveal animations */
.reveal {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Professional parallax effect */
.parallax-element {
transition: transform 0.1s ease-out;
}
/* Enhanced focus states for accessibility */
*:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
/* Professional selection styling */
::selection {
background: rgba(37, 99, 235, 0.2);
color: var(--ink);
}
/* =============================
Footer
============================= */
.footer{
background: var(--ink);
color: #fff;
padding: 60px 0 30px;
margin-top: 40px;
}
.footer-content{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
}
@media (max-width: 768px) {
.footer-content{
grid-template-columns: 1fr;
gap: 40px;
}
}
.footer-logo-text {
margin-bottom: 20px;
}
.footer-logo-main {
display: flex;
align-items: baseline;
gap: 0;
line-height: 1;
margin-bottom: 4px;
}
.footer-logo-tech {
font-family: 'Orbitron', monospace;
font-size: 24px;
font-weight: 900;
color: #94a3b8;
letter-spacing: 1px;
}
.footer-logo-mates {
font-family: 'Space Grotesk', sans-serif;
font-size: 24px;
font-weight: 700;
color: #60a5fa;
letter-spacing: 1px;
margin-left: 2px;
}
.footer-logo-subtitle {
font-family: 'Space Grotesk', sans-serif;
font-size: 9px;
font-weight: 500;
color: #64748b;
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
}
.footer-brand p{
color: #94a3b8;
line-height: 1.6;
margin: 0;
font-family: var(--font-primary);
}
.footer h4{
margin: 0 0 24px;
font-size: 18px;
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
}
.footer ul{
list-style: none;
padding: 0;
margin: 0;
}
.footer ul li{
margin-bottom: 12px;
}
.footer ul li a{
color: #94a3b8;
text-decoration: none;
transition: color .2s ease;
font-family: var(--font-primary);
}
.footer ul li a:hover{
color: #fff;
}
.social-links{
display: flex;
gap: 16px;
}
.social-links a{
width: 48px;
height: 48px;
background: rgba(255,255,255,.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: all .3s ease;
}
.social-links a:hover{
background: var(--blue);
transform: translateY(-2px);
}
.footer-bottom{
border-top: 1px solid #334155;
padding-top: 40px;
text-align: center;
color: #94a3b8;
font-family: var(--font-primary);
}
/* =============================
Notification System
============================= */
.notification {
font-family: var(--font-primary);
font-size: 14px;
line-height: 1.5;
}
.notification-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.notification-message {
flex: 1;
}
.notification-close {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background .2s ease;
}
.notification-close:hover {
background: rgba(255,255,255,.2);
}
/* =============================
Professional Loading & Entrance Effects
============================= */
/* Page loading animation */
@keyframes pageLoad {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes starTwinkle {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.1);
}
}
/* Staggered section entrance */
.section {
animation: pageLoad 0.8s ease-out;
}
.section:nth-child(1) { animation-delay: 0.1s; }
.section:nth-child(2) { animation-delay: 0.2s; }
.section:nth-child(3) { animation-delay: 0.3s; }
.section:nth-child(4) { animation-delay: 0.4s; }
.section:nth-child(5) { animation-delay: 0.5s; }
/* Professional card entrance */
.service-card,
.project-card,
.testimonial-card {
animation: scaleIn 0.6s ease-out;
}
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }
/* =============================
Enhanced Animations
============================= */
.service-card,
.project-card,
.testimonial-card {
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 0 30px rgba(37, 99, 235, 0.1);
border-color: rgba(37, 99, 235, 0.2);
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
animation: professionalGlow 2s ease-in-out infinite;
}
.service-card:hover .service-icon i {
color: #ffffff;
}
.project-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 0 30px rgba(102, 126, 234, 0.1);
}
.project-card:hover .project-image {
transform: scale(1.05);
}
.project-card:hover .project-overlay {
opacity: 1;
}
.testimonial-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 0 25px rgba(37, 99, 235, 0.1);
border-color: rgba(37, 99, 235, 0.2);
}
.testimonial-card:hover .author-avatar {
transform: scale(1.1);
animation: professionalPulse 2s ease-in-out infinite;
}
/* =============================
Form Enhancements
============================= */
.form-group {
transition: transform .2s ease;
}
.form-group:focus-within {
transform: scale(1.02);
}
/* =============================
Service Features Enhancement
============================= */
.service-features li {
transition: all .2s ease;
}
.service-features li:hover {
color: var(--blue);
transform: translateX(8px);
}
/* =============================
Loading States
============================= */
.btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
}
.btn:disabled:hover {
transform: none !important;
box-shadow: 0 16px 36px rgba(37,99,235,.35) !important;
}
/* =============================
Responsive Design
============================= */
@media (max-width: 768px) {
.services-grid,
.projects-grid,
.testimonials-grid{
grid-template-columns: 1fr;
}
.section{
padding: 80px 0;
}
}
/* =============================
Featured Projects Carousel Styles
============================= */
/* Project Carousel Container */
.project-carousel-container {
position: relative;
margin: 40px 0;
padding: 0 60px;
overflow: hidden;
}
.project-carousel {
overflow: hidden;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
}
.project-carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
gap: 30px;
padding: 20px;
}
.project-carousel-track .project-card {
flex: 0 0 auto;
width: calc(33.333% - 20px);
min-width: 350px;
max-width: 400px;
height: auto;
display: flex;
flex-direction: column;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.8);
}
.project-carousel-track .project-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
/* Project Image */
.project-image {
height: 200px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.project-card:hover .project-image img {
transform: scale(1.05);
}
.project-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
font-size: 3rem;
}
.project-badge {
position: absolute;
top: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.9);
color: #3b82f6;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
backdrop-filter: blur(10px);
z-index: 2;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 3;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-actions {
display: flex;
gap: 12px;
}
.action-btn {
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #3b82f6;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.action-btn:hover {
background: #3b82f6;
color: white;
transform: scale(1.1);
}
/* Project Content */
.project-content {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
}
.project-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.project-content h3 {
font-size: 20px;
margin: 0;
color: #1a1a1a;
font-weight: 700;
line-height: 1.3;
flex: 1;
}
.project-status {
margin-left: 15px;
}
.status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.completed {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-badge.in-progress {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.project-content p {
color: #374151;
line-height: 1.6;
margin-bottom: 20px;
font-size: 14px;
flex: 1;
}
.project-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
padding: 15px;
background: rgba(59, 130, 246, 0.05);
border-radius: 12px;
border: 1px solid rgba(59, 130, 246, 0.1);
}
.metric {
text-align: center;
}
.metric-value {
display: block;
font-size: 16px;
font-weight: 800;
color: #3b82f6;
line-height: 1;
margin-bottom: 4px;
}
.metric-label {
font-size: 10px;
color: #374151;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.project-link {
margin-top: auto;
}
.project-btn {
width: 100%;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.project-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
/* Carousel Controls */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: #3b82f6;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-arrow:hover {
background: #3b82f6;
color: white;
transform: translateY(-50%) scale(1.15);
text-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}
.carousel-arrow-left {
left: 0;
}
.carousel-arrow-right {
right: 0;
}
.carousel-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: translateY(-50%) scale(1);
}
.carousel-arrow:disabled:hover {
background: rgba(255, 255, 255, 0.9);
color: #3b82f6;
transform: translateY(-50%) scale(1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Carousel Indicators */
.carousel-indicators {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: rgba(59, 130, 246, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: #3b82f6;
transform: scale(1.2);
}
.indicator:hover {
background: rgba(59, 130, 246, 0.6);
transform: scale(1.1);
}
/* No Projects Message */
.no-projects-message,
.error-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
text-align: center;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
backdrop-filter: blur(20px);
}
.no-projects-icon,
.error-icon {
font-size: 4rem;
color: #374151;
margin-bottom: 20px;
}
.no-projects-message h3,
.error-message h3 {
font-size: 24px;
color: #1a1a1a;
margin-bottom: 15px;
}
.no-projects-message p,
.error-message p {
color: #374151;
margin-bottom: 25px;
max-width: 400px;
line-height: 1.6;
}
/* Loading Spinner Styles */
.loading-projects {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
width: 100%;
}
.loading-spinner {
text-align: center;
color: #374151;
}
.loading-spinner i {
font-size: 2rem;
margin-bottom: 15px;
color: #3b82f6;
}
.loading-spinner p {
font-size: 1.1rem;
font-weight: 500;
}
/* Responsive Design */
@media (max-width: 1024px) {
.project-carousel-container {
padding: 0 50px;
}
.project-carousel-track .project-card {
width: calc(50% - 15px);
min-width: 300px;
}
}
@media (max-width: 768px) {
.project-carousel-container {
padding: 0 20px;
}
.project-carousel-track .project-card {
width: 100%;
min-width: 280px;
}
.carousel-arrow {
width: 40px;
height: 40px;
font-size: 16px;
}
.project-metrics {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 12px;
}
.metric-value {
font-size: 14px;
}
.metric-label {
font-size: 9px;
}
}
@media (max-width: 480px) {
.project-carousel-container {
padding: 0 15px;
}
.project-carousel-track {
padding: 15px;
gap: 20px;
}
.project-content {
padding: 20px;
}
.project-content h3 {
font-size: 18px;
}
.project-metrics {
grid-template-columns: 1fr;
gap: 8px;
}
.carousel-arrow {
width: 35px;
height: 35px;
font-size: 14px;
}
}
/* No Projects Message */
.no-projects-message {
text-align: center;
padding: 60px 20px;
color: #666;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
margin: 20px;
}
.no-projects-icon {
margin-bottom: 20px;
}
.no-projects-message i {
font-size: 48px;
color: #ddd;
}
.no-projects-message h3 {
font-size: 24px;
margin-bottom: 10px;
color: #333;
}
.no-projects-message p {
font-size: 16px;
margin-bottom: 30px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.no-projects-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
/* Error Message */
.error-message {
text-align: center;
padding: 60px 20px;
color: #666;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
margin: 20px;
}
.error-icon {
margin-bottom: 20px;
}
.error-message i {
font-size: 48px;
color: #ff6b6b;
}
.error-message h3 {
font-size: 24px;
margin-bottom: 10px;
color: #333;
}
.error-message p {
font-size: 16px;
margin-bottom: 30px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.error-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.section-header{
margin-bottom: 60px;
}
.service-card,
.project-card,
.testimonial-card{
padding: 24px;
}
.contact-form{
padding: 24px;
}
/* Carousel styles removed */
/* Hero grid styles removed */
.hero-stats {
grid-template-columns: 1fr;
gap: 20px;
}
/* Navigation styles removed */
@media (max-width: 480px) {
/* Hero grid styles removed */
.hero-ctas{
flex-direction: column;
width: 100%;
}
.hero-ctas .btn{
width: 100%;
justify-content: center;
}
/* Carousel styles removed */
}
/* =============================
Why Choose Us Section
============================= */
.why-choose-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.why-choose-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 60px;
position: relative;
z-index: 2;
}
.why-choose-card {
background: var(--bg-card);
padding: 40px 30px;
border-radius: var(--radius-2xl);
box-shadow: 0 10px 40px var(--shadow-light);
border: 1px solid var(--border-light);
transition: all var(--transition-slow);
position: relative;
overflow: hidden;
cursor: pointer;
backdrop-filter: blur(20px);
}
.why-choose-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.why-choose-card:hover::before {
left: 100%;
}
.why-choose-card:hover {
transform: translateY(-15px) scale(1.03);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.15),
0 0 40px rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.3);
}
.card-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
}
.card-icon i {
font-size: 32px;
color: white;
transition: all 0.3s ease;
}
.why-choose-card:hover .card-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}
.why-choose-card:hover .card-icon i {
transform: scale(1.1);
}
.card-content {
position: relative;
z-index: 2;
}
.card-content h3 {
font-size: 24px;
margin: 0 0 16px;
color: var(--ink);
font-family: var(--font-heading);
font-weight: 700;
transition: color var(--transition-normal);
}
.why-choose-card:hover .card-content h3 {
color: var(--blue);
}
.card-content p {
color: var(--muted);
line-height: 1.6;
margin-bottom: 24px;
font-family: var(--font-primary);
font-size: 16px;
}
.card-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 20px;
}
.stat {
text-align: center;
padding: 16px 12px;
background: rgba(59, 130, 246, 0.05);
border-radius: 12px;
border: 1px solid rgba(59, 130, 246, 0.1);
transition: all 0.3s ease;
}
.why-choose-card:hover .stat {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.2);
transform: translateY(-2px);
}
.stat-number {
display: block;
font-size: 20px;
font-weight: 800;
color: var(--blue);
margin-bottom: 4px;
font-family: var(--font-heading);
}
.stat-label {
font-size: 12px;
color: var(--muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: var(--font-primary);
}
/* Trust Indicators */
.trust-indicators {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 80px;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.trust-item {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 16px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.6);
transition: all 0.3s ease;
min-width: 150px;
}
.trust-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.95);
}
.trust-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
transition: all 0.3s ease;
}
.trust-item:hover .trust-icon {
transform: scale(1.1);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.trust-icon i {
font-size: 24px;
color: white;
}
.trust-content h4 {
font-size: 28px;
font-weight: 800;
color: #1a1a1a;
margin: 0 0 8px;
font-family: var(--font-heading);
}
.trust-content p {
font-size: 14px;
color: #374151;
margin: 0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: var(--font-primary);
}
/* =============================
Pricing Section
============================= */
.pricing-section {
background: #ffffff;
padding: 100px 0;
position: relative;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-top: 60px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.pricing-card {
background: rgba(255, 255, 255, 0.95);
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.pricing-card:hover::before {
left: 100%;
}
.pricing-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.15),
0 0 40px rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
}
.pricing-card.featured {
border: 2px solid #3b82f6;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
transform: scale(1.05);
position: relative;
}
.pricing-card.featured:hover {
transform: translateY(-15px) scale(1.07);
box-shadow:
0 30px 70px rgba(59, 130, 246, 0.2),
0 0 50px rgba(59, 130, 246, 0.3);
}
.popular-badge {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
padding: 8px 24px;
border-radius: 0 0 12px 12px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 3;
}
.pricing-header {
text-align: center;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.pricing-header h3 {
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 16px;
font-family: var(--font-heading);
transition: color 0.3s ease;
}
.pricing-card:hover .pricing-header h3 {
color: #3b82f6;
}
.price {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 16px;
}
.currency {
font-size: 24px;
font-weight: 600;
color: #3b82f6;
margin-right: 4px;
}
.amount {
font-size: 48px;
font-weight: 800;
color: #1a1a1a;
font-family: var(--font-heading);
line-height: 1;
}
.period {
font-size: 16px;
color: #374151;
margin-left: 4px;
font-weight: 500;
}
.pricing-description {
color: #374151;
font-size: 14px;
margin: 0;
font-family: var(--font-primary);
}
.pricing-features {
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.pricing-features ul {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-features li {
display: flex;
align-items: center;
padding: 12px 0;
color: #4a4a4a;
font-family: var(--font-primary);
transition: all 0.3s ease;
}
.pricing-features li:hover {
color: #3b82f6;
transform: translateX(5px);
}
.pricing-features li i {
color: #10b981;
margin-right: 12px;
font-size: 16px;
transition: all 0.3s ease;
}
.pricing-features li:hover i {
color: #3b82f6;
transform: scale(1.2);
}
.pricing-btn {
width: 100%;
padding: 16px 24px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
font-family: var(--font-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pricing-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
background: linear-gradient(135deg, #2563eb, #7c3aed);
}
.pricing-btn:active {
transform: translateY(0);
}
.pricing-btn.primary {
background: linear-gradient(135deg, #10b981, #059669);
}
.pricing-btn.primary:hover {
background: linear-gradient(135deg, #059669, #047857);
box-shadow: 0 15px 35px rgba(16, 185, 129, 0.4);
}
/* =============================
Responsive Design
============================= */
@media (max-width: 1024px) {
.why-choose-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.pricing-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.trust-indicators {
gap: 40px;
}
}
@media (max-width: 768px) {
.why-choose-section,
.pricing-section {
padding: 80px 0;
}
.why-choose-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 40px;
}
.pricing-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 40px;
}
.pricing-card.featured {
transform: none;
}
.pricing-card.featured:hover {
transform: translateY(-10px) scale(1.02);
}
.trust-indicators {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 60px;
}
.trust-item {
min-width: auto;
}
.card-stats {
grid-template-columns: 1fr;
gap: 12px;
}
}
@media (max-width: 480px) {
.why-choose-section,
.pricing-section {
padding: 60px 0;
}
.why-choose-card,
.pricing-card {
padding: 30px 20px;
}
.card-icon {
width: 60px;
height: 60px;
}
.card-icon i {
font-size: 24px;
}
.card-content h3 {
font-size: 20px;
}
.pricing-header h3 {
font-size: 20px;
}
.amount {
font-size: 36px;
}
.trust-indicators {
grid-template-columns: 1fr;
gap: 15px;
}
.trust-content h4 {
font-size: 24px;
}
}
/* =============================
Services Section Responsive Design
============================= */
@media (max-width: 1024px) {
.services-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
}
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 40px;
}
.service-card {
padding: 0;
}
.service-icon {
margin: 30px 24px 20px;
width: 70px;
height: 70px;
}
.service-icon i {
font-size: 28px;
}
.service-content {
padding: 0 24px 30px;
}
.service-content h3 {
font-size: 20px;
}
.service-content p {
font-size: 15px;
}
.service-cta-btn {
padding: 10px 20px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.services-grid {
gap: 15px;
margin-top: 30px;
}
.service-card {
border-radius: 16px;
}
.service-icon {
margin: 24px 20px 16px;
width: 60px;
height: 60px;
border-radius: 16px;
}
.service-icon i {
font-size: 24px;
}
.service-content {
padding: 0 20px 24px;
}
.service-content h3 {
font-size: 18px;
margin-bottom: 12px;
}
.service-content p {
font-size: 14px;
margin-bottom: 20px;
}
.service-features {
margin-bottom: 24px;
}
.service-features li {
font-size: 13px;
padding: 6px 0;
}
.service-cta-btn {
padding: 10px 18px;
font-size: 12px;
border-radius: 10px;
}
}
/* =============================
Redesigned Contact Section - Modern & Aligned
============================= */
.contact-section {
padding: 120px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 15%, #f1f5f9 35%, #e2e8f0 65%, #f8fafc 100%);
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 45%),
radial-gradient(circle at 85% 75%, rgba(14, 165, 233, 0.06) 0%, transparent 45%),
radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
pointer-events: none;
}
.contact-section .container {
position: relative;
z-index: 1;
}
/* Contact Header */
.contact-header {
text-align: center;
margin-bottom: 80px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out 0.2s forwards;
}
.contact-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 50px;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
margin-bottom: 30px;
transition: all 0.3s ease;
}
.contact-badge:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}
.contact-badge i {
color: white;
font-size: 14px;
}
.contact-badge span {
color: white;
font-size: 16px;
font-weight: 600;
font-family: var(--font-primary);
}
.contact-title {
font-size: 42px;
font-weight: 800;
color: #1e293b;
margin: 0 0 20px 0;
font-family: var(--font-heading);
line-height: 1.2;
background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #1d4ed8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease-out 0.4s forwards;
}
.contact-subtitle {
font-size: 18px;
color: #64748b;
line-height: 1.6;
font-family: var(--font-primary);
margin: 0;
max-width: 600px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease-out 0.6s forwards;
}
/* Contact Grid Layout */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
/* Contact Info Card */
.contact-info-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.8);
opacity: 0;
transform: translateX(-30px);
animation: slideInLeft 0.8s ease-out 0.3s forwards;
}
.info-header {
margin-bottom: 40px;
}
.company-logo {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.logo-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.company-logo h3 {
font-size: 28px;
font-weight: 700;
color: #1e293b;
margin: 0;
font-family: var(--font-heading);
}
.company-description {
font-size: 16px;
color: #64748b;
line-height: 1.6;
font-family: var(--font-primary);
margin: 0;
}
/* Contact Methods */
.contact-methods {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.contact-method {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-method::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(14, 165, 233, 0.03));
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-method:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
}
.contact-method:hover::before {
opacity: 1;
}
.method-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.contact-method:hover .method-icon {
transform: scale(1.1);
}
.method-content {
flex: 1;
position: relative;
z-index: 1;
}
.method-content h4 {
font-size: 16px;
font-weight: 600;
color: #1e293b;
margin: 0 0 4px 0;
font-family: var(--font-heading);
}
.method-content p {
font-size: 14px;
color: #64748b;
margin: 0 0 4px 0;
font-family: var(--font-primary);
}
.method-action {
font-size: 12px;
color: #3b82f6;
font-weight: 500;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.contact-method:hover .method-action {
opacity: 1;
transform: translateX(0);
}
.method-arrow {
color: #3b82f6;
font-size: 14px;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.contact-method:hover .method-arrow {
opacity: 1;
transform: translateX(0);
}
/* Trust Badges removed */
/* Contact Form Card */
.contact-form-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.8);
opacity: 0;
transform: translateX(30px);
animation: slideInRight 0.8s ease-out 0.5s forwards;
}
.form-header {
text-align: center;
margin-bottom: 30px;
}
.form-header h3 {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px 0;
font-family: var(--font-heading);
}
.form-header p {
font-size: 14px;
color: #64748b;
margin: 0;
font-family: var(--font-primary);
}
/* Form Styles */
.contact-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
.input-container {
position: relative;
margin-bottom: 8px;
}
.input-container input,
.input-container textarea,
.input-container select {
width: 100%;
padding: 16px 20px 16px 50px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 14px;
font-family: var(--font-primary);
background: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
outline: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.input-container select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 16px center;
background-repeat: no-repeat;
background-size: 14px;
padding-right: 40px;
}
.input-container input:focus,
.input-container textarea:focus,
.input-container select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 8px 25px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
background: rgba(255, 255, 255, 1);
}
.input-container textarea {
resize: vertical;
min-height: 100px;
font-family: var(--font-primary);
padding-top: 20px;
}
/* Floating Labels */
.input-container label {
position: absolute;
left: 50px;
top: 50%;
transform: translateY(-50%);
color: #64748b;
font-size: 14px;
font-weight: 500;
font-family: var(--font-primary);
transition: all 0.3s ease;
pointer-events: none;
background: rgba(255, 255, 255, 0.9);
padding: 0 6px;
z-index: 1;
}
.input-container textarea + label {
top: 28px;
transform: translateY(0);
}
.input-container input:focus + label,
.input-container textarea:focus + label,
.input-container select:focus + label,
.input-container input:not(:placeholder-shown) + label,
.input-container textarea:not(:placeholder-shown) + label,
.input-container select:not([value=""]) + label {
top: -8px;
left: 44px;
font-size: 12px;
color: #3b82f6;
font-weight: 600;
transform: translateY(0);
}
.input-container textarea:focus + label,
.input-container textarea:not(:placeholder-shown) + label {
top: 4px;
}
.input-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #64748b;
font-size: 16px;
transition: all 0.3s ease;
pointer-events: none;
z-index: 2;
}
.textarea-icon {
top: 28px;
transform: translateY(0);
}
.input-container:focus-within .input-icon {
color: #3b82f6;
transform: translateY(-50%) scale(1.1);
}
.input-container:focus-within .textarea-icon {
transform: translateY(0) scale(1.1);
}
/* All error styling removed - no red fields will show */
/* Form Actions */
.form-actions {
margin-top: 20px;
}
.submit-button {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
padding: 16px 32px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
font-family: var(--font-primary);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
position: relative;
overflow: hidden;
width: 100%;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.submit-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}
.submit-button:active {
transform: translateY(0);
}
.submit-button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.button-icon {
font-size: 16px;
transition: all 0.3s ease;
}
.submit-button:hover .button-icon {
transform: translateX(4px);
}
/* Form note removed */
/* Form Messages */
.form-message {
margin-top: 20px;
padding: 16px;
border-radius: 12px;
transition: all 0.3s ease;
}
.form-message.success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.form-message.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.message-content {
display: flex;
align-items: center;
gap: 10px;
}
.message-icon {
font-size: 16px;
}
.form-message.success .message-icon {
color: #10b981;
}
.form-message.error .message-icon {
color: #ef4444;
}
.message-text {
font-size: 14px;
font-weight: 500;
color: #1e293b;
}
/* Animations */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-title {
font-size: 36px;
}
.contact-info-card,
.contact-form-card {
padding: 30px;
}
}
@media (max-width: 768px) {
.contact-section {
padding: 80px 0;
}
.contact-header {
margin-bottom: 60px;
}
.contact-title {
font-size: 32px;
}
.contact-subtitle {
font-size: 16px;
}
.contact-info-card,
.contact-form-card {
padding: 24px;
}
.form-row {
grid-template-columns: 1fr;
gap: 16px;
}
.input-container input,
.input-container textarea,
.input-container select {
padding: 14px 16px 14px 45px;
font-size: 14px;
}
.input-icon {
left: 16px;
font-size: 14px;
}
.submit-button {
padding: 14px 28px;
font-size: 15px;
}
/* Trust badges removed */
}
@media (max-width: 480px) {
.contact-section {
padding: 60px 0;
}
.contact-title {
font-size: 28px;
}
.contact-info-card,
.contact-form-card {
padding: 20px;
}
.company-logo h3 {
font-size: 24px;
}
.contact-method {
padding: 16px;
}
.method-icon {
width: 45px;
height: 45px;
font-size: 16px;
}
.input-container input,
.input-container textarea,
.input-container select {
padding: 12px 14px 12px 40px;
font-size: 13px;
}
.input-icon {
left: 14px;
font-size: 13px;
}
.submit-button {
padding: 12px 24px;
font-size: 14px;
}
}
/* =============================
Success Popup Styles
============================= */
.success-popup .popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
.success-popup .popup-content {
position: relative;
background: white;
border-radius: 20px;
padding: 40px;
text-align: center;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
transform: scale(0.9);
transition: transform 0.3s ease;
z-index: 1;
}
.success-popup .popup-content {
transform: scale(1);
}
.popup-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
animation: popupBounce 0.6s ease;
}
.popup-icon i {
font-size: 40px;
color: white;
}
.success-popup h3 {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 12px 0;
font-family: var(--font-heading);
}
.success-popup p {
font-size: 16px;
color: #64748b;
line-height: 1.5;
margin: 0 0 30px 0;
font-family: var(--font-primary);
}
.popup-close-btn {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
padding: 12px 32px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
font-family: var(--font-primary);
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.popup-close-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}
@keyframes popupBounce {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Mobile Responsive for Popup */
@media (max-width: 480px) {
.success-popup .popup-content {
padding: 30px 20px;
margin: 20px;
}
.popup-icon {
width: 60px;
height: 60px;
}
.popup-icon i {
font-size: 30px;
}
.success-popup h3 {
font-size: 20px;
}
.success-popup p {
font-size: 14px;
}
.popup-close-btn {
padding: 10px 24px;
font-size: 14px;
}
}
/* =============================
Additional Responsive Enhancements
============================= */
/* Mobile Menu Toggle - Hidden by default */
.mobile-menu-toggle {
display: none;
}
/* Enhanced Mobile Navigation */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
background: var(--bg2);
flex-direction: column;
justify-content: center;
align-items: center;
transition: left 0.3s ease;
z-index: 1000;
}
.nav-menu.active {
left: 0;
}
.nav-menu li {
margin: 20px 0;
}
.nav-link {
font-size: 24px;
font-weight: 600;
}
.mobile-menu-toggle {
display: block;
background: none;
border: none;
font-size: 24px;
color: var(--ink);
cursor: pointer;
z-index: 1001;
padding: 8px;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.mobile-menu-toggle:hover {
background: var(--bg-card-hover);
transform: scale(1.05);
}
.mobile-menu-toggle.active {
color: var(--blue);
}
.nav-right {
gap: 15px;
}
.theme-toggle {
padding: 8px;
font-size: 16px;
}
.cta-button {
padding: 10px 20px;
font-size: 14px;
}
}
/* Enhanced Mobile Hero Section */
@media (max-width: 768px) {
.hero-section {
padding: 100px 0 80px;
text-align: center;
}
.hero-content {
max-width: 100%;
padding: 0 20px;
}
.hero-title {
font-size: clamp(32px, 8vw, 48px);
line-height: 1.2;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: clamp(16px, 4vw, 20px);
margin-bottom: 30px;
}
.hero-buttons {
flex-direction: column;
gap: 15px;
align-items: center;
}
.btn-primary,
.btn-secondary {
width: 100%;
max-width: 280px;
padding: 15px 30px;
font-size: 16px;
}
}
/* Enhanced Mobile Service Cards */
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.service-card {
padding: 30px 20px;
}
.service-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.service-content h3 {
font-size: 22px;
margin-bottom: 15px;
}
.service-content p {
font-size: 15px;
line-height: 1.6;
}
.service-features {
margin: 20px 0;
}
.service-features li {
font-size: 14px;
padding: 8px 0;
}
}
/* Enhanced Mobile About Section */
@media (max-width: 768px) {
.about-content {
grid-template-columns: 1fr;
gap: 40px;
}
.about-text {
order: 2;
}
.about-image {
order: 1;
}
.about-image img {
width: 100%;
height: 300px;
object-fit: cover;
}
.feature-item {
padding: 20px;
margin-bottom: 20px;
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
.feature-content h3 {
font-size: 18px;
margin-bottom: 10px;
}
.feature-content p {
font-size: 14px;
}
}
/* Enhanced Mobile Stats */
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-box {
padding: 20px;
text-align: center;
}
.stat-number {
font-size: 28px;
margin-bottom: 8px;
}
.stat-label {
font-size: 14px;
}
}
/* Enhanced Mobile Values & Process */
@media (max-width: 768px) {
.values-stack,
.process-flow {
grid-template-columns: 1fr;
gap: 30px;
}
.value-item,
.process-step {
padding: 25px 20px;
}
.value-item span,
.process-step span {
font-size: 14px;
padding: 8px 16px;
}
.step-content h4 {
font-size: 18px;
margin-bottom: 10px;
}
.step-content p {
font-size: 14px;
}
}
/* Enhanced Mobile Footer */
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.footer-brand {
order: 1;
}
.footer-contact {
order: 2;
}
.footer-links {
order: 3;
}
.footer-services {
order: 4;
}
.footer-company {
order: 5;
}
.footer-social {
order: 6;
}
.footer-brand h3 {
font-size: 24px;
}
.footer-brand p {
font-size: 14px;
margin: 15px 0;
}
.contact-item {
padding: 12px 0;
font-size: 14px;
}
.footer-links h4,
.footer-services h4,
.footer-company h4,
.footer-social h4 {
font-size: 16px;
margin-bottom: 15px;
}
.footer-links a,
.footer-services a,
.footer-company a {
font-size: 14px;
padding: 8px 0;
}
.social-links {
justify-content: center;
gap: 15px;
}
.social-link {
width: 45px;
height: 45px;
font-size: 18px;
}
}
/* Enhanced Mobile Contact Form */
@media (max-width: 768px) {
.contact-section {
padding: 60px 0;
}
.contact-header {
margin-bottom: 40px;
}
.contact-title {
font-size: 28px;
}
.contact-subtitle {
font-size: 16px;
}
.contact-info-card,
.contact-form-card {
padding: 20px;
}
.form-row {
grid-template-columns: 1fr;
gap: 15px;
}
.input-container input,
.input-container textarea,
.input-container select {
padding: 12px 14px 12px 40px;
font-size: 14px;
}
.input-icon {
left: 14px;
font-size: 14px;
}
.submit-button {
padding: 12px 24px;
font-size: 14px;
width: 100%;
}
}
/* Enhanced Mobile Success Popup */
@media (max-width: 480px) {
.success-popup .popup-content {
padding: 25px 15px;
margin: 15px;
border-radius: 15px;
}
.popup-icon {
width: 50px;
height: 50px;
margin-bottom: 15px;
}
.popup-icon i {
font-size: 24px;
}
.success-popup h3 {
font-size: 18px;
margin-bottom: 10px;
}
.success-popup p {
font-size: 13px;
margin-bottom: 20px;
}
.popup-close-btn {
padding: 8px 20px;
font-size: 13px;
}
}
/* Enhanced Mobile Theme Toggle */
@media (max-width: 768px) {
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1002;
background: var(--bg-card);
border: 2px solid var(--border-light);
box-shadow: var(--shadow-medium);
width: 45px;
height: 45px;
}
.theme-toggle:hover {
transform: scale(1.05);
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
}
/* Mobile theme toggle theme-specific styling */
[data-theme="light"] .theme-toggle {
background: var(--bg-card);
color: var(--muted);
border-color: var(--border-medium);
}
[data-theme="light"] .theme-toggle:hover {
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
}
[data-theme="dark"] .theme-toggle {
background: var(--bg-card);
color: var(--muted-light);
border-color: var(--border-light);
}
[data-theme="dark"] .theme-toggle:hover {
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
}
}
/* =============================
Mobile Navigation Menu
Complete hamburger menu with navigation links
============================= */
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
display: none;
background: var(--bg-card);
border: 2px solid var(--border-light);
border-radius: 12px;
width: 50px;
height: 50px;
cursor: pointer;
transition: all var(--transition-normal);
position: relative;
z-index: 1001;
box-shadow: var(--shadow-medium);
}
.mobile-menu-toggle:hover {
background: var(--blue);
color: var(--text-white);
border-color: var(--blue);
transform: scale(1.05);
}
.mobile-menu-toggle i {
font-size: 18px;
transition: all var(--transition-normal);
}
.mobile-menu-toggle.active i {
transform: rotate(90deg);
}
/* Mobile Navigation Overlay */
.mobile-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(20px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(-100%);
}
.mobile-nav.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mobile Navigation Content */
.mobile-nav-content {
width: 100%;
max-width: 400px;
padding: 40px 20px;
text-align: center;
transform: translateY(50px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav.active .mobile-nav-content {
transform: translateY(0);
}
/* Mobile Navigation Header */
.mobile-nav-header {
margin-bottom: 40px;
}
.mobile-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 32px;
font-weight: 900;
margin-bottom: 20px;
}
.mobile-logo-tech {
color: var(--ink);
text-shadow: 0 2px 10px var(--shadow-dark);
}
.mobile-logo-mates {
color: var(--blue);
text-shadow: 0 2px 10px rgba(37, 99, 235, 0.5);
}
/* Mobile Navigation Links */
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 40px;
}
.mobile-nav-link {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
color: var(--text-white);
text-decoration: none;
font-size: 16px;
font-weight: 600;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.mobile-nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
transition: left 0.5s ease;
}
.mobile-nav-link:hover::before {
left: 100%;
}
.mobile-nav-link:hover {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
transform: translateX(8px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}
.mobile-nav-link i {
font-size: 18px;
color: var(--blue);
transition: all var(--transition-normal);
}
.mobile-nav-link:hover i {
color: var(--text-white);
transform: scale(1.1);
}
.mobile-nav-link span {
flex: 1;
text-align: left;
}
/* Mobile CTA Button */
.mobile-nav-cta {
margin-top: 20px;
}
.mobile-cta-button {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 16px 32px;
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
color: var(--text-white);
border: none;
border-radius: 16px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
position: relative;
overflow: hidden;
}
.mobile-cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.mobile-cta-button:hover::before {
left: 100%;
}
.mobile-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}
.mobile-cta-button:active {
transform: translateY(0);
}
.mobile-cta-button i {
font-size: 18px;
transition: all var(--transition-normal);
}
.mobile-cta-button:hover i {
transform: translateX(4px);
}
/* Mobile Menu Close Button */
.mobile-nav-close {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: var(--text-white);
font-size: 20px;
cursor: pointer;
transition: all var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
z-index: 1002;
}
.mobile-nav-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
/* Show mobile menu toggle on mobile */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
}
.nav-menu {
display: none;
}
.cta-button {
display: none;
}
}
/* Hide mobile menu on desktop */
@media (min-width: 769px) {
.mobile-nav {
display: none;
}
.mobile-menu-toggle {
display: none;
}
}
/* Dark theme mobile navigation */
[data-theme="dark"] .mobile-nav {
background: rgba(0, 0, 0, 0.98);
}
[data-theme="dark"] .mobile-nav-link {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: var(--text-white);
}
[data-theme="dark"] .mobile-nav-link:hover {
background: rgba(96, 165, 250, 0.1);
border-color: rgba(96, 165, 250, 0.3);
}
[data-theme="dark"] .mobile-nav-link i {
color: var(--blue);
}
[data-theme="dark"] .mobile-nav-link:hover i {
color: var(--text-white);
}
[data-theme="dark"] .mobile-logo-tech {
color: var(--text-white);
}
[data-theme="dark"] .mobile-logo-mates {
color: var(--blue);
}
/* Light theme mobile navigation */
[data-theme="light"] .mobile-nav {
background: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .mobile-nav-link {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.1);
color: var(--ink);
}
[data-theme="light"] .mobile-nav-link:hover {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
}
[data-theme="light"] .mobile-nav-link i {
color: var(--blue);
}
[data-theme="light"] .mobile-nav-link:hover i {
color: var(--blue);
}
[data-theme="light"] .mobile-logo-tech {
color: var(--ink);
}
[data-theme="light"] .mobile-logo-mates {
color: var(--blue);
}
[data-theme="light"] .mobile-nav-close {
background: rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.2);
color: var(--ink);
}
[data-theme="light"] .mobile-nav-close:hover {
background: rgba(0, 0, 0, 0.2);
}
/* Enhanced Mobile Scroll Animations */
@media (max-width: 768px) {
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
.fade-in-left {
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-left.visible {
opacity: 1;
transform: translateX(0);
}
.fade-in-right {
opacity: 0;
transform: translateX(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-right.visible {
opacity: 1;
transform: translateX(0);
}
}