/* CSS Custom Properties */
:root {
/* Colors */
--primary-color: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #3b82f6;
--secondary-color: #059669;
--accent-color: #f59e0b;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--text-light: #9ca3af;
--text-on-blue: #ffffff;
--background: #f8f9fa;
--surface: #ffffff;
--border: #e5e7eb;
--blue-overlay-text: #ffffff;
/* Typography */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-heading: 'Poppins', sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
/* 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;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Border Radius */
--radius-sm: 0.25rem;
--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;
}
/* Reset and Base Styles */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-primary);
line-height: 1.6;
color: var(--text-primary);
background-color: var(--background);
overflow-x: hidden;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-dark);
}
/* Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
/* Header */
.header {
background: var(--surface);
box-shadow: var(--shadow-md);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: transform var(--transition-normal);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md) 0;
min-height: 80px;
gap: var(--space-lg);
}
.logo {
display: flex;
align-items: center;
gap: var(--space-md);
min-height: 70px;
padding: var(--space-sm) 0;
flex-shrink: 0;
}
.logo-img {
width: 55px;
height: 55px;
border-radius: var(--radius-lg);
object-fit: contain;
box-shadow: var(--shadow-md);
transition: all var(--transition-fast);
background: white;
padding: 4px;
border: 2px solid rgba(255,255,255,0.9);
flex-shrink: 0;
display: block;
visibility: visible;
opacity: 1;
}
.logo:hover .logo-img {
transform: scale(1.05);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.logo h1 {
font-size: var(--font-size-xl);
color: var(--primary-color);
margin: 0;
font-weight: 700;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
visibility: visible;
opacity: 1;
}
.nav-list {
display: flex;
list-style: none;
gap: var(--space-xl);
align-items: center;
}
.nav-link {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
font-weight: 500;
transition: all var(--transition-fast);
position: relative;
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-color);
background-color: rgba(37, 99, 235, 0.1);
}
.nav-link i {
font-size: var(--font-size-sm);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
.search-container {
position: relative;
display: flex;
align-items: center;
}
.search-input {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--background);
transition: all var(--transition-fast);
width: 200px;
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
width: 250px;
}
.search-btn {
position: absolute;
right: var(--space-xs);
background: none;
border: none;
color: var(--text-light);
cursor: pointer;
padding: var(--space-xs);
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 4px;
}
.hamburger span {
width: 25px;
height: 3px;
background: var(--text-primary);
border-radius: var(--radius-sm);
transition: var(--transition-fast);
}
/* Hero Section */
.hero {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-top: 70px;
}
.hero-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Ensure slider initialization works properly */
.hero-slider[data-slider] {
position: relative;
}
.hero-slider[data-slider] .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateX(100%) scale(1.05);
transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
overflow: hidden;
will-change: transform, opacity;
}
.slide.active {
opacity: 1;
transform: translateX(0) scale(1);
z-index: 2;
}
.slide.prev {
transform: translateX(-40%) scale(0.95);
opacity: 0;
z-index: 1;
}
.slide.next {
transform: translateX(40%) scale(1.05);
opacity: 0;
z-index: 1;
}
.slide.prev-exit {
animation: prevSlideExit 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.slide.next-enter {
animation: nextSlideEnter 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes prevSlideExit {
0% {
opacity: 1;
transform: translateX(0) scale(1);
}
100% {
opacity: 0;
transform: translateX(-40%) scale(0.95);
}
}
@keyframes nextSlideEnter {
0% {
opacity: 0;
transform: translateX(40%) scale(1.05);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.slide.prev-exit {
animation: slideOutLeft 1s ease forwards;
}
.slide.next-enter {
animation: slideInRight 1s ease forwards;
}
@keyframes slideOutLeft {
from {
opacity: 1;
transform: translateX(0) scale(1);
}
to {
opacity: 0;
transform: translateX(-50%) scale(0.95);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50%) scale(1.05);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
/* Enhanced slide content animations */
.slide-content {
animation: slideContentFadeIn 1.2s ease 0.3s both;
}
@keyframes slideContentFadeIn {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.title-line {
animation: titleSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.title-line:nth-child(2) {
animation-delay: 0.2s;
}
.hero-subtitle {
animation: subtitleFadeIn 1s ease 0.6s both;
}
.hero-buttons {
animation: buttonsSlideUp 1s ease 0.9s both;
}
@keyframes titleSlideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes subtitleFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes buttonsSlideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
opacity: 0;
transition: opacity 1.2s ease;
background-color: #1e40af;
display: block;
content: '';
}
/* Ensure slide background inherits from parent slide */
.hero-slider .slide .slide-background {
background-image: inherit;
background-size: inherit;
background-position: inherit;
background-repeat: inherit;
opacity: 1;
}
/* Improved text contrast on blue backgrounds */
.slide-content p,
.hero-subtitle,
.testimonial-quote,
.visual-overlay h3,
.visual-overlay p {
color: var(--blue-overlay-text) !important;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* Enhanced readability for gray text issues - Site-wide fixes */
.testimonials-cta p,
.about-cta p,
.service-cta-enhanced p,
.quick-contact p,
.quick-contact h3,
.footer p,
.footer h4,
.footer-section p,
.footer-section h4,
.legal-footer p,
.contact-card p,
.contact-card h3,
.legal-section p,
.legal-section h4,
.legal-header p,
.legal-intro,
.legal-meta p,
.last-updated,
.contact-details p,
.legal-navigation p,
.service-commitment p,
.contact-card-legal p,
.contact-card-legal h4,
.legal-navigation h4,
.service-commitment h4 {
color: var(--text-primary) !important;
}
/* Ensure all CTA text is readable */
.cta-content p,
.cta-text p,
.testimonials-cta p,
.blog-cta-content p,
.quick-contact p {
color: var(--text-primary) !important;
}
/* Fix any remaining gray text on colored backgrounds */
[class*="cta"] p,
[class*="cta"] h3,
[class*="contact"] p,
[class*="contact"] h3,
[class*="footer"] p,
[class*="footer"] h4,
[class*="legal"] p,
[class*="legal"] h4 {
color: var(--text-primary) !important;
}
/* Specific fixes for common gray text issues */
.quick-contact h3,
.contact-card h3,
.footer-section h4,
.legal-section h4,
.legal-header h2,
.legal-navigation h4,
.contact-card-legal h4,
.service-commitment h4 {
color: var(--text-primary) !important;
}
/* Additional site-wide text readability fixes */
.showcase-content p,
.showcase-content h3,
.service-overview-card p,
.service-overview-card h4,
.about-text p,
.about-text h2,
.company-highlights p,
.company-highlights h4,
.highlight-item p,
.highlight-item h4,
.mv-content p,
.mv-content h3,
.value-item p,
.value-item h4,
.achievement-item p,
.achievement-item h3,
.contact-form-section p,
.contact-form-section h3,
.gallery-description p,
.gallery-description h3,
.blog-preview p,
.blog-preview h2,
.featured-blog-content p,
.featured-blog-content h3,
.blog-grid p,
.blog-grid h3,
.testimonial-content p,
.testimonial-author strong,
.testimonial-author span {
color: var(--text-primary) !important;
}
/* Service description text fixes */
.service-card-enhanced p,
.service-card-enhanced h3,
.service-intro,
.service-categories h4,
.category-content p,
.category-content h4,
.industry-item,
.models-grid p,
.models-grid h3,
.depot-services p,
.depot-services h3,
.supply-item p,
.service-card-footer p,
.ro-systems p,
.ro-systems h3,
.system-specs p,
.system-specs strong,
.system-specs span,
.reticulation-services p,
.reticulation-services h3,
.service-grid p,
.service-grid h4,
.quality-services-grid p,
.quality-services-grid h3,
.quality-service p,
.quality-service h4,
.analysis-parameters span,
.monitoring-features span,
.certification-types span,
.kangen-benefits p,
.kangen-benefits h3,
.benefit-showcase p,
.benefit-showcase h3,
.benefit-list li,
.benefit-list p {
color: var(--text-primary) !important;
}
/* Blog and content text fixes */
.blog-section p,
.blog-section h2,
.blog-section h3,
.blog-section h4,
.post-content p,
.post-content h3,
.post-meta span,
.post-title,
.post-excerpt,
.tag,
.read-more-btn span,
.blog-actions p,
.blog-actions h3,
.newsletter-section p,
.newsletter-section h2,
.newsletter-section h3,
.newsletter-form p,
.newsletter-form label,
.filter-controls p,
.filter-controls label,
.search-results p,
.search-results h3 {
color: var(--text-primary) !important;
}
.slide.active .slide-background {
opacity: 1;
}
.slide.bg-loaded .slide-background {
opacity: 1;
}
.slide:not(.bg-loaded) .slide-background {
background: linear-gradient(135deg, #1e40af, #1d4ed8);
opacity: 1;
}
/* Ensure background images are properly displayed */
.slide[data-bg] {
background-image: var(--slide-bg-fallback, linear-gradient(135deg, #1e40af, #1d4ed8));
}
.slide.bg-loaded {
background-image: var(--slide-bg-loaded, linear-gradient(135deg, #1e40af, #1d4ed8));
}
/* Fix for dynamic background image loading */
.hero-slider .slide {
background-image: var(--slide-bg-fallback, linear-gradient(135deg, #1e40af, #1d4ed8));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-slider .slide.bg-loaded {
background-image: var(--slide-bg-loaded, linear-gradient(135deg, #1e40af, #1d4ed8));
}
.hero-slider .slide .slide-background {
background-image: inherit;
opacity: 1;
}
/* Ensure slides have proper background display */
.hero-slider .slide .slide-background {
min-height: 100%;
display: block;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* Fix for slider background image display */
.hero-slider .slide {
background-color: #1e40af;
}
.hero-slider .slide.active {
background-image: var(--slide-active-bg, linear-gradient(135deg, #1e40af, #1d4ed8));
}
.hero-slider .slide .slide-background {
background-image: inherit;
background-size: inherit;
background-position: inherit;
background-repeat: inherit;
background-color: inherit;
opacity: 1;
}
/* Ensure slide-background elements properly display images */
.hero-slider .slide.active .slide-background {
opacity: 1;
background-image: inherit;
}
.hero-slider .slide.bg-loaded .slide-background {
opacity: 1;
background-image: inherit;
}
/* Ensure active slides show their background images */
.hero-slider .slide.active .slide-background {
opacity: 1;
background-image: inherit;
}
/* Fix for slide background display */
.hero-slider .slide {
background-color: #1e40af;
}
.hero-slider .slide.active {
background-image: var(--slide-active-bg, linear-gradient(135deg, #1e40af, #1d4ed8));
}
/* Ensure all slider images are visible */
.hero-slider .slide[data-bg] {
background-image: var(--slide-bg-fallback);
}
.hero-slider .slide.bg-loaded {
background-image: var(--slide-bg-loaded);
}
.slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(30, 64, 175, 0.75) 0%,
rgba(29, 78, 216, 0.65) 50%,
rgba(59, 130, 246, 0.55) 100%
);
backdrop-filter: blur(0.5px);
z-index: 2;
}
.slide-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
}
.hero-text {
max-width: 900px;
margin: 0 auto;
position: relative;
padding: var(--space-3xl) var(--space-2xl);
border-radius: var(--radius-2xl);
background: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
margin-bottom: var(--space-lg);
text-shadow:
2px 2px 8px rgba(0,0,0,0.7),
0 0 30px rgba(0,0,0,0.4),
0 4px 12px rgba(0,0,0,0.3);
line-height: 1.1;
letter-spacing: -0.02em;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.title-line {
display: block;
animation: slideInUp 0.8s ease forwards;
}
.title-line:nth-child(2) {
animation-delay: 0.2s;
}
.hero-subtitle {
font-size: var(--font-size-xl);
margin-bottom: var(--space-2xl);
opacity: 0.95;
text-shadow:
1px 1px 6px rgba(0,0,0,0.6),
0 0 15px rgba(0,0,0,0.3);
line-height: 1.6;
max-width: 650px;
margin-left: auto;
margin-right: auto;
animation: fadeIn 1s ease 0.4s forwards;
animation-fill-mode: both;
}
.hero-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease 0.6s forwards;
animation-fill-mode: both;
margin-top: var(--space-xl);
}
.hero-buttons .btn {
padding: var(--space-lg) var(--space-2xl);
font-size: var(--font-size-lg);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
transition: all var(--transition-normal);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.2),
0 1px 8px rgba(0, 0, 0, 0.1);
min-width: 180px;
text-align: center;
color: white !important;
z-index: 10;
}
.hero-buttons .btn span,
.hero-buttons .btn i {
position: relative;
z-index: 20;
pointer-events: none;
}
.hero-buttons .btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
z-index: 1;
pointer-events: none;
}
.hero-buttons .btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.05), transparent);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
pointer-events: none;
}
.hero-buttons .btn:hover::after {
transform: translateX(100%);
}
.hero-buttons .btn:hover::before {
opacity: 1;
}
.hero-buttons .btn:hover {
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.25),
0 5px 15px rgba(0, 0, 0, 0.15);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-lg);
font-weight: 600;
text-decoration: none;
transition: all var(--transition-normal);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
color: inherit;
background: transparent;
min-height: 48px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.6s ease;
}
.btn:hover::before {
left: 100%;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.btn-primary {
background: var(--primary-color);
color: white !important;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: var(--primary-color);
}
.btn-outline {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-outline:hover {
background: var(--primary-color);
color: white;
}
.btn-success {
background: var(--secondary-color);
color: white;
}
.btn-success:hover {
background: #047857;
}
/* Slider Controls */
.slider-controls {
position: absolute;
bottom: var(--space-3xl);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--space-md);
z-index: 4;
}
.slider-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 2px solid rgba(255,255,255,0.35);
color: white;
cursor: pointer;
transition: all var(--transition-normal);
backdrop-filter: blur(25px);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
box-shadow:
0 10px 35px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.slider-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 70%, transparent 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.slider-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all var(--transition-normal);
}
.slider-btn:hover::before {
opacity: 1;
}
.slider-btn:hover::after {
width: 100%;
height: 100%;
}
.slider-btn:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.55);
transform: scale(1.15) translateY(-3px);
box-shadow:
0 15px 45px rgba(0, 0, 0, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.slider-btn:active {
transform: scale(1.05) translateY(-1px);
}
.slider-btn:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
.slider-indicators {
position: absolute;
bottom: var(--space-2xl);
right: var(--space-2xl);
display: flex;
gap: var(--space-md);
z-index: 4;
}
.indicator {
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(255,255,255,0.25);
border: 2px solid rgba(255,255,255,0.45);
cursor: pointer;
transition: all var(--transition-normal);
position: relative;
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.indicator::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.3);
border-radius: 50%;
transform: scale(0);
transition: transform var(--transition-normal);
}
.indicator::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
background: var(--primary-color);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform var(--transition-normal);
}
.indicator:hover::before {
transform: scale(1);
}
.indicator:hover {
background: rgba(255,255,255,0.45);
border-color: rgba(255,255,255,0.65);
transform: scale(1.3) translateY(-2px);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.indicator.active {
background: white;
border-color: white;
transform: scale(1.5) translateY(-3px);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.indicator.active::after {
transform: translate(-50%, -50%) scale(1);
}
.indicator.active::before {
transform: scale(0.9);
background: rgba(37, 99, 235, 0.15);
}
.indicator:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
/* Stats Section */
.stats {
background: var(--surface);
padding: var(--space-2xl) 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-xl);
}
.stat-item {
text-align: center;
padding: var(--space-lg);
border-radius: var(--radius-xl);
background: var(--background);
transition: transform var(--transition-normal);
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
color: white;
font-size: var(--font-size-xl);
}
.stat-item h3 {
font-size: var(--font-size-2xl);
color: var(--primary-color);
margin-bottom: var(--space-xs);
}
.stat-item p {
color: var(--text-light);
margin: 0;
}
/* Services Section */
.services-overview {
background: var(--surface);
padding: var(--space-3xl) 0;
}
.overview-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.overview-highlights {
margin-top: var(--space-2xl);
}
.highlight-item {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-xl);
align-items: flex-start;
}
.highlight-item i {
color: var(--primary-color);
font-size: var(--font-size-xl);
margin-top: var(--space-xs);
flex-shrink: 0;
}
.highlight-item h4 {
margin-bottom: var(--space-xs);
color: var(--text-primary);
}
.overview-visual {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.overview-visual img {
width: 100%;
height: 400px;
object-fit: cover;
}
.visual-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
color: white;
padding: var(--space-xl);
text-align: center;
}
.section-header {
text-align: center;
margin-bottom: var(--space-3xl);
}
.section-title {
text-align: center;
margin-bottom: var(--space-lg);
color: var(--text-primary);
position: relative;
font-size: var(--font-size-4xl);
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--primary-color);
border-radius: var(--radius-sm);
}
.section-subtitle {
font-size: var(--font-size-xl);
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Enhanced Services Section */
.main-services {
background: var(--background);
padding: var(--space-3xl) 0;
}
.service-card-enhanced {
background: var(--surface);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
margin-bottom: var(--space-3xl);
overflow: hidden;
transition: all var(--transition-normal);
position: relative;
}
.service-card-enhanced:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.service-card-header {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-2xl);
display: flex;
gap: var(--space-lg);
align-items: center;
}
.service-icon-large {
width: 80px;
height: 80px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xl);
flex-shrink: 0;
}
.service-header-content h3 {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-xs);
}
.service-header-content p {
opacity: 0.9;
margin: 0;
}
.service-card-body {
padding: var(--space-2xl);
}
.service-intro {
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin-bottom: var(--space-2xl);
line-height: 1.6;
}
.service-categories {
margin-bottom: var(--space-2xl);
}
.service-category {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
padding: var(--space-xl);
background: var(--background);
border-radius: var(--radius-xl);
border-left: 4px solid var(--primary-color);
}
.category-icon {
width: 50px;
height: 50px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.category-content h4 {
margin-bottom: var(--space-sm);
color: var(--text-primary);
}
.category-content ul {
list-style: none;
padding: 0;
}
.category-content li {
padding: var(--space-xs) 0;
position: relative;
padding-left: var(--space-lg);
}
.category-content li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: bold;
}
.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
margin-top: var(--space-md);
}
.industry-item {
background: white;
padding: var(--space-md);
border-radius: var(--radius-md);
text-align: center;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast);
}
.industry-item:hover {
transform: translateY(-2px);
}
.service-features-highlight {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: white;
padding: var(--space-xl);
border-radius: var(--radius-xl);
margin-top: var(--space-xl);
}
.service-features-highlight h4 {
margin-bottom: var(--space-lg);
text-align: center;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
}
.feature-highlight {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.ro-systems {
display: grid;
gap: var(--space-2xl);
}
.ro-system {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: center;
padding: var(--space-xl);
background: var(--background);
border-radius: var(--radius-xl);
}
.system-visual img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: var(--radius-lg);
}
.system-specs {
display: grid;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.spec {
display: flex;
justify-content: space-between;
padding: var(--space-xs) 0;
border-bottom: 1px solid var(--border);
}
.reticulation-services {
margin-top: var(--space-xl);
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
}
.service-item {
display: flex;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--background);
border-radius: var(--radius-lg);
transition: transform var(--transition-fast);
}
.service-item:hover {
transform: translateY(-2px);
}
.service-item-icon {
width: 40px;
height: 40px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.quality-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
}
.quality-service {
padding: var(--space-xl);
background: var(--background);
border-radius: var(--radius-xl);
text-align: center;
transition: transform var(--transition-fast);
}
.quality-service:hover {
transform: translateY(-5px);
}
.quality-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-xl);
margin: 0 auto var(--space-md);
}
.analysis-parameters, .monitoring-features, .certification-types {
display: flex;
gap: var(--space-xs);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-md);
}
.analysis-parameters span, .monitoring-features span, .certification-types span {
background: white;
color: var(--primary-color);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
border: 1px solid var(--primary-color);
}
.kangen-benefits {
margin-bottom: var(--space-2xl);
}
.benefit-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: center;
}
.benefit-visual img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: var(--radius-lg);
}
.benefit-list ul {
list-style: none;
padding: 0;
}
.benefit-list li {
padding: var(--space-sm) 0;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.benefit-list i {
color: var(--primary-color);
font-size: var(--font-size-sm);
}
.models-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
}
.model-card {
background: var(--background);
padding: var(--space-lg);
border-radius: var(--radius-lg);
text-align: center;
border: 2px solid transparent;
transition: all var(--transition-fast);
}
.model-card:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
}
.depot-services {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-xl);
}
.depot-location {
background: var(--background);
padding: var(--space-xl);
border-radius: var(--radius-lg);
}
.services-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.supply-item {
display: flex;
gap: var(--space-md);
padding: var(--space-md);
background: var(--background);
border-radius: var(--radius-md);
transition: transform var(--transition-fast);
}
.supply-item:hover {
transform: translateX(5px);
}
.supply-item i {
color: var(--primary-color);
font-size: var(--font-size-lg);
margin-top: var(--space-xs);
flex-shrink: 0;
}
.service-card-footer {
background: var(--background);
padding: var(--space-xl) var(--space-2xl);
border-top: 1px solid var(--border);
}
.service-actions {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
/* Process Section */
.process-section {
background: var(--surface);
padding: var(--space-3xl) 0;
}
.process-timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-xl);
margin-top: var(--space-2xl);
}
.process-step-enhanced {
position: relative;
padding: var(--space-xl);
background: var(--background);
border-radius: var(--radius-xl);
text-align: center;
transition: transform var(--transition-normal);
}
.process-step-enhanced:hover {
transform: translateY(-5px);
}
.step-number {
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
font-weight: bold;
margin: 0 auto var(--space-md);
position: relative;
z-index: 2;
}
.step-content {
position: relative;
}
.step-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-xl);
margin: 0 auto var(--space-md);
}
.process-step-enhanced h3 {
margin-bottom: var(--space-md);
color: var(--text-primary);
}
/* Enhanced CTA Section */
.service-cta-enhanced {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-3xl) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.service-cta-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.cta-text h2 {
color: white;
margin-bottom: var(--space-md);
font-size: var(--font-size-3xl);
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.cta-text p {
font-size: var(--font-size-lg);
margin-bottom: var(--space-xl);
opacity: 0.95;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cta-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .btn {
position: relative;
overflow: hidden;
transition: all var(--transition-normal);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.cta-buttons .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.6s ease;
}
.cta-buttons .btn:hover::before {
left: 100%;
}
.cta-buttons .btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0,0,0,0.3);
}
/* Features Section */
.features {
background: var(--surface);
padding: var(--space-3xl) 0;
}
.features-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.features-text h2 {
margin-bottom: var(--space-lg);
}
.features-list {
margin-top: var(--space-2xl);
}
.feature-item {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-xl);
align-items: flex-start;
}
.feature-icon {
width: 50px;
height: 50px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.feature-content h4 {
margin-bottom: var(--space-xs);
color: var(--text-primary);
}
.feature-content p {
font-size: var(--font-size-sm);
line-height: 1.5;
}
.features-visual {
position: relative;
}
.feature-image {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.feature-image img {
width: 100%;
height: 400px;
object-fit: cover;
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
color: white;
padding: var(--space-xl);
text-align: center;
}
.image-overlay h3 {
margin-bottom: var(--space-xs);
}
/* Blog Posts Grid */
.blog-posts {
margin-bottom: var(--space-2xl);
}
.blog-post {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: all var(--transition-normal);
position: relative;
opacity: 0;
transform: translateY(30px);
}
.blog-post:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.post-image {
position: relative;
overflow: hidden;
height: 200px;
}
.post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-post:hover .post-image img {
transform: scale(1.1);
}
.post-category {
position: absolute;
top: var(--space-md);
left: var(--space-md);
background: var(--primary-color);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
}
.post-content {
padding: var(--space-xl);
}
.post-meta {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-md);
font-size: var(--font-size-sm);
color: var(--text-light);
}
.post-title {
font-size: var(--font-size-xl);
color: var(--text-primary);
margin-bottom: var(--space-md);
line-height: 1.3;
transition: color var(--transition-fast);
}
.blog-post:hover .post-title {
color: var(--primary-color);
}
.post-excerpt {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--space-lg);
}
.post-tags {
display: flex;
gap: var(--space-xs);
margin-bottom: var(--space-lg);
flex-wrap: wrap;
}
.tag {
background: var(--background);
color: var(--primary-color);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
border: 1px solid var(--primary-color);
transition: all var(--transition-fast);
}
.tag:hover {
background: var(--primary-color);
color: white;
}
.post-stats {
display: flex;
gap: var(--space-md);
font-size: var(--font-size-sm);
color: var(--text-light);
margin-bottom: var(--space-lg);
}
.read-more-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: var(--space-xs);
background: var(--primary-color);
color: white !important;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 600;
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
visibility: visible !important;
opacity: 1 !important;
min-height: 40px;
}
.read-more-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;
}
.read-more-btn:hover::before {
left: 100%;
}
.read-more-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.blog-actions {
text-align: center;
}
#load-more {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
padding: var(--space-md) var(--space-2xl);
border-radius: var(--radius-lg);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
}
#load-more:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
#load-more:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* New Service Showcase Styles */
.services-showcase {
display: grid;
gap: var(--space-3xl);
margin-bottom: var(--space-3xl);
}
.service-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
background: var(--surface);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
transition: all var(--transition-normal);
padding: var(--space-2xl);
align-items: center;
}
.service-showcase:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.showcase-visual {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-lg);
}
.service-icon-large {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-2xl);
box-shadow: var(--shadow-md);
}
.showcase-image img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.showcase-content h3 {
font-size: var(--font-size-2xl);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.showcase-content p {
color: var(--text-secondary);
margin-bottom: var(--space-xl);
line-height: 1.6;
}
.service-features {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
}
.feature-badge {
display: flex;
align-items: center;
gap: var(--space-xs);
background: var(--background);
color: var(--primary-color);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
border: 1px solid var(--primary-color);
transition: all var(--transition-fast);
}
.feature-badge:hover {
background: var(--primary-color);
color: white;
}
.showcase-actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.services-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
}
.service-overview-card {
background: var(--surface);
padding: var(--space-2xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
text-align: center;
}
.service-overview-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.overview-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-xl);
margin: 0 auto var(--space-md);
}
.service-overview-card h4 {
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.service-overview-card p {
color: var(--text-secondary);
margin-bottom: var(--space-lg);
}
.overview-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
transition: all var(--transition-fast);
}
.overview-link:hover {
color: var(--primary-dark);
}
/* Testimonials Showcase Styles */
.testimonials-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
}
.testimonial-card {
background: var(--surface);
padding: var(--space-2xl);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
transition: all var(--transition-normal);
text-align: center;
position: relative;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.testimonial-card.featured {
border: 2px solid var(--primary-color);
}
.testimonial-header {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.client-avatar {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-xl);
}
.testimonial-rating .stars {
display: flex;
gap: var(--space-xs);
}
.testimonial-rating .stars i {
color: #fbbf24;
}
.testimonial-quote {
font-size: var(--font-size-lg);
line-height: 1.7;
margin-bottom: var(--space-lg);
font-style: italic;
color: var(--text-primary);
}
.testimonial-author strong {
color: var(--primary-color);
font-size: var(--font-size-lg);
}
.testimonial-author span {
color: var(--text-light);
font-size: var(--font-size-sm);
}
.testimonials-cta {
text-align: center;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-3xl);
border-radius: var(--radius-2xl);
}
.testimonials-cta h3 {
color: white;
margin-bottom: var(--space-md);
}
.testimonials-cta p {
opacity: 0.9;
margin-bottom: var(--space-xl);
}
/* Blog Showcase Styles */
.blog-showcase {
display: grid;
gap: var(--space-3xl);
margin-bottom: var(--space-3xl);
}
.featured-blog-post {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
background: var(--surface);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
transition: all var(--transition-normal);
}
.featured-blog-post:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.featured-blog-image {
position: relative;
overflow: hidden;
}
.featured-blog-image img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform var(--transition-slow);
}
.featured-blog-post:hover .featured-blog-image img {
transform: scale(1.05);
}
.blog-category-badge {
position: absolute;
top: var(--space-lg);
left: var(--space-lg);
background: var(--primary-color);
color: white;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.featured-blog-content {
padding: var(--space-2xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.featured-blog-content h3 {
font-size: var(--font-size-3xl);
color: var(--text-primary);
margin-bottom: var(--space-lg);
line-height: 1.2;
}
.featured-blog-content p {
color: var(--text-secondary);
font-size: var(--font-size-lg);
line-height: 1.6;
margin-bottom: var(--space-lg);
}
.blog-stats {
display: flex;
gap: var(--space-lg);
font-size: var(--font-size-sm);
color: var(--text-light);
margin-bottom: var(--space-xl);
}
.blog-actions {
text-align: center;
}
.blog-cta-content {
max-width: 600px;
margin: 0 auto;
}
.blog-cta-content h3 {
margin-bottom: var(--space-md);
color: var(--text-primary);
}
.blog-cta-content p {
color: var(--text-secondary);
margin-bottom: var(--space-xl);
}
.blog-cta-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
/* About Page Styles */
.about-company {
background: var(--surface);
padding: var(--space-3xl) 0;
}
.about-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.about-text h2 {
font-size: var(--font-size-3xl);
color: var(--text-primary);
margin-bottom: var(--space-lg);
}
.about-text p {
font-size: var(--font-size-lg);
line-height: 1.7;
margin-bottom: var(--space-lg);
color: var(--text-secondary);
}
.company-highlights {
margin-top: var(--space-2xl);
}
.about-visual {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.about-visual img {
width: 100%;
height: 400px;
object-fit: cover;
}
.experience-badge {
position: absolute;
top: var(--space-lg);
right: var(--space-lg);
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-lg);
border-radius: 50%;
text-align: center;
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: var(--shadow-lg);
}
.badge-number {
font-size: var(--font-size-2xl);
font-weight: bold;
line-height: 1;
}
.badge-text {
font-size: var(--font-size-xs);
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mission-vision {
background: var(--background);
padding: var(--space-3xl) 0;
}
.mv-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
}
.mission, .vision {
text-align: center;
padding: var(--space-2xl);
background: var(--surface);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
transition: transform var(--transition-normal);
}
.mission:hover, .vision:hover {
transform: translateY(-5px);
}
.mv-icon {
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
color: white;
font-size: var(--font-size-2xl);
}
.mv-text h3 {
font-size: var(--font-size-2xl);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.mv-text p {
font-size: var(--font-size-lg);
color: var(--text-secondary);
line-height: 1.6;
}
.values {
background: var(--surface);
padding: var(--space-3xl) 0;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
}
.value-item {
text-align: center;
padding: var(--space-2xl);
background: var(--background);
border-radius: var(--radius-2xl);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.value-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.05), transparent);
transition: left 0.6s;
}
.value-item:hover::before {
left: 100%;
}
.value-item:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.value-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
color: white;
font-size: var(--font-size-xl);
box-shadow: var(--shadow-md);
}
.value-item h4 {
font-size: var(--font-size-xl);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.value-item p {
color: var(--text-secondary);
line-height: 1.6;
}
.team {
background: var(--background);
padding: var(--space-3xl) 0;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-2xl);
}
.team-member {
background: var(--surface);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
transition: all var(--transition-normal);
}
.team-member:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.member-image {
position: relative;
overflow: hidden;
height: 250px;
}
.member-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.team-member:hover .member-image img {
transform: scale(1.1);
}
.member-social {
position: absolute;
top: var(--space-lg);
right: var(--space-lg);
display: flex;
gap: var(--space-sm);
}
.member-social a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
transition: all var(--transition-fast);
backdrop-filter: blur(10px);
}
.member-social a:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
.member-info {
padding: var(--space-2xl);
}
.member-info h4 {
font-size: var(--font-size-xl);
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.member-role {
color: var(--primary-color);
font-weight: 600;
margin-bottom: var(--space-md);
}
.member-bio {
color: var(--text-secondary);
line-height: 1.6;
}
.achievements {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-3xl) 0;
text-align: center;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-2xl);
}
.achievement-item {
padding: var(--space-xl);
}
.achievement-number {
font-size: var(--font-size-4xl);
font-weight: bold;
margin-bottom: var(--space-sm);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.achievement-text {
font-size: var(--font-size-lg);
opacity: 0.9;
}
.about-cta {
background: var(--surface);
padding: var(--space-3xl) 0;
text-align: center;
}
.about-cta .cta-content {
max-width: 600px;
margin: 0 auto;
}
.about-cta h2 {
font-size: var(--font-size-3xl);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.about-cta p {
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin-bottom: var(--space-xl);
}
/* Enhanced Newsletter Section */
.newsletter-enhanced {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-3xl) 0;
position: relative;
overflow: hidden;
}
.newsletter-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.05);
opacity: 0;
transition: opacity var(--transition-normal);
}
.newsletter-enhanced:hover::before {
opacity: 1;
}
.newsletter-showcase {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.newsletter-header h2 {
color: white;
font-size: var(--font-size-3xl);
margin-bottom: var(--space-md);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.newsletter-header p {
color: white;
font-size: var(--font-size-lg);
margin-bottom: var(--space-2xl);
opacity: 0.95;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.newsletter-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
}
.benefit-item {
text-align: center;
padding: var(--space-xl);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all var(--transition-normal);
}
.benefit-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
}
.benefit-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
color: white;
font-size: var(--font-size-xl);
}
.benefit-text h4 {
color: white;
margin-bottom: var(--space-xs);
font-size: var(--font-size-lg);
}
.benefit-text p {
color: rgba(255, 255, 255, 0.8);
font-size: var(--font-size-sm);
margin: 0;
}
.newsletter-form-enhanced {
max-width: 500px;
margin: 0 auto;
}
.form-group-enhanced {
display: flex;
gap: var(--space-md);
align-items: stretch;
margin-bottom: var(--space-lg);
}
.input-group {
flex: 1;
position: relative;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: var(--space-xs);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all var(--transition-fast);
}
.input-group:focus-within {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.15);
}
.input-group i {
color: rgba(255, 255, 255, 0.7);
margin-left: var(--space-md);
font-size: var(--font-size-sm);
}
.newsletter-form-enhanced input {
flex: 1;
padding: var(--space-lg) var(--space-md);
border: none;
background: transparent;
color: white;
font-size: var(--font-size-base);
outline: none;
}
.newsletter-form-enhanced input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-form-enhanced .btn {
background: white;
color: var(--primary-color);
border: none;
padding: var(--space-lg) var(--space-2xl);
border-radius: var(--radius-lg);
font-weight: 600;
font-size: var(--font-size-base);
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.newsletter-form-enhanced .btn:hover {
background: var(--background);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.newsletter-footer {
text-align: center;
}
.newsletter-footer p {
color: rgba(255, 255, 255, 0.7);
font-size: var(--font-size-sm);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
}
.newsletter-footer i {
color: #4ade80;
}
/* Newsletter Section (Legacy) */
.newsletter {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-3xl) 0;
text-align: center;
}
.newsletter-content {
max-width: 600px;
margin: 0 auto;
}
.newsletter-text h2 {
color: white;
margin-bottom: var(--space-md);
}
.newsletter-text p {
opacity: 0.9;
margin-bottom: var(--space-xl);
}
.newsletter-form {
display: flex;
gap: var(--space-sm);
max-width: 400px;
margin: 0 auto;
}
.form-group {
display: flex;
gap: var(--space-sm);
width: 100%;
}
.newsletter-form input {
flex: 1;
padding: var(--space-md);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
}
.newsletter-form input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}
.newsletter-form .btn {
background: white;
color: var(--primary-color);
border: none;
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.newsletter-form .btn:hover {
background: var(--background);
transform: translateY(-2px);
}
/* Enhanced Blog Section */
.blog-section {
background: var(--background);
padding: var(--space-3xl) 0;
}
.featured-post {
background: var(--surface);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
margin-bottom: var(--space-3xl);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
transition: transform var(--transition-normal);
}
.featured-post:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.featured-image {
position: relative;
overflow: hidden;
}
.featured-image img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform var(--transition-slow);
}
.featured-post:hover .featured-image img {
transform: scale(1.05);
}
.featured-overlay {
position: absolute;
top: var(--space-lg);
left: var(--space-lg);
}
.featured-tag {
background: var(--primary-color);
color: white;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.featured-content {
padding: var(--space-2xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.post-meta {
display: flex;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
font-size: var(--font-size-sm);
color: var(--text-light);
}
.post-category {
background: var(--primary-color);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
}
.featured-content h2 {
font-size: var(--font-size-3xl);
color: var(--text-primary);
margin-bottom: var(--space-lg);
line-height: 1.2;
}
.featured-content p {
color: var(--text-secondary);
font-size: var(--font-size-lg);
line-height: 1.6;
margin-bottom: var(--space-xl);
}
.post-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.post-stats {
display: flex;
gap: var(--space-lg);
font-size: var(--font-size-sm);
color: var(--text-light);
}
.blog-controls {
background: var(--surface);
padding: var(--space-xl);
border-radius: var(--radius-xl);
margin-bottom: var(--space-2xl);
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-xl);
align-items: center;
box-shadow: var(--shadow-sm);
}
.search-box {
display: flex;
gap: var(--space-sm);
align-items: center;
}
.search-box input {
flex: 1;
padding: var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
transition: all var(--transition-fast);
}
.search-box input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.search-box button {
padding: var(--space-md);
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
transition: background var(--transition-fast);
}
.search-box button:hover {
background: var(--primary-dark);
}
.filter-controls {
display: flex;
gap: var(--space-md);
}
.filter-controls select {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
font-size: var(--font-size-sm);
cursor: pointer;
transition: border-color var(--transition-fast);
}
.filter-controls select:focus {
outline: none;
border-color: var(--primary-color);
}
/* Testimonials */
.testimonials {
background: var(--surface);
padding: var(--space-3xl) 0;
}
.testimonials-slider {
max-width: 600px;
margin: 0 auto;
}
.testimonial-item {
text-align: center;
opacity: 0;
transition: opacity 0.5s ease;
}
.testimonial-item.active {
opacity: 1;
}
.testimonial-content {
background: var(--background);
padding: var(--space-2xl);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
margin-bottom: var(--space-lg);
}
.testimonial-content p {
font-size: var(--font-size-lg);
font-style: italic;
margin-bottom: var(--space-lg);
}
.testimonial-author {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
}
.testimonial-author strong {
color: var(--primary-color);
}
/* Quick Contact */
.quick-contact {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-2xl) 0;
}
.contact-card {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.contact-card h3 {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-md);
}
.contact-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--space-xl);
}
/* Enhanced Professional Footer */
.footer {
background: linear-gradient(135deg,
#FFFFFF 0%,
#F8FAFC 25%,
#F1F5F9 50%,
#F8FAFC 75%,
#FFFFFF 100%);
color: #1F2937;
padding: var(--space-3xl) 0 var(--space-lg);
border-top: 4px solid #059669;
position: relative;
overflow: hidden;
box-shadow:
0 -10px 25px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(5, 150, 105, 0.1);
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
pointer-events: none;
}
.footer-main {
position: relative;
z-index: 1;
}
.footer-brand {
margin-bottom: var(--space-3xl);
text-align: center;
}
.footer-logo {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.footer-logo img {
width: 60px;
height: 60px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 3px solid rgba(255,255,255,0.8);
object-fit: contain;
background: white;
padding: 2px;
transition: all var(--transition-fast);
flex-shrink: 0;
display: block;
visibility: visible;
opacity: 1;
}
.footer-logo h4 {
color: #059669;
font-size: var(--font-size-2xl);
font-weight: 700;
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.footer-brand p {
color: #4B5563;
font-size: var(--font-size-lg);
line-height: 1.6;
max-width: 600px;
margin: 0 auto var(--space-xl);
font-weight: 500;
}
.footer-certifications {
display: flex;
justify-content: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.cert-badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-xl);
font-size: var(--font-size-sm);
font-weight: 600;
box-shadow: var(--shadow-sm);
}
.cert-badge i {
font-size: var(--font-size-xs);
}
.footer-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-2xl);
margin-bottom: var(--space-3xl);
}
.footer-section h4 {
color: #059669;
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--space-lg);
position: relative;
padding-bottom: var(--space-sm);
}
.footer-section h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: #059669;
border-radius: var(--radius-sm);
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section li {
margin-bottom: var(--space-sm);
}
.footer-section a {
color: #4B5563;
text-decoration: none;
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) 0;
border-radius: var(--radius-sm);
font-weight: 500;
}
.footer-section a:hover {
color: #059669;
background: rgba(5, 150, 105, 0.08);
transform: translateX(5px);
}
.footer-section a i {
font-size: var(--font-size-sm);
width: 16px;
flex-shrink: 0;
}
.contact-info {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.contact-info p {
margin: 0;
display: flex;
align-items: flex-start;
gap: var(--space-sm);
line-height: 1.5;
}
.contact-info i {
color: #059669;
width: 18px;
flex-shrink: 0;
margin-top: 2px;
}
.contact-info a {
color: #059669;
text-decoration: none;
font-weight: 500;
transition: color var(--transition-fast);
}
.contact-info a:hover {
color: #047857;
text-decoration: underline;
}
.contact-info strong {
color: var(--text-primary);
font-weight: 600;
min-width: 70px;
}
.social-links {
display: flex;
gap: var(--space-md);
margin: var(--space-lg) 0;
flex-wrap: wrap;
}
.social-link {
display: flex;
align-items: center;
gap: var(--space-sm);
background: var(--primary-color);
color: white;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-xl);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 500;
box-shadow: var(--shadow-sm);
min-width: 100px;
justify-content: center;
transition: all var(--transition-fast);
}
.social-link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background: #047857;
}
.social-link i {
font-size: var(--font-size-sm);
}
.social-link span {
display: inline-block;
}
.footer-newsletter {
margin-top: var(--space-lg);
}
.footer-newsletter p {
color: #059669;
font-weight: 600;
margin-bottom: var(--space-sm);
}
.btn-sm {
padding: var(--space-xs) var(--space-md);
font-size: var(--font-size-sm);
}
.footer-bottom {
border-top: 2px solid var(--border);
padding-top: var(--space-xl);
margin-top: var(--space-xl);
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-lg);
}
.footer-copyright {
flex: 1;
}
.footer-copyright p {
margin: 0 0 var(--space-xs);
color: #4B5563;
font-size: var(--font-size-sm);
font-weight: 500;
}
.footer-copyright p:last-child {
font-size: var(--font-size-xs);
color: #6B7280;
opacity: 1;
font-weight: 400;
}
.footer-legal {
display: flex;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
}
.footer-legal a {
color: #6B7280;
text-decoration: none;
font-size: var(--font-size-sm);
transition: color var(--transition-fast);
font-weight: 500;
}
.footer-legal a:hover {
color: #059669;
text-decoration: underline;
}
.separator {
color: var(--text-light);
font-size: var(--font-size-sm);
}
/* Footer Responsive Design */
@media (max-width: 768px) {
.footer-links-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.footer-brand {
margin-bottom: var(--space-2xl);
}
.footer-logo {
flex-direction: column;
gap: var(--space-sm);
}
.footer-logo h4 {
font-size: var(--font-size-xl);
}
.footer-certifications {
gap: var(--space-md);
}
.cert-badge {
font-size: var(--font-size-xs);
padding: var(--space-xs) var(--space-sm);
}
.social-links {
justify-content: center;
}
.social-link {
min-width: auto;
padding: var(--space-xs) var(--space-sm);
}
.social-link span {
display: none;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: var(--space-md);
}
.footer-legal {
justify-content: center;
}
}
@media (max-width: 480px) {
.footer {
padding: var(--space-2xl) 0 var(--space-md);
}
.contact-info p {
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
.contact-info strong {
min-width: auto;
}
.footer-section a {
padding: var(--space-sm) var(--space-xs);
}
}
/* Back to Top */
.back-to-top {
position: fixed;
bottom: var(--space-xl);
right: var(--space-xl);
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
z-index: 999;
box-shadow: var(--shadow-lg);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
/* Loading Screen */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease;
}
.loading-screen.hidden {
opacity: 0;
pointer-events: none;
}
.loading-spinner {
text-align: center;
}
.loading-spinner i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: var(--space-md);
animation: spin 1s linear infinite;
}
.loading-spinner p {
color: var(--text-primary);
font-size: var(--font-size-lg);
}
/* Animations */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Enhanced Responsive Design */
@media (max-width: 1024px) {
.container {
padding: 0 var(--space-lg);
}
.hero-text {
padding: var(--space-xl) var(--space-lg);
}
.hero-title {
font-size: clamp(2rem, 4vw, 3.5rem);
}
.service-showcase {
grid-template-columns: 1fr;
gap: var(--space-xl);
padding: var(--space-xl);
}
.showcase-visual {
order: 2;
}
.showcase-content {
order: 1;
text-align: center;
}
/* Legal pages responsive */
.legal-content-grid {
grid-template-columns: 1fr;
gap: var(--space-3xl);
}
.legal-sidebar {
order: -1;
}
.legal-main {
order: 1;
}
}
@media (max-width: 768px) {
.features-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav {
position: fixed;
top: 70px;
left: 0;
width: 100%;
background: var(--surface);
box-shadow: var(--shadow-lg);
transform: translateX(-100%);
transition: transform var(--transition-normal);
z-index: 999;
backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
}
.nav.active {
transform: translateX(0);
}
.nav-list {
flex-direction: column;
padding: var(--space-xl);
gap: 0;
}
.nav-link {
padding: var(--space-lg) var(--space-md);
border-bottom: 1px solid var(--border);
font-size: var(--font-size-lg);
justify-content: flex-start;
border-radius: var(--radius-md);
margin: 0 -var(--space-md);
transition: all var(--transition-fast);
}
.nav-link:hover {
background: rgba(37, 99, 235, 0.05);
transform: translateX(5px);
}
.search-container {
display: none;
}
/* Enhanced mobile gallery */
.gallery-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.gallery-item img {
height: 250px;
object-fit: cover;
}
/* Mobile form improvements */
.contact-form-section {
padding: var(--space-xl);
}
.form-row {
flex-direction: column;
gap: var(--space-md);
}
/* Mobile blog improvements */
.blog-posts {
grid-template-columns: 1fr;
}
.featured-post {
grid-template-columns: 1fr;
}
/* Mobile service cards */
.service-showcase {
padding: var(--space-lg);
}
.showcase-visual {
margin-bottom: var(--space-lg);
}
.hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.hero-title {
font-size: 2.5rem;
}
.hero-text {
padding: var(--space-xl) var(--space-lg);
margin: 0 var(--space-lg);
max-width: calc(100% - 2rem);
}
.hero-buttons .btn {
padding: var(--space-md) var(--space-xl);
font-size: var(--font-size-base);
min-width: 160px;
color: white !important;
visibility: visible;
opacity: 1;
}
.hero-buttons .btn span,
.hero-buttons .btn i {
visibility: visible !important;
opacity: 1 !important;
color: white !important;
}
.slider-controls {
bottom: var(--space-xl);
}
.slider-btn {
width: 50px;
height: 50px;
font-size: 1.1rem;
}
.slider-indicators {
bottom: var(--space-lg);
right: var(--space-xl);
gap: var(--space-sm);
}
.indicator {
width: 14px;
height: 14px;
}
.indicator.active {
transform: scale(1.4) translateY(-2px);
}
.section-title {
font-size: 2rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.contact-buttons {
flex-direction: column;
align-items: center;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
/* Blog Responsive */
.featured-post {
grid-template-columns: 1fr;
}
.featured-image {
height: 250px;
}
.featured-content {
padding: var(--space-lg);
}
.featured-content h2 {
font-size: var(--font-size-2xl);
}
.blog-controls {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.filter-controls {
justify-content: center;
flex-wrap: wrap;
}
.newsletter-form {
flex-direction: column;
}
.form-group {
flex-direction: column;
}
/* Enhanced newsletter responsive */
.newsletter-benefits {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.form-group-enhanced {
flex-direction: column;
gap: var(--space-md);
}
.newsletter-form-enhanced .btn {
width: 100%;
}
/* Enhanced Page Hero Responsive */
.hero-content-enhanced {
grid-template-columns: 1fr;
gap: var(--space-xl);
text-align: center;
min-height: auto;
}
.hero-text-enhanced {
order: 1;
}
.hero-visual {
order: 2;
width: 150px;
height: 150px;
margin: 0 auto;
}
.hero-stats {
justify-content: center;
}
.floating-element {
width: 40px;
height: 40px;
font-size: var(--font-size-base);
}
.hero-title-enhanced {
font-size: clamp(2rem, 8vw, 3rem);
}
.hero-subtitle-enhanced {
font-size: var(--font-size-lg);
}
/* Enhanced Hero Animations */
.page-hero-enhanced .hero-content-enhanced {
animation: slideInFromBottom 1s ease;
}
.page-hero-enhanced .hero-title-enhanced {
animation: titleSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation-delay: 0.2s;
}
.page-hero-enhanced .hero-subtitle-enhanced {
animation: subtitleFadeIn 1s ease 0.4s both;
}
.page-hero-enhanced .hero-stats {
animation: fadeInUp 1s ease 0.6s both;
}
.page-hero-enhanced .floating-element {
animation: float 8s ease-in-out infinite;
}
.page-hero-enhanced .floating-element:nth-child(1) {
animation-delay: 0s;
}
.page-hero-enhanced .floating-element:nth-child(2) {
animation-delay: 2.5s;
}
.page-hero-enhanced .floating-element:nth-child(3) {
animation-delay: 5s;
}
/* Enhanced floating animation for hero elements */
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
25% {
transform: translateY(-10px) rotate(2deg);
}
75% {
transform: translateY(-5px) rotate(-1deg);
}
}
/* Hero visual enhancements */
.page-hero-enhanced .hero-visual {
animation: slideInFromRight 1s ease 0.3s both;
}
.page-hero-enhanced .stat-badge {
animation: bounceIn 1.2s ease forwards;
opacity: 0;
transform: scale(0.8);
}
.page-hero-enhanced .stat-badge:nth-child(1) {
animation-delay: 0.8s;
}
.page-hero-enhanced .stat-badge:nth-child(2) {
animation-delay: 1s;
}
/* Enhanced breadcrumb animation */
.page-hero-enhanced .breadcrumb-enhanced {
animation: slideInFromLeft 0.8s ease 0.5s both;
}
/* Performance optimizations for hero animations */
.page-hero-enhanced * {
will-change: transform, opacity;
backface-visibility: hidden;
}
/* Reduced motion support for hero */
@media (prefers-reduced-motion: reduce) {
.page-hero-enhanced .hero-title-enhanced,
.page-hero-enhanced .hero-subtitle-enhanced,
.page-hero-enhanced .hero-stats,
.page-hero-enhanced .floating-element,
.page-hero-enhanced .hero-visual,
.page-hero-enhanced .stat-badge,
.page-hero-enhanced .breadcrumb-enhanced {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Newsletter Premium Animations */
.newsletter-premium .newsletter-header-premium {
animation: fadeInUp 1s ease;
}
.newsletter-premium .category-card {
animation: slideInFromLeft 0.8s ease forwards;
opacity: 0;
transform: translateX(-50px);
}
.newsletter-premium .category-card:nth-child(1) { animation-delay: 0.2s; }
.newsletter-premium .category-card:nth-child(2) { animation-delay: 0.4s; }
.newsletter-premium .category-card:nth-child(3) { animation-delay: 0.6s; }
.newsletter-premium .category-card:nth-child(4) { animation-delay: 0.8s; }
.newsletter-premium .benefit-card {
animation: slideInFromRight 0.8s ease forwards;
opacity: 0;
transform: translateX(50px);
}
.newsletter-premium .benefit-card:nth-child(1) { animation-delay: 0.3s; }
.newsletter-premium .benefit-card:nth-child(2) { animation-delay: 0.5s; }
.newsletter-premium .benefit-card:nth-child(3) { animation-delay: 0.7s; }
.newsletter-premium .newsletter-signup {
animation: slideInFromBottom 1s ease 0.6s both;
}
.newsletter-premium .social-hub {
animation: slideInFromBottom 1s ease 0.8s both;
}
.newsletter-premium .newsletter-footer-premium {
animation: fadeInUp 1s ease 1s both;
}
/* Enhanced hover animations */
.newsletter-premium .category-card:hover .category-icon-premium {
animation: iconPulse 1s ease-in-out infinite;
}
.newsletter-premium .benefit-card:hover .benefit-icon-premium {
animation: iconPulse 1s ease-in-out infinite;
}
.newsletter-premium .social-card:hover .social-icon-container {
animation: iconPulse 1s ease-in-out infinite;
}
@keyframes iconPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
50% {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(255,255,255,0.3);
}
}
/* Performance optimizations */
.newsletter-premium * {
will-change: transform, opacity;
backface-visibility: hidden;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.newsletter-premium .category-card,
.newsletter-premium .benefit-card,
.newsletter-premium .newsletter-signup,
.newsletter-premium .social-hub,
.newsletter-premium .newsletter-footer-premium {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.newsletter-premium .category-card:hover .category-icon-premium,
.newsletter-premium .benefit-card:hover .benefit-icon-premium,
.newsletter-premium .social-card:hover .social-icon-container {
animation: none !important;
}
}
/* Enhanced newsletter responsive */
.newsletter-showcase-grid {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.newsletter-left,
.newsletter-right {
gap: var(--space-xl);
}
.newsletter-form-container {
padding: var(--space-xl);
}
.benefits-showcase {
gap: var(--space-md);
}
.benefits-showcase .benefit-item {
padding: var(--space-md);
}
.benefits-showcase .benefit-icon {
width: 40px;
height: 40px;
font-size: var(--font-size-base);
}
/* Premium Newsletter Responsive */
.newsletter-content-grid {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.newsletter-sidebar,
.newsletter-main {
gap: var(--space-xl);
}
.categories-showcase {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.category-card {
padding: var(--space-md);
flex-direction: column;
text-align: center;
gap: var(--space-sm);
}
.category-icon-premium {
width: 40px;
height: 40px;
font-size: var(--font-size-base);
}
.category-card:hover .category-glow {
width: 60px;
height: 60px;
}
.benefits-list {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.benefit-card {
padding: var(--space-md);
text-align: center;
}
.benefit-header {
flex-direction: column;
gap: var(--space-sm);
}
.benefit-icon-premium {
width: 35px;
height: 35px;
font-size: var(--font-size-sm);
}
.newsletter-signup {
padding: var(--space-xl);
}
.signup-header h3 {
font-size: var(--font-size-xl);
}
.form-group-premium {
flex-direction: column;
gap: var(--space-md);
}
.btn-premium {
width: 100%;
justify-content: center;
}
.social-grid {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.social-card {
padding: var(--space-sm) var(--space-md);
justify-content: center;
}
.social-icon-container {
width: 40px;
height: 40px;
font-size: var(--font-size-base);
}
.social-card:hover .social-glow {
width: 50px;
height: 50px;
}
.connection-stats {
flex-direction: column;
gap: var(--space-md);
}
.stat-number {
font-size: var(--font-size-xl);
}
.newsletter-cta h4 {
font-size: var(--font-size-xl);
}
.cta-badges {
flex-direction: column;
align-items: center;
gap: var(--space-sm);
}
.post-actions {
flex-direction: column;
gap: var(--space-md);
align-items: flex-start;
}
.post-stats {
align-self: flex-end;
}
/* Services Responsive */
.overview-content {
grid-template-columns: 1fr;
text-align: center;
}
.overview-visual {
order: -1;
}
.service-card-header {
flex-direction: column;
text-align: center;
gap: var(--space-md);
}
.service-icon-large {
width: 60px;
height: 60px;
font-size: var(--font-size-lg);
}
.service-header-content h3 {
font-size: var(--font-size-xl);
}
.service-category {
grid-template-columns: 1fr;
text-align: center;
gap: var(--space-md);
}
.ro-system {
grid-template-columns: 1fr;
text-align: center;
}
.benefit-showcase {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.depot-services {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.process-timeline {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.service-actions {
flex-direction: column;
align-items: center;
}
/* About page responsive */
.about-hero {
grid-template-columns: 1fr;
text-align: center;
}
.about-visual {
order: -1;
}
.mv-content {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.values-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
}
.team-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.achievements-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-lg);
}
/* New sections responsive */
.service-showcase {
grid-template-columns: 1fr;
text-align: center;
gap: var(--space-lg);
}
.featured-blog-post {
grid-template-columns: 1fr;
}
.featured-blog-image {
height: 250px;
}
.testimonials-showcase {
grid-template-columns: 1fr;
}
.blog-cta-buttons {
flex-direction: column;
align-items: center;
}
.showcase-actions {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--space-md);
}
.hero {
min-height: 500px;
margin-top: 60px;
}
section {
padding: var(--space-2xl) 0;
}
.hero-title {
font-size: 2rem;
margin-bottom: var(--space-md);
line-height: 1.15;
}
.hero-subtitle {
font-size: var(--font-size-base);
margin-bottom: var(--space-lg);
line-height: 1.5;
}
.hero-text {
padding: var(--space-lg) var(--space-md);
margin: 0 var(--space-md);
border-radius: var(--radius-xl);
max-width: calc(100vw - 1rem);
}
.hero-buttons {
flex-direction: column;
gap: var(--space-sm);
align-items: center;
margin-top: var(--space-lg);
}
.hero-buttons .btn {
width: 100%;
max-width: 280px;
padding: var(--space-lg) var(--space-xl);
font-size: var(--font-size-sm);
text-align: center;
justify-content: center;
min-width: auto;
color: white !important;
visibility: visible;
opacity: 1;
}
.hero-buttons .btn span,
.hero-buttons .btn i {
visibility: visible !important;
opacity: 1 !important;
color: white !important;
}
.slider-controls {
bottom: var(--space-lg);
gap: var(--space-sm);
}
.slider-btn {
width: 45px;
height: 45px;
font-size: 0.95rem;
}
.slider-indicators {
bottom: var(--space-md);
right: var(--space-lg);
gap: var(--space-xs);
}
.indicator {
width: 12px;
height: 12px;
}
.indicator.active {
transform: scale(1.3) translateY(-1px);
}
.hero-title {
font-size: 1.8rem;
line-height: 1.2;
}
.hero-text {
padding: var(--space-md);
margin: 0 var(--space-xs);
}
.hero-buttons .btn {
padding: var(--space-md) var(--space-lg);
font-size: var(--font-size-xs);
max-width: 220px;
}
.slider-controls {
bottom: var(--space-md);
}
.slider-btn {
width: 40px;
height: 40px;
font-size: 0.8rem;
}
.slider-indicators {
bottom: var(--space-xs);
right: var(--space-md);
}
.indicator {
width: 10px;
height: 10px;
}
.section-title {
font-size: 1.8rem;
}
/* About page mobile responsive */
.about-text h2 {
font-size: var(--font-size-2xl);
}
.about-text p {
font-size: var(--font-size-base);
}
.experience-badge {
width: 80px;
height: 80px;
padding: var(--space-md);
}
.badge-number {
font-size: var(--font-size-xl);
}
.badge-text {
font-size: 0.6rem;
}
.mv-text h3 {
font-size: var(--font-size-xl);
}
.mv-text p {
font-size: var(--font-size-base);
}
.value-item {
padding: var(--space-lg);
}
.value-icon {
width: 50px;
height: 50px;
font-size: var(--font-size-lg);
}
.member-image {
height: 200px;
}
.member-info {
padding: var(--space-lg);
}
.achievement-number {
font-size: var(--font-size-3xl);
}
.achievement-text {
font-size: var(--font-size-base);
}
/* New sections mobile responsive */
.service-showcase {
padding: var(--space-lg);
gap: var(--space-md);
}
.showcase-image img {
height: 150px;
}
.featured-blog-content {
padding: var(--space-lg);
}
.featured-blog-content h3 {
font-size: var(--font-size-2xl);
}
.blog-cta-content h3 {
font-size: var(--font-size-2xl);
}
.testimonials-cta h3 {
font-size: var(--font-size-2xl);
}
.btn {
padding: var(--space-sm) var(--space-lg);
font-size: var(--font-size-sm);
}
.service-card {
padding: var(--space-lg);
}
.stat-item {
padding: var(--space-md);
}
/* Legal pages mobile responsive */
.legal-header {
text-align: center;
padding: var(--space-xl) 0;
}
.legal-intro {
font-size: var(--font-size-lg);
margin-bottom: var(--space-xl);
}
.legal-section {
padding: var(--space-xl) 0;
margin-bottom: var(--space-xl);
}
.legal-section h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-lg);
}
.legal-sidebar {
margin-top: var(--space-2xl);
}
.contact-card-legal {
padding: var(--space-lg);
}
.legal-navigation {
margin-bottom: var(--space-xl);
}
.legal-footer {
text-align: center;
padding: var(--space-2xl) 0;
font-size: var(--font-size-sm);
}
}
/* Print Styles */
@media print {
.header,
.hamburger,
.slider-controls,
.back-to-top {
display: none !important;
}
.hero {
margin-top: 0;
height: auto;
padding: var(--space-xl) 0;
}
.slide-overlay {
display: none;
}
.slide-content {
color: var(--text-primary);
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--primary-color: #0000ff;
--text-primary: #000000;
--background: #ffffff;
--border: #000000;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
.slide {
transition: opacity 0.3s ease !important;
}
.slide.prev, .slide.next {
transform: none !important;
}
}
/* Enhanced animations for better performance */
@keyframes slideInFromLeft {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Advanced Text Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes typewriter {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
@keyframes textGlow {
0%, 100% {
text-shadow: 0 0 5px rgba(37, 99, 235, 0.5);
}
50% {
text-shadow: 0 0 20px rgba(37, 99, 235, 0.8), 0 0 30px rgba(37, 99, 235, 0.6);
}
}
/* Typewriter effect for hero titles */
.typewriter {
overflow: hidden;
border-right: 2px solid var(--primary-color);
white-space: nowrap;
animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite;
}
.typewriter-text {
display: inline-block;
}
/* Text reveal animations */
.text-reveal {
animation: fadeInUp 1s ease forwards;
opacity: 0;
}
.text-reveal:nth-child(1) { animation-delay: 0.2s; }
.text-reveal:nth-child(2) { animation-delay: 0.4s; }
.text-reveal:nth-child(3) { animation-delay: 0.6s; }
.text-reveal:nth-child(4) { animation-delay: 0.8s; }
.text-reveal:nth-child(5) { animation-delay: 1s; }
/* Service description animations */
.service-description {
animation: fadeInUp 0.8s ease forwards;
opacity: 0;
}
.service-description:nth-child(1) { animation-delay: 0.3s; }
.service-description:nth-child(2) { animation-delay: 0.5s; }
.service-description:nth-child(3) { animation-delay: 0.7s; }
/* Contact info animations */
.contact-info-item {
animation: slideInFromLeft 0.8s ease forwards;
opacity: 0;
}
.contact-info-item:nth-child(1) { animation-delay: 0.2s; }
.contact-info-item:nth-child(2) { animation-delay: 0.4s; }
.contact-info-item:nth-child(3) { animation-delay: 0.6s; }
/* Enhanced glow effect for important text */
.text-glow {
animation: textGlow 2s ease-in-out infinite;
}
/* Staggered text animations for lists */
.stagger-item {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }
.stagger-item:nth-child(7) { animation-delay: 0.7s; }
.stagger-item:nth-child(8) { animation-delay: 0.8s; }
/* Performance optimized animations */
@media (prefers-reduced-motion: reduce) {
.typewriter,
.text-reveal,
.service-description,
.contact-info-item,
.text-glow,
.stagger-item {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Enhanced Blog Newsletter Styles */
.newsletter-enhanced {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
padding: var(--space-3xl) 0;
position: relative;
overflow: hidden;
}
.newsletter-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
}
.newsletter-showcase {
position: relative;
z-index: 2;
}
.newsletter-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.newsletter-header h2 {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-lg);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.newsletter-header p {
font-size: var(--font-size-lg);
margin-bottom: var(--space-2xl);
opacity: 0.95;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
/* Blog Categories Preview */
.blog-categories-preview {
margin-bottom: var(--space-3xl);
}
.blog-categories-preview h3 {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-xl);
color: white;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.category-preview {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
padding: var(--space-lg);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all var(--transition-normal);
}
.category-preview:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.category-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
font-size: var(--font-size-xl);
}
.category-preview h4 {
margin-bottom: var(--space-sm);
color: white;
}
.category-preview p {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-sm);
margin: 0;
}
/* Enhanced Newsletter Benefits */
.newsletter-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
}
.benefit-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
padding: var(--space-xl);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all var(--transition-normal);
}
.benefit-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.benefit-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
font-size: var(--font-size-xl);
}
.benefit-text h4 {
margin-bottom: var(--space-sm);
color: white;
}
.benefit-text p {
color: rgba(255, 255, 255, 0.9);
margin: 0;
}
/* Enhanced Page Hero Sections */
.page-hero-enhanced {
background: linear-gradient(135deg,
#1e40af 0%,
#1d4ed8 25%,
#2563eb 50%,
#3b82f6 75%,
#60a5fa 100%);
position: relative;
overflow: hidden;
padding: var(--space-3xl) 0;
margin-top: 70px;
}
.page-hero-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(255,255,255,0.05) 0%, transparent 50%);
opacity: 0.6;
}
.hero-content-enhanced {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-2xl);
align-items: center;
min-height: 400px;
}
.hero-text-enhanced {
color: white;
position: relative;
}
.hero-title-enhanced {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
color: #FFFFFF;
margin-bottom: var(--space-lg);
text-shadow:
0 0 20px rgba(255,255,255,0.3),
2px 2px 8px rgba(0,0,0,0.7),
0 0 40px rgba(255,255,255,0.2);
position: relative;
z-index: 3;
animation: titleGlow 3s ease-in-out infinite alternate;
}
.hero-subtitle-enhanced {
font-size: var(--font-size-xl);
color: #FFFFFF;
margin-bottom: var(--space-xl);
line-height: 1.6;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
max-width: 600px;
}
.hero-meta {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.breadcrumb-enhanced {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.breadcrumb-link {
color: #FFFFFF;
text-decoration: none;
font-size: var(--font-size-sm);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.15);
backdrop-filter: blur(5px);
transition: all var(--transition-fast);
border: 1px solid rgba(255,255,255,0.3);
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
font-weight: 500;
}
.breadcrumb-link:hover {
color: #F8FAFC;
background: rgba(5, 150, 105, 0.15);
transform: translateY(-1px);
border-color: rgba(5, 150, 105, 0.3);
}
.breadcrumb-enhanced i {
color: rgba(255,255,255,0.7);
font-size: var(--font-size-xs);
}
.breadcrumb-enhanced span {
color: white;
font-weight: 500;
}
.hero-stats {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.stat-badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: 500;
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(5px);
transition: all var(--transition-normal);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.stat-badge:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.12) 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.stat-badge i {
font-size: var(--font-size-xs);
}
.hero-visual {
position: relative;
width: 200px;
height: 200px;
flex-shrink: 0;
}
.hero-decoration {
position: relative;
width: 100%;
height: 100%;
}
.floating-element {
position: absolute;
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: var(--font-size-lg);
backdrop-filter: blur(5px);
border: 1px solid rgba(255,255,255,0.2);
animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.floating-element:nth-child(2) {
top: 20%;
right: 15%;
animation-delay: 2s;
}
.floating-element:nth-child(3) {
bottom: 15%;
left: 20%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-15px) rotate(5deg);
}
}
/* Enhanced Newsletter Form */
.newsletter-form-enhanced {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--space-2xl);
}
.form-group-enhanced {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-lg);
flex-wrap: wrap;
justify-content: center;
}
.input-group {
position: relative;
flex: 1;
min-width: 250px;
}
.input-group i {
position: absolute;
left: var(--space-md);
top: 50%;
transform: translateY(-50%);
color: var(--primary-color);
z-index: 2;
}
.input-group input {
width: 100%;
padding: var(--space-md) var(--space-md) var(--space-md) 3rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.9);
color: var(--text-primary);
font-size: var(--font-size-base);
transition: all var(--transition-fast);
}
.input-group input:focus {
outline: none;
border-color: white;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.newsletter-form-enhanced .btn {
padding: var(--space-md) var(--space-xl);
background: white;
color: var(--primary-color);
border: 2px solid white;
font-weight: 600;
transition: all var(--transition-fast);
}
.newsletter-form-enhanced .btn:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Premium Newsletter Section */
.newsletter-premium {
background: linear-gradient(135deg,
#1e40af 0%,
#1d4ed8 25%,
#2563eb 50%,
#3b82f6 75%,
#60a5fa 100%);
position: relative;
overflow: hidden;
padding: var(--space-3xl) 0;
margin: var(--space-2xl) 0;
}
.newsletter-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 0.4;
animation: newsletterFloat 25s ease-in-out infinite;
}
.newsletter-premium::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
rgba(255,255,255,0.1) 0%,
transparent 30%,
transparent 70%,
rgba(255,255,255,0.1) 100%);
opacity: 0.3;
animation: newsletterShimmer 15s linear infinite;
}
@keyframes newsletterFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-30px) rotate(1deg); }
}
@keyframes newsletterShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.newsletter-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
}
.newsletter-header-premium {
text-align: center;
margin-bottom: var(--space-3xl);
position: relative;
}
.newsletter-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
color: #F8FAFC; /* Softer warm white with slight gray tint */
margin-bottom: var(--space-lg);
text-shadow:
0 0 15px rgba(59, 130, 246, 0.4),
1px 1px 4px rgba(0,0,0,0.6),
0 0 25px rgba(59, 130, 246, 0.3);
position: relative;
z-index: 3;
animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
0% {
text-shadow:
0 0 20px rgba(255,255,255,0.3),
2px 2px 8px rgba(0,0,0,0.7),
0 0 40px rgba(255,255,255,0.2);
}
100% {
text-shadow:
0 0 30px rgba(255,255,255,0.5),
2px 2px 8px rgba(0,0,0,0.7),
0 0 60px rgba(255,255,255,0.3);
}
}
.newsletter-subtitle {
font-size: var(--font-size-xl);
color: #E2E8F0; /* Softer warm gray-white for better readability */
max-width: 600px;
margin: 0 auto var(--space-lg);
line-height: 1.6;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
position: relative;
z-index: 3;
}
.newsletter-header-decoration {
width: 100px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
margin: var(--space-lg) auto 0;
border-radius: var(--radius-sm);
position: relative;
}
.newsletter-header-decoration::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
box-shadow: 0 0 20px rgba(255,255,255,0.8);
}
.newsletter-content-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-3xl);
align-items: start;
position: relative;
z-index: 3;
}
.newsletter-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
.newsletter-main {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
.section-heading {
font-size: var(--font-size-2xl);
font-weight: 600;
color: #F1F5F9; /* Softer warm white-gray for better readability */
margin-bottom: var(--space-xl);
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
position: relative;
padding-bottom: var(--space-sm);
}
.section-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: linear-gradient(90deg, rgba(255,255,255,0.8), transparent);
border-radius: var(--radius-sm);
}
/* Content Categories */
.content-categories {
margin-bottom: var(--space-2xl);
}
.categories-showcase {
display: grid;
gap: var(--space-lg);
}
.category-card {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-xl);
padding: var(--space-lg);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: var(--space-md);
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.category-card:hover::before {
opacity: 1;
}
.category-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 15px 35px rgba(0,0,0,0.2),
0 0 0 1px rgba(255,255,255,0.4);
border-color: rgba(255,255,255,0.4);
}
.category-visual {
position: relative;
flex-shrink: 0;
}
.category-icon-premium {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
color: white;
box-shadow:
0 4px 15px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.3);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.category-icon-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
border-radius: 50%;
opacity: 0;
transition: opacity var(--transition-normal);
}
.category-icon-premium:hover::before {
opacity: 1;
}
.category-glow {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all var(--transition-normal);
z-index: -1;
}
.category-card:hover .category-glow {
width: 80px;
height: 80px;
}
.category-content h4 {
font-size: var(--font-size-lg);
font-weight: 600;
color: #F8FAFC; /* Softer warm white for better readability */
margin-bottom: var(--space-xs);
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.category-content p {
font-size: var(--font-size-sm);
color: rgba(255,255,255,0.9);
margin: 0;
line-height: 1.4;
}
/* Subscription Benefits */
.subscription-benefits {
position: relative;
}
.benefits-list {
display: grid;
gap: var(--space-lg);
}
.benefit-card {
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-lg);
padding: var(--space-lg);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.benefit-card:hover::before {
opacity: 1;
}
.benefit-card:hover {
transform: translateY(-3px) scale(1.01);
box-shadow:
0 10px 25px rgba(0,0,0,0.15),
0 0 0 1px rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.3);
}
.benefit-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-sm);
}
.benefit-icon-premium {
width: 40px;
height: 40px;
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
color: white;
box-shadow:
0 3px 10px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.2);
transition: all var(--transition-normal);
flex-shrink: 0;
}
.benefit-icon-premium:hover {
transform: scale(1.1);
box-shadow:
0 5px 15px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.3);
}
.benefit-card h4 {
font-size: var(--font-size-base);
font-weight: 600;
color: #F1F5F9; /* Softer warm gray-white for better readability */
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.benefit-card p {
font-size: var(--font-size-sm);
color: rgba(255,255,255,0.9);
line-height: 1.5;
margin: 0;
}
/* Newsletter Signup */
.newsletter-signup {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(15px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-2xl);
padding: var(--space-2xl);
box-shadow:
0 15px 35px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.newsletter-signup::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.newsletter-signup:hover::before {
opacity: 1;
}
.signup-header h3 {
font-size: var(--font-size-2xl);
font-weight: 600;
color: #F8FAFC; /* Softer warm white for better readability */
margin-bottom: var(--space-xs);
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.signup-header p {
font-size: var(--font-size-base);
color: rgba(255,255,255,0.9);
margin-bottom: var(--space-xl);
line-height: 1.5;
}
.newsletter-form-premium {
margin-bottom: var(--space-lg);
}
.form-group-premium {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-lg);
align-items: stretch;
}
.input-container {
flex: 1;
position: relative;
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.8) 100%);
border-radius: var(--radius-lg);
padding: var(--space-xs);
border: 2px solid rgba(255,255,255,0.3);
transition: all var(--transition-normal);
overflow: hidden;
}
.input-container:focus-within {
border-color: rgba(255,255,255,0.6);
box-shadow:
0 0 0 3px rgba(255,255,255,0.2),
0 5px 15px rgba(0,0,0,0.1);
transform: translateY(-1px);
}
.input-icon {
position: absolute;
left: var(--space-md);
top: 50%;
transform: translateY(-50%);
color: var(--primary-color);
font-size: var(--font-size-sm);
z-index: 2;
transition: all var(--transition-normal);
}
.input-container:focus-within .input-icon {
color: var(--primary-dark);
transform: translateY(-50%) scale(1.1);
}
.newsletter-input {
width: 100%;
padding: var(--space-lg) var(--space-md) var(--space-lg) 3rem;
border: none;
background: transparent;
color: var(--text-primary);
font-size: var(--font-size-base);
outline: none;
position: relative;
z-index: 1;
}
.newsletter-input::placeholder {
color: var(--text-light);
transition: color var(--transition-normal);
}
.input-container:focus-within .newsletter-input::placeholder {
color: var(--text-secondary);
}
.input-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
pointer-events: none;
}
.input-container:focus-within .input-glow {
opacity: 1;
}
.btn-premium {
background: linear-gradient(135deg, white 0%, rgba(248,249,250,0.9) 100%);
color: var(--primary-color);
border: 2px solid white;
padding: var(--space-lg) var(--space-2xl);
border-radius: var(--radius-lg);
font-weight: 700;
font-size: var(--font-size-base);
cursor: pointer;
transition: all var(--transition-normal);
white-space: nowrap;
box-shadow:
0 4px 15px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.btn-premium::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(37,99,235,0.2), transparent);
transition: left 0.6s ease;
}
.btn-premium:hover::before {
left: 100%;
}
.btn-premium:hover {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
transform: translateY(-2px) scale(1.02);
box-shadow:
0 8px 25px rgba(37,99,235,0.4),
0 3px 10px rgba(0,0,0,0.15);
border-color: var(--primary-color);
}
.btn-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all var(--transition-normal);
pointer-events: none;
}
.btn-premium:active .btn-ripple {
width: 300px;
height: 300px;
}
.form-footer {
text-align: center;
}
.privacy-notice {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
color: rgba(255,255,255,0.8);
font-size: var(--font-size-sm);
margin: 0;
}
.privacy-notice i {
color: #4ade80;
}
/* Social Media Hub */
.social-hub {
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
box-shadow:
0 10px 25px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.05);
}
.social-header {
text-align: center;
margin-bottom: var(--space-xl);
position: relative;
}
.social-header h4 {
font-size: var(--font-size-xl);
font-weight: 600;
color: #F1F5F9; /* Softer warm gray-white for better readability */
margin-bottom: var(--space-sm);
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.social-decoration {
width: 40px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
margin: 0 auto;
border-radius: var(--radius-sm);
}
.social-grid {
display: grid;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.social-card {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
text-decoration: none;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.social-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.social-card:hover::before {
opacity: 1;
}
.social-card:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 8px 20px rgba(0,0,0,0.15),
0 0 0 1px rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.2);
}
.social-icon-container {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
color: white;
position: relative;
flex-shrink: 0;
}
.social-card.facebook .social-icon-container {
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%);
box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
}
.social-card.whatsapp .social-icon-container {
background: linear-gradient(135deg, #25d366 0%, #4caf50 100%);
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.social-card.email .social-icon-container {
background: linear-gradient(135deg, #ea4335 0%, #ff6b6b 100%);
box-shadow: 0 4px 15px rgba(234, 67, 53, 0.3);
}
.social-card.phone .social-icon-container {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}
.social-glow {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all var(--transition-normal);
z-index: -1;
}
.social-card:hover .social-glow {
width: 60px;
height: 60px;
}
.social-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.social-name {
font-size: var(--font-size-base);
font-weight: 600;
color: #F8FAFC; /* Softer warm white for better readability */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.social-handle {
font-size: var(--font-size-sm);
color: rgba(255,255,255,0.8);
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.social-description-card {
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
padding: var(--space-lg);
text-align: center;
}
.social-description-card p {
color: rgba(255,255,255,0.9);
font-size: var(--font-size-sm);
line-height: 1.6;
margin-bottom: var(--space-lg);
}
.connection-stats {
display: flex;
justify-content: center;
gap: var(--space-xl);
}
.stat {
text-align: center;
}
.stat-number {
display: block;
font-size: var(--font-size-2xl);
font-weight: 700;
color: #F8FAFC; /* Softer warm white for better readability */
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.stat-label {
font-size: var(--font-size-xs);
color: rgba(255,255,255,0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Newsletter Footer */
.newsletter-footer-premium {
text-align: center;
margin-top: var(--space-3xl);
padding-top: var(--space-2xl);
border-top: 1px solid rgba(255,255,255,0.2);
position: relative;
}
.newsletter-footer-premium::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}
.newsletter-cta h4 {
font-size: var(--font-size-2xl);
font-weight: 600;
color: #F8FAFC; /* Softer warm white for better readability */
margin-bottom: var(--space-md);
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.newsletter-cta p {
font-size: var(--font-size-base);
color: rgba(255,255,255,0.9);
margin-bottom: var(--space-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.cta-badges {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
color: white;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-xl);
font-size: var(--font-size-sm);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(5px);
transition: all var(--transition-normal);
}
.badge:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
border-color: rgba(255,255,255,0.3);
}
.badge i {
color: #4ade80;
}
.newsletter-left {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
.newsletter-right {
display: flex;
flex-direction: column;
gap: var(--space-2xl);
}
.newsletter-form-container {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(248,249,250,0.05) 100%);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05);
}
.benefits-showcase {
display: grid;
gap: var(--space-lg);
}
.benefits-showcase .benefit-item {
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(248,249,250,0.03) 100%);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
padding: var(--space-lg);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.benefits-showcase .benefit-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.benefits-showcase .benefit-item:hover::before {
opacity: 1;
}
.benefits-showcase .benefit-item:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.benefits-showcase .benefit-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
font-size: var(--font-size-lg);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.benefits-showcase .benefit-text h4 {
margin-bottom: var(--space-xs);
font-size: var(--font-size-base);
font-weight: 600;
}
.benefits-showcase .benefit-text p {
font-size: var(--font-size-sm);
line-height: 1.5;
margin: 0;
}
.newsletter-footer p {
color: rgba(255, 255, 255, 0.8);
font-size: var(--font-size-sm);
margin: 0;
}
/* Social Media Integration */
.newsletter-social {
margin-top: var(--space-2xl);
}
.newsletter-social h4 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-lg);
color: white;
}
.social-links-enhanced {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--space-lg);
}
.social-link-enhanced {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
color: white;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all var(--transition-fast);
}
.social-link-enhanced:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.social-link-enhanced i {
font-size: var(--font-size-lg);
}
.social-description {
color: rgba(255, 255, 255, 0.8);
font-size: var(--font-size-sm);
max-width: 500px;
margin: 0 auto;
line-height: 1.5;
}
/* Mobile Responsive for Newsletter */
@media (max-width: 768px) {
.newsletter-enhanced {
padding: var(--space-2xl) 0;
}
.newsletter-header h2 {
font-size: var(--font-size-3xl);
}
.categories-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.newsletter-benefits {
grid-template-columns: 1fr;
}
.form-group-enhanced {
flex-direction: column;
align-items: stretch;
}
.input-group {
min-width: auto;
}
.social-links-enhanced {
flex-direction: column;
align-items: center;
}
}
/* Legal Page Styles */
.legal-content {
background: var(--background);
padding: var(--space-3xl) 0;
min-height: 60vh;
}
.legal-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.legal-header {
text-align: center;
margin-bottom: var(--space-3xl);
padding: var(--space-2xl) 0;
border-bottom: 2px solid var(--primary-color);
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.legal-header h2 {
color: var(--primary-color);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-md);
}
.legal-meta {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.last-updated {
color: var(--text-light);
font-size: var(--font-size-sm);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.legal-intro {
font-size: var(--font-size-lg);
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.legal-content-grid {
display: grid;
grid-template-columns: 1fr 300px;
gap: var(--space-3xl);
margin-bottom: var(--space-3xl);
}
.legal-main {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.legal-section {
padding: var(--space-2xl);
border-bottom: 1px solid var(--border);
}
.legal-section:last-child {
border-bottom: none;
}
.legal-section h3 {
color: var(--primary-color);
font-size: var(--font-size-2xl);
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.legal-section h3 i {
font-size: var(--font-size-xl);
}
.legal-section h4 {
color: var(--text-primary);
margin: var(--space-xl) 0 var(--space-md);
font-size: var(--font-size-lg);
}
.legal-section ul {
list-style: none;
padding: 0;
}
.legal-section li {
padding: var(--space-sm) 0;
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}
.legal-section li i {
color: var(--primary-color);
margin-top: 2px;
flex-shrink: 0;
}
.legal-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.contact-card-legal {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.contact-card-legal h4 {
background: var(--primary-color);
color: white;
padding: var(--space-lg);
margin: 0;
font-size: var(--font-size-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.contact-details {
padding: var(--space-lg);
}
.contact-details p {
margin-bottom: var(--space-md);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.contact-details i {
color: var(--primary-color);
width: 16px;
flex-shrink: 0;
}
.contact-details a {
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.contact-details a:hover {
color: var(--primary-color);
}
.legal-navigation {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.legal-navigation h4 {
background: var(--primary-color);
color: white;
padding: var(--space-lg);
margin: 0;
font-size: var(--font-size-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.legal-navigation ul {
padding: var(--space-lg);
list-style: none;
margin: 0;
}
.legal-navigation li {
margin-bottom: var(--space-sm);
}
.legal-navigation a {
color: var(--text-secondary);
text-decoration: none;
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs);
border-radius: var(--radius-sm);
}
.legal-navigation a:hover {
color: var(--primary-color);
background: rgba(37, 99, 235, 0.05);
transform: translateX(5px);
}
.legal-navigation i {
font-size: var(--font-size-sm);
flex-shrink: 0;
}
.service-commitment {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.service-commitment h4 {
background: rgba(255, 255, 255, 0.1);
color: white;
padding: var(--space-lg);
margin: 0;
font-size: var(--font-size-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.service-commitment ul {
padding: var(--space-lg);
list-style: none;
margin: 0;
}
.service-commitment li {
margin-bottom: var(--space-sm);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.service-commitment i {
color: #fbbf24;
flex-shrink: 0;
}
.legal-footer {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
padding: var(--space-2xl);
text-align: center;
border-top: 4px solid var(--primary-color);
}
.legal-footer p {
color: var(--text-secondary);
font-size: var(--font-size-base);
line-height: 1.6;
margin: 0;
}
/* Improved button animations */
.btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn i {
transition: transform var(--transition-fast);
margin-right: var(--space-xs);
}
.btn:hover i {
transform: translateX(2px);
}
.btn span {
display: inline-block;
visibility: visible;
opacity: 1;
}
/* Ensure button text is always visible */
.hero-buttons .btn *,
.services-cta .btn *,
.contact-buttons .btn * {
visibility: visible !important;
opacity: 1 !important;
color: inherit !important;
}
/* Enhanced card hover effects */
.service-card-enhanced,
.blog-post {
transform-origin: center;
will-change: transform, box-shadow;
}
/* Ensure all text elements are visible */
.hero-title,
.hero-subtitle,
.logo h1,
.btn span,
.btn i,
.nav-link span,
.read-more-btn,
.read-more-btn span,
.read-more-btn i {
visibility: visible !important;
opacity: 1 !important;
display: inline-block !important;
color: inherit !important;
}
/* Enhanced animations for blog page */
.blog-section {
animation: fadeInUp 1s ease;
}
.featured-post {
animation: slideInFromLeft 1s ease 0.2s both;
}
.blog-controls {
animation: slideInFromRight 1s ease 0.4s both;
}
.blog-posts {
animation: fadeInUp 1s ease 0.6s both;
}
.newsletter-enhanced {
animation: slideInFromBottom 1s ease 0.8s both;
}
/* Text animation improvements */
.newsletter-header h2 {
animation: textGlow 3s ease-in-out infinite;
}
.newsletter-benefits .benefit-item {
animation: slideInFromBottom 0.8s ease forwards;
opacity: 0;
}
.newsletter-benefits .benefit-item:nth-child(1) { animation-delay: 0.2s; }
.newsletter-benefits .benefit-item:nth-child(2) { animation-delay: 0.4s; }
.newsletter-benefits .benefit-item:nth-child(3) { animation-delay: 0.6s; }
.newsletter-form-enhanced {
animation: slideInFromBottom 1s ease 0.8s both;
}
.newsletter-social {
animation: fadeInUp 1s ease 1s both;
}
/* Enhanced footer animations */
.footer-brand {
animation: fadeInUp 1s ease;
}
.footer-section {
animation: slideInFromBottom 0.8s ease forwards;
opacity: 0;
}
.footer-section:nth-child(1) { animation-delay: 0.2s; }
.footer-section:nth-child(2) { animation-delay: 0.4s; }
.footer-section:nth-child(3) { animation-delay: 0.6s; }
.footer-section:nth-child(4) { animation-delay: 0.8s; }
.footer-bottom {
animation: fadeInUp 1s ease 1s both;
}
/* Fix button text visibility specifically */
.btn {
color: inherit !important;
}
.btn span,
.btn i {
color: inherit !important;
visibility: visible !important;
opacity: 1 !important;
}
.read-more-btn,
.btn-outline,
.btn-primary,
.btn-secondary,
.btn-success {
color: inherit !important;
}
.read-more-btn span,
.read-more-btn i {
color: white !important;
visibility: visible !important;
opacity: 1 !important;
display: inline !important;
position: relative;
z-index: 10;
}
/* Ensure all button content is visible */
.btn *,
.read-more-btn *,
button *,
input[type="submit"] *,
a[role="button"] *,
.hero-buttons .btn *,
.services-cta .btn *,
.contact-buttons .btn * {
visibility: visible !important;
opacity: 1 !important;
color: inherit !important;
display: inline !important;
}
/* Final check for homepage redesign */
.homepage-redesign-complete {
/* This class can be added to the body to confirm redesign completion */
}
/* Ensure slider elements are properly positioned */
.hero-slider,
.hero-slider .slide,
.hero-slider .slide-background,
.hero-slider .slide-content {
position: relative;
}
.hero-slider .slide,
.hero-slider .slide-background {
width: 100%;
height: 100%;
}
/* Fix for blog.html specific button text issues */
.blog-section .read-more-btn,
.blog-section .btn,
#load-more,
.newsletter-form .btn {
color: white !important;
visibility: visible !important;
opacity: 1 !important;
background: var(--primary-color) !important;
}
.blog-section .read-more-btn span,
.blog-section .read-more-btn i,
#load-more span,
#load-more i,
.newsletter-form .btn span,
.newsletter-form .btn i {
color: white !important;
visibility: visible !important;
opacity: 1 !important;
display: inline !important;
}
/* Ensure all button texts are visible across all pages */
.read-more-btn span,
.btn span,
button span {
visibility: visible !important;
opacity: 1 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* Fix any potential text overflow issues */
.hero-buttons .btn {
white-space: nowrap;
text-overflow: ellipsis;
}
/* Enhanced text readability - make all gray text black */
p, .text-secondary, .text-light, [class*="text-secondary"], [class*="text-light"] {
color: var(--text-primary) !important;
}
/* Ensure all headings are properly colored */
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary) !important;
}
/* Fix footer text colors */
.footer p, .footer h4, .footer-section p, .footer-section h4 {
color: var(--text-primary) !important;
}
/* Fix contact info text colors */
.contact-info p, .contact-info strong {
color: var(--text-primary) !important;
}
/* Fix social links text */
.social-link span, .social-links a span {
color: white !important;
}
/* Fix newsletter text colors */
.newsletter-footer p {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Fix blog text colors */
.post-meta span, .post-stats span {
color: var(--text-light) !important;
}
/* Fix button text visibility */
.btn, .btn span, .btn i {
color: inherit !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Fix navigation text */
.nav-link, .nav-link i, .nav-link span {
color: inherit !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Fix form text */
.newsletter-form-enhanced input::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Fix legal page text */
.legal-section p, .legal-section h4, .legal-header p {
color: var(--text-primary) !important;
}
/* Fix service page text */
.service-card-enhanced p, .service-card-enhanced h3 {
color: var(--text-primary) !important;
}
/* Fix about page text */
.about-text p, .about-text h2, .company-highlights p {
color: var(--text-primary) !important;
}
/* Enhanced text readability - comprehensive fix for all gray text */
* {
color: inherit !important;
}
/* Beautiful Design Enhancements */
.hero-text {
background: linear-gradient(135deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 100px rgba(37, 99, 235, 0.1);
border-radius: var(--radius-2xl);
position: relative;
overflow: hidden;
}
.hero-text::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity var(--transition-normal);
pointer-events: none;
}
.hero-text:hover::before {
opacity: 1;
}
/* Enhanced button designs */
.btn {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
box-shadow:
0 10px 30px rgba(37, 99, 235, 0.3),
0 1px 8px rgba(0, 0, 0, 0.1);
border-radius: var(--radius-xl);
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
position: relative;
overflow: hidden;
transition: all var(--transition-normal);
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.6s ease;
}
.btn:hover::after {
left: 100%;
}
.btn:hover {
transform: translateY(-3px);
box-shadow:
0 15px 35px rgba(37, 99, 235, 0.4),
0 5px 15px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
}
/* Beautiful card enhancements */
.service-card-enhanced, .blog-post, .testimonial-card {
background: linear-gradient(135deg, var(--surface) 0%, rgba(248, 249, 250, 0.8) 100%);
border: 1px solid rgba(37, 99, 235, 0.1);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.1),
0 1px 8px rgba(0, 0, 0, 0.05);
border-radius: var(--radius-2xl);
position: relative;
overflow: hidden;
transition: all var(--transition-normal);
}
.service-card-enhanced::before,
.blog-post::before,
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, rgba(59, 130, 246, 0.01) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
pointer-events: none;
}
.service-card-enhanced:hover::before,
.blog-post:hover::before,
.testimonial-card:hover::before {
opacity: 1;
}
.service-card-enhanced:hover,
.blog-post:hover,
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(37, 99, 235, 0.1);
border-color: rgba(37, 99, 235, 0.2);
}
/* Beautiful section headers */
.section-title {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
font-weight: 700;
letter-spacing: -0.02em;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-sm);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
/* Enhanced newsletter section */
.newsletter-enhanced {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, #1e40af 100%);
position: relative;
overflow: hidden;
}
.newsletter-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 0.3;
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(1deg); }
}
/* Beautiful footer enhancements */
.footer {
background: linear-gradient(135deg,
rgba(248, 249, 250, 0.95) 0%,
rgba(241, 245, 249, 0.9) 50%,
rgba(248, 249, 250, 0.95) 100%);
border-top: 3px solid var(--primary-color);
box-shadow: inset 0 1px 0 rgba(37, 99, 235, 0.1);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.03) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
pointer-events: none;
}
.footer-main {
position: relative;
z-index: 1;
}
/* Enhanced logo styling */
.footer-logo {
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.8) 100%);
border-radius: var(--radius-xl);
padding: var(--space-lg);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.1),
0 1px 8px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(37, 99, 235, 0.1);
transition: all var(--transition-normal);
}
.footer-logo:hover {
transform: translateY(-2px);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(37, 99, 235, 0.2);
}
.footer-logo img {
background: linear-gradient(135deg, white 0%, rgba(248,249,250,0.9) 100%);
border: 2px solid rgba(37, 99, 235, 0.1);
}
/* Beautiful certification badges */
.cert-badge {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-xl);
font-size: var(--font-size-sm);
font-weight: 600;
box-shadow:
0 4px 15px rgba(37, 99, 235, 0.3),
0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.cert-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.6s ease;
}
.cert-badge:hover::before {
left: 100%;
}
.cert-badge:hover {
transform: translateY(-2px);
box-shadow:
0 6px 20px rgba(37, 99, 235, 0.4),
0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Enhanced social links */
.social-link {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-xl);
box-shadow:
0 4px 15px rgba(37, 99, 235, 0.3),
0 1px 3px rgba(0, 0, 0, 0.1);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.social-link:hover::before {
opacity: 1;
}
.social-link:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 8px 25px rgba(37, 99, 235, 0.4),
0 3px 10px rgba(0, 0, 0, 0.15);
}
/* Beautiful input enhancements */
.input-group {
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.8) 100%);
border: 2px solid rgba(37, 99, 235, 0.2);
border-radius: var(--radius-lg);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.input-group::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, rgba(59, 130, 246, 0.01) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.input-group:focus-within::before {
opacity: 1;
}
.input-group:focus-within {
border-color: var(--primary-color);
box-shadow:
0 6px 20px rgba(37, 99, 235, 0.15),
0 0 0 3px rgba(37, 99, 235, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transform: translateY(-1px);
}
/* Beautiful category preview cards */
.category-preview {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(248,249,250,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.category-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.category-preview:hover::before {
opacity: 1;
}
.category-preview:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
/* Enhanced benefit items */
.benefit-item {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(248,249,250,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.benefit-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.benefit-item:hover::before {
opacity: 1;
}
.benefit-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
/* Beautiful icon enhancements */
.category-icon, .benefit-icon, .feature-icon, .stat-icon, .overview-icon {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
box-shadow:
0 4px 15px rgba(37, 99, 235, 0.3),
0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 50%;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.category-icon::before,
.benefit-icon::before,
.feature-icon::before,
.stat-icon::before,
.overview-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
border-radius: 50%;
opacity: 0;
transition: opacity var(--transition-normal);
}
.category-icon:hover::before,
.benefit-icon:hover::before,
.feature-icon:hover::before,
.stat-icon:hover::before,
.overview-icon:hover::before {
opacity: 1;
}
.category-icon:hover,
.benefit-icon:hover,
.feature-icon:hover,
.stat-icon:hover,
.overview-icon:hover {
transform: scale(1.1) translateY(-2px);
box-shadow:
0 6px 20px rgba(37, 99, 235, 0.4),
0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Beautiful loading animations */
@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
.loading-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
animation: shimmer 2s infinite linear;
}
/* Enhanced scroll animations */
@media (prefers-reduced-motion: no-preference) {
.animate-on-scroll {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}
.animate-on-scroll.animate {
opacity: 1;
transform: translateY(0);
}
}
/* Beautiful focus states for accessibility */
.btn:focus-visible,
.social-link:focus-visible,
.category-preview:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
box-shadow:
0 0 0 3px rgba(37, 99, 235, 0.2),
0 8px 25px rgba(37, 99, 235, 0.3);
}
/* Enhanced typography */
.hero-title {
text-shadow:
2px 2px 8px rgba(0,0,0,0.7),
0 0 30px rgba(0,0,0,0.4),
0 4px 12px rgba(0,0,0,0.3);
letter-spacing: -0.02em;
line-height: 1.1;
}
.section-title {
letter-spacing: -0.02em;
line-height: 1.2;
}
/* Beautiful hover effects for images */
.feature-image img,
.showcase-image img,
.about-visual img {
transition: all var(--transition-slow);
filter: brightness(0.95) contrast(1.05);
}
.feature-image:hover img,
.showcase-image:hover img,
.about-visual:hover img {
transform: scale(1.05);
filter: brightness(1.05) contrast(1.1) saturate(1.1);
}
/* Enhanced breadcrumb styling */
.breadcrumb {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(248,249,250,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
padding: var(--space-sm) var(--space-lg);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.05),
0 1px 3px rgba(0, 0, 0, 0.02);
}
/* Beautiful form styling */
.newsletter-form-enhanced {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(248,249,250,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05);
padding: var(--space-2xl);
position: relative;
overflow: hidden;
}
.newsletter-form-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
opacity: 0;
transition: opacity var(--transition-normal);
}
.newsletter-form-enhanced:hover::before {
opacity: 1;
}
/* Enhanced mobile responsiveness for beauty */
@media (max-width: 768px) {
.hero-text {
padding: var(--space-lg) var(--space-md);
margin: 0 var(--space-md);
border-radius: var(--radius-xl);
backdrop-filter: blur(15px);
}
.btn {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
}
.category-preview,
.benefit-item {
padding: var(--space-md);
border-radius: var(--radius-lg);
}
}
/* Beautiful print styles */
@media print {
.hero-text,
.newsletter-enhanced,
.footer {
background: white !important;
color: black !important;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.btn {
background: #333 !important;
color: white !important;
box-shadow: none !important;
}
}
/* High contrast mode enhancements */
@media (prefers-contrast: high) {
.hero-text {
background: rgba(0,0,0,0.8) !important;
border: 2px solid white !important;
}
.btn {
border: 2px solid white !important;
background: #000 !important;
color: white !important;
}
}
/* Beautiful selection styling */
::selection {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
text-shadow: none;
}
::-moz-selection {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
text-shadow: none;
}
/* Enhanced scrollbar styling for webkit browsers */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--background);
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-sm);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Beautiful animation performance optimizations */
.animate-on-scroll,
.service-card-enhanced,
.blog-post,
.testimonial-card,
.category-preview,
.benefit-item {
will-change: transform, opacity, box-shadow;
backface-visibility: hidden;
perspective: 1000px;
}
/* Enhanced reduced motion support */
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll,
.service-card-enhanced,
.blog-post,
.testimonial-card,
.category-preview,
.benefit-item {
animation: none !important;
transition: opacity 0.3s ease !important;
}
.btn::after,
.social-link::before,
.category-preview::before,
.benefit-item::before {
display: none !important;
}
}
/* Override any remaining gray text */
.text-secondary, .text-light, [class*="secondary"], [class*="light"] {
color: var(--text-primary) !important;
}
/* Ensure all paragraph text is black */
p, div p, section p, article p {
color: var(--text-primary) !important;
}
/* Fix list text colors */
ul li, ol li, li p {
color: var(--text-primary) !important;
}
/* Fix span text colors */
span, .post-meta span, .blog-stats span {
color: var(--text-light) !important;
}
/* Fix heading colors */
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary) !important;
}
/* Fix link colors in content */
a, .read-more-btn, .overview-link {
color: var(--primary-color) !important;
}
/* Fix button text */
.btn, .btn span, .btn i {
color: inherit !important;
}
/* Fix form elements */
input, textarea, select {
color: var(--text-primary) !important;
}
input::placeholder, textarea::placeholder {
color: var(--text-light) !important;
}
/* Fix footer text specifically */
.footer *, .footer-section *, .contact-info * {
color: var(--text-primary) !important;
}
.footer-logo h4 {
color: var(--primary-color) !important;
}
/* Fix social links in footer */
.footer .social-link span {
color: white !important;
}
/* Fix newsletter text */
.newsletter-footer p {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Fix blog content text */
.blog-preview *, .featured-blog-content *, .post-content * {
color: var(--text-primary) !important;
}
/* Fix service page text */
.services-preview *, .service-showcase *, .service-overview-card * {
color: var(--text-primary) !important;
}
/* Fix gallery text */
.gallery-description *, .gallery-item * {
color: var(--text-primary) !important;
}
/* Fix contact page text */
.contact-page *, .contact-form-section *, .contact-info-section * {
color: var(--text-primary) !important;
}
@media (max-width: 768px) {
.hero-buttons .btn {
white-space: normal;
text-align: center;
}
}
/* Better focus management for accessibility */
.nav-link:focus-visible,
.btn:focus-visible,
.slider-btn:focus-visible,
.indicator:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Improved loading states */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(5px);
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid var(--border);
border-top: 4px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Enhanced mobile menu */
.nav {
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.95);
}
.nav-link {
position: relative;
overflow: hidden;
}
.nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
transition: left 0.3s;
}
.nav-link:hover::before {
left: 100%;
}
/* Better typography scaling */
@media (max-width: 640px) {
.hero-title {
font-size: clamp(1.8rem, 8vw, 3rem);
line-height: 1.1;
}
.section-title {
font-size: clamp(1.5rem, 6vw, 2.5rem);
}
.hero-subtitle {
font-size: clamp(1rem, 4vw, 1.25rem);
}
}
/* Enhanced grid layouts for better responsiveness */
.services-grid,
.blog-grid {
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
/* Better image loading */
img {
loading: lazy;
decode: async;
}
/* Enhanced form styling */
.search-input,
.newsletter-form input,
.filter-controls select {
transition: all var(--transition-fast);
}
.search-input:focus,
.newsletter-form input:focus,
.filter-controls select:focus {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
/* Improved accessibility */
@media (prefers-color-scheme: dark) {
:root {
--background: #0f172a;
--surface: #1e293b;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--border: #334155;
}
}
/* Better print styles */
@media print {
.btn,
.slider-controls,
.slider-indicators,
.back-to-top,
.hamburger,
.search-container {
display: none !important;
}
.hero {
background: none !important;
color: black !important;
height: auto;
padding: var(--space-xl) 0;
}
.slide-overlay {
display: none !important;
}
* {
background: white !important;
color: black !important;
}
}
/* About Page Animations */
.about-company {
animation: fadeInUp 1s ease;
}
.company-highlights .highlight-item {
animation: slideInFromLeft 0.8s ease forwards;
opacity: 0;
transform: translateX(-50px);
}
.company-highlights .highlight-item:nth-child(1) { animation-delay: 0.2s; }
.company-highlights .highlight-item:nth-child(2) { animation-delay: 0.4s; }
.company-highlights .highlight-item:nth-child(3) { animation-delay: 0.6s; }
.mission-vision .mission,
.mission-vision .vision {
animation: slideInFromBottom 1s ease forwards;
opacity: 0;
transform: translateY(30px);
}
.mission-vision .mission { animation-delay: 0.2s; }
.mission-vision .vision { animation-delay: 0.4s; }
.values .value-item {
animation: bounceIn 1.2s ease forwards;
opacity: 0;
transform: scale(0.8);
}
.values .value-item:nth-child(1) { animation-delay: 0.1s; }
.values .value-item:nth-child(2) { animation-delay: 0.2s; }
.values .value-item:nth-child(3) { animation-delay: 0.3s; }
.values .value-item:nth-child(4) { animation-delay: 0.4s; }
.values .value-item:nth-child(5) { animation-delay: 0.5s; }
.values .value-item:nth-child(6) { animation-delay: 0.6s; }
.team .team-member {
animation: slideInFromBottom 1s ease forwards;
opacity: 0;
transform: translateY(30px);
}
.team .team-member:nth-child(1) { animation-delay: 0.2s; }
.team .team-member:nth-child(2) { animation-delay: 0.4s; }
.team .team-member:nth-child(3) { animation-delay: 0.6s; }
.achievements .achievement-item {
animation: zoomIn 1s ease forwards;
opacity: 0;
transform: scale(0.5);
}
.achievements .achievement-item:nth-child(1) { animation-delay: 0.1s; }
.achievements .achievement-item:nth-child(2) { animation-delay: 0.2s; }
.achievements .achievement-item:nth-child(3) { animation-delay: 0.3s; }
.achievements .achievement-item:nth-child(4) { animation-delay: 0.4s; }
/* Newsletter Enhanced Animations */
.newsletter-enhanced .newsletter-header {
animation: fadeInUp 1s ease;
}
.newsletter-enhanced .benefit-item {
animation: slideInFromBottom 0.8s ease forwards;
opacity: 0;
transform: translateY(30px);
}
.newsletter-enhanced .benefit-item:nth-child(1) { animation-delay: 0.2s; }
.newsletter-enhanced .benefit-item:nth-child(2) { animation-delay: 0.4s; }
.newsletter-enhanced .benefit-item:nth-child(3) { animation-delay: 0.6s; }
.newsletter-enhanced .newsletter-form-enhanced {
animation: slideInFromBottom 1s ease 0.8s forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes slideInFromLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Focus styles for accessibility */
:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Selection styles */
::selection {
background: var(--primary-color);
color: white;
}
::-moz-selection {
background: var(--primary-color);
color: white;
}