@import "https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900";

* { box-sizing: border-box; }
body{cursor:default;font-family:Poppins;margin:0;background:radial-gradient(27% 29% at right, #0000 83%,#ECECEC 85% 99%,#0000 101%) calc(32px/2) 32px,
radial-gradient(27% 29% at left, #0000 83%,#ECECEC 85% 99%,#0000 101%) calc(32px/-2) 32px,
radial-gradient(29% 27% at top, #0000 83%,#ECECEC 85% 99%,#0000 101%) 0 calc(32px/2),
radial-gradient(29% 27% at bottom, #0000 83%,#ECECEC 85% 99%,#0000 101%) 0 calc(32px/-2)
#F3F3F3;background-size:64px 64px;html{
    --s:60px; /* control the size*/--c1:#e8e8e8;--c2:#f0f0f0;--_g:#0000 83%,var(--c1) 85% 99%,#0000 101%;background:
            radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
            radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
            radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
            radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
            var(--c2);background-size:calc(2*var(--s)) calc(2*var(--s));
};}
/* Global Custom Scrollbar */
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-track{background:transparent;} /* Invisible track to keep it clean */
::-webkit-scrollbar-thumb{background:#d1d5db; border-radius:10px; border:1px solid transparent;} /* Light gray thumb */
::-webkit-scrollbar-thumb:hover{background:#9ca3af;} /* Slightly darker on hover */

h1,h2,h3,h4,h5,h6{margin:10px;}
h4{font-weight:normal;}
a{text-decoration:none;color:initial;}
main{transition:.4s;width: 95%;max-width:300px;background:rgba(255,255,255, .3);text-align:center;padding:10px 10px 50px;border-radius:20px;display:flex;flex-direction:column;margin:50px auto 10px;box-shadow:0 4px 10px rgba(0,0,0,0.05);background-image:linear-gradient( 135deg, rgba(255, 255, 255, 1), rgba(0, 0, 0, .015));border:2px solid;backdrop-filter:blur(3px);}
main *{transition:.4s;max-width: 100%;}
main h3{background:black;color:white;font-weight:normal;margin:-10px auto 0;padding:5px 30px;border-radius:0 0 20px 20px;max-width: fit-content;}
main div > a:first-child{margin-top:50px;}
main a{background:black;display:flex;width:100%;max-width:240px;margin:4px auto;padding:10px 24px;border-radius:50px;text-decoration:none;color:white;min-width:160px;justify-content:center;font-size:14px;align-items:center;gap:10px;}
main a:hover{transform:scale(1.1);}
main img{width:160px;max-width: 100%;border-radius:20px;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.08));}
main .app{width:100%;max-width:240px;margin:2px auto;min-width:150px;border-radius:10px;padding:20px;}
main .app:hover img{transform:scale(1.2)}
main .arrowDown{margin:-19px auto;font-size:32px;z-index:2;color:#ff3f80;}
main button{cursor:pointer;border:none;background:black;display:flex;width:100%;max-width:240px;margin:4px auto;padding:10px 24px;border-radius:50px;text-decoration:none;color:white;min-width:160px;justify-content:center;font-size:14px;}
main button:hover{transform:scale(1.1);}
main div > button:first-child{margin-top:100px;}

input[type="submit" i], .back{background:#ECECEC;padding:5px 20px;border-radius:100px;margin:30px auto;display:flex;border:1px solid #ccc;cursor:pointer;width:fit-content;}

footer{padding:20px;text-align:center;width: 95%;max-width:300px;margin:50px auto 10px;border-radius:20px;font-size:x-small;backdrop-filter:blur(5px);}

.amount_box{display:flex;margin:0px auto 10px;flex-direction:column;padding:10px;border-radius:10px;}
.amount_box .title{display:block;width:100%;font-size:x-small;}
.amount_box .amount{font-size:32px;font-weight:bold;margin:0px auto -10px;}
.amount_box .currency{}

.hover-underline{text-decoration:none;position:relative;}
.hover-underline::after{content:'';position:absolute;width:0; height:2px;bottom:-2px;left:0;background-color:#444;transition:width 0.5s ease-out;}
.hover-underline:hover::after{width:100%;}