/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    animation: pageLoad 0.8s ease-out;
}

/* Enhanced Page Load Animation */
@keyframes pageLoad {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse Animation for Interactive Elements */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Glow Effect Animation */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(99, 102, 241, 0.6);
    }
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Rotate Animation */
@keyframes rotate360 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Bounce In Animation */
/* Duplicate bounceIn keyframe removed - using the first definition at line 66 */

/* Slide In Animations */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom Animations */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flip Animation */
@keyframes flipInY {
    0% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

/* Typing Animation */
@keyframes typing {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes blink {
    0%, 50% { border-color: transparent; }
    51%, 100% { border-color: #6366f1; }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation Styles */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo h2 {
    color: #6366f1;
    font-weight: 700;
    font-size: 1.5rem;
}

.nav-logo span {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 300;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: #64748b;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: #6366f1;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #6366f1;
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: #6366f1;
    margin: 3px 0;
    transition: 0.3s;
}

/* Header Contact Styles */
.header-contact {
    display: flex;
    align-items: center;
}

.contact-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.whatsapp-link,
.phone-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.whatsapp-link {
    background: #25d366;
    color: white;
}

.whatsapp-link:hover {
    background: #128c7e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.phone-link {
    background: #6366f1;
    color: white;
}

.phone-link:hover {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.whatsapp-link i,
.phone-link i {
    font-size: 1.1rem;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    opacity: 0.3;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content {
    color: white;
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInLeft 0.8s ease-out forwards;
    will-change: transform, opacity;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.title-line {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
    will-change: transform, opacity;
}

.title-line:nth-child(1) { animation-delay: 0.1s; }
.title-line:nth-child(2) { animation-delay: 0.2s; }
.title-line:nth-child(3) { animation-delay: 0.3s; }

.highlight {
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out 0.4s forwards;
    will-change: transform, opacity;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out 0.5s forwards;
    will-change: transform, opacity;
}

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

.btn-primary {
    background: #ffd700;
    color: #333;
}

.btn-primary:hover {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: #6366f1;
    transform: translateY(-2px);
}

/* Hero Visual */
.hero-visual {
    position: relative;
    height: 500px;
    animation: slideInRight 1s ease-out;
}

.floating-elements {
    position: relative;
    width: 100%;
    height: 100%;
}

.element {
    position: absolute;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.element-1 {
    width: 200px;
    height: 200px;
    top: 50px;
    left: 50px;
    animation: float 6s ease-in-out infinite;
}

.element-2 {
    width: 150px;
    height: 150px;
    top: 200px;
    right: 100px;
    animation: float 6s ease-in-out infinite 2s;
}

.element-3 {
    width: 100px;
    height: 100px;
    bottom: 150px;
    left: 150px;
    animation: float 6s ease-in-out infinite 4s;
}

.element-4 {
    width: 120px;
    height: 120px;
    bottom: 50px;
    right: 50px;
    animation: float 6s ease-in-out infinite 1s;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* About Section */
.about {
    padding: 100px 0;
    background: #f8fafc;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #64748b;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h3 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.about-text p {
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #64748b;
    font-size: 0.9rem;
}

.about-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.team-animation {
    position: relative;
    width: 300px;
    height: 300px;
}

.team-member {
    position: absolute;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    animation: orbit 10s linear infinite;
}

.member-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.member-2 {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation-delay: -3.33s;
}

.member-3 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: -6.66s;
}

/* Services Section */
.services {
    padding: 100px 0;
    background: white;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.service-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
    font-size: 1.5rem;
    animation: pulse 2s infinite;
}

.service-card h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.service-card p {
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.service-features {
    list-style: none;
}

.service-features li {
    color: #64748b;
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #6366f1;
    font-weight: bold;
}

/* Portfolio Section */
.portfolio {
    padding: 100px 0;
    background: #f8fafc;
}

.portfolio-filter {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 12px 28px;
    border: 2px solid #6366f1;
    background: transparent;
    color: #6366f1;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.filter-btn:hover::before {
    left: 100%;
}

.filter-btn.active,
.filter-btn:hover {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
    border-color: #8b5cf6;
}

.filter-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.portfolio-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 280px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
}

.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.portfolio-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.portfolio-item:hover::before {
    opacity: 1;
}

.portfolio-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(99, 102, 241, 0.8) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 2rem;
    backdrop-filter: blur(10px);
    z-index: 2;
    transform: translateY(20px);
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-overlay h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transform: translateY(10px);
    transition: transform 0.3s ease 0.1s;
}

.portfolio-overlay p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    transform: translateY(10px);
    transition: transform 0.3s ease 0.2s;
}

.portfolio-item:hover .portfolio-overlay h4,
.portfolio-item:hover .portfolio-overlay p {
    transform: translateY(0);
}

.portfolio-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.portfolio-tags span {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    transform: translateY(15px);
    opacity: 0;
    transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-tags span {
    transform: translateY(0);
    opacity: 1;
}

.portfolio-item:hover .portfolio-tags span:nth-child(1) {
    transition-delay: 0.3s;
}

.portfolio-item:hover .portfolio-tags span:nth-child(2) {
    transition-delay: 0.4s;
}

.portfolio-item:hover .portfolio-tags span:nth-child(3) {
    transition-delay: 0.5s;
}

.portfolio-link {
    width: 50px;
    height: 50px;
    background: #6366f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.portfolio-link:hover {
    background: #ffd700;
    color: #333;
    transform: scale(1.1);
}

/* Contact Section */
.contact {
    padding: 100px 0;
    background: white;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info h3 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: #64748b;
}

.contact-item i {
    width: 20px;
    color: #6366f1;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: #6366f1;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #ffd700;
    color: #333;
    transform: translateY(-3px);
}

.contact-form {
    background: #f8fafc;
    padding: 2.5rem;
    border-radius: 15px;
}

.form-group {
    position: relative;
    margin-bottom: 2rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #6366f1;
}

.form-group label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #64748b;
    transition: all 0.3s ease;
    pointer-events: none;
}

.form-group input:focus + label,
.form-group input:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label {
    top: -10px;
    left: 10px;
    font-size: 0.8rem;
    color: #6366f1;
    background: white;
    padding: 0 5px;
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

/* Footer */
.footer {
    background: #1e293b;
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: #ffd700;
}

.footer-section p {
    color: #94a3b8;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    padding: 0.2rem 0;
}

.footer-section ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ffd700, #6366f1);
    transition: width 0.3s ease;
}

.footer-section ul li a:hover {
    color: #ffd700;
    transform: translateX(5px);
}

.footer-section ul li a:hover::before {
    width: 100%;
}

/* Special styling for animation service links */
.footer-section ul li a[onclick] {
    font-weight: 500;
    position: relative;
}

.footer-section ul li a[onclick]:hover {
    color: #6366f1;
    transform: translateX(8px);
}

.footer-section ul li a[onclick]::after {
    content: '→';
    opacity: 0;
    margin-left: 5px;
    transition: opacity 0.3s ease;
}

.footer-section ul li a[onclick]:hover::after {
    opacity: 1;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #334155;
    color: #94a3b8;
}

/* 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 bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 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 float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Duplicate pulse keyframe removed - using the first definition at line 33 */

@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(110px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(110px) rotate(-360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .header-contact .contact-links {
        gap: 0.5rem;
    }
    
    .whatsapp-link span,
    .phone-link span {
        display: none;
    }
    
    .whatsapp-link,
    .phone-link {
        padding: 8px;
        min-width: 40px;
        justify-content: center;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .services-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .portfolio-filter {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .service-card,
    .contact-form {
        padding: 1.5rem;
    }
    
    .hero-visual {
        height: 300px;
    }
    
    .element-1,
    .element-2,
    .element-3,
    .element-4 {
        width: 80px;
        height: 80px;
    }
}

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animate on scroll initial states */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Animation delay classes */
.animate-on-scroll[data-delay="0.1s"] { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="0.2s"] { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="0.3s"] { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="0.4s"] { transition-delay: 0.4s; }
.animate-on-scroll[data-delay="0.5s"] { transition-delay: 0.5s; }
.animate-on-scroll[data-delay="0.6s"] { transition-delay: 0.6s; }
.animate-on-scroll[data-delay="0.7s"] { transition-delay: 0.7s; }

/* Hover Animation Classes */
.hover-bounce {
    transition: all 0.3s ease;
}

.hover-bounce:hover {
    transform: translateY(-5px);
    animation: bounce 0.6s ease;
}

.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    border-color: #6366f1;
}

.hover-scale {
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-rotate {
    transition: all 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg) scale(1.1);
}

/* Animation Classes */
.animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
}

.animate-typing {
    overflow: hidden;
    border-right: 2px solid #6366f1;
    white-space: nowrap;
    animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

.animate-bounce-in {
    animation: bounceIn 0.8s ease;
}

.animate-slide-in {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInFromLeft 0.6s ease forwards;
}

.animate-slide-in[data-delay="0.1s"] { animation-delay: 0.1s; }
.animate-slide-in[data-delay="0.2s"] { animation-delay: 0.2s; }
.animate-slide-in[data-delay="0.3s"] { animation-delay: 0.3s; }
.animate-slide-in[data-delay="0.4s"] { animation-delay: 0.4s; }
.animate-slide-in[data-delay="0.5s"] { animation-delay: 0.5s; }

.animate-counter {
    font-weight: bold;
    color: #6366f1;
}

.animate-float {
    animation: floatUpDown 3s ease-in-out infinite;
}

.animate-float[data-delay="0.5s"] { animation-delay: 0.5s; }
.animate-float[data-delay="1s"] { animation-delay: 1s; }

/* Duplicate bounce keyframe removed - using the first definition at line 1201 */

@keyframes blink {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #6366f1;
    }
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Loading animation */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Duplicate spin keyframe removed - using the first definition at line 1534 */

/* Page-specific styles */
.page-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.page-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.title-line {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    animation: titleSlideUp 0.8s ease-out forwards;
}

.title-line:nth-child(2) {
    animation-delay: 0.2s;
}

.title-line:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes titleSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Code Animation Styles */
.enhanced-code-animation {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 500px;
    height: 400px;
    animation: codeEditorFloat 8s ease-in-out infinite;
}

.code-editor {
    background: #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.editor-header {
    background: #2d2d30;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #3e3e42;
}

.editor-tabs {
    display: flex;
    gap: 4px;
}

.tab {
    background: #3c3c3c;
    color: #cccccc;
    padding: 6px 12px;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab.active {
    background: #1e1e1e;
    color: #ffffff;
}

.editor-controls {
    display: flex;
    gap: 8px;
}

.control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
}

.control.minimize { background: #ffbd2e; }
.control.maximize { background: #28ca42; }
.control.close { background: #ff5f56; }

.editor-content {
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.line-numbers {
    background: #252526;
    color: #858585;
    padding: 16px 8px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 20px;
    text-align: right;
    min-width: 40px;
    border-right: 1px solid #3e3e42;
    user-select: none;
}

.code-content {
    flex: 1;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 20px;
    color: #d4d4d4;
    position: relative;
}

.code-line.typing {
    opacity: 0;
    animation: typeWriter 1s ease-out forwards;
    animation-delay: var(--delay, 0s);
}

.code-line.typing[data-delay="0.5s"] { animation-delay: 0.5s; }
.code-line.typing[data-delay="1s"] { animation-delay: 1s; }
.code-line.typing[data-delay="1.5s"] { animation-delay: 1.5s; }
.code-line.typing[data-delay="2s"] { animation-delay: 2s; }
.code-line.typing[data-delay="2.5s"] { animation-delay: 2.5s; }
.code-line.typing[data-delay="3s"] { animation-delay: 3s; }
.code-line.typing[data-delay="3.5s"] { animation-delay: 3.5s; }
.code-line.typing[data-delay="4s"] { animation-delay: 4s; }
.code-line.typing[data-delay="4.5s"] { animation-delay: 4.5s; }
.code-line.typing[data-delay="5s"] { animation-delay: 5s; }
.code-line.typing[data-delay="5.5s"] { animation-delay: 5.5s; }
.code-line.typing[data-delay="6s"] { animation-delay: 6s; }

.cursor-blink {
    position: absolute;
    width: 2px;
    height: 20px;
    background: #ffffff;
    animation: blink 1s infinite, moveCursor 12s linear infinite;
    top: 16px;
    left: 16px;
}

/* Syntax Highlighting */
.keyword { color: #569cd6; font-weight: bold; }
.function { color: #dcdcaa; }
.variable { color: #9cdcfe; }
.string { color: #ce9178; }
.boolean { color: #569cd6; }
.comment { color: #6a9955; font-style: italic; }

/* Code Particles */
.code-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.particle-code {
    position: absolute;
    color: #4fc3f7;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    opacity: 0.7;
    animation: floatParticle 8s linear infinite;
}

.particle-code:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle-code:nth-child(2) { left: 20%; animation-delay: 1s; }
.particle-code:nth-child(3) { left: 30%; animation-delay: 2s; }
.particle-code:nth-child(4) { left: 40%; animation-delay: 3s; }
.particle-code:nth-child(5) { left: 50%; animation-delay: 4s; }
.particle-code:nth-child(6) { left: 60%; animation-delay: 5s; }
.particle-code:nth-child(7) { left: 70%; animation-delay: 6s; }
.particle-code:nth-child(8) { left: 80%; animation-delay: 7s; }

/* Syntax Effects */
.syntax-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.highlight-wave {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
    animation: highlightSweep 4s ease-in-out infinite;
    top: 50%;
}

.bracket-matcher {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #ffeb3b;
    border-radius: 4px;
    opacity: 0;
    animation: bracketMatch 3s ease-in-out infinite;
    top: 30%;
    left: 60%;
}

.error-indicator {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #f44336;
    border-radius: 50%;
    animation: errorBlink 2s ease-in-out infinite;
    top: 70%;
    left: 40%;
}

/* Keyframes */
@keyframes codeEditorFloat {
    0%, 100% { transform: translateY(-50%) translateX(0) rotateY(0deg); }
    25% { transform: translateY(-55%) translateX(5px) rotateY(2deg); }
    50% { transform: translateY(-45%) translateX(-5px) rotateY(-1deg); }
    75% { transform: translateY(-55%) translateX(5px) rotateY(1deg); }
}

@keyframes typeWriter {
    from { 
        opacity: 0; 
        transform: translateX(-10px);
        filter: blur(2px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes moveCursor {
    0% { top: 16px; left: 16px; }
    10% { top: 36px; left: 200px; }
    20% { top: 56px; left: 250px; }
    30% { top: 76px; left: 180px; }
    40% { top: 96px; left: 16px; }
    50% { top: 116px; left: 120px; }
    60% { top: 136px; left: 200px; }
    70% { top: 156px; left: 80px; }
    80% { top: 176px; left: 160px; }
    90% { top: 196px; left: 100px; }
    100% { top: 216px; left: 140px; }
}

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes highlightSweep {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: -100%; }
}

@keyframes bracketMatch {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes errorBlink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Advanced App Animation Styles */
.advanced-app-animation {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    animation: deviceFloat 10s ease-in-out infinite;
}

.app-device {
    width: 320px;
    height: 640px;
    position: relative;
}

.device-frame {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border-radius: 40px;
    padding: 20px;
    box-shadow: 
        0 0 0 2px #1a252f,
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    position: relative;
}

.device-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.device-button {
    position: absolute;
    right: -3px;
    top: 120px;
    width: 6px;
    height: 60px;
    background: #1a252f;
    border-radius: 3px;
}

.device-speaker {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: #1a252f;
    border-radius: 2px;
}

/* App Interface */
.app-interface {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Status Bar */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.1);
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.signal-bars {
    display: flex;
    gap: 2px;
    align-items: end;
}

.signal-bars .bar {
    width: 3px;
    background: white;
    border-radius: 1px;
}

.signal-bars .bar:nth-child(1) { height: 4px; }
.signal-bars .bar:nth-child(2) { height: 6px; }
.signal-bars .bar:nth-child(3) { height: 8px; }
.signal-bars .bar:nth-child(4) { height: 10px; }

.battery {
    width: 24px;
    height: 12px;
    border: 1px solid white;
    border-radius: 2px;
    position: relative;
}

.battery::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 3px;
    width: 2px;
    height: 6px;
    background: white;
    border-radius: 0 1px 1px 0;
}

.battery-level {
    width: 80%;
    height: 100%;
    background: white;
    border-radius: 1px;
    animation: batteryPulse 3s ease-in-out infinite;
}

/* App Header */
.app-header-advanced {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content h2 {
    margin: 0;
    color: #2c3e50;
    font-size: 20px;
    font-weight: 700;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.notification-badge {
    background: #e74c3c;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    animation: badgePulse 2s ease-in-out infinite;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(45deg, #3498db, #2980b9);
    border-radius: 50%;
    border: 2px solid white;
}

/* Main Content */
.app-main-content {
    flex: 1;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    overflow-y: auto;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: statCardSlide 1s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.stat-card.revenue { animation-delay: 0.2s; }
.stat-card.users { animation-delay: 0.4s; }
.stat-card.orders { animation-delay: 0.6s; }

.stat-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(102, 126, 234, 0.1);
}

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
}

.stat-change {
    font-size: 11px;
    font-weight: 600;
}

.stat-change.positive { color: #27ae60; }
.stat-change.negative { color: #e74c3c; }

/* Chart Section */
.chart-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 16px;
}

.chart-controls {
    display: flex;
    gap: 8px;
}

.chart-btn {
    padding: 6px 12px;
    border: 1px solid #bdc3c7;
    background: white;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chart-btn.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.interactive-chart {
    position: relative;
    height: 200px;
}

.chart-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.grid-line {
    height: 1px;
    background: #ecf0f1;
    width: 100%;
}

.chart-data {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 0 10px;
}

.data-point {
    flex: 1;
    background: linear-gradient(to top, #3498db, #5dade2);
    border-radius: 4px 4px 0 0;
    height: var(--height);
    animation: chartBarGrow 1.5s ease-out forwards;
    transform: scaleY(0);
    transform-origin: bottom;
    cursor: pointer;
    transition: all 0.3s ease;
}

.data-point:hover {
    background: linear-gradient(to top, #2980b9, #3498db);
    transform: scaleY(1) scaleX(1.1);
}

.data-point:nth-child(1) { animation-delay: 0.1s; }
.data-point:nth-child(2) { animation-delay: 0.2s; }
.data-point:nth-child(3) { animation-delay: 0.3s; }
.data-point:nth-child(4) { animation-delay: 0.4s; }
.data-point:nth-child(5) { animation-delay: 0.5s; }
.data-point:nth-child(6) { animation-delay: 0.6s; }
.data-point:nth-child(7) { animation-delay: 0.7s; }

.chart-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.chart-tooltip {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    opacity: 0;
    animation: tooltipFade 2s ease-in-out 2s forwards;
}

/* Activity Feed */
.activity-feed {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.activity-feed h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 16px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: activitySlide 0.8s ease-out forwards;
    opacity: 0;
    transform: translateX(-20px);
}

.activity-item:nth-child(1) { animation-delay: 1s; }
.activity-item:nth-child(2) { animation-delay: 1.2s; }
.activity-item:nth-child(3) { animation-delay: 1.4s; }

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-dot.new { background: #e74c3c; animation: dotPulse 2s ease-in-out infinite; }
.activity-dot.processing { background: #f39c12; }
.activity-dot.completed { background: #27ae60; }

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 14px;
    color: #2c3e50;
    margin-bottom: 2px;
}

.activity-time {
    font-size: 12px;
    color: #7f8c8d;
}

/* Bottom Navigation */
.bottom-nav {
    display: flex;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-item.active .nav-icon {
    transform: scale(1.2);
}

.nav-item.active .nav-label {
    color: #3498db;
    font-weight: 600;
}

.nav-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.nav-label {
    font-size: 10px;
    color: #7f8c8d;
    transition: all 0.3s ease;
}

/* Floating UI Elements */
.floating-ui-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.ui-element {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    animation: floatElement 6s ease-in-out infinite;
}

.ui-element.notification {
    top: 15%;
    left: -100px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation-delay: 2s;
}

.ui-element.popup {
    top: 60%;
    right: -120px;
    animation-delay: 4s;
}

.ui-element.loading {
    bottom: 25%;
    left: -100px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation-delay: 6s;
}

.notification-icon {
    font-size: 16px;
}

.notification-text {
    font-size: 12px;
    color: #2c3e50;
}

.popup-content h4 {
    margin: 0 0 4px 0;
    color: #27ae60;
    font-size: 14px;
}

.popup-content p {
    margin: 0;
    font-size: 12px;
    color: #7f8c8d;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ecf0f1;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 12px;
    color: #2c3e50;
}

/* Keyframes */
@keyframes deviceFloat {
    0%, 100% { transform: translateY(-50%) rotateY(0deg) rotateX(0deg); }
    25% { transform: translateY(-52%) rotateY(2deg) rotateX(1deg); }
    50% { transform: translateY(-48%) rotateY(-1deg) rotateX(-1deg); }
    75% { transform: translateY(-52%) rotateY(1deg) rotateX(1deg); }
}

@keyframes batteryPulse {
    0%, 100% { width: 80%; }
    50% { width: 60%; }
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes statCardSlide {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chartBarGrow {
    to { transform: scaleY(1); }
}

@keyframes tooltipFade {
    0%, 80% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes activitySlide {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes floatElement {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0; }
    10%, 90% { opacity: 1; }
    50% { transform: translateX(150px) translateY(-10px); }
}

/* Duplicate spin keyframe removed - using the first definition at line 1534 */

/* Sophisticated Motion Graphics Styles */
.sophisticated-motion-graphics {
    position: relative;
    width: 100%;
    height: 500px;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Advanced Particle System */
.particle-system {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle-emitter {
    position: relative;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.particle[data-type="fire"] {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ff6b35 0%, #f7931e 50%, #ff4757 100%);
    box-shadow: 0 0 20px #ff6b35;
    animation: fireParticle 3s ease-in-out infinite;
}

.particle[data-type="spark"] {
    width: 3px;
    height: 3px;
    background: #ffd700;
    box-shadow: 0 0 15px #ffd700;
    animation: sparkParticle 2s linear infinite;
}

.particle[data-type="smoke"] {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(200, 200, 200, 0.6) 0%, rgba(150, 150, 150, 0.2) 100%);
    animation: smokeParticle 4s ease-out infinite;
}

.particle[data-type="energy"] {
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #00d4ff 0%, #0099cc 100%);
    box-shadow: 0 0 25px #00d4ff;
    animation: energyParticle 2.5s ease-in-out infinite;
}

.particle[data-type="magic"] {
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #e056fd 0%, #686de0 100%);
    box-shadow: 0 0 20px #e056fd;
    animation: magicParticle 3.5s ease-in-out infinite;
}

/* Particle Positioning */
.particle:nth-child(1) { left: 10%; top: 80%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; top: 85%; animation-delay: 0.3s; }
.particle:nth-child(3) { left: 30%; top: 90%; animation-delay: 0.6s; }
.particle:nth-child(4) { left: 40%; top: 75%; animation-delay: 0.9s; }
.particle:nth-child(5) { left: 50%; top: 95%; animation-delay: 1.2s; }
.particle:nth-child(6) { left: 60%; top: 80%; animation-delay: 1.5s; }
.particle:nth-child(7) { left: 70%; top: 85%; animation-delay: 1.8s; }
.particle:nth-child(8) { left: 80%; top: 90%; animation-delay: 2.1s; }
.particle:nth-child(9) { left: 90%; top: 75%; animation-delay: 2.4s; }
.particle:nth-child(10) { left: 15%; top: 95%; animation-delay: 2.7s; }
.particle:nth-child(11) { left: 25%; top: 80%; animation-delay: 3s; }
.particle:nth-child(12) { left: 35%; top: 85%; animation-delay: 3.3s; }
.particle:nth-child(13) { left: 45%; top: 90%; animation-delay: 3.6s; }
.particle:nth-child(14) { left: 55%; top: 75%; animation-delay: 3.9s; }
.particle:nth-child(15) { left: 65%; top: 95%; animation-delay: 4.2s; }

/* Pattern Cell Animation Delays */
.pattern-cell:nth-child(1) { animation-delay: 0s; }
.pattern-cell:nth-child(2) { animation-delay: 0.1s; }
.pattern-cell:nth-child(3) { animation-delay: 0.2s; }
.pattern-cell:nth-child(4) { animation-delay: 0.3s; }
.pattern-cell:nth-child(5) { animation-delay: 0.4s; }
.pattern-cell:nth-child(6) { animation-delay: 0.5s; }
.pattern-cell:nth-child(7) { animation-delay: 0.6s; }
.pattern-cell:nth-child(8) { animation-delay: 0.7s; }
.pattern-cell:nth-child(9) { animation-delay: 0.8s; }
.pattern-cell:nth-child(10) { animation-delay: 0.9s; }
.pattern-cell:nth-child(11) { animation-delay: 1s; }
.pattern-cell:nth-child(12) { animation-delay: 1.1s; }

/* Morphing Shapes */
.morphing-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.morph-container {
    width: 120px;
    height: 120px;
}

.morphing-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
}

.morph-path {
    fill: none;
    stroke: #00d4ff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.morph-path.secondary {
    stroke: #e056fd;
    filter: drop-shadow(0 0 15px rgba(224, 86, 253, 0.5));
}

/* Dynamic Wave System */
.wave-system {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.wave-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.wave {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
    border-radius: 50% 50% 0 0;
}

.wave-1 {
    animation: waveMove 8s ease-in-out infinite;
    animation-delay: 0s;
}

.wave-2 {
    animation: waveMove 6s ease-in-out infinite reverse;
    animation-delay: -2s;
    background: linear-gradient(90deg, transparent, rgba(224, 86, 253, 0.2), transparent);
}

.wave-3 {
    animation: waveMove 10s ease-in-out infinite;
    animation-delay: -4s;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.2), transparent);
}

.wave-4 {
    animation: waveMove 7s ease-in-out infinite reverse;
    animation-delay: -6s;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
}

/* Energy Orbs */
.energy-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.orb {
    position: absolute;
    width: 80px;
    height: 80px;
}

.orb-1 {
    top: 15%;
    left: 15%;
    animation: orbFloat 6s ease-in-out infinite;
}

.orb-2 {
    top: 60%;
    right: 20%;
    animation: orbFloat 8s ease-in-out infinite reverse;
    animation-delay: -2s;
}

.orb-3 {
    bottom: 25%;
    left: 60%;
    animation: orbFloat 7s ease-in-out infinite;
    animation-delay: -4s;
}

.orb-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #00d4ff 0%, #0099cc 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 30px #00d4ff;
    animation: coreGlow 2s ease-in-out infinite alternate;
}

.orb-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ring-1 {
    width: 40px;
    height: 40px;
    animation: ringPulse 3s ease-in-out infinite;
}

.ring-2 {
    width: 60px;
    height: 60px;
    animation: ringPulse 3s ease-in-out infinite;
    animation-delay: -1s;
}

.ring-3 {
    width: 80px;
    height: 80px;
    animation: ringPulse 3s ease-in-out infinite;
    animation-delay: -2s;
}

/* Geometric Patterns */
.geometric-patterns {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 200px;
    height: 200px;
}

.pattern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    height: 100%;
}

.pattern-cell {
    background: linear-gradient(45deg, #00d4ff, #e056fd);
    border-radius: 4px;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    animation: patternReveal 2s ease-out infinite;
}

/* Fluid Dynamics */
.fluid-dynamics {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fluid-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.blob-1 {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    top: 10%;
    right: 10%;
    animation: blobMove 12s ease-in-out infinite;
}

.blob-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(224, 86, 253, 0.2) 0%, transparent 70%);
    bottom: 10%;
    left: 10%;
    animation: blobMove 15s ease-in-out infinite reverse;
    animation-delay: -5s;
}

.blob-3 {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.3) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    animation: blobMove 10s ease-in-out infinite;
    animation-delay: -8s;
}

/* Light Rays */
.light-rays {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ray {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 215, 0, 0.8) 50%, transparent 100%);
    transform-origin: bottom center;
}

.ray-1 {
    left: 20%;
    animation: rayRotate 8s linear infinite;
}

.ray-2 {
    left: 40%;
    animation: rayRotate 10s linear infinite reverse;
    animation-delay: -2s;
}

.ray-3 {
    left: 60%;
    animation: rayRotate 12s linear infinite;
    animation-delay: -4s;
}

.ray-4 {
    left: 80%;
    animation: rayRotate 9s linear infinite reverse;
    animation-delay: -6s;
}

.ray-5 {
    left: 50%;
    animation: rayRotate 11s linear infinite;
    animation-delay: -8s;
}

/* Motion Text */
.motion-text {
    position: relative;
    text-align: center;
    z-index: 10;
}

.text-line {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    margin: 10px 0;
    opacity: 0;
    transform: translateY(50px);
    animation: textReveal 1s ease-out forwards;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.text-line:nth-child(1) { animation-delay: 0.5s; }
.text-line:nth-child(2) { animation-delay: 1s; }
.text-line:nth-child(3) { animation-delay: 1.5s; }

/* Keyframes */
@keyframes fireParticle {
    0% { transform: translateY(100px) scale(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

@keyframes sparkParticle {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(100px, -100px) scale(1); opacity: 0; }
}

@keyframes smokeParticle {
    0% { transform: translateY(50px) scale(0.5); opacity: 0.8; }
    100% { transform: translateY(-150px) scale(2); opacity: 0; }
}

@keyframes energyParticle {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-80px, -120px) scale(1.5); opacity: 0; }
}

@keyframes magicParticle {
    0% { transform: rotate(0deg) translateX(0) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(360deg) translateX(100px) scale(1); opacity: 0; }
}

@keyframes waveMove {
    0%, 100% { transform: translateX(-50%) scaleY(1); }
    50% { transform: translateX(-25%) scaleY(1.2); }
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -30px) scale(1.1); }
    66% { transform: translate(-15px, 20px) scale(0.9); }
}

@keyframes coreGlow {
    0% { box-shadow: 0 0 30px #00d4ff; }
    100% { box-shadow: 0 0 50px #00d4ff, 0 0 80px rgba(0, 212, 255, 0.5); }
}

@keyframes ringPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

@keyframes patternReveal {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
    100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

@keyframes blobMove {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -30px) scale(1.2); }
    50% { transform: translate(-30px, 40px) scale(0.8); }
    75% { transform: translate(40px, 20px) scale(1.1); }
}

@keyframes rayRotate {
    0% { transform: rotate(0deg); opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0.3; }
}

@keyframes textReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dynamic Team Collaboration Styles */
.dynamic-team-collaboration {
    position: relative;
    width: 100%;
    height: 600px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

/* Network Visualization */
.network-visualization {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.network-svg {
    width: 100%;
    height: 100%;
}

.connection-line {
    stroke: #00d4ff;
    stroke-width: 2;
    opacity: 0.6;
    animation: connectionPulse 3s ease-in-out infinite;
}

.connection-line[data-flow="data-1"] { animation-delay: 0s; }
.connection-line[data-flow="data-2"] { animation-delay: 0.5s; }
.connection-line[data-flow="data-3"] { animation-delay: 1s; }
.connection-line[data-flow="data-4"] { animation-delay: 1.5s; }
.connection-line[data-flow="data-5"] { animation-delay: 2s; }
.connection-line[data-flow="data-6"] { animation-delay: 2.5s; }
.connection-line[data-flow="data-7"] { animation-delay: 3s; }

.data-particle {
    fill: #ff6b6b;
    filter: drop-shadow(0 0 6px #ff6b6b);
}

/* Interactive Team Members Network */
.team-members-network {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.team-node {
    position: absolute;
    width: 120px;
    height: 120px;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: nodeFloat 4s ease-in-out infinite;
}

.team-node:hover {
    transform: scale(1.1) !important;
    z-index: 10;
}

.team-node:hover .node-info {
    opacity: 1;
    transform: translateY(0);
}

.team-node[data-role="frontend"] { animation-delay: 0s; }
.team-node[data-role="backend"] { animation-delay: 0.8s; }
.team-node[data-role="designer"] { animation-delay: 1.6s; }
.team-node[data-role="devops"] { animation-delay: 2.4s; }
.team-node[data-role="qa"] { animation-delay: 3.2s; }
.team-node[data-role="manager"] { animation-delay: 4s; }

.node-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(45deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.team-node[data-role="frontend"] .node-avatar {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
}

.team-node[data-role="backend"] .node-avatar {
    background: linear-gradient(45deg, #4ecdc4, #44bd87);
}

.team-node[data-role="designer"] .node-avatar {
    background: linear-gradient(45deg, #a55eea, #8854d0);
}

.team-node[data-role="devops"] .node-avatar {
    background: linear-gradient(45deg, #fd79a8, #e84393);
}

.team-node[data-role="qa"] .node-avatar {
    background: linear-gradient(45deg, #fdcb6e, #e17055);
}

.team-node[data-role="manager"] .node-avatar {
    background: linear-gradient(45deg, #74b9ff, #0984e3);
}

.avatar-icon {
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.node-pulse {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid #00d4ff;
    border-radius: 50%;
    animation: nodePulse 2s ease-in-out infinite;
}

.central-pulse {
    border-color: #ffd700;
    animation: centralPulse 1.5s ease-in-out infinite;
}

.node-info {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.9);
    padding: 15px;
    border-radius: 10px;
    min-width: 150px;
    opacity: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.node-info h4 {
    color: white;
    margin: 0 0 10px 0;
    font-size: 12px;
    text-align: center;
}

.skill-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.skill-bar {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.skill-bar::before {
    content: attr(data-skill);
    position: absolute;
    top: -18px;
    left: 0;
    font-size: 10px;
    color: #ccc;
}

.skill-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #0099cc);
    border-radius: 2px;
    animation: skillFill 2s ease-out forwards;
}

.skill-bar[data-level="90"]::after { width: 90%; }
.skill-bar[data-level="95"]::after { width: 95%; }
.skill-bar[data-level="88"]::after { width: 88%; }
.skill-bar[data-level="92"]::after { width: 92%; }
.skill-bar[data-level="87"]::after { width: 87%; }
.skill-bar[data-level="94"]::after { width: 94%; }
.skill-bar[data-level="96"]::after { width: 96%; }
.skill-bar[data-level="91"]::after { width: 91%; }
.skill-bar[data-level="89"]::after { width: 89%; }
.skill-bar[data-level="93"]::after { width: 93%; }
.skill-bar[data-level="86"]::after { width: 86%; }
.skill-bar[data-level="97"]::after { width: 97%; }

.data-streams {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.stream {
    position: absolute;
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, transparent, #00d4ff, transparent);
    animation: streamFlow 2s ease-in-out infinite;
}

.stream-1 { top: -10px; left: 20%; animation-delay: 0s; }
.stream-2 { top: -10px; right: 20%; animation-delay: 0.5s; }
.stream-3 { bottom: -10px; left: 30%; animation-delay: 1s; }
.stream-4 { bottom: -10px; right: 30%; animation-delay: 1.5s; }
.stream-5 { top: -10px; left: 50%; animation-delay: 2s; }
.stream-6 { bottom: -10px; right: 50%; animation-delay: 2.5s; }
.stream-7 { top: -10px; left: 40%; animation-delay: 3s; }
.stream-8 { bottom: -10px; right: 40%; animation-delay: 3.5s; }

.central-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    pointer-events: none;
}

.hub-ring {
    position: absolute;
    border: 1px solid #ffd700;
    border-radius: 50%;
    animation: hubExpand 3s ease-in-out infinite;
}

.ring-1 {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;
    animation-delay: 0s;
}

.ring-2 {
    width: 90px;
    height: 90px;
    top: 5px;
    left: 5px;
    animation-delay: 1s;
}

.ring-3 {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    animation-delay: 2s;
}

/* Collaboration Dashboard */
.collaboration-dashboard {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: 120px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 20px;
    padding: 15px;
    z-index: 3;
}

.dashboard-panel {
    flex: 1;
}

.dashboard-panel h3 {
    color: white;
    margin: 0 0 10px 0;
    font-size: 14px;
}

.activity-metrics {
    display: flex;
    gap: 15px;
}

.metric {
    flex: 1;
    text-align: center;
}

.metric-value {
    color: #00d4ff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    animation: countUp 2s ease-out forwards;
}

.metric-label {
    color: #ccc;
    font-size: 10px;
    margin-bottom: 5px;
}

.metric-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #0099cc);
    border-radius: 2px;
    animation: barFill 2s ease-out forwards;
    transform-origin: left;
}

.communication-flow {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.message-bubble {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 15px;
    border-left: 3px solid #00d4ff;
    opacity: 0;
    transform: translateX(50px);
    animation: messageSlide 0.5s ease-out forwards;
}

.message-bubble[data-delay="0s"] { animation-delay: 1s; }
.message-bubble[data-delay="2s"] { animation-delay: 3s; }
.message-bubble[data-delay="4s"] { animation-delay: 5s; }

.bubble-content {
    color: white;
    font-size: 11px;
    margin-bottom: 2px;
}

.bubble-author {
    color: #00d4ff;
    font-size: 9px;
    text-align: right;
}

/* Keyframes */
@keyframes connectionPulse {
    0%, 100% { opacity: 0.3; stroke-width: 1; }
    50% { opacity: 0.8; stroke-width: 3; }
}

@keyframes nodeFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes nodePulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes centralPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes skillFill {
    0% { width: 0; }
    100% { width: var(--skill-width, 0%); }
}

@keyframes streamFlow {
    0% { opacity: 0; transform: translateY(-20px); }
    50% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

@keyframes hubExpand {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes countUp {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes barFill {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

@keyframes messageSlide {
    0% { opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Video Container Styles */
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 2;
}

/* Service Cards */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.service-icon {
    font-size: 3rem;
    color: #6c5ce7;
    margin-bottom: 1rem;
    display: block;
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2d3436;
}

.service-card p {
    color: #636e72;
    line-height: 1.6;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.portfolio-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.portfolio-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    position: relative;
    overflow: hidden;
}

.portfolio-image::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.portfolio-content {
    padding: 1.5rem;
}

.portfolio-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3436;
}

.portfolio-content p {
    color: #636e72;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Technology Tags */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.tech-item {
    background: white;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tech-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tech-item:hover::before {
    transform: scaleX(1);
}

.tech-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.tech-icon {
    font-size: 2rem;
    color: #6c5ce7;
    margin-bottom: 0.5rem;
}

.tech-name {
    font-weight: 600;
    color: #2d3436;
    font-size: 0.9rem;
}

/* Process Timeline */
.process-timeline {
    position: relative;
    margin: 3rem 0;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #6c5ce7, #a29bfe);
    transform: translateX(-50%);
}

.process-step {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
}

.process-step:nth-child(even) {
    flex-direction: row-reverse;
}

.process-content {
    flex: 1;
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin: 0 2rem;
    position: relative;
}

.process-content::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    transform: translateY(-50%);
}

.process-step:nth-child(odd) .process-content::before {
    right: -20px;
    border-left-color: white;
}

.process-step:nth-child(even) .process-content::before {
    left: -20px;
    border-right-color: white;
}

.process-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #6c5ce7, #a29bfe);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
    z-index: 2;
    animation: pulse 2s ease-in-out infinite;
}

.process-step h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2d3436;
}

.process-step p {
    color: #636e72;
    line-height: 1.6;
}

/* Team Member Cards */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.team-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe, #ff6b6b);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.team-card:hover::before {
    transform: scaleX(1);
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.team-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(45deg, #6c5ce7, #a29bfe);
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.team-avatar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: avatarShine 3s ease-in-out infinite;
}

@keyframes avatarShine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.team-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2d3436;
}

.team-role {
    color: #6c5ce7;
    font-weight: 500;
    margin-bottom: 1rem;
}

.team-bio {
    color: #636e72;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Responsive Design for New Elements */
@media (max-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
    
    .services-grid,
    .portfolio-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    
    .process-timeline::before {
        left: 30px;
    }
    
    .process-step {
        flex-direction: column !important;
        align-items: flex-start;
    }
    
    .process-content {
        margin-left: 60px;
        margin-right: 0;
    }
    
    .process-content::before {
        left: -20px !important;
        border-right-color: white !important;
        border-left-color: transparent !important;
    }
    
    .motion-animation,
    .team-animation {
        width: 90%;
        height: 250px;
    }
    
    .app-mockup {
         width: 300px;
         height: 200px;
     }
 }

/* Enhanced Home Page Particle System */
.particle-system {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.particle-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #fff, transparent);
    border-radius: 50%;
    animation: particleFloat var(--duration, 10s) var(--delay, 0s) infinite linear;
    opacity: 0;
}

.layer-1 .particle {
    background: radial-gradient(circle, #6c5ce7, transparent);
    box-shadow: 0 0 10px #6c5ce7;
}

.layer-2 .particle {
    background: radial-gradient(circle, #a29bfe, transparent);
    box-shadow: 0 0 8px #a29bfe;
    width: 6px;
    height: 6px;
}

.layer-3 .particle {
    background: radial-gradient(circle, #fd79a8, transparent);
    box-shadow: 0 0 12px #fd79a8;
    width: 3px;
    height: 3px;
}

.layer-1 .particle:nth-child(1) { left: 10%; }
.layer-1 .particle:nth-child(2) { left: 25%; }
.layer-1 .particle:nth-child(3) { left: 50%; }
.layer-1 .particle:nth-child(4) { left: 75%; }
.layer-1 .particle:nth-child(5) { left: 90%; }

.layer-2 .particle:nth-child(1) { left: 15%; }
.layer-2 .particle:nth-child(2) { left: 60%; }
.layer-2 .particle:nth-child(3) { left: 85%; }

.layer-3 .particle:nth-child(1) { left: 30%; }
.layer-3 .particle:nth-child(2) { left: 70%; }

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) translateX(10px) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateY(50vh) translateX(-20px) scale(1.2);
    }
    90% {
        opacity: 0.3;
        transform: translateY(10vh) translateX(30px) scale(0.8);
    }
    100% {
        transform: translateY(-10vh) translateX(0) scale(0);
        opacity: 0;
    }
}

/* 3D Geometric Shapes */
.geometric-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    z-index: 4;
}

.shape-3d {
    position: absolute;
    transform-style: preserve-3d;
}

.cube {
    width: 60px;
    height: 60px;
    top: 20%;
    left: 15%;
    animation: cubeRotate 20s infinite linear;
}

.cube .face {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(108, 92, 231, 0.3);
    border: 2px solid #6c5ce7;
    backdrop-filter: blur(5px);
}

.cube .front { transform: rotateY(0deg) translateZ(30px); }
.cube .back { transform: rotateY(180deg) translateZ(30px); }
.cube .right { transform: rotateY(90deg) translateZ(30px); }
.cube .left { transform: rotateY(-90deg) translateZ(30px); }
.cube .top { transform: rotateX(90deg) translateZ(30px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(30px); }

.pyramid {
    width: 80px;
    height: 80px;
    top: 60%;
    right: 20%;
    animation: pyramidSpin 15s infinite linear;
}

.pyramid .face {
    position: absolute;
    background: rgba(162, 155, 254, 0.3);
    border: 2px solid #a29bfe;
    backdrop-filter: blur(5px);
}

.pyramid .base {
    width: 80px;
    height: 80px;
    transform: rotateX(90deg) translateZ(0px);
}

.pyramid .side1 {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 60px solid rgba(162, 155, 254, 0.3);
    transform: rotateY(0deg) rotateX(45deg) translateZ(40px);
}

.octahedron {
    width: 50px;
    height: 50px;
    top: 40%;
    left: 70%;
    animation: octahedronFloat 12s infinite ease-in-out;
}

.octahedron .face {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 35px solid rgba(253, 121, 168, 0.3);
    border-top: 2px solid #fd79a8;
}

@keyframes cubeRotate {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes pyramidSpin {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    50% { transform: rotateY(180deg) rotateX(180deg); }
    100% { transform: rotateY(360deg) rotateX(360deg); }
}

@keyframes octahedronFloat {
    0%, 100% { transform: translateY(0px) rotateY(0deg); }
    25% { transform: translateY(-20px) rotateY(90deg); }
    50% { transform: translateY(-40px) rotateY(180deg); }
    75% { transform: translateY(-20px) rotateY(270deg); }
}

/* Dynamic Light Rays */
.light-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

.ray {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 20%, 
        rgba(108, 92, 231, 0.3) 50%, 
        rgba(255, 255, 255, 0.1) 80%, 
        transparent 100%);
    animation: rayMove 8s infinite linear;
    transform-origin: top center;
}

.ray-1 {
    left: 10%;
    animation-delay: 0s;
    transform: rotate(15deg);
}

.ray-2 {
    left: 30%;
    animation-delay: 1.6s;
    transform: rotate(-10deg);
}

.ray-3 {
    left: 50%;
    animation-delay: 3.2s;
    transform: rotate(5deg);
}

.ray-4 {
    left: 70%;
    animation-delay: 4.8s;
    transform: rotate(-20deg);
}

.ray-5 {
    left: 90%;
    animation-delay: 6.4s;
    transform: rotate(12deg);
}

@keyframes rayMove {
    0% {
        opacity: 0;
        transform: translateY(-100%) rotate(var(--rotation, 0deg)) scaleY(0);
    }
    20% {
        opacity: 0.6;
        transform: translateY(-50%) rotate(var(--rotation, 0deg)) scaleY(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(0%) rotate(var(--rotation, 0deg)) scaleY(1);
    }
    80% {
        opacity: 0.6;
        transform: translateY(50%) rotate(var(--rotation, 0deg)) scaleY(0.5);
    }
    100% {
        opacity: 0;
        transform: translateY(100%) rotate(var(--rotation, 0deg)) scaleY(0);
    }
}

/* Enhanced Floating Elements */
.float-item.enhanced {
    position: absolute;
    font-size: 2.5rem;
    animation: enhancedFloat 6s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(108, 92, 231, 0.5));
    z-index: 5;
}

.float-item.enhanced:hover {
    transform: scale(1.3) rotate(15deg);
    filter: drop-shadow(0 0 20px rgba(108, 92, 231, 0.8));
}

.float-item.enhanced[data-tech="frontend"] {
    top: 15%;
    left: 20%;
    animation-delay: 0s;
}

.float-item.enhanced[data-tech="backend"] {
    top: 25%;
    right: 15%;
    animation-delay: 1s;
}

.float-item.enhanced[data-tech="cloud"] {
    top: 45%;
    left: 10%;
    animation-delay: 2s;
}

.float-item.enhanced[data-tech="devops"] {
    top: 35%;
    right: 25%;
    animation-delay: 3s;
}

.float-item.enhanced[data-tech="analytics"] {
    top: 65%;
    left: 30%;
    animation-delay: 4s;
}

.float-item.enhanced[data-tech="ai"] {
    top: 55%;
    right: 10%;
    animation-delay: 5s;
}

.float-item.enhanced[data-tech="mobile"] {
    top: 75%;
    left: 60%;
    animation-delay: 1.5s;
}

.float-item.enhanced[data-tech="security"] {
    top: 80%;
    right: 40%;
    animation-delay: 2.5s;
}

@keyframes enhancedFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        filter: drop-shadow(0 0 10px rgba(108, 92, 231, 0.5));
    }
    25% {
        transform: translateY(-15px) rotate(5deg) scale(1.05);
        filter: drop-shadow(0 0 15px rgba(162, 155, 254, 0.6));
    }
    50% {
        transform: translateY(-25px) rotate(-3deg) scale(1.1);
        filter: drop-shadow(0 0 20px rgba(253, 121, 168, 0.7));
    }
    75% {
        transform: translateY(-15px) rotate(8deg) scale(1.05);
        filter: drop-shadow(0 0 15px rgba(162, 155, 254, 0.6));
    }
}

/* Interactive Network Nodes */
.network-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.node {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #6c5ce7, #a29bfe);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.8);
    animation: nodePulse 3s ease-in-out infinite;
    cursor: pointer;
}

.node:hover {
    transform: scale(1.5);
    box-shadow: 0 0 25px rgba(108, 92, 231, 1);
}

.node-1 { top: 20%; left: 10%; animation-delay: 0s; }
.node-2 { top: 30%; left: 30%; animation-delay: 0.3s; }
.node-3 { top: 50%; left: 20%; animation-delay: 0.6s; }
.node-4 { top: 40%; left: 50%; animation-delay: 0.9s; }
.node-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
.node-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
.node-7 { top: 80%; left: 80%; animation-delay: 1.8s; }
.node-8 { top: 85%; left: 60%; animation-delay: 2.1s; }

@keyframes nodePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(108, 92, 231, 0.8);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 25px rgba(108, 92, 231, 1);
    }
}

.connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.connection {
    stroke: rgba(108, 92, 231, 0.4);
    stroke-width: 1;
    stroke-dasharray: 5, 5;
    animation: connectionFlow 4s ease-in-out infinite;
}

@keyframes connectionFlow {
    0%, 100% {
        stroke-dashoffset: 0;
        stroke: rgba(108, 92, 231, 0.4);
    }
    50% {
        stroke-dashoffset: 10;
        stroke: rgba(162, 155, 254, 0.8);
    }
}

/* Specialized Hover Effects and Micro-Interactions */

/* Enhanced Button Interactions */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.btn:active {
    transform: translateY(0) scale(0.98);
    transition: all 0.1s ease;
}

/* Service Card Hover Effects */
.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.service-card h3 {
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.service-card:hover h3 {
    color: #667eea;
    transform: scale(1.05);
}

.service-card p {
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.service-card:hover p {
    color: #555;
}

/* Navigation Hover Effects */
nav ul li a {
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

nav ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

nav ul li a:hover::before {
    width: 100%;
}

nav ul li a:hover {
    color: #667eea;
    transform: translateY(-2px);
}

/* Process Step Interactions */
.process-step {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.process-step:hover {
    transform: translateX(10px);
}

.process-number {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.process-number::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}

.process-step:hover .process-number::before {
    width: 120%;
    height: 120%;
}

.process-step:hover .process-number {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* Interactive Floating Elements */
.floating-element {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.floating-element:hover {
    transform: scale(1.2) rotate(10deg);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 10;
}

.floating-element[data-type="code"]:hover {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    animation-play-state: paused;
}

.floating-element[data-type="design"]:hover {
    background: linear-gradient(45deg, #a55eea, #8854d0);
    animation-play-state: paused;
}

.floating-element[data-type="data"]:hover {
    background: linear-gradient(45deg, #4ecdc4, #44bd87);
    animation-play-state: paused;
}

/* Enhanced Team Node Interactions */
.team-node {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-node:hover .node-avatar {
    transform: scale(1.15);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.team-node:hover .data-streams .stream {
    animation-duration: 0.5s;
    opacity: 1;
}

.team-node:hover .node-pulse {
    animation-duration: 0.8s;
    border-width: 3px;
}

/* Code Animation Hover Effects */
.enhanced-code-animation:hover .code-editor {
    transform: scale(1.02);
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.enhanced-code-animation:hover .code-particles .particle {
    animation-duration: 1s;
}

.enhanced-code-animation:hover .syntax-highlight {
    opacity: 1;
    animation-duration: 0.5s;
}

/* App Animation Hover Effects */
.advanced-app-animation:hover .app-device {
    transform: scale(1.05) rotateY(5deg);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}

.advanced-app-animation:hover .floating-ui {
    animation-duration: 1s;
    opacity: 1;
}

.advanced-app-animation:hover .chart-bar {
    animation-duration: 0.8s;
}

/* Motion Graphics Hover Effects */
.sophisticated-motion-graphics:hover .particle[data-type="magic"] {
    animation-duration: 2s;
    opacity: 1;
}

.sophisticated-motion-graphics:hover .morphing-shape {
    animation-duration: 1.5s;
}

.sophisticated-motion-graphics:hover .energy-orb {
    transform: scale(1.2);
    opacity: 0.9;
}

/* Particle System Interactions */
.particle-system:hover .particle {
    animation-duration: 5s;
}

.geometric-shapes:hover .shape-3d {
    animation-duration: 8s;
}

/* Micro-Interactions for Form Elements */
input, textarea {
    transition: all 0.3s ease;
    position: relative;
}

input:focus, textarea:focus {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Scroll-triggered Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Interactive Cursor Effects */
.interactive-cursor {
    cursor: none;
}

.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background: rgba(102, 126, 234, 0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    mix-blend-mode: difference;
}

.custom-cursor.hover {
    width: 40px;
    height: 40px;
    background: rgba(102, 126, 234, 0.4);
}

/* Animated Logo Styles */
.animated-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logo-svg {
    width: 200px;
    height: 60px;
    transition: all 0.3s ease;
}

.animated-logo:hover .logo-svg {
    transform: scale(1.05);
}

/* Logo Circle Animation - Optimized */
.logo-circle {
    stroke-dasharray: 125;
    stroke-dashoffset: 125;
    animation: drawCircle 1.5s ease-in-out forwards;
    transform-origin: center;
    will-change: stroke-dashoffset, transform;
}

@keyframes drawCircle {
    0% {
        stroke-dashoffset: 125;
        transform: rotate(-90deg);
    }
    100% {
        stroke-dashoffset: 0;
        transform: rotate(0deg);
    }
}

/* Removed expensive glow animation for better performance */

/* Logo Icon Animation - Optimized */
.logo-icon {
    transform-origin: center;
    will-change: transform;
}

/* Removed continuous pulse animation for better performance */
.animated-logo:hover .logo-icon {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.center-dot {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.animated-logo:hover .center-dot {
    opacity: 0.7;
}

/* Logo Text Animations */
.logo-main-text {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    animation: textSlideIn 1s ease-out 0.5s both;
}

.logo-sub-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    animation: textSlideIn 1s ease-out 0.8s both;
}

@keyframes textSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Logo Particles Animation - Optimized */
.logo-particles .particle {
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: transform, opacity;
}

/* Simplified particle animation on hover only */
.animated-logo:hover .logo-particles .particle {
    opacity: 0.8;
    transform: translateY(-2px);
}

.animated-logo:hover .particle-1 {
    transition-delay: 0.1s;
}

.animated-logo:hover .particle-2 {
    transition-delay: 0.2s;
}

.animated-logo:hover .particle-3 {
    transition-delay: 0.3s;
}

/* Logo Hover Effects */
.animated-logo:hover .logo-circle {
    animation-duration: 1s;
    stroke-width: 3;
}

.animated-logo:hover .logo-icon {
    animation-duration: 1s;
    transform: scale(1.1);
}

.animated-logo:hover .logo-particles .particle {
    animation-duration: 1.5s;
}

.animated-logo:hover .logo-main-text {
    filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.4));
}

.animated-logo:hover .logo-sub-text {
    filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.3));
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    .logo-svg {
        width: 150px;
        height: 45px;
    }
    
    .logo-main-text {
        font-size: 14px;
    }
    
    .logo-sub-text {
        font-size: 10px;
    }
    
    .btn:hover {
        transform: translateY(-1px) scale(1.01);
    }
    
    .service-card:hover {
        transform: translateY(-5px);
    }
    
    .process-step:hover {
        transform: translateY(-5px);
    }
    
    .floating-element:hover {
        transform: scale(1.1);
    }
    
    .custom-cursor {
        display: none;
    }
    
    .enhanced-code-animation:hover .code-editor,
    .advanced-app-animation:hover .app-device {
        transform: scale(1.01);
    }
}

/* Home Page Animated Showcase Styles */
.animated-showcase {
    padding: 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.animated-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
    opacity: 0.3;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 2;
}

.showcase-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.showcase-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.15);
}

.image-placeholder {
    width: 100%;
    height: 250px;
    background: linear-gradient(45deg, #1a1a2e, #16213e);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(102, 126, 234, 0.3);
}

.placeholder-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 20px;
    text-align: center;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.showcase-item:hover .image-overlay {
    opacity: 1;
}

/* Animation 1: Floating Tech Icons */
.tech-icon-float {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.tech-icon-float i {
    font-size: 3rem;
    color: #667eea;
    animation: floatTech 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

.tech-icon-float i:nth-child(1) { animation-delay: 0s; }
.tech-icon-float i:nth-child(2) { animation-delay: 0.5s; }
.tech-icon-float i:nth-child(3) { animation-delay: 1s; }
.tech-icon-float i:nth-child(4) { animation-delay: 1.5s; }

.floating-tech:hover .tech-icon-float i {
    transform: scale(1.2) rotate(360deg);
    color: #764ba2;
}

@keyframes floatTech {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Animation 2: Morphing Shapes */
.shape-morph {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.morph-shape {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    animation: morphShapes 4s ease-in-out infinite;
    position: relative;
}

.shape-1 {
    border-radius: 0;
    animation-delay: 0s;
}

.shape-2 {
    border-radius: 50%;
    animation-delay: 1.3s;
}

.shape-3 {
    border-radius: 0;
    animation-delay: 2.6s;
    transform: rotate(45deg);
}

@keyframes morphShapes {
    0% { border-radius: 0; transform: rotate(0deg) scale(1); }
    25% { border-radius: 50%; transform: rotate(90deg) scale(1.1); }
    50% { border-radius: 0; transform: rotate(180deg) scale(0.9); }
    75% { border-radius: 50%; transform: rotate(270deg) scale(1.1); }
    100% { border-radius: 0; transform: rotate(360deg) scale(1); }
}

/* Animation 3: Particle Explosion */
.explosion-center {
    width: 20px;
    height: 20px;
    background: #667eea;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s ease-in-out infinite;
}

.particle-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.burst-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #764ba2;
    border-radius: 50%;
    animation: explode 3s ease-out infinite;
}

.burst-particle:nth-child(1) { animation-delay: 0s; }
.burst-particle:nth-child(2) { animation-delay: 0.2s; }
.burst-particle:nth-child(3) { animation-delay: 0.4s; }
.burst-particle:nth-child(4) { animation-delay: 0.6s; }
.burst-particle:nth-child(5) { animation-delay: 0.8s; }
.burst-particle:nth-child(6) { animation-delay: 1s; }

@keyframes explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x, 100px), var(--y, 100px)) scale(0);
        opacity: 0;
    }
}

.burst-particle:nth-child(1) { --x: 80px; --y: -80px; }
.burst-particle:nth-child(2) { --x: -80px; --y: -80px; }
.burst-particle:nth-child(3) { --x: 80px; --y: 80px; }
.burst-particle:nth-child(4) { --x: -80px; --y: 80px; }
.burst-particle:nth-child(5) { --x: 120px; --y: 0px; }
.burst-particle:nth-child(6) { --x: -120px; --y: 0px; }

/* Animation 4: Data Visualization */
.chart-animation {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.bar-chart {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 80px;
}

.bar {
    width: 20px;
    background: linear-gradient(to top, #667eea, #764ba2);
    border-radius: 4px 4px 0 0;
    height: var(--height);
    animation: growBar 2s ease-out infinite;
    animation-delay: calc(var(--i, 0) * 0.2s);
}

.bar:nth-child(1) { --i: 0; }
.bar:nth-child(2) { --i: 1; }
.bar:nth-child(3) { --i: 2; }
.bar:nth-child(4) { --i: 3; }
.bar:nth-child(5) { --i: 4; }

@keyframes growBar {
    0% { height: 0; }
    50% { height: var(--height); }
    100% { height: var(--height); }
}

.line-graph {
    width: 200px;
    height: 100px;
}

.graph-line {
    fill: none;
    stroke: #667eea;
    stroke-width: 3;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLine 3s ease-in-out infinite;
}

@keyframes drawLine {
    0% { stroke-dashoffset: 300; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

/* Animation 5: Loading Sequences */
.loader-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.spinner-loader {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(102, 126, 234, 0.3);
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.progress-loader {
    width: 200px;
    height: 8px;
    background: rgba(102, 126, 234, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    animation: progress 2s ease-in-out infinite;
}

@keyframes progress {
    0% { width: 0%; }
    50% { width: 100%; }
    100% { width: 100%; }
}

.dots-loader {
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #667eea;
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Mobile Responsiveness for Showcase */
@media (max-width: 768px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .showcase-item {
        padding: 15px;
    }
    
    .image-placeholder {
        height: 200px;
    }
    
    .tech-icon-float i {
        font-size: 2rem;
    }
    
    .morph-shape {
        width: 40px;
        height: 40px;
    }
    
    .bar-chart {
        height: 60px;
    }
    
    .line-graph {
        width: 150px;
        height: 75px;
    }
}

/* Web Applications Showcase Styles */
.web-apps-showcase {
    padding: 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.web-apps-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
    opacity: 0.3;
}

.web-apps-showcase .container {
    position: relative;
    z-index: 2;
}

.web-apps-showcase .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.web-apps-showcase .section-title {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.web-apps-showcase .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
}

.web-apps-showcase .showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.web-apps-showcase .showcase-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.web-apps-showcase .showcase-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.demo-container {
    position: relative;
    margin-bottom: 20px;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
}

.demo-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.demo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.demo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

.web-apps-showcase .showcase-item:hover .demo-screen {
    opacity: 0;
}

/* Dashboard Demo Styles */
.dashboard-demo .demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #4f46e5;
    color: white;
}

.dashboard-demo .demo-logo {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 6px;
    opacity: 0.9;
}

.dashboard-demo .demo-nav {
    display: flex;
    gap: 20px;
}

.dashboard-demo .nav-item {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dashboard-demo .nav-item.active {
    background: rgba(255, 255, 255, 0.2);
}

.dashboard-demo .demo-content {
    padding: 20px;
    display: flex;
    gap: 20px;
}

.dashboard-demo .chart-container {
    flex: 1;
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
}

.dashboard-demo .animated-chart {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 120px;
}

.dashboard-demo .chart-bar {
    flex: 1;
    background: linear-gradient(to top, #4f46e5, #7c3aed);
    border-radius: 4px 4px 0 0;
    animation: chartGrow 2s ease-out infinite alternate;
}

@keyframes chartGrow {
    0% { transform: scaleY(0.8); }
    100% { transform: scaleY(1); }
}

.dashboard-demo .stats-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dashboard-demo .stat-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.dashboard-demo .stat-number {
    font-size: 1.8rem;
    font-weight: bold;
    color: #4f46e5;
    animation: numberCount 3s ease-out infinite;
}

.dashboard-demo .stat-label {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 5px;
}

@keyframes numberCount {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* E-commerce Demo Styles */
.ecommerce-demo .demo-screen {
    padding: 20px;
    background: #f9fafb;
}

.ecommerce-demo .product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.ecommerce-demo .product-card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: productFloat 4s ease-in-out infinite;
}

.ecommerce-demo .product-card:nth-child(2) {
    animation-delay: 2s;
}

@keyframes productFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.ecommerce-demo .product-image {
    width: 100%;
    height: 80px;
    background: linear-gradient(45deg, #059669, #10b981);
    border-radius: 8px;
    margin-bottom: 10px;
}

.ecommerce-demo .product-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 5px;
}

.ecommerce-demo .product-price {
    color: #059669;
    font-weight: bold;
    margin-bottom: 10px;
}

.ecommerce-demo .add-to-cart {
    background: #059669;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ecommerce-demo .add-to-cart:hover {
    background: #047857;
}

.ecommerce-demo .shopping-cart {
    position: absolute;
    top: 20px;
    right: 20px;
}

.ecommerce-demo .cart-icon {
    position: relative;
    background: #059669;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    animation: cartBounce 2s ease-in-out infinite;
}

.ecommerce-demo .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc2626;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Project Management Demo Styles */
.project-demo .demo-screen {
    padding: 20px;
    background: #fef2f2;
}

.project-demo .kanban-board {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    height: 100%;
}

.project-demo .kanban-column {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.project-demo .column-header {
    font-weight: 600;
    color: #374151;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

.project-demo .task-card {
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 4px solid #d1d5db;
    transition: all 0.3s ease;
    animation: taskSlide 3s ease-in-out infinite;
}

.project-demo .task-card.active {
    border-left-color: #dc2626;
    background: #fef2f2;
    animation: taskPulse 2s ease-in-out infinite;
}

.project-demo .task-card.completed {
    border-left-color: #10b981;
    background: #f0fdf4;
    opacity: 0.8;
}

@keyframes taskSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

@keyframes taskPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
    50% { box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2); }
}

.project-demo .task-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 5px;
}

.project-demo .task-assignee {
    color: #6b7280;
    font-size: 0.9rem;
}

.project-demo .task-progress {
    margin-top: 8px;
    background: #e5e7eb;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}

.project-demo .progress-bar {
    background: #dc2626;
    height: 100%;
    width: 60%;
    border-radius: 2px;
    animation: progressGrow 3s ease-in-out infinite;
}

@keyframes progressGrow {
    0% { width: 40%; }
    50% { width: 80%; }
    100% { width: 60%; }
}

/* CRM Demo Styles */
.crm-demo .demo-screen {
    padding: 20px;
    background: #faf5ff;
}

.crm-demo .crm-interface {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

.crm-demo .customer-list {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.crm-demo .customer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    animation: customerFade 4s ease-in-out infinite;
}

.crm-demo .customer-item:nth-child(2) {
    animation-delay: 2s;
}

.crm-demo .customer-item.active {
    background: #f3e8ff;
    border: 2px solid #7c3aed;
}

@keyframes customerFade {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.crm-demo .customer-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #7c3aed, #a855f7);
    border-radius: 50%;
}

.crm-demo .customer-info {
    flex: 1;
}

.crm-demo .customer-name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.crm-demo .customer-company {
    color: #6b7280;
    font-size: 0.9rem;
}

.crm-demo .customer-status {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.crm-demo .customer-status.hot {
    background: #fef2f2;
    color: #dc2626;
    animation: statusBlink 2s ease-in-out infinite;
}

.crm-demo .customer-status.warm {
    background: #fef3c7;
    color: #d97706;
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.crm-demo .customer-details {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.crm-demo .detail-header {
    font-weight: 600;
    color: #374151;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

.crm-demo .detail-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.crm-demo .detail-item:last-child {
    border-bottom: none;
}

.crm-demo .label {
    color: #6b7280;
    font-weight: 500;
}

.crm-demo .value {
    color: #1f2937;
    font-weight: 600;
}

/* Web Apps Showcase Mobile Responsiveness */
@media (max-width: 768px) {
    .web-apps-showcase .showcase-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .demo-container {
        height: 250px;
    }
    
    .dashboard-demo .demo-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .ecommerce-demo .product-grid {
        grid-template-columns: 1fr;
    }
    
    .project-demo .kanban-board {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .crm-demo .crm-interface {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Motion Graphics Showcase Styles */
.motion-graphics-showcase {
    padding: 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.motion-graphics-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
    opacity: 0.3;
}

.motion-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.motion-showcase-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    position: relative;
}

.motion-showcase-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.motion-animation {
    height: 300px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #f8fafc, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.motion-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.motion-showcase-item:hover .motion-overlay {
    opacity: 1;
}

.motion-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kinetic Typography Animation */
.kinetic-typography {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.typography-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.text-element {
    font-weight: 900;
    color: white;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: textFloat 3s ease-in-out infinite;
}

.main-text {
    font-size: 3rem;
    animation-delay: 0s;
}

.sub-text {
    font-size: 2rem;
    animation-delay: 0.5s;
    margin-top: -10px;
}

.accent-text {
    font-size: 1.5rem;
    animation-delay: 1s;
    margin-top: -5px;
    opacity: 0.8;
}

@keyframes textFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

.text-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.text-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: particleFloat 4s ease-in-out infinite;
}

.text-particles .particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.text-particles .particle:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 1s;
}

.text-particles .particle:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}

.text-particles .particle:nth-child(4) {
    top: 40%;
    right: 25%;
    animation-delay: 3s;
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0px) scale(1); opacity: 0.8; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
}

/* Abstract Geometry Animation */
.abstract-geometry {
    background: linear-gradient(135deg, #764ba2, #f093fb);
}

.geometry-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.geometric-shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    animation: shapeRotate 6s linear infinite;
}

.triangle {
    width: 0;
    height: 0;
    background: transparent;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 43px solid rgba(255, 255, 255, 0.9);
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 20%;
    right: 20%;
    animation-delay: 1.5s;
}

.square {
    width: 40px;
    height: 40px;
    bottom: 20%;
    left: 25%;
    animation-delay: 3s;
}

.hexagon {
    width: 40px;
    height: 23px;
    position: relative;
    bottom: 25%;
    right: 20%;
    animation-delay: 4.5s;
}

.hexagon::before,
.hexagon::after {
    content: '';
    position: absolute;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

.hexagon::before {
    bottom: 100%;
    border-bottom: 11.5px solid rgba(255, 255, 255, 0.9);
}

.hexagon::after {
    top: 100%;
    border-top: 11.5px solid rgba(255, 255, 255, 0.9);
}

@keyframes shapeRotate {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(0.9); }
    100% { transform: rotate(360deg) scale(1); }
}

.connection-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: lineGlow 4s ease-in-out infinite;
}

.line-1 {
    width: 150px;
    top: 30%;
    left: 25%;
    transform: rotate(45deg);
    animation-delay: 0s;
}

.line-2 {
    width: 120px;
    top: 50%;
    right: 30%;
    transform: rotate(-30deg);
    animation-delay: 1.5s;
}

.line-3 {
    width: 100px;
    bottom: 30%;
    left: 40%;
    transform: rotate(60deg);
    animation-delay: 3s;
}

@keyframes lineGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Liquid Morphing Animation */
.liquid-morphing {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.liquid-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liquid-blob {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: blobMorph 8s ease-in-out infinite;
}

.blob-1 {
    width: 80px;
    height: 80px;
    top: 30%;
    left: 30%;
    animation-delay: 0s;
}

.blob-2 {
    width: 60px;
    height: 60px;
    top: 50%;
    right: 25%;
    animation-delay: 2.5s;
}

.blob-3 {
    width: 70px;
    height: 70px;
    bottom: 25%;
    left: 50%;
    animation-delay: 5s;
}

@keyframes blobMorph {
    0%, 100% {
        border-radius: 50%;
        transform: scale(1) rotate(0deg);
    }
    25% {
        border-radius: 60% 40% 30% 70%;
        transform: scale(1.1) rotate(90deg);
    }
    50% {
        border-radius: 30% 60% 70% 40%;
        transform: scale(0.9) rotate(180deg);
    }
    75% {
        border-radius: 70% 30% 50% 60%;
        transform: scale(1.05) rotate(270deg);
    }
}

.liquid-waves {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wave {
    position: absolute;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: waveFlow 6s ease-in-out infinite;
}

.wave-1 {
    top: 25%;
    left: 10%;
    animation-delay: 0s;
}

.wave-2 {
    top: 50%;
    right: 10%;
    animation-delay: 2s;
}

.wave-3 {
    bottom: 25%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes waveFlow {
    0%, 100% {
        transform: translateX(-50px) scaleX(0.5);
        opacity: 0;
    }
    50% {
        transform: translateX(50px) scaleX(1);
        opacity: 1;
    }
}

/* Data Flow Animation */
.data-flow {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.data-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.data-nodes {
    position: relative;
    width: 200px;
    height: 200px;
}

.node {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: nodePulse 3s ease-in-out infinite;
}

.central-node {
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
}

.satellite-node {
    width: 20px;
    height: 20px;
}

.node-1 {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0.5s;
}

.node-2 {
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    animation-delay: 1s;
}

.node-3 {
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 1.5s;
}

.node-4 {
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    animation-delay: 2s;
}

@keyframes nodePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}

.satellite-node.node-1 {
    transform: translateX(-50%) scale(1);
}

.satellite-node.node-2 {
    transform: translateY(-50%) scale(1);
}

.satellite-node.node-3 {
    transform: translateX(-50%) scale(1);
}

.satellite-node.node-4 {
    transform: translateY(-50%) scale(1);
}

.satellite-node.node-1:hover,
.satellite-node.node-2:hover,
.satellite-node.node-3:hover,
.satellite-node.node-4:hover {
    transform: scale(1.2);
}

.data-streams {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stream {
    position: absolute;
    width: 2px;
    background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: streamFlow 4s ease-in-out infinite;
}

.stream-1 {
    height: 80px;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.stream-2 {
    height: 80px;
    top: 50%;
    right: 30%;
    transform: translateY(-50%) rotate(90deg);
    animation-delay: 1s;
}

.stream-3 {
    height: 80px;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    animation-delay: 2s;
}

.stream-4 {
    height: 80px;
    top: 50%;
    left: 30%;
    transform: translateY(-50%) rotate(270deg);
    animation-delay: 3s;
}

@keyframes streamFlow {
    0%, 100% {
        opacity: 0.3;
        transform: scaleY(0.5);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

.data-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.data-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: dataParticleMove 5s linear infinite;
}

.data-particle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.data-particle:nth-child(2) {
    top: 60%;
    right: 20%;
    animation-delay: 1.5s;
}

.data-particle:nth-child(3) {
    bottom: 20%;
    left: 60%;
    animation-delay: 3s;
}

@keyframes dataParticleMove {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(100px, -100px) scale(0.5);
        opacity: 0;
    }
}

.motion-info {
    padding: 30px;
}

.motion-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 15px;
}

.motion-info p {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 20px;
}

.motion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.motion-tags .tag {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.motion-tags .tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Motion Graphics Showcase Mobile Responsiveness */
@media (max-width: 768px) {
    .motion-showcase-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .motion-animation {
        height: 250px;
    }
    
    .main-text {
        font-size: 2rem;
    }
    
    .sub-text {
        font-size: 1.5rem;
    }
    
    .accent-text {
        font-size: 1.2rem;
    }
    
    .data-nodes {
        width: 150px;
        height: 150px;
    }
    
    .motion-info {
        padding: 20px;
    }
    
    .motion-info h3 {
        font-size: 1.3rem;
    }
}

/* Team Collaboration Showcase Styles */
.team-collaboration-showcase {
    padding: 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.team-collaboration-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;
    opacity: 0.3;
}

.collaboration-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.collaboration-demo {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.collaboration-demo:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

.demo-header {
    text-align: center;
    margin-bottom: 40px;
}

.demo-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}

.demo-header p {
    color: #6b7280;
    font-size: 1.1rem;
}

/* Agile Sprint Planning Styles */
.sprint-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.sprint-column {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    min-height: 300px;
}

.sprint-column h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 15px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

.task-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-card {
    background: white;
    border-radius: 8px;
    padding: 15px;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: taskFloat 3s ease-in-out infinite;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.task-card.assigned {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
}

.task-card.in-progress {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.task-card.completed {
    border-left-color: #06b6d4;
    background: linear-gradient(135deg, #ecfeff, #cffafe);
}

.task-title {
    font-weight: 600;
    color: #1f2937;
    display: block;
    margin-bottom: 8px;
}

.task-points {
    background: #3b82f6;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    float: right;
}

.assignee {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 8px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    width: 65%;
    border-radius: 3px;
    animation: progressGrow 2s ease-in-out infinite alternate;
}

.team-avatars {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.avatar:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-5px);
}

.avatar.active {
    background: rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #3b82f6;
    animation: avatarPulse 2s ease-in-out infinite;
}

.member-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

/* Code Review Process Styles */
.code-review-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.review-stage {
    flex: 1;
    min-width: 200px;
    text-align: center;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.review-stage:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.stage-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: white;
    font-size: 1.5rem;
    animation: iconRotate 4s linear infinite;
}

.review-stage h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 15px;
}

.commit-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.commit-author {
    font-weight: 600;
    color: #374151;
}

.commit-message {
    color: #6b7280;
    font-style: italic;
}

.commit-files {
    font-size: 0.9rem;
    color: #10b981;
    font-weight: 600;
}

.reviewers {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.reviewer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.reviewer[data-status="approved"] {
    border-color: #10b981;
    background: #ecfdf5;
}

.reviewer[data-status="reviewing"] {
    border-color: #f59e0b;
    background: #fffbeb;
    animation: reviewerPulse 2s ease-in-out infinite;
}

.reviewer img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.review-comments {
    background: white;
    border-radius: 8px;
    padding: 15px;
    border-left: 4px solid #10b981;
}

.comment {
    font-size: 0.9rem;
}

.comment-author {
    font-weight: 600;
    color: #374151;
}

.comment-text {
    color: #6b7280;
    font-style: italic;
}

.merge-status {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: statusBlink 1.5s ease-in-out infinite;
}

.status-indicator.pending {
    background: #f59e0b;
}

.review-arrow {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    position: relative;
    margin: 0 10px;
}

.review-arrow::after {
    content: '';
    position: absolute;
    right: -8px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 8px solid #1d4ed8;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.code-diff {
    background: #1f2937;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

.diff-header {
    background: #374151;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-name {
    color: #f9fafb;
    font-weight: 600;
}

.diff-stats {
    color: #10b981;
    font-size: 0.9rem;
}

.diff-content {
    padding: 20px;
}

.diff-line {
    padding: 4px 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.diff-line.added {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding-left: 10px;
    border-left: 3px solid #10b981;
}

.diff-line.removed {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding-left: 10px;
    border-left: 3px solid #ef4444;
}

/* Real-time Communication Styles */
.communication-hub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.chat-window {
    background: white;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    overflow: hidden;
}

.chat-header {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.online-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.online {
    background: #10b981;
}

.chat-messages {
    padding: 20px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    display: flex;
    gap: 12px;
    animation: messageSlide 0.5s ease-out;
}

.message.typing {
    opacity: 0.7;
}

.message-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
}

.message-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sender-name {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.message-text {
    color: #6b7280;
    line-height: 1.4;
}

.message-time {
    font-size: 0.8rem;
    color: #9ca3af;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: #6b7280;
    border-radius: 50%;
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

.video-call {
    background: white;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    overflow: hidden;
}

.call-header {
    background: #1f2937;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.call-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.call-controls {
    display: flex;
    gap: 10px;
}

.control-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: #374151;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: #4b5563;
}

.control-btn.active {
    background: #10b981;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #e5e7eb;
}

.video-participant {
    background: #f3f4f6;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
}

.video-participant.speaking {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 3px solid #3b82f6;
}

.video-participant img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
}

.participant-name {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.speaking-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    animation: speakingPulse 1s ease-in-out infinite;
}

.notification-feed {
    background: white;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    padding: 20px;
}

.notification-feed h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    text-align: center;
}

.notifications {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notification {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    animation: notificationSlide 0.5s ease-out;
}

.notification[data-type="commit"] {
    border-left-color: #10b981;
}

.notification[data-type="review"] {
    border-left-color: #f59e0b;
}

.notification[data-type="deploy"] {
    border-left-color: #8b5cf6;
}

.notification i {
    font-size: 1.2rem;
    color: #6b7280;
}

.notification span:first-of-type {
    flex: 1;
    color: #374151;
    font-size: 0.9rem;
}

.notification .time {
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Animations */
@keyframes taskFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes progressGrow {
    0% {
        width: 45%;
    }
    100% {
        width: 75%;
    }
}

@keyframes avatarPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

@keyframes iconRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes reviewerPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes statusBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

@keyframes messageSlide {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

@keyframes speakingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

@keyframes notificationSlide {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Team Collaboration Showcase Mobile Responsiveness */
@media (max-width: 768px) {
    .collaboration-demo {
        padding: 25px;
    }
    
    .demo-header h3 {
        font-size: 1.5rem;
    }
    
    .sprint-board {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .sprint-column {
        min-height: 200px;
    }
    
    .code-review-flow {
        flex-direction: column;
        gap: 15px;
    }
    
    .review-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    .communication-hub {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .video-grid {
        grid-template-columns: 1fr;
    }
    
    .team-avatars {
        gap: 15px;
    }
    
    .avatar img {
        width: 40px;
        height: 40px;
    }
}

/* Coding Showcase Styles */
.coding-showcase {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
    position: relative;
    overflow: hidden;
}

.coding-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="coding-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23667eea" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23coding-pattern)"/></svg>') repeat;
    opacity: 0.3;
    animation: patternMove 20s linear infinite;
}

.coding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.coding-demo {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coding-demo:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
}

.demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.demo-header h3 {
    color: #333;
    font-size: 1.4rem;
    font-weight: 600;
}

.demo-tags {
    display: flex;
    gap: 0.5rem;
}

.tag {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.demo-content {
    min-height: 250px;
    position: relative;
    margin-bottom: 1.5rem;
}

.demo-image {
    text-align: center;
}

.demo-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Algorithm Visualization */
.algorithm-viz {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sorting-array {
    display: flex;
    align-items: end;
    gap: 0.5rem;
    height: 120px;
    padding: 1rem;
    background: #f8f9ff;
    border-radius: 10px;
    justify-content: center;
}

.array-bar {
    width: 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 3px 3px 0 0;
    transition: all 0.5s ease;
    animation: sortingAnimation 3s ease-in-out infinite;
}

.array-bar:nth-child(odd) {
    animation-delay: 0.2s;
}

.array-bar:nth-child(even) {
    animation-delay: 0.4s;
}

@keyframes sortingAnimation {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.2); background: linear-gradient(135deg, #ff6b6b, #ee5a24); }
}

.algorithm-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #333;
    color: white;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
}

.algo-step {
    color: #4ecdc4;
    animation: textBlink 1s ease-in-out infinite;
}

.complexity {
    color: #ffd93d;
    font-weight: bold;
}

@keyframes textBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* System Architecture */
.architecture-viz {
    position: relative;
    padding: 2rem;
    background: #f8f9ff;
    border-radius: 10px;
}

.architecture-diagram {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2rem;
    position: relative;
}

.service-node {
    background: white;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
    position: relative;
    animation: nodeFloat 3s ease-in-out infinite;
}

.service-node.frontend {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    animation-delay: 0s;
}

.service-node.api {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    animation-delay: 0.5s;
}

.service-node.auth {
    background: linear-gradient(135deg, #ffd93d, #ff6b6b);
    color: white;
    animation-delay: 1s;
}

.service-node.data {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    color: #333;
    animation-delay: 1.5s;
}

@keyframes nodeFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.connection-line {
    position: absolute;
    background: linear-gradient(135deg, #667eea, #764ba2);
    height: 3px;
    border-radius: 2px;
    animation: dataFlow 2s ease-in-out infinite;
}

.line-1 {
    top: 50%;
    left: 25%;
    width: 50%;
    animation-delay: 0s;
}

.line-2 {
    top: 25%;
    left: 50%;
    width: 3px;
    height: 50%;
    animation-delay: 0.5s;
}

.line-3 {
    top: 75%;
    left: 50%;
    width: 3px;
    height: 25%;
    animation-delay: 1s;
}

@keyframes dataFlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* API Development */
.api-viz {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.api-terminal {
    background: #1e1e1e;
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Courier New', monospace;
}

.terminal-header {
    background: #333;
    padding: 0.5rem 1rem;
    color: white;
    font-size: 0.9rem;
}

.terminal-content {
    padding: 1rem;
    color: #4ecdc4;
    line-height: 1.6;
}

.api-request {
    color: #ffd93d;
    margin-bottom: 0.5rem;
    animation: requestPulse 2s ease-in-out infinite;
}

.api-response {
    color: #4ecdc4;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.api-response.success {
    color: #2ecc71;
}

.response-time {
    color: #95a5a6;
    font-size: 0.9rem;
}

@keyframes requestPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.api-metrics {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.metric {
    text-align: center;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    min-width: 100px;
}

.metric-value {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: #667eea;
    animation: metricCount 3s ease-in-out infinite;
}

.metric-label {
    display: block;
    color: #666;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

@keyframes metricCount {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Database Optimization */
.database-viz {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.query-optimizer {
    background: #f8f9ff;
    padding: 1.5rem;
    border-radius: 10px;
}

.query-input {
    background: #1e1e1e;
    color: #4ecdc4;
    padding: 1rem;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    margin-bottom: 1rem;
    position: relative;
}

.query-input::after {
    content: '|';
    animation: cursorBlink 1s infinite;
    color: #ffd93d;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.optimization-steps {
    display: flex;
    gap: 1rem;
}

.step {
    padding: 0.5rem 1rem;
    background: #e0e0e0;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    animation: stepProgress 4s ease-in-out infinite;
}

.step.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

@keyframes stepProgress {
    0%, 100% { transform: scale(1); }
    33% { transform: scale(1.1); }
}

.performance-chart {
    display: flex;
    gap: 2rem;
    align-items: end;
    justify-content: center;
    height: 100px;
}

.chart-bar {
    width: 60px;
    background: #e0e0e0;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 0.5rem;
    border-radius: 5px 5px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    transition: all 0.5s ease;
    animation: chartGrow 3s ease-in-out infinite;
}

.chart-bar.optimized {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    animation-delay: 1s;
}

@keyframes chartGrow {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.2); }
}

/* Coding Showcase Mobile Responsiveness */
@media (max-width: 768px) {
    .coding-showcase {
        padding: 3rem 0;
    }
    
    .coding-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .coding-demo {
        padding: 1.5rem;
    }
    
    .demo-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .demo-content {
        min-height: 200px;
    }
    
    .sorting-array {
        height: 80px;
    }
    
    .array-bar {
        width: 20px;
    }
    
    .architecture-diagram {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .api-metrics {
        flex-direction: column;
        gap: 1rem;
    }
    
    .performance-chart {
        gap: 1rem;
    }
    
    .chart-bar {
        width: 40px;
    }
}

/* ===== ICON ANIMATIONS ===== */

/* FontAwesome Icon Base Animation */
.fas, .fab, .far {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* Service Icons Animations */
.service-icon i {
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

.service-icon i:hover {
    transform: scale(1.2) rotate(10deg);
    color: #667eea;
    text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

.service-card:hover .service-icon i {
    animation: serviceIconBounce 0.6s ease-in-out;
}

@keyframes serviceIconBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-3deg); }
}

/* Team Member Icons Animation */
.team-member i {
    display: inline-block;
    transition: all 0.3s ease;
    animation: teamIconFloat 3s ease-in-out infinite;
}

.team-member.member-1 i {
    animation-delay: 0s;
}

.team-member.member-2 i {
    animation-delay: 1s;
}

.team-member.member-3 i {
    animation-delay: 2s;
}

@keyframes teamIconFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.team-member:hover i {
    transform: scale(1.3) rotate(15deg);
    color: #764ba2;
    filter: drop-shadow(0 0 10px rgba(118, 75, 162, 0.6));
}

/* Contact Icons Animation */
.contact-item i {
    display: inline-block;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.contact-item:hover i {
    transform: scale(1.2) translateX(5px);
    color: #667eea;
    animation: contactIconPulse 1s ease-in-out;
}

@keyframes contactIconPulse {
    0%, 100% { transform: scale(1.2) translateX(5px); }
    50% { transform: scale(1.4) translateX(8px); }
}

/* Social Media Icons Animation */
.social-links a {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.social-links a i {
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.social-links a:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.social-links a:hover i {
    animation: socialIconSpin 0.6s ease-in-out;
    color: #fff;
}

@keyframes socialIconSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Portfolio Link Icons */
.portfolio-link i {
    transition: all 0.3s ease;
    display: inline-block;
}

.portfolio-item:hover .portfolio-link i {
    transform: scale(1.2) rotate(45deg);
    color: #667eea;
    animation: portfolioIconGlow 1.5s ease-in-out infinite;
}

@keyframes portfolioIconGlow {
    0%, 100% { 
        text-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
        transform: scale(1.2) rotate(45deg);
    }
    50% { 
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.8), 0 0 30px rgba(102, 126, 234, 0.6);
        transform: scale(1.3) rotate(45deg);
    }
}

/* Technology Stack Icons Animation */
.tech-icon-float i {
    display: inline-block;
    font-size: 2rem;
    margin: 0.5rem;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: techIconFloat 4s ease-in-out infinite;
}

.tech-icon-float .fab.fa-react {
    animation-delay: 0s;
    color: #61dafb;
}

.tech-icon-float .fab.fa-node-js {
    animation-delay: 1s;
    color: #68a063;
}

.tech-icon-float .fab.fa-python {
    animation-delay: 2s;
    color: #3776ab;
}

.tech-icon-float .fab.fa-js-square {
    animation-delay: 3s;
    color: #f7df1e;
}

@keyframes techIconFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    25% { 
        transform: translateY(-15px) rotate(5deg) scale(1.1);
    }
    50% { 
        transform: translateY(-25px) rotate(-5deg) scale(1.2);
    }
    75% { 
        transform: translateY(-10px) rotate(3deg) scale(1.1);
    }
}

.tech-icon-float:hover i {
    animation-play-state: paused;
    transform: scale(1.5) rotate(360deg);
    filter: drop-shadow(0 0 15px currentColor);
}

/* Navigation Hamburger Animation */
.hamburger {
    transition: all 0.3s ease;
}

.hamburger:hover {
    transform: scale(1.1);
}

.hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Icon Hover Effects for All Pages */
.fas:hover, .fab:hover, .far:hover {
    transform: scale(1.1);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Specific Icon Animations */
.fa-globe:hover {
    animation: globeSpin 1s linear infinite;
}

@keyframes globeSpin {
    from { transform: rotate(0deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1.1); }
}

.fa-laptop-code:hover {
    animation: laptopBounce 0.6s ease-in-out;
}

@keyframes laptopBounce {
    0%, 100% { transform: scale(1.1) translateY(0); }
    50% { transform: scale(1.2) translateY(-5px); }
}

.fa-magic:hover {
    animation: magicSparkle 0.8s ease-in-out;
}

@keyframes magicSparkle {
    0%, 100% { 
        transform: scale(1.1) rotate(0deg);
        filter: hue-rotate(0deg);
    }
    25% { 
        transform: scale(1.2) rotate(10deg);
        filter: hue-rotate(90deg);
    }
    50% { 
        transform: scale(1.3) rotate(-10deg);
        filter: hue-rotate(180deg);
    }
    75% { 
        transform: scale(1.2) rotate(5deg);
        filter: hue-rotate(270deg);
    }
}

.fa-code:hover {
    animation: codeType 1s ease-in-out;
}

@keyframes codeType {
    0%, 100% { transform: scale(1.1); }
    25%, 75% { transform: scale(1.2) translateX(-2px); }
    50% { transform: scale(1.2) translateX(2px); }
}

.fa-paint-brush:hover {
    animation: paintBrush 0.8s ease-in-out;
}

@keyframes paintBrush {
    0%, 100% { transform: scale(1.1) rotate(0deg); }
    25% { transform: scale(1.2) rotate(-15deg); }
    50% { transform: scale(1.3) rotate(15deg); }
    75% { transform: scale(1.2) rotate(-10deg); }
}

.fa-rocket:hover {
    animation: rocketLaunch 1s ease-in-out;
}

@keyframes rocketLaunch {
    0% { transform: scale(1.1) translateY(0) rotate(0deg); }
    50% { transform: scale(1.3) translateY(-10px) rotate(10deg); }
    100% { transform: scale(1.1) translateY(0) rotate(0deg); }
}

/* Icon Loading Animation */
@keyframes iconLoad {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-180deg);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Apply loading animation to all icons on page load */
.fas, .fab, .far {
    animation: iconLoad 0.6s ease-out;
}

/* Stagger the loading animation */
.service-icon i:nth-child(1) { animation-delay: 0.1s; }
.service-icon i:nth-child(2) { animation-delay: 0.2s; }
.service-icon i:nth-child(3) { animation-delay: 0.3s; }

.social-links a:nth-child(1) i { animation-delay: 0.4s; }
.social-links a:nth-child(2) i { animation-delay: 0.5s; }
.social-links a:nth-child(3) i { animation-delay: 0.6s; }
.social-links a:nth-child(4) i { animation-delay: 0.7s; }

/* Technology Icons Specific Animations */
.tech-item {
    transition: all 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
}

.tech-icon i {
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-size: 3rem;
}

.tech-item:hover .tech-icon i {
    transform: scale(1.2) rotate(5deg);
    animation: techIconSpecial 1s ease-in-out;
}

@keyframes techIconSpecial {
    0%, 100% { transform: scale(1.2) rotate(5deg); }
    50% { transform: scale(1.3) rotate(-5deg); }
}

/* Specific Technology Icon Colors and Animations */
.fa-html5 {
    color: #e34f26;
}

.fa-html5:hover {
    animation: htmlPulse 1s ease-in-out;
    color: #e34f26;
}

@keyframes htmlPulse {
    0%, 100% { 
        transform: scale(1.2) rotate(5deg);
        filter: drop-shadow(0 0 10px #e34f26);
    }
    50% { 
        transform: scale(1.4) rotate(-5deg);
        filter: drop-shadow(0 0 20px #e34f26);
    }
}

.fa-css3-alt {
    color: #1572b6;
}

.fa-css3-alt:hover {
    animation: cssWave 1s ease-in-out;
    color: #1572b6;
}

@keyframes cssWave {
    0%, 100% { 
        transform: scale(1.2) rotate(5deg) translateY(0);
        filter: drop-shadow(0 0 10px #1572b6);
    }
    25% { 
        transform: scale(1.3) rotate(-2deg) translateY(-5px);
        filter: drop-shadow(0 0 15px #1572b6);
    }
    50% { 
        transform: scale(1.4) rotate(-5deg) translateY(0);
        filter: drop-shadow(0 0 20px #1572b6);
    }
    75% { 
        transform: scale(1.3) rotate(2deg) translateY(-3px);
        filter: drop-shadow(0 0 15px #1572b6);
    }
}

.fa-js-square {
    color: #f7df1e;
}

.fa-js-square:hover {
    animation: jsFlicker 0.8s ease-in-out;
    color: #f7df1e;
}

@keyframes jsFlicker {
    0%, 100% { 
        transform: scale(1.2) rotate(5deg);
        filter: drop-shadow(0 0 10px #f7df1e);
        opacity: 1;
    }
    25% { 
        transform: scale(1.3) rotate(-3deg);
        filter: drop-shadow(0 0 15px #f7df1e);
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.4) rotate(-5deg);
        filter: drop-shadow(0 0 20px #f7df1e);
        opacity: 1;
    }
    75% { 
        transform: scale(1.3) rotate(3deg);
        filter: drop-shadow(0 0 15px #f7df1e);
        opacity: 0.9;
    }
}

.fa-react {
    color: #61dafb;
}

.fa-react:hover {
    animation: reactSpin 1.5s linear infinite;
    color: #61dafb;
}

@keyframes reactSpin {
    from { 
        transform: scale(1.2) rotate(0deg);
        filter: drop-shadow(0 0 15px #61dafb);
    }
    to { 
        transform: scale(1.2) rotate(360deg);
        filter: drop-shadow(0 0 15px #61dafb);
    }
}

.fa-node-js {
    color: #68a063;
}

.fa-node-js:hover {
    animation: nodeGrow 1s ease-in-out;
    color: #68a063;
}

@keyframes nodeGrow {
    0%, 100% { 
        transform: scale(1.2) rotate(5deg);
        filter: drop-shadow(0 0 10px #68a063);
    }
    50% { 
        transform: scale(1.5) rotate(-5deg);
        filter: drop-shadow(0 0 25px #68a063);
    }
}

.fa-php {
    color: #777bb4;
}

.fa-php:hover {
    animation: phpBounce 0.8s ease-in-out;
    color: #777bb4;
}

@keyframes phpBounce {
    0%, 100% { 
        transform: scale(1.2) rotate(5deg) translateY(0);
        filter: drop-shadow(0 0 10px #777bb4);
    }
    25% { 
        transform: scale(1.3) rotate(-2deg) translateY(-8px);
        filter: drop-shadow(0 0 15px #777bb4);
    }
    50% { 
        transform: scale(1.4) rotate(-5deg) translateY(-12px);
        filter: drop-shadow(0 0 20px #777bb4);
    }
    75% { 
        transform: scale(1.3) rotate(2deg) translateY(-5px);
        filter: drop-shadow(0 0 15px #777bb4);
    }
}

.fa-python {
    color: #3776ab;
}

.fa-python:hover {
    animation: pythonSlither 1.2s ease-in-out;
    color: #3776ab;
}

@keyframes pythonSlither {
    0%, 100% { 
        transform: scale(1.2) rotate(5deg) translateX(0);
        filter: drop-shadow(0 0 10px #3776ab);
    }
    25% { 
        transform: scale(1.3) rotate(-2deg) translateX(-3px);
        filter: drop-shadow(0 0 15px #3776ab);
    }
    50% { 
        transform: scale(1.4) rotate(-5deg) translateX(3px);
        filter: drop-shadow(0 0 20px #3776ab);
    }
    75% { 
        transform: scale(1.3) rotate(2deg) translateX(-2px);
        filter: drop-shadow(0 0 15px #3776ab);
    }
}

.fa-wordpress {
    color: #21759b;
}

.fa-wordpress:hover {
    animation: wordpressRotate 1s ease-in-out;
    color: #21759b;
}

@keyframes wordpressRotate {
    0%, 100% { 
        transform: scale(1.2) rotate(5deg);
        filter: drop-shadow(0 0 10px #21759b);
    }
    25% { 
        transform: scale(1.3) rotate(95deg);
        filter: drop-shadow(0 0 15px #21759b);
    }
    50% { 
        transform: scale(1.4) rotate(185deg);
        filter: drop-shadow(0 0 20px #21759b);
    }
    75% { 
        transform: scale(1.3) rotate(275deg);
        filter: drop-shadow(0 0 15px #21759b);
    }
}

/* Technology Grid Animation on Load */
.tech-item {
    animation: techItemLoad 0.8s ease-out;
}

@keyframes techItemLoad {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger the tech items loading */
.tech-item:nth-child(1) { animation-delay: 0.1s; }
.tech-item:nth-child(2) { animation-delay: 0.2s; }
.tech-item:nth-child(3) { animation-delay: 0.3s; }
.tech-item:nth-child(4) { animation-delay: 0.4s; }
.tech-item:nth-child(5) { animation-delay: 0.5s; }
.tech-item:nth-child(6) { animation-delay: 0.6s; }
.tech-item:nth-child(7) { animation-delay: 0.7s; }
.tech-item:nth-child(8) { animation-delay: 0.8s; }

/* ===== 30-Second Animation Portfolio Video Showcase ===== */
.portfolio-video-showcase {
    padding: 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.portfolio-video-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    animation: grainMove 20s linear infinite;
}

@keyframes grainMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100px, -100px); }
}

.video-showcase-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.main-video-player {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.video-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
}

.custom-video-player {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-content {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.portfolio-animation-sequence {
    width: 100%;
    height: 100%;
    position: relative;
}

.animation-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    animation: sceneSequence 30s infinite;
}

.animation-scene.scene-1 {
    animation-delay: 0s;
}

.animation-scene.scene-2 {
    animation-delay: 5s;
}

.animation-scene.scene-3 {
    animation-delay: 10s;
}

.animation-scene.scene-4 {
    animation-delay: 15s;
}

.animation-scene.scene-5 {
    animation-delay: 20s;
}

.animation-scene.scene-6 {
    animation-delay: 25s;
}

@keyframes sceneSequence {
    0%, 16.66% {
        opacity: 1;
        transform: scale(1);
    }
    20%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Scene 1: Logo Animation */
.logo-showcase {
    text-align: center;
    position: relative;
}

.showcase-logo {
    width: 300px;
    height: 100px;
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5));
}

.logo-circle-anim {
    stroke-dasharray: 188;
    stroke-dashoffset: 188;
    animation: drawCircle 3s ease-in-out infinite;
}

.logo-text-main, .logo-text-sub {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    fill: #fff;
    opacity: 0;
    animation: textFadeIn 2s ease-in-out 1s infinite;
}

.logo-text-main {
    font-size: 24px;
}

.logo-text-sub {
    font-size: 14px;
}

@keyframes drawCircle {
    0% { stroke-dashoffset: 188; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -188; }
}

@keyframes textFadeIn {
    0%, 30% { opacity: 0; transform: translateY(10px); }
    50%, 80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

.logo-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #667eea;
    border-radius: 50%;
    animation: particleFloat 4s ease-in-out infinite;
}

.particle.p1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.particle.p2 {
    top: 30%;
    right: 15%;
    animation-delay: 1s;
}

.particle.p3 {
    bottom: 25%;
    left: 20%;
    animation-delay: 2s;
}

.particle.p4 {
    bottom: 20%;
    right: 10%;
    animation-delay: 3s;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) scale(1.5);
        opacity: 1;
    }
}

/* Scene 2: Web Animations */
.web-animation-demo {
    text-align: center;
    color: white;
}

.scene-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titlePulse 2s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.floating-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.demo-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: cardFloat 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

.demo-card.card-1 {
    animation-delay: 0s;
}

.demo-card.card-2 {
    animation-delay: 1s;
}

.demo-card.card-3 {
    animation-delay: 2s;
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-10px) rotate(2deg);
    }
    66% {
        transform: translateY(5px) rotate(-1deg);
    }
}

.card-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #667eea;
}

.card-title {
    font-size: 1rem;
    font-weight: bold;
}

.connection-lines {
    position: relative;
    height: 50px;
}

.line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    animation: lineGlow 2s ease-in-out infinite;
}

.line.line-1 {
    top: 10px;
    left: 20%;
    width: 60%;
    animation-delay: 0s;
}

.line.line-2 {
    top: 25px;
    left: 30%;
    width: 40%;
    animation-delay: 0.5s;
}

.line.line-3 {
    top: 40px;
    left: 25%;
    width: 50%;
    animation-delay: 1s;
}

@keyframes lineGlow {
    0%, 100% {
        opacity: 0.3;
        transform: scaleX(0.5);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Scene 3: 3D Animations */
.\33 d-animation-demo {
    text-align: center;
    color: white;
    perspective: 1000px;
}

.\33 d-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.rotating-cube-complex {
    width: 120px;
    height: 120px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate 6s linear infinite;
}

.cube-face {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(102, 126, 234, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: white;
    backdrop-filter: blur(10px);
}

.cube-face.front {
    transform: rotateY(0deg) translateZ(60px);
}

.cube-face.back {
    transform: rotateY(180deg) translateZ(60px);
}

.cube-face.right {
    transform: rotateY(90deg) translateZ(60px);
}

.cube-face.left {
    transform: rotateY(-90deg) translateZ(60px);
}

.cube-face.top {
    transform: rotateX(90deg) translateZ(60px);
}

.cube-face.bottom {
    transform: rotateX(-90deg) translateZ(60px);
}

@keyframes cubeRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.\33 d-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.\33 d-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #764ba2;
    border-radius: 50%;
    animation: particle3D 4s ease-in-out infinite;
}

.\33 d-particle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.\33 d-particle:nth-child(2) {
    top: 30%;
    right: 20%;
    animation-delay: 0.8s;
}

.\33 d-particle:nth-child(3) {
    bottom: 30%;
    left: 30%;
    animation-delay: 1.6s;
}

.\33 d-particle:nth-child(4) {
    bottom: 20%;
    right: 30%;
    animation-delay: 2.4s;
}

.\33 d-particle:nth-child(5) {
    top: 50%;
    left: 50%;
    animation-delay: 3.2s;
}

@keyframes particle3D {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.5;
    }
    25% {
        transform: translateY(-30px) translateX(20px) scale(1.5);
        opacity: 1;
    }
    50% {
        transform: translateY(-10px) translateX(-20px) scale(1.2);
        opacity: 0.8;
    }
    75% {
        transform: translateY(20px) translateX(10px) scale(0.8);
        opacity: 0.6;
    }
}

/* Scene 4: Motion Graphics */
.motion-graphics-demo {
    text-align: center;
    color: white;
}

.motion-elements {
    position: relative;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.kinetic-text {
    margin-bottom: 40px;
}

.text-animate {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 10px;
    animation: textKinetic 3s ease-in-out infinite;
}

.text-animate.t1 {
    animation-delay: 0s;
    color: #667eea;
}

.text-animate.t2 {
    animation-delay: 1s;
    color: #764ba2;
}

.text-animate.t3 {
    animation-delay: 2s;
    color: #f093fb;
}

@keyframes textKinetic {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-20px) rotate(5deg) scale(1.1);
    }
    50% {
        transform: translateY(10px) rotate(-3deg) scale(0.95);
    }
    75% {
        transform: translateY(-5px) rotate(2deg) scale(1.05);
    }
}

.geometric-animation {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.geo-shape {
    width: 40px;
    height: 40px;
    animation: shapeTransform 4s ease-in-out infinite;
}

.geo-shape.triangle {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid #667eea;
    animation-delay: 0s;
}

.geo-shape.circle {
    border-radius: 50%;
    background: #764ba2;
    animation-delay: 1s;
}

.geo-shape.square {
    background: #f093fb;
    animation-delay: 2s;
}

.geo-shape.hexagon {
    background: #f5576c;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation-delay: 3s;
}

@keyframes shapeTransform {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(1.2);
    }
    50% {
        transform: rotate(180deg) scale(0.8);
    }
    75% {
        transform: rotate(270deg) scale(1.1);
    }
}

.motion-trails {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.trail {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    animation: trailMove 3s ease-in-out infinite;
}

.trail.trail-1 {
    top: 20%;
    left: 0;
    animation-delay: 0s;
}

.trail.trail-2 {
    top: 50%;
    right: 0;
    animation-delay: 1s;
    animation-direction: reverse;
}

.trail.trail-3 {
    bottom: 20%;
    left: 0;
    animation-delay: 2s;
}

@keyframes trailMove {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw - 100px));
        opacity: 0;
    }
}

/* Scene 5: UI/UX Animations */
.ui-animation-demo {
    text-align: center;
    color: white;
}

.ui-showcase {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 300px;
}

.mobile-mockup {
    width: 200px;
    height: 350px;
    background: #333;
    border-radius: 25px;
    padding: 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.app-interface {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nav-bar {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.nav-item {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    animation: navItemPulse 2s ease-in-out infinite;
}

.nav-item.active {
    color: white;
    font-weight: bold;
}

.nav-item:nth-child(1) {
    animation-delay: 0s;
}

.nav-item:nth-child(2) {
    animation-delay: 0.5s;
}

.nav-item:nth-child(3) {
    animation-delay: 1s;
}

@keyframes navItemPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.content-area {
    flex: 1;
    padding: 20px;
    position: relative;
}

.ui-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    animation: cardSlideIn 2s ease-in-out infinite;
}

@keyframes cardSlideIn {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(10px);
        opacity: 0.8;
    }
}

.card-header {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: white;
}

.progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
    animation: progressFill 3s ease-in-out infinite;
}

@keyframes progressFill {
    0% {
        width: 0%;
    }
    50% {
        width: 75%;
    }
    100% {
        width: 100%;
    }
}

.floating-action-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    animation: fabPulse 2s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

@keyframes fabPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    }
}

.interaction-ripples {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ripple {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: rippleExpand 2s ease-out infinite;
}

.ripple.r1 {
    top: 30%;
    left: 20%;
    animation-delay: 0s;
}

.ripple.r2 {
    top: 60%;
    right: 25%;
    animation-delay: 0.7s;
}

.ripple.r3 {
    bottom: 30%;
    left: 30%;
    animation-delay: 1.4s;
}

@keyframes rippleExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Scene 6: Final CTA */
.cta-animation {
    text-align: center;
    color: white;
    position: relative;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleGlow 2s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8));
        transform: scale(1.02);
    }
}

.cta-subtitle {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
    animation: subtitleFade 3s ease-in-out infinite;
}

@keyframes subtitleFade {
    0%, 100% {
        opacity: 0.7;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

.cta-button {
    display: inline-block;
    position: relative;
    padding: 15px 40px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border-radius: 50px;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: buttonPulse 2s ease-in-out infinite;
    overflow: hidden;
}

@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
    }
}

.button-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: buttonGlow 3s ease-in-out infinite;
}

@keyframes buttonGlow {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.final-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.final-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #667eea, #764ba2);
    border-radius: 50%;
    animation: finalParticleFloat 5s ease-in-out infinite;
}

.final-particle.fp1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.final-particle.fp2 {
    top: 20%;
    right: 15%;
    animation-delay: 1s;
}

.final-particle.fp3 {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}

.final-particle.fp4 {
    bottom: 15%;
    right: 10%;
    animation-delay: 3s;
}

.final-particle.fp5 {
    top: 50%;
    left: 50%;
    animation-delay: 4s;
}

@keyframes finalParticleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1) rotate(0deg);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-40px) translateX(20px) scale(1.5) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-20px) translateX(-30px) scale(1.2) rotate(180deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(30px) translateX(15px) scale(0.8) rotate(270deg);
        opacity: 0.9;
    }
}

/* Video Controls */
.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-video-player:hover .video-controls {
    opacity: 1;
}

.play-pause-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.play-pause-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.play-pause-btn .fa-pause {
    display: none;
}

.custom-video-player.playing .play-pause-btn .fa-play {
    display: none;
}

.custom-video-player.playing .play-pause-btn .fa-pause {
    display: block;
}

.progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.video-controls .progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.video-controls .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s ease;
}

.time-display {
    display: flex;
    gap: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.fullscreen-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Video Information Panel */
.video-info-panel {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    height: fit-content;
}

.video-info-panel h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.video-info-panel p {
    margin-bottom: 20px;
    line-height: 1.6;
    opacity: 0.9;
}

.showcase-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.showcase-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.showcase-features i {
    color: #667eea;
    font-size: 0.9rem;
}

.tech-stack h4 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-tag {
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 15px;
    padding: 5px 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.tech-tag:hover {
    background: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .video-showcase-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .scene-title {
        font-size: 2rem;
    }
    
    .floating-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .text-animate {
        font-size: 1.8rem;
    }
    
    .cta-title {
        font-size: 2.2rem;
    }
    
    .mobile-mockup {
        width: 160px;
        height: 280px;
    }
}

/* Enhanced Animation Classes */
.animate-on-scroll[data-animation="fadeInLeft"] {
    transform: translateX(-30px);
}

.animate-on-scroll[data-animation="fadeInRight"] {
    transform: translateX(30px);
}

.animate-on-scroll[data-animation="slideInLeft"] {
    transform: translateX(-50px);
}

.animate-on-scroll[data-animation="slideInRight"] {
    transform: translateX(50px);
}

.animate-on-scroll[data-animation="bounceIn"] {
    transform: scale(0.3);
}

.animate-on-scroll[data-animation="fadeIn"] {
    transform: none;
}

/* New Animation Utility Classes */
.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-bounce {
    animation: bounceIn 1s ease-out;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-rotate {
    animation: rotate360 2s linear infinite;
}

.animate-zoom-in {
    animation: zoomIn 0.8s ease-out;
}

.animate-zoom-out {
    animation: zoomOut 0.8s ease-out;
}

.animate-flip {
    animation: flipInY 1s ease-out;
}

.animate-slide-left {
    animation: slideInFromLeft 0.8s ease-out;
}

.animate-slide-right {
    animation: slideInFromRight 0.8s ease-out;
}

.animate-slide-up {
    animation: slideInFromBottom 0.8s ease-out;
}

.animate-slide-down {
    animation: slideInFromTop 0.8s ease-out;
}

/* Interactive Hover Animations */
.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
    transform: translateY(-2px);
}

.hover-bounce {
    transition: transform 0.3s ease;
}

.hover-bounce:hover {
    animation: pulse 0.6s ease-in-out;
}

/* Staggered Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }

/* Loading Animations */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(99, 102, 241, 0.3);
    border-top: 4px solid #6366f1;
    border-radius: 50%;
    animation: rotate360 1s linear infinite;
}

.loading-dots {
    display: flex;
    gap: 5px;
}

.loading-dot {
    width: 8px;
    height: 8px;
    background: #6366f1;
    border-radius: 50%;
    animation: loadingDots 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loadingDots {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Particle System */
.particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #6366f1, #8b5cf6);
    border-radius: 50%;
    animation: particleFloat 8s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    50% {
        transform: translateY(-100px) translateX(50px) scale(1.5);
        opacity: 0.8;
    }
}

/* Morphing Shapes */
.morphing-shape {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #6366f1, #8b5cf6);
    animation: morphShape 4s ease-in-out infinite;
}

@keyframes morphShape {
    0%, 100% {
        border-radius: 50%;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 0%;
        transform: rotate(90deg);
    }
    50% {
        border-radius: 50% 0%;
        transform: rotate(180deg);
    }
    75% {
        border-radius: 0% 50%;
        transform: rotate(270deg);
    }
}

/* Text Animations */
.text-reveal {
    overflow: hidden;
    position: relative;
}

.text-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #6366f1;
    animation: textReveal 2s ease-out forwards;
}

@keyframes textReveal {
    0% {
        left: 0;
    }
    50% {
        left: 0;
        right: 0;
    }
    100% {
        left: 100%;
    }
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid #6366f1;
    white-space: nowrap;
    animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

/* Background Animations */
.animated-gradient {
    background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Floating Elements */
.floating-element {
    animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Card Flip Animation */
.flip-card {
    perspective: 1000px;
    width: 100%;
    height: 200px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-card-front {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.flip-card-back {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: white;
    transform: rotateY(180deg);
}

/* Progress Animations */
.progress-ring {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}

.progress-ring-circle {
    fill: none;
    stroke: #6366f1;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: progressRing 2s ease-out forwards;
}

@keyframes progressRing {
    to {
        stroke-dashoffset: 0;
    }
}

/* Scroll Triggered Animations */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.scroll-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.scroll-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.scroll-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scroll-zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease;
}

.scroll-zoom-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Social Link Animations */
.social-link-animated {
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-link-animated::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-link-animated:hover::before {
    left: 100%;
}

.social-link-animated:hover {
    transform: translateY(-3px) scale(1.1);
    color: #6366f1;
}

/* Footer Link Animations */
.footer-link-animated {
    position: relative;
    transition: all 0.3s ease;
}

.footer-link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, #6366f1, #8b5cf6);
    transition: width 0.3s ease;
}

.footer-link-animated:hover::after {
    width: 100%;
}

.footer-link-animated:hover {
    color: #6366f1;
    transform: translateX(5px);
}

/* Service Item Animations */
.service-item-animated {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding-left: 15px;
}

.service-item-animated::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: #6366f1;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.service-item-animated:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.service-item-animated:hover {
    color: #6366f1;
    transform: translateX(10px);
}

/* Animated Input Fields */
.animated-input {
    transition: all 0.3s ease;
    position: relative;
}

.animated-input:focus {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    border-color: #6366f1;
}

.animated-input:focus + label {
    color: #6366f1;
    transform: translateY(-5px) scale(0.9);
}

/* Animated Button */
.animated-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.animated-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.animated-button:hover::before {
    left: 100%;
}

.animated-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
}

/* Animated Service Links */
.animated-service-link {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.animated-service-link::after {
    content: '→';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
}

.animated-service-link:hover::after {
    right: 10px;
    opacity: 1;
}

.animated-service-link:hover {
    padding-right: 30px;
    background: linear-gradient(45deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}