/*  violet theme — place AFTER Bootstrap CSS */

.tilt{
  display:inline-block;       /* needed so transform applies cleanly */
  transform: rotate(-8deg);
  transform-origin: 50% 60%;  /* tweak the pivot point if needed */
}


:root{
  /* Palette */
  --ah-primary-700:#4c1d95;
  --ah-primary-600:#5b21b6;
  --ah-primary:#6d28d9;     /* base */
  --ah-primary-500:#7c3aed;
  --ah-primary-300:#c4b5fd;
  --ah-primary-100:#ede9fe;

  /* Bootstrap color tokens */
  --bs-primary: var(--ah-primary);
  --bs-primary-rgb: 109,40,217;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--ah-primary-600);
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb),.25);

  /* Emphasis & subtle variants */
  --bs-primary-text-emphasis:#3b0764;
  --bs-primary-bg-subtle: var(--ah-primary-100);
  --bs-primary-border-subtle: var(--ah-primary-300);
}

/* Buttons */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--bs-primary);
  --bs-btn-border-color:var(--bs-primary);
  --bs-btn-hover-bg:var(--ah-primary-600);
  --bs-btn-hover-border-color:var(--ah-primary-600);
  --bs-btn-active-bg:var(--ah-primary-700);
  --bs-btn-active-border-color:var(--ah-primary-700);
  --bs-btn-disabled-bg:var(--bs-primary);
  --bs-btn-disabled-border-color:var(--bs-primary);
  --bs-btn-focus-shadow-rgb:var(--bs-primary-rgb);
}
.btn-outline-primary{
  --bs-btn-color:var(--bs-primary);
  --bs-btn-border-color:var(--bs-primary);
  --bs-btn-hover-bg:var(--bs-primary);
  --bs-btn-hover-border-color:var(--bs-primary);
  --bs-btn-active-bg:var(--ah-primary-700);
  --bs-btn-active-border-color:var(--ah-primary-700);
  --bs-btn-focus-shadow-rgb:var(--bs-primary-rgb);
}

/* Common components picking up primary */
.bg-primary{ background-color:var(--bs-primary)!important; }
.text-primary{ color:var(--bs-primary)!important; }
.border-primary{ border-color:var(--bs-primary)!important; }
.alert-primary{
  --bs-alert-bg:var(--bs-primary-bg-subtle);
  --bs-alert-border-color:var(--bs-primary-border-subtle);
  --bs-alert-color:var(--bs-primary-text-emphasis);
}
.nav-pills .nav-link.active,
.nav-link.active{ background-color:var(--bs-primary); }
.progress-bar{ background-color:var(--bs-primary); }
.form-check-input:checked{
  background-color:var(--bs-primary);
  border-color:var(--bs-primary);
  box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
}
.form-range::-webkit-slider-thumb{ background-color:var(--bs-primary); }
.form-range::-moz-range-thumb{ background-color:var(--bs-primary); }

/* Optional gradient helpers (for hero/CTA) */
.bg-violet-gradient{
  background:linear-gradient(135deg,#4c1d95 0%,#6d28d9 40%,#7c3aed 70%,#8b5cf6 100%);
}
.btn-primary.gradient{
  background-image:linear-gradient(135deg,#6d28d9 0%,#7c3aed 60%,#8b5cf6 100%);
  border-color:transparent;
}
.btn-primary.gradient:hover{ filter:brightness(1.05); }



.bg-hero{
      position: relative; /* make it a containing block */
  z-index: 0;         /* ensure stacking order baseline */
  overflow: hidden;   /* keeps the ::before inside */
}
.bg-hero::before {
  content: "";                 /* creates the pseudo-element */
  position: absolute;
  inset: 0;                    /* stretch to all edges */
  pointer-events: none;        /* don't block clicks */

  /* your layered backgrounds */
  background:
    linear-gradient(rgb(42 48 216 / 8%) 1px, transparent 1px) top left,
    linear-gradient(90deg, rgb(69 102 223 / 8%) 1px, transparent 1px) top left,
    radial-gradient(circle at 30% 30%, rgb(59 50 168 / 9%), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.03), transparent 50%);

  /* make the grid lines repeat */
  background-size: 65px 65px, 65px 65px, auto, auto;
  background-repeat: repeat, repeat, no-repeat, no-repeat;

  z-index: 1;                  /* sit under the content */
}


  @media (min-width: 1200px) {
#h1h1
{
  font-size: 4rem;
  letter-spacing: -2px;
}

}