﻿.hero-stories {
    background-color: var(--color-light);
    border-bottom: 1px solid var(--color-border);
}

.testimonial-card .card-body {
    position: relative;
}

.testimonial-quote-icon {
    position: absolute;
    top: 1rem;
    left: 2rem;
    font-size: 6rem;
    line-height: 1;
    color: var(--color-secondary);
    opacity: 0.1;
    z-index: 0;
    user-select: none;
}

.testimonial-card blockquote {
    position: relative;
    z-index: 1;
    font-family: var(--font-family-display);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-dark);
    margin-bottom: 1.5rem;
}

.testimonial-card figcaption strong {
    font-family: var(--font-family-sans);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0;
    font-size: 1.1rem;
}

.testimonial-card figcaption cite {
    font-size: 0.9rem;
    color: var(--color-gray);
}

.video-story-section {
    background-color: var(--color-dark);
}

.video-story-section h2,
.video-story-section .lead {
    color: var(--color-white);
}

.video-story-section .lead {
    opacity: 0.8;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}