html {
    scroll-behavior: smooth;
}

/* Custom scrollbar for Webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
::-webkit-scrollbar-thumb {
    background: #F59E0B; 
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d97706; 
}

/* Hover Animations */
.text-hover-effect {
    transition: all 0.3s ease;
    display: inline-block;
}

.text-hover-effect:hover {
    color: #F59E0B; /* brand-yellow */
    transform: translateX(5px);
}

.card-hover-effect {
    transition: all 0.3s ease;
}

.card-hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Task 1: Image Hover Effects (excluding logo which has its own) */
/* Apply to all images except those explicitly excluded or SVG icons */
img:not(.logo-img) {
    transition: transform 0.3s ease, filter 0.3s ease;
}

img:not(.logo-img):hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

/* Task 2: Logo "Sweet and Sour" (Jelly/Bounce) Hover Effect */
@keyframes jelly {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
    100% { transform: scale(1, 1); }
}

.logo-img:hover {
    animation: jelly 0.6s both;
}