/* ==========================================
   RESPONSIVE DESIGN
   NIJES Website
========================================== */


/* ==========================================
   LARGE LAPTOPS (1200px)
========================================== */

@media (max-width: 1200px) {

    .hero-container{
        gap:60px;
    }

    .hero-content h1{
        font-size:46px;
    }

    .hero-image img{
        width:380px;
    }

}


/* ==========================================
   TABLETS & SMALL LAPTOPS (992px)
========================================== */

@media (max-width: 992px) {

    /* ==========================
       NAVBAR
    ========================== */

    .navbar{
        flex-wrap:wrap;
        justify-content:space-between;
        align-items:center;
        gap:20px;
    }

    .logo{
        width:100%;
        justify-content:center;
    }

    .nav-links{
        width:100%;
        justify-content:center;
        gap:30px;
        flex-wrap:wrap;
    }

    .nav-actions{
        display:none;
    }

    /* ==========================
       HERO
    ========================== */

    .hero{
        padding:40px 0 60px;
        text-align:center;
    }

    .hero-container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero-content{
        order:2;
    }

    .hero-image{
        display:flex;
        order:1;
        justify-content:center;
        align-items:center;
    }

    .hero-image img{
        width:300px;
        display:block;
        margin:auto;
    }

    .hero-content h1{
        font-size:40px;
        max-width:100%;
        margin:0 auto 25px;
    }

    .hero-description{
        max-width:100%;
        margin:0 auto 25px;
    }

    .hero-buttons{
        justify-content:center;
    }

}


/* ==========================================
   MOBILE DEVICES (768px)
========================================== */

@media (max-width: 768px) {

    .navbar{
        padding:15px 0;
    }

    .logo{
        gap:15px;
    }

    .logo img{
        width:60px;
        height:60px;
    }

    .logo h2{
        font-size:28px;
    }

    .logo span{
        font-size:10px;
        letter-spacing:1px;
    }

    .nav-links{
        gap:20px;
    }

    .nav-links a{
        font-size:15px;
    }

    .hero{
        padding:35px 0 50px;
    }

    .hero-content h1{
        font-size:34px;
    }

    .hero-description{
        font-size:16px;
        line-height:1.8;
    }

    .hero-tagline{
        font-size:20px;
    }

    .hero-image img{
        width:240px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:15px;
    }

    .btn-primary,
    .btn-secondary{
        width:220px;
        text-align:center;
    }

}


/* ==========================================
   SMALL MOBILE DEVICES (576px)
========================================== */

@media (max-width: 576px) {

    .container{
        width:92%;
    }

    .logo{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

    .logo h2{
        font-size:24px;
    }

    .logo span{
        font-size:10px;
    }

    .nav-links{
        gap:15px;
    }

    .nav-links a{
        font-size:14px;
    }

    .hero{
        padding:30px 0 45px;
    }

    .hero-content h1{
        font-size:30px;
    }

    .journal-badge{
        font-size:12px;
        padding:8px 16px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-tagline{
        font-size:18px;
    }

    .hero-image img{
        width:200px;
    }

}

/* ==========================================
   JOURNAL HIGHLIGHTS
========================================== */

@media (max-width:1200px){

    .highlights-grid{

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

    }

}

@media (max-width:768px){

    .highlights-grid{

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

        gap:20px;

    }

}

@media (max-width:576px){

    .highlights-grid{

        grid-template-columns:1fr;

    }

}

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

@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

text-align:center;

}

.about-content{

order:2;

}

.about-image{

order:1;

}

.about-features{

grid-template-columns:1fr;

}

.feature-item{

justify-content:center;

}

}
/* ==========================================
   RESEARCH RESPONSIVE
========================================== */

@media(max-width:1200px){

.research-grid{

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

}

}

@media(max-width:768px){

.research-grid{

grid-template-columns:1fr;

}

}

/* ==========================================
   KEY HIGHLIGHTS RESPONSIVE
========================================== */

@media(max-width:992px){

    .highlights-grid{

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

    }

}

@media(max-width:768px){

    .highlights-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
   KEY HIGHLIGHTS RESPONSIVE
========================================== */

@media(max-width:1200px){

    .highlights-grid{

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

    }

}

@media(max-width:768px){

    .highlights-grid{

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

    }

}

@media(max-width:576px){

    .highlights-grid{

        grid-template-columns:1fr;

    }

}

/* Research */

@media(max-width:992px){

    .research-grid{

        grid-template-columns:1fr;

    }

}

/* Publication Timeline */

@media(max-width:992px){

    .timeline-grid{

        grid-template-columns:1fr;

    }

}
/* Publication Features */

@media(max-width:992px){

    .features-grid{

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

    }

}

@media(max-width:576px){

    .features-grid{

        grid-template-columns:1fr;

    }

}

/* Publication Ethics */

@media(max-width:992px){

    .ethics-grid{

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

    }

}

@media(max-width:576px){

    .ethics-grid{

        grid-template-columns:1fr;

    }

}

/* Author Guidelines */

@media(max-width:992px){

.guidelines-grid{

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

}

}

@media(max-width:576px){

.guidelines-grid{

grid-template-columns:1fr;

}

}

/* Contact */

@media(max-width:768px){

.contact-grid{

grid-template-columns:1fr;

}

}