/* ========================================
   Intro Slider Block
   ======================================== */

.intro-slider-block {
    position: relative;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Image - Absolute Bottom Left */
.intro-slider-visual {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45%;
    max-width: 600px;
    z-index: 1;
    pointer-events: none;
}

.intro-person-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Content Wrapper - standard Bootstrap .container, pushed right */
.intro-slider-content-wrap {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    /* Push content to the right half */
}

.intro-slider-subline {
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* Quotes Area */
.quotes-wrapper-inner {
    position: relative;
    margin-bottom: 40px;
}

/* Red Quote SVG */
.quotes-wrapper-inner::before {
    content: "";
    display: block;
    position: absolute;
    left: -100px;
    top: 10px;
    width: 58px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg width='63' height='48' viewBox='0 0 63 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 47.429V32.8551C0 28.8068 0.788352 24.7159 2.36506 20.5824C3.98438 16.4062 6.07244 12.5284 8.62926 8.94886C11.2287 5.3267 13.9134 2.34375 16.6832 0L29.9787 7.28693C27.6776 11.0369 25.8452 14.9574 24.4815 19.0483C23.1179 23.0966 22.4574 27.6775 22.5 32.7912V47.429H0ZM32.0881 47.429V32.8551C32.0881 28.8068 32.8764 24.7159 34.4531 20.5824C36.0724 16.4062 38.1605 12.5284 40.7173 8.94886C43.3168 5.3267 46.0014 2.34375 48.7713 0L62.0668 7.28693C59.7656 11.0369 57.9332 14.9574 56.5696 19.0483C55.206 23.0966 54.5455 27.6775 54.5881 32.7912V47.429H32.0881Z' fill='%23E6261F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.quotes-wrapper {
    position: relative;
    width: 100%;
}

.quote-slide {
    width: 100%;
    padding-right: 20px;
}

.quote-text {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #000;
}

.intro-slider-footer {
    margin-top: 20px;
}

/* Navigation Arrows */
.quote-nav {
    position: absolute;
    right: 0;
    top: 48%;
    transform: translateY(-48%);
    display: flex;
    flex-direction: row;
    /* Side-by-side */
    gap: 30px;
    z-index: 30;
    align-items: center;
}

.quote-arrows {
    display: flex;
    flex-direction: column;
    gap: 20px;
    display: none;
}

.quote-progress-dots {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Gap between dots */
    justify-content: center;
    position: relative;
    padding: 10px 0;
    /* Add some padding so line doesn't stick out if we want */
}

/* The static background line */
.quote-progress-track {
    position: absolute;
    left: var(--track-left, 50%);
    right: var(--track-right, auto);
    top: var(--track-top, 10px);
    bottom: var(--track-bottom, 10px);
    width: var(--track-width, 2px);
    height: var(--track-height, auto);
    background-color: #e0e0e0;
    transform: var(--track-transform, translateX(-50%));
    z-index: 0;
}

/* The filling line */
.quote-progress-fill {
    position: absolute;
    left: var(--track-left, 50%);
    right: var(--track-right, auto);
    top: var(--track-top, 10px);
    bottom: var(--track-bottom, 10px);
    width: var(--track-width, 2px);
    height: var(--track-height, auto);
    background-color: #000;
    transform-origin: var(--fill-origin, top center);
    transform: var(--track-transform, translateX(-50%)) var(--fill-scale, scaleY(0));
    z-index: 1;
}

.quote-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #000;
    background-color: #fff;
    cursor: pointer;
    z-index: 2;
    position: relative;
    flex-shrink: 0;
}

.quote-nav button {
    background: none;
    border: none;
    cursor: pointer;
    color: #000;
    transition: color 0.3s ease;
    padding: 10px;
}

.quote-nav .quote-prev {
    transform: rotate(0deg);
}

.quote-nav .quote-next {
    transform: rotate(180deg);
}

.quote-nav button:hover {
    color: var(--color-main);
}

/* ========================================
   Slide Images (col-lg-4, left side)
   ======================================== */
.intro-slider-row {
    height: 100%;
    width: 100%;
}

.quote-slide-images {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.quote-slide-img-item {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    opacity: 0;
    display: none;
    text-align: center;
}

.quote-slide-img-item.active {
    opacity: 1;
    display: block;
}

.quote-slide-img {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: inline-block;
    border-radius: 12px;
    object-fit: cover;
}

/* Hide red quote icon when image slide is active */
.quotes-wrapper-inner.quote-icon-hidden::before {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quotes-wrapper-inner::before {
    transition: opacity 0.3s ease;
}

/* ========================================
   Typing Animation
   ======================================== */
.typing-char {
    display: inline;
    transition: opacity 0.05s ease;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1024px) {
    .intro-slider-visual {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60%;
        max-width: 350px;
        z-index: 1;
        opacity: 0.8;
        /* Subtle transparency to help readability */
    }

    .intro-slider-content-wrap {
        padding: 0 15px;
        height: auto;
        z-index: 10;
    }

    .intro-slider-block {
        padding: 100px 0;
        align-items: center;
        display: flex;
    }

    .intro-slider-row {
        flex-direction: column;
    }

    .quotes-wrapper-inner {
        padding-left: 0;
        margin-top: 75px;
    }

    .quotes-wrapper-inner::before {
        left: 0;
        top: -50px;
        width: 45px;
        height: 35px;
    }

    /* Responsive Nav */
    .quote-nav {
        position: relative;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 20px;
        margin-top: 50px;
    }

    .quote-arrows {
        flex-direction: row;
    }

    .quote-progress-dots {
        flex-direction: row;
        display: inline-flex;
        width: auto;
        padding: 5px 0;
        --track-left: 5px;
        --track-right: 5px;
        --track-top: 50%;
        --track-bottom: auto;
        --track-width: auto;
        --track-height: 2px;
        --track-transform: translateY(-50%);
        --fill-origin: left center;
    }

    /* Image column: hide on mobile (or stack above) */
    .quote-slide-images {
        margin-top: 30px;
        margin-bottom: 15px;
        min-height: 250px;
        width: 100%;
    }

    .quote-slide-img {
        max-width: 100%;
    }

    .col-lg-8.offset-lg-2.intro-slider-content.mb-5 {
        padding: 0;
    }
}