:root {
            --primary-color: #58E0B7;
            --primary-color-rgb: 207, 31, 31;
        }
        
        #preloader {
            display: grid;
            place-items: center;
            height: 100vh;
        }

        #preloader div {
            text-align: center; 
        }

        #logoimg {
            max-width: 50%; /* loading image ratio */
            height: auto;
        }

        /* QR code hover style */
        .qr-wrapper {
            position: relative;
            display: inline-block;
        }
        .qr-wrapper .qr-hover-img {
            display: none;
            position: absolute;
            top: auto;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 250px;
            padding: 5px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            z-index: 9999;
            margin-bottom: 10px;
        }
        .qr-wrapper:hover .qr-hover-img {
            display: block;
        }
        .qr-hover-img::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #fff transparent transparent transparent;
        }