
:root {
    --primary: #5c3d4a;
    --primary-dark: #522B3A;
    --secondary: #E8E6DF;
    --beige: #d4c9b8;
    --white: #ffffff;
    --text-muted: #6f6f6f;
    --text-on-primary: #E8E5DF;
    --text-on-primary-alt: #D6D6D6;
    --indicator-active: #D69A35;
    --indicator-inactive: #968F83;
    --indicator-hover: #a99f92;
    --shadow-sm: 0 4px 24px rgba(89, 74, 63, 0.12);
    --companies-bg: #887755;
    --companies-cutout-chip: var(--beige);
    --companies-logo-border: #0000000A;
    --banner-bg: #D3CEBB;
    --orange: #BA622A;
    --radius-main: 30px;
    --radius-form: 14px;
    --radius-cutout: 30px;
    --cutout-size: 60px;
    --light-brown: #D5D0C3;
    --node-color: #E8E6DF;
    --primary-dark: #522B3A;
    --yallow: #D69A35;;
    --content-padding-x: var(--section-px, 1rem);
    --content-padding-x-lg: var(--section-px-lg, 3rem);
    --radius-lg: 50px; 
    --gold: #71733A;
    --section-px: 1rem;
    --section-px-lg: 3rem;
    --rounded-20: 20px;
  }

  .primary-text {
    color: var(--primary-dark);
  }
  .secondary{
   color: var(--secondary);
  }
  .secondary-bg{
    background-color: var(--secondary);
    color:var(--primary-dark);
   }
   .secondary-bg:hover{
  border: 2px solid var(--primary-dark);
  border-color: var(--primary-dark);
  color:var(--primary-dark);
   }
  .rounded-20 {
    border-radius: 20px;
  }
  .orange-text{
    color: var(--orange);
  }
  .orange-bg{
    background-color: var(--orange);
  }

.orange-bg{
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.orange-bg:hover{
    background-color: #b96524;
    transform: translateY(-1px);
    opacity: 0.9;
}
    .ompanies-bg-bk {
    background-color: var(--companies-bg);
    border: 1px solid transparent;  
    transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  }
  .ompanies-bg-bk:hover {
    background-color: var(--node-color);
    border-color: var(--companies-bg);
    color: var(--companies-bg) !important;
  }
  
  .ompanies-bg-bk:hover .read-more-arrow-circle {
    border-color: var(--companies-bg);
    transform: translate(0.12rem, -0.12rem);
  }
  .primary-color {
    background-color: var(--primary-dark);
    border: 1px solid var(--primary-dark);
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
      color: var(--secondary) !important;
  }
  
  .primary-color:hover {
    background-color: var(--node-color);
    border: 1px solid var(--primary-dark) !important;
    color: var(--primary-dark) !important;
  }
  
  .primary-color:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
  }
  
  .companies-bg-background {
    background-color: var(--companies-bg);
    color: var(--secondary) !important;
  }
  .companies-bg-background:hover {
    background-color: var(--node-color);
    color: var(--companies-bg) !important;
    border-color: var(--companies-bg) !important;
  }