/* =========================================================
   TESTIMONIAL ORBIT — COMPLETE CSS
   ========================================================= */

/* ---------- Google Font ---------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');


/* ---------- Main Widget ---------- */

.toe-widget {
    width: 100%;
    min-width: 0;
    position: relative;

    /*
     * IMPORTANT:
     * 3D cards ko left/right bahar nikalne dena hai.
     */
    overflow: visible;

    box-sizing: border-box;

    background: #12151c;
    color: #f2ede2;

    padding: 0 10px 20px;

    font-family: "Inter", sans-serif;
}


/* ---------- 3D Stage ---------- */

.toe-stage {
    position: relative;

    width: 100%;
    max-width: none;

    height: 420px;

    margin: 0 auto;

    perspective: 1400px;
    perspective-origin: 50% 50%;

    cursor: grab;

    /*
     * Very important for 3D cards.
     */
    overflow: visible;

    touch-action: none;

    box-sizing: border-box;
}


/* ---------- Dragging ---------- */

.toe-stage.toe-dragging {
    cursor: grabbing;
}


/* ---------- 3D Ring ---------- */

.toe-ring {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    transform-style: preserve-3d;

    transition: transform 0.15s ease-out;

    /*
     * Do NOT hide overflow here.
     */
    overflow: visible;

    will-change: transform;
}


/* ---------- Snapping Animation ---------- */

.toe-ring.toe-snapping {
    transition:
        transform 0.6s cubic-bezier(.22, 1, .36, 1);
}


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

.toe-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 280px;
    height: 220px;

    margin-top: -110px;
    margin-left: -140px;

    box-sizing: border-box;

    /*
     * Card background
     */
    background:
        linear-gradient(
            155deg,
            #1b202b 0%,
            #14181f 100%
        );

    border: 1px solid rgba(201, 162, 74, 0.18);

    border-radius: 14px;

    padding: 26px 24px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /*
     * 3D
     */
    transform-style: preserve-3d;
    backface-visibility: hidden;

    /*
     * Shadow
     */
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.50);

    /*
     * Animation
     */
    transition:
        opacity 0.4s ease,
        filter 0.4s ease,
        box-shadow 0.4s ease;

    /*
     * Prevent text overflow from breaking card.
     */
    overflow: hidden;

    font-family: "Inter", sans-serif;
}


/* =========================================================
   QUOTE MARK
   ========================================================= */

.toe-quote-mark {
    font-family: "Inter", sans-serif;

    font-size: 40px;
    font-weight: 500;

    line-height: 1;

    color: #c9a24a;

    opacity: 0.7;

    flex-shrink: 0;
}


/* =========================================================
   TESTIMONIAL TEXT
   ========================================================= */

.toe-quote-text {
    font-family: "Inter", sans-serif;

    font-style: italic;
    font-weight: 400;

    font-size: 15px;

    line-height: 1.5;

    color: #f2ede2;

    flex: 1;

    margin: 8px 0;

    overflow: hidden;

    /*
     * Long text ko card se bahar nahi nikalne deta.
     */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;

    line-clamp: 5;
}


/* =========================================================
   PERSON AREA
   ========================================================= */

.toe-person {
    display: flex;

    align-items: center;

    gap: 12px;

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

    padding-top: 12px;

    flex-shrink: 0;

    font-family: "Inter", sans-serif;
}


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

.toe-avatar {
    width: 36px;
    height: 36px;

    min-width: 36px;

    border-radius: 50%;

    background: #c9a24a;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family: "Inter", sans-serif;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    color: #151515;

    flex-shrink: 0;

    box-sizing: border-box;
}


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

.toe-name {
    font-family: "Inter", sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.3;

    color: #f2ede2;

    margin: 0;

    padding: 0;
}


/* =========================================================
   ROLE
   ========================================================= */

.toe-role {
    font-family: "Inter", sans-serif;

    font-size: 11px;

    font-weight: 400;

    line-height: 1.4;

    color: #8b93a3;

    margin-top: 2px;

    padding: 0;
}


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

.toe-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;

    margin-top: 4px;

    min-height: 20px;

    box-sizing: border-box;
}


/* ---------- Normal Dot ---------- */

.toe-dot {
    width: 6px;
    height: 6px;

    padding: 0;
    margin: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.18);

    transition:
        all 0.3s ease;

    flex-shrink: 0;
}


/* ---------- Active Dot ---------- */

.toe-dot.active {
    width: 20px;

    height: 6px;

    border-radius: 4px;

    background: #c9a24a;
}


/* =========================================================
   HIDE DOTS
   ========================================================= */

.toe-no-dots .toe-dots {
    display: none;
}


/* =========================================================
   HIDE QUOTE
   ========================================================= */

.toe-no-quote .toe-quote-mark {
    display: none;
}


/* =========================================================
   ELEMENTOR FIXES
   ========================================================= */

/*
 * Elementor containers sometimes clip children.
 * These rules help the 3D cards remain visible.
 */

.elementor-element .toe-widget,
.elementor-element .toe-stage,
.elementor-element .toe-ring {
    overflow: visible;
}


/*
 * Make sure the widget itself can extend visually.
 */

.elementor-widget-testimonial-orbit {
    overflow: visible !important;
}


/*
 * Elementor column/container clipping fix.
 */

.elementor-widget-testimonial-orbit,
.elementor-widget-testimonial-orbit > .elementor-widget-container {
    overflow: visible !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .toe-stage {
        height: 440px;

        perspective: 1500px;
    }

    .toe-card {
        width: 280px;
        height: 220px;

        margin-top: -110px;
        margin-left: -140px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .toe-stage {
        width: 100%;

        height: 400px;

        perspective: 1250px;
    }

    .toe-card {
        width: 260px;
        height: 210px;

        margin-top: -105px;
        margin-left: -130px;

        padding: 22px 20px;
    }

    .toe-quote-text {
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .toe-widget {
        width: 100%;

        padding-left: 0;
        padding-right: 0;

        overflow: visible;
    }


    .toe-stage {
        width: 100%;

        height: 340px;

        perspective: 1000px;

        overflow: visible;
    }


    .toe-ring {
        overflow: visible;
    }


    .toe-card {
        width: 240px;
        height: 200px;

        margin-top: -100px;
        margin-left: -120px;

        padding: 20px;
    }


    .toe-quote-mark {
        font-size: 32px;
    }


    .toe-quote-text {
        font-size: 14px;

        line-height: 1.45;

        -webkit-line-clamp: 5;
        line-clamp: 5;
    }


    .toe-avatar {
        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size: 13px;
    }


    .toe-name {
        font-size: 12px;
    }


    .toe-role {
        font-size: 10px;
    }
}


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

@media (max-width: 480px) {

    .toe-stage {
        height: 320px;

        perspective: 900px;
    }


    .toe-card {
        width: 220px;
        height: 190px;

        margin-top: -95px;
        margin-left: -110px;

        padding: 18px;
    }


    .toe-quote-mark {
        font-size: 30px;
    }


    .toe-quote-text {
        font-size: 13px;

        margin: 5px 0;
    }


    .toe-person {
        gap: 9px;

        padding-top: 9px;
    }


    .toe-avatar {
        width: 32px;
        height: 32px;

        min-width: 32px;

        font-size: 12px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .toe-stage {
        height: 300px;

        perspective: 850px;
    }


    .toe-card {
        width: 205px;
        height: 180px;

        margin-top: -90px;
        margin-left: -102.5px;

        padding: 16px;
    }


    .toe-quote-text {
        font-size: 12px;

        line-height: 1.4;
    }


    .toe-name {
        font-size: 11px;
    }


    .toe-role {
        font-size: 9px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .toe-ring,
    .toe-card,
    .toe-dot {
        transition: none !important;
    }
}