@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');

/** Logo Start*/
.rad-container {
	display: flex;
	align-items: center;
	gap: 0;
}

.rad-container svg {
	margin: 0;
	padding: 0;
}

@keyframes strokeDash {
	0% {
		stroke-dasharray: 0, 100;
	}

	100% {
		stroke-dasharray: 100, 0;
	}
}

@keyframes radfill {
	0% {
		clip: rect(85px, 9999px, 86px, 0);
	}

	10% {
		clip: rect(15px, 9999px, 20px, 0);
	}

	20% {
		clip: rect(80px, 9999px, 85px, 0);
	}

	30% {
		clip: rect(30px, 9999px, 45px, 0);
	}

	40% {
		clip: rect(75px, 9999px, 80px, 0);
	}

	50% {
		clip: rect(25px, 9999px, 30px, 0);
	}

	60% {
		clip: rect(60px, 9999px, 65px, 0);
	}

	70% {
		clip: rect(10px, 9999px, 15px, 0);
	}

	80% {
		clip: rect(85px, 9999px, 90px, 0);
	}

	90% {
		clip: rect(50px, 9999px, 55px, 0);
	}

	100% {
		clip: rect(30px, 9999px, 35px, 0);
	}
}

#svg {
	position: relative;
	width: 50px;
	height: 50px;
	margin-top: -12px;
}

#radc {
	position: relative;
	width: 100%;
	height: 110px;
}

.text-pink {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	stroke: #FA67B1;
	fill: none;
	stroke-width: 4;
	animation: strokeDash 2s infinite alternate, radfill 1s infinite;
}

.text-purple {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	stroke: #AC96EC;
	fill: none;
	stroke-width: 4;
	animation: strokeDash 2s linear alternate, radfill 1s linear;
	animation-delay: 0.1s;
}

.text-yellow {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	stroke: #FCFC69;
	fill: none;
	stroke-width: 4;
	animation: strokeDash 2s linear alternate, radfill 1s linear;
	animation-delay: 0.1s;
}


.text-gray {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	stroke: #BDBDBD;
	fill: #BDBDBD;
	stroke-width: 4;
	animation: strokeDash 2s infinite alternate, glitch 1s infinite;
	animation-delay: 0.2s;
}

.stack span {
	font-weight: bold;
	grid-row-start: 1;
	grid-column-start: 1;
	font-size: 2rem;
	--stack-height: calc(100% / var(--stacks) - 1px);
	--inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
	--clip-top: calc(var(--stack-height) * var(--index));
	--clip-bottom: calc(var(--stack-height) * var(--inverse-index));
	clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
	animation: stack 340ms cubic-bezier(.46, .29, 0, 1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
	color: #fff !important;
}

.stack text:nth-child(odd) {
	--glitch-translate: 8px;
}

.stack text:nth-child(even) {
	--glitch-translate: -8px;
}

@keyframes stack {
	0% {
		opacity: 0;
		transform: translateX(-50%);
		text-shadow: -2px 3px 0 #A51326, 2px -3px 0 blue;
	}

	;

	60% {
		opacity: 0.5;
		transform: translateX(50%);
	}

	80% {
		transform: none;
		opacity: 1;
		text-shadow: 2px -3px 0 #A51326, -2px 3px 0 blue;
	}

	100% {
		text-shadow: none;
	}
}

@keyframes glitch {
	0% {
		text-shadow: -2px 3px 0 #A51326, 2px -3px 0 blue;
		transform: translate(var(--glitch-translate));
	}

	2% {
		text-shadow: 2px -3px 0 #A51326, -2px 3px 0 blue;
	}

	4%,
	100% {
		text-shadow: none;
		transform: none;
	}
}

/** Logo End*/

/** Triangle Start */
/* Custom properties */
:root {
	--angle: 0deg;
	--labs-sys-color-background: #111;
	--labs-sys-color-on-background: white;
	--base-speed: 4s;
	--labs-sys-color-grid: #fac4ff;
	--labs-sys-color-grid-glow: #df7373;
	--labs-sys-color-sun-1: #fdb428;
	--labs-sys-color-sun-2: #f672ca;
	--labs-sys-color-sun-glow: #b9f;
	--labs-sys-color-star: #f6c0c0;
	--color-palm-trunk: #333;
	--color-palm-leaf: #333;
	--color-palm-leaf-2: #b9f;
	--labs-sys-color-triangle: #6eccee;
	--labs-sys-color-volume: var(--labs-sys-color-triangle);
}

/* .kode-text */
.kode-text {
	--angle: 45deg;
	background: linear-gradient(var(--angle),
			var(--labs-sys-color-sun-2),
			var(--labs-sys-color-triangle));
	width: 30vmin;
	aspect-ratio: 3/2;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Permanent Marker, cursive" font-size="40" fill="%23fff">Rad</text></svg>') center center no-repeat;
	mask-size: contain;
	position: absolute;
	bottom: 90px;
	z-index: 10000;
	animation: kode-text 4s linear infinite;
	perspective: 40px;
}

.kode-text::after {
	content: "";
	position: absolute;
	top: 8vmin;
	left: 1vmin;
	width: 48vmin;
	height: 14vmin;
	background: repeating-radial-gradient(black, transparent 10vmin);
	mix-blend-mode: overlay;
	opacity: 0.2;
	transform: rotate(347deg);
}

/* .triangle */
.triangle {
	position: relative;
	width: 26vmin;
	aspect-ratio: 4 / 3;
	transform: translate(3vmin, 11.8vmin) rotate(1deg);
	filter: drop-shadow(0 0 15px var(--labs-sys-color-triangle));
	z-index: 500;
	perspective: 1000px;
	animation: triangle 10s linear infinite;
}

.triangle::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(45deg, white, var(--labs-sys-color-triangle));
	clip-path: polygon(6% 22%, 29% 94%, 29% 94%, 6% 22%, 94% 3%, 29% 94%, 7% 22%, 4% 19%, 29% 94%, 100% 0%);
	transform: translateY(4vmin);
}

/* Keyframes */
@keyframes kode-text {
	from {
		--angle: 45deg;
		transform: translateY(-0vh);
	}

	49.5% {
		--angle: 360deg;
		transform: translateY(-1vh);
		filter: brightness(100%);
	}

	50% {
		--angle: 360deg;
		transform: translateY(-1vh) scaleY(0.1) skewX(253deg);
		filter: brightness(190%);
	}

	51% {
		--angle: 360deg;
		transform: translateY(-1vh) scaleY(0.5) skewY(37deg);
		filter: brightness(190%);
	}

	52% {
		--angle: 360deg;
		filter: brightness(190%);
		transform: translateY(-0vh);
	}

	to {
		--angle: 45deg;
		transform: translateY(-0vh);
	}
}

@keyframes triangle {
	from {
		transform: translate(3vmin, 11.8vmin) rotate(1deg);
	}

	50% {
		transform: translate(3vmin, 12vmin) rotateX(-15deg) rotateY(-20deg);
	}

	to {
		transform: translate(3vmin, 11.8vmin) rotate(1deg);
	}
}

/* General styles */

.brand {
	position: absolute;
	width: 50vmin;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	transform: translateY(-35vh);
	z-index: 10000;
}

.demo-retro-wave-logo {
	transform: translateY(20vh);
	display: grid;
	place-items: center;
}

/** Triangle End*/


/**Footer Start*/
.footer {
    position: relative;
}

.stack {
    display: grid;
    grid-template-columns: 1fr;
}

span.radclasslog {
    display: inline-flex;
}
@keyframes rotate {
   0% {
    transform: rotateY(0deg);
   }
   100% {
    transform: rotateY(360deg);
   }
}

.heart-icon {
  animation: rotate 2s linear infinite;
  transform-origin: center center;
}

img.heart-icon {
    width: 23px;
}

font.stack.footer span {
    font-size: 12px;
}

font.custom-weight {
    color: #ffffff;
    background: linear-gradient(to right, #ffffff 0, #ff007f 10%, #ffffff 20%);
    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 7s infinite linear;
    animation-fill-mode: forwards;
    -webkit-text-size-adjust: none;
    font-weight: 900;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

@-moz-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@-webkit-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 360px;
  }
}
@-o-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 360px;
  }
}
@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 360px;
  }
}

/** Footer End*/

::selection
 {
    background-color: #ff007f !important;
}



a#soc_icon_64b00958c235a1 svg:hover {
    fill: #fff;
}

.share_twitter:hover svg {
  fill: #fff;
}

#soc_icon_64b00958c235a1 .grayscale {
  filter: grayscale(100%); 
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #ff007f;
    border-radius: 5px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::selection {
    background-color: #ff007f;
    color: white;
}
  


section#marketplaces {
    background: #161616;
    display: block;
    min-width: 0.1rem;
    /* min-height: clamp(31rem, 19.3684rem + 18.0175vw, 20rem); */
    padding: 70px;
    overflow: hidden;
	 margin-bottom: 50px;
}

		
@keyframes grow-shrink {
    0% {
        transform: scale(1.0);
    }
    25% {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1.0);
    }
    75% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
 }



@-webkit-keyframes noise {
  to {
    transform: translate3d(-7rem, 0, 0);
  }
}

@keyframes noise {
  0% {
    transform: translate3d(0, 9rem, 0);
  }

  10% {
    transform: translate3d(-1rem, -4rem, 0);
  }

  20% {
    transform: translate3d(-8rem, 2rem, 0);
  }

  30% {
    transform: translate3d(9rem, -9rem, 0);
  }

  40% {
    transform: translate3d(-2rem, 7rem, 0);
  }

  50% {
    transform: translate3d(-9rem, -4rem, 0);
  }

  60% {
    transform: translate3d(2rem, 6rem, 0);
  }

  70% {
    transform: translate3d(7rem, -8rem, 0);
  }

  80% {
    transform: translate3d(-9rem, 1rem, 0);
  }

  90% {
    transform: translate3d(6rem, -5rem, 0);
  }

  to {
    transform: translate3d(-7rem, 0, 0);
  }
}


.marketplaces_logos {
    -webkit-animation: slide 150s linear infinite;
    animation: slide 150s linear infinite;
    display: flex;
    margin-bottom: 20px;
    text-align: left;
    width: 4400px;
}

.marketplaces_logos > div {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.mrklg {
    filter: brightness(0) invert();
}
.mcurlg, .mrklg {
    margin: 20px 50px 5px 0;
    max-height: 50px;
    max-width: 150px !important;
}

@-webkit-keyframes slide {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(-2700px, 0, 0);
  }
}
@keyframes slide {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(-2700px, 0, 0);
  }
}


span.custom-weight{
	color: #161616;
    background: linear-gradient(to right, #ffffff 0, #ff007f 10%, #ffffff 20%);
    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 7s infinite linear;
    animation-fill-mode: forwards;
    -webkit-text-size-adjust: none;
    font-weight: 900;
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
}

@-moz-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
@-webkit-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 360px;
  }
}
@-o-keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 360px;
  }
}
@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 360px;
  }
}


.radbtnleft {
    display: inline-flex;
	box-shadow: 0px 9px 30px 0px rgba(102,75,196,0.4);
}

.fa-tiktok {
    color: #fff;
    text-shadow: 2px 1px #ff3353fc, -2px -1px cyan;
    margin-top: -10px;
}



a#soc_icon_64b00958c23953:hover,a#soc_icon_64b00958c23953:focus {
    color: #0A66C2 !important;
	filter: grayscale(0%);
	animation: pulse 1.5s infinite;
}

a#soc_icon_64b00958c235a1:hover,a#soc_icon_64b00958c235a1:focus {
    color: #00acee !important;
	filter: grayscale(0%);
	animation: pulse 1.5s infinite;
}

a#soc_icon_64b00958c23842:hover,a#soc_icon_64b00958c23842:focus {
    color: #3b5998 !important;
	 filter: grayscale(0%);
	 animation: pulse 1.5s infinite;
}

a#soc_icon_64b00958c23b36:hover,a#soc_icon_64b00958c23b36:focus{
	animation: pulse 1.5s infinite;
}

span.fab.fa-tiktok {
    color: #161616;
}

a#soc_icon,a#soc_icon_64b00958c235a1,a#soc_icon_64b00958c23842 {
    filter: grayscale(100%);
}



/* glitch text start */
.right {
  text-align: right;
  width: 100%;
}

.stack {
  display: grid;
  grid-template-columns: 1fr;
}

.stack span {
  font-weight: bold;
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 2rem;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
  color: #fff !important;
}

.stack span:nth-child(odd) { --glitch-translate: 8px; }
.stack span:nth-child(even) { --glitch-translate: -8px; }

@keyframes stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  };
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  100% {
    text-shadow: none;
  }
}

@keyframes glitch {
  0% {
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  4%, 100% {  text-shadow: none; transform: none; }
}


.radlegend {
  display: grid;
  grid-template-columns: 1fr;
}

.radlegend span {
  font-weight: bold;
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 4rem;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
  color: #ff007f !important;
}

.radlegend span:nth-child(odd) { --glitch-translate: 8px; }
.radlegend span:nth-child(even) { --glitch-translate: -8px; }



/* glitch text end */


		


.stack.footer span {
    font-size: 12px;
}

.stack.footer {
    text-align: right;
}

.social-icons {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.social-icons li a {
  font-size: 32px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff; 
  text-decoration: none;
  transition: transform 0.3s ease;
}

.social-icons li a:hover {
  transform: scale(1.2);
}


.footer-links h6 {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 40px;
}

span.custom-weight{
	color: #161616;
    background: linear-gradient(to right, #ffffff 0, #ff007f 10%, #ffffff 20%);
    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 7s infinite linear;
    animation-fill-mode: forwards;
    -webkit-text-size-adjust: none;
    font-weight: 900;
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
}