/* Importing both local and web fonts */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@font-face {
  font-family: "CalSans-SemiBold";
  src: url("../fonts/CalSans-SemiBold.woff2") format("woff2"), url("../fonts/CalSans-SemiBold.woff") format("woff"), url("../fonts/CalSans-SemiBold.ttf") format("truetype"), url("../fonts/CalSans-SemiBold.otf") format("opentype");
}
/* Our resets and defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "CalSans-SemiBold", sans-serif;
}

/* Main Things */
ul {
  list-style-type: none;
}

.FirstNavLinkAvailable {
  color: #131740 !important;
}
.FirstNavLinkAvailable:hover {
  color: #10B981 !important;
}

.FirstNavLinkSelected {
  color: #8358ff !important;
}
.FirstNavLinkSelected:hover {
  color: #EF3D3D !important;
}

.CollectionsPageAvailable {
  color: #131740 !important;
}
.CollectionsPageAvailable:hover {
  color: #10B981 !important;
}

.CollectionsPageSelected {
  color: #8358ff !important;
}
.CollectionsPageSelected:hover {
  color: #EF3D3D !important;
}

a {
  text-decoration: none;
}

input {
  font-family: "DM Sans", sans-serif;
}

/* Other things */
section {
  padding: 5vh;
}

.sectionHeader {
  text-align: center;
  margin-top: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vh;
}
.sectionHeader h1 {
  font-size: 30px;
  color: #131740;
}
.sectionHeader img {
  width: 25px;
}

p,
span {
  font-family: "DM Sans", sans-serif;
}

footer {
  padding: 5vh;
}
footer a {
  font-family: "DM Sans", sans-serif;
  color: #5a5d79;
}
footer a:hover {
  color: #8358ff;
}

header {
  position: sticky;
  top: 0;
  height: 15vh;
  background-color: transparent;
  transition: background-color 0.3s ease;
  z-index: 500;
}
header #headerContent, header #headerMobileContent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 4vh;
}
header #headerContent a, header #headerMobileContent a {
  width: 25vh;
}
header #headerContent a .websiteLogo, header #headerMobileContent a .websiteLogo {
  width: 25vh;
  -o-object-fit: contain;
     object-fit: contain;
}
header #headerContent form, header #headerContent .headerMobileInput, header #headerMobileContent form, header #headerMobileContent .headerMobileInput {
  position: relative;
}
header #headerContent form img, header #headerContent .headerMobileInput img, header #headerMobileContent form img, header #headerMobileContent .headerMobileInput img {
  position: absolute;
  top: 13px;
  left: 15px;
  width: 20px;
}
header #headerContent form input, header #headerContent .headerMobileInput input, header #headerMobileContent form input, header #headerMobileContent .headerMobileInput input {
  width: 50vh;
  padding: 2.5vh 7vh;
  border-radius: 2.5vh;
  border: none;
  outline-color: #8358ff;
}
header #headerContent form input::-moz-placeholder, header #headerContent .headerMobileInput input::-moz-placeholder, header #headerMobileContent form input::-moz-placeholder, header #headerMobileContent .headerMobileInput input::-moz-placeholder {
  font-size: 16px;
}
header #headerContent form input::placeholder, header #headerContent .headerMobileInput input::placeholder, header #headerMobileContent form input::placeholder, header #headerMobileContent .headerMobileInput input::placeholder {
  font-size: 16px;
}
header #headerContent nav ul, header #headerMobileContent nav ul {
  display: flex;
  gap: 5vh;
}
header #headerContent nav ul li, header #headerMobileContent nav ul li {
  padding: 1vh;
}
header #headerContent nav ul li a, header #headerMobileContent nav ul li a {
  transition: 0.2s ease-in-out;
  color: #5a5d79;
}
header #headerContent nav ul li a:hover, header #headerMobileContent nav ul li a:hover {
  color: #8358ff;
}
header #headerContent nav ul li .headerDropdown, header #headerMobileContent nav ul li .headerDropdown {
  position: relative;
}
header #headerContent nav ul li .headerDropdown .dropdownLinks, header #headerMobileContent nav ul li .headerDropdown .dropdownLinks {
  padding: 6vh 1vh 6vh 1vh;
}
header #headerContent nav ul li .headerDropdown .dropdownContent, header #headerMobileContent nav ul li .headerDropdown .dropdownContent {
  display: none;
}
header #headerContent nav ul li .headerDropdown .dropdownContent a, header #headerMobileContent nav ul li .headerDropdown .dropdownContent a {
  color: #5a5d79;
  transition: color 0.2s ease-in-out;
}
header #headerContent nav ul li .headerDropdown .dropdownContent a:hover, header #headerMobileContent nav ul li .headerDropdown .dropdownContent a:hover {
  color: #8358ff;
}
header #headerContent nav ul li .headerDropdown:hover .dropdownContent, header #headerMobileContent nav ul li .headerDropdown:hover .dropdownContent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 5vh;
  position: absolute;
  top: 6.5vh;
  left: -10vh;
  background-color: white;
  border-radius: 3vh;
}
header #headerContent nav ul li .headerDropdown:hover .dropdownContent .dropdownContent1,
header #headerContent nav ul li .headerDropdown:hover .dropdownContent .dropdownContent2, header #headerMobileContent nav ul li .headerDropdown:hover .dropdownContent .dropdownContent1,
header #headerMobileContent nav ul li .headerDropdown:hover .dropdownContent .dropdownContent2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1vh;
}
header #headerContent nav ul li .headerDropdown:hover .dropdownContent a, header #headerMobileContent nav ul li .headerDropdown:hover .dropdownContent a {
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 15px;
}
header #headerContent nav ul li .headerDropdown:hover .dropdownContent a:hover, header #headerMobileContent nav ul li .headerDropdown:hover .dropdownContent a:hover {
  background-color: #e7e8ec;
  border-radius: 2vh;
}
header #headerContent nav ul li .HomeDropdown:hover .dropdownContent, header #headerMobileContent nav ul li .HomeDropdown:hover .dropdownContent {
  width: 70vh;
  height: 45vh;
}
header #headerContent nav ul li .PagesDropdown #CollectionsPage, header #headerMobileContent nav ul li .PagesDropdown #CollectionsPage {
  color: #131740;
}
header #headerContent nav ul li .PagesDropdown:hover .dropdownContent, header #headerMobileContent nav ul li .PagesDropdown:hover .dropdownContent {
  width: 70vh;
  height: 55vh;
}
header #headerContent nav ul li .ExploreDropdown .dropdownContent a, header #headerMobileContent nav ul li .ExploreDropdown .dropdownContent a {
  display: flex;
  align-items: center;
  gap: 2vh;
  padding-left: 7vh;
  width: 30vh;
}
header #headerContent nav ul li .ExploreDropdown .dropdownContent a img, header #headerMobileContent nav ul li .ExploreDropdown .dropdownContent a img {
  padding-bottom: 0.5vh;
  width: 15px;
}
header #headerContent nav ul li .ExploreDropdown:hover .dropdownContent, header #headerMobileContent nav ul li .ExploreDropdown:hover .dropdownContent {
  width: 75vh;
  height: 30vh;
  padding-right: 7vh;
}
header #headerContent nav ul li .ResourcesDropdown:hover .dropdownContent, header #headerMobileContent nav ul li .ResourcesDropdown:hover .dropdownContent {
  display: flex;
  flex-direction: column;
  gap: 4vh;
  width: 28vh;
  padding: 2vh;
  position: absolute;
  left: -5vh;
}
header #headerContent .headerButtons, header #headerMobileContent .headerButtons {
  display: flex;
  gap: 2vh;
}
header #headerContent .headerButtons li button,
header #headerContent .headerButtons li .buttonDropdown, header #headerMobileContent .headerButtons li button,
header #headerMobileContent .headerButtons li .buttonDropdown {
  cursor: pointer;
  width: 6.5vh;
  height: 6.5vh;
  background: white;
  border-radius: 25px;
  border: none;
  transition: 0.1s ease-in-out;
}
header #headerContent .headerButtons li button:hover,
header #headerContent .headerButtons li .buttonDropdown:hover, header #headerMobileContent .headerButtons li button:hover,
header #headerMobileContent .headerButtons li .buttonDropdown:hover {
  background-color: #8358ff;
  color: white;
}
header #headerContent .headerButtons li .buttonDropdown, header #headerMobileContent .headerButtons li .buttonDropdown {
  padding-left: 2vh;
  padding-top: 1.7vh;
}
header #headerContent .headerButtons li .buttonDropdown .buttonDropdown-Content, header #headerMobileContent .headerButtons li .buttonDropdown .buttonDropdown-Content {
  display: none;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  top: 3vh;
  right: 15vh;
  background-color: white;
  width: 38vh;
  height: 40.9vh;
  border-radius: 1vh;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopy, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopy {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopy img, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopy img {
  position: absolute;
  right: 1.7vh;
  top: 1vh;
  color: #131740;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopy:hover, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopy:hover {
  background-color: #e7e8ec;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopyArea, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopyArea {
  cursor: pointer;
  width: 35vh;
  padding: 5px;
  border-radius: 3px;
  color: #131740;
  overflow: hidden;
  text-overflow: ellipsis;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .copied-text, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .copied-text {
  position: absolute;
  background-color: #f5f5f5;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  /* Center horizontally */
  font-size: 0.8rem;
  /* Adjust font size as needed */
  color: green;
  /* Change color to indicate success */
  opacity: 0;
  /* Initially invisible */
  transition: opacity 0.3s ease-in-out;
  /* Smooth fade-in animation */
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopyArea:hover .copied-text,
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopyArea.copied .copied-text, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopyArea:hover .copied-text,
header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .textToCopyArea.copied .copied-text {
  opacity: 1;
  /* Show "Copied!" text on hover or success */
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText {
  display: flex;
  border: solid 1px #e7e8ec;
  padding: 2vh 0vh 2vh 5vh;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText span, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText span {
  color: #5a5d79;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText .buttonDropdown-Balance, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText .buttonDropdown-Balance {
  display: flex;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText .buttonDropdown-Balance span, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText .buttonDropdown-Balance span {
  color: #10b981;
}
header #headerContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText .buttonDropdown-Balance img, header #headerMobileContent .headerButtons li .buttonDropdown:hover .buttonDropdown-Content .buttonDropdown-ContentText .buttonDropdown-Balance img {
  width: 15%;
}
header #headerContent .headerButtons li .buttonDropdown:hover ul li, header #headerMobileContent .headerButtons li .buttonDropdown:hover ul li {
  display: inline-flex;
  padding: 2vh 5vh 2vh;
  width: 100%;
}
header #headerContent .headerButtons li .buttonDropdown:hover ul li a, header #headerMobileContent .headerButtons li .buttonDropdown:hover ul li a {
  color: #131740;
}
header #headerContent .headerButtons li .buttonDropdown:hover ul li a i, header #headerMobileContent .headerButtons li .buttonDropdown:hover ul li a i {
  margin-right: 2vh;
}
header #headerContent .headerButtons li .buttonDropdown:hover ul li:hover, header #headerMobileContent .headerButtons li .buttonDropdown:hover ul li:hover {
  background-color: #e7e8ec;
}

header.scrolled {
  background-color: rgba(243, 235, 235, 0.603);
  z-index: 100;
}

main {
  /* index.html */
  /* collections.html */
}
main .background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 70vh;
  z-index: -1;
}
main #UpBanner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10vh;
}
main #UpBanner #upBanner-Main {
  display: flex;
  flex-direction: column;
  gap: 5vh;
}
main #UpBanner #upBanner-Main h1 {
  font-size: 60px;
  color: #131740;
  width: 85vh;
}
main #UpBanner #upBanner-Main p {
  width: 70vh;
  font-size: 20px;
  color: #5a5d79;
}
main #UpBanner #upBanner-Main ul {
  display: flex;
  gap: 3vh;
}
main #UpBanner #upBanner-Main ul li {
  padding: 2vh;
  width: 20vh;
  border-radius: 20vh;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
main #UpBanner #upBanner-Main ul li:nth-child(1) {
  background-color: #8358ff;
}
main #UpBanner #upBanner-Main ul li:nth-child(1) a {
  color: white;
}
main #UpBanner #upBanner-Main ul li:nth-child(1):hover {
  background-color: #7444ff;
}
main #UpBanner #upBanner-Main ul li:nth-child(2) {
  background-color: #fff;
  box-shadow: 8px 8px 16px #aaa, -8px -8px 16px #fff;
}
main #UpBanner #upBanner-Main ul li:nth-child(2) a {
  color: #8358ff;
}
main #UpBanner #upBanner-Main ul li:nth-child(2):hover {
  background-color: #7444ff;
}
main #UpBanner #upBanner-Main ul li:nth-child(2):hover a {
  color: white;
}
main #UpBanner #upBannerImages {
  position: relative;
}
main #UpBanner #upBannerImages img:nth-child(1) {
  position: relative;
  top: 4vh;
  right: -5vh;
  width: 90vh;
  z-index: 1;
}
main #UpBanner #upBannerImages img:nth-child(2) {
  position: absolute;
  top: 5vh;
  right: 5vh;
  transform: rotate(10deg);
  border-radius: 20vh;
  width: 70vh;
  z-index: -1;
}
main #UpBanner #upBannerImages .up-down-animation {
  animation-name: up-down;
  animation-duration: 7s;
  /* Adjust duration for animation speed */
  animation-iteration-count: infinite;
  /* Loop animation forever */
}
@keyframes up-down {
  0% {
    transform: translateY(0);
  }
  /* Start at original position */
  50% {
    transform: translateY(-50px);
  }
  /* Move image down */
  100% {
    transform: translateY(0);
  }
  /* Move image back up (loop) */
}
main #HotBids {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vh;
}
main #HotBids .sectionHeader img {
  padding-bottom: 0.9vh;
}
main #HotBids .hotBidsCards {
  display: flex;
  gap: 4vh;
  overflow-x: scroll;
  scrollbar-width: none;
  position: relative;
  width: 100% !important;
}
main #HotBids .hotBidsCards .swiper-wrapper {
  display: flex;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  padding: 3vh;
  margin: 5vh;
  border: solid 1px #e7e8ec;
  border-radius: 5vh;
  width: 20% !important;
  overflow: hidden;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard button {
  background: none;
  border: none;
  color: #8358ff;
  font-size: 14px;
  cursor: pointer;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Top a {
  margin-top: 0.5vh;
  color: #131740;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Top a:hover {
  color: #8358ff;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Top span {
  display: flex;
  align-items: center;
  color: #10B981;
  border: solid 1px #e7e8ec;
  border-radius: 1vh;
  padding: 2px 3px;
  font-size: 15px;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Top span img {
  width: 20px;
  height: 18px;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Center {
  margin-bottom: 1vh;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Bottom i {
  padding-right: 1vh;
}
main #HotBids .hotBidsCards .swiper-wrapper .hotBidsCard .hotBidsCard-Bottom span {
  color: #5a5d79;
}
main #HotBids .hotBidsCards .BothSwiperArrows {
  background-color: #F2F3F4;
  color: #7E7E7E;
  width: 45px;
  height: 45px;
  position: absolute;
  border-radius: 6vh;
  border: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
main #HotBids .hotBidsCards .BothSwiperArrows:hover {
  background-color: #8358ff;
  color: white;
}
main #HotBids .hotBidsCards .BothSwiperArrows::after {
  content: "";
}
main #TopCollections {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5vh;
  background-color: #fcfcfe;
}
main #TopCollections .sectionHeader #topCollectionsForm {
  position: relative;
}
main #TopCollections .sectionHeader #topCollectionsForm i {
  position: absolute;
  right: 0;
  top: 0;
  color: #8358ff;
  font-size: 27px;
}
main #TopCollections .sectionHeader #topCollectionsForm #topCollectionsDropdown {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 30vh;
  font-size: 27px;
  color: #8358ff;
  padding-top: 1px;
}
main #TopCollections .sectionHeader #topCollectionsForm #topCollectionsDropdown option {
  font-size: 16px;
  color: #131740;
  padding-left: 5vh !important;
}
main #TopCollections #topCollectionsCards {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 4vh;
}
main #TopCollections #topCollectionsCards .topCollectionsCard {
  display: flex;
  align-items: center;
  gap: 2vh;
  width: 45vh;
  border: solid 2px #e9f0ed;
  border-radius: 4vh;
  background-color: #fff;
  padding: 3vh 0;
}
main #TopCollections #topCollectionsCards .topCollectionsCard a {
  color: #131740;
}
main #TopCollections #topCollectionsCards .topCollectionsCard a:hover {
  color: #8358ff;
}
main #TopCollections #topCollectionsCards .topCollectionsCard span {
  transform: translateX(3.5vh);
  background-color: #131740;
  color: white;
  border: solid 1px white;
  border-radius: 10vh;
  width: 3.5vh;
  text-align: center;
}
main #TopCollections #goToRankings {
  background-color: #8358ff;
  padding: 2.5vh;
  width: 30vh;
  border-radius: 20vh;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  color: white;
}
main #TopCollections #goToRankings:hover {
  background-color: #7444ff;
}
main .TrendingCategories {
  display: flex;
  flex-direction: column;
  gap: 7vh;
}
main .TrendingCategories .trendingCategories-Header {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
main .TrendingCategories .trendingCategories-Header ul {
  display: flex;
  gap: 3vh;
  margin-right: 27vh;
}
main .TrendingCategories .trendingCategories-Header ul li {
  display: flex;
  align-items: center;
  padding: 1vh 2vh;
  color: #5a5d79;
  border: solid 1px #e7e8ec;
  border-radius: 1vh;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
main .TrendingCategories .trendingCategories-Header ul li:hover {
  background-color: #8358ff;
  color: white;
}
main .TrendingCategories .trendingCategories-Header ul li:hover img {
  fill: white;
}
main .TrendingCategories .trendingCategories-Header ul li:nth-child(1) {
  background-color: #e7e8ec;
}
main .TrendingCategories .trendingCategories-Header ul li:nth-child(1):hover {
  color: white;
  background-color: #8358ff;
}
main .TrendingCategories .trendingCategories-Header form {
  border: solid 1px #e7e8ec;
  padding: 1.5vh;
  border-radius: 1vh;
  margin-bottom: 3px;
}
main .TrendingCategories .trendingCategories-Header form select {
  background-color: none;
  border: none;
  outline: none;
  cursor: pointer;
}
main .TrendingCategories .trendingCategories-Cards {
  display: flex;
  justify-content: center;
  gap: 6vh;
  flex-wrap: wrap;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  border: solid 1px #e7e8ec;
  border-radius: 2vh;
  padding: 3vh;
  position: relative;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-Favorites {
  display: flex;
  align-items: center;
  gap: 0.5vh;
  position: absolute;
  right: 5vh;
  top: 5vh;
  padding: 1vh 2vh;
  border-radius: 1vh;
  background-color: white;
  color: #5a5d79;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-Favorites i {
  padding-bottom: 1px;
  cursor: pointer;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card img {
  border-radius: 1.5vh;
  transition: 0.15s ease-in-out;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card a {
  margin-top: 2vh;
  color: #131740;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card a:hover {
  color: #8358ff;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-SmallImages {
  display: flex;
  position: absolute;
  top: 38.5vh;
  left: 5vh;
  cursor: pointer;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-SmallImages img {
  border: solid 2px white;
  border-radius: 4vh;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-SmallImages img:hover {
  border: solid 2px #8358ff;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-SmallImages img:nth-child(2) {
  position: absolute;
  left: 2.5vh;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-TextBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-TextBottom a {
  display: flex;
  align-items: center;
  gap: 0.5vh;
  color: #5a5d79;
  margin-top: 0;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-TextBottom a i {
  padding-bottom: 0.5vh;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-TextBottom a:hover {
  color: #8358ff;
}
main .TrendingCategories .trendingCategories-Cards .trendingCategories-Card .trendingCategories-TextBottom button {
  background: none;
  border: none;
  color: #8358ff;
  cursor: pointer;
}
main #CreateAndSellYourNFTs {
  display: flex;
  flex-direction: column;
  gap: 10vh;
  background-color: #fcfcfe !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 5vh;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4vh;
  width: 45vh;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .createAndSellYourNFTs-ImageShadow {
  width: 10vh;
  padding: 2.5vh 6vh;
  border-radius: 8vh;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .createAndSellYourNFTs-ImageShadow .createAndSellYourNFTs-Image {
  border-radius: 5vh;
  width: 7vh;
  height: 7vh;
  position: relative;
  right: 3.4vh;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .createAndSellYourNFTs-ImageShadow .createAndSellYourNFTs-Image img {
  position: absolute;
  right: 1.5vh;
  top: 1.5vh;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .NFTImageShadow1 {
  background-color: #CDBCFF !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .NFTImageShadow1 .NFTImage1 {
  background-color: #8358ff !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .NFTImageShadow2 {
  background-color: #C4F2E3 !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .NFTImageShadow2 .NFTImage2 {
  background-color: #10B981 !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .NFTImageShadow3 {
  background-color: #cddffb !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .NFTImageShadow3 .NFTImage3 {
  background-color: #428AF8 !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .NFTImageShadow4 {
  background-color: #ffd0d0 !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Cards .createAndSellYourNFTs-Card .NFTImageShadow4 .NFTImage4 {
  background-color: #ef4444 !important;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 7vh;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Bottom p {
  font-size: 20px;
  width: 56%;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Bottom form {
  position: relative;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Bottom form input {
  padding: 2.5vh;
  width: 75vh;
  border-radius: 5vh;
  outline-color: #8358ff;
  border: solid 1px #e7e8ec;
}
main #CreateAndSellYourNFTs #createAndSellYourNFTs-Bottom form button {
  position: absolute;
  right: 2vh;
  top: 1.2vh;
  border: none;
  background: #8358ff;
  color: white;
  padding: 1.5vh;
  width: 15vh;
  border-radius: 5vh;
  cursor: pointer;
}
main .exploreCollections-Card {
  display: flex;
  gap: 0 !important;
}
main .exploreCollections-Card .exploreCollections-Images {
  display: flex;
  align-items: center;
  gap: 2vh;
}
main .exploreCollections-Card .exploreCollections-Images img {
  border-radius: 2vh;
}
main .exploreCollections-Card .exploreCollections-SmallImages {
  display: flex;
  flex-direction: column;
  gap: 1.65vh;
}
main .exploreCollections-Card .exploreCollections-CardBottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1vh;
  margin-top: 2vh;
}
main .exploreCollections-Card .exploreCollections-CardBottom .CardBottomLink {
  color: #131740;
}
main .exploreCollections-Card .exploreCollections-CardBottom .CardBottomLink:hover {
  color: #8358ff;
}
main .exploreCollections-Card .exploreCollections-CardBottomLeft {
  display: flex;
  align-items: center;
  gap: 1vh;
  position: relative;
}
main .exploreCollections-Card .exploreCollections-CardBottomLeft p a {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  color: #8358ff !important;
}
main .exploreCollections-Card .exploreCollections-CardBottomLeft span {
  position: absolute;
  right: 0;
  color: #5a5d79;
  font-weight: 600;
}

footer {
  display: flex;
  flex-direction: column;
  gap: 9vh;
}
footer #FooterTop {
  display: flex;
}
footer #FooterTop #footerTop-Left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5vh;
}
footer #FooterTop #footerTop-Left img {
  width: 25%;
}
footer #FooterTop #footerTop-Left p {
  width: 60%;
}
footer #FooterTop #footerTop-Left .socialLinks {
  display: flex;
  gap: 5vh;
}
footer #FooterTop #footerTop-Left .socialLinks li a {
  color: #a1a2b3;
}
footer #FooterTop #footerTop-Left .socialLinks li a i {
  font-size: 20px;
}
footer #FooterTop #footerTop-Left .socialLinks li a:hover {
  color: #8358ff;
}
footer #FooterTop #footerTop-Right {
  display: flex;
  gap: 15vh;
}
footer #FooterTop #footerTop-Right .siteInfoLinks {
  display: flex;
  flex-direction: column;
  gap: 3vh;
}
footer #FooterTop #footerTop-Right .siteInfoLinks .siteInfoLinks-Main {
  display: flex;
  flex-direction: column;
}
footer #FooterBottom {
  display: flex;
  justify-content: space-between;
  position: relative;
}
footer #FooterBottom #footerBottomLinks {
  display: flex;
  gap: 5vh;
}

header #headerMobileContent {
  display: none;
}
header #connectWallet {
  display: none;
}

main #UpBanner #upBannerMobileImages {
  display: none;
}

@media only screen and (max-width: 1200px) {
  header #headerContent {
    display: none;
  }
  header #headerMobileContent {
    display: flex;
    flex-direction: column;
    align-items: unset;
    padding-top: 1vh;
    width: 100%;
    height: 100vh;
    /* navMenu for mobile view */
  }
  header #headerMobileContent #headerMobileTop {
    display: flex;
    justify-content: space-between;
    padding-left: 4vh;
    padding-right: 4vh;
  }
  header #headerMobileContent .headerMobileInput {
    display: none;
  }
  header #headerMobileContent .InputShow {
    display: block;
    padding-left: 4vh;
    position: relative;
  }
  header #headerMobileContent .InputShow img {
    position: absolute;
    left: 6vh;
  }
  header #headerMobileContent .InputShow input {
    width: 92vw;
    height: auto;
  }
  header #headerMobileContent .navMenu {
    display: none;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #eee;
    z-index: 1;
    padding-left: 5vh;
    transition: 0.5s;
  }
  header #headerMobileContent .navMenu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 4vh;
  }
  header #headerMobileContent .navMenu ul li {
    padding: unset;
  }
  header #headerMobileContent .navMenu ul li .dropdownMobile {
    font-size: 18px !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    transition: 0.3s ease-in-out;
    position: relative;
    cursor: pointer;
  }
  header #headerMobileContent .navMenu ul li .dropdownMobile img {
    position: absolute;
    right: 0;
  }
  header #headerMobileContent .navMenu ul li .dropdownMobile .dropdownMobileLinks {
    color: #5a5d79;
  }
  header #headerMobileContent .navMenu ul li .dropdownMobile .dropdownMobileLinks:hover {
    color: #8358ff;
  }
  header #headerMobileContent .navMenu ul li .dropdownMobile .dropdownContent {
    display: none;
  }
  header #headerMobileContent .navMenu ul li .dropdownMobile .dropdownContentShow {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 3vh;
    gap: 2vh;
  }
  header #headerMobileContent .navMenu ul li a {
    width: 100%;
    padding-left: 40px;
    padding-top: 10px;
    padding-bottom: 7px;
    position: relative;
  }
  header #headerMobileContent .navMenu ul li a:hover {
    background-color: white;
    border-radius: 2vh;
  }
  header #headerMobileContent .navMenu ul li a img {
    position: absolute;
    left: 10px;
    top: 6px;
  }
  header #headerMobileContent .navMenu ul li .LastMobileLink {
    font-size: 18px;
    color: #5a5d79;
    cursor: pointer;
  }
  header #headerMobileContent .navMenu ul li .LastMobileLink:hover {
    color: #8358ff;
  }
  header #headerMobileContent .navMenuShow {
    display: flex !important;
  }
  header #headerMobileContent #headerMobileBottom {
    display: flex;
    flex-direction: column;
    gap: 5vh;
  }
  header #headerMobileContent #headerMobileBottom #connectWallet {
    padding: 2vh;
    width: 89vw;
    border-radius: 2vh;
    text-align: center;
    cursor: pointer;
    transition: 0.1s ease-in-out;
    background-color: #8358ff;
    color: white;
    border: none;
    position: relative;
    margin-left: 5vh !important;
  }
  header #headerMobileContent #headerMobileBottom #connectWallet:hover {
    background-color: #7444ff;
  }
  header #headerMobileContent #headerMobileBottom #connectWallet::after {
    content: "";
    border-bottom: solid 1px #5a5d79;
    position: absolute;
    top: 9vh;
    left: 10vw;
    width: 70vw;
  }
  header #headerMobileContent #headerMobileBottom .headerSocialLinks {
    display: flex;
    justify-content: center;
    gap: 5vh;
  }
  header #headerMobileContent #headerMobileBottom .headerSocialLinks li a {
    color: #a1a2b3;
  }
  header #headerMobileContent #headerMobileBottom .headerSocialLinks li a i {
    font-size: 20px;
  }
  header #headerMobileContent #headerMobileBottom .headerSocialLinks li a:hover {
    color: #8358ff;
  }
  main section,
  main #createAndSellYourNFTs-Cards {
    display: flex;
    flex-wrap: wrap;
  }
  main #createAndSellYourNFTs-Bottom p {
    width: 85% !important;
    font-size: 18px !important;
  }
  main #UpBanner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  main #UpBanner #upBanner-Main h1 {
    width: 75vh;
    font-size: 50px;
  }
  main #UpBanner #upBanner-Main p {
    width: 65vh;
    font-size: 18px;
  }
  main #UpBanner #upBannerImages img:nth-child(1) {
    position: absolute;
    top: -2vh;
    right: 0;
    width: 75vh;
  }
  main #UpBanner #upBannerImages img:nth-child(2) {
    position: absolute;
    top: -8vh;
    right: 5vh;
    width: 65vh;
  }
  main .trendingCategories-Header {
    display: flex;
    justify-content: unset;
    align-items: unset;
    flex-wrap: wrap;
    gap: 5vh;
  }
  main .trendingCategories-Header ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-right: 0 !important;
  }
  footer {
    display: flex;
  }
}
@media only screen and (max-width: 1200px) and (max-width: 920px) {
  section {
    padding: 5vh 0 0 0;
  }
  #UpBanner {
    display: flex;
    flex-direction: column;
  }
  #UpBanner #upBanner-Main {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-top: -10vh !important;
  }
  #UpBanner #upBanner-Main h1,
  #UpBanner #upBanner-Main p {
    width: 90% !important;
  }
  #UpBanner #upBannerImages {
    display: none;
  }
  #UpBanner #upBannerMobileImages {
    display: flex !important;
    align-items: center;
    position: relative;
    margin-bottom: 10vh;
  }
  #UpBanner #upBannerMobileImages img {
    top: 5vh;
  }
  #UpBanner #upBannerMobileImages img:nth-child(1) {
    position: relative;
    top: 18vh;
    left: 10vh;
    width: 80%;
    z-index: 1;
  }
  #UpBanner #upBannerMobileImages img:nth-child(2) {
    position: absolute;
    top: 15%;
    left: 15%;
    transform: rotate(10deg);
    border-radius: 20vh;
    width: 70%;
    z-index: -1;
  }
  #UpBanner #upBannerMobileImages .up-down-animation {
    animation-name: up-down;
    animation-duration: 7s;
    /* Adjust duration for animation speed */
    animation-iteration-count: infinite;
    /* Loop animation forever */
  }
  @keyframes up-down {
    0% {
      transform: translateY(0);
    }
    /* Start at original position */
    50% {
      transform: translateY(-50px);
    }
    /* Move image down */
    100% {
      transform: translateY(0);
    }
    /* Move image back up (loop) */
  }
  footer {
    padding: 5vh 0 5vh 0;
  }
  #FooterTop,
  #footerTop-Left,
  #FooterBottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  #FooterTop p,
  #footerTop-Left p,
  #FooterBottom p {
    width: 90% !important;
  }
  .infoLinks1 {
    display: flex;
    gap: 1vh;
  }
  .infoLinks2 {
    display: flex;
    gap: 2vh;
  }
  .infoLinks3 {
    display: flex;
    gap: 3.8vh;
  }
  #FooterTop {
    gap: 5vh;
  }
  #FooterBottom {
    gap: 3vh;
  }
}
@media only screen and (max-width: 1200px) and (max-width: 660px) {
  #TopCollections .sectionHeader {
    display: flex;
    flex-direction: column;
    gap: 3vh;
  }
  #createAndSellYourNFTs-Cards {
    display: flex !important;
    flex-direction: column;
    width: 100%;
  }
  #createAndSellYourNFTs-Bottom p {
    font-size: 16px !important;
  }
  #createAndSellYourNFTs-Bottom form input {
    width: 50vh !important;
  }
}
@media only screen and (max-width: 1200px) and (max-width: 500px) {
  footer {
    display: flex;
    gap: 6vh !important;
  }
  #footerTop-Right {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7vh !important;
  }
}/*# sourceMappingURL=style.css.map */