/* =========================================================================
   निर्माण जशपुर — Shared Theme
   One design system for index.php (home) and work_progress.php
   Brand color kept identical to the existing site (orange #ff630e) with a
   warm amber companion tone for data-heavy sections (tables/filters).
   Mobile-first, tuned again for tablet (>=768px) and desktop (>=1200px).
   ========================================================================= */

:root {
    --brand: #ff630e;
    --brand-dark: #d94e00;
    --brand-light: #ff9248;
    --brand-softest: #fff3ea;
    --ink: #1c1c1c;
    --ink-2: #2e2f46;
    --muted: #6c757d;
    --line: #eee7e0;
    --surface: #ffffff;
    --surface-alt: #fbf7f4;
    --success: #198754;
    --danger: #dc3545;
    --info: #0d6efd;
    --shadow-sm: 0 2px 10px rgba(28, 20, 12, 0.06);
    --shadow-md: 0 10px 30px rgba(28, 20, 12, 0.10);
    --shadow-lg: 0 20px 45px rgba(28, 20, 12, 0.16);
    --radius: 16px;
    --radius-sm: 10px;
    --nav-h: 92px;
}

/* ---------------------------------------------------------------------- */
/* Base */
/* ---------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: 'Work Sans', Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }
a:hover { text-decoration: none; }

::selection { background: var(--brand); color: #fff; }

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.section-eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-light));
    display: inline-block;
}

/* ---------------------------------------------------------------------- */
/* Navbar / header (desktop, tablet & mobile)                             */
/* ---------------------------------------------------------------------- */
#nav.site-header {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: saturate(180%) blur(8px);
    box-shadow: var(--shadow-sm);
    z-index: 1030;
    transition: box-shadow .25s ease;
}

#nav .navbar { padding-top: 8px; padding-bottom: 8px; }

/* Exactly two visible flex children live here at any width — the brand
   group and (toggler at mobile / the nav itself at desktop, since the
   other of the two is always display:none or position:fixed/out-of-flow)
   — so space-between reliably pins logos left, menu right at every size. */
#nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
}

/* The three logos are wrapped in this group (see markup) purely so the
   container above sees ONE brand item instead of three separately
   space-between'd ones — that was spreading them apart with huge gaps. */
.navbar-brand-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
    min-width: 0;
}

#nav .navbar-brand {
    display: inline-flex;
    align-items: center;
}

#nav .navbar-brand img {
    height: 62px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    transition: height .2s ease, max-width .2s ease;
}

/* The centre logo is a wide wordmark image — cap it by width so it can't
   force the header onto multiple lines on narrow screens. */
#nav .navbar-brand .brand-wordmark { height: auto; max-width: 190px; }

/* Hamburger trigger */
#nav .navbar-toggler {
    border: none;
    border-radius: 10px;
    background: var(--brand-softest);
    color: var(--brand) !important;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

#nav .navbar-toggler:focus { box-shadow: 0 0 0 .18rem rgba(255, 99, 14, .2) !important; }
#nav .navbar-toggler ion-icon { color: var(--brand); font-size: 22px !important; }

/* Active / hover accent applies to the nav links at every breakpoint. */
#offcanvasNavbar2 .nav-link:hover,
#offcanvasNavbar2 .nav-link.active {
    background: var(--brand-softest);
    color: var(--brand) !important;
}

#offcanvasNavbar2 .nav-link.active i { color: var(--brand); }

/* ---------------- Desktop horizontal nav (>= 992px) --------------------- */
/* At this width Bootstrap's own ".navbar-expand-lg .offcanvas" reset turns
   the drawer back into a plain inline nav (offcanvas-header hidden,
   offcanvas-body just becomes a flex row) — we only need to make the
   links themselves compact enough to sit on one line. */
@media (min-width: 992px) {
    #offcanvasNavbar2 .navbar-nav {
        flex-wrap: nowrap;
        gap: 2px;
    }
    #offcanvasNavbar2 .nav-link {
        width: auto;
        white-space: nowrap;
        font-size: 15px;
        padding: 8px 14px !important;
    }
    #offcanvasNavbar2 .nav-link i { display: none; }
}

/* Size/skin the drawer through Bootstrap 5.2's own CSS-variable API rather
   than overriding the properties it computes from them — Bootstrap's own
   ".navbar-expand-lg .offcanvas" reset (position/width/height/background)
   at >=992px is what turns this same element into the plain horizontal nav
   above, so we let position/top/right/bottom/height stay exactly as
   Bootstrap defines them at every width and only steer the two variables
   that matter here (size + colour). */
#offcanvasNavbar2 {
    --bs-offcanvas-width: min(320px, 86vw);
    --bs-offcanvas-bg: #ffffff;
    --bs-offcanvas-color: var(--ink);
    --bs-offcanvas-box-shadow: var(--shadow-lg);
}

/* The template's own style.css ships a leftover rule
   (".offcanvas.show { background-color: var(--dark-color) }" — its
   --dark-color is actually a pale lavender, #e7eaed, not dark) that paints
   background-color directly instead of through --bs-offcanvas-bg above, so
   it wins once the drawer opens. Counter just that declaration.
   .show/.showing are only ever added by the toggler's own JS, and
   Bootstrap hides the toggler at >=992px, so this can never fire — and
   therefore can never fight — the desktop layout. */
#offcanvasNavbar2.offcanvas.show,
#offcanvasNavbar2.offcanvas.showing {
    background-color: #ffffff !important;
}

/* ---------------- Offcanvas drawer content (mobile & tablet, < 992px) -- */
@media (max-width: 991.98px) {
    #offcanvasNavbar2 .offcanvas-header {
        background: #ffffff !important;
        border-bottom: 1px solid var(--line);
        padding: 18px 20px;
    }

    #offcanvasNavbar2 .offcanvas-title {
        color: var(--brand);
        font-weight: 700;
        font-size: 19px;
    }

    #offcanvasNavbar2 .offcanvas-body {
        background: #ffffff !important;
        padding: 14px;
        flex: 1 1 auto;
        overflow-y: auto;
    }

    #offcanvasNavbar2 .navbar-nav {
        width: 100%;
        align-items: stretch !important;
        gap: 4px;
    }

    #offcanvasNavbar2 .nav-item { width: 100%; }

    #offcanvasNavbar2 .nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        color: var(--ink) !important;
        padding: 13px 14px !important;
        border-radius: 12px;
        transition: background .2s ease, color .2s ease;
    }

    #offcanvasNavbar2 .nav-link i {
        width: 20px;
        text-align: center;
        font-size: 15px;
        color: var(--brand);
    }
}

/* ---------------- Header sizing per device ------------------------------ */
@media (max-width: 991.98px) {
    #nav .navbar-brand-group { gap: 10px; }
    #nav .navbar-brand img { height: 46px; }
    #nav .navbar-brand .brand-wordmark { max-width: 140px; }
}

@media (max-width: 575.98px) {
    #nav .navbar-brand-group { gap: 8px; }
    #nav .navbar-brand img { height: 36px; }
    #nav .navbar-brand .brand-wordmark { max-width: 108px; }
}

/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */
button { cursor: pointer; }

.btn1 {
    display: inline-block;
    color: #fff;
    background: linear-gradient(90deg, var(--ink-2), #3c3d5c);
    position: relative;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    border: 1px solid var(--ink-2);
    padding: 12px 35px;
    border-radius: 30px;
    transition: transform .25s ease, background .35s ease, box-shadow .25s ease;
}

.btn1:hover {
    color: #fff;
    background: linear-gradient(90deg, var(--brand), var(--brand-light));
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.default-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--ink);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out;
}

.default-button:hover { background-color: var(--brand); color: #fff; }

/* Filled brand buttons used across both pages (फ़िल्टर / रिफ्रेश / रिव्यु / लॉगिन etc.) */
.btn-primary,
.filterbtn {
    background: linear-gradient(90deg, var(--brand), var(--brand-light)) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 99, 14, .25);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(255, 99, 14, .32);
}

.btn-success {
    background: linear-gradient(90deg, #1f9d55, #2fb96b) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Hero */
/* ---------------------------------------------------------------------- */
.sec1 {
    position: relative;
    margin-top: var(--nav-h);
    padding-top: clamp(50px, 8vw, 90px);
    padding-bottom: clamp(50px, 7vw, 70px);
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.sec1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10, 8, 6, .78) 0%, rgba(10, 8, 6, .55) 45%, rgba(10, 8, 6, .30) 100%);
    z-index: -1;
}

.seccol1 { padding: 30px 15px; }

.text1 {
    font-size: 16px;
    color: var(--brand-light);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    padding-left: 44px;
}

.text1::before {
    content: "";
    width: 34px;
    height: 2px;
    background-color: var(--brand-light);
    position: absolute;
    left: 0;
    top: 50%;
}

.text2 {
    line-height: 1.25;
    color: #fff;
    margin-top: 14px;
    margin-bottom: 20px;
    font-size: clamp(30px, 4.2vw, 48px);
    font-weight: 700;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

.text3 {
    font-size: 15px;
    max-width: 650px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, .9);
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 4px solid rgba(255, 255, 255, .18);
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.faqimg img {
    max-width: 100%;
    background-image: linear-gradient(to top, var(--brand), #fdc9ac);
    border-radius: 25% 0 25% 0;
}

@media (max-width: 767.98px) {
    .sec1 .row { flex-direction: column; }
    .seccol1 { margin-bottom: 10px; text-align: center; }
    .text1::before { left: -34px; display: none; }
    .text1 { padding-left: 0; }
}

/* ---------------------------------------------------------------------- */
/* Introduction section */
/* ---------------------------------------------------------------------- */
.introduction-section {
    background-color: var(--surface);
    padding: clamp(40px, 6vw, 70px) 0;
}

.sec2 {
    background: linear-gradient(160deg, var(--brand), #f2b98a);
    border-radius: 0 30% 0 30%;
    padding: 18px;
    box-shadow: var(--shadow-md);
}

.sec2 img {
    width: 100%;
    border-radius: 15px;
    display: block;
}

.parasec { color: var(--ink); font-size: 14px; padding-top: 20px; }
.parasec h4 { color: var(--ink); font-weight: 700; font-size: clamp(22px, 3vw, 30px); }
.parasec p { margin-bottom: 20px; color: #333; line-height: 1.7; }

.pp1 ul { list-style: none; padding: 0; margin: 0; }
.pp1 li { margin-bottom: 16px; align-items: flex-start; }
.pp1 p { font-size: 16px; color: #333; margin: 0; line-height: 1.6; }
.pp1 i {
    color: var(--brand);
    background: var(--brand-softest);
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-top: 2px;
}

@media (max-width: 991.98px) {
    .parasec { padding-top: 30px; text-align: center; }
    .pp1 li { justify-content: center; text-align: left; }
    .sec2 { max-width: 420px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------- */
/* FAQ / description + carousel section */
/* ---------------------------------------------------------------------- */
.text11 { font-size: 15.5px; line-height: 1.8; color: #333; }

.faq-header { display: flex; align-items: center; gap: 10px; }
.faq-header span {
    width: 30px; height: 2px; background-color: var(--brand); display: inline-block;
}
.faq-header h6 { margin: 0; font-weight: 700; color: var(--ink); font-size: 20px; }

@media (max-width: 767.98px) {
    .faq-header { justify-content: center; }
    .faq-header h6, h2 { text-align: center; }
}

#carouselExampleAutoplaying .carousel-item img {
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md);
}

@media (max-width: 767.98px) {
    #carouselExampleAutoplaying .carousel-item img { height: 220px; }
}

.carousel-control-prev, .carousel-control-next { width: 8%; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: rgba(0,0,0,.35);
    border-radius: 50%;
    padding: 14px;
    background-size: 55%;
}

/* ---------------------------------------------------------------------- */
/* Stats cards (home page work summary) */
/* ---------------------------------------------------------------------- */
.process-section { background: var(--surface-alt); padding: clamp(40px, 6vw, 60px) 0; }

.stats-row {
    background: linear-gradient(180deg, #fff, var(--surface-alt));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(16px, 3vw, 28px) 14px;
    box-shadow: var(--shadow-sm);
}

.stats-card {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 18px 10px 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--brand);
    transition: transform .25s ease, box-shadow .25s ease;
    min-height: 118px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stats-card:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.stats-card .stats-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-softest);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 8px;
}

.stats-card h4 {
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.stats-card p {
    font-size: 13px;
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
.footer {
    background: linear-gradient(180deg, #201f1f, #141313);
    color: #ddd;
    padding-top: 50px;
    position: relative;
}

.footer h5 {
    color: #fff;
    border-bottom: 2px solid var(--brand);
    display: inline-block;
    padding-bottom: 6px;
    font-weight: 700;
    margin-bottom: 16px;
}

.footer a { color: #cfcfcf; text-decoration: none; transition: color .2s ease; }
.footer a:hover { text-decoration: none; color: var(--brand-light); }

.footer .contact-info { display: flex; align-items: center; gap: 8px; color: #cfcfcf; }
.contact-info i {
    color: var(--brand);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 99, 14, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer .link1 li { margin-bottom: 10px; }
.footer .link1 a { display: inline-flex; align-items: center; }
.link1 i { color: var(--brand); }

.footer-bottom {
    margin: 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
    padding: 16px 0;
    font-size: 14px;
    color: #bbb;
}

.footer-bottom a { color: var(--brand-light); font-weight: bold; }

.icon1 i {
    background-color: #fff;
    color: var(--ink);
    padding: 10px;
    border-radius: 50%;
    transition: .2s ease;
}
.icon1 i:hover { background-color: var(--brand); color: #fff; }

@media (max-width: 767.98px) {
    .footer .contact-info, .footer h5 { justify-content: center; }
    .footer .col-md-3 { margin-bottom: 26px; }
}

/* ---------------------------------------------------------------------- */
/* Floating buttons */
/* ---------------------------------------------------------------------- */
#scrollTopBtn {
    position: fixed;
    bottom: 22px;
    right: 22px;
    display: none;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: var(--shadow-md);
    z-index: 1040;
    display: none;
    align-items: center;
    justify-content: center;
}

#scrollTopBtn img { width: 20px; filter: brightness(0) invert(1); }
#scrollTopBtn:hover { filter: brightness(1.05); transform: translateY(-2px); }

/* ---------------------------------------------------------------------- */
/* Work Progress: filter bar / offcanvas / table / pagination           */
/* ---------------------------------------------------------------------- */
.sec1991 { margin-top: calc(var(--nav-h) + 24px); }

.work-toolbar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}

.ser-filter {
    width: min(360px, 92vw);
    background: #ffffff;
    border-radius: 12px 0 0 12px;
    animation: slideIn 0.4s ease-in-out;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.filterbody { z-index: 2000; }

.offcanvas-title { font-size: 19px; color: var(--brand) !important; font-weight: 700; }
.offcanvas-body label { font-weight: 600; color: var(--ink-2); font-size: 14px; }
.offcanvas-body .form-select,
.offcanvas-body .form-control {
    border-radius: 10px;
    border-color: var(--line);
    padding: 10px 12px;
}
.offcanvas-body .form-select:focus,
.offcanvas-body .form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(255, 99, 14, .15);
}

/* Table */
.table-responsive {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
}

.table thead {
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    color: #fff;
}

.table thead th {
    white-space: nowrap;
    font-weight: 600;
    font-size: 13.5px;
    padding: 12px 10px;
    border-color: rgba(255, 255, 255, .2);
}

.table tbody td { font-size: 13.5px; vertical-align: middle; }

.table tbody tr:hover { background-color: var(--brand-softest); transition: .2s; }

.img-work-app, .img-work-web {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--line);
    transition: .25s;
}

.img-work-app:hover, .img-work-web:hover {
    transform: scale(1.06);
    border-color: var(--brand);
}

.gallery { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }

.table-condensed td, .table-condensed th { padding: 4px 6px !important; font-size: 12.5px; }

.table-bordered { border-radius: 10px; overflow: hidden; }

.status-badge {
    background: var(--brand-softest);
    color: var(--brand-dark);
    padding: 4px 10px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 12.5px;
    display: inline-block;
}

.modal-content { border-radius: 14px; overflow: hidden; }
.modal-header.bg-light { background: var(--brand-softest) !important; }

/* Pagination */
.pagination { flex-wrap: wrap; row-gap: 6px; }
.pagination .page-link {
    color: var(--ink-2);
    border-radius: 8px !important;
    margin: 0 3px;
    border-color: var(--line);
}
.pagination .page-link:hover { background: var(--brand-softest); color: var(--brand-dark); }
.pagination .active .page-link,
.pagination li.active a {
    background: linear-gradient(90deg, var(--brand), var(--brand-dark)) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.star-rating i { font-size: 28px; color: #ddd; cursor: pointer; transition: color .15s ease; }
.star-rating i.active { color: #ffb300; }

/* Mobile: keep table scrollable, but shrink paddings / freeze first column for orientation */
@media (max-width: 991.98px) {
    .sec1991 { margin-top: calc(var(--nav-h) + 70px); }
    .work-toolbar { flex-direction: column; align-items: stretch !important; gap: 12px; }
    .work-toolbar .faq-header { justify-content: center; }
    .work-toolbar > div:last-child { display: flex; gap: 8px; }
    .work-toolbar .btn, .work-toolbar a.btn { flex: 1; }
    .table-responsive { max-height: 72vh; }
    .table thead th:first-child, .table tbody td:first-child {
        position: sticky; left: 0; background: inherit; z-index: 2;
    }
    .table thead th:first-child { background: var(--brand); }
}

@media (max-width: 575.98px) {
    .sec1991 { margin-top: calc(var(--nav-h) + 108px); }
}

/* ---------------------------------------------------------------------- */
/* Misc small-device polish shared by both pages                          */
/* ---------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
    h1, .text2 { word-break: break-word; }
}