/* Solviera Logo Düzenlemesi */
.header-layout1 .header-logo {
width: auto !important;
flex: 0 0 auto;
}
.header-layout1 .header-logo img {
width: 220px !important;
max-width: none;
height: auto;
}
@media (max-width: 1199px) {
.header-layout1 .header-logo img {
width: 180px !important;
}
}
@media (max-width: 767px) {
.header-layout1 .header-logo img {
width: 160px !important;
}
}
/* Footer Logo Düzenlemesi */
.footer-widget .th-widget-about .about-logo {
text-align: left !important;
margin-bottom: 20px;
}
.footer-widget .th-widget-about .about-logo img {
max-width: 180px;
height: auto;
}
/* ================================
PREMIUM BRAND SHOWCASE WITH SUCCESS METRICS
================================ */
/* Success Indicators */
.brand-success-indicator {
position: absolute;
top: 15px;
left: 20px;
z-index: 5;
}
.success-badge {
background: linear-gradient(135deg, #10b981, #34d399);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
animation: successPulse 1.5s ease-in-out infinite;
}
@keyframes successPulse {
0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
}
/* ROI Display */
.roi-display {
position: absolute;
top: 15px;
left: 20px;
z-index: 5;
}
.roi-circle {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #23a0ff, #ff4d6d);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 8px 25px rgba(233, 32, 42, 0.3);
animation: roiFloat 2s ease-in-out infinite;
}
.roi-number {
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
}
.roi-label {
font-size: 0.6rem;
opacity: 0.9;
text-align: center;
}
@keyframes roiFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-8px) rotate(5deg); }
}
/* Live Stats */
.live-stats {
position: absolute;
bottom: -10px;
right: -15px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 6px 12px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
color: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 6px;
}
.stat-pulse {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.2); }
}
/* Client Success Showcase */
.client-success-showcase {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.client-avatars {
display: flex;
align-items: center;
gap: 12px;
}
.avatar-stack {
display: flex;
align-items: center;
}
.avatar-item {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
margin-left: -8px;
background: linear-gradient(135deg, #667eea, #764ba2);
position: relative;
}
.avatar-item:first-child {
margin-left: 0;
background: linear-gradient(135deg, #f093fb, #f5576c);
}
.avatar-item:nth-child(2) {
background: linear-gradient(135deg, #4facfe, #00f2fe);
}
.avatar-item:nth-child(3) {
background: linear-gradient(135deg, #43e97b, #38f9d7);
}
.avatar-more {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 600;
color: white;
margin-left: -8px;
}
.success-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* Achievement Badges */
.achievement-badges {
position: absolute;
top: -15px;
right: -20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.badge-item {
background: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
padding: 6px 10px;
border-radius: 15px;
font-size: 0.65rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
animation: badgeFloat 3s ease-in-out infinite;
}
.badge-item:nth-child(2) {
animation-delay: 1s;
}
@keyframes badgeFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
/* Growth Metrics */
.growth-metrics {
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 15px;
}
.metric-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.metric-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.metric-fill {
height: 100%;
background: linear-gradient(90deg, #23a0ff, #ff4d6d);
border-radius: 3px;
width: 0%;
transition: width 2s ease-out 0.5s;
position: relative;
}
.metric-fill::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
0% { transform: translateX(-20px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(20px); opacity: 0; }
}
.metric-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* Service Metrics */
.service-metric {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(233, 32, 42, 0.2);
text-align: center;
}
.metric-value {
display: block;
font-size: 1.1rem;
font-weight: 700;
color: #23a0ff;
margin-bottom: 2px;
}
.metric-desc {
font-size: 0.7rem;
color: rgba(51, 51, 51, 0.7);
font-weight: 500;
}
/* Modern Brand Card Ana Yapı */
.modern-brand-card {
position: relative;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.06),
0 2px 8px rgba(0, 0, 0, 0.04);
cursor: pointer;
will-change: transform, box-shadow;
}
.modern-brand-card::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) 50%,
rgba(0, 0, 0, 0.02) 100%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
}
.modern-brand-card:hover {
transform: translateY(-4px);
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.08),
0 5px 12px rgba(233, 32, 42, 0.05);
border-color: rgba(233, 32, 42, 0.15);
}
.modern-brand-card:hover::before {
opacity: 1;
}
/* Minimal Hover Effects */
.modern-brand-card .brand-header-modern,
.modern-brand-card .modern-brand-content {
transition: transform 0.3s ease;
}
.modern-brand-card:hover .brand-header-modern {
transform: translateY(-2px);
}
.modern-brand-card:hover .modern-brand-content {
transform: translateY(-1px);
}
/* Dinamik Arka Plan Efekti */
.brand-card-bg-effect {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
background: linear-gradient(135deg,
rgba(233, 32, 42, 0.03) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(233, 32, 42, 0.02) 100%);
transition: opacity 0.3s ease;
}
.modern-brand-card:hover .brand-card-bg-effect {
opacity: 1;
}
/* Modern Header Tasarımı */
.brand-header-modern {
position: relative;
padding: 50px 40px;
background: linear-gradient(135deg, #3c3b3d 0%, #2a2929 100%);
color: white;
overflow: hidden;
transition: all 0.3s ease;
}
/* Digital Brand Header */
.digital-brand .brand-header-modern {
background: linear-gradient(135deg, #23a0ff 0%, #c71e24 100%);
}
/* Communication Brand Header */
.communication-brand .brand-header-modern {
background: linear-gradient(135deg, #3c3b3d 0%, #2a2929 100%);
}
.brand-header-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.brand-header-modern::after {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
transform: rotate(-15deg);
transition: transform 0.3s ease;
}
.modern-brand-card:hover .brand-header-modern::after {
transform: rotate(-10deg) scale(1.1);
}
/* Brand Icon Container */
.brand-icon-container {
display: flex;
justify-content: center;
margin-bottom: 25px;
position: relative;
z-index: 2;
}
.brand-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #fff;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.brand-icon::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.4s ease;
}
.modern-brand-card:hover .brand-icon::before {
left: 100%;
}
.modern-brand-card:hover .brand-icon {
transform: scale(1.05);
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
/* Typography */
.brand-title-section {
text-align: center;
position: relative;
z-index: 2;
}
.modern-brand-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 3px;
margin: 0;
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.modern-brand-sub {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 4px;
margin: -5px 0 15px 0;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
}
.modern-brand-tagline {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
letter-spacing: 1px;
margin: 0;
}
/* Content Area */
.modern-brand-content {
padding: 50px 40px;
position: relative;
}
.brand-mission {
text-align: center;
margin-bottom: 40px;
}
.mission-title {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
letter-spacing: 0.5px;
position: relative;
}
.mission-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg, #23a0ff, #ff4757);
border-radius: 2px;
}
.mission-description {
font-size: 1.1rem;
line-height: 1.8;
color: #666;
max-width: 100%;
margin: 0 auto;
font-weight: 400;
}
/* Services Showcase */
.services-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 40px;
}
.service-card {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 25px 20px;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
cursor: pointer;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(233, 32, 42, 0.08),
transparent);
transition: left 0.6s ease;
}
.communication-brand .service-card::before {
background: linear-gradient(90deg,
transparent,
rgba(60, 59, 61, 0.08),
transparent);
}
.service-card:hover::before {
left: 100%;
}
.service-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.9);
border: 2px solid #23a0ff;
box-shadow: 0 15px 35px rgba(233, 32, 42, 0.15);
}
.communication-brand .service-card:hover {
border: 2px solid #3c3b3d;
box-shadow: 0 15px 35px rgba(60, 59, 61, 0.15);
}
.service-icon-modern {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #e9202a, #c71e24);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px auto;
color: white;
font-size: 1.3rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-icon-modern::after {
content: '';
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 0.3s ease;
}
.service-card:hover .service-icon-modern::after {
width: 60px;
height: 60px;
}
.service-card:hover .service-icon-modern {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 20px rgba(233, 32, 42, 0.3);
}
.communication-brand .service-card:hover .service-icon-modern {
box-shadow: 0 8px 20px rgba(60, 59, 61, 0.3);
}
@keyframes iconPulse {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.25) rotate(5deg); }
100% { transform: scale(1.2) rotate(10deg); }
}
@keyframes buttonBounce {
0% { transform: translateY(0) scale(1); }
30% { transform: translateY(-8px) scale(1.1); }
60% { transform: translateY(-4px) scale(1.06); }
100% { transform: translateY(-6px) scale(1.08); }
}
.service-content {
text-align: center;
}
.service-content h5 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 8px 0;
letter-spacing: 0.5px;
}
.service-content p {
font-size: 0.9rem;
color: #666;
margin: 0;
line-height: 1.5;
}
.service-highlight {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(135deg, #e9202a, #c71e24);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.service-card:hover .service-highlight {
transform: scaleX(1);
}
/* Modern CTA Button */
.brand-cta-modern {
text-align: center;
margin-top: 30px;
}
.modern-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 15px;
padding: 18px 35px;
background: linear-gradient(135deg, #e9202a 0%, #c71e24 100%);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.5px;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 8px 25px rgba(233, 32, 42, 0.3);
overflow: hidden;
border: 2px solid transparent;
}
.modern-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;
}
.modern-btn:hover::before {
left: 100%;
}
.modern-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(233, 32, 42, 0.4);
background: linear-gradient(135deg, #ff2a35 0%, #23a0ff 100%) !important;
color: white !important;
}
.btn-icon {
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.modern-btn:hover .btn-icon {
background: rgba(255, 255, 255, 0.4);
transform: rotate(15deg);
}
@keyframes iconSpin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.15); }
100% { transform: rotate(360deg) scale(1.2); }
}
/* Featured Badge */
.featured-modern {
position: relative;
}
.modern-featured-badge {
position: absolute;
top: 25px;
right: 25px;
background: linear-gradient(135deg, #ffd700, #ffed4e);
color: #1a1a1a;
padding: 10px 20px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 700;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
animation: badgePulse 2s ease-in-out infinite;
transition: all 0.3s ease;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.modern-brand-card:hover .modern-featured-badge {
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
}
/* Brand Specific Styles */
.communication-brand .service-icon-modern {
background: linear-gradient(135deg, #3c3b3d, #2a2929);
}
.communication-brand .mission-title::after {
background: linear-gradient(135deg, #3c3b3d, #2a2929);
}
.communication-brand .service-highlight {
background: linear-gradient(135deg, #3c3b3d, #2a2929);
}
.communication-btn {
background: linear-gradient(135deg, #3c3b3d 0%, #2a2929 100%);
box-shadow: 0 8px 25px rgba(60, 59, 61, 0.3);
}
.communication-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(60, 59, 61, 0.4);
background: linear-gradient(135deg, #4a4848 0%, #3c3b3d 100%) !important;
color: white !important;
}
.digital-brand .service-card:hover {
border-color: rgba(233, 32, 42, 0.2);
}
/* Digital Button specific hover */
.digital-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 25px rgba(233, 32, 42, 0.4) !important;
background: linear-gradient(135deg, #ff2a35 0%, #23a0ff 100%) !important;
color: white !important;
}
/* ================================
PREMIUM STATS SECTION
================================ */
.premium-stats-section {
margin-top: 80px;
position: relative;
}
.stats-container {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 32px;
padding: 60px 50px;
position: relative;
overflow: hidden;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.stats-bg-effect {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(233, 32, 42, 0.02) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(233, 32, 42, 0.03) 100%);
opacity: 0.6;
}
.stats-content {
position: relative;
z-index: 2;
}
.premium-stats-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 25px;
color: #1a1a1a;
}
.title-gradient {
background: linear-gradient(135deg, #23a0ff 0%, #ff4757 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stats-description {
font-size: 1.2rem;
line-height: 1.7;
color: #666;
margin: 0;
font-weight: 400;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
position: relative;
z-index: 2;
}
.premium-stat-item {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
padding: 30px 25px;
text-align: center;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
cursor: pointer;
}
.premium-stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(233, 32, 42, 0.05) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.premium-stat-item:hover::before {
opacity: 1;
}
.premium-stat-item:hover {
transform: translateY(-10px) scale(1.05);
background: rgba(255, 255, 255, 0.95);
border-color: rgba(233, 32, 42, 0.2);
box-shadow: 0 25px 50px rgba(233, 32, 42, 0.15);
}
.stat-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #23a0ff, #ff4757);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px auto;
color: white;
font-size: 1.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-icon::after {
content: '';
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 0.3s ease;
}
.premium-stat-item:hover .stat-icon::after {
width: 80px;
height: 80px;
}
.premium-stat-item:hover .stat-icon {
transform: scale(1.1) rotate(10deg);
}
.stat-info {
position: relative;
z-index: 2;
}
.premium-stat-number {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 2.2rem;
font-weight: 800;
color: #1a1a1a;
line-height: 1;
margin-bottom: 8px;
background: linear-gradient(135deg, #23a0ff, #ff4757);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.premium-stat-label {
display: block;
font-size: 0.95rem;
color: #666;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Premium CTA Section */
.stats-cta-section {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.3);
padding-top: 40px;
}
.premium-cta-btn {
position: relative;
display: inline-flex;
align-items: center;
padding: 20px 40px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.5px;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 15px 35px rgba(26, 26, 26, 0.4);
overflow: hidden;
border: 2px solid transparent;
}
.btn-content {
display: flex;
align-items: center;
gap: 15px;
position: relative;
z-index: 2;
}
.btn-shine {
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;
}
.premium-cta-btn:hover .btn-shine {
left: 100%;
}
.premium-cta-btn:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 25px 50px rgba(26, 26, 26, 0.5);
color: white;
border-color: rgba(255, 255, 255, 0.2);
}
.btn-icon-premium {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.premium-cta-btn:hover .btn-icon-premium {
background: rgba(255, 255, 255, 0.25);
transform: rotate(45deg);
}
/* Responsive Design */
@media (max-width: 992px) {
.modern-brand-name {
font-size: 2rem;
}
.brand-header-modern {
padding: 40px 30px;
}
.modern-brand-content {
padding: 40px 30px;
}
.premium-stats-title {
font-size: 2rem;
}
.stats-container {
padding: 50px 40px;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
@media (max-width: 768px) {
.services-showcase {
grid-template-columns: 1fr;
gap: 15px;
}
.modern-brand-card {
margin-bottom: 30px;
}
.modern-brand-name {
font-size: 1.8rem;
letter-spacing: 2px;
}
.modern-brand-content,
.brand-header-modern {
padding: 30px 25px;
}
.premium-stats-section {
margin-top: 60px;
}
.stats-container {
padding: 40px 30px;
}
.premium-stats-title {
font-size: 1.8rem;
text-align: center;
margin-bottom: 20px;
}
.stats-description {
text-align: center;
font-size: 1.1rem;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 30px;
}
.premium-stat-item {
padding: 25px 20px;
}
.premium-stat-number {
font-size: 1.8rem;
}
.premium-cta-btn {
width: 100%;
justify-content: center;
padding: 18px 35px;
}
}
@media (max-width: 576px) {
.modern-btn {
width: 100%;
justify-content: center;
padding: 16px 30px;
}
.brand-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.premium-stat-item {
padding: 30px 25px;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
}
/* HOVER EFFECTS ARE WORKING PROPERLY */
/* ================================
IMPACT FEATURES SECTION (Slider Altı Kartlar) - Etkileyici
================================ */
.impact-features-section {
padding: 80px 0;
background: linear-gradient(135deg,
rgba(233, 32, 42, 0.02) 0%,
rgba(249, 250, 251, 1) 30%,
rgba(233, 32, 42, 0.02) 100%);
position: relative;
}
/* Impact Feature Cards */
.impact-feature-card {
background: white;
border-radius: 24px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(233, 32, 42, 0.08);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
height: 100%;
overflow: hidden;
}
.impact-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(233, 32, 42, 0.12);
border-color: rgba(233, 32, 42, 0.15);
}
/* Background Pattern */
.feature-bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.expertise-theme .feature-bg-pattern {
background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 70%);
}
.support-theme .feature-bg-pattern {
background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.05), transparent 70%);
}
.satisfaction-theme .feature-bg-pattern {
background: radial-gradient(circle at top right, rgba(233, 32, 42, 0.05), transparent 70%);
}
.impact-feature-card:hover .feature-bg-pattern {
opacity: 1;
}
/* Feature Icon Wrapper */
.feature-icon-wrapper {
position: relative;
margin-bottom: 30px;
display: inline-block;
}
.feature-icon-impact {
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(233, 32, 42, 0.1), rgba(233, 32, 42, 0.05));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #23a0ff;
position: relative;
z-index: 2;
transition: all 0.3s ease;
margin: 0 auto;
}
.expertise-theme .feature-icon-impact {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
color: #3b82f6;
}
.support-theme .feature-icon-impact {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
color: #10b981;
}
.impact-feature-card:hover .feature-icon-impact {
transform: scale(1.1) rotate(5deg);
}
/* Icon Ring Effect */
.icon-ring-effect {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 2px solid rgba(233, 32, 42, 0.2);
border-radius: 50%;
animation: iconPulse 3s ease-in-out infinite;
}
.expertise-theme .icon-ring-effect {
border-color: rgba(59, 130, 246, 0.2);
}
.support-theme .icon-ring-effect {
border-color: rgba(16, 185, 129, 0.2);
}
@keyframes iconPulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.2;
}
}
/* Icon Glow */
.icon-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(233, 32, 42, 0.1), transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.expertise-theme .icon-glow {
background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent 70%);
}
.support-theme .icon-glow {
background: radial-gradient(circle, rgba(16, 185, 129, 0.1), transparent 70%);
}
.impact-feature-card:hover .icon-glow {
opacity: 1;
}
/* Feature Content */
.feature-content-impact {
position: relative;
z-index: 1;
}
.feature-number {
font-size: 3rem;
font-weight: 900;
color: #23a0ff;
line-height: 1;
margin-bottom: 10px;
display: block;
}
.expertise-theme .feature-number {
color: #3b82f6;
}
.support-theme .feature-number {
color: #10b981;
}
.feature-title-impact {
font-size: 1.4rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 15px;
line-height: 1.2;
}
.feature-description-impact {
font-size: 1rem;
color: #6b7280;
line-height: 1.6;
margin-bottom: 20px;
}
.feature-description-impact strong {
color: #374151;
font-weight: 600;
}
/* Feature Highlight */
.feature-highlight {
margin-top: 20px;
}
.highlight-text {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, rgba(233, 32, 42, 0.1), rgba(233, 32, 42, 0.05));
color: #23a0ff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
border: 1px solid rgba(233, 32, 42, 0.15);
}
.expertise-theme .highlight-text {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
color: #3b82f6;
border-color: rgba(59, 130, 246, 0.15);
}
.support-theme .highlight-text {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
color: #10b981;
border-color: rgba(16, 185, 129, 0.15);
}
/* Card Shine Effect */
.card-shine-effect {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
pointer-events: none;
z-index: 3;
}
.impact-feature-card:hover .card-shine-effect {
left: 100%;
}
/* Stats Showcase */
.stats-showcase {
margin-top: 60px;
}
.stats-container {
display: flex;
justify-content: center;
align-items: center;
gap: 60px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px);
border-radius: 25px;
padding: 30px 40px;
border: 1px solid rgba(233, 32, 42, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
.stat-item {
display: flex;
align-items: center;
gap: 15px;
text-align: left;
}
.stat-icon {
font-size: 2.5rem;
animation: statFloat 4s ease-in-out infinite;
}
.stat-content {
display: flex;
flex-direction: column;
}
.stat-number {
font-size: 2rem;
font-weight: 900;
color: #1f2937;
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: #6b7280;
font-weight: 500;
}
@keyframes statFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-8px) rotate(5deg);
}
}
/* Responsive Design */
@media (max-width: 992px) {
.impact-features-section {
padding: 60px 0;
}
.stats-container {
flex-wrap: wrap;
gap: 30px;
padding: 25px 30px;
}
.stat-item {
flex-direction: column;
text-align: center;
gap: 8px;
}
}
@media (max-width: 768px) {
.impact-features-section {
padding: 50px 0;
}
.impact-feature-card {
padding: 30px 25px;
}
.feature-number {
font-size: 2.5rem;
}
.feature-title-impact {
font-size: 1.2rem;
}
.feature-icon-impact {
width: 70px;
height: 70px;
font-size: 28px;
}
.stats-container {
gap: 20px;
padding: 20px 25px;
}
.stat-number {
font-size: 1.5rem;
}
.stat-icon {
font-size: 2rem;
}
}
/* ===== SOLVIERA HIGHLIGHTS SECTION - BRAND THEMED ===== */
/* Ana Section - Solviera Marka Renkleri */
.solviera-highlights-section {
padding: 60px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}
.solviera-highlights-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(13, 110, 253, 0.02) 0%, rgba(33, 37, 41, 0.02) 100%);
pointer-events: none;
}
/* Highlight Cards - Kompakt Tasarım */
.solviera-highlight-card {
background: #ffffff;
border-radius: 12px;
padding: 30px 25px;
text-align: center;
box-shadow: 0 4px 20px rgba(13, 110, 253, 0.08);
border: 2px solid #f8f9fa;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 20px;
}
.solviera-highlight-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(13, 110, 253, 0.15);
border-color: #0d6efd;
}
/* Icon Container - Solviera Brand Blue */
.highlight-icon-container {
width: 60px;
height: 60px;
margin: 0 auto 15px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
}
.highlight-icon-container i {
font-size: 1.8rem;
color: #ffffff;
transition: all 0.3s ease;
}
/* Kart Temaları - Solviera Marka Paleti */
.expertise-highlight .highlight-icon-container {
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}
.support-highlight .highlight-icon-container {
background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
}
.satisfaction-highlight .highlight-icon-container {
background: linear-gradient(135deg, #198754 0%, #146c43 100%);
}
.solviera-highlight-card:hover .highlight-icon-container {
transform: scale(1.1);
}
/* İçerik Alanı */
.highlight-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.highlight-number {
font-size: 2.2rem;
font-weight: 700;
color: #212529;
margin-bottom: 8px;
line-height: 1;
}
.highlight-title {
font-size: 1.1rem;
font-weight: 600;
color: #495057;
margin-bottom: 8px;
line-height: 1.2;
}
.highlight-desc {
font-size: 0.85rem;
color: #6c757d;
line-height: 1.4;
margin: 0;
}
/* Hover Efektleri - Marka Renkleri */
.expertise-highlight:hover .highlight-number {
color: #0d6efd;
}
.support-highlight:hover .highlight-number {
color: #6f42c1;
}
.satisfaction-highlight:hover .highlight-number {
color: #198754;
}
.solviera-highlight-card:hover .highlight-title {
color: #212529;
}
/* Responsive Tasarım */
@media (max-width: 992px) {
.solviera-highlights-section {
padding: 50px 0;
}
.solviera-highlight-card {
height: 160px;
padding: 25px 20px;
margin-bottom: 15px;
}
.highlight-icon-container {
width: 55px;
height: 55px;
margin-bottom: 12px;
}
.highlight-icon-container i {
font-size: 1.6rem;
}
.highlight-number {
font-size: 2rem;
}
.highlight-title {
font-size: 1rem;
}
.highlight-desc {
font-size: 0.8rem;
}
}
@media (max-width: 768px) {
.solviera-highlights-section {
padding: 40px 0;
}
.solviera-highlight-card {
height: 140px;
padding: 20px 15px;
}
.highlight-icon-container {
width: 50px;
height: 50px;
margin-bottom: 10px;
}
.highlight-icon-container i {
font-size: 1.4rem;
}
.highlight-number {
font-size: 1.8rem;
margin-bottom: 6px;
}
.highlight-title {
font-size: 0.95rem;
margin-bottom: 6px;
}
.highlight-desc {
font-size: 0.75rem;
}
}
@media (max-width: 576px) {
.row {
margin: 0 -10px;
}
.row > * {
padding-left: 10px;
padding-right: 10px;
}
.solviera-highlight-card {
height: 130px;
margin-bottom: 10px;
}
}
/* ===== SOLVIERA VISUAL HIGHLIGHTS - CREATIVE SVG DESIGN ===== */
/* Ana Section - Solviera Marka Kimliği */
.solviera-visual-highlights {
padding: 80px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
position: relative;
overflow: hidden;
}
/* SVG Arkaplan Container */
.section-background-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.section-bg-decoration {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
animation: subtleFloat 20s ease-in-out infinite;
}
@keyframes subtleFloat {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.7;
}
50% {
transform: translateY(-10px) scale(1.01);
opacity: 0.8;
}
}
/* Container z-index düzeltme */
.solviera-visual-highlights .container {
position: relative;
z-index: 10;
}
.solviera-visual-highlights::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 25% 25%, rgba(35, 160, 255, 0.015) 0%, transparent 50%), /* Kırmızıdan ana mavinizle değiştirildi */
radial-gradient(circle at 75% 75%, rgba(6, 6, 63, 0.015) 0%, transparent 50%); /* Gri tonundan koyu çivit mavinize değiştirildi */
pointer-events: none;
z-index: 2;
}
/* Visual Cards - Premium Tasarım */
.solviera-visual-card {
background: #ffffff;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
box-shadow:
0 8px 25px rgba(6, 6, 63, 0.06), /* Gri tonundan koyu çivit mavinize değiştirildi */
0 2px 8px rgba(35, 160, 255, 0.04); /* Kırmızıdan ana mavinizle değiştirildi */
border: 1px solid rgba(6, 6, 63, 0.06); /* Gri tonundan koyu çivit mavinize değiştirildi */
transition: all 0.25s ease-out;
position: relative;
height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 30px;
overflow: hidden;
}
.solviera-visual-card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow:
0 15px 40px rgba(6, 6, 63, 0.12), /* Gri tonundan koyu çivit mavinize değiştirildi */
0 5px 15px rgba(35, 160, 255, 0.08); /* Kırmızıdan ana mavinizle değiştirildi */
border-color: rgba(35, 160, 255, 0.15); /* Kırmızıdan ana mavinizle değiştirildi */
}
/* SVG Background Patterns */
.visual-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.bg-decoration {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
transition: all 0.2s ease;
}
.solviera-visual-card:hover .bg-decoration {
opacity: 0.75;
transform: scale(1.02);
}
/* Custom SVG Icons */
.visual-icon-container {
position: relative;
z-index: 10;
margin-bottom: 25px;
width: 80px;
height: 80px;
margin-left: auto;
margin-right: auto;
transition: all 0.2s ease;
}
.custom-svg-icon {
width: 100%;
height: 100%;
filter: drop-shadow(0 3px 8px rgba(6, 6, 63, 0.15)); /* Gri tonundan koyu çivit mavinize değiştirildi */
transition: all 0.2s ease;
}
.solviera-visual-card:hover .custom-svg-icon {
transform: scale(1.1) rotate(3deg);
filter: drop-shadow(0 5px 15px rgba(35, 160, 255, 0.25)); /* Kırmızıdan ana mavinizle değiştirildi */
}
/* Visual Content */
.visual-content {
position: relative;
z-index: 10;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Yaratıcı Sayı Tasarımı */
.visual-number {
font-size: 3.2rem;
font-weight: 900;
margin-bottom: 15px;
line-height: 1;
position: relative;
display: inline-block;
}
.number-main {
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Gri tonundan koyu çivit mavinize değiştirildi */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}
.number-plus,
.number-percent,
.number-separator,
.number-secondary {
color: #06063f; /* Gri tonundan koyu çivit mavinize değiştirildi */
font-size: 0.8em;
font-weight: 700;
margin-left: 4px;
}
.number-separator {
margin: 0 2px;
color: #23a0ff; /* Zaten ana maviniz */
}
.number-secondary {
background: linear-gradient(135deg, #06063f 0%, #23a0ff 100%); /* Gri tonundan koyu çivit mavinize değiştirildi */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.solviera-visual-card:hover .number-main {
animation: numberGlow 0.3s ease;
}
@keyframes numberGlow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.1) saturate(1.1); }
}
/* Title & Description */
.visual-title {
font-size: 1.3rem;
font-weight: 700;
color: #06063f; /* Gri tonundan koyu çivit mavinize değiştirildi */
margin-bottom: 12px;
line-height: 1.2;
transition: color 0.2s ease;
}
.visual-desc {
font-size: 0.95rem;
color: #6c757d; /* Standart gri olarak bırakıldı */
line-height: 1.5;
margin-bottom: 20px;
transition: color 0.2s ease;
}
.solviera-visual-card:hover .visual-title {
color: #23a0ff; /* Zaten ana maviniz */
}
.solviera-visual-card:hover .visual-desc {
color: #495057; /* Metin kontrastı için standart koyu gri olarak bırakıldı */
}
/* Accent Line */
.visual-accent-line {
width: 0;
height: 3px;
background: linear-gradient(90deg, #23a0ff 0%, #06063f 100%); /* Gri tonundan koyu çivit mavinize değiştirildi */
margin: 0 auto;
transition: width 0.25s ease;
border-radius: 2px;
}
.solviera-visual-card:hover .visual-accent-line {
width: 50px;
}
/* Kart Teması Özel Efektler */
.expertise-visual:hover {
background: linear-gradient(135deg, #ffffff 0%, rgba(35, 160, 255, 0.02) 100%); /* Kırmızıdan ana mavinizle değiştirildi */
}
.support-visual:hover {
background: linear-gradient(135deg, #ffffff 0%, rgba(6, 6, 63, 0.02) 100%); /* Gri tonundan koyu çivit mavinize değiştirildi */
}
.satisfaction-visual:hover {
background: linear-gradient(135deg, #ffffff 0%, rgba(35, 160, 255, 0.015) 50%, rgba(6, 6, 63, 0.015) 100%); /* Kırmızı ve gri tonları ana mavi ve koyu çivit mavinize değiştirildi */
}
/* Animasyon İyileştirmeleri */
.solviera-visual-card::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(35, 160, 255, 0.06), /* Kırmızıdan ana mavinizle değiştirildi */
transparent
);
transition: left 0.4s ease;
}
.solviera-visual-card:hover::after {
left: 100%;
}
/* Responsive Tasarım */
@media (max-width: 992px) {
.solviera-visual-highlights {
padding: 60px 0;
}
.solviera-visual-card {
height: 260px;
padding: 35px 25px;
margin-bottom: 25px;
}
.visual-icon-container {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.visual-number {
font-size: 2.8rem;
margin-bottom: 12px;
}
.visual-title {
font-size: 1.2rem;
}
.visual-desc {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.solviera-visual-highlights {
padding: 50px 0;
}
.solviera-visual-card {
height: 240px;
padding: 30px 20px;
margin-bottom: 20px;
}
.visual-icon-container {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.visual-number {
font-size: 2.5rem;
margin-bottom: 10px;
}
.visual-title {
font-size: 1.1rem;
margin-bottom: 10px;
}
.visual-desc {
font-size: 0.85rem;
margin-bottom: 15px;
}
}
@media (max-width: 576px) {
.solviera-visual-card {
height: 220px;
padding: 25px 15px;
margin-bottom: 15px;
}
.visual-icon-container {
width: 50px;
height: 50px;
}
.visual-number {
font-size: 2.2rem;
}
.visual-title {
font-size: 1rem;
}
.visual-desc {
font-size: 0.8rem;
line-height: 1.4;
}
}
/* Loading Animation */
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.solviera-visual-card {
animation: fadeInScale 0.4s ease forwards;
}
.solviera-visual-card:nth-child(2) {
animation-delay: 0.08s;
}
.solviera-visual-card:nth-child(3) {
animation-delay: 0.16s;
}
/* ===== NEDEN SOLVIERA TEKNOLOJI SECTION ===== */
/* Ana Section */
.why-solviera-section {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%); /* Hafif griler/beyaz bırakıldı */
position: relative;
overflow: hidden;
}
.why-solviera-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(35, 160, 255, 0.03) 0%, transparent 50%), /* Kırmızıdan ana mavinizle değiştirildi */
radial-gradient(circle at 80% 70%, rgba(6, 6, 63, 0.02) 0%, transparent 50%); /* Gri tonundan koyu çivit mavinize değiştirildi */
pointer-events: none;
}
/* İçerik Alanı */
.why-solviera-content {
padding-right: 50px;
padding-left: 20px;
}
.why-subtitle {
display: inline-block;
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Gri tonundan koyu çivit mavinize değiştirildi */
color: #ffffff; /* Zaten beyaz */
padding: 8px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
letter-spacing: 1px;
text-transform: uppercase;
}
.why-title {
font-size: 2.5rem;
font-weight: 800;
color: #06063f; /* Gri tonundan koyu çivit mavinize değiştirildi */
line-height: 1.2;
margin-bottom: 20px;
}
.why-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #23a0ff 0%, #06063f 100%); /* Gri tonundan koyu çivit mavinize değiştirildi */
margin-top: 15px;
border-radius: 2px;
}
.why-description {
font-size: 1.1rem;
color: #6c757d; /* Standart gri olarak bırakıldı */
line-height: 1.6;
margin-bottom: 40px;
}
/* Features Grid */
.why-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.why-feature-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 25px;
background: #ffffff; /* Beyaz bırakıldı */
border-radius: 15px;
box-shadow: 0 5px 20px rgba(6, 6, 63, 0.05); /* Gri tonundan koyu çivit mavinize değiştirildi */
border: 1px solid rgba(35, 160, 255, 0.08); /* Kırmızıdan ana mavinizle değiştirildi */
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.why-feature-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(35, 160, 255, 0.03), transparent); /* Kırmızıdan ana mavinizle değiştirildi */
transition: left 0.5s ease;
}
.why-feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(6, 6, 63, 0.1); /* Gri tonundan koyu çivit mavinize değiştirildi */
border-color: rgba(35, 160, 255, 0.15); /* Kırmızıdan ana mavinizle değiştirildi */
}
.why-feature-item:hover::before {
left: 100%;
}
/* Vector Icons */
.feature-vector-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
position: relative;
}
.vector-svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 3px 8px rgba(6, 6, 63, 0.1)); /* Gri tonundan koyu çivit mavinize değiştirildi */
transition: all 0.3s ease;
}
.why-feature-item:hover .vector-svg {
transform: scale(1.1);
filter: drop-shadow(0 5px 15px rgba(35, 160, 255, 0.2)); /* Kırmızıdan ana mavinizle değiştirildi */
}
/* Feature Content */
.feature-content h4 {
font-size: 1.2rem;
font-weight: 700;
color: #06063f; /* Gri tonundan koyu çivit mavinize değiştirildi */
margin-bottom: 8px;
transition: color 0.3s ease;
}
.feature-content p {
font-size: 0.95rem;
color: #6c757d; /* Standart gri olarak bırakıldı */
line-height: 1.5;
margin: 0;
}
.why-feature-item:hover .feature-content h4 {
color: #23a0ff; /* Zaten ana maviniz */
}
/* Ana Vektör Görsel */
.why-solviera-visual {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding-left: 30px;
padding-right: 20px;
}
.solviera-illustration-container {
width: 100%;
max-width: 800px;
position: relative;
}
.solviera-illustration-svg {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(6, 6, 63, 0.1)); /* Gri tonundan koyu çivit mavinize değiştirildi */
}
/* İllustration Statik Stilleri */
.bg-glow {
opacity: 0.6;
transform: scale(1);
}
.tech-figure {
transform: translateY(0px);
}
.float-1, .float-2, .float-3, .float-4, .float-5, .float-6 {
/* Animasyonlar kaldırıldı - sabit duruyorlar */
}
.connection-lines {
opacity: 0.3;
}
.solviera-branding {
transform: translateY(0px);
}
.solviera-logo-img {
transition: all 0.3s ease;
filter: drop-shadow(0 2px 8px rgba(6, 6, 63, 0.2)); /* Gri tonundan koyu çivit mavinize değiştirildi */
}
/* Responsive Tasarım */
@media (max-width: 992px) {
.why-solviera-section {
padding: 80px 0;
}
.why-solviera-content {
padding-right: 20px;
padding-left: 20px;
margin-bottom: 50px;
}
.why-title {
font-size: 2.2rem;
}
.why-features-grid {
gap: 20px;
}
.why-feature-item {
padding: 20px;
}
.feature-vector-icon {
width: 50px;
height: 50px;
}
}
@media (max-width: 768px) {
.why-solviera-section {
padding: 60px 0;
}
.why-title {
font-size: 2rem;
}
.why-features-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.why-feature-item {
padding: 20px 15px;
gap: 15px;
}
.feature-content h4 {
font-size: 1.1rem;
}
.feature-content p {
font-size: 0.9rem;
}
.solviera-illustration-container {
max-width: 500px;
}
}
@media (max-width: 576px) {
.why-solviera-section {
padding: 50px 0;
}
.why-title {
font-size: 1.8rem;
}
.why-description {
font-size: 1rem;
}
.why-feature-item {
flex-direction: column;
text-align: center;
gap: 10px;
}
.feature-vector-icon {
width: 40px;
height: 40px;
margin: 0 auto;
}
}
/* ================================
FINAL CTA SECTION
================================ */
.final-cta-section {
padding: 80px 0;
background: linear-gradient(135deg,
rgba(35, 160, 255, 0.03) 0%, /* Changed from red to your primary blue */
rgba(255, 255, 255, 1) 50%,
rgba(6, 6, 63, 0.03) 100%); /* Changed from #3c3b3d to your dark indigo */
position: relative;
overflow: hidden;
}
.final-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,'); /* Changed fill from %23e9202a to your primary blue */
opacity: 0.3;
z-index: 1;
}
.final-cta-content {
position: relative;
z-index: 2;
}
.final-cta-title {
font-size: 2.8rem;
font-weight: 700;
color: #06063f; /* Changed from #2c2c2c to your dark indigo */
margin-bottom: 20px;
line-height: 1.2;
}
.final-cta-text {
font-size: 1.2rem;
color: #666; /* Kept standard gray */
margin-bottom: 30px;
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.final-cta-action {
margin-top: 40px;
}
/* Responsive Design for Final CTA */
@media (max-width: 992px) {
.final-cta-section {
padding: 60px 0;
}
.final-cta-title {
font-size: 2.2rem;
}
.final-cta-text {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
.final-cta-section {
padding: 50px 0;
}
.final-cta-title {
font-size: 1.9rem;
margin-bottom: 15px;
}
.final-cta-text {
font-size: 1rem;
margin-bottom: 25px;
}
}
@media (max-width: 576px) {
.final-cta-title {
font-size: 1.6rem;
}
.final-cta-text {
font-size: 0.95rem;
}
}
/* Services Page Styles */
/* Hero Section */
.services-hero-section {
position: relative;
padding: 120px 0 80px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); /* Kept light grays/white */
overflow: hidden;
}
.services-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.hero-bg-svg {
width: 100%;
height: 100%;
opacity: 0.6;
}
.services-hero-content {
position: relative;
z-index: 2;
}
.services-subtitle {
display: inline-block;
color: #23a0ff; /* Already your primary blue */
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.services-hero-title {
font-size: 3.5rem;
font-weight: 700;
color: #06063f; /* Changed from #3c3b3d to your dark indigo */
line-height: 1.2;
margin-bottom: 30px;
}
.title-highlight {
color: #23a0ff; /* Already your primary blue */
position: relative;
}
.services-hero-desc {
font-size: 1.2rem;
color: #666; /* Kept standard gray */
line-height: 1.6;
margin-bottom: 50px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.services-stats-grid {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.service-stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #23a0ff; /* Already your primary blue */
line-height: 1;
}
.stat-label {
display: block;
font-size: 0.9rem;
color: #666; /* Kept standard gray */
margin-top: 8px;
font-weight: 500;
}
/* Main Services Section */
.main-services-section {
padding: 100px 0;
}
.service-detailed-card {
margin-bottom: 120px;
padding: 60px 40px;
border-radius: 20px;
background: #ffffff; /* Kept white */
box-shadow: 0 10px 40px rgba(6, 6, 63, 0.08); /* Changed from rgba(0,0,0,0.08) to your dark indigo */
border: 1px solid rgba(35, 160, 255, 0.1); /* Changed from #e9202a to your primary blue */
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.service-detailed-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
transition: all 0.5s ease;
}
.service-detailed-card:hover::before {
left: 100%;
}
.service-detailed-card:hover {
box-shadow: 0 20px 60px rgba(35, 160, 255, 0.15); /* Changed from #e9202a to your primary blue */
}
.service-badge {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
}
.badge-icon {
width: 50px;
height: 50px;
}
.badge-svg {
width: 100%;
height: 100%;
}
.badge-text {
font-size: 2rem;
font-weight: 700;
color: #23a0ff; /* Already your primary blue */
opacity: 0.3;
}
.service-detailed-title {
font-size: 2.2rem;
font-weight: 700;
color: #06063f; /* Changed from #3c3b3d to your dark indigo */
margin-bottom: 20px;
line-height: 1.3;
}
.service-detailed-desc {
font-size: 1.1rem;
color: #666; /* Kept standard gray */
line-height: 1.6;
margin-bottom: 40px;
}
.service-features-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.service-feature-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: #f8f9fa; /* Kept light gray */
border-radius: 10px;
transition: all 0.3s ease;
}
.service-feature-item:hover {
background: #23a0ff; /* Already your primary blue */
color: #ffffff; /* Already your white */
transform: translateX(10px);
}
.service-feature-item i {
font-size: 1.2rem;
color: #23a0ff; /* Already your primary blue */
transition: all 0.3s ease;
}
.service-feature-item:hover i {
color: #ffffff; /* Already your white */
}
.service-feature-item span {
font-weight: 600;
font-size: 0.95rem;
}
.service-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Changed from #c01e24 to your dark indigo */
color: #ffffff; /* Already your white */
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.2s ease;
box-shadow: 0 4px 15px rgba(35, 160, 255, 0.3); /* Changed from #e9202a to your primary blue */
position: relative;
overflow: hidden;
margin-right: 12px;
margin-bottom: 8px;
}
.service-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: all 0.6s ease;
}
.service-btn:hover::before {
left: 100%;
}
.service-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(35, 160, 255, 0.4); /* Changed from #e9202a to your primary blue */
color: #ffffff; /* Already your white */
}
.service-btn i {
transition: all 0.3s ease;
}
.service-btn:hover i {
transform: translateX(3px);
}
/* Outline Button Style */
.service-btn-outline {
background: transparent !important;
border: 2px solid #23a0ff; /* Already your primary blue */
color: #23a0ff; /* Already your primary blue */
box-shadow: none !important;
}
.service-btn-outline:hover {
background: #23a0ff !important; /* Already your primary blue */
color: white !important; /* Already your white */
border-color: #23a0ff; /* Already your primary blue */
box-shadow: 0 8px 25px rgba(35, 160, 255, 0.3) !important; /* Changed from #e9202a to your primary blue */
}
/* Service CTA Layout */
.service-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 25px;
}
/* Service Visual Container */
.service-visual-container {
padding: 40px;
background: #f8f9fa; /* Kept light gray */
border-radius: 20px;
border: 2px solid rgba(35, 160, 255, 0.1); /* Changed from #e9202a to your primary blue */
transition: all 0.4s ease;
}
.service-visual-container:hover {
background: #ffffff; /* Kept white */
border-color: rgba(35, 160, 255, 0.2); /* Changed from #e9202a to your primary blue */
box-shadow: 0 10px 30px rgba(35, 160, 255, 0.1); /* Changed from #e9202a to your primary blue */
}
.service-illustration {
width: 100%;
height: 300px;
transition: all 0.4s ease;
}
.service-visual-container:hover .service-illustration {
transform: scale(1.05);
}
/* Individual Service Button Colors - Primary Buttons */
.erp-btn {
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%) !important; /* Changed from #c91c24 to your dark indigo */
box-shadow: 0 4px 15px rgba(35, 160, 255, 0.25) !important; /* Changed from #e9202a to your primary blue */
}
.erp-btn:hover {
box-shadow: 0 8px 25px rgba(35, 160, 255, 0.4) !important; /* Changed from #e9202a to your primary blue */
}
.digital-btn-secondary {
background: linear-gradient(135deg, #06063f 0%, #06063f 100%) !important; /* Changed from #3c3b3d and #2a2930 to your dark indigo */
box-shadow: 0 4px 15px rgba(6, 6, 63, 0.25) !important; /* Changed from #605961 to your dark indigo */
}
.digital-btn-secondary:hover {
box-shadow: 0 8px 25px rgba(6, 6, 63, 0.4) !important; /* Changed from #605961 to your dark indigo */
}
.web-btn {
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%) !important; /* Changed from #c91c24 to your dark indigo */
box-shadow: 0 4px 15px rgba(35, 160, 255, 0.25) !important; /* Changed from #e9202a to your primary blue */
}
.web-btn:hover {
box-shadow: 0 8px 25px rgba(35, 160, 255, 0.4) !important; /* Changed from #e9202a to your primary blue */
}
.ecommerce-btn-secondary {
background: linear-gradient(135deg, #06063f 0%, #06063f 100%) !important; /* Changed from #3c3b3d and #2a2930 to your dark indigo */
box-shadow: 0 4px 15px rgba(6, 6, 63, 0.25) !important; /* Changed from #605961 to your dark indigo */
}
.ecommerce-btn-secondary:hover {
box-shadow: 0 8px 25px rgba(6, 6, 63, 0.4) !important; /* Changed from #605961 to your dark indigo */
}
.sms-btn {
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%) !important; /* Changed from #c91c24 to your dark indigo */
box-shadow: 0 4px 15px rgba(35, 160, 255, 0.25) !important; /* Changed from #e9202a to your primary blue */
}
.sms-btn:hover {
box-shadow: 0 8px 25px rgba(35, 160, 255, 0.4) !important; /* Changed from #e9202a to your primary blue */
}
.consulting-btn-secondary {
background: linear-gradient(135deg, #06063f 0%, #06063f 100%) !important; /* Changed from #3c3b3d and #2a2930 to your dark indigo */
box-shadow: 0 4px 15px rgba(6, 6, 63, 0.25) !important; /* Changed from #605961 to your dark indigo */
}
.consulting-btn-secondary:hover {
box-shadow: 0 8px 25px rgba(6, 6, 63, 0.4) !important; /* Changed from #605961 to your dark indigo */
}
/* Outline Button Colors */
.erp-btn-outline {
border-color: #23a0ff !important; /* Ana maviniz */
color: #23a0ff !important; /* Ana maviniz */
}
.erp-btn-outline:hover {
background: #23a0ff !important; /* Ana maviniz */
color: white !important; /* Beyaz */
}
.digital-btn-outline {
border-color: #06063f !important; /* Koyu çivit mavinize değiştirildi */
color: #06063f !important; /* Koyu çivit mavinize değiştirildi */
}
.digital-btn-outline:hover {
background: #06063f !important; /* Koyu çivit mavinize değiştirildi */
color: white !important; /* Beyaz */
}
.web-btn-outline {
border-color: #23a0ff !important; /* Ana maviniz */
color: #23a0ff !important; /* Ana maviniz */
}
.web-btn-outline:hover {
background: #23a0ff !important; /* Ana maviniz */
color: white !important; /* Beyaz */
}
.ecommerce-btn-outline {
border-color: #06063f !important; /* Koyu çivit mavinize değiştirildi */
color: #06063f !important; /* Koyu çivit mavinize değiştirildi */
}
.ecommerce-btn-outline:hover {
background: #06063f !important; /* Koyu çivit mavinize değiştirildi */
color: white !important; /* Beyaz */
}
.sms-btn-outline {
border-color: #23a0ff !important; /* Ana maviniz */
color: #23a0ff !important; /* Ana maviniz */
}
.sms-btn-outline:hover {
background: #23a0ff !important; /* Ana maviniz */
color: white !important; /* Beyaz */
}
.consulting-btn-outline {
border-color: #06063f !important; /* Koyu çivit mavinize değiştirildi */
color: #06063f !important; /* Koyu çivit mavinize değiştirildi */
}
.consulting-btn-outline:hover {
background: #06063f !important; /* Koyu çivit mavinize değiştirildi */
color: white !important; /* Beyaz */
}
---
### CTA Bölümü ve Duyarlı Tasarım Güncellemesi
```css
/* Call to Action Section */
.service-cta-section {
background: linear-gradient(135deg, #06063f 0%, #06063f 100%); /* Koyu çivit mavinize değiştirildi */
padding: 80px 0;
color: #ffffff; /* Beyaz */
}
.service-cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
color: #ffffff; /* Beyaz */
}
.service-cta-desc {
font-size: 1.2rem;
color: #e0e0e0; /* Açık gri bırakıldı */
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.service-cta-actions {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.service-primary-btn,
.service-secondary-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 30px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.4s ease;
border: 2px solid transparent;
}
.service-primary-btn {
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Kırmızıdan koyu çivit mavinize değiştirildi */
color: #ffffff; /* Beyaz */
box-shadow: 0 5px 20px rgba(35, 160, 255, 0.3); /* Kırmızıdan ana mavinizle değiştirildi */
}
.service-primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(35, 160, 255, 0.4); /* Kırmızıdan ana mavinizle değiştirildi */
color: #ffffff; /* Beyaz */
}
.service-secondary-btn {
background: transparent;
color: #ffffff; /* Beyaz */
border-color: rgba(255, 255, 255, 0.3); /* Beyazın şeffaf tonu */
}
.service-secondary-btn:hover {
background: rgba(255, 255, 255, 0.1); /* Beyazın şeffaf tonu */
border-color: rgba(255, 255, 255, 0.5); /* Beyazın şeffaf tonu */
color: #ffffff; /* Beyaz */
}
/* Responsive Design */
@media (max-width: 992px) {
.services-hero-title {
font-size: 2.8rem;
}
.services-stats-grid {
gap: 40px;
}
.service-detailed-card {
margin-bottom: 80px;
padding: 40px 30px;
}
.service-detailed-title {
font-size: 1.8rem;
}
.service-features-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.services-hero-title {
font-size: 2.2rem;
}
.services-hero-desc {
font-size: 1.1rem;
}
.services-stats-grid {
gap: 30px;
}
.service-detailed-card {
padding: 30px 20px;
margin-bottom: 60px;
}
.service-visual-container {
padding: 30px 20px;
margin-top: 40px;
}
.service-cta-actions {
flex-direction: column;
align-items: center;
}
.service-primary-btn,
.service-secondary-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 576px) {
.services-hero-section {
padding: 80px 0 60px;
}
.services-hero-title {
font-size: 1.8rem;
}
.stat-number {
font-size: 2rem;
}
.service-detailed-title {
font-size: 1.5rem;
}
.service-cta-title {
font-size: 1.8rem;
}
}
---
### Hızlı Animasyonlar ve Diğer Geçişler
```css
/* ================================
FAST ANIMATIONS OVERRIDE
================================ */
/* Hızlandırılmış animasyonlar */
.service-detailed-card {
transition: all 0.2s ease !important;
}
.service-detailed-card::before {
transition: all 0.3s ease !important;
}
.service-btn {
transition: all 0.2s ease !important;
}
.service-btn::before {
transition: all 0.3s ease !important;
}
.service-visual-container {
transition: all 0.2s ease !important;
}
.service-illustration {
transition: all 0.2s ease !important;
}
.service-feature-item {
transition: all 0.15s ease !important;
}
.service-feature-item i {
transition: all 0.15s ease !important;
}
.service-primary-btn,
.service-secondary-btn {
transition: all 0.2s ease !important;
}
/* AOS animasyonları için hızlandırma */
[data-aos] {
transition-duration: 0.4s !important;
}
[data-aos][data-aos-delay="100"] {
transition-delay: 0.05s !important;
}
[data-aos][data-aos-delay="200"] {
transition-delay: 0.1s !important;
}
[data-aos][data-aos-delay="300"] {
transition-delay: 0.15s !important;
}
/* Diğer animasyonları hızlandırma */
.modern-brand-card,
.impact-feature-card,
.solviera-highlight-card,
.solviera-visual-card,
.why-feature-item {
transition: all 0.2s ease !important;
}
.modern-brand-card::before,
.impact-feature-card::before,
.solviera-highlight-card::before,
.solviera-visual-card::before,
.why-feature-item::before {
transition: all 0.2s ease !important;
}
/* Özel animasyon süreleri */
.modern-btn::before,
.service-btn::before,
.premium-cta-btn .btn-shine {
transition: left 0.3s ease !important;
}
/* Float animasyonları hızlandırma */
@keyframes subtleFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
@keyframes statFloat {
0%, 100% { transform: translateY(0px); }
33% { transform: translateY(-5px); }
66% { transform: translateY(5px); }
}
@keyframes badgeFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-8px) rotate(2deg); }
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Hover efektleri için transition süreleri */
.service-detailed-card:hover,
.modern-brand-card:hover,
.impact-feature-card:hover,
.solviera-highlight-card:hover,
.solviera-visual-card:hover {
transition: all 0.15s ease !important;
}
/* ================================
SERVICE VECTOR IMAGES STYLING
================================ */
.service-vector-image {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 15px;
transition: all 0.2s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.service-visual-container:hover .service-vector-image {
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* Responsive styling for vector images */
@media (max-width: 768px) {
.service-vector-image {
height: 250px;
border-radius: 10px;
}
}
@media (max-width: 576px) {
.service-vector-image {
height: 200px;
border-radius: 8px;
}
/* Responsive Button Design */
.service-cta {
flex-direction: column;
}
.service-btn {
width: 100%;
justify-content: center;
margin-right: 0;
margin-bottom: 12px;
}
.service-btn:last-child {
margin-bottom: 0;
}
}
/* ================================
ENHANCED CTA SECTION STYLES
================================ */
.enhanced-cta-section {
position: relative;
padding: 100px 0;
background: #ffffff; /* Changed from #f8f9fa to #ffffff */
overflow: hidden;
color: #06063f; /* Changed from #333 to #06063f */
}
/* Subtle Background Effects */
.cta-bg-effects {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.cta-gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(35, 160, 255, 0.02) 0%, transparent 50%, rgba(6, 6, 63, 0.02) 100%); /* Changed rgba(233, 32, 42, 0.02) to rgba(35, 160, 255, 0.02) and rgba(60, 59, 61, 0.02) to rgba(6, 6, 63, 0.02) */
}
.cta-pattern-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2323a0ff' fill-opacity='0.02'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* Changed %23e9202a to %2323a0ff */
}
.floating-elements {
display: none; /* Kaldırıldı */
}
/* Statistics Row */
.cta-stats-row {
position: relative;
z-index: 2;
margin-bottom: 80px;
}
.cta-stat-item {
padding: 30px 20px;
text-align: center;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 30px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.cta-stat-item:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(35, 160, 255, 0.3); /* Changed rgba(233, 32, 42, 0.3) to rgba(35, 160, 255, 0.3) */
box-shadow: 0 20px 40px rgba(35, 160, 255, 0.1); /* Changed rgba(233, 32, 42, 0.1) to rgba(35, 160, 255, 0.1) */
}
.stat-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #23a0ff, #06063f); /* Changed #c91c24 to #06063f */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 10px 30px rgba(35, 160, 255, 0.3); /* Changed rgba(233, 32, 42, 0.3) to rgba(35, 160, 255, 0.3) */
}
.stat-icon-wrapper i {
font-size: 28px;
color: white;
}
.stat-icon-wrapper::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
animation: pulse 2s infinite;
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: #23a0ff;
margin-bottom: 10px;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.stat-label {
font-size: 1rem;
color: rgba(6, 6, 63, 0.8); /* Changed rgba(255, 255, 255, 0.8) to rgba(6, 6, 63, 0.8) */
font-weight: 500;
}
/* Enhanced CTA Content */
.enhanced-cta-content {
position: relative;
z-index: 2;
}
.cta-badge {
display: inline-block;
margin-bottom: 20px;
}
.badge-text {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, rgba(35, 160, 255, 0.2), rgba(35, 160, 255, 0.1)); /* Changed rgba(233, 32, 42, 0.2) and rgba(233, 32, 42, 0.1) to rgba(35, 160, 255, 0.2) and rgba(35, 160, 255, 0.1) */
border: 1px solid rgba(35, 160, 255, 0.3); /* Changed rgba(233, 32, 42, 0.3) to rgba(35, 160, 255, 0.3) */
border-radius: 50px;
color: #23a0ff;
font-weight: 600;
font-size: 0.9rem;
backdrop-filter: blur(10px);
}
.enhanced-cta-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.2;
color: #06063f; /* Changed from #333 to #06063f */
}
.enhanced-cta-title .title-highlight {
background: linear-gradient(135deg, #23a0ff, #06063f); /* Changed #c91c24 to #06063f */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.enhanced-cta-desc {
font-size: 1.2rem;
color: rgba(6, 6, 63, 0.8); /* Changed from #666 to rgba(6, 6, 63, 0.8) */
margin-bottom: 50px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* CTA Features Grid */
.cta-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 50px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cta-feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 25px;
background: white;
border-radius: 15px;
border: 2px solid rgba(35, 160, 255, 0.1); /* Changed rgba(233, 32, 42, 0.1) to rgba(35, 160, 255, 0.1) */
transition: all 0.2s ease;
box-shadow: 0 5px 15px rgba(6, 6, 63, 0.08); /* Changed rgba(0, 0, 0, 0.08) to rgba(6, 6, 63, 0.08) */
}
.cta-feature-item:hover {
border-color: rgba(35, 160, 255, 0.3); /* Changed rgba(233, 32, 42, 0.3) to rgba(35, 160, 255, 0.3) */
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(35, 160, 255, 0.15); /* Changed rgba(233, 32, 42, 0.15) to rgba(35, 160, 255, 0.15) */
}
.cta-feature-item i {
font-size: 22px;
color: #23a0ff;
min-width: 22px;
}
.cta-feature-item span {
color: #06063f; /* Changed from #333 to #06063f */
font-weight: 600;
font-size: 1rem;
}
/* Enhanced CTA Actions */
.enhanced-cta-actions {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.enhanced-primary-btn,
.enhanced-secondary-btn {
position: relative;
display: inline-flex;
align-items: center;
padding: 18px 35px;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
transition: all 0.3s ease;
overflow: hidden;
border: 2px solid transparent;
}
.enhanced-primary-btn {
background: linear-gradient(135deg, #23a0ff, #06063f); /* Changed #c91c24 to #06063f */
color: white;
box-shadow: 0 8px 25px rgba(35, 160, 255, 0.25); /* Changed rgba(233, 32, 42, 0.25) to rgba(35, 160, 255, 0.25) */
}
.enhanced-primary-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(35, 160, 255, 0.35); /* Changed rgba(233, 32, 42, 0.35) to rgba(35, 160, 255, 0.35) */
color: white;
}
.enhanced-secondary-btn {
background: white;
color: #06063f; /* Changed #3c3b3d to #06063f */
border-color: rgba(6, 6, 63, 0.2); /* Changed rgba(60, 59, 61, 0.2) to rgba(6, 6, 63, 0.2) */
box-shadow: 0 5px 15px rgba(6, 6, 63, 0.1); /* Changed rgba(0, 0, 0, 0.1) to rgba(6, 6, 63, 0.1) */
}
.enhanced-secondary-btn:hover {
background: #06063f; /* Changed #3c3b3d to #06063f */
border-color: #06063f; /* Changed #3c3b3d to #06063f */
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(6, 6, 63, 0.25); /* Changed rgba(60, 59, 61, 0.25) to rgba(6, 6, 63, 0.25) */
}
.btn-content {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 2;
}
.btn-shine {
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.3s ease;
}
.enhanced-primary-btn:hover .btn-shine {
left: 100%;
}
/* Trust Indicators */
.trust-indicators {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(6, 6, 63, 0.8); /* Changed rgba(255, 255, 255, 0.7) to rgba(6, 6, 63, 0.8) */
font-size: 0.9rem;
font-weight: 500;
}
.trust-item i {
color: #23a0ff;
font-size: 16px;
}
/* Counter Animation */
@keyframes countUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.stat-number {
animation: countUp 0.8s ease;
}
/* Responsive Design */
@media (max-width: 992px) {
.enhanced-cta-section {
padding: 80px 0;
}
.enhanced-cta-title {
font-size: 2.5rem;
}
.cta-features-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
}
@media (max-width: 768px) {
.enhanced-cta-section {
padding: 70px 0;
}
.enhanced-cta-title {
font-size: 2.2rem;
}
.enhanced-cta-desc {
font-size: 1.1rem;
}
.cta-features-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
.enhanced-cta-actions {
flex-direction: column;
align-items: center;
}
.enhanced-primary-btn,
.enhanced-secondary-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 576px) {
.enhanced-cta-section {
padding: 60px 0;
}
.enhanced-cta-title {
font-size: 1.9rem;
}
.enhanced-cta-desc {
font-size: 1rem;
}
.cta-feature-item {
padding: 18px 20px;
}
.enhanced-primary-btn,
.enhanced-secondary-btn {
padding: 16px 28px;
font-size: 1rem;
}
}
/* Service Detail Page Styles */
/* Service Detail Hero Section */
.service-detail-hero-section {
padding: 100px 0;
/* Açık gri/beyazdan beyaza gradient, mevcut palete uyumlu hale getirildi */
background: linear-gradient(135deg, rgba(6, 6, 63, 0.02) 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.service-detail-hero-content {
padding-right: 30px;
}
.service-badge-large {
display: inline-flex;
align-items: center;
/* Kırmızı tonundan açık mavi saydam tona dönüştürüldü */
background: rgba(35, 160, 255, 0.1);
padding: 12px 20px;
border-radius: 50px;
margin-bottom: 20px;
/* Kırmızı tonundan açık mavi saydam tona dönüştürüldü */
border: 2px solid rgba(35, 160, 255, 0.2);
}
.badge-icon-large {
width: 40px;
height: 40px;
margin-right: 12px;
}
.badge-svg-large {
width: 100%;
height: 100%;
}
.badge-text-large {
font-weight: 600;
/* Mevcut: Açık mavi, aynı bırakıldı */
color: #23a0ff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.service-detail-title {
font-size: 3.5rem;
font-weight: 700;
/* Koyu griden koyu maviye dönüştürüldü */
color: #06063f;
margin-bottom: 25px;
line-height: 1.2;
}
.service-detail-description {
font-size: 1.2rem;
/* Ortadan griden koyu mavinin saydam tonuna dönüştürüldü */
color: rgba(6, 6, 63, 0.8);
margin-bottom: 40px;
line-height: 1.6;
}
.service-detail-stats {
display: flex;
gap: 40px;
margin-bottom: 40px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
/* Mevcut: Açık mavi, aynı bırakıldı */
color: #23a0ff;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.95rem;
/* Ortadan griden koyu mavinin saydam tonuna dönüştürüldü */
color: rgba(6, 6, 63, 0.8);
font-weight: 500;
}
.service-detail-cta {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.service-detail-btn {
display: inline-flex;
align-items: center;
padding: 15px 30px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-detail-btn.primary {
/* Açık maviden kırmızıya gradientten, açık maviden koyu maviye gradiente dönüştürüldü */
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%);
/* Mevcut: Beyaz, aynı bırakıldı */
color: white;
border: none;
}
.service-detail-btn.primary:hover {
transform: translateY(-3px);
/* Kırmızı gölgeden açık mavi gölgeye dönüştürüldü */
box-shadow: 0 10px 30px rgba(35, 160, 255, 0.4);
/* Mevcut: Beyaz, aynı bırakıldı */
color: white;
}
.service-detail-btn.secondary {
/* Mevcut: Beyaz, aynı bırakıldı */
background: white;
/* Koyu griden koyu maviye dönüştürüldü */
color: #06063f;
/* Açık griden koyu mavinin saydam kenarlığına dönüştürüldü */
border: 2px solid rgba(6, 6, 63, 0.1);
}
.service-detail-btn.secondary:hover {
/* Koyu griden koyu maviye dönüştürüldü */
background: #06063f;
/* Mevcut: Beyaz, aynı bırakıldı */
color: white;
transform: translateY(-2px);
/* Koyu gri gölgeden koyu mavi gölgeye dönüştürüldü */
box-shadow: 0 8px 25px rgba(6, 6, 63, 0.3);
}
.service-detail-btn i {
margin-left: 10px;
font-size: 14px;
}
/* Visual Container */
.service-detail-visual {
position: relative;
}
.visual-main-container {
position: relative;
border-radius: 20px;
overflow: hidden;
/* Siyahtan koyu mavi gölgeye dönüştürüldü */
box-shadow: 0 20px 60px rgba(6, 6, 63, 0.1);
}
.main-visual-image {
width: 100%;
height: auto;
border-radius: 20px;
}
.floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.floating-card {
position: absolute;
/* Mevcut: Beyaz, aynı bırakıldı */
background: white;
padding: 15px 20px;
border-radius: 12px;
/* Siyahtan koyu mavi gölgeye dönüştürüldü */
box-shadow: 0 10px 30px rgba(6, 6, 63, 0.15);
display: flex;
align-items: center;
gap: 10px;
animation: floatUpDown 3s ease-in-out infinite;
/* Kırmızıdan açık mavi saydam kenarlığa dönüştürüldü */
border: 2px solid rgba(35, 160, 255, 0.1);
}
.floating-card.card-1 {
top: 20%;
right: -10px;
animation-delay: 0s;
}
.floating-card.card-2 {
bottom: 30%;
left: -20px;
animation-delay: 1s;
}
.floating-card.card-3 {
top: 60%;
right: -15px;
animation-delay: 2s;
}
.floating-card i {
/* Mevcut: Açık mavi, aynı bırakıldı */
color: #23a0ff;
font-size: 16px;
}
.floating-card span {
font-weight: 600;
/* Koyu griden koyu maviye dönüştürüldü */
color: #06063f;
font-size: 14px;
white-space: nowrap;
}
@keyframes floatUpDown {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Service Features Section */
.service-features-section {
padding: 100px 0;
background: #ffffff; /* Changed from #f8f9fa to #ffffff */
}
.service-features-section .row {
margin-left: -15px;
margin-right: -15px;
}
.service-features-section .col-lg-4 {
padding-left: 25px;
padding-right: 25px;
}
.service-features-section .feature-card {
background: white;
padding: 40px 30px;
border-radius: 20px;
text-align: center;
margin-bottom: 40px;
transition: all 0.3s ease;
border: 2px solid rgba(35, 160, 255, 0.1); /* Changed rgba(233, 32, 42, 0.1) to rgba(35, 160, 255, 0.1) */
height: calc(100% - 40px);
margin-top: 20px;
}
.service-features-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(35, 160, 255, 0.15); /* Changed rgba(233, 32, 42, 0.15) to rgba(35, 160, 255, 0.15) */
border-color: rgba(35, 160, 255, 0.2); /* Changed rgba(233, 32, 42, 0.2) to rgba(35, 160, 255, 0.2) */
}
.service-features-section .feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: rgba(35, 160, 255, 0.1); /* Changed rgba(233, 32, 42, 0.1) to rgba(35, 160, 255, 0.1) */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.service-features-section .feature-card:hover .feature-icon {
background: rgba(35, 160, 255, 0.15); /* Changed rgba(233, 32, 42, 0.15) to rgba(35, 160, 255, 0.15) */
transform: scale(1.1);
}
.service-features-section .feature-icon i {
font-size: 36px;
color: #23a0ff;
}
.service-features-section .feature-title {
font-size: 1.4rem;
font-weight: 600;
color: #06063f; /* Changed from #333 to #06063f */
margin-bottom: 15px;
}
.service-features-section .feature-description {
color: rgba(6, 6, 63, 0.8); /* Changed from #666 to rgba(6, 6, 63, 0.8) */
line-height: 1.6;
font-size: 1rem;
}
/* Process Section - Enhanced Timeline */
.process-section {
padding: 120px 0;
background: #ffffff; /* Eski #ffffff yerine beyaz */
position: relative;
}
.process-timeline-wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.process-step {
margin-bottom: 30px;
}
.process-step-container {
position: relative;
padding: 45px 30px 35px;
background: #ffffff; /* Beyaz */
border-radius: 16px;
box-shadow: 0 4px 20px rgba(6, 6, 63, 0.06); /* Gölge rengi koyu mavi */
transition: all 0.3s ease;
border: 1px solid rgba(6, 6, 63, 0.1); /* Açık koyu mavi kenarlık */
text-align: center;
overflow: hidden;
}
.process-step-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: #23a0ff; /* Açık mavi */
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.process-step-container:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(35, 160, 255, 0.08); /* Hover gölge rengi açık mavi */
border-color: rgba(35, 160, 255, 0.1); /* Hover kenarlık rengi açık mavi */
}
.process-step-container:hover::before {
transform: scaleX(1);
}
.process-number {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: #ffffff; /* Beyaz */
color: #23a0ff; /* Açık mavi */
border: 2px solid #23a0ff; /* Açık mavi */
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 700;
z-index: 3;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(35, 160, 255, 0.15); /* Gölge rengi açık mavi */
}
.process-step-container:hover .process-number {
background: #23a0ff; /* Açık mavi */
color: #ffffff; /* Beyaz */
transform: translateX(-50%) scale(1.05);
box-shadow: 0 6px 20px rgba(35, 160, 255, 0.25); /* Hover gölge rengi açık mavi */
}
.process-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(35, 160, 255, 0.06) 0%, rgba(35, 160, 255, 0.03) 100%); /* Açık mavi tonları */
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 25px auto 20px;
transition: all 0.3s ease;
position: relative;
}
.process-step-container:hover .process-icon {
background: linear-gradient(135deg, rgba(35, 160, 255, 0.1) 0%, rgba(35, 160, 255, 0.06) 100%); /* Açık mavi tonları */
}
.process-icon i {
color: #23a0ff; /* Açık mavi */
font-size: 2.2rem;
transition: all 0.3s ease;
}
.process-step-container:hover .process-icon i {
color: #06063f; /* Koyu mavi/siyah */
}
.process-title {
font-size: 1.25rem;
font-weight: 600;
color: #06063f; /* Koyu mavi/siyah */
margin-bottom: 10px;
transition: color 0.3s ease;
}
.process-step-container:hover .process-title {
color: #23a0ff; /* Açık mavi */
}
.process-description {
color: rgba(6, 6, 63, 0.8); /* Koyu mavi/siyahın hafif saydam tonu */
line-height: 1.6;
font-size: 0.9rem;
max-width: 220px;
margin: 0 auto;
transition: color 0.3s ease;
}
.process-step-container:hover .process-description {
color: rgba(6, 6, 63, 0.9); /* Koyu mavi/siyahın daha az saydam tonu */
}
/* Process Section - Enhanced Timeline */ /*
.process-section {
padding: 120px 0;
background: #fafbfc;
position: relative;
}
.process-timeline-wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.process-step {
margin-bottom: 30px;
}
.process-step-container {
position: relative;
padding: 45px 30px 35px;
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
text-align: center;
overflow: hidden;
}
.process-step-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: #23a0ff;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.process-step-container:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(233, 32, 42, 0.08);
border-color: rgba(233, 32, 42, 0.1);
}
.process-step-container:hover::before {
transform: scaleX(1);
}
.process-number {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: white;
color: #23a0ff;
border: 2px solid #23a0ff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 700;
z-index: 3;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(233, 32, 42, 0.15);
}
.process-step-container:hover .process-number {
background: #23a0ff;
color: white;
transform: translateX(-50%) scale(1.05);
box-shadow: 0 6px 20px rgba(233, 32, 42, 0.25);
}
.process-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(233, 32, 42, 0.06) 0%, rgba(233, 32, 42, 0.03) 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 25px auto 20px;
transition: all 0.3s ease;
position: relative;
}
.process-step-container:hover .process-icon {
background: linear-gradient(135deg, rgba(233, 32, 42, 0.1) 0%, rgba(233, 32, 42, 0.06) 100%);
}
.process-icon i {
color: #23a0ff;
font-size: 2.2rem;
transition: all 0.3s ease;
}
.process-step-container:hover .process-icon i {
color: #c91c24;
}
.process-title {
font-size: 1.25rem;
font-weight: 600;
color: #333;
margin-bottom: 10px;
transition: color 0.3s ease;
}
.process-step-container:hover .process-title {
color: #23a0ff;
}
.process-description {
color: #666;
line-height: 1.6;
font-size: 0.9rem;
max-width: 220px;
margin: 0 auto;
transition: color 0.3s ease;
}
.process-step-container:hover .process-description {
color: #555;
}
*/
/* Process Step Connecting Dots */
/* Connecting dots and pulse animation removed for cleaner look */
/* Modules Section */
.modules-section {
padding: 100px 0;
background: #ffffff; /* Changed from #f8f9fa to white */
}
.modules-content {
padding-right: 30px;
}
.module-tabs {
margin-bottom: 30px;
}
.tab-item {
display: flex;
align-items: center;
padding: 15px 20px;
background: white;
border-radius: 12px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(35, 160, 255, 0.1); /* Changed from #e5e5e5 to light accent rgba */
}
.tab-item:hover {
border-color: rgba(35, 160, 255, 0.3); /* Changed from rgba(233, 32, 42, 0.3) to accent rgba */
}
.tab-item.active {
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Changed from #c91c24 to dark blue */
color: white;
border-color: #23a0ff;
}
.tab-item i {
margin-right: 12px;
font-size: 18px;
}
.tab-item span {
font-weight: 600;
}
.tab-content {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.tab-title {
font-size: 1.5rem;
font-weight: 600;
color: #06063f; /* Changed from #333 to dark blue/blackish */
margin-bottom: 20px;
}
.module-list {
list-style: none;
padding: 0;
}
.module-list li {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(35, 160, 255, 0.1); /* Changed from #f0f0f0 to light accent rgba */
}
.module-list li:last-child {
border-bottom: none;
}
.module-list li i {
color: #23a0ff;
margin-right: 12px;
font-size: 14px;
}
/* Modules Visual Dashboard */
.modules-visual {
padding-left: 30px;
}
.visual-dashboard {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.dashboard-header {
background: #ffffff; /* Changed from #f8f9fa to white */
padding: 20px 25px;
border-bottom: 1px solid rgba(35, 160, 255, 0.1); /* Changed from #e5e5e5 to light accent rgba */
display: flex;
align-items: center;
justify-content: space-between;
}
.header-controls {
display: flex;
gap: 8px;
}
.control {
width: 12px;
height: 12px;
border-radius: 50%;
}
.control.red { background: #06063f; } /* Changed from #ff5f57 to dark blue/blackish */
.control.yellow { background: #23a0ff; } /* Changed from #ffbd2e to light blue/accent */
.control.green { background: #ffffff; } /* Changed from #28ca42 to white */
.dashboard-header h4 {
font-size: 1.1rem;
font-weight: 600;
color: #06063f; /* Changed from #333 to dark blue/blackish */
margin: 0;
}
.dashboard-content {
padding: 25px;
}
.chart-container {
margin-bottom: 25px;
}
.chart-item {
margin-bottom: 20px;
}
.chart-item h5 {
font-size: 0.95rem;
font-weight: 600;
color: #06063f; /* Changed from #333 to dark blue/blackish */
margin-bottom: 8px;
}
.progress-bar {
background: rgba(35, 160, 255, 0.1); /* Changed from #f0f0f0 to light accent rgba */
height: 8px;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.progress {
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Changed from #c91c24 to dark blue */
height: 100%;
border-radius: 4px;
transition: width 1s ease;
}
.chart-item span {
font-size: 0.9rem;
font-weight: 600;
color: #23a0ff;
float: right;
margin-top: -15px;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.stat-box {
text-align: center;
padding: 15px;
background: #ffffff; /* Changed from #f8f9fa to white */
border-radius: 10px;
}
.stat-box h6 {
font-size: 1.2rem;
font-weight: 700;
color: #23a0ff;
margin-bottom: 5px;
}
.stat-box p {
font-size: 0.85rem;
color: rgba(6, 6, 63, 0.7); /* Changed from #666 to dark blue/blackish rgba */
margin: 0;
}
/* FAQ Section */
.faq-section {
padding: 100px 0;
background: white;
}
.faq-content {
padding-right: 40px;
}
.faq-cta {
margin-top: 40px;
}
.faq-cta p {
color: rgba(6, 6, 63, 0.7); /* Changed from #666 to dark blue/blackish rgba */
margin-bottom: 20px;
font-size: 1.1rem;
}
.faq-contact-btn {
display: inline-flex;
align-items: center;
padding: 12px 25px;
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Changed from #c91c24 to dark blue */
color: white;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.faq-contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(35, 160, 255, 0.3); /* Changed from rgba(233, 32, 42, 0.3) to accent rgba */
color: white;
}
.faq-contact-btn i {
margin-left: 10px;
}
.faq-accordion {
padding-left: 40px;
}
.faq-item {
background: white;
border: 2px solid rgba(35, 160, 255, 0.1); /* Changed from #f0f0f0 to light accent rgba */
border-radius: 15px;
margin-bottom: 15px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: rgba(35, 160, 255, 0.2); /* Changed from rgba(233, 32, 42, 0.2) to accent rgba */
box-shadow: 0 5px 20px rgba(35, 160, 255, 0.1); /* Changed from rgba(233, 32, 42, 0.1) to accent rgba */
}
.faq-item.active {
border-color: #23a0ff;
}
.faq-question {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff; /* Changed from #f8f9fa to white */
}
.faq-question h4 {
font-size: 1.2rem;
font-weight: 600;
color: #06063f; /* Changed from #333 to dark blue/blackish */
margin: 0;
padding-right: 20px;
}
.faq-toggle {
width: 30px;
height: 30px;
background: #23a0ff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
transition: all 0.3s ease;
flex-shrink: 0;
}
.faq-item.active .faq-toggle {
transform: rotate(45deg);
}
.faq-answer {
padding: 0 30px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: white;
}
.faq-item.active .faq-answer {
padding: 25px 30px;
max-height: 200px;
}
.faq-answer p {
color: rgba(6, 6, 63, 0.7); /* Changed from #666 to dark blue/blackish rgba */
line-height: 1.6;
margin: 0;
}
/* Pricing Section */
.pricing-section {
padding: 100px 0;
background: #ffffff; /* Changed from #f8f9fa to white */
}
.pricing-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 40px 30px;
margin-bottom: 30px;
transition: all 0.3s ease;
position: relative;
border: 2px solid transparent;
height: 100%;
display: flex;
flex-direction: column;
}
.pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(35, 160, 255, 0.15); /* Changed from rgba(233, 32, 42, 0.15) to accent rgba */
border-color: rgba(35, 160, 255, 0.2); /* Changed from rgba(233, 32, 42, 0.2) to accent rgba */
}
.pricing-card.popular {
border-color: #23a0ff;
transform: scale(1.05);
}
.pricing-card.popular:hover {
transform: scale(1.05) translateY(-10px);
}
.popular-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Changed from #c91c24 to dark blue */
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
}
.pricing-header {
text-align: center;
margin-bottom: 30px;
}
.package-name {
font-size: 1.5rem;
font-weight: 600;
color: #06063f; /* Changed from #333 to dark blue/blackish */
margin-bottom: 15px;
}
.price {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.currency {
font-size: 1.2rem;
color: #23a0ff;
margin-right: 5px;
}
.amount {
font-size: 3rem;
font-weight: 700;
color: #23a0ff;
}
.period {
font-size: 1rem;
color: rgba(6, 6, 63, 0.7); /* Changed from #666 to dark blue/blackish rgba */
margin-left: 5px;
}
.package-desc {
color: rgba(6, 6, 63, 0.7); /* Changed from #666 to dark blue/blackish rgba */
font-size: 1rem;
}
.pricing-features {
flex-grow: 1;
margin-bottom: 30px;
}
.pricing-features ul {
list-style: none;
padding: 0;
}
.pricing-features li {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(35, 160, 255, 0.1); /* Changed from #f0f0f0 to light accent rgba */
}
.pricing-features li:last-child {
border-bottom: none;
}
.pricing-features li i {
margin-right: 12px;
font-size: 14px;
width: 16px;
}
.pricing-features li.disabled {
opacity: 0.5;
}
.pricing-features li.disabled i {
color: rgba(6, 6, 63, 0.2); /* Changed from #ccc to dark blue/blackish rgba */
}
.fa-check {
color: #23a0ff; /* Changed from #28a745 to light blue/accent */
}
.fa-times {
color: #06063f; /* Changed from #dc3545 to dark blue/blackish */
}
.pricing-cta {
text-align: center;
}
.pricing-btn {
display: inline-block;
width: 100%;
padding: 15px 30px;
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Changed from #c91c24 to dark blue */
color: white;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.pricing-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(35, 160, 255, 0.3); /* Changed from rgba(233, 32, 42, 0.3) to accent rgba */
color: white;
}
/* Service Detail CTA Section */
.service-detail-cta-section {
padding: 100px 0;
background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%); /* Changed from #f8f9fa to white */
position: relative;
}
.cta-content-wrapper {
text-align: center;
}
.cta-content {
background: white;
padding: 60px 40px;
border-radius: 25px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
border: 2px solid rgba(35, 160, 255, 0.1); /* Changed from rgba(233, 32, 42, 0.1) to accent rgba */
}
.cta-icon {
width: 80px;
height: 80px;
margin: 0 auto 30px;
background: rgba(35, 160, 255, 0.1); /* Changed from rgba(233, 32, 42, 0.1) to accent rgba */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cta-icon i {
font-size: 40px;
color: #23a0ff;
}
.cta-title {
font-size: 2.5rem;
font-weight: 700;
color: #06063f; /* Changed from #333 to dark blue/blackish */
margin-bottom: 20px;
line-height: 1.3;
}
.cta-description {
font-size: 1.2rem;
color: rgba(6, 6, 63, 0.7); /* Changed from #666 to dark blue/blackish rgba */
margin-bottom: 40px;
line-height: 1.6;
}
.cta-features {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.cta-feature {
display: flex;
align-items: center;
gap: 10px;
}
.cta-feature i {
color: #23a0ff;
font-size: 18px;
}
.cta-feature span {
font-weight: 600;
color: #06063f; /* Changed from #333 to dark blue/blackish */
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.cta-btn {
display: inline-flex;
align-items: center;
padding: 18px 35px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.cta-btn.primary {
background: linear-gradient(135deg, #23a0ff 0%, #06063f 100%); /* Changed from #c91c24 to dark blue */
color: white;
}
.cta-btn.primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(35, 160, 255, 0.4); /* Changed from rgba(233, 32, 42, 0.4) to accent rgba */
color: white;
}
.cta-btn.secondary {
background: white;
color: #06063f; /* Changed from #3c3b3d to dark blue/blackish */
border: 2px solid rgba(35, 160, 255, 0.1); /* Changed from #e5e5e5 to light accent rgba */
}
.cta-btn.secondary:hover {
background: #06063f; /* Changed from #3c3b3d to dark blue/blackish */
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(6, 6, 63, 0.3); /* Changed from rgba(60, 59, 61, 0.3) to dark blue/blackish rgba */
}
.cta-btn i {
margin-left: 12px;
font-size: 16px;
}
/* Related Services Section */
.related-services-section {
padding: 100px 0;
background: white;
}
.related-service-card {
background: #ffffff; /* Changed from #f8f9fa to white */
padding: 40px 30px;
border-radius: 20px;
text-align: center;
margin-bottom: 30px;
transition: all 0.3s ease;
border: 2px solid transparent;
height: 100%;
}
.related-service-card:hover {
background: white;
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(35, 160, 255, 0.15); /* Changed from rgba(233, 32, 42, 0.15) to accent rgba */
border-color: rgba(35, 160, 255, 0.2); /* Changed from rgba(233, 32, 42, 0.2) to accent rgba */
}
.related-service-card .service-icon {
width: 70px;
height: 70px;
margin: 0 auto 25px;
background: rgba(35, 160, 255, 0.1); /* Changed from rgba(233, 32, 42, 0.1) to accent rgba */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.related-service-card:hover .service-icon {
background: rgba(35, 160, 255, 0.15); /* Changed from rgba(233, 32, 42, 0.15) to accent rgba */
transform: scale(1.1);
}
.related-service-card .service-icon i {
font-size: 30px;
color: #23a0ff;
}
.related-service-card .service-title {
font-size: 1.3rem;
font-weight: 600;
color: #06063f; /* Changed from #333 to dark blue/blackish */
margin-bottom: 15px;
}
.related-service-card .service-description {
color: rgba(6, 6, 63, 0.7); /* Changed from #666 to dark blue/blackish rgba */
line-height: 1.6;
margin-bottom: 25px;
}
.service-link {
display: inline-flex;
align-items: center;
color: #23a0ff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.service-link:hover {
color: #06063f; /* Changed from #c91c24 to dark blue/blackish */
transform: translateX(5px);
}
.service-link i {
margin-left: 8px;
font-size: 14px;
transition: all 0.3s ease;
}
.service-link:hover i {
transform: translateX(3px);
}
/* Responsive Design */
@media (max-width: 992px) {
.service-detail-title {
font-size: 2.8rem;
}
.service-detail-stats {
gap: 20px;
}
.service-detail-hero-content,
.modules-content,
.faq-content {
padding-right: 0;
margin-bottom: 40px;
}
.modules-visual,
.faq-accordion {
padding-left: 0;
}
.cta-features {
gap: 20px;
}
.cta-title {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.service-detail-hero-section,
.service-features-section,
.process-section,
.modules-section,
.faq-section,
.pricing-section,
.service-detail-cta-section,
.related-services-section {
padding: 80px 0;
}
.service-detail-title {
font-size: 2.4rem;
}
.service-detail-stats {
flex-direction: column;
gap: 20px;
}
.stat-item {
text-align: left;
}
.service-detail-cta {
flex-direction: column;
}
.service-detail-btn {
justify-content: center;
}
.cta-features {
flex-direction: column;
gap: 15px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.cta-title {
font-size: 2rem;
}
.cta-content {
padding: 40px 25px;
}
/* Process Section Mobile */
.process-timeline-wrapper::before {
display: none;
}
.process-step-container {
padding: 35px 20px 30px;
margin-bottom: 20px;
}
.process-number {
top: -18px;
width: 36px;
height: 36px;
font-size: 1.1rem;
border-radius: 10px;
}
.process-icon {
width: 70px;
height: 70px;
margin: 20px auto 15px;
border-radius: 12px;
}
.process-icon i {
font-size: 1.8rem;
}
.process-title {
font-size: 1.1rem;
margin-bottom: 8px;
}
.process-description {
font-size: 0.85rem;
max-width: 200px;
}
/* Feature Cards Mobile */
.service-features-section .col-lg-4 {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 20px;
}
.service-features-section .feature-card {
margin-bottom: 30px;
margin-top: 10px;
padding: 35px 25px;
}
}
@media (max-width: 576px) {
.service-detail-title {
font-size: 2rem;
}
.cta-title {
font-size: 1.8rem;
}
.feature-card,
.process-step,
.related-service-card {
padding: 30px 20px;
}
.tab-content {
padding: 20px;
}
.pricing-card {
padding: 30px 20px;
}
.amount {
font-size: 2.5rem;
}
}