.theme-toggle {
     cursor: pointer;
 }

 #banner {
     position: relative;
     z-index: 1;
     overflow: hidden;
 }

 /* Gradient for Light Mode */
 :root[data-bs-theme='light'] .animated-gradient-text {
     background: linear-gradient(90deg, #6f42c1, #0d6efd, #20c997);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: animatedGradient 6s ease-in-out infinite;
     background-size: 300% 300%;
 }

 :root[data-bs-theme='light'] .animated-gradient-text-secondary {
     background: linear-gradient(90deg, #6610f2, #fd7e14, #0dcaf0);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: animatedGradient 8s ease-in-out infinite;
     background-size: 300% 300%;
 }

 /* Neon Glow for Dark Mode */
:root[data-bs-theme='dark'] .animated-gradient-text {
    background: linear-gradient(90deg, #ffffff, #e0e0ff, #ccf2ff, #ffffff);
    background-size: 300% 300%;
    animation: animatedGradient 6s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 0 6px rgba(204, 242, 255, 0.2);
    font-weight: 600;
}

 :root[data-bs-theme='dark'] .animated-gradient-text-secondary {
     background: linear-gradient(90deg, #00f0ff, #ff6ec4, #c850c0, #00f0ff);
     background-size: 300% 300%;
     animation: animatedGradient 8s ease-in-out infinite;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
 }

 @keyframes animatedGradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }


 #banner::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: url('../assets/images/back.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;

     /* Adjusted filters */
     filter: brightness(0.85) contrast(1.1) saturate(1.1),
             blur(100%) grayscale(0.1);
     opacity: 0.7;

     z-index: -1;
 }

 .tech-box {
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .tech-box:hover {
     transform: scale(1.05);
     box-shadow: 0 0 20px rgba(108, 117, 125, 0.4);
 }

 .tech-link {
     text-decoration: none;
     color: inherit;
 }

 .tech-link:hover {
     color: inherit;
 }


 /* Animate cards on hover */
 .project-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .project-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 /* Button that adapts to theme */
 :root[data-bs-theme='light'] .btn-outline-theme {
     color: #212529;
     border-color: #212529;
 }

 :root[data-bs-theme='light'] .btn-outline-theme:hover {
     background-color: #212529;
     color: #fff;
 }

 :root[data-bs-theme='dark'] .btn-outline-theme {
     color: #f8f9fa;
     border-color: #f8f9fa;
 }

 :root[data-bs-theme='dark'] .btn-outline-theme:hover {
     background-color: #f8f9fa;
     color: #212529;
 }

 #contact a:hover i {
     transform: scale(1.2);
     transition: 0.3s ease;
     opacity: 0.85;
 }

 .navbar-nav .nav-link.active {
     font-weight: bold;
     color: var(--bs-primary) !important;
     border-bottom: 2px solid var(--bs-primary);
 }

 #factBox {
  font-size: 1.1rem;
  font-style: italic;
}
[data-bs-theme='dark'] #factBox {
  background-color: #222;
  color: #f8f9fa;
}