/* Floating icons container */
 .floating-icons {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 1;
 }

 /* Icons style */
 .code-icon {
     position: absolute;
     font-size: 80px;
     /* MUCH bigger */
     font-weight: bold;
     color: rgba(200, 216, 46, 0.95);
     cursor: pointer;
     user-select: none;
     transition: transform 0.3s ease;
 }

 /* Animated "Zahra" text */
 .intro_text svg text {
     font-size: 220px;
     font-family: "Russo One", "Sora", sans-serif;
     fill: rgba(200, 216, 46, 0.08);
     text-transform: uppercase;
     letter-spacing: 10px;
     opacity: 0;
     animation: zahraLoop 5s linear infinite;
     /* will-change: transform, opacity; */
     /* performance hint */
     /* backface-visibility: hidden; */
     /* fixes flickering */
 }


 @keyframes draw {
     to {
         stroke-dashoffset: 0;
     }
 }

 /* name animation css */
 .intro_text {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 0;
     pointer-events: none;
     /* so it never blocks clicks */
 }

 .intro_text svg {
     position: absolute;
     bottom: -20%;
     right: -20%;
     width: 1400px;
     height: auto;
 }

 .intro_text svg text {
     font-size: 220px;
     font-family: "Russo One", "Sora", sans-serif;
     fill: rgba(200, 216, 46, 0.08);
     /* transparent green */
     text-transform: uppercase;
     letter-spacing: 10px;
     opacity: 0;
     animation: zahraLoop 12s linear infinite;
     /* loop forever */
 }

 /* Animation */
 @keyframes zahraLoop {
     0% {
         transform: translate(300px, 400px);
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     70% {
         transform: translate(-800px, -700px);
         opacity: 1;
     }

     90% {
         opacity: 0;
     }

     100% {
         transform: translate(300px, 400px);
         opacity: 0;
     }
 }