/* loading component*/

                            .loading {
                                display: none;
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background-color: #F7F4F0;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                color: #fff;
                                font-size: 2rem;
                                z-index: 1000;
                            }
                            
                            .loader {
                                height: 4px;
                                width: 130px;
                                --c:no-repeat linear-gradient(var(--yellow-custom) 0 0);
                                background: var(--c),var(--c),#D1E2EA;
                                background-size: 60% 100%;
                                animation: l16 3s infinite;
                              }
                              @keyframes l16 {
                                0%   {background-position:-150% 0,-150% 0}
                                66%  {background-position: 250% 0,-150% 0}
                                100% {background-position: 250% 0, 250% 0}
                              }