body {
  background-color: #000000;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
}

.space-grotesk-light{
  font-weight: 300;
}

.space-grotesk-regular{
  font-weight: 400;
}

.space-grotesk-medium{
  font-weight: 500;
}

.space-grotesk-semibold{
  font-weight: 600;
}

.space-grotesk-bold{
  font-weight: 700;
}

.retina-shrink{
    width: 75px; /* Display size */
    height: auto; /* Maintain aspect ratio */
}

.retina-shrink-crystal-bullet{
    width: 10px; /* Display size */
    height: auto; /* Maintain aspect ratio */
}

.Salt-logo{
  width: 48px;
  height: 48px;
}

.glow-text {
    color: white; /* Base text color */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                 0 0 20px rgba(255, 255, 255, 0.6), 
                 0 0 30px rgba(255, 255, 255, 0.4);
}

.glow-image {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8); /* White glow */
    border-radius: 10px; /* Optional */
}

/*--best for PNGS--*/
.glow-image-png {
    filter: drop-shadow(0px 0px 15px white);
}

@keyframes pulse-glow {
    0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
    50% { text-shadow: 0 0 20px rgba(255, 255, 255, 1); }
    100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
}

.glow-text-pulse {
    color: white;
    animation: pulse-glow 1.5s infinite alternate;
}

.whte-highlight-text{
   background-color: rgba(255, 255, 255, 0.2); /* White highlight with transparency */
    padding: 1px 2px; /* Space around text */
    display: inline; /* Ensures background only covers the text */
}

.custom-list {
    list-style: none; /* Remove default bullets */
    padding-left: 0rem;
}

.custom-list li {
    background: url('../images/crystal-bullet.png') no-repeat left center;
    background-size: 10px 30px; /* Set the visible size to 16px */
    padding-left: 25px; /* Space for the bullet */
}

@media (max-width: 600px) {
  .secondCTA{
    display: block;
  }
}

@media (min-height: 600px) {
  .bottom-anchor {
      position: fixed;
      bottom: 0;
  }
}

/* Basic layout for main content, so crystals float "over" everything */
main {
  position: relative;
  z-index: 1;  /* content is on top of background, but below crystals if needed */
  padding: 40px;
}

/* Container that holds all crystals */
.crystal-container {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Each crystal style */
.crystal {
  position: absolute;
  width: 40px;
  height: 40px;
  background: url('../images/crystal-bullet.png') no-repeat center/contain;
  pointer-events: auto;
  transition: filter 0.3s ease;
  z-index: 0.01;
  opacity: 0.7;
  transform: rotate(var(--rotation));
}

/* Individual crystal positions and rotations */
.crystal1 { top: 15%; left: 20%; --rotation: 45deg; }
.crystal2 { top: 10%; right: 50%; --rotation: -35deg; }
.crystal3 { top: 26%; left: 51%; --rotation: 75deg; }
.crystal4 { top: 45%; right: 12%; --rotation: -45deg; }
.crystal5 { top: 60%; right: 13%; --rotation: 15deg; }
.crystal6 { top: 70%; right: 20%; --rotation: -30deg; }
.crystal7 { top: 40%; left: 55%; --rotation: 60deg; }
.crystal8 { top: 720%; right: 35%; --rotation: -20deg; }
.crystal9 { top: 30%; right: 15%; --rotation: 83deg; }
.crystal10 { top: 40%; left: 75%; --rotation: -35deg; }
.crystal11 { top: 65%; right: 35%; --rotation: 40deg; }
.crystal12 { top: 75%; left: 85%; --rotation: -25deg; }
.crystal13 { top: 20%; right: 40%; --rotation: 50deg; }

/* Mobile responsive styles */
@media (max-width: 768px) {

.crystal-container {
  height: 500px;  /* Increased from 300px to give more vertical space */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
}

.crystal {
  width: 25px;
  height: 25px;
  opacity: 0.2;
  position: absolute;
}

/* More spread out crystal positions with lower right-side crystals */
.crystal1 { top: 50px; left: 15%; }
.crystal2 { top: 80px; right: 25%; }
.crystal3 { top: 120px; left: 30%; }
.crystal4 { top: 260px; right: 20%; }  /* Moved lower */
.crystal5 { top: 380px; right: 13%; }  /* Moved lower */
.crystal6 { top: 440px; right: 5%; }  /* Moved lower */
.crystal7 { top: 280px; left: 25%; }
.crystal8 { top: 420px; right: 12%; }  /* Moved lower */
.crystal9 { top: 180px; right: 1%; }
.crystal10 { top: 220px; left: 20%; }
.crystal11 { top: 340px; right: 14%; }  /* Moved lower */
.crystal12 { top: 300px; left: 35%; }
.crystal13 { top: 140px; right: 45%; }

}