.btn-social {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
color: #fff !important;
}
.btn-social:hover { opacity: 1; filter: none; }
.btn-linkedin { background: #0A66C2; }
.btn-github { background: #24292F; }
.btn-twitter { background: #1DA1F2; }
.btn-instagram { background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90% ); }
.btn-youtube { background: #FF0000; }
.btn-medium { background: #12100E; }
.map-embed iframe { filter: hue-rotate(0deg) saturate(1.1); }
/* Custom CSS for anthonettea.com */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* Root Variables - Professional Color Scheme */
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--success-color: #198754;
--info-color: #0dcaf0;
--warning-color: #ffc107;
--danger-color: #dc3545;
--light-color: #f8f9fa;
--dark-color: #212529;
--body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--heading-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--border-radius: 0.5rem;
--box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--transition: all 0.3s ease;
/* Professional Dark Theme Colors */
--dark-bg: #0a0a0a;
--dark-surface: #1a1a1a;
--dark-text: #ffffff;
--dark-text-secondary: #cccccc;
/* Refined Professional Green Palette */
--accent-green-primary: #10b981; /* Emerald Green - Primary */
--accent-green-secondary: #059669; /* Darker Emerald */
--accent-green-light: #34d399; /* Light Emerald */
--accent-green-dark: #047857; /* Dark Emerald */
--accent-green-glow: #10b981; /* For glow effects */
/* Professional Yellow/Gold */
--accent-gold: #f59e0b; /* Amber Gold */
--accent-gold-light: #fbbf24; /* Light Amber */
--accent-gold-dark: #d97706; /* Dark Amber */
/* Professional Background Gradients */
--gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
--gradient-green: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
--gradient-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
/* Professional Shadows */
--shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-green: 0 10px 25px -5px rgba(16, 185, 129, 0.3);
--shadow-gold: 0 10px 25px -5px rgba(245, 158, 11, 0.3);
}
/* Global Styles */
* {
box-sizing: border-box;
}
body {
font-family: var(--body-font);
font-size: 0.9rem;
line-height: 1.6;
color: var(--dark-color);
background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
}
/* Typography */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
font-weight: 700;
}
.lead {
font-weight: 400;
font-size: 1rem;
}
/* Professional Mobile Responsive Navigation */
.navbar {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(20px);
background-color: rgba(0, 0, 0, 0.3) !important;
transform: translateY(0);
padding: 0.75rem 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
overflow: hidden;
}
.navbar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.05), transparent);
transition: left 0.8s ease;
z-index: -1;
}
.navbar:hover::before {
left: 100%;
}
.navbar.scrolled {
background-color: rgba(0, 0, 0, 0.8) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(16, 185, 129, 0.1);
transform: translateY(0);
padding: 0.5rem 0;
backdrop-filter: blur(25px);
}
.navbar.navbar-hidden {
transform: translateY(-100%);
opacity: 0;
}
.navbar.navbar-visible {
transform: translateY(0);
opacity: 1;
}
/* Mobile Navigation Container */
.navbar .container {
padding: 0 1rem;
}
@media (max-width: 768px) {
.navbar .container {
padding: 0 0.75rem;
}
}
.navbar-dark {
background: rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.75rem 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(16, 185, 129, 0.1);
z-index: 1030;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: fixed;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
.navbar-dark::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.08), transparent);
transition: left 1s ease;
z-index: -1;
}
.navbar-dark:hover::before {
left: 100%;
}
.navbar-dark.scrolled {
background: rgba(0, 0, 0, 0.85) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(16, 185, 129, 0.15);
padding: 0.5rem 0;
backdrop-filter: blur(30px);
}
/* Ensure proper spacing for fixed navbar */
main {
margin-top: 0;
padding-top: 0; /* Remove padding to eliminate whitespace */
}
.hero-section-dark {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
color: var(--dark-text);
min-height: 100vh;
position: relative;
overflow: hidden;
padding-top: 0;
margin-top: 0;
}
.hero-section-dark::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.hero-section-dark::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.35) 50%, rgba(51, 65, 85, 0.2) 100%);
pointer-events: none;
z-index: 1;
}
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
margin-right: 2rem;
border-radius: 0.5rem;
padding: 0.25rem 0.5rem;
}
.navbar-brand::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.15), transparent);
transition: left 0.6s ease;
z-index: -1;
}
.navbar-brand::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-green-primary);
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.navbar-brand:hover::before {
left: 100%;
}
.navbar-brand:hover::after {
width: 100%;
}
.navbar-brand:hover {
transform: scale(1.05) translateY(-2px);
text-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}
/* Mobile Brand Responsive */
@media (max-width: 768px) {
.navbar-brand {
font-size: 1.5rem;
margin-right: 1rem;
}
}
@media (max-width: 576px) {
.navbar-brand {
font-size: 1.3rem;
margin-right: 0.5rem;
}
}
.navbar-nav .nav-link {
font-weight: 500;
padding: 0.5rem 1rem !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
font-size: 1rem;
overflow: hidden;
white-space: nowrap;
border-radius: 0.5rem;
margin: 0 0.25rem;
}
.navbar-nav .nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--accent-green-primary);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(-50%);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(16, 185, 129, 0.05), transparent);
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.navbar-nav .nav-link:hover::before {
width: 80%;
}
.navbar-nav .nav-link:hover::after {
transform: translateX(0);
}
.navbar-nav .nav-link.active::before {
width: 80%;
}
.navbar-nav .nav-link.active::after {
transform: translateX(0);
}
/* Mobile Navigation Links */
@media (max-width: 768px) {
.navbar-nav .nav-link {
font-size: 1rem;
padding: 0.5rem 0.75rem !important;
}
.navbar-nav {
text-align: center;
margin: 1rem 0;
}
.navbar-nav .nav-item {
margin: 0.25rem 0;
}
}
@media (max-width: 576px) {
.navbar-nav .nav-link {
font-size: 0.9rem;
padding: 0.4rem 0.5rem !important;
}
.navbar-nav {
margin: 0.75rem 0;
}
}
.navbar-nav .nav-link:hover {
color: var(--accent-green-primary) !important;
transform: translateY(-2px);
}
.navbar-nav .nav-link.active {
color: var(--accent-green-primary) !important;
font-weight: 600;
}
.navbar-nav .nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 1rem;
right: 1rem;
height: 2px;
background-color: var(--accent-green-primary);
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* Dark navbar specific styles */
.navbar-dark .navbar-nav .nav-link {
color: var(--dark-text) !important;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: var(--accent-green-primary) !important;
}
.navbar-dark .navbar-nav .nav-link.active {
color: var(--accent-green-primary) !important;
}
.navbar-dark .navbar-nav .nav-link.active::after {
background-color: var(--accent-green-primary);
}
.navbar-dark .navbar-brand {
color: var(--dark-text) !important;
}
.navbar-dark .navbar-brand .text-success {
color: var(--accent-green-primary) !important;
}
.navbar-dark .navbar-brand .text-warning {
color: var(--accent-gold) !important;
}
.navbar-dark .btn-success {
background-color: var(--accent-green-primary);
border-color: var(--accent-green-primary);
color: var(--dark-text);
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 2rem;
font-size: 1.1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.navbar-dark .btn-success::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.navbar-dark .btn-success::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.navbar-dark .btn-success:hover::before {
left: 100%;
}
.navbar-dark .btn-success:hover::after {
opacity: 1;
}
.navbar-dark .btn-success:hover {
background-color: var(--accent-green-secondary);
border-color: var(--accent-green-secondary);
color: var(--dark-text);
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.3);
}
/* Mobile Resume Button */
@media (max-width: 768px) {
.navbar-dark .btn-success {
padding: 0.6rem 1.5rem;
font-size: 1rem;
margin-top: 0.5rem;
border-radius: 1.5rem;
box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4);
}
.navbar-dark .btn-success:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}
}
@media (max-width: 576px) {
.navbar-dark .btn-success {
padding: 0.5rem 1.25rem;
font-size: 0.9rem;
margin-top: 0.25rem;
border-radius: 1.25rem;
box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}
.navbar-dark .btn-success:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}
}
/* Enhanced Mobile Navigation Animations */
@media (max-width: 991.98px) {
.navbar-nav .nav-link {
animation: slideInFromRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
opacity: 0;
transform: translateX(30px);
}
.navbar-nav .nav-item:nth-child(1) .nav-link { animation-delay: 0.1s; }
.navbar-nav .nav-item:nth-child(2) .nav-link { animation-delay: 0.2s; }
.navbar-nav .nav-item:nth-child(3) .nav-link { animation-delay: 0.3s; }
.navbar-nav .nav-item:nth-child(4) .nav-link { animation-delay: 0.4s; }
.navbar-nav .nav-item:nth-child(5) .nav-link { animation-delay: 0.5s; }
.navbar-nav .nav-link:hover {
animation: pulse 0.6s ease-in-out;
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% {
transform: translateX(8px) scale(1.02);
}
50% {
transform: translateX(8px) scale(1.05);
}
}
/* Mobile Navigation Collapse */
@media (max-width: 991.98px) {
.navbar-collapse {
background: rgba(0, 0, 0, 0.9);
border-radius: 1rem;
margin-top: 0.75rem;
padding: 1.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(16, 185, 129, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-collapse.show {
animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-collapse.collapsing {
animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-nav.mx-auto {
margin: 0 !important;
text-align: center;
}
.navbar-nav.ms-auto {
margin: 0 !important;
text-align: center;
margin-top: 1.5rem !important;
}
.navbar-nav .nav-item {
margin: 0.5rem 0;
opacity: 0;
animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.navbar-nav .nav-item:nth-child(1) { animation-delay: 0.1s; }
.navbar-nav .nav-item:nth-child(2) { animation-delay: 0.2s; }
.navbar-nav .nav-item:nth-child(3) { animation-delay: 0.3s; }
.navbar-nav .nav-item:nth-child(4) { animation-delay: 0.4s; }
.navbar-nav .nav-item:nth-child(5) { animation-delay: 0.5s; }
.navbar-nav .nav-link {
padding: 1rem 1.5rem !important;
border-radius: 0.75rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-nav .nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), transparent);
transition: left 0.5s ease;
z-index: -1;
}
.navbar-nav .nav-link:hover {
background: rgba(16, 185, 129, 0.15);
transform: translateX(8px) scale(1.02);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
border-color: rgba(16, 185, 129, 0.3);
}
.navbar-nav .nav-link:hover::before {
left: 100%;
}
.navbar-nav .nav-link.active {
background: rgba(16, 185, 129, 0.25);
color: var(--accent-green-primary) !important;
border-color: rgba(16, 185, 129, 0.5);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.navbar-toggler {
border: none;
padding: 0.5rem;
border-radius: 0.75rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar-toggler:hover {
background: rgba(16, 185, 129, 0.2);
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.3rem rgba(16, 185, 129, 0.3);
background: rgba(16, 185, 129, 0.15);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
transition: all 0.3s ease;
}
.navbar-toggler:hover .navbar-toggler-icon {
transform: scale(1.1);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes slideUp {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
}
/* Buttons */
.btn {
font-weight: 500;
border-radius: var(--border-radius);
transition: var(--transition);
padding: 0.5rem 1.5rem;
}
.btn-primary {
background: var(--gradient-green);
border: none;
color: white;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 25px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}
.btn-primary:hover::before {
left: 100%;
}
.btn-outline-primary {
color: var(--accent-green-primary);
border: 2px solid var(--accent-green-primary);
background: transparent;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 25px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.btn-outline-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--gradient-green);
transition: left 0.5s ease;
z-index: -1;
}
.btn-outline-primary:hover {
color: white;
border-color: var(--accent-green-primary);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}
.btn-outline-primary:hover::before {
left: 0;
}
/* Enhanced Section Styling */
.section {
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(245, 158, 11, 0.02) 100%);
pointer-events: none;
}
.section.bg-light {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}
.section.bg-gradient {
background: linear-gradient(135deg, var(--accent-green-primary) 0%, var(--accent-gold) 100%);
position: relative;
overflow: hidden;
}
.section.bg-gradient::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
}
.section.bg-gradient::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
pointer-events: none;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.section.bg-gradient .section-title {
color: white;
background: none;
-webkit-text-fill-color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.section.bg-gradient .section-title::after {
background: white;
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}
.section.bg-gradient .lead {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.section.bg-gradient .btn-light {
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(255, 255, 255, 0.3);
color: var(--accent-green-primary);
font-weight: 600;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.section.bg-gradient .btn-light:hover {
background: white;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.section.bg-gradient .btn-outline-light {
border: 2px solid rgba(255, 255, 255, 0.8);
color: white;
font-weight: 600;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.section.bg-gradient .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/* Enhanced Services Section - Professional Design */
.services-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
position: relative;
overflow: hidden;
padding: 6rem 0;
color: var(--dark-color);
}
.services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.8;
pointer-events: none;
}
.services-title {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--accent-green-primary) 0%, var(--accent-green-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
position: relative;
letter-spacing: -0.02em;
}
.services-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 5px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 3px;
animation: slideIn 1.2s ease-out 0.5s both;
}
.services-subtitle {
font-size: 1.1rem;
color: var(--secondary-color);
max-width: 700px;
margin: 0 auto 3rem;
line-height: 1.7;
font-weight: 400;
opacity: 0.9;
}
/* Service Cards */
.service-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2.5rem 2rem;
text-align: center;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.8);
height: 100%;
display: block;
backdrop-filter: blur(10px);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
opacity: 0;
transition: opacity 0.4s ease;
}
.service-card:hover::before {
opacity: 1;
}
.service-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12), 0 0 30px rgba(16, 185, 129, 0.15);
background: rgba(255, 255, 255, 1);
}
/* Mobile Responsive for Services */
@media (max-width: 768px) {
.service-card {
padding: 2rem 1.5rem;
border-radius: 18px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}
.service-icon {
width: 60px;
height: 60px;
margin-bottom: 1.2rem;
}
.service-icon i {
font-size: 1.5rem;
}
.service-title {
font-size: 1rem;
margin-bottom: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.service-description {
display: block;
overflow: hidden;
margin-bottom: 1.5rem;
height: 2.4em;
line-height: 1.2em;
}
.service-description span {
display: block;
animation: marquee 15s linear infinite;
padding-top: 100%;
}
.service-link {
font-size: 0.75rem;
padding: 0.5rem 1rem;
}
}
@media (max-width: 576px) {
.service-card {
padding: 1.8rem 1.2rem;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}
.service-icon {
width: 55px;
height: 55px;
margin-bottom: 1rem;
}
.service-icon i {
font-size: 1.4rem;
}
.service-title {
font-size: 0.9rem;
margin-bottom: 0.7rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.service-description {
display: block;
overflow: hidden;
margin-bottom: 1.3rem;
height: 2.2em;
line-height: 1.1em;
font-size: 0.75rem;
}
.service-description span {
display: block;
animation: marquee 12s linear infinite;
padding-top: 100%;
}
.service-link {
font-size: 0.7rem;
padding: 0.4rem 0.8rem;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.service-card {
padding: 1.5rem 1rem;
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}
.service-icon {
width: 50px;
height: 50px;
margin-bottom: 0.8rem;
}
.service-icon i {
font-size: 1.3rem;
}
.service-title {
font-size: 0.85rem;
margin-bottom: 0.6rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.service-description {
display: block;
overflow: hidden;
margin-bottom: 1.2rem;
height: 2em;
line-height: 1em;
font-size: 0.7rem;
}
.service-description span {
display: block;
animation: marquee 10s linear infinite;
padding-top: 100%;
}
.service-link {
font-size: 0.65rem;
padding: 0.35rem 0.7rem;
}
}
/* Enhanced Latest Insights Section */
.insights-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
position: relative;
overflow: hidden;
padding: 6rem 0;
color: var(--dark-color);
}
.insights-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.8;
pointer-events: none;
}
.insights-title {
font-size: 3.5rem;
font-weight: 900;
background: linear-gradient(135deg, var(--accent-green-primary) 0%, var(--accent-green-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
position: relative;
letter-spacing: -0.02em;
text-align: center;
}
.insights-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 5px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 3px;
animation: slideIn 1.2s ease-out 0.5s both;
}
.insights-subtitle {
font-size: 1.1rem;
color: var(--secondary-color);
max-width: 700px;
margin: 0 auto 5rem;
line-height: 1.7;
font-weight: 400;
opacity: 0.9;
text-align: center;
}
/* Insight Cards */
.insight-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
height: 100%;
}
.insight-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
opacity: 0;
transition: opacity 0.4s ease;
}
.insight-card:hover::before {
opacity: 1;
}
.insight-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12), 0 0 30px rgba(16, 185, 129, 0.15);
background: rgba(255, 255, 255, 1);
}
.insight-image {
position: relative;
overflow: hidden;
height: 200px;
}
.insight-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.insight-card:hover .insight-image img {
transform: scale(1.1);
}
.insight-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(16, 185, 129, 0.6));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.insight-overlay i {
color: white;
font-size: 2rem;
transform: translateX(-20px);
transition: transform 0.3s ease;
}
.insight-card:hover .insight-overlay {
opacity: 1;
}
.insight-card:hover .insight-overlay i {
transform: translateX(0);
}
.insight-content {
padding: 2rem;
}
.insight-meta {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.insight-date,
.insight-category {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--secondary-color);
font-weight: 500;
}
.insight-date i,
.insight-category i {
color: var(--accent-green-primary);
font-size: 0.8rem;
}
.insight-title {
font-size: 1.4rem;
font-weight: 800;
color: var(--dark-color);
margin-bottom: 1rem;
line-height: 1.3;
letter-spacing: -0.01em;
}
.insight-excerpt {
color: var(--secondary-color);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
font-weight: 400;
opacity: 0.85;
}
.insight-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--accent-green-primary);
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.3s ease;
padding: 0.75rem 1.5rem;
border-radius: 25px;
background: rgba(16, 185, 129, 0.08);
border: 2px solid transparent;
}
.insight-link:hover {
color: var(--accent-green-secondary);
background: rgba(16, 185, 129, 0.12);
border-color: var(--accent-green-primary);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
text-decoration: none;
}
.insight-link i {
transition: transform 0.3s ease;
}
.insight-link:hover i {
transform: translateX(3px);
}
/* Mobile Responsive for Insights */
@media (max-width: 768px) {
.insights-title {
font-size: 2.8rem;
}
.insights-subtitle {
font-size: 1rem;
margin-bottom: 3rem;
}
.insight-card {
border-radius: 20px;
}
.insight-content {
padding: 1.5rem;
}
.insight-title {
font-size: 1.2rem;
margin-bottom: 0.8rem;
}
.insight-excerpt {
font-size: 0.85rem;
margin-bottom: 1.2rem;
}
.insight-link {
font-size: 0.8rem;
padding: 0.6rem 1.2rem;
}
}
@media (max-width: 576px) {
.insights-title {
font-size: 2.2rem;
}
.insights-subtitle {
font-size: 0.9rem;
margin-bottom: 2.5rem;
}
.insight-card {
border-radius: 18px;
}
.insight-content {
padding: 1.2rem;
}
.insight-title {
font-size: 1.1rem;
margin-bottom: 0.7rem;
}
.insight-excerpt {
font-size: 0.8rem;
margin-bottom: 1rem;
}
.insight-link {
font-size: 0.75rem;
padding: 0.5rem 1rem;
}
.insight-meta {
gap: 0.8rem;
}
.insight-date,
.insight-category {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.insights-title {
font-size: 2rem;
}
.insights-subtitle {
font-size: 0.85rem;
margin-bottom: 2rem;
}
.insight-card {
border-radius: 16px;
}
.insight-content {
padding: 1rem;
}
.insight-title {
font-size: 1rem;
margin-bottom: 0.6rem;
}
.insight-excerpt {
font-size: 0.75rem;
margin-bottom: 0.8rem;
}
.insight-link {
font-size: 0.7rem;
padding: 0.4rem 0.8rem;
}
.insight-meta {
gap: 0.6rem;
}
.insight-date,
.insight-category {
font-size: 0.75rem;
}
}
.service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-green-secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25);
position: relative;
}
.service-icon::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.service-icon i {
font-size: 1.8rem;
color: white;
transition: all 0.3s ease;
}
.service-card:hover .service-icon {
transform: scale(1.15);
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.35);
}
.service-card:hover .service-icon::before {
opacity: 1;
}
.service-title {
font-size: 1.3rem;
font-weight: 800;
color: var(--dark-color);
margin-bottom: 1rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
.service-description {
color: var(--secondary-color);
line-height: 1.6;
margin-bottom: 2rem;
font-size: 0.85rem;
font-weight: 400;
opacity: 0.85;
}
.service-link {
color: var(--accent-green-primary);
text-decoration: none;
font-weight: 700;
font-size: 0.8rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
padding: 0.6rem 1.2rem;
border-radius: 20px;
background: rgba(16, 185, 129, 0.08);
border: 2px solid transparent;
}
.service-link:hover {
color: var(--accent-green-secondary);
background: rgba(16, 185, 129, 0.12);
border-color: var(--accent-green-primary);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}
.view-all-services-btn {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-green-secondary));
color: white;
padding: 0.9rem 2.2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25);
position: relative;
overflow: hidden;
letter-spacing: 0.02em;
border: 2px solid transparent;
}
.view-all-services-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.view-all-services-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.35);
color: white;
border-color: var(--accent-gold);
}
.view-all-services-btn:hover::before {
left: 100%;
}
/* Enhanced Project Cards */
.enhanced-project-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
height: 100%;
}
.enhanced-project-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-green);
opacity: 0;
transition: opacity 0.3s ease;
}
.enhanced-project-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(16, 185, 129, 0.1);
}
.enhanced-project-card:hover::before {
opacity: 1;
}
.project-card-header {
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
padding: 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.project-card-header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.enhanced-project-card:hover .project-card-header::before {
left: 100%;
}
.project-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.project-icon i {
font-size: 1.5rem;
color: white;
}
.enhanced-project-card:hover .project-icon {
transform: scale(1.1);
background: rgba(255, 255, 255, 0.3);
}
.project-category {
color: white;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}
.project-card-content {
padding: 2rem;
}
.project-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 1rem;
line-height: 1.3;
}
.project-description {
color: var(--secondary-color);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.project-tag {
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
color: white;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.project-tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}
.project-card-footer {
padding: 0 2rem 2rem;
}
.project-btn {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
color: white;
padding: 0.75rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
position: relative;
overflow: hidden;
}
.project-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.project-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
color: white;
}
.project-btn:hover::before {
left: 100%;
}
.view-all-projects-btn {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
color: white;
padding: 1rem 2.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
position: relative;
overflow: hidden;
}
.view-all-projects-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.view-all-projects-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
color: white;
}
.view-all-projects-btn:hover::before {
left: 100%;
}
/* Enhanced Call to Action Section */
.section.cta-section,
section.section.cta-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
padding: 8rem 0;
color: white !important;
margin-bottom: 0;
}
.section.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.section.cta-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-icon {
display: inline-block;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 3rem;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.4s ease;
}
.cta-icon i {
font-size: 3rem;
color: white;
animation: pulse 2s infinite;
}
.cta-title {
font-size: 3.5rem;
font-weight: 900;
background: linear-gradient(135deg, #10B981, #F59E0B, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2rem;
position: relative;
color: white !important;
letter-spacing: -0.02em;
text-shadow: 0 0 40px rgba(16, 185, 129, 0.4);
}
.cta-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 4px;
background: linear-gradient(90deg, #10B981, #F59E0B, #3B82F6);
border-radius: 2px;
animation: slideIn 1.5s ease-out 0.8s both;
}
.cta-description {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.8;
max-width: 800px;
margin: 0 auto 4rem;
font-weight: 400;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.cta-btn-primary {
background: white;
color: var(--accent-green-primary);
border: none;
padding: 1.2rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.cta-btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.cta-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
color: var(--accent-green-primary);
}
.cta-btn-primary:hover::before {
left: 100%;
}
.cta-btn-secondary {
background: transparent;
color: white;
border: 3px solid white;
padding: 1.2rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cta-btn-secondary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: white;
transition: left 0.3s ease;
z-index: -1;
}
.cta-btn-secondary:hover {
color: var(--accent-green-primary);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 255, 255, 0.2);
}
.cta-btn-secondary:hover::before {
left: 0;
}
/* CTA Particles */
.cta-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.cta-particle {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: float-particle 6s infinite linear;
}
.cta-particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.cta-particle:nth-child(2) { top: 30%; left: 90%; animation-delay: 1s; }
.cta-particle:nth-child(3) { top: 50%; left: 20%; animation-delay: 2s; }
.cta-particle:nth-child(4) { top: 70%; left: 80%; animation-delay: 3s; }
.cta-particle:nth-child(5) { top: 40%; left: 5%; animation-delay: 4s; }
.cta-particle:nth-child(6) { top: 80%; left: 70%; animation-delay: 5s; }
/* Responsive CTA */
@media (max-width: 768px) {
.cta-title {
font-size: 2.5rem;
}
.cta-description {
font-size: 1.1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cta-btn-primary,
.cta-btn-secondary {
width: 100%;
max-width: 300px;
}
.cta-icon {
width: 60px;
height: 60px;
}
.cta-icon i {
font-size: 2rem;
}
}
@media (max-width: 576px) {
.cta-title {
font-size: 2rem;
}
.cta-description {
font-size: 1rem;
}
.cta-section {
padding: 4rem 0;
}
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
background: var(--gradient-green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--gradient-green);
border-radius: 2px;
}
.section-subtitle {
font-size: 1rem;
text-align: center;
color: var(--secondary-color);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Enhanced Cards */
.card {
border: none;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-green);
opacity: 0;
transition: opacity 0.3s ease;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(16, 185, 129, 0.1);
}
.card:hover::before {
opacity: 1;
}
.card-img-top {
height: 200px;
object-fit: cover;
}
.card-body {
padding: 1.5rem;
}
.card-title {
font-weight: 600;
margin-bottom: 0.75rem;
}
.card-text {
color: var(--secondary-color);
margin-bottom: 1rem;
}
/* Hero Section */
.hero-section {
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
color: white;
padding: 8rem 0 6rem;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2rem;
}
/* Sections */
.section {
padding: 5rem 0;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
}
.section-subtitle {
text-align: center;
color: var(--secondary-color);
font-size: 1.125rem;
margin-bottom: 4rem;
}
/* Enhanced Project Cards */
.project-card {
height: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card::after {
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;
z-index: 1;
}
.project-card:hover::after {
left: 100%;
}
.project-card .card-body {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
}
.project-card .card-footer {
background: none;
border-top: 1px solid rgba(0, 0, 0, 0.125);
padding: 1rem 1.5rem;
position: relative;
z-index: 2;
}
.project-card .card-img-top {
transition: all 0.4s ease;
height: 200px;
object-fit: cover;
}
.project-card:hover .card-img-top {
transform: scale(1.05);
}
/* Project Image Styling */
.project-image {
height: 200px;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.project-overlay i {
font-size: 3rem;
color: white;
opacity: 0.8;
transition: all 0.4s ease;
}
.project-card:hover .project-overlay {
background: rgba(0, 0, 0, 0.2);
}
.project-card:hover .project-overlay i {
transform: scale(1.2);
opacity: 1;
}
.project-tags {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.project-tag {
display: inline-block;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-green-secondary));
color: white;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
margin: 0;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
border: 1px solid rgba(16, 185, 129, 0.1);
}
.project-tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
/* Enhanced Blog Posts */
.blog-post {
margin-bottom: 3rem;
transition: all 0.4s ease;
}
.blog-post:hover {
transform: translateY(-5px);
}
.blog-post-meta {
color: var(--accent-green-primary);
font-size: 0.875rem;
margin-bottom: 1rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 1rem;
}
.blog-post-meta i {
margin-right: 0.5rem;
color: var(--accent-gold);
}
.blog-post-meta span {
background: rgba(16, 185, 129, 0.1);
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.8rem;
}
.blog-post-excerpt {
color: var(--secondary-color);
line-height: 1.7;
font-size: 0.95rem;
}
.blog-post .card-img-top {
transition: all 0.4s ease;
height: 180px;
object-fit: cover;
}
.blog-post:hover .card-img-top {
transform: scale(1.05);
}
/* Contact Form */
.contact-form {
background-color: var(--light-color);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.form-control {
border-radius: var(--border-radius);
border: 1px solid #dee2e6;
padding: 0.75rem 1rem;
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.form-label {
font-weight: 500;
margin-bottom: 0.5rem;
}
/* Enhanced Footer */
footer {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: white;
position: relative;
overflow: hidden;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
footer h5, footer h6 {
color: white;
margin-bottom: 1.5rem;
font-weight: 700;
position: relative;
}
footer h5::after, footer h6::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 3px;
background: var(--gradient-green);
border-radius: 2px;
}
footer a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
padding: 0.25rem 0;
}
footer a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-green);
transition: width 0.3s ease;
}
footer a:hover {
color: var(--accent-green-primary);
transform: translateX(5px);
}
footer a:hover::before {
width: 100%;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 50%;
color: white;
font-size: 1.2rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.social-links a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.social-links a:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}
.social-links a:hover::before {
left: 100%;
}
/* Enhanced Newsletter Form */
footer .form-control {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: white;
border-radius: 25px;
padding: 0.75rem 1.5rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
footer .form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
footer .form-control:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--accent-green-primary);
box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
color: white;
}
footer .btn-primary {
border-radius: 25px;
padding: 0.75rem 1.5rem;
font-weight: 600;
background: var(--gradient-green);
border: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
footer .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}
/* Footer Bottom */
footer hr {
border-color: rgba(255, 255, 255, 0.1);
margin: 3rem 0 2rem 0;
}
footer .text-muted {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Enhanced Back to Top Button */
#back-to-top {
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
background: var(--gradient-green) !important;
border: none !important;
color: white !important;
font-size: 1.2rem !important;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
transition: all 0.3s ease !important;
z-index: 1000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
min-width: 50px !important;
min-height: 50px !important;
max-width: 50px !important;
max-height: 50px !important;
}
#back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}
/* Breadcrumbs */
.breadcrumb {
background: none;
padding: 0;
margin: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: var(--secondary-color);
}
/* Page Headers */
.page-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
position: relative;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
}
.page-header .container {
position: relative;
z-index: 2;
}
/* Enhanced Testimonials */
.testimonial-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2.5rem 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: -15px;
left: 20px;
font-size: 5rem;
background: var(--gradient-green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.3;
font-family: serif;
font-weight: bold;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(16, 185, 129, 0.1);
}
.testimonial-content {
position: relative;
z-index: 2;
font-style: italic;
font-size: 1.1rem;
line-height: 1.6;
color: var(--dark-text);
margin-bottom: 2rem;
}
.testimonial-author {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.testimonial-author img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(16, 185, 129, 0.2);
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.testimonial-card:hover .testimonial-author img {
border-color: var(--accent-green-primary);
transform: scale(1.05);
}
.testimonial-author-name {
font-weight: 700;
margin-bottom: 0.25rem;
color: var(--dark-text);
font-size: 1.1rem;
}
.testimonial-author-title {
color: var(--accent-green-primary);
font-size: 0.9rem;
font-weight: 500;
}
/* Media & Awards */
.media-logo {
height: 60px;
object-fit: contain;
filter: grayscale(100%);
transition: var(--transition);
opacity: 0.7;
}
.media-logo:hover {
filter: grayscale(0%);
opacity: 1;
}
.award-badge {
display: inline-block;
background: linear-gradient(135deg, var(--warning-color) 0%, #e0a800 100%);
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-weight: 500;
margin: 0.25rem;
}
/* Speaking Engagements */
.speaking-event {
border-left: 4px solid var(--primary-color);
padding-left: 1.5rem;
margin-bottom: 2rem;
}
.speaking-event-date {
color: var(--primary-color);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.speaking-event-title {
font-weight: 600;
margin: 0.5rem 0;
}
.speaking-event-venue {
color: var(--secondary-color);
font-size: 0.875rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.navbar-nav {
text-align: center;
}
.navbar-nav .nav-link.active::after {
display: none;
}
.hero-section {
padding: 6rem 0 4rem;
}
.section {
padding: 3rem 0;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2rem;
}
.section-title {
font-size: 1.75rem;
}
.card-body {
padding: 1rem;
}
.contact-form {
padding: 1.5rem;
}
}
/* Professional Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeInRotate {
from {
opacity: 0;
transform: rotate(-5deg) scale(0.9);
}
to {
opacity: 1;
transform: rotate(0deg) scale(1);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
.slide-in-left {
animation: slideInLeft 0.8s ease-out;
}
.slide-in-right {
animation: slideInRight 0.8s ease-out;
}
.pulse {
animation: pulse 2s infinite;
}
.float {
animation: float 3s ease-in-out infinite;
}
/* Scroll Animation Classes */
.scroll-fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-fade-in.animate {
opacity: 1;
transform: translateY(0);
}
.scroll-fade-in-left {
opacity: 0;
transform: translateX(-30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-fade-in-left.animate {
opacity: 1;
transform: translateX(0);
}
.scroll-fade-in-right {
opacity: 0;
transform: translateX(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-fade-in-right.animate {
opacity: 1;
transform: translateX(0);
}
.scroll-fade-in-scale {
opacity: 0;
transform: scale(0.8);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-fade-in-scale.animate {
opacity: 1;
transform: scale(1);
}
.scroll-fade-in-rotate {
opacity: 0;
transform: rotate(-5deg) scale(0.9);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-fade-in-rotate.animate {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* Staggered animations for multiple elements */
.scroll-stagger-1 { transition-delay: 0.1s; }
.scroll-stagger-2 { transition-delay: 0.2s; }
.scroll-stagger-3 { transition-delay: 0.3s; }
.scroll-stagger-4 { transition-delay: 0.4s; }
.scroll-stagger-5 { transition-delay: 0.5s; }
.scroll-stagger-6 { transition-delay: 0.6s; }
/* Professional Loading States */
.loading {
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.spinner-border-sm {
width: 1rem;
height: 1rem;
}
/* Professional Focus States */
.btn:focus,
.nav-link:focus {
box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
outline: none;
}
/* Professional Selection */
::selection {
background: var(--accent-green-primary);
color: var(--dark-text);
}
::-moz-selection {
background: var(--accent-green-primary);
color: var(--dark-text);
}
/* Utility Classes */
.text-gradient {
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bg-gradient-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
}
.shadow-hover {
transition: var(--transition);
}
.shadow-hover:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* Print Styles */
@media print {
.navbar,
.btn,
#back-to-top {
display: none !important;
}
body {
background: white !important;
color: black !important;
}
.hero-section {
background: white !important;
color: black !important;
}
}
/* Dark Theme Hero Section */
.hero-section-dark {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
color: var(--dark-text);
min-height: 100vh;
position: relative;
overflow: hidden;
padding-top: 0;
margin-top: 0;
}
.hero-section-dark::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.hero-section-dark::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
@keyframes background-shift {
0%, 100% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
}
@keyframes rotate-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.35) 50%, rgba(51, 65, 85, 0.2) 100%);
pointer-events: none;
z-index: 1;
}
/* Professional Data Particles */
.particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.data-particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--accent-green-primary);
border-radius: 50%;
opacity: 0.6;
animation: float-particle 8s infinite linear;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.data-particle::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: 8px;
height: 8px;
background: transparent;
border: 1px solid var(--accent-green-primary);
border-radius: 50%;
opacity: 0.3;
animation: pulse-ring 3s infinite;
}
.data-particle:nth-child(odd) {
background: var(--accent-gold);
box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}
.data-particle:nth-child(odd)::before {
border-color: var(--accent-gold);
}
.data-particle:nth-child(3n) {
width: 6px;
height: 6px;
background: var(--accent-green-light);
box-shadow: 0 0 15px rgba(52, 211, 153, 0.6);
}
.data-particle:nth-child(3n)::before {
width: 12px;
height: 12px;
top: -3px;
left: -3px;
border-color: var(--accent-green-light);
}
/* Position particles randomly */
.data-particle:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.data-particle:nth-child(2) { top: 20%; left: 80%; animation-delay: 1s; }
.data-particle:nth-child(3) { top: 30%; left: 20%; animation-delay: 2s; }
.data-particle:nth-child(4) { top: 40%; left: 70%; animation-delay: 3s; }
.data-particle:nth-child(5) { top: 50%; left: 15%; animation-delay: 4s; }
.data-particle:nth-child(6) { top: 60%; left: 85%; animation-delay: 5s; }
.data-particle:nth-child(7) { top: 70%; left: 25%; animation-delay: 6s; }
.data-particle:nth-child(8) { top: 80%; left: 75%; animation-delay: 7s; }
.data-particle:nth-child(9) { top: 15%; left: 50%; animation-delay: 0.5s; }
.data-particle:nth-child(10) { top: 35%; left: 90%; animation-delay: 1.5s; }
.data-particle:nth-child(11) { top: 55%; left: 5%; animation-delay: 2.5s; }
.data-particle:nth-child(12) { top: 75%; left: 60%; animation-delay: 3.5s; }
@keyframes float-particle {
0% {
transform: translateY(0px) translateX(0px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.6;
}
100% {
transform: translateY(-100px) translateX(50px) rotate(360deg);
opacity: 0;
}
}
@keyframes pulse-ring {
0% {
transform: scale(0.5);
opacity: 0.3;
}
50% {
transform: scale(1.2);
opacity: 0.1;
}
100% {
transform: scale(0.5);
opacity: 0.3;
}
}
/* Powerful Floating Professional Icons */
.floating-icons-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.floating-icon {
position: absolute;
width: 32px;
height: 32px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
border: 1.5px solid rgba(16, 185, 129, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-green-primary);
font-size: 1rem;
animation: float-icon 15s infinite linear;
backdrop-filter: blur(15px);
box-shadow:
0 4px 15px rgba(16, 185, 129, 0.3),
0 0 10px rgba(16, 185, 129, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.4s ease;
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.floating-icon::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(45deg, var(--accent-green-primary), var(--accent-green-light));
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: all 0.4s ease;
animation: pulse-glow 3s infinite;
}
/* Individual icon colors */
.floating-icon:nth-child(1) {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
border-color: rgba(16, 185, 129, 0.4);
color: #10b981;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3), 0 0 10px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(2) {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
border-color: rgba(245, 158, 11, 0.4);
color: #f59e0b;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3), 0 0 10px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(3) {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
border-color: rgba(59, 130, 246, 0.4);
color: #3b82f6;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3), 0 0 10px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(4) {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05));
border-color: rgba(168, 85, 247, 0.4);
color: #a855f7;
box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3), 0 0 10px rgba(168, 85, 247, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(5) {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.05));
border-color: rgba(236, 72, 153, 0.4);
color: #ec4899;
box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3), 0 0 10px rgba(236, 72, 153, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(6) {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
border-color: rgba(34, 197, 94, 0.4);
color: #22c55e;
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3), 0 0 10px rgba(34, 197, 94, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(7) {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3), 0 0 10px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(8) {
background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.05));
border-color: rgba(14, 165, 233, 0.4);
color: #0ea5e9;
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3), 0 0 10px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(9) {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 146, 60, 0.05));
border-color: rgba(251, 146, 60, 0.4);
color: #fb923c;
box-shadow: 0 4px 15px rgba(251, 146, 60, 0.3), 0 0 10px rgba(251, 146, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(10) {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
border-color: rgba(139, 92, 246, 0.4);
color: #8b5cf6;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3), 0 0 10px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(11) {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.05));
border-color: rgba(6, 182, 212, 0.4);
color: #06b6d4;
box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3), 0 0 10px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.floating-icon:nth-child(12) {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
border-color: rgba(16, 185, 129, 0.4);
color: #10b981;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3), 0 0 10px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Hover effects for each color */
.floating-icon:nth-child(1):hover {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1));
border-color: rgba(16, 185, 129, 0.6);
box-shadow: 0 12px 30px rgba(16, 185, 129, 0.5), 0 0 25px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(2):hover {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.1));
border-color: rgba(245, 158, 11, 0.6);
box-shadow: 0 12px 30px rgba(245, 158, 11, 0.5), 0 0 25px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(3):hover {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1));
border-color: rgba(59, 130, 246, 0.6);
box-shadow: 0 12px 30px rgba(59, 130, 246, 0.5), 0 0 25px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(4):hover {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(168, 85, 247, 0.1));
border-color: rgba(168, 85, 247, 0.6);
box-shadow: 0 12px 30px rgba(168, 85, 247, 0.5), 0 0 25px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(5):hover {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(236, 72, 153, 0.1));
border-color: rgba(236, 72, 153, 0.6);
box-shadow: 0 12px 30px rgba(236, 72, 153, 0.5), 0 0 25px rgba(236, 72, 153, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(6):hover {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.1));
border-color: rgba(34, 197, 94, 0.6);
box-shadow: 0 12px 30px rgba(34, 197, 94, 0.5), 0 0 25px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(7):hover {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.1));
border-color: rgba(239, 68, 68, 0.6);
box-shadow: 0 12px 30px rgba(239, 68, 68, 0.5), 0 0 25px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(8):hover {
background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(14, 165, 233, 0.1));
border-color: rgba(14, 165, 233, 0.6);
box-shadow: 0 12px 30px rgba(14, 165, 233, 0.5), 0 0 25px rgba(14, 165, 233, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(9):hover {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(251, 146, 60, 0.1));
border-color: rgba(251, 146, 60, 0.6);
box-shadow: 0 12px 30px rgba(251, 146, 60, 0.5), 0 0 25px rgba(251, 146, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(10):hover {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.1));
border-color: rgba(139, 92, 246, 0.6);
box-shadow: 0 12px 30px rgba(139, 92, 246, 0.5), 0 0 25px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(11):hover {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(6, 182, 212, 0.1));
border-color: rgba(6, 182, 212, 0.6);
box-shadow: 0 12px 30px rgba(6, 182, 212, 0.5), 0 0 25px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(12):hover {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1));
border-color: rgba(16, 185, 129, 0.6);
box-shadow: 0 12px 30px rgba(16, 185, 129, 0.5), 0 0 25px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:hover {
transform: scale(1.3) rotate(5deg);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1));
border-color: rgba(16, 185, 129, 0.6);
box-shadow:
0 15px 35px rgba(16, 185, 129, 0.5),
0 0 30px rgba(16, 185, 129, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
z-index: 10;
}
.floating-icon:hover::before {
opacity: 0.3;
transform: scale(1.2);
}
.floating-icon:nth-child(even):hover {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.1));
border-color: rgba(245, 158, 11, 0.6);
box-shadow:
0 15px 35px rgba(245, 158, 11, 0.5),
0 0 30px rgba(245, 158, 11, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.floating-icon:nth-child(3n):hover {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(52, 211, 153, 0.1));
border-color: rgba(52, 211, 153, 0.6);
box-shadow:
0 15px 35px rgba(52, 211, 153, 0.5),
0 0 30px rgba(52, 211, 153, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Position floating icons strategically */
.floating-icon:nth-child(1) { top: 12%; left: 12%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 22%; left: 88%; animation-delay: 2.5s; }
.floating-icon:nth-child(3) { top: 32%; left: 22%; animation-delay: 5s; }
.floating-icon:nth-child(4) { top: 42%; left: 78%; animation-delay: 7.5s; }
.floating-icon:nth-child(5) { top: 52%; left: 8%; animation-delay: 10s; }
.floating-icon:nth-child(6) { top: 62%; left: 82%; animation-delay: 12.5s; }
.floating-icon:nth-child(7) { top: 72%; left: 18%; animation-delay: 1.25s; }
.floating-icon:nth-child(8) { top: 82%; left: 72%; animation-delay: 3.75s; }
.floating-icon:nth-child(9) { top: 18%; left: 65%; animation-delay: 6.25s; }
.floating-icon:nth-child(10) { top: 38%; left: 92%; animation-delay: 8.75s; }
.floating-icon:nth-child(11) { top: 28%; left: 35%; animation-delay: 11.25s; }
.floating-icon:nth-child(12) { top: 48%; left: 55%; animation-delay: 13.75s; }
@keyframes float-icon {
0% {
transform: translateY(0px) translateX(0px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.9;
}
90% {
opacity: 0.9;
}
100% {
transform: translateY(-200px) translateX(40px) rotate(360deg);
opacity: 0;
}
}
@keyframes pulse-glow {
0%, 100% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0.2;
transform: scale(1.1);
}
}
@keyframes marquee {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
.hero-content-dark {
padding: 4rem 3rem;
z-index: 2;
position: relative;
animation-delay: 0.2s;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 3rem;
}
.hero-content-left {
flex: 1;
max-width: 600px;
}
.hero-content-right {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.hero-content-dark > * {
animation-fill-mode: both;
}
.hero-content-dark .slide-in-left:nth-child(1) { animation-delay: 0.1s; }
.hero-content-dark .slide-in-left:nth-child(2) { animation-delay: 0.3s; }
.hero-content-dark .fade-in-up:nth-child(3) { animation-delay: 0.5s; }
.hero-content-dark .fade-in-up:nth-child(4) { animation-delay: 0.7s; }
.hero-content-dark .fade-in-up:nth-child(5) { animation-delay: 0.9s; }
.hero-greeting {
margin-bottom: 2.5rem;
}
.greeting-text {
font-size: 2.8rem;
font-weight: 800;
color: var(--accent-gold);
display: block;
text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
position: relative;
animation: text-glow 3s ease-in-out infinite alternate;
letter-spacing: 0.05em;
line-height: 1;
}
@keyframes text-glow {
0% {
text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}
100% {
text-shadow: 0 2px 8px rgba(245, 158, 11, 0.6), 0 0 20px rgba(245, 158, 11, 0.2);
}
}
.hero-title-dark {
font-size: 4rem;
font-weight: 900;
line-height: 1.05;
margin-bottom: 2.5rem;
color: var(--dark-text);
word-wrap: normal;
white-space: nowrap;
letter-spacing: -0.02em;
}
.text-gradient-dark {
background: linear-gradient(135deg, var(--accent-green-primary) 0%, var(--accent-gold) 50%, var(--accent-green-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.text-gradient-dark::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold), var(--accent-green-secondary));
border-radius: 2px;
opacity: 0.7;
transition: all 0.3s ease;
}
.text-gradient-dark:hover::after {
opacity: 1;
height: 4px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}
.hero-role-badge {
display: inline-flex;
align-items: center;
background: rgba(16, 185, 129, 0.15);
color: var(--accent-green-primary);
padding: 0.9rem 1.8rem;
border-radius: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
font-size: 1rem;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
border: 2px solid rgba(16, 185, 129, 0.3);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.hero-role-badge i {
font-size: 0.9rem;
color: var(--accent-green-primary);
margin-right: 0.5rem;
transition: all 0.3s ease;
}
.hero-role-badge:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
background: rgba(16, 185, 129, 0.25);
}
.hero-role-badge:hover i {
transform: translateX(-3px);
}
.hero-description-dark {
font-size: 1.1rem;
line-height: 1.8;
color: var(--dark-text-secondary);
margin-bottom: 3.5rem;
max-width: 550px;
font-weight: 400;
letter-spacing: 0.01em;
opacity: 0.95;
}
.hero-buttons-dark {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.btn-success-dark {
background: var(--gradient-green);
border: none;
color: var(--dark-text);
font-weight: 600;
padding: 1rem 2.5rem;
border-radius: 2rem;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
font-size: 1.1rem;
box-shadow: var(--shadow-green);
border: 1px solid rgba(16, 185, 129, 0.2);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
min-height: 44px; /* Touch-friendly minimum size */
}
.btn-success-dark:hover {
background: var(--accent-green-secondary);
color: var(--dark-text);
transform: translateY(-3px);
box-shadow: var(--shadow-large);
border-color: rgba(16, 185, 129, 0.4);
}
.btn-outline-light-dark {
background: transparent;
border: 2px solid var(--dark-text);
color: var(--dark-text);
font-weight: 600;
padding: 1.2rem 3rem;
border-radius: 3rem;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
font-size: 1.3rem;
backdrop-filter: blur(10px);
}
.btn-outline-light-dark:hover {
background: var(--dark-text);
color: var(--dark-bg);
transform: translateY(-3px);
box-shadow: var(--shadow-large);
}
.hero-image-dark {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100vh;
position: relative;
padding: 2rem;
margin-top: -6rem;
}
.hero-portrait {
width: 320px;
height: 400px;
border-radius: 50%;
box-shadow: var(--shadow-large);
filter: contrast(1.1) brightness(0.9) saturate(1.1);
transition: all 0.4s ease;
object-fit: cover;
border: 4px solid rgba(16, 185, 129, 0.3);
clip-path: circle(45% at 50% 50%);
position: relative;
margin-left: auto;
margin-right: 2rem;
align-self: center;
transform: scale(0.85);
margin-top: 0;
}
.hero-portrait::before {
content: '';
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
background: linear-gradient(45deg, var(--accent-green-primary), var(--accent-gold), var(--accent-green-secondary));
border-radius: 50%;
z-index: -1;
opacity: 0.4;
clip-path: circle(50% at 50% 50%);
animation: background-shift 3s ease-in-out infinite;
}
.hero-portrait::after {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border: 2px solid transparent;
border-radius: 50%;
background: linear-gradient(45deg, var(--accent-green-primary), var(--accent-gold), var(--accent-green-secondary)) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
z-index: -2;
opacity: 0.3;
animation: rotate-ring 8s linear infinite;
}
.hero-portrait:hover {
transform: scale(0.9) translateY(-8px);
box-shadow: var(--shadow-large), var(--shadow-green);
filter: contrast(1.2) brightness(1) saturate(1.2);
border-color: rgba(16, 185, 129, 0.5);
}
.hero-portrait:hover::before {
opacity: 0.6;
transform: scale(1.1);
animation: background-shift 2s ease-in-out infinite;
}
/* Removed navigation arrows - no longer needed */
/* Professional Mobile Responsive Hero Section */
/* Tablet Responsive (768px and below) */
@media (max-width: 768px) {
.hero-section-dark {
min-height: 100vh;
padding: 1rem 0 2rem 0;
}
.hero-content-dark {
padding: 1rem 1.5rem 2rem 1.5rem;
text-align: center;
flex-direction: column;
gap: 1.5rem;
}
.hero-content-left {
max-width: 100%;
order: 2;
}
.hero-content-right {
order: 1;
justify-content: center;
}
.hero-title-dark {
font-size: 2.5rem;
white-space: normal;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.greeting-text {
font-size: 2rem;
margin-bottom: 1rem;
}
.hero-role-badge {
font-size: 0.85rem;
padding: 0.6rem 1.2rem;
margin: 0 auto 1.5rem auto;
display: inline-flex;
}
.hero-description-dark {
font-size: 1rem;
max-width: 100%;
margin: 0 auto 2rem auto;
text-align: center;
}
.hero-buttons-dark {
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 300px;
margin: 0 auto;
}
.btn-success-dark,
.btn-outline-light-dark {
justify-content: center;
width: 100%;
max-width: 250px;
padding: 1rem 2rem;
font-size: 1rem;
}
.hero-image-dark {
height: auto;
padding: 1rem;
margin-top: 2rem;
}
.hero-portrait {
width: 280px;
height: 350px;
max-width: 90%;
border-radius: 50%;
clip-path: circle(45% at 50% 50%);
transform: scale(0.8);
}
.floating-icon {
width: 24px;
height: 24px;
font-size: 0.8rem;
}
.floating-icon:nth-child(3n) {
width: 28px;
height: 28px;
font-size: 1rem;
}
/* Adjust floating icon positions for mobile */
.floating-icon:nth-child(1) { top: 8%; left: 8%; }
.floating-icon:nth-child(2) { top: 15%; left: 85%; }
.floating-icon:nth-child(3) { top: 25%; left: 15%; }
.floating-icon:nth-child(4) { top: 35%; left: 80%; }
.floating-icon:nth-child(5) { top: 45%; left: 10%; }
.floating-icon:nth-child(6) { top: 55%; left: 85%; }
.floating-icon:nth-child(7) { top: 65%; left: 20%; }
.floating-icon:nth-child(8) { top: 75%; left: 75%; }
.floating-icon:nth-child(9) { top: 12%; left: 60%; }
.floating-icon:nth-child(10) { top: 30%; left: 90%; }
.floating-icon:nth-child(11) { top: 50%; left: 5%; }
.floating-icon:nth-child(12) { top: 70%; left: 65%; }
}
/* Mobile Responsive (576px and below) */
@media (max-width: 576px) {
.hero-section-dark {
min-height: 100vh;
padding: 0.5rem 0 1rem 0;
}
.hero-content-dark {
padding: 0.5rem 1rem 1.5rem 1rem;
text-align: center;
flex-direction: column;
gap: 1rem;
}
.hero-content-left {
max-width: 100%;
order: 2;
}
.hero-content-right {
order: 1;
justify-content: center;
}
.hero-title-dark {
font-size: 2rem;
white-space: normal;
line-height: 1.1;
margin-bottom: 1rem;
}
.greeting-text {
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
.hero-role-badge {
font-size: 0.75rem;
padding: 0.5rem 1rem;
margin: 0 auto 1rem auto;
display: inline-flex;
}
.hero-description-dark {
font-size: 0.9rem;
max-width: 100%;
margin: 0 auto 1.5rem auto;
text-align: center;
line-height: 1.5;
}
.hero-buttons-dark {
flex-direction: column;
align-items: center;
gap: 0.75rem;
max-width: 280px;
margin: 0 auto;
}
.btn-success-dark,
.btn-outline-light-dark {
justify-content: center;
width: 100%;
max-width: 220px;
padding: 0.875rem 1.5rem;
font-size: 0.9rem;
}
.hero-image-dark {
height: auto;
padding: 0.5rem;
margin-top: 0.5rem;
}
.hero-portrait {
width: 240px;
height: 300px;
max-width: 85%;
border-radius: 50%;
clip-path: circle(45% at 50% 50%);
transform: scale(0.75);
}
.floating-icon {
width: 20px;
height: 20px;
font-size: 0.7rem;
}
.floating-icon:nth-child(3n) {
width: 24px;
height: 24px;
font-size: 0.9rem;
}
/* Further adjust floating icon positions for small mobile */
.floating-icon:nth-child(1) { top: 5%; left: 5%; }
.floating-icon:nth-child(2) { top: 12%; left: 88%; }
.floating-icon:nth-child(3) { top: 20%; left: 12%; }
.floating-icon:nth-child(4) { top: 28%; left: 82%; }
.floating-icon:nth-child(5) { top: 36%; left: 8%; }
.floating-icon:nth-child(6) { top: 44%; left: 88%; }
.floating-icon:nth-child(7) { top: 52%; left: 15%; }
.floating-icon:nth-child(8) { top: 60%; left: 78%; }
.floating-icon:nth-child(9) { top: 8%; left: 55%; }
.floating-icon:nth-child(10) { top: 24%; left: 92%; }
.floating-icon:nth-child(11) { top: 40%; left: 3%; }
.floating-icon:nth-child(12) { top: 56%; left: 70%; }
}
/* Extra Small Mobile (480px and below) */
@media (max-width: 480px) {
.hero-content-dark {
padding: 1rem 0.75rem;
}
.hero-title-dark {
font-size: 1.8rem;
margin-bottom: 0.75rem;
}
.greeting-text {
font-size: 1.4rem;
}
.hero-role-badge {
font-size: 0.7rem;
padding: 0.4rem 0.8rem;
}
.hero-description-dark {
font-size: 0.85rem;
margin-bottom: 1.25rem;
}
.btn-success-dark,
.btn-outline-light-dark {
padding: 0.75rem 1.25rem;
font-size: 0.85rem;
max-width: 200px;
}
.hero-portrait {
width: 200px;
height: 250px;
max-width: 80%;
border-radius: 50%;
clip-path: circle(45% at 50% 50%);
transform: scale(0.7);
}
.floating-icon {
width: 18px;
height: 18px;
font-size: 0.6rem;
}
.floating-icon:nth-child(3n) {
width: 22px;
height: 22px;
font-size: 0.8rem;
}
}
/* Landscape Mobile Orientation */
@media (max-width: 768px) and (orientation: landscape) {
.hero-section-dark {
min-height: 100vh;
padding: 1rem 0;
}
.hero-content-dark {
padding: 1rem;
}
.hero-title-dark {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.greeting-text {
font-size: 1.6rem;
}
.hero-role-badge {
font-size: 0.75rem;
padding: 0.4rem 0.8rem;
margin-bottom: 0.75rem;
}
.hero-description-dark {
font-size: 0.85rem;
margin-bottom: 1rem;
}
.hero-buttons-dark {
flex-direction: row;
gap: 0.5rem;
max-width: 400px;
}
.btn-success-dark,
.btn-outline-light-dark {
padding: 0.5rem 1rem;
font-size: 0.8rem;
max-width: none;
flex: 1;
}
.hero-portrait {
width: 200px;
height: 250px;
}
}
/* Social Integration Section Styling */
.social-section {
background: linear-gradient(135deg, var(--bg-dark-primary) 0%, var(--bg-dark-secondary) 100%);
position: relative;
overflow: hidden;
}
.social-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.social-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.social-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 2px;
}
.social-subtitle {
font-size: 1.1rem;
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.social-integration-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 2rem;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.social-integration-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
.social-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.linkedin-widget {
background: rgba(255, 255, 255, 0.08);
border-radius: 15px;
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.linkedin-title {
color: var(--accent-green-primary);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
}
.linkedin-preview {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 1rem;
}
.linkedin-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.linkedin-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--accent-green-primary);
}
.linkedin-info h6 {
color: white;
font-weight: 600;
margin-bottom: 0.25rem;
}
.linkedin-info p {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.linkedin-location {
color: var(--accent-gold) !important;
font-size: 0.8rem !important;
}
.linkedin-stats {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.linkedin-stat {
color: var(--text-muted);
font-size: 0.85rem;
}
.linkedin-stat strong {
color: var(--accent-green-primary);
}
.linkedin-btn {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-green-secondary));
color: white;
padding: 0.75rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.linkedin-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
color: white;
}
.social-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
.social-link-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 1.5rem 1rem;
text-decoration: none;
color: var(--text-muted);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-link-card:hover {
transform: translateY(-3px);
background: rgba(16, 185, 129, 0.1);
border-color: var(--accent-green-primary);
color: var(--accent-green-primary);
}
.social-link-card i {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.social-link-card span {
font-weight: 500;
font-size: 0.9rem;
}
/* Testimonials Section Styling */
.testimonials-section {
background: linear-gradient(135deg, var(--bg-light-primary) 0%, var(--bg-light-secondary) 100%);
position: relative;
overflow: hidden;
}
/* Mobile horizontal scroll for testimonials */
@media (max-width: 768px) {
.testimonials-section .row {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 1rem;
}
.testimonials-section .col-lg-4,
.testimonials-section .col-md-6 {
flex: 0 0 85%;
max-width: 85%;
scroll-snap-align: start;
margin-right: 1rem;
}
.testimonials-section .col-lg-4:last-child,
.testimonials-section .col-md-6:last-child {
margin-right: 0;
}
.testimonial-card {
min-width: 280px;
height: auto;
}
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.testimonials-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.testimonials-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 2px;
}
.testimonials-subtitle {
font-size: 1.1rem;
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(16, 185, 129, 0.1);
position: relative;
overflow: hidden;
color: #333333 !important;
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
opacity: 0;
transition: opacity 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
.testimonial-card:hover::before {
opacity: 1;
}
.testimonial-content {
margin-bottom: 1.5rem;
color: #333333 !important;
}
.testimonial-content p {
color: #333333 !important;
font-style: italic;
font-size: 1rem;
line-height: 1.6;
margin: 0;
position: relative;
opacity: 1 !important;
visibility: visible !important;
}
.testimonial-content p {
font-style: italic;
font-size: 1rem;
line-height: 1.6;
color: var(--text-dark) !important;
margin: 0;
position: relative;
opacity: 1 !important;
visibility: visible !important;
}
.testimonial-content p::before {
content: '"';
font-size: 3rem;
color: var(--accent-green-primary);
position: absolute;
top: -10px;
left: -15px;
opacity: 0.3;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(16, 185, 129, 0.1);
}
.testimonial-author img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--accent-green-primary);
transition: all 0.3s ease;
}
.testimonial-card:hover .testimonial-author img {
transform: scale(1.1);
border-color: var(--accent-gold);
}
.testimonial-author-info h6 {
color: var(--text-dark);
font-weight: 600;
margin-bottom: 0.25rem;
}
.testimonial-author-title {
color: var(--accent-green-primary);
font-size: 0.9rem;
font-weight: 500;
margin: 0;
}
/* Media Section Styling */
.media-section {
background: linear-gradient(135deg, var(--bg-dark-primary) 0%, var(--bg-dark-secondary) 100%);
position: relative;
overflow: hidden;
}
.media-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.media-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.media-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 2px;
}
.media-subtitle {
font-size: 1.1rem;
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.media-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 1.5rem;
text-align: center;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.media-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(16, 185, 129, 0.3);
background: rgba(255, 255, 255, 0.08);
}
.media-logo {
margin-bottom: 1rem;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.media-logo img {
max-width: 120px;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
transition: all 0.3s ease;
filter: grayscale(100%);
opacity: 0.85;
}
.media-card:hover .media-logo img {
transform: scale(1.05);
filter: grayscale(0%);
opacity: 1;
}
.media-publication {
color: var(--accent-green-primary);
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.media-article {
color: #333333 !important;
font-size: 0.9rem;
margin-bottom: 0.5rem;
line-height: 1.4;
opacity: 1 !important;
visibility: visible !important;
}
.media-date {
color: var(--accent-gold);
font-size: 0.8rem;
font-weight: 500;
}
/* Awards Section Styling */
.awards-section {
background: linear-gradient(135deg, var(--bg-light-primary) 0%, var(--bg-light-secondary) 100%);
position: relative;
overflow: hidden;
}
.awards-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.awards-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.awards-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 2px;
}
.awards-subtitle {
font-size: 1.1rem;
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.award-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(16, 185, 129, 0.1);
position: relative;
overflow: hidden;
}
.award-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
opacity: 0;
transition: opacity 0.3s ease;
}
.award-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
.award-card:hover::before {
opacity: 1;
}
.award-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
transition: all 0.3s ease;
}
.award-card:hover .award-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
}
.award-title {
color: var(--text-dark);
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.award-organization {
color: var(--accent-green-primary);
font-weight: 500;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.award-date {
color: var(--accent-gold);
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 1rem;
display: block;
}
.award-description {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* Speaking Section Styling */
.speaking-section {
background: linear-gradient(135deg, var(--bg-dark-primary) 0%, var(--bg-dark-secondary) 100%);
position: relative;
overflow: hidden;
}
.speaking-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.speaking-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.speaking-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 2px;
}
.speaking-subtitle {
font-size: 1.1rem;
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.speaking-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
overflow: hidden;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.speaking-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
.speaking-image {
height: 200px;
overflow: hidden;
position: relative;
}
.speaking-image-overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 40%;
background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.0) 100%);
pointer-events: none;
}
.speaking-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.speaking-card:hover .speaking-image img {
transform: scale(1.05);
}
.speaking-content {
padding: 1.5rem;
}
.speaking-event-title {
color: #0f172a;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.speaking-event-venue {
color: var(--accent-green-primary);
font-weight: 500;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.speaking-event-date {
color: var(--accent-gold);
font-weight: 500;
font-size: 0.85rem;
margin-bottom: 1rem;
display: block;
}
.speaking-event-description {
color: #1f2937;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.speaking-event-link {
display: inline-flex;
align-items: center;
color: var(--accent-green-primary);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.speaking-event-link:hover {
color: var(--accent-gold);
transform: translateX(5px);
}
/* Responsive Design for New Sections */
@media (max-width: 768px) {
.testimonials-title,
.media-title,
.awards-title,
.speaking-title,
.social-title {
font-size: 2rem;
}
.testimonials-subtitle,
.media-subtitle,
.awards-subtitle,
.speaking-subtitle,
.social-subtitle {
font-size: 1rem;
}
.testimonial-card,
.media-card,
.award-card,
.speaking-card {
padding: 1.5rem;
}
.social-integration-card {
padding: 1.5rem;
}
.social-links-grid {
grid-template-columns: repeat(2, 1fr);
}
.linkedin-preview {
padding: 0.75rem;
}
.linkedin-header {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.linkedin-stats {
justify-content: center;
}
}
@media (max-width: 576px) {
.testimonials-title,
.media-title,
.awards-title,
.speaking-title,
.social-title {
font-size: 1.8rem;
}
.testimonial-author {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.social-links-grid {
grid-template-columns: 1fr;
}
.speaking-image {
height: 150px;
}
}
/* Footer Social Integration Styling */
.footer-social-section {
margin-top: 1.5rem;
}
.footer-social-title {
color: var(--accent-green-primary);
font-weight: 600;
font-size: 1rem;
margin-bottom: 1rem;
position: relative;
}
.footer-social-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 30px;
height: 2px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 1px;
}
.footer-linkedin-preview {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 1rem;
}
.footer-linkedin-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.footer-linkedin-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--accent-green-primary);
}
.footer-linkedin-info h6 {
color: white;
font-weight: 600;
margin-bottom: 0.25rem;
font-size: 0.9rem;
}
.footer-linkedin-info p {
color: var(--text-muted);
font-size: 0.8rem;
margin-bottom: 0.25rem;
}
.footer-linkedin-location {
color: var(--accent-gold) !important;
font-size: 0.75rem !important;
}
.footer-linkedin-stats {
display: flex;
gap: 1rem;
margin-bottom: 0.75rem;
}
.footer-linkedin-stat {
color: var(--text-muted);
font-size: 0.75rem;
}
.footer-linkedin-stat strong {
color: var(--accent-green-primary);
}
.footer-linkedin-btn {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-green-secondary));
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
text-decoration: none;
font-weight: 500;
font-size: 0.8rem;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}
.footer-linkedin-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
color: white;
}
.footer-social-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.footer-social-link {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 0.75rem;
text-decoration: none;
color: var(--text-muted);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.85rem;
}
.footer-social-link:hover {
background: rgba(16, 185, 129, 0.1);
border-color: var(--accent-green-primary);
color: var(--accent-green-primary);
transform: translateY(-1px);
}
.footer-social-link i {
font-size: 1.1rem;
}
.footer-social-link span {
font-weight: 500;
}
/* Responsive Design for Footer Social */
@media (max-width: 768px) {
.footer-linkedin-header {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.footer-linkedin-stats {
justify-content: center;
}
.footer-social-links {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.footer-linkedin-preview {
padding: 0.75rem;
}
.footer-linkedin-avatar {
width: 40px;
height: 40px;
}
.footer-linkedin-info h6 {
font-size: 0.85rem;
}
.footer-linkedin-info p {
font-size: 0.75rem;
}
.footer-linkedin-btn {
padding: 0.4rem 0.8rem;
font-size: 0.75rem;
}
}
/* About Section Styling */
.about-section {
background: linear-gradient(135deg, var(--bg-light-primary) 0%, var(--bg-light-secondary) 100%);
position: relative;
overflow: hidden;
}
.about-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.about-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.about-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 2px;
}
.about-subtitle {
font-size: 1.1rem;
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.about-content {
padding: 2rem;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(16, 185, 129, 0.1);
}
.about-mission,
.about-vision {
margin-bottom: 2rem;
}
.mission-title,
.vision-title {
color: var(--accent-green-primary);
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.3rem;
display: flex;
align-items: center;
}
.mission-title i,
.vision-title i {
color: var(--accent-gold);
margin-right: 0.5rem;
}
.mission-text,
.vision-text {
color: var(--text-dark);
line-height: 1.7;
font-size: 1rem;
margin: 0;
}
/* Show More/Less Functionality */
.mission-text-container,
.vision-text-container {
position: relative;
}
.mission-text-truncated,
.vision-text-truncated {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
line-height: 1.7;
margin-bottom: 0.5rem;
}
.mission-text-full,
.vision-text-full {
display: none;
line-height: 1.7;
margin-bottom: 0.5rem;
}
.mission-text-full.hidden,
.vision-text-full.hidden {
display: none !important;
}
.mission-text-truncated.hidden,
.vision-text-truncated.hidden {
display: none !important;
}
/* Override for when full text should be visible */
.mission-text-full:not(.hidden),
.vision-text-full:not(.hidden) {
display: block !important;
}
.mission-show-more,
.vision-show-more {
color: var(--accent-green-primary);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
padding: 0;
margin: 0;
border: none;
background: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
}
.mission-show-more:hover,
.vision-show-more:hover {
color: var(--accent-gold);
text-decoration: none;
}
.mission-show-more i,
.vision-show-more i {
transition: transform 0.3s ease;
}
.mission-show-more.expanded i,
.vision-show-more.expanded i {
transform: rotate(180deg);
}
.about-stats {
padding: 2rem;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(16, 185, 129, 0.1);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
text-align: center;
padding: 1.5rem;
background: rgba(16, 185, 129, 0.05);
border-radius: 15px;
border: 1px solid rgba(16, 185, 129, 0.1);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
background: rgba(16, 185, 129, 0.1);
}
.stat-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.stat-number {
color: var(--accent-green-primary);
font-weight: 700;
font-size: 2rem;
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 500;
margin: 0;
}
.about-highlights {
text-align: center;
}
.highlights-title {
color: var(--accent-green-primary);
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.publication-logos {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.publication-logo {
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
}
.publication-logo:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}
.about-story {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(16, 185, 129, 0.1);
}
.story-title {
color: var(--accent-green-primary);
font-weight: 600;
margin-bottom: 1.5rem;
font-size: 1.5rem;
text-align: center;
}
.story-text {
color: #333333 !important;
line-height: 1.8;
font-size: 1rem;
margin-bottom: 1.5rem;
opacity: 1 !important;
visibility: visible !important;
}
.story-text:last-child {
margin-bottom: 0;
}
/* Responsive Design for About Section */
@media (max-width: 768px) {
.about-title {
font-size: 2rem;
}
.about-subtitle {
font-size: 1rem;
}
.about-content,
.about-stats,
.about-story {
padding: 1.5rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.publication-logos {
flex-direction: column;
align-items: center;
}
.mission-title,
.vision-title {
font-size: 1.2rem;
}
.story-title {
font-size: 1.3rem;
}
}
@media (max-width: 576px) {
.about-title {
font-size: 1.8rem;
}
.about-content,
.about-stats,
.about-story {
padding: 1rem;
}
.stat-card {
padding: 1rem;
}
.stat-number {
font-size: 1.5rem;
}
.publication-logo {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.mission-show-more,
.vision-show-more {
font-size: 0.85rem;
}
.mission-text-truncated,
.vision-text-truncated {
-webkit-line-clamp: 3;
}
}
/* About Page Styling */
.about-hero-section {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 8rem 0 6rem 0;
position: relative;
overflow: hidden;
color: white;
}
.about-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.about-hero-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.about-hero-title {
font-size: 4rem;
font-weight: 900;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #10B981, #F59E0B, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
letter-spacing: -0.03em;
text-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
}
.about-hero-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100px;
height: 4px;
background: linear-gradient(90deg, #10B981, #F59E0B);
border-radius: 2px;
animation: slideIn 1.2s ease-out 0.5s both;
}
.about-hero-subtitle {
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2.5rem;
line-height: 1.7;
font-weight: 400;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.about-hero-stats {
display: flex;
gap: 3rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.hero-stat {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 1.5rem 2rem;
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
min-width: 120px;
}
.hero-stat:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(16, 185, 129, 0.5);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.hero-stat-number {
display: block;
font-size: 2.8rem;
font-weight: 800;
background: linear-gradient(135deg, #10B981, #F59E0B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}
.hero-stat-label {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.about-hero-portrait {
width: 100%;
max-width: 400px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.about-hero-portrait:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
/* Mission & Vision Section */
.mission-vision-section {
background: linear-gradient(135deg, var(--bg-light-primary) 0%, var(--bg-light-secondary) 100%);
position: relative;
overflow: hidden;
}
.mission-vision-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.mission-card,
.vision-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(16, 185, 129, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.mission-card:hover,
.vision-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
.mission-header,
.vision-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.mission-icon,
.vision-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
margin-right: 1rem;
}
.mission-title,
.vision-title {
color: var(--accent-green-primary);
font-weight: 700;
font-size: 1.8rem;
margin: 0;
}
.mission-text,
.vision-text {
color: var(--text-dark);
line-height: 1.8;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.mission-text:last-child,
.vision-text:last-child {
margin-bottom: 0;
}
/* Story Section */
.story-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
position: relative;
overflow: hidden;
padding: 6rem 0;
color: var(--dark-color);
}
.story-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.8;
pointer-events: none;
}
.story-section-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.story-section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 2px;
}
.story-section-subtitle {
font-size: 1.1rem;
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.story-content {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 3rem;
backdrop-filter: blur(20px);
border: 1px solid rgba(16, 185, 129, 0.1);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.story-paragraph {
margin-bottom: 2.5rem;
}
.story-paragraph:last-child {
margin-bottom: 0;
}
.story-heading {
color: var(--accent-green-primary);
font-weight: 700;
margin-bottom: 1rem;
font-size: 1.3rem;
display: flex;
align-items: center;
letter-spacing: -0.01em;
}
.story-heading i {
color: var(--accent-gold);
margin-right: 0.5rem;
font-size: 1.2rem;
}
.story-text {
color: #333333 !important;
line-height: 1.8;
font-size: 1.1rem;
margin: 0;
opacity: 1 !important;
visibility: visible !important;
}
/* Publications Section */
.publications-section {
background: linear-gradient(135deg, var(--bg-light-primary) 0%, var(--bg-light-secondary) 100%);
position: relative;
overflow: hidden;
}
.publications-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.publications-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-green-primary), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.publications-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--accent-green-primary), var(--accent-gold));
border-radius: 2px;
}
.publications-subtitle {
font-size: 1.1rem;
text-align: center;
color: var(--text-muted);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.publication-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(16, 185, 129, 0.1);
height: 100%;
}
.publication-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
.publication-logo {
margin-bottom: 1rem;
}
.publication-logo img {
max-width: 150px;
height: auto;
border-radius: 8px;
transition: all 0.3s ease;
}
.publication-card:hover .publication-logo img {
transform: scale(1.05);
}
.publication-name {
color: var(--accent-green-primary);
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.publication-article {
color: var(--text-dark);
font-size: 0.9rem;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.publication-date {
color: var(--accent-gold);
font-size: 0.8rem;
font-weight: 500;
}
/* About CTA Section */
.about-cta-section {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
position: relative;
overflow: hidden;
padding: 6rem 0;
}
.about-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.about-cta-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.about-cta-content {
text-align: center;
color: white;
position: relative;
z-index: 2;
}
.about-cta-title {
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 2rem;
background: linear-gradient(135deg, #10B981, #F59E0B, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
letter-spacing: -0.02em;
text-shadow: 0 0 40px rgba(16, 185, 129, 0.4);
}
.about-cta-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 4px;
background: linear-gradient(90deg, #10B981, #F59E0B, #3B82F6);
border-radius: 2px;
animation: slideIn 1.5s ease-out 0.8s both;
}
.about-cta-description {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 3rem;
line-height: 1.8;
font-weight: 400;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.about-cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
/* Floating particles for CTA section */
.about-cta-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.about-cta-particle {
position: absolute;
width: 4px;
height: 4px;
background: linear-gradient(135deg, #10B981, #F59E0B);
border-radius: 50%;
opacity: 0.6;
animation: float-particle 6s ease-in-out infinite;
}
.about-cta-particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.about-cta-particle:nth-child(2) { top: 30%; left: 90%; animation-delay: 1s; }
.about-cta-particle:nth-child(3) { top: 50%; left: 20%; animation-delay: 2s; }
.about-cta-particle:nth-child(4) { top: 70%; left: 80%; animation-delay: 3s; }
.about-cta-particle:nth-child(5) { top: 40%; left: 5%; animation-delay: 4s; }
.about-cta-particle:nth-child(6) { top: 80%; left: 70%; animation-delay: 5s; }
/* Responsive Design for About Page */
@media (max-width: 768px) {
.about-hero-title {
font-size: 2.5rem;
}
.about-hero-subtitle {
font-size: 1.1rem;
}
.about-hero-stats {
flex-direction: column;
gap: 1rem;
}
.hero-stat-number {
font-size: 2rem;
}
.mission-card,
.vision-card {
padding: 2rem;
}
.mission-title,
.vision-title {
font-size: 1.5rem;
}
.story-content {
padding: 2rem;
}
.story-section-title,
.publications-title {
font-size: 2rem;
}
.about-cta-title {
font-size: 2rem;
}
.about-cta-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 576px) {
.about-hero-title {
font-size: 2rem;
}
.about-hero-subtitle {
font-size: 1rem;
}
.mission-card,
.vision-card {
padding: 1.5rem;
}
.story-content {
padding: 1.5rem;
}
.story-text {
font-size: 1rem;
}
.publication-card {
padding: 1rem;
}
}
@media (max-width: 576px) {
.particles-container .data-particle:nth-child(n+7) { display: none; }
.floating-icons-container .floating-icon:nth-child(n+6) { display: none; }
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.scroll-fade-in,
.scroll-fade-in-left,
.scroll-fade-in-right,
.scroll-fade-in-scale,
.scroll-fade-in-rotate,
.data-particle,
.floating-icon,
.about-cta-particle {
animation: none !important;
transition: none !important;
}
}
/* Visible focus styles for accessibility */
:where(a, button, .btn):focus-visible {
outline: 2px solid #10B981;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}
/* Projects Page */
.projects-hero-section {
position: relative;
overflow: hidden;
padding: 6rem 0 4rem;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
color: white;
}
.projects-hero-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(16,185,129,0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(245,158,11,0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(59,130,246,0.12) 0%, transparent 50%);
pointer-events: none;
}
.projects-hero-overlay {
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.projects-hero-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.75rem;
background: linear-gradient(135deg, #10B981, #F59E0B, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
}
.projects-hero-subtitle {
font-size: 1.1rem;
color: rgba(255,255,255,0.9);
}
.projects-filters-section {
background: linear-gradient(135deg, #111827 0%, #0b1222 100%);
padding: 2.5rem 0;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.projects-filter-select {
background-color: #0b1222;
color: #e5e7eb;
border: 1px solid rgba(255,255,255,0.1);
}
.project-card {
background: rgba(255,255,255,0.95);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(16, 185, 129, 0.12);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.project-card:hover {
transform: translateY(-6px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
.project-image { position: relative; }
.project-image img { height: 220px; object-fit: cover; transition: transform 0.3s ease; }
.project-card:hover .project-image img { transform: scale(1.05); }
.featured-badge {
position: absolute; top: 12px; right: 12px;
background: linear-gradient(45deg, #F59E0B, #F97316);
color: white; padding: 6px 12px; border-radius: 999px;
font-size: 0.8rem; font-weight: 700;
box-shadow: 0 6px 14px rgba(249, 115, 22, 0.35);
}
.technologies .badge { font-size: 0.75rem; }
@media (max-width: 768px) {
.projects-hero-title { font-size: 2.2rem; }
.project-image img { height: 180px; }
}
/* Contact & Blog Heroes */
.contact-hero-section,
.blog-hero-section {
position: relative;
overflow: hidden;
padding: 6rem 0 4rem;
background:
radial-gradient(1200px 600px at -10% -10%, rgba(16,185,129,0.25), transparent 60%),
radial-gradient(1000px 500px at 110% 20%, rgba(245,158,11,0.22), transparent 60%),
radial-gradient(900px 500px at 50% 120%, rgba(59,130,246,0.18), transparent 60%),
linear-gradient(135deg, #0b1220 0%, #0f1b2d 45%, #14243a 100%);
color: white;
}
.contact-hero-section::before,
.blog-hero-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 28%, rgba(16,185,129,0.18) 0%, transparent 52%),
radial-gradient(circle at 82% 68%, rgba(245,158,11,0.18) 0%, transparent 52%),
radial-gradient(circle at 44% 86%, rgba(59,130,246,0.14) 0%, transparent 52%);
pointer-events: none;
}
.contact-hero-overlay,
.blog-hero-overlay {
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.contact-hero-title,
.blog-hero-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.75rem;
background: linear-gradient(135deg, #10B981, #F59E0B, #3B82F6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
}
.contact-hero-subtitle,
.blog-hero-subtitle {
font-size: 1.1rem;
color: rgba(255,255,255,0.9);
}
/* Contact page abstract background */
.contact-section {
position: relative;
overflow: hidden;
background:
radial-gradient(800px 400px at 0% 20%, rgba(16,185,129,0.10), transparent 60%),
radial-gradient(700px 350px at 100% 80%, rgba(245,158,11,0.10), transparent 60%),
radial-gradient(600px 300px at 50% 120%, rgba(59,130,246,0.08), transparent 60%);
}
.contact-section::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.contact-card {
border: 1px solid rgba(16,185,129,0.15);
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
/* Abstract backgrounds inside cards on the contact page */
.contact-section .card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.98) 100%);
}
.contact-section .card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(260px 140px at -10% -10%, rgba(16,185,129,0.12), transparent 60%),
radial-gradient(220px 120px at 110% 0%, rgba(245,158,11,0.12), transparent 60%),
radial-gradient(260px 140px at 110% 110%, rgba(59,130,246,0.10), transparent 60%);
pointer-events: none;
}
.contact-section .card::after {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}