.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.about-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}
.about-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 86, 210, 0.06) !important;
}
.dark .about-card {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
}
.dark .about-card:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important;
}

/* Accent Borders */
.about-card.border-t-primary {
    border-top: 4px solid #0040a1 !important;
}
.about-card.border-t-accent-gold {
    border-top: 4px solid #F7A400 !important;
}
.about-card.border-t-teal {
    border-top: 4px solid #14b8a6 !important;
}
.about-card.border-t-purple {
    border-top: 4px solid #a855f7 !important;
}

.about-card.border-b-primary {
    border-bottom: 4px solid #0040a1 !important;
}
.about-card.border-b-accent-gold {
    border-bottom: 4px solid #F7A400 !important;
}

/* Soft gradients for Core Values cards on hover */
.about-card-val-1:hover {
    background: linear-gradient(180deg, #faf8ff 0%, rgba(0, 64, 161, 0.04) 100%) !important;
}
.dark .about-card-val-1:hover {
    background: linear-gradient(180deg, #111827 0%, rgba(0, 64, 161, 0.08) 100%) !important;
}

.about-card-val-2:hover {
    background: linear-gradient(180deg, #faf8ff 0%, rgba(247, 164, 0, 0.04) 100%) !important;
}
.dark .about-card-val-2:hover {
    background: linear-gradient(180deg, #111827 0%, rgba(247, 164, 0, 0.08) 100%) !important;
}

.about-card-val-3:hover {
    background: linear-gradient(180deg, #faf8ff 0%, rgba(0, 64, 161, 0.04) 100%) !important;
}
.dark .about-card-val-3:hover {
    background: linear-gradient(180deg, #111827 0%, rgba(0, 64, 161, 0.08) 100%) !important;
}

.sticky-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* Dark Mode Overrides */
.dark body, .dark main {
    background-color: #0b0f19 !important;
    color: #f1f5f9 !important;
}
.dark .bg-surface,
.dark .bg-white,
.dark .bg-surface-container-lowest {
    background-color: #111827 !important;
    color: #f1f5f9 !important;
}
.dark .bg-surface-container {
    background-color: #1f2937 !important;
}
.dark .bg-surface-container-low {
    background-color: #0b0f19 !important;
}
.dark .bg-surface-container-high {
    background-color: #1e293b !important;
}
.dark .bg-surface-container-highest {
    background-color: #0f172a !important;
}
.dark .text-on-surface,
.dark .text-primary,
.dark .text-navy-elite,
.dark h1, .dark h2, .dark h3, .dark h4 {
    color: #ffffff !important;
}
.dark .text-on-surface-variant {
    color: #94a3b8 !important;
}
.dark .border-border-subtle,
.dark .border-outline-variant {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.dark footer {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}
.dark footer h4, .dark footer .font-bold {
    color: #ffffff !important;
}
.dark footer .text-on-surface-variant {
    color: #94a3b8 !important;
}

/* Standard Glass Nav Styling */
.glass-nav {
    box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background-color: rgba(255, 255, 255, 1) !important;
}
.dark .glass-nav {
    box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}