/* ==============================
   ANIMATIONS
================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

.animate-slide-down {
    animation: slideDown 0.6s ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out forwards;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* FAQ Accordion Smooth Transition */
details summary svg {
    transition: transform 0.3s ease-out;
}

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

.testimonials-section{
    padding:110px 0;
    background:#f7f8fb;
    overflow:hidden;
}

.container{
    width:min(1200px,90%);
    margin:auto;
}

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

.testimonials-section .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

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

.section-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:#e8f1ff;
    color:#0b4ea2;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:24px;
}

.testimonial-content h2{

    font-size:clamp(2.5rem,4vw,4rem);
    line-height:1.05;
    color:#0f172a;
    margin-bottom:30px;
}

.testimonial-content h2 span{
    display:block;
    color:#0b4ea2;
}

.testimonial-content p{

    color:#475569;
    line-height:1.9;
    margin-bottom:24px;
    font-size:1.02rem;
    max-width:520px;

}

.testimonial-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;


    padding:13px 30px;

    background:#0b4ea2;

    color:white;

    text-decoration:none;

    border-radius:999px;

    font-weight:600;

    transition:.35s;

}

.testimonial-btn:hover{

    transform:translateY(-4px);

    background:#083b79;

}

/* ==============================
   SLIDER
================================ */

.testimonial-slider{

    position:relative;

}

.slider-window{

    overflow:hidden;

    height:470px;

    position:relative;

}

.slider-track{

    display:flex;

    flex-direction:column;

    gap:30px;

    will-change:transform;

}

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

.testimonial-card{

    position:relative;

    background:white;

    border-radius:34px;

    padding:35px;

    min-height:440px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    box-shadow:
        0 30px 80px rgba(15,23,42,.08);

    transition:.5s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

/* ==============================
   BIG QUOTE
================================ */

.quote-icon{

    position:absolute;

    top:25px;

    right:35px;

    font-size:8rem;

    line-height:1;

    opacity:.05;

    font-family:Georgia, serif;

    user-select:none;

}

/* ==============================
   STARS
================================ */

.stars{

    color:#f5b301;

    font-size:1.15rem;

    letter-spacing:4px;

    margin-bottom:30px;

}

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

.testimonial-card h3{

    font-size:1.7rem;

    color:#0f172a;

    margin-bottom:20px;

}

/* ==============================
   PARAGRAPH
================================ */

.testimonial-card p{

    color:#475569;

    line-height:1.9;

    flex:1;

}

/* ==============================
   AUTHOR
================================ */

.author{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:45px;

}

.author img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.author h4{

    font-size:1rem;

    color:#0f172a;

    margin-bottom:6px;

}

.author span{

    color:#64748b;

    font-size:.9rem;

}

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

.slider-pagination{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:35px;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#cbd5e1;

    transition:.35s;

}

.dot.active{

    width:42px;

    border-radius:30px;

    background:#0b4ea2;

}

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

@media(max-width:992px){

.testimonials-section .container{

grid-template-columns:1fr;

gap:70px;

}

.slider-window{

height:450px;

}

.testimonial-card{

padding:45px;

}

}

@media(max-width:768px){

.testimonials-section{

padding:90px 0;

}

.testimonial-content h2{

font-size:2.5rem;

}

.testimonial-card{

padding:35px;

min-height:420px;

}

.author img{

width:60px;

height:60px;

}

}

@media(max-width:480px){

.slider-window{

height:500px;

}

.testimonial-card{

padding:28px;

}

.testimonial-card h3{

font-size:1.4rem;

}

}