:where([class^="ri-"])::before {
   content: "\f3c2";
 }

 * {
   font-family: 'Plus Jakarta Sans', sans-serif;
 }

 body {
   background-color: #fafafa;
   color: #1f2937;
 }

 .gradient-bg {
   background: #fafafa;
 }

 #about,
 #github-activity,
 #projects,
 #instagram,
 #contact {
   scroll-margin-top: 5rem;
 }

 #hero {
   isolation: isolate;
 }

 .hero-grid-container {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
   pointer-events: none;
 }

 .hero-grid-layer {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(to right, rgba(31, 41, 55, 0.07) 1px, transparent 1px),
     linear-gradient(to bottom, rgba(31, 41, 55, 0.07) 1px, transparent 1px);
   background-size: 16px 16px;
   mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 0%, #000 25%, transparent 75%);
   -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 0%, #000 25%, transparent 75%);
 }

 .hero-grid-layer-2 {
   background-size: 32px 32px;
   background-image:
     linear-gradient(to right, rgba(120, 181, 227, 0.18) 1px, transparent 1px),
     linear-gradient(to bottom, rgba(120, 181, 227, 0.18) 1px, transparent 1px);
   mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 0%, #000 45%, transparent 90%);
   -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 0%, #000 45%, transparent 90%);
 }

 .gh-heatmap {
   display: grid;
   grid-auto-flow: column;
   grid-template-rows: repeat(7, 1fr);
   gap: 3px;
   width: max-content;
 }

 .gh-heatmap span {
   display: inline-block;
   width: 11px;
   height: 11px;
   border-radius: 2px;
 }

 .gh-legend-swatch {
   display: inline-block;
   width: 11px;
   height: 11px;
   border-radius: 2px;
 }

 .hero-name-gradient {
   background: linear-gradient(90deg, #78b5e3 0%, #4f46e5 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .hero-spotlight {
   position: absolute;
   inset: 0;
   background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(120, 181, 227, 0.22), transparent 70%);
   transition: background 0.1s ease-out;
 }

 .glow-button {
   background: #1f2937;
   color: white;
   transition: all 0.3s ease;
 }

 .glow-button:hover {
   background: #374151;
   transform: translateY(-2px);
 }

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

 @keyframes float {

   0%,
   100% {
     transform: translateY(0px);
   }

   50% {
     transform: translateY(-20px);
   }
 }

 .underline-animation {
   position: relative;
   display: inline-block;
 }

 .underline-animation::after {
   content: '';
   position: absolute;
   width: 0;
   height: 4px;
   bottom: -8px;
   left: 0;
   background-color: #78B5E3;
   transition: width 0.5s ease;
 }

 .underline-animation.animate::after {
   width: 100%;
 }

 .card-hover {
   transition: all 0.3s ease;
 }

 .card-hover:hover {
   transform: scale(1.05);
   box-shadow: 0 20px 40px rgba(99, 102, 241, 0.1);
 }

 .icon-glow {
   transition: all 0.3s ease;
 }

 .icon-glow:hover {
   color: #6366f1;
   transform: scale(1.1);
 }

 .particles {
   display: none;
 }

 .particle {
   display: none;
 }

 /* @keyframes particle-float {
      display: none;
    } */

 .mobile-menu {
   transform: translateX(100%);
   transition: transform 0.3s ease;
 }

 .mobile-menu.active {
   transform: translateX(0);
 }

 .counter {
   font-size: 2.5rem;
   font-weight: 900;
   color: #78B5E3;
 }

 .modal {
   display: none;
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
 }

 .modal.active {
   display: flex;
   align-items: center;
 }

 .success-animation {
   transform: scale(0);
   transition: transform 0.3s ease;
 }

 .success-animation.show {
   transform: scale(1);
 }

 .tab-button.active {
   background-color: #78B5E3;
   color: #000;
 }

 .scroll-to-top {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   width: 3rem;
   height: 3rem;
   background: #1f2937;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 0;
   transform: translateY(100px);
   transition: all 0.3s ease;
   z-index: 100;
 }

 .scroll-to-top.show {
   opacity: 1;
   transform: translateY(0);
 }

 .scroll-to-top:hover {
   background: #374151;
   transform: translateY(-5px);
 }