:root {
  /* Colors Start */
  --body-bg-color: #120121;
  --header-bg-color: #160B19;
  --text-color: #FFFFFF;
  --text-color-primary: #A6A6A6;
  --border-color: #4E4E4E;
  --browse-text-color: #9747FF;
  --button-text-color: #000000;
  --button-bg-color: #ffffff;
  --button-text-color-primary: #000000;
  --button-bg-color-primary: #d5b4f0;
  --button-bg-hover-color-primary: #ffffff;
  --upload-text-bg-color: #0f001b;
  --input-bg-color: #010101;
  --contact-heading-color-primary: #8d26df;
  --contact-heading-color-secondary: #dbbfff;
  --contact-email-text-color: #b281f2;
  --link-color: #969696;
  --link-hover-color: #d5b4f0;
  --link-active-color: #d5b4f0;
  --input-text-color: #969696;
  --menu-drawer-color: #1C1C1C;
  --button-box-shadow-color: #E5D7F2;
  --button-outline-color: #E5D7F2;
  --faq-bg-color: #0F001C;
  --about-bg-color: #2F243880;
  --card-bg-color: #1C1C1C;
  --dropdown-bg-color: #000000;
  --dropdown-hover-color: #d5b4f0;
  --dropdown-text-hover-color: #000000;
  --buy-bg-color: #2B2B2B;
  --pagination-bg-color: #1C1C1C;
  --pagination-text-color: #8C8C8C;
  --pagination-text-hover-color: #FFFFFF;
  --pagination-bg-hover-color: #9747FF;
  --footer-text-color: #B1B1B1;
  --state-color: #00C464;
  --card-hover-color: #353535;
  --popup-image-bg-color: #1A1921;
  --popup-bg-color: #140620;
  --wallet-bg-color: #1A1921;
  --scroll-color: #969696;
  --search-bg-color: #1C1C1C;
  --fill-color: #ffffff;
  --arrow-fill-color: #ffffff;
  --circle-fill-color: #120121;
  --plus-minus-fill-color: #FFFFFF;
  --footer-bg-color: #0A0012;
  --nft-semicircle-bg-color-secondary: #120121;
  --nft-semicircle-bg-color-primary: rgb(124 66 129 / 10%);
  /* Color End */

  /* Font Family Start */
  --inter-regular: "inter-regular";
  --inter-medium: "inter-medium";
  --inter-semibold: "inter-semiBold";
  --outfit-light: "outfit-light";
  --outfit-regular: "outfit-regular";
  --outfit-medium: "outfit-medium";
  --outfit-semibold: "outfit-semiBold";
  /* Font Family End */

  /* Heading Font Size Start */
  /* Larger screen */
  --xl-h1-font-size: 58px;
  --xl-h1-line-height: 64px;
  --xl-h2-font-size: 28px;
  --xl-h2-line-height: 34px;
  --xl-h3-font-size: 20px;
  --xl-h3-line-height: 26px;
  /* Larger Screen */
  /* Tab View */
  --md-h1-font-size: 40px;
  --md-h1-line-height: 46px;
  --md-h2-font-size: 24px;
  --md-h2-line-height: 30px;
  --md-h3-font-size: 18px;
  --md-h3-line-height: 24px;
  /* Tab view */

  /* Mobile View */
  --sm-h1-font-size: 28px;
  --sm-h1-line-height: 34px;
  --sm-h2-font-size: 20px;
  --sm-h2-line-height: 26px;
  --sm-h3-font-size: 16px;
  --sm-h3-line-height: 22px;
  /* Mobile View */

  /* Heading Font Size End */
  /* Paragraph Fonts Start */
  /* Larger screen */
  --xl-p1-font-size: 18px;
  --xl-p1-line-height: 24px;
  --xl-p2-font-size: 16px;
  --xl-p2-line-height: 22px;
  --xl-p3-font-size: 14px;
  --xl-p3-line-height: 20px;
  --xl-p4-font-size: 13px;
  --xl-p4-line-height: 19px;

  /* Larger screen */
  /* Tab View */
  --md-p1-font-size: 16px;
  --md-p1-line-height: 22px;
  --md-p2-font-size: 14px;
  --md-p2-line-height: 20px;
  --md-p3-font-size: 13px;
  --md-p3-line-height: 19px;
  --md-p4-font-size: 12px;
  --md-p4-line-height: 18px;
  /* Tab View */
  /* Mobile View */
  --sm-p1-font-size: 14px;
  --sm-p1-line-height: 20px;
  --sm-p2-font-size: 13px;
  --sm-p2-line-height: 19px;
  --sm-p3-font-size: 12px;
  --sm-p3-line-height: 18px;
  --sm-p4-font-size: 10px;
  --sm-p4-line-height: 16px;
  /* Mobile View */
  /* Paragraph Fonts End */
}

/* For Light Theme */
@media (prefers-color-scheme: light) {
  :root {
    --body-bg-color: #FFFFFF;
    --header-bg-color: #FFFFFF;
    --text-color: #000000;
    --text-color-primary: #a6a6a6;
    --border-color: #c9c9c9;
    --browse-text-color: #9747ff;
    --button-text-color: #000000;
    --button-bg-hover-color: #ffffff;
    --button-text-color-primary: #000000;
    --button-bg-color-primary: #d5b4f0;
    --button-bg-hover-color-primary: #cb9cf2;
    --upload-text-bg-color: #ffffff;
    --input-bg-color: #ffffff;
    --contact-heading-color-primary: #8d26df;
    --contact-heading-color-secondary: #270d4a;
    --contact-email-text-color: #b281f2;
    --link-color: #969696;
    --link-hover-color: #000000;
    --link-active-color: #d5b4f0;
    --menu-drawer-color: #1C1C1C;
    --input-text-color: #969696;
    --button-box-shadow-color: #8D26DF;
    --button-outline-color: #E5D7F2;
    --faq-bg-color: #F6F6F6;
    --about-bg-color: #EFE5F8;
    --card-bg-color: #FFFFFF;
    --dropdown-bg-color: #FFFFFF;
    --dropdown-hover-color: #D5B4F0;
    --dropdown-text-hover-color: #000000;
    --buy-bg-color: #dedede;
    --pagination-bg-color: transparent;
    --pagination-text-color: #8C8C8C;
    --pagination-text-hover-color: #000000;
    --pagination-bg-hover-color: #D5B4F0;
    --footer-text-color: #A9A9A9;
    --card-hover-color: #FFFFFF;
    --popup-image-bg-color: #ffffff;
    --popup-bg-color: #F1F1F1;
    --wallet-bg-color: #F0F0F0;
    --scroll-color: #969696;
    --search-bg-color: #1C1C1C;
    --circle-fill-color: #FFFFFF;
    --plus-minus-fill-color: #6F6F6F;
    --fill-color: #000000;
    --arrow-fill-color: #a6a6a6;
    --footer-bg-color: #FFFFFF;
    --nft-semicircle-bg-color-secondary: #FFFFFF;
    --nft-semicircle-bg-color-primary: #FFFFFF;
  }
}

body.light-theme {
  --body-bg-color: #FFFFFF;
  --header-bg-color: #FFFFFF;
  --text-color: #000000;
  --text-color-primary: #a6a6a6;
  --border-color: #c9c9c9;
  --browse-text-color: #9747ff;
  --button-text-color: #000000;
  --button-bg-hover-color: #ffffff;
  --button-text-color-primary: #000000;
  --button-bg-color-primary: #d5b4f0;
  --button-bg-hover-color-primary: #cb9cf2;
  --upload-text-bg-color: #ffffff;
  --input-bg-color: #ffffff;
  --contact-heading-color-primary: #8d26df;
  --contact-heading-color-secondary: #270d4a;
  --contact-email-text-color: #b281f2;
  --link-color: #969696;
  --link-hover-color: #000000;
  --link-active-color: #d5b4f0;
  --menu-drawer-color: #1C1C1C;
  --input-text-color: #969696;
  --button-box-shadow-color: #8D26DF;
  --button-outline-color: #E5D7F2;
  --faq-bg-color: #F6F6F6;
  --about-bg-color: #EFE5F8;
  --card-bg-color: #FFFFFF;
  --dropdown-bg-color: #FFFFFF;
  --dropdown-hover-color: #D5B4F0;
  --dropdown-text-hover-color: #000000;
  --buy-bg-color: #dedede;
  --pagination-bg-color: transparent;
  --pagination-text-color: #a6a6a6;
  --pagination-text-hover-color: #000000;
  --pagination-bg-hover-color: #cb9cf2;
  --footer-text-color: #A9A9A9;
  --card-hover-color: #FFFFFF;
  --popup-image-bg-color: #ffffff;
  --popup-bg-color: #F1F1F1;
  --wallet-bg-color: #F0F0F0;
  --scroll-color: #969696;
  --search-bg-color: #1C1C1C;
  --circle-fill-color: #FFFFFF;
  --plus-minus-fill-color: #6F6F6F;
  --fill-color: #000000;
  --arrow-fill-color: #a6a6a6;
  --nft-semicircle-bg-color-secondary: #FFFFFF;
  --nft-semicircle-bg-color-primary: #FFFFFF;
  --footer-bg-color: #FFFFFF;
}

body.dark-theme {
  /* Colors Start */
  --body-bg-color: #120121;
  --header-bg-color: #160B19;
  --text-color: #FFFFFF;
  --text-color-primary: #A6A6A6;
  --border-color: #4E4E4E;
  --browse-text-color: #9747FF;
  --button-text-color: #000000;
  --button-bg-color: #ffffff;
  --button-text-color-primary: #000000;
  --button-bg-color-primary: #d5b4f0;
  --button-bg-hover-color-primary: #ffffff;
  --upload-text-bg-color: #0f001b;
  --input-bg-color: #010101;
  --contact-heading-color-primary: #8d26df;
  --contact-heading-color-secondary: #dbbfff;
  --contact-email-text-color: #b281f2;
  --link-color: #969696;
  --link-hover-color: #d5b4f0;
  --link-active-color: #d5b4f0;
  --input-text-color: #969696;
  --menu-drawer-color: #1C1C1C;
  --button-box-shadow-color: #E5D7F2;
  --button-outline-color: #E5D7F2;
  --faq-bg-color: #0F001C;
  --about-bg-color: #2F243880;
  --card-bg-color: #1C1C1C;
  --dropdown-bg-color: #000000;
  --dropdown-hover-color: #d5b4f0;
  --dropdown-text-hover-color: #000000;
  --buy-bg-color: #2B2B2B;
  --pagination-bg-color: #1C1C1C;
  --pagination-text-color: #8C8C8C;
  --pagination-text-hover-color: #FFFFFF;
  --pagination-bg-hover-color: #9747FF;
  --footer-text-color: #B1B1B1;
  --state-color: #00C464;
  --card-hover-color: #353535;
  --popup-image-bg-color: #1A1921;
  --popup-bg-color: #140620;
  --wallet-bg-color: #1A1921;
  --scroll-color: #969696;
  --search-bg-color: #1C1C1C;
  --fill-color: #ffffff;
  --arrow-fill-color: #ffffff;
  --circle-fill-color: #120121;
  --plus-minus-fill-color: #FFFFFF;
  --footer-bg-color: #0A0012;
  --nft-semicircle-bg-color-secondary: #120121;
  --nft-semicircle-bg-color-primary: rgb(124 66 129 / 10%);
  /* Color End */


}

body.dark-theme {
  /* Colors Start */
  --body-bg-color: #120121;
  --header-bg-color: #160B19;
  --text-color: #FFFFFF;
  --text-color-primary: #A6A6A6;
  --border-color: #4E4E4E;
  --browse-text-color: #9747FF;
  --button-text-color: #000000;
  --button-bg-color: #ffffff;
  --button-text-color-primary: #000000;
  --button-bg-color-primary: #d5b4f0;
  --button-bg-hover-color-primary: #ffffff;
  --upload-text-bg-color: #0f001b;
  --input-bg-color: #010101;
  --contact-heading-color-primary: #8d26df;
  --contact-heading-color-secondary: #dbbfff;
  --contact-email-text-color: #b281f2;
  --link-color: #969696;
  --link-hover-color: #d5b4f0;
  --link-active-color: #d5b4f0;
  --input-text-color: #969696;
  --menu-drawer-color: #1C1C1C;
  --button-box-shadow-color: #E5D7F2;
  --button-outline-color: #E5D7F2;
  --faq-bg-color: #0F001C;
  --about-bg-color: #2F243880;
  --card-bg-color: #1C1C1C;
  --dropdown-bg-color: #000000;
  --dropdown-hover-color: #d5b4f0;
  --dropdown-text-hover-color: #000000;
  --buy-bg-color: #2B2B2B;
  --pagination-bg-color: #1C1C1C;
  --pagination-text-color: #8C8C8C;
  --pagination-text-hover-color: #FFFFFF;
  --pagination-bg-hover-color: #9747FF;
  --footer-text-color: #B1B1B1;
  --state-color: #00C464;
  --card-hover-color: #353535;
  --popup-image-bg-color: #1A1921;
  --popup-bg-color: #140620;
  --wallet-bg-color: #1A1921;
  --scroll-color: #969696;
  --search-bg-color: #1C1C1C;
  --fill-color: #ffffff;
  --arrow-fill-color: #ffffff;
  --circle-fill-color: #120121;
  --plus-minus-fill-color: #FFFFFF;
  --footer-bg-color: #0A0012;
  --nft-semicircle-bg-color-secondary: #120121;
  --nft-semicircle-bg-color-primary: rgb(124 66 129 / 10%);
  /* Color End */
}