.hero-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.image-container {
    position: relative;
    width: 400px;
    height: 400px;
    animation: float 6s ease-in-out infinite;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

/* @keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(-2deg);
    }
    75% {
        transform: translateY(-5px) rotate(2deg);
    }
} */

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.image-decoration {
    position: absolute;
    inset: -15px;
    border: 3px solid transparent;
    border-radius: 25px;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
    background-size: 300% 300%;
    animation: gradientShift 4s ease infinite;
    z-index: 1;
    padding: 3px;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.image-container:hover {
    animation-play-state: paused;
    transform: scale(1.05) translateY(-5px);
}

.image-container:hover .image-decoration {
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6));
}

@media (max-width: 768px) {
    .image-container {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 480px) {
    .image-container {
        width: 250px;
        height: 250px;
    }
    
    @keyframes float {
        0%, 100% { 
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-8px);
        }
    }
}