/* Auto-generated from the original style.css during code reorganization.
   Grouped by component so each concern can be found and debugged independently. */

/* ==========================================================
TESTIMONIALS
========================================================== */

/* ==========================================================
   TESTIMONIALS
========================================================== */

.testimonials{

    position:relative;

    overflow:hidden;

    padding:150px 0;

    background:

        radial-gradient(
            circle at top left,
            rgba(0,168,150,.05),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(11,114,133,.05),
            transparent 40%
        ),

        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F7FBFC 100%
        );

}

.testimonials::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.30),

            transparent

        );

    opacity:.5;

}

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

.testimonial-grid{

    display:grid;

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

    gap:34px;

    margin-top:75px;

}

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

.testimonial-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:1px solid rgba(10,105,120,.08);

    box-shadow:

        0 18px 45px rgba(0,0,0,.06),

        0 8px 20px rgba(10,105,120,.05);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

    isolation:isolate;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

        linear-gradient(

            90deg,

            var(--secondary),

            var(--primary)

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s ease;

}

.testimonial-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(0,168,150,.08),

            transparent 65%

        );

    opacity:0;

    transition:.45s ease;

    pointer-events:none;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:rgba(10,105,120,.20);

    box-shadow:

        0 28px 70px rgba(0,0,0,.12),

        0 12px 30px rgba(10,105,120,.10);

}

.testimonial-card:hover::before{

    transform:scaleX(1);

}

.testimonial-card:hover::after{

    opacity:1;

}

/* ==========================================================
   QUOTE ICON
========================================================== */

.quote-icon{

    font-size:64px;

    line-height:1;

    color:rgba(0,168,150,.10);

    font-weight:700;

    margin-bottom:10px;

    transition:

        transform .40s ease,

        color .40s ease;

}

.testimonial-card:hover .quote-icon{

    transform:translateY(-4px) rotate(-6deg);

    color:rgba(0,168,150,.18);

}

/* ==========================================================
   STAR RATING
========================================================== */

.stars{

    font-size:22px;

    letter-spacing:5px;

    color:#FFC107;

    margin-bottom:22px;

}

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

.testimonial-card p{

    margin:0;

    font-size:16px;

    line-height:1.9;

    color:var(--text);

    flex-grow:1;

}

/* ==========================================================
   PATIENT SECTION
========================================================== */

.patient{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:34px;

    padding-top:24px;

    border-top:1px solid rgba(10,105,120,.08);

}

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

.patient-avatar{

    width:68px;

    height:68px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--primary)

        );

    color:#fff;

    font-size:22px;

    font-weight:700;

    box-shadow:

        0 10px 24px rgba(0,168,150,.28);

}

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

.patient-info{

    flex:1;

}

.patient-info h4{

    margin:0;

    font-size:20px;

    color:var(--dark);

    font-weight:700;

}

.verified{

    display:inline-flex;

    align-items:center;

    margin-top:6px;

    font-size:13px;

    font-weight:600;

    color:#18A957;

}

/* ==========================================================
   META
========================================================== */

.patient-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:12px;

    font-size:13px;

    color:#72808B;

}

.department-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:999px;

    background:

        rgba(0,168,150,.10);

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:.3px;

}

/* ==========================================================
   PREMIUM MICRO INTERACTIONS
========================================================== */

/* Soft floating glow */

.testimonial-card{

    transform-origin:center;

}

.testimonial-card:hover{

    transform:
        translateY(-12px)
        scale(1.02);

}

/* Animated background highlight */

.testimonial-card::after{

    background:

        radial-gradient(

            circle at top right,

            rgba(0,168,150,.10),

            transparent 68%

        ),

        radial-gradient(

            circle at bottom left,

            rgba(11,114,133,.06),

            transparent 70%

        );

}

/* Shine Effect */

.testimonial-card .card-shine{

    position:absolute;

    top:0;

    left:-140%;

    width:70%;

    height:100%;

    pointer-events:none;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:skewX(-25deg);

    transition:left .9s ease;

    z-index:2;

}

.testimonial-card:hover .card-shine{

    left:170%;

}

/* Avatar animation */

.patient-avatar{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.testimonial-card:hover .patient-avatar{

    transform:scale(1.08);

    box-shadow:

        0 18px 40px rgba(0,168,150,.35);

}

/* Department badge */

.department-tag{

    transition:

        transform .30s ease,

        background .30s ease,

        color .30s ease;

}

.testimonial-card:hover .department-tag{

    transform:translateY(-2px);

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--primary)

        );

    color:#fff;

}

/* Verified badge */

.verified{

    transition:

        color .30s ease,

        transform .30s ease;

}

.testimonial-card:hover .verified{

    color:#11A94C;

    transform:translateX(3px);

}

/* Quote animation */

.testimonial-card:hover .quote-icon{

    transform:

        rotate(-10deg)

        translateY(-6px);

}

/* Review text */

.testimonial-card p{

    transition:

        color .30s ease;

}

.testimonial-card:hover p{

    color:#42505B;

}

/* Slight stagger */

.testimonial-card:nth-child(2){

    margin-top:28px;

}

.testimonial-card:nth-child(3){

    margin-top:14px;

}

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

@media (max-width:1200px){

    .testimonial-grid{

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

        gap:28px;

    }

    .testimonial-card:nth-child(2),
    .testimonial-card:nth-child(3){

        margin-top:0;

    }

}

@media (max-width:992px){

    .testimonials{

        padding:120px 0;

    }

    .testimonial-grid{

        gap:24px;

        margin-top:60px;

    }

    .testimonial-card{

        padding:34px;

    }

    .quote-icon{

        font-size:56px;

    }

    .testimonial-card p{

        font-size:15px;

        line-height:1.8;

    }

}

@media (max-width:768px){

    .testimonials{

        padding:90px 0;

    }

    .testimonial-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .testimonial-card{

        padding:30px;

    }

    .patient{

        gap:14px;

    }

    .patient-avatar{

        width:60px;

        height:60px;

        font-size:20px;

    }

    .patient-info h4{

        font-size:18px;

    }

    .verified{

        font-size:12px;

    }

    .patient-meta{

        gap:8px;

        font-size:12px;

    }

    .department-tag{

        padding:6px 12px;

        font-size:11px;

    }

}

@media (max-width:480px){

    .testimonial-card{

        padding:24px;

        border-radius:22px;

    }

    .quote-icon{

        font-size:48px;

    }

    .stars{

        font-size:18px;

        letter-spacing:3px;

    }

    .testimonial-card p{

        font-size:14px;

        line-height:1.75;

    }

    .patient{

        align-items:flex-start;

    }

    .patient-avatar{

        width:54px;

        height:54px;

        font-size:18px;

    }

    .patient-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

}