/* Wrapper */
.sts-wrap { padding: 32px 12px; }

/* Each slide (image left, text right) */
.sts-slide {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* slightly smaller image than text */
    gap: 36px;
    align-items: center;
    padding: 20px 10px;
}

/* Image frame (smaller than the original design) */
.sts-media { display: flex; justify-content: flex-end; }
.sts-image-frame {
    position: relative;
    max-width: 420px;              /* smaller than the uploaded design */
    width: 100%;
    padding: 10px;
    border: 1px solid #c8c8c8;
    background: #fff;
    box-shadow: 0 10px 18px rgba(0,0,0,0.05);
}
.sts-image-frame::after {
    /* subtle outer frame line like the screenshot */
    content: "";
    position: absolute;
    inset: -18px -18px -18px -18px;
    border: 1px solid #d9d4cd;
    pointer-events: none;
}
.sts-image-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Content area */
.sts-content { position: relative; padding-right: 10px; }

/* Quote accent using the requested color */
.sts-quote-accent::before {
    content: "“";
    font-size: 78px;               /* smaller than original */
    line-height: 1;
    color: #3597BF;
    display: inline-block;
    margin-bottom: 14px;
}

/* Testimonial text (smaller) */
.sts-text {
    font-size: 18px;               /* smaller text */
    line-height: 1.6;
    color: #222;
}
.sts-text p { margin: 0 0 12px; }

.sts-divider {
    margin: 20px 0 14px;
    border: 0;
    border-top: 1px solid #bdbdbd;
    width: 160px;
}

.sts-author .sts-name {
    font-weight: 700;
    font-size: 15px;
    color: #111;
    margin-bottom: 4px;
}
.sts-author .sts-role {
    font-style: italic;
    font-size: 13px;
    color: #666;
}

/* Owl dots/nav tweaks (optional) */
.sts-carousel .owl-nav { margin-top: 10px; text-align: center; }
.sts-carousel .owl-nav button.owl-prev,
.sts-carousel .owl-nav button.owl-next { padding: 4px 10px !important; }
.sts-carousel .owl-dots { margin-top: 12px; }

/* Responsive: stack image above text on small screens */
@media (max-width: 992px) {
    .sts-slide {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px 6px;
    }
    .sts-media { justify-content: center; }
    .sts-image-frame { max-width: 360px; }
    .sts-text { font-size: 17px; }
}

@media (max-width: 600px) {
    .sts-image-frame { max-width: 300px; }
    .sts-text { font-size: 16px; line-height: 1.55; }
    .sts-quote-accent::before { font-size: 72px; }
    .sts-divider { width: 120px; }
    .sts-author .sts-name { font-size: 14px; }
    .sts-author .sts-role { font-size: 12px; }
}