@charset "UTF-8";
.uxt-wrapper {
  width: 100%;
}
@keyframes example {
  0% {
    width: 700px;
    height: 700px;
    transform: rotate(143deg);
  }
  12% {
    width: 800px;
    height: 800px;
  }
  25% {
    width: 900px;
    height: 900px;
  }
  37% {
    width: 1000px;
    height: 1000px;
  }
  50% {
    width: 1100px;
    height: 1100px;
    transform: rotate(0deg);
  }
  62% {
    width: 1000px;
    height: 1000px;
  }
  75% {
    width: 900px;
    height: 900px;
  }
  87% {
    width: 800px;
    height: 800px;
  }
  100% {
    width: 700px;
    height: 700px;
    transform: rotate(143deg);
  }
}
.uxt-wrapper .bg-grad {
  background-image: url("../images/bg-gradient.svg");
  width: 700px;
  height: 700px;
  position: fixed;
  top: -300px;
  right: 0%;
  z-index: -1;
  content: " ";
  background-size: cover;
  transform: rotate(143deg);
  animation-name: example;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.uxt-wrapper a {
  color: #fff;
}
.uxt-wrapper a:hover {
  color: rgba(0, 240, 255, 0.8);
}
.uxt-wrapper .uxt-topMenu {
  display: flex;
  padding: 36px 48px;
}
.uxt-wrapper .uxt-topMenu .uxt-topMenu-logo {
  flex: 1 1;
}
.uxt-wrapper .uxt-topMenu .uxt-topMenu-logo .uxt-logo-txt {
  font-family: "Sora", sans-serif;
  font-size: 20px;
  color: #fff;
}
.uxt-wrapper .uxt-topMenu .uxt-topMenu-logo .uxt-logo-txt span {
  background: #CA4246;
  background-color: #CA4246;
  background: conic-gradient(#CA4246, #E16541, #F18F43, #F18F43, #8B9862, #f2048b, #A7489B);
  stroke-width: 0;
  -webkit-text-stroke-width: 0;
  /* Set the background-size and repeat properties. */
  background-size: 25%;
  background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text colour rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.uxt-wrapper .uxt-topMenu .uxt-topMenu-logo img {
  height: 36px;
  width: auto;
}
.uxt-wrapper .uxt-topMenu .uxt-topMenu-right a img {
  width: 14px;
}
.uxt-wrapper .uxt-topMenu .uxt-topMenu-right span {
  font-size: 14px;
  font-weight: 600;
  color: #f1f1f1;
  letter-spacing: 0.5px;
}
.uxt-wrapper .uxt-header .uxt-header-wrapper {
  width: 85%;
  margin: 0 auto;
  display: block;
  text-align: center;
}
.uxt-wrapper .uxt-header .uxt-header-wrapper h1 {
  font-size: 24px;
  font-family: "Sora", sans-serif;
  margin-top: 10px;
}
.uxt-wrapper .uxt-header .uxt-header-wrapper h1 span {
  background: #CA4246;
  background-color: #CA4246;
  background: conic-gradient(#CA4246, #E16541, #f2048b, #F18F43, #F18F43, #8B9862, #8B9862, #0b9dff, #f2048b, #A7489B);
  stroke-width: 0;
  -webkit-text-stroke-width: 0;
  /* Set the background-size and repeat properties. */
  background-size: 25%;
  background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text colour rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Animate the text when loading the element. */
  /* This animates it on page load and when hovering out. */
  animation: rainbow-text-animation-rev 7s ease infinite;
  cursor: pointer;
}
.uxt-wrapper .uxt-header .uxt-header-wrapper h1 span:hover {
  animation: rainbow-text-animation 0.5s ease forwards;
}
@media only screen and (min-width: 470px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper h1 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 768px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper h1 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1200px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper h1 {
    font-size: 50px;
  }
}
.uxt-wrapper .uxt-header .uxt-header-wrapper p {
  width: 100%;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 200;
}
@media only screen and (min-width: 768px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper p {
    width: 80%;
    font-size: 16px;
    font-weight: 300;
  }
}
@media only screen and (min-width: 768px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper {
    width: 80%;
  }
}
@media only screen and (min-width: 1366px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper {
    width: 60%;
  }
}
@media only screen and (min-width: 1400px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper {
    width: 80%;
  }
}
@media only screen and (min-width: 1920px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper {
    width: 60%;
  }
}
.uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter {
  margin-top: 40px;
}
.uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter .uxt-header-filter-search {
  width: 100%;
  margin: 0 auto;
  position: relative;
  max-height: 80vh;
  overflow: auto;
  position: sticky;
  top: 5%;
  width: 350px;
}
.uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter .uxt-header-filter-search img {
  position: absolute;
  left: 16px;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}
.uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter .uxt-header-filter-search input {
  height: 56px;
  border-radius: 50px;
  width: 100%;
  font-size: 16px;
  padding-left: 50px;
  background: linear-gradient(90deg, rgba(0, 117, 255, 0.3) 0%, rgba(75, 158, 205, 0.2) 50%, rgba(0, 240, 255, 0.2) 100%);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  color: #fff;
  outline: none;
  border: 0;
}
.uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter .uxt-header-filter-search input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #B4B4B4;
  opacity: 1;
}
.uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter .uxt-header-filter-search input::placeholder {
  /* Most modern browsers support this now. */
  color: #B4B4B4;
}
@media only screen and (min-width: 768px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter .uxt-header-filter-search input {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter .uxt-header-filter-search {
    width: 90%;
  }
}
@media only screen and (min-width: 1366px) {
  .uxt-wrapper .uxt-header .uxt-header-wrapper .uxt-header-filter .uxt-header-filter-search {
    width: 70%;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  display: flex;
  background-color: #0B0F04;
  color: #fff;
  margin: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.01) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.01) 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-image: url("../images/pattern.svg");
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  position: relative;
  background-attachment: fixed;
  background-position: top;
  z-index: 0;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='30' height='30' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M3.25 10h13.5M10 3.25v13.5' transform='translate(5,0)' stroke-linecap='square' stroke-width='1' stroke='hsla(259, 0%, 15%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.uxt-header-filter-lozenges {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.uxt-lozenges .PillList-item {
  cursor: pointer;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: normal;
  font-family: "poppins";
  line-height: 20px;
  border-radius: 20px;
  text-transform: capitalize;
}
.uxt-lozenges .PillList-item input[type=checkbox] {
  display: none;
}
.uxt-lozenges .PillList-item input[type=checkbox]:checked + .PillList-label {
  color: #fff;
  border: 2px solid #72726F;
  background: linear-gradient(90deg, rgba(164, 58, 58, 0.7) 30.5%, rgba(95, 44, 241, 0.7) 100%);
  -webkit-backdrop-filter: blur(100px);
          backdrop-filter: blur(100px);
}
.uxt-lozenges .PillList-label {
  border: 2px solid #3A3A3A;
  border-radius: 20px;
  color: #fff;
  display: block;
  padding: 6px 16px;
  text-decoration: none;
}
.uxt-lozenges .PillList-item input[type=checkbox]:checked + .PillList-label .Icon--checkLight {
  display: inline-block;
}
.uxt-lozenges .PillList-item input[type=radio] {
  display: none;
}
.uxt-lozenges .PillList-item input[type=radio]:checked + .PillList-label {
  color: #fff;
  border: 2px solid #72726F;
  background: linear-gradient(90deg, rgba(74, 46, 66, 0.7) 30.5%, rgba(50, 21, 135, 0.7) 100%);
  -webkit-backdrop-filter: blur(100px);
          backdrop-filter: blur(100px);
}
.uxt-lozenges .PillList-item input[type=radio]:checked + .PillList-label .Icon--checkLight {
  display: inline-block;
}

.uxt-results-body {
  width: 96%;
  margin: 0 auto;
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 32px;
  flex: 1 0 0;
  flex-wrap: wrap;
  min-height: 575px;
}
.uxt-results-body .uxt-results-item {
  width: 350px;
  border-radius: 42px;
  display: flex;
  padding: 16px;
  background: linear-gradient(180deg, rgba(156, 154, 154, 0.3) 0%, rgba(65, 64, 66, 0.2) 100%);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  transition: all 0.2s ease-in-out;
}
.uxt-results-body .uxt-results-item .uxt-results-item-logo {
  border-radius: 34px;
  overflow: hidden;
  width: 100px;
  height: 100px;
  background-color: #fff;
}
.uxt-results-body .uxt-results-item .uxt-results-item-logo img {
  max-width: 100%;
  height: auto;
}
.uxt-results-body .uxt-results-item .uxt-results-item-logo.uxt-no-logo {
  background-color: #fff;
  color: #000;
  position: relative;
}
.uxt-results-body .uxt-results-item .uxt-results-item-logo.uxt-no-logo span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  width: 86%;
  word-wrap: break-word;
  text-align: center;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 26px;
  font-family: "Sora";
}
.uxt-results-body .uxt-results-item .uxt-results-item-title {
  color: #FFF;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 2px;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.uxt-results-body .uxt-results-item .uxt-results-item-desc {
  color: #FFF;
  font-family: Poppins;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 18px; /* 128.571% */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.uxt-results-body .uxt-results-item a {
  color: #eee;
  font-size: 14px;
  border-radius: 24px;
  border: 1px solid #707070;
  padding: 2px 10px;
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
  transition: all 0.5 ease;
  position: absolute;
  bottom: 16px;
  cursor: pointer;
}
.uxt-results-body .uxt-results-item a img {
  width: 10px;
}
.uxt-results-body .uxt-results-item:hover {
  scale: 1.04;
}
.uxt-results-body .uxt-results-item:hover a {
  background: conic-gradient(#360378, #6e210b, #2251be);
  background-size: 25%;
  background-repeat: repeat;
  font-weight: 400;
  animation: rainbow-text-animation-rev 7s ease infinite;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .uxt-results-body {
    gap: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .uxt-results-body {
    gap: 32px;
  }
}

footer {
  padding-top: 100px;
}
footer .uxt-powered {
  padding: 24px;
  font-size: 12px;
  color: #bbbbbb;
  text-align: center;
}

.abc {
  width: 868px;
  height: 968px;
  position: fixed;
  left: 30px;
  filter: blur(250px);
  top: 10%;
  z-index: 0;
}

.uxt-result-control {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 40px;
  justify-content: center;
}
.uxt-result-control #pagination-container {
  display: flex;
  justify-content: center;
}
.uxt-result-control #pagination-container button {
  margin: 0 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 24px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
}
.uxt-result-control #pagination-container button:hover {
  background-color: #ccc;
}
.uxt-result-control #pagination-container button.active {
  background-color: #333;
  color: white;
}
.uxt-result-control .uxt-header-filter-perpage {
  display: flex;
  align-items: center;
  margin-left: 20px;
  flex: 1;
  display: none;
}
.uxt-result-control .uxt-header-filter-perpage label {
  margin-right: 10px;
  font-size: 14px;
  color: #ccc;
}
.uxt-result-control #cards-per-page {
  padding: 5px;
  font-size: 1rem;
}

/* Style the select box */
select#cards-per-page {
  appearance: none; /* Remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f0f0f0; /* Background color */
  border: 1px solid #ccc; /* Border style */
  border-radius: 24px; /* Rounded corners */
  padding: 10px; /* Padding */
  font-size: 16px; /* Font size */
  color: #333; /* Font color */
  outline: none; /* Remove outline */
  cursor: pointer; /* Cursor style */
  position: relative;
}

/* Style the options (dropdown items) */
select#cards-per-page option {
  background-color: #000; /* Background color */
  color: #fff; /* Font color */
  padding: 20px; /* Padding */
  font-size: 16px; /* Font size */
}

/* Add a custom arrow */
select#cards-per-page::after {
  content: "▼"; /* Custom arrow symbol */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #333; /* Arrow color */
}

/* Hover and focus styles */
select#cards-per-page:hover,
select#cards-per-page:focus {
  border-color: #007bff; /* Border color on hover/focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Shadow on hover/focus */
}

/* Selected item style */
select#cards-per-page option:checked {
  background-color: #007bff; /* Background color for selected item */
  color: #fff; /* Font color for selected item */
}

.uxt-header-filter-perpage {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.uxt-header-filter-perpage label {
  margin-right: 10px;
}

#cards-per-page {
  padding: 5px;
  font-size: 1rem;
}

.panel {
  position: fixed;
  top: 0;
  right: -410px; /* Start off-screen */
  width: 390px;
  max-height: calc(100vh - 40px);
  background: linear-gradient(180deg, rgba(156, 154, 154, 0.3) 0%, rgba(133, 67, 200, 0.1) 100%);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  color: #fefefe;
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
  border-radius: 24px;
  margin: 70px 20px;
  border: 1px solid rgba(0, 240, 255, 0.55);
  animation: mymove 2s infinite;
  box-shadow: 0px 0px 20px -2px #727272;
}

@keyframes mymove {
  50% {
    border-color: rgb(133, 24, 157);
  }
  70% {
    border-color: rgb(24, 157, 144);
  }
}
.panel-content {
  padding: 36px 24px;
}
.panel-content #panel-category-list {
  display: flex;
  flex-wrap: wrap;
}
.panel-content #panel-category-list .uxt-lozenges {
  margin-bottom: 6px;
  margin-right: 4px;
}
.panel-content h4 {
  margin-top: 0;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 20px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50px;
}

.panel-content button {
  border: none;
  color: white;
  cursor: pointer;
  margin-top: 10px;
  padding: 0;
}
.panel-content button img {
  width: 24px;
}

.panel.open {
  right: 0;
}

.PillList-item.show-more {
  cursor: pointer;
}
.PillList-item.show-more span {
  border: 0;
  text-decoration: underline;
  color: #afeeee;
  font-weight: 700;
  animation: highlightLink 1s infinite;
}

@keyframes highlightLink {
  50% {
    color: rgb(189, 216, 17);
  }
  70% {
    color: rgb(24, 157, 144);
  }
}
@keyframes highlighth1 {
  25% {
    background: -webkit-linear-gradient(45deg, #ffab58, #21b1f9 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  50% {
    background: -webkit-linear-gradient(45deg, #58fff1, #f921e0 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  70% {
    background: -webkit-linear-gradient(45deg, #fffc58, #217bf9 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.ellipsis {
  display: inline-block;
  margin: 0 5px;
}

button.active {
  font-weight: bold;
  background-color: #007bff;
  color: white;
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-animation {
  0% {
    background-size: 57%;
    background-position: 0 0;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 300%;
    background-position: -9em 1em;
  }
}
/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-animation-rev {
  0% {
    background-size: 300%;
    background-position: -9em 1em;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 57%;
    background-position: 0 0;
  }
}
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #7b7b7b;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #606060;
}

.uxt-body-content {
  display: flex;
  flex-direction: row;
  margin-top: 80px;
}
.uxt-body-content .uxt-body-content-filters {
  max-height: 88vh;
  position: sticky;
  top: 5%;
  width: 270px;
}
.uxt-body-content .uxt-body-content-filters .uxt-filter-header {
  display: flex;
  margin-bottom: 20px;
  top: 5%;
  z-index: 9;
}
.uxt-body-content .uxt-body-content-filters .uxt-filter-header h3 {
  margin-left: 24px;
  margin-top: 0;
  margin-bottom: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}
.uxt-body-content .uxt-body-content-filters .uxt-filter-header .uxt-reset-btn {
  background: transparent;
  border: 0px;
  border-bottom: 3px solid;
  -o-border-image: linear-gradient(to right, #059bff, #ff05c5) 1;
     border-image: linear-gradient(to right, #059bff, #ff05c5) 1;
  color: #fff;
  cursor: pointer;
  margin-right: 4px;
  padding: 6px 5px 2px 20px;
  position: relative;
  animation: border-gradient 1s infinite;
}
.uxt-body-content .uxt-body-content-filters .uxt-filter-header .uxt-reset-btn img {
  width: 15px;
  height: auto;
  position: absolute;
  left: 3px;
}
.uxt-body-content .uxt-body-content-filters #panel-category-list {
  width: 100%;
  overflow: auto;
  padding-left: 24px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1;
  position: relative;
}
.uxt-body-content .uxt-body-content-filters #panel-category-list .uxt-lozenges {
  margin-right: 4px;
  margin-bottom: 6px;
  display: flex;
}
.uxt-body-content .uxt-body-content-results {
  width: calc(100vw - 270px);
}

.uxt-results-item-bottom-content {
  padding-left: 12px;
  flex: 1;
}

.uxt-mobile {
  -webkit-filter: blur(30px);
}

@keyframes border-gradient {
  50% {
    -o-border-image: linear-gradient(to right, #ff05c5, #05ff12) 1;
       border-image: linear-gradient(to right, #ff05c5, #05ff12) 1;
  }
  70% {
    -o-border-image: linear-gradient(to right, #05ff12, #ff05c5) 1;
       border-image: linear-gradient(to right, #05ff12, #ff05c5) 1;
  }
}/*# sourceMappingURL=main.css.map */