/*
 * SAI Theme Overrides
 * Spacing reductions + counter wrap fix only. No colour changes.
 * Load AFTER main.css so these values win.
 */

/* ── Hero indexing badge pills ───────────────────────────────────────────── */
.sai-hero-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tj-color-heading-primary);
    padding: 7px 0;
    border-bottom: 1px solid var(--tj-color-border-1);
}
.sai-hero-pill:last-child { border-bottom: none; padding-bottom: 0; }
.sai-hero-pill i          { color: var(--tj-color-theme-primary); font-size: 12px; }

/* ── Journal meta badges — e.g. journal page header chip row ─────────────── */
.sai-journal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.sai-journal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--tj-color-heading-primary);
    background: var(--tj-color-theme-bg);
    border: 1px solid var(--tj-color-border-5);
    border-radius: 30px;
}
.sai-journal-badge i { color: var(--tj-color-theme-primary); font-size: 11px; }

/* ── Header logo — larger than template default (136px) ─────────────────── */
.site_logo .logo { max-width: 200px; }

/* ── Conferences dropdown ────────────────────────────────────────────────── */
.conf-dropdown { width: 300px !important; }           /* wider than default 220px */
.conf-dropdown li a span { display: block; }          /* name on its own line     */
.conf-dropdown li a small {
    display: block;
    font-size: 12px;
    color: var(--tj-color-text-body-3);
    margin-top: 1px;
}

/* ── Banner — push hero content below the fixed header bar ──────────────── */
.tj-banner-section {
    padding-top: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
    .tj-banner-section {
        padding-top: 80px;
    }
}

/* ── Back-to-top — hide entirely ────────────────────────────────────────── */
#tj-back-to-top { display: none !important; }

/* ── Colour palette — blue primary + warm red accent ────────────────────── */
:root {
    --tj-color-theme-primary: #1A56DB;
    --tj-color-theme-bg:      #dce6fb;   /* blue wash        */
    --tj-color-theme-bg-2:    #c5d8f9;   /* blue tint        */
    --tj-color-border-5:      rgba(26, 86, 219, 0.15);   /* blue glow border */
    --tj-color-accent:        #D63A1A;
}

/* ── Accent — CTA buttons ────────────────────────────────────────────────── */
/* Apply to filled primary buttons only; leave .btn-dark and .transparent-btn alone */
.tj-primary-btn:not(.btn-dark):not(.transparent-btn) {
    background-color: var(--tj-color-accent) !important;
}

/* ── Accent — hero heading highlight word ────────────────────────────────── */
.banner-title span {
    color: var(--tj-color-accent);
}

/* ── Accent — section subtitle icons ────────────────────────────────────── */
.sub-title i {
    color: var(--tj-color-accent);
}

/* ── Font sizes — scaled down from template defaults ───────────────────── */
:root {
    --tj-fs-h1:   32px;   /* was 74px */
    --tj-fs-h2:   28px;   /* was 48px */
    --tj-fs-h3:   26px;   /* was 32px */
    --tj-fs-h4:   20px;   /* was 24px */
    --tj-fs-h5:   17px;   /* was 20px */
    --tj-fs-h6:   15px;   /* was 18px */
    --tj-fs-body: 15px;   /* was 16px */
    --tj-fs-p:    15px;
}

/* ── Heading sizes — keep scaled-down values at every breakpoint ────────── */
/* main.css only sets --tj-fs-h* on the base (≥1400px) rule; the responsive
   overrides below it still use the template's original, larger sizes. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    h1 { font-size: var(--tj-fs-h1) !important; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    h1 { font-size: var(--tj-fs-h1) !important; }
    h2 { font-size: var(--tj-fs-h2) !important; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    h1 { font-size: var(--tj-fs-h1) !important; }
    h2 { font-size: var(--tj-fs-h2) !important; }
    h3 { font-size: var(--tj-fs-h3) !important; }
    h4 { font-size: var(--tj-fs-h4) !important; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    h1 { font-size: var(--tj-fs-h1) !important; }
    h2 { font-size: var(--tj-fs-h2) !important; }
    h3 { font-size: var(--tj-fs-h3) !important; }
    h4 { font-size: var(--tj-fs-h4) !important; }
}
@media (max-width: 575px) {
    h1 { font-size: var(--tj-fs-h1) !important; }
    h2 { font-size: var(--tj-fs-h2) !important; }
    h3 { font-size: var(--tj-fs-h3) !important; }
    h4 { font-size: var(--tj-fs-h4) !important; }
}

/* ── Odometer counter — prevent number wrapping (e.g. "15,000") ─────────── */
.countup-item .inline-content {
    white-space: nowrap;
}

/* ── Section spacing — reduced from template defaults ───────────────────── */
.section-gap {
    padding-top:    40px !important;   /* was 120px */
    padding-bottom: 40px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-gap {
        padding-top:    35px !important;
        padding-bottom: 35px !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
    .section-gap {
        padding-top:    28px !important;
        padding-bottom: 28px !important;
    }
}

/* ── Top-only section gap (section sits directly under one with its own
   bottom padding already — avoid doubling the vertical gap) ────────────── */
.section-gap-top { padding-top: 40px !important; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-gap-top { padding-top: 35px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
    .section-gap-top { padding-top: 28px !important; }
}

/* ── Footer — compact variant for pages without a CTA strip ─────────────── */
.footer-compact { padding-top: 8px !important; }
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
    .footer-compact { padding-top: 6px !important; }
}

/* .footer-main-area carries its own 100px/90px top/bottom padding
   (main.css:2526-2534), independent of the outer <footer>'s padding-top
   that footer-compact overrides above — without this, the outer override
   barely moves the visible gap since the inner 100px still dominates. */
.footer-compact .footer-main-area { padding-top: 40px !important; }
@media only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
    .footer-compact .footer-main-area { padding-top: 30px !important; }
}

/* ── First-section clearance (compensates for absolute-positioned header) ── */
/* Must come after .section-gap so it wins when both classes are present      */
.sai-page-start { padding-top: 120px !important; }
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
    .sai-page-start { padding-top: 80px !important; }
}

/* ── Keynote speaker cards ───────────────────────────────────────────────── */
.keynote-card { display: block; }
.keynote-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
}
.keynote-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.keynote-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease;
}
.keynote-play i {
    font-size: 40px;
    color: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    transition: transform 0.3s ease;
}
.keynote-card:hover .keynote-thumb img  { transform: scale(1.05); }
.keynote-card:hover .keynote-play       { background: rgba(0, 0, 0, 0.55); }
.keynote-card:hover .keynote-play i     { transform: scale(1.15); }
.keynote-info {
    padding: 12px 4px 0;
}
.keynote-info h6 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--tj-color-heading-primary);
}
.keynote-info span {
    font-size: 13px;
    color: var(--tj-color-text-body-3);
}
.keynote-swiper { padding-bottom: 40px; }
.keynote-swiper-pagination { bottom: 0; }


/* ── Global Reach section ────────────────────────────────────────────────── */

/* Contain the map within its column.
   Template defaults: width:1167px, inset-inline-start:-115px (overflows).
   We reset both so it fits inside col-lg-6. */
.sai-reach-section .global-map {
    width:                100%    !important;
    inset-inline-start:   0       !important;
    padding:              20px 0;
}
.sai-reach-section .global-map-img img {
    opacity: 0.65 !important;
}

/* Location indicators — use inset-inline-start (logical) to match template specificity.
   Repositioned for SAI's key locations. */
.sai-reach-section .location-indicator.loc-1 {
    top:                33% !important;
    inset-inline-start: 47% !important; /* London, UK       */
}
.sai-reach-section .location-indicator.loc-2 {
    top:                31% !important;
    inset-inline-start: 49% !important; /* Amsterdam        */
}
.sai-reach-section .location-indicator.loc-3 {
    top:                35% !important;
    inset-inline-start: 15% !important; /* San Francisco    */
}
.sai-reach-section .location-indicator.loc-4 {
    top:                34% !important;
    inset-inline-start: 82% !important; /* Japan            */
}
.sai-reach-section .location-indicator.loc-5 {
    top:                32% !important;
    inset-inline-start: 76% !important; /* China            */
}
.sai-reach-section .location-indicator.loc-6 {
    top:                51% !important;
    inset-inline-start: 76% !important; /* Singapore        */
}
.sai-reach-section .location-indicator.loc-7 {
    top:                40% !important;
    inset-inline-start: 59% !important; /* Dubai            */
}

/* Stat number font size — main.css default is 74px, too large for half-width boxes */
.sai-stat-box .inline-content                { font-size: 46px !important; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .sai-stat-box .inline-content            { font-size: 40px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px) {
    .sai-stat-box .inline-content            { font-size: 36px !important; }
}
@media (max-width: 575px) {
    .sai-stat-box .inline-content            { font-size: 32px !important; }
}

/* Individual stat boxes — styled for the section background */
.sai-stat-box {
    border:        1px solid var(--tj-color-border-1, rgba(0,0,0,0.1));
    border-radius: 8px;
    padding:       18px 16px;
    text-align:    center;
}
.sai-stat-box .inline-content {
    display:         flex;
    align-items:     baseline;
    justify-content: center;
    gap:             2px;
    white-space:     nowrap;
}

/* main.css sets white on all these because the original strip had a dark bg.
   Override the whole chain so numbers show in the normal heading colour. */
.sai-reach-section .inline-content,
.sai-reach-section .inline-content .odometer,
.sai-reach-section .inline-content .odometer .odometer-digit,
.sai-reach-section .inline-content .odometer span,
.sai-reach-section .count-plus {
    color: var(--tj-color-heading-primary) !important;
}
.sai-reach-section .count-text {
    color: var(--tj-color-text-body-3, #666) !important;
}


/* ── About page — gap between intro heading and paragraph ───────────────── */
/* Template's .sec-heading .sec-title has margin-bottom: 0 (relies on the
   whole .sec-heading block's own margin-bottom for spacing after it) — add
   space here since the paragraph sits directly under the title. */
.about-content-area .sec-heading .sec-title {
    margin-bottom: 18px;
}

/* ── About page — SAI at a Glance box ────────────────────────────────────── */
/* No photo behind this box (about-img removed) — box-area's template default
   is `position: absolute; bottom: 0`, which needs a sized image to anchor
   against. Without it the box collapses to the top of the column and
   overlaps the sticky header. Take it out of absolute positioning so it
   flows normally as a standalone card. */
.about-img-area.style-2 .box-area.style-2 {
    position: static;
    max-width: 100%;
    padding: 0;
}
.about-img-area.style-2 .box-area.style-2 .progress-box {
    background-color: rgba(15, 23, 42, 0.82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 18px 22px 20px !important;
}

.sai-glance-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sai-glance-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sai-glance-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sai-glance-value {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    min-width: 58px;
}
.sai-glance-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.3;
}

/* ── Paragraph spacing — tighter than browser default across all content ─── */
.blog-text p,
.post-details-wrapper p,
.tj-sidebar-widget p,
.footer-text p,
.offcanvas-text p,
section p.desc {
    margin-bottom: 0.55rem;
}

/* ── ViewIssue — article cards ──────────────────────────────────────────── */
.sai-paper-list {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.sai-paper-item {
    display:       flex;
    gap:           18px;
    padding:       24px 0;
    border-bottom: 1px solid var(--tj-color-border-1, rgba(0,0,0,0.08));
}
.sai-paper-item:last-child { border-bottom: none; }

.sai-paper-number {
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--tj-color-theme-bg);
    border:          1px solid var(--tj-color-border-5, rgba(26,86,219,0.15));
    border-radius:   6px;
    font-size:       13px;
    font-weight:     700;
    color:           var(--tj-color-theme-primary);
    line-height:     1;
    margin-top:      3px;
}

.sai-paper-body {
    flex: 1;
    min-width: 0;
}

.sai-paper-title {
    font-size:   17px;
    line-height: 1.4;
    margin-bottom: 6px;
}
.sai-paper-title a {
    color:       var(--tj-color-heading-primary);
    text-decoration: none;
    transition:  color 0.2s ease;
}
.sai-paper-title a:hover { color: var(--tj-color-theme-primary); }

.sai-paper-authors {
    font-size:     13px;
    color:         var(--tj-color-text-body-3);
    margin-bottom: 10px;
}
.sai-paper-authors i { opacity: 0.6; }

.sai-paper-abstract {
    font-size:     14px;
    line-height:   1.75;
    color:         var(--tj-color-text-body);
    margin-bottom: 12px;
    display:       -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow:      hidden;
}

.sai-paper-keywords {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           4px;
    margin-bottom: 14px;
}
.sai-paper-keywords i { color: var(--tj-color-theme-primary); opacity: 0.7; }

.sai-paper-actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.sai-paper-btn {
    display:       inline-flex;
    align-items:   center;
    font-size:     12px;
    font-weight:   600;
    padding:       5px 12px;
    border-radius: 4px;
    border:        1px solid var(--tj-color-border-1, rgba(0,0,0,0.12));
    color:         var(--tj-color-heading-primary);
    background:    transparent;
    text-decoration: none;
    transition:    border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    white-space:   nowrap;
}
.sai-paper-btn:hover {
    border-color: var(--tj-color-theme-primary);
    background:   var(--tj-color-theme-bg);
    color:        var(--tj-color-theme-primary);
    text-decoration: none;
}
.sai-paper-btn-pdf {
    border-color: rgba(214, 58, 26, 0.35);
    color:        var(--tj-color-accent);
}
.sai-paper-btn-pdf:hover {
    background:   rgba(214, 58, 26, 0.07);
    border-color: var(--tj-color-accent);
    color:        var(--tj-color-accent);
}

@media (max-width: 575px) {
    .sai-paper-item       { flex-direction: column; gap: 10px; }
    .sai-paper-number     { width: 28px; height: 28px; font-size: 12px; margin-top: 0; }
    .sai-paper-title      { font-size: 15px; }
    .sai-paper-abstract   { -webkit-line-clamp: 5; }
}

/* ── How to Cite + BibTeX blocks ────────────────────────────────────────── */
.sai-cite-box,
.sai-bibtex-box {
    position:      relative;
    border:        1px solid var(--tj-color-border-1, rgba(0,0,0,0.1));
    border-radius: 8px;
    padding:       20px 20px 16px;
    background:    var(--tj-color-theme-bg);
}

.sai-cite-text {
    font-size:   14.5px;
    line-height: 1.75;
    margin:      0 0 14px;
    color:       var(--tj-color-text-body);
}

.sai-bibtex-pre {
    font-size:    13px;
    line-height:  1.7;
    margin:       0 0 14px;
    white-space:  pre-wrap;
    word-break:   break-word;
    background:   transparent;
    border:       none;
    padding:      0;
    color:        var(--tj-color-text-body);
}
.sai-bibtex-pre code {
    font-family: 'Courier New', Courier, monospace;
    font-size:   inherit;
    color:       inherit;
    background:  none;
    padding:     0;
}

.sai-copy-btn {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    font-weight: 600;
    padding:     5px 14px;
    border-radius: 4px;
    border:      1px solid var(--tj-color-border-1, rgba(0,0,0,0.12));
    background:  #ffffff;
    color:       var(--tj-color-text-body-3);
    cursor:      pointer;
    transition:  border-color 0.2s ease, color 0.2s ease;
}
.sai-copy-btn:hover {
    border-color: var(--tj-color-theme-primary);
    color:        var(--tj-color-theme-primary);
}

/* ── Paper abstract block ────────────────────────────────────────────────── */
.sai-abstract {
    padding:       20px 24px;
    border-left:   4px solid var(--tj-color-theme-primary);
    background:    var(--tj-color-theme-bg);
    border-radius: 0 6px 6px 0;
    font-size:     15px;
    line-height:   1.8;
}

/* ── Important dates block (Call for Papers) ────────────────────────────── */
.sai-dates-box {
    padding:       22px 24px;
    border-left:   4px solid var(--tj-color-theme-primary);
    background:    var(--tj-color-theme-bg);
    border-radius: 0 8px 8px 0;
}
.sai-dates-heading {
    font-size:     14px;
    font-weight:   700;
    color:         var(--tj-color-heading-primary);
    margin-bottom: 18px;
}
.sai-dates-grid {
    display:  flex;
    flex-wrap: wrap;
    gap:      20px;
}
.sai-dates-item {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    flex:        1 1 180px;
}
.sai-dates-icon {
    flex-shrink:     0;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
    color:           var(--tj-color-theme-primary);
    background:      color-mix(in srgb, var(--tj-color-theme-primary) 12%, transparent);
}
.sai-dates-label {
    font-size:     11.5px;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color:         var(--tj-color-text-body-3);
    margin-bottom: 2px;
}
.sai-dates-value {
    font-size:   15px;
    font-weight: 600;
    color:       var(--tj-color-heading-primary);
}
@media (max-width: 575px) {
    .sai-dates-grid { gap: 16px; }
}

/* ── 404 page ────────────────────────────────────────────────────────────── */
.sai-404-code {
    font-size:   120px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 16px;
    background:  linear-gradient(135deg, var(--tj-color-theme-primary) 0%, var(--tj-color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (max-width: 575px) { .sai-404-code { font-size: 80px; } }

.sai-404-chip {
    display:       inline-block;
    font-size:     13px;
    font-weight:   500;
    padding:       6px 14px;
    border-radius: 20px;
    border:        1px solid var(--tj-color-border-1, rgba(0,0,0,0.1));
    color:         var(--tj-color-heading-primary);
    text-decoration: none;
    transition:    border-color 0.2s ease, background 0.2s ease;
}
.sai-404-chip:hover {
    border-color: var(--tj-color-theme-primary);
    background:   var(--tj-color-theme-bg);
    color:        var(--tj-color-theme-primary);
    text-decoration: none;
}

/* ── Indexing strip ──────────────────────────────────────────────────────── */
.sai-index-badge {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    padding:         14px 20px;
    border:          1px solid var(--tj-color-border-1, rgba(0,0,0,0.1));
    border-radius:   8px;
    text-align:      center;
    min-width:       140px;
    transition:      border-color 0.25s ease, box-shadow 0.25s ease;
}
.sai-index-badge:hover {
    border-color: var(--tj-color-theme-primary);
    box-shadow:   0 4px 16px rgba(0,0,0,0.08);
}
.sai-index-badge.sai-index-premium {
    border-color: var(--tj-color-theme-primary);
    background:   color-mix(in srgb, var(--tj-color-theme-primary) 5%, transparent);
}
.sai-index-name {
    display:     block;
    font-size:   15px;
    font-weight: 700;
    color:       var(--tj-color-heading-primary);
    line-height: 1.2;
}
.sai-index-org {
    display:   block;
    font-size: 12px;
    color:     var(--tj-color-text-body-3);
}

/* ── ViewPaper — article type / OA / licence strip ──────────────────────── */
.sai-article-strip {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.sai-strip-type {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--tj-color-text-body-3);
}
.sai-strip-sep {
    color: var(--tj-color-border-1, rgba(0,0,0,0.2));
    font-size: 13px;
}
.sai-strip-oa {
    font-size:   11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:       var(--tj-color-accent, #D63A1A);
}
.sai-strip-cc {
    font-size:       15px;
    color:           var(--tj-color-text-body-3);
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             2px;
    transition:      color 0.2s ease;
}
.sai-strip-cc:hover { color: var(--tj-color-theme-primary); }

/* ── ViewPaper — publication meta row ───────────────────────────────────── */
.sai-pub-meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px 14px;
    font-size: 13px;
    color:     var(--tj-color-text-body-3);
    margin-bottom: 6px;
}
.sai-pub-meta i { opacity: 0.7; }
.sai-pub-sep {
    color:     var(--tj-color-border-1, rgba(0,0,0,0.2));
    font-size: 13px;
    align-self: center;
}
@media (max-width: 575px) {
    .sai-pub-sep { display: none; }
    .sai-pub-meta { flex-direction: column; gap: 4px; }
}

/* ── Home hero heading — bigger than the sitewide scaled-down h1 ─────────── */
.banner-content .banner-title { font-size: 48px !important; }
@media only screen and (min-width: 992px) and (max-width: 1399px) {
    .banner-content .banner-title { font-size: 44px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px) {
    .banner-content .banner-title { font-size: 36px !important; }
}
@media (max-width: 575px) {
    .banner-content .banner-title { font-size: 30px !important; }
}

/* ── Home CTA heading — main.css default (74px) is too large ────────────── */
.cta-area .cta-content .title { font-size: 34px !important; }
@media only screen and (min-width: 768px) and (max-width: 1399px) {
    .cta-area .cta-content .title { font-size: 30px !important; }
}
@media (max-width: 767px) {
    .cta-area .cta-content .title { font-size: 26px !important; }
}

/* ── Home CTA — fixed-size side image instead of stretching to content height ── */
.cta-area { min-height: 320px; }
.cta-area .cta-img { height: 320px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cta-area { min-height: 280px; }
    .cta-area .cta-img { height: 280px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
    .cta-area .cta-img { height: 220px; }
}