.bg-water-pattern {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48cGF0aCBkPSJNMzAgMTVjLTguMjg0IDAtMTUgNi43MTYtMTUgMTVzNi43MTYgMTUgMTUgMTUgMTUtNi43MTYgMTUtMTUtNi43MTYtMTUtMTUtMTV6IiBmaWxsPSJub25lIiBzdHJva2U9IiM2YmNjZGUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuNSIvPjwvc3ZnPg==');
            background-size: 60px 60px;
        }
        .steam {
            position: absolute;
            width: 8px;
            height: 40px;
            background: rgba(255,255,255,0.6);
            border-radius: 8px;
            animation: steam 3s infinite ease-out;
        }
        @keyframes steam {
            0% {transform: translateY(0) scale(1); opacity: 0.6;}
            100% {transform: translateY(-40px) scale(1.5); opacity: 0;}
        }
        .typing-effect {
            border-right: 2px solid;
            animation: blink 0.75s step-end infinite;
        }
        @keyframes blink {
            from, to { border-color: transparent }
            50% { border-color: white; }
        }
		#particles-js {
		position: absolute; 
		width: 100%;
		height: 100%;
		z-index: -1; 
		}
		body {
			font-family: sans-serif;
			margin: 0;
			padding: 0;
		}

		.content {
			padding: 20px;
			text-align: center;
		}

      #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0 63 255 / 0.1); 
        z-index: 9999; 
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .loader {
        border: 8px solid #f3f3f3; 
        border-top: 8px solid #3498db; 
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }