* {
  margin: 0;
  padding: 0;
}

body{
  background-image: url(Back/Home/CityScrape2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  color: white;
  
  user-select: none;
}


.navbar {
  width: 85%;
  margin: auto;
  padding: 35px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 200px;
  cursor: pointer;
  border-radius: 50%;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
}

.navbar ul li a {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

.navbar ul li::after {
  content: "";
  height: 3px;
  width: 0;
  background: #009688;
  position: absolute;
  left: 0;
  bottom: -10px;
  transition: 0.5s;
}

.navbar ul li:hover::after {
  width: 100%;
}



.cover {
  background: #009688;
  height: 100%;
  width: 0%;
  border-radius: 25px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  transition: 0.5s;
}

.NFT {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.products {
  padding: 0 10vw;
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 40px;
  text-transform: capitalize;
  font-family: 'Oswald', sans-serif;
  color: white;
}

.NFT-container {
  padding: 0 10vw;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.NFT-container::-webkit-scrollbar {
  display: none;
}

.NFT-shw {
  flex: 0 0 auto;
  width: 250px;
  height: 650px;
  margin-right: 40px;
}

.NFT-image {
  position: relative;
  width: 100%;
  height: 310px;
  overflow: hidden; 
}

.NFT-image:hover img{
  transition: transform 0.2s;
  transform: scale(1.1); 
}
.NFT-thumbn {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.NFT-info {
  width: 100%;
  height: 100px;
  padding-top: 10px;
}

.Name {
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;  
  letter-spacing: 2px;
}

.Desc {
  width: 100%;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  opacity: 0.5;
  text-transform: capitalize;
  margin: 5px 0;
  text-align: left;
  font-family: 'Oswald', sans-serif;
 
}

.price {
  font-weight: 900;
  font-size: 20px;
  text-align: left;
  font-family: 'Oswald', sans-serif;
}


.pre-btn,
.nxt-btn {
  border: none;
  width: 10vw;
  height: 70%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #2b3548 100%);
  cursor: pointer;
  z-index: 8;
}

.pre-btn {
  left: 0;
  transform: rotate(180deg);
}

.nxt-btn {
  right: 0;
}

.pre-btn img,
.nxt-btn img {
  opacity: 0.2;
  border-radius: 60%;
}

.pre-btn:hover img,
.nxt-btn:hover img {
  opacity: 3;
}

.collection-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.collection {
  position: relative;
}

.collection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: 50px;
  text-transform: capitalize;
}

.collection:nth-child(3) {
  grid-column: span 2;
  margin-bottom: 10px;
}
.price{
  border: none;
  border-bottom: 1px solid white;
}

/*PURCHASE*/

.pur{

  margin-top: 10px;
  height: 50px;
  width: 100%;
 
}
.pur a{
  margin-top: 5pxs;
  position: relative;
  display:inline-block;
  padding: 10px;
  color: white ;
  letter-spacing: 2px;
  text-decoration: none;
  font-size: 15px;
  overflow: hidden;
  transition: 0.2s;
  font-family: 'Oswald', sans-serif;
  background-color:#163442;
  border-radius: 10px;
}

.pur a:hover{
  background-color: #0f2833;
  color: #2196f3;
}

.pur a span {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, transparent, #2196f3);
}

.pur a:hover span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  animation: moveLeft 2s linear infinite;
}

.pur a:hover span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  animation: moveTop 2s linear infinite;
  animation-delay: 0.5s;
}

.pur a:hover span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  animation: moveRight 2s linear infinite;
  animation-delay: 0.75s;
}

.pur a:hover span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  animation: moveBottom 2s linear infinite;
  animation-delay: 1.2s;
}

@keyframes moveLeft {
  0% {
      left: -100%;
  }
  25% {
      left: 100%;
  }
  100% {
      left: 100%;
  }
}

@keyframes moveTop {
  0% {
      top: -100%;
  }
  25% {
      top: 100%;
  }
  100% {
      top: 100%;
  }
}

@keyframes moveRight {
  0% {
      right: -100%;
  }
  25% {
      right: 100%;
  }
  100% {
      right: 100%;
  }
}

@keyframes moveBottom {
  0% {
      bottom: -100%;
  }
  25% {
      bottom: 100%;
  }
  100% {
      bottom: 100%;
  }
}


/*PURCHASE END*/






/* NAVIGATION*/
.navigation{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #05141b;
  position: sticky; /* Make the container sticky */
  top: 0; /* Stick to the top of the viewport */
  z-index: 999;
  text-align: center;
  
  

}

.navigation a{
  text-decoration: none;
  color: white;
  padding: 5px 80px 5px 80px; 
  border-radius: 5px; 
  transition: background-color 0.3s ease;
  margin: 10px;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  font-family: 'Oswald', sans-serif;
  
}
.navigation a:hover{
  background-color: #abf2f2;

}
.navigation a:hover:not(.active) {
background-color: #517070;
}


.navigation h2{
  display: inline-block;
  color: white;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 2px;
  padding: 0px 100px 0px 0px;
  border: none;
  border-right: 1px solid white;
  font-size: 20px;
}
.navigation a:hover{
  background-color: #abf2f2;

}

.navigation a:hover:not(.active) {
  background-color: #517070;
}

.footer{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #05141b;
  text-align: center;
  border: none; /* Remove the default border styles */
  border-top: 1px solid #ccc; /* Set the border as a horizontal line */
  margin: 20px 0;
  
  

}
.footer a{
  text-decoration: none;
  color: white;
  padding: 5px 40px 5px 40px;  
  border-radius: 5px; 
  transition: background-color 0.3s ease;
  display:inline-block;
  text-align: center;
  font-size: 20px;
  font-family: 'Oswald', sans-serif;

}

.footer a:hover{
  background-color: #abf2f2;

}

.footer a:hover:not(.active) {
  background-color: #517070;
}

.footer2{
  background-color: #05141b;
}

.foottext p{
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  font-size: 15px;
}

p{
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  
}
.sf{
  background-color: #05141b;
}



/*ICONS*/

*{margin: 0; padding: 0; box-sizing: border-box;}
.main{
  display: flex;
  align-items: center;
  justify-content: center;
  
}


a{
  text-decoration: none;
}
.icon{
  width: 35px;
  height: 30px;
  border-radius: 50px;
  background: #fff;
  margin: 10px;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  font-family: sans-serif;
  overflow: hidden;
  box-shadow: 5px 10px 20px rgba(150, 150, 150, .3);
  transition: all .3s ease-out;
}
.icon:hover{
  width: 120px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
}
.icon:hover i{
  color: #fff;
}
.icon .fa-facebook-f{
  color: #1A6ED8;
}
.fb:hover{
  background: #1A6ED8;
}
.icon .fa-twitter{
  color: #1DA1F2;
}
.twt:hover{
  background: #1DA1F2;
}
.icon .fa-discord{
  color: #234aca;
}
.lnk:hover{
  background: #1d4fc5;
}
.icon .fa-instagram{
  color: #f762ff;
}
.git:hover{
  background: #df4dd0;
}
.icon .fa-youtube{
  color: #FE0000;
}
.yt:hover{
  background: #FE0000;
}

/* responsive */
@media only screen and (min-width: 320px) and (max-width: 990px) {
  .main{
      flex-direction: column;
  }
}


/*ICONS END*/
/*NAVIGATION END*/