/* =====================================================
   REVIEWS PAGE CSS
   PART 1
   Loader • Root • Header • Hero
===================================================== */


/* =====================================================
   ROOT
===================================================== */

:root {

    --ja-review-primary: #2563eb;
    --ja-review-primary-dark: #1d4ed8;
    --ja-review-secondary: #0f172a;

    --ja-review-background: #ffffff;
    --ja-review-surface: #f8fafc;
    --ja-review-card: #ffffff;

    --ja-review-border: #e2e8f0;

    --ja-review-text: #0f172a;
    --ja-review-text-light: #64748b;

    --ja-review-success: #16a34a;
    --ja-review-warning: #f59e0b;

    --ja-review-shadow:

        0 12px 40px rgba(
            15,
            23,
            42,
            .08
        );

    --ja-review-radius: 18px;

}





/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family:

        Inter,

        "Segoe UI",

        sans-serif;

    background:

        var(--ja-review-background);

    color:

        var(--ja-review-text);

    line-height: 1.65;

}





a {

    text-decoration: none;

    color: inherit;

}



img {

    display: block;

    max-width: 100%;

}



button,

input,

select {

    font-family: inherit;

}





/* =====================================================
   CONTAINER
===================================================== */

.ja-review-container {

    width: min(
        92%,
        1320px
    );

    margin: auto;

}





/* =====================================================
   LOADER
===================================================== */

.ja-review-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    transition: .45s;

}



.ja-review-loader-hidden {

    opacity: 0;

    visibility: hidden;

}



.ja-review-loader-spinner {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    border:

        6px solid #dbeafe;

    border-top:

        6px solid var(
            --ja-review-primary
        );

    animation:

        jaReviewSpin 1s linear infinite;

}



@keyframes jaReviewSpin {

    to {

        transform:

            rotate(360deg);

    }

}





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

.ja-review-header {

    position: sticky;

    top: 0;

    z-index: 999;

    backdrop-filter: blur(18px);

    background:

        rgba(
            255,
            255,
            255,
            .92
        );

    border-bottom:

        1px solid
        var(--ja-review-border);

}



.ja-review-header
.ja-review-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 82px;

}





/* =====================================================
   LOGO
===================================================== */

.ja-review-logo {

    font-size: 28px;

    font-weight: 800;

    color:

        var(--ja-review-secondary);

}



.ja-review-logo span {

    color:

        var(--ja-review-primary);

}





/* =====================================================
   NAVIGATION
===================================================== */

.ja-review-navigation {

    display: flex;

    align-items: center;

    gap: 34px;

}



.ja-review-navigation a {

    position: relative;

    font-size: 15px;

    font-weight: 600;

    color:

        var(--ja-review-text-light);

    transition: .3s;

}



.ja-review-navigation a:hover,

.ja-review-navigation a.active {

    color:

        var(--ja-review-primary);

}



.ja-review-navigation a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    border-radius: 20px;

    background:

        var(--ja-review-primary);

    transition: .3s;

}



.ja-review-navigation a:hover::after,

.ja-review-navigation a.active::after {

    width: 100%;

}





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

.ja-review-actions {

    display: flex;

    align-items: center;

    gap: 14px;

}



.ja-review-theme,

.ja-review-menu {

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 50%;

    background:

        var(--ja-review-surface);

    color:

        var(--ja-review-primary);

    cursor: pointer;

    transition: .3s;

}



.ja-review-theme:hover,

.ja-review-menu:hover {

    background:

        var(--ja-review-primary);

    color: #fff;

}



.ja-review-menu {

    display: none;

}





/* =====================================================
   MOBILE NAV
===================================================== */

.ja-review-mobile-nav {

    display: none;

    flex-direction: column;

    background: #fff;

    border-top:

        1px solid
        var(--ja-review-border);

}



.ja-review-mobile-nav a {

    padding: 16px 22px;

    font-weight: 600;

    border-bottom:

        1px solid
        #f1f5f9;

}



.ja-review-mobile-open {

    display: flex;

}





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

.ja-review-hero {

    padding:

        110px 0
        90px;

    background:

        linear-gradient(

            135deg,

            #eff6ff,

            #ffffff

        );

}



.ja-review-hero span {

    display: inline-block;

    margin-bottom: 18px;

    color:

        var(--ja-review-primary);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}



.ja-review-hero h1 {

    max-width: 760px;

    font-size: clamp(

        42px,

        7vw,

        68px

    );

    line-height: 1.08;

    margin-bottom: 28px;

}



.ja-review-hero p {

    max-width: 720px;

    color:

        var(--ja-review-text-light);

    font-size: 18px;

    line-height: 1.8;

}





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

.ja-review-hero-buttons {

    display: flex;

    gap: 18px;

    margin-top: 45px;

}



.ja-review-primary-btn,

.ja-review-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:

        16px 32px;

    border-radius: 50px;

    font-weight: 700;

    transition: .3s;

}



.ja-review-primary-btn {

    background:

        var(--ja-review-primary);

    color: #fff;

}



.ja-review-primary-btn:hover {

    background:

        var(--ja-review-primary-dark);

}



.ja-review-secondary-btn {

    border:

        2px solid
        var(--ja-review-primary);

    color:

        var(--ja-review-primary);

}



.ja-review-secondary-btn:hover {

    background:

        var(--ja-review-primary);

    color: #fff;

}



/* =====================================================
   REVIEW STATS
===================================================== */

.ja-review-stats {

    padding: 80px 0;

    background: #ffffff;

}

.ja-review-stats .ja-review-container {

    display: grid;

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

    gap: 24px;

}

.ja-review-stat-card {

    background: var(--ja-review-card);

    border: 1px solid var(--ja-review-border);

    border-radius: 18px;

    padding: 34px 20px;

    text-align: center;

    box-shadow: var(--ja-review-shadow);

    transition: .35s;

}

.ja-review-stat-card:hover {

    transform: translateY(-8px);

    border-color: var(--ja-review-primary);

}

.ja-review-stat-card h2 {

    font-size: 42px;

    color: var(--ja-review-primary);

    margin-bottom: 12px;

    font-weight: 800;

}

.ja-review-stat-card p {

    color: var(--ja-review-text-light);

    font-size: 15px;

}





/* =====================================================
   REVIEW SECTION
===================================================== */

.ja-review-section {

    padding: 90px 0;

    background: #f8fafc;

}





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

.ja-review-section-header {

    text-align: center;

    margin-bottom: 55px;

}

.ja-review-section-header span {

    display: inline-block;

    color: var(--ja-review-primary);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;

}

.ja-review-section-header h2 {

    font-size: 46px;

    margin-bottom: 18px;

    color: var(--ja-review-text);

}

.ja-review-section-header p {

    max-width: 760px;

    margin: auto;

    color: var(--ja-review-text-light);

    line-height: 1.8;

}





/* =====================================================
   FILTER AREA
===================================================== */

.ja-review-filter-area {

    display: grid;

    grid-template-columns:

        2fr

        repeat(5,1fr);

    gap: 18px;

    margin-bottom: 55px;

}





/* =====================================================
   SEARCH
===================================================== */

.ja-review-search {

    position: relative;

}

.ja-review-search i {

    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--ja-review-primary);

}

.ja-review-search input {

    width: 100%;

    height: 58px;

    border: 1px solid var(--ja-review-border);

    border-radius: 14px;

    padding: 0 18px 0 48px;

    background: #ffffff;

    transition: .3s;

    font-size: 15px;

}

.ja-review-search input:focus {

    outline: none;

    border-color: var(--ja-review-primary);

    box-shadow:

        0 0 0 4px

        rgba(37,99,235,.12);

}





/* =====================================================
   SELECT
===================================================== */

.ja-review-filter-area select {

    height: 58px;

    padding: 0 16px;

    border: 1px solid var(--ja-review-border);

    border-radius: 14px;

    background: #ffffff;

    color: var(--ja-review-text);

    cursor: pointer;

    transition: .3s;

    font-size: 14px;

}

.ja-review-filter-area select:hover {

    border-color: var(--ja-review-primary);

}

.ja-review-filter-area select:focus {

    outline: none;

    border-color: var(--ja-review-primary);

    box-shadow:

        0 0 0 4px

        rgba(37,99,235,.12);

}





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

@media (max-width:1200px){

    .ja-review-filter-area{

        grid-template-columns:

            repeat(3,1fr);

    }

    .ja-review-search{

        grid-column:1/-1;

    }

}

@media (max-width:768px){

    .ja-review-filter-area{

        grid-template-columns:1fr;

    }

}


/* =====================================================
   REVIEW GRID
===================================================== */

.ja-review-grid {

    display: grid;

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

    gap: 28px;

    margin-top: 20px;

}





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

.ja-review-card {

    position: relative;

    background: #ffffff;

    border: 1px solid var(--ja-review-border);

    border-radius: 20px;

    padding: 28px;

    overflow: hidden;

    transition: .35s ease;

    box-shadow: 0 10px 35px rgba(15,23,42,.06);

}



.ja-review-card:hover {

    transform: translateY(-10px);

    border-color: var(--ja-review-primary);

    box-shadow: 0 20px 50px rgba(37,99,235,.15);

}





/* =====================================================
   TOP BAR
===================================================== */

.ja-review-card-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 22px;

}





/* =====================================================
   CLIENT INFO
===================================================== */

.ja-review-client {

    display: flex;

    align-items: center;

    gap: 16px;

}





/* =====================================================
   CLIENT IMAGE
===================================================== */

.ja-review-avatar {

    width: 72px;

    height: 72px;

    border-radius: 50%;

    overflow: hidden;

    border: 4px solid #eff6ff;

    flex-shrink: 0;

}



.ja-review-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}





/* =====================================================
   CLIENT DETAILS
===================================================== */

.ja-review-client-info h3 {

    font-size: 18px;

    margin-bottom: 5px;

    color: var(--ja-review-text);

}



.ja-review-client-info p {

    color: var(--ja-review-text-light);

    font-size: 14px;

    margin-bottom: 4px;

}



.ja-review-country {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 13px;

    color: var(--ja-review-primary);

    font-weight: 600;

}





/* =====================================================
   VERIFIED
===================================================== */

.ja-review-verified {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 14px;

    background: #ecfdf5;

    color: #16a34a;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

}





/* =====================================================
   REVIEW TEXT
===================================================== */

.ja-review-text {

    margin-top: 22px;

    color: var(--ja-review-text-light);

    line-height: 1.9;

    font-size: 15px;

}





/* =====================================================
   REVIEW QUOTE
===================================================== */

.ja-review-quote {

    position: absolute;

    top: 22px;

    right: 24px;

    font-size: 56px;

    color: rgba(37,99,235,.08);

    pointer-events: none;

}





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

@media (max-width:1100px){

    .ja-review-grid{

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

    }

}



@media (max-width:768px){

    .ja-review-grid{

        grid-template-columns:1fr;

    }

}


/* =====================================================
   REVIEW RATING
===================================================== */

.ja-review-rating {

    display: flex;

    align-items: center;

    gap: 4px;

    margin-top: 18px;

    margin-bottom: 20px;

}

.ja-review-rating i {

    color: #fbbf24;

    font-size: 15px;

}

.ja-review-rating span {

    margin-left: 10px;

    color: var(--ja-review-text-light);

    font-size: 14px;

    font-weight: 600;

}





/* =====================================================
   REVIEW TAGS
===================================================== */

.ja-review-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 22px;

}

.ja-review-tag {

    padding: 8px 14px;

    border-radius: 30px;

    background: #eff6ff;

    color: var(--ja-review-primary);

    font-size: 12px;

    font-weight: 700;

    transition: .3s;

}

.ja-review-tag:hover {

    background: var(--ja-review-primary);

    color: #ffffff;

}





/* =====================================================
   REVIEW FOOTER
===================================================== */

.ja-review-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 28px;

    padding-top: 20px;

    border-top: 1px solid var(--ja-review-border);

}





/* =====================================================
   REVIEW TYPE
===================================================== */

.ja-review-type {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 700;

}

.ja-review-type.local {

    background: #ecfdf5;

    color: #16a34a;

}

.ja-review-type.international {

    background: #eff6ff;

    color: #2563eb;

}





/* =====================================================
   REVIEW DATE
===================================================== */

.ja-review-date {

    color: var(--ja-review-text-light);

    font-size: 13px;

}





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

.ja-review-card::before {

    content: "";

    position: absolute;

    top: -90px;

    right: -90px;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:

        radial-gradient(

            rgba(37,99,235,.08),

            transparent 70%

        );

    transition: .4s;

}

.ja-review-card:hover::before {

    transform: scale(1.15);

}





/* =====================================================
   SHINE EFFECT
===================================================== */

.ja-review-card::after {

    content: "";

    position: absolute;

    top: -120%;

    left: -60%;

    width: 40%;

    height: 250%;

    background:

        rgba(255,255,255,.35);

    transform: rotate(25deg);

    transition: .8s;

}

.ja-review-card:hover::after {

    left: 150%;

}





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

.ja-review-verified i{

    color:#16a34a;

}





/* =====================================================
   COUNTRY FLAG
===================================================== */

.ja-review-country img{

    width:20px;

    height:14px;

    object-fit:cover;

    border-radius:2px;

}





/* =====================================================
   AVATAR HOVER
===================================================== */

.ja-review-avatar{

    transition:.35s;

}

.ja-review-card:hover .ja-review-avatar{

    transform:scale(1.08);

    border-color:#bfdbfe;

}





/* =====================================================
   CLIENT NAME
===================================================== */

.ja-review-client-info h3{

    transition:.3s;

}

.ja-review-card:hover .ja-review-client-info h3{

    color:var(--ja-review-primary);

}



/* =====================================================
   REVIEW COMPANY
===================================================== */

.ja-review-company {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;

    color: var(--ja-review-text-light);

    font-size: 13px;

    font-weight: 500;

}

.ja-review-company i {

    color: var(--ja-review-primary);

}





/* =====================================================
   REVIEW SOURCE
===================================================== */

.ja-review-source {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 16px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 700;

    color: #ffffff;

}

.ja-review-source.fiverr {

    background: #1dbf73;

}

.ja-review-source.upwork {

    background: #14a800;

}

.ja-review-source.freelancer {

    background: #29b2fe;

}

.ja-review-source.local {

    background: #2563eb;

}

.ja-review-source.linkedin {

    background: #0a66c2;

}





/* =====================================================
   CLIENT SKILLS
===================================================== */

.ja-review-skills {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;

}

.ja-review-skill {

    padding: 7px 14px;

    border-radius: 30px;

    background: #f1f5f9;

    color: var(--ja-review-text);

    font-size: 12px;

    font-weight: 600;

    transition: .3s;

}

.ja-review-skill:hover {

    background: var(--ja-review-primary);

    color: #ffffff;

}





/* =====================================================
   CARD HOVER BORDER
===================================================== */

.ja-review-card {

    position: relative;

}

.ja-review-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background: linear-gradient(
        135deg,
        transparent,
        rgba(37,99,235,.25),
        transparent
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

            mask-composite: exclude;

    opacity: 0;

    transition: .35s;

}

.ja-review-card:hover::before {

    opacity: 1;

}





/* =====================================================
   EMPTY STATE
===================================================== */

.ja-review-empty {

    text-align: center;

    padding: 80px 20px;

}

.ja-review-empty i {

    font-size: 70px;

    color: #cbd5e1;

    margin-bottom: 20px;

}

.ja-review-empty h3 {

    font-size: 26px;

    margin-bottom: 10px;

}

.ja-review-empty p {

    color: var(--ja-review-text-light);

}





/* =====================================================
   FADE ANIMATION
===================================================== */

@keyframes jaReviewFade {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.ja-review-card {

    animation: jaReviewFade .5s ease;

}





/* =====================================================
   HOVER EFFECT
===================================================== */

.ja-review-card:hover {

    transform: translateY(-10px);

}

.ja-review-card:hover .ja-review-tag,

.ja-review-card:hover .ja-review-skill {

    background: var(--ja-review-primary);

    color: #ffffff;

}

.ja-review-card:hover .ja-review-country,

.ja-review-card:hover .ja-review-company {

    color: var(--ja-review-primary);

}





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

@media (max-width:992px){

    .ja-review-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

}

@media (max-width:576px){

    .ja-review-client{

        flex-direction:column;

        align-items:flex-start;

    }

    .ja-review-avatar{

        width:60px;

        height:60px;

    }

    .ja-review-client-info h3{

        font-size:16px;

    }

}



/* =====================================================
   PAGINATION
===================================================== */

.ja-review-pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 70px;

}

.ja-review-page-btn {

    width: 46px;

    height: 46px;

    border: 1px solid var(--ja-review-border);

    border-radius: 12px;

    background: #ffffff;

    color: var(--ja-review-text);

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;

}

.ja-review-page-btn:hover {

    background: var(--ja-review-primary);

    color: #ffffff;

    border-color: var(--ja-review-primary);

}

.ja-review-page-btn.active {

    background: var(--ja-review-primary);

    color: #ffffff;

    border-color: var(--ja-review-primary);

}

.ja-review-page-btn.disabled {

    opacity: .45;

    cursor: not-allowed;

    pointer-events: none;

}





/* =====================================================
   PREVIOUS / NEXT BUTTON
===================================================== */

.ja-review-page-nav {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 0 20px;

    height: 46px;

    border-radius: 12px;

    border: 1px solid var(--ja-review-border);

    background: #ffffff;

    color: var(--ja-review-text);

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.ja-review-page-nav:hover {

    background: var(--ja-review-primary);

    color: #ffffff;

    border-color: var(--ja-review-primary);

}





/* =====================================================
   CTA SECTION
===================================================== */

.ja-review-cta {

    margin: 110px 0;

}

.ja-review-cta-box {

    position: relative;

    overflow: hidden;

    padding: 80px 60px;

    border-radius: 26px;

    background:

        linear-gradient(

            135deg,

            #2563eb,

            #1d4ed8

        );

    color: #ffffff;

    text-align: center;

}

.ja-review-cta-box::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    top: -170px;

    right: -170px;

    background: rgba(255,255,255,.08);

}

.ja-review-cta-box::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    bottom: -140px;

    left: -140px;

    background: rgba(255,255,255,.05);

}

.ja-review-cta h2 {

    position: relative;

    z-index: 2;

    font-size: 44px;

    margin-bottom: 20px;

}

.ja-review-cta p {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: auto;

    font-size: 18px;

    line-height: 1.8;

    opacity: .92;

}





/* =====================================================
   CTA BUTTON
===================================================== */

.ja-review-cta-button {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 40px;

    padding: 18px 40px;

    background: #ffffff;

    color: var(--ja-review-primary);

    border-radius: 50px;

    font-size: 16px;

    font-weight: 700;

    transition: .35s;

}

.ja-review-cta-button:hover {

    transform: translateY(-4px);

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

}





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

@media (max-width:768px){

    .ja-review-cta-box{

        padding:60px 30px;

    }

    .ja-review-cta h2{

        font-size:32px;

    }

    .ja-review-cta p{

        font-size:16px;

    }

}



/* =====================================================
   FOOTER
===================================================== */

.ja-review-footer {

    background: #0f172a;

    color: #ffffff;

    padding: 80px 0 30px;

}

.ja-review-footer-grid {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 40px;

    margin-bottom: 60px;

}





/* =====================================================
   FOOTER LOGO
===================================================== */

.ja-review-footer-logo {

    font-size: 34px;

    font-weight: 800;

    margin-bottom: 18px;

}

.ja-review-footer-logo span {

    color: #3b82f6;

}

.ja-review-footer-about {

    color: #cbd5e1;

    line-height: 1.9;

    margin-bottom: 28px;

}





/* =====================================================
   FOOTER TITLE
===================================================== */

.ja-review-footer-title {

    font-size: 18px;

    margin-bottom: 22px;

    font-weight: 700;

}





/* =====================================================
   FOOTER LINKS
===================================================== */

.ja-review-footer-links {

    list-style: none;

}

.ja-review-footer-links li {

    margin-bottom: 14px;

}

.ja-review-footer-links a {

    color: #cbd5e1;

    transition: .3s;

}

.ja-review-footer-links a:hover {

    color: #60a5fa;

    padding-left: 6px;

}





/* =====================================================
   SOCIAL
===================================================== */

.ja-review-social {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.ja-review-social a {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.08);

    color: #ffffff;

    transition: .3s;

}

.ja-review-social a:hover {

    background: #2563eb;

    transform: translateY(-4px);

}





/* =====================================================
   FOOTER BOTTOM
===================================================== */

.ja-review-footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding-top: 30px;

    border-top: 1px solid rgba(255,255,255,.08);

    color: #94a3b8;

    font-size: 14px;

}





/* =====================================================
   BACK TO TOP
===================================================== */

.ja-review-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #2563eb;

    color: #ffffff;

    box-shadow: 0 12px 30px rgba(37,99,235,.35);

    cursor: pointer;

    transition: .3s;

    z-index: 999;

}

.ja-review-top:hover {

    transform: translateY(-6px);

}





/* =====================================================
   DARK MODE
===================================================== */

body.dark-mode {

    background: #020617;

    color: #f8fafc;

}

body.dark-mode .ja-review-header {

    background: rgba(2,6,23,.94);

    border-color: rgba(255,255,255,.08);

}

body.dark-mode .ja-review-card,

body.dark-mode .ja-review-stat-card,

body.dark-mode .ja-review-search input,

body.dark-mode .ja-review-filter-area select {

    background: #0f172a;

    border-color: rgba(255,255,255,.08);

    color: #f8fafc;

}

body.dark-mode .ja-review-text,

body.dark-mode .ja-review-client-info p,

body.dark-mode .ja-review-date,

body.dark-mode .ja-review-section-header p,

body.dark-mode .ja-review-footer-bottom {

    color: #94a3b8;

}





/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #e2e8f0;

}

::-webkit-scrollbar-thumb {

    background: #2563eb;

    border-radius: 30px;

}

::-webkit-scrollbar-thumb:hover {

    background: #1d4ed8;

}





/* =====================================================
   TEXT SELECTION
===================================================== */

::selection {

    background: #2563eb;

    color: #ffffff;

}





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

@media (max-width:1100px){

    .ja-review-footer-grid{

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

    }

}

@media (max-width:768px){

    .ja-review-footer-grid{

        grid-template-columns:1fr;

    }

    .ja-review-footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:576px){

    .ja-review-top{

        width:46px;

        height:46px;

        right:18px;

        bottom:18px;

    }

}