/* ==========================================================
   IJMR PREMIUM RESEARCH HERO HEADER
   Insight Journal of Multidisciplinary Research
   ========================================================== */

/* =========================
   MAIN HEADER
========================= */

.pkp_structure_head{
    position:relative !important;
    overflow:hidden !important;
    border:0 !important;

    background:
        radial-gradient(circle at 86% 18%,
            rgba(31,224,200,.22),
            transparent 28%),
        radial-gradient(circle at 68% 85%,
            rgba(44,123,229,.16),
            transparent 30%),
        linear-gradient(
            115deg,
            #041525 0%,
            #082d49 48%,
            #075c68 100%
        ) !important;
}


/* =========================
   MOVING SCIENTIFIC GRID
========================= */

.pkp_structure_head::before{
    content:"" !important;
    position:absolute !important;
    inset:-80px !important;
    pointer-events:none !important;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:48px 48px !important;

    transform:perspective(500px) rotateX(58deg) scale(1.5) !important;
    transform-origin:center bottom !important;

    opacity:.55 !important;

    animation:ijmrGridMove 18s linear infinite !important;
}

@keyframes ijmrGridMove{
    from{
        background-position:0 0,0 0;
    }
    to{
        background-position:48px 48px,48px 48px;
    }
}


/* =========================
   SCIENCE ORBIT GRAPHIC
========================= */

.pkp_structure_head::after{
    content:"∑   ∞   π   ∫" !important;

    position:absolute !important;

    right:55px !important;
    top:42px !important;

    width:245px !important;
    height:145px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:
        1px solid
        rgba(113,242,225,.18) !important;

    border-radius:50% !important;

    color:
        rgba(187,255,247,.22) !important;

    font-size:25px !important;
    font-weight:600 !important;

    letter-spacing:18px !important;

    box-shadow:
        0 0 0 28px rgba(50,224,202,.025),
        0 0 0 55px rgba(50,224,202,.018),
        inset 0 0 45px rgba(34,224,202,.05) !important;

    transform:rotate(-12deg) !important;

    animation:
        ijmrOrbitFloat
        7s
        ease-in-out
        infinite !important;

    pointer-events:none !important;
}


@keyframes ijmrOrbitFloat{

    0%,100%{
        transform:
            rotate(-12deg)
            translateY(0);
    }

    50%{
        transform:
            rotate(-8deg)
            translateY(-10px);
    }
}


/* =========================
   USER / ADMIN BAR
========================= */

.pkp_navigation_user_wrapper{

    position:relative !important;
    z-index:30 !important;

    background:
        rgba(2,17,30,.52) !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.06) !important;

    backdrop-filter:
        blur(8px) !important;
}

.pkp_navigation_user > li > a{
    color:#ffffff !important;
}

.pkp_navigation_user > li > a:hover{
    color:#59e8d6 !important;
}


/* =========================
   TITLE WRAPPER
========================= */

.pkp_site_name_wrapper{

    position:relative !important;
    z-index:10 !important;

    background:
        transparent !important;
}


/* =========================
   HERO HEIGHT
========================= */

.pkp_site_name{

    position:relative !important;

    margin:0 !important;

    padding:
        58px
        370px
        58px
        62px !important;

    min-height:105px !important;
}


/* =========================
   TITLE
========================= */

.pkp_site_name .is_text{

    position:relative !important;

    display:flex !important;
    align-items:center !important;

    max-width:880px !important;

    margin:0 !important;

    color:#ffffff !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:35px !important;

    line-height:1.22 !important;

    font-weight:800 !important;

    letter-spacing:-.3px !important;

    text-decoration:none !important;

    text-shadow:
        0 5px 20px
        rgba(0,0,0,.28) !important;

    animation:
        ijmrTitleReveal
        .9s
        cubic-bezier(.2,.8,.2,1)
        both !important;
}


@keyframes ijmrTitleReveal{

    from{
        opacity:0;
        transform:
            translateY(18px);
    }

    to{
        opacity:1;
        transform:
            translateY(0);
    }
}


/* =========================
   PREMIUM IJMR LOGO
========================= */

.pkp_site_name .is_text::before{

    content:"IJMR" !important;

    flex:
        0 0 104px !important;

    width:
        104px !important;

    height:
        104px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    margin-right:
        28px !important;

    box-sizing:
        border-box !important;

    border-radius:
        28px !important;

    color:
        #ffffff !important;

    font-size:
        23px !important;

    font-weight:
        900 !important;

    letter-spacing:
        1.5px !important;

    background:
        linear-gradient(
            145deg,
            rgba(38,221,199,.94),
            rgba(8,112,132,.88)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.38) !important;

    backdrop-filter:
        blur(10px) !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.5),
        0 0 35px rgba(47,223,202,.18) !important;

    animation:
        ijmrLogoEntrance
        .8s ease both,
        ijmrLogoFloat
        5s ease-in-out 1s infinite !important;
}


@keyframes ijmrLogoEntrance{

    from{
        opacity:0;
        transform:
            scale(.75)
            rotate(-8deg);
    }

    to{
        opacity:1;
        transform:
            scale(1)
            rotate(0);
    }
}


@keyframes ijmrLogoFloat{

    0%,100%{
        transform:
            translateY(0);
    }

    50%{
        transform:
            translateY(-7px);
    }
}


/* =========================
   TITLE ACCENT LINE
========================= */

.pkp_site_name .is_text::after{

    content:"" !important;

    position:absolute !important;

    left:132px !important;

    bottom:-17px !important;

    width:105px !important;

    height:4px !important;

    border-radius:100px !important;

    background:
        linear-gradient(
            90deg,
            #37e1cb,
            #75f4e4,
            transparent
        ) !important;

    box-shadow:
        0 0 16px
        rgba(55,225,203,.3) !important;

    animation:
        ijmrLineGrow
        1.3s ease both !important;
}


@keyframes ijmrLineGrow{

    from{
        width:0;
        opacity:0;
    }

    to{
        width:105px;
        opacity:1;
    }
}


/* =========================
   MOVING LIGHT
========================= */

.pkp_site_name_wrapper::after{

    content:"" !important;

    position:absolute !important;

    top:-20% !important;
    left:-250px !important;

    width:170px !important;
    height:140% !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.065),
            transparent
        ) !important;

    transform:
        skewX(-20deg) !important;

    animation:
        ijmrShine
        8s ease-in-out
        infinite !important;

    pointer-events:none !important;
}


@keyframes ijmrShine{

    0%,65%{
        left:-250px;
    }

    100%{
        left:120%;
    }
}


/* =========================
   MODERN NAVIGATION
========================= */

.pkp_navigation_primary_wrapper{

    position:relative !important;

    z-index:25 !important;

    background:
        rgba(255,255,255,.97) !important;

    border-bottom:
        3px solid
        #21c6b2 !important;

    box-shadow:
        0 7px 24px
        rgba(3,28,47,.11) !important;

    backdrop-filter:
        blur(12px) !important;
}


.pkp_navigation_primary > li > a{

    position:relative !important;

    padding:
        19px
        20px !important;

    color:
        #082a43 !important;

    font-size:
        14px !important;

    font-weight:
        750 !important;

    letter-spacing:
        .2px !important;

    transition:
        all .28s ease !important;
}


.pkp_navigation_primary > li > a::after{

    content:"" !important;

    position:absolute !important;

    left:50% !important;

    bottom:8px !important;

    width:0 !important;

    height:3px !important;

    border-radius:20px !important;

    background:
        linear-gradient(
            90deg,
            #0f8994,
            #27d5c0
        ) !important;

    transform:
        translateX(-50%) !important;

    transition:
        width .3s ease !important;
}


.pkp_navigation_primary > li > a:hover{

    color:
        #078b89 !important;

    transform:
        translateY(-2px) !important;
}


.pkp_navigation_primary > li > a:hover::after{

    width:
        calc(100% - 35px) !important;
}


/* =========================
   DROPDOWN
========================= */

.pkp_navigation_primary ul{

    background:
        rgba(255,255,255,.98) !important;

    border:
        1px solid
        #e1ebef !important;

    border-top:
        3px solid
        #23c9b6 !important;

    border-radius:
        0 0 13px 13px !important;

    box-shadow:
        0 18px 40px
        rgba(4,32,52,.17) !important;

    overflow:hidden !important;
}


.pkp_navigation_primary ul a{

    color:
        #14374c !important;

    padding:
        12px
        19px !important;

    transition:
        all .25s ease !important;
}


.pkp_navigation_primary ul a:hover{

    color:
        #088c8b !important;

    background:
        linear-gradient(
            90deg,
            #eafaf7,
            #ffffff
        ) !important;

    padding-left:
        25px !important;
}


/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    .pkp_site_name{

        padding:
            38px
            22px
            42px !important;

        min-height:auto !important;
    }


    .pkp_structure_head::after{

        opacity:.25 !important;

        right:-100px !important;
    }


    .pkp_site_name .is_text{

        font-size:
            24px !important;

        max-width:
            100% !important;
    }


    .pkp_site_name .is_text::before{

        flex:
            0 0 72px !important;

        width:
            72px !important;

        height:
            72px !important;

        border-radius:
            20px !important;

        margin-right:
            16px !important;

        font-size:
            16px !important;
    }


    .pkp_site_name .is_text::after{

        left:
            88px !important;

        bottom:
            -12px !important;

        width:
            75px !important;
    }
}