/* ==================================================
   TESTIMONIALS PAGE — "What Our Customers Say" Intro
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color) so it automatically matches your theme.
   Link this file on testimonials.php only.
================================================== */
div.page-header.dark-section.parallaxie.testimonials-page {
    background-image: url('../images/testimonials-banner.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-header {
    height: 500px !important;
    min-height: 350px !important;
}

.testimonials-intro-section {
    position: relative;
    padding: 90px 0 30px;
    background: var(--bg-color);
    overflow: hidden;
    text-align: center;
}

.testimonials-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 100%;
    background-image: radial-gradient(rgba(22, 22, 22, 0.06) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* large, faint quotation mark grounding the heading in the "testimonial" idea */
.testimonials-intro-section::after {
    content: '\201C';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 320px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.testimonials-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px 8px 16px;
    margin-bottom: 26px;
}

.testimonials-intro-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonials-intro-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--primary-color);
    margin-bottom: 22px;
    text-align: center;
    cursor: none;
}

.testimonials-intro-title .text-accent {
    color: var(--accent-color);
}

.testimonials-intro-divider {
    position: relative;
    display: block;
    width: 100px;
    height: 8px;
    margin: 0 auto 28px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
    opacity: 0.85;
}

.testimonials-intro-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-text strong {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tablet */
@media (max-width: 991px) {
    .testimonials-intro-section {
        padding: 50px 0 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }

    /* Image: full width on mobile, no gap on the side */
    .experience-highlights-image {
        width: 100%;
    }

    .experience-highlights-image img {
        height: 220px;
    }

    /* Justify text looks uneven on narrow screens — switch to left align */
    .experience-highlights-desc,
    .experience-highlight-content p {
        text-align: left;
    }

    /* Slightly bigger heading + tighter badge for mobile */
    .experience-highlights-intro h2 {
        font-size: 22px;
    }

    .experience-highlights-intro .section-sub-title {
        font-size: 11.5px;
        padding: 7px 16px;
    }

    /* A bit more breathing room between rows */
    .experience-highlights-list {
        gap: 10px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 10px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 20px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--primary-color); /* was var(--accent-color) — now dark */
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2; /* was 1.7 — slightly bolder so it reads clearly in dark color */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}


/* new */

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   (left: intro + image / right: vertical highlight list)
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-layout {
    display: flex;
    align-items: center;
    gap: 64px;
}

.experience-highlights-intro {
    flex: 0 1 42%;
    position: sticky;
    top: 140px;
}


.experience-highlights-intro .section-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px;
    margin-bottom: 22px;
}

.experience-highlights-intro h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--primary-color);
    margin: 0 0 18px;
}

.experience-highlights-desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: justify;
    margin: 0 0 34px;
    max-width: 460px;
}

.experience-highlights-image {
    position: relative;
    width: 82%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 55px -28px rgba(22, 22, 22, 0.28);
}



.experience-highlights-image img {
    display: block;
    width: 100%;
    height: 360px; /* was 320px — small increase */
    object-fit: cover;
}

/* ---------- RIGHT column ---------- */
.experience-highlights-list {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.experience-highlight-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: 0 14px 32px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* gold accent bar that grows in from the middle on hover, left edge */
.experience-highlight-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0%;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    transition: height 0.45s ease;
}

.experience-highlight-row:hover::before {
    height: 100%;
}

.experience-highlight-row:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 45px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.experience-highlight-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 290px; /* was 260px — proportional increase */
    }

    .experience-highlights-layout {
        flex-direction: column;
        gap: 40px;
    }

    .experience-highlights-intro {
        position: static;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .experience-highlights-desc {
        max-width: 100%;
    }

    .experience-highlights-image img {
        height: 260px;
    }

    .experience-highlights-list {
        flex: 1 1 auto;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-desc {
        text-align: left;
    }

    .experience-highlight-row {
        flex-direction: column;
        gap: 14px;
        padding: 22px 22px 20px;
    }

    .experience-highlight-row:hover {
        transform: translateY(-4px);
    }

    .experience-highlight-row::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        transform: none;
        background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    }

    .experience-highlight-row:hover::before {
        height: 3px;
        width: 100%;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Auto-Playing Reviews Carousel
   Reuses .review-card styling; cards are equal height
   via flexbox align-items:stretch on the track.
================================================== */

.reviews-carousel {
    position: relative;
    padding: 0 56px;
}

.reviews-carousel-viewport {
    overflow: hidden;
}

.reviews-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.reviews-carousel-track .review-card {
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
}

.reviews-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 25px -12px rgba(22, 22, 22, 0.25);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reviews-carousel-arrow:hover {
    background: var(--accent-color);
    color: var(--white-color);
    border-color: var(--accent-color);
}

.reviews-carousel-arrow-prev {
    left: 0;
}

.reviews-carousel-arrow-next {
    right: 0;
}

/* Tablet: 2 cards visible */
@media (max-width: 991px) {
    .reviews-carousel {
        padding: 0 48px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 calc((100% - 32px) / 2);
        width: calc((100% - 32px) / 2);
    }
}

/* Mobile: 1 card visible */
@media (max-width: 767px) {
    .reviews-carousel {
        padding: 0 4px;
    }

    .reviews-carousel-track {
        gap: 20px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .reviews-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
        top: auto;
        bottom: -50px;
        transform: none;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 46px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 46px);
    }

    .customer-reviews-section {
        padding-bottom: 90px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Review Card: Compact Height
   (footer with reviewer name removed, spacing tightened
   so cards read like real, shorter testimonial notes)
================================================== */

.review-card {
    padding: 30px 30px 26px;
}

.review-card-top {
    margin-bottom: 16px;
}

.review-card-quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    font-style: normal;
}

.review-card-quote-mark {
    top: -2px;
    font-size: 76px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 26px 24px 22px;
    }
}

/* Star rating — inline SVG stars (no icon-font dependency) */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.review-card-rating svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ==================================================
   TESTIMONIALS PAGE — Final Size Pass
   Trims vertical rhythm on the reviews carousel and
   shrinks the Customer Experience Highlights section
   (right-side boxes were oversized) for a tighter,
   more systematic layout.
================================================== */

/* Reviews carousel — tighten section spacing */
.customer-reviews-section {
    padding: 10px 0 70px;
}

/* Customer Experience Highlights — overall section */
.experience-highlights-section {
    padding: 56px 0 64px;
}

.experience-highlights-layout {
    gap: 48px;
}

/* Left column: smaller heading/desc, smaller image */
.experience-highlights-intro h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 14px;
}

.experience-highlights-desc {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 420px;
}

.experience-highlights-image img {
    height: 280px;
}

/* Right column: compact highlight rows/boxes */
.experience-highlights-list {
    gap: 12px;
}

.experience-highlight-row {
    gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
}

.experience-highlight-icon {
    width: 40px;
    height: 40px;
}

.experience-highlight-icon svg {
    width: 17px;
    height: 17px;
}

.experience-highlight-content h3 {
    font-size: 15.5px;
    margin: 0 0 3px;
}

.experience-highlight-content p {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 30px 0 34px;
    }

    .experience-highlight-row {
        padding: 16px 18px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Reviews Carousel: Compact Pass 2
   Cards were still reading tall on real screens; tighten
   padding, quote line-height/size, badge and star sizing.
================================================== */

.testimonials-intro-section {
    padding: 56px 0 10px;
}

.customer-reviews-section {
    padding: 0 0 56px;
}

.review-card {
    padding: 22px 24px 20px;
    border-radius: 16px;
}

.review-card-top {
    margin-bottom: 12px;
}

.review-card-badge {
    font-size: 10px;
    padding: 5px 10px;
}

.review-card-rating svg {
    width: 12px;
    height: 12px;
}

.review-card-quote {
    font-size: 14.5px;
    line-height: 1.65;
}

.review-card-quote-mark {
    font-size: 60px;
    top: 0;
    right: 16px;
}

.reviews-carousel {
    padding: 0 50px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 20px 20px 18px;
    }

    .review-card-quote {
        font-size: 14px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Single-Card Google-Style Reviews
   One horizontal card visible at a time, styled to read
   like an authentic Google review (official G logo SVG,
   gold stars, "Posted on Google" line).
================================================== */

/* Show exactly one full-width card per slide, at every breakpoint */
.reviews-carousel-track .review-card {
    flex: 0 0 100%;
    width: 100%;
}

.google-review-card {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 28px 36px;
}

.google-review-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 128px;
    padding-right: 32px;
    border-right: 1px solid var(--divider-color);
    text-align: center;
}

.google-review-icon svg {
    width: 34px;
    height: 34px;
}

.google-review-source {
    font-size: 11.5px;
    color: var(--text-color);
    opacity: 0.75;
}

.google-review-source strong {
    color: var(--primary-color);
    font-weight: 600;
}

.google-review-right {
    flex: 1 1 auto;
    min-width: 0;
}

.google-review-right .review-card-quote {
    text-align: left;
    margin: 0;
}

/* the old decorative quote-mark watermark is no longer used in this layout */
.google-review-card .review-card-quote-mark {
    display: none;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 22px 22px;
    }

    .google-review-left {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 14px;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        width: 100%;
        text-align: left;
    }

    .google-review-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Systematic Sizing Pass
   Brings heading/body text and card proportions in line
   with the rest of the site (Livora homepage reference):
   moderate heading sizes, small body copy, contained
   card width instead of edge-to-edge, tighter spacing.
================================================== */

.testimonials-intro-section {
    padding: 44px 0 8px;
}

.testimonials-intro-title {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    margin-bottom: 16px;
}

.testimonials-intro-text {
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 780px;
}

.customer-reviews-section {
    padding: 0 0 44px;
}

/* Contain the single review card instead of stretching edge to edge */
.reviews-carousel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 46px;
}

.google-review-card {
    gap: 28px;
    padding: 22px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 108px;
    gap: 8px;
    padding-right: 24px;
}

.google-review-icon svg {
    width: 28px;
    height: 28px;
}

.review-card-rating svg {
    width: 11px;
    height: 11px;
}

.google-review-source {
    font-size: 11px;
}

.google-review-right .review-card-quote {
    font-size: 14px;
    line-height: 1.7;
}

.reviews-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .testimonials-intro-title {
        font-size: 22px;
    }

    .testimonials-intro-text {
        font-size: 13.5px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }

    .google-review-card {
        padding: 18px 18px 16px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Layout Fix + Refinement Pass
   FIX: .google-review-card never set flex-direction:row,
   so it was inheriting flex-direction:column from the
   base .review-card rule — pushing the quote text below
   instead of beside the Google icon/stars column. Also
   bumps heading/description size slightly and tightens +
   styles the card for a cleaner, more compact look.
================================================== */

.testimonials-intro-title {
    font-size: clamp(26px, 2.9vw, 34px);
}

.testimonials-intro-text {
    font-size: 15.5px;
    line-height: 1.8;
}

.google-review-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 20px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 100px;
    gap: 8px;
    padding-right: 22px;
}

.google-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.08);
}

.google-review-icon svg {
    width: 24px;
    height: 24px;
}

.google-review-right .review-card-quote {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        padding: 18px 18px 16px;
    }

    .google-review-icon {
        width: 36px;
        height: 36px;
    }

    .google-review-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Spacing + Width Adjustment
   Stretches the intro description wider, tightens the
   gap before the review card, and adds a touch more
   height to the card itself.
================================================== */

.testimonials-intro-text {
    max-width: 1040px;
    margin: 0 auto 22px;
}

.customer-reviews-section {
    padding-top: 0;
}

.google-review-card {
    padding: 30px 30px;
    min-height: 150px;
}

@media (max-width: 767px) {
    .testimonials-intro-text {
        max-width: 100%;
    }

    .google-review-card {
        padding: 22px 20px 20px;
        min-height: 0;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Sequential Card Number
   Small numbered badge (01, 02, 03...) in the top-right
   corner of each review card.
================================================== */

.google-review-card {
    position: relative;
}

.google-review-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    opacity: 0.55;
}

@media (max-width: 767px) {
    .google-review-number {
        top: 14px;
        right: 16px;
        font-size: 12px;
    }
}

/* ==================================================
   TESTIMONIALS CTA — "Your Kitchen or Wardrobe
   Starts With a Conversation"
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --white-color) so
   it automatically matches your theme.
================================================== */

.testimonials-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--brand-navy-950) 55%, var(--accent-color) 150%);
    overflow: hidden;
    text-align: center;
}

/* faint dotted pattern, masked to a soft oval — same device used on the intro section */
.testimonials-cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.testimonials-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* dot + line divider, matches .testimonials-intro-divider for visual consistency */
.testimonials-cta-divider {
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
}

.testimonials-cta-title {
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--white-color) !important;
}

.testimonials-cta-text {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-align: center;
}

.testimonials-cta-subtext {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 36px;
    text-align: center;
}

.testimonials-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.testimonials-cta-btn-outline {
    color: var(--white-color) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.testimonials-cta-btn-outline:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

footer.main-footer.stylux-footer {
    position: relative;
    z-index: 2;
    margin-top: -3px;
}

@media (max-width: 767px) {
    .testimonials-cta-section {
        padding: 70px 0;
    }

    .testimonials-cta-title {
        font-size: 26px;
    }

    .testimonials-cta-text {
        font-size: 15px;
    }
}

/* ==================================================
   CUSTOMER EXPERIENCE HIGHLIGHTS — Compact Pass 2
   Section was still reading taller than the section
   above it, and the right-side boxes had more padding
   than needed. Tightens section spacing, image height,
   and each highlight row/box.
================================================== */
.page-header {
    height: 500px !important;
    min-height: 350px !important;
}

.experience-highlights-section {
    padding: 40px 0 48px;
}

.experience-highlights-layout {
    gap: 36px;
}

.experience-highlights-intro h2 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 10px;
}

.experience-highlights-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 30px;
}

.experience-highlights-image img {
    height: 220px;
}

.experience-highlights-list {
    gap: 8px;
} 

.experience-highlight-row {
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
}

.experience-highlight-icon {
    width: 28px;
    height: 28px;
}

.experience-highlight-icon svg {
    width: 13px;
    height: 13px;
}

.experience-highlight-content h3 {
    font-size: 13px;
    margin: 0 0 2px;
}

.experience-highlight-content p {
    font-size: 11.5px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }
}/* ==================================================
   TESTIMONIALS PAGE — "What Our Customers Say" Intro
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color) so it automatically matches your theme.
   Link this file on testimonials.php only.
================================================== */

.testimonials-intro-section {
    position: relative;
    padding: 90px 0 30px;
    background: var(--bg-color);
    overflow: hidden;
    text-align: center;
}

.testimonials-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 100%;
    background-image: radial-gradient(rgba(22, 22, 22, 0.06) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* large, faint quotation mark grounding the heading in the "testimonial" idea */
.testimonials-intro-section::after {
    content: '\201C';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 320px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.testimonials-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px 8px 16px;
    margin-bottom: 26px;
}

.testimonials-intro-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonials-intro-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--primary-color);
    margin-bottom: 22px;
    text-align: center;
    cursor: none;
}

.testimonials-intro-title .text-accent {
    color: var(--accent-color);
}

.testimonials-intro-divider {
    position: relative;
    display: block;
    width: 100px;
    height: 8px;
    margin: 0 auto 28px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
    opacity: 0.85;
}

.testimonials-intro-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-text strong {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tablet */
@media (max-width: 991px) {
    .testimonials-intro-section {
        padding: 50px 0 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }

    /* Image: full width on mobile, no gap on the side */
    .experience-highlights-image {
        width: 100%;
    }

    .experience-highlights-image img {
        height: 220px;
    }

    /* Justify text looks uneven on narrow screens — switch to left align */
    .experience-highlights-desc,
    .experience-highlight-content p {
        text-align: left;
    }

    /* Slightly bigger heading + tighter badge for mobile */
    .experience-highlights-intro h2 {
        font-size: 22px;
    }

    .experience-highlights-intro .section-sub-title {
        font-size: 11.5px;
        padding: 7px 16px;
    }

    /* A bit more breathing room between rows */
    .experience-highlights-list {
        gap: 10px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 10px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 20px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--primary-color); /* was var(--accent-color) — now dark */
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2; /* was 1.7 — slightly bolder so it reads clearly in dark color */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}


/* new */

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   (left: intro + image / right: vertical highlight list)
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-layout {
    display: flex;
    align-items: center;
    gap: 64px;
}

.experience-highlights-intro {
    flex: 0 1 42%;
    position: sticky;
    top: 140px;
}


.experience-highlights-intro .section-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px;
    margin-bottom: 22px;
}

.experience-highlights-intro h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--primary-color);
    margin: 0 0 18px;
}

.experience-highlights-desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: justify;
    margin: 0 0 34px;
    max-width: 460px;
}

.experience-highlights-image {
    position: relative;
    width: 82%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 55px -28px rgba(22, 22, 22, 0.28);
}



.experience-highlights-image img {
    display: block;
    width: 100%;
    height: 360px; /* was 320px — small increase */
    object-fit: cover;
}

/* ---------- RIGHT column ---------- */
.experience-highlights-list {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.experience-highlight-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: 0 14px 32px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* gold accent bar that grows in from the middle on hover, left edge */
.experience-highlight-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0%;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    transition: height 0.45s ease;
}

.experience-highlight-row:hover::before {
    height: 100%;
}

.experience-highlight-row:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 45px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.experience-highlight-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 290px; /* was 260px — proportional increase */
    }

    .experience-highlights-layout {
        flex-direction: column;
        gap: 40px;
    }

    .experience-highlights-intro {
        position: static;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .experience-highlights-desc {
        max-width: 100%;
    }

    .experience-highlights-image img {
        height: 260px;
    }

    .experience-highlights-list {
        flex: 1 1 auto;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-desc {
        text-align: left;
    }

    .experience-highlight-row {
        flex-direction: column;
        gap: 14px;
        padding: 22px 22px 20px;
    }

    .experience-highlight-row:hover {
        transform: translateY(-4px);
    }

    .experience-highlight-row::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        transform: none;
        background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    }

    .experience-highlight-row:hover::before {
        height: 3px;
        width: 100%;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Auto-Playing Reviews Carousel
   Reuses .review-card styling; cards are equal height
   via flexbox align-items:stretch on the track.
================================================== */

.reviews-carousel {
    position: relative;
    padding: 0 56px;
}

.reviews-carousel-viewport {
    overflow: hidden;
}

.reviews-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.reviews-carousel-track .review-card {
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
}

.reviews-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 25px -12px rgba(22, 22, 22, 0.25);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reviews-carousel-arrow:hover {
    background: var(--accent-color);
    color: var(--white-color);
    border-color: var(--accent-color);
}

.reviews-carousel-arrow-prev {
    left: 0;
}

.reviews-carousel-arrow-next {
    right: 0;
}

/* Tablet: 2 cards visible */
@media (max-width: 991px) {
    .reviews-carousel {
        padding: 0 48px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 calc((100% - 32px) / 2);
        width: calc((100% - 32px) / 2);
    }
}

/* Mobile: 1 card visible */
@media (max-width: 767px) {
    .reviews-carousel {
        padding: 0 4px;
    }

    .reviews-carousel-track {
        gap: 20px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .reviews-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
        top: auto;
        bottom: -50px;
        transform: none;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 46px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 46px);
    }

    .customer-reviews-section {
        padding-bottom: 90px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Review Card: Compact Height
   (footer with reviewer name removed, spacing tightened
   so cards read like real, shorter testimonial notes)
================================================== */

.review-card {
    padding: 30px 30px 26px;
}

.review-card-top {
    margin-bottom: 16px;
}

.review-card-quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    font-style: normal;
}

.review-card-quote-mark {
    top: -2px;
    font-size: 76px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 26px 24px 22px;
    }
}

/* Star rating — inline SVG stars (no icon-font dependency) */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.review-card-rating svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ==================================================
   TESTIMONIALS PAGE — Final Size Pass
   Trims vertical rhythm on the reviews carousel and
   shrinks the Customer Experience Highlights section
   (right-side boxes were oversized) for a tighter,
   more systematic layout.
================================================== */

/* Reviews carousel — tighten section spacing */
.customer-reviews-section {
    padding: 10px 0 70px;
}

/* Customer Experience Highlights — overall section */
.experience-highlights-section {
    padding: 56px 0 64px;
}

.experience-highlights-layout {
    gap: 48px;
}

/* Left column: smaller heading/desc, smaller image */
.experience-highlights-intro h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 14px;
}

.experience-highlights-desc {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 420px;
}

.experience-highlights-image img {
    height: 280px;
}

/* Right column: compact highlight rows/boxes */
.experience-highlights-list {
    gap: 12px;
}

.experience-highlight-row {
    gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
}

.experience-highlight-icon {
    width: 40px;
    height: 40px;
}

.experience-highlight-icon svg {
    width: 17px;
    height: 17px;
}

.experience-highlight-content h3 {
    font-size: 15.5px;
    margin: 0 0 3px;
}

.experience-highlight-content p {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 30px 0 34px;
    }

    .experience-highlight-row {
        padding: 16px 18px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Reviews Carousel: Compact Pass 2
   Cards were still reading tall on real screens; tighten
   padding, quote line-height/size, badge and star sizing.
================================================== */

.testimonials-intro-section {
    padding: 56px 0 10px;
}

.customer-reviews-section {
    padding: 0 0 56px;
}

.review-card {
    padding: 22px 24px 20px;
    border-radius: 16px;
}

.review-card-top {
    margin-bottom: 12px;
}

.review-card-badge {
    font-size: 10px;
    padding: 5px 10px;
}

.review-card-rating svg {
    width: 12px;
    height: 12px;
}

.review-card-quote {
    font-size: 14.5px;
    line-height: 1.65;
}

.review-card-quote-mark {
    font-size: 60px;
    top: 0;
    right: 16px;
}

.reviews-carousel {
    padding: 0 50px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 20px 20px 18px;
    }

    .review-card-quote {
        font-size: 14px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Single-Card Google-Style Reviews
   One horizontal card visible at a time, styled to read
   like an authentic Google review (official G logo SVG,
   gold stars, "Posted on Google" line).
================================================== */

/* Show exactly one full-width card per slide, at every breakpoint */
.reviews-carousel-track .review-card {
    flex: 0 0 100%;
    width: 100%;
}

.google-review-card {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 28px 36px;
}

.google-review-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 128px;
    padding-right: 32px;
    border-right: 1px solid var(--divider-color);
    text-align: center;
}

.google-review-icon svg {
    width: 34px;
    height: 34px;
}

.google-review-source {
    font-size: 11.5px;
    color: var(--text-color);
    opacity: 0.75;
}

.google-review-source strong {
    color: var(--primary-color);
    font-weight: 600;
}

.google-review-right {
    flex: 1 1 auto;
    min-width: 0;
}

.google-review-right .review-card-quote {
    text-align: left;
    margin: 0;
}

/* the old decorative quote-mark watermark is no longer used in this layout */
.google-review-card .review-card-quote-mark {
    display: none;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 22px 22px;
    }

    .google-review-left {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 14px;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        width: 100%;
        text-align: left;
    }

    .google-review-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Systematic Sizing Pass
   Brings heading/body text and card proportions in line
   with the rest of the site (Livora homepage reference):
   moderate heading sizes, small body copy, contained
   card width instead of edge-to-edge, tighter spacing.
================================================== */

.testimonials-intro-section {
    padding: 44px 0 8px;
}

.testimonials-intro-title {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    margin-bottom: 16px;
}

.testimonials-intro-text {
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 780px;
}

.customer-reviews-section {
    padding: 0 0 44px;
}

/* Contain the single review card instead of stretching edge to edge */
.reviews-carousel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 46px;
}

.google-review-card {
    gap: 28px;
    padding: 22px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 108px;
    gap: 8px;
    padding-right: 24px;
}

.google-review-icon svg {
    width: 28px;
    height: 28px;
}

.review-card-rating svg {
    width: 11px;
    height: 11px;
}

.google-review-source {
    font-size: 11px;
}

.google-review-right .review-card-quote {
    font-size: 14px;
    line-height: 1.7;
}

.reviews-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .testimonials-intro-title {
        font-size: 22px;
    }

    .testimonials-intro-text {
        font-size: 13.5px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }

    .google-review-card {
        padding: 18px 18px 16px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Layout Fix + Refinement Pass
   FIX: .google-review-card never set flex-direction:row,
   so it was inheriting flex-direction:column from the
   base .review-card rule — pushing the quote text below
   instead of beside the Google icon/stars column. Also
   bumps heading/description size slightly and tightens +
   styles the card for a cleaner, more compact look.
================================================== */

.testimonials-intro-title {
    font-size: clamp(26px, 2.9vw, 34px);
}

.testimonials-intro-text {
    font-size: 15.5px;
    line-height: 1.8;
}

.google-review-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 20px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 100px;
    gap: 8px;
    padding-right: 22px;
}

.google-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.08);
}

.google-review-icon svg {
    width: 24px;
    height: 24px;
}

.google-review-right .review-card-quote {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        padding: 18px 18px 16px;
    }

    .google-review-icon {
        width: 36px;
        height: 36px;
    }

    .google-review-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Spacing + Width Adjustment
   Stretches the intro description wider, tightens the
   gap before the review card, and adds a touch more
   height to the card itself.
================================================== */

.testimonials-intro-text {
    max-width: 1040px;
    margin: 0 auto 22px;
}

.customer-reviews-section {
    padding-top: 0;
}

.google-review-card {
    padding: 30px 30px;
    min-height: 150px;
}

@media (max-width: 767px) {
    .testimonials-intro-text {
        max-width: 100%;
    }

    .google-review-card {
        padding: 22px 20px 20px;
        min-height: 0;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Sequential Card Number
   Small numbered badge (01, 02, 03...) in the top-right
   corner of each review card.
================================================== */

.google-review-card {
    position: relative;
}

.google-review-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    opacity: 0.55;
}

@media (max-width: 767px) {
    .google-review-number {
        top: 14px;
        right: 16px;
        font-size: 12px;
    }
}

/* ==================================================
   TESTIMONIALS CTA — "Your Kitchen or Wardrobe
   Starts With a Conversation"
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --white-color) so
   it automatically matches your theme.
================================================== */

.testimonials-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--brand-navy-950) 55%, var(--accent-color) 150%);
    overflow: hidden;
    text-align: center;
}

/* faint dotted pattern, masked to a soft oval — same device used on the intro section */
.testimonials-cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.testimonials-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* dot + line divider, matches .testimonials-intro-divider for visual consistency */
.testimonials-cta-divider {
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
}

.testimonials-cta-title {
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--white-color) !important;
}

.testimonials-cta-text {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-align: center;
}

.testimonials-cta-subtext {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 36px;
    text-align: center;
}

.testimonials-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.testimonials-cta-btn-outline {
    color: var(--white-color) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.testimonials-cta-btn-outline:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

footer.main-footer.stylux-footer {
    position: relative;
    z-index: 2;
    margin-top: -3px;
}

@media (max-width: 767px) {
    .testimonials-cta-section {
        padding: 70px 0;
    }

    .testimonials-cta-title {
        font-size: 26px;
    }

    .testimonials-cta-text {
        font-size: 15px;
    }
}

/* ==================================================
   CUSTOMER EXPERIENCE HIGHLIGHTS — Compact Pass 2
   Section was still reading taller than the section
   above it, and the right-side boxes had more padding
   than needed. Tightens section spacing, image height,
   and each highlight row/box.
================================================== */
.page-header {
    height: 500px !important;
    min-height: 350px !important;
}

.experience-highlights-section {
    padding: 40px 0 48px;
}

.experience-highlights-layout {
    gap: 36px;
}

.experience-highlights-intro h2 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 10px;
}

.experience-highlights-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 30px;
}

.experience-highlights-image img {
    height: 220px;
}

.experience-highlights-list {
    gap: 8px;
} 

.experience-highlight-row {
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
}

.experience-highlight-icon {
    width: 28px;
    height: 28px;
}

.experience-highlight-icon svg {
    width: 13px;
    height: 13px;
}

.experience-highlight-content h3 {
    font-size: 13px;
    margin: 0 0 2px;
}

.experience-highlight-content p {
    font-size: 11.5px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }
}/* ==================================================
   TESTIMONIALS PAGE — "What Our Customers Say" Intro
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color) so it automatically matches your theme.
   Link this file on testimonials.php only.
================================================== */

.testimonials-intro-section {
    position: relative;
    padding: 90px 0 30px;
    background: var(--bg-color);
    overflow: hidden;
    text-align: center;
}

.testimonials-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 100%;
    background-image: radial-gradient(rgba(22, 22, 22, 0.06) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* large, faint quotation mark grounding the heading in the "testimonial" idea */
.testimonials-intro-section::after {
    content: '\201C';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 320px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.testimonials-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px 8px 16px;
    margin-bottom: 26px;
}

.testimonials-intro-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonials-intro-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--primary-color);
    margin-bottom: 22px;
    text-align: center;
    cursor: none;
}

.testimonials-intro-title .text-accent {
    color: var(--accent-color);
}

.testimonials-intro-divider {
    position: relative;
    display: block;
    width: 100px;
    height: 8px;
    margin: 0 auto 28px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
    opacity: 0.85;
}

.testimonials-intro-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-text strong {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tablet */
@media (max-width: 991px) {
    .testimonials-intro-section {
        padding: 50px 0 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }

    /* Image: full width on mobile, no gap on the side */
    .experience-highlights-image {
        width: 100%;
    }

    .experience-highlights-image img {
        height: 220px;
    }

    /* Justify text looks uneven on narrow screens — switch to left align */
    .experience-highlights-desc,
    .experience-highlight-content p {
        text-align: left;
    }

    /* Slightly bigger heading + tighter badge for mobile */
    .experience-highlights-intro h2 {
        font-size: 22px;
    }

    .experience-highlights-intro .section-sub-title {
        font-size: 11.5px;
        padding: 7px 16px;
    }

    /* A bit more breathing room between rows */
    .experience-highlights-list {
        gap: 10px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 10px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 20px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--primary-color); /* was var(--accent-color) — now dark */
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2; /* was 1.7 — slightly bolder so it reads clearly in dark color */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}


/* new */

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   (left: intro + image / right: vertical highlight list)
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-layout {
    display: flex;
    align-items: center;
    gap: 64px;
}

.experience-highlights-intro {
    flex: 0 1 42%;
    position: sticky;
    top: 140px;
}


.experience-highlights-intro .section-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px;
    margin-bottom: 22px;
}

.experience-highlights-intro h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--primary-color);
    margin: 0 0 18px;
}

.experience-highlights-desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: justify;
    margin: 0 0 34px;
    max-width: 460px;
}

.experience-highlights-image {
    position: relative;
    width: 82%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 55px -28px rgba(22, 22, 22, 0.28);
}



.experience-highlights-image img {
    display: block;
    width: 100%;
    height: 360px; /* was 320px — small increase */
    object-fit: cover;
}

/* ---------- RIGHT column ---------- */
.experience-highlights-list {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.experience-highlight-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: 0 14px 32px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* gold accent bar that grows in from the middle on hover, left edge */
.experience-highlight-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0%;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    transition: height 0.45s ease;
}

.experience-highlight-row:hover::before {
    height: 100%;
}

.experience-highlight-row:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 45px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.experience-highlight-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 290px; /* was 260px — proportional increase */
    }

    .experience-highlights-layout {
        flex-direction: column;
        gap: 40px;
    }

    .experience-highlights-intro {
        position: static;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .experience-highlights-desc {
        max-width: 100%;
    }

    .experience-highlights-image img {
        height: 260px;
    }

    .experience-highlights-list {
        flex: 1 1 auto;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-desc {
        text-align: left;
    }

    .experience-highlight-row {
        flex-direction: column;
        gap: 14px;
        padding: 22px 22px 20px;
    }

    .experience-highlight-row:hover {
        transform: translateY(-4px);
    }

    .experience-highlight-row::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        transform: none;
        background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    }

    .experience-highlight-row:hover::before {
        height: 3px;
        width: 100%;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Auto-Playing Reviews Carousel
   Reuses .review-card styling; cards are equal height
   via flexbox align-items:stretch on the track.
================================================== */

.reviews-carousel {
    position: relative;
    padding: 0 56px;
}

.reviews-carousel-viewport {
    overflow: hidden;
}

.reviews-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.reviews-carousel-track .review-card {
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
}

.reviews-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 25px -12px rgba(22, 22, 22, 0.25);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reviews-carousel-arrow:hover {
    background: var(--accent-color);
    color: var(--white-color);
    border-color: var(--accent-color);
}

.reviews-carousel-arrow-prev {
    left: 0;
}

.reviews-carousel-arrow-next {
    right: 0;
}

/* Tablet: 2 cards visible */
@media (max-width: 991px) {
    .reviews-carousel {
        padding: 0 48px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 calc((100% - 32px) / 2);
        width: calc((100% - 32px) / 2);
    }
}

/* Mobile: 1 card visible */
@media (max-width: 767px) {
    .reviews-carousel {
        padding: 0 4px;
    }

    .reviews-carousel-track {
        gap: 20px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .reviews-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
        top: auto;
        bottom: -50px;
        transform: none;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 46px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 46px);
    }

    .customer-reviews-section {
        padding-bottom: 90px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Review Card: Compact Height
   (footer with reviewer name removed, spacing tightened
   so cards read like real, shorter testimonial notes)
================================================== */

.review-card {
    padding: 30px 30px 26px;
}

.review-card-top {
    margin-bottom: 16px;
}

.review-card-quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    font-style: normal;
}

.review-card-quote-mark {
    top: -2px;
    font-size: 76px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 26px 24px 22px;
    }
}

/* Star rating — inline SVG stars (no icon-font dependency) */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.review-card-rating svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ==================================================
   TESTIMONIALS PAGE — Final Size Pass
   Trims vertical rhythm on the reviews carousel and
   shrinks the Customer Experience Highlights section
   (right-side boxes were oversized) for a tighter,
   more systematic layout.
================================================== */

/* Reviews carousel — tighten section spacing */
.customer-reviews-section {
    padding: 10px 0 70px;
}

/* Customer Experience Highlights — overall section */
.experience-highlights-section {
    padding: 56px 0 64px;
}

.experience-highlights-layout {
    gap: 48px;
}

/* Left column: smaller heading/desc, smaller image */
.experience-highlights-intro h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 14px;
}

.experience-highlights-desc {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 420px;
}

.experience-highlights-image img {
    height: 280px;
}

/* Right column: compact highlight rows/boxes */
.experience-highlights-list {
    gap: 12px;
}

.experience-highlight-row {
    gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
}

.experience-highlight-icon {
    width: 40px;
    height: 40px;
}

.experience-highlight-icon svg {
    width: 17px;
    height: 17px;
}

.experience-highlight-content h3 {
    font-size: 15.5px;
    margin: 0 0 3px;
}

.experience-highlight-content p {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 30px 0 34px;
    }

    .experience-highlight-row {
        padding: 16px 18px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Reviews Carousel: Compact Pass 2
   Cards were still reading tall on real screens; tighten
   padding, quote line-height/size, badge and star sizing.
================================================== */

.testimonials-intro-section {
    padding: 56px 0 10px;
}

.customer-reviews-section {
    padding: 0 0 56px;
}

.review-card {
    padding: 22px 24px 20px;
    border-radius: 16px;
}

.review-card-top {
    margin-bottom: 12px;
}

.review-card-badge {
    font-size: 10px;
    padding: 5px 10px;
}

.review-card-rating svg {
    width: 12px;
    height: 12px;
}

.review-card-quote {
    font-size: 14.5px;
    line-height: 1.65;
}

.review-card-quote-mark {
    font-size: 60px;
    top: 0;
    right: 16px;
}

.reviews-carousel {
    padding: 0 50px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 20px 20px 18px;
    }

    .review-card-quote {
        font-size: 14px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Single-Card Google-Style Reviews
   One horizontal card visible at a time, styled to read
   like an authentic Google review (official G logo SVG,
   gold stars, "Posted on Google" line).
================================================== */

/* Show exactly one full-width card per slide, at every breakpoint */
.reviews-carousel-track .review-card {
    flex: 0 0 100%;
    width: 100%;
}

.google-review-card {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 28px 36px;
}

.google-review-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 128px;
    padding-right: 32px;
    border-right: 1px solid var(--divider-color);
    text-align: center;
}

.google-review-icon svg {
    width: 34px;
    height: 34px;
}

.google-review-source {
    font-size: 11.5px;
    color: var(--text-color);
    opacity: 0.75;
}

.google-review-source strong {
    color: var(--primary-color);
    font-weight: 600;
}

.google-review-right {
    flex: 1 1 auto;
    min-width: 0;
}

.google-review-right .review-card-quote {
    text-align: left;
    margin: 0;
}

/* the old decorative quote-mark watermark is no longer used in this layout */
.google-review-card .review-card-quote-mark {
    display: none;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 22px 22px;
    }

    .google-review-left {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 14px;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        width: 100%;
        text-align: left;
    }

    .google-review-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Systematic Sizing Pass
   Brings heading/body text and card proportions in line
   with the rest of the site (Livora homepage reference):
   moderate heading sizes, small body copy, contained
   card width instead of edge-to-edge, tighter spacing.
================================================== */

.testimonials-intro-section {
    padding: 44px 0 8px;
}

.testimonials-intro-title {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    margin-bottom: 16px;
}

.testimonials-intro-text {
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 780px;
}

.customer-reviews-section {
    padding: 0 0 44px;
}

/* Contain the single review card instead of stretching edge to edge */
.reviews-carousel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 46px;
}

.google-review-card {
    gap: 28px;
    padding: 22px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 108px;
    gap: 8px;
    padding-right: 24px;
}

.google-review-icon svg {
    width: 28px;
    height: 28px;
}

.review-card-rating svg {
    width: 11px;
    height: 11px;
}

.google-review-source {
    font-size: 11px;
}

.google-review-right .review-card-quote {
    font-size: 14px;
    line-height: 1.7;
}

.reviews-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .testimonials-intro-title {
        font-size: 22px;
    }

    .testimonials-intro-text {
        font-size: 13.5px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }

    .google-review-card {
        padding: 18px 18px 16px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Layout Fix + Refinement Pass
   FIX: .google-review-card never set flex-direction:row,
   so it was inheriting flex-direction:column from the
   base .review-card rule — pushing the quote text below
   instead of beside the Google icon/stars column. Also
   bumps heading/description size slightly and tightens +
   styles the card for a cleaner, more compact look.
================================================== */

.testimonials-intro-title {
    font-size: clamp(26px, 2.9vw, 34px);
}

.testimonials-intro-text {
    font-size: 15.5px;
    line-height: 1.8;
}

.google-review-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 20px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 100px;
    gap: 8px;
    padding-right: 22px;
}

.google-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.08);
}

.google-review-icon svg {
    width: 24px;
    height: 24px;
}

.google-review-right .review-card-quote {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        padding: 18px 18px 16px;
    }

    .google-review-icon {
        width: 36px;
        height: 36px;
    }

    .google-review-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Spacing + Width Adjustment
   Stretches the intro description wider, tightens the
   gap before the review card, and adds a touch more
   height to the card itself.
================================================== */

.testimonials-intro-text {
    max-width: 1040px;
    margin: 0 auto 22px;
}

.customer-reviews-section {
    padding-top: 0;
}

.google-review-card {
    padding: 30px 30px;
    min-height: 150px;
}

@media (max-width: 767px) {
    .testimonials-intro-text {
        max-width: 100%;
    }

    .google-review-card {
        padding: 22px 20px 20px;
        min-height: 0;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Sequential Card Number
   Small numbered badge (01, 02, 03...) in the top-right
   corner of each review card.
================================================== */

.google-review-card {
    position: relative;
}

.google-review-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    opacity: 0.55;
}

@media (max-width: 767px) {
    .google-review-number {
        top: 14px;
        right: 16px;
        font-size: 12px;
    }
}

/* ==================================================
   TESTIMONIALS CTA — "Your Kitchen or Wardrobe
   Starts With a Conversation"
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --white-color) so
   it automatically matches your theme.
================================================== */

.testimonials-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--brand-navy-950) 55%, var(--accent-color) 150%);
    overflow: hidden;
    text-align: center;
}

/* faint dotted pattern, masked to a soft oval — same device used on the intro section */
.testimonials-cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.testimonials-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* dot + line divider, matches .testimonials-intro-divider for visual consistency */
.testimonials-cta-divider {
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
}

.testimonials-cta-title {
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--white-color) !important;
}

.testimonials-cta-text {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-align: center;
}

.testimonials-cta-subtext {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 36px;
    text-align: center;
}

.testimonials-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.testimonials-cta-btn-outline {
    color: var(--white-color) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.testimonials-cta-btn-outline:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

footer.main-footer.stylux-footer {
    position: relative;
    z-index: 2;
    margin-top: -3px;
}

@media (max-width: 767px) {
    .testimonials-cta-section {
        padding: 70px 0;
    }

    .testimonials-cta-title {
        font-size: 26px;
    }

    .testimonials-cta-text {
        font-size: 15px;
    }
}

/* ==================================================
   CUSTOMER EXPERIENCE HIGHLIGHTS — Compact Pass 2
   Section was still reading taller than the section
   above it, and the right-side boxes had more padding
   than needed. Tightens section spacing, image height,
   and each highlight row/box.
================================================== */
.page-header {
    height: 500px !important;
    min-height: 350px !important;
}

.experience-highlights-section {
    padding: 40px 0 48px;
}

.experience-highlights-layout {
    gap: 36px;
}

.experience-highlights-intro h2 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 10px;
}

.experience-highlights-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 30px;
}

.experience-highlights-image img {
    height: 220px;
}

.experience-highlights-list {
    gap: 8px;
} 

.experience-highlight-row {
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
}

.experience-highlight-icon {
    width: 28px;
    height: 28px;
}

.experience-highlight-icon svg {
    width: 13px;
    height: 13px;
}

.experience-highlight-content h3 {
    font-size: 13px;
    margin: 0 0 2px;
}

.experience-highlight-content p {
    font-size: 11.5px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }
}/* ==================================================
   TESTIMONIALS PAGE — "What Our Customers Say" Intro
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color) so it automatically matches your theme.
   Link this file on testimonials.php only.
================================================== */

.testimonials-intro-section {
    position: relative;
    padding: 90px 0 30px;
    background: var(--bg-color);
    overflow: hidden;
    text-align: center;
}

.testimonials-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 100%;
    background-image: radial-gradient(rgba(22, 22, 22, 0.06) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* large, faint quotation mark grounding the heading in the "testimonial" idea */
.testimonials-intro-section::after {
    content: '\201C';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 320px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.testimonials-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px 8px 16px;
    margin-bottom: 26px;
}

.testimonials-intro-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonials-intro-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--primary-color);
    margin-bottom: 22px;
    text-align: center;
    cursor: none;
}

.testimonials-intro-title .text-accent {
    color: var(--accent-color);
}

.testimonials-intro-divider {
    position: relative;
    display: block;
    width: 100px;
    height: 8px;
    margin: 0 auto 28px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
    opacity: 0.85;
}

.testimonials-intro-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-text strong {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tablet */
@media (max-width: 991px) {
    .testimonials-intro-section {
        padding: 50px 0 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }

    /* Image: full width on mobile, no gap on the side */
    .experience-highlights-image {
        width: 100%;
    }

    .experience-highlights-image img {
        height: 220px;
    }

    /* Justify text looks uneven on narrow screens — switch to left align */
    .experience-highlights-desc,
    .experience-highlight-content p {
        text-align: left;
    }

    /* Slightly bigger heading + tighter badge for mobile */
    .experience-highlights-intro h2 {
        font-size: 22px;
    }

    .experience-highlights-intro .section-sub-title {
        font-size: 11.5px;
        padding: 7px 16px;
    }

    /* A bit more breathing room between rows */
    .experience-highlights-list {
        gap: 10px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 10px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 20px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--primary-color); /* was var(--accent-color) — now dark */
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2; /* was 1.7 — slightly bolder so it reads clearly in dark color */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}


/* new */

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   (left: intro + image / right: vertical highlight list)
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-layout {
    display: flex;
    align-items: center;
    gap: 64px;
}

.experience-highlights-intro {
    flex: 0 1 42%;
    position: sticky;
    top: 140px;
}


.experience-highlights-intro .section-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px;
    margin-bottom: 22px;
}

.experience-highlights-intro h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--primary-color);
    margin: 0 0 18px;
}

.experience-highlights-desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: justify;
    margin: 0 0 34px;
    max-width: 460px;
}

.experience-highlights-image {
    position: relative;
    width: 82%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 55px -28px rgba(22, 22, 22, 0.28);
}



.experience-highlights-image img {
    display: block;
    width: 100%;
    height: 360px; /* was 320px — small increase */
    object-fit: cover;
}

/* ---------- RIGHT column ---------- */
.experience-highlights-list {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.experience-highlight-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: 0 14px 32px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* gold accent bar that grows in from the middle on hover, left edge */
.experience-highlight-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0%;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    transition: height 0.45s ease;
}

.experience-highlight-row:hover::before {
    height: 100%;
}

.experience-highlight-row:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 45px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.experience-highlight-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 290px; /* was 260px — proportional increase */
    }

    .experience-highlights-layout {
        flex-direction: column;
        gap: 40px;
    }

    .experience-highlights-intro {
        position: static;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .experience-highlights-desc {
        max-width: 100%;
    }

    .experience-highlights-image img {
        height: 260px;
    }

    .experience-highlights-list {
        flex: 1 1 auto;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-desc {
        text-align: left;
    }

    .experience-highlight-row {
        flex-direction: column;
        gap: 14px;
        padding: 22px 22px 20px;
    }

    .experience-highlight-row:hover {
        transform: translateY(-4px);
    }

    .experience-highlight-row::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        transform: none;
        background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    }

    .experience-highlight-row:hover::before {
        height: 3px;
        width: 100%;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Auto-Playing Reviews Carousel
   Reuses .review-card styling; cards are equal height
   via flexbox align-items:stretch on the track.
================================================== */

.reviews-carousel {
    position: relative;
    padding: 0 56px;
}

.reviews-carousel-viewport {
    overflow: hidden;
}

.reviews-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.reviews-carousel-track .review-card {
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
}

.reviews-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 25px -12px rgba(22, 22, 22, 0.25);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reviews-carousel-arrow:hover {
    background: var(--accent-color);
    color: var(--white-color);
    border-color: var(--accent-color);
}

.reviews-carousel-arrow-prev {
    left: 0;
}

.reviews-carousel-arrow-next {
    right: 0;
}

/* Tablet: 2 cards visible */
@media (max-width: 991px) {
    .reviews-carousel {
        padding: 0 48px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 calc((100% - 32px) / 2);
        width: calc((100% - 32px) / 2);
    }
}

/* Mobile: 1 card visible */
@media (max-width: 767px) {
    .reviews-carousel {
        padding: 0 4px;
    }

    .reviews-carousel-track {
        gap: 20px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .reviews-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
        top: auto;
        bottom: -50px;
        transform: none;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 46px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 46px);
    }

    .customer-reviews-section {
        padding-bottom: 90px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Review Card: Compact Height
   (footer with reviewer name removed, spacing tightened
   so cards read like real, shorter testimonial notes)
================================================== */

.review-card {
    padding: 30px 30px 26px;
}

.review-card-top {
    margin-bottom: 16px;
}

.review-card-quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    font-style: normal;
}

.review-card-quote-mark {
    top: -2px;
    font-size: 76px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 26px 24px 22px;
    }
}

/* Star rating — inline SVG stars (no icon-font dependency) */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.review-card-rating svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ==================================================
   TESTIMONIALS PAGE — Final Size Pass
   Trims vertical rhythm on the reviews carousel and
   shrinks the Customer Experience Highlights section
   (right-side boxes were oversized) for a tighter,
   more systematic layout.
================================================== */

/* Reviews carousel — tighten section spacing */
.customer-reviews-section {
    padding: 10px 0 70px;
}

/* Customer Experience Highlights — overall section */
.experience-highlights-section {
    padding: 56px 0 64px;
}

.experience-highlights-layout {
    gap: 48px;
}

/* Left column: smaller heading/desc, smaller image */
.experience-highlights-intro h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 14px;
}

.experience-highlights-desc {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 420px;
}

.experience-highlights-image img {
    height: 280px;
}

/* Right column: compact highlight rows/boxes */
.experience-highlights-list {
    gap: 12px;
}

.experience-highlight-row {
    gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
}

.experience-highlight-icon {
    width: 40px;
    height: 40px;
}

.experience-highlight-icon svg {
    width: 17px;
    height: 17px;
}

.experience-highlight-content h3 {
    font-size: 15.5px;
    margin: 0 0 3px;
}

.experience-highlight-content p {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 30px 0 34px;
    }

    .experience-highlight-row {
        padding: 16px 18px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Reviews Carousel: Compact Pass 2
   Cards were still reading tall on real screens; tighten
   padding, quote line-height/size, badge and star sizing.
================================================== */

.testimonials-intro-section {
    padding: 56px 0 10px;
}

.customer-reviews-section {
    padding: 0 0 56px;
}

.review-card {
    padding: 22px 24px 20px;
    border-radius: 16px;
}

.review-card-top {
    margin-bottom: 12px;
}

.review-card-badge {
    font-size: 10px;
    padding: 5px 10px;
}

.review-card-rating svg {
    width: 12px;
    height: 12px;
}

.review-card-quote {
    font-size: 14.5px;
    line-height: 1.65;
}

.review-card-quote-mark {
    font-size: 60px;
    top: 0;
    right: 16px;
}

.reviews-carousel {
    padding: 0 50px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 20px 20px 18px;
    }

    .review-card-quote {
        font-size: 14px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Single-Card Google-Style Reviews
   One horizontal card visible at a time, styled to read
   like an authentic Google review (official G logo SVG,
   gold stars, "Posted on Google" line).
================================================== */

/* Show exactly one full-width card per slide, at every breakpoint */
.reviews-carousel-track .review-card {
    flex: 0 0 100%;
    width: 100%;
}

.google-review-card {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 28px 36px;
}

.google-review-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 128px;
    padding-right: 32px;
    border-right: 1px solid var(--divider-color);
    text-align: center;
}

.google-review-icon svg {
    width: 34px;
    height: 34px;
}

.google-review-source {
    font-size: 11.5px;
    color: var(--text-color);
    opacity: 0.75;
}

.google-review-source strong {
    color: var(--primary-color);
    font-weight: 600;
}

.google-review-right {
    flex: 1 1 auto;
    min-width: 0;
}

.google-review-right .review-card-quote {
    text-align: left;
    margin: 0;
}

/* the old decorative quote-mark watermark is no longer used in this layout */
.google-review-card .review-card-quote-mark {
    display: none;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 22px 22px;
    }

    .google-review-left {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 14px;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        width: 100%;
        text-align: left;
    }

    .google-review-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Systematic Sizing Pass
   Brings heading/body text and card proportions in line
   with the rest of the site (Livora homepage reference):
   moderate heading sizes, small body copy, contained
   card width instead of edge-to-edge, tighter spacing.
================================================== */

.testimonials-intro-section {
    padding: 44px 0 8px;
}

.testimonials-intro-title {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    margin-bottom: 16px;
}

.testimonials-intro-text {
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 780px;
}

.customer-reviews-section {
    padding: 0 0 44px;
}

/* Contain the single review card instead of stretching edge to edge */
.reviews-carousel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 46px;
}

.google-review-card {
    gap: 28px;
    padding: 22px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 108px;
    gap: 8px;
    padding-right: 24px;
}

.google-review-icon svg {
    width: 28px;
    height: 28px;
}

.review-card-rating svg {
    width: 11px;
    height: 11px;
}

.google-review-source {
    font-size: 11px;
}

.google-review-right .review-card-quote {
    font-size: 14px;
    line-height: 1.7;
}

.reviews-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .testimonials-intro-title {
        font-size: 22px;
    }

    .testimonials-intro-text {
        font-size: 13.5px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }

    .google-review-card {
        padding: 18px 18px 16px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Layout Fix + Refinement Pass
   FIX: .google-review-card never set flex-direction:row,
   so it was inheriting flex-direction:column from the
   base .review-card rule — pushing the quote text below
   instead of beside the Google icon/stars column. Also
   bumps heading/description size slightly and tightens +
   styles the card for a cleaner, more compact look.
================================================== */

.testimonials-intro-title {
    font-size: clamp(26px, 2.9vw, 34px);
}

.testimonials-intro-text {
    font-size: 15.5px;
    line-height: 1.8;
}

.google-review-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 20px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 100px;
    gap: 8px;
    padding-right: 22px;
}

.google-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.08);
}

.google-review-icon svg {
    width: 24px;
    height: 24px;
}

.google-review-right .review-card-quote {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        padding: 18px 18px 16px;
    }

    .google-review-icon {
        width: 36px;
        height: 36px;
    }

    .google-review-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Spacing + Width Adjustment
   Stretches the intro description wider, tightens the
   gap before the review card, and adds a touch more
   height to the card itself.
================================================== */

.testimonials-intro-text {
    max-width: 1040px;
    margin: 0 auto 22px;
}

.customer-reviews-section {
    padding-top: 0;
}

.google-review-card {
    padding: 30px 30px;
    min-height: 150px;
}

@media (max-width: 767px) {
    .testimonials-intro-text {
        max-width: 100%;
    }

    .google-review-card {
        padding: 22px 20px 20px;
        min-height: 0;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Sequential Card Number
   Small numbered badge (01, 02, 03...) in the top-right
   corner of each review card.
================================================== */

.google-review-card {
    position: relative;
}

.google-review-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    opacity: 0.55;
}

@media (max-width: 767px) {
    .google-review-number {
        top: 14px;
        right: 16px;
        font-size: 12px;
    }
}

/* ==================================================
   TESTIMONIALS CTA — "Your Kitchen or Wardrobe
   Starts With a Conversation"
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --white-color) so
   it automatically matches your theme.
================================================== */

.testimonials-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--brand-navy-950) 55%, var(--accent-color) 150%);
    overflow: hidden;
    text-align: center;
}

/* faint dotted pattern, masked to a soft oval — same device used on the intro section */
.testimonials-cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.testimonials-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* dot + line divider, matches .testimonials-intro-divider for visual consistency */
.testimonials-cta-divider {
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
}

.testimonials-cta-title {
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--white-color) !important;
}

.testimonials-cta-text {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-align: center;
}

.testimonials-cta-subtext {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 36px;
    text-align: center;
}

.testimonials-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.testimonials-cta-btn-outline {
    color: var(--white-color) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.testimonials-cta-btn-outline:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

footer.main-footer.stylux-footer {
    position: relative;
    z-index: 2;
    margin-top: -3px;
}

@media (max-width: 767px) {
    .testimonials-cta-section {
        padding: 70px 0;
    }

    .testimonials-cta-title {
        font-size: 26px;
    }

    .testimonials-cta-text {
        font-size: 15px;
    }
}

/* ==================================================
   CUSTOMER EXPERIENCE HIGHLIGHTS — Compact Pass 2
   Section was still reading taller than the section
   above it, and the right-side boxes had more padding
   than needed. Tightens section spacing, image height,
   and each highlight row/box.
================================================== */
.page-header {
    height: 500px !important;
    min-height: 350px !important;
}

.experience-highlights-section {
    padding: 40px 0 48px;
}

.experience-highlights-layout {
    gap: 36px;
}

.experience-highlights-intro h2 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 10px;
}

.experience-highlights-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 30px;
}

.experience-highlights-image img {
    height: 220px;
}

.experience-highlights-list {
    gap: 8px;
} 

.experience-highlight-row {
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
}

.experience-highlight-icon {
    width: 28px;
    height: 28px;
}

.experience-highlight-icon svg {
    width: 13px;
    height: 13px;
}

.experience-highlight-content h3 {
    font-size: 13px;
    margin: 0 0 2px;
}

.experience-highlight-content p {
    font-size: 11.5px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }
}/* ==================================================
   TESTIMONIALS PAGE — "What Our Customers Say" Intro
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color) so it automatically matches your theme.
   Link this file on testimonials.php only.
================================================== */

.testimonials-intro-section {
    position: relative;
    padding: 90px 0 30px;
    background: var(--bg-color);
    overflow: hidden;
    text-align: center;
}

.testimonials-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 100%;
    background-image: radial-gradient(rgba(22, 22, 22, 0.06) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* large, faint quotation mark grounding the heading in the "testimonial" idea */
.testimonials-intro-section::after {
    content: '\201C';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 320px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.testimonials-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px 8px 16px;
    margin-bottom: 26px;
}

.testimonials-intro-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonials-intro-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--primary-color);
    margin-bottom: 22px;
    text-align: center;
    cursor: none;
}

.testimonials-intro-title .text-accent {
    color: var(--accent-color);
}

.testimonials-intro-divider {
    position: relative;
    display: block;
    width: 100px;
    height: 8px;
    margin: 0 auto 28px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
    opacity: 0.85;
}

.testimonials-intro-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-text strong {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tablet */
@media (max-width: 991px) {
    .testimonials-intro-section {
        padding: 50px 0 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }

    /* Image: full width on mobile, no gap on the side */
    .experience-highlights-image {
        width: 100%;
    }

    .experience-highlights-image img {
        height: 220px;
    }

    /* Justify text looks uneven on narrow screens — switch to left align */
    .experience-highlights-desc,
    .experience-highlight-content p {
        text-align: left;
    }

    /* Slightly bigger heading + tighter badge for mobile */
    .experience-highlights-intro h2 {
        font-size: 22px;
    }

    .experience-highlights-intro .section-sub-title {
        font-size: 11.5px;
        padding: 7px 16px;
    }

    /* A bit more breathing room between rows */
    .experience-highlights-list {
        gap: 10px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 10px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 20px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--primary-color); /* was var(--accent-color) — now dark */
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2; /* was 1.7 — slightly bolder so it reads clearly in dark color */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}


/* new */

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   (left: intro + image / right: vertical highlight list)
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-layout {
    display: flex;
    align-items: center;
    gap: 64px;
}

.experience-highlights-intro {
    flex: 0 1 42%;
    position: sticky;
    top: 140px;
}


.experience-highlights-intro .section-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px;
    margin-bottom: 22px;
}

.experience-highlights-intro h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--primary-color);
    margin: 0 0 18px;
}

.experience-highlights-desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: justify;
    margin: 0 0 34px;
    max-width: 460px;
}

.experience-highlights-image {
    position: relative;
    width: 82%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 55px -28px rgba(22, 22, 22, 0.28);
}



.experience-highlights-image img {
    display: block;
    width: 100%;
    height: 360px; /* was 320px — small increase */
    object-fit: cover;
}

/* ---------- RIGHT column ---------- */
.experience-highlights-list {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.experience-highlight-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: 0 14px 32px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* gold accent bar that grows in from the middle on hover, left edge */
.experience-highlight-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0%;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    transition: height 0.45s ease;
}

.experience-highlight-row:hover::before {
    height: 100%;
}

.experience-highlight-row:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 45px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.experience-highlight-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 290px; /* was 260px — proportional increase */
    }

    .experience-highlights-layout {
        flex-direction: column;
        gap: 40px;
    }

    .experience-highlights-intro {
        position: static;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .experience-highlights-desc {
        max-width: 100%;
    }

    .experience-highlights-image img {
        height: 260px;
    }

    .experience-highlights-list {
        flex: 1 1 auto;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-desc {
        text-align: left;
    }

    .experience-highlight-row {
        flex-direction: column;
        gap: 14px;
        padding: 22px 22px 20px;
    }

    .experience-highlight-row:hover {
        transform: translateY(-4px);
    }

    .experience-highlight-row::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        transform: none;
        background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    }

    .experience-highlight-row:hover::before {
        height: 3px;
        width: 100%;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Auto-Playing Reviews Carousel
   Reuses .review-card styling; cards are equal height
   via flexbox align-items:stretch on the track.
================================================== */

.reviews-carousel {
    position: relative;
    padding: 0 56px;
}

.reviews-carousel-viewport {
    overflow: hidden;
}

.reviews-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.reviews-carousel-track .review-card {
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
}

.reviews-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 25px -12px rgba(22, 22, 22, 0.25);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reviews-carousel-arrow:hover {
    background: var(--accent-color);
    color: var(--white-color);
    border-color: var(--accent-color);
}

.reviews-carousel-arrow-prev {
    left: 0;
}

.reviews-carousel-arrow-next {
    right: 0;
}

/* Tablet: 2 cards visible */
@media (max-width: 991px) {
    .reviews-carousel {
        padding: 0 48px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 calc((100% - 32px) / 2);
        width: calc((100% - 32px) / 2);
    }
}

/* Mobile: 1 card visible */
@media (max-width: 767px) {
    .reviews-carousel {
        padding: 0 4px;
    }

    .reviews-carousel-track {
        gap: 20px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .reviews-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
        top: auto;
        bottom: -50px;
        transform: none;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 46px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 46px);
    }

    .customer-reviews-section {
        padding-bottom: 90px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Review Card: Compact Height
   (footer with reviewer name removed, spacing tightened
   so cards read like real, shorter testimonial notes)
================================================== */

.review-card {
    padding: 30px 30px 26px;
}

.review-card-top {
    margin-bottom: 16px;
}

.review-card-quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    font-style: normal;
}

.review-card-quote-mark {
    top: -2px;
    font-size: 76px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 26px 24px 22px;
    }
}

/* Star rating — inline SVG stars (no icon-font dependency) */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.review-card-rating svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ==================================================
   TESTIMONIALS PAGE — Final Size Pass
   Trims vertical rhythm on the reviews carousel and
   shrinks the Customer Experience Highlights section
   (right-side boxes were oversized) for a tighter,
   more systematic layout.
================================================== */

/* Reviews carousel — tighten section spacing */
.customer-reviews-section {
    padding: 10px 0 70px;
}

/* Customer Experience Highlights — overall section */
.experience-highlights-section {
    padding: 56px 0 64px;
}

.experience-highlights-layout {
    gap: 48px;
}

/* Left column: smaller heading/desc, smaller image */
.experience-highlights-intro h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 14px;
}

.experience-highlights-desc {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 420px;
}

.experience-highlights-image img {
    height: 280px;
}

/* Right column: compact highlight rows/boxes */
.experience-highlights-list {
    gap: 12px;
}

.experience-highlight-row {
    gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
}

.experience-highlight-icon {
    width: 40px;
    height: 40px;
}

.experience-highlight-icon svg {
    width: 17px;
    height: 17px;
}

.experience-highlight-content h3 {
    font-size: 15.5px;
    margin: 0 0 3px;
}

.experience-highlight-content p {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 30px 0 34px;
    }

    .experience-highlight-row {
        padding: 16px 18px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Reviews Carousel: Compact Pass 2
   Cards were still reading tall on real screens; tighten
   padding, quote line-height/size, badge and star sizing.
================================================== */

.testimonials-intro-section {
    padding: 56px 0 10px;
}

.customer-reviews-section {
    padding: 0 0 56px;
}

.review-card {
    padding: 22px 24px 20px;
    border-radius: 16px;
}

.review-card-top {
    margin-bottom: 12px;
}

.review-card-badge {
    font-size: 10px;
    padding: 5px 10px;
}

.review-card-rating svg {
    width: 12px;
    height: 12px;
}

.review-card-quote {
    font-size: 14.5px;
    line-height: 1.65;
}

.review-card-quote-mark {
    font-size: 60px;
    top: 0;
    right: 16px;
}

.reviews-carousel {
    padding: 0 50px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 20px 20px 18px;
    }

    .review-card-quote {
        font-size: 14px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Single-Card Google-Style Reviews
   One horizontal card visible at a time, styled to read
   like an authentic Google review (official G logo SVG,
   gold stars, "Posted on Google" line).
================================================== */

/* Show exactly one full-width card per slide, at every breakpoint */
.reviews-carousel-track .review-card {
    flex: 0 0 100%;
    width: 100%;
}

.google-review-card {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 28px 36px;
}

.google-review-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 128px;
    padding-right: 32px;
    border-right: 1px solid var(--divider-color);
    text-align: center;
}

.google-review-icon svg {
    width: 34px;
    height: 34px;
}

.google-review-source {
    font-size: 11.5px;
    color: var(--text-color);
    opacity: 0.75;
}

.google-review-source strong {
    color: var(--primary-color);
    font-weight: 600;
}

.google-review-right {
    flex: 1 1 auto;
    min-width: 0;
}

.google-review-right .review-card-quote {
    text-align: left;
    margin: 0;
}

/* the old decorative quote-mark watermark is no longer used in this layout */
.google-review-card .review-card-quote-mark {
    display: none;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 22px 22px;
    }

    .google-review-left {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 14px;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        width: 100%;
        text-align: left;
    }

    .google-review-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Systematic Sizing Pass
   Brings heading/body text and card proportions in line
   with the rest of the site (Livora homepage reference):
   moderate heading sizes, small body copy, contained
   card width instead of edge-to-edge, tighter spacing.
================================================== */

.testimonials-intro-section {
    padding: 44px 0 8px;
}

.testimonials-intro-title {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    margin-bottom: 16px;
}

.testimonials-intro-text {
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 780px;
}

.customer-reviews-section {
    padding: 0 0 44px;
}

/* Contain the single review card instead of stretching edge to edge */
.reviews-carousel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 46px;
}

.google-review-card {
    gap: 28px;
    padding: 22px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 108px;
    gap: 8px;
    padding-right: 24px;
}

.google-review-icon svg {
    width: 28px;
    height: 28px;
}

.review-card-rating svg {
    width: 11px;
    height: 11px;
}

.google-review-source {
    font-size: 11px;
}

.google-review-right .review-card-quote {
    font-size: 14px;
    line-height: 1.7;
}

.reviews-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .testimonials-intro-title {
        font-size: 22px;
    }

    .testimonials-intro-text {
        font-size: 13.5px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }

    .google-review-card {
        padding: 18px 18px 16px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Layout Fix + Refinement Pass
   FIX: .google-review-card never set flex-direction:row,
   so it was inheriting flex-direction:column from the
   base .review-card rule — pushing the quote text below
   instead of beside the Google icon/stars column. Also
   bumps heading/description size slightly and tightens +
   styles the card for a cleaner, more compact look.
================================================== */

.testimonials-intro-title {
    font-size: clamp(26px, 2.9vw, 34px);
}

.testimonials-intro-text {
    font-size: 15.5px;
    line-height: 1.8;
}

.google-review-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 20px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 100px;
    gap: 8px;
    padding-right: 22px;
}

.google-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.08);
}

.google-review-icon svg {
    width: 24px;
    height: 24px;
}

.google-review-right .review-card-quote {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        padding: 18px 18px 16px;
    }

    .google-review-icon {
        width: 36px;
        height: 36px;
    }

    .google-review-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Spacing + Width Adjustment
   Stretches the intro description wider, tightens the
   gap before the review card, and adds a touch more
   height to the card itself.
================================================== */

.testimonials-intro-text {
    max-width: 1040px;
    margin: 0 auto 22px;
}

.customer-reviews-section {
    padding-top: 0;
}

.google-review-card {
    padding: 30px 30px;
    min-height: 150px;
}

@media (max-width: 767px) {
    .testimonials-intro-text {
        max-width: 100%;
    }

    .google-review-card {
        padding: 22px 20px 20px;
        min-height: 0;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Sequential Card Number
   Small numbered badge (01, 02, 03...) in the top-right
   corner of each review card.
================================================== */

.google-review-card {
    position: relative;
}

.google-review-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    opacity: 0.55;
}

@media (max-width: 767px) {
    .google-review-number {
        top: 14px;
        right: 16px;
        font-size: 12px;
    }
}

/* ==================================================
   TESTIMONIALS CTA — "Your Kitchen or Wardrobe
   Starts With a Conversation"
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --white-color) so
   it automatically matches your theme.
================================================== */

.testimonials-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--brand-navy-950) 55%, var(--accent-color) 150%);
    overflow: hidden;
    text-align: center;
}

/* faint dotted pattern, masked to a soft oval — same device used on the intro section */
.testimonials-cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.testimonials-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* dot + line divider, matches .testimonials-intro-divider for visual consistency */
.testimonials-cta-divider {
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
}

.testimonials-cta-title {
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--white-color) !important;
}

.testimonials-cta-text {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-align: center;
}

.testimonials-cta-subtext {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 36px;
    text-align: center;
}

.testimonials-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.testimonials-cta-btn-outline {
    color: var(--white-color) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.testimonials-cta-btn-outline:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

footer.main-footer.stylux-footer {
    position: relative;
    z-index: 2;
    margin-top: -3px;
}

@media (max-width: 767px) {
    .testimonials-cta-section {
        padding: 70px 0;
    }

    .testimonials-cta-title {
        font-size: 26px;
    }

    .testimonials-cta-text {
        font-size: 15px;
    }
}

/* ==================================================
   CUSTOMER EXPERIENCE HIGHLIGHTS — Compact Pass 2
   Section was still reading taller than the section
   above it, and the right-side boxes had more padding
   than needed. Tightens section spacing, image height,
   and each highlight row/box.
================================================== */
.page-header {
    height: 500px !important;
    min-height: 350px !important;
}

.experience-highlights-section {
    padding: 40px 0 48px;
}

.experience-highlights-layout {
    gap: 36px;
}

.experience-highlights-intro h2 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 10px;
}

.experience-highlights-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 30px;
}

.experience-highlights-image img {
    height: 220px;
}

.experience-highlights-list {
    gap: 8px;
} 

.experience-highlight-row {
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
}

.experience-highlight-icon {
    width: 28px;
    height: 28px;
}

.experience-highlight-icon svg {
    width: 13px;
    height: 13px;
}

.experience-highlight-content h3 {
    font-size: 13px;
    margin: 0 0 2px;
}

.experience-highlight-content p {
    font-size: 11.5px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }
}/* ==================================================
   TESTIMONIALS PAGE — "What Our Customers Say" Intro
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color) so it automatically matches your theme.
   Link this file on testimonials.php only.
================================================== */

.testimonials-intro-section {
    position: relative;
    padding: 90px 0 30px;
    background: var(--bg-color);
    overflow: hidden;
    text-align: center;
}

.testimonials-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 100%;
    background-image: radial-gradient(rgba(22, 22, 22, 0.06) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* large, faint quotation mark grounding the heading in the "testimonial" idea */
.testimonials-intro-section::after {
    content: '\201C';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 320px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.testimonials-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px 8px 16px;
    margin-bottom: 26px;
}

.testimonials-intro-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonials-intro-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--primary-color);
    margin-bottom: 22px;
    text-align: center;
    cursor: none;
}

.testimonials-intro-title .text-accent {
    color: var(--accent-color);
}

.testimonials-intro-divider {
    position: relative;
    display: block;
    width: 100px;
    height: 8px;
    margin: 0 auto 28px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
    opacity: 0.85;
}

.testimonials-intro-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-text strong {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tablet */
@media (max-width: 991px) {
    .testimonials-intro-section {
        padding: 50px 0 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }

    /* Image: full width on mobile, no gap on the side */
    .experience-highlights-image {
        width: 100%;
    }

    .experience-highlights-image img {
        height: 220px;
    }

    /* Justify text looks uneven on narrow screens — switch to left align */
    .experience-highlights-desc,
    .experience-highlight-content p {
        text-align: left;
    }

    /* Slightly bigger heading + tighter badge for mobile */
    .experience-highlights-intro h2 {
        font-size: 22px;
    }

    .experience-highlights-intro .section-sub-title {
        font-size: 11.5px;
        padding: 7px 16px;
    }

    /* A bit more breathing room between rows */
    .experience-highlights-list {
        gap: 10px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 10px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 20px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--primary-color); /* was var(--accent-color) — now dark */
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2; /* was 1.7 — slightly bolder so it reads clearly in dark color */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}


/* new */

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   (left: intro + image / right: vertical highlight list)
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-layout {
    display: flex;
    align-items: center;
    gap: 64px;
}

.experience-highlights-intro {
    flex: 0 1 42%;
    position: sticky;
    top: 140px;
}


.experience-highlights-intro .section-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px;
    margin-bottom: 22px;
}

.experience-highlights-intro h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--primary-color);
    margin: 0 0 18px;
}

.experience-highlights-desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: justify;
    margin: 0 0 34px;
    max-width: 460px;
}

.experience-highlights-image {
    position: relative;
    width: 82%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 55px -28px rgba(22, 22, 22, 0.28);
}



.experience-highlights-image img {
    display: block;
    width: 100%;
    height: 360px; /* was 320px — small increase */
    object-fit: cover;
}

/* ---------- RIGHT column ---------- */
.experience-highlights-list {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.experience-highlight-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: 0 14px 32px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* gold accent bar that grows in from the middle on hover, left edge */
.experience-highlight-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0%;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    transition: height 0.45s ease;
}

.experience-highlight-row:hover::before {
    height: 100%;
}

.experience-highlight-row:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 45px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.experience-highlight-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 290px; /* was 260px — proportional increase */
    }

    .experience-highlights-layout {
        flex-direction: column;
        gap: 40px;
    }

    .experience-highlights-intro {
        position: static;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .experience-highlights-desc {
        max-width: 100%;
    }

    .experience-highlights-image img {
        height: 260px;
    }

    .experience-highlights-list {
        flex: 1 1 auto;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-desc {
        text-align: left;
    }

    .experience-highlight-row {
        flex-direction: column;
        gap: 14px;
        padding: 22px 22px 20px;
    }

    .experience-highlight-row:hover {
        transform: translateY(-4px);
    }

    .experience-highlight-row::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        transform: none;
        background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    }

    .experience-highlight-row:hover::before {
        height: 3px;
        width: 100%;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Auto-Playing Reviews Carousel
   Reuses .review-card styling; cards are equal height
   via flexbox align-items:stretch on the track.
================================================== */

.reviews-carousel {
    position: relative;
    padding: 0 56px;
}

.reviews-carousel-viewport {
    overflow: hidden;
}

.reviews-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.reviews-carousel-track .review-card {
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
}

.reviews-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 25px -12px rgba(22, 22, 22, 0.25);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reviews-carousel-arrow:hover {
    background: var(--accent-color);
    color: var(--white-color);
    border-color: var(--accent-color);
}

.reviews-carousel-arrow-prev {
    left: 0;
}

.reviews-carousel-arrow-next {
    right: 0;
}

/* Tablet: 2 cards visible */
@media (max-width: 991px) {
    .reviews-carousel {
        padding: 0 48px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 calc((100% - 32px) / 2);
        width: calc((100% - 32px) / 2);
    }
}

/* Mobile: 1 card visible */
@media (max-width: 767px) {
    .reviews-carousel {
        padding: 0 4px;
    }

    .reviews-carousel-track {
        gap: 20px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .reviews-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
        top: auto;
        bottom: -50px;
        transform: none;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 46px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 46px);
    }

    .customer-reviews-section {
        padding-bottom: 90px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Review Card: Compact Height
   (footer with reviewer name removed, spacing tightened
   so cards read like real, shorter testimonial notes)
================================================== */

.review-card {
    padding: 30px 30px 26px;
}

.review-card-top {
    margin-bottom: 16px;
}

.review-card-quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    font-style: normal;
}

.review-card-quote-mark {
    top: -2px;
    font-size: 76px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 26px 24px 22px;
    }
}

/* Star rating — inline SVG stars (no icon-font dependency) */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.review-card-rating svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ==================================================
   TESTIMONIALS PAGE — Final Size Pass
   Trims vertical rhythm on the reviews carousel and
   shrinks the Customer Experience Highlights section
   (right-side boxes were oversized) for a tighter,
   more systematic layout.
================================================== */

/* Reviews carousel — tighten section spacing */
.customer-reviews-section {
    padding: 10px 0 70px;
}

/* Customer Experience Highlights — overall section */
.experience-highlights-section {
    padding: 56px 0 64px;
}

.experience-highlights-layout {
    gap: 48px;
}

/* Left column: smaller heading/desc, smaller image */
.experience-highlights-intro h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 14px;
}

.experience-highlights-desc {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 420px;
}

.experience-highlights-image img {
    height: 280px;
}

/* Right column: compact highlight rows/boxes */
.experience-highlights-list {
    gap: 12px;
}

.experience-highlight-row {
    gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
}

.experience-highlight-icon {
    width: 40px;
    height: 40px;
}

.experience-highlight-icon svg {
    width: 17px;
    height: 17px;
}

.experience-highlight-content h3 {
    font-size: 15.5px;
    margin: 0 0 3px;
}

.experience-highlight-content p {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 30px 0 34px;
    }

    .experience-highlight-row {
        padding: 16px 18px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Reviews Carousel: Compact Pass 2
   Cards were still reading tall on real screens; tighten
   padding, quote line-height/size, badge and star sizing.
================================================== */

.testimonials-intro-section {
    padding: 56px 0 10px;
}

.customer-reviews-section {
    padding: 0 0 56px;
}

.review-card {
    padding: 22px 24px 20px;
    border-radius: 16px;
}

.review-card-top {
    margin-bottom: 12px;
}

.review-card-badge {
    font-size: 10px;
    padding: 5px 10px;
}

.review-card-rating svg {
    width: 12px;
    height: 12px;
}

.review-card-quote {
    font-size: 14.5px;
    line-height: 1.65;
}

.review-card-quote-mark {
    font-size: 60px;
    top: 0;
    right: 16px;
}

.reviews-carousel {
    padding: 0 50px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 20px 20px 18px;
    }

    .review-card-quote {
        font-size: 14px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Single-Card Google-Style Reviews
   One horizontal card visible at a time, styled to read
   like an authentic Google review (official G logo SVG,
   gold stars, "Posted on Google" line).
================================================== */

/* Show exactly one full-width card per slide, at every breakpoint */
.reviews-carousel-track .review-card {
    flex: 0 0 100%;
    width: 100%;
}

.google-review-card {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 28px 36px;
}

.google-review-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 128px;
    padding-right: 32px;
    border-right: 1px solid var(--divider-color);
    text-align: center;
}

.google-review-icon svg {
    width: 34px;
    height: 34px;
}

.google-review-source {
    font-size: 11.5px;
    color: var(--text-color);
    opacity: 0.75;
}

.google-review-source strong {
    color: var(--primary-color);
    font-weight: 600;
}

.google-review-right {
    flex: 1 1 auto;
    min-width: 0;
}

.google-review-right .review-card-quote {
    text-align: left;
    margin: 0;
}

/* the old decorative quote-mark watermark is no longer used in this layout */
.google-review-card .review-card-quote-mark {
    display: none;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 22px 22px;
    }

    .google-review-left {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 14px;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        width: 100%;
        text-align: left;
    }

    .google-review-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Systematic Sizing Pass
   Brings heading/body text and card proportions in line
   with the rest of the site (Livora homepage reference):
   moderate heading sizes, small body copy, contained
   card width instead of edge-to-edge, tighter spacing.
================================================== */

.testimonials-intro-section {
    padding: 44px 0 8px;
}

.testimonials-intro-title {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    margin-bottom: 16px;
}

.testimonials-intro-text {
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 780px;
}

.customer-reviews-section {
    padding: 0 0 44px;
}

/* Contain the single review card instead of stretching edge to edge */
.reviews-carousel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 46px;
}

.google-review-card {
    gap: 28px;
    padding: 22px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 108px;
    gap: 8px;
    padding-right: 24px;
}

.google-review-icon svg {
    width: 28px;
    height: 28px;
}

.review-card-rating svg {
    width: 11px;
    height: 11px;
}

.google-review-source {
    font-size: 11px;
}

.google-review-right .review-card-quote {
    font-size: 14px;
    line-height: 1.7;
}

.reviews-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .testimonials-intro-title {
        font-size: 22px;
    }

    .testimonials-intro-text {
        font-size: 13.5px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }

    .google-review-card {
        padding: 18px 18px 16px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Layout Fix + Refinement Pass
   FIX: .google-review-card never set flex-direction:row,
   so it was inheriting flex-direction:column from the
   base .review-card rule — pushing the quote text below
   instead of beside the Google icon/stars column. Also
   bumps heading/description size slightly and tightens +
   styles the card for a cleaner, more compact look.
================================================== */

.testimonials-intro-title {
    font-size: clamp(26px, 2.9vw, 34px);
}

.testimonials-intro-text {
    font-size: 15.5px;
    line-height: 1.8;
}

.google-review-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 20px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 100px;
    gap: 8px;
    padding-right: 22px;
}

.google-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.08);
}

.google-review-icon svg {
    width: 24px;
    height: 24px;
}

.google-review-right .review-card-quote {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        padding: 18px 18px 16px;
    }

    .google-review-icon {
        width: 36px;
        height: 36px;
    }

    .google-review-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Spacing + Width Adjustment
   Stretches the intro description wider, tightens the
   gap before the review card, and adds a touch more
   height to the card itself.
================================================== */

.testimonials-intro-text {
    max-width: 1040px;
    margin: 0 auto 22px;
}

.customer-reviews-section {
    padding-top: 0;
}

.google-review-card {
    padding: 30px 30px;
    min-height: 150px;
}

@media (max-width: 767px) {
    .testimonials-intro-text {
        max-width: 100%;
    }

    .google-review-card {
        padding: 22px 20px 20px;
        min-height: 0;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Sequential Card Number
   Small numbered badge (01, 02, 03...) in the top-right
   corner of each review card.
================================================== */

.google-review-card {
    position: relative;
}

.google-review-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    opacity: 0.55;
}

@media (max-width: 767px) {
    .google-review-number {
        top: 14px;
        right: 16px;
        font-size: 12px;
    }
}

/* ==================================================
   TESTIMONIALS CTA — "Your Kitchen or Wardrobe
   Starts With a Conversation"
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --white-color) so
   it automatically matches your theme.
================================================== */

.testimonials-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--brand-navy-950) 55%, var(--accent-color) 150%);
    overflow: hidden;
    text-align: center;
}

/* faint dotted pattern, masked to a soft oval — same device used on the intro section */
.testimonials-cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.testimonials-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* dot + line divider, matches .testimonials-intro-divider for visual consistency */
.testimonials-cta-divider {
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
}

.testimonials-cta-title {
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--white-color) !important;
}

.testimonials-cta-text {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-align: center;
}

.testimonials-cta-subtext {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 36px;
    text-align: center;
}

.testimonials-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.testimonials-cta-btn-outline {
    color: var(--white-color) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.testimonials-cta-btn-outline:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

footer.main-footer.stylux-footer {
    position: relative;
    z-index: 2;
    margin-top: -3px;
}

@media (max-width: 767px) {
    .testimonials-cta-section {
        padding: 70px 0;
    }

    .testimonials-cta-title {
        font-size: 26px;
    }

    .testimonials-cta-text {
        font-size: 15px;
    }
}

/* ==================================================
   CUSTOMER EXPERIENCE HIGHLIGHTS — Compact Pass 2
   Section was still reading taller than the section
   above it, and the right-side boxes had more padding
   than needed. Tightens section spacing, image height,
   and each highlight row/box.
================================================== */
.page-header {
    height: 500px !important;
    min-height: 350px !important;
}

.experience-highlights-section {
    padding: 40px 0 48px;
}

.experience-highlights-layout {
    gap: 36px;
}

.experience-highlights-intro h2 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 10px;
}

.experience-highlights-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 30px;
}

.experience-highlights-image img {
    height: 220px;
}

.experience-highlights-list {
    gap: 8px;
} 

.experience-highlight-row {
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
}

.experience-highlight-icon {
    width: 28px;
    height: 28px;
}

.experience-highlight-icon svg {
    width: 13px;
    height: 13px;
}

.experience-highlight-content h3 {
    font-size: 13px;
    margin: 0 0 2px;
}

.experience-highlight-content p {
    font-size: 11.5px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }
}/* ==================================================
   TESTIMONIALS PAGE — "What Our Customers Say" Intro
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color) so it automatically matches your theme.
   Link this file on testimonials.php only.
================================================== */

.testimonials-intro-section {
    position: relative;
    padding: 90px 0 30px;
    background: var(--bg-color);
    overflow: hidden;
    text-align: center;
}

.testimonials-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 100%;
    background-image: radial-gradient(rgba(22, 22, 22, 0.06) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}

/* large, faint quotation mark grounding the heading in the "testimonial" idea */
.testimonials-intro-section::after {
    content: '\201C';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 320px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.testimonials-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px 8px 16px;
    margin-bottom: 26px;
}

.testimonials-intro-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonials-intro-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--primary-color);
    margin-bottom: 22px;
    text-align: center;
    cursor: none;
}

.testimonials-intro-title .text-accent {
    color: var(--accent-color);
}

.testimonials-intro-divider {
    position: relative;
    display: block;
    width: 100px;
    height: 8px;
    margin: 0 auto 28px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
    opacity: 0.85;
}

.testimonials-intro-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-intro-text strong {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tablet */
@media (max-width: 991px) {
    .testimonials-intro-section {
        padding: 50px 0 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }

    /* Image: full width on mobile, no gap on the side */
    .experience-highlights-image {
        width: 100%;
    }

    .experience-highlights-image img {
        height: 220px;
    }

    /* Justify text looks uneven on narrow screens — switch to left align */
    .experience-highlights-desc,
    .experience-highlight-content p {
        text-align: left;
    }

    /* Slightly bigger heading + tighter badge for mobile */
    .experience-highlights-intro h2 {
        font-size: 22px;
    }

    .experience-highlights-intro .section-sub-title {
        font-size: 11.5px;
        padding: 7px 16px;
    }

    /* A bit more breathing room between rows */
    .experience-highlights-list {
        gap: 10px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 10px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Reviews Grid
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.customer-reviews-section {
    position: relative;
    padding: 20px 0 100px;
    background: var(--bg-color);
}

.customer-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 38px 32px 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px -28px rgba(22, 22, 22, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* thin gold accent that draws in from the center on hover */
.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.review-card:hover::before {
    width: 100%;
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

/* large decorative quote mark watermark, top-right of every card */
.review-card-quote-mark {
    position: absolute;
    top: 2px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.review-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* "Genuine Customer Review" badge */
.review-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.review-card-badge svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* Star rating */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    font-size: 13px;
    flex-shrink: 0;
}

/* Review quote text */
.review-card-quote {
    position: relative;
    z-index: 1;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-color);
    font-style: italic;
    margin: 0 0 28px;
    flex-grow: 1;
}

/* Footer: avatar + name + meta */
.review-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.review-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.06));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.review-card-person {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 3px;
}

.review-card-meta {
    display: block;
    font-size: 12.5px;
    color: var(--text-color);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 991px) {
    .customer-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding: 8px 0 60px;
    }

    .customer-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 30px 24px 24px;
    }

    .review-card-quote-mark {
        font-size: 72px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --secondary-color,
   --text-color, --white-color, --divider-color) so it
   automatically matches your theme.
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-section .section-title-center {
    max-width: 640px;
    margin: 0 auto 48px;
}

.experience-highlights-section .section-title-center p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
    text-align: center;
    margin: 14px auto 0;
    max-width: 560px;
}

.experience-highlights-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.experience-highlight-card {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    padding: 34px 28px 30px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 18px 40px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Second row: 2 cards, centered under the 6-column grid (cols 2-3 and 4-5) */
.experience-highlight-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.experience-highlight-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.experience-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    transition: width 0.45s ease;
}

.experience-highlight-card:hover::before {
    width: 100%;
}

.experience-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--primary-color); /* was var(--accent-color) — now dark */
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2; /* was 1.7 — slightly bolder so it reads clearly in dark color */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-card h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.experience-highlight-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .experience-highlights-section {
        padding: 50px 0 55px;
    }

    .experience-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: span 1;
    }

    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .experience-highlight-card,
    .experience-highlight-card:nth-child(4),
    .experience-highlight-card:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
        padding: 28px 22px 24px;
    }
}


/* new */

/* ==================================================
   TESTIMONIALS PAGE — Customer Experience Highlights
   (left: intro + image / right: vertical highlight list)
================================================== */

.experience-highlights-section {
    position: relative;
    padding: 80px 0 90px;
    background: var(--secondary-color);
}

.experience-highlights-layout {
    display: flex;
    align-items: center;
    gap: 64px;
}

.experience-highlights-intro {
    flex: 0 1 42%;
    position: sticky;
    top: 140px;
}


.experience-highlights-intro .section-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid rgba(176, 141, 87, 0.35);
    background: rgba(176, 141, 87, 0.08);
    border-radius: 999px;
    padding: 8px 20px;
    margin-bottom: 22px;
}

.experience-highlights-intro h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--primary-color);
    margin: 0 0 18px;
}

.experience-highlights-desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-color);
    text-align: justify;
    margin: 0 0 34px;
    max-width: 460px;
}

.experience-highlights-image {
    position: relative;
    width: 82%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 55px -28px rgba(22, 22, 22, 0.28);
}



.experience-highlights-image img {
    display: block;
    width: 100%;
    height: 360px; /* was 320px — small increase */
    object-fit: cover;
}

/* ---------- RIGHT column ---------- */
.experience-highlights-list {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.experience-highlight-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 26px 30px;
    overflow: hidden;
    box-shadow: 0 14px 32px -26px rgba(22, 22, 22, 0.16);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* gold accent bar that grows in from the middle on hover, left edge */
.experience-highlight-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0%;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    transition: height 0.45s ease;
}

.experience-highlight-row:hover::before {
    height: 100%;
}

.experience-highlight-row:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 45px -22px rgba(22, 22, 22, 0.22);
    border-color: rgba(176, 141, 87, 0.35);
}

.experience-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.05));
    border: 1px solid rgba(176, 141, 87, 0.3);
    color: var(--accent-color);
}

.experience-highlight-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experience-highlight-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 6px;
}

.experience-highlight-content p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-color);
    text-align: justify;
    margin: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 290px; /* was 260px — proportional increase */
    }

    .experience-highlights-layout {
        flex-direction: column;
        gap: 40px;
    }

    .experience-highlights-intro {
        position: static;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .experience-highlights-desc {
        max-width: 100%;
    }

    .experience-highlights-image img {
        height: 260px;
    }

    .experience-highlights-list {
        flex: 1 1 auto;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 36px 0 40px;
    }

    .experience-highlights-desc {
        text-align: left;
    }

    .experience-highlight-row {
        flex-direction: column;
        gap: 14px;
        padding: 22px 22px 20px;
    }

    .experience-highlight-row:hover {
        transform: translateY(-4px);
    }

    .experience-highlight-row::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        transform: none;
        background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    }

    .experience-highlight-row:hover::before {
        height: 3px;
        width: 100%;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Auto-Playing Reviews Carousel
   Reuses .review-card styling; cards are equal height
   via flexbox align-items:stretch on the track.
================================================== */

.reviews-carousel {
    position: relative;
    padding: 0 56px;
}

.reviews-carousel-viewport {
    overflow: hidden;
}

.reviews-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.reviews-carousel-track .review-card {
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
}

.reviews-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 25px -12px rgba(22, 22, 22, 0.25);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reviews-carousel-arrow:hover {
    background: var(--accent-color);
    color: var(--white-color);
    border-color: var(--accent-color);
}

.reviews-carousel-arrow-prev {
    left: 0;
}

.reviews-carousel-arrow-next {
    right: 0;
}

/* Tablet: 2 cards visible */
@media (max-width: 991px) {
    .reviews-carousel {
        padding: 0 48px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 calc((100% - 32px) / 2);
        width: calc((100% - 32px) / 2);
    }
}

/* Mobile: 1 card visible */
@media (max-width: 767px) {
    .reviews-carousel {
        padding: 0 4px;
    }

    .reviews-carousel-track {
        gap: 20px;
    }

    .reviews-carousel-track .review-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .reviews-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 15px;
        top: auto;
        bottom: -50px;
        transform: none;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 46px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 46px);
    }

    .customer-reviews-section {
        padding-bottom: 90px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Review Card: Compact Height
   (footer with reviewer name removed, spacing tightened
   so cards read like real, shorter testimonial notes)
================================================== */

.review-card {
    padding: 30px 30px 26px;
}

.review-card-top {
    margin-bottom: 16px;
}

.review-card-quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    font-style: normal;
}

.review-card-quote-mark {
    top: -2px;
    font-size: 76px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 26px 24px 22px;
    }
}

/* Star rating — inline SVG stars (no icon-font dependency) */
.review-card-rating {
    display: flex;
    gap: 3px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.review-card-rating svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ==================================================
   TESTIMONIALS PAGE — Final Size Pass
   Trims vertical rhythm on the reviews carousel and
   shrinks the Customer Experience Highlights section
   (right-side boxes were oversized) for a tighter,
   more systematic layout.
================================================== */

/* Reviews carousel — tighten section spacing */
.customer-reviews-section {
    padding: 10px 0 70px;
}

/* Customer Experience Highlights — overall section */
.experience-highlights-section {
    padding: 56px 0 64px;
}

.experience-highlights-layout {
    gap: 48px;
}

/* Left column: smaller heading/desc, smaller image */
.experience-highlights-intro h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0 0 14px;
}

.experience-highlights-desc {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 420px;
}

.experience-highlights-image img {
    height: 280px;
}

/* Right column: compact highlight rows/boxes */
.experience-highlights-list {
    gap: 12px;
}

.experience-highlight-row {
    gap: 16px;
    padding: 18px 20px;
    border-radius: 12px;
}

.experience-highlight-icon {
    width: 40px;
    height: 40px;
}

.experience-highlight-icon svg {
    width: 17px;
    height: 17px;
}

.experience-highlight-content h3 {
    font-size: 15.5px;
    margin: 0 0 3px;
}

.experience-highlight-content p {
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 240px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 30px 0 34px;
    }

    .experience-highlight-row {
        padding: 16px 18px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Reviews Carousel: Compact Pass 2
   Cards were still reading tall on real screens; tighten
   padding, quote line-height/size, badge and star sizing.
================================================== */

.testimonials-intro-section {
    padding: 56px 0 10px;
}

.customer-reviews-section {
    padding: 0 0 56px;
}

.review-card {
    padding: 22px 24px 20px;
    border-radius: 16px;
}

.review-card-top {
    margin-bottom: 12px;
}

.review-card-badge {
    font-size: 10px;
    padding: 5px 10px;
}

.review-card-rating svg {
    width: 12px;
    height: 12px;
}

.review-card-quote {
    font-size: 14.5px;
    line-height: 1.65;
}

.review-card-quote-mark {
    font-size: 60px;
    top: 0;
    right: 16px;
}

.reviews-carousel {
    padding: 0 50px;
}

@media (max-width: 767px) {
    .review-card {
        padding: 20px 20px 18px;
    }

    .review-card-quote {
        font-size: 14px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Single-Card Google-Style Reviews
   One horizontal card visible at a time, styled to read
   like an authentic Google review (official G logo SVG,
   gold stars, "Posted on Google" line).
================================================== */

/* Show exactly one full-width card per slide, at every breakpoint */
.reviews-carousel-track .review-card {
    flex: 0 0 100%;
    width: 100%;
}

.google-review-card {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 28px 36px;
}

.google-review-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 128px;
    padding-right: 32px;
    border-right: 1px solid var(--divider-color);
    text-align: center;
}

.google-review-icon svg {
    width: 34px;
    height: 34px;
}

.google-review-source {
    font-size: 11.5px;
    color: var(--text-color);
    opacity: 0.75;
}

.google-review-source strong {
    color: var(--primary-color);
    font-weight: 600;
}

.google-review-right {
    flex: 1 1 auto;
    min-width: 0;
}

.google-review-right .review-card-quote {
    text-align: left;
    margin: 0;
}

/* the old decorative quote-mark watermark is no longer used in this layout */
.google-review-card .review-card-quote-mark {
    display: none;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 22px 22px;
    }

    .google-review-left {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px 14px;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        width: 100%;
        text-align: left;
    }

    .google-review-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Systematic Sizing Pass
   Brings heading/body text and card proportions in line
   with the rest of the site (Livora homepage reference):
   moderate heading sizes, small body copy, contained
   card width instead of edge-to-edge, tighter spacing.
================================================== */

.testimonials-intro-section {
    padding: 44px 0 8px;
}

.testimonials-intro-title {
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    margin-bottom: 16px;
}

.testimonials-intro-text {
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 780px;
}

.customer-reviews-section {
    padding: 0 0 44px;
}

/* Contain the single review card instead of stretching edge to edge */
.reviews-carousel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 46px;
}

.google-review-card {
    gap: 28px;
    padding: 22px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 108px;
    gap: 8px;
    padding-right: 24px;
}

.google-review-icon svg {
    width: 28px;
    height: 28px;
}

.review-card-rating svg {
    width: 11px;
    height: 11px;
}

.google-review-source {
    font-size: 11px;
}

.google-review-right .review-card-quote {
    font-size: 14px;
    line-height: 1.7;
}

.reviews-carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

@media (max-width: 767px) {
    .testimonials-intro-title {
        font-size: 22px;
    }

    .testimonials-intro-text {
        font-size: 13.5px;
    }

    .reviews-carousel {
        padding: 0 4px;
    }

    .google-review-card {
        padding: 18px 18px 16px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Layout Fix + Refinement Pass
   FIX: .google-review-card never set flex-direction:row,
   so it was inheriting flex-direction:column from the
   base .review-card rule — pushing the quote text below
   instead of beside the Google icon/stars column. Also
   bumps heading/description size slightly and tightens +
   styles the card for a cleaner, more compact look.
================================================== */

.testimonials-intro-title {
    font-size: clamp(26px, 2.9vw, 34px);
}

.testimonials-intro-text {
    font-size: 15.5px;
    line-height: 1.8;
}

.google-review-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 20px 26px;
    border-radius: 14px;
}

.google-review-left {
    flex: 0 0 100px;
    gap: 8px;
    padding-right: 22px;
}

.google-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(176, 141, 87, 0.08);
}

.google-review-icon svg {
    width: 24px;
    height: 24px;
}

.google-review-right .review-card-quote {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .google-review-card {
        flex-direction: column;
        padding: 18px 18px 16px;
    }

    .google-review-icon {
        width: 36px;
        height: 36px;
    }

    .google-review-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Spacing + Width Adjustment
   Stretches the intro description wider, tightens the
   gap before the review card, and adds a touch more
   height to the card itself.
================================================== */

.testimonials-intro-text {
    max-width: 1040px;
    margin: 0 auto 22px;
}

.customer-reviews-section {
    padding-top: 0;
}

.google-review-card {
    padding: 30px 30px;
    min-height: 150px;
}

@media (max-width: 767px) {
    .testimonials-intro-text {
        max-width: 100%;
    }

    .google-review-card {
        padding: 22px 20px 20px;
        min-height: 0;
    }
}

/* ==================================================
   TESTIMONIALS PAGE — Sequential Card Number
   Small numbered badge (01, 02, 03...) in the top-right
   corner of each review card.
================================================== */

.google-review-card {
    position: relative;
}

.google-review-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    opacity: 0.55;
}

@media (max-width: 767px) {
    .google-review-number {
        top: 14px;
        right: 16px;
        font-size: 12px;
    }
}

/* ==================================================
   TESTIMONIALS CTA — "Your Kitchen or Wardrobe
   Starts With a Conversation"
   Uses the site's existing theme variables from :root
   (--primary-color, --accent-color, --white-color) so
   it automatically matches your theme.
================================================== */

.testimonials-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--brand-navy-950) 55%, var(--accent-color) 150%);
    overflow: hidden;
    text-align: center;
}

/* faint dotted pattern, masked to a soft oval — same device used on the intro section */
.testimonials-cta-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.testimonials-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
}

/* dot + line divider, matches .testimonials-intro-divider for visual consistency */
.testimonials-cta-divider {
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle, var(--accent-color) 0 3px, transparent 3.5px) center / 8px 8px no-repeat,
        linear-gradient(to right, transparent, var(--accent-color) 22%, var(--accent-color) 78%, transparent) center / 100% 1px no-repeat;
}

.testimonials-cta-title {
    font-size: 40px;
    line-height: 1.25;
    margin-bottom: 18px;
    color: var(--white-color) !important;
}

.testimonials-cta-text {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-align: center;
}

.testimonials-cta-subtext {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 36px;
    text-align: center;
}

.testimonials-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.testimonials-cta-btn-outline {
    color: var(--white-color) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.testimonials-cta-btn-outline:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

footer.main-footer.stylux-footer {
    position: relative;
    z-index: 2;
    margin-top: -3px;
}

@media (max-width: 767px) {
    .testimonials-cta-section {
        padding: 70px 0;
    }

    .testimonials-cta-title {
        font-size: 26px;
    }

    .testimonials-cta-text {
        font-size: 15px;
    }
}

/* ==================================================
   CUSTOMER EXPERIENCE HIGHLIGHTS — Compact Pass 2
   Section was still reading taller than the section
   above it, and the right-side boxes had more padding
   than needed. Tightens section spacing, image height,
   and each highlight row/box.
================================================== */
.page-header {
    height: 500px !important;
    min-height: 350px !important;
}

.experience-highlights-section {
    padding: 40px 0 48px;
}

.experience-highlights-layout {
    gap: 36px;
}

.experience-highlights-intro h2 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 10px;
}

.experience-highlights-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 30px;
}

.experience-highlights-image img {
    height: 220px;
}

.experience-highlights-list {
    gap: 8px;
} 

.experience-highlight-row {
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
}

.experience-highlight-icon {
    width: 28px;
    height: 28px;
}

.experience-highlight-icon svg {
    width: 13px;
    height: 13px;
}

.experience-highlight-content h3 {
    font-size: 13px;
    margin: 0 0 2px;
}

.experience-highlight-content p {
    font-size: 11.5px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .experience-highlights-image img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .experience-highlights-section {
        padding: 26px 0 30px;
    }

    .experience-highlight-row {
        padding: 12px 16px;
    }
}
/* ==================================================
   PAGE HEADER — Mobile Banner Fix
   Previously used background-size: contain with a solid
   --secondary-color letterbox fill. On this banner photo the
   fill color blended in closely with the image's own tones,
   so the letterbox bars were invisible and it LOOKED like the
   image was being cropped at the top even though contain never
   actually crops. Switched to the same fix used on the other
   page banners (about/services/blog/contact): size the mobile
   box to (roughly) the photo's own aspect ratio instead of a
   fixed/min height, so background-size: cover needs little to
   no crop, with no letterbox color-matching guesswork involved.

   1.45/1 is the ratio validated on the about-page banner — not
   yet confirmed against testimonials-banner.webp's real
   dimensions. Check via DevTools ("Rendered size" tooltip) and
   adjust if this photo's ratio differs.

   --hero-focus-x lets the horizontal focal point be nudged
   without touching the ratio. Desktop layout is untouched.
================================================== */
@media (max-width: 767px) {
    div.page-header.dark-section.parallaxie.testimonials-page {
        --hero-focus-x: 50%;
        height: auto !important;
        aspect-ratio: 1.45 / 1 !important; /* TODO: confirm against testimonials-banner.webp's real ratio */
        min-height: 220px !important;
        max-height: 340px !important;
        padding: 0 !important;
        background-size: cover !important;
        background-position: var(--hero-focus-x) center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important; /* avoid iOS "fixed" bg shift/crop bugs */
    }

    div.page-header.dark-section.parallaxie.testimonials-page img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: var(--hero-focus-x, 50%) center !important;
    }
}
/* ==================================================
   REVIEWS CAROUSEL — Mobile Arrow Overlap Fix
   Arrows were positioned 50px below the card, but the
   section's bottom padding had since been reduced to
   44px by a later rule — causing the arrows to spill
   into the next (dark) section. This gives the section
   enough bottom padding to fully contain the arrows
   plus breathing room, and keeps the pair centered and
   clear of both the card above and the section below.
================================================== */
@media (max-width: 767px) {
    .customer-reviews-section {
        padding-bottom: 92px;
    }

    .reviews-carousel-arrow {
        bottom: -56px;
        z-index: 3;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 50px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 50px);
    }
}

@media (max-width: 480px) {
    .customer-reviews-section {
        padding-bottom: 84px;
    }

    .reviews-carousel-arrow {
        bottom: -50px;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .reviews-carousel-arrow-prev {
        left: calc(50% - 44px);
    }

    .reviews-carousel-arrow-next {
        right: calc(50% - 44px);
    }
}