/* =============================================
   MUGHAL BUILDERS — CUSTOM CSS OVERRIDES
   ============================================= */

/* ================================================================
   BRAND PALETTE — Hard Hat / Safety Orange
   Primary  #ff6600  (engineer hard-hat orange)
   Dark     #1E1F22  (construction charcoal)
   Light    #FBF7F3  (concrete cream — warm light sections)
   Body     #4A4A4A  (concrete-gray body text)
   ================================================================ */
.theme-color2 { --theme-color: #ff6600; }

/* ================================================================
   CUSTOM SCROLLBAR — orange rail
   ================================================================ */
::-webkit-scrollbar               { width: 5px; height: 5px; }
::-webkit-scrollbar-track         { background: #F0EDE8; }
::-webkit-scrollbar-thumb         { background: linear-gradient(180deg, #ff6600 0%, #B8440A 100%); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover   { background: #B8440A; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #ff6600 #F0EDE8; }

/* ================================================================
   SECTION BACKGROUNDS — concrete cream palette
   ================================================================ */
.bg-section-alt   { background-color: #FBF7F3 !important; }
.bg-section-light { background-color: #FEF9F6 !important; }

/* ================================================================
   SCROLL FIX
   ================================================================ */
html, body { overflow-x: hidden !important; }
html.lenis, html.lenis body { height: auto !important; overflow: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ================================================================
   SPACING NORMALIZATION
   ================================================================ */
.space          { padding-top: 90px;  padding-bottom: 90px;  }
.space-top      { padding-top: 90px;  }
.space-bottom   { padding-bottom: 90px; }

@media (max-width: 991px) {
    .space          { padding-top: 70px; padding-bottom: 70px; }
    .space-top      { padding-top: 70px; }
    .space-bottom   { padding-bottom: 70px; }
}
@media (max-width: 767px) {
    .space          { padding-top: 55px; padding-bottom: 55px; }
    .space-top      { padding-top: 55px; }
    .space-bottom   { padding-bottom: 55px; }
}

/* ================================================================
   HERO
   ================================================================ */
.hero-5             { position: relative; }
.hero-inner         { min-height: 100vh; display: flex; align-items: center; }
.hero-style5        { padding: 120px 0 80px; }

/* Dark cover that sits over the hero during Swiper's init phase,
   then fades out cleanly. Eliminates the right-to-left slide glitch
   that appears before the fade-effect slider settles. */
.hero-5::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #111;
    z-index: 10;
    pointer-events: none;
    animation: hero-cover-out 0.6s ease 0.5s both;
}
@keyframes hero-cover-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Fix the top gap: the strip is 827px wide but rotated to act as a
   vertical sidebar — force it to span full viewport height. Only
   applies where the theme actually keeps it rotated (>=1200px) —
   below that it un-rotates to a normal horizontal bar (width:100%),
   and forcing 100vh there was overflowing it off the right edge of
   narrow/portrait screens (a real mobile-overflow bug this caused). */
@media (min-width: 1200px) {
    .hero-5 .hero-social-link { width: 100vh !important; }
}

@media (max-width: 767px) {
    .hero-inner    { min-height: 80vh; }
    .hero-title    { font-size: 30px !important; }
    .hero-subtitle { font-size: 12px !important; letter-spacing: 3px; }
}

/* ================================================================
   OWNER / FOUNDER SECTION — between hero and services
   Left: framed portrait with a diagonal accent panel behind it and a
   floating credentials badge. Right: standard title-area heading with
   one accent word, full-width intro copy, a card-style pull-quote,
   icon-badge credential chips, and the existing about-profile/
   signature pattern already used in About Us.
   ================================================================ */
@media (min-width: 1300px) {
    .owner-container {
        max-width: 1350px;
    }
}
@media (min-width: 992px) {
    .owner-col-img { flex: 0 0 40%; max-width: 40%; }
    .owner-col-content { flex: 0 0 60%; max-width: 60%; }
}

.owner-img-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}
@media (min-width: 992px) {
    .owner-img-wrap { margin: 0; }
}
.owner-img-shape {
    position: absolute;
    inset: 24px -20px -20px 24px;
    background: linear-gradient(135deg, #ff6600 0%, #ffa97d 100%);
    border-radius: 18px;
    z-index: 0;
}
.owner-img-frame {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 20px 45px rgba(17, 17, 17, 0.16);
    border: 6px solid #fff;
}
.owner-img-frame img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
}
.owner-badge {
    position: absolute;
    z-index: 2;
    left: -20px; bottom: -20px;
    background: #1E1F22;
    color: #fff;
    border-radius: 14px;
    padding: 12px 18px 12px 14px;
    box-shadow: 0 14px 30px rgba(17, 17, 17, 0.22);
    display: flex;
    align-items: center;
    gap: 10px;
}
.owner-badge-icon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    background: linear-gradient(135deg, #ff6600 0%, #B8440A 100%);
    border-radius: 50%;
    font-size: 15px; color: #fff;
}
.owner-badge-copy { display: flex; flex-direction: column; line-height: 1.25; }
.owner-badge-num {
    font-size: 20px; font-weight: 800;
    color: #fff;
}
.owner-badge-text {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
}
/* On the narrowest phones (<=480px) the container's own padding leaves
   just enough room that these -20px offsets pushed the decorative
   panel and badge a few px past the actual viewport edge (a real,
   if tiny, overflow — confirmed by measurement, invisible in normal
   browsing only because overflow-x:hidden clips it rather than fixing
   it). Pull them in slightly at that width. */
@media (max-width: 480px) {
    .owner-img-shape { inset: 24px -10px -10px 24px; }
    .owner-badge { left: -10px; }
}

.owner-desc {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 26px;
}

.owner-quote {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 28px;
    padding: 18px 22px;
    border-left: 3px solid #ff6600;
    background: #FBF7F3;
    border-radius: 0 12px 12px 0;
}
.owner-quote-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(232, 93, 4, 0.12);
    color: #ff6600;
    font-size: 14px;
}
.owner-quote p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.55;
    color: var(--title-color, #1a1a1a);
}

.owner-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 32px;
}
.owner-pill {
    display: inline-flex;
    align-items: center;
    flex: 1 1 0;
    gap: 8px;
    padding: 7px 14px 7px 7px;
    background: #fff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #1a1a1a;
    box-shadow: 0 3px 12px rgba(17, 17, 17, 0.06);
}
.owner-pill-icon {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    background: rgba(232, 93, 4, 0.12);
    color: #ff6600;
    border-radius: 50%;
    font-size: 12px;
}

.owner-profile-wrap {
    padding-top: 22px;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}

@media (max-width: 991px) {
    .owner-img-wrap { margin-bottom: 30px; }
}
/* The 40/60 image/content split only kicks in at >=992px, and up until
   the container widens again at >=1300px (.owner-container) the content
   column is too narrow for all three nowrap pills — "Personally
   Oversees Every Site" was getting clipped off the right edge (only
   visible via a real overflow check; the page's own overflow-x:hidden
   was silently hiding it, not fixing it — confirmed a few px still
   clipped even at 1200px). Wrap through the whole narrow-container
   range; it's only safely one row once the container widens at 1300px. */
@media (max-width: 1299px) {
    .owner-pills { flex-wrap: wrap; }
    .owner-pill { flex: 0 0 auto; white-space: normal; }
}

/* ================================================================
   IMAGES — CONSISTENT HEIGHTS
   ================================================================ */
.property-card-thumb img {
    width: 100%; height: 250px;
    object-fit: cover; object-position: center;
}
.portfolio-img img {
    width: 100%; height: 360px;
    object-fit: cover; object-position: center;
}
.blog-img img      { width: 100%; height: 250px; object-fit: cover; }
.team-img img      { width: 100%; height: 370px; object-fit: cover; object-position: top center; }
.insta-box img     { width: 100%; height: 220px; object-fit: cover; }
.about-area-6 .img1 img,
.about-area-6 .img2 img { width: 100%; object-fit: cover; border-radius: 8px; }
.testi-card_profile .avatar img {
    width: 65px; height: 65px; border-radius: 50%; object-fit: cover;
}
.about-profile .avater img {
    width: 65px; height: 65px; border-radius: 50%;
    object-fit: cover; object-position: top;
}

/* ================================================================
   SERVICES GRID (2-row × 3-col, no slider)
   ================================================================ */
.mt-40 { margin-top: 40px; }

/* ================================================================
   PROCESS — theme's native .process-card2 component (dark section)
   Built for dark backgrounds already (white title/text, translucent
   icon circle + number pill) — just needed icon-font sizing since the
   native component expects an <img> icon, and we use Font Awesome.
   ================================================================ */
.process-section-dark { background: #1C1D20; }

.process-card2 { transition: transform 0.3s ease, background 0.3s ease; }
.process-card2:hover { transform: translateY(-4px); background: #3a3a3a; }
.process-card2 .box-icon i {
    font-size: 40px;
    color: #ff6600;
    transition: transform 0.4s ease;
}
.process-card2:hover .box-icon i { transform: scale(1.1) rotate(-8deg); }

/* ================================================================
   COUNTER SECTION (light bg)
   ================================================================ */
.counter-card.style4 .box-number { color: #1a1a1a !important; }
.counter-card.style4 .box-text   { color: #4A4A4A !important; }
/* SVGs are hardcoded stroke="#FF6600" — very close to brand orange; keep natural */
/* Theme hover applies brightness(99) which bleaches icon to white on light bg */
.counter-card.style4:hover .box-icon {
    filter: none !important;
}
.counter-card.style4:hover .box-icon img {
    filter: drop-shadow(0 4px 14px rgba(232,93,4,0.5)) !important;
}

/* ================================================================
   TESTIMONIAL CARDS (light bg)
   ================================================================ */
.testi-card.style3 { border-radius: 10px; border: 1px solid #EBEBEB; }
.testi-card.style3 .testi-card_text    { color: #4A4A4A !important; }
.testi-card.style3 .testi-card_name    { color: #1a1a1a !important; }
.testi-card.style3 .testi-card_desig   { color: #888 !important; }
.testi-card_text { font-size: 14.5px; line-height: 1.75; }
/* Keep active slide white — prevents inherited dark-bg testi-slider rule */
.testi-slider4-2 .swiper-slide.swiper-slide-active .testi-card.style3 {
    background: #fff !important;
}
.testi-slider4-2 .swiper-slide.swiper-slide-active .testi-card.style3 .testi-card_text,
.testi-slider4-2 .swiper-slide.swiper-slide-active .testi-card.style3 .testi-card_name,
.testi-slider4-2 .swiper-slide.swiper-slide-active .testi-card.style3 .testi-card_desig {
    color: inherit !important;
}

/* ================================================================
   SLIDER ARROWS on light sections — style6 defaults to white
   icons for dark backgrounds; override for light sections
   ================================================================ */
.bg-section-alt .slider-arrow.style6 {
    border-color: #ff6600;
}
.bg-section-alt .slider-arrow.style6 img {
    filter: none;
}
.bg-section-alt .slider-arrow.style6:hover {
    background: #ff6600;
    border-color: #ff6600;
}
.bg-section-alt .slider-arrow.style6:hover img {
    filter: brightness(0) invert(1);
}

/* ================================================================
   STICKY HEADER — white with orange accent bar
   Theme default is var(--black-color2); override to bright white.
   ================================================================ */
.header-layout3 .sticky-wrapper.sticky {
    background: #ffffff !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.09);
    border-bottom: 3px solid #ff6600;
}
.header-layout3 .sticky-wrapper.sticky .header-logo {
    padding: 3px 0;
}
/* Logo has no intrinsic sizing (raw SVG is 171x143) — constrain it to fit the header row */
.header-layout3 .header-logo img {
    max-height: 110px;
    width: auto;
}
/* Logo swaps to logo.svg via JS (main.js) when sticky is toggled, and shrinks to fit the slim sticky bar */
.header-layout3 .sticky-wrapper.sticky .header-logo img {
    max-height: 78px;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}
/* header-layout3 is offset 80px from the left in its normal (absolute) state, giving it
   breathing room — but .sticky-wrapper.sticky switches to position:fixed, which escapes
   that parent offset and spans full viewport width, so the content sits flush to the edges.
   Add horizontal padding back so the sticky bar keeps its own breathing space. */
.header-layout3 .sticky-wrapper.sticky .menu-area {
    padding-left: 40px;
    padding-right: 40px;
}
@media (max-width: 767px) {
    .header-layout3 .sticky-wrapper.sticky .menu-area {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* Nav links → dark on white; hover stays orange via --theme-color */
.header-layout3 .sticky-wrapper.sticky .main-menu > ul > li > a {
    color: #1a1a1a;
    padding: 25px 0;
}
/* Dropdown arrow is hardcoded white in the theme (style.css) for the default
   dark/transparent header — invisible on the white sticky bar until hovered
   (hover already switches it to orange). Match it to the dark link color. */
.header-layout3 .sticky-wrapper.sticky .main-menu ul li:has(.sub-menu) > a:after,
.header-layout3 .sticky-wrapper.sticky .main-menu ul li.menu-item-has-children > a:after {
    color: #1a1a1a;
}
/* Hamburger lines are white by default; make dark on white header —
   but only the desktop icon (.style3), which sits directly on the bar
   with no background of its own. The mobile toggle
   (.th-menu-toggle.sidebar-btn) keeps a permanent solid orange
   background box regardless of sticky state, so its lines need to
   stay white for contrast — this rule was overriding them to dark
   and making them hard to see against that orange square. */
.header-layout3 .sticky-wrapper.sticky .sidebar-btn.style3 .line,
.header-layout3 .sticky-wrapper.sticky .header-button .sideMenuInfo.sidebar-btn .line {
    background: #1a1a1a;
}
.header-layout3 .sticky-wrapper.sticky .th-menu-toggle.sidebar-btn .line {
    background: #fff;
}

/* ================================================================
   CONTACT FORM
   ================================================================ */
.appointment-wrap2 { padding: 50px 45px; }
@media (max-width: 767px) { .appointment-wrap2 { padding: 40px 25px; } }

/* ================================================================
   COUNTER CARD WRAP
   ================================================================ */
.counter-card-wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
@media (max-width: 767px) {
    .counter-card-wrap { justify-content: center; }
    .counter-card.style4 { min-width: 160px; }
}

/* ================================================================
   FOOTER — theme's native footer-default markup/spacing, unmodified.
   Only fix: our logo-white.svg (174x143, icon-over-wordmark) replaced
   the template's original (190x56, wide horizontal lockup) — the
   template never constrains .about-logo img because it never needed
   to. Without a cap, our differently-shaped logo renders 143px tall.
   ================================================================ */
.footer-widget .about-logo img {
    max-height: 120px;
    width: auto;
}
/* .info-box_text is a flex row with no align-items set, so it defaults
   to stretch: the icon is a fixed 40px circle, and a single-line block
   (like the email row) stretches its .details to match that height
   anyway — leaving dead space below the text. flex-start fixed the
   dead space but left the icon's own vertical CENTER (its glyph sits
   mid-circle) lower than a single short line of text's center — center
   the row instead so the icon and a one-line email/phone align on the
   same midline. */
.th-widget-contact .info-box_text { margin-bottom: 14px; align-items: center; }
/* Multi-line blocks (the 2-office address) should still anchor the
   icon to the first line rather than the vertical middle of 4 lines */
.th-widget-contact .info-box_text:has(.details p:nth-child(3)) {
    align-items: flex-start;
}

/* ================================================================
   BLOG CARDS (style2) — theme built this for a dark section (meta
   links and title link are hardcoded var(--white-color)), but it's
   used on light backgrounds everywhere in this theme (homepage blog
   slider, archive.php, index.php) — white-on-white was unreadable.
   ================================================================ */
.blog-card.style2 .blog-content .blog-meta a {
    color: #6b6b6b;
}
.blog-card.style2 .blog-content .blog-meta a:hover {
    color: #E85D04;
}
.blog-card.style2 .blog-content .box-title a {
    color: #1a1a1a;
    background-image: linear-gradient(to left, #E85D04, #E85D04);
}
.blog-card.style2 .blog-content .box-title a:hover {
    color: #E85D04;
}
.blog-card.style2 .blog-content .blog-text {
    color: #6b6b6b;
    max-width: 95%;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
/* .th-btn.style-border is white-border/white-text/white-arrow by
   design (built for dark sections) — on our light blog cards that's
   invisible on every screen size, not just mobile. Give it a dark
   default and flip to a filled orange button on hover. */
.th-btn.style-border {
    border-color: #1a1a1a;
    color: #1a1a1a;
}
.th-btn.style-border.th-btn-icon:after {
    filter: none;
}
.th-btn.style-border:hover {
    background: #E85D04;
    border-color: #E85D04;
    color: #fff;
}
.th-btn.style-border:hover.th-btn-icon:after {
    filter: brightness(0) invert(1);
}

/* ================================================================
   SECTION TITLES
   ================================================================ */
.sec-title  { line-height: 1.2; }
.sub-title  { letter-spacing: 3px; font-size: 13px; }

/* .sec-btn always carries a 60px bottom margin (theme default), meant
   for layouts where the button stacks below the title. In the Services
   header row it sits beside the title instead (row + align-items:center,
   col-auto), so that margin just added dead space below the whole
   header row before the cards grid — remove it once the row is
   confirmed to be laid out side-by-side (>=992px, matching col-lg-8). */
@media (min-width: 992px) {
    #service-sec .sec-btn { margin-bottom: 0; }
}

/* ================================================================
   SCROLL-TO-TOP
   ================================================================ */
.scroll-top { z-index: 9990; }

/* ================================================================
   WHATSAPP FLOATING BUTTON
   ================================================================ */
.whatsapp-float {
    position: fixed; bottom: 85px; right: 25px; z-index: 9991;
    width: 56px; height: 56px;
    background: #25D366; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 27px; color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 22px rgba(37,211,102,0.45);
    transition: all 0.3s ease;
}
.whatsapp-float:hover {
    background: #1da851; color: #fff !important;
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(37,211,102,0.6);
}
.whatsapp-float i { line-height: 1; }

/* ================================================================
   MOBILE MENU
   ================================================================ */
/* Same specificity as the base .header-layout3 .header-logo img rule
   above (2 classes) — a plain ".header-logo img" here never actually
   won against it regardless of viewport, so the mobile cap was silently
   ignored and the logo rendered at the full 110px desktop height. */
@media (max-width: 991px) {
    .header-layout3 .header-logo img { max-width: 150px; max-height: 66px; }
}

/* Mobile hamburger toggle button — theme renders it at a fixed 56x56px;
   shrink to ~70% (30% smaller) so it doesn't dominate the header row,
   scaling its inner lines down to match. */
@media (max-width: 991px) {
    .header-layout3 .header-button .th-menu-toggle.sidebar-btn {
        width: 39px;
        height: 39px;
    }
    .header-layout3 .header-button .th-menu-toggle.sidebar-btn .line {
        width: 22px;
    }
    .header-layout3 .header-button .th-menu-toggle.sidebar-btn .line:not(:last-child) {
        margin-bottom: 6px;
    }
    .header-layout3 .header-button .th-menu-toggle.sidebar-btn .line:nth-child(2) {
        width: 14px;
    }
}

/* ================================================================
   ONE-PAGE ANCHOR TARGETS
   The sticky header is position:fixed and overlaps whatever sits at
   the top of the viewport, so jumping straight to a section's id
   (e.g. #service-sec, direct link, browser back/forward) hides its
   top under the header. scroll-margin-top reserves that space.
   main.js also offsets its own animated scroll by the live header
   height for the same reason (the scroll-down arrow, etc).
   ================================================================ */
#hero, #owner-sec, #service-sec, #blog-sec, #contact-sec {
    scroll-margin-top: 130px;
}
@media (max-width: 991px) {
    #hero, #owner-sec, #service-sec, #blog-sec, #contact-sec {
        scroll-margin-top: 90px;
    }
}

/* ================================================================
   HEADER DROPDOWN (SERVICES SUBMENU)
   Theme default sizes the sub-menu with `width: max-content`, so its
   width is driven by the single longest item ("Commercial Construction").
   That pushed the box past the right edge of the header/viewport and
   got clipped by the site's `overflow-x: hidden`, "disturbing" the
   width. Fixing to a stable width + wrapping avoids that, plus a
   visual refresh (radius, spacing, hover state, accent underline).
   ================================================================ */
.header-layout3 .main-menu ul.sub-menu {
    width: 270px;
    min-width: 270px;
    left: 0;
    padding: 10px;
    border-radius: 10px;
    border-top: 3px solid #ff6600;
    box-shadow: 0 12px 34px rgba(17, 17, 17, 0.14);
}
.header-layout3 .main-menu ul.sub-menu li {
    padding: 0;
    margin-bottom: 0 !important;
}
.header-layout3 .main-menu ul.sub-menu li a {
    display: block;
    padding: 10px 14px 10px 30px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.4;
    white-space: normal;
    transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}
.header-layout3 .main-menu ul.sub-menu li a:before {
    top: 11px;
    left: 12px;
}
.header-layout3 .main-menu ul.sub-menu li a:hover {
    background: rgba(232, 93, 4, 0.08);
    padding-left: 42px;
}
.header-layout3 .main-menu ul.sub-menu li:not(:last-child) {
    margin-bottom: 2px;
}

/* ================================================================
   BLOG SIDEBAR — "Need Help" CTA banner
   .widget_banner expects a JS-driven data-bg-src background image
   (we don't have one for this); give it a real gradient background
   directly instead so the white title/subtitle/link text still has
   the contrast the component was designed around.
   ================================================================ */
.mb-help-banner {
    background: linear-gradient(150deg, #1E1F22 0%, #3a2410 100%);
}
/* This banner's dark background needs the light variant of
   .th-btn.style-border that the global blog-card override above
   removed — restore it here so the CTA stays visible. */
.mb-help-banner .th-btn.style-border {
    border-color: #fff;
    color: #fff;
}
.mb-help-banner .th-btn.style-border.th-btn-icon:after {
    filter: brightness(0) invert(1);
}

/* ================================================================
   BLOG ARCHIVE / SINGLE POST
   ================================================================ */
.th-blog.blog-single .blog-title a {
    color: var(--title-color);
}
.th-blog.blog-single .blog-title a:hover {
    color: #E85D04;
}
.blog-details .blog-content blockquote {
    background: #FBF7F3;
}

/* Sidebar "Recent Posts" — long titles had no height limit and could
   run to 4-5 lines, throwing off the widget's rhythm. Clamp to 2. */
.recent-post .post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* ================================================================
   SINGLE POST — headings 30% smaller (base h1 48px/h2 48px/h3 36px
   were sized for generic page titles, too large for an article body).
   ================================================================ */
body.single .breadcumb-title {
    font-size: 34px;
}
@media (max-width: 575px) {
    body.single .breadcumb-title {
        font-size: 24px;
    }
}
.blog-details .blog-content h2 {
    font-size: 34px;
}
.blog-details .blog-content h3 {
    font-size: 25px;
}

/* ================================================================
   TEAM PAGE
   .team-card.style3 .team-img img has height:auto by design, so
   photos with different source aspect ratios (owner.jpg is a tall
   portrait crop, team_2_*.png are closer to square) render as
   uneven card heights in the grid. Force a consistent crop.
   ================================================================ */
.th-team.team-card.style3 .team-img img {
    height: 360px;
    width: 100%;
    object-fit: cover;
}

/* ================================================================
   ABOUT US — template's real About Area (about.html) reused: the
   .img-box1/.img-shine image pair and .about-wrap1 big statement
   text. The template's own .about-tag badge is skipped — its
   rotating circular text (.circle-title-anime) needs a jQuery
   "lettering" plugin this theme never enqueues; the homepage's
   already-working .owner-badge chip stands in for it instead.
   ================================================================ */
.about-wrap1-badge { position: static !important; display: inline-flex; margin-bottom: 24px; }

/* .service-card (about.html's 3-pillar "Service Area") ships with
   white title/body text and no card background — built for a dark
   section, but the About page demo drops it on .bg-smoke3 (a light
   cream, #FFF5EB), leaving the text invisible. Not used elsewhere in
   this theme, so fix it in place rather than fork a variant. */
.service-card .box-title a { color: var(--title-color); }
.service-card .box-text { color: #4A4A4A; opacity: 1; }

/* ================================================================
   PROJECTS PAGE — per-card image slider + lightbox
   Each card gets its own independent Swiper instance (theme's
   generic .th-slider auto-init in main.js creates one per matched
   element) and its own magnificPopup gallery (scoped in functions.php
   so clicking through the lightbox only cycles that project's own
   photos, not every project on the page).
   ================================================================ */
.mb-project-gallery {
    position: relative;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}
.mb-project-slider,
.mb-project-slider .swiper-slide {
    height: 250px;
}
.mb-project-slider img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    cursor: zoom-in;
}
.mb-project-slider .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.6;
    width: 7px; height: 7px;
}
.mb-project-slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: #ff6600;
}
.mb-slider-btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.85);
    color: #1a1a1a;
    border: none;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.mb-project-gallery:hover .mb-slider-btn { opacity: 1; }
.mb-slider-btn:hover { background: #ff6600; color: #fff; }
.mb-slider-btn.mb-slider-prev { left: 14px; }
.mb-slider-btn.mb-slider-next { right: 14px; }
@media (max-width: 767px) {
    .mb-slider-btn { opacity: 1; }
}

/* Category badge + photo count, overlaid on the card's image slider. */
.mb-project-badge {
    position: absolute;
    z-index: 4;
    top: 14px; left: 14px;
    max-width: calc(100% - 28px);
    background: rgba(255,255,255,0.95);
    color: #1a1a1a;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 7px 14px;
    border-radius: 99px;
    box-shadow: 0 4px 14px rgba(17,17,17,0.14);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-photo-count {
    position: absolute;
    z-index: 4;
    top: 14px; right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(23,23,23,0.65);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 99px;
}

/* Compact single-line spec strip — replaces a tall detail list.
   Category already shows as the badge on the image, so this only
   needs the 3 remaining facts, icon + text, no card chrome. */
.project-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(17,17,17,0.08);
}
.project-meta-row .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #4A4A4A;
}
.project-meta-row .meta-item i { color: #ff6600; font-size: 13px; }

/* ================================================================
   PROJECTS PAGE — filter bar
   ================================================================ */
.mb-project-filters {
    background: #FBF7F3;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 40px;
}
.mb-filter-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    margin-bottom: 8px;
}
.mb-project-filters .form-select {
    border-radius: 10px;
    border-color: rgba(17,17,17,0.12);
    padding: 12px 16px;
    font-size: 14px;
    height: auto;
}
.mb-project-filters .form-select:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 0.2rem rgba(255,102,0,0.15);
}
.mb-project-filters .th-btn { padding: 12px 24px; }
.mb-filter-reset {
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    color: #888;
    text-decoration: underline;
}
.mb-filter-reset:hover { color: #ff6600; }

/* Single project page — larger hero slider variant of the card slider. */
.mb-project-gallery-lg,
.mb-project-slider-lg,
.mb-project-slider-lg .swiper-slide {
    border-radius: 12px;
}
.mb-project-slider-lg,
.mb-project-slider-lg .swiper-slide {
    height: 480px;
}
@media (max-width: 575px) {
    .mb-project-slider-lg,
    .mb-project-slider-lg .swiper-slide {
        height: 280px;
    }
}

/* paginate_links() renders WP core's own "prev"/"next" classes (plus
   "page-numbers"), not the theme's static-template classes
   ".prev-page"/".next-page" that the pill styling below is keyed to —
   so "Previous"/"Next" fell through to the generic 48x48 circular
   number style and overflowed it. Give the real classes the same
   pill treatment. */
.th-pagination a.prev,
.th-pagination a.next,
.th-pagination span.prev,
.th-pagination span.next {
    width: auto;
    padding: 0 24px;
    border-radius: 30px;
    line-height: 46px;
}

/* ================================================================
   SERVICES PAGE — card redesign v2
   Ditched the floating icon-circle straddling the image seam (read
   as a generic, dated bootstrap-card cliché). Adapted instead from
   the template's own .portfolio-card.style3 interaction — image
   darkens on hover and reveals a centered icon + label — which
   already exists elsewhere in this theme's CSS. Whole-card hover
   lift kept; footer link+arrow kept for a visible affordance on
   touch devices that never trigger :hover.
   ================================================================ */
.service-grid-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.service-grid-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(17,17,17,0.12);
}
.service-card-thumb {
    position: relative;
    display: block;
}
.service-card-thumb:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(10,10,10,0.72);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.service-grid-card:hover .service-card-thumb:before {
    opacity: 1;
}
.service-card-reveal {
    position: absolute;
    z-index: 2;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    text-align: center;
}
.service-grid-card:hover .service-card-reveal {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.service-card-reveal-icon {
    width: 58px; height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.65);
    border-radius: 50%;
    font-size: 22px;
    transition: background 0.35s ease, border-color 0.35s ease;
}
.service-grid-card:hover .service-card-reveal-icon {
    background: #ff6600;
    border-color: #ff6600;
}
.service-card-reveal-text {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.service-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(17,17,17,0.08);
}
.service-card-link {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.service-grid-card:hover .service-card-link,
.service-card-link:hover {
    color: #ff6600;
}

/* ================================================================
   SERVICE DETAIL PAGE — content typography
   the_content() renders plain <ul><li> from the editor; give it the
   same branded checkmark used by .checklist.style5 everywhere else
   on the site, and round embedded image corners to match the site's
   card radius convention instead of square WP default images.
   ================================================================ */
.page-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 24px;
}
.page-content ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--title-color);
}
.page-content ul li:not(:last-child) {
    margin-bottom: 12px;
}
.page-content ul li:before {
    content: url(../img/icon/checkmark.svg);
    position: relative;
    top: 2px;
    flex-shrink: 0;
}
.page-content img {
    border-radius: 24px;
}

/* ================================================================
   CONTACT PAGE — info cards
   .info-box_text.style-border was applied with no matching CSS
   anywhere in the theme (no background, no border, no icon
   treatment) — it rendered as bare text with a tiny dark icon
   floating above it. Give it a real card and the orange icon-circle
   used everywhere else on the site.
   ================================================================ */
.info-box_text.style-border {
    background: #fff;
    border: 1px solid rgba(17,17,17,0.08);
    box-shadow: 0 8px 24px rgba(17,17,17,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-box_text.style-border:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(17,17,17,0.1);
}
.info-box_text.style-border .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(255,102,0,0.1);
    color: #ff6600;
    font-size: 22px;
}

/* This theme's bundled Bootstrap only ships .rounded-0 through
   .rounded-3 (max 0.3rem) — Bootstrap 5.1's larger .rounded-4/.rounded-5
   utilities were never included, so every "rounded-4" class used
   around the site (matching the 24px card-radius convention used
   everywhere else) has been silently doing nothing. Define it to
   match. */
.rounded-4 {
    border-radius: 24px !important;
}

/* ================================================================
   HEADER — border-bottom cut off on inner pages
   .header-layout3 is positioned "left: 80px" — that 80px gap is
   meant to be filled by the .sidebar-btn.style3 button, but
   header.php only renders that button on the front page
   (is_front_page() check). On every other page the gap is empty,
   so the header's border-bottom visibly stops 80px short of the
   true left edge instead of spanning full width. (The scrolled/
   sticky state is unaffected — .sticky-wrapper.sticky switches to
   position:fixed; left:0, which already spans the full viewport.)
   ================================================================ */
body:not(.home) .header-layout3:before {
    content: "";
    position: absolute;
    left: -80px;
    bottom: 0;
    width: 80px;
    height: 1px;
    background: rgba(255,255,255,0.2);
}

/* ================================================================
   CONTACT FORM 7 — field icon alignment
   This theme's ".form-group > i" icon-positioning rules (base,
   style-radius, the col- width offset, etc.) all require the icon
   to be a DIRECT child of .form-group. CF7 auto-wraps every field
   in its own <p> (wpautop-style formatting), so the icon ends up
   nested inside that <p> instead — the ">" rules silently stop
   matching and the icons collapse to the default static position.
   Recreate the same positioning with descendant selectors, scoped
   to CF7-rendered forms only so other on-site forms (header/footer
   newsletter, etc.) that rely on the real direct-child markup are
   untouched.
   ================================================================ */
.wpcf7-form .form-group p {
    margin: 0;
}
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}
.wpcf7-form .form-group i {
    display: inline-block;
    position: absolute;
    right: 25px;
    top: 16px;
    font-size: 16px;
    color: var(--body-color);
    pointer-events: none;
}
.wpcf7-form .form-group.style-radius i {
    top: 22px;
}
.wpcf7-form [class*="col-"].form-group i {
    right: calc(var(--bs-gutter-x) / 2 + 25px);
}

/* ================================================================
   SELECT DROPDOWN — branded chevron + focus state
   Bootstrap's .form-select already draws its own arrow (a dark SVG
   chevron baked into background-image) — the form previously
   layered a second, redundant Font Awesome angle-down icon on top
   of it. Drop the duplicate and recolor Bootstrap's own arrow to
   the brand orange instead of reinventing it.
   ================================================================ */
.form-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ff6600' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 14px 11px !important;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-select:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 0 3px rgba(255,102,0,0.12) !important;
    outline: none;
}
.form-control:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 0 3px rgba(255,102,0,0.12) !important;
}

/* ================================================================
   CUSTOM BRANDED DROPDOWN
   A native <select>'s open option list renders via the OS/browser
   and can't be meaningfully styled — assets/js/custom.js
   progressively enhances every .form-select into this trigger +
   panel, keeping the real <select> in the DOM (visually hidden,
   pointer-events:none) so form submission/validation is untouched.
   The .form-select CSS above stays as a no-JS/pre-hydration
   fallback (still shows a correctly branded native dropdown).
   ================================================================ */
.mb-select-wrap {
    position: relative;
}
.mb-select-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.mb-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 50px;
    padding: 0 45px 0 25px;
    background-color: transparent;
    border: 1px solid var(--th-border-color);
    border-radius: 30px;
    color: var(--body-color);
    font-size: 16px;
    font-family: var(--body-font);
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.mb-select-trigger:after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #ff6600;
    border-bottom: 2px solid #ff6600;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
}
.mb-select-wrap.is-open .mb-select-trigger:after {
    transform: translateY(-30%) rotate(-135deg);
}
.mb-select-wrap.is-open .mb-select-trigger,
.mb-select-trigger:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 3px rgba(255,102,0,0.12);
    outline: none;
}
.mb-select-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(17,17,17,0.14);
    max-height: 240px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.mb-select-wrap.is-open .mb-select-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mb-select-panel li {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    color: var(--title-color, #1a1a1a);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.mb-select-panel li:hover {
    background: rgba(255,102,0,0.08);
    color: #ff6600;
}
.mb-select-panel li.is-active {
    background: #ff6600;
    color: #fff;
    font-weight: 600;
}

/* Contact-form pill context — matches the real .form-select sizing
   this trigger replaces in .form-group.style-radius. */
.form-group.style-radius .mb-select-trigger {
    height: 60px;
    border-radius: 50px;
}

/* Projects-page filter context — matches .mb-project-filters .form-select. */
.mb-project-filters .mb-select-trigger {
    height: auto;
    min-height: 46px;
    border-radius: 10px;
    border-color: rgba(17,17,17,0.12);
    padding: 12px 40px 12px 16px;
    font-size: 14px;
}
.mb-project-filters .mb-select-wrap.is-open .mb-select-trigger,
.mb-project-filters .mb-select-trigger:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 0.2rem rgba(255,102,0,0.15);
}