/* ==========================================================================
   unified-style.css  —  Combined government site theme (opmcm reference)
   ========================================================================== */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css?family=Mukta:200,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Martel:200,300,400,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Red+Hat+Display:300,400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');

/* ---------- CSS Variables ---------- */
:root {
    --theme-color: #2460B9;
    --updated-theme: #2460B9;
    --secondary-color: #CC1424;
    --theme-light-color: #F4F8FF;
    --white-color: #fff;
    --theme-color-100: #EEF5FF;
    --theme-color-300: #4F7EC7;
    --theme-color-400: #021C46;
    --theme-color-500: #022B69;
    --border-color: #F0F0F0;
    --grey-100: #F5F5F5;
    --secondary-color-100: #FFF4F5;
    --secondary-color-200: #FFE1E4;
    --secondary-color-300: #FFF6F7;
    --secondary-color-400: #ffeff1;
    --secondary-color-500: #ffe5e8;
    --theme-100: #F1F7FF;
    --theme-200: #F4F8FF;
    --theme-300: #EAF1FF;
    --dark-theme: #264F8B;
    --secondary-font: "Martel", sans-serif;
    --english-font: "Red Hat Display", sans-serif;
    --quicksand-font: "Quicksand", sans-serif;
    --IBM-font: "IBM Plex Sans", sans-serif;
}

/* ---------- Base Reset ---------- */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1.5;
    font-family: "Mukta", sans-serif;
}

body {
    font-family: "Mukta", sans-serif;
    font-weight: 400;
    height: 100%;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #646464;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p, label {
    margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    font-family: "Mukta", sans-serif !important;
    margin: 0 0 20px;
    color: #111;
}

a {
    text-decoration: none !important;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- Utility Classes ---------- */
.custom-container {
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .custom-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 575px) {
    .custom-container {
        padding: 0 1rem;
    }
}

.theme__bg { background: var(--theme-color); }
.theme__linear-bg { background: linear-gradient(180deg, #112d56, var(--theme-color)); }
.theme__light-bg { background: #f1f7ff; }
.light__grey-bg { background: #f9fcff; }
.light__linear-bg { background: linear-gradient(180deg, #fff9f9 0%, #f2f9ff 100%); }
.mt-50 { margin-top: 50px; }
.mb-50 { margin-bottom: 50px; }

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

/* ==========================================================================
   HEADER-7 COMPONENT (from opmcm.gov.np)
   ========================================================================== */
.header-7 {
    width: 100%;
}

.header-7.stickyHeader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 555;
    width: 100%;
    background: white;
    animation: header3Animation 600ms ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@keyframes header3Animation {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.header-7.stickyHeader .header-7-top {
    display: none;
}

@media (max-width: 1199px) {
    .header-7.stickyHeader .header-7-top {
        display: flex;
    }
}

.header-7.stickyHeader .header-7-slider {
    display: none;
}

@media (max-width: 1199px) {
    .header-7.stickyHeader .header-7-top-right {
        display: none;
    }
}

.header-7.stickyHeader .sticky__miniLogo {
    display: block !important;
}

/* --- Header Top --- */
.header-7-top {
    display: flex;
    align-items: center;
    background: var(--updated-theme);
    position: relative;
}

@media (max-width: 1199px) {
    .header-7-top {
        flex-direction: column-reverse;
    }
}

.header-7-top .decorative__img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

@media (max-width: 1199px) {
    .header-7-top .decorative__img {
        bottom: unset;
        top: 0;
        height: 40%;
        left: 0;
        transform: unset;
    }
}

.header-7-top .decorative__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Top Group (Logo area) --- */
.header-7-top .top__group {
    position: relative;
    background: var(--dark-theme);
    padding: 20px 35px;
}

@media (max-width: 1199px) {
    .header-7-top .top__group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .header-7-top .top__group {
        padding: 10px 20px;
    }
}

.header-7-top .top__group .hidden__cta {
    display: none;
}

@media (max-width: 1199px) {
    .header-7-top .top__group .hidden__cta {
        display: flex;
        align-items: center;
        grid-gap: 20px;
    }
}

@media (max-width: 575px) {
    .header-7-top .top__group .hidden__cta {
        grid-gap: 10px;
    }
}

.header-7-top .top__group .hidden__cta .search__cta {
    position: relative;
}

.header-7-top .top__group .hidden__cta .search__cta .search__toggler svg {
    font-size: 20px;
    color: #fff;
    display: flex;
    transition: all 300ms ease-in-out;
}

@media (max-width: 768px) {
    .header-7-top .top__group .hidden__cta .search__cta .search__toggler svg {
        font-size: 16px;
    }
}

.header-7-top .top__group .hidden__cta .search__cta.active .search__dropdown {
    opacity: 1;
    visibility: visible;
    top: 130%;
}

.header-7-top .top__group .hidden__cta .search__cta.active .search__toggler svg {
    color: var(--secondary-color);
}

.header-7-top .top__group .hidden__cta .search__cta .search__dropdown {
    position: absolute;
    right: -20px;
    top: 100%;
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease-in-out;
    border-radius: 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header-7-top .top__group .hidden__cta .search__cta .search__dropdown .search__input {
    display: flex;
    align-items: center;
    grid-gap: 5px;
    background: white;
    border-radius: 100px;
    padding: 0 10px;
}

.header-7-top .top__group .hidden__cta .search__cta .search__dropdown .search__input input {
    background: transparent;
    width: 300px;
    max-width: 100%;
    height: 45px;
    border: 0;
    outline: none;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: black;
    border-radius: 5px;
}

@media (max-width: 575px) {
    .header-7-top .top__group .hidden__cta .search__cta .search__dropdown .search__input input {
        width: 200px;
    }
}

.header-7-top .top__group .hidden__cta .search__cta .search__dropdown .search__input input::placeholder {
    color: #AEAEAE;
    font-size: 16px;
    font-weight: 500;
}

.header-7-top .top__group .hidden__cta .search__cta .search__dropdown .search__input .search__btn {
    border: 0;
    outline: none;
    background: transparent;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-7-top .top__group .hidden__cta .search__cta .search__dropdown .search__input .search__btn svg {
    display: flex;
    font-size: 16px;
    color: var(--updated-theme);
}

.header-7-top .top__group .hidden__cta .hamburger__toggler {
    background: transparent;
    width: auto;
    height: auto;
    border: none;
    cursor: pointer;
}

.header-7-top .top__group .hidden__cta .hamburger__toggler svg {
    color: white;
    font-size: 20px;
    display: flex;
}

.header-7-top .top__group .hidden__cta .language__translator .nice-select {
    padding-right: 15px;
    background: transparent;
}

.header-7-top .top__group .hidden__cta .language__translator .nice-select .current {
    color: white;
}

.header-7-top .top__group .hidden__cta .language__translator .nice-select::after {
    border-color: white;
    margin-top: -2px;
    right: 4px;
}

/* --- Top Logo --- */
.header-7-top .top-logo {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    grid-gap: 30px;
}

.header-7-top .top-logo-box {
    display: flex;
    align-items: center;
    grid-gap: 10px;
}

.header-7-top .top-logo-box:not(:last-child) {
    position: relative;
}

.header-7-top .top-logo-box:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
}

.header-7-top .top-logo-box img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

@media (max-width: 575px) {
    .header-7-top .top-logo-box img {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .header-7-top .top-logo-box img {
        width: 50px;
        height: 50px;
    }
}

.header-7-top .top-logo-box .logo-info {
    display: flex;
    flex-direction: column;
}

.header-7-top .top-logo-box .logo-info h3 {
    color: white;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .header-7-top .top-logo-box .logo-info h3 {
        font-size: 14px;
        white-space: wrap;
    }
}

.header-7-top .top-logo-box .logo-info h2 {
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .header-7-top .top-logo-box .logo-info h2 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .header-7-top .top-logo-box .logo-info h2 {
        font-size: 16px;
    }
}

/* --- Header Top Right (Marquee + Flag + Date) --- */
.header-7-top-right {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    flex: 1;
    position: relative;
}

@media (max-width: 768px) {
    .header-7-top-right {
        padding: 10px 0;
        width: 100%;
    }
}

.header-7-top-right .decorative__img.hidden__img {
    display: none;
}

/* --- Animated Flag --- */
.header-7-top .animated__flag {
    display: flex;
    align-items: center;
    grid-gap: 10px;
    grid-column: 4;
    padding: 10px 35px;
}

@media (max-width: 768px) {
    .header-7-top .animated__flag {
        display: none;
    }
}

.header-7-top .animated__flag .flag__img {
    width: 45px;
    height: 60px;
}

@media (max-width: 575px) {
    .header-7-top .animated__flag .flag__img {
        width: 35px;
        height: 45px;
    }
}

.header-7-top .animated__flag .flag__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-7-top .animated__flag .flag__info {
    position: relative;
    top: 4px;
}

.header-7-top .animated__flag .flag__info .date {
    display: flex;
    flex-direction: column;
}

.header-7-top .animated__flag .flag__info .date p {
    margin-bottom: 0;
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
}

/* --- Header Bottom (Navigation) --- */
.header-7-bottom {
    padding: 0 35px;
}

@media (max-width: 1199px) {
    .header-7-bottom {
        display: none;
    }
}

.header-7-bottom .bottom-wrapper {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    grid-gap: 40px;
}

.header-7-bottom .bottom-wrapper .bottom-left {
    display: flex;
    align-items: center;
    grid-gap: 40px;
}

@media (max-width: 1536px) {
    .header-7-bottom .bottom-wrapper .bottom-left {
        grid-gap: 30px;
    }
}

.header-7-bottom .bottom-wrapper .bottom-left .sticky__miniLogo {
    width: 70px;
    height: 70px;
    display: none;
}

.header-7-bottom .bottom-wrapper .bottom-left .sticky__miniLogo img {
    width: 100%;
    height: 100%;
    display: flex;
    object-fit: contain;
}

/* ==========================================================================
   MOBILE NAVIGATION PANEL
   ==========================================================================
   Below 1200px .header-7-bottom is display:none and the hamburger in the top
   bar is the only route to the menu. Opening it re-shows that same bar as a
   stacked panel rather than duplicating the links into a second <nav>, so the
   markup stays in one place and screen readers see one navigation landmark.
   The hover dropdowns become tap accordions, since hover does not exist on
   touch. Driven by .mobile-nav-open on .header-7 (see _HeaderPartial). */

@media (max-width: 1199px) {
    .header-7.mobile-nav-open .header-7-bottom {
        display: block;
        padding: 0 20px 10px;
        background: var(--white-color);
        max-height: 75vh;
        overflow-y: auto;
    }

    .header-7.mobile-nav-open .header-7-bottom .bottom-wrapper,
    .header-7.mobile-nav-open .header-7-bottom .bottom-left,
    .header-7.mobile-nav-open .header-7-bottom .bottom-right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-gap: 0;
        margin-left: 0;
    }

    /* The mini logo is a sticky-header device; it only wastes space here. */
    .header-7.mobile-nav-open .header-7-bottom .sticky__miniLogo {
        display: none;
    }

    .header-7.mobile-nav-open .header-7-bottom .header__menu {
        flex-direction: column;
        align-items: stretch;
        grid-gap: 0;
        row-gap: 0 !important;
    }

    .header-7.mobile-nav-open .header-7-bottom .header__menu .nav__list {
        border-bottom: 1px solid rgba(36, 96, 185, .12);
    }

    .header-7.mobile-nav-open .header-7-bottom .header__menu .nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 4px;
    }

    /* Submenus: in flow and closed, rather than absolutely positioned and
       revealed on hover. .open is set by the tap handler. */
    .header-7.mobile-nav-open .header-7-bottom .dropdown > .dropdown__menu,
    .header-7.mobile-nav-open .header-7-bottom .has__dropdown .subDropdown__menu {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        display: none;
        transition: none;
    }

    .header-7.mobile-nav-open .header-7-bottom .dropdown.open > .dropdown__menu,
    .header-7.mobile-nav-open .header-7-bottom .has__dropdown.open > .subDropdown__menu {
        display: block;
    }

    /* Hover opens the desktop dropdown; on a touch device that fires on tap and
       would expand a branch the accordion is trying to close. */
    .header-7.mobile-nav-open .header-7-bottom .dropdown:hover > .dropdown__menu,
    .header-7.mobile-nav-open .header-7-bottom .has__dropdown:hover .subDropdown__menu {
        display: none;
    }

    .header-7.mobile-nav-open .header-7-bottom .dropdown.open:hover > .dropdown__menu,
    .header-7.mobile-nav-open .header-7-bottom .has__dropdown.open:hover > .subDropdown__menu {
        display: block;
    }

    .header-7.mobile-nav-open .header-7-bottom .dropdown__menu > ul,
    .header-7.mobile-nav-open .header-7-bottom .subDropdown__menu > ul {
        margin: 0 0 0 12px;
        box-shadow: none;
        background: transparent;
    }

    /* Chevrons point down when closed, up when the branch is open. */
    .header-7.mobile-nav-open .header-7-bottom .open > .nav__link svg,
    .header-7.mobile-nav-open .header-7-bottom .open > .dropdown__link svg {
        transform: rotate(180deg);
    }

    /* The full-width search and language picker are useful here; the social
       icons repeat what the footer already carries. */
    .header-7.mobile-nav-open .header-7-bottom .global-search {
        padding: 12px 0;
    }

    .header-7.mobile-nav-open .header-7-bottom .social__media {
        display: none;
    }
}

/* --- Navigation Menu --- */
.header-7-bottom .header__menu {
    display: flex;
    align-items: center;
    grid-gap: 40px;
    flex-wrap: wrap;
    row-gap: 12px !important;
}

@media (max-width: 1536px) {
    .header-7-bottom .header__menu {
        grid-gap: 30px;
    }
}

.header-7-bottom .header__menu .nav__list:hover .nav__link {
    color: var(--updated-theme);
}

.header-7-bottom .header__menu .nav__list:hover .nav__link::before {
    width: 100%;
    opacity: 1;
}

.header-7-bottom .header__menu .nav__list:hover .nav__link svg {
    color: var(--updated-theme);
    transform: rotate(-180deg);
}

.header-7-bottom .header__menu .nav__list .nav__link {
    font-size: 18px;
    color: #000;
    display: flex;
    align-items: center;
    grid-gap: 5px;
    font-weight: 500;
    transition: all 300ms ease-in-out;
    position: relative;
    white-space: nowrap;
}

.header-7-bottom .header__menu .nav__list .nav__link::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    opacity: 0;
    background: var(--updated-theme);
    transition: all 300ms ease-in-out;
}

@media (max-width: 1536px) {
    .header-7-bottom .header__menu .nav__list .nav__link {
        font-size: 16px;
    }
}

.header-7-bottom .header__menu .nav__list .nav__link svg {
    position: relative;
    top: -2px;
    display: flex;
    font-size: 12px;
    color: #AEAEAE;
    transition: all 300ms ease-in-out;
}

/* Dropdown Menus */
.header-7-bottom .header__menu .dropdown {
    position: relative;
}

.header-7-bottom .header__menu .dropdown:hover .dropdown__menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

.header-7-bottom .header__menu .dropdown > .dropdown__menu {
    min-width: 15rem;
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 555;
    transition: all 300ms ease-in-out;
}

.header-7-bottom .header__menu .dropdown > .dropdown__menu > ul {
    background: var(--theme-color-100);
    margin-top: 12px;
    position: relative;
    border-radius: 0;
    padding: 6px 0;
    box-shadow: 0 6px 18px rgba(2, 28, 70, .08);
}

/* Hairline between items, matching the reference dropdown */
.header-7-bottom .header__menu .dropdown > .dropdown__menu > ul .dropdown__list + .dropdown__list {
    border-top: 1px solid rgba(36, 96, 185, .10);
}

.header-7-bottom .header__menu .dropdown > .dropdown__menu > ul .dropdown__list .dropdown__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 10px;
    padding: 11px 20px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--theme-color-400);
    font-weight: 500;
    transition: all 300ms ease-in-out;
    border-radius: 0;
}

.header-7-bottom .header__menu .dropdown > .dropdown__menu > ul .dropdown__list .dropdown__link:hover {
    background: var(--white-color);
    color: var(--updated-theme);
}

.header-7-bottom .header__menu .dropdown > .dropdown__menu > ul .dropdown__list .dropdown__link:hover svg {
    color: var(--updated-theme);
}

.header-7-bottom .header__menu .dropdown > .dropdown__menu > ul .dropdown__list .dropdown__link svg {
    position: relative;
    top: -2px;
    display: flex;
    font-size: 12px;
    color: var(--theme-color-400);
    transition: all 300ms ease-in-out;
}

/* Sub-dropdown */
.header-7-bottom .header__menu .has__dropdown {
    position: relative;
}

.header-7-bottom .header__menu .has__dropdown:hover .subDropdown__menu {
    opacity: 1;
    visibility: visible;
    left: 100%;
}

.header-7-bottom .header__menu .has__dropdown .subDropdown__menu {
    min-width: 17rem;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 90%;
    opacity: 0;
    visibility: hidden;
    z-index: 555;
    transition: all 300ms ease-in-out;
}

.header-7-bottom .header__menu .has__dropdown .subDropdown__menu > ul {
    background: var(--theme-color-100);
    margin-left: 1px;
    position: relative;
    border-radius: 0;
    padding: 6px 0;
    box-shadow: 0 6px 18px rgba(2, 28, 70, .08);
}

.header-7-bottom .header__menu .has__dropdown .subDropdown__menu > ul .dropdown__list + .dropdown__list {
    border-top: 1px solid rgba(36, 96, 185, .10);
}

/* Bottom Right (Search, Language, Social) */
.header-7-bottom .bottom-wrapper .bottom-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    grid-gap: 20px;
}

/* --- Header Slider (below nav) --- */
.header-7-slider {
    padding: 20px 35px;
}

@media (max-width: 768px) {
    .header-7-slider {
        padding: 10px 20px;
    }
}

.header-7-slider .marquee-slider {
    background: var(--theme-200);
    border-radius: 5px;
    padding: 10px 20px;
}

@media (max-width: 575px) {
    .header-7-slider .marquee-slider {
        padding: 10px;
    }
}

.header-7-slider .marquee-slider .header__title {
    color: var(--updated-theme);
}

.header-7-slider .marquee-slider .header__title::before {
    background: var(--updated-theme);
}

.header-7-slider .marquee-slider .infinite-slider .slider__item:hover .item__details .item__title {
    color: var(--updated-theme);
}

.header-7-slider .marquee-slider .infinite-slider .slider__item .item__details .item__title {
    color: #515151;
}

/* --- Global Search --- */
.global-search form .search__group .search-input {
    background: #f8f8f8;
    border-radius: 100px;
    padding: 0 20px;
    height: 45px;
    width: 300px;
    max-width: 100%;
    display: flex;
    align-items: center;
    grid-gap: 10px;
}

.global-search form .search__group .search-input input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: #989898;
    font-weight: 500;
}

.global-search form .search__group .search-input input::placeholder {
    color: #B4B4B4;
}

.global-search form .search__group .search-input .search__btn {
    background: transparent;
    display: flex;
    border: 0;
    outline: none;
    cursor: pointer;
}

.global-search form .search__group .search-input .search__btn svg {
    color: #989898;
    font-size: 18px;
}

/* --- Language Translator --- */
.language__translator {
    display: flex;
    align-items: center;
    grid-gap: 0px;
}

.language__translator .country__flag img {
    width: 20px;
    object-fit: contain;
}

.language__translator .language__select {
    position: relative;
    top: 2px;
}

.language__translator .language__select .nice-select {
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    height: auto;
    line-height: unset;
    padding-right: 25px;
}

.language__translator .language__select .nice-select .current {
    font-weight: 500;
    font-size: 14px;
    font-family: "poppins", sans-serif;
    transition: all 300ms ease-in-out;
}

.language__translator .language__select .nice-select .current:hover {
    color: var(--secondary-color);
}

.language__translator .language__select .nice-select .list li {
    font-size: 14px;
    font-family: "poppins", sans-serif;
    font-weight: 500;
}

/* --- Hamburger Toggler --- */
.hamburger__toggler {
    background: var(--theme-color-100);
    width: 35px;
    max-width: 100%;
    height: 35px;
    border-radius: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

@media (max-width: 1336px) {
    .hamburger__toggler {
        display: flex;
    }
}

.hamburger__toggler svg {
    display: flex;
    font-size: 17px;
    color: var(--updated-theme);
}

/* --- Social Media --- */
.social__media {
    display: flex;
    align-items: center;
    grid-gap: 20px;
}

.social__media .social__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social__media .social__icon:hover svg {
    color: var(--updated-theme);
}

.social__media .social__icon svg {
    font-size: 24px;
    color: #D1D1D1;
    display: flex;
    transition: all 300ms ease-in-out;
}

/* --- Marquee Slider --- */
.marquee-slider {
    display: flex;
    align-items: center;
    grid-gap: 20px;
    padding: 0 35px;
    grid-column: span 3;
    padding-right: 0;
}

@media (max-width: 768px) {
    .marquee-slider {
        grid-column: span 4;
        padding: 0 20px;
        padding-right: 20px;
    }
}

@media (max-width: 575px) {
    .marquee-slider {
        grid-gap: 10px;
    }
}

.header-7-top-right .marquee-slider {
    padding: 10px 35px;
}

@media (max-width: 768px) {
    .header-7-top-right .marquee-slider {
        padding: 0 20px;
    }
}

.marquee-slider .infinite-slider .slider__item {
    display: flex;
    align-items: center;
    grid-gap: 5px;
    position: relative;
}

.marquee-slider .infinite-slider .slider__item:hover .item__details .item__title {
    opacity: 0.7;
}

.marquee-slider .infinite-slider .slider__item .item__details .item__title {
    margin-bottom: 0;
    font-size: 16px;
    color: #fff;
    transition: all 300ms ease-in-out;
}

@media (max-width: 575px) {
    .marquee-slider .infinite-slider .slider__item .item__details .item__title {
        font-size: 14px;
    }
}

.marquee-slider .infinite-slider .slider__item .item__details .item__title a {
    color: inherit;
}

.marquee-slider .header__title {
    font-size: 18px;
    font-weight: bold;
    color: white;
    position: relative;
    padding-right: 10px;
    white-space: nowrap;
    margin-bottom: 0;
}

.marquee-slider .header__title::before {
    content: "";
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    right: 0;
    width: 2px;
    height: 20px;
    background: white;
    opacity: 0.3;
}

@media (max-width: 575px) {
    .marquee-slider .header__title {
        font-size: 14px;
    }
}

/* --- Secondary Header Menu --- */
.secondary__headerMenu {
    padding: 0 35px;
}

.secondary__headerMenu .header__menu {
    display: flex;
    align-items: center;
    grid-gap: 30px;
    padding: 8px 0;
}

/* --- Inline SVG sizing fix --- */
.header-7 svg.svg-inline--fa {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
}

.cta__btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
}

/* --- Nice Select Override --- */
.nice-select {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 5px 25px 5px 10px;
    font-size: 14px;
    line-height: 1.5;
    border: none;
    background: transparent;
}

.nice-select .list {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    min-width: 80px;
    padding: 5px 0;
    display: none;
    z-index: 999;
}

.nice-select.open .list {
    display: block;
}

.nice-select .option {
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
}

.nice-select .option:hover {
    background: var(--theme-color-100);
}

/* --- Language switcher: options are links, not JS-only list items --- */
.language__select .nice-select .option {
    padding: 0;
}

.language__select .nice-select .option a {
    display: block;
    padding: 5px 15px;
    color: #1f2937;
    text-decoration: none;
    white-space: nowrap;
}

.language__select .nice-select .option a:hover,
.language__select .nice-select .option a:focus-visible {
    background: var(--theme-light-color);
    color: var(--theme-color);
}

.language__select .nice-select .option.selected a {
    font-weight: 700;
    color: var(--theme-color);
}

/* Keyboard fallback: opens the list without JS */
.language__select .nice-select:focus-within .list {
    display: block;
}

/* --- Skip Link --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--theme-color);
    color: white;
    padding: 5px 15px;
    z-index: 10000;
    font-size: 14px;
}

.skip-link:focus {
    top: 0;
}

/* --- Animations --- */
@keyframes header3Animation {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

@keyframes mobileNavAnimation {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* --- Responsive: Nav Bottom Right at large breakpoints --- */
@media (min-width: 1200px) and (max-width: 1280px) {
    .header-7-bottom .header__menu {
        grid-gap: 20px;
    }
}

/* ==========================================================================
   Footer-8  —  Dark themed footer (opmcm reference)
   ========================================================================== */
.footer-8 {
    background: var(--updated-theme, #2460B9);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.footer-8 .custom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

.footer-8 .footer__wrapper {
    padding: 50px 0 20px;
}

/* --- Logo Section --- */
.footer-8 .footer__logo {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.footer-8 .footer__logo-img img {
    width: 80px;
    height: auto;
}

.footer-8 .footer__logo-text h2 {
    line-height: 1.4;
    font-size: 21px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0;
}

.footer-8 .footer__logo-text p {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 0;
}

/* --- Middle Divider (Office Hours + Important Links) --- */
.footer-8 .footer__middle {
    padding: 30px 0;
}

.footer-8 .footer__divider {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.footer-8 .footer__left {
    flex: 1;
    min-width: 280px;
}

.footer-8 .footer__right {
    flex: 1.5;
    min-width: 320px;
}

.footer-8 .footer__title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.footer-8 .footer__title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 3px;
    /* background: var(--secondary-color, #CC1424); */
}

/* --- Time Table --- */
.footer-8 .footer__timeTable-main {
    margin-top: 10px;
}

.footer-8 .footer__subTitle {
    font-size: 14px;
    font-weight: 500;
    color: #ddd;
    margin-bottom: 8px;
}

.footer-8 .timeTable__list {
    list-style: none;
    padding-left: 0;
    padding: 0;
    margin: 0 0 15px;
}

.footer-8 .footer__timeTable-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-8 .footer__timeTable-content h4 {
    margin-bottom: 0;
    color: #eee;
    font-size: 16px;
    font-weight: 400 !important;
}

.footer-8 .footer__timeTable-content .time {
    color: #aaa;
    font-size: 14px;
}

.footer-8 .footer__timeTable-main hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 15px 0;
}

/* --- Important Links --- */
.footer-8 .footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
}

.footer-8 .footer__list-item {
    position: relative;
    padding-left: 14px;
}

.footer-8 .footer__list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.75);
}

.footer-8 .footer__list-link {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s;
}

.footer-8 .footer__list-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- Below Important Links (PM Secretariat) --- */
.below__important-links {
    margin-top: 30px;
}

.below__important-links .footer__title {
    font-size: 16px;
}

.below__important-links .officials__group {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* --- Social Icons --- */
.footer-8 .footer__social-icon {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 12px;
}

.footer-8 .footer__social-icon li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: background 0.2s;
}

.footer-8 .footer__social-icon li a:hover {
    background: var(--theme-color, #2460B9);
}

.below__important-links .footer__social-icon li a {
    color: white;
}

/* --- Contact Links --- */
.footer-8 .footer__contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    column-gap: 45px;
    flex-wrap: wrap;
    row-gap: 10px;
}

.footer-8 .footer__contact ul li a,
.footer-8 .footer__contact ul li div {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-8 .footer__contact ul li a:hover {
    color: #fff;
}

.footer-8 .footer__contact ul li span i {
    font-size: 14px;
    color: #aaa;
}

/* --- Middle Bottom Bar --- */
.footer-8 .footer__middleBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    flex-wrap: wrap;
    grid-gap: 30px;
}

/* --- Footer Bottom --- */
.footer-8 .footer__bottom {
    padding: 15px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* --- Footer Background Image --- */
.footer-8 .footer__image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    line-height: 0;
    pointer-events: none;
}

.footer-8 .footer__image img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.25;
}

/* --- Responsive Footer --- */
@media (max-width: 768px) {
    .footer-8 .footer__logo {
        flex-direction: column;
        text-align: center;
    }

    .footer-8 .footer__divider {
        flex-direction: column;
        gap: 30px;
    }

    .footer-8 .footer__list {
        grid-template-columns: 1fr;
    }

    .footer-8 .footer__middleBottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   HOMEPAGE SECTIONS
   ========================================================================== */

.custom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.mt-50 { margin-top: 50px; }

.section__header {
    margin-bottom: 25px;
    border-bottom: 2px solid var(--theme-color);
    padding-bottom: 10px;
}

.section__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0;
    font-family: 'Mukta', sans-serif;
}

/* --- Hero: slider left, officials right (3:1, as before the redesign) --- */
.home-hero {
    padding-top: 24px;
}

.hero__grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 24px;
    align-items: start;
}

.hero__slider {
    min-width: 0; /* let the carousel shrink inside the grid track */
}

/* Cap the carousel so it never dominates the page */
.hero__slider .carousel-item img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 8px;
}

/* The slide is a link that opens the photo in the viewer. It has to be a block
   with no line-height of its own, or the inline baseline gap shows up as a
   sliver under the image. */
.hero__slide-link {
    display: block;
    line-height: 0;
    cursor: zoom-in;
    border-radius: 8px;
}

.hero__slide-link:focus-visible {
    outline: 3px solid var(--updated-theme);
    outline-offset: 2px;
}

/* ==========================================================================
   HERO SLIDER LIGHTBOX
   ========================================================================== */

.hero-lightbox__body {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    padding: 0;
}

/* contain, not cover: the viewer exists to show the whole photo, unlike the
   slide itself which crops to a fixed band. */
.hero-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

.hero-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: var(--white-color);
    transition: background 300ms ease-in-out, border-color 300ms ease-in-out;
}

.hero-lightbox__nav:hover,
.hero-lightbox__nav:focus-visible {
    background: var(--updated-theme);
    border-color: var(--updated-theme);
}

.hero-lightbox__nav--prev { left: 16px; }
.hero-lightbox__nav--next { right: 16px; }

.hero-lightbox__footer {
    display: block;
}

.hero-lightbox__brief {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================================
   HEADER NEWS TICKER
   Replaces the reference site's Swiper marquee — pure CSS, no extra library.
   The track renders the notice list twice, so the loop is seamless.
   ========================================================================== */
.news__ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.news__ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: news-ticker-scroll 60s linear infinite;
}

.news__ticker:hover .news__ticker-track,
.news__ticker:focus-within .news__ticker-track {
    animation-play-state: paused;
}

.news__ticker-item {
    display: inline-flex;
    align-items: center;
    padding: 0 22px;
    font-size: 15px;
    color: var(--white-color);
    position: relative;
}

/* Separator between headlines */
.news__ticker-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary-color);
}

.news__ticker-item a {
    color: var(--white-color);
    transition: color 200ms ease-in-out;
}

.news__ticker-item a:hover,
.news__ticker-item a:focus-visible {
    color: #ffd84d;
    text-decoration: underline !important;
}

@keyframes news-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }  /* exactly one copy of the list */
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .news__ticker-track {
        animation: none;
    }

    .news__ticker {
        overflow-x: auto;
    }
}

/* --- Carousel caption: scrim + bottom-aligned text --- */
.hero__slider .carousel-item {
    position: relative;
}

/* Gradient scrim so the caption stays readable over bright photos */
.hero__slider .carousel-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(2, 28, 70, .85) 0%, rgba(2, 28, 70, .55) 45%, rgba(2, 28, 70, 0) 100%);
    border-radius: 0 0 8px 8px;
    pointer-events: none;
}

.hero__slider .carousel-caption {
    right: 0;
    left: 0;
    bottom: 30px;   /* clears the indicator dots below */
    padding: 0 56px;
    text-align: center;
    z-index: 2;
}

.hero__slider .carousel-caption h5 {
    color: var(--white-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 4px;
    /* keep long Nepali captions to two lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero__slider .carousel-caption p {
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Indicators sit above the scrim, below the caption */
.hero__slider .carousel-indicators {
    bottom: 8px;
    z-index: 3;
    margin-bottom: 0;
}

/* --- Carousel prev/next, themed to match the site --- */
.hero__slider .carousel-control-prev,
.hero__slider .carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    border-radius: 50%;
    background: rgba(2, 28, 70, .45);
    border: 1px solid rgba(255, 255, 255, .35);
    opacity: 1;
    transition: background 300ms ease-in-out, border-color 300ms ease-in-out;
}

.hero__slider .carousel-control-prev { left: 16px; }
.hero__slider .carousel-control-next { right: 16px; }

.hero__slider .carousel-control-prev:hover,
.hero__slider .carousel-control-next:hover,
.hero__slider .carousel-control-prev:focus-visible,
.hero__slider .carousel-control-next:focus-visible {
    background: var(--updated-theme);
    border-color: var(--updated-theme);
}

.hero__slider .carousel-control-prev-icon,
.hero__slider .carousel-control-next-icon {
    width: 18px;
    height: 18px;
    background-color: transparent;
}

/* Indicators, toned to the same palette */
.hero__slider .carousel-indicators [data-bs-target] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background-color: rgba(255, 255, 255, .65);
    opacity: 1;
    margin: 0 4px;
}

.hero__slider .carousel-indicators .active {
    background-color: var(--updated-theme);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

.hero__profiles {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Profile Section --- */
.profile__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.profile__card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--theme-light-color);
    border-radius: 8px;
    padding: 25px;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.3s;
}

/* In the narrow right-hand column the cards stack vertically */
.hero__profiles .profile__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 18px 14px;
}

.hero__profiles .profile__img {
    width: 96px;
    height: 96px;
}

.hero__profiles .profile__info {
    text-align: center;
}

.hero__profiles .profile__name {
    font-size: 17px;
}

.profile__card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.profile__img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--theme-color);
}

.profile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile__info {
    text-align: left;
}

.profile__name {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-color-400);
    margin-bottom: 4px;
    font-family: 'Mukta', sans-serif;
}

.profile__designation {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.profile__btn {
    display: inline-block;
    padding: 6px 16px;
    background: var(--theme-color);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.3s;
}

.profile__btn:hover {
    background: var(--theme-color-500);
    color: #fff;
}

/* --- Leadership Section --- */
.leadership__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.leadership__card {
    text-align: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px 20px;
    transition: box-shadow 0.3s;
}

.leadership__card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.leadership__img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    border: 3px solid var(--theme-color);
}

.leadership__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leadership__details h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-color-400);
    margin-bottom: 4px;
    font-family: 'Mukta', sans-serif;
}

.leadership__details p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* --- News Section (Two-column) --- */
.news__wrapper {
    display: flex;
    gap: 30px;
}

.news__left {
    flex: 1.5;
}

.news__right {
    flex: 1;
}

.news__tab-nav,
.documents__tab-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-bottom: 2px solid var(--border-color);
}

.news__tab-nav li,
.documents__tab-nav li {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
    font-family: 'Mukta', sans-serif;
}

.news__tab-nav li.active,
.documents__tab-nav li.active {
    color: var(--theme-color);
    border-bottom-color: var(--theme-color);
    font-weight: 600;
}

.news__tab-nav li:hover,
.documents__tab-nav li:hover {
    color: var(--theme-color);
}

.news__tab-pane,
.documents__tab-pane {
    display: none;
}

.news__tab-pane.active,
.documents__tab-pane.active {
    display: block;
}

.news__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.news__item a {
    text-decoration: none;
    display: block;
}

.news__item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-color-400);
    margin-bottom: 4px;
    font-family: 'Mukta', sans-serif;
    line-height: 1.5;
}

.news__item a:hover .news__item-title {
    color: var(--theme-color);
}

.news__item-date {
    font-size: 12px;
    color: #888;
}

.news__more {
    margin-top: 15px;
}

.news__more a {
    font-size: 14px;
    color: var(--theme-color);
    font-weight: 600;
    text-decoration: none;
}

.news__more a:hover {
    text-decoration: underline;
}

.news__empty {
    color: #888;
    font-size: 14px;
    padding: 20px 0;
}

/* --- News Cards (right column) --- */
.news__cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.news__card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--theme-light-color);
    border-radius: 6px;
    transition: box-shadow 0.3s;
}

.news__card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.news__card-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.news__card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.news__card-content h4 {
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-color-400);
    margin-bottom: 4px;
    line-height: 1.5;
    font-family: 'Mukta', sans-serif;
}

.news__card-content h4 a {
    color: inherit;
    text-decoration: none;
}

.news__card-content h4 a:hover {
    color: var(--theme-color);
}

.news__card-date {
    font-size: 12px;
    color: #888;
}

/* --- Documents Section --- */
.documents__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.documents__card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: box-shadow 0.3s;
}

.documents__card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.documents__card-icon {
    font-size: 24px;
    color: var(--secondary-color);
    flex-shrink: 0;
    margin-top: 2px;
}

.documents__card h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-color-400);
    margin-bottom: 4px;
    line-height: 1.4;
    font-family: 'Mukta', sans-serif;
}

.documents__card h4 a {
    color: inherit;
    text-decoration: none;
}

.documents__card h4 a:hover {
    color: var(--theme-color);
}

.documents__card span {
    font-size: 12px;
    color: #888;
}

/* --- Publications Grid --- */
.publications__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.publications__card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.publications__card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.publications__card-img {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-light-color);
    padding: 15px;
}

.publications__card-img img {
    max-height: 70px;
    object-fit: contain;
}

.publications__card-body {
    padding: 15px;
}

.publications__card-body h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.4;
    font-family: 'Mukta', sans-serif;
}

.publications__card-body h4 a {
    color: var(--theme-color-400);
    text-decoration: none;
}

.publications__card-body h4 a:hover {
    color: var(--theme-color);
}

.publications__card-body span {
    font-size: 12px;
    color: #888;
}

/* --- Photo Gallery Grid --- */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.gallery__card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    height: 200px;
}

.gallery__card a {
    display: block;
    height: 100%;
}

.gallery__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery__card:hover img {
    transform: scale(1.05);
}

.gallery__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 20px 15px 12px;
    color: #fff;
}

.gallery__caption p {
    font-size: 13px;
    margin-bottom: 2px;
    font-family: 'Mukta', sans-serif;
}

.gallery__caption span {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

/* ==========================================================================
   HOMEPAGE RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
    /* Stack the hero: slider on top, officials side by side beneath */
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__profiles {
        flex-direction: row;
    }

    .hero__profiles .profile__card {
        flex: 1;
    }

    .hero__slider .carousel-item img {
        height: 300px;
    }

    .profile__grid {
        grid-template-columns: 1fr;
    }

    .profile__card {
        flex-direction: column;
        text-align: center;
    }

    .news__wrapper {
        flex-direction: column;
    }

    .leadership__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .leadership__grid {
        grid-template-columns: 1fr;
    }

    .documents__grid {
        grid-template-columns: 1fr;
    }

    .gallery__grid {
        grid-template-columns: 1fr;
    }

    .publications__grid {
        grid-template-columns: 1fr;
    }

    .news__tab-nav li,
    .documents__tab-nav li {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* ---------- Footer copyright bar ---------- */
.footer__copyright {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    text-align: center;
    font-size: .88rem;
    color: rgba(255, 255, 255, .85);
}

/* ==========================================================================
   INNER PAGE PATTERN
   Shared shell for all non-homepage views (notices, resources, gallery,
   press releases, paripatra, pages). Modeled on opmcm.gov.np inner pages.
   ========================================================================== */

.inner-main {
    background: var(--white-color);
    padding: 0 0 56px;
    min-height: 45vh;
}

.inner-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- Page heading: label + short red rule underneath ---------- */
.inner-page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0 0 6px;
    line-height: 1.6;
}

.inner-page-title-rule {
    width: 78px;
    height: 3px;
    background: var(--secondary-color);
    border: 0;
    opacity: 1;
    margin: 0 0 26px;
}

/* ---------- White content panel ---------- */
.inner-panel {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(16, 40, 80, .06);
}

/* ---------- Accessibility: font-size controls ---------- */
.a11y-textsize {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.a11y-textsize button {
    min-width: 42px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--theme-light-color);
    color: var(--theme-color);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.a11y-textsize button:hover,
.a11y-textsize button:focus-visible {
    background: var(--theme-color);
    color: var(--white-color);
}

/* Text size is scaled at the root element by ~/Content/a11y.css, so every rem
   below follows it automatically. No per-rule opt-in needed. */

/* ---------- Listing table ---------- */
.inner-table-wrap {
    overflow-x: auto;
}

table.inner-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

table.inner-table thead th {
    color: var(--theme-color);
    font-weight: 700;
    font-size: .98rem;
    text-align: center;
    padding: 14px 12px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

table.inner-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    text-align: center;
    font-size: .95rem;
}

table.inner-table tbody td.cell-title {
    text-align: left;
    line-height: 1.7;
}

table.inner-table tbody tr:hover {
    background: var(--theme-light-color);
}

table.inner-table tbody tr:last-child td {
    border-bottom: 0;
}

.cell-desc {
    display: block;
    margin-top: 4px;
    font-size: .87rem;
    color: #6b7280;
    line-height: 1.6;
}

/* ---------- Breadcrumb above the panel ---------- */
.inner-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: .9rem;
    color: #6b7280;
}

.inner-breadcrumb i {
    font-size: .7rem;
    opacity: .6;
}

.inner-breadcrumb .current {
    color: var(--theme-color);
    font-weight: 600;
}

.cell-title a {
    color: #1f2937;
    text-decoration: none;
}

.cell-title a:hover,
.cell-title a:focus-visible {
    color: var(--theme-color);
    text-decoration: underline;
}

/* File-type + action icons */
.file-icon {
    font-size: 1.25rem;
    color: var(--secondary-color);
}

.action-icon {
    font-size: 1.1rem;
    color: var(--secondary-color);
    text-decoration: none;
}

.action-icon:hover,
.action-icon:focus-visible {
    color: var(--theme-color);
}

.inner-empty {
    text-align: center;
    padding: 48px 16px;
    color: #6b7280;
}

/* ---------- CMS prose pages ---------- */
.content__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-color-400);
    margin: 0 0 6px;
}

.content__date {
    font-size: .85rem;
    color: #6b7280;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.content__body {
    line-height: 1.9;
    color: #333;
}

.content__body p { margin: 0 0 14px; }
.content__body h1, .content__body h2, .content__body h3,
.content__body h4, .content__body h5 {
    color: var(--theme-color-400);
    margin: 22px 0 10px;
}
.content__body ul, .content__body ol { margin: 0 0 14px 22px; }
.content__body ul { list-style: disc; }
.content__body ol { list-style: decimal; }
.content__body li { margin-bottom: 6px; }
.content__body a { color: var(--theme-color); text-decoration: underline !important; }
.content__body img { max-width: 100%; height: auto; border-radius: 6px; }

/* Editor-pasted tables should not blow out the layout */
.content__body table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    display: block;
    overflow-x: auto;
}

.content__body table td, .content__body table th {
    border: 1px solid var(--border-color);
    padding: 8px 10px;
}

/* ---------- Sitemap ---------- */
.sitemap__panel ul {
    list-style: none;
    margin: 0 0 0 6px;
    padding: 0;
}

.sitemap__panel ul ul {
    margin-left: 20px;
    padding-left: 14px;
    border-left: 1px solid var(--border-color);
}

.sitemap__panel li {
    padding: 5px 0;
}

.sitemap__panel a {
    color: #1f2937;
    font-size: .95rem;
}

.sitemap__panel a:hover,
.sitemap__panel a:focus-visible {
    color: var(--theme-color);
    text-decoration: underline !important;
}

/* Karmachaaris page heading — an h1 that should keep its previous h3 size */
.karmachaari__heading {
    font-size: 1.5rem;
    margin: 0;
}

/* Staff detail photo. It used to carry an inline height:35rem alongside
   .img-fluid; the inline height beat img-fluid's height:auto, so once the
   column narrowed the width shrank while the height stayed put and the face
   stretched vertically. Let the width lead and hold the square with
   aspect-ratio, cropping rather than distorting. */
.karmachaari-detail__figure {
    margin: 0;
    text-align: center;
}

.karmachaari-detail__photo {
    display: block;
    width: 100%;
    max-width: 35rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    margin: 0 auto;
}

/* ==========================================================================
   ACCESSIBILITY: visible keyboard focus
   Several search controls set outline:none with no replacement, which hides
   the focus ring for keyboard users (WCAG 2.4.7). Restore an explicit
   indicator on focus-visible so mouse users see no change.
   ========================================================================== */
.header-7-top .top__group .hidden__cta .search__cta .search__dropdown .search__input input:focus-visible,
.header-7-top .top__group .hidden__cta .search__cta .search__dropdown .search__input .search__btn:focus-visible,
.global-search form .search__group .search-input input:focus-visible,
.global-search form .search__group .search-input .search__btn:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Anything else that relies on the UA default keeps a consistent ring */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

/* On the dark header the ring needs to be light to be visible */
.header-7-top a:focus-visible,
.header-7-top button:focus-visible,
.header-7-top [tabindex]:focus-visible {
    outline-color: var(--white-color);
}

/* ==========================================================================
   FORMS (feedback, and the public request forms)
   ========================================================================== */
.form__intro {
    margin: -8px 0 20px;
    color: #6b7280;
    line-height: 1.8;
    max-width: 70ch;
}

.form__panel {
    max-width: 860px;
}

.form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.form__field--full {
    grid-column: 1 / -1;
}

.form__field label {
    display: block;
    margin-bottom: 6px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--theme-color-400);
}

.form__required {
    color: var(--secondary-color);
}

.form__field input,
.form__field textarea,
.form__field select {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: .95rem;
    font-family: inherit;
    color: #1f2937;
    background: var(--white-color);
    outline: none;
    transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(36, 96, 185, .12);
}

.form__field textarea {
    resize: vertical;
    line-height: 1.7;
}

.form__actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--theme-color);
    color: var(--white-color);
    border: 0;
    border-radius: 6px;
    padding: 11px 26px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms ease-in-out;
}

.form__submit:hover:not(:disabled),
.form__submit:focus-visible:not(:disabled) {
    background: var(--theme-color-500);
}

.form__submit:disabled {
    opacity: .6;
    cursor: default;
}

.form__msg {
    margin-top: 4px;
    padding: 11px 16px;
    border-radius: 6px;
    font-size: .93rem;
}

.form__msg--ok {
    background: #e8f5ec;
    color: #1b5e33;
    border: 1px solid #b8e0c6;
}

.form__msg--error {
    background: var(--secondary-color-100);
    color: #96101c;
    border: 1px solid var(--secondary-color-200);
}

@media (max-width: 640px) {
    .form__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.contact__office {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0 0 16px;
}

.contact__list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.contact__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: .95rem;
    color: #1f2937;
    line-height: 1.7;
}

.contact__list li:last-child {
    border-bottom: 0;
}

.contact__list i {
    color: var(--theme-color);
    width: 18px;
    margin-top: 5px;
    flex: 0 0 18px;
}

.contact__list a {
    color: #1f2937;
}

.contact__list a:hover,
.contact__list a:focus-visible {
    color: var(--theme-color);
    text-decoration: underline !important;
}

.contact__list--hours li {
    justify-content: space-between;
    gap: 16px;
}

.contact__subhead {
    font-size: .98rem;
    font-weight: 700;
    color: var(--theme-color-400);
    margin: 0 0 8px;
}

.contact__feedback-cta {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: .93rem;
    color: #6b7280;
}

.contact__feedback-cta a {
    color: var(--theme-color);
    font-weight: 600;
}

.contact__map {
    min-height: 340px;
}

.contact__map iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: block;
}

.contact__section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-color);
    margin: 30px 0 14px;
}

@media (max-width: 900px) {
    .contact__layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- Gallery cards (Bootstrap grid + card) ---------- */
.gallery-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
}

.gallery-card:hover {
    box-shadow: 0 6px 18px rgba(2, 28, 70, .12);
    transform: translateY(-2px);
}

.gallery-card__media {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    border: 0;
    background: var(--theme-light-color);
    cursor: pointer;
}

.gallery-card__title {
    font-size: .98rem;
    font-weight: 600;
    color: var(--theme-color-400);
    margin: 0 0 4px;
    line-height: 1.5;
}

.gallery-card__text {
    font-size: .86rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
}

/* ---------- DataTables chrome, restyled to match the reference ---------- */
.inner-panel .dataTables_filter {
    float: right;
    margin-bottom: 16px;
}

.inner-panel .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0;
}

.inner-panel .dataTables_filter input {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: .95rem;
    min-width: 260px;
    outline: none;
}

.inner-panel .dataTables_filter input:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(36, 96, 185, .12);
}

.inner-panel .dataTables_length,
.inner-panel .dataTables_info {
    font-size: .9rem;
    color: #6b7280;
}

.inner-panel .dataTables_paginate {
    margin-top: 18px;
    text-align: center;
}

.inner-panel .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 4px;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    background: var(--white-color) !important;
    color: var(--theme-color) !important;
    font-size: .9rem;
    cursor: pointer;
}

.inner-panel .dataTables_paginate .paginate_button.current {
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: var(--white-color) !important;
}

.inner-panel .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: default;
}

@media (max-width: 768px) {
    .inner-page-title {
        font-size: 1.15rem;
    }

    .inner-panel {
        padding: 14px;
    }

    .inner-panel .dataTables_filter {
        float: none;
    }

    .inner-panel .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }
}

/* ---------- Search results page ---------------------------------------- */
/* The site-wide search previously landed on a placeholder view, so none of
   this existed. Styling follows the inner-page pattern used by the document
   listing pages. */
.search-page__form {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}

.search-page__form input[type="text"] {
    flex: 1 1 260px;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

.search-page__form button {
    padding: 10px 22px;
    border: 0;
    border-radius: 4px;
    background: var(--theme-color);
    color: var(--white-color);
    font-weight: 600;
    cursor: pointer;
}

.search-page__form button:hover,
.search-page__form button:focus-visible {
    background: var(--theme-dark-color, #17457f);
}

.search-page__summary {
    margin: 0 0 12px;
    color: #6b7280;
    font-size: .95rem;
}

.search-page__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    font-size: .92rem;
    line-height: 1.6;
}

.search-chip:hover,
.search-chip:focus-visible {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

.search-chip.is-active {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white-color);
}

.search-chip__count {
    font-size: .8rem;
    opacity: .85;
}

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-result {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.search-result:last-child {
    border-bottom: 0;
}

.search-result__title {
    display: inline-block;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--theme-color);
    text-decoration: none;
    line-height: 1.6;
}

.search-result__title:hover,
.search-result__title:focus-visible {
    text-decoration: underline;
}

.search-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: .85rem;
    color: #6b7280;
}

.search-result__badge {
    background: var(--theme-light-color, #eef3fb);
    color: var(--theme-color);
    border-radius: 3px;
    padding: 2px 8px;
    font-weight: 600;
}

.search-result__snippet {
    margin: 8px 0 0;
    line-height: 1.8;
    color: #374151;
}

.search-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
}

.search-pager a {
    color: var(--theme-color);
    text-decoration: none;
    font-weight: 600;
}

.search-pager a:hover,
.search-pager a:focus-visible {
    text-decoration: underline;
}

.search-pager__status {
    color: #6b7280;
    font-size: .92rem;
}
/* ---------- Photo albums ------------------------------------------------ */
/* A gallery entry is an album now, so cards link to an album page and carry a
   photo count instead of pointing straight at one image file. */
.gallery-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.gallery-card__link:hover .gallery-card__title,
.gallery-card__link:focus-visible .gallery-card__title {
    color: var(--theme-color);
    text-decoration: underline;
}

.gallery-card__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: .82rem;
    color: #6b7280;
}

.album__date,
.album__brief {
    color: #6b7280;
    margin-bottom: 8px;
}

.album__full {
    line-height: 1.9;
    margin-bottom: 18px;
}

.album__figure {
    margin: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
}

.album__image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    transition: transform .25s ease;
}

.album__figure:hover .album__image {
    transform: scale(1.04);
}

.album__caption {
    padding: 8px 10px;
    font-size: .88rem;
    line-height: 1.6;
    color: #374151;
}

.album__back {
    margin-top: 22px;
}

.album__back a {
    color: var(--theme-color);
    text-decoration: none;
    font-weight: 600;
}

.album__back a:hover,
.album__back a:focus-visible {
    text-decoration: underline;
}
/* ---------- Long titles ------------------------------------------------- */
/* Some album and notice titles are a full paragraph rather than a heading --
   an editor put the description in the title field. Clamping keeps one long
   entry from making its card several times taller than its neighbours. The
   text stays in the DOM, so screen readers and search still see all of it, and
   a title attribute shows the rest on hover. */
.gallery-card__title,
.gallery__caption p,
.search-result__title,
.album__caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card__title {
    -webkit-line-clamp: 2;
    /* Fallback for browsers without line-clamp: cap the height instead. */
    max-height: 3.2em;
    line-height: 1.6;
}

.gallery-card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: 5.4em;
    line-height: 1.8;
}

.gallery__caption p {
    -webkit-line-clamp: 2;
    max-height: 3em;
    line-height: 1.5;
    margin-bottom: 2px;
}

.search-result__title {
    -webkit-line-clamp: 2;
    max-height: 3.4em;
    line-height: 1.7;
}

.album__caption {
    -webkit-line-clamp: 2;
    max-height: 3.2em;
}

/* The album page heading is a real <h1>, so it is not truncated -- but a
   paragraph-length one should not dwarf the page either. */
.inner-page-title {
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.9rem);
    line-height: 1.5;
}