/* Custom CSS for elements not fully covered by Tailwind Utilities */

/* Smooth Scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Glassmorphism Effect for boxes */
.glass-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.glass-box:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(99, 102, 241, 0.3); /* Brand Accent Color */
}

/* Skill Box Styling */
.skill-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    cursor: default;
}

.skill-box:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: #6366f1; /* Brand accent */
}

/* Skill Icons */
.skill-icon {
    font-size: 2.5rem; /* 40px */
    color: #94a3b8; /* Slate-400 */
    transition: color 0.3s ease;
}

.skill-box:hover .skill-icon {
    color: #6366f1; /* Brand accent */
}

/* Skill Name Text */
.skill-name {
    font-weight: 600;
    color: #e2e8f0; /* Slate-200 */
    font-size: 0.9rem;
}

/* Navbar Scrolled State */
.scrolled {
    background-color: rgba(5, 8, 22, 0.9); /* brand-darker with opacity */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}