/* ============================================================
   EDUTECH PREMIUM TESTIMONIALS - CHOCOLATE BROWN THEME
   Logic, Scrolling, and Feedback Scroll are 100% Identical
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* 1. SECTION CONTAINER */
#custom-testi-section {
    position: relative;
    padding: 2rem 0;
    overflow: hidden;
    background-color: #452c2f !important;
    /* Deep Plum Section BG */
    background-image: url('../images/background/main-bg-2.jpeg');
    background-size: cover;
    background-position: center;
}

/* 2. HEADING STYLE */
.custom-testi-gradient-text {
    background: linear-gradient(to right, #BDB76B, #DEAC07);
    /* Gold Gradient */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

/* 3. TRACK & SCROLL LOGIC */
.custom-testi-track {
    height: auto;
    max-height: 32rem;
    overflow: hidden;
    border-radius: 1.5rem;
    padding-top: 35px;
    /* Space for floating pill */
}

@keyframes custom-testi-scroll-down {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes custom-testi-scroll-up {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

.custom-testi-active-scroll .custom-testi-anim-t2b {
    animation: custom-testi-scroll-down 18s linear infinite;
}

.custom-testi-active-scroll .custom-testi-anim-b2t {
    animation: custom-testi-scroll-up 18s linear infinite;
}

.custom-testi-track:hover .custom-testi-pause-hover {
    animation-play-state: paused;
}

/* 4. THE SIGNATURE CARD UI - UPDATED TO CHOCOLATE BROWN */
.custom-testi-card {
    background: #3B2B20 !important;
    /* Chocolate Brown Card Background */

    /* The Gold Signature Wrap Effect */
    border-left: 10px solid #BDB76B !important;
    border-bottom: 10px solid #BDB76B !important;
    border-top: 1px solid rgba(189, 183, 107, 0.2) !important;
    border-right: 1px solid rgba(189, 183, 107, 0.2) !important;

    /* Asymmetrical rounded corners */
    border-radius: 40px 10px 40px 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center !important;
    /* min-height: 180px;  */
    height: 180px;

    margin-top: 25px;
    margin-bottom: 1.5rem;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.custom-testi-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-left-color: #BDB76B !important;
    /* Theme Plum on Hover */
    border-bottom-color: #BDB76B !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}



/* 6. QUOTE & RATING - UPDATED TO WHITE TEXT */
.custom-testi-feedback {
    height: auto;
    max-height: 5.5rem;
    overflow-y: auto;
    word-wrap: break-word;
    line-height: 1.6;
    font-size: 0.85rem;
    color: #ffffff !important;
    /* White text for brown card */
    text-align: center !important;
    font-style: italic;
    margin-top: 15px;
    font-family: "Lora", Georgia, "Times New Roman", serif;
    width: 100% !important;
    text-align: justify;
}

.custom-testi-card .text-end {
    color: #BDB76B !important;
    /* Gold Stars */
    font-size: 1rem;
    margin-top: 15px;
    margin-bottom: 0;
    text-align: center !important;
    width: 100% !important;
    letter-spacing: 2px;
}

/* 7. FEEDBACK SCROLLBAR */
.custom-testi-feedback::-webkit-scrollbar {
    width: 3px;
}

.custom-testi-feedback::-webkit-scrollbar-thumb {
    background: #BDB76B;
    border-radius: 10px;
}

/* ============================================================
   EDUTECH PREMIUM TESTIMONIALS - CHOCOLATE BROWN THEME
   Logic, Scrolling, and Feedback Scroll are 100% Identical
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* 1. SECTION CONTAINER */
#custom-testi-section {
    position: relative;
    padding: 2rem 0;
    overflow: hidden;
    background-color: #452c2f !important;
    /* Deep Plum Section BG */
    background-image: url('../images/background/main-bg-2.jpeg');
    background-size: cover;
    background-position: center;
}

/* 2. HEADING STYLE */
.custom-testi-gradient-text {
    background: linear-gradient(to right, #BDB76B, #DEAC07);
    /* Gold Gradient */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

/* 3. TRACK & SCROLL LOGIC */
.custom-testi-track {
    height: auto;
    max-height: 32rem;
    overflow: hidden;
    border-radius: 1.5rem;
    padding-top: 35px;
    /* Space for floating pill */
    width: 100%;
}

@keyframes custom-testi-scroll-down {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes custom-testi-scroll-up {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

.custom-testi-active-scroll .custom-testi-anim-t2b {
    animation: custom-testi-scroll-down 18s linear infinite;
}

.custom-testi-active-scroll .custom-testi-anim-b2t {
    animation: custom-testi-scroll-up 18s linear infinite;
}

.custom-testi-track:hover .custom-testi-pause-hover {
    animation-play-state: paused;
}

/* 4. THE SIGNATURE CARD UI - UPDATED TO CHOCOLATE BROWN */
.custom-testi-card {
    background: #3B2B20 !important;
    /* Chocolate Brown Card Background */

    /* The Gold Signature Wrap Effect */
    border-left: 10px solid #BDB76B !important;
    border-bottom: 10px solid #BDB76B !important;
    border-top: 1px solid rgba(189, 183, 107, 0.2) !important;
    border-right: 1px solid rgba(189, 183, 107, 0.2) !important;

    /* Asymmetrical rounded corners */
    border-radius: 40px 10px 40px 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center !important;
    /* min-height: 180px;  */
    height: 180px;

    margin-top: 25px;
    margin-bottom: 1.5rem;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.custom-testi-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-left-color: #BDB76B !important;
    /* Theme Plum on Hover */
    border-bottom-color: #BDB76B !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* CARD (IMPORTANT) */
.card {
    position: relative;
    padding-top: 45px;
}

/* 5. THE FLOATING PROFILE PILL */
.profile-info-pill {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);

    background: #ffffff;
    border-radius: 50px;
    padding: 6px 18px 6px 6px;

    display: flex;
    align-items: flex-start; /* 🔥 better for wrapping */
    gap: 12px;

    width: 100%;                  /* 🔥 FULL WIDTH ENABLED */
    max-width: calc(100% - 40px); /* 🔥 stays inside card */

    flex-wrap: nowrap;            /* 🔥 keep image + text inline */

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 10;

    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* IMAGE WRAPPER */
.profile-info-pill .image-wrapper {
    width: 50px;
    height: 50px;
    flex-shrink: 0;

    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 2px solid #3B2B20;
}

/* IMAGE */
.profile-info-pill .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TEXT GROUP */
.pill-text-group {
    display: flex;
    flex-direction: column;

    flex: 1;        /* 🔥 allows expansion */
    min-width: 0;

    justify-content: center;
}

/* NAME */
.pill-text-group .fw-bold {
    font-family: "Lora", Georgia, "Times New Roman", serif;
    color: #3B2B20 !important;

    font-size: 0.85rem;
    line-height: 1.2;
    margin: 0 !important;
    font-weight: 700;

    white-space: normal;
    word-break: break-word;
}

/* COLLEGE */
.pill-text-group .text-primary {
    font-family: "Lora", Georgia, "Times New Roman", serif;
    color: #666 !important;

    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0 !important;
    font-weight: 500;

    white-space: normal;
    word-break: break-word;
}


/* 6. QUOTE & RATING - UPDATED TO WHITE TEXT */
.custom-testi-feedback {
    height: auto;
    max-height: 5.5rem;
    overflow-y: auto;
    word-wrap: break-word;
    line-height: 1.6;
    font-size: 0.85rem;
    color: #ffffff !important;
    /* White text for brown card */
    text-align: center !important;
    font-style: italic;
    margin-top: 15px;
    font-family: "Lora", Georgia, "Times New Roman", serif;
    width: 100% !important;
    text-align: justify;
}

.custom-testi-card .text-end {
    color: #BDB76B !important;
    /* Gold Stars */
    font-size: 1rem;
    margin-top: 15px;
    margin-bottom: 0;
    text-align: center !important;
    width: 100% !important;
    letter-spacing: 2px;
}

/* 7. FEEDBACK SCROLLBAR */
.custom-testi-feedback::-webkit-scrollbar {
    width: 3px;
}

.custom-testi-feedback::-webkit-scrollbar-thumb {
    background: #BDB76B;
    border-radius: 10px;
}

/* 8. RESPONSIVE ADJUSTMENTS */
@media (max-width: 767.98px) {
    #custom-testi-section {
        padding: 1.5rem 1rem;
    }

    .custom-testi-card {
        min-height: 160px;
        padding: 2.25rem 1rem 1rem 1rem;
        border-left: 8px solid #BDB76B !important;
        border-bottom: 8px solid #BDB76B !important;
    }

    /* .profile-info-pill {
        top: -25px;
        right: 15px;
        padding: 4px 15px 4px 4px;
        gap: 10px;
    }

    .profile-info-pill .image-wrapper {
        width: 40px;
        height: 40px;
    } */
}




@media (max-width: 767.98px) {

    /* ========================================= */
    /* 🔥 CASE 1: MORE THAN 6 → SINGLE COLUMN SCROLL */
    /* ========================================= */

    .testi-scroll-mode .row {
        display: flex !important;
        flex-direction: column !important;
    }

    .testi-scroll-mode .col-12 {
        width: 100% !important;
    }

    /* Hide second column completely */
    .testi-scroll-mode .col-12:nth-child(2) {
        display: none !important;
    }

    .testi-scroll-mode .custom-testi-track {
        max-height: 420px !important;
        overflow: hidden !important;
    }

    .testi-scroll-mode .custom-testi-anim-t2b {
        animation: custom-testi-scroll-down 20s linear infinite !important;
    }

    .testi-scroll-mode .custom-testi-anim-b2t {
        animation: none !important;
    }




    /* ========================================= */
    /* ✨ UI POLISH */
    /* ========================================= */

    .custom-testi-card {
        min-height: 150px !important;
    }

    

}





@media (max-width: 767.98px) {

    /* ========================================= */
    /* 🛠️ SHARED UI FIXES (Mobile Optimization)  */
    /* ========================================= */

    .custom-testi-card {
        width: 100% !important;
        min-height: 130px !important;
        padding: 1.8rem 1rem 1rem 1rem !important;
        position: relative !important;
    }

    /* .profile-info-pill {
        position: absolute !important;
        top: -18px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        width: auto !important;
        max-width: 95% !important;
        padding: 4px 10px !important;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        z-index: 10;
    }

    .profile-info-pill .pill-text-group span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    } */

    .custom-testi-feedback {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        max-height: 3rem !important;
        overflow-y: auto !important;
    }

    /* ========================================= */
    /* 🚀 MODE 1: GRID MODE (Horizontal Slider)  */
    /* ========================================= */
    /* Used for 3 sections, 2 cards each stack    */

    .testi-grid-mode .row {
        display: flex !important;
        flex-direction: row !important;
        /* Horizontal side-by-side */
        flex-wrap: nowrap !important;
        /* Prevent wrapping to new line */
        overflow-x: auto !important;
        /* Enable swipe */
        scroll-snap-type: x mandatory;
        /* Magnetic snap effect */
        gap: 0 !important;
        padding: 0px 0 !important;
    }

    /* Hide scrollbar for clean slider look */
    .testi-grid-mode .row::-webkit-scrollbar {
        display: none;
    }

    .testi-grid-mode .row>div {
        flex: 0 0 100% !important;
        /* One full column per view */
        max-width: 100% !important;
        scroll-snap-align: start;
        display: flex !important;
        justify-content: center !important;
    }

    .testi-grid-mode .custom-testi-pause-hover {
        display: flex !important;
        flex-direction: column !important;
        /* Stack 2 cards vertically */
        gap: 25px;
        /* Spacing between the 2 cards */
        width: 100%;
        animation: none !important;
        /* Disable scroll animations */
        transform: none !important;
    }

    /* ========================================= */
    /* 🔄 MODE 2: SCROLL MODE (Infinite Loop)   */
    /* ========================================= */
    /* Used for single column vertical scrolling  */

    .testi-scroll-mode .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: 450px !important;
        /* Height of the scroll window */
        overflow: hidden !important;
        position: relative;
    }

    .testi-scroll-mode .row>div {
        width: 100% !important;
        max-width: 420px !important;
        flex: 0 0 auto !important;
    }

    .testi-scroll-mode .custom-testi-track {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .testi-scroll-mode .custom-testi-pause-hover {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
        /* Animation moves based on 50% height of duplicated list */
        animation: custom-testi-scroll-mobile 25s linear infinite !important;
    }

    /* Ensure both columns use same vertical animation on mobile */
    .testi-scroll-mode .custom-testi-anim-b2t,
    .testi-scroll-mode .custom-testi-anim-t2b {
        animation: custom-testi-scroll-mobile 25s linear infinite !important;
    }

    @keyframes custom-testi-scroll-mobile {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-50%);
        }
    }

    /* ========================================= */
    /* 🔄 IMPROVED PAUSE ON TOUCH/HOVER          */
    /* ========================================= */

    /* Target the track specifically */
    .testi-scroll-mode .custom-testi-pause-hover {
        /* Prevents gray tap highlight on mobile */
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    /* Pause when touching (active) OR after tapping (hover) */
    .testi-scroll-mode .custom-testi-pause-hover:hover,
    .testi-scroll-mode .custom-testi-pause-hover:active,
    .testi-scroll-mode .custom-testi-pause-hover:focus {
        animation-play-state: paused !important;
    }

    /* Optional: If you want the cards to stop 
   immediately when the user starts scrolling the page */
    .testi-scroll-mode .row:active .custom-testi-pause-hover {
        animation-play-state: paused !important;
    }
}


@media (max-width: 767.98px) {
    /* ... your existing code ... */

    /* 🔥 SLIDER BUTTONS */
    .testi-grid-mode .slider-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
         background: linear-gradient(135deg, #DFBC7C 0%, #E8CD94 40%, #C49C51 100%);
        border: 1px solid #ddd;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        color: #333;
        font-size: 14px;
    }

    .testi-grid-mode .slider-nav.prev {
        left: 5px;
    }

    .testi-grid-mode .slider-nav.next {
        right: 5px;
    }

    /* Hide buttons in Scroll Mode */
    .testi-scroll-mode .slider-nav {
        display: none !important;
    }
}

/* Hide on Desktop */
@media (min-width: 768px) {
    .slider-nav {
        display: none !important;
    }
}


@media (max-width: 767.98px) {

    /* CARD */
    .custom-testi-card {
        width: 100% !important;
        min-height: 130px !important;
        padding: 1.8rem 1rem 1rem 1rem !important;
        position: relative !important;
    }

    /* 🔥 FINAL PROFILE PILL (CLEAN VERSION) */
    .profile-info-pill {
        position: absolute !important;
        top: -20px !important;

        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;

        width: 100% !important;                 /* 🔥 FULL WIDTH */
        max-width: calc(100% - 20px) !important; /* 🔥 margin from edges */

        padding: 5px 10px !important;

        display: flex;
        align-items: flex-start; /* 🔥 supports wrapping */
        gap: 8px;

        flex-wrap: nowrap; /* 🔥 image + text stay in row */

        border-radius: 40px;
        z-index: 10;
    }

    /* IMAGE */
    .profile-info-pill .image-wrapper {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    /* TEXT GROUP */
    .pill-text-group {
        flex: 1;
        min-width: 0;
    }

    /* TEXT WRAPPING (🔥 KEY FIX) */
    .pill-text-group .fw-bold,
    .pill-text-group .text-primary {
        white-space: normal !important;   /* 🔥 allow wrapping */
        word-break: break-word;
    }

    /* REMOVE OLD ELLIPSIS BEHAVIOR */
    .profile-info-pill .pill-text-group span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
}