/* ═══════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; } body { font-family: 'IBM Plex Serif', serif; font-size: 14px; color: #222; background: #fff !important; } a { text-decoration: none; color: inherit; } a:hover { color: #a60c0c; } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #000; margin: 0 0 7px; font-family: 'IBM Plex Serif', serif; } .page-wrap { max-width: 100%; width: 100%; margin: 0 auto;} 

@media (min-width: 1200px) {
  .container {
    width: 88%;
  }
}
/* ═══════════════════════════════════════════════════
   SEC 1 — FEATURED + CXO LIST
═══════════════════════════════════════════════════ */
.sec1-feature-wrap { position: relative; } .sec1-feature img { width: 100%; object-fit: cover; object-position: top center; display: block; } .feat-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 0 14px; } .feat-cat { display: inline-block; background: #a60c0c; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; margin-bottom: 7px; } .feat-title { font-size: 24px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .feat-title a:hover { color: #ffcdd2; } .feat-by { font-size: 18px; line-height: 1.3; color: #333; text-transform: capitalize; } .sec1-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e8e8e8; align-items: flex-start; } .sec1-item:first-child { padding-top: 0; } .sec1-item:last-child { border-bottom: none; }

/* CXO slider */
.cxo-slider { position: relative; } .cxo-demo-list { position: relative; height: 490px; overflow: hidden; } .cxo-demo-list .block-five > li { padding: 14px 0; border-bottom: 1px solid #eaeaea; } .cxo-demo-list .block-five > li:first-child { padding-top: 0; } .cxo-demo-list .block-five > li:last-child { border-bottom: none; } .cxo-demo-list .block-five > li img { width: 100%; object-fit: cover; object-position: top center; display: block; } .cxo-demo-list .cxo-company-link { display: block; font-size: 18px; font-weight: 700; color: #000; line-height: 1.3; margin-bottom: 4px; } .cxo-demo-list .cxo-company-link:hover { color: #a60c0c; } .cxo-demo-list .buss_mn1 { font-size: 15px; font-weight: 600; color: #222; line-height: 1.35; margin: 0 0 4px; } .cxo-demo-list .buss_mn1:hover { color: #a60c0c; } .cxo-demo-list .buss_mn { font-size: 13px; color: #666; font-style: italic; line-height: 1.35; margin: 0; } .cxo-demo-list .block-five > li > .row { display: flex; align-items: flex-start; margin: 0; } .cxo-demo-list .block-five > li > .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } .cxo-demo-list .block-five > li > .row > [class*="col-"]:first-child { padding-left: 0; } .cxo-demo-list .block-five > li > .row > [class*="col-"]:last-child { padding-right: 0; }

ul li { list-style: none;}

/* ═══════════════════════════════════════════════════
   SHARED: block-five lists + demo5/demof
═══════════════════════════════════════════════════ */
.block-five { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; } .block-five > li { margin: 0; display: list-item; } .demof { margin: 0; } .demof ul { padding: 0; list-style: none; } .demof a { font-family: 'IBM Plex Serif', serif; font-size: 16px; font-weight: 500; color: #000; } .demof p { margin: 0; font-size: 14px; padding-bottom: 0; } .demo5 { margin-top: 0; border-radius: 10px; } .demo5 ul { padding: 0; } .cxo-company-link { font-size: 18px; } .cxo-col-info { padding-left: 0; }

/* ═══════════════════════════════════════════════════
   SEC 2 — CATEGORY BLOCKS + SIDEBAR
═══════════════════════════════════════════════════ */
.sec2 { padding: 20px 0; } .sec2-inner-wrap { padding: 0; } .sec2-flex-row { display: flex !important; align-items: flex-start; flex-wrap: nowrap; } .sec2-flex-row > .col-md-8 { float: none !important; width: 66.666% !important; min-width: 0; padding-right: 20px; align-self: flex-start; } .sec2-flex-row > .col-md-4 { float: none !important; width: 33.333% !important; min-width: 0; align-self: flex-start; overflow: visible !important; } .sec2-main { min-width: 0; }

/* Cat-blocks */
.cat-blocks { margin-bottom: 0; background: #fff; display: block; overflow: hidden; } .cat-blocks::after { content: ''; display: table; clear: both; } .cat-blocks .row { margin-bottom: 0; } .cat-blocks .row::before, .cat-blocks .row::after { content: ''; display: table; } .cat-blocks .row::after { clear: both; } .cat-blocks .row + .row { margin-top: 12px; } .space40 { height: 1px; background: #e0e0e0; margin: 10px 0; clear: both; } .cat-blocks .cattitle { background: url(https://www.cioapplications.com/images/sep.png) repeat-x scroll center center; margin: 5px 0 10px; position: relative; } .cat-blocks .cattitle span { background: #4f5760; margin: 0; font-size: 16px; padding: 0 24px; display: table; font-weight: 700; height: 40px; line-height: 40px; text-align: center; text-transform: uppercase; font-family: 'IBM Plex Serif', serif; } .cattitle a { text-decoration: none; } h2.catt_one { color: #fff !important; font-size: 16px; font-weight: 700; text-transform: uppercase; margin: 0; padding: 0; line-height: 40px; display: inline; }

/* Images & typography inside cat-blocks */
.cb-big1 { margin-bottom: 8px; overflow: hidden; line-height: 0; } .cb-big1 img { width: 100%; display: block; object-fit: cover; object-position: top center; } .cb-big1.featured-main-img { margin-bottom: 5px; } .cb-big1.box3-img img { object-fit: cover; } .cb-big1.box4-img img { height: 100%; width: 100%; object-fit: cover; object-position: top center; } .img-full { width: 100%; } .link-black { color: #000; } h2.fhead { font-size: 18px; font-weight: 700; color: #000; line-height: 1.35; margin: 0 0 6px; } h2.fhead.fhead-spaced { margin-bottom: 8px; } h2.fhead a { color: #000; } h2.fhead a:hover { color: #a60c0c; } h2.fonehead { font-size: 15px; font-weight: 600; color: #000; line-height: 1.3; margin: 0 0 3px; overflow: hidden; } h2.fonehead a { color: #000; } h2.fonehead a:hover { color: #a60c0c; } h2.shead { font-size: 16px; font-weight: 700; color: #000; line-height: 1.3; margin: 0 0 5px; } h2.shead a { color: #000; } h2.shead a:hover { color: #a60c0c; } h2.thirdhead { font-size: 20px; font-weight: 600; color: #000; line-height: 24px; margin-bottom: 8px; } h2.thirdhead.thirdhead-spaced { margin-bottom: 16px; } h2.thirdhead a { color: #000; } h2.thirdhead a:hover { color: #a60c0c; } h2.fouhead { font-size: 16px; font-weight: 700; color: #000; line-height: 1.3; margin: 0 0 4px; } h2.fouhead a { color: #000; } h2.fouhead a:hover { color: #a60c0c; } span.date { font-size: 14px; color: #000; font-style: normal; font-weight: 300; line-height: 1.4; display: block; margin-top: 3px; } span.date.date-nomargin { margin-top: 0; } .cb-info { padding: 0; } .cb-info ul { list-style: none; padding: 0; margin: 6px 0; overflow: hidden; } .sm-thumb-left { float: left; margin-right: 10px; width: 70px; } .sub-link-bold { font-weight: 600; font-size: 16px; } .sub-link-bold-strong { font-weight: 600; font-size: 16px !important; } .dotted-divider { border-bottom: 1px dotted #ddd; list-style: none; } .row-mb10 { margin-bottom: 10px; } .row-mb8 { margin-bottom: 8px; } .col-mb8 { margin-bottom: 8px; } .pr-5 { padding-right: 1rem !important; } .pl-5 { padding-left: 0 !important; } .pub-main-slide, .pub-main-slide-by { font: 500 15px Arial, Helvetica, sans-serif; color: #0f0f0f; border-bottom: none; padding-top: 8px; }

/* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
#Right-Part-half-part { padding-top: 0; padding-bottom: 1px; width: 100%; align-self: flex-start; z-index: 10; } h5.line { font-weight: bolder; text-align: center; } h5.line > span { line-height: 23px; } #myCarousel { position: relative; max-width: 220px; margin: 0 auto; overflow: visible !important; } #myCarousel .item { display: none; position: relative; transition: 0.6s ease-in-out left; } #myCarousel .active { display: block; } #myCarousel .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); z-index: 9999; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background: none !important; border-radius: 50%; } #myCarousel .left.carousel-control { left: -30px; } #myCarousel .right.carousel-control { right: -30px; } .carousel-arrow-icon { font-size: 30px; color: #000; }
/* Featured Companies box */
.featured-companies-box { position: relative; margin-top: 20px; } .featured-companies-title { font-size: 17px; font-weight: 700; text-transform: capitalize; letter-spacing: .8px; border-bottom: 2px solid #a60c0c; padding-bottom: 5px; margin-bottom: 10px; } .fv-list-wrap { position: relative; height: 490px; overflow: hidden; } .fv-list > .fv-item-li { padding: 10px 0; border-bottom: 1px solid #eee; border-radius: 0; } .fv-thumb { width: 100%; object-fit: cover; border-left: 6px solid #000; border-bottom: 6px solid #a60c0c; border-radius: 0 12px; } .fv-text-col { padding-left: 15px; padding-right: 15px; } .fv-cat-label { font-size: 10px; font-weight: 700; color: #a60c0c; text-transform: uppercase; display: block; margin-bottom: 2px; } .fv-title-link { font-size: 14px; font-weight: 600; color: #111; line-height: 1.3; display: block; margin-bottom: 3px; } .fv-by-line { font-size: 11px; color: #777; font-style: italic; margin: 0; }
/* ═══════════════════════════════════════════════════
   IN THE NEWS
═══════════════════════════════════════════════════ */
.news-section { padding: 20px 0; border: 4px solid #0b5530; margin: 30px 0; } .news-section h2 { text-align: center; font-size: 24px; font-weight: 700; color: #000; margin: -15px auto 15px; display: table; background: #fff; padding: 0 20px; } .news-item a { font-size: 16px; font-weight: 700; color: #000; line-height: 1.4; display: block; text-align: center; padding: 10px 0; border-bottom: 1px solid #eee; } .news-item:last-child a { border-bottom: none; }

/* ═══════════════════════════════════════════════════
   STICKY — ancestor overflow fix
═══════════════════════════════════════════════════ */
html, body, .sec2, .sec2-inner, .sec2-flex-row, .sec2-flex-row > .col-md-12, .sec2-flex-row .col-md-4, .sec2-flex-row .col-md-8, .row { overflow: visible !important; }

/* ═══════════════════════════════════════════════════
   HELIX fix
═══════════════════════════════════════════════════ */
@media (min-width: 1200px) { body.helix-ultimate .sppb-row-container { max-width: 100%; width: 88%; margin: 0 auto; } }

@media (min-width: 1800px) {
    .magzz_class11 { max-width: 25% !important; }
}

/* ═══════════════════════════════════════════════════
   Category title links
═══════════════════════════════════════════════════ */
.cat-blocks .cattitle span > a, .cat-blocks .cattitle span > a:hover, .cat-blocks .cattitle span > a:focus { color: #fff; text-decoration: none; display: inline-block; } .cat-blocks .cattitle span > a h2.catt_one { color: #fff !important; margin: 0; } .sec1-feature .feat-cat-link, .sec1-feature .feat-cat-link:hover { text-decoration: none; }

/* CXO slider — green category label */
.cxo-demo-list .cxo-cat-label { display: inline-block; font-size: 10px; font-weight: 700; color: #a60c0c; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; text-decoration: none; line-height: 1.2; } .cxo-demo-list .cxo-cat-label:hover { color: #a60c0c; text-decoration: underline; } a.fv-cat-label { text-decoration: none; } a.fv-cat-label:hover { color: #a60c0c; text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   SEC1 — Featured article
═══════════════════════════════════════════════════ */
.sec1 { padding: 0; border-bottom: 3px solid #ddd; } .sec1-inner { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; } .sec1-feature { flex: 0 0 46%; min-width: 280px; align-self: flex-start; } .sec1-feature-wrap { position: relative; width: 100%; overflow: hidden; line-height: 0; margin-bottom: 16px; } .sec1-feature-wrap img { width: 100%; height: auto; display: block; object-fit: cover; object-position: top center; } .sec1-feature .feat-overlay { position: static; background: none; padding: 0 4px 10px; line-height: 1.35; } .sec1-feature .feat-cat-link { text-decoration: none; display: inline-block; margin-bottom: 10px; } .sec1-feature .feat-cat { display: inline-block; background: #a60c0c; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; } .sec1-feature .feat-title { margin: 0 0 8px; } .sec1-feature .feat-title a { color: #111; font-size: 22px; font-weight: 700; line-height: 1.3; text-decoration: none; display: block; } .sec1-feature .feat-title a:hover { color: #a60c0c; } .sec1-feature .feat-by { font-size: 18px; color: #333; text-transform: capitalize; }

@media (min-width: 768px) {
 .slide {
    min-height: 335px !important;
  }
}


/* Helpers */
.fntt { font-size: 14px !important; }
.fnt { font-size: 16px !important; }

/* Person info */
.person-info { display: block; font-size: 14px; line-height: 1.4; color: #333; margin: 0; } .person-name { font-weight: 700; color: #000; font-size: 15px; margin-top: 6px; padding-bottom: 5px; } .person-designation { color: #444; padding-bottom: 5px; } .person-company { color: #444; } .newd { margin-top: 35px !important; }

/* Infinite Scroll Loader */

.infinite-scroll-end { text-align: center; color: #7c8c99; font-size: 14px; font-style: italic; padding: 20px 0; border-top: 1px solid #e5e5e5; margin-top: 20px; } .infinite-scroll-trigger { min-height: 0; padding: 0; margin: 0; } .infinite-scroll-spinner, .infinite-scroll-end { padding: 20px 0; } #load-more-container { margin-bottom: 40px; clear: both; overflow: hidden; } .circle-spinner { width: 32px; height: 32px; border: 3px solid #e0e0e0; border-top-color: #a60c0c; border-radius: 50%; margin: 0 auto; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE BREAKPOINTS — IMAGE HIDING RULES                  ║
   ║                                                               ║
   ║  ≤ 1024px (BOTH tablet & mobile):                             ║
   ║    HIDE: Layout 1 sub-thumbnails, Layout 3, Layout 4 images   ║
   ║                                                               ║
   ║  768px – 1024px (TABLET ONLY):                                ║
   ║    ADDITIONALLY HIDE: Layout 1 big image (image only!)        ║
   ║    Layout 1 → all 3 articles styled as Layout 3 (stacked,     ║
   ║                same .thirdhead headline + grey date + divider)║
   ║    Layout 4 → restyles to L3 design (stacked, no images)      ║
   ║    Layout 2 STAYS UNTOUCHED (images visible)                  ║
   ║                                                               ║
   ║  ≤ 767px (MOBILE):                                            ║
   ║    Layout 1 big image SHOWS (natural mobile flow)             ║
   ║    Layout 2 images SHOW (always visible)                      ║
   ║    L1-sub, L3, L4 thumbnails STAY HIDDEN                      ║
   ╚═══════════════════════════════════════════════════════════════╝ */


/* ═══════════════════════════════════════════════════
   ★ LARGE DESKTOP — ≥ 1440px
═══════════════════════════════════════════════════ */
@media (min-width: 1440px) { .box3-img, .box3-img img { width: 200px !important; max-width: 200px !important; padding-right: 10px !important; } .cat-blocks .row .col-md-3:has(.box3-img) { flex: 0 0 220px !important; max-width: 220px !important; width: 220px !important; } .cat-blocks .row .col-md-3:has(.box3-img) + .col-md-8 { flex: 1 !important; max-width: calc(100% - 220px) !important; width: calc(100% - 220px) !important; } }

/* ═══════════════════════════════════════════════════
   ★ COMMON HIDE — ≤ 1024px
   Applies to BOTH tablet AND mobile:
   • Layout 1 sub-article thumbnails
   • Layout 3 thumbnails
   • Layout 4 thumbnails

   IMPORTANT: text columns use padding-left:15px (not 0) to
   counteract Bootstrap's .row negative margin (-15px) which
   would otherwise clip text off the left edge of the viewport.
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {

/* ─── LAYOUT 1: Right column sub-articles - hide thumbnails ─── */
.cat-blocks .col-md-7.cb-info .row-mb10 .col-md-3, .cat-blocks .col-md-7.cb-info .row-mb10 .col-sm-4 { display: none !important; } .cat-blocks .col-md-7.cb-info .row-mb10 .col-md-8, .cat-blocks .col-md-7.cb-info .row-mb10 .col-sm-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 15px !important; padding-right: 15px !important; }

    /* ─── LAYOUT 3: Hide thumbnails, expand text ─── */
.cat-blocks > .row.row-mb10 > .col-md-3, .cat-blocks > .row.row-mb10 > .col-sm-4 { display: none !important; } .cat-blocks > .row.row-mb10 > .col-md-8, .cat-blocks > .row.row-mb10 > .col-sm-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 15px !important; padding-right: 15px !important; }

    /* ─── LAYOUT 4: Hide thumbnails, text fills each cell ───
       Layout 4 has DOUBLE-nested rows: .row.row-mb8 > .col-md-6 > .row > .col-md-8
       The inner .row has its own -15px negative margin which cancels the
       text column's 15px padding. So we neutralize the inner row's margin
       AND give the text column 15px padding from the cell wrapper edge. */

.cat-blocks .row.row-mb8 .col-md-6 .row .col-md-4, .cat-blocks .row.row-mb8 .col-md-6 .row .col-sm-4 { display: none !important; } .cat-blocks .row.row-mb8 .col-md-6 > .row { margin-left: 0 !important; margin-right: 0 !important; } .cat-blocks .row.row-mb8 .col-md-6 .row .col-md-8, .cat-blocks .row.row-mb8 .col-md-6 .row .col-sm-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

 /* Hide the image containers themselves */
.cat-blocks .col-md-7.cb-info .row-mb10 .cb-big1.box3-img, .cat-blocks .col-md-7.cb-info .row-mb10 .cb-big1.box3-img img, .cat-blocks > .row.row-mb10 .cb-big1.box3-img, .cat-blocks > .row.row-mb10 .cb-big1.box3-img img, .cat-blocks .row.row-mb8 .cb-big1.box4-img, .cat-blocks .row.row-mb8 .cb-big1.box4-img img { display: none !important; } }


/* ═══════════════════════════════════════════════════
   ★ TABLET — 768px to 1024px
   Additional hiding: Layout 1 big image + Layout 2 images
   Restyling: Layout 1, Layout 2, Layout 4 → Layout 3 design
═══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) { /* ─── Container adjustments ─── */ .page-wrap { width: 95%; padding: 0 10px; } .sec2-flex-row > .col-md-8 { padding-right: 15px; }

    /* ═════════════════════════════════════════════════════
       LAYOUT 1 — Hide big image + restyle as Layout 3 design
       All 3 articles render as identical stacked rows
       (same .thirdhead headline + grey date + divider)
    ═════════════════════════════════════════════════════ */

    /* Hide the big featured image (image element only, headline stays) */
    .cat-blocks .col-md-5 .cb-big1.featured-main-img img {
        display: none !important;
    }
    /* Release the line-height:0 constraint inside the wrapper so headline reads naturally */
    .cat-blocks .col-md-5 .cb-big1.featured-main-img {
        line-height: normal;
        overflow: visible;
        margin-bottom: 0;
    }

    /* Both Layout 1 columns become full width, stacked vertically.
       EXPLICITLY set padding-left:15px and padding-right:15px because
       Helix/Joomla framework strips Bootstrap's default column padding
       at certain breakpoints. The 15px is what cancels Bootstrap's .row
       margin-left:-15px and prevents text from being clipped. */

.cat-blocks .col-md-5, .cat-blocks .col-md-7.cb-info { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; padding-left: 15px !important; padding-right: 15px !important; /* overrides inline padding-right:28px on .col-md-7 */ }

    /* Article 1 (.col-md-5) — match Layout 3 row spacing */
.cat-blocks .col-md-5 { padding-top: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid #eaeaea; margin-bottom: 0; }

    /* Article 1's headline (.fhead) — promote to Layout 3 .thirdhead style */

.cat-blocks .col-md-5 h2.fhead, .cat-blocks .col-md-5 h2.fhead.fhead-spaced { font-size: 20px !important; font-weight: 600 !important; line-height: 24px !important; margin: 0 0 8px !important; color: #000; } .cat-blocks .col-md-5 h2.fhead a { color: #000; } .cat-blocks .col-md-5 h2.fhead a:hover { color: #a60c0c; } .cat-blocks .col-md-5 span.date { font-size: 14px !important; color: #555 !important; font-weight: 300; margin-top: 0 !important; } .cat-blocks .col-md-7.cb-info { padding-top: 0 !important; } .cat-blocks .row-mb10.newd { margin-top: 0 !important; } .cat-blocks .col-md-7.cb-info > .row-mb10 { padding-top: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid #eaeaea; margin: 0 !important; } .cat-blocks .col-md-7.cb-info > .row-mb10:last-child { border-bottom: none; } .cat-blocks .col-md-7.cb-info > .row-mb10 > .col-md-8.cb-info, .cat-blocks .col-md-7.cb-info > .row-mb10 > .col-sm-12.cb-info { padding-left: 0 !important; padding-right: 0 !important; } .cat-blocks .col-md-7.cb-info h2.thirdhead.thirdhead-spaced { margin: 0 0 8px !important; } .cat-blocks .col-md-7.cb-info span.date { margin-top: 0 !important; color: #555 !important; }

.cat-blocks .row.row-mb8 > .col-md-6 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 12px 15px !important; border-bottom: 1px solid #eaeaea; margin-bottom: 0; } .cat-blocks .row.row-mb8 > .col-md-6:last-child { border-bottom: none; }

    /* Promote Layout 4 .fouhead to Layout 3 .thirdhead styling */
.cat-blocks .row.row-mb8 h2.fouhead { font-size: 20px !important; font-weight: 600 !important; line-height: 24px !important; margin: 0 0 8px !important; color: #000; } .cat-blocks .row.row-mb8 h2.fouhead a { color: #000; } .cat-blocks .row.row-mb8 h2.fouhead a:hover { color: #a60c0c; } .cat-blocks .row.row-mb8 span.date { font-size: 14px !important; color: #555 !important; margin-top: 0 !important; } .cxo-demo-list { height: 420px; } .sec2-flex-row > .col-md-4 { width: 35% !important; } .sec2-flex-row > .col-md-8 { width: 65% !important; } }

/* ═══════════════════════════════════════════════════
   ★ MOBILE LAYOUT TRANSITION — ≤ 991px (general)
═══════════════════════════════════════════════════ */
@media (max-width: 991px) { .page-wrap { width: 100%; padding: 0 15px; } .sec1-inner { flex-direction: column; } .sec1-feature { flex: none; width: 100%; } }

/* ═══════════════════════════════════════════════════
   ★ MOBILE STACK — ≤ 767px
   Sidebar drops below main content
   Layout 1 big image + Layout 2 images SHOW again
   L1-sub / L3 / L4 thumbnails remain HIDDEN (from ≤1024 rule)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) { /* Stack sec2 vertically */ .sec2-flex-row { flex-direction: column !important; } .sec2-flex-row > .col-md-8, .sec2-flex-row > .col-md-4 { width: 100% !important; max-width: 100% !important; padding-right: 0; } #Right-Part-half-part { width: 100%; }

/* Stack all columns inside cat-blocks vertically */
.cat-blocks .row { display: block; margin-left: 0; margin-right: 0; } .cat-blocks .row > [class*="col-"] { float: none !important; width: 100% !important; padding: 0 0 15px 0 !important; margin-bottom: 0; display: block; } .cat-blocks .row > .col-md-5 .cb-big1.featured-main-img, .cat-blocks .row > .col-md-5 .cb-big1.featured-main-img img { display: block !important; } .cat-blocks .cb-big1.featured-main-img { max-height: none !important; height: auto !important; overflow: visible; margin-bottom: 10px; } .cat-blocks .cb-big1.featured-main-img img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain; object-position: center center; } .cat-blocks .col-md-7.cb-info .row-mb10 .cb-big1.box3-img, .cat-blocks .col-md-7.cb-info .row-mb10 .cb-big1.box3-img img, .cat-blocks > .row.row-mb10 .cb-big1.box3-img, .cat-blocks > .row.row-mb10 .cb-big1.box3-img img, .cat-blocks .row.row-mb8 .cb-big1.box4-img, .cat-blocks .row.row-mb8 .cb-big1.box4-img img { display: none !important; } .cat-blocks .col-md-7.cb-info .row-mb10 > .col-md-3, .cat-blocks .col-md-7.cb-info .row-mb10 > .col-sm-4, .cat-blocks > .row.row-mb10 > .col-md-3, .cat-blocks > .row.row-mb10 > .col-sm-4, .cat-blocks .row.row-mb8 .col-md-6 .row > .col-md-4, .cat-blocks .row.row-mb8 .col-md-6 .row > .col-sm-4 { display: none !important; } .cb-info ul { margin: 10px 0 0; padding: 8px 0; border-top: 1px solid #eee; overflow: hidden; } .cb-info ul:first-of-type { border-top: none; padding-top: 0; } .sm-thumb-left { float: left; width: 90px !important; height: auto !important; margin-right: 12px; object-fit: cover; } h2.fhead, h2.thirdhead { font-size: 18px !important; line-height: 1.35 !important; margin: 8px 0 4px !important; } h2.shead { font-size: 15px !important; line-height: 1.35 !important; } h2.fonehead { font-size: 14px !important; line-height: 1.35 !important; } h2.fouhead { font-size: 14px !important; line-height: 1.35 !important; } .sub-link-bold, .sub-link-bold-strong { font-size: 14px !important; } .cat-blocks .cattitle { margin: 10px 0 12px; } .cat-blocks .cattitle span { font-size: 12px !important; height: 32px; line-height: 32px; padding: 0 14px; } h2.catt_one { font-size: 12px !important; line-height: 32px; } .cat-blocks { overflow: visible; padding: 0 0 15px; } .space40 { margin: 5px 0; height: 1px; } .sec2, .sec2-inner, .sec2-inner-wrap, .sec2-main { padding-left: 0; padding-right: 0; } .col-md-8, .col-md-4 { padding-left: 15px !important; padding-right: 15px !important; } span.date { font-size: 14px !important; } }

/* ═══════════════════════════════════════════════════
   ★ SMALL MOBILE — ≤ 480px
═══════════════════════════════════════════════════ */
@media (max-width: 480px) { .page-wrap { padding: 0 10px; } h2.fhead, h2.thirdhead { font-size: 16px !important; } .cat-blocks .cattitle span { font-size: 11px !important; height: 28px; line-height: 28px; padding: 0 12px; } h2.catt_one { font-size: 11px !important; line-height: 28px; } .sm-thumb-left { width: 80px !important; margin-right: 10px; } }

/* ═══════════════════════════════════════════════════
   ★ Hide CXO slider entirely on very small phones
═══════════════════════════════════════════════════ */
@media (max-width: 575px) { #column-wrap-id-1538645611932 { display: none !important; } }