/*
 * KMS Homepage — Professional Override
 * Loaded after main_styles.css; does not modify the original.
 */

/* ── Global rhythm ──────────────────────────────────────────────────────── */
body { color: #333; }

/* ── Hero side text — remove dated shadow/box-shadow ────────────────────── */
/*
 * hero_side_text_container is rotated -90deg; hero_side_text inside is rotated
 * +90deg to cancel → children appear upright in the visual orange balk.
 * The container height is 236px (= visual balk width) and width 865px (= visual
 * balk height). padding-right:170px on hero_side_text is reserved for the logo.
 * We make hero_side_text position:relative so the logo can be placed absolutely
 * inside the padding-right zone without interfering with h2 flow.
 */
.hero_side_text {
    position: relative;
}
.hero_side_text h2 {
    box-shadow: none !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.55) !important;
    font-size: 1.25rem !important;
    letter-spacing: -.2px;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

/* ── Icon boxes (kenteken section) ──────────────────────────────────────── */
.icon_boxes {
    padding-bottom: 40px !important;
    background: #fff;
    border-bottom: 1px solid #efefef;
}
.icon_box_title h1 {
    font-size: 28px !important;
    line-height: 1.35;
    color: #1a1a2e;
}

/* ── Brands slider — neutral background ─────────────────────────────────── */
.assortiment_section:first-of-type,
div[style*="#fff1e3"] {
    background: #f6f7f8 !important;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

/* ── "Nieuw in ons assortiment" ─────────────────────────────────────────── */
.assortiment_section .section_title h1 {
    font-size: 30px;
    color: #1a1a2e;
}
.assortiment_section .section_title span {
    color: #888;
    font-size: 14px;
}

/* ── V-slider (USP / Service Point) ─────────────────────────────────────── */
.v_slider_section {
    background: #fff;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
}
.v_slider_section h1 {
    font-size: 26px !important;
    line-height: 1.3;
    color: #1a1a2e;
}
.v_slider_section h2 {
    font-size: 18px !important;
    color: #555;
    font-weight: 600;
}

/* ── Services / problem-types section ───────────────────────────────────── */
.services {
    background: #f9fafc !important;
    border-top: 1px solid #efefef;
}
.services .section_title h1 {
    font-size: 28px;
    color: #1a1a2e;
}
.services .section_title {
    margin-bottom: 6px;
}

/* ── Features / Contact ──────────────────────────────────────────────────── */
.features {
    background: #fff;
    border-top: 1px solid #efefef;
}
.features .section_title h1 {
    font-size: 28px;
    color: #1a1a2e;
}
.features_item h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
}
.features_item p {
    font-size: 13px;
    color: #888;
}
.features_item i {
    color: #ee7b03 !important;
}

/* ── CTA — toned down from full orange ──────────────────────────────────── */
.cta {
    border-top: 1px solid #efefef;
}
.cta_background {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%) !important;
}
.cta_content h1 {
    color: #fff;
    font-size: 32px;
}
.cta_content p {
    color: rgba(255,255,255,.75);
    font-size: 14px;
    line-height: 1.7;
}

/* ── Text line (Particulier / Autobedrijf cards) ─────────────────────────── */
.text_line {
    background: #f6f7f8;
    border-top: 1px solid #ebebeb;
}
.text_line .bg-light {
    background: #fff !important;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.text_line h5 {
    color: #1a1a2e;
    font-weight: 800;
}
.text_line .table td {
    font-size: 13px;
    color: #444;
    border-color: #f0f0f0;
}
.kms_option:hover td { color: #ee7b03 !important; }

/* ── Newsletter section ───────────────────────────────────────────────────── */
.newsletter {
    background: #1a1a2e;
    border-top: 1px solid #111;
}
.newsletter_title h1 {
    color: #fff;
    font-size: 28px;
}
.newsletter_title span {
    color: rgba(255,255,255,.65);
    font-size: 14px;
}

/* ── Footer polish ───────────────────────────────────────────────────────── */
.footer {
    background: #111827;
}
.footer_intro p {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
}
.footer_col_title {
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    margin-bottom: 14px;
}
.footer ul li a {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    transition: color .2s;
}
.footer ul li a:hover { color: #ee7b03; }
.footer_cr {
    font-size: 12px;
    color: rgba(255,255,255,.35);
    margin-top: 20px;
}

/* ── Section title underline — slim accent ───────────────────────────────── */
.section_title::after {
    width: 40px;
    height: 2px;
}

/* ── Remove visual noise from service slider items ───────────────────────── */
.services_item_inner {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
    transition: transform .22s, box-shadow .22s;
}
.services_item_inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
}
.service_item_icon i {
    font-size: 32px !important;
}
.service_item_content h2 {
    font-size: 16px !important;
    font-weight: 700;
    color: #1a1a2e;
}
.service_item_content p {
    font-size: 12px !important;
    color: #888;
    line-height: 1.55;
}