/* Quantum Design System */
:root {
  --theme-color-1: #000456;
  --theme-color-2: #0405ef;
  --quantum-blue: #00f0ff;
  --hologram-pink: #ff00f0;
  --neon-purple: #9d00ff;
  --dark-matter: #0a0a14;
  --star-light: #ffffff;
  --energy-core: #00ff9d;
  --quantum-glow: 0 0 15px var(--quantum-blue);
  --hologram-glow: 0 0 20px var(--hologram-pink);
  --transition-quantum: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --neon-glow: 0 0 10px rgba(4, 5, 239, 0.8), 0 0 20px rgba(0, 212, 255, 0.6);
  --text-glow: 0 0 8px rgba(255, 255, 255, 0.8);
  --hologram-gradient: linear-gradient(135deg, rgba(0, 4, 86, 0.2) 0%, rgba(4, 5, 239, 0.4) 50%, rgba(0, 212, 255, 0.2) 100%);
  --quantum-core: #00f0ff;
  --hologram-primary: #ff00f0;
  --tachyon-stream: #9d00ff;
  --dark-matter: #0a0a14;
  --quantum-glow: 0 0 15px var(--quantum-core);
  --hologram-glow: 0 0 20px var(--hologram-primary);
  --neural-glow: 0 0 10px var(--energy-core);
  --transition-quantum: all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
  --quantum-core: #ffffff;
  --hologram-primary: #ff00f0;
  --application-accent: #9d00ff;
  --dark-matter: #0a0a14;
  --application-panel: #121220;
  --grey:rgb(70, 70, 70);
  --quantum-glow: 0 0 15px var(--quantum-core);
  --hologram-glow: 0 0 20px var(--hologram-primary);
  --neural-glow: 0 0 10px var(--energy-core);
  --application-glow: 0 0 15px var(--application-accent);

  --transition-quantum: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Next-Gen Body Styles */
.next-gen-body {
  background-color: var(--dark-matter);
  color: var(--star-light);
  font-family: 'Titillium Web', sans-serif;
  overflow-x: hidden;
  position: relative;
}

.next-gen-body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%,
    rgba(4, 5, 239, 0.1) 0%,
    rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 80% 70%,
    rgba(0, 240, 255, 0.1) 0%,
    rgba(0, 0, 0, 0) 50%);
  z-index: -1;
  pointer-events: none;
}

/* Quantum Header Styles */
.quantum-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 12vh;
  min-height: 70px;
  z-index: 1000;
  background: rgba(10, 10, 20, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  transition: var(--transition-quantum);
}

.neon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Holographic Logo Effects */
.logo-hologram {
  position: relative;
  z-index: 10;
}

.holographic-logo {
  display: block;
  position: relative;
  width: 80px;
  height: auto;
  transition: var(--transition-quantum);
}

.main-logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.7));
}

.hologram-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,
    rgba(0, 240, 255, 0.2) 0%,
    rgba(255, 0, 240, 0.2) 50%,
    rgba(0, 240, 255, 0.2) 100%);
  opacity: 0.7;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: holoPulse 8s infinite alternate;
}

@keyframes holoPulse {
  0% { opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { opacity: 0.5; }
}

/* Quantum Navigation System */
.quantum-nav {
  display: flex;
  align-items: center;
}

.particle-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-quantum {
  position: relative;
  margin: 0 0.5rem;
  transition: none;
}

.neon-link {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--star-light);
  text-decoration: none;
  font-weight: 300;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  overflow: hidden;
  transition: var(--transition-quantum);
}

.neon-link:hover {
  color: var(--quantum-blue);
}

.neon-link .link-particle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--quantum-blue),
    transparent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.neon-link:hover .link-particle {
  transform: scaleX(1);
  transform-origin: left;
}

/* Quantum Dropdown Menus */
.quantum-dropdown {
  position: relative;
}

.quantum-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  background: rgba(10, 10, 30, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 8px;
  padding: 1rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 100;
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.quantum-dropdown:hover .quantum-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-portal {
  display: flex;
  flex-direction: column;
}

.dropdown-quantum {
  position: relative;
  color: var(--star-light);
  text-decoration: none;
  padding: 0.7rem 1.5rem;
  transition: all 0.3s ease;
}

.dropdown-quantum:hover {
  color: var(--quantum-blue);
  background: rgba(0, 240, 255, 0.05);
}

.quantum-trail {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--quantum-blue);
  transition: width 0.4s ease;
}

.dropdown-quantum:hover .quantum-trail {
  width: 100%;
}

/* Quantum Donation Button */
.quantum-button {
  position: relative;
  background: linear-gradient(135deg,
    var(--theme-color-2),
    var(--quantum-blue));
  color: var(--dark-matter);
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-quantum);
  box-shadow: 0 5px 15px rgba(0, 240, 255, 0.4);
  z-index: 1;
}

.quantum-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.6);
}

.quantum-button .button-text {
  position: relative;
  z-index: 2;
}

.quantum-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
  z-index: 1;
}

.quantum-button:hover .quantum-ripple {
  animation: quantumRipple 1.5s ease-out infinite;
}

@keyframes quantumRipple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(25, 25);
    opacity: 0;
  }
}

.energy-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  box-shadow: 0 0 10px var(--quantum-blue);
  opacity: 0;
  z-index: 0;
  animation: energyPulse 2s infinite;
}

@keyframes energyPulse {
  0% { opacity: 0; transform: scale(0.95); }
  50% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.05); }
}

/* Quantum Burger Menu */
.quantum-burger {
  display: none;
  cursor: pointer;
  z-index: 1000;
}

.entanglement {
  position: relative;
  width: 30px;
  height: 20px;
}

.quantum-line {
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--quantum-blue);
  transition: all 0.3s ease;
}

.quantum-line.top {
  top: 0;
}

.quantum-line.middle {
  top: 50%;
  transform: translateY(-50%);
}

.quantum-line.bottom {
  bottom: 0;
}

/* Holographic Donation Interface */
.holographic-donate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 4, 86, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.holographic-donate.active {
  opacity: 1;
  visibility: visible;
}

.holo-container {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: rgba(10, 10, 30, 0.95);
  border: 1px solid var(--quantum-blue);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
  z-index: 2;
}

.holo-content {
  position: relative;
  z-index: 3;
}

.holo-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 4;
}

.close-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--quantum-blue);
  transition: all 0.3s ease;
}

.close-line:first-child {
  transform: rotate(45deg);
}

.close-line:last-child {
  transform: rotate(-45deg);
}

.holo-close:hover .close-line {
  background: var(--hologram-pink);
}

.holo-title {
  color: var(--quantum-blue);
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.holo-subtitle {
  color: var(--star-light);
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 300;
}

.holo-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.holo-preset {
  position: relative;
  background: transparent;
  border: 1px solid var(--quantum-blue);
  color: var(--star-light);
  padding: 0.8rem 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.holo-preset:hover {
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

.holo-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(0, 240, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}

.holo-preset:active .holo-orb {
  width: 200px;
  height: 200px;
  opacity: 0;
}

.holo-input {
  position: relative;
  margin-bottom: 2rem;
}

.holo-input input {
  width: 100%;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--quantum-blue);
  border-radius: 8px;
  color: var(--star-light);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.holo-input input:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.input-aura {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0);
  pointer-events: none;
  transition: all 0.3s ease;
}

.holo-input input:focus ~ .input-aura {
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.holo-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.holo-confirm {
  position: relative;
  background: linear-gradient(135deg,
    var(--quantum-blue),
    var(--hologram-pink));
  color: var(--dark-matter);
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-quantum);
  z-index: 1;
}

.holo-confirm:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.6);
}

.confirm-aura {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    var(--hologram-pink),
    var(--quantum-blue));
  opacity: 0;
  transition: all 0.6s ease;
  z-index: -1;
}

.holo-confirm:hover .confirm-aura {
  opacity: 1;
  animation: confirmPulse 2s infinite;
}

@keyframes confirmPulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

.holo-cancel {
  background: transparent;
  border: 1px solid var(--quantum-blue);
  color: var(--quantum-blue);
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.holo-cancel:hover {
  background: rgba(0, 240, 255, 0.1);
}

.holo-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
  pointer-events: none;
}

.holo-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Responsive Quantum Design */
@media (max-width: 992px) {
  .quantum-nav {
    position: fixed;
    top: 12vh;
    right: -100%;
    width: 300px;
    height: calc(100vh - 12vh);
    background: rgba(10, 10, 30, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 900;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
    padding-top: 2rem;
    overflow-y: auto;
  }

  .quantum-nav.active {
    right: 0;
  }

  .particle-links {
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
    width: 100%;
  }

  .nav-quantum {
    margin: 0.5rem 0;
    width: 100%;
    text-align: center;
  }

  .quantum-burger {
    display: block;
  }

  .quantum-burger.active .quantum-line.top {
    transform: translateY(9px) rotate(45deg);
  }

  .quantum-burger.active .quantum-line.middle {
    opacity: 0;
  }

  .quantum-burger.active .quantum-line.bottom {
    transform: translateY(-9px) rotate(-45deg);
  }

  .quantum-dropdown {
    position: static;
    width: 100%;
  }

  .quantum-dropdown-menu {
    position: static;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
    margin-top: 0.5rem;
    display: none;
  }

  .quantum-dropdown:hover .quantum-dropdown-menu {
    display: block;
  }

  .dropdown-toggle {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .neon-container {
    padding: 0 1rem;
  }

  .holographic-logo {
    width: 80px;
  }

  .holo-container {
    width: 95%;
    padding: 1.5rem;
  }

  .holo-presets {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* === Resiponsive footer style starts  here ===*/
   .footer-container {
       position: relative;
       background: var(--footer-bg);
       color: var(--footer-text);
       padding: 2rem 1rem 1rem;
       overflow: hidden;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }

   .footer-bg-animation {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       overflow: hidden;
       z-index: 0;
   }

   .footer-circle-1, .footer-circle-2 {
       position: absolute;
       border-radius: 50%;
       background: rgba(74, 110, 224, 0.1);
       filter: blur(60px);
   }

   .footer-circle-1 {
       width: 300px;
       height: 300px;
       top: -100px;
       left: -100px;
       animation: float 15s infinite ease-in-out;
   }

   .footer-circle-2 {
       width: 400px;
       height: 400px;
       bottom: -150px;
       right: -100px;
       animation: float 18s infinite ease-in-out reverse;
   }

   .footer-content {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 2rem;
       position: relative;
       z-index: 1;
       max-width: 1200px;
       margin: 0 auto;
   }

   .footer-card {
       background: rgba(255, 255, 255, 0.05);
       backdrop-filter: blur(10px);
       border-radius: 12px;
       padding: 1.5rem;
       height: 100%;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .footer-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 20px rgba(0, 4, 86, 0.3);
   }

   .footer-heading {
       font-size: 1.2rem;
       margin-bottom: 1.5rem;
       padding-bottom: 0.75rem;
       border-bottom: 2px solid var(--footer-accent);
       color: white;
       position: relative;
   }

   .footer-heading::after {
       content: '';
       position: absolute;
       bottom: -2px;
       left: 0;
       width: 50px;
       height: 2px;
       background: var(--theme-color-2);
   }

   .footer-links {
       list-style: none;
       padding: 0;
       margin: 0;
   }

   .footer-link-item {
       display: flex;
       align-items: flex-start;
       margin-bottom: 1rem;
       transition: all 0.3s ease;
   }

   .footer-link-item:hover {
       transform: translateX(5px);
   }

   .footer-icon {
       margin-right: 10px;
       color: var(--footer-accent);
       margin-top: 3px;
       font-size: 0.9rem;
   }

   .footer-text {
       flex: 1;
   }

   .footer-subheading {
       display: block;
       font-weight: 600;
       margin-bottom: 0.2rem;
       color: var(--footer-accent);
   }

   .footer-link, .footer-text a {
       color: rgba(255, 255, 255, 0.8);
       text-decoration: none;
       transition: color 0.3s ease;
   }

   .footer-link:hover, .footer-text a:hover {
       color: white;
       text-decoration: underline;
   }

   .footer-social {
       display: flex;
       gap: 1rem;
       margin-top: 1.5rem;
   }

   .social-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.1);
       color: white;
       transition: all 0.3s ease;
   }

   .social-icon:hover {
       background: var(--footer-accent);
       transform: translateY(-3px);
   }

   .footer-form {
       margin-top: 1.5rem;
   }

   .footer-form .form-group {
       position: relative;
   }

   .footer-form input {
       width: 100%;
       padding: 0.3rem 0.5rem;
       border-radius: 10px;
       border: none;
       background: rgba(255, 255, 255, 0.1);
       color: white;
       outline: none;
       transition: all 0.3s ease;
   }

   .footer-form input:focus {
       background: rgba(255, 255, 255, 0.2);
       box-shadow: 0 0 0 2px var(--footer-accent);
   }

   .footer-form input::placeholder {
       color: rgba(255, 255, 255, 0.6);
   }

   .footer-subscribe-btn {
       position: absolute;
       right: 5px;
       top: 50%;
       transform: translateY(-50%);
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: var(--footer-accent);
       color: white;
       border: none;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .footer-subscribe-btn:hover {
       background: var(--footer-hover);
       transform: translateY(-50%) scale(1.1);
   }

   .footer-newsletter-text {
       color: rgba(255, 255, 255, 0.7);
       margin-bottom: 1rem;
       font-size: 0.9rem;
   }

   .footer-user-actions {
       display: flex;
       gap: 1rem;
       margin-top: 1.5rem;
       flex-wrap: wrap;
   }

   .footer-action-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 1rem;
       border-radius: 30px;
       background: rgba(255, 255, 255, 0.1);
       color: white;
       text-decoration: none;
       font-size: 0.9rem;
       transition: all 0.3s ease;
   }

   .footer-action-btn:hover {
       background: var(--footer-accent);
   }

   .footer-bottom {
       margin-top: 2rem;
       padding-top: 2rem;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
       max-width: 1200px;
       margin-left: auto;
       margin-right: auto;
   }

   .footer-copyright {
       color: rgba(255, 255, 255, 0.6);
       font-size: 0.9rem;
   }

   .footer-legal {
       display: flex;
       gap: 1.5rem;
   }

   .footer-legal a {
       color: rgba(255, 255, 255, 0.6);
       text-decoration: none;
       font-size: 0.9rem;
       transition: color 0.3s ease;
   }

   .footer-legal a:hover {
       color: white;
   }

   @keyframes float {
       0% {
           transform: translate(0, 0);
       }
       50% {
           transform: translate(20px, 20px);
       }
       100% {
           transform: translate(0, 0);
       }
   }

   @media (max-width: 768px) {
       .footer-content {
           grid-template-columns: 1fr;
           gap: 2rem;
       }

       .footer-bottom {
           flex-direction: column;
           gap: 1rem;
           text-align: center;
       }

       .footer-legal {
           flex-wrap: wrap;
           justify-content: center;
       }
   }
   /* === Resiponsive footer style ends  here ===*/
/* Hero Section with Particles */
.about-hero {
 height: 100vh;
 background: linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2));
 position: relative;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: white;
}
.about-container p{
color: var(--grey);
}
.hero-particles {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}

.hero-content {
 position: relative;
 z-index: 2;
 padding: 0 20px;
}

.hero-content h1 {
 font-size: 4rem;
 margin-bottom: 20px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 2px;
}

.hero-content .color {
 background: linear-gradient(45deg, #fff, #a0a0ff);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}

.hero-content p {
 font-size: 1.5rem;
 max-width: 800px;
 margin: 0 auto 40px;
 opacity: 0.9;
}

/* Scroll Down Animation */
.scroll-down {
 position: absolute;
 bottom: 40px;
 left: 50%;
 transform: translateX(-50%);
 width: 30px;
 height: 50px;
 border: 2px solid white;
 border-radius: 15px;
}

.scroll-down span {
 position: absolute;
 top: 10px;
 left: 50%;
 transform: translateX(-50%);
 width: 6px;
 height: 6px;
 background: white;
 border-radius: 50%;
 animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
 0% { top: 10px; opacity: 1; }
 100% { top: 25px; opacity: 0; }
}

/* Text Gradient */
.text-gradient {
 background: linear-gradient(45deg, var(--theme-color-1), var(--theme-color-2));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 display: inline;
}

/* Mission Statement */
.mission-statement {
 background: var(--light-color);
 padding: 40px 0;
 margin: -50px auto 0;
 position: relative;
 z-index: 3;
 border-radius: 20px;
 max-width: 95%;
 box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.mission-card {
 max-width: 90%;
 margin: 0 auto;
 display: flex;
 align-items: center;
 background: white;
 border-radius: 15px;
 box-shadow: 0 15px 40px rgba(0,4,86,0.15);
 overflow: hidden;
 position: relative;
}

.mission-icon {
 background: linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2));
 color: white;
 padding: 50px;
 font-size: 3.5rem;
 min-width: 180px;
 position: relative;
 overflow: hidden;
}

.pulse-animation {
 animation: pulse 3s infinite;
}

@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
}

.mission-content {
 padding: 20px;
 position: relative;
}

.mission-content h2 {
 font-size: 2rem;
 margin-bottom: 25px;
}

.floating-shapes {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 overflow: hidden;
 z-index: -1;
}

.shape {
 position: absolute;
 opacity: 0.1;
 border-radius: 50%;
 background: linear-gradient(45deg, var(--theme-color-1), var(--theme-color-2));
}

.shape-1 {
 width: 100px;
 height: 100px;
 top: -30px;
 right: -30px;
 animation: float 15s infinite linear;
}

.shape-2 {
 width: 60px;
 height: 60px;
 bottom: 20px;
 left: 20px;
 animation: float 10s infinite linear reverse;
}

.shape-3 {
 width: 30px;
 height: 30px;
 top: 50%;
 right: 10%;
 animation: float 8s infinite linear;
}

@keyframes float {
 0% { transform: translateY(0) rotate(0deg); }
 100% { transform: translateY(-100px) rotate(360deg); }
}

/* Objectives Grid */
.objectives-section {
 padding:60px;
}

.objectives-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 30px;
 max-width: 1200px;
 margin: 0 auto;
}

.objective-card {
 background: white;
 border-radius: 12px;
 padding: 40px 30px;
 box-shadow: 0 10px 30px rgba(0,4,86,0.08);
 transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 position: relative;
 overflow: hidden;
 border: 1px solid rgba(0,4,86,0.05);
}

.objective-card:hover {
 transform: translateY(-15px);
 box-shadow: 0 20px 40px rgba(0,4,86,0.15);
}

.objective-number {
 font-size: 3rem;
 font-weight: bold;
 color: rgba(0,4,86,0.05);
 margin-bottom: 15px;
 position: relative;
 display: inline-block;
}

.glitch {
 position: relative;
}

.glitch::before {
 content: attr(data-text);
 position: absolute;
 left: 0;
 top: 0;
 color: var(--theme-color-2);
 width: 100%;
 height: 100%;
 overflow: hidden;
 clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
 animation: glitch-effect 3s infinite;
}

@keyframes glitch-effect {
 0% { transform: translateX(0); }
 20% { transform: translateX(-5px); }
 40% { transform: translateX(5px); }
 60% { transform: translateX(-5px); }
 80% { transform: translateX(5px); }
 100% { transform: translateX(0); }
}

.objective-card h3 {
 color: var(--theme-color-1);
 margin-bottom: 20px;
 font-size: 1.1rem;
}

.hover-effect {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2));
 opacity: 0;
 transition: opacity 0.3s ease;
 z-index: -1;
}

.objective-card:hover .hover-effect {
 opacity: 0.05;
}

/* Impact Section */
.impact-section {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 50px;
 align-items: center;
 padding: 80px ;
 background: linear-gradient(to right, var(--theme-color-1), var(--theme-color-2));
 margin: 60px 0;
}

.impact-content h2 {
 font-size: 2.5rem;
 margin-bottom: 30px;
}
.impact-content p{
  color: var(--light-color);
}
.impact-list {
 list-style: none;
 padding: 0;
}

.impact-list li {
 margin-bottom: 20px;
 font-size: 1.2rem;
 display: flex;
 align-items: center;
 position: relative;
 padding-left: 40px;
}

.impact-list i {
 color: var(--theme-color-2);
 margin-right: 15px;
 font-size: 1.5rem;
 position: absolute;
 left: 0;
}

.image-container {
 position: relative;
 border-radius: 15px;
 overflow: hidden;
 transform-style: preserve-3d;
}

.image-container img {
 width: 100%;
 height: auto;
 transition: transform 0.5s ease;
}

.tilt-effect:hover {
 transform: rotateY(10deg) rotateX(5deg);
}

.image-border-animation {
 position: absolute;
 width: calc(100% - 10px);
 height: calc(100% - 10px);
 top: 5px;
 left: 5px;
 border: 2px solid var(--theme-color-2);
 border-radius: 12px;
 animation: border-pulse 3s infinite;
 pointer-events: none;
}

@keyframes border-pulse {
 0% { opacity: 0.3; }
 50% { opacity: 0.8; }
 100% { opacity: 0.3; }
}

/* Values Section */
.values-section {
 padding: 80px ;
}

.values-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 40px;
 max-width: 1000px;
 margin: 0 auto;
}

.value-card {
 text-align: center;
 padding: 30px 10px;
 background: white;
 border-radius: 15px;
 box-shadow: 0 10px 30px rgba(0,4,86,0.08);
 transition: all 0.5s ease;
 position: relative;
 overflow: hidden;
}

.value-card:hover {
 transform: translateY(-10px) scale(1.03);
 box-shadow: 0 20px 40px rgba(0,4,86,0.15);
}

.value-icon {
 font-size: 3rem;
 color: var(--theme-color-2);
 margin-bottom: 25px;
 display: inline-block;
}

.floating {
 animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-15px); }
 100% { transform: translateY(0px); }
}

.value-card h3 {
 color: var(--theme-color-1);
 margin-bottom: 20px;
 font-size: 1.5rem;
}

.ripple-effect {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: radial-gradient(circle at center, rgba(4,5,239,0.1) 0%, transparent 70%);
 opacity: 0;
 transition: opacity 0.3s ease;
}

.value-card:hover .ripple-effect {
 opacity: 1;
}

/* Founders Section */
.founders-section {
 padding: 100px 0;
 max-width: 1200px;
 margin: 0 auto;
 text-align: center;
}

.founders-content p {
 font-size: 1.2rem;
 line-height: 1.8;
 color: var(--text-color);
 margin-bottom: 40px;
}

.membership-info {
 background: var(--light-color);
 padding: 40px;
 border-radius: 15px;
 margin-top: 50px;
 position: relative;
 overflow: hidden;
}

.membership-info h3 {
 color: var(--theme-color-1);
 margin-bottom: 20px;
 font-size: 1.8rem;
}

.join-button {
 display: inline-flex;
 align-items: center;
 padding: 15px 30px;
 background: linear-gradient(45deg, var(--theme-color-1), var(--theme-color-2));
 color: white;
 border-radius: 50px;
 text-decoration: none;
 font-weight: 600;
 margin-top: 20px;
 position: relative;
 overflow: hidden;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 box-shadow: 0 5px 15px rgba(0,4,86,0.2);
}

.magnetic-effect {
 position: relative;
}

.magnetic-area {
 position: absolute;
 width: 150%;
 height: 150%;
 top: -25%;
 left: -25%;
}

.button-text {
 position: relative;
 z-index: 2;
}

.button-arrow {
 margin-left: 10px;
 position: relative;
 z-index: 2;
 transition: transform 0.3s ease;
}

.join-button:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 20px rgba(0,4,86,0.3);
}

.join-button:hover .button-arrow {
 transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 992px) {
 .impact-section {
   grid-template-columns: 1fr;
   padding: 60px 20px;
 }

 .impact-image {
   order: -1;
   margin-bottom: 40px;
 }

 .hero-content h1 {
   font-size: 2.5rem;
 }

 .mission-card {
   flex-direction: column;
 }

 .mission-icon {
   width: 100%;
 }
}

@media (max-width: 768px) {
 .hero-content h1 {
   font-size: 1.8rem;
 }

 .hero-content p {
   font-size: 1.2rem;
 }

 .section-title {
   font-size: 1.5rem;
 }

 .values-grid {
   grid-template-columns: 1fr;
 }
}
/*End of about section/
/* AI-Optimized Base Styles */
.intelli-slider {
   --theme-primary: #000456;
   --theme-secondary: #0405ef;
   --text-primary: #ffffff;
   --text-secondary: rgba(255,255,255,0.8);
   --glass-bg: rgba(255,255,255,0.12);
   --glass-border: rgba(255,255,255,0.2);
   --motion-reduction: reduce;
   --energy-saver: low;
   position: relative;
   width: 100%;
   height: 100vh;
   max-height: 1200px;
   overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
   .intelli-slider {
      --motion-reduction: reduced;
   }
}

@media (prefers-contrast: high) {
   .intelli-slider {
      --glass-bg: rgba(0,4,86,0.9);
      --glass-border: #ffffff;
   }
}

/* Smart Layout Engine */
.slider-engine {
   position: relative;
   width: 100%;
   height: 100%;
   contain: strict;
}

.smart-slide {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   opacity: 0;
   transition:
      opacity 0.8s var(--motion-reduction),
      transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
   transform: translateX(5%);
   pointer-events: none;
   will-change: transform, opacity;
}

.smart-slide[data-priority="high"] {
   z-index: 2;
}

.smart-slide.active {
   opacity: 1;
   transform: translateX(0);
   pointer-events: auto;
}

/* Adaptive Media System */
.adaptive-media {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.responsive-bg {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: opacity 0.6s ease;
}

.smart-slide:not(.active) .responsive-bg {
   opacity: 0;
}

/* Intelligent Content Layout */
.dynamic-content {
   position: absolute;
   bottom: 10%;
   left: 10%;
   width: 40%;
   min-width: min(500px, 90vw);
   padding: clamp(20px, 3vw, 40px);
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
   border-radius: 20px;
   box-shadow: 0 12px 40px rgba(0,4,86,0.25);
   transform: translateY(30px);
   opacity: 0;
   transition:
      transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.8s ease;
   transition-delay: 0.3s;
}

.smart-slide.active .dynamic-content {
   transform: translateY(0);
   opacity: 1;
}

.auto-size-heading {
   font-size: clamp(.6rem, 4vw, 2rem);
   font-weight: 800;
   margin-bottom: 1.5rem;
   color: var(--text-primary);
   line-height: 1.2;
   text-wrap: balance;
}

.smart-excerpt {
   font-size: clamp(1rem, 1.5vw, 1.2rem);
   line-height: 1.6;
   margin-bottom: 2rem;
   color: var(--text-secondary);
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* Context-Aware CTA */
.intelligent-cta {
   display: inline-flex;
   align-items: center;
   padding: 0.8rem 1.8rem;
   background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
   color: white;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   overflow: hidden;
   position: relative;
   isolation: isolate;
   transition: transform 0.3s ease;
}

.intelligent-cta::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--theme-secondary), var(--theme-primary));
   opacity: 0;
   transition: opacity 0.3s ease;
   z-index: -1;
}

.intelligent-cta:hover {
   transform: translateY(-3px);
}

.intelligent-cta:hover::before {
   opacity: 1;
}

.dynamic-arrow {
   width: 1.2rem;
   height: 1.2rem;
   margin-left: 0.5rem;
   transition: transform 0.3s ease;
}

.intelligent-cta:hover .dynamic-arrow {
   transform: translateX(5px);
}

/* Predictive Navigation */
.smart-controls {
   position: absolute;
   bottom: 5%;
   left: 0;
   width: 100%;
   z-index: 10;
   padding: 0 5%;
}

.predictive-thumbs {
   display: flex;
   gap: 0.75rem;
   justify-content: center;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
}

.smart-thumb {
   width: 5rem;
   height: 3.75rem;
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   transform: scale(0.95);
   transition: all 0.3s ease;
   border: none;
   padding: 0;
   background: none;
}

.smart-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.smart-thumb::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0,4,86,0.7), transparent);
   opacity: 0.7;
}

.thumb-label {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 0.5rem;
   font-size: 0.7rem;
   color: white;
   text-align: center;
   transform: translateY(100%);
   transition: transform 0.3s ease;
   background: rgba(0,4,86,0.8);
}

.smart-thumb:hover {
   transform: scale(1.05);
}

.smart-thumb:hover img {
   transform: scale(1.1);
}

.smart-thumb:hover .thumb-label {
   transform: translateY(0);
}

.smart-thumb.active {
   transform: scale(1.1);
   box-shadow: 0 0 0 2px var(--theme-secondary);
}

/* Motion-Adaptive Navigation */
.motion-aware-nav {
   display: flex;
   justify-content: center;
   gap: 1.5rem;
   align-items: center;
}

.smart-prev,
.smart-next {
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
   background: var(--glass-bg);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid var(--glass-border);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
   border: none;
   color: white;
}

.nav-icon {
   width: 1.5rem;
   height: 1.5rem;
   fill: currentColor;
   transition: transform 0.3s ease;
}

.smart-prev:hover,
.smart-next:hover {
   background: rgba(255,255,255,0.2);
   transform: translateY(-3px);
}

.smart-prev:hover .nav-icon {
   transform: translateX(-3px);
}

.smart-next:hover .nav-icon {
   transform: translateX(3px);
}

.performance-indicator {
   width: 4rem;
   height: 0.25rem;
   background: rgba(255,255,255,0.2);
   border-radius: 2px;
   position: relative;
   overflow: hidden;
}

.performance-indicator::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
   transform: scaleX(1);
   transform-origin: left;
   transition: transform 0.5s linear;
}

/* Smart Fallback State */
.smart-fallback {
   height: 50vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f5f5ff;
}

.fallback-content {
   text-align: center;
   max-width: 400px;
   padding: 2rem;
}

.fallback-icon {
   width: 3rem;
   height: 3rem;
   fill: var(--theme-primary);
   margin-bottom: 1rem;
}

.smart-loader {
   width: 100%;
   height: 4px;
   background: rgba(0,4,86,0.1);
   border-radius: 2px;
   margin-top: 2rem;
   overflow: hidden;
   position: relative;
}

.smart-loader::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background: linear-gradient(to right, transparent, var(--theme-primary), transparent);
   animation: loadingWave 2s infinite linear;
}

@keyframes loadingWave {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
}

/* Adaptive Breakpoints */
@media (max-width: 1024px) {
   .dynamic-content {
      left: 5%;
      width: 50%;
   }

   .predictive-thumbs {
      gap: 0.5rem;
   }

   .smart-thumb {
      width: 4rem;
      height: 3rem;
   }
}

@media (max-width: 768px) {
   .intelli-slider {
      height: 80vh;
   }

   .dynamic-content {
      left: 5%;
      width: 90%;
      bottom: 5%;
   }

   .smart-excerpt {
      -webkit-line-clamp: 3;
   }

   .predictive-thumbs {
      display: none;
   }

   .motion-aware-nav {
      position: absolute;
      bottom: 1rem;
      left: 0;
      width: 100%;
   }
}

@media (max-width: 480px) {
   .intelli-slider {
      height: 70vh;
   }

   .auto-size-heading {
      font-size: 1.8rem;
   }

   .intelligent-cta {
      padding: 0.6rem 1.2rem;
      font-size: 0.9rem;
   }
}

/* Reduced Motion Variants */
@media (prefers-reduced-motion: reduce) {
   .smart-slide {
      transition: opacity 0.5s ease;
   }

   .dynamic-content {
      transition: opacity 0.5s ease;
   }

   .intelligent-cta:hover {
      transform: none;
   }

   .smart-thumb:hover {
      transform: none;
   }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
   .dynamic-content {
      background: var(--theme-primary);
      border: 2px solid white;
   }

   .intelligent-cta {
      outline: 2px solid white;
   }

   .smart-thumb.active {
      outline: 3px solid var(--theme-secondary);
   }
}
/*Sliders ends here*/
/* Quantum Icon Grid System */
.icon_structure {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #0a0a14 0%, #000456 100%);
  position: relative;
  overflow: hidden;
}

.icon_structure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(4, 5, 239, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 240, 255, 0.15) 0%, transparent 50%);
  z-index: 0;
}

.four_columns_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}

/* Quantum Energy Card */
.icon_card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid rgba(0, 240, 255, 0.15);
  box-shadow: 
    0 8px 32px rgba(0, 4, 86, 0.3),
    0 0 0 1px rgba(0, 240, 255, 0.1) inset;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  overflow: hidden;
}

.icon_card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(0, 240, 255, 0) 0%,
    rgba(0, 240, 255, 0) 30%,
    rgba(0, 240, 255, 0.1) 45%,
    rgba(0, 240, 255, 0) 60%,
    rgba(0, 240, 255, 0) 100%
  );
  transform: rotate(30deg);
  opacity: 0;
  transition: all 0.8s ease;
}

.icon_card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 
    0 12px 40px rgba(0, 4, 86, 0.5),
    0 0 0 1px rgba(0, 240, 255, 0.3) inset;
  border-color: rgba(0, 240, 255, 0.4);
}

.icon_card:hover::before {
  opacity: 1;
  animation: hologramSweep 3s linear infinite;
}

/* Holographic Icon Container */
.icon_list {
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.icon_image {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.icon_list::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.icon_card:hover .icon_image {
  transform: scale(1.1);
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.8));
}

.icon_card:hover .icon_list::before {
  opacity: 1;
}

/* Quantum Typography */
.title_head_icon {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #00f0ff; /* quantum-blue */
  background: linear-gradient(90deg, #00f0ff, #9d00ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
}

.title_head_icon::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f0ff, #9d00ff);
  transition: width 0.4s ease;
}

.icon_card:hover .title_head_icon::after {
  width: 100%;
}

.desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  transition: all 0.4s ease;
}

.icon_card:hover .desc {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

/* Energy Pulse Animation */
@keyframes hologramSweep {
  0% {
    transform: rotate(30deg) translate(-30%, -30%);
  }
  100% {
    transform: rotate(30deg) translate(30%, 30%);
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .four_columns_grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
  
  .icon_card {
    padding: 2rem 1.5rem;
  }
  
  .icon_image {
    width: 60px;
    height: 60px;
  }
}
/* Quantum Grid Styles */
.quantum-section-header {
  position: relative;
  text-align: center;
  margin: 3rem 0;
}

.holographic-title {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 600;
  background: linear-gradient(90deg, #00f0ff, #9d00ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  padding-bottom: 0.5rem;
}

.quantum-underline {
  position: relative;
}

.quantum-underline::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00f0ff, #9d00ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.quantum-section-header:hover .quantum-underline::after {
  transform: scaleX(1);
}

.energy-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.quantum-section-header:hover .energy-pulse {
  opacity: 0.6;
  animation: pulse 3s infinite;
}

.space-3d {
  height: 3rem;
  position: relative;
}

.space-3d::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
}

/* Quantum Grid Layout */
.quantum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  align-items: center;
  position: relative;
  padding: 20px;
}

.quantum-panel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

/* Holographic Image Panel */
.image-panel {
  perspective: 1000px;
}

.holographic-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  box-shadow: 0 20px 40px rgba(0, 4, 86, 0.3);
}

.quantum-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
  position: relative;
  z-index: 2;
}

.hologram-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    rgba(0, 240, 255, 0.1) 0%, 
    rgba(157, 0, 255, 0.1) 50%, 
    rgba(0, 240, 255, 0.1) 100%);
  mix-blend-mode: overlay;
  z-index: 1;
  animation: holoPulse 8s infinite alternate;
}

.particle-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(0, 240, 255, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(157, 0, 255, 0.05) 0%, transparent 20%);
  z-index: 0;
}

/* Content Panel Styling */
.content-panel {
  padding: 2.5rem;
  background: rgba(10, 10, 30, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 4, 86, 0.3);
  transition: all 0.6s ease;
}

.neon-badge {
  display: inline-block;
  padding: 0.3rem 1rem;
  background: rgba(0, 240, 255, 0.1);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.quantum-heading {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.gradient-text {
  background: linear-gradient(90deg, #00f0ff, #9d00ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quantum-desc {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  margin-bottom: 2rem;
  position: relative;
}

.energy-trail {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f0ff, #9d00ff);
  transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Hover Effects */
.quantum-grid:hover .holographic-frame {
  transform: translateZ(20px);
}

.quantum-grid:hover .quantum-image {
  transform: scale(1.05);
}

.quantum-grid:hover .content-panel {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 10px 40px rgba(0, 240, 255, 0.2);
}

.quantum-grid:hover .energy-trail {
  width: 100%;
}

/* Animations */
@keyframes holoPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .quantum-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .content-panel {
    padding: 1.5rem;
  }
  
  .quantum-heading {
    font-size: 1.5rem;
  }
}

/* Quantum Banner System */
.nebula-banner-system {
    position: relative;
    width: 100%;
    perspective: 1200px;
}

/* Quantum Parallax Banner System */
.quantum-parallax-banner {
    position: relative;
    height: 100vh;
    min-height: 800px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transform-style: preserve-3d;
    overflow: hidden;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    /* Holographic Overlay */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            135deg,
            rgba(0, 4, 86, 0.7) 0%,
            rgba(4, 5, 239, 0.5) 100%
        );
        z-index: 1;
    }
    
    /* Particle Effect */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            radial-gradient(circle at 20% 30%, rgba(4, 5, 239, 0.2) 0%, transparent 25%),
            radial-gradient(circle at 80% 70%, rgba(0, 240, 255, 0.2) 0%, transparent 25%);
        z-index: 2;
    }
}

/* Dynamic Depth Layers */
.quantum-parallax-banner .parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    z-index: -1;
}

.quantum-parallax-banner .layer-1 {
    transform: translateZ(-1px) scale(1.01);
    filter: blur(1px);
    opacity: 0.8;
}

.quantum-parallax-banner .layer-2 {
    transform: translateZ(-2px) scale(1.02);
    filter: blur(2px);
    opacity: 0.6;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .quantum-parallax-banner {
        height: 80vh;
        min-height: 600px;
        background-attachment: scroll;
    }
}

.quantum-parallax-banner:hover {
    transform: translateZ(30px) rotateX(1deg) rotateY(1deg);
}

.holographic-overlay[data-theme="dark"] {
    background: linear-gradient(135deg, rgba(0,4,86,0.85) 0%, rgba(4,5,239,0.75) 100%);
}

.holographic-overlay[data-theme="light"] {
    background: linear-gradient(135deg, rgba(4,5,239,0.6) 0%, rgba(0,240,255,0.5) 100%);
}

.nebula-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 5%;
    text-align: center;
}
.nebula-title span{
  font-size: 2rem;
}

/* Glitch Title Effect */
.title-glitch {
    position: relative;
    display: inline-block;
    color: white;
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-transform: uppercase;
    animation: glitch-effect 5s infinite linear;
}

.title-glitch::before,
.title-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.title-glitch::before {
    color: var(--quantum-blue);
    z-index: -1;
    animation: glitch-effect-1 2.5s infinite linear alternate-reverse;
}

.title-glitch::after {
    color: var(--theme-color-2);
    z-index: -2;
    animation: glitch-effect-2 2.5s infinite linear alternate-reverse;
}

/* Holographic Description */
.nebula-desc {
    position: relative;
    max-width: 800px;
    margin: 2rem 0;
    color: white;
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 2rem;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 240, 255, 0.2);
}

.desc-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.5;
}

/* Quantum CTA Button */
.holographic-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    color: white;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    overflow: hidden;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.5s ease;
}

.button-core {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
    z-index: -1;
    opacity: 0.8;
    transition: all 0.5s ease;
}

.button-text {
    position: relative;
    z-index: 1;
    text-shadow: var(--text-glow);
}

.button-aura {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, var(--quantum-blue) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.holographic-button:hover {
    transform: translateY(-5px);
    box-shadow: var(--neon-glow);
}

.holographic-button:hover .button-aura {
    opacity: 0.4;
}

.holographic-button:hover .button-core {
    opacity: 1;
}

/* Particle Network */
.particle-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Digital Grid Overlay */
.digital-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
    pointer-events: none;
}
/* Quantum Design Variables */

/* Quantum Identity Section */
.quantum-identity {
  position: relative;
  padding: 5rem 2rem;
  background: linear-gradient(to bottom, 
    rgba(10, 10, 30, 0.9) 0%, 
    rgba(4, 5, 239, 0.1) 50%,
    rgba(10, 10, 30, 0.9) 100%);
  overflow: hidden;
}

.quantum-title-container {
  position: relative;
  text-align: center;
  margin-bottom: 4rem;
}

.quantum-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--star-light);
  position: relative;
  display: inline-block;
  padding: 0 2rem;
}
.quantum-section-title span{
  font-size: 2rem;
}
.title-glitch {
  position: relative;
}

.title-glitch::before,
.title-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--quantum-blue), var(--hologram-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
}

.title-glitch::before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 45%, 0% 45%);
  transform: translate(-3px, -3px);
}

.title-glitch::after {
  clip-path: polygon(0% 55%, 100% 55%, 100% 100%, 0% 100%);
  transform: translate(3px, 3px);
}

.quantum-title-container:hover .title-glitch::before,
.quantum-title-container:hover .title-glitch::after {
  opacity: 0.7;
  animation: glitchEffect 0.8s infinite alternate;
}

.title-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, 
    rgba(0, 240, 255, 0.2) 0%, 
    transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.quantum-title-container:hover .title-aura {
  opacity: 0.6;
  animation: pulse 4s infinite;
}

/* Tri-Column Quantum Grid */
.quantum-triad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.quantum-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(20, 20, 40, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 4, 86, 0.3);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  min-height: 350px;
}

.card-hologram {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hologram-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
}

.energy-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, 
    rgba(0, 240, 255, 0.1) 0%, 
    transparent 60%);
  transform: translate(-50%, -50%);
  animation: corePulse 6s infinite alternate;
}

.card-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--star-light);
  position: relative;
}

.neon-highlight {
  color: var(--quantum-blue);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.title-underline {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--quantum-blue), var(--hologram-pink));
  transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.quantum-card:hover .title-underline {
  width: 100%;
}

.quantum-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.data-stream {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--quantum-blue), 
    transparent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.quantum-card:hover .data-stream {
  transform: scaleX(1);
  transform-origin: left;
}

.quantum-particle-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Quantum Divider */
.quantum-divider {
  height: 1px;
  width: 100%;
  margin: 4rem 0 0;
  position: relative;
}

.particle-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 240, 255, 0.3), 
    transparent);
}

/* Card Specific Styling */
.vision-card {
  border-top: 3px solid var(--quantum-blue);
}

.mission-card {
  border-top: 3px solid var(--hologram-pink);
}

.objectives-card {
  border-top: 3px solid var(--neon-purple);
}

/* Animations */
@keyframes glitchEffect {
  0% { transform: translate(-3px, -3px); }
  20% { transform: translate(3px, 3px); }
  40% { transform: translate(-3px, 3px); }
  60% { transform: translate(3px, -3px); }
  80% { transform: translate(-3px, 0); }
  100% { transform: translate(3px, 0); }
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
}

@keyframes corePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .quantum-section-title {
    font-size: 1.5rem;
  }
  
  .quantum-triad-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .quantum-card {
    min-height: 300px;
  }
}

/* Quantum Space Divider */
.space {
    height: 100px;
    width: 100%;
    position: relative;
    background: linear-gradient(180deg, var(--theme-color-1), transparent);
}

.space::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--quantum-blue), transparent);
    box-shadow: 0 0 10px var(--quantum-blue);
}

/* Error State */
.quantum-error {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background: var(--theme-color-1);
}

.error-hologram {
    position: relative;
    padding: 3rem;
    border: 1px solid var(--theme-color-2);
    box-shadow: inset 0 0 20px var(--theme-color-2), 0 0 20px var(--theme-color-2);
}

.hologram-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(transparent 49%, var(--quantum-blue) 49%, var(--quantum-blue) 51%, transparent 51%),
        linear-gradient(90deg, transparent 49%, var(--quantum-blue) 49%, var(--quantum-blue) 51%, transparent 51%);
    background-size: 20px 20px;
    opacity: 0.3;
}

.error-message {
    color: white;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
    text-shadow: 0 0 10px var(--quantum-blue);
    animation: error-pulse 2s infinite;
}

/* Animations */
@keyframes glitch-effect {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

@keyframes glitch-effect-1 {
    0% { transform: translate(0); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); }
    20% { transform: translate(-5px, 5px); }
    40% { transform: translate(-5px, -5px); }
    60% { transform: translate(5px, 5px); }
    80% { transform: translate(5px, -5px); }
    100% { transform: translate(0); clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
}

@keyframes error-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .quantum-parallax-banner {
        min-height: 700px;
        background-attachment: scroll;
    }
}

@media (max-width: 768px) {
    .quantum-parallax-banner {
        min-height: 600px;
    }
    
    .nebula-desc {
        font-size: 1rem;
        padding: 1.5rem;
    }
    
    .holographic-button {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .quantum-parallax-banner {
        min-height: 500px;
    }
    
    .nebula-desc {
        padding: 1rem;
    }
    
    .error-message {
        font-size: 1.5rem;
        letter-spacing: 0.3rem;
    }
}

/* Base Styles */
.head h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.under-line-color-oranger {
    position: relative;
    display: inline-block;
    color: white;
}

.under-line-color-oranger::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
    border-radius: 2px;
    box-shadow: var(--neon-glow);
}

.space {
    height: 2rem;
}

/* Futuristic Carousel */
.futuristic-carousel {
    position: relative;
    padding: 2rem 0;
}

.futuristic-carousel .owl-stage-outer {
    padding: 20px 0;
    overflow: hidden;
}

.futuristic-carousel .owl-item {
    transition: all 0.4s ease;
    transform-style: preserve-3d;
}

.futuristic-carousel .owl-item.center {
    transform: scale(1.1);
    z-index: 10;
}

/* Futuristic Card */
.futuristic-card {
    position: relative;
    background: rgba(0, 4, 86, 0.15);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(4, 5, 239, 0.3);
    box-shadow: 0 8px 32px rgba(0, 4, 86, 0.3), var(--neon-glow);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    height: 380px;
    display: flex;
    flex-direction: column;
    margin: 0 15px;
}

.futuristic-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 4, 86, 0.4), 0 0 15px rgba(4, 5, 239, 0.8), 0 0 30px rgba(0, 212, 255, 0.6);
}

.card-hologram {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hologram-gradient);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

.card-glare {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: linear-gradient(to bottom right, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    transform: rotate(30deg);
    pointer-events: none;
    z-index: 2;
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid rgba(4, 5, 239, 0.3);
    filter: saturate(1.2) contrast(1.1);
}

.card-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3;
}

.title_head {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: white;
    text-shadow: var(--text-glow);
    flex: 1;
}

.card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.read_more {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(4, 5, 239, 0.4);
}

.read_more:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(4, 5, 239, 0.6);
    text-shadow: var(--text-glow);
}

.read_more span {
    margin-right: 8px;
}

.hologram-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(4, 5, 239, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.hologram-btn:hover {
    background: rgba(4, 5, 239, 0.3);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(4, 5, 239, 0.5);
}

.card-particle-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background-image: radial-gradient(circle at 50% 50%, transparent 95%, rgba(4, 5, 239, 0.2) 100%);
}

/* Error State */
.futuristic-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: rgba(0, 4, 86, 0.2);
    border-radius: 16px;
    border: 1px dashed rgba(4, 5, 239, 0.5);
    color: white;
    text-align: center;
}

.futuristic-error p {
    margin-top: 1rem;
    font-size: 1.2rem;
    text-shadow: var(--text-glow);
}

/* Responsive Design */
@media (max-width: 768px) {
  
    .head h1 {
        font-size: 2rem;
    }
    
    .futuristic-card {
        height: 340px;
        margin: 0 10px;
    }
    
    .card-image {
        height: 160px;
    }
    
    .futuristic-carousel .owl-item.center {
        transform: scale(0.5);
    }
}

@media (max-width: 480px) {
    .head h1 {
        font-size: 1.8rem;
    }
    
    .futuristic-card {
        height: 300px;
    }
    
    .card-image {
        height: 140px;
    }
    
    .title_head {
        font-size: 1.2rem;
    }
}

/* Base Heading Styles */
.head h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

.under-line-color-oranger {
    position: relative;
    display: inline-block;
    color: white;
}

.under-line-color-oranger::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
    border-radius: 2px;
    box-shadow: var(--neon-glow);
}

/* Futuristic Orphanage Section */
.futuristic-orphanage {
    position: relative;
    padding: 4rem 2rem;
    overflow: hidden;
    background: rgba(0, 4, 86, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    margin: 2rem auto;
    max-width: 1200px;
    border: 1px solid rgba(4, 5, 239, 0.3);
    box-shadow: var(--neon-glow);
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Holographic Image Panel */
.image-side {
    position: relative;
    perspective: 1000px;
}

.holographic-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 4, 86, 0.5);
    transform-style: preserve-3d;
    height: 400px;
}

.holographic-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1) saturate(1.2);
    transition: transform 0.5s ease;
}

.holographic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hologram-gradient);
    mix-blend-mode: overlay;
    pointer-events: none;
}

.particle-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 50% 50%, transparent 95%, rgba(4, 5, 239, 0.2) 100%);
    pointer-events: none;
}

.interactive-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Interactive Text Panel */
.text-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.neon-heading {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: white;
    text-shadow: var(--text-glow);
    position: relative;
    display: inline-block;
}

.neon-heading::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
    box-shadow: var(--neon-glow);
}

.glowing-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Futuristic CTA Button */
.cta-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2));
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(4, 5, 239, 0.4);
    max-width: 250px;
    z-index: 1;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(4, 5, 239, 0.6);
}

.cta-button .button-text {
    position: relative;
    z-index: 2;
    margin-right: 10px;
}

.cta-button .button-icon {
    position: relative;
    z-index: 2;
    display: flex;
}

.cta-button .button-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--theme-color-2), var(--theme-color-1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.cta-button:hover .button-hover-effect {
    opacity: 1;
}

/* Impact Meter */
.impact-meter {
    background: rgba(0, 4, 86, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(4, 5, 239, 0.3);
    box-shadow: 0 0 15px rgba(4, 5, 239, 0.2);
}

.meter-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meter-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
    border-radius: 5px;
    transition: width 1.5s ease-out;
}

.meter-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: meterGlow 2s infinite linear;
    opacity: 0.7;
}

.meter-stats {
    display: flex;
    gap: 1.5rem;
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    text-shadow: var(--text-glow);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Floating Particles */
.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Animations */
@keyframes meterGlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Responsive Design */
@media (max-width: 992px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
    
    .holographic-frame {
        height: 300px;
    }
    
    .text-side {
        text-align: center;
        align-items: center;
    }
    
    .meter-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .head h1 {
        font-size: 2.2rem;
    }
    
    .neon-heading {
        font-size: 2rem;
    }
    
    .futuristic-orphanage {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .head h1 {
        font-size: 1.8rem;
    }
    
    .neon-heading {
        font-size: 1.6rem;
    }
    
    .glowing-text {
        font-size: 1rem;
    }
    
    .meter-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
}
/* ===== BASE STYLES ===== */
.ngo-showcase {
  --primary-color: #4a6bff;
  --secondary-color: #00d4ff;
  --dark-color: #1a1a2e;
  --light-color: #f9f9ff;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 5rem 0;
  background: var(--light-color);
  font-family: 'Inter', system-ui, sans-serif;
}

.showcase-container {
  max-width: 1400px;
  margin: 0 auto 6rem;
  padding: 0 2rem;
}

.showcase-header {
  text-align: center;
  margin-bottom: 3rem;
}

.showcase-header h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--dark-color);
  line-height: 1.2;
}

.highlight-accent {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

/* ===== COUNTER STYLES ===== */
.counter-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.counter-box {
  background: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.counter-value {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.counter-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
  margin-top: 0.3rem;
}

/* ===== CAROUSEL STYLES ===== */
.carousel-container {
  position: relative;
  padding: 2rem 0;
}

.logo-carousel {
  display: flex;
  gap: 3rem;
  padding: 2rem 3rem;
  margin: 0 -1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.logo-carousel::-webkit-scrollbar {
  display: none;
}

.logo-card {
  scroll-snap-align: center;
  flex: 0 0 220px;
  height: 160px;
  margin: 0 0.5rem;
  padding: .5rem 1rem;
}

.logo-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.logo-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: var(--transition);
}

.impact-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #ff4a4a, #ff9e4a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.impact-badge svg {
  width: 14px;
  height: 14px;
  fill: white;
}

/* ===== HOVER EFFECTS ===== */
.logo-card:hover .logo-wrapper {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.logo-card:hover .logo-image {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* ===== EMPTY STATES ===== */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(255,255,255,0.6);
  border-radius: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.empty-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  background: rgba(74,107,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-icon svg {
  width: 30px;
  height: 30px;
  fill: var(--primary-color);
}

.empty-state p {
  font-size: 1.1rem;
  color: #555;
  margin-top: 0.5rem;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
  .logo-carousel {
    gap: 2.5rem;
    padding: 1.5rem 2.5rem;
  }
  
  .logo-card {
    flex: 0 0 180px;
    height: 140px;
  }
}

@media (max-width: 768px) {
  .ngo-showcase {
    padding: 3rem 0;
  }
  
  .showcase-container {
    margin-bottom: 4rem;
  }
  
  .logo-carousel {
    gap: 2rem;
    padding: 1.25rem 2rem;
  }
  
  .logo-card {
    flex: 0 0 160px;
    height: 120px;
    margin: 0 0.25rem;
  }
  
  .counter-value {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .showcase-header h1 {
    font-size: 1.8rem;
  }
  
  .logo-carousel {
    gap: 1.75rem;
    padding: 1rem 1.5rem;
  }
  
  .logo-card {
    flex: 0 0 140px;
    height: 100px;
  }
  
  .logo-wrapper {
    padding: 1.5rem;
  }
}
/*Faq starts*/
.quantum-hologram-interface {
    position: relative;
    min-height: 100vh;
    background: var(--dark-matter);
    overflow: hidden;
    padding: 2rem;
}

.neural-connection {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    z-index: 100;
    color: var(--quantum-core);
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 5px var(--quantum-core);
}

.connection-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff0000;
    margin-right: 0.5rem;
    position: relative;
}

.connection-status.active {
    background: var(--energy-core);
    box-shadow: var(--neural-glow);
}

.connection-status.pulse {
    animation: quantum-pulse 0.5s ease-out;
}

.connection-text {
    font-size: 0.8rem;
}

.holo-surface {
    position: relative;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem;
    border-radius: 20px;
    background: rgba(10, 10, 20, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: inset 0 0 50px rgba(0, 240, 255, 0.1),
                0 0 50px rgba(0, 240, 255, 0.1);
    z-index: 2;
}

.quantum-field-generator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    opacity: 0.3;
}

.particle-ring {
    position: absolute;
    border: 1px solid var(--quantum-core);
    border-radius: 50%;
    animation: quantum-spin 40s linear infinite;
}

.particle-ring {
    width: 150%;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.1;
}

.particle-ring.inner {
    width: 120%;
    height: 240px;
    animation-direction: reverse;
    opacity: 0.05;
}

.holo-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 3rem;
    position: relative;
}

.holo-title span {
    display: inline-block;
    position: relative;
}

.neural-impulse {
    color: var(--quantum-core);
    text-shadow: var(--quantum-glow);
    animation: neural-impulse 4s infinite;
}

.quantum-fluctuation {
    color: var(--hologram-primary);
    text-shadow: var(--hologram-glow);
    animation: quantum-fluctuation 5s infinite;
}

.holographic-dispersion {
    background: linear-gradient(90deg, var(--quantum-core), var(--hologram-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    animation: holographic-dispersion 6s infinite;
}

.quantum-entanglement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

.holo-faq-node {
    background: rgba(20, 20, 40, 0.5);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 240, 255, 0.1);
    transition: var(--transition-quantum);
    position: relative;
}

.holo-faq-node[data-quantum-state="active"] {
    border-color: var(--quantum-core);
    box-shadow: var(--quantum-glow);
}

.holo-faq-node:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
}

.neural-impulse-trigger {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.holo-question {
    font-size: 1.2rem;
    color: var(--quantum-core);
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quantum-chevron {
    width: 20px;
    height: 20px;
    position: relative;
    margin-left: 1rem;
    transition: var(--transition-quantum);
}

.chevron-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--quantum-core);
    transition: var(--transition-quantum);
}

.chevron-line:first-child {
    transform: rotate(45deg);
    top: 7px;
}

.chevron-line:last-child {
    transform: rotate(-45deg);
    bottom: 7px;
}

.holo-faq-node[data-quantum-state="active"] .chevron-line:first-child {
    transform: rotate(-45deg);
}

.holo-faq-node[data-quantum-state="active"] .chevron-line:last-child {
    transform: rotate(45deg);
}

.tachyon-stream {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tachyon-stream), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-quantum);
}

.holo-faq-node[data-quantum-state="active"] .tachyon-stream {
    transform: scaleX(1);
}

.holo-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: var(--transition-quantum);
    padding: 0 1.5rem;
}

.holo-faq-node[data-quantum-state="active"] .holo-answer {
    padding: 0 1.5rem 1.5rem;
}

.answer-content {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.quantum-signature {
    display: flex;
    align-items: center;
    color: var(--energy-core);
    font-size: 0.8rem;
    opacity: 0.8;
}

.signature-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--energy-core);
    margin-right: 0.5rem;
    animation: quantum-pulse 2s infinite;
}

.quantum-void {
    text-align: center;
    padding: 5rem;
    position: relative;
}

.void-message {
    color: var(--hologram-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-shadow: var(--hologram-glow);
}

.void-pulse {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--hologram-primary);
    margin: 0 auto;
    animation: void-pulse 3s infinite;
}

.holo-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.quantum-nav-btn {
    padding: 0.8rem 1.5rem;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--quantum-core);
    color: var(--quantum-core);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-quantum);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.quantum-nav-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: var(--quantum-glow);
}

.btn-holo {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--quantum-core);
    margin-right: 0.5rem;
    animation: quantum-pulse 2s infinite;
}

.quantum-field-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.quantum-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--quantum-core);
    width: var(--particle-size);
    height: var(--particle-size);
    opacity: var(--particle-opacity);
    animation: quantum-float var(--particle-speed) linear infinite;
    filter: blur(1px);
}

.quantum-ripple {
    position: fixed;
    border: 1px solid var(--quantum-core);
    border-radius: 10px;
    transform: scale(1);
    opacity: 1;
    transition: transform 1s ease, opacity 1s ease;
    pointer-events: none;
    z-index: 10;
}

@keyframes quantum-pulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

@keyframes quantum-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes quantum-float {
    0% { transform: translate(0, 0); }
    25% { transform: translate(100vw, 25vh); }
    50% { transform: translate(50vw, 75vh); }
    75% { transform: translate(-50vw, 50vh); }
    100% { transform: translate(0, 0); }
}

@keyframes neural-impulse {
    0%, 100% { transform: translateY(0); text-shadow: 0 0 10px var(--quantum-core); }
    50% { transform: translateY(-5px); text-shadow: 0 0 20px var(--quantum-core); }
}

@keyframes quantum-fluctuation {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes holographic-dispersion {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(20deg); }
}

@keyframes void-pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.2; }
    100% { transform: scale(0.8); opacity: 0.5; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .holo-title {
        font-size: 2rem;
    }

    .quantum-entanglement-grid {
        grid-template-columns: 1fr;
    }

    .holo-surface {
        padding: 1.5rem;
    }

    .neural-impulse-trigger {
        padding: 1rem;
    }
}
/*faq ends*/
/*apply design codes starts*/
/* Quantum Application Portal Base */
.quantum-application-portal {
    position: relative;
    min-height: 100vh;
    background: var(--dark-matter);
    color: #fff;
    font-family: 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    padding: 2rem;
}

.quantum-applicant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.applicant-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.neural-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--energy-core);
    box-shadow: var(--neural-glow);
    position: relative;
}

.neural-pulse.pulse-active {
    transform: scale(1.5);
    opacity: 0.7;
}

.status-text {
    font-size: 0.9rem;
    color: var(--quantum-core);
    text-shadow: 0 0 5px var(--quantum-core);
    letter-spacing: 1px;
}

.security-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1.5rem;
    padding: 0.3rem 0.8rem;
    background: rgba(0, 4, 86, 0.3);
    border-radius: 20px;
    border: 1px solid var(--application-accent);
}

.badge-icon {
    font-size: 0.8rem;
}

.badge-text {
    font-size: 0.7rem;
    color: var(--application-accent);
}

.application-time-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.time-glitch {
    font-size: 0.8rem;
    color: var(--hologram-primary);
    text-shadow: 0 0 5px var(--hologram-primary);
}

.time-fluctuation {
    font-size: 1rem;
    color: var(--quantum-core);
    font-family: 'Courier New', monospace;
}

/* Quantum Application Matrix */
.quantum-application-matrix {
    position: relative;
    background: rgba(18, 18, 32, 0.8);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.1),
                0 0 40px rgba(0, 240, 255, 0.1);
    backdrop-filter: blur(5px);
    overflow: hidden;
}

.quantum-field-generator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    opacity: 0.1;
}

.particle-orbital {
    position: absolute;
    border: 1px solid var(--quantum-core);
    border-radius: 50%;
}

.particle-orbital.one {
    width: 150%;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: quantum-spin 40s linear infinite;
}

.particle-orbital.two {
    width: 120%;
    height: 240px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: quantum-spin-reverse 35s linear infinite;
    opacity: 0.7;
}

.application-core {
    position: relative;
}

.application-header {
    margin-bottom: 2rem;
}

.holographic-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.title-segment {
    display: inline-block;
    margin: 0 0.5rem;
}

.title-segment.quantum {
    color: var(--quantum-core);
    text-shadow: var(--quantum-glow);
}

.title-segment.application {
    color: var(--hologram-primary);
    text-shadow: var(--hologram-glow);
}

.title-segment.portal {
    color: var(--energy-core);
    text-shadow: var(--neural-glow);
}

.file-requirement-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    background: rgba(157, 0, 255, 0.1);
    border: 1px solid var(--application-accent);
    border-radius: 6px;
    margin-top: 1rem;
}

.notice-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--application-accent);
    animation: quantum-pulse 1.5s infinite;
}

.notice-text {
    font-size: 0.9rem;
    color: var(--application-accent);
    letter-spacing: 1px;
}

/* Quantum Form Elements */
.quantum-application-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.quantum-form-grid {
    display: grid;
    gap: 1.5rem;
}

.two-columns {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}

.three-columns {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.quantum-form-group {
    position: relative;
}

.holographic-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--quantum-core);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.label-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--quantum-core);
    animation: quantum-pulse 2s infinite;
}

.quantum-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(0, 4, 86, 0.3);
    border: 1px solid var(--quantum-core);
    border-radius: 6px;
    color: var(--quantum-core);
    font-size: 1rem;
    transition: var(--transition-quantum);
}

.quantum-input:focus {
    outline: none;
    box-shadow: var(--quantum-glow);
}

.input-energy-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--quantum-core), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-quantum);
}

.quantum-input:focus ~ .input-energy-flow {
    transform: scaleX(1);
}
.size-input{
      margin-right: 35px;
}
.full-width {
    grid-column: 1 / -1;
    margin-right: 35px;
}

/* Quantum File Upload */
.quantum-file-container {
    position: relative;
    cursor: pointer;
}

.quantum-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-display {
    padding: 1.5rem 1rem;
    background: rgba(0, 4, 86, 0.3);
    border: 1px dashed var(--quantum-core);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition-quantum);
}

.file-icon {
    font-size: 1.5rem;
    color: var(--quantum-core);
}

.file-instruction {
    font-size: 0.9rem;
    color: var(--quantum-core);
    text-align: center;
}

.file-energy-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--quantum-core), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-quantum);
}

.quantum-file-container:hover .file-upload-display {
    background: rgba(0, 4, 86, 0.5);
    border-color: var(--hologram-primary);
}

.quantum-file-container:hover .file-energy-flow {
    transform: scaleX(1);
}

.quantum-file-input:focus ~ .file-upload-display {
    box-shadow: var(--quantum-glow);
}

.quantum-file-input:focus ~ .file-energy-flow {
    transform: scaleX(1);
}

.file-selected .file-upload-display {
    border-style: solid;
    background: rgba(0, 240, 255, 0.1);
}

.file-confirmation-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background: radial-gradient(circle, rgba(0,240,255,0.3) 0%, rgba(0,240,255,0) 70%);
    animation: quantum-pulse 1s;
    pointer-events: none;
}

/* Quantum Form Actions */
.quantum-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.quantum-submit-btn {
    padding: 0.8rem 2rem;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--quantum-core);
    color: var(--quantum-core);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-quantum);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.quantum-submit-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: var(--quantum-glow);
    transform: translateY(-2px);
}

.btn-core-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--quantum-core);
    animation: quantum-pulse 1.5s infinite;
}

.btn-energy-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--quantum-core), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-quantum);
}

.quantum-submit-btn:hover .btn-energy-wave {
    transform: scaleX(1);
}

/* Quantum Background Effects */
.quantum-application-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.quantum-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--particle-color);
    width: var(--particle-size);
    height: var(--particle-size);
    opacity: var(--particle-opacity);
    animation: quantum-float var(--particle-speed) linear infinite;
    filter: blur(1px);
    top: var(--particle-y);
    left: var(--particle-x);
}

/* Animations */
@keyframes quantum-pulse {
    0% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.3; transform: scale(0.9); }
}

@keyframes quantum-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes quantum-spin-reverse {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes quantum-float {
    0% { transform: translate(0, 0); }
    25% { transform: translate(20px, 10px); }
    50% { transform: translate(-10px, 20px); }
    75% { transform: translate(15px, -5px); }
    100% { transform: translate(0, 0); }
}

@keyframes timeGlitch {
    0% { text-shadow: 0 0 5px var(--quantum-core); }
    25% { text-shadow: 2px 0 5px var(--hologram-primary); }
    50% { text-shadow: -2px 0 5px var(--energy-core); }
    75% { text-shadow: 0 2px 5px var(--quantum-core); }
    100% { text-shadow: 0 0 5px var(--quantum-core); }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .three-columns {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .quantum-application-portal {
        padding: 1rem;
    }

    .quantum-application-matrix {
        padding: 1.5rem;
    }

    .holographic-title {
        font-size: 2rem;
    }

    .three-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .quantum-applicant-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .application-time-display {
        align-items: flex-start;
    }

    .security-badge {
        margin-left: 0;
    }

    .two-columns {
        grid-template-columns: 1fr;
    }
}
/*apply design codes ends*/
/*contact us /
:root {
    --quantum-core: #00f0ff;
    --hologram-primary: #ff00f0;
    --neural-active: #00ff9d;
    --dark-matter: #0a0a14;
    --contact-panel: #121220;

    --quantum-glow: 0 0 15px var(--quantum-core);
    --hologram-glow: 0 0 20px var(--hologram-primary);
    --neural-glow: 0 0 10px var(--neural-active);

    --transition-quantum: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Quantum Contact Portal Base */
.quantum-contact-portal {
    position: relative;
    min-height: 100vh;
    color: #fff;
    font-family: 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    padding: 2rem;
    margin-top: 60ps;
}

.quantum-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.breadcrumb-segment {
    color: var(--quantum-core);
    text-shadow: 0 0 5px var(--quantum-core);
}

.breadcrumb-segment.holographic {
    color: var(--hologram-primary);
    text-shadow: var(--hologram-glow);
}

.breadcrumb-segment.active {
    color: var(--neural-active);
    text-shadow: var(--neural-glow);
}

.breadcrumb-chevron {
    color: var(--quantum-core);
}

/* Quantum Map Container */
.quantum-map-container {
    position: relative;
    margin-bottom: 2rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.1);
}

.map-energy-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--quantum-core);
    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
    transition: var(--transition-quantum);
}

.quantum-map-display {
    width: 100%;
    height: 500px;
    position: relative;
}

.holographic-map {
    width: 100%;
    height: 100%;
    border: none;
    filter: hue-rotate(180deg) contrast(1.2) brightness(0.8);
}

.map-coordinates {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(10, 10, 20, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--quantum-core);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 3;
}

.coordinate-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--quantum-core);
    animation: quantum-pulse 2s infinite;
}

/* Quantum Contact Matrix */
.quantum-contact-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.quantum-contact-nodes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-node {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(18, 18, 32, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 240, 255, 0.1);
    transition: var(--transition-quantum);
    position: relative;
    overflow: hidden;
}

.contact-node:hover {
    border-color: var(--quantum-core);
    box-shadow: var(--quantum-glow);
}

.node-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.node-icon.holographic {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--quantum-core);
}

.icon-core {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,240,255,0.2) 0%, rgba(0,240,255,0) 70%);
    transform: scale(0);
    transition: var(--transition-quantum);
}

.icon-core.active {
    transform: scale(1);
}

.node-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1) sepia(1) hue-rotate(180deg) saturate(5);
}

.node-info {
    flex: 1;
    position: relative;
}

.node-label {
    font-size: 0.9rem;
    color: var(--quantum-core);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.node-data {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.node-energy-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--quantum-core), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-quantum);
}

/* Quantum Communication Form */
.quantum-communication-form {
    background: rgba(18, 18, 32, 0.6);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(0, 240, 255, 0.1);
    transition: var(--transition-quantum);
}

.quantum-communication-form:hover {
    border-color: var(--hologram-primary);
    box-shadow: var(--hologram-glow);
}

.quantum-form-grid {
    display: grid;
    gap: 1.5rem;
}

.two-columns {
    grid-template-columns: 1fr 1fr;
}

.quantum-form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.holographic-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--quantum-core);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.label-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--quantum-core);
    animation: quantum-pulse 2s infinite;
}

.quantum-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(0, 4, 86, 0.3);
    border: 1px solid var(--quantum-core);
    border-radius: 6px;
    color: var(--quantum-core);
    font-size: 1rem;
    transition: var(--transition-quantum);
}

.quantum-input:focus {
    outline: none;
    box-shadow: var(--quantum-glow);
}

.input-energy-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--quantum-core), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-quantum);
}

.quantum-input:focus ~ .input-energy-flow {
    transform: scaleX(1);
}

/* Quantum Message Container - CKEditor Wrapper */
.quantum-message-container {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.quantum-message-input {
    width: 100%;
    min-height: 150px;
    padding: 1rem;
    background: rgba(0, 4, 86, 0.3);
    border: 1px solid var(--quantum-core);
    border-radius: 6px;
    color: var(--quantum-core);
    resize: vertical;
    transition: var(--transition-quantum);
}

.message-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 1px solid transparent;
    pointer-events: none;
    transition: var(--transition-quantum);
}

/* CKEditor Custom Styling */
.cke_chrome {
    border: 1px solid var(--quantum-core) !important;
    border-radius: 6px !important;
    background: rgba(0, 4, 86, 0.3) !important;
    overflow: hidden !important;
    transition: var(--transition-quantum) !important;
}

.cke_chrome:hover {
    box-shadow: var(--quantum-glow) !important;
}

.cke_contents {
    background: rgba(0, 4, 86, 0.3) !important;
}

.cke_top {
    background: rgba(18, 18, 32, 0.8) !important;
    border-bottom: 1px solid var(--quantum-core) !important;
    border-radius: 6px 6px 0 0 !important;
}

.cke_bottom {
    background: rgba(18, 18, 32, 0.8) !important;
    border-top: 1px solid var(--quantum-core) !important;
    border-radius: 0 0 6px 6px !important;
}

.cke_button_icon {
    filter: brightness(0) invert(1) sepia(1) hue-rotate(180deg) saturate(5) !important;
}

.cke_button:hover .cke_button_icon {
    filter: brightness(0) invert(1) sepia(1) hue-rotate(180deg) saturate(8) !important;
}

.cke_combo_button {
    color: var(--quantum-core) !important;
    border-color: var(--quantum-core) !important;
}

/* Submit Button */
.quantum-submit-btn {
    padding: 0.8rem 2rem;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--quantum-core);
    color: var(--quantum-core);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-quantum);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.quantum-submit-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    box-shadow: var(--quantum-glow);
    transform: translateY(-2px);
}

.btn-core-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--quantum-core);
    animation: quantum-pulse 1.5s infinite;
}

.btn-energy-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--quantum-core), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-quantum);
}

.quantum-submit-btn:hover .btn-energy-wave {
    transform: scaleX(1);
}

/* Quantum Background Effects */
.quantum-contact-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.quantum-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--particle-color);
    width: var(--particle-size);
    height: var(--particle-size);
    opacity: var(--particle-opacity);
    animation: quantum-float var(--particle-speed) linear infinite;
    filter: blur(1px);
    top: var(--particle-y);
    left: var(--particle-x);
}

/* Animations */
@keyframes quantum-pulse {
    0% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.3; transform: scale(0.9); }
}

@keyframes quantum-float {
    0% { transform: translate(0, 0); }
    25% { transform: translate(20px, 10px); }
    50% { transform: translate(-10px, 20px); }
    75% { transform: translate(15px, -5px); }
    100% { transform: translate(0, 0); }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .quantum-contact-matrix {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .two-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .quantum-contact-portal {
        padding: 1rem;
    }

    .quantum-map-display {
        height: 400px;
    }
}

@media (max-width: 480px) {
    .contact-node {
        flex-direction: column;
        align-items: flex-start;
    }

    .node-icon {
        margin-bottom: 1rem;
    }

    .quantum-breadcrumb {
        flex-wrap: wrap;
    }
}
/*Contant us ends*/
/*gallry starts here
    /* ===== Base Styles ===== */
    :root {
        --primary: var(--theme-color-1);
        --primary-light: var(--theme-color-2);
        --dark: #2c3e50;
        --gray: #7f8c8d;
        --light-gray: #ecf0f1;
        --white: var(--theme-color-1);
        --shadow: 0 10px 30px rgba(0,0,0,0.08);
        --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .space {
        height: 30px;
    }

    /* ===== Layout Structure ===== */
    .page-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .main-grid {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 40px;
        margin-top: 40px;
    }

    /* ===== Gallery Header ===== */
    .page-header {
        text-align: center;
        margin: 80px 0;
        position: relative;
    }

    .page-title {
        display: inline-block;
        font-size: 2.8rem;
        font-weight: 800;
        color: var(--dark);
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .page-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 4px;
        background: linear-gradient(90deg, var(--primary), var(--primary-light));
        border-radius: 2px;
    }

    /* ===== Gallery Grid ===== */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        gap: 30px;
    }

    .gallery-item {
        background: var(--white);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: var(--transition);
        display: flex;
        flex-direction: column;
    }

    .gallery-item:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    }

    .gallery-img-container {
        height: 280px;
        overflow: hidden;
    }

    .gallery-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .gallery-item:hover .gallery-img {
        transform: scale(1.05);
    }

    .gallery-content {
        padding: 25px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .gallery-item-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 15px;
    }

   .gallery-desc  p{
        color: var(--theme-color-1);
        line-height: 1.7;
        margin-bottom: 25px;
        flex: 1;
    }

    .read-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 25px;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: var(--light-gray);
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition);
        box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
        width: fit-content;
    }

    .read-more-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(255, 107, 0, 0.4);
        background: linear-gradient(135deg, var(--primary-light), var(--primary));
    }

    .read-more-btn i {
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    .read-more-btn:hover i {
        transform: translateX(5px);
    }

    /* ===== Enhanced Sidebar ===== */
    
    /* ===== Empty State ===== */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--gray);
        font-size: 1.3rem;
        grid-column: 1 / -1;
        background: var(--white);
        border-radius: 12px;
        box-shadow: var(--shadow);
    }

    .empty-state i {
        font-size: 3rem;
        color: var(--primary);
        margin-bottom: 20px;
        display: block;
    }

    /* ===== Responsive Design ===== */
    @media (max-width: 1200px) {
        .gallery-grid {
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        }
    }

    @media (max-width: 992px) {
        .main-grid {
            grid-template-columns: 1fr;
        }

        .sidebar {
            margin-top: 50px;
            position: static;
        }
    }

    @media (max-width: 768px) {
        .page-title {
            font-size: 2.2rem;
        }

        .gallery-grid {
            grid-template-columns: 1fr;
        }

        .gallery-img-container {
            height: 220px;
        }
    }

    @media (max-width: 576px) {
        .page-title {
            font-size: 1.8rem;
        }

        .gallery-content {
            padding: 20px;
        }

        .gallery-item-title {
            font-size: 1.3rem;
        }
    }
/*gallery ends here*/
/*front-end sidebar starts/
/* ===== FUTURISTIC SIDEBAR THEME ===== */
:root {
    --theme-color-1: #000456;
    --theme-color-2: #0405ef;
    --theme-accent: #00f0ff;
    --theme-dark: #0a0a14;
    --theme-light: rgba(224, 247, 255, 0.9);

    --hologram-effect: linear-gradient(135deg,
        rgba(0,244,255,0.1) 0%,
        rgba(4,5,239,0.3) 50%,
        rgba(0,4,86,0.1) 100%);

    --neon-glow: 0 0 15px rgba(0, 240, 255, 0.7);
    --deep-glow: 0 0 25px rgba(4, 5, 239, 0.5);
    --card-glow: 0 0 10px rgba(0, 244, 255, 0.3);
}

/* ===== QUANTUM SIDEBAR ===== */
.sidebar {
    position: relative;
    background: rgba(10, 10, 20, 0.85);
    border-radius: 12px;
    border: 1px solid rgba(0, 244, 255, 0.15);
    box-shadow:
        var(--deep-glow),
        inset 0 0 30px rgba(0, 4, 86, 0.5);
    padding: 0;
    backdrop-filter: blur(8px);
    overflow: hidden;
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
}

.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--theme-color-1),
        var(--theme-color-2),
        var(--theme-accent));
    z-index: 2;
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, transparent 95%, rgba(0,244,255,0.05) 95%),
        linear-gradient(0deg, transparent 95%, rgba(0,244,255,0.05) 95%);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.3;
}

.scroll-container {
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
}

.scroll-enabled {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-color-2) var(--theme-dark);
}

.scroll-enabled::-webkit-scrollbar {
    width: 6px;
}

.scroll-enabled::-webkit-scrollbar-track {
    background: var(--theme-dark);
    border-radius: 3px;
}

.scroll-enabled::-webkit-scrollbar-thumb {
    background-color: var(--theme-color-2);
    border-radius: 3px;
}

/* ===== SIDEBAR HEADER ===== */
.sidebar-header {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 244, 255, 0.2);
}

.sidebar-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(0, 244, 255, 0.3);
    position: relative;
    display: inline-block;
}

.sidebar-header h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-accent), transparent);
}

.search-box {
    position: relative;
    margin-top: 20px;
}

.search-input {
    width:80%;
    padding: 12px 15px 12px 40px;
    background: rgba(0, 4, 86, 0.4);
    border: 1px solid rgba(0, 244, 255, 0.2);
    border-radius: 6px;
    color: var(--theme-light);
    font-family: 'Orbitron', sans-serif;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--theme-accent);
    box-shadow: var(--neon-glow);
    background: rgba(0, 4, 86, 0.6);
}

.search-input::placeholder {
    color: rgba(224, 247, 255, 0.6);
    letter-spacing: 1px;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-accent);
    font-size: 0.9rem;
}

/* ===== CAUSE ITEMS ===== */
.cause-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cause-item {
    position: relative;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.cause-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--theme-color-1), var(--theme-color-2));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cause-item:hover::before {
    opacity: 1;
}

.cause-link {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(0, 4, 86, 0.3);
    border-radius: 6px;
    color: var(--theme-light);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cause-link:hover {
    background: rgba(4, 5, 239, 0.2);
    transform: translateX(5px);
    box-shadow: var(--card-glow);
}

.cause-link:hover .cause-name {
    color: var(--theme-accent);
}

.cause-link:hover .hover-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.holographic-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 244, 255, 0.1);
    border-radius: 50%;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.cause-link:hover .holographic-icon {
    background: rgba(0, 244, 255, 0.2);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 244, 255, 0.3);
}

.holographic-icon i {
    color: var(--theme-accent);
    font-size: 1rem;
}

.cause-name {
    flex: 1;
    font-weight: 500;
    transition: all 0.3s ease;
}

.hover-arrow {
    opacity: 0;
    color: var(--theme-accent);
    transition: all 0.3s ease;
    font-size: 0.8rem;
}

/* ===== SIDEBAR FOOTER ===== */
.sidebar-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 244, 255, 0.1);
    text-align: center;
}

.view-all-btn {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2));
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(4, 5, 239, 0.3);
}

.view-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(4, 5, 239, 0.5);
    background: linear-gradient(135deg, var(--theme-color-2), var(--theme-color-1));
}

/* ===== ANIMATIONS ===== */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.pulse {
    animation: pulse 2s infinite;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .sidebar {
        backdrop-filter: none;
    }

    .scroll-container {
        max-height: none;
    }
}

/*front ends side bar ends*/
/*single gallery starts*/
  /* ===== FUTURISTIC THEME ===== */
    :root {
        --theme-color-1: #000456;
        --theme-color-2: #0405ef;
        --theme-accent: #00f0ff;
        --theme-dark: #0a0a14;
        --theme-light: #e0f7ff;
        --theme-text: #ffffff;

        --hologram-effect: linear-gradient(135deg,
            rgba(0,244,255,0.1) 0%,
            rgba(4,5,239,0.3) 50%,
            rgba(0,4,86,0.1) 100%);

        --neon-glow: 0 0 15px rgba(0, 240, 255, 0.7);
        --deep-glow: 0 0 25px rgba(4, 5, 239, 0.5);
        --card-glow: 0 0 10px rgba(0, 244, 255, 0.3);
    }

    /* ===== BASE STYLES ===== */
    .structure {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 40px;
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px 20px;
        position: relative;
    }

    /* ===== GALACTIC HEADER ===== */
    header h1 {
        font-size: 2.8rem;
        font-weight: 800;
        background: linear-gradient(90deg, var(--theme-accent), var(--theme-color-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 40px;
        text-shadow: var(--neon-glow);
        position: relative;
        display: inline-block;
    }

    header h1::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg,
            transparent,
            var(--theme-accent),
            var(--theme-color-2),
            transparent);
        box-shadow: var(--neon-glow);
    }

    /* ===== SINGLE GALLERY LAYOUT ===== */
    .gallery-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gallery-image-container {
        background: rgba(10, 10, 20, 0.7);
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(0, 244, 255, 0.2);
        box-shadow:
            var(--card-glow),
            inset 0 0 20px rgba(0, 4, 86, 0.3);
        transition: all 0.4s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 600px;
        padding: 0;
        position: relative;
    }

    .gallery-image-container:hover {
        transform: translateY(-5px);
        box-shadow:
            0 10px 30px rgba(4, 5, 239, 0.4),
            inset 0 0 30px rgba(0, 244, 255, 0.2);
    }

    .gallery-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

    .gallery-image-container:hover img {
        transform: scale(1.03);
    }

    /* ===== GALLERY INFO PANEL ===== */
    .gallery-info {
        background: rgba(10, 10, 20, 0.7);
        border-radius: 16px;
        padding: 30px;
        border: 1px solid rgba(0, 244, 255, 0.2);
        box-shadow: var(--card-glow);
        position: relative;
        overflow: hidden;
    }

    .gallery-info::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(to bottom, var(--theme-color-1), var(--theme-color-2));
    }

    .gallery-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--theme-accent);
        margin-bottom: 20px;
        text-shadow: 0 0 10px rgba(0, 244, 255, 0.3);
    }

    .gallery-description {
        color: rgba(224, 247, 255, 0.9);
        line-height: 1.8;
        font-size: 1.1rem;
    }

    .gallery-meta {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 244, 255, 0.2);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--theme-accent);
        font-size: 0.9rem;
    }

    /* ===== QUANTUM SIDEBAR ===== */

    /* ===== RESPONSIVE DESIGN ===== */
    @media (max-width: 992px) {
        .structure {
            grid-template-columns: 1fr;
        }

        .sidebar {
            margin-top: 60px;
            position: static;
        }
    }

    @media (max-width: 768px) {
        header h1 {
            font-size: 2.2rem;
        }

        .gallery-title {
            font-size: 1.5rem;
        }

        .gallery-description {
            font-size: 1rem;
        }

        .gallery-image-container {
            min-height: 450px;
        }
    }

    @media (max-width: 576px) {
        header h1 {
            font-size: 1.8rem;
        }

        .structure {
            padding: 30px 15px;
            gap: 20px;
        }

        .gallery-info {
            padding: 20px;
        }

        .gallery-image-container {
            min-height: 300px;
        }

        .sidebar {
            padding: 20px;
        }
    }
/*single gallery stop*/
/*Projects starts here*/
    :root {
        --theme-color-1: #000456;
        --theme-color-2: #0405ef;
        --accent-color: #ff6b00;
        --glow-effect: 0 0 10px rgba(4, 5, 239, 0.5);
    }

    /* ===== FUTURISTIC FOUR COLUMN GRID ===== */
    .four_columns_grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        margin: 20px 0;
    }

    .card {
        background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(240,240,255,0.95) 100%);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), var(--glow-effect);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        flex-direction: column;
        position: relative;
        border: 1px solid rgba(4, 5, 239, 0.1);
    }

    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
    }

    .card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(4, 5, 239, 0.3);
    }

    .card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-bottom: 3px solid var(--accent-color);
        filter: saturate(1.1);
        transition: filter 0.3s ease;
    }

    .card:hover img {
        filter: saturate(1.3) contrast(1.05);
    }

    .card .title {
        padding: 20px 20px 0;
        margin: 0;
        font-size: 1.3rem;
        font-weight: 600;
        background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .card .title a {
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
    }

    .card .title a:hover {
        transform: translateX(5px);
    }

    .card .desc {
        padding: 15px 20px;
        color: #444;
        font-size: 0.95rem;
        line-height: 1.6;
        flex-grow: 1;
    }

    .read_more {
        display: block;
        padding: 12px 15px;
        background: linear-gradient(90deg, var(--theme-color-2), var(--theme-color-1));
        color: white;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        font-size: 0.85rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .read_more::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.7s ease;
    }

    .read_more:hover {
        background: linear-gradient(90deg, var(--theme-color-2), var(--theme-color-1));
    }

    .read_more:hover::after {
        left: 100%;
    }

    .error {
        padding: 20px;
        background: rgba(255, 235, 238, 0.9);
        color: #c62828;
        border-radius: 8px;
        text-align: center;
        margin: 20px 0;
        border-left: 4px solid #c62828;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    /* ===== FUTURISTIC RESPONSIVE DESIGN ===== */
    @media (max-width: 1200px) {
        .four_columns_grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .card {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 8px rgba(4, 5, 239, 0.3);
        }
    }

    @media (max-width: 900px) {
        .four_columns_grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }

        .card:hover {
            transform: translateY(-8px) scale(1.02);
        }
    }

    @media (max-width: 600px) {
        .four_columns_grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .card img {
            height: 250px;
        }

        .card:hover {
            transform: translateY(-5px) scale(1.01);
        }
    }

    /* Animation for futuristic feel */
    @keyframes subtleGlow {
        0%, 100% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 0 10px rgba(4, 5, 239, 0.5); }
        50% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 0 15px rgba(4, 5, 239, 0.7); }
    }

    .four_columns_grid:hover .card:not(:hover) {
        animation: subtleGlow 3s infinite;
    }
/*Projects ends here*/
/*Dashboard starts here*/
  :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --dark: #1a1a2e;
            --light: #f8f9fa;
            --success: #4cc9f0;
            --warning: #f8961e;
            --danger: #f72585;
            --gray: #6c757d;
            --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .admin_structure {
            display: grid;
            grid-template-columns: 240px 1fr;
            min-height: 100vh;
            margin-top: 0px;
            padding: 30px;
        }

        .left_side_bar {
            background: var(--dark);
            color: white;
            padding: 1rem;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
        }

        .adminheader {
            padding: 1rem 2rem;
            box-shadow: var(--card-shadow);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .head p {
            color: var(--primary);
            font-weight: 500;
        }

        .five_columns_grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .admin_card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            border-left: 4px solid var(--primary);
        }

        .admin_card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .title_head_admin {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }

        .title_head_admin a {
            color: var(--dark);
            text-decoration: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .title_head_admin a::after {
            content: "\f105";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--primary);
        }

        .desc {
            color: var(--gray);
            font-size: 0.9rem;
        }

        .admin_card a {
            text-decoration: none;
        }

        .count-badge {
            background: var(--primary);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-left: 0.5rem;
        }

        @media (max-width: 768px) {
            .admin_structure {
                grid-template-columns: 1fr;
            }

            .left_side_bar {
                position: fixed;
                width: 240px;
                left: -240px;
                transition: var(--transition);
                z-index: 1000;
            }

            .left_side_bar.active {
                left: 0;
            }

            .mobile-menu-toggle {
                display: block;
                position: fixed;
                left: 1rem;
                top: 1rem;
                z-index: 1100;
                background: var(--primary);
                color: white;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            }
        }
/*Dashboard Ends here*/
/*Adding fiiles and tables starts here*/
/* ===================== */
/* FUTURISTIC ADMIN UI */
/* ===================== */
.admin_structure {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
    background: #0f0f1a;
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.left_side_bar {
    background: linear-gradient(180deg, #000428, #004e92);
    padding: 20px;
    box-shadow: 5px 0 15px rgba(0,0,0,0.3);
    position: relative;
    z-index: 10;
}

.admin-content {
    padding: 30px;
}

.contact_container {
    background: rgba(30, 30, 45, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
}

.title_admin_head {
    margin-bottom: 30px;
    position: relative;
}

.title_admin_head h1 {
    font-size: 2rem;
    margin: 0;
    background: linear-gradient(90deg, #00f0ff, #9d00ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.title_admin_head::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #00f0ff, #9d00ff);
}

/* ===================== */
/* FUTURISTIC TABLE */
/* ===================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
}

table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.05) 0%, rgba(157, 0, 255, 0.05) 100%);
    z-index: -1;
}

th, td {
    padding: 15px;
    text-align: left;
    position: relative;
}

th {
    background: rgba(0, 4, 86, 0.7);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #00f0ff;
}

td {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

tr:hover td {
    background: rgba(0, 240, 255, 0.05);
}

tr:hover td::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #00f0ff, #9d00ff);
}

td img {
    max-width: 100px;
    height: auto;
    border-radius: 5px;
    transition: all 0.3s ease;
}

td img:hover {
    transform: scale(1.5);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

/* ===================== */
/* FUTURISTIC FORMS */
/* ===================== */
.two_columns_grid, 
.three_columns_grid, 
.one_grid_admin {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.two_columns_grid {
    grid-template-columns: repeat(2, 1fr);
}

.three_columns_grid {
    grid-template-columns: repeat(3, 1fr);
}

.form-group {
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #00f0ff;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(20, 20, 35, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.btn {
    padding: 12px 25px;
    background: linear-gradient(135deg, #00f0ff, #9d00ff);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 240, 255, 0.3);
}

.btn-logout {
    background: #ff3b3b;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: #ff5555;
    transform: scale(1.1);
}

/* ===================== */
/* PAGINATION */
/* ===================== */
.pageclass {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 10px;
}

#btn-page {
    padding: 8px 15px;
    background: rgba(30, 30, 45, 0.8);
    color: #00f0ff;
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

#btn-page:hover,
#btn-page.active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(157, 0, 255, 0.2));
    color: #fff;
    border-color: #9d00ff;
}

/* ===================== */
/* RESPONSIVE DESIGN */
/* ===================== */
@media (max-width: 1024px) {
    .two_columns_grid {
        grid-template-columns: 1fr;
    }
    
    .three_columns_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin_structure {
        grid-template-columns: 1fr;
    }
    
    .left_side_bar {
        display: none; /* Consider a mobile menu instead */
    }
    
    table {
        display: block;
        overflow-x: auto;
    }
    
    .three_columns_grid {
        grid-template-columns: 1fr;
    }
}
/*adding files and the tables ends here*/ 
/*Login page begins */
:root {
  --theme-color-1: #000456;
  --theme-color-2: #0405ef;
  --theme-color-light: #f0f1ff;
  --theme-color-dark: #00022e;
  --text-color: #333;
  --text-light: #777;
  --white: #ffffff;
  --error-color: #ff3a3a;
  --success-color: #00c853;
}


/* Login Container */
.login-page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px); /* Adjust based on your header height */
  padding: 40px 20px;
  margin-top: 40px;
}

.login-container {
  width: 100%;
  max-width: 450px;
}

/* Login Card */
.login-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 4, 86, 0.1);
  padding: 40px;
  width: 100%;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--theme-color-1);
  margin-bottom: 8px;
}

.ngo-prefix {
  color: var(--theme-color-2);
}

.login-subtitle {
  color: var(--text-light);
  font-size: 14px;
}

/* Form Styles */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.input-wrapper {
  position: relative;
}

.input-wrapper input {
  width: 100%;
  height: 56px;
  padding: 0 15px 0 45px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: transparent;
  color: #00022e;
}

.input-wrapper input:focus {
  border-color: var(--theme-color-2);
  outline: none;
  box-shadow: 0 0 0 3px rgba(4, 5, 239, 0.1);
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.input-wrapper label {
  position: absolute;
  left: 45px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  transition: all 0.3s ease;
  pointer-events: none;
  font-size: 16px;
}

.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown) + label {
  top: 0;
  left: 45px;
  font-size: 12px;
  background: var(--white);
  padding: 0 5px;
  transform: translateY(-50%);
}

.toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

/* Form Options */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
  font-size: 14px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
}

.remember-me input {
  width: 16px;
  height: 16px;
  accent-color: var(--theme-color-2);
}

.forgot-password {
  color: var(--theme-color-2);
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

/* Login Button */
.login-btn {
  height: 56px;
  background: linear-gradient(135deg, var(--theme-color-1), var(--theme-color-2));
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.login-btn:hover {
  opacity: 0.9;
}

/* Login Footer */
.login-footer {
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
  color: var(--text-light);
}

.login-footer a {
  color: var(--theme-color-2);
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

.secure-connection {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--success-color);
}

/* Responsive Design */
@media (max-width: 768px) {
  .login-card {
    padding: 30px;
  }
}

@media (max-width: 480px) {
  .login-page-wrapper {
    padding: 20px 15px;
  }

  .login-card {
    padding: 25px 20px;
  }

  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .forgot-password {
    align-self: flex-end;
  }
}
/*Login page ends */