.card-carousel-wrapper {
    position: relative;
    padding: 0 40px;
    /* Space for the navigation buttons */
}

/* The scrolling viewport */
.card-carousel-track {
    display: flex;
    overflow-x: hidden;
    /* Hide the scrollbar */
    scroll-behavior: smooth;
    /* Enable smooth scrolling for buttons */
    -webkit-overflow-scrolling: touch;
    /* Better scrolling on iOS */
    padding-bottom: 20px;
    /* Visual spacing */
}

/* Styling for the individual card container */
.testimonial-card-item {
    /* Define widths for responsiveness: 1 card visible on mobile, 2 on tablet, 3 on desktop */
    flex: 0 0 100%;
    /* Default: 100% width on mobile (1 item visible) */
    padding: 10px;
    transition: transform 0.3s ease-in-out;
    cursor: grab;
    /* Indicates drag capability */
}

/* Tablet breakpoint (768px and up) */
@media (min-width: 768px) {
    .testimonial-card-item {
        flex: 0 0 50%;
        /* 50% width on tablet (2 items visible) */
    }
}

/* Desktop breakpoint (992px and up) */
@media (min-width: 992px) {
    .testimonial-card-item {
        flex: 0 0 calc(100% / 3);
        /* ~33.33% width on desktop (3 items visible) */
    }
}

/* Card styling */
.card {
    /* min-height: 250px; */
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
    border: none;
}

/* Navigation Buttons */
.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #0d6efd;
    /* Primary Bootstrap blue */
    border-radius: 50%;
    opacity: 1;
}

.carousel-control-prev {
    left: 0;
}

.carousel-control-next {
    right: 0;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: #0b5ed7;
    /* Darker blue on hover */
}

/* Star rating colors */
.star-rating .fa-star {
    color: #ffc107;
    /* Bootstrap's yellow/warning color */
}

/* Utility for drag state */
.card-carousel-track.dragging {
    scroll-behavior: auto;
    /* Disable smooth scrolling when dragging */
    cursor: grabbing;
}

/*------------------------- Slide------------------------------- */
:root {
    --bs-blue: #0d6efd;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    font-family: var(--bs-font-sans-serif);
    background-color: #f8f9fa;
}

/* 1. Carousel Container Styling */


/* 2. Scrollable Inner Content */
.carousel-inner-custom {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    /* Enforce snapping to card boundaries */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar for Firefox */
    padding-bottom: 20px;
    cursor: grab;
    /* Cursor for mouse drag interaction */
}

.carousel-inner-custom::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar for Webkit browsers */
}

/* 3. Card Item Responsiveness (3 per row on L, 2 on M, 1 on S) */
.card-item-wrapper {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* Snap point at the start of each card */
    padding: 15px;
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
}

/* Desktop: 3 cards per row */
.card-item-wrapper {
    width: 33.3333%;
}

/* Tablet/Medium: 2 cards per row */
@media (max-width: 992px) {
    .card-item-wrapper {
        width: 50%;
    }
}

/* Mobile/Small: 1 card per row */
@media (max-width: 768px) {
    .card-item-wrapper {
        width: 100%;
    }

    .testimonials-carousel-container {
        position: relative;
        margin: 0 auto;
    }
}

/* 4. Card Styling */
.testimonial-card {
    /* background: #ffffff; */
    border: none;
    border-radius: 12px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
    /* height: 100%; */
    /* Ensure uniform height within the flex container */
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 5. Navigation Buttons */
.carousel-control-custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--bs-blue);
    color: #fff;
    border: none;
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.carousel-control-custom:hover {
    opacity: 1;
}

.carousel-control-prev-custom {
    left: 0;
}

.carousel-control-next-custom {
    right: 0;
}

.carousel-action-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 18px auto 0;
    width: fit-content;
}

.carousel-action-buttons .btn {
    min-width: 120px;
    padding: 10px 18px;
    font-size: 0.95rem;
    border-radius: 35px;
    font-weight: 600;
}

.carousel-action-buttons .btn i {
    margin-right: 8px;
}

/*
Source - https://stackoverflow.com/a/486571
Posted by Joe Phillips, modified by community. See post 'Timeline' for change history
Retrieved 2025-11-07, License - CC BY-SA 4.0
*/

.truncate-multi-line {
    overflow: hidden;
    display: -webkit-box;
    /* Required for -webkit-line-clamp to work */
    -webkit-box-orient: vertical;
    /* Required for -webkit-line-clamp to work */
    /* -webkit-line-clamp: 10; */
    /* Specifies the number of lines to display before truncation */
    user-select: none;
  /* Vendor prefixes for broader compatibility, though less necessary in modern browsers */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
}
.align-items-center img{
    /* width: 15% ; */
    /* height: 100%; */
}