/* HaoboChain V1.0.15.3 brand system
   Brand gold is used as an accent rather than a page fill so the site keeps a premium industrial tone. */
:root {
  --haobo-gold: #fabe00;
  --haobo-gold-hover: #e6ad00;
  --haobo-gold-deep: #b77f00;
  --haobo-gold-soft: #fff8df;
  --haobo-ink: #17191d;
  --haobo-ink-2: #23262c;
  --haobo-text: #24272c;
  --haobo-muted: #6f747c;
  --haobo-surface: #f7f7f4;
  --haobo-border: #e6e3da;
  --theme-color1: #17191d;
  --theme-color1-rgb: 23, 25, 29;
  --theme-color2: #fabe00;
  --theme-color2-rgb: 250, 190, 0;
  --theme-color3: #23262c;
  --theme-color3-rgb: 35, 38, 44;
  --theme-color4: #d6a100;
  --theme-color4-rgb: 214, 161, 0;
}

body {
  color: var(--haobo-text);
  background: #fff;
}

a { color: #775b00; }
a:hover, a:focus { color: var(--haobo-ink); }

/* Header: dark industrial base + restrained gold accent. */
header#header .header-top {
  background: #111317 !important;
  color: #d8dbe0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
header#header .header-top .contact-info li .font-icon,
header#header .header-top .styled-icons li a i {
  color: var(--haobo-gold) !important;
}
header#header .header-top .element:not(.styled-icons) a:not(.btn) {
  color: #eef0f2 !important;
}
header#header .header-top .contact-info li:not(:first-child):before {
  background: rgba(255,255,255,.24) !important;
}
header#header .header-nav,
header#header .header-nav .header-nav-wrapper,
header#header .header-nav .header-nav-container,
header#header .header-nav .menuzord-container {
  background: var(--haobo-ink) !important;
}
header#header .header-nav .header-nav-container {
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
header#header .menuzord-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  line-height: 1;
}
header#header .menuzord-brand img {
  max-height: 25px;
  max-width: 178px;
  object-fit: contain;
}
header#header .site-brand-company {
  display: block;
  margin: 0;
  color: var(--haobo-gold);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
#top-primary-nav .menuzord-menu > li > a,
#top-primary-nav-clone .menuzord-menu > li > a {
  color: #f5f5f3 !important;
  font-weight: 600;
  letter-spacing: .01em;
}
#top-primary-nav .menuzord-menu > li:hover > a,
#top-primary-nav .menuzord-menu > li.active > a,
#top-primary-nav-clone .menuzord-menu > li:hover > a,
#top-primary-nav-clone .menuzord-menu > li.active > a {
  color: var(--haobo-gold) !important;
}
#top-primary-nav .menuzord-menu > li > a:after,
#top-primary-nav-clone .menuzord-menu > li > a:after {
  background: var(--haobo-gold) !important;
}
#top-primary-nav .menuzord-menu ul.dropdown,
#top-primary-nav-clone .menuzord-menu ul.dropdown {
  border: 1px solid var(--haobo-border);
  box-shadow: 0 18px 42px rgba(0,0,0,.14);
}
#top-primary-nav .menuzord-menu ul.dropdown li a,
#top-primary-nav-clone .menuzord-menu ul.dropdown li a {
  color: #34363a;
  background: #fff;
}
#top-primary-nav .menuzord-menu ul.dropdown li:hover > a,
#top-primary-nav-clone .menuzord-menu ul.dropdown li:hover > a {
  background: var(--haobo-gold-soft) !important;
  color: #17191d !important;
}
#top-primary-nav .menuzord-menu ul.dropdown li a:after,
#top-primary-nav-clone .menuzord-menu ul.dropdown li a:after {
  background: var(--haobo-gold) !important;
}
.menuzord .showhide em { background: #f5f5f3 !important; }

/* V1.0.15.3: strengthen the brand gold without turning the navigation into a heavy yellow pill. */
header#header .header-nav,
header#header .header-nav .header-nav-wrapper {
  border-bottom: 3px solid var(--haobo-gold) !important;
}
header#header .header-top .btn,
header#header .header-top .btn-theme-colored2 {
  background: var(--haobo-gold) !important;
  border-color: var(--haobo-gold) !important;
  color: var(--haobo-ink) !important;
  box-shadow: none !important;
}
header#header .header-top .btn:hover,
header#header .header-top .btn-theme-colored2:hover {
  background: #ffd13a !important;
  border-color: #ffd13a !important;
  color: #111317 !important;
}

/* Desktop first-level navigation: text + slim underline, never a filled capsule. */
@media (min-width: 1200px) {
  #top-primary-nav.menuzord .menuzord-menu > li > a,
  #top-primary-nav-clone.menuzord .menuzord-menu > li > a,
  #top-primary-nav.menuzord.theme-color2 .menuzord-menu > li > a,
  #top-primary-nav-clone.menuzord.theme-color2 .menuzord-menu > li > a {
    background: transparent !important;
    color: #f5f5f3 !important;
    border-radius: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-shadow: inset 0 0 0 transparent !important;
    transition: color .18s ease, box-shadow .18s ease !important;
  }

  #top-primary-nav.menuzord .menuzord-menu > li:hover > a,
  #top-primary-nav.menuzord .menuzord-menu > li.active > a,
  #top-primary-nav-clone.menuzord .menuzord-menu > li:hover > a,
  #top-primary-nav-clone.menuzord .menuzord-menu > li.active > a,
  #top-primary-nav.menuzord.theme-color2 .menuzord-menu > li:hover > a,
  #top-primary-nav.menuzord.theme-color2 .menuzord-menu > li.active > a,
  #top-primary-nav-clone.menuzord.theme-color2 .menuzord-menu > li:hover > a,
  #top-primary-nav-clone.menuzord.theme-color2 .menuzord-menu > li.active > a {
    background: transparent !important;
    color: var(--haobo-gold) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 -3px 0 var(--haobo-gold) !important;
  }

  #top-primary-nav .menuzord-menu > li > a .indicator,
  #top-primary-nav-clone .menuzord-menu > li > a .indicator {
    color: inherit !important;
  }
}

/* Dropdowns use a small gold rail instead of a full yellow block. */
#top-primary-nav .menuzord-menu ul.dropdown li > a,
#top-primary-nav-clone .menuzord-menu ul.dropdown li > a {
  border-left: 3px solid transparent !important;
  color: #34363a !important;
  background: #fff !important;
}
#top-primary-nav .menuzord-menu ul.dropdown li:hover > a,
#top-primary-nav .menuzord-menu ul.dropdown li.active > a,
#top-primary-nav-clone .menuzord-menu ul.dropdown li:hover > a,
#top-primary-nav-clone .menuzord-menu ul.dropdown li.active > a {
  border-left-color: var(--haobo-gold) !important;
  background: #fffaf0 !important;
  color: #17191d !important;
}
#top-primary-nav .menuzord-menu ul.dropdown li:hover > a .indicator,
#top-primary-nav .menuzord-menu ul.dropdown li.active > a .indicator,
#top-primary-nav-clone .menuzord-menu ul.dropdown li:hover > a .indicator,
#top-primary-nav-clone .menuzord-menu ul.dropdown li.active > a .indicator {
  color: var(--haobo-gold-deep) !important;
}

/* More visible brand cues across the page, still restrained. */
header#header .nav-side-icon-list li a:hover i,
header#header .nav-side-icon-list li a:focus i {
  color: var(--haobo-gold) !important;
}
.tm-page-title-elementor .title,
.page-title .title,
.section-title .title em,
.section-title .title span.text-theme-colored2 {
  color: var(--haobo-gold-deep) !important;
}
footer#footer {
  border-top: 3px solid var(--haobo-gold);
}

/* Brand actions: gold stays concentrated on CTA, dark ink remains the structural color. */
.btn-theme-colored1,
.btn.bg-theme-colored1,
.bg-theme-colored1 {
  background-color: var(--haobo-ink) !important;
  border-color: var(--haobo-ink) !important;
  color: #fff !important;
}
.btn-theme-colored1:hover,
.btn-theme-colored1:focus,
.bg-hover-theme-colored1:hover {
  background-color: #2a2d33 !important;
  border-color: #2a2d33 !important;
  color: #fff !important;
}
.btn-theme-colored2,
.btn.bg-theme-colored2 {
  background-color: var(--haobo-gold) !important;
  border-color: var(--haobo-gold) !important;
  color: #17191d !important;
  box-shadow: none !important;
}
.btn-theme-colored2:hover,
.btn-theme-colored2:focus,
.bg-hover-theme-colored2:hover {
  background-color: var(--haobo-gold-hover) !important;
  border-color: var(--haobo-gold-hover) !important;
  color: #17191d !important;
}
.text-theme-colored1 { color: var(--haobo-ink) !important; }
.text-theme-colored2 { color: var(--haobo-gold-deep) !important; }
.border-theme-colored1, .border-1px-theme-colored1 { border-color: var(--haobo-ink) !important; }
.border-theme-colored2, .border-1px-theme-colored2 { border-color: var(--haobo-gold) !important; }

/* Large blocks use a deeper ochre instead of the raw logo yellow. */
.bg-theme-colored2 { background-color: #d8a300 !important; }
.bg-theme-colored3 { background-color: var(--haobo-ink-2) !important; }
.layer-overlay.overlay-theme-colored2::before { background-color: rgba(197,145,0,.88) !important; }
.layer-overlay.overlay-theme-colored2-9::before { background-color: rgba(177,130,0,.90) !important; }
.layer-overlay.overlay-theme-colored2-8::before { background-color: rgba(177,130,0,.80) !important; }
.layer-overlay.overlay-theme-colored2-7::before { background-color: rgba(177,130,0,.70) !important; }

/* Reusable visual details. */
.section-title .both-side-line::after,
.section-title .both-side-line::before,
.section-title .top-side-line::after,
.section-title .left-side-line::before,
.section-title .right-side-line::before,
.small-title .title::after,
.title-line-top:before,
.progress-item .progress-bar,
.owl-theme .owl-dots .owl-dot.active span {
  background: var(--haobo-gold) !important;
}
.section-title.title-border { border-left-color: var(--haobo-gold) !important; }
.widget .line-bottom:after { border-color: var(--haobo-gold) !important; }

/* Cards and product/content surfaces stay calm and neutral. */
.service-item,
.product,
.tm-sc-blog article,
.tm-sc-project .tm-project,
.tm-sc-team-member,
.icon-box {
  border-color: var(--haobo-border);
}
.main-content-area section.bg-silver-light,
.bg-silver-light {
  background-color: var(--haobo-surface) !important;
}

/* Footer. */
footer#footer {
  background-color: var(--haobo-ink) !important;
}
footer#footer:before { background: rgba(23,25,29,.92) !important; }
.roofting_footer_widgets .widget .tm-widget-contact-info .description,
.roofting_footer_widgets .widget.widget_nav_menu ul li a,
.roofting_footer_widgets .footer-bottom .footer-paragraph,
footer#footer .contact-info {
  color: #b7bbc2 !important;
}
footer#footer .widget-title,
footer#footer .post-title a {
  color: #fff !important;
}
footer#footer .widget-title:after,
footer#footer .widget-title:before {
  background: var(--haobo-gold) !important;
}
footer#footer a:hover,
footer#footer .widget.widget_nav_menu ul li a:hover {
  color: var(--haobo-gold) !important;
}

.pagination li.active {
  background: var(--haobo-ink) !important;
  border-color: var(--haobo-ink) !important;
  color: #fff !important;
}
.scrollToTop {
  background: var(--haobo-gold) !important;
  color: var(--haobo-ink) !important;
}
.scrollToTop:hover { background: var(--haobo-gold-hover) !important; }

/* Mobile keeps the same hierarchy without turning the whole menu yellow. */
@media (max-width: 1199.98px) {
  header#header .header-nav .header-nav-col-row {
    background: var(--haobo-ink);
  }
  #top-primary-nav-clone .menuzord-menu {
    background: var(--haobo-ink);
  }
  #top-primary-nav-clone .menuzord-menu ul.dropdown li a {
    background: #1f2227;
    color: #e8e9eb;
    border-bottom-color: #34373d;
  }
  #top-primary-nav-clone .menuzord-menu > li > a {
    background: transparent !important;
    color: #f2f3f4 !important;
    border-radius: 0 !important;
  }
  #top-primary-nav-clone .menuzord-menu > li:hover > a,
  #top-primary-nav-clone .menuzord-menu > li.active > a {
    background: #20242a !important;
    color: var(--haobo-gold) !important;
    box-shadow: inset 3px 0 0 var(--haobo-gold) !important;
  }
  #top-primary-nav-clone .menuzord-menu ul.dropdown li:hover > a,
  #top-primary-nav-clone .menuzord-menu ul.dropdown li.active > a {
    background: #2a2d33 !important;
    color: var(--haobo-gold) !important;
    border-left-color: var(--haobo-gold) !important;
  }
}

@media (max-width: 991.98px) {
  header#header .menuzord-brand {
    gap: 12px;
  }
  header#header .menuzord-brand img {
    max-width: 155px !important;
    max-height: 26px !important;
  }
  header#header .site-brand-company {
    font-size: 18px;
  }
}

@media (max-width: 575.98px) {
  header#header .menuzord-brand {
    gap: 10px;
    max-width: calc(100vw - 72px);
  }
  header#header .menuzord-brand img {
    max-width: 118px !important;
    max-height: 20px !important;
    flex: 0 0 auto;
  }
  header#header .site-brand-company {
    max-width: 210px;
    font-size: 13px;
    line-height: 1.1;
    white-space: normal;
  }
  header#header .header-top {
    font-size: 14px;
  }
}

/* ThemeMascot icon helpers used by the current templates. */
.icon-theme-colored2 a,
.icon-theme-colored4 a,
.styled-icons.icon-theme-colored2 a,
.styled-icons.icon-theme-colored4 a {
  color: var(--haobo-gold-deep) !important;
}
.icon-hover-theme-colored2 a:hover,
.icon-hover-theme-colored4 a:hover,
.styled-icons.icon-hover-theme-colored2 a:hover,
.styled-icons.icon-hover-theme-colored4 a:hover {
  background-color: var(--haobo-gold) !important;
  border-color: var(--haobo-gold) !important;
  color: var(--haobo-ink) !important;
}
.tm-widget-contact-info.contact-icon-theme-colored2 li .icon i,
.tm-widget-contact-info.contact-icon-theme-colored4 li .icon i {
  color: var(--haobo-gold) !important;
}