/* CFUD responsive refinements — loaded after the legacy slider styles */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { margin: 0; }
.page-wrapper {
    width: min(98%, 1440px) !important;
    max-width: 1440px !important;
    margin: 8px auto !important;
    border-radius: 8px !important;
}
.dynamic-header { gap: clamp(8px, 1.5vw, 20px); }
.header-logo-container img { max-width: 100%; }
.content-flex-container { align-items: stretch; }
.left-col-slideshow, .right-col-info { min-width: 0; }
.left-col-slideshow > div { height: auto !important; min-width: 0; }
#sliderFrame {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
}
#slider {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(210px, 30vw, 420px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background-size: contain !important;
}
#slider div.sliderInner {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
}
#slider img, #slider > b, #slider a > b {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
#slider a.imgLink, #slider div.video {
    width: 100% !important;
    height: 100% !important;
}
.nav-bar-flex { flex-wrap: nowrap; }
.nav-item { min-width: 0; }
.nav-item a { display: block; overflow-wrap: anywhere; }
img, iframe, video { max-width: 100%; }

@media (max-width: 850px) {
    .page-wrapper { width: 100% !important; margin: 0 auto !important; border-radius: 0 !important; }
    .dynamic-header { gap: 8px !important; }
    .header-logo-container img { height: clamp(48px, 13vw, 72px) !important; width: auto !important; }
    .header-title-bn { font-size: clamp(17px, 4vw, 25px) !important; line-height: 1.2 !important; }
    .header-title-en { font-size: clamp(9px, 2.2vw, 13px) !important; line-height: 1.25 !important; letter-spacing: .2px !important; }
    .header-subtitle { font-size: clamp(10px, 2.5vw, 14px) !important; line-height: 1.3 !important; }
    .header-reg-no { font-size: clamp(8px, 2vw, 11px) !important; line-height: 1.3 !important; }
    .content-flex-container { flex-direction: column !important; gap: 10px !important; padding: 8px !important; }
    .left-col-slideshow, .right-col-info { width: 100% !important; max-width: 100% !important; }
    .left-col-slideshow > div { padding: 4px !important; }
    #slider { height: clamp(190px, 58vw, 380px) !important; }
    .right-col-card { height: auto !important; gap: 12px; }
    .nav-item { padding: 8px 2px !important; }
    .nav-item a { font-size: clamp(9px, 2.5vw, 13px) !important; line-height: 1.25; }
}
@media (max-width: 420px) {
    .dynamic-header { padding: 6px !important; gap: 6px !important; }
    .header-logo-container img { height: 46px !important; }
    .header-text-container { padding: 5px !important; }
    .header-title-bn { font-size: 16px !important; }
    .header-title-en { font-size: 8.5px !important; }
    .header-subtitle { font-size: 9px !important; }
    .header-reg-no { font-size: 7.5px !important; }
    .content-flex-container { padding: 5px !important; }
    #slider { height: 56vw !important; min-height: 175px !important; max-height: 280px !important; }
    .nav-item a { font-size: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}


/* --- Mobile Responsive Layout Fix --- */
body, html {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .left-column, .right-column, .sidebar, .content-main, 
    div[style*="float:left"], div[style*="float: left"],
    div[style*="float:right"], div[style*="float: right"] {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box;
    }

    table, img {
        max-width: 100% !important;
        height: auto !important;
    }
}