:root {
  --bg: #000000;
  --clr-1: #00c2ff;
  --clr-2: #33ff8c;
  --clr-3: #ffc640;
  --clr-4: #e54cff;

  --blur: 1rem;
  --fs: clamp(3rem, 8vw, 7rem);
  --ls: clamp(-1.75px, -0.25vw, -3.5px);
}

.check-list li::marker {
    content:"\2713\0020"; /* Unicode checkmark */
    color: #fe9c2c; /* Tailwind green-600 */
    font-size: 1.2em;
  }

  .bullet-disc-list li::marker {
    content: "•\0020"; /* Unicode disc bullet */
    color: #fe9c2c; /* Your orange color */
    font-size: 1.2em;
  }

  footer {
    --tw-bg-opacity: 1;
    background-color: rgb(50 49 50);
  }

  .lithium-bg {
      position: relative;
      background: linear-gradient(to right, #D3CBB8, #6D6027);
      /* background-image: url('https://www.heropatterns.com/static/media/graph-paper.84ae0f8a.svg');  */
      background-repeat: repeat;
      background-size: contain;
      z-index: 0;
  }

  @keyframes softPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
  }

  .zero_dollar_blink {
      animation: softPulse 2s ease-in-out infinite;
  }

  .tl {
    font-size: var(--fs);
    font-weight: 800;
    letter-spacing: var(--ls);
    position: relative;
    display: inline-block;
    background: transparent;
  }
  
  .aurora {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    mix-blend-mode: normal;
  }
  
  .aurora-text {
    background: linear-gradient(90deg, var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-4));
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 10s ease infinite;
    position: relative;
    z-index: 2;
  }
  
  @keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  

  .animated-text {
    background: linear-gradient(90deg, #00c2ff, #33ff8c, #ffc640, #e54cff, #00c2ff);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 5s ease-in-out infinite;
    display: inline-block;
  }
  
  @keyframes shimmer {
    0% {
      background-position: 0% center;
    }
    50% {
      background-position: 100% center;
    }
    100% {
      background-position: 0% center;
    }
  }
  
  

  .glowing-text {
    background: linear-gradient(120deg, #ff8a00, #ff0000, #ff8a00);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: glowText 3s linear infinite;
  }
  
  @keyframes glowText {
    0% {
      background-position: 200% center;
    }
    100% {
      background-position: -200% center;
    }
  }

  .title-color {
    color: #f27d00;
  }
  
  .left-solar{
    background-image: url(https://www.dev.ozsolarenergysolutions.com.au/assets/img/bg-07.png);
    background-repeat: no-repeat;
    background-position: left bottom;
  }

  .right-solar{
    background-image: url(https://www.dev.ozsolarenergysolutions.com.au/assets/img/bg-07.png);
    background-repeat: no-repeat;
    background-position: right bottom;
  }

  @keyframes zero_dollar_blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
  
  .zero_dollar_blink {
    animation: zero_dollar_blink 1s infinite;
  }
  
  .glow-text {
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #ff6600,
      0 0 30px #ff6600,
      0 0 40px #ff6600,
      0 0 50px #ff6600;
    animation: glow 2s ease-in-out infinite alternate;
  }

  @keyframes glow {
    from {
      text-shadow:
        0 0 2px #fff,
        0 0 10px #fff,
        0 0 15px #ff6600;
    }
    to {
      text-shadow:
        0 0 10px #fff,
        0 0 20px #ff6600,
        0 0 30px #ff6600;
    }
  }

  .perspective {
    perspective: 1000px;
  }

  .flip-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.8s;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .group:hover .flip-card-inner,
  .group:focus .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-front,
  .flip-card-back {
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background-size: cover;
    background-position: center;
  }

  .flip-card-back {
    transform: rotateY(180deg);
  }

  .flip-card-front {
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: darken;
  }