/* CodeGraphics brand palette overrides (from https://www.codegraphics.co.tz/) */
:root {
  --theme: #ff6b00;
  --theme2: #fff8f0;
  --theme3: #f4f7fb;
  --title: #051634;
  --header: #051634;
  --orange: #ff6b00;
  --text: #5b6472;
  --bg-1: #0d151c;
  --bg-2: #f4f7fb;
  --brand-navy: #051634;
  --brand-navy-2: #12223e;
  --brand-orange: #ff6b00;
  --brand-orange-dark: #e05f00;
  --brand-cream: #fff8f0;
}

/* Ensure brand logo sizing stays clean in header/footer */
.header-logo img,
.offcanvas__logo img,
.footer-logo img,
.footer-wrapper .logo img,
.widget-head img {
  max-height: 56px;
  width: auto;
}

.preloader .txt-loading .letters-loading {
  color: var(--theme);
}

.preloader .animation-preloader .txt-loading {
  font-size: 3.2em;
}

@media (max-width: 767px) {
  .preloader .animation-preloader .txt-loading {
    font-size: 1.6em;
  }
}

.preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before {
  animation-delay: 1.6s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(10):before {
  animation-delay: 1.8s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(11):before {
  animation-delay: 2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(12):before {
  animation-delay: 2.2s;
}

/* Once dismiss starts, never block nav/CTA clicks if fadeOut stalls */
.preloader.loaded {
  pointer-events: none;
}

/* Inner-page header sits on dark banner: light icons/links for contrast */
.header-on-dark .header-main .main-menu ul li a {
  color: #ffffff !important;
}

.header-on-dark .header-main .main-menu ul li.active > a,
.header-on-dark .header-main .main-menu ul li a:hover {
  color: var(--theme) !important;
}

.header-on-dark .header-main .header-right .search-icon,
.header-on-dark .header-main .header-right .sidebar__toggle,
.header-on-dark .header-main .header-right .sidebar__toggle i {
  color: #ffffff !important;
}

/* Sticky white header restores dark nav */
.header-on-dark #header-sticky.sticky .header-main .main-menu ul li a {
  color: var(--title) !important;
}

.header-on-dark #header-sticky.sticky .header-main .main-menu ul li.active > a,
.header-on-dark #header-sticky.sticky .header-main .main-menu ul li a:hover {
  color: var(--theme) !important;
}

.header-on-dark #header-sticky.sticky .header-main .header-right .search-icon,
.header-on-dark #header-sticky.sticky .header-main .header-right .sidebar__toggle,
.header-on-dark #header-sticky.sticky .header-main .header-right .sidebar__toggle i {
  color: var(--title) !important;
}

/* Inner page banner: room below crumbs, not flush to next section */
.page-banner {
  background: linear-gradient(135deg, #051634 0%, #12223e 55%, #ff6b00 160%);
  padding: 170px 0 120px;
  margin-bottom: 0;
}

.page-banner__eyebrow {
  color: var(--theme);
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-block;
  margin-bottom: 12px;
}

.page-banner__title {
  color: #fff;
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .page-banner {
    padding: 140px 0 80px;
  }

  .page-banner__title {
    font-size: 36px;
  }
}

.page-banner__crumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #fff;
}

.page-banner__crumbs a {
  color: #fff;
  font-weight: 500;
}

.page-banner__crumbs a:hover {
  color: var(--theme);
}

.page-banner__sep {
  opacity: 0.7;
}

.page-banner__current {
  color: var(--theme);
  font-weight: 600;
}

/* First content after banner was flush (about had 0 padding) */
.page-banner + section {
  padding-top: 100px;
}

@media (max-width: 991px) {
  .page-banner + section {
    padding-top: 80px;
  }
}

@media (max-width: 575px) {
  .page-banner + section {
    padding-top: 60px;
  }
}

/* Contact form select matches input styling */
.contact-form.style1 .contact-form-items .form-clt select {
  width: 100%;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 18px 20px;
  border-radius: 5px;
  background: #fff;
  appearance: auto;
}

/* CTA is orange; quote button needs contrast against that container */
.cta-wrapper.style1 .cta-quote-btn {
  background: #ffffff !important;
  color: var(--title) !important;
  border: 1px solid #ffffff;
}

.cta-wrapper.style1 .cta-quote-btn span,
.cta-wrapper.style1 .cta-quote-btn i {
  color: var(--title) !important;
}

.cta-wrapper.style1 .cta-quote-btn:before {
  background: var(--title);
}

.cta-wrapper.style1 .cta-quote-btn:hover,
.cta-wrapper.style1 .cta-quote-btn:hover span,
.cta-wrapper.style1 .cta-quote-btn:hover i {
  color: #ffffff !important;
}