/* ==========================================================================
   Content Pages — supplemental styles only.
   All heading, paragraph, list, and background styles come from the
   existing .wpsHomeAbout rules in themes5.css — matching index.php exactly.
   This file only adds what is not already there.
   ========================================================================== */

/* ── Section dividers ────────────────────────────────────────────────────── */
.cp-section {
    padding: 30px 0;
    border-bottom: 1px solid #d9d9d9;
    overflow: hidden;   /* clearfix for floated image blocks */
}

.cp-section:first-child {
    padding-top: 10px;
}

.cp-section:last-child {
    border-bottom: none;
    padding-bottom: 10px;
}

/* ── Floated image block — mirrors .homeAboutImage pattern ───────────────── */
.cp-img-right {
    float: right;
    width: 40%;
    max-width: 420px;
    margin: 0 0 20px 30px;
}

.cp-img-left {
    float: left;
    width: 40%;
    max-width: 420px;
    margin: 0 30px 20px 0;
}

/* Image itself — mirrors .about_image_2 img */
.cp-img-right img,
.cp-img-left img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cp-img-right img:hover,
.cp-img-left img:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
}

/* ── Two-column text split (used for Values + Why Choose Us) ─────────────── */
.cp-two-col {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.cp-two-col > div {
    flex: 1;
}

/* ── Format pill badges (vectors / digitizing format list) ───────────────── */
.cp-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 12px 0 6px;
    padding: 0;
}

.cp-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: normal;
}

.cp-pill i {
    color: #2b6bdb;
}

/* ── Responsive — stack image blocks on mobile ───────────────────────────── */
@media (max-width: 767px) {
    .cp-img-right,
    .cp-img-left {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }

    .cp-two-col {
        flex-direction: column;
        gap: 0;
    }
}