.main-logo {
    max-width: 250px;
    height: auto;
    box-shadow: 
        0 15px 30px rgba(26, 95, 122, 0.2),
        0 0 20px rgba(212, 175, 55, 0.3);
    transition: all 0.6s ease;
    background: linear-gradient(
        145deg, 
        rgba(255,255,255,0.1), 
        rgba(0,0,0,0.1)
    );
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    border: 2px solid var(--primary-color);
    transform: perspective(1000px) rotateY(-5deg);
}

.main-logo::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg, 
        rgba(212, 175, 55, 0.1), 
        rgba(26, 95, 122, 0.1)
    );
    transform: rotate(-45deg);
    opacity: 0.3;
    transition: all 0.6s ease;
}

.main-logo:hover {
    transform: 
        scale(1.05) 
        perspective(1000px) 
        rotateY(10deg) 
        translateZ(50px);
    box-shadow: 
        0 25px 50px rgba(26, 95, 122, 0.3),
        0 0 30px rgba(212, 175, 55, 0.5);
    border-color: var(--secondary-color);
}

.main-logo:hover::before {
    opacity: 0.5;
    transform: rotate(45deg);
}

@media (max-width: 768px) {
    .main-logo {
        max-width: 200px;
        transform: perspective(500px) rotateY(-3deg);
    }
}