/* Font Family Inclusion */
@font-face {
    font-family: "inter-regular";
    src: url("../fonts/inter-regular/inter-regular.ttf") format("ttf"), url("../fonts/inter-regular/inter-regular.woff") format("woff"), url("../fonts/inter-regular/inter-regular.woff2") format("woff2"), url("../fonts/inter-regular/inter-regular.eot") format("eot"), url("../fonts/inter-regular/inter-regular.svg") format("svg"), url("../fonts/inter-regular/inter-regular.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "inter-medium";
    src: url("../fonts/inter-medium/inter-medium.ttf") format("ttf"), url("../fonts/inter-medium/inter-medium.woff") format("woff"), url("../fonts/inter-medium/inter-medium.woff2") format("woff2"), url("../fonts/inter-medium/inter-medium.eot") format("eot"), url("../fonts/inter-medium/inter-medium.svg") format("svg"), url("../fonts/inter-medium/inter-medium.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "inter-semiBold";
    src: url("../fonts/inter-semi-bold/Inter-SemiBold.ttf") format("ttf"), url("../fonts/inter-semi-bold/Inter-SemiBold.woff") format("woff"), url("../fonts/inter-semi-bold/Inter-SemiBold.woff2") format("woff2"), url("../fonts/inter-semi-bold/Inter-SemiBold.eot") format("eot"), url("../fonts/inter-semi-bold/Inter-SemiBold.svg") format("svg"), url("../fonts/inter-semi-bold/Inter-SemiBold.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "outfit-light";
    src: url("../fonts/outfit-light/Outfit-Light.ttf") format("ttf"), url("../fonts/outfit-light/Outfit-Light.woff") format("woff"), url("../fonts/outfit-light/Outfit-Light.woff2") format("woff2"), url("../fonts/outfit-light/Outfit-Light.eot") format("eot"), url("../fonts/outfit-light/Outfit-Light.svg") format("svg"), url("../fonts/outfit-light/Outfit-Light.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "outfit-regular";
    src: url("../fonts/outfit-regular/Outfit-Regular.ttf") format("ttf"), url("../fonts/outfit-regular/Outfit-Regular.woff") format("woff"), url("../fonts/outfit-regular/Outfit-Regular.woff2") format("woff2"), url("../fonts/outfit-regular/Outfit-Regular.eot") format("eot"), url("../fonts/outfit-regular/Outfit-Regular.svg") format("svg"), url("../fonts/outfit-regular/Outfit-Regular.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "outfit-medium";
    src: url("../fonts/outfit-medium/Outfit-Medium.ttf") format("ttf"), url("../fonts/outfit-medium/Outfit-Medium.woff") format("woff"), url("../fonts/outfit-medium/Outfit-Medium.woff2") format("woff2"), url("../fonts/outfit-medium/Outfit-Medium.eot") format("eot"), url("../fonts/outfit-medium/Outfit-Medium.svg") format("svg"), url("../fonts/outfit-medium/Outfit-Medium.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "outfit-semiBold";
    src: url("../fonts/outfit-semibold/Outfit-SemiBold.ttf") format("ttf"), url("../fonts/outfit-semibold/Outfit-SemiBold.woff") format("woff"), url("../fonts/outfit-semibold/Outfit-SemiBold.woff2") format("woff2"), url("../fonts/outfit-semibold/Outfit-SemiBold.eot") format("eot"), url("../fonts/outfit-semibold/Outfit-SemiBold.svg") format("svg"), url("../fonts/outfit-semibold/Outfit-SemiBold.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}

/* Font Family Inclusion */

/* Common Code Start */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--outfit-regular);
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
}

a:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

button {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.common-container {
    width: 100%;
    margin: 0 auto;
    padding: 0px 80px;
}

.common-banner {
    background-image: url('../images/line-bg-image.svg'), url('../images/top-gradient-image.svg');
    background-repeat: no-repeat;
    background-color: var(--body-bg-color);
    background-position-x: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

input:-webkit-autofill {
    transition: background-color 100000s ease-in-out 0s;
    -webkit-text-fill-color: var(--input-text-color);
    caret-color: var(--input-text-color);
}

.custom__scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.custom__scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.custom__scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--scroll-color);
    border-radius: 10px;
}

.custom__scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-color) transparent;
    border-radius: 10px;
}

.custom__scrollbar::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.main-container {
    padding-top: 75px;
}

/* Common Code End */

/* Header Code Start */
.header-container {
    margin: 12px 0px;
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
}

.header-container .header-section {
    padding: 0px 0px 0px 20px;
    background-color: var(--header-bg-color);
}

.header-container .header-menu__section,
.header-container .header-search__section {
    flex-basis: 50%;
}

.header-container .menu-list__section .menu-list {
    padding: 0px 30px;
}

.header-container .menu-list__section .menu-list li {
    padding: 0px 30px 0px 0px;
}

.header-container .menu-list__section .menu-list li:last-child {
    padding-right: 0px;
}

.header-container .menu-list__section .menu-list li a {
    vertical-align: unset;
    color: var(--link-color);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--outfit-regular);
}

.header-container .menu-list__section .menu-list li a:hover {
    color: var(--link-hover-color);
}

.header-container .search-input {
    color: var(--text-color-primary);
    background-image: url('../images/search-image.svg');
    background-repeat: no-repeat;
    padding: 0px 0px 0px 30px;
    background-size: 23px;
    outline: none;
    width: 100%;
    background-color: transparent;
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
}

.header-container .search-input::placeholder {
    color: var(--text-color-primary);
}

.header-container .header-divider {
    background-color: var(--border-color);
    width: 1px;
    height: 18px;
    margin: 0px 10px;
}

.header-container .wallet-button {
    background-color: var(--button-bg-color-primary);
    color: var(--button-text-color);
    border-radius: 8px;
    padding: 8px 16px;
    gap: 10px;
}

.header-container .wallet-button:hover {
    background-color: var(--button-bg-hover-color-primary)
}

.header-container .theme-section {
    margin: 0px 20px 0px 0px;
}

.mobile-list__container,
.header-container .search-tab .search-tab__dark,
.search-section {
    display: none;
}

.header-container .menu-list__section .menu-list li a.active {
    color: var(--link-hover-color);
}

.header-container .brand-logo__link svg path {
    fill: var(--fill-color);
}

.header-container .dark-theme__btn svg path {
    fill: var(--fill-color);
}

.header-container .toggle-btn,
.header-container .dark-theme__black,
.header-container .search-tab .search-tab__light {
    display: none;
}

.header-container .dark-theme__white {
    display: block;
}

/* Header Code End */

/* Landing Page Start */
.landing-banner {
    background-image: url("../images/line-bg-image.svg"), url("../images/top-gradient-image.svg");
    background-repeat: no-repeat;
    background-color: var(--body-bg-color);
    background-position-x: center;
}

.landing-banner .star-container {
    background-image: url("../images/dark-mode-stars.png");
    opacity: 0;
    background-repeat: no-repeat;
    transition: transform 0.5s ease, opacity 0.4s ease;
}

.landing-page__container .banner-container {
    opacity: 0;
    transform: translateY(50px);
    transition: transform 0.8s ease, opacity 0.8s ease;
    padding: 100px 0px 70px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: bottom;
}

.landing-page__container .banner-container__after {
    transform: translateY(0);
    background-image: url("../images/dark-mode-small-circles.svg");
}

.landing-page__container .banner-title {
    margin: 0px 0px 20px;
    font-family: var(--outfit-medium);
    color: var(--text-color);
    font-size: var(--xl-h1-font-size);
    line-height: var(--xl-h1-line-height);
}

.landing-page__container .gif-image__rotate {
    width: 100%;
    max-width: 90px;
}

.landing-page__container .gif-image__section {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 10px;
}

.landing-page__container .banner-description {
    font-family: var(--inter-regular);
    letter-spacing: 1px;
    margin: 30px 0px;
    color: var(--text-color);
    font-size: var(--xl-h3-font-size);
    line-height: var(--xl-h3-line-height);
}

.landing-page__container .banner-btn {
    outline: 4px solid transparent;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: 1px solid transparent;
    font-family: var(--outfit-regular);
    padding: 12px 26px;
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
}

.landing-page__container .banner-btn:hover {
    outline-color: var(--button-outline-color);
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to top, #530093, #ffffff) border-box;
    box-shadow: 1px 2px 26px var(--button-box-shadow-color);
    transition: 0.2s ease-in-out;
}

.landing-page__container .gradient-image__description {
    opacity: 0;
    max-width: 946px;
    width: 100%;
    margin: 0 auto;
}

.landing-page__container .bubble-animation__image {
    opacity: 0;
    z-index: 999;
    left: 0;
    right: 0;
    max-width: 250px;
    width: 100%;
    margin: 0 auto;
}

.landing-page__container .mobile-semicircle__section {
    opacity: 0;
    background: radial-gradient(ellipse at center, var(--nft-semicircle-bg-color-primary) 50%, var(--nft-semicircle-bg-color-secondary) 80%, var(--nft-semicircle-bg-color-secondary) 100%);
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    margin: 60px auto 0px auto;
    max-width: 600px;
    text-align: center;
    width: 100%;
}

.landing-page__container .metaforge-circle__description {
    font-family: var(--outfit-light);
    color: var(--text-color);
    font-size: var(--xl-h3-font-size);
    line-height: var(--xl-h3-line-height);
}

.landing-page__container .gradient-banner {
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    top: -35px;
}

.landing-page__container .semicircle-gradient__image {
    opacity: 0;
}

.landing-page__container .semicircle-gradient__image .semi-circle__image {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.landing-page__container .semi-circle__image circle {
    fill: var(--circle-bg-color);
}

.landing-page__container .semicircle-desktop,
.landing-page__container .dark-theme__bubble {
    display: block;
}

.landing-page__container .semicircle-mobile,
.landing-page__container .light-theme__bubble {
    display: none;
}

.landing-page__container .semicircle-gradient__image svg circle {
    fill: var(--circle-fill-color);
}

/* FAQ Code Start */
.landing-page__container .faq-container {
    margin: 40px auto 0px auto;
    background: transparent;
    max-width: 800px;
    width: 100%;
}

.landing-page__container .faq-heading {
    margin: 0 0 30px;
    color: var(--text-color);
    font-size: var(--xl-h2-font-size);
    line-height: var(--xl-h2-line-height);
    font-family: var(--outfit-semibold);
}

.landing-page__container .faq-list {
    border: 1px solid var(--border-color);
    background-color: var(--faq-bg-color);
}

.landing-page__container .faq-item {
    border-bottom: 1px solid var(--border-color);
}

.landing-page__container .faq-question {
    padding: 24px;
}

.landing-page__container .faq-answer {
    padding: 0px 24px 24px 24px;
}

.landing-page__container .faq-item:last-child {
    border: none;
}

.landing-page__container .question-open {
    margin: 0px 0px 10px;
}

.landing-page__container .faq-question__txt {
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-regular);
    color: var(--text-color);
}

.landing-page__container .faq-answer__txt {
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-regular);
    color: var(--text-color-primary);
}

.landing-page__container .slide-up svg path,
.landing-page__container .slide-down svg path {
    fill: var(--plus-minus-fill-color);
}

/* FAQ Code End */
/* Question Code Start */
.landing-page__container .question-main__container {
    margin: 85px auto;
    max-width: 800px;
    width: 100%;
}

.landing-page__container .lets-talk__btn {
    outline: 4px solid transparent;
    background-color: var(--button-bg-color);
    border: 1px solid transparent;
    color: var(--button-text-color);
    font-family: var(--outfit-regular);
    padding: 12px 55px;
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
}

.landing-page__container .lets-talk__btn:hover {
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to top, #530093, #ffffff) border-box;
    outline-color: var(--button-outline-color);
    box-shadow: 1px 2px 26px var(--button-box-shadow-color);
    transition: 0.2s ease-in-out;
}

.landing-page__container .question-section {
    padding: 45px 58px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--about-bg-color);
    background-image: url('../images/dark-mode-stars.png'), url('../images/about-gradient.svg');
    background-repeat: no-repeat;
    justify-content: space-between;
}

.landing-page__container .question-txt {
    color: var(--text-color);
    font-size: var(--xl-h2-font-size);
    line-height: var(--xl-h2-line-height);
    font-family: var(--outfit-medium);
}

.landing-page__container .question-txt__section {
    flex-basis: 70%;
}

.landing-page__container .lets-talk__section {
    flex-basis: 30%;
}

/* Question Code End */
/* Landing Page End */

/* create-nft-page css start */
.create-nft__main {
    padding: 18px 0px 23px 0px;
}

.nft-form {
    overflow-y: auto;
    scrollbar-width: none;
}

.heading-txt {
    margin: 0 0 15px;
    color: var(--text-color);
    font-size: var(--xl-h2-font-size);
    line-height: var(--xl-h2-line-height);
    font-family: var(--outfit-regular);
}

.nft-form__section {
    padding: 0 13px;
}

.nft-form__section:first-child {
    padding-left: 0;
}

.nft-form__section:last-child {
    padding-right: 0;
}

.nft-upload {
    position: relative;
    background-color: var(--upload-text-bg-color);
    z-index: 1;
    overflow: hidden;
}

.nft-upload::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: repeating-linear-gradient(45deg, var(--border-color) 0 5px, transparent 0 9px);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.nft-upload .nft-upload__drag {
    color: var(--text-color);
    font-size: var(--xl-p1-font-size);
    line-height: var(--xl-p1-line-height);
    font-family: var(--outfit-regular);
    margin: 0px 0px 10px;
}

.nft-upload .nft-upload__inner-section {
    margin: 0 0 10px;
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-regular);
    color: var(--text-color-primary);
}

.nft-form__label {
    margin: 0 0 10px;
    color: var(--text-color-primary);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    font-family: var(--inter-regular);
}

.nft-upload__label {
    text-underline-offset: 3px;
    color: var(--browse-text-color);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-regular);
}

.nft-upload__note,
.nft-upload__types {
    color: var(--input-text-color);
}

.nft-upload__types br {
    display: none;
}

.nft-form__group {
    margin: 0 0 22px;
}

.nft-form__group:last-child {
    margin-bottom: 0;
}

.nft-form__input,
.nft-form__textarea {
    padding: 13px 16px;
    border: 1px solid var(--border-color);
    color: var(--text-color-primary);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-regular);
}

.nft-form__input:focus-visible,
.nft-form__textarea:focus-visible {
    border: 1px solid var(--button-bg-color-primary);
    outline: none;
}

.nft-form__input {
    background-color: var(--input-bg-color);
}

.nft-form__input::placeholder,
.nft-form__textarea::placeholder {
    color: var(--input-text-color);
}

.nft-form__textarea {
    background-color: var(--upload-text-bg-color);
}

.submit-section {
    padding: 20px 0px 0px;
    text-align: end;
}

.nft-form__submit {
    background-color: var(--button-bg-color-primary);
    color: var(--button-text-color-primary);
    padding: 7px 16px;
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--outfit-regular);
}

.nft-form__submit:hover {
    background-color: var(--button-bg-hover-color-primary);
}

/* create-nft-page css end */

/* Footer Code Start */
.footer__container {
    background-color: var(--footer-bg-color);
    padding: 8px 0px;
    border-top: 1px solid var(--border-color);
}

.footer__container .footer__copyright {
    color: var(--footer-text-color);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    font-family: var(--outfit-light);
}

.footer__container .powered-txt {
    border-left: 1px solid var(--border-color);
    padding: 0px 0px 0px 20px;
    margin: 0px 0px 0px 20px;
}

/* Footer Code End */

/* Contact Us CSS Start */
.contact-us_body .star-container {
    background-image: url("../images/dark-mode-stars.png");
    background-repeat: repeat;
}

.contact-us__main-section {
    padding: 20px 0px;
}

.contact__label {
    color: var(--text-color);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-regular);
}

.contact__heading {
    margin: 32px 0px;
    background: linear-gradient(to right, var(--contact-heading-color-primary), var(--contact-heading-color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--xl-h2-font-size);
    line-height: var(--xl-h2-line-height);
    font-family: var(--outfit-regular);
    background-size: 360px 100%;
}

.contact__description {
    color: var(--text-color-primary);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-regular);
}

.contact__email {
    margin: 30px 0px;
    color: var(--contact-email-text-color);
    font-size: var(--xl-p1-font-size);
    line-height: var(--xl-p1-line-height);
    font-family: var(--outfit-regular);
}

.contact__email:hover {
    color: var(--button-bg-hover-color-primary);
    text-decoration: none;
}

.contact__back {
    color: var(--text-color-primary);
}

.contact__back .contact-back_icon {
    margin: 0px 8px 0px 0px;
    display: inline-block;
    vertical-align: middle;
}

.contact__back svg {
    width: 20px;
    height: 20px;
}

.contact__back svg path {
    fill: var(--text-color-primary);
}

.contact__back:hover svg path {
    fill: var(--text-color);
}

.contact__back:hover {
    color: var(--text-color);
}

.contact-back_txt {
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-regular);
    display: inline-block;
    vertical-align: text-top;
}

/* Contact Us CSS End */

/* Marketplace Page Style start */
.title-text {
    font-family: var(--outfit-medium);
    color: var(--text-color);
    font-size: var(--xl-h2-font-size);
    line-height: var(--xl-h2-line-height);
    flex-basis: 45%;
}

.search-filter__container {
    flex-basis: 55%;
}

/* Form Fields Common Styles Start */
.search-form__group {
    flex-basis: 472px;
    position: relative;
}

.custom-selectbox-items {
    flex-basis: 220px;
}

.input-dropdown {
    cursor: pointer;
}

.search-form__input,
.input-dropdown {
    font-family: var(--inter-regular);
    color: var(--text-color);
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    outline: none;
    background-color: var(--input-bg-color);
}

.search-form__input:focus-visible,
.input-dropdown:focus-visible {
    outline: none;
}

.search-form__input::placeholder,
.input-dropdown::placeholder {
    color: var(--text-color);
}

.filter-image__container {
    padding: 5px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    outline: none;
    background-color: var(--input-bg-color);
}

.search-image {
    position: absolute;
    inset: 7px auto auto 10px;
}

.search-image>path {
    fill: var(--fill-color);
}

.filter-image>path {
    fill: var(--fill-color);
}

.mobile-filter-close-image>path {
    fill: var(--fill-color);
}

.left-arrow-img>path {
    stroke: var(--arrow-fill-color);
}

.left-arrow:hover .left-arrow-img path {
    stroke: var(--fill-color);
}

.right-arrow-img>path {
    stroke: var(--arrow-fill-color);
}

.left-arrow:hover .right-arrow-img path {
    stroke: var(--fill-color);
}

.dropdown>path {
    stroke: var(--fill-color);
}

.back-button-arrow>path {
    fill: var(--fill-color);
}

/* Form Fields Common Styles End */

/* Custom Dropdown Style Start*/
.custom-select-box {
    position: relative;
    width: 100%;
}

.input-box {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.dropdown {
    width: 24px;
    position: absolute;
    right: 10px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.custom-select-box[aria-expanded="true"] .dropdown,
.mobile-custom-select-box[aria-expanded="true"] .dropdown {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.custom-select-box .options-list {
    position: absolute;
    width: 100%;
    background-color: var(--dropdown-bg-color);
    border-radius: 8px;
    display: none;
    border: 1px solid var(--border-color);
    max-height: 160px;
    overflow-y: auto;
    z-index: 10;
    top: 42px;
    padding: 0;
}

.options-list .options {
    font-family: var(--inter-regular);
    color: var(--text-color);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    padding: 10px;
    cursor: pointer;
}

.options:hover,
.options.active {
    background-color: var(--dropdown-hover-color);
    color: var(--dropdown-text-hover-color);
}

/* Custom Dropdown Style End*/
/* Card Style Start */
.card__container {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.marketplace__container.common-container {
    padding-block: 20px 0;
}

.marketplace__container.profile__container.common-container {
    padding-block: 10px 0;
}

.card-content__container {
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background-color: var(--card-bg-color);
    padding: 12px;
}

.card-text__container .card-name {
    font-family: var(--inter-medium);
    font-size: var(--xl-p1-font-size);
    line-height: var(--xl-p1-line-height);
    color: var(--text-color);
}

.card-img__container .card-image {
    border: 1px solid transparent;
    border-radius: 10px;
}

.buy__container {
    background-color: var(--buy-bg-color);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 12px;
    justify-content: space-between;
    align-items: center;
}

.rate__text {
    font-family: var(--inter-semibold);
    font-size: var(--xl-h3-font-size);
    line-height: var(--xl-h3-line-height);
    color: var(--text-color);
}

.last-sale__text {
    font-family: var(--inter-medium);
    font-size: var(--xl-p4-font-size);
    line-height: var(--xl-p4-line-height);
    color: var(--text-color-primary);
}

.buy-button {
    font-family: var(--inter-medium);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
    padding: 5px 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.buy-button:hover {
    background-color: var(--button-bg-color-primary);
}

.card-content__container:hover {
    background-color: var(--card-hover-color);
}

.card-content__container:hover .buy-button {
    background-color: var(--button-bg-color-primary);
}

.card__container {
    overflow-y: auto;
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Card Style End */
/* pagination Style Start */
.left-arrow__container,
.pagination-navigation__container,
.right-arrow__container {
    background-color: var(--pagination-bg-color);
    border-radius: 8px;
}

.pagination-value.active,
.pagination-value:hover,
.left-arrow:hover,
.right-arrow:hover {
    background-color: var(--pagination-bg-hover-color);
    border-radius: 8px;
    color: var(--pagination-text-hover-color);
}

.left-arrow,
.right-arrow {
    display: block;
    padding: 5px;
}

.pagination-value {
    display: block;
    padding: 7px 15px;
    color: var(--pagination-text-color);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--inter-medium);
}

/* pagination Style End*/
/* Popup Style Start*/
.dialog-box__container {
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--popup-image-bg-color);
    color: var(--text-color);
    border: 1px solid transparent;
    border-radius: 0 12px 12px 0;
    margin-inline: 50px;
}

.popup-image__container {
    background-color: var(--popup-image-bg-color);
    padding: 40px 30px;
}

.popup-left__image {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.popup-text__container {
    background-color: var(--popup-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 0 12px 12px 0;
    border-left: none;
}

.back-button__container {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.back-button {
    border: 1px solid var(--border-color);
    background-color: var(--body-bg-color);
    padding: 5px 8px;
    border-radius: 8px;
}

.back-button .back-button-arrow {
    width: 20px;
}

.right-content__container {
    padding: 15px;
    max-height: calc(576px - 62px);
    overflow-y: scroll;
}

.popup-text-title {
    font-family: var(--inter-semibold);
    font-size: var(--xl-h2-font-size);
    line-height: var(--xl-h2-line-height);
    color: var(--text-color);
}

.popup-text-description {
    font-family: var(--inter-regular);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    color: var(--text-color);
}

.owner-title,
.seller-title {
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    color: var(--text-color-primary);
}

.owner-description,
.seller-description {
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    color: var(--text-color);
}

.popup-price__container {
    background-color: var(--buy-bg-color);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px;
}

.eth-value__text {
    font-family: var(--inter-semibold);
    font-size: var(--xl-h2-font-size);
    line-height: var(--xl-h2-line-height);
    color: var(--text-color);
}

.popup-last-sale__text {
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    color: var(--text-color-primary);
}

.popup-buy-button {
    background-color: var(--button-bg-color-primary);
    color: var(--button-text-color-primary);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px;
    font-family: var(--inter-medium);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
}

.popup-buy-button:hover {
    background-color: var(--button-bg-hover-color-primary)
}

.table-title {
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    color: var(--text-color-primary);
}

.records-count {
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    color: var(--text-color);
    background-color: var(--buy-bg-color);
    border-radius: 8px;
    padding: 5px 10px;
}

.popup-last-sale__text {
    margin: 0 0 0 15px;
}

.popup-price__text {
    margin: 0 0 20px 0;
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    color: var(--text-color-primary);
}

.stats-chat__container .stats-image,
.filter-image {
    width: 100%;
}

#customForm {
    gap: 16px;
    justify-content: flex-end;
}

.stats-image-light,
body.light-theme .stats-image-dark {
    display: none;
}

.stats-image-dark,
body.light-theme .stats-image-light {
    display: block;
}

.mobile-close-button {
    display: none;
}

.mobile-left__image {
    display: none;
}

.dialog-box__container {
    margin-block: auto;
}

.title__container.common-container {
    padding-block: 15px 0;
}

/* Popup Style End*/
/* Mobile Filter Style Start */
.filter-image {
    width: 100%;
    max-width: 25px;
    margin: 0 auto;
}

.mobile-select-box {
    background-color: var(--card-bg-color);
    border-top: 1px solid transparent;
    border-radius: 12px 12px 0 0;
    position: fixed;
    width: 100%;
    inset: 25% 0 0 0;
    padding: 20px;
    display: none;
}

.mobile-selectbox-title__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px 0;
}

.mobile-filter-title {
    font-family: var(--outfit-medium);
    color: var(--text-color);
    font-size: var(--xl-p1-font-size);
    line-height: var(--xl-p1-line-height);
}

.mobile-filter-close-image {
    cursor: pointer;
}

.mobile-apply-btn {
    font-family: var(--outfit-medium);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    color: var(--button-text-color-primary);
    background-color: var(--button-bg-color-primary);
    padding: 5px 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.mobile-apply-btn:hover {
    color: var(--button-text-color-primary);
    background-color: var(--button-bg-hover-color-primary);
}

.apply-btn__container {
    position: absolute;
    inset: auto 20px 20px auto;
}

.mobile-custom-select-box__container {
    display: none;
}

.mobile-custom-select-box .options-list {
    position: relative;
    width: 100%;
    background-color: var(--card-bg-color);
    border-radius: 8px;
    display: none;
    border: 1px solid var(--border-color);
    max-height: 160px;
    overflow-y: auto;
    z-index: 10;
    top: 5px;
    padding: 0;
}

.mobile-select-box .input-dropdown,
.mobile-select-box .options {
    background-color: var(--card-bg-color);
    color: var(--text-color);
}

.mobile-select-box .options:hover,
.mobile-select-box .options.active {
    background-color: var(--dropdown-hover-color);
    color: var(--dropdown-text-hover-color);
}

/* Mobile Filter Style End */
/* Table Design Start*/
.table-section__content::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.table-section__content::-webkit-scrollbar-track {
    border-radius: 10px;
}

.table-section__content::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.table-section__content {
    width: 100%;
    margin: 0 auto;
    max-height: 170px;
    overflow: auto;
    border: 1px solid transparent;
    border-radius: 8px;
}

.table-section__content .table-structure {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.table-section__content .table-structure .table__head {
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-section__content .table-structure .table__head .table__row {
    border: none;
}

.table-section__content .table-structure .table__header {
    padding: 8px;
    background-color: var(--buy-bg-color);
    text-align: left;
    font-family: var(--inter-regular);
    color: var(--text-color-primary);
}

.table-section__content .table-structure .table__body .table__row .table__cell:first-child {
    background-color: var(--input-bg-color);
}

.table-section__content .table-structure .table__header:first-child,
.table-section__content .table-structure .table__row .table__cell:first-child {
    position: sticky;
    left: 0;
}

.table-section__content .table-structure .table__header:last-child {
    width: 100px;
}

.table-section__content .table-structure .table__row {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
}

.table-section__content .table-structure .table__row .table__cell {
    padding: 8px;
    font-family: var(--inter-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-section__content .table-structure .table__cell,
.table-section__content .table-structure .table__header {
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
}

/* Table Design End*/
/* Stats Style Start */
.stats-title,
.history-date-time {
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    color: var(--text-color-primary);
}

/* Stats Style End */
/* Marketplace Page Style End */
/* Profile Page Style Start */
.profile__container .wallet__container {
    display: flex;
    background-color: var(--wallet-bg-color);
    padding: 20px 30px;
    margin-block: 30px 0px;
    border-radius: 12px;
}

.profile__container .title {
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
    color: var(--text-color-primary);
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.profile__container .wallet__section {
    flex-basis: 55%;
}

.profile__container .collection-size__section,
.total-value__section {
    flex-basis: 23%;
    padding-inline: 32px;
    border-left: 1px solid var(--border-color);
}

.profile__container .total-value-value,
.profile__container .collection-size-value {
    font-family: var(--inter-medium);
    color: var(--text-color);
    font-size: var(--xl-h2-font-size);
    line-height: var(--xl-h2-line-height);
}

.profile__container .wallet-value {
    font-family: var(--inter-regular);
    color: var(--text-color);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

.profile__container .card-filter__container {
    background-color: var(--wallet-bg-color);
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding: 5px;
    max-width: fit-content;
    border-radius: 8px;
}

.profile__container .filter-card-btn {
    font-family: var(--outfit-regular);
    color: var(--pagination-text-color);
    font-size: var(--xl-p1-font-size);
    line-height: var(--xl-p1-line-height);
    padding: 8px 16px;
    border-radius: 5px;
}

.profile__container .filter-card-btn:hover,
.filter-card-btn.active {
    background-color: var(--button-bg-color-primary);
    color: var(--button-text-color-primary);
}

.profile__container .onsale-owned-created__container {
    padding-block: 20px;
    position: sticky;
    top: 40px;
    background-color: var(--body-bg-color);
}

.profile__container .popup-state__text {
    color: var(--state-color);
    font-family: var(--inter-regular);
    font-size: var(--xl-p3-font-size);
    line-height: var(--xl-p3-line-height);
}

.profile__container .popup-eth-value__container {
    padding: 0 0 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.profile__container .resell-description-text {
    font-family: var(--inter-regular);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    margin: 0 0 20px 0;
}

.profile__container .price-eth__input {
    flex-basis: 70%;
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    font-family: var(--outfit-regular);
    border: 1px solid var(--border-color);
    background-color: var(--buy-bg-color);
    color: var(--input-txt-color);
    border-radius: 8px;
    outline: none;
}

.profile__container .price-eth__input:focus {
    outline: none;
}

.profile__container .popup-resell-button {
    flex-basis: 30%;
    background-color: var(--button-bg-color-primary);
    color: var(--button-text-color-primary);
    border: 1px solid transparent;
    font-family: var(--inter-medium);
    font-size: var(--xl-p2-font-size);
    line-height: var(--xl-p2-line-height);
    border-radius: 8px;
}

.profile__container .popup-resell-button:hover {
    background-color: var(--button-bg-hover-color-primary)
}

.profile__container .right-content__container {
    max-height: calc(600px - 58px);
}

/* Profile Page Style End */

/* Extra Extra Large (≥1400px) */
@media screen and (min-width: 1400px) {
    .common-container {
        max-width: 1320px;
        padding: 0px 20px;
    }

    .header-container {
        margin: 12px auto;
    }

    .star-container {
        background-position: center;
    }

    .nft-upload::before {
        padding: 1.5px;
    }
}

@media screen and (max-width: 1200px) {
    .common-container {
        max-width: 100%;
        padding: 0px 40px;
    }

    /* Header Code Start */
    .header-container .brand-logo__link img {
        max-width: 110px;
        width: 100%;
    }

    .header-container .menu-list__section .menu-list li {
        padding: 0px 14px 0px 0px;
    }

    .header-container .wallet-button {
        padding: 8px 10px;
    }

    .header-container .header-section {
        padding: 0px 0px 0px 12px;
    }

    /* Header Code End */
    /* Landing Page Code Start */
    .landing-page__container .banner-container {
        max-width: 100%;
        padding: 40px 40px 70px 40px;
    }

    .landing-page__container .metaforge-circle__description {
        font-size: var(--md-h3-font-size);
        line-height: var(--md-h3-line-height);
    }

    .landing-page__container .gradient-image__description {
        max-width: 600px;
    }

    .landing-page__container .mobile-semicircle__section {
        max-width: 480px;
    }

    /* Question Code Start */
    .landing-page__container .question-section {
        padding: 30px;
    }

    .landing-page__container .lets-talk__btn {
        padding: 12px 40px;
    }

    /* Question Code End */
    /* Landing Page Code End */

    /* Marketplace Style Start */
    .title-text {
        font-size: var(--md-h2-font-size);
        line-height: var(--md-h2-line-height);
    }

    .card-text__container .card-name {
        font-size: var(--md-p1-font-size);
        line-height: var(--md-p1-line-height);
    }

    .rate__text {
        font-size: var(--md-h3-font-size);
        line-height: var(--md-p3-line-height);
    }

    .table-section__content .table-structure .table__cell,
    .table-section__content .table-structure .table__header {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
    }

    .table-section__content .table-structure .table__header:last-child {
        width: 80px;
    }

    .search-form__input,
    .input-dropdown {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
        background-size: 20px;
    }

    .search-form__group {
        flex-basis: 60%;
        position: relative;
    }

    .custom-selectbox-items {
        flex-basis: 40%;
    }

    /* Marketplace Style End */
}

@media screen and (max-width: 991px) {

    /* create-nft-page css start */
    .nft-form__input,
    .nft-form__textarea {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .nft-form__section {
        padding: 0 10px;
    }

    /* create-nft-page css end */

    /* Header Code Start */
    .header-container .search-tab .search-tab__dark {
        display: block;
    }

    .header-container .header-search__desktop {
        display: none;
    }

    .header-container .theme-section {
        margin: 0px 20px;
    }

    .header-container .header-menu__section,
    .header-container .header-search__section {
        flex-basis: auto;
    }

    .search-section .search-input__mobile {
        color: var(--text-color-primary);
        background-image: url('../images/search-image.svg');
        background-repeat: no-repeat;
        padding: 0px 0px 0px 30px;
        background-size: 23px;
        outline: none;
        width: 100%;
        background-color: transparent;
        font-size: var(--md-p1-font-size);
        line-height: var(--md-p1-line-height);
    }

    .header-container .search-input__mobile::placeholder {
        color: var(--text-color-primary);
    }

    .search-section {
        display: block;
    }

    .search-section .header-search__mobile {
        opacity: 0;
        transition: 1.2s;
        transform: translateX(100%);
        width: 100%;
        padding: 20px;
        max-width: 600px;
        margin: 0 auto;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .search-section .header-search__mobile.open {
        opacity: 1;
        transition: 1.2s;
        transform: translateX(0%);
        background-color: var(--search-bg-color);
    }

    .search-section .search-close__icon {
        width: 100%;
        max-width: 20px;
    }

    /* Header Code End */

    /* Marketplace Style Start */
    .options-list .options {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .card__container {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .pagination-value {
        padding: 8px 15px;
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .popup-text-title {
        font-size: var(--md-h2-font-size);
        line-height: var(--md-h2-line-height);
    }

    .popup-text-description {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .eth-value__text {
        font-size: var(--md-h2-font-size);
        line-height: var(--md-h2-line-height);
    }

    .popup-buy-button {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .popup-eth-value__container {
        flex-direction: column;
    }

    .popup-last-sale__text {
        margin-inline-start: 0;
    }

    .popup-price__text {
        margin: 0 0 15px 0;
    }

    .popup-last-sale__text {
        font-size: var(--md-p3-font-size);
        line-height: var(--md-p3-line-height);
    }

    .table-title,
    .records-count,
    .stats-title,
    .history-date-time {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
    }

    .card-text__container .card-name {
        font-size: var(--sm-p1-font-size);
        line-height: var(--sm-p1-line-height);
    }

    .last-sale__text {
        font-size: var(--md-p4-font-size);
        line-height: var(--md-p4-line-height);
    }

    .filter-image__container {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .owner-title,
    .seller-title {
        font-size: var(--md-p3-font-size);
        line-height: var(--md-p3-line-height);
    }

    .owner-description,
    .seller-description {
        font-size: var(--md-p3-font-size);
        line-height: var(--md-p3-line-height);
    }

    .title-text {
        flex-basis: 40%;
    }

    .search-filter__container {
        flex-basis: 60%;
    }

    .main-container {
        padding-top: 50px
    }

    .table-section__content {
        border: 1px solid transparent;
    }

    .table-section__content .table-structure .table__row .table__cell {
        display: block;
        text-align: right;
        position: relative;
        padding-left: 50%;
    }

    .table-section__content .table-structure .table__row .table__cell::before {
        width: 100%;
        max-width: 140px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        content: attr(data-label);
        position: absolute;
        left: 10px;
        font-weight: bold;
    }

    .table-section__content .table-structure .table__row .table__cell:first-child {
        text-align: right;
    }

    .table-section__content .table-structure .table__row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }

    .table-section__content .table-structure .table__head {
        display: none;
    }

    .table-section__content .table-structure .table__cell,
    .table-section__content .table-structure .table__header {
        font-size: 12px;
        line-height: 16px;
    }

    .table-section__content .table-structure {
        border: 0;
    }

    .table-section__content .table-structure .table__header:first-child,
    .table-section__content .table-structure .table__row .table__cell:first-child {
        width: 100%;
    }

    .table-section__content .table-structure .table__row:last-child {
        margin-bottom: 0;
    }

    .table-section__content .table-structure .table__body .table__row .table__cell:first-child {
        border-radius: 8px;
    }

    .table-section__content {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .table-section__content::-webkit-scrollbar {
        display: none;
    }

    .popup-image__container {
        display: none;
    }

    .dialog-box__container {
        grid-template-columns: repeat(1, 1fr);
        border-radius: 12px 12px 0 0;
        margin-inline: 20px;
        margin: auto 0 0 0;
    }

    .popup-text__container {
        grid-row: 1 / 2;
    }

    .popup-text__container {
        border-radius: 12px 12px 0 0;
        border: none;
    }

    .right-content__container {
        max-height: 100%;
    }

    .back-button__container {
        position: sticky;
        top: 0;
        background-color: var(--popup-bg-color);
        z-index: 99;
    }

    .back-button {
        display: none;
    }

    .mobile-close-button {
        display: block;
        margin: 0 0 0 auto;
    }

    .mobile-left__image {
        display: block;
        max-width: 300px;
        margin-bottom: 10px;
    }

    /* Marketplace Style End */
    /* Profile Page Style Start */
    .profile__container .title {
        font-size: var(--md-p3-font-size);
        line-height: var(--md-p3-line-height);
    }

    .profile__container .wallet-value {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .profile__container .total-value-value,
    .collection-size-value {
        font-size: var(--md-h2-font-size);
        line-height: var(--md-h2-line-height);
    }

    .profile__container .wallet__container {
        padding: 20px;
        margin-block: 20px;
    }

    .profile__container .wallet__section {
        flex-basis: 45%;
    }

    .profile__container .collection-size__section,
    .total-value__section {
        flex-basis: 28%;
        padding-inline: 25px;
        border-left: 1px solid var(--border-color);
    }

    .profile__container .filter-card-btn {
        font-size: var(--md-p1-font-size);
        line-height: var(--md-p1-line-height);
    }

    .profile__container .popup-state__text {
        font-size: var(--md-p3-font-size);
        line-height: var(--md-p3-line-height);
    }

    .profile__container .eth-value__text {
        font-size: var(--md-h2-font-size);
        line-height: var(--md-h2-line-height);
    }

    .profile__container .resell-description-text {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .profile__container .price-eth__input,
    .profile__container .popup-resell-button {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .profile__container .right-content__container {
        max-height: 100%;
    }

    /* Profile Page Style End */


    /* Landing Page Code Start */
    .landing-page__container .banner-title {
        font-size: var(--md-h1-font-size);
        line-height: var(--md-h1-line-height);
    }

    .landing-page__container .semicircle-gradient__image .semi-circle__image {
        max-width: 100%;
    }

    .landing-page__container .mobile-semicircle__section {
        margin: 100px auto 0px auto;
    }

    .landing-page__container .gradient-banner {
        top: -30px;
    }

    .landing-page__container .banner-container {
        padding: 70px 40px 0px 40px;
    }

    .landing-page__container .faq-container,
    .landing-page__container .question-main__container {
        max-width: 650px;
    }

    /* Landing Page Code Start */

}

@media screen and (max-width: 767px) {

    /* Common Code Start*/
    .main-container {
        padding-top: 44px
    }

    /* Common Code Start*/
    /* create-nft-page css start */
    .nft-form__section {
        padding: 15px 0px;
    }

    .nft-form__section:first-child {
        padding-top: 0;
    }

    .nft-form__section:last-child {
        padding-bottom: 0;
    }

    .nft-upload {
        padding: 70px 20px;
    }

    .heading-txt {
        font-size: var(--md-h2-font-size);
        line-height: var(--md-h2-line-height);
    }

    .nft-upload .nft-upload__drag,
    .nft-upload .nft-upload__inner-section {
        margin: 0px 0px 15px;
    }

    .nft-upload__types br {
        display: block;
    }

    .nft-upload .nft-upload__inner-section.nft-upload__types {
        margin: 0px;
    }

    .submit-section {
        text-align: center;
    }

    /* create-nft-page css end */

    /* Landing Page Code Start */
    .landing-page__container br,
    .landing-page__container .semicircle-gradient__image .semi-circle__image {
        display: none;
    }

    .landing-page__container .gif-image__rotate {
        max-width: 65px;
    }

    .landing-page__container .banner-description {
        font-size: var(--md-h3-font-size);
        line-height: var(--md-h3-line-height);
        letter-spacing: 0px;
    }

    .landing-page__container .banner-btn {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .landing-page__container .banner-container {
        padding: 70px 40px 65px 40px;
    }

    .landing-page__container .gradient-banner {
        top: -100px;
    }

    .landing-page__container .metaforge-circle__description {
        background-color: var(--body-bg-color);
        padding: 20px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }

    .landing-page__container .gradient-image__description {
        max-width: 450px;
    }

    .landing-page__container .mobile-semicircle__section {
        padding: 0px 40px;
        position: unset;
        max-width: 100%;
        margin: 0px auto 50px;
    }

    /* FAQ Code Start */
    .landing-page__container .faq-question__txt,
    .landing-page__container .faq-answer__txt {
        font-size: var(--md-p2-font-size);
        line-height: var(--md-p2-line-height);
    }

    .landing-page__container .faq-container {
        max-width: 100%;
        padding: 0px 40px;
    }

    .landing-page__container .faq-heading {
        font-size: var(--md-h2-font-size);
        line-height: var(--md-h2-line-height);
    }

    /* FAQ Code End */
    /* Question Code Start */
    .landing-page__container .question-main__container {
        max-width: 100%;
        padding: 0px 40px;
    }

    .landing-page__container .question-section {
        padding: 35px 30px;
    }

    .landing-page__container .question-txt__section {
        flex-basis: 65%;
        padding: 0px 14px 0px 0px;
    }

    .landing-page__container .lets-talk__section {
        flex-basis: 35%;
    }

    .landing-page__container .lets-talk__btn {
        padding: 12px 15px;
    }

    .landing-page__container .question-txt {
        font-size: var(--md-h2-font-size);
        line-height: var(--md-h2-line-height);
    }

    /* Question Code End */
    /* Landing Page Code Start */
    /* Marketplace Style Start */
    .title-text {
        margin: 0 0 15px 0;
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .card__container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .card-content__container {
        padding: 8px;
    }

    .buy__container {
        flex-direction: column;
        align-items: start;
    }

    .search-form__group,
    .custom-selectbox-items {
        flex-basis: 50%;
    }


    .popup-text-title {
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
        margin: 0 0 15px 0;
    }

    .eth-value__text {
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .popup-image__container {
        padding: 15px;
    }

    .popup-last-sale__text {
        margin: 0 0 0 10px;
    }

    .popup-eth-value__container {
        flex-direction: row;
    }

    .buy-button {
        width: 100%;
    }

    .owner-title,
    .seller-title {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
    }

    .popup-last-sale__text {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
    }

    .popup-buy-button {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    .options-list .options {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    .popup-text-description {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    .owner-description,
    .seller-description {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
    }

    .marketplace__container.common-container {
        padding-block: 0;
    }

    .title__container.common-container {
        padding-block: 20px;
        position: sticky;
        top: 44px;
        background-color: var(--body-bg-color);
        margin-block: 0 10px;
    }

    /* Marketplace Style End */
    /* Profile Page Style Start */
    .profile__container .wallet__container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }

    .profile__container .wallet__section {
        grid-column: 1 / -1;
    }

    .profile__container .collection-size__section {
        grid-column: 1 / 5;
    }

    .profile__container .total-value__section {
        grid-column: 6 / -1;
    }

    .profile__container .wallet__section {
        margin: 0 0 15px 0;
    }

    .profile__container .collection-size__section,
    .profile__container .total-value__section {
        border: none;
        padding-inline: 0;
    }

    .profile__container .dialog-box__container {
        margin: auto 0 0 0;
    }

    .profile__container .onsale-owned-created__container {
        padding-block: 20px;
        position: sticky;
        top: 44px;
        background-color: var(--body-bg-color);
    }

    .profile__container .title {
        margin: 0 0 5px 0;
    }

    /* Profile Page Style End */

    /* Header Code start */
    .header-container {
        background-color: var(--header-bg-color);
        margin: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .header-container .theme-section {
        display: none;
    }

    .header-container .menu-list__section,
    .header-container .menuclose-icon {
        display: none;
    }

    .header-container .menubar-icon path,
    .header-container .menuclose-icon path {
        fill: var(--fill-color);
    }

    .mobile-list__container {
        display: block;
    }

    .mobile-list__container .navbar.active {
        transition: 1.5s;
        opacity: 1;
        transform: translateY(0%);
        background-color: var(--menu-drawer-color);
        border-radius: 0px 0px 12px 12px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .mobile-list__container .navbar {
        transition: 1.5s;
        opacity: 0;
        overflow-y: auto;
        max-height: 450px;
        position: absolute;
        z-index: 999;
        left: 0;
        right: 0;
        transform: translateY(-150%);
    }

    .mobile-list__container .menu-item__mobile {
        color: var(--text-color-primary);
        font-size: var(--sm-p1-font-size);
        line-height: var(--sm-p1-line-height);
        font-family: var(--outfit-regular);
        border-bottom: 1px solid var(--border-color);
        padding: 10px 0px;
        font-weight: 400;
    }

    .mobile-list__container .menu-item__mobile:last-child {
        border-bottom: none;
    }

    .mobile-list__container .menu-link__mobile {
        font-size: var(--md-p1-font-size);
        line-height: var(--md-p1-line-height);
        color: var(--text-color-primary);
    }

    body.overlay {
        overflow: hidden;
    }

    body.overlay .main-container {
        opacity: 0.6;
    }

    .header-container .search-tab {
        margin: 0px 20px 0px 0px;
    }

    .mobile-list__container .menu-link__mobile:hover {
        color: var(--link-active-color);
    }

    .mobile-list__container .menu-link__mobile.active {
        color: var(--link-active-color);
    }

    .search-section .header-search__mobile.open {
        max-width: 100%;
        padding: 20px 40px;
    }

    .header-container .header-section {
        padding: 0;
    }

    .mobile-list__container .switch-section {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mobile-list__container .dark-switch__themes,
    .mobile-list__container .light-switch__themes {
        margin: 0px 10px 0px 0px;
    }

    .header-container .wallet-button,
    .header-container .light-mode__menus,
    .mobile-list__container .light-switch__themes {
        display: none;
    }

    .header-container .btn-menu,
    .header-container .dark-mode__menus,
    .header-container .toggle-btn,
    .mobile-list__container .dark-switch__themes {
        display: block;
    }

    /* Header Code End */

    /* Contact Us CSS Start */
    .contact-us__main-section br {
        display: none;
    }

    .contact__heading {
        margin: 20px 0px;
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .contact__description,
    .contact__label {
        font-size: var(--sm-p1-font-size);
        line-height: var(--sm-p1-line-height);
    }

    .contact__email {
        margin: 20px 0px;
    }

    /* Contact Us CSS End */

}

@media screen and (max-width: 576px) {
    .common-container {
        padding: 0px 20px;
    }

    /* Footer Code Start */
    .footer__container {
        padding: 10px;
    }

    .footer__container .footer__copyright {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
    }

    .footer__container .powered-txt {
        border: none;
        margin: 0;
        padding: 0;
    }

    /* Footer Code End */
    /* Landing Page Code Start */
    .landing-page__container .banner-title {
        font-size: var(--sm-h1-font-size);
        line-height: var(--sm-h1-line-height);
    }

    .landing-page__container .banner-container {
        padding: 70px 20px 65px 20px;
        max-width: 450px;
        width: 100%;
        margin: 0 auto;
    }

    .landing-page__container .gif-image__rotate {
        max-width: 50px;
    }

    .landing-page__container .banner-description {
        font-size: var(--sm-h3-font-size);
        line-height: var(--sm-h3-line-height);
    }

    .landing-page__container .banner-btn {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
        padding: 10px 20px;
    }

    .landing-page__container .metaforge-circle__description {
        font-size: var(--sm-h3-font-size);
        line-height: var(--sm-h3-line-height);
    }

    .landing-page__container .mobile-semicircle__section {
        padding: 0px 20px;
        margin: 0px 0px 40px;
    }

    /* FAQ Code Start */
    .landing-page__container .faq-container {
        padding: 0px 20px;
    }

    .landing-page__container .faq-question {
        padding: 20px 15px;
    }

    .landing-page__container .faq-answer {
        padding: 0px 15px 20px 15px;
    }

    .landing-page__container .faq-heading {
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .landing-page__container .question-main__container .question-txt br {
        display: none;
    }

    .landing-page__container .faq-list .slide-up svg,
    .landing-page__container .faq-list .slide-down svg {
        max-width: 20px;
        width: 100%;
    }

    /* FAQ Code End */
    /* Question Code Start */
    .landing-page__container .question-main__container {
        padding: 0px 20px;
        margin: 45px auto;
    }

    .landing-page__container .question-section {
        flex-direction: column;
        padding: 25px 20px;
        background-position: center top -166px;
        background-color: unset;
    }

    .landing-page__container .question-txt {
        text-align: center;
        margin: 0px 0px 20px;
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .landing-page__container .lets-talk__btn {
        font-size: var(--sm-p1-font-size);
        line-height: var(--sm-p1-line-height);
        padding: 12px 40px;
    }

    .landing-page__container .question-txt__section {
        padding: 0;
    }

    /* Question Code End */
    /* Landing Page Code End */
    /* Marketplace Style Start */
    .search-form__input,
    .input-dropdown {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
        background-size: 20px;
    }

    .card-content__container {
        max-width: 320px;
        justify-self: center;
    }

    .pagination__container .pagination {
        justify-content: center;
    }

    .left-arrow,
    .right-arrow {
        width: 28px;
        padding: 5px;
    }

    .pagination-value {
        padding: 5px 10px;
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    .left-arrow-img,
    .right-arrow-img {
        width: 20px;
        height: 20px;
    }

    .pagination {
        gap: 10px;
    }

    .eth-value__text {
        font-size: var(--xl-p7-font-size);
        line-height: var(--xl-p7-line-height);
    }

    .custom-select-box {
        display: none;
    }

    .mobile-custom-select-box {
        display: block;
    }

    .search-form__group {
        flex-basis: calc(100% - 40px);
    }

    .custom-selectbox-items {
        flex-basis: 40px;
    }

    .mobile-custom-select-box__container {
        display: block;
    }

    .filter-image__container {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    #customForm {
        gap: 5px;
    }

    .profile__container .collection-size__section {
        border-right: none;
    }

    .title__container.common-container {
        padding-block: 15px;
    }


    /* Marketplace Style End */
    /* Profile Page Style Start */
    .profile__container .title {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
    }

    .profile__container .wallet-value {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    .profile__container .total-value-value,
    .collection-size-value {
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .profile__container .filter-card-btn {
        font-size: var(--sm-p1-font-size);
        line-height: var(--sm-p1-line-height);
    }

    .profile__container .popup-state__text {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
    }

    .profile__container .eth-value__text {
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .profile__container .resell-description-text {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    .profile__container .price-eth__input,
    .profile__container .popup-resell-button {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    /* Profile Page Style End */
    /* Header Code start */
    .mobile-list__container.active {
        padding: 20px;
    }

    .mobile-list__container .menu-link__mobile {
        font-size: var(--sm-p1-font-size);
        line-height: var(--sm-p1-line-height);
    }

    .mobile-list__container .menu-txt {
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .search-section .header-search__mobile.open {
        padding: 20px;
    }

    .search-section .search-input__mobile {
        font-size: var(--sm-p1-font-size);
        line-height: var(--sm-p1-font-size);
    }

    .header-container {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .search-section .search-input__mobile {
        padding: 5px 0px 5px 30px;
        background-position: left;
    }

    /* Header Code End */
    /* create-nft-page css start */
    .nft-upload {
        padding: 60px 20px;
    }

    /* create-nft-page css end */



}

@media screen and (max-width: 380px) {

    /* create-nft-page css start */
    .heading-txt {
        font-size: var(--sm-h2-font-size);
        line-height: var(--sm-h2-line-height);
    }

    .nft-upload p.nft-upload__drag {
        font-size: var(--sm-p1-font-size);
        line-height: var(--sm-p1-line-height);
    }

    .nft-form__label,
    .nft-form__submit,
    .nft-upload__label,
    .nft-upload .nft-upload__inner-section {
        font-size: var(--sm-p2-font-size);
        line-height: var(--sm-p2-line-height);
    }

    .nft-form__input,
    .nft-form__textarea {
        font-size: var(--sm-p3-font-size);
        line-height: var(--sm-p3-line-height);
        padding: 10px 9px;
    }

    .nft-upload {
        padding: 50px 20px;
    }

    /* create-nft-page css end */
    /* Marketplace Style start */

    .popup-eth-value__container {
        flex-direction: column;
    }

    .popup-last-sale__text {
        margin-inline-start: 0;
    }

    .popup-price__text {
        margin: 0 0 10px 0;
    }

    .back-button .back-button-arrow {
        width: 15px;
    }

    .card__container {
        grid-template-columns: repeat(1, 1fr);
    }

    .pagination-value {
        padding: 2px 8px;
    }

    .pagination {
        align-items: center;
    }

    /* Marketplace Style End */
}

/* Light Theme Code Start*/
.light-theme .landing-page__container .dark-theme__bubble,
.light-theme .header-container .dark-mode__menus,
.light-theme .mobile-list__container .dark-switch__themes,
.light-theme .header-container .dark-theme__white,
.light-theme .header-container .search-tab .search-tab__dark,
.light-theme .header-container .search-tab .search-tab__light {
    display: none;
}

.light-theme .landing-page__container .light-theme__bubble,
.light-theme .header-container .light-mode__menus,
.light-theme .mobile-list__container .light-switch__themes,
.light-theme .header-container .dark-theme__black {
    display: block;
}

.light-theme .landing-page__container .question-section {
    background-image: url('../images/light-mode-stars.png'), url('../images/about-gradient.svg');
    border: 1px solid var(--border-color);
}

.light-theme .header-container .search-tab .search-tab__dark {
    display: none;
}

.light-theme .header-container .header-section__desktop {
    box-shadow: 2px 3px 23px #EAD9F9;
}

.light-theme.contact-us_body .star-container {
    background-image: url("../images/light-mode-stars.png");
}

.light-theme .star-container.light-mode__stars {
    background-image: url("../images/light-mode-stars.png");
}

.light-theme .light-mode__circle-before {
    opacity: 0;
    transform: translateY(50px);
}

.landing-banner.light-theme .banner-container.light-mode__circles {
    opacity: 1;
    transform: translateY(0);
    background-image: url("../images/light-mode-small-circles.svg");
}

@media screen and (max-width: 991px) {
    .light-theme .header-container .search-tab .search-tab__light {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .light-theme .header-container {
        border-bottom: 1px solid var(--border-color);
    }

    .light-theme .header-container .header-section {
        box-shadow: unset;
    }

    .light-theme .mobile-list__container .switch-section .light-switch__txt {
        color: var(--link-active-color);
    }
}

/* Light Theme Code End*/

/* Dark Theme Code Start*/
.dark-theme .landing-page__container .dark-theme__bubble,
.dark-theme .header-container .dark-mode__menus,
.dark-theme .mobile-list__container .dark-switch__themes,
.dark-theme .header-container .dark-theme__white,
.dark-theme .header-container .search-tab .search-tab__light {
    display: block;
}

.dark-theme .landing-page__container .light-theme__bubble,
.dark-theme .header-container .light-mode__menus,
.dark-theme .mobile-list__container .light-switch__themes,
.dark-theme .header-container .dark-theme__black {
    display: none;
}

.dark-theme .landing-page__container .question-section {
    background-image: url('../images/dark-mode-stars.png'), url('../images/about-gradient.svg');
    border: 1px solid var(--border-color);
}

.dark-theme .header-container .search-tab .search-tab__light {
    display: none;
}

.dark-theme .contact-us_body .star-container {
    background-image: url("../images/dark-mode-stars.png");
}

.dark-theme .light-mode__stars {
    background-image: url("../images/dark-mode-stars.png");
}

.dark-theme .light-mode__circle-before {
    opacity: 0;
    transform: translateY(50px);
}

.dark-theme .light-mode__circles {
    opacity: 1;
    transform: translateY(0);
    background-image: url("../images/dark-mode-small-circles.svg");
}

/* Dark Theme Code Start*/
.dark-theme .landing-page__container .dark-theme__bubble,
.dark-theme .header-container .dark-mode__menus,
.dark-theme .mobile-list__container .dark-switch__themes,
.dark-theme .header-container .dark-theme__white,
.dark-theme .header-container .search-tab .search-tab__light {
    display: block;
}

.dark-theme .landing-page__container .light-theme__bubble,
.dark-theme .header-container .light-mode__menus,
.dark-theme .mobile-list__container .light-switch__themes,
.dark-theme .header-container .dark-theme__black {
    display: none;
}

.dark-theme .landing-page__container .question-section {
    background-image: url('../images/dark-mode-stars.png'), url('../images/about-gradient.svg') ! important;
    border: 1px solid var(--border-color);
}

.dark-theme .header-container .search-tab .search-tab__light {
    display: none;
}

.dark-theme.contact-us_body .contact-us__main-section.star-container {
    background-image: url("../images/dark-mode-stars.png");
}

.dark-theme .star-container.light-mode__stars {
    background-image: url("../images/dark-mode-stars.png");
}

.dark-theme .star-container.light-mode__circle-before {
    opacity: 0;
    transform: translateY(50px);
}

.landing-banner.dark-theme .banner-container.light-mode__circles {
    opacity: 1;
    transform: translateY(0);
    background-image: url("../images/dark-mode-small-circles.svg");
}

.dark-theme .header-container .header-section__desktop {
    box-shadow: none;
}

@media screen and (max-width: 991px) {
    .dark-theme .header-container .search-tab .search-tab__dark {
        display: block;
    }
}

/* Dark Theme Code End*/

@media (prefers-color-scheme: light) {

    /* Light Theme Code Start*/
    .landing-page__container .dark-theme__bubble,
    .header-container .dark-mode__menus,
    .mobile-list__container .dark-switch__themes,
    .header-container .dark-theme__white,
    .header-container .search-tab .search-tab__dark,
    .header-container .search-tab__light {
        display: none;
    }

    .landing-page__container .light-theme__bubble,
    .header-container .light-mode__menus,
    .mobile-list__container .light-switch__themes,
    .header-container .dark-theme__black {
        display: block;
    }

    .landing-page__container .question-section {
        background-image: url('../images/light-mode-stars.png'), url('../images/about-gradient.svg');
        border: 1px solid var(--border-color);
    }

    .header-container .header-section__desktop {
        box-shadow: 2px 3px 23px #EAD9F9;
    }

    .landing-page__container .mobile-semicircle__section {
        background: none;
    }

    body .stats-image-light {
        display: block;
    }

    body .stats-image-dark {
        display: none;
    }

    .contact-us_body .contact-us__main-section.star-container {
        background-image: url("../images/light-mode-stars.png");
    }

    .landing-banner .star-container {
        background-image: url("../images/light-mode-stars.png");
    }

    .landing-banner .light-mode__circle-before {
        opacity: 0;
        transform: translateY(50px);
    }

    .landing-banner .banner-container.light-mode__circles {
        opacity: 1;
        transform: translateY(0);
        background-image: url("../images/light-mode-small-circles.svg");
    }

    @media screen and (max-width: 991px) {
        .header-container .search-tab .search-tab__light {
            display: block;
        }
    }

    @media screen and (max-width: 767px) {
        .header-container {
            border-bottom: 1px solid var(--border-color);
        }

        .header-container .header-section {
            box-shadow: none;
        }

        .mobile-list__container .switch-section .light-switch__txt {
            color: var(--link-active-color);
        }
    }

    /* Light Theme Code End*/
}





@media screen and (max-width: 991px) {
    .dark-theme .header-container .search-tab .search-tab__dark {
        display: block;
    }
}

/* Dark Theme Code End*/