/* Desktop Layout Fix */
@media (min-width: 576px) {
    .desktop-left {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 58.333333% !important;
        height: 100vh !important;
        overflow: hidden !important;
        z-index: 1 !important;
    }
    
    .mobile-right {
        margin-left: 58.333333% !important;
        width: 41.666667% !important;
        height: 100vh !important;
        overflow-y: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }
}

@media (min-width: 768px) {
    .desktop-left {
        width: 50% !important;
    }
    .mobile-right {
        margin-left: 50% !important;
        width: 50% !important;
    }
}

@media (min-width: 992px) {
    .desktop-left {
        width: 58.333333% !important;
    }
    .mobile-right {
        margin-left: 58.333333% !important;
        width: 41.666667% !important;
    }
}

@media (min-width: 1200px) {
    .desktop-left {
        width: 66.666667% !important;
    }
    .mobile-right {
        margin-left: 66.666667% !important;
        width: 33.333333% !important;
    }
}

@media (min-width: 1400px) {
    .desktop-left {
        width: 75% !important;
    }
    .mobile-right {
        margin-left: 75% !important;
        width: 25% !important;
    }
}

/* Remove white background from DIVA logo */
.diva-logo {
    background: transparent !important;
    mix-blend-mode: multiply !important;
    filter: contrast(1.2) !important;
}

/* Force transparent background on PNG images */
img[src*="DIVA.PNG"] {
    background: transparent !important;
    mix-blend-mode: multiply !important;
}

/* Enhanced Home Section Animations */
@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

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

@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 pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Enhanced Button Hover */
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,123,255,0.4) !important;
}

/* Enhanced Profile Image Hover */
.hover-glow:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 30px rgba(212,175,55,0.6) !important;
    transition: all 0.4s ease !important;
}

/* Responsive Names Design */
@media (max-width: 576px) {
    .names-container h2 {
        font-size: 2.8rem !important;
    }
    .names-container .love-symbol {
        font-size: 2rem !important;
    }
    .names-container {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* Enhanced Heartbeat Animation */
@keyframes heartbeat {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        filter: drop-shadow(0 2px 4px rgba(231,76,60,0.3));
    }
    25% { 
        transform: scale(1.1) rotate(-2deg); 
        filter: drop-shadow(0 4px 8px rgba(231,76,60,0.4));
    }
    75% { 
        transform: scale(1.1) rotate(2deg); 
        filter: drop-shadow(0 4px 8px rgba(231,76,60,0.4));
    }
}

/* Sparkle Animation */
@keyframes sparkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}