/* Specific position fix for the Barbershop image to show both heads */
.barber-position-fix {
    object-position: 50% 10% !important;
}

/* Fix for Rotated Images (Executive haircut.JPG) */
.barber-rotate-fix {
    transform: rotate(-90deg) scale(1.9) translateX(-60px);
    object-position: 55% 50%;
    /* Balanced view to show both Barber (Top) and Client (Bottom) */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Maintain rotation on hover, just scale up slightly more */
.about-img:hover .barber-rotate-fix,
.service-card:hover .barber-rotate-fix,
.feature-card:hover .barber-rotate-fix {
    transform: rotate(-90deg) scale(1.95) translateX(-60px) !important;
}

@media (max-width: 768px) {
    .barber-position-fix {
        object-position: 50% 10% !important;
    }

    .barber-rotate-fix {
        transform: rotate(-90deg) scale(1.9) translateX(-50px);
        object-position: 55% 50%;
    }

    .about-img:hover .barber-rotate-fix,
    .service-card:hover .barber-rotate-fix,
    .feature-card:hover .barber-rotate-fix {
        transform: rotate(-90deg) scale(1.95) translateX(-50px) !important;
    }
}