/* =========================================
   Custom Styles for MG Detailing
========================================= */

/* 1. Custom Scrollbar for a premium feel */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000000; /* Deep black track */
}

::-webkit-scrollbar-thumb {
    background: #2B54D1; /* Brand blue thumb */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1e3a8a; /* Darker blue on hover */
}

/* 2. Glassmorphism effect for the service cards */
.glass-card {
    /* Slightly transparent background */
    background: rgba(30, 30, 30, 0.7);
    /* The blur effect behind the card */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 3. Smooth fade-in animation for page load (we'll trigger this with JS later, but define it here) */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, visibility;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* 4. A subtle floating animation (you can add the class 'float-anim' to any image or icon) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.float-anim {
    animation: float 6s ease-in-out infinite;
}