/*
Theme Name: Consultio Child
Theme URI: http://demo.casethemes.net/consultio/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/portfolio/
Description: Consultio is the Perfect Consulting Finane & Business WordPress Theme.
Version: 3.2.8
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: consultio
Text Domain: consultio-child
*/

/* ===============================================================
   SECTION 1 — Homepage fun-facts specific overrides
   =============================================================== */
.elementor-9 .elementor-element.elementor-element-ac53464 > .elementor-container {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
}
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-4dec026,
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-7edb043 { width: 100% !important; }
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-4dec026 > .elementor-element-populated {
    margin: 0 auto !important;
    max-width: 840px;
    padding: 0 15px !important;
    text-align: center;
}
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-26c2792 > .elementor-widget-container { padding: 0 !important; }
.elementor-9 .elementor-element.elementor-element-ac53464 .ct-heading,
.elementor-9 .elementor-element.elementor-element-ac53464 .ct-heading .ct-item--inner,
.elementor-9 .elementor-element.elementor-element-ac53464 .ct-text-editor { text-align: center; }

.elementor-9 .elementor-element.elementor-element-ac53464 .ct-heading .item--sub-title {
    background: rgba(29, 82, 165, 0.07);
    border: 1px solid rgba(29, 82, 165, 0.18);
    border-radius: 999px;
    color: #1d52a5 !important;
    display: inline-flex;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.2;
    margin-bottom: 14px !important;
    padding: 8px 18px;
    text-transform: uppercase;
}
.elementor-9 .elementor-element.elementor-element-ac53464 .ct-heading .item--title {
    color: #143d7a;
    margin-bottom: 16px !important;
}
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-3d6d94a { margin: 0 auto 38px; max-width: 760px; }
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-3138af2 { width: 100%; }
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-3138af2 > .elementor-container {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1200px;
}
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-3714fb9,
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-ad0dbe4,
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-87e8941,
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-ceb458b { width: auto !important; }
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-3138af2 .elementor-widget-wrap { justify-content: center; padding: 0 !important; }

.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-widget-ct_counter .ct-counter {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(29, 82, 165, 0.12);
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(20, 61, 122, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 190px;
    padding: 24px 18px 22px;
    text-align: center;
    width: 100%;
}
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-widget-ct_counter .ct-counter-icon { margin-bottom: 14px; }
.elementor-9 .elementor-element.elementor-element-ac53464 .elementor-widget-ct_counter .ct-counter-title { color: #143d7a; line-height: 1.35; }

@media (max-width: 991px) {
    .elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-3138af2 > .elementor-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .elementor-9 .elementor-element.elementor-element-ac53464 .elementor-widget-ct_counter .ct-counter {
        min-height: 160px;
        padding: 18px 14px 20px;
    }
    .elementor-9 .elementor-element.elementor-element-ac53464 .ct-heading .item--title {
        font-size: 28px !important;
    }
}
@media (max-width: 560px) {
    .elementor-9 .elementor-element.elementor-element-ac53464 .elementor-element-3138af2 > .elementor-container { grid-template-columns: 1fr; }
    .elementor-9 .elementor-element.elementor-element-ac53464 .ct-heading .item--title { font-size: 26px !important; line-height: 1.16 !important; }
    .elementor-9 .elementor-element.elementor-element-ac53464 .ct-heading .item--sub-title { font-size: 10px !important; padding: 6px 14px !important; }
    .elementor-9 .elementor-element.elementor-element-ac53464 > .elementor-container { padding: 0 10px; }
}

/* ===============================================================
   SECTION 2 — PO&Co Brand Design Tokens
   =============================================================== */
:root {
    --poc-primary: #143d7a;
    --poc-accent: #1d52a5;
    --poc-gradient-start: #3b82f6;
    --poc-gradient-end: #0c2340;
    --poc-muted: #64748b;
    --poc-badge-bg: rgba(29, 82, 165, 0.06);
    --poc-heading: #143d7a;
    --poc-body: #2d3748;
}

/* ===============================================================
   SECTION 3 — Typography: H1-H6 hierarchy
   =============================================================== */
body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    color: var(--poc-body);
    -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: clamp(2.4rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
h2, .h2 { font-size: clamp(2rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
h3, .h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 700; line-height: 1.2; }
h4, .h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.4; }
h5, .h5 { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; line-height: 1.45; }
h6, .h6 { font-size: 0.9rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.05em; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
    color: var(--poc-heading);
}

/* ===============================================================
   SECTION 4 — Section heading sizing + gradient text
   =============================================================== */
/* section heading sizing */
.ct-heading .item--title {
    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* gradient flash animation keyframes */
@keyframes pocGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* gradient text on ALL heading titles */
.ct-heading .item--title span.sp-main {
    background-image: linear-gradient(135deg, var(--poc-gradient-start) 0%, var(--poc-accent) 50%, var(--poc-gradient-end) 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block;
    animation: pocGradientShift 4s ease infinite;
}

/* ===============================================================
   SECTION 5 — Pill / Badge style
   =============================================================== */

/* tighter description line height */
.ct-fancy-box .item--content,
.ct-service-grid .item--content,
.ct-text-editor,
.item-desc,
.ct-heading + .ct-text-editor,
.elementor-widget-text-editor p {
    line-height: 1.5 !important;
}
.poc-badge,
.ct-heading .item--sub-title {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--poc-badge-bg) !important;
    border-radius: 999px !important;
    padding: 7px 20px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    color: var(--poc-accent) !important;
    margin-bottom: 18px !important;
    border: none !important;
}

/* pulsing dot before pill text */
.poc-badge::before,
.ct-heading .item--sub-title::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--poc-accent) !important;
    animation: pocPulse 1.8s infinite !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
}
@keyframes pocPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: .4; }
}

/* dark section pill */
.bg-image .ct-heading .item--sub-title,
.elementor-section .elementor-background-overlay ~ * .ct-heading .item--sub-title {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.9) !important;
    border: none !important;
}
.bg-image .ct-heading .item--sub-title::before,
.elementor-section .elementor-background-overlay ~ * .ct-heading .item--sub-title::before {
    background: rgba(255,255,255,0.8) !important;
}

/* ===============================================================
   SECTION 6 — Icons on gradient background
   =============================================================== */
.ct-contact-info .ct-contact-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent)) !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    line-height: 44px !important;
}
.ct-contact-info .ct-contact-icon i {
    color: #fff !important;
    font-size: 18px !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    text-fill-color: #fff !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* service icon gradient text */
.ct-service-grid1 .item--holder .item--icon i,
.ct-service-grid2 .item--icon i,
.ct-service-grid4 .item--title i,
.ct-service-grid11 .item--icon i,
.ct-fancy-box-grid2 .item--icon i,
.ct-fancy-box-layout1 .item--icon i {
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent), var(--poc-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===============================================================
   SECTION 7 — Card hover flip (black on hover, white normal)
   =============================================================== */
.ct-career-grid1 .item--inner,
.ct-service-grid1 .item--holder,
.ct-service-grid1 .grid-item-inner,
.ct-service-grid2 .item--holder {
    transition: all 0.35s ease !important;
}
.ct-career-grid1 .item--inner:hover,
.ct-service-grid1 .grid-item-inner:hover .item--holder,
.ct-service-grid2 .item--holder:hover {
    background: #0c2340 !important;
    color: #fff !important;
}
.ct-career-grid1 .item--inner:hover .item--title,
.ct-service-grid1 .grid-item-inner:hover .item--holder .item--title a,
.ct-service-grid2 .item--holder:hover .item--title a {
    color: #fff !important;
}
.ct-career-grid1 .item--inner:hover .item-desc,
.ct-service-grid1 .grid-item-inner:hover .item--holder .item--content {
    color: rgba(255,255,255,0.75) !important;
}

/* ===============================================================
   SECTION 8 — History / Timeline cards
   =============================================================== */
.ct-history1 .ct-history--item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(12,12,12,0.06);
    padding: 24px 28px;
    border-left: 4px solid var(--poc-accent);
    transition: all 0.3s ease;
}
.ct-history1 .ct-history--item:hover {
    box-shadow: 0 12px 36px rgba(12,12,12,0.12);
    transform: translateY(-2px);
    border-left-color: var(--poc-gradient-start);
}
.ct-history1 .ct-history--meta h3 { color: var(--poc-accent); font-weight: 700; margin-bottom: 6px; }

/* ===============================================================
   SECTION 9 — Client logos
   =============================================================== */
.ct-client1 .ct-slick-carousel .client-image {
    padding: 20px 28px;
    filter: grayscale(0.6);
    opacity: 0.65;
    transition: all 0.35s ease;
}
.ct-client1 .ct-slick-carousel .client-image:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.03);
}

/* ===============================================================
   SECTION 10 — Footer: newsletter heading (Light Blue to White)
   =============================================================== */
.site-footer-custom .ct-heading .item--title {
    font-weight: 600 !important;
}
.site-footer-custom .ct-heading .item--title span.sp-main {
    background: linear-gradient(135deg, #60a5fa 0%, #e0f2fe 50%, #ffffff 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: pocGradientShift 3s ease infinite !important;
}

/* ===============================================================
   SECTION 11 — Dark section H1 (white to gray gradient, 600)
   =============================================================== */
.bg-image h1, .bg-image .h1,
.elementor-section .elementor-background-overlay ~ * h1,
.elementor-section .elementor-background-overlay ~ * .h1 {
    background-image: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #f1f5f9 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: pocGradientShift 3s ease infinite;
    font-weight: 600;
}

/* ===============================================================
   SECTION 12 — Buttons
   =============================================================== */
.btn-primary-corp, .btn-secondary-corp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary-corp {
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent));
    color: #fff;
    box-shadow: 0 4px 16px rgba(29,82,165,0.25);
}
.btn-primary-corp:hover {
    box-shadow: 0 8px 28px rgba(29,82,165,0.4);
    transform: translateY(-1px);
    color: #fff;
}
.btn-secondary-corp {
    background: transparent;
    color: var(--poc-accent);
    border: 2px solid var(--poc-accent);
}
.btn-secondary-corp:hover {
    background: var(--poc-accent);
    color: #fff;
}

/* ===============================================================
   SECTION 13 — Responsive
   =============================================================== */
@media (max-width: 768px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.6rem; }
    .btn-primary-corp, .btn-secondary-corp { padding: 10px 24px; font-size: 0.85rem; }
}

/* ===============================================================
   SECTION 14 — Orange/Pink Gradient Overrides → PO&Co Blue
   =============================================================== */

/* override default link red */
a { color: var(--poc-accent); }
a:hover { color: var(--poc-gradient-start); }

/* pink/yellow gradient buttons → blue gradient */
.btn.btn-round3.btn-third-color {
    background-image: linear-gradient(90deg, var(--poc-gradient-start) 0%, var(--poc-accent) 50%, var(--poc-gradient-end)) !important;
    box-shadow: 0 8px 27px rgba(29, 82, 165, 0.19) !important;
}
.btn.btn-round3.btn-third-color.icon-active .ct-button-icon {
    background-image: linear-gradient(bottom, var(--poc-gradient-start), var(--poc-accent)) !important;
}

/* solid pink buttons → blue */
.btn.btn-third,
.btn.btn-third2 {
    background-image: none !important;
    background-color: var(--poc-accent) !important;
    box-shadow: none !important;
}
.btn.btn-third:hover,
.btn.btn-third2:hover {
    background-color: var(--poc-gradient-end) !important;
    color: #fff !important;
}
.btn.btn-third.icon-active .ct-button-icon,
.btn.btn-third2.icon-active .ct-button-icon {
    color: var(--poc-accent) !important;
}

/* newsletter pink gradient → blue */
.ct-newsletter1.style7 .newsletter .tnp-button,
.ct-newsletter1.style7 .newsletter .tnp-submit {
    background-image: linear-gradient(90deg, var(--poc-gradient-start) 0%, var(--poc-accent) 50%, var(--poc-gradient-end)) !important;
    box-shadow: 0 6px 18px rgba(29, 82, 165, 0.25) !important;
}

/* video button pink → blue */
.ct-video-player .ct-video-button.style10:after {
    background-image: linear-gradient(left, var(--poc-gradient-start), var(--poc-accent)) !important;
}

/* pricing pink → blue */
.ct-pricing-layout4 .pricing-title span {
    background-image: linear-gradient(left, var(--poc-gradient-start), var(--poc-accent)) !important;
}

/* pricing button */
.ct-pricing-layout4:not(.highlight) .pricing-button .btn {
    background-color: var(--poc-accent) !important;
    border-color: var(--poc-accent) !important;
}

/* inner decor white pink → blue */
.ct-inner-white:before {
    background-image: linear-gradient(120deg, var(--poc-gradient-start), var(--poc-accent)) !important;
}

/* team social active pink → blue */
.ct-team-grid5 .item--social.active {
    background-image: linear-gradient(left, var(--poc-gradient-start), var(--poc-accent)) !important;
}

/* tabs active pink → blue */
.ct-tabs--layout1.style4 .ct-tabs-title .ct-tab-title.active {
    background-color: var(--poc-accent) !important;
}

/* fancy box pink references → blue */
.ct-fancy-box-layout28 .item--title.item--title-3 {
    background-color: var(--poc-accent) !important;
    border-left-color: var(--poc-accent) !important;
}
.ct-fancy-box-layout28 .background-number.background-number-3 {
    color: var(--poc-accent) !important;
}

/* btn-effect2 hover background */
.btn-effect2:hover,
.btn-effect2:focus {
    background: var(--poc-accent) !important;
}

/* pricing highlight */
.ct-pricing-layout4.highlight .pricing-button .btn {
    background-color: var(--poc-accent) !important;
}

/* ===============================================================
   SECTION 15 — Strategic Vision section (Shortcode page)
   =============================================================== */

/* strategic vision headings */
.ct-fancy-box-grid1 .item--title,
.ct-fancy-box-grid2 .item--title,
.ct-fancy-box-grid3 .item--title {
    color: var(--poc-heading) !important;
    font-weight: 700 !important;
}
.ct-fancy-box-grid1 .item--icon i,
.ct-fancy-box-grid2 .item--icon i,
.ct-fancy-box-grid3 .item--icon i {
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent), var(--poc-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 52px !important;
}
.ct-fancy-box-grid1:hover,
.ct-fancy-box-grid2:hover {
    border-color: var(--poc-accent) !important;
    box-shadow: 0 12px 40px rgba(29, 82, 165, 0.12) !important;
}
.ct-fancy-box-grid3 .item--inner {
    border: 1px solid rgba(29, 82, 165, 0.12) !important;
    background: #f8faff !important;
    transition: all 0.3s ease;
}
.ct-fancy-box-grid3 .item--inner:hover {
    border-color: var(--poc-accent) !important;
    box-shadow: 0 12px 40px rgba(29, 82, 165, 0.12) !important;
}

/* strategic vision description text */
.ct-fancy-box-grid1 .item--content,
.ct-fancy-box-grid2 .item--content,
.ct-fancy-box-grid3 .item--content {
    color: var(--poc-muted) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* ===============================================================
   SECTION 16 — Fancy Box layout enrichments
   =============================================================== */
.ct-fancy-box-layout1 .item--icon i,
.ct-fancy-box-layout2 .item--icon i,
.ct-fancy-box-layout4 .item--icon i,
.ct-fancy-box-layout5 .item--icon i {
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent), var(--poc-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ct-fancy-box-layout13 {
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent)) !important;
}
.ct-fancy-box-layout13 .item--icon {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.ct-fancy-box-layout16 .item--inner {
    box-shadow: 0 4px 24px rgba(29, 82, 165, 0.08) !important;
}
.ct-fancy-box-layout16 .item--icon {
    background: var(--poc-accent) !important;
}
.ct-fancy-box-layout16:hover .item--icon {
    background: #fff !important;
    color: var(--poc-accent) !important;
}
.ct-fancy-box-layout16:hover .item--icon i {
    color: var(--poc-accent) !important;
}

/* ===============================================================
   SECTION 17 — Pricing layout improvements
   =============================================================== */
.ct-pricing-layout4.highlight {
    border-color: var(--poc-accent) !important;
}
.ct-pricing-layout4 .pricing-button .btn {
    background-color: var(--poc-accent) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 36px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}
.ct-pricing-layout4 .pricing-button .btn:hover {
    background-color: var(--poc-gradient-end) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29, 82, 165, 0.25);
}

/* ===============================================================
   SECTION 18 — Newsletter & form enrichments
   =============================================================== */
.tnp-button, .tnp-submit {
    background-color: var(--poc-accent) !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}
.tnp-button:hover, .tnp-submit:hover {
    background-color: var(--poc-gradient-end) !important;
    transform: translateY(-1px);
}

/* ===============================================================
   SECTION 34 — Award link text visibility
   =============================================================== */
.ct-award-link {
.ct-accordion .ct-accordion-item .ct-ac-title-text:before,
.ct-accordion.layout2 .ct-accordion-item.active .ct-ac-title-text i {
    background: var(--poc-accent) !important;
}
.ct-accordion .ct-accordion-item.active .ct-ac-title {
    color: var(--poc-accent) !important;
}

/* ===============================================================
   SECTION 20 — Team grid enrichments
   =============================================================== */
.ct-team-grid1 .item--title a,
.ct-team-grid2 .item--title a,
.ct-team-grid5 .item--title a {
    color: var(--poc-heading) !important;
    font-weight: 700 !important;
}
.ct-team-grid1 .item--position,
.ct-team-grid2 .item--position,
.ct-team-grid5 .item--position {
    color: var(--poc-accent) !important;
    font-weight: 600 !important;
}

/* ===============================================================
   SECTION 21 — Miscellaneous: progress bars, counters, pie charts
   =============================================================== */
.ct-counter .ct-counter-number {
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent), var(--poc-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
}
.ct-piechart-layout2 .item--holder span {
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent), var(--poc-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* progress bar */
.ct-progress .ct-progress-bar {
    background: linear-gradient(90deg, var(--poc-gradient-start), var(--poc-accent)) !important;
}

/* ===============================================================
   SECTION 22 — Blog / post enrichments
   =============================================================== */
.ct-blog-grid-layout1 .entry-readmore a,
.ct-blog-carousel-layout1 .entry-readmore a,
.ct-blog-grid-layout2 .entry-readmore a {
    background: linear-gradient(135deg, var(--poc-gradient-start), var(--poc-accent), var(--poc-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
}
.ct-blog-grid-layout1 .item--title a:hover,
.ct-blog-carousel-layout1 .item--title a:hover,
.ct-blog-grid-layout2 .item--title a:hover {
    color: var(--poc-accent) !important;
}

/* ===============================================================
   SECTION 23 — Color utility class overrides
   =============================================================== */
.color-four { color: var(--poc-accent) !important; }
.text-gradient {
    background: linear-gradient(135deg, var(--poc-gradient-start) 0%, var(--poc-accent) 50%, var(--poc-gradient-end) 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.var-text-gradient {
    background: linear-gradient(135deg, var(--poc-gradient-start) 0%, var(--poc-accent) 50%, var(--poc-gradient-end) 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-color: transparent !important;
}

/* ===============================================================
   SECTION 24 — Button icon active
   =============================================================== */
.ct-icon-active .ct-button-icon {
    color: var(--poc-accent) !important;
}

/* ===============================================================
   SECTION 25 — Breadcrumb: unified inner-page background
   =============================================================== */
body:not(.home) #pagetitle.page-title {
    background-image: url('https://philips-oyedele.local/wp-content/uploads/2026/05/Our-Services-Philips-Oyedele-Co.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
}
body:not(.home) #pagetitle.page-title .page-title-overlay {
    background: rgba(12,35,64,0.55) !important;
}
@media (max-width: 768px) {
    body:not(.home) #pagetitle.page-title {
        padding: 60px 0 !important;
    }
    body:not(.home) #pagetitle.page-title h1.page-title {
        font-size: 1.6rem !important;
    }
}

/* ===============================================================
   SECTION 26 — Footer: copyright bar gradient blue bg
   =============================================================== */
footer#colophon .site-footer-custom .elementor-section:last-of-type {
    background: linear-gradient(90deg, var(--poc-gradient-start), var(--poc-accent), var(--poc-gradient-end)) !important;
}
footer#colophon .site-footer-custom .elementor-section:last-of-type,
footer#colophon .site-footer-custom .elementor-section:last-of-type * {
    color: #fff !important;
}
/* footer copyright year text */
span.ct-footer-year {
    background: linear-gradient(90deg, var(--poc-gradient-start), var(--poc-accent), var(--poc-gradient-end)) !important;
    color: #fff !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;
    display: inline-block !important;
}

/* ===============================================================
   SECTION 27 — Footer: contact icon/text alignment fix
   =============================================================== */
.ct-contact-info .ct-contact-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.ct-contact-info li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.ct-contact-info .ct-contact-content {
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

/* ===============================================================
   SECTION 28 — Blog titles: gradient blue + bolder
   =============================================================== */
.ct-blog-grid-layout1 .item--title a,
.ct-blog-carousel-layout1 .item--title a,
.ct-blog-grid-layout2 .item--title a,
.post .entry-title a,
.blog .item--title a {
    background: linear-gradient(135deg, var(--poc-gradient-start) 0%, var(--poc-accent) 50%, var(--poc-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
}

/* ===============================================================
   SECTION 29 — Dark section text overrides (white gradient)
   =============================================================== */

/* sections with dark background — title text white gradient */
.elementor-section .elementor-background-overlay ~ * .ct-heading .item--title span.sp-main {
    background-image: linear-gradient(135deg, #ffffff 0%, #e2e8f0 50%, #f8fafc 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: pocGradientShift 4s ease infinite !important;
}
.elementor-section .elementor-background-overlay ~ * .item--title {
    color: #fff !important;
}

/* dark section descriptions — white text */
.elementor-section .elementor-background-overlay ~ * .elementor-widget-text-editor,
.elementor-section .elementor-background-overlay ~ * .ct-text-editor,
.elementor-section .elementor-background-overlay ~ * p {
    color: rgba(255,255,255,0.85) !important;
}
.elementor-section .elementor-background-overlay ~ * .ct-heading .item--sub-title,
.elementor-section .elementor-background-overlay ~ * .ct-heading .item--sub-title span {
    color: rgba(255,255,255,0.9) !important;
}

/* dark section counter numbers */
.elementor-section .elementor-background-overlay ~ * .ct-counter .ct-counter-number {
    background-image: linear-gradient(135deg, #ffffff 0%, #e2e8f0 50%, #f8fafc 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.elementor-section .elementor-background-overlay ~ * .ct-counter .ct-counter-title {
    color: rgba(255,255,255,0.8) !important;
}

/* ===============================================================
   SECTION 30 — Fun facts / Counter numbers gradient
   =============================================================== */
.ct-counter .ct-counter-number {
    background-image: linear-gradient(135deg, var(--poc-gradient-start) 0%, var(--poc-accent) 50%, var(--poc-gradient-end) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900 !important;
}

/* ===============================================================
   SECTION 31 — Team member titles bolder
   =============================================================== */
/* team member titles */
.ct-team-grid1 .item--title a,
.ct-team-grid2 .item--title a,
.ct-team-grid5 .item--title a {
    font-weight: 700 !important;
}
.ct-team-grid1 .item--position,
.ct-team-grid2 .item--position,
.ct-team-grid5 .item--position {
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* ===============================================================
   SECTION 32 — Address / contact info description enrichment
   =============================================================== */
.ct-contact-info .ct-contact-content,
.elementor-widget-text-editor p {
    line-height: 1.6 !important;
    font-size: 15px !important;
}
.ct-contact-info li + li {
    margin-top: 12px !important;
}

/* ===============================================================
   SECTION 33 — Global font enforcement
   =============================================================== */
body,
.elementor-widget-container,
.elementor-text-editor,
.elementor-heading-title,
.ct-heading, .ct-text-editor, .ct-counter, .ct-piechart,
.wpcf7-form, .tnp-form, .widget,
.item--title, .item--content, .item--desc, .item--meta,
.entry-content, .entry-title {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, system-ui, sans-serif !important;
}

/* override any Elementor kit / Google Font injections */
.elementor-kit-3957 button,
.elementor-kit-3957 input,
.elementor-kit-3957 select,
.elementor-kit-3957 textarea,
.elementor-kit-3957 .elementor-button {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, system-ui, sans-serif !important;
}
/* ===============================================================
   SECTION 34 — Award link text visibility
   =============================================================== */
.ct-award-link {
    position: relative !important;
    display: inline-block !important;
    color: var(--poc-accent) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(29, 82, 165, 0.15) !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    margin: 4px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}
.ct-award-link:hover {
    background: var(--poc-accent) !important;
    color: #fff !important;
    border-color: var(--poc-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(29,82,165,0.2) !important;
}

/* ===============================================================
   SECTION 35 — Site-wide responsive improvements
   =============================================================== */
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

@media (max-width: 768px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .content-container > .row.content-row { margin-left: 0; margin-right: 0; }
}

@media (max-width: 576px) {
    .container { padding-left: 14px; padding-right: 14px; }
}

/* ===============================================================
   SECTION 36 — Content area gap removal (non-home pages)
   =============================================================== */
/* Theme sets .site-content { padding: 90px 0 } which creates white gaps
   between page-title and first section, and between last section and footer.
   Our template sections handle their own internal spacing via padding. */
body:not(.home) .site-content,
body:not(.home) .site-content > .content-inner,
body:not(.home) .content-area,
body:not(.home) .site-main {
    padding: 0 !important;
    margin: 0 !important;
}
body:not(.home) #pagetitle {
    margin-bottom: 0 !important;
}
body:not(.home) footer#colophon {
    margin-top: 0 !important;
}

/* ===============================================================
   SECTION 37 — Footer: logo sizing, contact hover, spacing fine-tune
   =============================================================== */
/* Constrain footer logo */
.site-footer-custom .logo-footer img {
    max-width: 220px !important;
    height: auto !important;
}

/* Footer description text opacity */
.site-footer-custom .ct-text-editor .elementor-clearfix {
    color: rgba(255,255,255,0.75) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

/* Footer heading sizes (Newsletter, Official info, etc.) */
.site-footer-custom .ct-heading .item--title {
    font-size: 20px !important;
}

/* Open Hours label font fix */
.site-footer-custom .elementor-widget-text-editor {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
    color: #CBCBCB !important;
    font-size: 16px !important;
}

/* Hours schedule */
.site-footer-custom .elementor-widget-text-editor p {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
}

/* Contact info link hover */
.site-footer-custom .ct-contact-info .ct-contact-link:hover {
    color: #60a5fa !important;
}

/* Copyright bar "Built by" link */
.site-footer-custom .elementor-element-12669b5a6 a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: opacity 0.2s ease;
}
.site-footer-custom .elementor-element-12669b5a6 a:hover {
    opacity: 0.85;
    color: #bfdbfe !important;
}

/* Copyright bar mobile stack */
@media (max-width: 768px) {
    footer#colophon .site-footer-custom .elementor-section:last-of-type .elementor-container {
        flex-direction: column !important;
        text-align: center !important;
    }
    footer#colophon .site-footer-custom .elementor-section:last-of-type .elementor-column {
        width: 100% !important;
    }
}

/* Footer section top padding */
.site-footer-custom .elementor-section:first-of-type {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* ===============================================================
   SECTION 38 — About Us Page
   =============================================================== */

.po-text-gradient {
    background: linear-gradient(135deg, #1d52a5, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Shared section */
.po-section {
    padding: 70px 0;
    position: relative;
}
.po-section + .po-section { border-top: none; }
.po-section-alt {
    background: #f9f8f5;
    position: relative;
}
.po-section-alt::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(29,82,165,0.03) 0%, transparent 50%),
                      radial-gradient(circle at 90% 80%, rgba(21,132,102,0.03) 0%, transparent 50%);
    pointer-events: none;
}
.po-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(29,82,165,0.15), transparent);
}
.po-section:last-of-type::after { display: none; }

.po-section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
    position: relative;
    z-index: 1;
}
.po-section-badge {
    display: inline-block;
    background: rgba(29,82,165,0.06);
    border: 1px solid rgba(29,82,165,0.15);
    color: #1d52a5;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: 6px 18px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.po-section-header h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #143d7a;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}
.po-section-header p {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* ===== Who We Are ===== */
.po-about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (max-width: 992px) { .po-about-split { grid-template-columns: 1fr; gap: 40px; } }

.po-about-text {
    position: relative;
}
.po-about-text::before {
    content: '';
    position: absolute;
    top: -40px; left: -40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(29,82,165,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.po-about-text .po-section-badge { margin-bottom: 14px; }
.po-about-text h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: #143d7a;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    line-height: 1.2;
}
.po-about-text h2::after {
    content: '';
    display: block;
    width: 50px; height: 3px;
    background: linear-gradient(90deg, #1d52a5, #60a5fa);
    border-radius: 3px;
    margin-top: 16px;
    margin-bottom: 20px;
}
.po-about-text p {
    font-size: 1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 1em;
}

.po-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.po-stat-card {
    background: #fff;
    border: 1px solid #eae7e0;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    position: relative;
    overflow: hidden;
}
.po-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1d52a5, #60a5fa);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.po-stat-card:hover::before { opacity: 1; }
.po-stat-card:hover {
    border-color: rgba(29,82,165,0.2);
    box-shadow: 0 12px 36px rgba(16,32,58,0.08);
    transform: translateY(-4px);
}
.po-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: rgba(29,82,165,0.06);
    border-radius: 14px;
    color: #1d52a5;
    margin-bottom: 14px;
    transition: all 0.35s ease;
}
.po-stat-card:hover .po-stat-icon {
    background: #1d52a5;
    color: #fff;
    transform: scale(1.05);
}
.po-stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: #143d7a;
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.po-stat-label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
}

/* ===== Mission, Vision, Values ===== */
.po-mvv-section {
    position: relative;
}
.po-mvv-section::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(29,82,165,0.06), transparent);
    pointer-events: none;
}
.po-mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) { .po-mvv-grid { grid-template-columns: 1fr; gap: 20px; } }

.po-mvv-card {
    background: #fff;
    border: 1px solid #eae7e0;
    border-radius: 20px;
    padding: 44px 28px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.po-mvv-card:hover {
    border-color: rgba(29,82,165,0.2);
    box-shadow: 0 20px 56px rgba(16,32,58,0.08);
    transform: translateY(-6px);
}
.po-mvv-card::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 250px; height: 250px;
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.22,1,0.36,1);
}
.po-mvv-card:hover::before {
    top: -120px; right: -120px;
    width: 300px; height: 300px;
}
.po-mvv-card:nth-child(1)::before { background: radial-gradient(circle, rgba(29,82,165,0.08) 0%, transparent 70%); }
.po-mvv-card:nth-child(2)::before { background: radial-gradient(circle, rgba(21,132,102,0.08) 0%, transparent 70%); }
.po-mvv-card:nth-child(3)::before { background: radial-gradient(circle, rgba(124,58,237,0.08) 0%, transparent 70%); }

.po-mvv-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 20%; right: 20%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: all 0.4s ease;
}
.po-mvv-card:hover::after { opacity: 1; }
.po-mvv-card:nth-child(1)::after { background: linear-gradient(90deg, #1d52a5, #60a5fa); }
.po-mvv-card:nth-child(2)::after { background: linear-gradient(90deg, #158466, #34d399); }
.po-mvv-card:nth-child(3)::after { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

.po-mvv-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 18px;
    margin-bottom: 24px;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}
.po-mvv-card:nth-child(1) .po-mvv-icon { background: rgba(29,82,165,0.08); color: #1d52a5; }
.po-mvv-card:nth-child(2) .po-mvv-icon { background: rgba(21,132,102,0.08); color: #158466; }
.po-mvv-card:nth-child(3) .po-mvv-icon { background: rgba(124,58,237,0.08); color: #7c3aed; }

.po-mvv-card:nth-child(1):hover .po-mvv-icon { background: #1d52a5; color: #fff; box-shadow: 0 8px 24px rgba(29,82,165,0.25); }
.po-mvv-card:nth-child(2):hover .po-mvv-icon { background: #158466; color: #fff; box-shadow: 0 8px 24px rgba(21,132,102,0.25); }
.po-mvv-card:nth-child(3):hover .po-mvv-icon { background: #7c3aed; color: #fff; box-shadow: 0 8px 24px rgba(124,58,237,0.25); }

.po-mvv-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #143d7a;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.po-mvv-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 1;
}

.po-values-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 800px;
    margin: 36px auto 0;
    position: relative;
    z-index: 1;
}
.po-value-chip {
    display: inline-block;
    background: #fff;
    border: 1px solid #eae7e0;
    border-radius: 50px;
    padding: 8px 22px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.3s ease;
}
.po-value-chip:hover {
    background: #1d52a5;
    border-color: #1d52a5;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(29,82,165,0.2);
}

/* ===== Why Choose Us ===== */
.po-license-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
@media (max-width: 576px) { .po-license-grid { grid-template-columns: 1fr; } }

.po-license-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid #eae7e0;
    border-radius: 16px;
    padding: 28px;
    align-items: flex-start;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    position: relative;
}
.po-license-card:hover {
    border-color: rgba(29,82,165,0.2);
    box-shadow: 0 12px 36px rgba(16,32,58,0.06);
    transform: translateY(-3px);
}
.po-license-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(180deg, #1d52a5, #60a5fa);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.po-license-card:hover::before { opacity: 1; }

.po-license-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    background: rgba(29,82,165,0.06);
    border-radius: 14px;
    color: #1d52a5;
    transition: all 0.35s ease;
}
.po-license-card:hover .po-license-icon {
    background: #1d52a5;
    color: #fff;
    transform: rotate(-4deg) scale(1.05);
}

.po-license-body h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #143d7a;
    margin: 0 0 6px;
}
.po-license-body p {
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
.po-license-tag {
    display: inline-block;
    margin-top: 10px;
    background: rgba(21,132,102,0.06);
    border: 1px solid rgba(21,132,102,0.15);
    border-radius: 50px;
    padding: 3px 14px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #158466;
    transition: all 0.25s;
}
.po-license-card:hover .po-license-tag {
    background: rgba(21,132,102,0.1);
    border-color: rgba(21,132,102,0.25);
}

/* Outro quote */
.po-about-outro {
    text-align: center;
    max-width: 740px;
    margin: 48px auto 0;
    padding: 36px 40px;
    background: linear-gradient(135deg, rgba(29,82,165,0.03) 0%, rgba(29,82,165,0.06) 100%);
    border-radius: 20px;
    border: 1px solid rgba(29,82,165,0.08);
    position: relative;
    z-index: 1;
}
.po-about-outro::before {
    content: '"';
    position: absolute;
    top: 12px; left: 20px;
    font-size: 4rem;
    line-height: 1;
    color: rgba(29,82,165,0.1);
    font-weight: 800;
    font-family: Georgia, serif;
}
.po-about-outro p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.8;
    margin: 0;
    font-style: italic;
}
.po-about-outro .po-outro-attribution {
    margin-top: 18px;
    font-size: 0.85rem;
    font-style: normal;
    color: #1d52a5;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.po-about-outro .po-outro-attribution::before {
    content: '';
    display: inline-block;
    width: 24px; height: 1.5px;
    background: #1d52a5;
    vertical-align: middle;
    margin-right: 10px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .po-section { padding: 50px 0; }
    .po-section-header { margin-bottom: 36px; }
    .po-section-header h2 { font-size: 1.5rem; }
    .po-mvv-card { padding: 32px 22px 28px; }
    .po-about-outro { padding: 28px 22px; margin-left: 10px; margin-right: 10px; }
    .po-about-outro::before { font-size: 3rem; top: 8px; left: 14px; }
}

/* ===============================================================
   SECTION 39 — Blog Gallery & Button
   =============================================================== */
.po-blog-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 28px 0 32px;
}
.po-blog-gallery a {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.po-blog-gallery a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.po-blog-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.po-blog-btn {
    display: inline-block;
    background: linear-gradient(135deg, #1d52a5, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 16px 0 8px;
}
.po-blog-btn:hover {
    background: linear-gradient(135deg, #143d7a, #1d52a5);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29,82,165,0.25);
}
@media (max-width: 768px) {
    .po-blog-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
    .po-blog-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .po-blog-btn { padding: 12px 22px; font-size: 0.85rem; }
}

/* ===============================================================
   SECTION 40 — Hotspot buttons (transparent clickable circles)
   =============================================================== */
.po-hs-btn {
    position: absolute;
    width: 10%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.po-hs-btn:hover {
    background: rgba(29,82,165,0.25);
}
.po-hs-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: transparent;
    text-align: center;
    line-height: 1.1;
    padding: 0 2px;
    transition: color 0.2s ease;
    pointer-events: none;
    user-select: none;
}
.po-hs-btn:hover .po-hs-label {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Footer Quick Links hover */
.po-footer-links a:hover { color: #fff !important; }