/*
 * MHA DBIM look for BPR&D.
 * Colours, type and component measurements follow the Ministry of Home Affairs
 * DBIM theme (mha.gov.in): navy #162f6a, grey #ebeaea, Noto Sans, 120px gutters.
 * Loaded after style.css / bprd.css, so it overrides the older BPR&D design.
 */

:root {
    --mha-blue: #162f6a;
    --mha-blue-2: #224aaa;
    --mha-darkblue: #214aab;
    --mha-lblue: #d2dfff;
    --mha-a3: #a3bbf3;
    --mha-5279: #5279d7;
    --mha-gray: #ebeaea;
    --mha-f1: #f1f1f1;
    --mha-ccc: #cccccc;
    --mha-text: #150202;
    --mha-lblack: #323232;
    --mha-555: #555555;
    --mha-black: #000;
    --mha-white: #fff;

    /* Older DBIM variables mapped onto the MHA palette (inner pages) */
    --navy-dark: #162f6a;
    --navy-dark-02: #224aaa;
    --bg1: #ffffff;
    --bg2: #d2dfff;
    --bg3: rgba(22, 47, 106, .9);
    --bg7: #f1f1f1;
    --sttl-theme-gray: #ebeaea;
}

body {
    font-family: "Noto Sans", "Noto Sans Devanagari", sans-serif;
    font-size: 16px;
    color: #212529;
    background: var(--mha-white);
    overflow-x: hidden;
}

.px-120 { padding-left: 120px; padding-right: 120px; }
.py-80 { padding-top: 40px; padding-bottom: 40px; }

/* ==========================================================================
   Header
   ========================================================================== */
.mhaHeader {
    position: sticky;
    top: 0;
    z-index: 999;
    padding-top: 6px;
    background: var(--mha-white);
}
.mhaHeaderTop .row { --bs-gutter-x: 1.5rem; }

.mhaLogo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--mha-black);
    text-decoration: none;
}
.mhaLogo:hover, .mhaLogo:focus { color: var(--mha-black); text-decoration: none; }
.mhaLogo .national_emblem { width: 41px; height: 68px; flex: 0 0 41px; object-fit: contain; }
.mhaLogo .logo-text {
    display: block;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: var(--mha-black);
}
.mhaLogo .logo-text strong { display: block; font-size: 21px; line-height: 25px; font-weight: 600; }
.mhaLogo .logo-text small { display: block; font-size: inherit; line-height: inherit; color: var(--mha-black); }

.searchcontainer { max-width: 300px; width: 100%; padding: 0 10px; margin: 0 auto; }
.searchcontainer .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    border-radius: 12px 12px 0 0;
    border: 1px solid #e4e4e4;
    border-bottom: 3px solid var(--mha-blue);
    background: var(--mha-white);
}
.searchcontainer input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    color: var(--mha-black);
    font-size: 16px;
}
.searchcontainer input[type="search"]::placeholder { color: var(--mha-black); opacity: 1; }
.searchcontainer input[type="search"]:focus { outline: none; }
.searchcontainer .input-group:focus-within { outline: 2px solid var(--mha-blue); outline-offset: 2px; }
.searchcontainer .searchSubmit {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-left: 1px solid #e4e4e4;
    border-radius: 0 12px 0 0;
    background: transparent;
    color: var(--mha-blue);
    font-size: 18px;
}

.menuicons { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.menuicons .headLogo { display: flex; align-items: center; }
.menuicons .headLogo img { max-height: 58px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
.menutop { display: flex; justify-content: flex-end; align-items: center; margin: 0; padding: 0; list-style: none; }
.menutop li { position: relative; padding: 0 10px; border-right: 1px solid var(--mha-blue); line-height: 1; }
.menutop li:last-child { border-right: 0; padding-right: 0; }
.menutop li > a, .menutop li > .btn { display: inline-flex; align-items: center; color: var(--mha-blue); }
.menutop svg { width: 24px; height: 24px; }
.menutop svg path:not([fill]) { fill: var(--mha-blue); }
.menutop .fa-volume-high { font-size: 20px; }
.menutop .dropdown-menu { min-width: 9rem; }
.menutop .dropdown-item.active, .menutop .dropdown-item:active { background: var(--mha-blue); color: var(--mha-white); }
.mhaNavToggle { border: 0; background: transparent; color: var(--mha-blue); font-size: 28px; padding: 4px 8px; }

/* Main menu bar */
.menupart {
    margin-top: 6px;
    padding: 0 34px;
    border-top: 1px solid var(--mha-gray);
    border-bottom: 2px solid var(--mha-blue);
    box-shadow: 0 4px 8px 0 rgba(35, 35, 47, .08);
    background: var(--mha-white);
}
.mhaNav { display: flex; justify-content: flex-start; margin: 0; padding: 0; list-style: none; }
.mhaNav > li { position: relative; flex: 0 0 240px; width: 240px; text-align: center; list-style: none; transition: .4s; }
.mhaNav > li > a {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: var(--mha-lblack);
    text-decoration: none;
    white-space: nowrap;
}
.mhaNav > li > a .fa-angle-down { margin-left: 4px; font-size: 14px; }
.mhaNav > li:hover, .mhaNav > li:focus-within { background: var(--mha-lblue); }
.mhaNav > li:hover > a, .mhaNav > li:focus-within > a { color: var(--mha-black); }
.mhaNav > li > a.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 100%;
    height: 5px;
    background: var(--mha-blue);
    transform: translateX(-50%);
}
.mhaNav > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: 100%;
    min-width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* see-through dark panel with a blur, as on mha.gov.in */
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 0 0 6px 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms linear, visibility 400ms linear;
}
.mhaNav > li:hover > ul, .mhaNav > li:focus-within > ul { opacity: 1; visibility: visible; }
.mhaNav > li > ul a {
    display: block;
    padding: 12px;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: var(--mha-white);
    text-decoration: none;
}
/* Same light blue as the hovered top item (mha.gov.in: .main_nav ul li:hover) */
.mhaNav > li > ul a:hover, .mhaNav > li > ul a:focus { background: var(--mha-lblue); color: var(--mha-black); }
.mhaNav > li:last-child > ul { left: auto; right: 0; }

/* ==========================================================================
   Section headings (icon + navy title)
   ========================================================================== */
h2.title_head {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 15px;
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.3;
    color: var(--mha-blue);
}
h2.title_head svg { width: 48px; height: 48px; flex: 0 0 48px; }
h2.title_head svg path[fill]:not([fill="none"]) { fill: var(--mha-blue); }
.media-sec h2.title_head { color: var(--mha-white); }
.media-sec h2.title_head svg path[fill]:not([fill="none"]) { fill: var(--mha-white); }

a.viewmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    float: right;
    margin-top: 15px;
    padding: 8px 12px;
    border: 1px solid var(--mha-blue);
    border-radius: 4px;
    background: var(--mha-white);
    color: var(--mha-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .5s;
}
a.viewmore .fa-angle-right { font-size: 18px; line-height: 18px; }
a.viewmore:hover, a.viewmore:focus { background: var(--mha-blue); color: var(--mha-white); }

/* Thin navy scrollbars used by the MHA lists */
.whats_inner::-webkit-scrollbar, .announcement_sec .tab-pane ul::-webkit-scrollbar, .zonal-cont::-webkit-scrollbar, .media_filed::-webkit-scrollbar { width: 7px; border-radius: 30px; }
.whats_inner::-webkit-scrollbar-track, .announcement_sec .tab-pane ul::-webkit-scrollbar-track, .zonal-cont::-webkit-scrollbar-track, .media_filed::-webkit-scrollbar-track { background: var(--mha-f1); border: 1px solid var(--mha-blue-2); border-radius: 30px; }
.whats_inner::-webkit-scrollbar-thumb, .announcement_sec .tab-pane ul::-webkit-scrollbar-thumb, .zonal-cont::-webkit-scrollbar-thumb, .media_filed::-webkit-scrollbar-thumb { background: var(--mha-blue-2); border-radius: 30px; }

/* ==========================================================================
   Home banner (bxSlider)
   ========================================================================== */
.homebanner { position: relative; background: var(--mha-text); }
.homebanner .bx-wrapper { margin: 0; border: 0; box-shadow: none; background: transparent; }
.homebanner .bannerSlider img { display: block; width: 100%; height: auto; max-height: 600px; object-fit: cover; }
.homebanner .bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    z-index: 60;
    width: 35px;
    height: 35px;
    margin-top: -17px;
    border-radius: 4px;
    background: var(--mha-black);
    text-indent: 0;
    font-size: 0;
    overflow: hidden;
}
.homebanner .bx-wrapper .bx-controls-direction a::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-size: 24px;
    color: var(--mha-white);
}
.homebanner .bx-wrapper .bx-prev { left: 40px; }
.homebanner .bx-wrapper .bx-next { right: 40px; }
.homebanner .bx-wrapper .bx-prev::before { content: "\f104"; }
.homebanner .bx-wrapper .bx-next::before { content: "\f105"; }
.homebanner .bx-wrapper .bx-controls-direction a:focus-visible { outline: 3px solid #ffbf00; }
.homebanner .bx-wrapper .bx-pager {
    position: absolute;
    right: 170px;
    bottom: 18px;
    left: auto !important;
    z-index: 9;
    width: max-content !important;
    padding: 4px 6px;
    border-radius: 8px;
    background: var(--mha-lblue);
    text-align: center;
}
.homebanner .bx-wrapper .bx-pager.bx-default-pager a {
    width: 10px;
    height: 10px;
    margin: 5px 4px;
    border-radius: 30px;
    background: var(--mha-5279);
    opacity: .6;
}
.homebanner .bx-wrapper .bx-pager.bx-default-pager a.active,
.homebanner .bx-wrapper .bx-pager.bx-default-pager a:hover { background: var(--mha-blue); border-radius: 30px; opacity: 1; }
.homebanner .bx-wrapper .bx-controls-auto {
    position: absolute;
    right: 118px;
    bottom: 15px;
    left: auto;
    z-index: 9;
    width: 40px;
    height: 40px;
}
.homebanner .bx-wrapper .bx-controls-auto .bx-controls-auto-item:first-child { display: none; }
.homebanner .bx-wrapper .bx-controls-auto a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: var(--mha-text);
    text-indent: 0;
    font-size: 0;
}
.homebanner .bx-wrapper .bx-controls-auto a::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 16px;
    color: var(--mha-white);
}
.homebanner .bx-wrapper .bx-controls-auto .bx-start::before { content: "\f04b"; }
.homebanner .bx-wrapper .bx-controls-auto .bx-stop::before { content: "\f04c"; }

/* ==========================================================================
   PM quote
   ========================================================================== */
.pm-quotes { position: relative; clear: both; padding: 40px 100px; background: var(--mha-gray); }
.pm-img { width: 260px; height: 260px; margin: 0 auto; overflow: hidden; border-radius: 100%; background: var(--mha-white); }
.pm-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-message { position: relative; }
.pm-message .pmQuoteText { position: relative; margin-bottom: 1rem; padding-top: 18px; padding-bottom: 1em; border-bottom: 1px solid var(--mha-blue); }
.pm-message .pmQuoteText::before {
    content: "\201C";
    position: absolute;
    top: -18px;
    left: 0;
    font-family: Georgia, serif;
    font-size: 50px;
    line-height: 1;
    color: var(--mha-blue);
}
.pm-message .pmQuoteText p {
    margin: 0 0 .5rem;
    font-size: 25px;
    font-weight: 500;
    font-style: normal;
    line-height: 29px;
    letter-spacing: -.12px;
    text-align: justify;
    color: var(--mha-blue);
}
.pm-message .pmQuoteText p:last-child { margin-bottom: 0; }
.technology { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.minister { color: var(--mha-blue); font-weight: 500; }
.viewevent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--mha-blue);
    border-radius: 4px;
    background: var(--mha-white);
    color: var(--mha-blue);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: .12px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: all .4s;
}
.viewevent:hover, .viewevent:focus { background: var(--mha-blue); color: var(--mha-white); }

/* ==========================================================================
   About + Director General
   ========================================================================== */
.aboutMinistry .about_ministry > h2.title_head { width: 100%; }
.aboutinner {
    margin-bottom: 40px;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -.1px;
    text-align: justify;
}
.aboutinner a { color: var(--mha-blue); font-weight: 600; text-decoration: underline; }
.ministrybox3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; text-align: center; }
.ministrybox3 a {
    display: grid;
    justify-items: center;
    gap: 15px;
    padding: 14px 8px;
    border: 1px solid var(--mha-blue);
    color: var(--mha-blue);
    text-decoration: none;
    transition: 350ms ease;
}
.ministrybox3 a svg { width: 32px; height: 32px; }
.ministrybox3 a svg path[fill]:not([fill="none"]) { fill: var(--mha-blue); transition: fill 350ms ease; }
.ministrybox3 a span { display: block; font-size: 16px; font-weight: 600; line-height: normal; }
.ministrybox3 a:hover, .ministrybox3 a:focus { background: var(--mha-blue); color: var(--mha-white); }
.ministrybox3 a:hover svg path[fill]:not([fill="none"]), .ministrybox3 a:focus svg path[fill]:not([fill="none"]) { fill: var(--mha-white); }
.about-section { display: flex; align-items: flex-end; justify-content: flex-end; height: 100%; }
.aboutbox2 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 235px); gap: 15px; justify-content: end; text-align: center; }
.aboutbox2 a { color: inherit; text-decoration: none; }
.aboutbox-mins span { display: block; margin-bottom: 15px; overflow: hidden; border: 2px solid var(--mha-gray); border-bottom: 6px solid var(--mha-blue); }
.aboutbox-mins span img { display: block; width: 145px; height: 160px; margin: 0 auto; object-fit: contain; object-position: bottom; }
.nameminister .textsmall { margin-bottom: 0; font-size: 20px; font-weight: 600; line-height: normal; color: var(--mha-text); }
.nameminister .textbold { margin-bottom: 0; font-size: 16px; text-transform: uppercase; color: var(--mha-555); }
.aboutbox2 a:hover .textsmall, .aboutbox2 a:focus .textsmall { color: var(--mha-blue); text-decoration: underline; }

/* ==========================================================================
   Notices (tabs) + What's New
   ========================================================================== */
.announcement_sec { position: relative; padding: 50px 0; background: var(--mha-gray); }
.announcement_sec .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    overflow: hidden;
    border-bottom: 0;
    border-radius: 5px;
}
.announcement_sec #nav-tab button {
    display: block;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 6px;
    border: 1px solid var(--mha-blue);
    border-radius: 0;
    background: var(--mha-white);
    box-shadow: none;
    color: var(--mha-black);
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.1;
}
.announcement_sec #nav-tab button + button { border-left: 0; }
.announcement_sec #nav-tab button:first-child { border-radius: 4px 0 0 4px; }
.announcement_sec #nav-tab button:last-child { border-radius: 0 4px 4px 0; }
.announcement_sec #nav-tab button.active { background: var(--mha-blue); color: var(--mha-white); font-weight: 600; }
.announcement_sec #nav-tab button:focus-visible { outline: 3px solid #ffbf00; outline-offset: -3px; }
.announcement_sec .tab-pane ul {
    position: relative;
    height: 250px;
    margin: 0;
    padding: 15px;
    overflow-y: auto;
    list-style: none;
    background: var(--mha-white);
    border-radius: 4px;
    box-shadow: 0 0 15px #dddddd;
}
.announcement_sec .tab-pane ul li { display: block; }
.announcement_sec .tab-pane ul li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--mha-a3);
    color: var(--mha-text);
    font-size: 16px;
    line-height: normal;
    text-decoration: none;
    transition: all .6s;
}
.announcement_sec .tab-pane ul li a span { width: 80%; }
.announcement_sec .tab-pane ul li a small { color: var(--mha-555); }
.announcement_sec .tab-pane ul li a .fa-angle-right { font-size: 2em; color: var(--mha-blue); margin-right: 6px; }
.announcement_sec .tab-pane ul li a:hover span { text-decoration: underline; color: var(--mha-blue); }
.announcement_sec .tab-pane ul .noData { margin: 0; padding: 16px 24px; }
.announcement_sec .tab-pane::after, .announcement_sec .col-lg-4::after { content: ""; display: table; clear: both; }

.whats_inner { position: relative; height: 309px; padding: 15px; overflow-y: auto; border-radius: 4px; background: var(--mha-blue); }
.whats_inner ul { margin: 0; padding: 0; list-style: none; }
.whats_inner ul li { display: block; }
.whats_inner ul li a, .whats_inner ul li > span {
    position: relative;
    display: block;
    padding: 20px 50px 20px 20px;
    border-bottom: 1px solid var(--mha-ccc);
    color: var(--mha-white);
    font-size: 16px;
    line-height: normal;
    text-decoration: none;
    word-wrap: break-word;
    transition: all .6s;
}
.whats_inner ul li a .fa-angle-right { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font-size: 32px; color: var(--mha-white); }
.whats_inner ul li a:hover { text-decoration: underline; }
.whats_inner .noData { color: var(--mha-white); padding: 20px; }

/* ==========================================================================
   Key Offerings cards + Engage carousel + Important Links
   ========================================================================== */
.pasenger_serv { padding-top: 40px; padding-bottom: 40px; }
.our_service ul { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 0; padding: 0; }
.our_service ul li {
    position: relative;
    width: 100%;
    min-height: 140px;
    padding: 24px;
    overflow: hidden;
    list-style: none;
    background: var(--mha-white);
    border: .5px solid var(--mha-blue);
    border-radius: 4px;
    box-shadow: 0 6px 12px 0 rgba(35, 35, 47, .078), 0 2px 4px 0 rgba(35, 35, 47, .059);
    transition: all .5s;
}
.our_service ul li a {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    color: var(--mha-blue);
    text-decoration: none;
}
.our_service ul li a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.our_service ul li a:hover, .our_service ul li a:focus { text-decoration: underline; }
.our_service ul li p { margin: 0; font-size: 16px; line-height: normal; text-align: justify; color: var(--mha-text); }

.stake_hold { position: relative; padding-bottom: 50px; }
.stake_hold .personaItem a { display: block; text-align: center; color: inherit; text-decoration: none; }
.stake_hold .personaImg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 225px;
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--mha-a3);
}
.stake_hold .personaImg img { width: 55% !important; height: 55%; object-fit: contain; }
.carousel-title-type-2 { display: block; margin-top: 20px; font-size: 20px; font-weight: 600; text-align: center; color: var(--mha-blue); }
.stake_hold .personaItem a:hover .carousel-title-type-2 { text-decoration: underline; }
.stake_hold .owl-nav {
    position: absolute;
    bottom: -42px;
    left: 50%;
    display: flex;
    justify-content: space-between;
    width: 180px;
    margin: 0;
    transform: translateX(-50%);
}
.stake_hold .owl-nav button.owl-prev, .stake_hold .owl-nav button.owl-next {
    width: 24px;
    height: 24px;
    margin: 0;
    background: transparent !important;
    color: var(--mha-blue) !important;
    font-size: 28px !important;
    line-height: 1 !important;
}
.stake_hold .owl-dots { position: absolute; bottom: -36px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.stake_hold .owl-theme .owl-dots .owl-dot span, .stake_hold .owl-dots .owl-dot span { display: flex; width: 12px; height: 12px; margin: 0 1px; border-radius: 30px; background: var(--mha-lblue); }
.stake_hold .owl-dots .owl-dot.active span, .stake_hold .owl-dots .owl-dot:hover span { background: var(--mha-blue); border-radius: 30px; }
.stake_hold .btnBox { position: absolute; right: 0; bottom: 0; }

.btnBox .btnPs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: var(--mha-white);
    font-size: 12px;
}
.btnBox .play1 { display: none; }

.zonal-cont { position: relative; height: 307px; padding-right: 15px; overflow-y: auto; background: var(--mha-white); }
.zonal-cont ul { margin: 0; padding: 0; list-style: none; }
.zonal-cont ul li { position: relative; list-style: none; }
.zonal-cont ul li a {
    display: block;
    padding: 14px 30px 14px 0;
    border-bottom: 1px solid var(--mha-ccc);
    color: var(--mha-text);
    font-size: 16px;
    line-height: normal;
    text-decoration: none;
}
.zonal-cont ul li a:hover { color: var(--mha-blue); text-decoration: underline; }
.zonal-cont ul li .fa-angle-right { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); font-size: 28px; color: var(--mha-text); pointer-events: none; }

/* ==========================================================================
   Social media
   ========================================================================== */
.media-sec { padding: 50px 0 40px; background: var(--mha-blue); color: var(--mha-white); }
.media-sec h2.title_head { margin-bottom: 1.5rem; }
.media-head { overflow: hidden; border-radius: 5px; }
.media-head h3 { margin: 0; padding: 10px; background: var(--mha-white); color: var(--mha-blue); font-size: 20px; font-weight: 500; line-height: 1.5; }
.media_filed { position: relative; width: 100%; height: 300px; padding: 15px; overflow-x: hidden; overflow-y: auto; background: var(--mha-white); border-right: 7px solid var(--mha-blue-2); }
.media_filed .socialLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    border: 1px solid var(--mha-f1);
    border-radius: 6px;
    color: var(--mha-blue);
    text-decoration: none;
}
.media_filed .socialLink i { font-size: 64px; }
.media_filed .socialLink span { font-size: 16px; font-weight: 600; text-decoration: underline; }
.media_filed .socialLink:hover { background: var(--mha-lblue); }

/* ==========================================================================
   Gallery row
   ========================================================================== */
.layoutshift-about { padding-top: 40px; padding-bottom: 20px; }
.layoutshift-about::after { content: ""; display: table; clear: both; }
.centralimg-layout-2-3, .videoSection, .infographic { height: 276px; }
.centralimg-layout-2-3 a { display: block; height: 100%; }
.centralimg-layout-2-3 img, .videoSection .videos-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.videoSection video.videos-img { background: #000; }
.infographic { position: relative; }
.infographic .bx-wrapper { height: 100%; margin: 0; border: 0; box-shadow: none; background: transparent; }
.infographic .bx-viewport { height: 276px !important; border-radius: 10px; }
.infographic .bannerSlider img { width: 100%; height: 276px; object-fit: cover; border-radius: 10px; }
.infographic .bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    z-index: 60;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    background: var(--mha-text);
    text-indent: 0;
    font-size: 0;
}
.infographic .bx-wrapper .bx-controls-direction a::before {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: "Font Awesome 6 Pro";
    font-size: 22px;
    color: var(--mha-white);
}
.infographic .bx-wrapper .bx-prev { left: 0; }
.infographic .bx-wrapper .bx-next { right: 0; }
.infographic .bx-wrapper .bx-prev::before { content: "\f104"; }
.infographic .bx-wrapper .bx-next::before { content: "\f105"; }
.infographic .bx-wrapper .bx-pager { bottom: 14px; padding: 0; }
.infographic .bx-wrapper .bx-pager.bx-default-pager a { width: 10px; height: 10px; margin: 0 4px; border-radius: 30px; background: rgba(82, 121, 215, .6); }
.infographic .bx-wrapper .bx-pager.bx-default-pager a.active { background: var(--mha-5279); border-radius: 30px; }
.infographic .bx-wrapper .bx-controls-auto .bx-controls-auto-item:first-child { display: none; }
.infographic .bx-wrapper .bx-controls-auto { position: absolute; right: 15px; bottom: 8px; left: auto; width: 40px; z-index: 9; }
.infographic .bx-wrapper .bx-controls-auto a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: rgba(0, 0, 0, .6);
    text-indent: 0;
    font-size: 0;
}
.infographic .bx-wrapper .bx-controls-auto a::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 14px; color: var(--mha-white); }
.infographic .bx-wrapper .bx-controls-auto .bx-start::before { content: "\f04b"; }
.infographic .bx-wrapper .bx-controls-auto .bx-stop::before { content: "\f04c"; }

/* ==========================================================================
   Partner logos strip
   ========================================================================== */
.clientSection { padding: 20px 0 0; background: var(--mha-white); }
.clientSection > .container { max-width: none; padding: 0; }
.client-logos { position: relative; width: 70%; margin: 0 auto 40px; }
/* Single white tile per logo (the older theme drew a second frame around it) */
.client-logos .clientImgArea { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.client-logos .clientImgArea a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    overflow: hidden;
    border: 1px solid var(--mha-f1);
    border-radius: 4px;
    background: var(--mha-white);
    box-shadow: 0 0 5px 0 var(--mha-f1);
}
.client-logos .owl-carousel .owl-item img { width: auto !important; max-width: 100%; height: 80px; padding: 10px; object-fit: contain; }
.client-logos .owl-carousel .owl-stage-outer { padding: 5px 1px; }
.client-logos .owl-nav { position: absolute; top: 50%; left: 0; width: 100%; margin: 0; transform: translateY(-50%); pointer-events: none; }
.client-logos .owl-nav button.owl-prev, .client-logos .owl-nav button.owl-next {
    position: absolute;
    top: 0;
    margin: 0;
    background: transparent !important;
    color: #212529 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    transform: translateY(-50%);
    pointer-events: auto;
}
.client-logos .owl-nav button.owl-prev { left: -30px; }
.client-logos .owl-nav button.owl-next { right: -30px; }
/* Pause / play sits under the strip so it never covers the next arrow */
.client-logos .btnBox { display: flex; justify-content: center; margin-top: 12px; }

/* ==========================================================================
   Footer
   ========================================================================== */
#footer { padding: 33px 60px; background: var(--mha-blue); color: var(--mha-white); }
#footer.px-120 { padding-left: 60px; padding-right: 60px; }
#footer .usefullink, #footer .social-text {
    display: block;
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    color: var(--mha-white);
}
#footer .social-text { text-align: right; }
ul.footer-links-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; text-align: left; }
ul.footer-links-list li { position: relative; width: 33.33%; margin-bottom: 15px; padding: 0 10px 0 17px; line-height: 1.5; }
ul.footer-links-list li .fa-angle-right { position: absolute; top: 4px; left: 0; font-size: 1.125em; color: var(--mha-white); }
ul.footer-links-list li a { display: inline-block; color: var(--mha-white); font-size: 20px; font-weight: 500; text-decoration: none; transition: 350ms ease; }
ul.footer-links-list li a:hover, ul.footer-links-list li a:focus { color: var(--mha-white); text-decoration: underline; }
#footer .footer-below-text { display: inline-block; width: 100%; margin: 1rem 0 0; padding: 0; font-size: 20px; line-height: normal; color: var(--mha-gray); }
#footer .footer-small-text { margin: 8px 0 0; font-size: 14px; color: var(--mha-gray); }
#footer .cookieSettingsLink { color: var(--mha-white); }
.mediaIcons { display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin: 12px 0; padding: 0; list-style: none; }
.mediaIcons li { position: relative; display: flex; align-items: center; justify-content: center; }
.mediaIcons li a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--mha-white); font-size: 20px; text-decoration: none; }
.mediaIcons li a:hover, .mediaIcons li a:focus { color: var(--mha-lblue); }
.subscLogo { display: flex; justify-content: flex-end; gap: 15px; margin: 19px 0; }
.indbtn { position: relative; display: flex; align-items: center; justify-content: space-around; padding: 2px 10px; border-radius: 5px; background: var(--mha-white); }
.indbtn img { max-width: 100px; height: 40px; object-fit: contain; }
#footer .last-updated { text-align: right; }
#footer .last-updated p { margin: 0; font-size: 16px; color: var(--mha-white); }
#footer .footerAddress { margin: 12px 0 0; font-size: 14px; font-style: normal; line-height: 22px; text-align: right; color: var(--mha-gray); }
/* The older external-link arrow is not used on footer logos/icons */
#footer .mediaIcons a::after, #footer .indbtn::after { display: none !important; }

/* ==========================================================================
   Inner pages: navy banner + rounded navy sub-menu bar
   ========================================================================== */
.innerBannerSection { position: relative; min-height: 250px; overflow: hidden; background: var(--mha-blue); }
/* Photo spans the whole banner and fades into navy from the left, as on mha.gov.in */
.innerBannerSection > img { position: absolute; top: 0; left: 0; right: 0; z-index: 0; width: 100% !important; max-width: none; height: 100% !important; object-fit: cover; object-position: right center; }
.innerBannerSection::after,
.innerBannerSection:after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #162f6a 30%, rgba(22, 47, 106, .55) 60%, rgba(22, 47, 106, .1) 100%) !important; opacity: 1; width: auto; height: auto; }
.innerBannerSection .innerBannerbox { position: relative; top: auto; bottom: auto; z-index: 2; padding: 56px 0 72px; }
.innerBannerSection .innerBannerbox .container { max-width: none; padding-left: 120px !important; padding-right: 120px !important; }
.innerBannerSection .innerBannerbox h1 { margin: 0; font-size: 2em; font-weight: 700; line-height: 1.5; color: var(--mha-white); }
.innerBannerSection ol.breadcrumb { margin-bottom: 10px; }
.innerBannerSection ol.breadcrumb li, .innerBannerSection ol.breadcrumb li a { font-size: 16px; color: var(--mha-white); text-decoration: none; }
.innerBannerSection ol.breadcrumb li a:hover { text-decoration: underline; }
.innerBannerSection ol.breadcrumb li:last-child { font-weight: 600; text-decoration: underline; }
.innerBannerSection ol.breadcrumb li + li::before { color: var(--mha-white); }
.innerBannerSection .navigationSection { position: relative; z-index: 3; margin-top: -34px; background: transparent; }
.innerBannerSection:has(.navigationSection) { overflow: visible; padding-bottom: 34px; background: linear-gradient(var(--mha-blue), var(--mha-blue)) top / 100% calc(100% - 34px) no-repeat, var(--mha-white); }
.innerBannerSection:has(.navigationSection) > img { height: calc(100% - 34px) !important; }
.innerBannerSection:has(.navigationSection)::after { bottom: 34px; }
.innerBannerSection .navigationSection .container { max-width: none; padding: 0 120px !important; }
.innerBannerSection .innernav { padding: 0 10px; border-radius: 10px; background: var(--mha-blue); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.innerBannerSection .innernav .nav { padding: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.innerBannerSection .innernav .nav-link { padding: 15px; font-size: 16px; font-weight: 400; line-height: 1; white-space: nowrap; color: var(--mha-white); background: transparent; border: 0; }
.innerBannerSection .innernav .nav-link:hover { color: var(--mha-white); text-decoration: underline; }
.innerBannerSection .innernav .nav-link.active { position: relative; padding-left: 25px; font-weight: 700; color: var(--mha-white); background: transparent; }
.innerBannerSection .innernav .nav-link.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 8px;
    height: 16px;
    transform: translateY(-50%);
    background: radial-gradient(circle, #fff 1.4px, transparent 1.6px) 0 0 / 4px 4px;
    border: 0;
}
.innerBannerSection .innernavBtn { width: 38px; height: 38px; align-self: center; border: 0; border-radius: 4px; background: var(--mha-5279); color: var(--mha-white); }

/* Content headings and buttons on inner pages follow the navy palette */
.maincontent h2, .cmsContent h2, .maincontent h3, .cmsContent h3 { color: var(--mha-blue); }
.btn-02 { background: var(--mha-white); color: var(--mha-blue); border: 1px solid var(--mha-blue); border-radius: 4px; text-transform: uppercase; font-weight: 600; font-size: 14px; }
.btn-02:hover, .btn-02:focus { background: var(--mha-blue); color: var(--mha-white); border-color: var(--mha-blue); }
.btn-03 { background: var(--mha-blue); color: var(--mha-white); border: 1px solid var(--mha-blue); border-radius: 4px; }
.btn-03:hover, .btn-03:focus { background: var(--mha-darkblue); color: var(--mha-white); }
.scroll-to-top { background: var(--mha-blue) !important; color: var(--mha-white) !important; border-radius: 50% !important; }


/* ==========================================================================
   Responsive (breakpoints of the MHA theme)
   ========================================================================== */
@media (max-width: 1439px) {
    .px-120 { padding-left: 80px; padding-right: 80px; }
    .pm-quotes { padding: 40px 60px; }
    .innerBannerSection .innerBannerbox .container, .innerBannerSection .navigationSection .container { padding-left: 80px !important; padding-right: 80px !important; }
}
@media (max-width: 1366px) {
    .px-120 { padding-left: 64px; padding-right: 64px; }
    .innerBannerSection .innerBannerbox .container, .innerBannerSection .navigationSection .container { padding-left: 64px !important; padding-right: 64px !important; }
}
@media (max-width: 1199px) {
    .mhaHeader .px-120 { padding-left: 30px; padding-right: 30px; }
    .menupart { padding: 0 15px; }
    .mhaNav > li > a { font-size: 15px; }
    .searchcontainer { margin: 0 auto; }
    ul.footer-links-list li a, #footer .footer-below-text { font-size: 16px; }
    .pm-quotes { padding: 40px 30px; }
    .pm-message .pmQuoteText p { font-size: 21px; line-height: 27px; }
    .client-logos { width: 80%; }
}
@media (max-width: 991px) {
    .mhaHeader { padding-top: 12px; padding-bottom: 6px; }
    .mhaLogo .logo-text { font-size: 16px; line-height: 21px; }
    .mhaLogo .logo-text strong { font-size: 18px; line-height: 22px; }
    .mhaLogo .logo-text small { font-size: inherit; }
    .mhaLogo .national_emblem { width: 44px; height: 74px; flex-basis: 44px; margin-bottom: 0; }
    .searchcontainer { max-width: none; margin: 10px 0; padding: 0; }
    .pm-img { width: 200px; height: 200px; margin-bottom: 24px; }
    .about-section { justify-content: center; margin-top: 30px; }
    .aboutbox2 { justify-content: center; }
    #footer .social-text, .mediaIcons, .subscLogo, #footer .last-updated, #footer .footerAddress { text-align: left; justify-content: flex-start; }
    #footer .row-gap-4 { row-gap: 0 !important; }
    ul.footer-links-list li a, #footer .footer-below-text { font-size: 14px; }
    .innerBannerSection > img { opacity: .35; }
}
@media (max-width: 767px) {
    .mhaHeader .px-120 { padding-left: 15px; padding-right: 15px; }
    .px-120 { padding-left: 20px; padding-right: 20px; }
    #footer, #footer.px-120 { padding: 15px; }
    ul.footer-links-list li { width: 50%; }
    .ministrybox3 { grid-template-columns: 1fr; gap: 12px; }
    .ministrybox3 a { grid-auto-flow: column; justify-content: center; align-items: center; }
    .our_service ul { grid-template-columns: 1fr; }
    .announcement_sec #nav-tab button { font-size: 14px; height: 52px; }
    .pm-quotes { padding: 30px 20px; }
    .pm-message .pmQuoteText p { font-size: 18px; line-height: 26px; }
    .technology { flex-direction: column; align-items: flex-start; }
    .homebanner .bx-wrapper .bx-prev { left: 10px; }
    .homebanner .bx-wrapper .bx-next { right: 10px; }
    .homebanner .bx-wrapper .bx-pager { right: 64px; bottom: 8px; }
    .homebanner .bx-wrapper .bx-controls-auto { right: 14px; bottom: 6px; }
    .client-logos { width: 72%; }
    .innerBannerSection .innerBannerbox { padding: 32px 0 56px; }
    .innerBannerSection .innerBannerbox .container, .innerBannerSection .navigationSection .container { padding-left: 20px !important; padding-right: 20px !important; }
    .innerBannerSection .innerBannerbox h1 { font-size: 24px; }
}
@media (max-width: 575px) {
    .mhaLogo .logo-text { font-size: 14px; line-height: 19px; }
    .mhaLogo .logo-text strong { font-size: 16px; line-height: 20px; }
    .mhaLogo .logo-text small { font-size: inherit; }
    ul.footer-links-list li { width: 100%; }
}

/* Print: hide the MHA header/footer chrome */
@media print {
    .mhaHeader, #footer, .clientSection, .media-sec, .homebanner { display: none !important; }
}

/* ==========================================================================
   MHA / DBIM icon images (assets/dbim/images/mha)
   ========================================================================== */
h2.title_head span.homeIcons { display: inline-flex; width: 48px; height: 48px; flex: 0 0 48px; }
h2.title_head span.homeIcons img { width: 48px; height: 48px; filter: brightness(0) saturate(100%) invert(14%) sepia(83%) saturate(1386%) hue-rotate(202deg) brightness(96%) contrast(95%); }
.media-sec h2.title_head span.homeIcons img { filter: inherit; }
.menutop li a img { width: 24px; height: 24px; }
.ministrybox3 a img { width: 32px; height: 32px; padding: 4px; }
.ministrybox3 a:hover img, .ministrybox3 a:focus img { filter: brightness(100); }
.mediaIcons li a img { width: 24px; height: 24px; }
.btnBoxArea img { width: 30px; height: 30px; }
h2.title_head svg path:not([fill]) { fill: var(--mha-blue); }

/* Website Policies page: MHA-style link rows */
.policyList { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.policyList li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 8px 16px 0;
    border-bottom: 1px solid var(--mha-a3);
    color: var(--mha-text);
    font-size: 18px;
    text-decoration: none;
}
.policyList li a .fa-angle-right { font-size: 28px; color: var(--mha-blue); }
.policyList li a:hover span, .policyList li a:focus span { color: var(--mha-blue); text-decoration: underline; }
@media (max-width: 767px) { .policyList { grid-template-columns: 1fr; } .policyList li a { font-size: 16px; } }

/* Menu item widths / sizes at the MHA breakpoints */
@media (max-width: 1536px) {
    .mhaNav > li { flex-basis: 220px; width: 220px; }
    .mhaNav > li > a { font-size: 16px; }
}
@media (max-width: 1439px) {
    .mhaNav > li { flex-basis: 140px; width: 140px; }
}

/* ==========================================================================
   Cookie banner (layout of mha.gov.in)
   ========================================================================== */
.cookieBanner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    max-height: 80vh;
    padding: 15px;
    overflow-y: auto;
    border: 0;
    background: var(--mha-white);
    color: #212529;
    box-shadow: 0 4px 8px 10px rgba(35, 35, 47, .08);
}
.cookieBanner > .row { margin: 0; }
.cookieBanner .cookieTitle { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 24px; color: #212529; }
.cookieBanner .cookieText { margin: 0; font-size: 16px; line-height: 24px; color: #212529; }
.cookieBanner .cookieLink { padding: 0; border: 0; background: none; color: #0d6efd; font: inherit; text-decoration: underline; cursor: pointer; }
.cookieBanner .cookieActions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 15px 29px; }
.cookieBanner .cookieActions button {
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px;
    border: 2px outset #000;
    border-radius: 0;
    background: var(--mha-blue);
    color: var(--mha-white);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-transform: none;
}
.cookieBanner .cookieActions button:hover, .cookieBanner .cookieActions button:focus { background: var(--mha-darkblue); color: var(--mha-white); }
.cookieBanner .cookieActions button:focus-visible, .cookieBanner .cookieLink:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }
.cookieBanner .cookieCustom { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mha-gray); }
@media (max-width: 991px) {
    .cookieBanner .cookieTitle, .cookieBanner .cookieText { text-align: center; }
    .cookieBanner .cookieActions { justify-content: center; margin-top: 12px; gap: 10px; }
}
@media (min-width: 1200px) { .mhaLogo .logo-text strong { white-space: nowrap; } }

/* No ↗ marker in the menus (as on mha.gov.in); external menu links keep their
   title, screen-reader text and leave-site confirmation from master.php */
.mhaNav a.externalLink::after,
.innernav a.externalLink::after,
#offcanvasManu a.externalLink::after { content: none !important; display: none !important; }

/* Banner: show the whole image (names along the bottom edge stay visible) and keep
   the dots + play/pause at bottom centre, clear of text placed at the corners */
/* Hero fits the screen: full width when there is room (banners are 1160x525, i.e.
   45.26vw tall), otherwise the height left under the header (--hdr, set in
   master.php), trimming only the top so captions along the bottom stay visible */
.homebanner .bannerSlider img {
    width: 100%;
    max-height: none !important;
    height: min(45.26vw, calc(100vh - var(--hdr, 128px))) !important;
    height: min(45.26vw, calc(100svh - var(--hdr, 128px))) !important;
    object-fit: cover;
    object-position: center bottom;
}
/* Slider controls (home banner and media row): the dots and the pause button sit side by side, centred, with a fixed gap.
   The bar covers the slide so the prev / next arrows keep their place; only the controls themselves take clicks. */
.homebanner .bx-wrapper .bx-controls,
.infographic .bx-wrapper .bx-controls { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: flex-end; gap: 14px; padding-bottom: 10px; pointer-events: none; z-index: 9; }
.homebanner .bx-wrapper .bx-controls .bx-controls-direction,
.infographic .bx-wrapper .bx-controls .bx-controls-direction { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.homebanner .bx-wrapper .bx-controls a,
.homebanner .bx-wrapper .bx-controls .bx-pager,
.infographic .bx-wrapper .bx-controls a,
.infographic .bx-wrapper .bx-controls .bx-pager { pointer-events: auto; }
.homebanner .bx-wrapper .bx-controls .bx-pager,
.infographic .bx-wrapper .bx-controls .bx-pager { position: static; order: 1; left: auto !important; right: auto; bottom: auto; margin: 0; transform: none; }
.homebanner .bx-wrapper .bx-controls .bx-controls-auto,
.infographic .bx-wrapper .bx-controls .bx-controls-auto { position: static; order: 2; left: auto !important; right: auto; bottom: auto; margin: 0; width: 40px; height: 40px; }
/* Media-row carousel: the legacy .sliderArea-01 rules (pager pinned right, 25px navy square, sprite icon) are replaced by the same
   round pause button and pill as the banner */
.infographic.sliderArea-01 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { position: static !important; right: auto; bottom: auto; width: max-content; padding: 4px 6px; border-radius: 8px; background: var(--mha-lblue); align-items: center; }
.infographic.sliderArea-01 .bx-wrapper .bx-controls .bx-controls-auto { position: static !important; right: auto !important; bottom: auto !important; width: 40px !important; height: 40px; padding: 0; border-radius: 50%; background: transparent; }
.infographic.sliderArea-01 .bx-wrapper .bx-controls .bx-controls-auto a { background-image: none !important; background-color: var(--mha-text); }
.infographic.sliderArea-01 .bx-wrapper .bx-pager.bx-default-pager a { width: 10px; height: 10px; margin: 5px 4px; border-radius: 30px; background: var(--mha-5279); opacity: .6; }
.infographic.sliderArea-01 .bx-wrapper .bx-pager.bx-default-pager a:hover,
.infographic.sliderArea-01 .bx-wrapper .bx-pager.bx-default-pager a.active,
.infographic.sliderArea-01 .bx-wrapper .bx-pager.bx-default-pager a:focus { background: var(--mha-blue); border-radius: 30px; opacity: 1; }

/* Social feeds (iframes) inside the white MHA cards */
.media_filed { padding: 0; overflow: hidden; }
.media_filed iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.media_filed.mediaVideos { display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow-y: auto; }
.media_filed.mediaVideos iframe { flex: 0 0 auto; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; background: #000; }
.media_filed .socialLink { margin: 15px; height: calc(100% - 30px); }
.mediaMore { display: block; padding: 8px 12px; background: var(--mha-white); color: var(--mha-blue); font-size: 14px; font-weight: 600; text-align: right; text-decoration: none; border-top: 1px solid var(--mha-f1); }
.mediaMore:hover, .mediaMore:focus { text-decoration: underline; color: var(--mha-blue); }
.videoSection iframe.videos-img { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #000; }

/* X posts (fetched by the server) */
.media_filed.xPosts { overflow-y: auto; }
.xPosts ul { margin: 0; padding: 0; list-style: none; }
.xPosts li { padding: 12px 14px; border-bottom: 1px solid #e6e9ef; }
.xPostHead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.xPostHead img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.xPostHead span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.xPostHead strong { overflow: hidden; color: #0f1419; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.xPostHead small { color: #536471; font-size: 12px; }
.xPostHead i { margin-left: auto; color: #0f1419; }
.xPosts p { margin: 0 0 8px; color: #0f1419; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.xPostImg { display: block; width: 100%; max-height: 180px; margin-bottom: 8px; border-radius: 10px; object-fit: cover; }
.xPosts li > a { color: var(--mha-blue-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.xPosts li > a:hover { text-decoration: underline; }

/* Important Links: chevron only (no extra ↗ marker), as on mha.gov.in */
.zonal-cont a.externalLink::after { content: none !important; display: none !important; }

/* About Us: key persons (3 from the CMS + DG), equal cards aligned with the text */
.aboutbox2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.aboutbox2 li { flex: 0 1 calc(25% - 12px); min-width: 150px; }
.aboutbox-mins { display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; text-decoration: none; color: inherit; }
.aboutPhoto { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 190px; margin-bottom: 12px; overflow: hidden; border: 2px solid var(--mha-gray); border-bottom: 6px solid var(--mha-blue); background: var(--mha-white); }
.aboutPhoto img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.aboutbox-mins .nameminister { display: flex; flex-direction: column; gap: 2px; }
.aboutbox-mins .textsmall { color: var(--mha-text); font-size: 18px; font-weight: 600; line-height: 1.3; }
.aboutbox-mins .textbold { color: var(--mha-555); font-size: 14px; line-height: 1.35; text-transform: uppercase; }
.aboutbox-mins:hover .textsmall, .aboutbox-mins:focus .textsmall { color: var(--mha-blue); text-decoration: underline; }
@media (max-width: 1199px) { .aboutbox2 { margin-top: 28px; } }
@media (max-width: 767px) { .aboutbox2 li { flex-basis: calc(50% - 8px); min-width: 0; } .aboutPhoto { height: 160px; } }

/* Key Offerings: readable cards (no stretched justified text), equal heights, View More */
.our_service ul { grid-auto-rows: 1fr; }
.our_service ul li { display: flex; flex-direction: column; min-height: 150px; padding: 22px 24px; }
.our_service ul li a { font-size: 18px; line-height: 1.3; }
.our_service ul li p { text-align: left; line-height: 1.5; color: #333; }
.our_service + .viewmore { margin-top: 15px; }
/* Engage carousel: icon fills the circle like the MHA persona image */
.stake_hold .personaImg img { width: 62% !important; height: 62%; }
/* The photo frame belongs to the photo only (older rule framed every span in the card) */
.aboutbox-mins .nameminister, .aboutbox-mins .nameminister span { margin: 0; overflow: visible; border: 0; background: none; }
.aboutbox-mins .nameminister { margin-top: 0; }
/* Key Offerings text: at most 3 lines with "…" (as on mha.gov.in), so cards stay compact on every screen */
.our_service ul li p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* Social cards: same height in a row, "View on …" bar always at the bottom */
.media-sec .row > [class*="col-"] { display: flex; }
.media-head { display: flex; flex-direction: column; width: 100%; }
.media-head .media_filed { flex: 1 1 auto; }
.media-head .mediaMore { margin-top: auto; }
.media_filed .socialLink::after { content: none !important; display: none !important; }

/* DBIM typeface everywhere: the old theme's reset set "Lato" (never loaded - blocked by the
   CSP - so text fell back to the browser default) on these elements. Icon classes keep
   their own font (class selectors win over these element selectors). */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-family: "Noto Sans", "Noto Sans Devanagari", sans-serif; }
.policyCookie { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; color: var(--mha-text); }
.policyCookie .viewmore { float: none; margin: 0; cursor: pointer; }


/* ==========================================================================
   Lighthouse fixes (performance / accessibility)
   ========================================================================== */
/* Target size (WCAG 2.2 SC 2.5.8): slider dots keep their look, the clickable area is 24 x 24 px */
.bx-wrapper .bx-pager.bx-default-pager a.bx-pager-link,
.owl-theme .owl-dots .owl-dot,
.owl-dots .owl-dot {
    box-sizing: border-box !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 7px !important;
    background-clip: content-box !important;
}
.owl-dots .owl-dot { display: inline-flex; align-items: center; justify-content: center; }
.owl-dots .owl-dot span { margin: 0 !important; }

/* Slider markup before the script runs: show only the first slide, so the page below does not
   jump when the slider is built (layout shift). The built slider sits inside .bx-wrapper. */
.homebanner > .bannerSlider > div:nth-child(n+2),
.infographic > .bannerSlider > div:nth-child(n+2) { display: none; }

/* X post images: fixed box, so late-loading images do not move the posts below them */
.xPostImg { height: 180px; }

/* Numbers and bullets of lists in CMS content were cut off at the left edge: the list had no left
   padding, so its markers sat outside .cmsContent, which clips its overflow. */
.cmsContent ol, .cmsContent ul { padding-left: 2rem; }
.cmsContent ol ol, .cmsContent ol ul, .cmsContent ul ol, .cmsContent ul ul { padding-left: 1.75rem; }

/* Six menu tabs (DBIM 3.0): the tabs share the width of the bar, so long names such as
   "Knowledge Hub & Outreach" do not run into their neighbour; the last dropdowns open towards the left. */
.mhaNav { justify-content: space-between; }
.mhaNav > li { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 10px; }
.mhaNav > li:first-child { flex: 0 0 auto; padding: 0 28px; }
.mhaNav > li > a { font-size: 18px; }
/* the dropdown is exactly as wide as the menu tab it belongs to (long names wrap inside it) */
.mhaNav > li > ul { width: 100%; min-width: 0; text-align: left; }
.mhaNav > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }
@media (max-width: 1399px) { .mhaNav > li > a { font-size: 16px; } .mhaNav > li { padding: 0 6px; } }

/* ==========================================================================
   Inner pages: the page body uses the same side margins as the header, the banner and the section bar
   (120px; 80px up to 1439px; 64px up to 1366px; 20px on phones). The old .container padding (62px) put the text left of the banner.
   ========================================================================== */
.maincontent > .container { max-width: none; padding-left: 120px !important; padding-right: 120px !important; }
@media (max-width: 1439px) { .maincontent > .container { padding-left: 80px !important; padding-right: 80px !important; } }
@media (max-width: 1366px) { .maincontent > .container { padding-left: 64px !important; padding-right: 64px !important; } }
@media (max-width: 767px) { .maincontent > .container { padding-left: 20px !important; padding-right: 20px !important; } }

/* ==========================================================================
   One side margin for the whole page (alignment test, all pages): the logo and tools of the header, the first and last tab of the
   menu bar, the banner title, the page body and the footer all start and end on the same two vertical lines.
   --mha-g: 120px; 80px up to 1439px; 64px up to 1366px; 40px up to 1199px; 20px on phones.
   Before: the menu bar started at 62px and the footer at 60px (the page body at 120px); on phones the header used 15px and the
   body 20px; from 992 to 1199px the header used 30px and the body 64px.
   ========================================================================== */
:root { --mha-g: 120px; }
@media (max-width: 1439px) { :root { --mha-g: 80px; } }
@media (max-width: 1366px) { :root { --mha-g: 64px; } }
@media (max-width: 1199px) { :root { --mha-g: 40px; } }
@media (max-width: 767px) { :root { --mha-g: 20px; } }
.px-120, .mhaHeader .px-120, #footer.px-120 { padding-left: var(--mha-g); padding-right: var(--mha-g); }
.maincontent > .container,
.innerBannerSection .innerBannerbox .container, .innerBannerSection .navigationSection .container { padding-left: var(--mha-g) !important; padding-right: var(--mha-g) !important; }
/* menu bar: Home has 28px and every other tab 10px of space inside it, so the text of the first and last tab lands on the margin */
.menupart { padding-left: max(0px, calc(var(--mha-g) - 28px)); padding-right: max(0px, calc(var(--mha-g) - 10px)); }

/* ==========================================================================
   Home page, About Us: short paragraph across the wide column, the Director General as a big square photo,
   the other key persons (Prime Minister, Home Minister) as small rows under it
   ========================================================================== */
.aboutinner-wide { max-width: none; font-size: 18px; line-height: 1.7; text-align: justify; text-justify: inter-word; hyphens: auto; }
.dgFeature { display: block; max-width: 220px; margin-left: auto; margin-right: auto; color: inherit; text-align: center; text-decoration: none; }
.dgFeature .dgPhoto { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 2px solid var(--mha-gray); border-bottom: 6px solid var(--mha-blue); background: var(--mha-white); }
.dgFeature .dgPhoto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.dgFeature .nameminister { display: block; margin-top: 12px; }
.dgFeature .textsmall { display: block; color: var(--mha-text); font-size: 20px; font-weight: 600; line-height: 1.3; }
.dgFeature .textbold { display: block; color: var(--mha-555); font-size: 15px; line-height: 1.35; text-transform: uppercase; }
.dgFeature:hover .textsmall, .dgFeature:focus .textsmall { color: var(--mha-blue); text-decoration: underline; }
.otherLeaders { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.otherLeaders a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--mha-gray); border-radius: 8px; color: inherit; text-decoration: none; background: var(--mha-white); }
.otherLeaders a:hover, .otherLeaders a:focus { border-color: var(--mha-blue); }
.otherLeaders img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--mha-white); }
.otherLeaders strong { display: block; font-size: 16px; line-height: 1.3; color: var(--mha-text); }
.otherLeaders small { display: block; font-size: 13px; line-height: 1.3; color: var(--mha-555); text-transform: uppercase; }
@media (max-width: 1199px) { .dgFeature { margin-top: 24px; } .otherLeaders { max-width: 360px; margin-left: auto; margin-right: auto; } }

/* ==========================================================================
   Organisation chart (nested lists in page content): <div class="orgchart"><ul><li><span class="box">Head</span><ul><li>...
   Dark blue = head, mid blue = next level, light blue = the rest. Lines are drawn with CSS; on small screens it becomes an indented list.
   ========================================================================== */
.orgchart { --oc-line: var(--mha-5279); margin: 24px 0; overflow-x: auto; }
.orgchart > ul, .orgchart ul ul { display: flex; justify-content: center; position: relative; margin: 0; padding: 26px 0 0; list-style: none; }
.orgchart > ul { padding-top: 0; }
.orgchart li { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 26px 8px 0; text-align: center; }
.orgchart > ul > li { padding-top: 0; }
.orgchart li::before, .orgchart li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 26px; border-top: 2px solid var(--oc-line); }
.orgchart li::after { right: auto; left: 50%; border-left: 2px solid var(--oc-line); }
.orgchart > ul > li::before, .orgchart > ul > li::after, .orgchart li:only-child::before, .orgchart li:only-child::after { display: none; }
.orgchart li:only-child { padding-top: 0; }
.orgchart li:first-child::before, .orgchart li:last-child::after { border-top: 0; }
.orgchart li:last-child::before { border-right: 2px solid var(--oc-line); }
.orgchart ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 26px; border-left: 2px solid var(--oc-line); }
.orgchart .box { display: block; min-width: 150px; max-width: 220px; margin: 0; padding: 10px 14px; border: 2px solid var(--mha-blue); border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--mha-white); background: var(--mha-blue-2); }
.orgchart > ul > li > .box { color: var(--mha-white); background: var(--mha-blue); }
.orgchart > ul > li > ul > li > ul > li > .box { color: var(--mha-blue); background: var(--mha-lblue); }
@media (max-width: 991px) {
    .orgchart > ul, .orgchart ul ul { display: block; padding: 0 0 0 22px; margin-left: 12px; border-left: 2px solid var(--oc-line); }
    .orgchart > ul { margin-left: 0; padding-left: 0; border-left: 0; }
    .orgchart ul ul::before, .orgchart li::after { display: none; }
    .orgchart li { display: block; padding: 12px 0 0 18px; text-align: left; }
    .orgchart > ul > li { padding-left: 0; }
    .orgchart li::before { top: 32px; right: auto; left: -2px; width: 18px; height: 0; border-top: 2px solid var(--oc-line); border-right: 0; }
    .orgchart > ul > li::before { display: none; }
    .orgchart li:only-child { padding-top: 12px; }
    .orgchart > ul > li:only-child { padding-top: 0; }
    .orgchart li:only-child::before { display: block; }
    .orgchart > ul > li:only-child::before { display: none; }
    .orgchart li:first-child::before, .orgchart li:last-child::before { border-top: 2px solid var(--oc-line); border-right: 0; }
    .orgchart .box { display: inline-block; max-width: 100%; }
}

/* ==========================================================================
   Sub-menu (fly-out) of a menu item: pages below the item open to the side of the dropdown
   ========================================================================== */
.mhaNav > li > ul a { text-align: left; padding-left: 16px; padding-right: 16px; }
.mhaNav ul li { position: relative; }
.mhaNav ul ul { position: absolute; top: 0; left: 100%; z-index: 21; width: max-content; min-width: 240px; max-width: 340px; margin: 0; padding: 0; list-style: none; background: rgba(0, 0, 0, .7); border-radius: 0 6px 6px 6px; opacity: 0; visibility: hidden; transition: opacity 250ms linear, visibility 250ms linear; }
.mhaNav ul ul a { white-space: normal; }
.mhaNav li.has-sub:hover > ul, .mhaNav li.has-sub:focus-within > ul { opacity: 1; visibility: visible; }
.mhaNav > li > ul li.has-sub > a { position: relative; padding-right: 34px; }
.mhaNav > li > ul li.has-sub > a::after { content: ''; position: absolute; top: 50%; right: 16px; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.mhaNav > li:nth-last-child(-n+2) ul ul { left: auto; right: 100%; border-radius: 6px 0 6px 6px; }
/* Below 1200px (laptops, tablets) there is no room beside the dropdown: the closed fly-outs of the 4th tab stuck out past the screen edge
   and made the page scroll sideways (85px at 1024px). The pages of a sub-menu now open below their item, indented, inside the dropdown. */
@media (max-width: 1199px) {
    .mhaNav > li > ul { min-width: 220px; }
    .mhaNav ul ul { position: static; display: none; width: auto; min-width: 0; max-width: none; border-radius: 0; box-shadow: none; background: rgba(255, 255, 255, .08); transition: none; }
    .mhaNav li.has-sub:hover > ul, .mhaNav li.has-sub:focus-within > ul { display: block; }
    .mhaNav ul ul a { padding-left: 32px; }
    .mhaNav ul ul ul a { padding-left: 48px; }
    .mhaNav > li > ul li.has-sub > a::after { right: 18px; margin-top: -6px; transform: rotate(45deg); }
    .mhaNav > li:nth-last-child(-n+2) ul ul { border-radius: 0; }
}
/* Lists: the old rule ".maincontent ul { margin-left: 12px; list-style: disc }" beat Bootstrap's .list-unstyled, so card lists (Divisions, documents,
   publications) showed a bullet in front of the first card of every row and started 12px right of the page title; the Sitemap list had the same
   12px. Card lists use the row's own negative margin again, so the cards start exactly under the title. */
.maincontent ul.list-unstyled, .maincontent ol.list-unstyled { margin-left: 0; padding-left: 0; list-style: none; }
.maincontent ul.row.list-unstyled, .maincontent ol.row.list-unstyled { margin-left: calc(-.5 * var(--bs-gutter-x)); margin-right: calc(-.5 * var(--bs-gutter-x)); }
.maincontent .sitemap ul { margin-left: 0; }
/* Division cards: the padding of the old style sheet only applied inside .recentDocumentsSection, so the text touched the card border */
.maincontent ul.recentDocument .card { min-height: 140px; padding: 20px; border: 1px solid #c9d3e6; border-radius: 6px; box-shadow: 0 4px 10px rgba(35, 35, 47, .08); }
.maincontent ul.recentDocument .card:hover, .maincontent ul.recentDocument .card:focus-visible { border-color: var(--mha-blue); }
/* The "fill in all fields" note on forms has its own padding again (".maincontent p { padding: 0 }" removed it) */
.maincontent .formInstructions { padding: 10px 14px; }
/* Contact Us: the old style justified every line of the narrow address column, which spread the words apart ("Bureau of Police Research &");
   the text is left aligned, and the Key officials block under it no longer starts 30px right of its own heading. */
.contactUsArea .contactInfo p { text-align: left; overflow-wrap: break-word; }
.contactUsArea section .contactInfo p { padding-left: 0; }
/* Contact Us: the page text (directorates, control room, directory, key officials) flows into columns under the address and the map;
   the "Key officials" heading runs across all columns. One column on a phone. */
.contactUsArea .contactBody { margin-top: 36px; column-width: 280px; column-gap: 36px; }
.contactUsArea .contactBody p { margin: 0 0 18px; break-inside: avoid; line-height: 1.6; }
.contactUsArea .contactBody h2 { column-span: all; margin: 14px 0 18px; padding-top: 22px; border-top: 1px solid #c9d3e6; }
.contactUsArea .contactBody a { overflow-wrap: anywhere; }
/* phone menu: the sub-pages are listed under their item, indented */
.category-menu .subcategory-sub { margin: 2px 0 4px 14px; padding: 0 0 0 12px; list-style: none; border-left: 2px solid var(--mha-5279); }
.category-menu .subcategory-sub a { display: block; padding: 6px 8px; font-size: 14px; }
.category-menu .subcategory-sub .subcategory-sub { margin-left: 8px; }

/* ==========================================================================
   Our Team: leadership cards (Director General alone on top, then the Inspectors General, then the Deputy Inspectors General).
   Same idea as the leadership page of npti.gov.in: a centred heading per rank and a card per officer (photo on top, name and post below),
   cards wrap and stay centred. Every photo is shown in a square frame cut from the top, so faces line up whatever shape the file has.
   The cards come from the CMS (Admin > Homepage Links > "Our Team: ..." groups: photo, name and post in English and Hindi). The page text
   (Admin > Page and Menu > Our Team, English and Hindi) holds the headings and the places of the cards:
   <section class="leaderSection"><h2>Inspectors General</h2>[leaders ig]</section>   ([leaders dg], [leaders ig], [leaders dig]).
   Markup of a row (leader_cards() in app/Helpers/dbim_helper.php): <ul class="leaderGrid leaderGrid--ig"><li class="leaderCard"><img>
   <div class="leaderCaption"><strong class="leaderName">..</strong><span class="leaderPost">..</span></div></li>
   ========================================================================== */
.cmsContent .leaderSection { margin: 0 0 44px; }
.cmsContent .leaderSection > h2 { margin: 0 0 22px; text-align: center; }
.cmsContent .leaderSection > h2::after { content: ""; display: block; width: 56px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--mha-5279); }
.cmsContent ul.leaderGrid { --gap: 24px; --cols: 5; --max: 300px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); max-width: calc(var(--cols) * var(--max) + (var(--cols) - 1) * var(--gap)); margin: 0 auto; padding: 0; list-style: none; }
.cmsContent ul.leaderGrid--dg { --cols: 1; }
.cmsContent ul.leaderGrid--ig, .cmsContent ul.leaderGrid--dir { --cols: 5; --max: 250px; }
.cmsContent ul.leaderGrid--dig { --cols: 6; --gap: 20px; --max: 210px; }
/* the width of a card is a share of the row, but never more than --max, so on a wide screen the Director General stays the biggest */
.cmsContent ul.leaderGrid > li { display: flex; flex: 0 0 min(calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), var(--max, 300px)); min-width: 0; margin: 0; padding: 0; }
.leaderCard { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #c9d3e6; border-radius: 6px; background: var(--mha-white); text-align: center; }
.cmsContent .leaderCard img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 10%; border-bottom: 5px solid var(--mha-blue); background: var(--mha-white); }
/* officer without a photo yet: a quiet square, so the row stays even */
.leaderNoPhoto { display: block; width: 100%; aspect-ratio: 1 / 1; border-bottom: 5px solid var(--mha-blue); background: var(--mha-lblue); }
.leaderCaption { flex: 1; padding: 12px 10px 14px; }
.leaderName { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--mha-blue); }
.leaderPost { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; text-transform: uppercase; color: var(--mha-555); }
.leaderGrid--dg .leaderName { font-size: 20px; }
.leaderGrid--dg .leaderPost { font-size: 15px; }
.leaderGrid--dig .leaderName { font-size: 16px; }
.leaderGrid--dig .leaderPost { font-size: 13px; }
@media (max-width: 1199px) {
    .cmsContent ul.leaderGrid--ig, .cmsContent ul.leaderGrid--dir, .cmsContent ul.leaderGrid--dig { --cols: 3; --gap: 20px; }
}
@media (max-width: 575px) {
    .cmsContent ul.leaderGrid--ig, .cmsContent ul.leaderGrid--dir, .cmsContent ul.leaderGrid--dig { --cols: 2; --gap: 14px; }
    .cmsContent .leaderSection { margin-bottom: 32px; }
    .leaderName, .leaderGrid--dig .leaderName { font-size: 15px; }
    .leaderPost, .leaderGrid--dig .leaderPost { font-size: 12px; }
    .leaderCaption { padding: 10px 8px 12px; }
}

/* ==========================================================================
   Organisation structure (About Us > Organisation Structure), drawn like the chart of the Division: DG, ADG, the line to the six Inspectors General,
   their Deputy Inspectors General and officers. The chart is edited in Admin > Page and Menu > Organisation Chart (table org_chart); the page text
   (Admin > Page and Menu > Organisation Structure, English and Hindi) holds [orgchart]; org_chart_html() (app/Helpers/dbim_helper.php) turns it into two
   things, built from the same boxes:
   1. <div class="orgmap" aria-hidden="true" style="--cw:..;--ch:..;--bw:..;--bh:..">: the chart for screens 1200px wide and more; --cw x --ch is the size of the
      drawing and --bw x --bh the size of a box, in the same units. Every box is <span class="box" style="--x:..;--y:..">Label</span> and every
      line a <span class="ln h|v" style="--x:..;--y:..;--w:..|--h:..">; everything scales with the page width.
   2. <div class="orgstruct">: the same boxes as a nested list (the version for tablets and phones, and the text read by screen readers).
   ========================================================================== */
.cmsContent .orgmap { display: none; }
.cmsContent .orgstruct { --os-line: var(--mha-5279); margin: 8px 0 36px; }
.cmsContent .orgstruct ul { margin: 0; padding: 0; list-style: none; }
.cmsContent .orgstruct .box { display: block; margin: 0; padding: 8px 10px; border: 1px solid var(--mha-5279); border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--mha-blue); background: var(--mha-white); overflow-wrap: anywhere; }
.cmsContent .orgstruct .orgspine { display: flex; flex-direction: column; align-items: center; }
.cmsContent .orgstruct .orgspine .box { min-width: 170px; padding: 12px 28px; font-size: 17px; color: var(--mha-white); background: var(--mha-5279); }
.cmsContent .orgstruct .orgspine .box:nth-child(2) { position: relative; margin-top: 26px; }
.cmsContent .orgstruct .orgspine .box:nth-child(2)::before { content: ''; position: absolute; left: 50%; bottom: 100%; height: 26px; border-left: 2px solid var(--os-line); }
.cmsContent .orgstruct .orgwings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.cmsContent .orgstruct .orgwings > li { position: relative; padding: 10px; border: 1px solid #d7e1f5; border-radius: 8px; background: #f6f9ff; }
.cmsContent .orgstruct .orgwings > li > .box { padding: 10px 8px; font-size: 15px; color: var(--mha-white); background: var(--mha-5279); border-color: var(--mha-5279); }
.cmsContent .orgstruct .orgwings > li > ul { margin-top: 12px; }
.cmsContent .orgstruct .orgwings ul ul { margin-left: 6px; }
.cmsContent .orgstruct .orgwings li li { position: relative; padding-top: 8px; padding-left: 12px; }
.cmsContent .orgstruct .orgwings li li::before { content: ''; position: absolute; left: 0; top: 26px; width: 10px; border-top: 2px solid var(--os-line); }
.cmsContent .orgstruct .orgwings li li::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--os-line); }
.cmsContent .orgstruct .orgwings li li:last-child::after { bottom: auto; height: 26px; }
.cmsContent .orgstruct .orgwings li li > .box { background: var(--mha-lblue); border-color: #aebfe6; }
.cmsContent .orgstruct .orgwings li li li > .box { padding: 7px 4px; font-size: 13px; font-weight: 500; background: var(--mha-white); border-color: #aebfe6; }
.cmsContent ul.orgkey { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 28px; margin: 12px 0 0; padding: 0; list-style: none; }
.cmsContent ul.orgkey li { margin: 0; padding: 0; font-size: 15px; }
@media (max-width: 767px) { .cmsContent .orgstruct .orgwings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .cmsContent .orgstruct .orgwings { grid-template-columns: minmax(0, 1fr); } .cmsContent .orgstruct .orgspine .box { min-width: 140px; } }

/* 1200px and wider: the chart itself; the list stays for screen readers */
@media (min-width: 1200px) {
    .cmsContent .orgmap { display: block; --k: calc(100cqw / var(--cw)); --os-line: var(--mha-blue-2); container-type: inline-size; position: relative; width: 100%; aspect-ratio: var(--cw) / var(--ch); margin: 14px 0 34px; }
    .cmsContent .orgmap .ln { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); background: var(--os-line); }
    .cmsContent .orgmap .ln.h { width: calc(var(--w) * var(--k)); height: 2px; margin-top: -1px; }
    .cmsContent .orgmap .ln.v { width: 2px; height: calc(var(--h) * var(--k)); margin-left: -1px; }
    .cmsContent .orgmap .box { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: calc(var(--bw) * var(--k)); height: calc(var(--bh) * var(--k)); padding: 0 1px; overflow: hidden; border-radius: 2px; font-size: clamp(11px, calc(15 * var(--k)), 18px); font-weight: 600; line-height: 1.12; text-align: center; overflow-wrap: anywhere; color: var(--mha-white); background: var(--mha-5279); }
    .cmsContent .orgstruct { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* the chart is wider than the text column: it uses the empty side margins of the page (all but 24px on each side) so that the boxes are larger */
@media (min-width: 1200px) {
    @supports selector(:has(*)) {
        .cmsContent:has(> .orgmap) { overflow: visible; }
        .cmsContent > .orgmap { width: calc(100% + 2 * (var(--mha-g) - 24px)); margin-left: calc(24px - var(--mha-g)); margin-right: calc(24px - var(--mha-g)); }
    }
}

/* Lists in page content numbered with Hindi letters: <ol class="list-hi"> gives क) ख) ग) ... (the CMS editor can switch to code view to use it) */
@counter-style hindi-letters { system: fixed; symbols: "क" "ख" "ग" "घ" "ङ" "च" "छ" "ज" "झ" "ञ"; suffix: ") "; fallback: decimal; }
.maincontent ol.list-hi, ol.list-hi { list-style: hindi-letters; }