/* ==========================================================
   Journal Statistics v2.0 Final
========================================================== */

#journalStatistics{

    width:100%;

    margin:50px auto;

    font-family:Arial,Helvetica,sans-serif;

}

/* ==========================================================
   HEADER
========================================================== */

.js-header{

    text-align:center;

    margin-bottom:40px;

}

.js-title{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#1F2937;

    letter-spacing:.3px;

}

.js-subtitle{

    margin-top:10px;

    font-size:22px;

    color:#6B7280;

}

/* ==========================================================
   DASHBOARD
========================================================== */

.js-dashboard{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:45px;

}

/* ==========================================================
   CARD
========================================================== */

.js-card{

    position:relative;

    overflow:hidden;

    width:100%;

    min-height:170px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:28px 20px;

    text-align:center;

    box-sizing:border-box;

    transition:all .30s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

/* ==========================================================
   CARD
========================================================== */

.js-card{

    position:relative;

    overflow:hidden;

    width:100%;

    min-height:170px;

    background:#FFFFFF;

    border-radius:20px;

    border:1px solid #ECECEC;

    padding:20px 15px;

    text-align:center;

    box-sizing:border-box;

    transition:all .35s ease;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.js-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}
.js-card:before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

}
.card-articles:before{

    background:#2563EB;

}

.card-authors:before{

    background:#7C3AED;

}

.card-institutions:before{

    background:#F97316;

}

.card-countries:before{

    background:#06B6D4;

}

.card-issues:before{

    background:#16A34A;

}

.card-views:before{

    background:#64748B;

}

.card-downloads:before{

    background:#0D9488;

}

/* ==========================================================
   ICON
========================================================== */

.js-icon{

    font-size:40px;

    line-height:1;

    margin-bottom:10px;

}

/* ==========================================================
   LABEL
========================================================== */

.js-label{

    font-size:12px;

    font-weight:500;

    color:#555;

}

/* ==========================================================
   VALUE
========================================================== */

.js-value{

    margin-bottom:10px;

    font-size:20px;

    font-weight:700;

    color:#1565A9;

    line-height:1;
     letter-spacing:-0.5px;

    white-space:nowrap;


}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .js-dashboard{

        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:900px){

    .js-dashboard{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:600px){

    .js-dashboard{

        grid-template-columns:1fr;

    }

    .js-title{

        font-size:34px;

    }

    .js-subtitle{

        font-size:16px;

    }

    .js-icon{

        font-size:48px;

    }

    .js-value{

        font-size:30px;

    }

}