/* ==========================================================
   Component : Post Navigation
   Version   : 1.1.0
   Author    : ArianFile UI Kit
========================================================== */


/* ==========================================================
   Navigation Wrapper
========================================================== */

.elementor-post-navigation{

    margin:40px 0;

}


/* ==========================================================
   Navigation Card
========================================================== */

.elementor-post-navigation__prev a,
.elementor-post-navigation__next a{

    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 22px;

    background:#fff;

    color:var(--af-dark);

    text-decoration:none;

    border:1px solid var(--af-border);

    border-radius:var(--af-radius);

    box-shadow:var(--af-shadow);

    overflow:hidden;

    position:relative;

    transition:all .28s ease;

}


/* ==========================================================
   Gradient Hover Layer
========================================================== */

.elementor-post-navigation__prev a::before,
.elementor-post-navigation__next a::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        var(--af-primary),
        #2563EB
    );

    opacity:0;

    transition:.28s;

    z-index:0;

}


/* ==========================================================
   Bring Content Above Gradient
========================================================== */

.elementor-post-navigation__prev a>*,
.elementor-post-navigation__next a>*{

    position:relative;

    z-index:2;

}


/* ==========================================================
   Previous
========================================================== */

.elementor-post-navigation__prev a{

    flex-direction:row;

}

.elementor-post-navigation__prev .post-navigation__arrow-prev{

    order:1;

}

.elementor-post-navigation__prev .elementor-post-navigation__link__prev{

    order:2;

}


/* ==========================================================
   Next
========================================================== */

.elementor-post-navigation__next a{

    flex-direction:row-reverse;

}

.elementor-post-navigation__next .post-navigation__arrow-next{

    order:1;

}

.elementor-post-navigation__next .elementor-post-navigation__link__next{

    order:2;

}


/* ==========================================================
   Icons
========================================================== */

.elementor-post-navigation i{

    color:var(--af-primary);

    font-size:20px;

    transition:all .25s ease;

}


/* ==========================================================
   Hover
========================================================== */

.elementor-post-navigation__prev a:hover,
.elementor-post-navigation__next a:hover{

    color:#fff;

    border-color:transparent;

    transform:translateY(-3px);

    box-shadow:
    0 16px 36px rgba(15,94,255,.18);

}

.elementor-post-navigation__prev a:hover::before,
.elementor-post-navigation__next a:hover::before{

    opacity:1;

}

.elementor-post-navigation__prev a:hover i,
.elementor-post-navigation__next a:hover i{

    color:#fff;

    transform:scale(1.15);

}


/* ==========================================================
   Keyboard Accessibility
========================================================== */

.elementor-post-navigation a:focus-visible{

    outline:3px solid var(--af-secondary);

    outline-offset:4px;

}


/* ==========================================================
   Active
========================================================== */

.elementor-post-navigation a:active{

    transform:scale(.98);

}


/* ==========================================================
   Responsive
========================================================== */

@media(max-width:768px){

    .elementor-post-navigation{

        margin:30px 0;

    }

    .elementor-post-navigation__prev a,
    .elementor-post-navigation__next a{

        padding:16px;

        gap:10px;

        font-size:15px;

    }

}