/* ============================================================
   ChainRules Brand Override CSS
   Brand Guide Colors:
     Primary:   #B81D25 (dark red), #E50915 (bright red), #21201E (dark)
     Secondary: #9FA1A4 (gray), #F76973 (coral)
   Fonts:
     Primary (headings): Mazzard H
     Secondary (body):   Montserrat
   ============================================================ */

/* ---- Font Face Definitions ---- */

@font-face {
  font-family: 'Mazzard H';
  src: url('fonts/mazzard/MazzardH-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mazzard H';
  src: url('fonts/mazzard/MazzardH-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   1. CSS Custom Properties Override (Root Variables)
   ============================================================ */

:root {
  /* Brand Colors */
  --thm-color: #E50915 !important;
  --thm-color-dark: #B81D25;
  --thm-color-coral: #F76973;
  --black-color: #21201E !important;
  --color-body: #4A4A4A !important;
  --white-color: #ffffff !important;
  --border-color: #E8E8E8 !important;
  --bg-color: #F5F5F5 !important;
  --footer-bg-color: #21201E !important;
  --copyright-bg: #1a1918 !important;

  /* Brand Fonts */
  --body-font: 'Montserrat', sans-serif !important;
  --heading-font: 'Mazzard H', 'Montserrat', sans-serif !important;

  /* Shadows */
  --box-shedow: 0px 9px 75px rgba(33, 32, 30, 0.08) !important;

  /* Elementor overrides */
  --e-global-color-primary: #E50915 !important;
  --e-global-color-secondary: #21201E !important;
  --e-global-color-text: #4A4A4A !important;
  --e-global-color-accent: #B81D25 !important;
}


/* ============================================================
   2. Typography - Fonts
   ============================================================ */

body {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400;
  color: #21201E;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Mazzard H', 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #21201E;
}

p, li, span, a, td, th, label, input, textarea, select, button {
  font-family: 'Montserrat', sans-serif;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: 'Montserrat', sans-serif !important;
}


/* ============================================================
   3. Buttons
   ============================================================ */

.theme-btns,
.theme-btns:visited,
a.theme-btns,
input[type="submit"],
.elementor-button,
.woocommerce a.button,
.woocommerce button.button {
  background: #E50915 !important;
  background-color: #E50915 !important;
  color: #ffffff !important;
  border: 2px solid #E50915 !important;
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease !important;
}

.theme-btns:hover,
a.theme-btns:hover,
input[type="submit"]:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: #B81D25 !important;
  background-color: #B81D25 !important;
  border-color: #B81D25 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(229, 9, 21, 0.3);
}

/* Outline/secondary button variant */
.theme-btns.btn-outline,
.theme-btns.style-two {
  background: transparent !important;
  background-color: transparent !important;
  color: #E50915 !important;
  border: 2px solid #E50915 !important;
}

.theme-btns.btn-outline:hover,
.theme-btns.style-two:hover {
  background: #E50915 !important;
  background-color: #E50915 !important;
  color: #ffffff !important;
}

/* Theme button (text link style) */
.theme-button,
.theme-button i {
  color: #E50915 !important;
}

.theme-button:hover,
.theme-button:hover i {
  color: #B81D25 !important;
}


/* ============================================================
   4. Links
   ============================================================ */

a {
  color: #21201E;
  transition: color 0.3s ease;
}

a:hover {
  color: #E50915;
}


/* ============================================================
   5. Header / Navigation
   ============================================================ */

/* Sticky header */
.sticky-wrapper.sticky .menu-area {
  background-color: #ffffff !important;
  box-shadow: 0 2px 20px rgba(33, 32, 30, 0.1);
}

.sticky-wrapper.sticky .bg-transparent {
  background-color: #21201E !important;
}

/* Navigation links */
.main-menu > ul > li > a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: #21201E !important;
  text-transform: uppercase;
  font-size: 14px !important;
  letter-spacing: 0.5px;
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.current-menu-item > a {
  color: #E50915 !important;
}

/* Dropdown */
.main-menu ul.sub-menu {
  border-top: 3px solid #E50915 !important;
}

.main-menu ul.sub-menu li a:hover {
  color: #E50915 !important;
}

/* Header button */
.header-button .theme-btns {
  background: #E50915 !important;
  border-color: #E50915 !important;
  border-radius: 6px !important;
}

.header-button .theme-btns:hover {
  background: #B81D25 !important;
  border-color: #B81D25 !important;
}

/* Mobile menu */
.tronix-menu-wrapper {
  background-color: #21201E !important;
}

.tronix-menu-toggle {
  color: #E50915 !important;
}

.tronix-mobile-menu ul li a {
  font-family: 'Montserrat', sans-serif !important;
  color: #ffffff !important;
}

.tronix-mobile-menu ul li a:hover {
  color: #E50915 !important;
}


/* ============================================================
   6. Section Titles & Headings
   ============================================================ */

.tronix-section-title,
.tronix-section-small-title,
.about-title,
.section-title {
  font-family: 'Mazzard H', 'Montserrat', sans-serif !important;
}

.tronix-section-small-title {
  color: #E50915 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px !important;
}

/* Section small title decorative elements */
.tronix-section-small-title::before,
.tronix-section-small-title::after {
  background-color: #E50915 !important;
}


/* ============================================================
   7. Service / Feature Boxes
   ============================================================ */

.tronix-service-one-item:hover,
.tronix-service-two-item:hover,
.icon-box-two-wrapper:hover,
.services-v8-box:hover {
  border-color: #E50915 !important;
}

.tronix-service-one-item:hover .tronix-service-one-icon,
.tronix-service-two-item:hover .tronix-service-two-icon {
  background-color: #E50915 !important;
  color: #ffffff !important;
}

.tronix-service-one-item .tronix-service-one-icon,
.tronix-service-two-item .tronix-service-two-icon,
.icon-box-two-wrapper .icon-box-two-icon {
  color: #E50915 !important;
}

/* Service links */
.tronix-service-one-item a:hover,
.tronix-service-two-item a:hover {
  color: #E50915 !important;
}

/* Onepage services: keep icon centered in each card */
#service .service-box.one .service-one-icon.one {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

/* Onepage services: move titles below decorative line */
#service .tronix-section-title-content {
  padding-top: 44px;
}

@media (max-width: 767px) {
  #service .tronix-section-title-content {
    padding-top: 28px;
  }
}


/* ============================================================
   8. About Section
   ============================================================ */

.tronix-about-one-content .counter-number,
.tronix-about-one-content .counter-title {
  color: #E50915 !important;
}


/* ============================================================
   9. Team Section
   ============================================================ */

.tronix-team-one-social a:hover {
  background-color: #E50915 !important;
  color: #ffffff !important;
}

.tronix-team-one-item:hover .tronix-team-one-content {
  border-color: #E50915 !important;
}


/* ============================================================
   10. Testimonial
   ============================================================ */

.tronix-testimonial-one-content .star-rating i,
.tronix-testimonial-two-content .star-rating i {
  color: #E50915 !important;
}


/* ============================================================
   11. Counter / Fun Facts
   ============================================================ */

.counter-item .counter-number,
.fun-fact-number,
.odometer {
  color: #E50915 !important;
  font-family: 'Mazzard H', 'Montserrat', sans-serif !important;
}


/* ============================================================
   12. Project / Portfolio
   ============================================================ */

.tronix-project-one-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(229, 9, 21, 0.9) 100%) !important;
}

.tronix-project-one-overlay a:hover {
  background-color: #ffffff !important;
  color: #E50915 !important;
}


/* ============================================================
   13. CTA / Call to Action Sections
   ============================================================ */

.cta-wrapper,
.inquiry-list {
  background-color: #E50915 !important;
}

.cta-wrapper:hover {
  background-color: #B81D25 !important;
}


/* ============================================================
   14. Footer
   ============================================================ */

.footer-widget-area,
.footer-one-wrapper {
  background-color: #21201E !important;
}

.footer-copyright-wrapper {
  background-color: #1a1918 !important;
}

/* Footer social icons */
.tronixcore-about-widget-social ul li a {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
}

.tronixcore-about-widget-social ul li a:hover {
  background-color: #E50915 !important;
  color: #ffffff !important;
}

/* Footer headings */
.footer-widget-area h3,
.footer-widget-area h4,
.footer-widget-area .widget-title {
  font-family: 'Mazzard H', 'Montserrat', sans-serif !important;
  color: #ffffff !important;
}

/* Footer links */
.footer-widget-area a {
  color: #9FA1A4 !important;
}

.footer-widget-area a:hover {
  color: #E50915 !important;
}

/* Footer text */
.footer-widget-area p,
.footer-widget-area li {
  color: #9FA1A4 !important;
}

/* Copyright text */
.footer-copyright-wrapper p,
.footer-copyright-wrapper a {
  color: #9FA1A4 !important;
}

.footer-copyright-wrapper a:hover {
  color: #E50915 !important;
}


/* ============================================================
   15. Scroll to Top
   ============================================================ */

.scroll-top,
.back-to-top {
  background-color: #E50915 !important;
  color: #ffffff !important;
}

.scroll-top:hover,
.back-to-top:hover {
  background-color: #B81D25 !important;
}


/* ============================================================
   16. Preloader
   ============================================================ */

.preloader-area .spinner,
.preloader-area .loader {
  border-color: #E50915 !important;
  border-top-color: transparent !important;
}


/* ============================================================
   17. Swiper / Carousel Pagination & Navigation
   ============================================================ */

.swiper-pagination-bullet-active,
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #E50915 !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: #E50915 !important;
}

.slick-arrow {
  color: #ffffff !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.slick-arrow:hover {
  background-color: #E50915 !important;
  color: #ffffff !important;
}


/* ============================================================
   18. Form Elements
   ============================================================ */

input:focus,
textarea:focus,
select:focus {
  border-color: #E50915 !important;
  box-shadow: 0 0 0 2px rgba(229, 9, 21, 0.15) !important;
}


/* ============================================================
   19. Selection / Highlight
   ============================================================ */

::selection {
  background-color: #E50915;
  color: #ffffff;
}

::-moz-selection {
  background-color: #E50915;
  color: #ffffff;
}


/* ============================================================
   20. Elementor-specific overrides
   ============================================================ */

/* Elementor icons with brand color */
.elementor-icon {
  color: #E50915 !important;
}

.elementor-icon:hover {
  color: #B81D25 !important;
}

/* Elementor dividers */
.elementor-divider-separator {
  border-color: #E50915 !important;
}

/* Elementor progress bar */
.elementor-progress-bar {
  background-color: #E50915 !important;
}

/* Elementor tabs active */
.elementor-tab-title.elementor-active {
  color: #E50915 !important;
}

/* Elementor counters */
.elementor-counter-number-wrapper {
  color: #E50915 !important;
  font-family: 'Mazzard H', 'Montserrat', sans-serif !important;
}

/* Override Elementor primary color in inline styles */
.elementor-view-stacked .elementor-icon {
  background-color: #E50915 !important;
}


/* ============================================================
   21. Hero Section Adjustments
   ============================================================ */

.tronix-single-slide-item .tronix-slider-content h1,
.tronix-single-slide-item .tronix-slider-content h2 {
  font-family: 'Mazzard H', 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* Gradient overlay on hero to match brand */
.elementor-element-3c6dcaba > .elementor-background-overlay {
  background-color: #ffffff !important;
  opacity: 0.85 !important;
}


/* ============================================================
   22. Pricing / Plans
   ============================================================ */

.pricing-table-one-item.active,
.pricing-table-one-item:hover {
  border-color: #E50915 !important;
}

.pricing-table-one-item .pricing-table-one-price {
  color: #E50915 !important;
  font-family: 'Mazzard H', 'Montserrat', sans-serif !important;
}

.pricing-table-one-item .pricing-table-one-btn a {
  background-color: #E50915 !important;
  border-color: #E50915 !important;
}


/* ============================================================
   23. Blog / Posts
   ============================================================ */

.tronix-blog-one-content .blog-date,
.tronix-blog-one-content .blog-meta a:hover {
  color: #E50915 !important;
}

.tronix-blog-one-item:hover .tronix-blog-one-thumb img {
  border-color: #E50915 !important;
}


/* ============================================================
   24. Utility: brand color classes
   ============================================================ */

.text-brand { color: #E50915 !important; }
.text-brand-dark { color: #B81D25 !important; }
.bg-brand { background-color: #E50915 !important; }
.bg-brand-dark { background-color: #B81D25 !important; }
.bg-dark-brand { background-color: #21201E !important; }
.border-brand { border-color: #E50915 !important; }


/* ============================================================
   25. Contact Popup
   ============================================================ */

body.cr-popup-open {
  overflow: hidden !important;
}

.cr-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.cr-popup.is-open {
  display: block;
}

.cr-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(33, 32, 30, 0.76);
  backdrop-filter: blur(2px);
}

.cr-popup__dialog {
  position: relative;
  width: min(680px, calc(100% - 28px));
  margin: 6vh auto;
  background-color: #ffffff;
  border-radius: 14px;
  border-top: 4px solid #E50915;
  box-shadow: 0 24px 70px rgba(33, 32, 30, 0.24);
  padding: 34px 28px 28px;
}

.cr-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid #E8E8E8;
  border-radius: 50%;
  background: #ffffff;
  color: #21201E;
  font-size: 16px;
  line-height: 1;
  transition: all 0.25s ease;
}

.cr-popup__close:hover {
  border-color: #E50915;
  color: #E50915;
}

.cr-popup__header {
  margin-bottom: 20px;
  padding-right: 42px;
}

.cr-popup__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #E50915;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cr-popup__header h3 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.2;
  color: #21201E;
}

.cr-popup__header p {
  margin: 0;
  color: #4A4A4A;
}

.cr-popup__form {
  margin: 0;
}

.cr-popup__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.cr-popup__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cr-popup__field {
  margin-bottom: 14px;
}

.cr-popup__field label {
  display: inline-block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #21201E;
}

.cr-popup__field input,
.cr-popup__field textarea {
  width: 100%;
  border: 1px solid #DCDCDC;
  border-radius: 8px;
  background-color: #ffffff;
  color: #21201E;
  padding: 11px 13px;
  font-size: 15px;
  line-height: 1.35;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cr-popup__field textarea {
  min-height: 125px;
  resize: vertical;
}

.cr-popup__field input:focus,
.cr-popup__field textarea:focus {
  border-color: #E50915;
  box-shadow: 0 0 0 3px rgba(229, 9, 21, 0.14);
  outline: none;
}

.cr-popup__submit {
  width: 100%;
  margin-top: 2px;
  padding: 14px 18px !important;
}

@media (max-width: 767px) {
  .cr-popup__dialog {
    margin: 3vh auto;
    padding: 28px 16px 20px;
  }

  .cr-popup__header h3 {
    font-size: 25px;
  }

  .cr-popup__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}