@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
    scroll-behavior: smooth;
  }



body
{
    font-family: "Poppins", serif;




}

header
{
position: sticky;
top: 0;
background: transparent;
z-index: 9999;
}

.main-menu {
    border-radius: 150px;
    margin-top: 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}




.search-form {
	right: 200px;
	top: 200px;
}

 .search-field {
	background-color: transparent;
	background-image: url(assets/img/search-icon.png);
	background-position: 5px  center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 45px;
	margin: 3px 0;
	padding: 0 0 0 40px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width:0px;
   cursor: pointer;
}

.search-field:focus {
	background-color: #f3f3f6;

	cursor: text;
	outline: 0;
	width: 260px;
  color:#333;
  border-radius: 100px;
  padding: 0px 40px;
  padding-right: 10px;
}
.search-form
.search-submit {
display:none;
}


.right-nav ul {
    list-style: none;
    align-items: center;
    margin-bottom: 0px;
}



.sign-btn {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9  51%, #4776E6  100%)}
.sign-btn {
   margin: 5px 10px;
   padding: 15px 45px;
   text-align: center;

   transition: 0.5s;
   background-size: 200% auto;
   color: white;
   box-shadow: 0 0 20px #eee;
   border-radius: 60px;
   display: block;
   text-decoration: none;
   font-size: 16px;
 }

 .sign-btn:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }



 .banner-area {
    margin-top: -130px;
    padding-top: 250px;
    padding-bottom: 100px;
    /* background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%); */
    position: relative;
    background-image: url(assets/img/mian-ng.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh!important;
}






 .banner-area h3 {
    color: #fff;
    text-align: left;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
}

.get-btn {
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
    padding: 17px 43px;
    display: inline-block;
    margin-top: 15px;
    border-radius: 72px;
    font-size: 16px;
    font-weight: 400;
    background: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    transition: 0.5s;
    background-size: 200% auto;
}

.get-btn:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
.title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-collection {
    padding: 60px 0px;
    background: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    position: sticky;
}

.top-collection .title-bar h3
{
    color: #fff;
    font-weight: 300;
}

.title-bar h3 {
    font-size: 25px;
    font-weight: 300;
    margin-bottom: 0px;
    color: #fff;
}

.collection-box {
    transition: box-shadow .3s;
    /* border: 1px solid #eee; */
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    /* box-shadow: 0 0 39px rgb(217 200 251); */
    padding-bottom: 16px;
    position: relative;
}

/* .collection-box:hover
{
    box-shadow: 0 0 39px rgb(139 162 249);
} */


.collection-box::before {
    content: "";
    position: absolute;
    top: auto;
    bottom: -4px;
    left: 0;
    border-radius: 15px;
    /* background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%); */
    background-repeat: repeat-x;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: #cab0fc54;
}



.collection-box:hover::before {
    transform: rotate(2deg) translateX(-7px) translateY(11px);
}

.collection-img
{
    height: 242px;
    overflow: hidden;
    border-radius: 10px;
}



.collection-img img {
    border-radius: 10px;
    transition: transform .5s ease;

}


.collection-box:hover>.collection-img img
{
    transform: scale(1.2);
}

.collection-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 6px;
}

.views {
    display: flex;
    align-items: center;
}

.user img {
    width: 22px;
    margin-right: 5px;
}

.user-views {
    margin-top: 1px;
    font-size: 13px;
}


.collect-name {
    padding: 0px 10px;
    margin-top: 14px;
}

.collect-name h3 {
    font-size: 17px;
    font-weight: 400;
}

.collect-percent {
    color: green;
}

a.view-btn {
    text-decoration: none;
    border: 1px solid #fff;
    padding: 10px 22px;
    font-size: 13px;
    border-radius: 37px;
    color: #fff;
    font-weight: 400;
}

.nav-tabs
{
justify-content: left;
border: none;
font-size: 14px;

}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    /* background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%); */
    color: #7e56f0;
    border-radius: 80px;
    border: none;
    background: #fff;
    font-weight: 300;
}

.nav-tabs .nav-link
{
    background: transparent;
    border: 1px solid #fff;
    border-radius: 80px;
    margin: 0px 5px;
    color: #fff;
    font-weight: 300;
}

.discover-nfts {
    padding: 60px 0px;
    background: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
}


.stake-box {
    box-shadow: 0 0 39px rgb(177 192 250);
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    transition: box-shadow .3s;
    position: relative;
}

.stake-box:hover
{
    box-shadow: 0 0 39px rgb(217 200 251);
}

.nft-img{position: relative;}

.nft-img img {
    border-radius: 10px;
}

.stake-logo img {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
}

.stake-logo {
    position: absolute;
    bottom: -23px;
}

.nft-text {
    margin-top: 29px;
    padding: 0px 12px;
}

.nft-text h3 {
    font-size: 16px;
    font-weight: 300;
}

.price {
    display: flex;
    align-items: center;
    margin: 9px 0px;
    font-size: 13px;
    color: green;
    padding: 0px 12px;
}

.price img {
    width: 24px;
    margin-right: 6px;
}

.call-to-act {
    background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    padding: 80px 0px;
}

.call-to-act h3 {
    color: #fff;
    font-size: 42px;
    font-weight: 300;
}

.call-to-act p {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
}

.call-to-act a {
    background: #fff;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 36px;
    font-weight: 300;
    color: #470de8;
}

footer {
    padding-top: 50px;
}

.foot-logo img {
    width: 120px;
}

.banner-txt h2 {
    color: #333;
    font-size: 2.5rem;
    font-weight: 200;
    margin-bottom: 14px;
    line-height: 76px;
}

.banner-txt h2 span
{
    font-size: 74px;
}

ul.foot-menu {
    list-style: none;
    padding: 0px;
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 10px 0px;
    flex-direction: column;
}

ul.foot-menu li a {
    text-decoration: none;
    color: #646363;
    font-weight: 500;
    font-size: 0.86rem;
    font-weight: 400;
}

p.copyright {
    /* background: #d2d9f9; */
    padding: 18px 0px;
    /* border-radius: 31px; */
    color: #222;
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid #eee;
}

.nft-right
{
    display: flex;
    gap: 10px;
}


.left-img img {
    border-radius: 20px;
    margin-top: -16px;
    border: 4px solid #fff;
}

.right-img img {
    border-radius: 20px;
    margin-top: 16px;
    border: 4px solid #fff;

}

.banner-txt p {
    color: #222;
    margin-bottom: 3px;
}


.left-img {
    -webkit-animation: action 1s infinite  alternate;
    animation: action 1s infinite  alternate;
}

@-webkit-keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}



.right-img {
    -webkit-animation: actionr 1s infinite  alternate;
    animation: actionr 1s infinite  alternate;
}

@-webkit-keyframes actionr {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes actionr {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}






.main-nft {
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.main-nft-content {
    display: flex;
    justify-content: space-between;
}

.nft-user {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nft-user img {
    width: 45px;
    border-radius: 100%;
}

.nft-user h4 {
    margin-bottom: 0px;
    font-size: 15px;
    font-weight: 400;
}

.nft-bid-box {
    display: flex;
    align-items: end;
}

.currency img {
    width: 24px;
    margin-right: 5px;
}

.price-nft {
    display: flex;
    flex-direction: column;
}




.nft-main-img img {
    border-radius: 12px;
    margin-bottom: 18px;
    width:100%;
}

.price-nft small {
    font-size: 12px;
    text-align: right;
}


.related-nft {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}


.related-div img {
    width: 140px;
    border-radius: 10px;
}

.user-price {
    display: flex;
    gap: 10px;
    align-items: center;
}

.related-right h3 {
    font-size: 15px;
    font-weight: 400;
}

.user-price img {
    width: 30px;
    border-radius: 100%;
}
.related-price {
    border: 1px solid green;
    color: green;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 7px;
    border-radius: 5px;
}

.related-price img {
    width: 18px;
}


.nft-ranks {
    padding: 20px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.nft-ranks h4 {
    font-size: 1.1rem;
    margin-bottom: 2px;
    font-weight: 400;
}


.rank-img img {
    width: 55px;
    border-radius: 100%;
}

.rank-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dfdfe1;
    padding-bottom: 12px;
    padding-top: 12px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 13px;
}

.rank-price img {
    width: 18px;
}

.rank-title {
    font-size: 14px;
}

.rank-price span {
    font-size: 13px;
}

.rank-percent {
    font-size: 1rem;
    color: green;
}







.popular-items {
    padding: 60px 0px;
}
.foot-widget h3 {
    font-size: 1rem;
}





.action-nft {
    padding: 60px 0px;
}


.started-txt {
    padding: 0px 76px;
}
.started-txt h3 {
    font-weight: 300;
    font-size: 2.5rem;
    margin-bottom: 17px;
}

.started-txt a {
    margin: 5px 0px;
    padding: 15px 45px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 60px;
    display: block;
    text-decoration: none;
    font-size: 16px;
    background: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    width: fit-content;
}





/*Product Page */

.nft-roducts {
    padding-bottom: 60px;
}

.nft-collect {
    background: url(assets/img/bg2.jpg);
    height: 80vh !important;
    background-position: center center;
    background-size: cover;
}

form.srch-nft
{
    position: relative;
}

form.srch-nft i {
    position: absolute;
    top: 18px;
    left: 15px;
    font-size: 20px;
}


form.srch-nft input {
    width: 100%;
    border: 0px;
    background: #fff;
    padding: 17px 25px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 300;
    padding-left: 40px!important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.product-box
{
    transition: box-shadow .3s;
    /* border: 1px solid #eee; */
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    /* box-shadow: 0 0 39px rgb(217 200 251); */
    padding-bottom: 16px;
    position: relative;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.product-box::before {
    content: "";
    position: absolute;
    top: auto;
    bottom: -2px;
    left: 0;
    border-radius: 15px;
    background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    background-repeat: repeat-x;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
    z-index: -2;
    /* background: #cab0fc54; */
}

.product-box:hover::before {
    transform: rotate(2deg) translateX(-7px) translateY(11px);
}

.product-content h3{
   margin-bottom: 0px;
}

.product-content h3 a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

.product-content p {
    font-size: 13px;
    color: #616060;
    margin-bottom: 0px;
}

.product-img {
    height: 242px;
    overflow: hidden;
    border-radius: 10px;
}

.product-img img {
    border-radius: 10px;
    transition: transform .5s ease;
}

.product-box:hover>.product-img img
{
    transform: scale(1.2);
}



.buy-sell-action {
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
    margin-top: 14px;
}


.buy-sell-action a {
    font-size: 14px;
    background: #208000;
    color: #fff;
    text-decoration: none;
    padding: 9px 33px;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

a.sell-btn {
    color: #208000;
    background: transparent;
    border: 1px solid;
}

a.sell-btn:hover
{
background:#208000;
color:#fff;

}

@media all and (max-width: 768px) {
    .banner-area h3 {

        font-size: 25px;
        line-height: 35px;

    }

    .title-bar
    {
    flex-direction: column;
    gap: 10px;
    }

    .collection-box{
        margin-bottom: 30px;
    }
    .nav-tabs{justify-content: center;}

    .stake-box{
        margin-bottom: 30px;
    }

    .main-menu
    {
        border-radius: 0px;
        margin-top: 0px;
    }

    .banner-area
    {
        height: 70vh!important;
    }

    .banner-txt h2
    {
        font-size: 1.5rem;
        line-height: 48px;
    }

    .banner-txt h2 span {
        font-size: 41px;
    }

    .main-nft
    {
        flex-direction: column;
        gap: 20px;
    }

    .started-txt
    {
        padding: 0px 20px;
    }

    .sign-btn
    {
        padding: 10px 30px;
    }


    .product-box
    {
        margin-bottom: 30px;
    }

}