/* Civil Works Consultants - custom overrides on the Axial Construct template */

/* Fix: header nav text is hardcoded white and the header background is
   transparent by default, only turning solid on scroll/menu-open. That
   works fine on the homepage (dark hero behind it) but leaves the nav
   invisible - white text on a light section - on every page whose first
   section uses a light background (about, services, contacts, portfolio,
   team, project details). This gives those pages a permanently solid,
   legible header instead of waiting for a scroll event. */
.header.header--solid {
    background-color: #0F2440;
}

/* Featured/portfolio card highlight colour used inline in a couple of
   places, kept in one spot instead of scattered inline styles. */
.features_card-icon,
.features_card i {
    color: #F68C0A;
}

/* Project/portfolio filter buttons on the portfolio listing page */
.cwc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.cwc-filter-btn {
    border: 1px solid rgba(15, 36, 64, 0.25);
    background: transparent;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 2px;
    transition: all .2s ease;
    color: #0F2440;
}
.cwc-filter-btn.active,
.cwc-filter-btn:hover {
    background: #0F2440;
    color: #fff;
    border-color: #0F2440;
}

/* Status badges on project cards / detail pages */
.cwc-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    color: #fff;
    border-radius: 2px;
}

/* Team page - LinkedIn badge + monogram avatar for members without a photo */
.cwc-avatar-fallback {
    width: 100%;
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0F2440;
    color: #F68C0A;
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: 32px;
}

/* Fix: hero featured-project card's image is absolutely positioned with
   width:auto against a fixed height, sized for the template's narrow demo
   photo. A real, wider-aspect project photo renders much wider at that
   same height and overlaps the card's text. Cap it so the text column
   always stays clear regardless of the source photo's aspect ratio. */
.hero .card img {
    max-width: 55% !important;
    object-fit: cover;
}
.hero .card .wrapper {
    position: relative;
    z-index: 2;
    max-width: 60%;
}

/* ==========================================================================
   Preloader - shown for a brief moment on first load, using the real CWC
   logo. Guaranteed to disappear quickly (see the inline script next to the
   markup): it doesn't wait on any other script on the page, so it can
   never hang indefinitely even if something else fails to load.
   ========================================================================== */
.cwc-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0F2440;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .4s ease;
}
.cwc-preloader--hidden {
    opacity: 0;
    pointer-events: none;
}
.cwc-preloader_logo {
    width: 120px;
    height: auto;
    position: relative;
    z-index: 2;
    animation: cwcPreloaderPulse 1.4s ease-in-out infinite;
}
.cwc-preloader_ring {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid rgba(246, 140, 10, 0.25);
    border-top-color: #F68C0A;
    animation: cwcPreloaderSpin 1s linear infinite;
}
@keyframes cwcPreloaderPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .75; transform: scale(0.94); }
}
@keyframes cwcPreloaderSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (max-width: 575px) {
    .cwc-preloader_logo { width: 90px; }
    .cwc-preloader_ring { width: 115px; height: 115px; }
}

/* ==========================================================================
   Fix: homepage hero was far taller than any real viewport - the template
   set 280px of top padding plus 200px of bottom padding on desktop, plus a
   190px gap between the stats and the project card, adding up to roughly
   670px of pure spacing before content even fit. Capped uniformly with
   !important so it applies at every breakpoint the same way, regardless of
   the original per-breakpoint values.
   ========================================================================== */
.hero {
    padding: 130px 0 0 !important;
}
.hero .container {
    padding-bottom: 60px !important;
}
.hero_main {
    gap: 40px !important;
}
.hero_main .numbers {
    gap: 24px !important;
    margin: 10px 0 !important;
}
@media (max-width: 575px) {
    .hero {
        padding: 100px 0 0 !important;
    }
}

/* ==========================================================================
   Portfolio page - proper card grid (3 per row) instead of the template's
   single-column list layout.
   ========================================================================== */
#cwcPortfolioGrid.projects_list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 36px 28px !important;
}
#cwcPortfolioGrid .projects_list-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
}
#cwcPortfolioGrid .projects_list-item .media,
#cwcPortfolioGrid .projects_list-item .main {
    width: 100% !important;
    margin: 0 !important;
}
#cwcPortfolioGrid .projects_list-item .media {
    position: relative;
    height: 230px;
    overflow: hidden;
}
#cwcPortfolioGrid .projects_list-item .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#cwcPortfolioGrid .projects_list-item .main_text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
}
#cwcPortfolioGrid .projects_list-item .main_title {
    font-size: 20px !important;
    margin: 12px 0 10px !important;
}

@media (max-width: 1023px) {
    #cwcPortfolioGrid.projects_list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 639px) {
    #cwcPortfolioGrid.projects_list {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Team page - 4 cards per row instead of the template's max of 3, and
   smaller card proportions so they read as a normal team grid rather than
   oversized profile blocks.
   ========================================================================== */
@media (min-width: 1024px) {
    .team_list {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-gap: 24px !important;
    }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .team_list {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 20px !important;
    }
}
.team_list-item .media {
    height: 220px !important;
}
.team_list-item .main {
    padding: 18px !important;
}
.team_list-item .main_name {
    font-size: 17px !important;
    margin-bottom: 5px !important;
}
.team_list-item .main_position {
    font-size: 13px !important;
}
.team_list-item .main_text {
    font-size: 13px !important;
    margin: 8px 0 12px !important;
}

/* ==========================================================================
   Hero: the right side is now a pure full-bleed photo (no stats, no cards,
   no cut-out layers on top of it). A navy fade is applied ONLY on the left
   edge of the photo, where it meets the headline, so the text stays legible.
   The small credit line is the only element sitting on the image.
   ========================================================================== */
.hero > .hero_media {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 62% !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;
    z-index: 1;
    pointer-events: none;
}
.hero > .hero_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
    display: block;
}
.hero > .hero_media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0F2440 0%, rgba(15, 36, 64, 0.55) 22%, rgba(15, 36, 64, 0) 48%);
}
.hero > .hero_deco { z-index: 2; }
.hero .container { z-index: 3; }
.hero_credit {
    position: absolute;
    right: 20px;
    bottom: 16px;
    z-index: 2;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
}
@media (max-width: 1023px) {
    /* Narrow screens: photo sits behind the text, darkened for legibility */
    .hero > .hero_media {
        left: 0 !important;
        width: 100% !important;
    }
    .hero > .hero_media img { object-position: 78% center; }
    .hero > .hero_media::after {
        background: linear-gradient(180deg, rgba(15, 36, 64, .88) 0%, rgba(15, 36, 64, .62) 55%, rgba(15, 36, 64, .35) 100%);
    }
    .hero .container { padding-bottom: 90px !important; }
}

/* Nav links stay readable when the transparent header sits over the bright photo */
.header:not(.sticky) .header_nav-list_item .nav-item {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
@media (max-width: 1023px) {
    /* No drawing layered on top of the photo on narrow screens */
    .hero > .hero_deco { display: none !important; }
}

/* ==========================================================================
   "Have a Project in Mind?" - left-aligned with the rest of the page's
   headings, tops aligned with the contact details column, and a button that
   uses the template's own centred inline-flex layout (an inline
   display:inline-block had pushed its label to the top of the box).
   ========================================================================== */
.contact .container.cwc-cta-row {
    align-items: flex-start;
    justify-content: space-between;
}
.cwc-cta {
    max-width: 520px;
    text-align: left;
}
.cwc-cta .contact_form-header { margin-bottom: 0; }
.cwc-cta .text { margin-top: 20px; max-width: 440px; }
.cwc-cta .btn { margin-top: 32px; }
.btn--round { border-radius: 10px; }

/* ==========================================================================
   Pakistan map with project pins
   ========================================================================== */
.cwc-map { position: relative; margin-top: 30px; }
.cwc-map_img { display: block; width: 100%; height: auto; }

.cwc-prov {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: "Archivo", sans-serif;
    font-weight: 600;
    font-size: clamp(8px, 1.45vw, 11px);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.cwc-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.cwc-pin:hover,
.cwc-pin:focus-within,
.cwc-pin.is-open { z-index: 30; }

.cwc-pin_dot {
    display: block;
    width: var(--s, 16px);
    height: var(--s, 16px);
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #F68C0A;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(246, 140, 10, .65);
    animation: cwcPinPulse 2.4s ease-out infinite;
    transition: transform .2s ease;
}
.cwc-pin:hover .cwc-pin_dot,
.cwc-pin.is-open .cwc-pin_dot { transform: scale(1.2); animation-play-state: paused; }
.cwc-pin_dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@keyframes cwcPinPulse {
    0%   { box-shadow: 0 0 0 0 rgba(246, 140, 10, .65); }
    70%  { box-shadow: 0 0 0 14px rgba(246, 140, 10, 0); }
    100% { box-shadow: 0 0 0 0 rgba(246, 140, 10, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cwc-pin_dot { animation: none; }
}

.cwc-pin_card {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    max-width: 78vw;
    padding: 16px 18px 14px;
    background: #fff;
    color: #1C2B39;
    border-top: 3px solid #F68C0A;
    box-shadow: 0 14px 34px rgba(15, 36, 64, .3);
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    cursor: default;
}
/* invisible bridge so the card doesn't close while the mouse travels to it */
.cwc-pin_card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -16px; height: 16px;
}
.cwc-pin--right .cwc-pin_card { left: auto; right: -10px; transform: none; }
.cwc-pin:hover .cwc-pin_card,
.cwc-pin:focus-within .cwc-pin_card,
.cwc-pin.is-open .cwc-pin_card { display: block; }

.cwc-pin_title {
    display: block;
    font-family: "Archivo", sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #0F2440;
}
.cwc-pin_sub {
    display: block;
    margin: 2px 0 10px;
    font-size: 12px;
    color: #5B7A9D;
    font-weight: 500;
}
.cwc-pin_card ul { margin: 0; padding: 0; list-style: none; }
.cwc-pin_card li { margin: 0 0 6px; }
.cwc-pin_card li a {
    color: #1C2B39;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 36, 64, .2);
    transition: color .2s ease, border-color .2s ease;
}
.cwc-pin_card li a:hover { color: #F68C0A; border-color: #F68C0A; }
.cwc-pin_more {
    display: inline-block;
    margin-top: 4px;
    font-weight: 700;
    font-size: 12px;
    color: #0F2440;
    text-decoration: none;
}
.cwc-pin_more:hover { color: #F68C0A; }

.cwc-map_hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    font-size: 13px;
    color: #5B7A9D;
}
.cwc-map_hintdot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #F68C0A; border: 2px solid #fff; box-shadow: 0 0 0 1px #F68C0A;
    flex: none;
}
@media (max-width: 575px) {
    .cwc-prov { display: none; }
    .cwc-pin_card { width: 220px; }
}
.cwc-prov { text-align: center; line-height: 1.6; }
@media (max-width: 575px) {
    .cwc-pin_dot { width: calc(var(--s, 16px) * .68); height: calc(var(--s, 16px) * .68); border-width: 1.5px; }
    @keyframes cwcPinPulse {
        0%   { box-shadow: 0 0 0 0 rgba(246, 140, 10, .65); }
        70%  { box-shadow: 0 0 0 8px rgba(246, 140, 10, 0); }
        100% { box-shadow: 0 0 0 0 rgba(246, 140, 10, 0); }
    }
}

/* Official-map version: Jammu & Kashmir (disputed) label + note */
.cwc-prov--dispute { color: rgba(255, 255, 255, .88); font-size: clamp(7px, 1.15vw, 10px); letter-spacing: .16em; line-height: 1.5; text-shadow: 0 1px 4px rgba(15, 36, 64, .55); }
.cwc-prov--dispute small { display: block; font-size: .86em; letter-spacing: .1em; font-weight: 500; text-transform: none; opacity: .9; }
.cwc-map_note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: #7a8da5; max-width: 560px; }

/* Azad Jammu & Kashmir (AJ&K) label - narrow region, so a short label */
.cwc-prov--ajk { font-size: clamp(6.5px, 1.05vw, 9px); letter-spacing: .12em; color: rgba(255, 255, 255, .92); }
.cwc-prov--ajk abbr { text-decoration: none; cursor: default; }

/* home services: equal-height cards even when a title wraps to two lines */
.services_list-item { height: 100%; }
.services_list-item > .wrapper { height: 100%; box-sizing: border-box; }