/*
 * ST. MARY'S IOC COVENTRY
 * INNER PAGES V2
 * Frontend only.
 *
 * Load LAST after style.css, responsive.css and any existing hotfix CSS.
 *
 * Goals:
 * - Improve inner page title/banner
 * - Improve article readability and alignment
 * - Style sidebar/service navigation
 * - Improve images, headings, lists, tables and forms
 * - Keep existing PHP/admin/database untouched
 */

:root {
    --inner-navy: #1A2744;
    --inner-navy-deep: #111B33;
    --inner-gold: #C5973A;
    --inner-gold-soft: #F5EDD8;
    --inner-ivory: #F8F5EE;
    --inner-white: #FFFFFF;
    --inner-text: #3D4A5C;
    --inner-text-soft: #697386;
    --inner-border: #E8E1D4;
    --inner-radius: 14px;
    --inner-shadow: 0 10px 30px rgba(17,27,51,.08);
}

/* ============================================================
   1. INNER PAGE HERO / PAGE TITLE
   Supports common legacy selectors without changing PHP markup.
   ============================================================ */

.page-title,
.page-banner,
.inner-banner,
.breadcrumb-area,
.page-header-area {
    position: relative !important;
    overflow: hidden !important;

    min-height: 170px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    background-size: cover !important;
    background-position: center 38% !important;
    background-repeat: no-repeat !important;

    border-top: 2px solid var(--inner-gold);
    border-bottom: 1px solid rgba(17,27,51,.08);
}

.page-title::before,
.page-banner::before,
.inner-banner::before,
.breadcrumb-area::before,
.page-header-area::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(17,27,51,.84) 0%,
            rgba(26,39,68,.72) 42%,
            rgba(17,27,51,.45) 72%,
            rgba(17,27,51,.28) 100%
        ) !important;
}

.page-title::after,
.page-banner::after,
.inner-banner::after,
.breadcrumb-area::after,
.page-header-area::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(197,151,58,.14),
            transparent 32%
        ) !important;
    pointer-events: none !important;
}

.page-title .container,
.page-banner .container,
.inner-banner .container,
.breadcrumb-area .container,
.page-header-area .container {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

.page-title h1,
.page-title h2,
.page-banner h1,
.page-banner h2,
.inner-banner h1,
.inner-banner h2,
.breadcrumb-area h1,
.breadcrumb-area h2,
.page-header-area h1,
.page-header-area h2 {
    margin: 0 !important;
    color: #fff !important;

    font-size: clamp(34px, 3.2vw, 46px) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -.4px !important;

    text-shadow: 0 3px 18px rgba(0,0,0,.28);
}

/* Existing breadcrumbs, where present */
.page-title .breadcrumb,
.page-banner .breadcrumb,
.inner-banner .breadcrumb,
.breadcrumb-area .breadcrumb,
.page-header-area .breadcrumb {
    margin: 10px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 13px !important;
}

.page-title .breadcrumb a,
.page-banner .breadcrumb a,
.inner-banner .breadcrumb a,
.breadcrumb-area .breadcrumb a,
.page-header-area .breadcrumb a {
    color: #F0D18D !important;
}

.page-title .breadcrumb > li + li::before,
.page-banner .breadcrumb > li + li::before,
.inner-banner .breadcrumb > li + li::before,
.breadcrumb-area .breadcrumb > li + li::before,
.page-header-area .breadcrumb > li + li::before {
    color: rgba(255,255,255,.48) !important;
}


/* ============================================================
   2. INNER PAGE CONTENT AREA
   ============================================================ */

.content-area,
.page-content,
.inner-page,
.inner-page-content,
.service-detail,
.service-single,
.page-detail {
    background: var(--inner-ivory) !important;
}

/* Common two-column inner layouts */
.service-detail,
.service-single,
.page-detail,
.page-content {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
}

/* Main content card: supports likely Bootstrap structures */
.service-detail .content,
.service-detail .detail,
.service-detail .main-content,
.service-single .content,
.service-single .detail,
.service-single .main-content,
.page-detail .content,
.page-detail .detail,
.page-content .content,
.inner-page-content {
    background: var(--inner-white) !important;
    border: 1px solid var(--inner-border) !important;
    border-radius: var(--inner-radius) !important;
    box-shadow: var(--inner-shadow) !important;
}

/*
 * Fallback for legacy layouts where the article is simply the first large
 * Bootstrap column next to a sidebar.
 */
.service-detail .row > [class*="col-md-8"],
.service-detail .row > [class*="col-md-9"],
.service-single .row > [class*="col-md-8"],
.service-single .row > [class*="col-md-9"],
.page-detail .row > [class*="col-md-8"],
.page-detail .row > [class*="col-md-9"] {
    background: var(--inner-white);
    border: 1px solid var(--inner-border);
    border-radius: var(--inner-radius);
    box-shadow: var(--inner-shadow);
    padding: 34px 36px 40px !important;
}

/* Keep nested Bootstrap columns from receiving card styling twice */
.service-detail .row > [class*="col-md-8"] [class*="col-"],
.service-detail .row > [class*="col-md-9"] [class*="col-"],
.service-single .row > [class*="col-md-8"] [class*="col-"],
.service-single .row > [class*="col-md-9"] [class*="col-"],
.page-detail .row > [class*="col-md-8"] [class*="col-"],
.page-detail .row > [class*="col-md-9"] [class*="col-"] {
    background: transparent;
    border: 0;
    box-shadow: none;
}


/* ============================================================
   3. ARTICLE TYPOGRAPHY
   ============================================================ */

.service-detail .content,
.service-detail .detail,
.service-detail .main-content,
.service-single .content,
.service-single .detail,
.service-single .main-content,
.page-detail .content,
.page-detail .detail,
.page-content .content,
.inner-page-content,
.service-detail .row > [class*="col-md-8"],
.service-detail .row > [class*="col-md-9"],
.service-single .row > [class*="col-md-8"],
.service-single .row > [class*="col-md-9"],
.page-detail .row > [class*="col-md-8"],
.page-detail .row > [class*="col-md-9"] {
    color: var(--inner-text) !important;
    font-size: 16px !important;
    line-height: 1.76 !important;
}

.service-detail p,
.service-single p,
.page-detail p,
.page-content p,
.inner-page-content p {
    margin: 0 0 18px !important;
    color: var(--inner-text) !important;
    font-size: 16px !important;
    line-height: 1.76 !important;
}

.service-detail h2,
.service-single h2,
.page-detail h2,
.page-content h2,
.inner-page-content h2 {
    margin: 30px 0 14px !important;
    color: var(--inner-navy) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.service-detail h3,
.service-single h3,
.page-detail h3,
.page-content h3,
.inner-page-content h3 {
    margin: 26px 0 12px !important;
    color: var(--inner-navy) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.service-detail h4,
.service-single h4,
.page-detail h4,
.page-content h4,
.inner-page-content h4 {
    margin: 22px 0 10px !important;
    color: var(--inner-navy) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.service-detail strong,
.service-single strong,
.page-detail strong,
.page-content strong,
.inner-page-content strong {
    color: var(--inner-navy);
}

.service-detail a,
.service-single a,
.page-detail a,
.page-content a,
.inner-page-content a {
    color: var(--inner-gold);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.service-detail a:hover,
.service-single a:hover,
.page-detail a:hover,
.page-content a:hover,
.inner-page-content a:hover {
    color: var(--inner-navy);
}


/* ============================================================
   4. ARTICLE IMAGES
   ============================================================ */

.service-detail .content img,
.service-detail .detail img,
.service-detail .main-content img,
.service-single .content img,
.service-single .detail img,
.service-single .main-content img,
.page-detail .content img,
.page-detail .detail img,
.page-content .content img,
.inner-page-content img,
.service-detail .row > [class*="col-md-8"] img,
.service-detail .row > [class*="col-md-9"] img,
.service-single .row > [class*="col-md-8"] img,
.service-single .row > [class*="col-md-9"] img,
.page-detail .row > [class*="col-md-8"] img,
.page-detail .row > [class*="col-md-9"] img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 auto 28px !important;

    border-radius: 10px !important;
    object-fit: contain !important;
}

/*
 * Featured first image: visually prominent but prevents huge vertical empty space.
 */
.service-detail .row > [class*="col-md-8"] > img:first-child,
.service-detail .row > [class*="col-md-9"] > img:first-child,
.service-single .row > [class*="col-md-8"] > img:first-child,
.service-single .row > [class*="col-md-9"] > img:first-child,
.page-detail .row > [class*="col-md-8"] > img:first-child,
.page-detail .row > [class*="col-md-9"] > img:first-child {
    max-height: 430px !important;
}


/* ============================================================
   5. LISTS / QUOTES / TABLES
   ============================================================ */

.service-detail ul,
.service-detail ol,
.service-single ul,
.service-single ol,
.page-detail ul,
.page-detail ol,
.page-content ul,
.page-content ol,
.inner-page-content ul,
.inner-page-content ol {
    margin: 0 0 22px 20px !important;
    padding-left: 12px !important;
}

.service-detail li,
.service-single li,
.page-detail li,
.page-content li,
.inner-page-content li {
    margin-bottom: 8px !important;
    line-height: 1.65 !important;
}

.service-detail blockquote,
.service-single blockquote,
.page-detail blockquote,
.page-content blockquote,
.inner-page-content blockquote {
    margin: 28px 0 !important;
    padding: 18px 20px 18px 22px !important;

    border-left: 4px solid var(--inner-gold) !important;
    background: var(--inner-gold-soft) !important;
    border-radius: 0 10px 10px 0 !important;

    color: var(--inner-navy) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

.service-detail table,
.service-single table,
.page-detail table,
.page-content table,
.inner-page-content table {
    width: 100% !important;
    margin: 26px 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;

    border: 1px solid var(--inner-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.service-detail th,
.service-single th,
.page-detail th,
.page-content th,
.inner-page-content th {
    padding: 12px 14px !important;
    background: var(--inner-navy) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.service-detail td,
.service-single td,
.page-detail td,
.page-content td,
.inner-page-content td {
    padding: 12px 14px !important;
    border-top: 1px solid var(--inner-border) !important;
    color: var(--inner-text) !important;
}


/* ============================================================
   6. IMPORTANT INFO / SCHEDULE
   Existing bold paragraphs can automatically look like a callout
   if wrapped in common legacy classes. No backend changes needed.
   ============================================================ */

.service-detail .info-box,
.service-detail .schedule,
.service-detail .highlight,
.service-single .info-box,
.service-single .schedule,
.service-single .highlight,
.page-detail .info-box,
.page-detail .schedule,
.page-detail .highlight,
.inner-page-content .info-box,
.inner-page-content .schedule,
.inner-page-content .highlight {
    margin: 24px 0 !important;
    padding: 18px 20px !important;

    border: 1px solid rgba(197,151,58,.34) !important;
    border-left: 4px solid var(--inner-gold) !important;
    border-radius: 10px !important;

    background: var(--inner-gold-soft) !important;
    color: var(--inner-navy) !important;
}


/* ============================================================
   7. RIGHT SIDEBAR / SERVICES NAV
   ============================================================ */

.service-detail .sidebar,
.service-single .sidebar,
.page-detail .sidebar,
.service-detail .row > [class*="col-md-3"],
.service-detail .row > [class*="col-md-4"],
.service-single .row > [class*="col-md-3"],
.service-single .row > [class*="col-md-4"],
.page-detail .row > [class*="col-md-3"],
.page-detail .row > [class*="col-md-4"] {
    position: relative;
}

/* Sidebar card */
.service-detail .sidebar > *,
.service-single .sidebar > *,
.page-detail .sidebar > *,
.service-detail .row > [class*="col-md-3"] > *,
.service-detail .row > [class*="col-md-4"] > *,
.service-single .row > [class*="col-md-3"] > *,
.service-single .row > [class*="col-md-4"] > *,
.page-detail .row > [class*="col-md-3"] > *,
.page-detail .row > [class*="col-md-4"] > * {
    max-width: 100%;
}

/* Common sidebar heading */
.service-detail .sidebar h3,
.service-detail .sidebar h4,
.service-single .sidebar h3,
.service-single .sidebar h4,
.page-detail .sidebar h3,
.page-detail .sidebar h4,
.service-detail .row > [class*="col-md-3"] h3,
.service-detail .row > [class*="col-md-4"] h3,
.service-single .row > [class*="col-md-3"] h3,
.service-single .row > [class*="col-md-4"] h3,
.page-detail .row > [class*="col-md-3"] h3,
.page-detail .row > [class*="col-md-4"] h3 {
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;

    border-bottom: 2px solid var(--inner-gold) !important;

    color: var(--inner-navy) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Common sidebar list */
.service-detail .sidebar ul,
.service-single .sidebar ul,
.page-detail .sidebar ul,
.service-detail .row > [class*="col-md-3"] ul,
.service-detail .row > [class*="col-md-4"] ul,
.service-single .row > [class*="col-md-3"] ul,
.service-single .row > [class*="col-md-4"] ul,
.page-detail .row > [class*="col-md-3"] ul,
.page-detail .row > [class*="col-md-4"] ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    background: #fff !important;
    border: 1px solid var(--inner-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(17,27,51,.06) !important;
    overflow: hidden !important;
}

.service-detail .sidebar li,
.service-single .sidebar li,
.page-detail .sidebar li,
.service-detail .row > [class*="col-md-3"] li,
.service-detail .row > [class*="col-md-4"] li,
.service-single .row > [class*="col-md-3"] li,
.service-single .row > [class*="col-md-4"] li,
.page-detail .row > [class*="col-md-3"] li,
.page-detail .row > [class*="col-md-4"] li {
    margin: 0 !important;
    border-bottom: 1px solid var(--inner-border) !important;
}

.service-detail .sidebar li:last-child,
.service-single .sidebar li:last-child,
.page-detail .sidebar li:last-child,
.service-detail .row > [class*="col-md-3"] li:last-child,
.service-detail .row > [class*="col-md-4"] li:last-child,
.service-single .row > [class*="col-md-3"] li:last-child,
.service-single .row > [class*="col-md-4"] li:last-child,
.page-detail .row > [class*="col-md-3"] li:last-child,
.page-detail .row > [class*="col-md-4"] li:last-child {
    border-bottom: 0 !important;
}

.service-detail .sidebar li a,
.service-single .sidebar li a,
.page-detail .sidebar li a,
.service-detail .row > [class*="col-md-3"] li a,
.service-detail .row > [class*="col-md-4"] li a,
.service-single .row > [class*="col-md-3"] li a,
.service-single .row > [class*="col-md-4"] li a,
.page-detail .row > [class*="col-md-3"] li a,
.page-detail .row > [class*="col-md-4"] li a {
    position: relative !important;

    display: block !important;
    padding: 13px 42px 13px 16px !important;

    background: #fff !important;
    color: var(--inner-text) !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;

    transition:
        background-color .2s ease,
        color .2s ease,
        padding-left .2s ease !important;
}

.service-detail .sidebar li a::after,
.service-single .sidebar li a::after,
.page-detail .sidebar li a::after,
.service-detail .row > [class*="col-md-3"] li a::after,
.service-detail .row > [class*="col-md-4"] li a::after,
.service-single .row > [class*="col-md-3"] li a::after,
.service-single .row > [class*="col-md-4"] li a::after,
.page-detail .row > [class*="col-md-3"] li a::after,
.page-detail .row > [class*="col-md-4"] li a::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-52%);

    color: var(--inner-gold);
    font-size: 21px;
    line-height: 1;
}

.service-detail .sidebar li a:hover,
.service-single .sidebar li a:hover,
.page-detail .sidebar li a:hover,
.service-detail .row > [class*="col-md-3"] li a:hover,
.service-detail .row > [class*="col-md-4"] li a:hover,
.service-single .row > [class*="col-md-3"] li a:hover,
.service-single .row > [class*="col-md-4"] li a:hover,
.page-detail .row > [class*="col-md-3"] li a:hover,
.page-detail .row > [class*="col-md-4"] li a:hover {
    padding-left: 20px !important;
    background: var(--inner-gold-soft) !important;
    color: var(--inner-navy) !important;
}


/* ============================================================
   8. FORMS ON INNER PAGES
   ============================================================ */

.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="password"],
.page-content select,
.page-content textarea,
.inner-page-content input[type="text"],
.inner-page-content input[type="email"],
.inner-page-content input[type="tel"],
.inner-page-content input[type="password"],
.inner-page-content select,
.inner-page-content textarea,
.contact-v1 input,
.contact-v1 select,
.contact-v1 textarea {
    width: 100% !important;
    min-height: 46px;

    padding: 11px 13px !important;

    border: 1px solid #D8D2C6 !important;
    border-radius: 8px !important;
    background: #fff !important;

    color: var(--inner-text) !important;
    font-size: 15px !important;

    box-shadow: none !important;
}

.page-content textarea,
.inner-page-content textarea,
.contact-v1 textarea {
    min-height: 130px;
    resize: vertical;
}

.page-content input:focus,
.page-content select:focus,
.page-content textarea:focus,
.inner-page-content input:focus,
.inner-page-content select:focus,
.inner-page-content textarea:focus,
.contact-v1 input:focus,
.contact-v1 select:focus,
.contact-v1 textarea:focus {
    outline: none !important;
    border-color: var(--inner-gold) !important;
    box-shadow: 0 0 0 3px rgba(197,151,58,.13) !important;
}


/* ============================================================
   9. TABLET
   ============================================================ */

@media (max-width: 991px) {

    .page-title,
    .page-banner,
    .inner-banner,
    .breadcrumb-area,
    .page-header-area {
        min-height: 130px !important;
        background-position: center 42% !important;
    }

    .page-title h1,
    .page-title h2,
    .page-banner h1,
    .page-banner h2,
    .inner-banner h1,
    .inner-banner h2,
    .breadcrumb-area h1,
    .breadcrumb-area h2,
    .page-header-area h1,
    .page-header-area h2 {
        font-size: 34px !important;
    }

    .service-detail,
    .service-single,
    .page-detail,
    .page-content {
        padding-top: 36px !important;
        padding-bottom: 48px !important;
    }

    .service-detail .row > [class*="col-md-8"],
    .service-detail .row > [class*="col-md-9"],
    .service-single .row > [class*="col-md-8"],
    .service-single .row > [class*="col-md-9"],
    .page-detail .row > [class*="col-md-8"],
    .page-detail .row > [class*="col-md-9"] {
        padding: 28px 28px 34px !important;
    }
}


/* ============================================================
   10. MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .page-title,
    .page-banner,
    .inner-banner,
    .breadcrumb-area,
    .page-header-area {
        min-height: 108px !important;
        padding: 22px 0 !important;
        background-position: center center !important;
    }

    .page-title::before,
    .page-banner::before,
    .inner-banner::before,
    .breadcrumb-area::before,
    .page-header-area::before {
        background:
            linear-gradient(
                90deg,
                rgba(17,27,51,.90) 0%,
                rgba(17,27,51,.72) 100%
            ) !important;
    }

    .page-title h1,
    .page-title h2,
    .page-banner h1,
    .page-banner h2,
    .inner-banner h1,
    .inner-banner h2,
    .breadcrumb-area h1,
    .breadcrumb-area h2,
    .page-header-area h1,
    .page-header-area h2 {
        font-size: 28px !important;
        line-height: 1.18 !important;
    }

    .service-detail,
    .service-single,
    .page-detail,
    .page-content {
        padding-top: 24px !important;
        padding-bottom: 36px !important;
    }

    .service-detail .container,
    .service-single .container,
    .page-detail .container,
    .page-content .container {
        width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .service-detail .row > [class*="col-md-8"],
    .service-detail .row > [class*="col-md-9"],
    .service-single .row > [class*="col-md-8"],
    .service-single .row > [class*="col-md-9"],
    .page-detail .row > [class*="col-md-8"],
    .page-detail .row > [class*="col-md-9"] {
        width: 100% !important;
        margin-bottom: 24px !important;
        padding: 20px 18px 24px !important;

        border-radius: 11px !important;
    }

    .service-detail .row > [class*="col-md-3"],
    .service-detail .row > [class*="col-md-4"],
    .service-single .row > [class*="col-md-3"],
    .service-single .row > [class*="col-md-4"],
    .page-detail .row > [class*="col-md-3"],
    .page-detail .row > [class*="col-md-4"] {
        width: 100% !important;
        margin-top: 8px !important;
    }

    .service-detail p,
    .service-single p,
    .page-detail p,
    .page-content p,
    .inner-page-content p {
        font-size: 15px !important;
        line-height: 1.72 !important;
    }

    .service-detail h2,
    .service-single h2,
    .page-detail h2,
    .page-content h2,
    .inner-page-content h2 {
        margin-top: 26px !important;
        font-size: 24px !important;
    }

    .service-detail h3,
    .service-single h3,
    .page-detail h3,
    .page-content h3,
    .inner-page-content h3 {
        margin-top: 22px !important;
        font-size: 20px !important;
    }

    .service-detail .content img,
    .service-detail .detail img,
    .service-detail .main-content img,
    .service-single .content img,
    .service-single .detail img,
    .service-single .main-content img,
    .page-detail .content img,
    .page-detail .detail img,
    .page-content .content img,
    .inner-page-content img,
    .service-detail .row > [class*="col-md-8"] img,
    .service-detail .row > [class*="col-md-9"] img,
    .service-single .row > [class*="col-md-8"] img,
    .service-single .row > [class*="col-md-9"] img,
    .page-detail .row > [class*="col-md-8"] img,
    .page-detail .row > [class*="col-md-9"] img {
        margin-bottom: 22px !important;
        border-radius: 8px !important;
    }

    /* Horizontal scroll for wide CMS tables rather than breaking layout */
    .service-detail table,
    .service-single table,
    .page-detail table,
    .page-content table,
    .inner-page-content table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}


/* ============================================================
   11. VERY SMALL PHONES
   ============================================================ */

@media (max-width: 420px) {

    .page-title,
    .page-banner,
    .inner-banner,
    .breadcrumb-area,
    .page-header-area {
        min-height: 96px !important;
    }

    .page-title h1,
    .page-title h2,
    .page-banner h1,
    .page-banner h2,
    .inner-banner h1,
    .inner-banner h2,
    .breadcrumb-area h1,
    .breadcrumb-area h2,
    .page-header-area h1,
    .page-header-area h2 {
        font-size: 25px !important;
    }

    .service-detail .row > [class*="col-md-8"],
    .service-detail .row > [class*="col-md-9"],
    .service-single .row > [class*="col-md-8"],
    .service-single .row > [class*="col-md-9"],
    .page-detail .row > [class*="col-md-8"],
    .page-detail .row > [class*="col-md-9"] {
        padding: 18px 15px 22px !important;
    }
}


/* ============================================================
   12. ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .service-detail a,
    .service-single a,
    .page-detail a,
    .page-content a,
    .inner-page-content a,
    .service-detail .sidebar li a,
    .service-single .sidebar li a,
    .page-detail .sidebar li a {
        transition: none !important;
    }
}