/* --- General Testimonials Wrapper --- */
.mts-testimonials-wrapper {
    background-color: #f8f8f8; /* This will be overridden by the background image */
    padding: 40px 20px;
   /* margin-top: 1rem;
    margin-bottom: 1rem; */
   /* border-radius: 8px;  Slightly rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Softer, more pronounced shadow */
    overflow: hidden; /* Ensures no content overflows, especially for sliders */
    position: relative; /* Needed for positioning the pseudo-element overlay */
    z-index: 1; /* Ensures the wrapper is above other potential content */

    /* Background Image Styles */
    background-image: url('../images/33.jpg');  /* REPLACE with your image path */
    background-size: cover; /* Covers the entire element */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents image repetition */
    /* background-attachment: fixed; /* Optional: for parallax-like scrolling */
}

/* Overlay for the background image */
.mts-testimonials-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 47, 108, 0.8); /* Black with 60% opacity */
    z-index: -1; /* Puts the overlay behind the content but above the background image */
  /*  border-radius: 8px;  Match the wrapper's border-radius */
}


/* --- Single Testimonial (Non-Slider Layout) --- */
.mts-single-testimonial {
    max-width: 800px; /* Constrain width for better readability */
    margin: 0 auto; /* Center the single testimonial */
    text-align: center;
}

/* --- Individual Testimonial Item (for both single and slider) --- */
.mts-testimonial-item {
    padding: 20px;
    text-align: center;
    outline: none; /* Remove outline for slider focus */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    color: #ffffff; /* Make sure the item's text is light */
}

/* --- Testimonial Content (The Quote Itself) --- */
.mts-testimonial-content {
    font-size: 1.2em;
    line-height: 1.6;
    color: #f0f0f0; /* Lighter color for content text */
    position: relative;
    padding: 0 40px 25px 40px; /* Increased padding for quote icons */
    margin-top: 30px; /* More space before author info */
    font-style: italic; /* Emphasize the quote */
}

/* --- Quote Icons --- */
.mts-quote-icon {
    font-family: Georgia, serif;
    font-size: 4.5em; /* Slightly larger quote icon */
    color: rgba(255, 255, 255, 0.2); /* White with transparency for icons */
    position: absolute;
    top: -15px; /* Adjust position */
    left: 0;
    opacity: 0.7; /* Slightly more visible */
    line-height: 1;
}

.mts-quote-icon-bottom {
    font-family: Georgia, serif;
    font-size: 4.5em; /* Slightly larger quote icon */
    color: rgba(255, 255, 255, 0.2); /* White with transparency for icons */
    position: absolute;
    bottom: -25px; /* Adjust position */
    right: 0;
    opacity: 0.7; /* Slightly more visible */
    line-height: 1;
    transform: rotate(180deg);
}

/* --- Author Information --- */
.mts-testimonial-author {
    display: flex;
    flex-direction: column; /* Stacks image and details vertically */
    align-items: center; /* Centers the items horizontally */
    justify-content: center;
    margin-top: 25px; /* More space from content */
}

.mts-author-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid #f1c40f; /* A brighter blue might stand out more on a dark background */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow for visibility */
    margin-right: 0; /* No margin on the right */
    margin-bottom: 15px; /* Adds space below the image */
    flex-shrink: 0; /* منع الصورة من الانكماش */
}

.mts-author-details {
    text-align: center; /* Center the text now that it's stacked */
}

.mts-author-name {
    margin: 0; /* Removed the previous margin to center the text */
    font-size: 1.15em; /* Slightly larger name */
    color: #f1c40f; /* Brighter blue for name */
    font-weight: 700; /* Bolder for prominence */
}

.mts-author-position {
    margin: 5px 0 0;
    font-size: 0.95em; /* Slightly larger position text */
    color: #cccccc; /* Light grey for position text */
}

/* --- Slider Specific Styles (Slick Carousel) --- */
.mts-testimonials-slider .slick-prev,
.mts-testimonials-slider .slick-next {
    width: 45px; /* Slightly larger buttons */
    height: 45px;
    z-index: 10;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for perfect centering */
}

.mts-testimonials-slider .slick-prev:before,
.mts-testimonials-slider .slick-next:before {
    font-size: 35px; /* Larger arrows */
    color: #00aaff; /* Accent color for arrows */
    opacity: 0.9; /* More prominent arrows */
}

.mts-testimonials-slider .slick-prev {
    left: -30px; /* Adjust position */
}

.mts-testimonials-slider .slick-next {
    right: -30px; /* Adjust position */
}

.mts-testimonials-slider .slick-dots {
    bottom: -40px; /* More space from testimonials */
}

.mts-testimonials-slider .slick-dots li button:before {
    font-size: 11px; /* Slightly larger dots */
    color: #666666; /* Darker dots on dark background */
}

.mts-testimonials-slider .slick-dots li.slick-active button:before {
    color: #f1c40f; /* Accent color for active dot */
}

/* --- Responsive Adjustments for Smaller Screens --- */
@media (max-width: 768px) {
    .mts-testimonials-wrapper {
        padding: 25px 15px; /* Adjusted padding */
        margin: 20px 0;
    }

    .mts-testimonial-content {
        font-size: 1em;
        padding: 0 25px 20px 25px; /* Adjusted padding */
    }

    .mts-quote-icon,
    .mts-quote-icon-bottom {
        font-size: 3.5em; /* Smaller icons on mobile */
    }

    .mts-author-image {
        width: 65px;
        height: 65px;
    }

    .mts-author-name {
        font-size: 1.05em;
    }

    .mts-author-position {
        font-size: 0.85em;
    }

    .mts-testimonials-slider .slick-prev,
    .mts-testimonials-slider .slick-next {
        width: 35px; /* Smaller buttons on mobile */
        height: 35px;
    }

    .mts-testimonials-slider .slick-prev:before,
    .mts-testimonials-slider .slick-next:before {
        font-size: 25px; /* Smaller arrows on mobile */
    }

    .mts-testimonials-slider .slick-prev {
        left: 0px; /* Closer to edge */
    }

    .mts-testimonials-slider .slick-next {
        right: 0px; /* Closer to edge */
    }

    .mts-testimonials-slider .slick-dots {
        bottom: -30px; /* Adjusted dot position */
    }
}