/* =============================================
   SERVICES PAGE CSS - JK Drive Technology
   Pixel-matched to jkdrive.lk/our-service/
   ============================================= */

/* ------------------------------------------------------------------
   1) INTRO PANEL  – light-gray hero with title + numbered service list
   ------------------------------------------------------------------ */
.services-intro {
    background: #ededed;
    padding: 55px 0 60px;
}

.services-intro-title {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    margin: 0 0 38px;
}

.services-intro-title span { color: var(--accent); }

.services-intro-body {
    max-width: 780px;
    margin: 0 auto;
    padding-left: 24px;
}

.services-doing-label {
    font-size: 14px;
    color: #5a5a5a;
    margin: 0 0 14px;
}

.services-numbered-list {
    margin: 0;
    padding-left: 22px;
    counter-reset: services-counter;
    list-style: none;
}

.services-numbered-list li {
    position: relative;
    counter-increment: services-counter;
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.85;
    padding-left: 6px;
    margin-bottom: 4px;
}

.services-numbered-list li::before {
    content: counter(services-counter) ".";
    position: absolute;
    left: -22px;
    color: #4a4a4a;
    font-weight: 500;
}

.services-numbered-list li strong {
    color: #2b2b2b;
    font-weight: 700;
}

/* ------------------------------------------------------------------
   2) SERVICE ITEMS GRID  – clean 3-column grid, no borders
   ------------------------------------------------------------------ */
.services-grid-section {
    background: var(--white);
    padding: 60px 0 70px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 60px;
}

.service-item {
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.35s ease;
}

.service-item:hover { transform: translateY(-4px); }

/* First card has subtle gray background panel like the screenshot */
.service-item-highlight {
    background: #ededed;
    padding: 22px 22px 26px;
    border-radius: 4px;
    margin: -18px -18px 0;
}

/* ── Image ── */
.service-item-imgwrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

.service-item-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.service-item:hover .service-item-imgwrap img { transform: scale(1.04); }

/* ── Title (royal blue) ── */
.service-item-title {
    font-family: var(--font-body);
    font-size: 21px;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 14px;
    line-height: 1.3;
    letter-spacing: 0;
}

/* ── Description ── */
.service-item-desc {
    font-size: 13.5px;
    color: #6a6a6a;
    line-height: 1.85;
    text-align: justify;
    margin: 0;
}

/* ------------------------------------------------------------------
   3) RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .services-intro-title { font-size: 26px; }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 35px;
    }
    .service-item-highlight { margin: 0; }
}

@media (max-width: 767px) {
    .services-intro { padding: 40px 0 45px; }
    .services-intro-title { font-size: 22px; letter-spacing: 1px; margin-bottom: 26px; }
    .services-intro-body { padding-left: 8px; }
    .services-numbered-list li { font-size: 13px; }

    .services-grid-section { padding: 40px 0 50px; }
    .services-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .service-item-title { font-size: 19px; }
    .service-item-desc { font-size: 13px; }
}