/* Shared palette overrides for the htmx webapp */
:root {
  --pt-primary: #7D5DFF;
  --pt-accent: #ff6d00;
  --pt-dark: #030303;
  --pt-light: #f7f7f7;
  --pt-muted: #999999;

  --tp-theme-primary: var(--pt-primary);
  --tp-theme-secondary: var(--pt-accent);
  --tp-common-black: var(--pt-dark);
  --tp-common-white: #ffffff;
  --tp-grey-2: var(--pt-muted);
}

.tp-text-theme-primary {
  color: var(--tp-theme-primary);
}

.tp-text-common-black {
  color: var(--tp-common-black);
}

/* Hero / theme background override to match the mock */
.tp-bg-theme-primary {
  background-color: #f7f7f7 !important;
}

/* Banner image full-width only for the hero/cta strip */
.tp-banner-full {
  width: 100% !important;
  height: auto;
  display: block;
  object-fit: cover;
}

.tp-header-sa-logo img {
  max-width: 230px;
}

.tp-main-menu ul>li>a {
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 0 18px;
}

.tp-header-sa-wrap {
  align-items: center;
}

.tp-header-right {
  gap: 18px;
}

.tp-header-search-btn svg {
  width: 18px;
  height: 18px;
}

.tp-header-btn .tp-btn-lg {
  padding: 16px 26px;
  font-size: 12px;
  border-radius: 999px;
}

/* Responsive Header Adjustments */
@media (max-width: 1600px) {
  .tp-header-sa-logo img {
    max-width: 200px;
  }

  .tp-main-menu ul>li>a {
    padding: 0 14px;
  }
}

@media (max-width: 1440px) {
  .tp-header-sa-logo img {
    max-width: 180px;
  }

  .tp-main-menu ul>li>a {
    padding: 0 12px;
    font-size: 14px;
  }

  .tp-header-logo.tp-header-sa-logo.mr-50 {
    margin-right: 30px !important;
  }

  .tp-header-btn .tp-btn-lg {
    padding: 12px 22px;
  }
}

@media (max-width: 1280px) {
  .tp-header-sa-logo img {
    max-width: 160px;
  }

  .tp-main-menu ul>li>a {
    padding: 0 10px;
    font-size: 13px;
  }

  .tp-header-logo.tp-header-sa-logo.mr-50 {
    margin-right: 20px !important;
  }

  /* Adjust hero title size for 720p screens */
  .tp-hero-sa-title {
    font-size: 75px !important;
  }

  /* Adjust container padding if needed */
  .container-1800 {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Reduce header vertical spacing */
  .tp-header-lg-spacing {
    padding: 15px 0;
  }

  /* Reduce right side gap */
  .tp-header-right {
    gap: 10px;
  }

  /* Adjust button size */
  .tp-header-btn .tp-btn-lg {
    padding: 10px 20px;
  }
}

@media (max-width: 1024px) {

  /* Ensure tablet view looks good */
  .tp-hero-sa-title {
    font-size: 60px !important;
  }
}

/* Brand Slider Edge Fade */
/* Brand Slider Edge Fade */
.tp-brand-slide-active {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  max-width: 2350px;
  margin-left: auto;
  margin-right: auto;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1.5s ease-in-out forwards;
  opacity: 0; /* Ensure it starts invisible */
}

@media (max-width: 1339px) {
  .tp-hero-sa-shape-2 {
    display: none !important;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
  .tp-hero-content {
    margin-left: 0;
    margin-top: 4vh;
  }
}

@media (max-width: 767px) {
  .tp-hero-content {
    text-align: center;
    margin-top: 0vh;
  }

  .mr-50,
  .mr-40,
  .mr-35,
  .mr-20 {
    margin-right: 0 !important;
    text-align: center;
  }

  h1,
  .fs-100,
  .tp-hero-sa-title {
    font-size: 52px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 5000px) {
  .tp-hero-sa-title {
    font-size: 75px !important;
    margin-top: 6vh
  }
}