/* ===========================================================
   TESTIMONIAL SECTION
=========================================================== */

.testimonial-section{
    padding:80px 0;
    background:#07141f;
    position:relative;
    overflow:hidden;
}

/* Background Glow */

.testimonial-section::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle,#19557d40 0%,transparent 70%);
    top:-250px;
    left:-200px;
}

.testimonial-section::after{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    border-radius:50%;
    background:radial-gradient(circle,#c5985925 0%,transparent 70%);
    bottom:-280px;
    right:-180px;
}

/* ===========================================================
   HEADING
=========================================================== */

.testimonial-heading{
    margin-bottom:60px;
    position:relative;
    z-index:5;
}

.section-tag{

    display:inline-block;
    padding:8px 22px;
    border-radius:50px;

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

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

    color:#c59859;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.testimonial-heading h2{

    color:#fff;

    font-size:44px;

    font-weight:700;

    margin-bottom:15px;

}

.testimonial-heading p{

    color:#aeb6bf;

    max-width:700px;

    margin:auto;

    font-size:18px;

    line-height:1.5;

}

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

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

    position:relative;

    z-index:5;

}

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

.testimonial-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    padding:35px 28px;

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

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.10);

    transition:.45s ease;

    min-height:420px;

}

/* Animated Border */

.testimonial-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:30px;

    background:linear-gradient(135deg,
        #19557d,
        #c59859,
        #19557d);

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

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:.25;

    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);

}

.testimonial-card:hover::before{

    opacity:1;

}

/* ===========================================================
   GLOW
=========================================================== */

.card-glow{

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:#19557d33;

    filter:blur(80px);

    top:-80px;

    left:-70px;

    transition:.5s;

}

.testimonial-card:hover .card-glow{

    transform:scale(1.3);

}

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

.testimonial-country{

    position:absolute;
    right:20px;
    top:20px;
    width:52px;
    height:52px;
    border-radius:50%;
    border:4px solid #c59859;
    overflow:hidden;
    background:linear-gradient(135deg,
        #19557d,
        #c59859,
        #19557d);
    box-shadow:0 10px 25px rgba(0,0,0,.3);

}

.testimonial-country img{

    width:100%;

    height:100%;

    object-fit:cover;

}
.testimonial-country:hover{
    border:4px solid #ffffff;
}


/* ===========================================================
   PROFILE
=========================================================== */

.testimonial-profile{

    width:110px;

    height:110px;

    margin:15px auto;

    border-radius:50%;

    overflow:hidden;

    border:4px solid #19557d;

    transition:.45s;

}

.testimonial-profile img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.testimonial-card:hover .testimonial-profile{

    border-color:#c59859;

}

.testimonial-card:hover .testimonial-profile img{

    transform:scale(1.12);

}

/* ===========================================================
   CONTENT
=========================================================== */

.testimonial-content{

    text-align:center;

}

.testimonial-content h3{

    color:#fff;

    margin-top:20px;

    margin-bottom:10px;

    font-size:24px;

    font-weight:700;

}

.testimonial-stars{

    color:#ffc107;

    font-size:18px;

    margin-bottom:15px;

    letter-spacing:2px;

}

/* Badge */

.testimonial-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#19557d;

    color:#fff;

    font-size:13px;

    margin-bottom:20px;

    font-weight:600;

}

/* Text */

.testimonial-content p{

    color:#d7dde3;

    font-size:15px;

    line-height:1.9;

    margin:0;

}

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

.testimonial-loading{

    margin-top:50px;

}

/* ===========================================================
   SKELETON
=========================================================== */

.skeleton{

    animation:pulse 1.6s infinite;

}

.profile-skeleton{

    width:100px;

    height:100px;

    margin:20px auto;

    border-radius:50%;

    background:#23303d;

}

.title-skeleton{

    width:60%;

    height:18px;

    margin:25px auto;

    background:#23303d;

    border-radius:20px;

}

.text-skeleton{

    width:90%;

    height:14px;

    margin:15px auto;

    border-radius:20px;

    background:#23303d;

}

.short{

    width:70%;

}

@keyframes pulse{

0%{

opacity:.45;

}

50%{

opacity:1;

}

100%{

opacity:.45;

}

}

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

@media(max-width:768px){

.testimonial-heading h2{

font-size:32px;

}

.testimonial-heading p{

font-size:16px;

}

.testimonial-card{

padding:28px 22px;

min-height:auto;

}

.testimonial-profile{

width:90px;

height:90px;

}

}


.testimonial-filter{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;

}

.filter-btn{

    padding:10px 22px;
    border:none;
    border-radius:30px;
    background:#ffffff;
    color:#19557d;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.filter-btn:hover{

    background:#19557d;
    color:#fff;

}

.filter-btn.active{

    background:#19557d;
    color:#fff;

}