when i tries my website in mobile version its global.css doesnt work proper
i tired many ways but still getting same porblem
(https://aditya-pamar-qr3g.vercel.app/)



@import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap");
&913086567042674719 base;
&913086567042674719 components;
&913086567042674719 utilities;
.cursive {
font-family: "Cedarville Cursive", cursive;
}
.Welcome-text {
background: linear-gradient(
0deg,
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.4)
),
linear-gradient(90.01deg, #e59cff 0.01%, #ba9cff 50.01%, #9cb2ff 100%);
background-blend-mode: normal, screen;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.Welcome-box {
isolation: isolate;
overflow: hidden;
align-items: center;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 32px;
box-shadow: inset 0 -7px 11px #a48fff1f;
display: flex;
position: relative;
width: -moz-max-content;
width: max-content;
transition: 0.45s cubic-bezier(0.6, 0.6, 0, 1) box-shadow;
}
.button-primary {
background: linear-gradient(
180deg,
rgba(60, 8, 126, 0) 0%,
rgba(60, 8, 126, 0.32) 100%
),
rgba(113, 47, 255, 0.12);
box-shadow: inset 0 0 12px #bf97ff3d;
}
.button-primary:hover {
background: linear-gradient(
180deg,
rgba(60, 8, 126, 0) 0%,
rgba(60, 8, 126, 0.42) 100%
),
rgba(113, 47, 255, 0.24);
box-shadow: inset 0 0 12px #bf97ff70;
}
/* Hide scrollbar for IE, Edge and Firefox /
.scrollbar-hidden {
-ms-overflow-style: none; / IE and Edge /
scrollbar-width: none; / Firefox /
}
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
html {
scroll-behavior: smooth;
}
/ Canvas Loader Animation */
.canvas-loader {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
margin: 15px auto;
position: relative;
color: #7042f8;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
@keyframes animloader {
0% {
box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
}
25% {
box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
}
50% {
box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
}
75% {
box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
}
100% {
box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
}
}
html {
scroll-behavior: smooth;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes scale-in {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.animate-fade-in {
animation: fade-in 0.3s ease-out;
}
.animate-scale-in {
animation: scale-in 0.3s ease-out;
}