:root {
    --color-primary: #022eb8 !important;
    --color-secondary: #022eb8 !important;
    --color-tertiary: #ff046E !important;
    --color-primary-text: #151515;
    --color-background: #fcfcfc;
    --max-width: normal;
    --font-primary: 'local', Arial, sans-serif;
    --font-secondary: 'local2', Arial, sans-serif;
  } 
  
  
  
  
  :root { --border-radius: 0.375rem; }
  
  
  
  
  
  .container {
      @media screen and (max-width: 1700px) {
        max-width: 90%;
      }
    }
  .template1 {
  h1 {
    font-weight: 400 !important;
    &.lg\:text-5xl {
      @media (min-width: 1024px) {
        font-size: 2.5rem !important;
      }
    }
  }
  h2 {
    font-weight: 400;
  }

  .btn.bg-secondary,
  .btn-secondary,
  .btn-primary,
  .btn.bg-primary {
    &:hover {
      background-color: var(--color-tertiary);
    }
  }

  .bg-gray-100 {
    background-color: #f5f5f3;
    .bg-gray-100 {
      background-color: var(--color-background);
    }
  }

  .btn {
    border-radius: 9999px;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .banner-box {
    > div:after {
      background-color: transparent;
    }
    .slide-down {
      display: none;
    }
  }

  .desktop-nav {
    text-transform: uppercase;
    a:after {
      background-color: #fff;
    }
  }

  .extra-nav {
    a:after {
      background-color: #fff;
    }
    > ul > li:nth-child(7) {
      margin-bottom: 2rem;
    }
  }
  .leaflet-container path {
    fill: var(--color-secondary);
  }

  .property-sort-container {
    svg {
      fill: var(--color-secondary);
    }
  }

  .property-list-cta {
    .btn {
      background-color: var(--color-background);
      color: var(--color-secondary);
      &:hover {
        background-color: var(--color-tertiary);
        color: #fff;
      }
    }
  }

}

.footer {
  div {
    margin-bottom: 0;
    text-align: center;
    a {
      color: #fff;
      &:hover {
        color: #fff;
        text-decoration: underline;
      }
    }

    img {
      object-fit: contain;
      max-height: 50px;
    }
  }
}

.copyright {
  background-color: var(--color-secondary);
}

.__housematch-text {
  strong {
    font-size: 2rem;
  }
}

#root > .popup-container .popup-content {
  > div {
    position: relative;
    z-index: 1;
  }
  &:before {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    background: linear-gradient(
      215deg,
      #152091 7.5%,
      var(--color-secondary) 53%
    ) !important;
    transition: all 0.75s cubic-bezier(0.4, 0, 0, 1);
    content: "";
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
  }
}

.popup-content {
  .btn.btn-tertiary.hover:not(.btn-inactive), 
  .btn.btn-tertiary:hover:not(.btn-inactive) {
    background-color: #b3044c;
  }
}