html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
    .menuPort {
        font-family: "Barlow", Arial, Helvetica, sans-serif;
        font-size: 13px !important;
        position: relative;
    }
}

#TopScroll {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background: #1a4492 !important;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

#TopScroll:hover {
    background-color: green;
}

@media (max-width: 768px) {
    #TopScroll {
        bottom: 12px !important;
        right: 12px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        opacity: 0.85 !important;
    }
}

.dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dropdown-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.dropdown-trigger:hover,
.dropdown:hover .dropdown-trigger,
.dropdown.dropdown-open .dropdown-trigger {
    color: #facc15 !important;
}

.Top_Header .dropdown-content,
.dropdown-content {
    display: none;
    position: absolute !important;
    top: calc(100% + 7px) !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 4px !important;
    padding: 4px 0 !important;
    z-index: 100000 !important;
    list-style: none !important;
    margin: 0 !important;
}

.accessibility-dropdown .dropdown-content,
.Top_Header .accessibility-dropdown .dropdown-content {
    min-width: 54px !important;
}

.lang-dropdown .dropdown-content,
.Top_Header .lang-dropdown .dropdown-content {
    min-width: 90px !important;
}

.Top_Header .dropdown:hover .dropdown-content,
.Top_Header .dropdown.dropdown-open .dropdown-content,
.dropdown:hover .dropdown-content,
.dropdown.dropdown-open .dropdown-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.Top_Header .dropdown-content a,
.dropdown-content a {
    display: block !important;
    padding: 7px 14px !important;
    color: #333333 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
    background: #ffffff !important;
    white-space: nowrap !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.Top_Header .dropdown-content a:last-child,
.dropdown-content a:last-child {
    border-bottom: none !important;
}

.Top_Header .dropdown-content a:hover,
.dropdown-content a:hover {
    background-color: #f1f5f9 !important;
    color: #1a4492 !important;
}

.header-search-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
}

.search-main {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

.search-main:hover,
.header-search-wrapper.search-open .search-main {
    color: #facc15 !important;
}

.header-search-wrapper .search-form-main {
    display: none !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
    border-top: 2px solid #e02424 !important;
    border-radius: 0 0 6px 6px !important;
    padding: 12px 16px !important;
    position: absolute !important;
    right: -4px !important;
    top: calc(100% + 12px) !important;
    width: 325px !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 9999999 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.header-search-wrapper .search-form-main.active-search,
.header-search-wrapper.search-open .search-form-main {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.header-search-wrapper .search-form-main:before {
    content: "" !important;
    position: absolute !important;
    right: 2px !important;
    top: -12px !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 12px solid #e02424 !important;
    width: 0 !important;
    height: 0 !important;
}

.header-search-wrapper .search-form-main form {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 10px !important;
}

.header-search-wrapper .search-form-main label {
    flex: 1 1 auto !important;
    margin: 0 !important;
    display: block !important;
    width: auto !important;
}

.header-search-wrapper .search-form-main .search-field {
    border-radius: 20px !important;
    border: 1px solid #d1d5db !important;
    padding: 0 16px !important;
    width: 100% !important;
    font-size: 13.5px !important;
    color: #374151 !important;
    box-sizing: border-box !important;
    height: 38px !important;
    outline: none !important;
    float: none !important;
    background: #ffffff !important;
    margin: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.header-search-wrapper .search-form-main .search-field:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
}

.header-search-wrapper .search-form-main form > a,
.header-search-wrapper .search-form-main a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.header-search-wrapper .search-form-main .search-submit {
    flex: 0 0 auto !important;
    border: none !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    padding: 0 20px !important;
    height: 38px !important;
    background: #2b6cb0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease !important;
}

.header-search-wrapper .search-form-main .search-submit:hover {
    background: #1e4e8c !important;
}

/* Ensure Top_Header bar & first header inner have highest stacking context so dropdowns float over branding & nav headers */
.mainHeader > .main-header-inner:first-child,
.mainHeader .main-header-inner:first-of-type {
    position: relative !important;
    z-index: 100000 !important;
}

.mainHeader > .main-header-inner.menuPort1,
.mainHeader .menuPort1 {
    position: relative !important;
    z-index: 100 !important;
}

.mainHeader .main-header-inner > div:first-child,
.Top_Header,
.Top_Header .Menu_icon,
.Top_Header .dropdown,
.Top_Header .header-search-wrapper {
    position: relative !important;
    overflow: visible !important;
}

.mainHeader .main-header-inner > div:first-child,
.chem-top-bar-strip {
    background: #3668a2 !important;
    z-index: 100000 !important;
}

.mainHeader .main-header-inner > div:first-child {
    z-index: 100000 !important;
}

.me {
    width: 400px;
    margin: 90px auto;
}

.me p,
.me h1 {
    letter-spacing: 3px;
    text-align: center;
}

.me p {
    font-weight: 200;
}

.me span {
    font-weight: bold;
}

.social {
    z-index: 99999;
    width: 100px;
    position: fixed;
    top: 320px;
}

.social ul {
    padding: 0px;
    transform: translate(-270px, 0);
}

.social ul li {
    height: 48px;
    display: block;
    margin: 15px;
    background: linear-gradient(156deg, rgba(213, 165, 43, 0.9780287114845938) 20%, rgba(253, 29, 173, 1) 44%, rgba(252, 176, 69, 1) 79%);
    width: 300px;
    text-align: right;
    padding: 10px;
    border-radius: 0 30px 30px 0;
    transition: all 1s;
}

.social ul li:hover {
    transform: translate(110px, 0);
    background: red;
}

.social ul li:hover a {
    color: #fff;
}

.social ul li:hover i {
    color: #fff;
    background: #0bc270;
    transform: rotate(360deg);
    transition: all 1s;
}

.social ul li i {
    margin-left: 10px;
    color: #0bc270;
    background: #fff;
    padding: 1px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 32px;
    transform: rotate(0deg);
}

.menuPort {
    font-family: "Barlow", Arial, Helvetica, sans-serif;
    font-size: 14px !important;
    position: relative;
}

#content {
    font-size: 16px;
    transition: font-size 0.2s;
}

/* Top Header Utility Bar - Government strip (single line, no wrapping) */
.Top_Header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 16px !important;
    margin: 0 !important;
    background-color: #3668a2 !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 34px !important;
}

.Top_Header_Left {
    display: block !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.Menu_icon {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.Menu_icon span a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: color 0.2s ease !important;
}

.Menu_icon span a:hover {
    color: #facc15 !important;
}

.Menu_icon .sep {
    color: rgba(255, 255, 255, 0.6) !important;
    user-select: none !important;
    font-size: 12px !important;
}

.Menu_icon .lang-dropdown .lang-icon {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

.chem-brand-header {
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

.chem-brand-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 24px !important;
    gap: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
}

.chem-brand-dept {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
}

.chem-dept-title {
    font-size: 18px !important;
    color: #1a4492 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.chem-dept-sub {
    font-size: 9.5px !important;
    color: #222222 !important;
    margin: 3px 0 0 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

.chem-brand-portal {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 0 10px !important;
}

.chem-portal-title {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 34px !important;
    color: #222222 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
}

.chem-brand-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.chem-desktop-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: #2a6ea1 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    box-shadow: 0 2px 4px rgba(42, 110, 161, 0.25) !important;
}

.chem-desktop-btn:hover {
    background: #1a4492 !important;
    color: #ffffff !important;
}

.chem-desktop-btn img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

/* ============================================================
   ChemIndia Sticky Header Fix
   ROOT CAUSE: .bt-page-wrap has overflow:hidden (chemindia/style.css)
   which breaks position:sticky. Legacy JS adds btStickyHeaderActive
   which does transform:translateY(-100%) hiding the header.
   FIX: Use position:fixed (works regardless of ancestor overflow).
   JS dynamically sets body padding-top = header height to prevent overlap.
   ============================================================ */

@media screen {
    /* 1. Make header FIXED at top on screen - works regardless of any ancestor overflow */
    .mainHeader {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background: #ffffff !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        -webkit-transition: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
        overflow: visible !important;
    }

    /* 2. Prevent legacy btStickyHeaderActive from overriding with translateY(-100%) */
    body.btStickyHeaderActive .mainHeader,
    body.btStickyHeaderOpen .mainHeader,
    body.btStickyHeaderClosed .mainHeader,
    body.btMenuHorizontal.btStickyHeaderActive .mainHeader,
    body.btStickyEnabled .mainHeader {
        position: fixed !important;
        top: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        -webkit-transition: none !important;
    }
}

/* 3. Ensure ALL three header sections are always visible */
.mainHeader .main-header-inner,
.mainHeader .chem-brand-header,
.mainHeader .menuPort1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mainHeader .Top_Header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override legacy hiding of topBar and logo on btStickyHeaderActive */
body.btStickyHeaderActive .mainHeader .topBar,
body.btStickyHeaderActive .mainHeader .chem-brand-header,
body.btStickyHeaderActive .mainHeader .menuPort1,
body.btMenuHorizontal.btStickyHeaderActive .mainHeader .topBar,
body.btMenuHorizontal.btStickyHeaderActive .mainHeader .bt-logo-area,
body.btMenuBelowLogo.btMenuHorizontal.btStickyHeaderActive .mainHeader .bt-logo-area {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

body.btStickyHeaderActive .mainHeader .Top_Header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

.main-header-inner {
    overflow: visible !important;
}

.bt-vertical-header-top {
    display: none !important;
}

.btMenuVerticalLeft.btMenuVerticalOn .bt-content-wrap,
.btMenuVerticalLeft.btMenuVerticalOn .bt-vertical-header-top,
.btMenuVerticalLeft.btMenuVerticalOn .bt-site-footer {
    transform: none !important;
}

/* Remove the gap that the legacy theme JS injects as padding-top on bt-content-wrap
   (it compensates for a sticky/fixed header that no longer exists in ChemIndia layout) */
.bt-content-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Also reset pad-tb top padding on inner-page sections —
   the section already uses inline style="padding-top:0" but
   .pad-tb in style1.css overrides it with 100px               */
.about-agency.pad-tb,
section.pad-tb {
    padding-top: 20px !important;
}

/* ── Global breadcrumb nav spacing fix ──────────────────────────────────
   All inner pages use  mt-[30px]  on the breadcrumb <nav>.
   Tailwind JIT classes won't be stripped here because this targets the
   standard flex nav pattern used site-wide.                              */
nav[aria-label="Breadcrumb "],
nav[aria-label="Breadcrumb"] {
    margin-top: 10px !important;
}

/* Ensure no gap above or below pagetitle inner containers */
.row-fluid.pagetitle,
.pagetitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Tooltip info boxes (used in Chemicals and Petrochemicals pages) — global floating tooltip */
div[id^="pop-up"] {
    position: absolute !important;
    z-index: 999999 !important;
    margin: 0 !important;
    max-width: min(85vw, 42rem) !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

div[id^="pop-up"] p {
    max-width: 100% !important;
    width: auto !important;
    margin: 0 !important;
}

/* ── Responsive & Zoom fixes for all inner pages (<= 1219px: covers 150%, 200%+ zoom & mobile) ── */

@media (max-width: 1219px) {

    /* Remove fixed Bootstrap container caps (540px, 720px, 960px) so content utilizes full screen width at 200% zoom */
    .bt-content-wrap .container,
    .bt-content-holder .container,
    .bt-content .container,
    section .container,
    .about-agency .container,
    .container.mx-auto {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Section top and content wrappers full width with 0 side padding */
    .bt-content-wrap,
    .bt-content-holder,
    .bt-content,
    .bt_bb_wrapper,
    section.about-agency,
    .about-agency {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Common heading and breadcrumbs stretch edge-to-edge inside the container */
    .common-heading {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    nav[aria-label="Breadcrumb "],
    nav[aria-label="Breadcrumb"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px 12px !important;
        border-radius: 4px !important;
    }

    nav[aria-label="Breadcrumb "] ol,
    nav[aria-label="Breadcrumb"] ol {
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Table responsive wrapper takes full container width without side gaps */
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    .table-responsive > .table,
    .table-responsive > table {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Full-width images on mobile & high zoom */
    .bt-content-holder img,
    .bt-content img,
    section img,
    .container img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Team photo full-width */
    img[src*="Teamnew"] {
        width: 100% !important;
        height: auto !important;
    }

    /* Popup info boxes (used in Chemicals and Petrochemicals pages) — keep floating tooltip */
    div[id^="pop-up"] {
        position: absolute !important;
        z-index: 999999 !important;
        margin: 0 !important;
        max-width: min(85vw, 42rem) !important;
        box-sizing: border-box !important;
    }

    div[id^="pop-up"] p {
        max-width: 100% !important;
        width: auto !important;
    }

    /* Footer Useful Links spacing on responsive & high zoom (prevents sticking to policy links bar) */
    footer.footer_Style .max-w-screen-xl {
        padding-top: 48px !important;
    }
}

/* Mobile Footer Fixes (< 768px): Align social icons & content safely inside the footer boundary */
@media (max-width: 767px) {
    footer.footer_Style .max-w-screen-xl {
        padding-top: 36px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    footer.footer_Style ul {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    footer.footer_Style .scndtp {
        margin-left: 0 !important;
    }

    footer.footer_Style .flex.space-x-4 {
        margin-left: 0 !important;
        padding-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    footer.footer_Style .flex.space-x-4 a {
        width: auto !important;
        display: inline-flex !important;
    }

    footer.footer_Style .flex.space-x-4 a img {
        margin-top: 14px !important;
        margin-left: 0 !important;
        display: block !important;
    }

    /* Mobile Search Compact (<= 767px) */
    .header-search-wrapper .search-form-main {
        width: 260px !important;
        max-width: calc(100vw - 20px) !important;
        padding: 8px 10px !important;
        right: -2px !important;
        top: calc(100% + 8px) !important;
        border-radius: 0 0 6px 6px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    }

    .header-search-wrapper .search-form-main:before {
        top: -8px !important;
        right: 4px !important;
        border-bottom-width: 8px !important;
        border-left-width: 6px !important;
        border-right-width: 6px !important;
    }

    .header-search-wrapper .search-form-main form {
        gap: 6px !important;
    }

    .header-search-wrapper .search-form-main .search-field {
        height: 32px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
        border-radius: 16px !important;
    }

    .header-search-wrapper .search-form-main .search-submit {
        height: 32px !important;
        font-size: 12px !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
    }
}


body.btMenuVerticalOn {
    overflow-x: hidden !important;
}

/* Desktop Navigation (>= 1220px)
   Below 1220px: mobile hamburger menu kicks in.
   This covers: 100%–124% zoom on 1536px screens (effective width ≥ 1220px).
   At 125%+ zoom (≤ 1219px effective) the mobile nav is shown instead.    */
@media (min-width: 1220px) {
    .chem-mobile-bar {
        display: none !important;
    }

    /* Hide subToggler injected by legacy scripts */
    .subToggler {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    li.chem-mobile-only,
    .menuPort nav ul#menu-primary-menu>li.chem-mobile-only {
        display: none !important;
    }

    .Para_text {
        margin: 0 !important;
    }

    .menuPort1 {
        background: linear-gradient(to right, #2271a0 0%, #7c49ab 100%, #7bd9e8 100%) repeat scroll 0 0 !important;
        color: white !important;
        margin-top: 0 !important;
        height: 64px !important;
        display: block !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1001 !important;
    }

    .menuPort1 .bt-logo-area {
        overflow: visible !important;
        position: relative !important;
        z-index: 1002 !important;
    }

    .menuPort {
        overflow: visible !important;
        position: relative !important;
        z-index: 1003 !important;
    }

    .menuPort nav,
    .menuPort nav#chemNavMenu {
        display: block !important;
        float: none !important;
        overflow: visible !important;
        max-height: none !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    .menuPort nav ul#menu-primary-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 64px !important;
        overflow: visible !important;
    }

    .menuPort>nav>ul>li,
    .menuPort nav ul#menu-primary-menu>li {
        padding: 0 30px 0 0 !important;
        float: left !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 64px !important;
        line-height: 64px !important;
        position: relative !important;
        overflow: visible !important;
    }

    .menuPort nav>ul>li>a,
    .menuPort nav ul#menu-primary-menu>li>a {
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        height: 64px !important;
        line-height: 64px !important;
        font-size: 14px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
        text-decoration: none !important;
    }

    .menuPort nav>ul>li>a:hover,
    .menuPort nav>ul>li:hover>a,
    .menuPort nav>ul>li.chem-desktop-open>a {
        color: #fcb06d !important;
    }

    .chem-sub-arrow {
        display: inline-block !important;
        margin-left: 6px !important;
        font-size: 12px !important;
        transition: transform 0.25s ease !important;
    }

    .menuPort nav>ul>li:hover>a .chem-sub-arrow,
    .menuPort nav>ul>li.chem-desktop-open>a .chem-sub-arrow {
        transform: rotate(180deg) !important;
    }

    .current-menu-item>a {
        color: #ffeb3b !important;
        font-weight: bold !important;
    }

    /* Submenu dropdown container */
    .menuPort nav ul.sub-menu,
    .menuPort nav>ul>li>ul.sub-menu,
    .menuPort ul>li>ul {
        display: none;
        position: absolute !important;
        top: 64px !important;
        left: 0 !important;
        right: auto !important;
        min-width: 230px !important;
        width: max-content !important;
        max-width: 320px !important;
        background: #1a4492 !important;
        background-color: #1a4492 !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        z-index: 999999 !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        border-radius: 0 0 8px 8px !important;
        border-top: 3px solid #fcb06d !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
        list-style: none !important;
    }

    /* Invisible hover-bridge to avoid gap between menu item and dropdown */
    .menuPort nav ul.sub-menu:before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
        background: transparent;
    }

    /* Desktop hover & active show state */
    .menuPort nav ul li:hover>ul.sub-menu,
    .menuPort nav>ul>li:hover>ul.sub-menu,
    .menuPort nav ul li.chem-desktop-open>ul.sub-menu,
    .menuPort nav>ul>li.chem-desktop-open>ul.sub-menu,
    .menuPort nav ul li.on>ul.sub-menu,
    .menuPort nav>ul>li.on>ul.sub-menu,
    .menuPort ul>li:hover>ul,
    .menuPort ul>li.chem-desktop-open>ul,
    .menuPort ul>li.on>ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Submenu list items */
    .menuPort nav ul.sub-menu li,
    .menuPort nav>ul>li>ul.sub-menu li,
    .menuPort ul>li>ul li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        line-height: normal !important;
        float: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .menuPort nav ul.sub-menu li:last-child,
    .menuPort nav>ul>li>ul.sub-menu li:last-child {
        border-bottom: none !important;
    }

    /* Submenu item links */
    .menuPort nav ul.sub-menu li a,
    .menuPort nav>ul>li>ul.sub-menu li a,
    .menuPort ul>li>ul li a {
        display: block !important;
        padding: 11px 20px !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        height: auto !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        text-align: left !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-left: 3px solid transparent !important;
        transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
        font-family: 'Poppins', sans-serif !important;
    }

    .menuPort nav ul.sub-menu li a:hover,
    .menuPort nav>ul>li>ul.sub-menu li a:hover,
    .menuPort ul>li>ul li a:hover {
        background: #235fcd !important;
        color: #ffffff !important;
        padding-left: 24px !important;
        border-left-color: #fcb06d !important;
        text-decoration: none !important;
    }
}

/* ==========================================================================
   Mobile & Tablet Navigation (< 1220px)
   Covers high browser zoom levels (125%-200%+ on desktop) & mobile devices.
   Header is kept ultra-compact, sleek, and all items (Logo, Title, Login,
   Registration) stay strictly in place without being hidden.
   ========================================================================== */

/* 1. Medium Screens / High Zoom (500px – 1219px) - e.g. 150%-200%+ Zoom on Desktop
   Keeps Logo, Portal Name (center), and Login/Registration on ONE SINGLE ROW without wrapping */
@media (min-width: 769px) and (max-width: 1219px) {
    .mainHeader .Top_Header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 2px 10px !important;
        min-height: 26px !important;
        height: 26px !important;
    }

    .mainHeader .Top_Header_Left {
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }

    .mainHeader .Menu_icon {
        font-size: 10.5px !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }

    .mainHeader .Menu_icon span a {
        font-size: 10.5px !important;
    }

    .mainHeader .Menu_icon .sep {
        font-size: 9.5px !important;
        margin: 0 1px !important;
    }

    .mainHeader .Menu_icon .lang-dropdown .lang-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .mainHeader .chem-brand-header {
        padding: 0 !important;
        margin: 0 !important;
    }

    .mainHeader .chem-brand-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 2px 12px !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mainHeader .chem-brand-dept {
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .mainHeader .logotext {
        position: relative !important;
        padding-left: 32px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }

    .mainHeader .chem-brand-logo-img {
        width: 24px !important;
        height: 38px !important;
    }

    .mainHeader .logotext:before {
        content: '' !important;
        width: 24px !important;
        height: 38px !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .mainHeader .chem-dept-title {
        font-size: 11.5px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        color: #1a4492 !important;
        white-space: nowrap !important;
    }

    .mainHeader .chem-dept-sub {
        font-size: 6.8px !important;
        line-height: 1.1 !important;
        margin: 1px 0 0 0 !important;
        color: #334155 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .mainHeader .chem-brand-portal {
        flex: 1 1 auto !important;
        width: auto !important;
        padding: 0 4px !important;
        text-align: center !important;
        border: none !important;
    }

    .mainHeader .chem-portal-title {
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 14.5px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: 600 !important;
        color: #1a4492 !important;
        white-space: nowrap !important;
        border: none !important;
    }

    .mainHeader .chem-brand-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .mainHeader .chem-desktop-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }

    .mainHeader .chem-desktop-btn img {
        width: 12px !important;
        height: 12px !important;
    }

    .chem-mobile-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: linear-gradient(135deg, #1a4492 0%, #235fcd 100%) !important;
        padding: 6px 14px !important;
        min-height: 52px !important;
        height: 52px !important;
        box-shadow: 0 2px 6px rgba(26, 68, 146, 0.2) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .chem-mobile-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 40px !important;
        min-width: 46px !important;
        min-height: 40px !important;
        background: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        outline: none !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }

    .chem-mobile-toggle-btn:hover,
    .chem-mobile-toggle-btn:focus {
        background: rgba(255, 255, 255, 0.28) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;
        color: #ffffff !important;
    }
}

/* 2. Ultra-small Mobile Phones (< 500px) */
@media (max-width: 768px) {
    .chem-top-bar-strip {
        height: auto !important;
        min-height: auto !important;
    }

    .mainHeader .Top_Header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 6px !important;
        min-height: auto !important;
        height: auto !important;
        gap: 3px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mainHeader .Top_Header_Left {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        width: auto !important;
        width: auto !important;
        text-align: left !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
    }

    .mainHeader .Menu_icon {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        width: auto !important;
        font-size: 9px !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
    }

    .mainHeader .Menu_icon span a,
    .mainHeader .Menu_icon a {
        font-size: 9px !important;
        white-space: nowrap !important;
        color: #ffffff !important;
    }

    .mainHeader .Menu_icon .sep {
        font-size: 8px !important;
        margin: 0 1px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .mainHeader .Menu_icon .lang-dropdown .lang-icon {
        width: 13px !important;
        height: 13px !important;
        vertical-align: middle !important;
    }

    .mainHeader .Menu_icon i.fa {
        font-size: 10.5px !important;
        color: #ffffff !important;
    }

    .mainHeader .Menu_icon .search-main {
        font-size: 10.5px !important;
        color: #ffffff !important;
    }

    /* Dropdown inside Top_Header / Menu_icon on Mobile: fix invisible white-on-white text */
    .Top_Header .Menu_icon .dropdown-content a,
    .mainHeader .Menu_icon .dropdown-content a,
    .Menu_icon .dropdown-content a {
        color: #333333 !important;
        font-family: 'Poppins', Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        background-color: #ffffff !important;
        white-space: nowrap !important;
        padding: 7px 14px !important;
        display: block !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .Top_Header .Menu_icon .dropdown-content a:last-child,
    .mainHeader .Menu_icon .dropdown-content a:last-child,
    .Menu_icon .dropdown-content a:last-child {
        border-bottom: none !important;
    }

    .Top_Header .Menu_icon .dropdown-content a:hover,
    .Top_Header .Menu_icon .dropdown-content a:active,
    .Top_Header .Menu_icon .dropdown-content a:focus,
    .mainHeader .Menu_icon .dropdown-content a:hover,
    .mainHeader .Menu_icon .dropdown-content a:active,
    .mainHeader .Menu_icon .dropdown-content a:focus,
    .Menu_icon .dropdown-content a:hover,
    .Menu_icon .dropdown-content a:active,
    .Menu_icon .dropdown-content a:focus {
        background-color: #f1f5f9 !important;
        color: #1a4492 !important;
    }

    /* Compact Search Form Popup on Mobile (< 500px) */
    .header-search-wrapper .search-form-main {
        width: 250px !important;
        max-width: calc(100vw - 20px) !important;
        padding: 8px 10px !important;
        right: -2px !important;
        top: calc(100% + 8px) !important;
        border-radius: 0 0 6px 6px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    }

    .header-search-wrapper .search-form-main:before {
        top: -8px !important;
        right: 4px !important;
        border-bottom-width: 8px !important;
        border-left-width: 6px !important;
        border-right-width: 6px !important;
    }

    .header-search-wrapper .search-form-main form {
        gap: 6px !important;
    }

    .header-search-wrapper .search-form-main .search-field {
        height: 32px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
        border-radius: 16px !important;
    }

    .header-search-wrapper .search-form-main .search-submit {
        height: 32px !important;
        font-size: 12px !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
    }

    .mainHeader .chem-brand-header {
        padding: 0 !important;
        margin: 0 !important;
    }

    .mainHeader .chem-brand-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 2px 6px !important;
        gap: 2px 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mainHeader .chem-brand-dept {
        order: 1 !important;
        flex: 1 1 auto !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .mainHeader .logotext {
        position: relative !important;
        padding-left: 26px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
    }

    .mainHeader .chem-brand-logo-img {
        width: 20px !important;
        height: 32px !important;
    }

    .mainHeader .logotext:before {
        content: '' !important;
        width: 20px !important;
        height: 32px !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .mainHeader .chem-dept-title {
        font-size: 10px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mainHeader .chem-dept-sub {
        font-size: 6px !important;
        line-height: 1.1 !important;
        margin: 1px 0 0 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mainHeader .chem-brand-actions {
        order: 3 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 3px !important;
    }

    .mainHeader .chem-desktop-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px 5px !important;
        font-size: 9.5px !important;
        gap: 3px !important;
        border-radius: 4px !important;
    }

    .mainHeader .chem-desktop-btn img {
        width: 10px !important;
        height: 10px !important;
    }

    .mainHeader .chem-brand-portal {
        order: 2 !important;
        width: auto !important;
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 1px 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .mainHeader .chem-portal-title {
        font-size: 13px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        font-weight: 600 !important;
        color: #1a4492 !important;
        border: none !important;
    }

    .chem-mobile-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: linear-gradient(135deg, #1a4492 0%, #235fcd 100%) !important;
        padding: 5px 10px !important;
        min-height: 48px !important;
        height: 48px !important;
        box-shadow: 0 2px 6px rgba(26, 68, 146, 0.2) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .chem-mobile-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 38px !important;
        min-width: 44px !important;
        min-height: 38px !important;
        background: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        outline: none !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }

    .chem-mobile-toggle-btn:hover,
    .chem-mobile-toggle-btn:focus {
        background: rgba(255, 255, 255, 0.28) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;
        color: #ffffff !important;
    }
}

/* 3. Common Mobile/Zoom Menu Elements (< 1220px) */
@media (max-width: 1219px) {

    .menuPort1 {
        background: transparent !important;
        margin-top: 0 !important;
        height: auto !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .menuPort1 .bt-logo-area {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .menuPort {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .chem-mobile-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: linear-gradient(135deg, #1a4492 0%, #235fcd 100%) !important;
        padding: 6px 14px !important;
        min-height: 52px !important;
        height: 52px !important;
        box-shadow: 0 2px 8px rgba(26, 68, 146, 0.25) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    .chem-mobile-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 40px !important;
        min-width: 46px !important;
        min-height: 40px !important;
        background: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        outline: none !important;
        box-sizing: border-box !important;
    }

    .chem-mobile-toggle-btn:hover,
    .chem-mobile-toggle-btn:focus {
        background: rgba(255, 255, 255, 0.28) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;
        color: #ffffff !important;
    }

    /* 3 Clean, thick, rounded white bars matching Screenshot 1 */
    .chem-mobile-toggle-btn #chemMobileIcon.fa-bars {
        display: inline-block !important;
        width: 22px !important;
        height: 18px !important;
        position: relative !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .chem-mobile-toggle-btn #chemMobileIcon.fa-bars::before,
    .chem-mobile-toggle-btn #chemMobileIcon.fa-bars::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        width: 22px !important;
        height: 3.5px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
    }

    .chem-mobile-toggle-btn #chemMobileIcon.fa-bars::before {
        top: 0 !important;
        box-shadow: 0 7.25px 0 #ffffff !important; /* middle bar */
    }

    .chem-mobile-toggle-btn #chemMobileIcon.fa-bars::after {
        bottom: 0 !important; /* bottom bar */
    }

    /* Clean white close 'X' icon when drawer is open */
    .chem-mobile-toggle-btn #chemMobileIcon.fa-times {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        font-family: FontAwesome !important;
        color: #ffffff !important;
        line-height: 1 !important;
    }

    .chem-mobile-badge {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .menuPort nav#chemNavMenu {
        display: none;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
        border-bottom: 3px solid #1a4492 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        max-height: calc(100vh - 130px) !important;
        max-height: calc(100dvh - 130px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        animation: chemSlideDown 0.25s ease-out !important;
    }

    .menuPort nav#chemNavMenu.chem-nav-open {
        display: block !important;
    }

    @keyframes chemSlideDown {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .menuPort nav ul#menu-primary-menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 40px 0 !important;
        list-style: none !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    .menuPort nav ul#menu-primary-menu>li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        height: auto !important;
        border-bottom: 1px solid #eef2f6 !important;
        position: relative !important;
    }

    .menuPort nav ul#menu-primary-menu>li:last-child {
        border-bottom: none !important;
        margin-bottom: 15px !important;
    }

    .menuPort nav ul#menu-primary-menu>li>a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 13px 18px !important;
        color: #1e293b !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        border-left: 4px solid transparent !important;
        width: 100% !important;
        height: auto !important;
        transition: all 0.2s ease !important;
        font-family: "Poppins", "Barlow", sans-serif !important;
    }

    .menuPort nav ul#menu-primary-menu>li>a:hover,
    .menuPort nav ul#menu-primary-menu>li>a:active {
        background: #f1f5f9 !important;
        color: #235fcd !important;
    }

    .menuPort nav ul#menu-primary-menu>li.current-menu-item>a,
    .menuPort nav ul#menu-primary-menu>li.current-menu-item>a>b {
        color: #235fcd !important;
        background: #eff6ff !important;
        border-left-color: #235fcd !important;
        font-weight: 700 !important;
    }

    .chem-sub-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 4px !important;
        background: #f1f5f9 !important;
        color: #64748b !important;
        font-size: 16px !important;
        margin-left: 8px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        transition: transform 0.25s ease, background 0.2s, color 0.2s !important;
    }

    .chem-submenu-open>a .chem-sub-arrow,
    .menu-item-has-children.on>a .chem-sub-arrow {
        transform: rotate(180deg) !important;
        background: #235fcd !important;
        color: #ffffff !important;
    }

    .menuPort nav ul.sub-menu {
        display: none !important;
        width: 100% !important;
        background: #f8fafc !important;
        margin: 0 !important;
        padding: 4px 0 6px 0 !important;
        list-style: none !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
        position: static !important;
    }

    .chem-submenu-open>ul.sub-menu,
    .menu-item-has-children.on>ul.sub-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Subtoggler hidden completely on mobile */
    .subToggler {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    .menuPort nav ul.sub-menu>li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px dashed #e2e8f0 !important;
    }

    .menuPort nav ul.sub-menu>li:last-child {
        border-bottom: none !important;
    }

    .menuPort nav ul.sub-menu>li>a {
        display: block !important;
        padding: 10px 18px 10px 32px !important;
        color: #475569 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        background: transparent !important;
        border-left: 4px solid transparent !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        font-family: "Poppins", "Barlow", sans-serif !important;
    }

    .menuPort nav ul.sub-menu>li>a:hover,
    .menuPort nav ul.sub-menu>li>a:active {
        color: #235fcd !important;
        background: #edf2f7 !important;
    }

    .menuPort nav ul.sub-menu>li.current-menu-item>a {
        color: #235fcd !important;
        font-weight: 700 !important;
        background: #e2e8f0 !important;
        border-left-color: #235fcd !important;
    }

    .chem-mobile-only,
    li.chem-mobile-only,
    .chem-mobile-action-buttons {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        pointer-events: none !important;
    }
}

:root {
    --background-light: #ffffff;
    --background-dark: rgb(68, 68, 68);
    --text-light: #000000;
    --text-dark: white;
}

.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

.logotext {
    position: relative !important;
    padding-left: 54px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 58px !important;
}

.mainHeader .chem-brand-dept .logotext:before,
.chem-brand-dept .logotext:before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

.chem-brand-logo-img {
    width: 42px !important;
    height: 58px !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    border: none !important;
}

.logotext:before {
    content: '' !important;
    background-image: url('/image/Logo-ChemIndia.svg') !important;
    width: 42px !important;
    height: 58px !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.logotextinner {
    width: 100% !important;
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

li {
    margin: 0 0 0 .5em;
    padding: 0;
}

footer li {
    margin: 0 0 0 .5em;
    padding: 0;
    color: white;
}

.footrs {
    text-align: center;
    color: white;
    margin: 0 auto;
    display: table;
    margin-bottom: 20px;
    background: linear-gradient(45deg, yellow, orange);
    width: 245px;
    line-height: 2.5;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Registration Backdrop Overlay */
.ci-reg-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 999998 !important;
    display: none;
    transition: opacity 0.2s ease;
}

/* Registration Popup Modal */
.popup,
.popup.ci-reg-popup {
    background: #ffffff !important;
    width: 92% !important;
    max-width: 660px !important;
    padding: 38px 40px 42px 40px !important;
    position: fixed !important;
    transform: translate(-50%, -50%) !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 999999 !important;
    border-radius: 28px !important;
    font-family: 'Poppins', sans-serif !important;
    display: none;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(226, 232, 240, 0.9) !important;
    border: none !important;
    animation: ciPopupScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes ciPopupScaleIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Close Button (Top Right Circle) */
.popup #close,
.popup button#close,
.popup .ci-reg-close-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    margin: 0 !important;
    background: #edf4fc !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    color: #1e3a8a !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.popup #close:hover,
.popup button#close:hover,
.popup .ci-reg-close-btn:hover {
    background: #dbeafe !important;
    transform: scale(1.06) !important;
    color: #1e3a8a !important;
}

/* Header Area */
.ci-reg-content {
    text-align: center !important;
    width: 100% !important;
}

.ci-reg-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #0b132b !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px !important;
}

.ci-reg-brand {
    color: #0056cc !important;
    font-weight: 700 !important;
}

.ci-reg-accent-bar {
    width: 52px !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #0284c7, #2563eb) !important;
    border-radius: 4px !important;
    margin: 12px auto 14px auto !important;
}

.ci-reg-subtitle,
.ci-reg-content p.ci-reg-subtitle,
.popup .ci-reg-subtitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    color: #475569 !important;
    margin: 0 auto 28px auto !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    line-height: 1.4 !important;
}

/* Two Cards Grid */
.ci-reg-options,
.social-btnnxx.flex {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

@media (max-width: 640px) {
    .ci-reg-options,
    .social-btnnxx.flex {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .popup,
    .popup.ci-reg-popup {
        padding: 30px 20px 32px 20px !important;
        border-radius: 22px !important;
    }
    .ci-reg-title {
        font-size: 26px !important;
    }
}

/* Individual Option Button / Card */
.ci-reg-btn-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 18px 16px 14px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
    cursor: pointer !important;
    user-select: none !important;
    width: 100% !important;
}

.ci-reg-btn-card:hover {
    transform: translateY(-3px) !important;
}

/* Soft Wave Highlight inside card */
.ci-reg-btn-wave {
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 48px;
    background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

/* Company Card Styling */
.ci-reg-company {
    background: linear-gradient(135deg, #74b9ff 0%, #3a8ee6 50%, #1a73e8 100%) !important;
    box-shadow: 0 10px 24px -2px rgba(26, 115, 232, 0.32) !important;
}

.ci-reg-company:hover {
    box-shadow: 0 14px 30px rgba(26, 115, 232, 0.45) !important;
}

/* Unit Card Styling */
.ci-reg-unit {
    background: linear-gradient(135deg, #c4b5fd 0%, #9380f9 50%, #7c5cfc 100%) !important;
    box-shadow: 0 10px 24px -2px rgba(124, 92, 252, 0.32) !important;
}

.ci-reg-unit:hover {
    box-shadow: 0 14px 30px rgba(124, 92, 252, 0.45) !important;
}

/* Icon / Graphic Container */
.ci-reg-btn-icon-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Title text inside card */
.ci-reg-btn-title {
    position: relative !important;
    z-index: 2 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    margin: 0 10px !important;
}

/* Arrow Button Container */
.ci-reg-btn-arrow {
    position: relative !important;
    z-index: 2 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.15s ease !important;
}

.ci-reg-company .ci-reg-btn-arrow {
    color: #1a73e8 !important;
}

.ci-reg-unit .ci-reg-btn-arrow {
    color: #7c5cfc !important;
}

.ci-reg-btn-card:hover .ci-reg-btn-arrow {
    transform: translateX(2px) !important;
}

/* Contact Page Terms & Conditions Modal Exact Styling */
#popupContainer.popup-container,
.popup-container {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

#popupContainer[style*="display: block"],
#popupContainer.show,
.popup-container.show {
    display: flex !important;
}

#popupContainer .popup,
#popupContainer .popup-content,
.popup-container .popup,
.popup-container .popup-content {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
    border: 1px solid #d5d5d5 !important;
    max-width: 620px !important;
    width: 92% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding: 36px 42px 32px 42px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    z-index: 1000000 !important;
}

#popupContainer .close-button,
.popup-container .close-button {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    font-size: 22px !important;
    color: #111111 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 6px !important;
    display: block !important;
}

#popupContainer .close-button:hover,
.popup-container .close-button:hover {
    color: #ef4444 !important;
}

#popupContainer h2,
#popupContainer h3,
#popupContainer h4,
#popupContainer .popup-title {
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    margin: 0 0 24px 0 !important;
    text-align: center !important;
    letter-spacing: -0.2px !important;
}

#popupContainer p,
#popupContainer .popup-text {
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    color: #000000 !important;
    text-align: justify !important;
    margin: 0 0 20px 0 !important;
    font-weight: 400 !important;
}

#popupContainer button.agree-btn,
#popupContainer button.btn-primary,
.popup-container button.agree-btn,
.popup-container button.btn-primary {
    background: #2b6cb0 !important;
    background-color: #2b6cb0 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 46px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.35) !important;
    transition: background 0.15s, transform 0.15s !important;
    width: auto !important;
    min-width: 140px !important;
    margin: 24px auto 0 auto !important;
    display: inline-block !important;
}

#popupContainer button.agree-btn:hover,
#popupContainer button.btn-primary:hover,
.popup-container button.agree-btn:hover,
.popup-container button.btn-primary:hover {
    background: #23568c !important;
    background-color: #23568c !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Hide captcha cash input strictly */
#captchacash,
input#captchacash,
input[name="captchacash"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   Company Registration Page - Modern Glassmorphic UI (Exact Match to Image 3)
   ========================================================================== */
.ci-reg-page-wrapper,
section:has(.authentication-box),
section.lg\:w-\[30rem\]:has(.authentication-box) {
    min-height: calc(100vh - 120px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 24px 20px 50px 20px !important;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 45%, #e8edff 100%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Team Page - Clean Vertical Block Layout (Exact Match to Image 1)
   ========================================================================== */
section:has(img[src*="Teamnew"]),
.ci-team-section {
    display: block !important;
    min-height: auto !important;
    background: transparent !important;
    padding: 16px 20px 40px 20px !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 16px auto !important;
    box-sizing: border-box !important;
}

section:has(img[src*="Teamnew"]) nav,
.ci-team-section nav {
    display: flex !important;
    width: 100% !important;
    padding: 10px 18px !important;
    background-color: #e5e7eb !important;
    border-radius: 4px !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

section:has(img[src*="Teamnew"]) nav ol,
.ci-team-section nav ol {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: inline-flex !important;
}

section:has(img[src*="Teamnew"]) h3,
.ci-team-section h3 {
    display: block !important;
    font-size: 28px !important;
    color: #235fcd !important;
    margin-top: 16px !important;
    margin-bottom: 22px !important;
    clear: both !important;
    text-align: left !important;
    width: 100% !important;
}

section:has(img[src*="Teamnew"]) .container,
.ci-team-section .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    clear: both !important;
    display: block !important;
}

section:has(img[src*="Teamnew"]) img,
.ci-team-section img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

section:has(img[src*="Teamnew"]) button,
.ci-team-section button {
    display: inline-flex !important;
    margin-top: 20px !important;
    clear: both !important;
}

/* Hide stray obsolete info icons */
img[src*="infoicon"],
.hello,
.hello1,
.hello2 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Neutralize awkward Tailwind offset classes and remove duplicate nested card styles */
.ci-reg-page-wrapper .authentication-box,
section:has(.authentication-box) .authentication-box,
section:has(.authentication-box) .container,
section:has(.authentication-box) .row,
section:has(.authentication-box) .card,
section:has(.authentication-box) .tab2-card,
section:has(.authentication-box) [class*="ml-"],
section:has(.authentication-box) [class*="mt-"] {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 1000px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* SINGLE UNIFIED CARD (No outer/inner double border) */
.ci-reg-card,
section:has(.authentication-box) .card-body,
section:has(.authentication-box) .card-body.crdbdy {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 20px 48px -10px rgba(37, 99, 235, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.75) !important;
    padding: 38px 48px 42px 48px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Glass decorative corner waves in single card ONLY */
.ci-reg-card::before,
section:has(.authentication-box) .card-body::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 320px !important;
    height: 160px !important;
    background: radial-gradient(ellipse at top left, rgba(191, 219, 254, 0.5) 0%, rgba(255, 255, 255, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.ci-reg-card::after,
section:has(.authentication-box) .card-body::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 280px !important;
    height: 150px !important;
    background: radial-gradient(ellipse at bottom right, rgba(199, 210, 254, 0.4) 0%, rgba(255, 255, 255, 0) 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.ci-reg-form-inner {
    position: relative;
    z-index: 2;
}

/* Header Area */
.ci-reg-header-wrap {
    text-align: center !important;
    margin-bottom: 28px !important;
}

.ci-reg-title-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.ci-header-badge {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #e0f2fe 0%, #dbeafe 100%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.ci-header-badge svg {
    width: 38px !important;
    height: 32px !important;
    display: block !important;
}

.ci-reg-main-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #0b193d !important;
    margin: 0 !important;
    letter-spacing: -0.3px !important;
}

.ci-reg-title-bar {
    width: 46px !important;
    height: 4px !important;
    background: #2563eb !important;
    border-radius: 4px !important;
    margin: 10px auto 0 auto !important;
}

/* Hide old default tabs bar */
section:has(.authentication-box) ul#top-tab.nav-tabs {
    display: none !important;
}

/* Form Grid */
.ci-reg-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 28px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.ci-field-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.ci-field-label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Input Capsule Wrapper */
.ci-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 3px 12px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
}

.ci-input-wrap:focus-within {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.15) !important;
}

.ci-input-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
}

.ci-input-wrap input.form-control,
.ci-input-wrap input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    color: #1e293b !important;
    padding: 8px 4px !important;
    width: 100% !important;
    height: auto !important;
}

/* Hide native Edge/Chrome password reveal/clear buttons */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input::-ms-reveal,
input::-ms-clear,
input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

.ci-input-wrap input::placeholder {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Eye Toggle */
.ci-eye-toggle,
.ci-input-wrap .icon-view {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    margin-left: auto !important;
    font-size: 17px !important;
    transition: color 0.15s ease !important;
    position: static !important;
    text-decoration: none !important;
}

.ci-eye-toggle:hover,
.ci-input-wrap .icon-view:hover {
    color: #1e40af !important;
}

/* Only show the first eye icon if duplicate exists */
.ci-input-wrap .icon-view ~ .icon-view,
.ci-input-wrap .ci-eye-toggle ~ .ci-eye-toggle {
    display: none !important;
}

/* Position Password Row & Floating Feedback for 100% Fixed & Consistent Card Height */
.ci-password-row,
.ci-reg-grid.ci-password-row {
    position: relative !important;
    margin-bottom: 56px !important; /* Fixed reserved space so text floats without pushing layout */
}

.ci-field-group {
    position: relative !important;
}

.ci-field-group > br,
.meter-text + br,
#meter-text + br {
    display: none !important;
}

/* Password Strength & Requirements Text (Absolute Floating - Zero Layout Shift) */
.meter-text,
#meter-text {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

#meter-text br,
.meter-text br {
    display: none !important;
}

#meter-status {
    font-weight: 700 !important;
    font-size: 12.5px !important;
}

#meter-req {
    color: #dc2626 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    display: block !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

/* Confirm Password message (Absolute Floating - Zero Layout Shift) */
#confirm-message2,
.confirm-message {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Confirm Password Matched Green Box (Exact Match to Image 1) */
.ci-input-wrap.ci-password-matched {
    background: #5cb85c !important;
    border-color: #4cae4c !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.ci-input-wrap.ci-password-matched input {
    background: transparent !important;
    color: #1f2937 !important;
}

.ci-input-wrap.ci-password-matched .ci-input-icon svg {
    stroke: #1f2937 !important;
}

.ci-input-wrap.ci-password-matched .ci-eye-toggle i {
    color: #1f2937 !important;
}

/* Form validation error text under fields */
span#name,
span#suserid,
span#sphone,
span#sEmailId1 {
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    color: #ef4444 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Password Strength Segment Bar (Completely removed per user instruction) */
.ci-strength-meter-wrap,
.ci-strength-segments,
.ci-seg-bar,
div#meter,
div#meter-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Captcha Layout (Exact Image 1 Clean Formal Design) */
.ci-captcha-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 28px !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.ci-captcha-left,
.ci-captcha-left-clean,
.captcha-area {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
}

.captcha-img1 {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.captcha-area.reload-btn,
.captcha-area .reload-btn {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}

#captcha-image,
.ci-captcha-img-clean {
    height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
    border-radius: 2px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
}

.ci-refresh-btn,
.ci-refresh-btn-clean,
button#refresh-captcha {
    width: 44px !important;
    height: 32px !important;
    border-radius: 20px !important;
    background: #3165a3 !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background 0.15s ease, opacity 0.15s ease !important;
    outline: none !important;
    flex-shrink: 0 !important;
}

.ci-refresh-btn:hover,
.ci-refresh-btn-clean:hover,
button#refresh-captcha:hover {
    background: #27568f !important;
    opacity: 0.95 !important;
    transform: none !important;
}

button#refresh-captcha i,
.ci-refresh-btn i,
.ci-refresh-btn-clean i {
    font-size: 13px !important;
    color: #ffffff !important;
}

/* Captcha Input Box (Exact Image 1 Clean Standard Box) */
.ci-captcha-grid .ci-input-wrap {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.ci-captcha-grid .ci-input-icon {
    display: none !important;
}

#captcha-input,
.ci-captcha-input-clean {
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #ced4da !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    color: #495057 !important;
    box-shadow: none !important;
    outline: none !important;
}

#captcha-input:focus,
.ci-captcha-input-clean:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25) !important;
}

#captcha-input::placeholder,
.ci-captcha-input-clean::placeholder {
    color: #6c757d !important;
    opacity: 0.75 !important;
    font-size: 14px !important;
}

/* Register Button (Exact same size & color, with circular white right-arrow badge) */
.ci-register-btn,
.ci-reg-btn-clean,
button#reg:not(.ci-otp-submit-btn) {
    background: #3165a3 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 6px 10px 6px 20px !important;
    border-radius: 3px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-align: center !important;
    min-width: 130px !important;
    height: 38px !important;
    margin-top: 6px !important;
    transition: background 0.15s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.ci-reg-btn-clean .ci-reg-btn-text,
button#reg:not(.ci-otp-submit-btn) .ci-reg-btn-text {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Circular Arrow Badge inside Register Button matching user's Image 1 */
.ci-reg-btn-clean .ci-reg-arrow-badge,
button#reg:not(.ci-otp-submit-btn) .ci-reg-arrow-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
}

.ci-reg-btn-clean .ci-reg-arrow-badge i,
button#reg:not(.ci-otp-submit-btn) .ci-reg-arrow-badge i {
    color: #ffffff !important;
    display: inline-block !important;
    font-size: 12px !important;
}

.ci-register-btn:hover,
.ci-reg-btn-clean:hover,
button#reg:not(.ci-otp-submit-btn):hover {
    background: #27568f !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Back button at the bottom of the card */
.ci-back-btn {
    margin-top: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.ci-back-btn:hover {
    background: #1e293b !important;
}

@media (max-width: 768px) {
    .ci-reg-card,
    section:has(.authentication-box) .card-body.crdbdy {
        padding: 28px 20px 32px 20px !important;
        border-radius: 20px !important;
    }
    .ci-reg-grid,
    .ci-captcha-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .ci-reg-main-title {
        font-size: 22px !important;
    }
}

/* ==========================================================================
   OTP VERIFICATION CARD (EXACT MATCH TO 3RD SCREENSHOT / IMAGE 2)
   ========================================================================== */
.ci-otp-page-wrapper {
    position: relative !important;
    min-height: calc(100vh - 130px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 16px 60px 16px !important;
    background: #edf5fd !important;
    background: radial-gradient(circle at 15% 50%, rgba(224, 242, 254, 0.7) 0%, rgba(240, 249, 255, 0.4) 40%, rgba(237, 245, 253, 0.9) 100%) !important;
    background-color: #edf5fd !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
}

/* Background Chemical / Science Illustrations */
.ci-otp-bg-left {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 380px !important;
    height: 560px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
}

.ci-otp-bg-right {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 380px !important;
    height: 560px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.85 !important;
}

/* Unified Card */
.ci-otp-card {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 530px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 24px 60px -12px rgba(37, 99, 235, 0.16), 0 0 0 1px rgba(219, 234, 254, 0.8) !important;
    padding: 38px 44px 44px 44px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Card Top-Right Corner Layered Wave */
.ci-otp-card-corner-wave {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 240px !important;
    height: 140px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: hidden !important;
    border-top-right-radius: 24px !important;
}

.ci-otp-card-corner-wave svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.ci-otp-card-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* Header: 3D Lock Badge | Title + Bar (Image 2) */
.ci-otp-header-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 28px !important;
}

.ci-otp-badge {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: #e0f2fe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 16px -2px rgba(2, 132, 199, 0.22) !important;
}

.ci-otp-badge svg {
    width: 28px !important;
    height: 28px !important;
}

.ci-otp-divider {
    width: 1.5px !important;
    height: 34px !important;
    background: #cbd5e1 !important;
    margin: 0 16px !important;
    flex-shrink: 0 !important;
}

.ci-otp-title-wrap {
    display: flex !important;
    flex-direction: column !important;
}

.ci-otp-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    color: #0b193d !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: -0.3px !important;
}

.ci-otp-title-bar {
    width: 44px !important;
    height: 3.5px !important;
    background: #2563eb !important;
    border-radius: 3px !important;
    margin-top: 5px !important;
}

/* Field Groups */
.ci-otp-group {
    margin-bottom: 22px !important;
}

.ci-otp-label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Capsule Input Wrapper (Exact Image 2: Light blue background #f0f7ff + soft blue outline #93c5fd) */
.ci-otp-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #f0f7ff !important;
    border: 1.5px solid #93c5fd !important;
    border-radius: 9999px !important;
    padding: 3px 18px !important;
    min-height: 48px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.ci-otp-input-wrap:focus-within {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.18) !important;
}

.ci-otp-input-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    color: #2563eb !important;
    flex-shrink: 0 !important;
}

.ci-otp-input-wrap input.form-control,
.ci-otp-input-wrap input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    color: #1e293b !important;
    padding: 8px 0 !important;
    width: 100% !important;
    height: auto !important;
}

.ci-otp-input-wrap input::placeholder {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Action Links: Verify OTP | Resend OTP (Image 2) */
.ci-otp-actions {
    display: flex !important;
    align-items: center !important;
    margin-top: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
}

.ci-otp-verify-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}

.ci-otp-verify-btn:hover {
    color: #2563eb !important;
}

.ci-otp-verify-btn:disabled {
    color: #10b981 !important;
    cursor: default !important;
}

.ci-otp-sep {
    color: #cbd5e1 !important;
    margin: 0 10px !important;
    font-weight: 400 !important;
    user-select: none !important;
}

.ci-otp-resend-link {
    color: #2563eb !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}

.ci-otp-resend-link:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

.ci-otp-timer {
    color: #64748b !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    margin-left: 6px !important;
}

/* Submit Button with Right Arrow Badge (Image 2 Exact Pill Shape) */
.ci-otp-btn-wrap {
    margin-top: 28px !important;
}

button.ci-otp-submit-btn,
button#reg.ci-otp-submit-btn,
.ci-otp-card button#reg,
.ci-otp-card .ci-otp-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    background: #0066cc !important;
    background: linear-gradient(135deg, #0070e0 0%, #0056b3 100%) !important;
    border: none !important;
    outline: none !important;
    border-radius: 9999px !important; /* Full pill capsule shape */
    padding: 6px 8px 6px 24px !important;
    height: 48px !important;
    min-width: 144px !important;
    width: auto !important;
    max-width: fit-content !important;
    box-shadow: 0 6px 20px -3px rgba(0, 102, 204, 0.42) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button.ci-otp-submit-btn:hover,
button#reg.ci-otp-submit-btn:hover,
.ci-otp-card button#reg:hover {
    background: linear-gradient(135deg, #005bb5 0%, #004494 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px -3px rgba(0, 102, 204, 0.52) !important;
}

.ci-otp-card .ci-otp-btn-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
}

.ci-otp-card .ci-otp-btn-arrow,
button.ci-otp-submit-btn .ci-otp-btn-arrow {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    transition: transform 0.2s ease !important;
}

.ci-otp-card .ci-otp-btn-arrow i,
button.ci-otp-submit-btn .ci-otp-btn-arrow i {
    color: #ffffff !important;
    display: inline-block !important;
    font-size: 13px !important;
}

button.ci-otp-submit-btn:hover .ci-otp-btn-arrow,
.ci-otp-card button#reg:hover .ci-otp-btn-arrow {
    transform: translateX(3px) !important;
}

@media (max-width: 640px) {
    .ci-otp-card {
        padding: 28px 20px 32px 20px !important;
        border-radius: 20px !important;
    }
    .ci-otp-bg-left,
    .ci-otp-bg-right {
        display: none !important;
    }
}

/* ==========================================================================
   WCAG 2.1 (2.4.7 Level AA) & GIGW 2.0 - Keyboard Focus Indicator
   Displays clear, high-contrast outline on Tab key navigation without affecting mouse clicks
   ========================================================================== */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
.slick-slide:focus-visible,
.slick-arrow:focus-visible {
    outline: 2.5px solid #2563eb !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25) !important;
    border-radius: 4px !important;
    z-index: 99999 !important;
    transition: outline-offset 0.12s ease !important;
}

/* Dark/Blue background elements: high-contrast golden-yellow focus indicator */
.Top_Header a:focus-visible,
.Top_Header button:focus-visible,
.Top_Header .dropdown-trigger:focus-visible,
.main-menu a:focus-visible,
header a:focus-visible,
.bg-blue a:focus-visible,
.bg-[#002f6c] a:focus-visible,
.bg-[#3668a2] a:focus-visible {
    outline: 2.5px solid #facc15 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.35) !important;
}

/* Fallback for older browsers without :focus-visible support */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus {
        outline: 2.5px solid #2563eb !important;
        outline-offset: 3px !important;
    }
}



@media print {
/* ==========================================================================
   GIGW 2.0 / 3.0 & WCAG 2.1 Compliance: A4 Print Format (Criterion 5.1.3)
   Professional, user-friendly printing on standard A4 paper:
   - Proper proportional image sizing (no tiny icons, no cropped strips)
   - Zero header overlap (header position static strictly on Page 1 top, no repeating/covering cards)
   - Clean, sequential page breaks without giant blank gaps
   - Screen-consistent natural sequence: Header -> Banner -> Steps -> Services -> Policies -> DRAM -> Footer
   - Compatible with all portal screens (Home, Category Chemicals/Petrochemicals, GIS, Reports, Inner pages)
   ========================================================================== */

@page {
    size: A4 portrait;
    margin: 8mm 8mm 10mm 8mm;
}

html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Reset any page-wrap inline padding-top injected by JavaScript */
.bt-page-wrap,
#top,
div.bt-page-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
    position: static !important;
    overflow: visible !important;
    width: 100% !important;
}

/* Base box-sizing & clean text rendering */
*, *:before, *:after {
    box-sizing: border-box !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Headings: avoid orphan headings at page bottom */
h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid !important;
    break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    color: #0b2545 !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
}

/* Paragraphs & lists */
p, blockquote, ul, ol {
    orphans: 3;
    widows: 3;
    page-break-inside: auto;
}

/* Default images: responsive without overflow */
img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

/* ==========================================================================
   ANIMATION & DYNAMIC CONTENT VISIBILITY:
   Force 100% visibility on all animated and dynamically injected elements.
   Prevents entire pages from rendering blank!
   ========================================================================== */
.animate,
.animated,
.bt_bb_animation_fade_in,
[class*="animation_"],
[class*="animate"],
.bt_bb_column,
.bt_bb_column_inner,
.bt_bb_row,
.bt_bb_row_inner,
.bt_bb_service,
.bt_bb_service_content,
.bt_bb_service_content_title,
.bt_bb_service_content_text,
#landing-steps-section,
#landing-cards-section,
#landing-policies-section,
#content1,
div[id="content1"],
.bt_bb_row_wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
}

/* ==========================================================================
   OFFICIAL DEPARTMENT HEADER IN PRINT:
   Static position strictly at the top of Page 1 in normal document flow.
   Prevents repeating across pages and eliminates overlapping on cards/content!
   Top bar: Solid blue strip with PURE WHITE text ("भारत सरकार | GOVERNMENT OF INDIA")
   ========================================================================== */
header.mainHeader,
.mainHeader,
body .mainHeader,
body.btTransparentDarkHeader .mainHeader,
body.btTransparentLightHeader .mainHeader,
.btTransparentDarkHeader .mainHeader,
.btTransparentLightHeader .mainHeader,
body.btStickyHeaderActive .mainHeader,
body.btStickyHeaderOpen .mainHeader,
body.btStickyHeaderClosed .mainHeader,
body.btMenuHorizontal.btStickyHeaderActive .mainHeader,
body.btStickyEnabled .mainHeader,
div.bt-page-wrap > header.mainHeader {
    display: block !important;
    position: static !important;
    float: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    background: #ffffff !important;
    border-bottom: 2px solid #1a4492 !important;
    padding-bottom: 6px !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

.mainHeader .chem-top-bar-strip,
.mainHeader .main-header-inner > div:first-child {
    background: #3668a2 !important;
    display: block !important;
    width: 100% !important;
    padding: 4px 10px !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.mainHeader .Top_Header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}

/* PURE WHITE text for Government of India (Clearly readable on blue strip) */
.mainHeader .Top_Header_Left,
.Top_Header_Left {
    display: block !important;
    color: #ffffff !important;
    font-size: 9.5pt !important;
    font-weight: 600 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Department Logo & Title */
.chem-brand-header {
    display: block !important;
    background: #ffffff !important;
    padding: 6px 10px !important;
}

.chem-brand-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

.chem-brand-dept {
    flex: 0 0 auto !important;
}

.chem-dept-title,
.chem-brand-dept h1 {
    font-size: 13pt !important;
    color: #1a4492 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.chem-dept-sub,
.chem-brand-dept p {
    font-size: 7.5pt !important;
    color: #334155 !important;
    margin: 2px 0 0 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.chem-brand-portal {
    flex: 1 1 auto !important;
    text-align: center !important;
}

.chem-portal-title {
    font-size: 12pt !important;
    color: #0f172a !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

.chem-brand-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 6px !important;
}

.chem-desktop-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 8pt !important;
    font-weight: 600 !important;
    border: 1px solid #cbd5e1 !important;
    text-decoration: none !important;
}

.chem-desktop-login {
    background: #1a4492 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.chem-desktop-reg {
    background: #0284c7 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* ==========================================================================
   HIDE NON-PRINTABLE ELEMENTS (Screen Navigation, Search, Popups, Tickers, Buttons)
   ========================================================================== */
.Top_Header .Menu_icon,
.Menu_icon,
.header-search-wrapper,
.chem-mobile-bar,
.chem-mobile-only,
.menuPort,
.menuPort1,
#chemNavMenu,
.mainHeader .menuPort1,
#TopScroll,
#loader,
.loader,
.loader-mask,
.social,
.bt-vertical-header-top,
.bt-vertical-header-top1,
.bt-vertical-menu-trigger,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination,
.whats-new-controls,
div[id^="pop-up"],
div[id^="popup"],
.popup-container,
.popup-content,
.popup-link,
#pop-up,
#pop-up1,
#popup3,
#popup11,
.bt_bb_separator,
.no-print {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ==========================================================================
   NEGATIVE MARGIN & OVERLAP RESET:
   Eliminates screen negative margins that pull content over other sections
   ========================================================================== */
.maintxt,
.maintxt1,
.maintxt2,
.maintxt3,
.drms,
.drms1,
.dram-port-section,
.chem-partner-slider-section,
.bt_bb_port,
[class*="mt-[-"],
.bt_bb_section[style*="margin-top:-"],
.bt_bb_section[style*="margin-top: -"] {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    position: static !important;
}

.bt-content-wrap,
.bt-content-holder,
.bt-content,
.bt_bb_wrapper,
.bt_bb_section,
section,
.about-agency,
.section_Top,
.block-1,
.pad-tb {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
}

.container,
.container-fluid,
.bt-content-holder .container,
.container.mx-auto {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
}

/* Breadcrumbs */
nav[aria-label="Breadcrumb "],
nav[aria-label="Breadcrumb"] {
    background: transparent !important;
    padding: 2px 0 !important;
    margin-bottom: 6px !important;
}

/* ==========================================================================
   HERO BANNER & SLIDER IN PRINT:
   Full proportional height so the refinery banner is NOT sliced into a thin strip!
   ========================================================================== */
.swiper,
.swiper.swiper-scale-effect,
.swiper-container,
.hero-slider {
    display: block !important;
    width: 100% !important;
    height: 250px !important;
    min-height: 230px !important;
    max-height: 270px !important;
    overflow: hidden !important;
    position: relative !important;
    clear: both !important;
    margin: 0 0 12px 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

.swiper-wrapper {
    display: block !important;
    transform: none !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}

.swiper-slide {
    position: relative !important;
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.swiper-slide:not(:first-child) {
    display: none !important;
}

.swiper-slide > .swiper-slide-cover,
.swiper-slide .slide-01 {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-image: url("/LandinCss/images/banner1.png") !important;
    background-size: cover !important;
    background-position: center !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Notice & Announcement Card in Print */
.hero-whats-new-card {
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    width: 320px !important;
    max-width: 45% !important;
    max-height: 236px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

.hero-whats-new-card .hero-wn-header {
    background: #1a4492 !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    font-size: 8.5pt !important;
    font-weight: 700 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.hero-whats-new-card .hero-wn-body {
    max-height: 190px !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    background: #ffffff !important;
}

.hero-whats-new-card .hero-wn-item {
    font-size: 7.5pt !important;
    line-height: 1.25 !important;
    margin-bottom: 5px !important;
    color: #1e293b !important;
}

/* ==========================================================================
   4-STEP WORKFLOW DIAGRAM ("Seamless Data Collection..."):
   USER-FRIENDLY FULL WIDTH: Large, readable, clear text inside all 4 steps!
   Does NOT shrink into a tiny miniature or create giant empty gaps!
   ========================================================================== */
#content1,
div[id="content1"],
.bt_bb_row_wrapper[id="content1"],
#landing-steps-section {
    width: 100% !important;
    margin: 8px 0 12px 0 !important;
    padding: 0 !important;
    clear: both !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

#content1 h3,
#content1 .bt_bb_headline_tag,
#landing-steps-section h3 {
    text-align: center !important;
    font-size: 13pt !important;
    font-weight: 700 !important;
    color: #1a4492 !important;
    margin: 4px 0 6px 0 !important;
}

#content1 .bt_bb_image,
#content1 .steps-interactive-wrapper,
.steps-interactive-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
}

#content1 img,
.steps-interactive-wrapper img,
img[src*="stepshd"],
img[src*="step"] {
    width: 100% !important;
    max-width: 720px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 2px auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

/* ==========================================================================
   SERVICES & FEATURES CARDS GRID (Support, Location, Analytical, Classification...):
   Clean 2-column grid layout with zero overlapping and natural multi-page flow!
   ========================================================================== */
.bt_bb_row[data-structure="3-3-3-3"],
.landing-services-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    clear: both !important;
}

.bt_bb_row[data-structure="3-3-3-3"] > .bt_bb_column,
.landing-services-grid > div {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    display: block !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.bt_bb_row[data-structure="3-3-3-3"] svg {
    width: 32px !important;
    height: 32px !important;
    display: inline-block !important;
}

.bt_bb_row[data-structure="3-3-3-3"] h5 {
    font-size: 9pt !important;
    line-height: 1.3 !important;
    margin: 2px 0 !important;
    color: #0f172a !important;
}

.bt_bb_row[data-structure="3-3-3-3"] p {
    font-size: 8pt !important;
    line-height: 1.25 !important;
    margin: 2px 0 0 0 !important;
    color: #475569 !important;
}

/* ==========================================================================
   STATE/UT GOVT. INDUSTRIAL POLICIES BANNER (Knowledge.jpg):
   Visible banner image + policies link button with ZERO giant empty space!
   ========================================================================== */
.bt_bb_section.bt_bb_color_scheme_6,
.bt_bb_section[class*="bt_bb_color_scheme_6"],
section.bt_bb_color_scheme_6,
section[class*="bt_bb_color_scheme_6"],
#landing-policies-section,
div[id="landing-policies-section"] {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-before: auto !important;
    break-before: auto !important;
    clear: both !important;
    overflow: hidden !important;
}

.bt_bb_section.bt_bb_color_scheme_6 > .bt_bb_port,
.bt_bb_section[class*="bt_bb_color_scheme_6"] > .bt_bb_port,
section.bt_bb_color_scheme_6 > .bt_bb_port,
section[class*="bt_bb_color_scheme_6"] > .bt_bb_port {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.bt_bb_section.bt_bb_color_scheme_6 .bt_bb_background_image_holder_wrapper,
.bt_bb_section[class*="bt_bb_color_scheme_6"] .bt_bb_background_image_holder_wrapper,
section.bt_bb_color_scheme_6 .bt_bb_background_image_holder_wrapper,
section[class*="bt_bb_color_scheme_6"] .bt_bb_background_image_holder_wrapper {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    max-height: 200px !important;
    overflow: hidden !important;
    margin: 0 0 6px 0 !important;
    border-radius: 6px !important;
}

.bt_bb_section[class*="bt_bb_color_scheme_6"] img[src*="Knowledge"],
section.bt_bb_color_scheme_6 img,
img[src*="Knowledge"],
img[src*="Knowledge.jpg"] {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 180px !important;
    max-height: 200px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    page-break-inside: avoid !important;
}

.bt_bb_section[class*="bt_bb_color_scheme_6"] header,
.bt_bb_section[class*="bt_bb_color_scheme_6"] .bt_bb_headline,
.bt_bb_section[class*="bt_bb_color_scheme_6"] [class*="mt-["],
section.bt_bb_color_scheme_6 [class*="mt-["] {
    margin: 4px 0 !important;
    padding: 0 !important;
}

.bt_bb_section[class*="bt_bb_color_scheme_6"] .bt_bb_port,
section.bt_bb_color_scheme_6 .bt_bb_port {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding: 0 !important;
}

.bt_bb_section[class*="bt_bb_color_scheme_6"] a[href*="Policies"],
section.bt_bb_color_scheme_6 a[href*="Policies"] {
    display: inline-block !important;
    padding: 8px 20px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 6px !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 6px solid #0bc270 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    margin: 4px 0 !important;
}

/* ==========================================================================
   DRAM SECTION & 4 UNIT COUNTERS:
   All 4 counters neatly arranged in ONE single row on the same page!
   Side-by-side layout (Illustration left, content & 4 counters right)
   ========================================================================== */
#bt_bb_section64869cd807afd,
section#bt_bb_section64869cd807afd,
.drms,
.drms1,
.dram-port-section,
.bt_bb_section[id*="bt_bb_section64869cd807afd"] {
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    position: relative !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    clear: both !important;
}

#bt_bb_section64869cd807afd .dram-port-section,
.drms .dram-port-section,
.drms .bt_bb_port,
.drms1 .bt_bb_port {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#bt_bb_section64869cd807afd .bt_bb_row[data-structure="6-6"],
.drms .bt_bb_row[data-structure="6-6"],
.drms1 .bt_bb_row[data-structure="6-6"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
}

#bt_bb_section64869cd807afd .bt_bb_row[data-structure="6-6"] > .bt_bb_column:first-child,
.drms .bt_bb_row[data-structure="6-6"] > .bt_bb_column:first-child {
    flex: 0 0 32% !important;
    width: 32% !important;
    max-width: 32% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#bt_bb_section64869cd807afd .bt_bb_row[data-structure="6-6"] > .bt_bb_column:first-child img,
.drms img[src*="DRAM2"] {
    max-height: 180px !important;
    width: auto !important;
    object-fit: contain !important;
}

#bt_bb_section64869cd807afd .bt_bb_row[data-structure="6-6"] > .bt_bb_column:last-child,
.drms .bt_bb_row[data-structure="6-6"] > .bt_bb_column:last-child {
    flex: 0 0 66% !important;
    width: 66% !important;
    max-width: 66% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#bt_bb_section64869cd807afd .bt_bb_separator,
.drms .bt_bb_separator {
    display: none !important;
    margin: 2px 0 !important;
    padding: 0 !important;
}

.bt_bb_row_inner[data-structure="4-4-4"],
.drms .bt_bb_row_inner,
.drms1 .bt_bb_row_inner,
#bt_bb_section64869cd807afd .bt_bb_row_inner,
.dram-counter-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    clear: both !important;
}

.bt_bb_row_inner[data-structure="4-4-4"] > .bt_bb_column_inner,
.drms .bt_bb_row_inner > .bt_bb_column_inner,
.drms1 .bt_bb_row_inner > .bt_bb_column_inner,
#bt_bb_section64869cd807afd .bt_bb_column_inner,
.bt_bb_column_inner[data-width="4"],
.dram-counter-container > div {
    flex: 0 0 23.5% !important;
    width: 23.5% !important;
    max-width: 23.5% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 4px !important;
    background: #f8fafc !important;
    text-align: center !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    float: none !important;
}

/* Standard readable 36px size for counter icons (no oversized giant graphics) */
.bt_bb_row_inner[data-structure="4-4-4"] img,
.drms .bt_bb_row_inner img,
.dram-counter-container img,
img[src*="chemicaln"],
img[src*="2O.png"],
img[src*="Both10.png"],
img[src*="40.png"],
img[src*="bothp"],
img[src*="totaln"] {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    margin: 0 auto 3px auto !important;
    display: block !important;
    object-fit: contain !important;
}

.bt_bb_row_inner[data-structure="4-4-4"] .crcl,
.bt_bb_row_inner[data-structure="4-4-4"] .crcl1,
.bt_bb_row_inner[data-structure="4-4-4"] .crcl2,
.bt_bb_row_inner[data-structure="4-4-4"] .crcl3,
.bt_bb_row_inner[data-structure="4-4-4"] .container,
.bt_bb_row_inner[data-structure="4-4-4"] .bt_bb_icon_holder {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bt_bb_row_inner[data-structure="4-4-4"] .bt_bb_counter_holder,
.bt_bb_row_inner[data-structure="4-4-4"] .bt_bb_counter,
.drms .bt_bb_counter_holder,
.dram-counter-container .bt_bb_counter {
    font-size: 13pt !important;
    font-weight: 700 !important;
    color: #1a4492 !important;
    margin: 2px 0 !important;
    line-height: 1.2 !important;
}

.bt_bb_row_inner[data-structure="4-4-4"] p,
.drms .bt_bb_row_inner p,
.dram-counter-container p {
    font-size: 7.5pt !important;
    line-height: 1.15 !important;
    margin: 2px 0 0 0 !important;
    color: #334155 !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   TABLE PAGINATION & FORMATTING (Category Chemicals, Petrochemicals, Reports, All Screens):
   Full-width 100% table layout with exact column alignments matching original screen view!
   ========================================================================== */
table,
.table,
.table-responsive > table,
#datatable {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    margin: 8px 0 12px 0 !important;
}

.table-responsive {
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

thead {
    display: table-header-group !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

tbody {
    display: table-row-group !important;
}

tr {
    display: table-row !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    width: 100% !important;
}

td {
    page-break-inside: auto !important;
    break-inside: auto !important;
}

/* Header row styling - spans 100% full width */
tr[style*="background-color: #3668a2"],
tr[style*="background: #3668a2"],
tr[style*="background-color:#3668a2"],
thead tr {
    display: table-row !important;
    width: 100% !important;
    background-color: #3668a2 !important;
    color: #ffffff !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

th, td {
    display: table-cell !important;
    padding: 6px 8px !important;
    font-size: 8.5pt !important;
    line-height: 1.3 !important;
    vertical-align: top !important;
    border: 1px solid #cbd5e1 !important;
    box-sizing: border-box !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

th,
tr[style*="background-color: #3668a2"] th,
tr[style*="background: #3668a2"] th,
thead th {
    background-color: #3668a2 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 9pt !important;
    text-align: center !important;
    border: 1px solid #2a5282 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Single-column tables & full-span headers/cells (e.g. Major Petro-chemicals headers, Other Petro-based Chemicals) */
table tr > th[colspan],
table tr > td[colspan],
table tr > th:only-of-type,
table tr > td:only-of-type,
table tr > th:only-child,
table tr > td:only-child {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Override oversized Tailwind font inside print tables */
table td p,
table td span,
table td a,
table th p {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* 3-Column Tables (Chemicals, PetroChemicals, etc.):
   Col 1: Sl. No. (8%) - Header and data directly aligned!
   Col 2: Group (22%) - Header and data directly aligned!
   Col 3: Products (70%) - Header and all product tags directly aligned!
*/
table tr > th:first-of-type:not([colspan]):not(:only-of-type),
table tr > td:first-of-type:not([colspan]):not(:only-of-type),
table tr > th:first-child:not([colspan]):not(:only-child),
table tr > td:first-child:not([colspan]):not(:only-child),
table tr > th:first-child:nth-last-child(3),
table tr > td:first-child:nth-last-child(3),
.table tr > th:first-child:nth-last-child(3),
.table tr > td:first-child:nth-last-child(3) {
    width: 8% !important;
    max-width: 8% !important;
    text-align: center !important;
    font-weight: 600 !important;
}

table tr > th:nth-of-type(2):not([colspan]):not(:only-of-type),
table tr > td:nth-of-type(2):not([colspan]):not(:only-of-type),
table tr > th:first-child:nth-last-child(3) ~ th:nth-child(2),
table tr > td:first-child:nth-last-child(3) ~ td:nth-child(2),
.table tr > th:first-child:nth-last-child(3) ~ th:nth-child(2),
.table tr > td:first-child:nth-last-child(3) ~ td:nth-child(2),
td.w-\[17rem\],
td[class*="w-[17rem]"] {
    width: 22% !important;
    max-width: 22% !important;
    text-align: left !important;
}

table tr > th:nth-of-type(3):not([colspan]):not(:only-of-type),
table tr > td:nth-of-type(3):not([colspan]):not(:only-of-type),
table tr > th:first-child:nth-last-child(3) ~ th:nth-child(3),
table tr > td:first-child:nth-last-child(3) ~ td:nth-child(3),
.table tr > th:first-child:nth-last-child(3) ~ th:nth-child(3),
.table tr > td:first-child:nth-last-child(3) ~ td:nth-child(3),
table tr > td:last-of-type:not(:first-of-type) {
    width: 70% !important;
    max-width: 70% !important;
    text-align: left !important;
}

/* Products tags container in print MUST be block (NOT flex), so the browser can break between rows of pills across pages without empty gaps */
table td span[style*="flex"],
table td p > span,
table td p,
.table td p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Category trigger popup links styling */
.trigger,
.trigger b {
    color: #0b2545 !important;
    font-size: 9.5pt !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.trigger .fa-info-circle {
    display: none !important;
}

/* Chemical & Petrochemical product tags */
.chemical-list {
    display: inline-block !important;
    font-size: 7.5pt !important;
    line-height: 1.25 !important;
    padding: 2px 5px !important;
    margin: 1.5px 2px !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   FOOTER IN PRINT
   ========================================================================== */
footer.footer_Style {
    background: #ffffff !important;
    color: #111111 !important;
    border-top: 2px solid #1a4492 !important;
    margin-top: 12px !important;
    padding-top: 6px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

footer.footer_Style * {
    color: #111111 !important;
    background: transparent !important;
}

footer.footer_Style p {
    margin-left: 0 !important;
    text-align: center !important;
    color: #334155 !important;
    font-size: 8pt !important;
}

/* Links in Print */
a {
    color: #0b2545 !important;
    text-decoration: none !important;
}

}

/* Steps Diagram Interactive Hotspots */
.steps-interactive-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
}
.steps-spot {
    position: absolute;
    cursor: pointer;
    z-index: 5;
}
.steps-spot-1 { left: 4%; top: 8%; width: 22%; height: 62%; }
.steps-spot-2 { left: 20%; top: 40%; width: 27%; height: 59%; }
.steps-spot-3 { left: 46%; top: 14%; width: 23%; height: 59%; }
.steps-spot-4 { left: 68%; top: 5%; width: 29%; height: 75%; }

/* ==========================================================================
   News Page - Overlay Fix & Read More Links Interaction
   ========================================================================== */
.about-agency:before {
    pointer-events: none !important;
    display: none !important;
}

.about-agency .container {
    position: relative !important;
    z-index: 5 !important;
}

.about-agency .col-sm-8 a[target="_blank"] {
    position: relative !important;
    z-index: 10 !important;
    color: #212529 !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.about-agency .col-sm-8 a[target="_blank"] p {
    color: inherit !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    text-decoration: inherit !important;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.about-agency .col-sm-8 a[target="_blank"]:hover,
.about-agency .col-sm-8 a[target="_blank"]:hover p,
.about-agency .col-sm-8 a[target="_blank"]:active,
.about-agency .col-sm-8 a[target="_blank"]:active p,
.about-agency .col-sm-8 a[target="_blank"]:focus,
.about-agency .col-sm-8 a[target="_blank"]:focus p {
    color: #33d1cb !important;
    text-decoration: underline !important;
}

/* Document column styling in resource tables (Policies, Reports, Publications) */
.table-responsive .table td:last-child,
.table td:last-child {
    text-align: center !important;
}

.table-responsive .table td .row,
.table td .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 220px !important;
    margin: 0 auto !important;
}

.table-responsive .table td .row > span,
.table-responsive .table td .row > button,
.table td .row > span,
.table td .row > button {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.table-responsive .table td .row .btn,
.table td .row .btn {
    padding: 5px 12px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
}

.table-responsive .table td .row .btn a,
.table td .row .btn a {
    white-space: nowrap !important;
    color: #ffffff !important;
    text-decoration: none !important;
}