body { font-family: 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent }
.primary-color { background-color: #14416a }
.secondary-color { background-color: #f7c72b }
.accent-color { background-color: #e74c3c }
.hero-pattern { background-color: #14416a; 
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 
}
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) }
.bottom-nav { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) }
.mobile-menu { transition: transform 0.3s ease-in-out }
.mobile-menu.hidden { transform: translateX(-100%) }
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: #f1f1f1 }
::-webkit-scrollbar-thumb { background: #14416a; border-radius: 3px }
.search-results { max-height: 300px; overflow-y: auto }

@media (min-width: 768px) {
  .quick-links-grid { grid-template-columns: repeat(6, 1fr) }
}

@media (max-width: 400px) {
  .quick-links-grid { grid-template-columns: repeat(6, 1fr) }
}

/*-- Tom Select --*/
.ts-wrapper.single .ts-control { width: 100%; padding: 0.7rem 2.5rem 0.7rem 0.75rem; background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 0.5rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 1rem; color: #14416a; cursor: pointer; outline: none; box-sizing: border-box; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2314416a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3C/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.25rem 1.25rem }
.ts-wrapper.single.focus .ts-control { border-color: #14416a; box-shadow: 0 0 0 2px rgba(20, 65, 106, 0.2) }
.ts-dropdown { margin-top: 0.25rem; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); overflow: hidden; z-index: 50; font-size: 0.875rem; color: #334155 }
.ts-dropdown .option { padding: 0.5rem 1rem; cursor: pointer }
.ts-dropdown .option:hover, .ts-dropdown .active { background-color: #e6edf4; color: #14416a }
.ts-wrapper.single .ts-control input { font-size: 0.875rem !important; color: #14416a !important }