/* 方案5: 边框下划线 */
.nav-link-5 {
    position: relative;
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link-5::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: -2px;
    left: 0;
    border-bottom: 2px solid #818CF8;
    transition: all 0.3s ease;
    opacity: 1;
}

.nav-link-1 {
    position: relative;
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link-1:hover {
    color: #22D3EE;
}

.nav-link-1::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: -2px;
    left: 0;
    border-bottom: 2px solid #22D3EE;
    transition: all 0.3s ease;
    opacity: 0;
}
.nav-link-1:hover i.bi {
    color: #22D3EE;
}
.nav-link-1:hover::after,
.nav-link-1.active::after {
    height: 2px;
    opacity: 1;
}

.nav-link-2 {
    position: relative;
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link-2:hover {
    color: #4ADE80;
}

.nav-link-2::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: -2px;
    left: 0;
    border-bottom: 2px solid #4ADE80;
    transition: all 0.3s ease;
    opacity: 0;
}
.nav-link-2:hover i.bi {
    color: #4ADE80;
}
.nav-link-2:hover::after,
.nav-link-2.active::after {
    height: 2px;
    opacity: 1;
}
.nav-link-3 {
    position: relative;
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link-3:hover {
    color: #FBBF24;
}

.nav-link-3::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: -2px;
    left: 0;
    border-bottom: 2px solid #FBBF24;
    transition: all 0.3s ease;
    opacity: 0;
}
.nav-link-3:hover i.bi {
    color: #FBBF24;
}
.nav-link-3:hover::after,
.nav-link-3.active::after {
    height: 2px;
    opacity: 1;
}

.nav-link-6 {
    position: relative;
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}
.nav-link-6:hover {
    color: #0066cc;
}

.nav-link-6::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: -2px;
    left: 0;
    border-bottom: 2px solid #0066cc;
    transition: all 0.3s ease;
    opacity: 0;
}
.nav-link-6:hover i.bi {
    color: #0066cc;
}
.nav-link-6:hover::after,
.nav-link-6.active::after {
    height: 2px;
    opacity: 1;
}

.nav-link-7 {
    position: relative;
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}
.nav-link-7:hover {
    color: #993333;
}

.nav-link-7::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: -2px;
    left: 0;
    border-bottom: 2px solid #993333;
    transition: all 0.3s ease;
    opacity: 0;
}
.nav-link-7:hover i.bi {
    color: #993333;
}
.nav-link-7:hover::after,
.nav-link-7.active::after {
    height: 2px;
    opacity: 1;
}

.br1:hover{
    --bs-border-opacity: 1;
    border-color: #4ADE80 !important
}
.br2{
    --bs-border-opacity: 1;
    border-color: #818CF8 !important
}
.br3:hover{
    --bs-border-opacity: 1;
    border-color: #0b5ed7 !important
}
.br4:hover{
    --bs-border-opacity: 1;
    border-color: #FBBF24 !important
}

.btninga:hover{
    background-color: #818CF8!important;
    color: white!important;
}

.yuyuyia{
    font-weight: 700
}
.yuyuyib{
    color: #818CF8
}
.aarryuj{
    border-radius: 20px!important;
}
.yuyuyid{
    color: white!important;background-color: #818CF8!important;
}

.yuyuyie{
    padding: 6px 12px!important
}
.yuyuyif{
    color: #DC2626;background-color: #FEE2E2;padding: 6px 12px;font-weight: 500
}
.yuyuyig{
    font-size: 14px
}
.yuyuyih{
    color: #0A192F!important;
}
.yuyuyii{

}
.yuyuyij{

}
.yuyuyik{

}
.yuyuyil{

}