/* BRO overrides on top of the BPR&D / MHA DBIM theme */

/* About BRO: DBIM headshots are 1:1 on white, so the frame is a square and the photo fills it */
.aboutbox2 { justify-content: center; }
/* Three leaders per row on desktop, tablet and phone (text shrinks on smaller screens); a fourth or later card starts a
   new centred row. Sizes stay on the DBIM 4.3 type scale (desktop 20/16, tablet 16/12, phone 12/10). */
.aboutbox2 { flex-wrap: wrap; }
.aboutbox2 li { flex: 0 1 calc(33.333% - 11px); max-width: calc(33.333% - 11px); min-width: 0; }
.aboutbox-mins .aboutPhoto { display: block; aspect-ratio: 1 / 1; height: auto; background: #fff; }
.aboutbox-mins .aboutPhoto img { display: block; width: 100%; height: 100%; max-width: 100%; margin: 0; object-fit: cover; object-position: center top; }
.aboutbox-mins .textsmall, .aboutbox-mins .textbold { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 991px) {
  .aboutbox2 { gap: 12px; }
  .aboutbox2 li { flex-basis: calc(33.333% - 8px); max-width: calc(33.333% - 8px); }
  .aboutbox-mins .textsmall { font-size: 16px; }
  .aboutbox-mins .textbold { font-size: 12px; }
}
@media (max-width: 767px) {
  .aboutbox2 { gap: 8px; }
  .aboutbox2 li { flex-basis: calc(33.333% - 6px); max-width: calc(33.333% - 6px); }
  .aboutbox-mins .aboutPhoto { height: auto; margin-bottom: 8px; border-bottom-width: 4px; }
  .aboutbox-mins .textsmall { font-size: 12px; line-height: 1.25; }
  .aboutbox-mins .textbold { font-size: 10px; line-height: 1.3; }
}

/* PM quote portrait: the whole square is centred in the circle */
.pm-img img { object-fit: contain; object-position: center; }

/* About BRO: several paragraphs of CMS text, readable line length and spacing */
/* Body text is justified at BRO's request (DBIM 4.1.1 recommends left-aligned) */
.aboutLong p { margin: 0 0 14px; line-height: 1.5; text-align: justify; }
.aboutMinistry .viewmore { display: inline-block; margin: 4px 0 22px; }

/* Inner pages: older BRO page templates inside the BPR&D inner frame (banner, breadcrumb, section bar, .maincontent) */
.maincontent .cmsContent p, .maincontent .cmsContent li, .maincontent .cmsContent td, .maincontent .cmsContent th { font-size: 16px; line-height: 1.5; }
.maincontent .cmsContent p { margin: 0 0 12px; }
/* Body text (paragraphs, list items, blocks the older pages set to justify inline) is justified at BRO's request.
   Other blocks and table text stay left (DBIM 4.1.1), so form rows and button groups are not stretched. */
.maincontent .cmsContent div, .maincontent .cmsContent span { text-align: left !important; }
.maincontent .cmsContent p, .maincontent .cmsContent li, .maincontent .cmsContent [style*="justify"] { text-align: justify !important; }
.maincontent .cmsContent td, .maincontent .cmsContent th { text-align: left; }
/* phones: hyphenate justified text so narrow lines don't open wide gaps between words */
@media (max-width: 575px) {
    .maincontent .cmsContent p, .maincontent .cmsContent li, .maincontent .cmsContent [style*="justify"], .aboutLong p { -webkit-hyphens: auto; hyphens: auto; }
}
.maincontent .cmsContent .text-center, .maincontent .cmsContent [class*="center"], .maincontent .cmsContent .bgbr-img p,
.maincontent .cmsContent [style*="text-align: center"], .maincontent .cmsContent [style*="text-align:center"] { text-align: center !important; }
/* red headings set inline by the old templates -> DBIM key colour */
.maincontent :is(h1, h2, h3, h4, h5)[style*="rgb(207"], .maincontent :is(h1, h2, h3, h4, h5)[style*="#cf0303"],
.maincontent :is(h1, h2, h3, h4, h5)[style*="#cc0000"], .maincontent :is(h1, h2, h3, h4, h5)[style*="#c00"],
.maincontent :is(h1, h2, h3, h4, h5)[style*="red"] { color: var(--mha-blue, #162F6A) !important; }
.maincontent .cmsContent h2, .maincontent .cmsContent h3 { margin: 18px 0 10px; line-height: 1.3; }
.maincontent .cmsContent img { max-width: 100%; height: auto; }
/* the old templates carry their own containers: do not pad twice */
.maincontent .cmsContent .container, .maincontent .cmsContent .container-fluid { max-width: 100%; padding-left: 0; padding-right: 0; }
.maincontent .cmsContent table { max-width: 100%; }
/* tables keep display:table; wide ones scroll inside .table-responsive / .w*-tablewrap wrappers */
.maincontent .cmsContent table { max-width: 100%; } .cms-table-scroll { overflow-x: auto; }


/* ---- Shared helpers ---- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Inner banner h1: DBIM H1 36 px (mobile 24 px); beats mha-theme.css 2em ---- */
.innerBannerSection .innerBannerbox h1 { font-size: 36px; line-height: 1.3; }
@media (max-width: 767px) { .innerBannerSection .innerBannerbox h1 { font-size: 24px; } }

/* ---- One BRO button (replaces bro-btn / w5-btn / w7-btn / project-button duplicates) ---- */
.bro-btn, .w5-btn, .w7-btn, .project-button {
  display: inline-block; min-width: 120px; padding: 10px 24px; font-size: 16px; line-height: 1.5; font-weight: 600; text-align: center;
  color: #fff; background: #162F6A; border: 2px solid #162F6A; border-radius: 4px; text-decoration: none; text-transform: none; cursor: pointer;
}
.bro-btn:hover, .w5-btn:hover, .w7-btn:hover, .project-button:hover { background: #162f6a; border-color: #162f6a; color: #fff; }
.bro-btn:focus-visible, .w5-btn:focus-visible, .w7-btn:focus-visible, .project-button:focus-visible { outline: 3px solid #0D6EFD; outline-offset: 2px; color: #fff; }
.bro-btn[disabled], .bro-btn.disabled, .bro-btn[aria-disabled="true"], .w5-btn[disabled], .w5-btn.disabled, .w7-btn:disabled, .w7-btn[aria-disabled="true"], .project-button[disabled] {
  background: #C6C6C6; border-color: #C6C6C6; color: #606060; cursor: not-allowed; pointer-events: none;
}
.bro-btn-outline, .w7-btn-outline { background: #fff; color: #162F6A; }
.bro-btn-outline:hover, .w7-btn-outline:hover { background: #D2DFFF; color: #162F6A; border-color: #162F6A; }
.btn-02 { text-transform: none; }
@media (max-width: 767px) { .bro-btn, .w5-btn, .w7-btn, .project-button { font-size: 16px; } }
.maincontent .cmsContent i.fa-regular { color: #162F6A; }

/* Home banner fills the screen below the header on load, as on mha.gov.in (--banner-h is set by the script on the home page) */
.homebanner .bx-viewport { height: auto !important; }
.homebanner .bannerSlider img { width: 100% !important; max-height: none !important; height: var(--banner-h, calc(100vh - 210px)) !important; min-height: 320px; object-fit: cover; object-position: center; }

/* Announcements ticker: heading, scrolling text and pause button always on one line, also on phones */
@media (max-width: 767px) {
    .announceTicker__inner { flex-wrap: nowrap; gap: 10px; padding-top: 0; padding-bottom: 0; }
    .announceTicker__head { flex: 0 0 auto; order: 0; flex-wrap: nowrap; white-space: nowrap; }
    .announceTicker__viewport { order: 0; flex: 1 1 auto; flex-basis: 0; }
    .announceTicker__pause { order: 0; }
}

/* Main menu (DBIM 4.5 / 5.4): equal-width items, line height 1.4, arrow on items with a sub-menu, visible hover and keyboard focus */
.mhaNav { justify-content: stretch; }
.mhaNav > li, .mhaNav > li:first-child { flex: 1 1 0; width: auto; padding: 0; }
.mhaNav > li:first-child { flex: 0 0 110px; }
.mhaNav > li > a { display: block; padding: 18px 8px; line-height: 1.4; }
.mhaNav > li.parent > a::after { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); vertical-align: middle; }
.mhaNav > li > a { position: relative; }
/* current-section underline moves to ::before so ::after can carry the arrow */
.mhaNav > li > a.is-active::after { content: none; }
.mhaNav > li.parent > a.is-active::after { content: ''; position: static; width: 7px; height: 7px; background: none; transform: rotate(45deg); }
.mhaNav > li > a.is-active::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 5px; background: var(--mha-blue); }
.mhaNav > li > a:focus-visible { outline: 3px solid #ffbf00; outline-offset: -3px; }

/* Main menu as on the DBIM ministry sites: Home, then the five sections, bold 16 px, small arrow, current item blue with a bar under it */
.mhaNav { justify-content: flex-start; padding: 0; }
.mhaNav > li, .mhaNav > li:first-child { flex: 1 1 0; padding: 0; text-align: center; }
.mhaNav > li > a { font-size: 16px; font-weight: 600; color: #1a1a1a; padding: 16px 8px; }
.mhaNav > li > a.is-active { color: var(--mha-blue); }
.mhaNav > li.parent > a::after { width: 6px; height: 6px; margin-left: 8px; border-width: 0 1.5px 1.5px 0; }
.mhaNav > li > a.is-active::before { left: 50%; right: auto; width: 56px; transform: translateX(-50%); height: 4px; }

/* ---- W2: co-branding logos in the header (DBIM: at most two, hidden when empty) ---- */
.mhaHeaderTop .hasCobrand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.coBrandLogos { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.coBrandLogos li { display: flex; align-items: center; }
.coBrandLogos img { display: block; height: 48px; width: auto; max-width: 140px; object-fit: contain; }
.coBrandLogos a:focus-visible { outline: 3px solid #0D6EFD; outline-offset: 2px; }
@media (max-width: 575px) { .coBrandLogos img { height: 36px; max-width: 100px; } }

/* ---- W2: DBIM homepage components (Recent Documents, User Personas, Citizen Engagement, Central Posts, Infographics, latest Key Offerings) ---- */
.recentDocsSec, .personaSec, .citizenSec, .infographicsSec, .ccpsPosts { padding-top: 32px; padding-bottom: 32px; }
.recentDocs, .personaTiles, .infographicGrid, .ccpsPosts__grid, .offeringsLatest__list { list-style: none; margin: 0; padding: 0; }

.recentDocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.recentDocs li a { display: grid; grid-template-columns: 32px 1fr; grid-template-areas: "i t" "i m"; gap: 2px 12px; align-items: start; height: 100%; min-height: 72px; padding: 14px 16px; border: 1px solid #D2DFFF; border-radius: 4px; background: #fff; color: #162F6A; text-decoration: none; }
.recentDocs li a img { grid-area: i; width: 32px; height: 32px; }
.recentDocs li a:hover { background: #F1F5FF; border-color: #162F6A; }
.recentDocs li a:focus-visible, .personaTiles a:focus-visible, .infographicGrid a:focus-visible, .ccpsPosts a:focus-visible, .offeringsLatest__list a:focus-visible { outline: 3px solid #0D6EFD; outline-offset: 2px; }
.recentDocs__title { grid-area: t; font-weight: 600; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.recentDocs__meta { grid-area: m; font-size: 14px; color: #3F3F3F; }
.recentDocsSec .viewmore, .personaSec .viewmore { display: inline-block; margin-top: 12px; }

.personaTiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 20px; }
.personaTiles a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #162F6A; text-decoration: none; }
.personaTiles__img { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: #D2DFFF; }
.personaTiles__img img { width: 64px; height: 64px; object-fit: contain; }
.personaTiles__name { font-size: 20px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.personaTiles a:hover .personaTiles__name { text-decoration: underline; }

.ccpsPosts__grid { display: grid; gap: 12px; max-width: 960px; margin: 0 auto; }
.ccpsPosts__grid--2 { grid-template-columns: repeat(2, 1fr); }
.ccpsPosts__grid--3 { grid-template-columns: repeat(3, 1fr); }
.ccpsPosts__grid li { overflow: hidden; border-radius: 4px; }
.ccpsPosts__grid a { display: block; height: 100%; }
.ccpsPosts__grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ccpsPosts__grid--1 li { aspect-ratio: 960 / 245; }
.ccpsPosts__grid--2 li { aspect-ratio: 480 / 245; }
.ccpsPosts__grid--3 li { aspect-ratio: 320 / 245; }
@media (max-width: 575px) {
  .ccpsPosts__grid--2, .ccpsPosts__grid--3 { grid-template-columns: 1fr; }
  .ccpsPosts__grid li { aspect-ratio: auto !important; }
  .ccpsPosts__grid img { height: auto; }
}

.infographicGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.infographicGrid img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 4px; }
.infographicGrid__title { display: block; margin-top: 8px; font-weight: 600; color: #162F6A; text-align: left; }

.offeringsLatest__head { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #162F6A; }
.offeringsLatest__list { margin-bottom: 10px; }
.offeringsLatest__list li a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #D2DFFF; color: #1A1A1A; text-decoration: none; line-height: 1.4; overflow-wrap: anywhere; }
.offeringsLatest__list li a:hover { color: #162F6A; text-decoration: underline; }
.offeringsLatest__list small { flex: 0 0 auto; white-space: nowrap; color: #3F3F3F; }

/* ---- W2: About Us objectives and functions lists; level-2 pages ---- */
.aboutList { margin-top: 24px; }
.aboutList h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.3; color: #162F6A; }
.aboutList ul { margin: 0 0 16px; padding-left: 22px; }
.aboutList li { margin-bottom: 8px; line-height: 1.5; text-align: left; }

.level2Block { margin-top: 24px; }
.level2Block h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.3; color: #162F6A; }
.level2Cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.level2Cards a, .level2Cards li > span { display: block; color: inherit; text-decoration: none; }
.level2Cards__photo { display: block; aspect-ratio: 1 / 1; max-width: 200px; overflow: hidden; border: 1px solid #D2DFFF; background: #fff; }
.level2Cards__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.level2Cards__name { display: block; margin-top: 8px; font-weight: 700; color: #162F6A; text-align: left; }
.level2Cards__post { display: block; color: #3F3F3F; text-align: left; }
.level2Cards a:hover .level2Cards__name { text-decoration: underline; }
.level2Cards a:focus-visible { outline: 3px solid #0D6EFD; outline-offset: 2px; }
.level2Links { margin: 0; padding-left: 22px; }
.level2Links li { margin-bottom: 6px; }
.level2Phones { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.level2Phones dt { font-weight: 600; }
.level2Phones dd { margin: 0; }
@media (max-width: 575px) { .level2Phones { grid-template-columns: 1fr; gap: 0; } .level2Phones dd { margin-bottom: 8px; } }
.level2Table th, .level2Table td { text-align: left; vertical-align: top; overflow-wrap: anywhere; }

/* G-1: gallery "download original" link under each thumbnail */
.w2-card .w2-original { display: inline-block; margin-top: 4px; font-size: 14px; line-height: 1.4; }

/* R-1: pictures get width and height attributes from the server (no layout jump); any author height rule still wins (zero specificity here) */
:where(img[width][height]) { height: auto; }

/* Key Offerings latest lists: title on its own line, date and file type under it (long titles no longer squeeze the date and "(PDF)" into a narrow column) */
.offeringsLatest__list li a { display: block; }
.offeringsLatest__list li a > span:first-child { display: block; overflow-wrap: break-word; word-break: normal; }
.offeringsLatest__list li a small, .offeringsLatest__list li a .file-type, .offeringsLatest__list li a [class*="pdf" i] { display: inline-block; margin: 4px 10px 0 0; white-space: nowrap; font-size: 14px; }
.offeringsLatest__list li a::after { white-space: nowrap; font-size: 14px; }
.offeringsLatest__list li a .fileType { display: inline-block; margin-top: 4px; white-space: nowrap; font-size: 14px; color: #3F3F3F; }

/* Key Offerings tabs: the title takes the whole row, then the file type, then the arrow at the far right; the date sits under the title */
.announcement_sec .tab-pane ul li a > span:first-child { flex: 1 1 auto; width: auto; min-width: 0; }
.announcement_sec .tab-pane ul li a > span:first-child small { display: block; margin-top: 4px; font-size: 14px; }
.announcement_sec .tab-pane ul li a .fileType { width: auto; order: 2; flex: 0 0 auto; margin: 0; font-size: 14px; color: var(--mha-555); white-space: nowrap; }
.announcement_sec .tab-pane ul li a .fa-angle-right { order: 3; flex: 0 0 auto; margin: 0; }

/* Important Links: a white card like the Key Offerings list: padding, rounded corners, shadow, a divider and an arrow on every row */
.zonal-cont { height: auto; max-height: 340px; padding: 15px; border-radius: 4px; box-shadow: 0 0 15px #dddddd; }
.zonal-cont ul li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #A3BBF3; color: #150202; font-size: 16px; line-height: 1.4; text-decoration: none; }
.zonal-cont ul li a:hover { color: #162F6A; text-decoration: underline; }
.zonal-cont ul li a:focus-visible { outline: 3px solid #0D6EFD; outline-offset: -3px; }
.zonal-cont ul li .fa-angle-right { position: static; flex: 0 0 auto; transform: none; font-size: 36px; color: #162F6A; margin-right: 6px; }

/* Recent Documents | Personas | Important Links row: documents as 2 x 2 cards, persona carousel, links card */
.recentDocsSec .recentDocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recentDocsSec .recentDocs li a { min-height: 150px; grid-template-columns: 1fr; grid-template-areas: "i" "t" "m"; gap: 8px; padding: 20px 24px; }
.recentDocsSec .recentDocs li a img { width: 32px; height: 32px; }
.recentDocsSec .recentDocs__title { font-size: 18px; }
.recentDocsSec .zonal-cont { max-height: 360px; overflow-y: auto; }
.personaCarousel .personaCard { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #162F6A; text-decoration: none; text-align: center; }
.personaCarousel .personaCard__img { display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; overflow: hidden; border-radius: 50%; background: #A3BBF3; }
.personaCarousel .personaCard__img img { width: 100%; height: 100%; object-fit: cover; }
.personaCarousel .personaCard__name { font-size: 24px; font-weight: 700; line-height: 1.3; }
.personaCarousel .personaCard:hover .personaCard__name, .personaCarousel .personaCard:focus-visible .personaCard__name { text-decoration: underline; }
.personaCarousel__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.personaCarousel__nav > button { border: 0; background: transparent; color: #162F6A; font-size: 24px; line-height: 1; padding: 4px 8px; }
.personaCarousel .carousel-indicators { position: static; display: flex; margin: 0; gap: 4px; }
.personaCarousel .carousel-indicators button { width: 12px; height: 12px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #A3BBF3; opacity: 1; text-indent: 0; }
.personaCarousel .carousel-indicators button.active { width: 18px; border-radius: 3px; background: #162F6A; }
@media (max-width: 767px) { .recentDocsSec .recentDocs { grid-template-columns: 1fr; } }

.personaCarousel .personaCard__img i { font-size: 96px; color: #162F6A; }

/* Persona picture fills the blue circle; carousel dots are round, the current one darker */
.personaCarousel .personaCard__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.personaCarousel .carousel-indicators button { width: 12px; height: 12px; border-radius: 50%; }
.personaCarousel .carousel-indicators button.active { width: 12px; height: 12px; border-radius: 50%; background: #162F6A; }

/* Tender pages: tabs without list bullets, tender titles left-aligned (DBIM 4.1.1: text left, numbers right, column names centred) */
.w5-tabs, .w5-tabs li { list-style: none; }
.w5-tabs { margin-left: 0; padding-left: 0; }
.w5-table tbody th, .w5-table tbody td { text-align: left; }
.w5-table tbody td.num { text-align: right; }
.w5-pager ul, .w5-pager li, .pagination, .pagination li { list-style: none; }
.w5-pager ul, .pagination { padding-left: 0; }

/* In Social Media / Citizen Engagement on the navy band (DBIM A.2 xi): the theme's band spacing */
.media-sec.citizenSec { padding-top: 50px; padding-bottom: 40px; }
/* X card: profile card (X serves no embedded timeline to signed-out visitors) */
.xProfile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: calc(100% - 30px); margin: 15px; padding: 16px; border: 1px solid #E3E7EE; border-radius: 6px; text-align: center; }
.xProfile__logo { position: absolute; top: 12px; right: 12px; font-size: 24px; color: #000; }
.xProfile__avatar { width: 80px; height: 80px; padding: 6px; border: 1px solid #E3E7EE; border-radius: 50%; background: #fff; object-fit: contain; }
.xProfile__name { margin: 6px 0 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: #162F6A; }
.xProfile__handle { margin: 0; font-size: 14px; color: #4F4F4F; }
.xProfile__follow { margin-top: 10px; padding: 8px 20px; border-radius: 999px; background: #000; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.xProfile__follow:hover, .xProfile__follow:focus-visible { background: #333; color: #fff; text-decoration: underline; }
.xProfile__follow:focus-visible { outline: 3px solid #0D6EFD; outline-offset: 2px; }