/* Existing CSS (from index.php, howto.php, and about_us.php) */
.hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.step-number { /* from howto.php */
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.feature-icon { /* from about_us.php */
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}
.fade-in {
    /* Existing fade-in styles */
    opacity: 0;
    transform: translateY(20px); /* Changed translateY to 20px for this page's animation */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Changed duration to 0.5s for this page's animation */
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); } /* Changed translateY to 20px */
    to { opacity: 1; transform: translateY(0); }
}

/* New CSS from Product_Detail.php */
.thumbnail-active {
    border: 3px solid #3B82F6;
}