/* Container for the entire testimonial slider */
.testimonial-slider-container {
    position: relative;
    width: 30%;               /* Set the width as desired (e.g., 80% of the page) */
    max-width: 1000px;        /* Maximum width to prevent it from getting too wide */
    margin: 0 auto;           /* Horizontally center the slider */
    overflow: hidden;         /* Ensure only one slide is visible at a time */
    border: 2px solid #ddd;   /* Optional: Border around the slider */
    border-radius: 10px;      /* Optional: Rounded corners */
    background-color: #fff;   /* Optional: Background color */
    display: flex;            /* Use flexbox for centering */
    justify-content: center;  /* Center horizontally */
    align-items: center;      /* Center vertically */
    height: 50vh;             /* Set a height (adjust to fit your needs) */
}

/* The slider itself which holds all the slides */
.testimonial-slider {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition when moving between slides */
    width: 100%;
}

/* Add this new rule */
.testimonial-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateX(100%);
    width: 90%; /* Slightly less than full width */
    display: flex;
    align-items: center;
    transition: transform 0.6s ease, opacity 0.3s ease;
    opacity: 0;
}

.testimonial-slide.active {
     opacity: 1;
    transform: translate(-50%, -50%) translateX(0);
}

.testimonial-slide.exiting {
    transform: translate(-50%, -50%) translateX(-100%);
}
/* Styling for the testimonial image */
.testimonial-image {
    margin-right: 10px; /* Reduced margin-right to bring the image closer to text */
    margin-left: 20px;  /* Added margin-left to create space from the left of the image */
    flex-shrink: 0; /* Prevents the image from shrinking */
}

.testimonial-image img {
    width: 80px;
    height: 80px;     /* Adjusted height for better alignment */
    border-radius: 50%; /* Rounded image */
    object-fit: cover;  /* Ensure the image covers the area */
}

/* Styling for the testimonial text */
.testimonial-text {
    max-width: 80%;
    text-align: left;
    margin-left: 50px; /* Added margin-left to create space between text and image */
}

.testimonial-text p {
    font-size: 1rem;
    font-weight: 400;
    color: #555;
    margin: 0 0 10px; /* Margin between text */
}

.testimonial-text h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
    .testimonial-slider-container {
        width: 90%;
    }

    .testimonial-slide {
        flex-direction: column; /* Stack the image and testimonial text vertically on small screens */
        text-align: center;
    }

    .testimonial-image {
        margin-right: 0;
        margin-bottom: 10px; /* Add some spacing between image and text */
    }

    .testimonial-text {
        max-width: 100%; /* Ensure text takes full width on smaller screens */
    }
}