body{
	font-family: "Inter", sans-serif !important;
    margin:0;
    display:flex;
	min-height: 100dvh;
    justify-content:center;
	min-height: 100dvh;
	min-height: -webkit-fill-available;
	background-color: #0f0f0f !important;
}

#app-container{
    width:100%;
	height: 100%;
    max-width:430px;
    min-height:100dvh;
	overflow: auto;
    position:relative;
	background-color: #0F0F0F !important;
}

.navbar-wrapper{
    position:fixed;
    top:0;
    max-width:430px;
	width: 100%;
    z-index:1000;
}
html {
  height: -webkit-fill-available;
}
.offcanvas-bottom{
	width: 430px !important;;
	margin: auto;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #e0e0e0;
}

/* Chrome, Safari, and Edge */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #e0e0e0;
}

*::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

.text-xs {
  /* font-size: clamp(13px, 1vw, 16px) !important; */
  font-size: 13px !important;
}

.text-sm {
  /* font-size: clamp(15px, 1.2vw, 18px)!important; */
  font-size: 15px !important;

}

.text-md {
  /* font-size: clamp(20px, 2vw, 28px)!important; */
  font-size: 20px !important;

}

.text-lg {
  /* font-size: clamp(24px, 2.5vw, 36px)!important; */
  font-size: 24px !important;

}

.text-xl {
  /* font-size: clamp(36px, 4vw, 56px)!important; */
  font-size: 36px !important;

}

.text-2xl {
  /* font-size: clamp(40px, 5vw, 64px)!important; */
  font-size: 40px !important;

}
option {
    background-color: #1C1C1C;
    color: #fff;
}
.golden-gradient{
    background: linear-gradient(
        to right,
        #C39130 0%,
        #EBD69D 36%,
        #C19027 90%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.golden-border-gradient {
    position: relative;
    border-radius: 30px;
}

.golden-border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
	pointer-events: none;
    background: linear-gradient(
        to right,
        #C39130 0%,
        #EBD69D 50%,
        #C19027 100%
    );

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.golden-bg-gradient{
	background: linear-gradient(
        to right,
        #C39130 0%,
        #EBD69D 50%,
        #C19027 75%
    );
    border-radius: 30px;
}
.gradient-product-card{
	background: radial-gradient(
		ellipse 160% 140% at -10% -10%,
		#4E493B 0%,
		#413D31 25%,
		#322F27 50%,
		#211F1A 72%,
		#0B0A09 100%
	);
	width: 100%;
	height: 23.5rem;
}
.skeleton-card{
    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #1A1A1A 25%,
            #2A2A2A 50%,
            #1A1A1A 75%
        );

    background-size: 200% 100%;

    animation: skeleton-loading 2.2s infinite linear;
}
.dashed-line{
    width: 100%;
    height: 1px;
	opacity: 50%;
    background: repeating-linear-gradient(
        to right,
        #909090 0px,
        #909090 6px,
        transparent 6px,
        transparent 12px
    );
}
@keyframes skeleton-loading{

    0%{
        background-position: 100% 0;
    }

    100%{
        background-position: -100% 0;
    }
}