/*
 * Voltx Services — Colour & Branding Overrides
 * Loaded AFTER style.css to restyle the Beuns template
 * Navy / Steel / Red security-industry palette
 */

/* ─── 1. Root Variables ─── */
:root {
  /* Override template colours */
  --color-primary: #C53030;
  --color-black: #0F2137;
  --color-black-dark: #0A1929;

  /* Voltx extended palette */
  --voltx-navy: #0F2137;
  --voltx-navy-light: #1B3A5C;
  --voltx-charcoal: #1A202C;
  --voltx-slate: #2D3748;
  --voltx-steel: #4A5568;
  --voltx-grey: #718096;
  --voltx-light: #F7FAFC;
  --voltx-red: #C53030;
  --voltx-red-dark: #9B2C2C;
  --voltx-red-hover: #E53E3E;
  --voltx-white: #FFFFFF;
  --voltx-gold: #D69E2E;
}

/* ─── 2. Body & Typography ─── */
body {
  color: var(--voltx-slate);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--voltx-charcoal);
}

/* Dark-background headings stay white */
.bg_black h1, .bg_black h2, .bg_black h3, .bg_black h4, .bg_black h5, .bg_black h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.why_choose_us__header h1, .why_choose_us__header h2, .why_choose_us__header h3 {
  color: var(--voltx-white);
}

/* ─── 3. Background Classes ─── */
.bg_black {
  background-color: var(--voltx-navy) !important;
}

.bg_gray {
  background-color: var(--voltx-light) !important;
}

/* ─── 4. Header ─── */
.header {
  background-color: var(--voltx-navy);
}

.header__main {
  background-color: var(--voltx-navy) !important;
}

.header.fixed_top {
  background-color: var(--voltx-navy);
  box-shadow: 0 2px 20px rgba(15, 33, 55, 0.3);
}

.header-06.fixed_top {
  background-color: var(--voltx-navy);
}

/* ─── 5. Hero ─── */
.hero .slide::before {
  background-color: var(--voltx-navy);
}

.hero.hero_01 .slide::before {
  opacity: 0.85;
}

/* ─── 6. Buttons ─── */
a.btn_black,
button.btn_black {
  background: var(--voltx-navy);
  color: var(--voltx-white) !important;
}

a.btn_black span,
button.btn_black span {
  color: var(--voltx-white) !important;
}

a.btn_black::before,
button.btn_black::before {
  background-color: var(--voltx-red);
}

a.btn_black:hover,
button.btn_black:hover {
  color: var(--voltx-white);
}

a.btn_red,
button.btn_red {
  background: var(--voltx-red);
  color: var(--voltx-white) !important;
}

a.btn_red span,
button.btn_red span {
  color: var(--voltx-white) !important;
}

a.btn_red::before,
button.btn_red::before {
  background-color: var(--voltx-navy);
}

a.btn_red:hover,
button.btn_red:hover {
  color: var(--voltx-white);
}

/* View more / arrow link buttons */
a.vm_btn {
  color: var(--voltx-charcoal);
}

a.vm_btn:hover {
  color: var(--voltx-red);
}

/* ─── 7. Accent Elements ─── */
/* Tab active states */
.why_choose_us__body .tabs__item.active,
.nav-tabs .nav-link.active {
  border-color: var(--voltx-red) !important;
  color: var(--voltx-charcoal);
}

/* Progress bars */
.progress_bar__progress {
  background-color: var(--voltx-red) !important;
}

/* Services card icons hover tint */
.service_item:hover {
  border-color: var(--voltx-red);
}

/* ─── 8. Footer ─── */
.footer__top {
  background-color: var(--voltx-navy) !important;
}

.footer__end {
  background-color: var(--voltx-charcoal) !important;
}

.footer .footer_l .brand_link {
  color: var(--voltx-red);
}

/* Footer link hover */
.footer .footer_l:hover {
  color: var(--voltx-red);
}

/* ─── 9. CTA / Banner Section ─── */
.cta__wrapper {
  background-image: none !important;
  background: linear-gradient(135deg, var(--voltx-navy) 0%, var(--voltx-navy-light) 100%) !important;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.cta__wrapper .content {
  position: relative;
  z-index: 2;
}

.cta__wrapper .content {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  width: 80% !important;
}

.cta__wrapper .content .cta_title {
  color: var(--voltx-white) !important;
  padding-right: 0 !important;
  font-size: 48px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

@media only screen and (max-width: 767px) {
  .cta__wrapper .content {
    width: 90% !important;
  }
  .cta__wrapper .content .cta_title {
    font-size: 28px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__wrapper .content .cta_title {
    font-size: 32px !important;
  }
}

.cta__wrapper .digital {
  color: rgba(255, 255, 255, 0.06) !important;
}

.cta__wrapper .vm_btn.btn_black {
  background: var(--voltx-red) !important;
  color: var(--voltx-white) !important;
}

.cta__wrapper .vm_btn.btn_black::before {
  background-color: var(--voltx-red-dark) !important;
}

.cta__wrapper .vm_btn.btn_black span {
  color: var(--voltx-white) !important;
}

/* ─── 10. Scrolling Ticker Strip ─── */
.partner_section,
.marquee_section {
  background-color: var(--voltx-navy) !important;
}

/* ─── 11. Why Choose Us Section ─── */
.why_choose_us__header {
  background-color: var(--voltx-navy) !important;
}

.why_choose_us__body {
  background-color: var(--voltx-light) !important;
}

/* ─── 12. Section Tags & Labels ─── */
.section_tag,
.section__top .tag {
  color: var(--voltx-red);
}

/* ─── 13. Swiper Pagination Bullets ─── */
.swiper-pagination-bullet-active,
.slider_pagination__item .swiper-pagination-bullet-active {
  background-color: var(--voltx-red) !important;
}

/* ─── 14. Selection Highlight ─── */
::selection {
  background-color: var(--voltx-red);
  color: var(--voltx-white);
}

::-moz-selection {
  background-color: var(--voltx-red);
  color: var(--voltx-white);
}

/* ─── 15. Scroll-to-Top Button ─── */
.backto_top {
  background-color: var(--voltx-red);
  color: var(--voltx-white);
}

.backto_top:hover {
  background-color: var(--voltx-red-dark);
}

/* ─── 16. Links ─── */
a:hover {
  color: var(--voltx-red);
}

/* ─── 17. Mobile Menu ─── */
.popup_mobile_menu .mobile_menu_content {
  background-color: var(--voltx-navy);
}

/* ─── 18. Breadcrumb Pages ─── */
.breadcrumb_section {
  background-color: var(--voltx-navy);
}

/* ─── 19. Stats / Counter ─── */
.about_counter .counter_item .count {
  color: var(--voltx-red);
}

/* ─── 20. Hide Non-Functional Search Button ─── */
.header_search_btn {
  display: none !important;
}

/* ─── 21. Form Focus States ─── */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--voltx-navy) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 33, 55, 0.15);
}