/* Hero Background Image Enhancement */
.hero-section {
    background: 
        linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%231e3a8a;stop-opacity:0.1"/><stop offset="100%" style="stop-color:%23f59e0b;stop-opacity:0.1"/></linearGradient></defs><rect width="1200" height="800" fill="url(%23bg)"/><g opacity="0.3"><circle cx="200" cy="200" r="100" fill="%23f59e0b"/><circle cx="800" cy="150" r="80" fill="%231e3a8a"/><circle cx="400" cy="500" r="120" fill="%230ea5e9"/><circle cx="1000" cy="400" r="90" fill="%23f59e0b"/></g></svg>');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Service Card Images */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(30, 58, 138, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(30, 58, 138, 0.1)" stroke-width="0.5"/></pattern></defs><rect width="400" height="300" fill="url(%23grid)"/></svg>');
    background-size: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

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

/* Testimonial Background Images */
.testimonial-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="40" fill="rgba(245, 158, 11, 0.1)">"</text></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

/* About Section Background */
.about-section {
    background: 
        linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><radialGradient id="dots" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%231e3a8a;stop-opacity:0.1"/><stop offset="100%" style="stop-color:%23f59e0b;stop-opacity:0.05"/></radialGradient></defs><rect width="1200" height="600" fill="url(%23dots)"/><g opacity="0.3"><circle cx="100" cy="100" r="2" fill="%231e3a8a"/><circle cx="300" cy="200" r="2" fill="%23f59e0b"/><circle cx="500" cy="150" r="2" fill="%230ea5e9"/><circle cx="700" cy="300" r="2" fill="%231e3a8a"/><circle cx="900" cy="180" r="2" fill="%23f59e0b"/><circle cx="1100" cy="250" r="2" fill="%230ea5e9"/></g></svg>');
    background-size: cover;
    background-position: center;
}

/* Contact Section Enhancement */
.contact-section {
    background: 
        linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="network" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(245, 158, 11, 0.3)"/><line x1="20" y1="20" x2="40" y2="20" stroke="rgba(30, 58, 138, 0.2)" stroke-width="0.5"/><line x1="20" y1="20" x2="20" y2="40" stroke="rgba(30, 58, 138, 0.2)" stroke-width="0.5"/></pattern></defs><rect width="1200" height="600" fill="url(%23network)"/></svg>');
    background-size: cover;
    background-attachment: fixed;
}

/* Statistics Section Visual Enhancement */
.stats-section {
    background: 
        linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(14, 165, 233, 0.8) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><defs><pattern id="stats" width="60" height="60" patternUnits="userSpaceOnUse"><rect width="60" height="60" fill="none" stroke="rgba(245, 158, 11, 0.2)" stroke-width="0.5"/><circle cx="30" cy="30" r="3" fill="rgba(245, 158, 11, 0.3)"/></pattern></defs><rect width="1200" height="400" fill="url(%23stats)"/></svg>');
    background-size: cover;
    background-position: center;
}

/* Portfolio Section Images */
.portfolio-section {
    background: 
        linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><linearGradient id="portfolio-bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%231e3a8a;stop-opacity:0.05"/><stop offset="100%" style="stop-color:%23f59e0b;stop-opacity:0.05"/></linearGradient></defs><rect width="1200" height="600" fill="url(%23portfolio-bg)"/><g opacity="0.1"><polygon points="100,100 200,100 150,50" fill="%231e3a8a"/><polygon points="300,200 400,200 350,150" fill="%23f59e0b"/><polygon points="500,150 600,150 550,100" fill="%230ea5e9"/></g></svg>');
    background-size: cover;
    background-position: center;
}

/* Interactive Image Hover Effects */
.image-hover-effect {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-hover-effect:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.image-hover-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(30, 58, 138, 0.8), rgba(245, 158, 11, 0.8));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.image-hover-effect:hover::before {
    opacity: 1;
}

.image-hover-effect .overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-hover-effect:hover .overlay-content {
    opacity: 1;
}

/* Animated Icons */
.animated-icon {
    display: inline-block;
    animation: iconFloat 3s ease-in-out infinite;
}

.animated-icon:nth-child(2) {
    animation-delay: 0.5s;
}

.animated-icon:nth-child(3) {
    animation-delay: 1s;
}

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

/* Enhanced Logo Animation */
.logo-container:hover .logo-icon {
    animation: logoGlow 2s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.8));
    }
}

/* Section Dividers */
.section-divider {
    height: 100px;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    position: relative;
    overflow: hidden;
}

.section-divider::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 1200 100"><path d="M0,50 Q300,10 600,50 T1200,50 L1200,100 L0,100 Z" fill="rgba(245, 158, 11, 0.1)"/></svg>');
    background-size: cover;
    animation: waveMove 10s ease-in-out infinite;
}

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

/* Mobile Optimizations */
@media (max-width: 768px) {
    .hero-section {
        background-attachment: scroll;
    }
    
    .contact-section {
        background-attachment: scroll;
    }
    
    .image-hover-effect {
        transform: none;
    }
    
    .image-hover-effect:hover {
        transform: none;
    }
}