/* ===== GLOBAL FONT SETTINGS ===== */
body, input, select, textarea, button {
    font-family: 'Orbitron', sans-serif; /* Primary font for tech/spiritual feel */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rajdhani', 'Orbitron', sans-serif; /* Secondary, geometric font for headings */
    font-weight: 700;
    letter-spacing: 1px;
}

/* Optional: lighter headings or subtext */
p, label, span {
    font-family: 'Orbitron', sans-serif;
}

/* Navigation & Brand */
.navbar .brand-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}


/* ===== LOADING PAGE STYLES ===== */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    text-align: center;
    background: radial-gradient(circle at center, #0f1b3d, #050812 90%);
    background-image: url('/images/spread-bg.png') !important;
    background-position: center;
    background-size: cover;
    overflow: hidden;
  }


  @media (max-width: 768px) {
    #loader {
      background-image: url('/images/spread-mb.png') !important;
    }
  }
  
  /* ===== Overlay ===== */
  #loader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 17, 40, 0.4); /* bluish dark overlay */
    backdrop-filter: blur(0px); /* subtle glassy effect */
    z-index: 1;
  }
  
  /* ===== Loader Content ===== */
  #loader-content {
    position: relative;
    z-index: 2;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Orbitron', sans-serif;
  }
  
  .loader-logo {
    width: 100px;
    /* animation: rotateLogo 6s linear infinite; */
  }
  
  .loader-circle {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid #4aa3ff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 1.8s linear infinite;
  }
  
  .glow-text {
    color: #b8d9ff;
    text-shadow: 0 0 10px #4aa3ff, 0 0 20px #4aa3ff;
  }
  
  @keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes rotateLogo {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1); }
  }