:root {
  /* Colors */
  --primary-color: #d60004;
  --bg-dark: #08090b;
  --bg-accordion-active: rgba(255, 255, 255, 0.04);
  --border-light: rgba(255, 255, 255, 0.1);
  --text-primary: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.7);

  /* Fonts */
  --font-primary: "Switzer", sans-serif;
  --font-secondary: "Clash Display", sans-serif;
  --font-tertiary: "Obviously Narrow", sans-serif;

  /* Spacing */
  --spacing-sm: 15px;
  --spacing-md: 25px;
  --spacing-lg: 40px;
}

.title-two .sub-heading {
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: var(--spacing-md);
  width: 100%;
  max-width: 95%;
  text-wrap: balance;
}

/* smaller screen size */
@media (max-width: 768px) {
  .btn-two {
    font-size: 16px;
    padding: 0 22px;
  }

  .row > * {
    padding-left: 0 !important;
  }

  .title-two .sub-heading {
    font-size: 18px;
    max-width: 100%;
    margin-top: var(--spacing-sm);
  }
}

/* Service Accordion Visual Hierarchy for Dark Background */
.service-section-one .accordion-container .accordion-item {
  border-right: 1px solid var(--border-light) !important;
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.service-section-one .accordion-container .accordion-item:first-child {
  border-left: 1px solid var(--border-light) !important;
}

/* Highlight the active (open) box */
.service-section-one .accordion-container .accordion-item.active {
  background-color: var(--bg-accordion-active);
}

/* Make arrow icon its primary color by default to ensure visibility, similar to its original hover effect */
.service-section-one .accordion-container .accordion-item .content .icon {
  background-color: var(--primary-color) !important;
}

/* Add contrasting hover effect for the arrow */
.service-section-one .accordion-container .accordion-item .content .icon:hover {
  background-color: var(--text-primary) !important;
}

.service-section-one
  .accordion-container
  .accordion-item
  .content
  .icon:hover
  img {
  filter: invert(1);
}