.npj-advantage-bar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
padding:24px;
background:#07182d;
border-top:4px solid #c6a25a;
border-bottom:4px solid #c6a25a;
}

.npj-advantage-item{
position:relative;
background:#0c2f57;
padding:18px 12px;
text-align:center;
overflow:visible;
border:1px solid rgba(198,162,90,.35);
transition:.25s;
}

.npj-advantage-item:hover{
transform:translateY(-3px);
}

.npj-advantage-item img{
width:52px;
height:52px;
display:block;
margin:0 auto 10px;
}

.npj-advantage-item span{
display:block;
color:#fff;
font-family:Georgia,serif;
font-size:17px;
font-weight:700;
}

.npj-advantage-hover{
position:absolute;
left:50%;
bottom:calc(100% + 12px);
transform:translateX(-50%);
width:245px;
padding:14px 16px;
background:#050b14;
color:#fff;
border-top:3px solid #c6a25a;
box-shadow:0 14px 30px rgba(0,0,0,.35);
font-size:14px;
line-height:1.55;
opacity:0;
visibility:hidden;
transition:.25s;
z-index:100;
}

.npj-advantage-hover:after{
content:"";
position:absolute;
left:50%;
top:100%;
transform:translateX(-50%);
border:8px solid transparent;
border-top-color:#050b14;
}

.npj-advantage-item:hover .npj-advantage-hover{
opacity:1;
visibility:visible;
}

@media(max-width:980px){
.npj-advantage-bar{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
.npj-advantage-bar{grid-template-columns:1fr;}
.npj-advantage-hover{
position:static;
width:auto;
margin-top:12px;
opacity:1;
visibility:visible;
transform:none;
}
.npj-advantage-hover:after{display:none;}
}